/* Heading, then three rows: the problem stated on the left, answered by a real panel of
   the product on the right. Replaces a six-card hover-to-flip grid whose answers were
   hidden behind a gesture and unreachable by keyboard. */

/* The claim and its elaboration are one block at one size; contrast alone separates
   them, so the eye reads a single sentence rather than a title and a caption. */
.problem-solution_title___k_fl {
  margin: 0 auto 0.85rem;
  text-align: center;
  /* 36px / 30px, matching the text-4xl / text-3xl pair every other section heading
     uses (how-it-works, why-us, trader-types), and their #3d322c. */
  font-size: 2.25rem;
  line-height: 1.22;
  /* Lighter tracking than the hero: negative tracking that suits 76px over-tightens
     at this size. */
  letter-spacing: -0.019em;
  font-weight: 600;
  color: #3d322c;
  text-wrap: balance;
}

.problem-solution_standfirst__ZKUic {
  margin: 0 auto 3.25rem;
  max-width: 58ch;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.6;
  /* slate-500, not slate-400: on this near-white section slate-400 lands at 2.5:1,
     under the 3:1 floor for large text. This clears it at 4.6:1. */
  color: #64748b;
  text-wrap: balance;
}

.problem-solution_turns__NWKNx {
  display: grid;
  border-top: 1px solid #e2e8f0;
}

/* Hairlines between rows rather than boxes around them: the three read as one divided
   object, and the evidence panel stays the only bordered thing in the section. */
.problem-solution_turn__GGxp3 {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
  padding: 2.75rem 0;
}

.problem-solution_turn__GGxp3 + .problem-solution_turn__GGxp3 {
  border-top: 1px solid #e2e8f0;
}

/* The text column is centred within itself, so both layouts read the same whichever
   side the panel is on. */
.problem-solution_side__aX15X {
  text-align: center;
}

/* Sits on the title's baseline row. `flex-shrink: 0` keeps it from squashing when the
   title wraps at narrow widths. */
.problem-solution_turnIcon__SONBD {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: #94a3b8;
}

.problem-solution_turnTitle__yvDI6 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 0 0.6rem;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #1c1917;
}

.problem-solution_turnText__D2olJ {
  margin: 0 auto;
  max-width: 32ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #64748b;
}

/* Elevation rather than an outline, which is what makes it read as a screenshot
   instead of markup. */
.problem-solution_evidence__qCTsT {
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 16px 40px -18px rgba(15, 23, 42, 0.22),
    0 2px 6px -2px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(15, 23, 42, 0.05);
}

.problem-solution_evidence__qCTsT img {
  display: block;
  width: 100%;
  height: auto;
}

/* Each row assembles in reading order - icon and title, then the line beneath, then the
   evidence arriving from the right. The direction carries the argument: the problem is
   stated on the left and the product answers from the right. */
.problem-solution_side__aX15X,
.problem-solution_turnText__D2olJ,
.problem-solution_evidence__qCTsT {
  opacity: 0;
}

.problem-solution_turnsVisible__KV5fw .problem-solution_side__aX15X {
  animation: problem-solution_psInLeft__vzuUV var(--reveal-duration) var(--reveal-ease) calc(var(--delay, 0ms))
    forwards;
}

.problem-solution_turnsVisible__KV5fw .problem-solution_turnText__D2olJ {
  animation: problem-solution_psInUp__NddkP var(--reveal-duration) var(--reveal-ease)
    calc(var(--delay, 0ms) + var(--reveal-stagger)) forwards;
}

.problem-solution_turnsVisible__KV5fw .problem-solution_evidence__qCTsT {
  animation: problem-solution_psInRight__YX4ds var(--reveal-duration) var(--reveal-ease)
    calc(var(--delay, 0ms) + var(--reveal-stagger) * 2) forwards;
}

@keyframes problem-solution_psInLeft__vzuUV {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes problem-solution_psInUp__NddkP {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes problem-solution_psInRight__YX4ds {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Every other row puts the panel on the left. Scoped above the stacking breakpoint so
   the single-column order stays title-then-panel on phones. Each element still enters
   from its own side, so the motion agrees with the layout rather than fighting it. */
@media (min-width: 861px) {
  .problem-solution_turnReversed__2QFIK {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  }

  .problem-solution_turnReversed__2QFIK .problem-solution_evidence__qCTsT {
    grid-column: 1;
    grid-row: 1;
  }

  .problem-solution_turnReversed__2QFIK .problem-solution_side__aX15X {
    grid-column: 2;
    grid-row: 1;
  }

  .problem-solution_turnsVisible__KV5fw .problem-solution_turnReversed__2QFIK .problem-solution_side__aX15X {
    animation-name: problem-solution_psInRight__YX4ds;
  }

  .problem-solution_turnsVisible__KV5fw .problem-solution_turnReversed__2QFIK .problem-solution_evidence__qCTsT {
    animation-name: problem-solution_psInLeft__vzuUV;
  }
}

@media (max-width: 860px) {
  .problem-solution_title___k_fl {
    font-size: 1.875rem;
    line-height: 1.26;
    letter-spacing: -0.015em;
  }

  .problem-solution_standfirst__ZKUic {
    margin-bottom: 2.25rem;
    font-size: 1rem;
  }

  .problem-solution_turn__GGxp3 {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    padding: 2rem 0;
  }

  .problem-solution_turnTitle__yvDI6 {
    gap: 0.6rem;
    font-size: 1.375rem;
  }

  .problem-solution_turnText__D2olJ {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem-solution_side__aX15X,
  .problem-solution_turnText__D2olJ,
  .problem-solution_evidence__qCTsT {
    opacity: 1;
    transform: none;
  }

  .problem-solution_turnsVisible__KV5fw .problem-solution_side__aX15X,
  .problem-solution_turnsVisible__KV5fw .problem-solution_turnText__D2olJ,
  .problem-solution_turnsVisible__KV5fw .problem-solution_evidence__qCTsT {
    animation: none;
  }
}

/* Bento Grid Layout */
.features-overview_bentoGrid__eaRY_ {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card Sizes - 10 column grid */
.features-overview_cardLarge__dpWSZ {
  grid-column: span 4;
  grid-row: span 2;
}

.features-overview_cardMedium__7nw3M {
  grid-column: span 3;
  grid-row: span 1;
}

.features-overview_cardWide__Bhk9L {
  grid-column: span 5;
  grid-row: span 1;
}

.features-overview_cardTall__qjFpq {
  grid-column: span 3;
  grid-row: span 2;
}

.features-overview_cardFeatured__jpWMu {
  grid-column: span 10;
  grid-row: span 1;
}

.features-overview_cardFeatured3__T3rvW {
  grid-column: span 6;
  grid-row: span 1;
}

.features-overview_cardFeatured2__DVcrL {
  grid-column: span 4;
  grid-row: span 1;
}

/* Base Card Styles */
.features-overview_bentoCard__mTUAO {
  position: relative;
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  transition-delay: var(--delay, 0ms);
}

.features-overview_bentoCardVisible__PQAHQ {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

/*
 * Hover stays neutral. The accent colour is kept for the "Explore" link only - running it around
 * the border and as a glow made every tile shout a different colour, which read as noise.
 */
.features-overview_bentoCard__mTUAO.features-overview_bentoCardVisible__PQAHQ:hover {
  transform: translateY(-3px);
  border-color: #dbe3ec;
  box-shadow:
    0 12px 32px -14px rgba(15, 23, 42, 0.18),
    0 2px 8px -2px rgba(15, 23, 42, 0.06);
  transition-delay: 0ms;
  z-index: 10;
}

/* Card Link */
.features-overview_cardLink__aLgW_ {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Illustration Area */
.features-overview_illustrationWrapper__SC0wQ {
  flex: 1;
  min-height: 140px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  overflow: hidden;
}

.features-overview_cardLarge__dpWSZ .features-overview_illustrationWrapper__SC0wQ {
  min-height: 220px;
}

.features-overview_cardTall__qjFpq .features-overview_illustrationWrapper__SC0wQ {
  min-height: 200px;
}

.features-overview_cardFeatured__jpWMu .features-overview_illustrationWrapper__SC0wQ {
  min-height: 180px;
  padding: 1rem 1.5rem;
}

/* ========================================
   ILLUSTRATION BAND - REAL APP SCREENSHOT
   A fixed-height band, flush to the card edges, identical on every tile. `flex: 1 0 <height>`
   rather than `height` alone: .illustrationWrapper is `flex: 1`, whose 0% basis would otherwise
   win and let the screenshot's natural height drive the card.
   ======================================== */
.features-overview_illustrationBleed__Z21n3 {
  position: relative;
  flex: 1 0 300px;
  height: 300px;
  min-height: 0;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  background: #f8fafc;
}

/* `object-fit: cover` crops each screenshot at whatever row happens to land on the
   card's bottom edge, and that row moves with the viewport, so a capture can end
   mid-candle or on a chart gridline and read as a hard rule. Fading the last strip
   into the card background makes the crop land softly at every width.
   This is the second line of defence only: app chrome (scrollbars, panel edges)
   is cropped out of the captures themselves rather than veiled here. */
.features-overview_illustrationBleed__Z21n3::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3.5rem;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.72) 55%,
    #ffffff 100%
  );
  pointer-events: none;
}

.features-overview_cardFeatured__jpWMu .features-overview_illustrationBleed__Z21n3 {
  flex: 1 0 260px;
  height: 260px;
  padding: 0;
}

.features-overview_cardFeatured2__DVcrL .features-overview_illustrationBleed__Z21n3,
.features-overview_cardFeatured3__T3rvW .features-overview_illustrationBleed__Z21n3 {
  flex: 1 0 300px;
  height: 300px;
}

/* Card Content */
.features-overview_cardContent__5bkm6 {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid #f1f5f9;
}

.features-overview_cardTitle__UZzDE {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.features-overview_cardLarge__dpWSZ .features-overview_cardTitle__UZzDE {
  font-size: 1.25rem;
}

.features-overview_cardDescription___PIPD {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.features-overview_cardCta__mQtPZ {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-color, #2196F3);
  transition: gap 0.2s ease;
}

.features-overview_bentoCard__mTUAO:hover .features-overview_cardCta__mQtPZ {
  gap: 0.625rem;
}

.features-overview_ctaIcon__uQ4wA {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.features-overview_bentoCard__mTUAO:hover .features-overview_ctaIcon__uQ4wA {
  transform: translateX(2px);
}

/* ==================== */
/* Responsive Styles    */
/* ==================== */

@media (max-width: 1024px) {
  .features-overview_bentoGrid__eaRY_ {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .features-overview_cardLarge__dpWSZ {
    grid-column: span 2;
    grid-row: span 1;
  }

  .features-overview_cardWide__Bhk9L {
    grid-column: span 1;
  }

  .features-overview_cardTall__qjFpq {
    grid-column: span 1;
    grid-row: span 1;
  }

  .features-overview_cardFeatured__jpWMu {
    grid-column: span 2;
  }

  .features-overview_cardFeatured3__T3rvW {
    grid-column: span 2;
  }

  .features-overview_cardFeatured2__DVcrL {
    grid-column: span 2;
  }

  .features-overview_cardLarge__dpWSZ .features-overview_illustrationWrapper__SC0wQ,
  .features-overview_cardTall__qjFpq .features-overview_illustrationWrapper__SC0wQ {
    min-height: 160px;
  }

  .features-overview_illustrationBleed__Z21n3,
  .features-overview_cardFeatured__jpWMu .features-overview_illustrationBleed__Z21n3,
  .features-overview_cardFeatured2__DVcrL .features-overview_illustrationBleed__Z21n3,
  .features-overview_cardFeatured3__T3rvW .features-overview_illustrationBleed__Z21n3 {
    flex: 1 0 240px;
    height: 240px;
  }
}

@media (max-width: 640px) {
  .features-overview_bentoGrid__eaRY_ {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .features-overview_cardLarge__dpWSZ,
  .features-overview_cardMedium__7nw3M,
  .features-overview_cardWide__Bhk9L,
  .features-overview_cardTall__qjFpq,
  .features-overview_cardFeatured__jpWMu,
  .features-overview_cardFeatured2__DVcrL,
  .features-overview_cardFeatured3__T3rvW {
    grid-column: span 1;
    grid-row: span 1;
  }

  .features-overview_illustrationWrapper__SC0wQ {
    min-height: 120px !important;
    padding: 1rem;
  }

  .features-overview_illustrationBleed__Z21n3,
  .features-overview_cardFeatured__jpWMu .features-overview_illustrationBleed__Z21n3,
  .features-overview_cardFeatured2__DVcrL .features-overview_illustrationBleed__Z21n3,
  .features-overview_cardFeatured3__T3rvW .features-overview_illustrationBleed__Z21n3 {
    flex: 1 0 190px;
    height: 190px;
    min-height: 0 !important;
    padding: 0;
  }

  .features-overview_cardContent__5bkm6 {
    padding: 1rem 1.25rem 1.25rem;
  }

  .features-overview_cardTitle__UZzDE {
    font-size: 1rem !important;
  }

  .features-overview_cardDescription___PIPD {
    font-size: 0.8125rem;
  }
}

/*
 * Reduced motion: the cards and alert rows start at opacity 0 and are revealed by a class the
 * IntersectionObserver adds. Honour the preference by skipping the movement and the transition,
 * matching how every other animated block in this repo behaves.
 */
@media (prefers-reduced-motion: reduce) {
  .features-overview_bentoCard__mTUAO,
  .features-overview_bentoCardVisible__PQAHQ {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .features-overview_bentoCard__mTUAO.features-overview_bentoCardVisible__PQAHQ:hover {
    transform: none;
  }
}