/* ============================================
   Tablet — ≤ 1024px
   ============================================ */
@media (max-width: 1024px) {
  /* Desktop positions these with left:50% + a large fixed margin-left,
     sized for wide viewports where the crystal bleeds off the screen
     edge. At tablet width that fixed offset pushes it fully outside the
     viewport (clipped by html's overflow-x:hidden), so anchor to the
     actual edge instead. */
  /* Same padding/rotation offset as the mobile rule below: bleed the box
     well past the right edge so the rock enters from the corner. */
  .hero__crystal--tr { left: auto; right: -16vw; margin-left: 0; margin-top: 0; top: -30px; width: 46vw; }
  .hero__crystal--bl { left: -6vw; margin-left: 0; bottom: -80px; width: 40vw; }

  /* Fewer, wider gradient facets as the strip narrows — 12 thin stripes
     on a tablet-width viewport reads as noisy banding rather than a
     faceted surface. */
  .hero__bg { grid-template-columns: repeat(9, 1fr); }
  .hero__bg-col:nth-child(4n) { display: none; }

  /* .container only gets real side margin once the viewport clears its
     1200px max-width — below that it sits flush edge-to-edge, so the
     corner dots' -5px overhang (see .container:before/:after up top)
     pokes 5px past the actual viewport on both sides and forces a
     horizontal scrollbar. Doubled class matches/beats those rules'
     specificity; being later in the cascade wins the tie. .research's
     dots are matched via the 3-class ".research .container.bor-b"
     selector though, which outranks the doubled class here (2 classes)
     regardless of source order — needs its own override to actually
     flush, or its -5px overhang alone still overflows the viewport. */
  .container.container:before { left: 0; }
  .container.container:after { right: 0; }
  .research .container.bor-b:before { left: 0; }
  .research .container.bor-b:after { right: 0; }

  .pricing__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .price-card { max-width: 380px; }

  .logos__grid { grid-template-columns: repeat(3, 1fr); }


  .testimonial__grid { grid-template-columns: 1fr; }
  .testimonial__slide { grid-template-columns: 1fr; }
  .testimonial__photo { width: 90px; height: 110px; }

  .not-list__hub { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
}

/* ============================================
   Tablet rhythm — 761px to 1024px
   One vertical rhythm for the whole band, sitting between the phone scale
   (48/24/48) and desktop's 64-96: 56px above a section heading, 32px
   below it, 56px closing out the section body. Desktop's values were tuned
   for a 1200px container and read heavy once the sections narrow.
   ============================================ */
@media (max-width: 1024px) and (min-width: 761px) {
  /* Desktop's 220/180 clears a taller navbar and gives the crystal art
     room to bleed; at tablet width it just makes the hero oversized. */
  .container.hero__content { padding-block: 160px 32px; }

  /* Section heading rows. */
  .testimonial .container.bor-b:not(:last-child),
  .research .container.bor-b:not(:last-child),
  .layers .container.bor-b:not(:last-child) {
    padding-block: 56px 32px;
  }

  /* Section bodies + self-contained sections. */
  .layers .container.layers__list-wrap { padding-block: 32px 56px; }
  .logos .container { padding-block: 56px; }
  .pricing .container { padding-block: 56px; }
  .mission .container { padding-block: 56px; }
  .not-list .container.bor-b { padding-block: 56px; }
  .partner .container.bor-b { padding-block: 56px; }
  .research .container:last-child { padding-bottom: 56px; }
  .testimonial .container.bor-b:last-child { padding-bottom: 56px; }
  .cta-band .container.bor-t { padding-block: 72px; }
  .final-cta .container.final-cta__content { padding-block: 56px 72px; }

  /* Card rows: the grid gap carries the space between cards, so it needs
     to be a real gap once the dividers stop doing that visual work. */
  /* The portraits break out above their frame by design; at tablet width the
     section's top rule cut straight through Alok's head, so open up the top. */
  .team__grid { gap: var(--sp-8); padding-block: 72px 56px; }
  .research__grid { gap: var(--sp-8); }
  .layers__grid { gap: var(--sp-6); }
  .testimonial__slide { padding-block: var(--sp-8); }

  .site-footer__bottom { padding-top: var(--sp-12); }

  /* The coach card is absolutely anchored to the hero's bottom-right corner,
     which at desktop width sits well clear of the centered CTA row. Once the
     viewport narrows the two land on top of each other, so take the card out
     of the corner and let it sit under the buttons in normal flow. */
  .hero__coach-card {
    position: relative;
    z-index: 6;
    right: auto;
    bottom: auto;
    max-width: 460px;
    margin: var(--sp-6) auto 0;
  }
  .hero { padding-bottom: var(--sp-8); }
  /* In flow the card is centered and full-ish width, so the bottom-left
     crystal now lands on top of it. Push the rock further off the edge and
     keep it behind the card. */
  .hero__crystal--bl { left: -13vw; bottom: -60px; width: 34vw; z-index: 1; }

  /* The copy column runs the full container width while the price card is
     centered under it, which reads as two unrelated blocks. Center both and
     cap the measure. */
  .pricing__grid { justify-items: center; gap: var(--sp-8); }
  .pricing__copy { max-width: 640px; text-align: center; }

  /* Two columns with a 380px gutter for the crystal leaves each card only a
     few words wide here. Stack instead: crystal centered on top, then the
     IS column, then the IS NOT column (that's the source order). */
  .not-list__diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-10);
    padding-top: var(--sp-4);
    max-width: 620px;
  }
  .not-list__hub { position: static; margin: 0; }
  .not-list__col { width: 100%; }
  .not-list__item-wrap { max-width: none; }
  .not-list__divider { display: none; }
  /* The per-item float wobble reads as organic drift when the cards sit in
     two narrow columns; full width and stacked, it just looks like the rows
     are misaligned with each other. */
  .not-list__item--1 .not-list__item, .not-list__item--2 .not-list__item,
  .not-list__item--3 .not-list__item, .not-list__item--4 .not-list__item,
  .not-list__item--5 .not-list__item, .not-list__item--6 .not-list__item,
  .not-list__item--7 .not-list__item, .not-list__item--8 .not-list__item,
  .not-list__item--9 .not-list__item, .not-list__item--10 .not-list__item,
  .not-list__item--11 .not-list__item, .not-list__item--12 .not-list__item {
    animation: none;
  }

  /* The price card is the only thing in the stacked pricing row, so centering
     it (and its contents, to match the now-centered copy above) reads better
     than leaving everything hard left. */
  .price-card { margin-inline: auto; align-items: center; text-align: center; }
  /* margin-top:auto only creates space when the grid stretches this card to
     match the copy column's height; in a single-column row there's no slack,
     so the button sits flush under the price. */
  .price-card__cta { margin-top: var(--sp-6); }
}



/* ============================================
   Compact nav — 761px to 1024px
   ============================================ */
@media (max-width: 1024px) and (min-width: 761px) {
  /* The full desktop row (lockup + 5 links + CTA) is wider than the viewport
     anywhere below 1025px — the CTA pill runs past the right edge. Shrinking
     the links and CTA to fit only crowded both edges, so use the same
     hamburger + slide-out menu the phone layout uses. */
  .navbar__links, .navbar__cta { display: none; }
  .navbar__toggle { display: flex; }
  .mobile-menu { display: flex; }
  .navbar { padding: var(--sp-2); }
  .navbar__brand { padding-left: var(--sp-3); }
  .site-header__row { padding-inline: var(--sp-6); }
}


/* ============================================
   Mobile — ≤ 760px
   ============================================ */
@media (max-width: 760px) {
  :root { --gutter: 20px; --sp-20: 56px; --sp-24: 64px; }

  /* .container's own side borders still don't belong at this width. */
  .container { border-left: none; border-right: none; }

  .site-header__row { padding-inline: var(--gutter); }
  .navbar__links, .navbar__cta { display: none; }
  .navbar__toggle { display: flex; }
  .navbar { padding: var(--sp-2); }
  .navbar__brand { padding-left: var(--sp-3); }
  .mobile-menu { display: flex; }

  /* Half the facets of the tablet step — same reasoning, narrower still.
     (nth-child(even) is a superset of the tablet step's nth-child(4n),
     so no need to un-hide those first.) */
  .hero__bg { grid-template-columns: repeat(6, 1fr); }
  .hero__bg-col:nth-child(even) { display: none; }

  /* Desktop's 220px/180px is sized to clear the desktop navbar and give
     the crystal art room to bleed — on mobile there's no room to spare,
     and it's most of why the section reads as oversized. */
  .container.hero__content { padding: 120px var(--gutter) 40px; }

  .hero__title-logo { width: clamp(260px, 70vw, 400px); }
  .hero__subtitle { font-size: 1.05rem; }
  .hero__actions { flex-direction: column; gap: var(--sp-4); width: 100%; }
  .hero__actions .btn-light { width: 100%; justify-content: center; }
  /* Desktop lets this crystal bleed ~18% of the viewport past the right
     edge; at -8vw the same art sat almost fully on screen, which reads as
     the rock drifting inward instead of entering from the corner. Match
     the desktop bleed ratio and scale the art up to compensate. */
  .hero__crystal--tr { left: auto; right: -20vw; margin-left: 0; width: 54vw; top: -6px; }
  /* Pulled further left/down than tablet so only a small sliver peeks
     out from behind the coach card instead of jutting past its corner. */
  .hero__crystal--bl { left: -20vw; margin-left: 0; width: 34vw; bottom: -60px; }
  /* padding, not the card's own margin-bottom, closes out .hero — a
     trailing margin on the last in-flow child collapses through a
     parent with no bottom border/padding, so it'd land outside .hero's
     box and its background would cut off right at the card instead of
     extending through the gap. */
  .hero { padding-bottom: var(--gutter); }
  /* z-index above .hero__crystal (5) so the card stays on top of the
     rock's sliver instead of the rock rendering in front of it. */
  .hero__coach-card { position: relative; z-index: 6; right: auto; bottom: auto; max-width: none; margin: var(--sp-8) var(--gutter) 0; }

  .layers { padding-block: var(--sp-16) var(--sp-10); }
  .layers__copy { grid-template-columns: 1fr; gap: var(--sp-4); }
  /* The sequence frames are landscape (16:9). A vh-driven height here
     produces a tall, narrow box on a phone — object-fit:cover then has
     to blow the image up and crop away almost all of its width to fill
     that shape, reading as "zoomed in". Sizing the box to the image's
     own ratio instead means cover barely has to crop at all. */
  .layers__card-slot { height: auto; aspect-ratio: 16 / 9; }
  /* All 7 layers stack in one column below the visual. */
  .layers__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .layers__point { padding: var(--sp-5) var(--sp-5); }
  .layers__point p { font-size: var(--fs-sm); }
  /* The card stack is the section's last block, so it needs its own bottom
     room instead of ending flush against the next section's rule. */
  .layers__list-wrap { padding-block: var(--sp-8) var(--sp-12); }

  .logos .container { padding-block: var(--sp-12); }
  .logos__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-8); }

  .pricing__lede { font-size: 1.5rem; }
  .price-card { max-width: calc(100% - var(--gutter) * 2); margin-inline: auto; }

  /* margin-top:auto on the CTA relies on the grid stretching this card to
     match .pricing__copy's height (desktop's 2-column row) — once the grid
     stacks to a single column there's no extra height to push into, so the
     button would otherwise sit flush against the list above it. */
  .price-card__cta { margin-top: var(--sp-6); }

  /* padding-block:0 let the section's top rule sit flush on Alok's photo, so
     the line read as overlapping the gradient. Keep breathing room instead. */
  .team__grid { grid-auto-flow: row; grid-template-columns: 1fr; gap: var(--sp-12); margin-inline: 0; padding-block: var(--sp-10) var(--sp-12); }
  .team__divider { display: none; }
  .team-card { padding-inline: 0; padding-top: 0; }
  .team-card:not(:last-child) { border-right: none; }
  .team-card:not(:last-child)::before, .team-card:not(:last-child)::after { content: none; }

  .testimonial__grid { grid-template-columns: 1fr; }
  .testimonial__slide { grid-template-columns: 1fr; }
  /* Desktop's 32px side padding no longer lines up with the 20px page
     gutter once the cards run full width. */
  .testimonial__slide { padding: var(--sp-8) var(--gutter); }
  .testimonial__photo { width: 90px; height: 110px; }

  /* Two columns side by side, with the crystal absolutely centered over
     the divider, don't fit a phone screen — stack the crystal, then the IS
     column, then the IS-NOT column, full width, in plain document order
     (that's already the source order — see index.html). */
  .not-list__diagram { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); padding-top: var(--sp-6); }
  .not-list__hub { position: static; margin: 0; }
  .not-list__col { width: 100%; }
  .not-list__item-wrap { max-width: none; }
  .not-list__divider { display: none; }
  /* The per-item float wobble reads as organic drift when the card has room
     beside other content — full-width on a phone, it just looks like jitter. */
  .not-list__item--1 .not-list__item, .not-list__item--2 .not-list__item,
  .not-list__item--3 .not-list__item, .not-list__item--4 .not-list__item,
  .not-list__item--5 .not-list__item, .not-list__item--6 .not-list__item,
  .not-list__item--7 .not-list__item, .not-list__item--8 .not-list__item,
  .not-list__item--9 .not-list__item, .not-list__item--10 .not-list__item,
  .not-list__item--11 .not-list__item, .not-list__item--12 .not-list__item {
    animation: none;
  }

  /* min-height was 420px — the globe's crown is sunk by a fixed world-unit
     offset unrelated to canvas height, so a tall/narrow mobile canvas
     squeezed it into a thin sliver at the top with mostly empty space
     below. A shorter band keeps the canvas proportioned closer to
     desktop's, where the dome actually reads as a dome. */
  .cta-band { padding-top: var(--sp-8); min-height: 260px; }
  .cta-band__actions { flex-direction: column; gap: var(--sp-4); width: 100%; padding-inline: var(--gutter); }
  .cta-band__actions .btn { width: 100%; justify-content: center; }

  /* Desktop's oversized padding/font-size (tuned for a shrink-to-fit
     button) makes "SCHEDULE YOUR SESSION" + icon wider than a 100%-width
     box at this viewport — nowrap text pushed the icon out past the
     button's own edge and off the page. Scale both down so the content
     actually fits the stretched width. */
  .final-cta .btn {
    align-self: stretch;
    width: 100%;
    justify-content: center;
    padding: 18px 28px;
    font-size: var(--fs-label);
  }

  .research__grid { grid-auto-flow: row; grid-template-columns: 1fr; gap: var(--sp-12); margin-inline: 0; }
  .research-card { padding-inline: 0; padding-block: var(--sp-6) 0; }
  .research-card:not(:last-child) { border-right: none; }
  .research-card:not(:last-child)::before, .research-card:not(:last-child)::after { content: none; }
  /* padding-block above zeroes every card's bottom padding so it doesn't
     double up with the grid gap between cards — but that leaves the last
     card with none at all, so the section ends abruptly right against
     whatever comes next. Restore it just for that one card. */
  .research-card:last-child { padding-bottom: var(--sp-10); }
  /* On phones there is no hover, so the cards read as static blocks.
     Give each one a tappable card surface and a permanent link cue. */
  .research-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-lavender-2);
    padding: var(--sp-6);
  }
  .research-card:last-child { padding-bottom: var(--sp-6); }
  .research-card__icon { height: 200px; margin-bottom: var(--sp-6); }
  .research-card h3 {
    display: flex;
    align-items: center;
    gap: 0.4em;
  }
  .research-card__arrow-svg { opacity: 1; margin-left: 0; flex: 0 0 auto; }
  .research-card p { margin-bottom: var(--sp-4); }
  .research-card::after {
    content: "Read the paper";
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--text);
  }
  .research-card:not(:last-child)::after { content: "Read the paper"; position: static; width: auto; height: auto; background: none; border: none; border-radius: 0; }
  /* The last research card sits flush against the next section; add
     breathing room below the grid without touching the gap between cards. */
  .research .container:last-child { padding-bottom: var(--sp-12); }

  .partner .container.bor-b { padding-inline: var(--gutter); padding-block: var(--sp-12) var(--sp-12); }
  .partner h2 { padding-inline: 0; }
  .partner__copy { grid-auto-flow: row; grid-template-columns: 1fr; gap: var(--sp-6); margin-inline: 0; }
  .partner__copy p { padding-inline: 0; }

  .testimonial__slide p { font-size: var(--fs-body); }
  /* The edge-to-edge card stack is the section's last block, so the section
     itself carries the closing space. */
  .testimonial .container.bor-b:last-child { padding-bottom: var(--sp-12); }

  /* One rhythm for every section on a phone: 48px above a section heading,
     24px below it, 48px closing out the section body. Desktop's 64px each
     side reads heavy once the sections run back to back at this width. */
  .testimonial .container.bor-b:not(:last-child),
  .research .container.bor-b:not(:last-child),
  .layers .container.bor-b:not(:last-child) {
    padding-block: var(--sp-12) var(--sp-6);
  }
  .not-list .container.bor-b { padding-block: var(--sp-12); }
  .pricing .container { padding-block: var(--sp-12); }
  .mission .container { padding: var(--sp-12) var(--sp-6); }
  .mission__quote { font-size: var(--fs-lg); }
  .final-cta__content { padding-block: var(--sp-12); }

  .site-footer__row { flex-direction: column; gap: var(--sp-4); text-align: center; }
  .site-footer__bottom { padding-top: var(--sp-10); flex-direction: column; gap: var(--sp-2); text-align: center; }
}

/* ============================================
   Small mobile — ≤ 380px
   ============================================ */
@media (max-width: 380px) {
  .hero__title-logo { width: 88vw; }
  .price-card { padding: var(--sp-6) var(--sp-5); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}