/* ten — creator landing V2 DRAFT
 * Reference DNA: OpenAI news grid + ElevenLabs home.
 * System: warm near-white ground · near-black text · black pill CTAs ·
 * color ONLY via soft organic gradients contained in rounded surfaces
 * (the glow belongs to the app on screen, never to the studio chrome).
 * Type: system sans display (Helvetica Neue / system-ui) · Charter serif body ·
 *       system mono labels. (Webfonts were removed 2026-07-04 — see :root note.)
 */

:root {
  --bg: #FFFFFF;           /* pure white ground (Sameer, 2026-06-11) */
  --panel: #F0EDE7;        /* contained surface (the ElevenLabs band gray) */
  --card: #FFFFFF;
  --ink: #111213;          /* text + pill buttons */
  --ink-soft: #2A2B2E;     /* pill hover */
  --mute: #6E727A;
  --rule: #E5E1D8;         /* hairlines on light */
  --dark: #131416;         /* the one dark surface: the contact card */
  --dark-rule: #2C2D31;
  --dark-fg: #F2F1ED;
  --dark-mute: #9A9DA3;

  /* System-font stacks, locked 2026-07-04: the old self-hosted webfonts
     (Newsreader / Space Grotesk / Inter Tight / IBM Plex Mono) never loaded in
     production (broken urls in self-hosted.css), so the shipped brand look has
     always been these fallbacks. Decision: keep them. Serif = Charter on
     macOS/iOS, Georgia elsewhere. */
  --font-display: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-body: Charter, Georgia, serif;
  --font-serif: Charter, Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', monospace;

  --wide: 1140px;
  --pad-x: 32px;
  --r-card: 20px;
  --r-panel: 28px;

  /* Real height of the fixed .nav: 22px top pad + 48px logo + 22px bottom pad,
   * plus the notch inset in standalone/home-screen mode (0 in mobile Safari).
   * Anything that has to clear the nav — scroll anchoring, sticky bars — derives
   * from this instead of hardcoding a guess. Three separate mobile bugs came
   * from three different wrong guesses (76px, 90px, 100px). */
  --nav-h: calc(92px + env(safe-area-inset-top, 0px));

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

* { box-sizing: border-box; }
/* scroll-padding on the scrollport is the single source of truth for anchor
 * landing. Targets must NOT also set scroll-margin — the two are additive per
 * CSSOM View, which is what left an 74px dead gap under the nav on guide TOC
 * jumps. +12px is breathing room, not nav clearance. */
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.wide { width: 100%; max-width: var(--wide); margin: 0 auto; }
/* desktop: each section is its own full screen, content vertically centered.
 * mobile: collapse back to natural height + tighter padding (override below). */
.band {
  position: relative;
  width: 100%; padding: 76px var(--pad-x);
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
.band > .wide { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .band { min-height: 0; display: block; padding: 56px var(--pad-x); }
}

/* ---- type ---- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 20px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin: 0; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 20px; }
h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.01em; }

p, li { font-family: var(--font-body); font-size: 1.16rem; line-height: 1.6; margin: 0 0 1rem; }
@media (max-width: 720px) { p, li { font-size: 1.08rem; } }
.lede { font-size: clamp(1.18rem, 2vw, 1.42rem); line-height: 1.5; color: var(--mute); }
.lede strong { color: var(--ink); font-weight: 500; }
em { font-style: italic; }

/* ---- buttons: black pills (the reference CTA language) ---- */
.btn {
  font-family: var(--font-display); font-weight: 500; font-size: 0.98rem;
  letter-spacing: -0.005em;
  color: #FFFFFF; background: var(--ink);
  border: none; border-radius: 999px; padding: 15px 28px; cursor: pointer;
  text-decoration: none; display: inline-block; text-align: center;
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--ink-soft); transform: translateY(-1px); }
.btn--ghost {
  color: var(--ink); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: #FFFFFF; box-shadow: inset 0 0 0 1px #C9C4B8; }
.btn--light { color: var(--ink); background: #FFFFFF; }
.btn--light:hover, .btn--light:focus-visible { background: #E9E7E2; color: var(--ink); }
.btn--full { width: 100%; padding: 17px 28px; }

/* Gradient CTA: a deeper cut of the hero glow (indigo → violet), dark enough
 * for white text to pass WCAG AA. The one saturated element on the page. */
.btn--grad {
  color: #FFFFFF;
  background: linear-gradient(120deg, #4452CE 0%, #6A53CE 55%, #8A66D6 100%);
  box-shadow: 0 10px 26px -12px rgba(96, 82, 210, 0.55);
}
.btn--grad:hover, .btn--grad:focus-visible {
  background: linear-gradient(120deg, #3B49C4 0%, #5F49C6 55%, #7E5ACE 100%);
  box-shadow: 0 14px 30px -12px rgba(96, 82, 210, 0.65);
  color: #FFFFFF;
}

/* ---- nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  /* top padding adds the safe-area inset so the logo clears the notch/status bar */
  padding: calc(22px + env(safe-area-inset-top, 0px))
           max(var(--pad-x), env(safe-area-inset-right, 0px))
           22px
           max(var(--pad-x), env(safe-area-inset-left, 0px));
  display: flex; justify-content: space-between; align-items: center;
  /* the fixed nav spans the full width but its middle is empty; without this it
     would eat clicks on whatever scrolls beneath it (e.g. the showcase tabs when
     they line up with the nav). Make the empty bar click-through; re-enable pointer
     events only on the actual interactive children below. */
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav .mark, .nav-right, .nav-link, .nav-cta, .nav-toggle { pointer-events: auto; }
.nav .mark { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
/* aspect-ratio + flex-shrink:0 keep the square logo from being squished when the
 * nav's right side gets wide on mobile (it's a flex item otherwise compressed). */
.mark-logo { height: 48px; width: 48px; aspect-ratio: 1 / 1; display: block; flex-shrink: 0; object-fit: contain; }
.mark-word {
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; text-transform: none;
  white-space: nowrap; overflow: hidden;
  max-width: 200px; opacity: 1;
  transition: max-width 360ms var(--ease), opacity 240ms var(--ease), margin-left 360ms var(--ease);
}
/* collapse the wordmark away on scroll, leaving just the logo mark */
.nav.is-scrolled .mark-word { max-width: 0; opacity: 0; margin-left: -2px; }
/* on narrow screens, show just the logo mark */
@media (max-width: 480px) { .mark-word { display: none; } }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-link {
  font-family: var(--font-display); font-weight: 500; font-size: 0.88rem;
  color: var(--ink); text-decoration: none; padding: 9px 14px; border-radius: 999px;
  transition: color 140ms var(--ease), background 140ms var(--ease);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--ink); background: rgba(17, 18, 19, 0.05); }
.nav-cta {
  font-family: var(--font-display); font-weight: 500; font-size: 0.88rem;
  color: #FFFFFF; background: var(--ink); text-decoration: none;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--ink-soft); transform: translateY(-1px); }
/* ---- mobile menu: hamburger → full-screen overlay (narrow view only) ---- */
.nav-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 600px) {
  /* swap the inline links for a hamburger */
  .nav-right { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    appearance: none; background: none; border: 0; cursor: pointer;
    width: 44px; height: 44px; padding: 0; margin: -6px -10px -6px 0;
    color: var(--ink); position: relative;
  }
  .nav-toggle-bars { position: relative; display: block; width: 24px; height: 12px; }
  .nav-toggle-bars span {
    position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: transform 280ms var(--ease), top 220ms var(--ease);
  }
  .nav-toggle-bars span:nth-child(1) { top: 0; }
  .nav-toggle-bars span:nth-child(2) { top: 10px; }
  /* open → X */
  .nav-toggle.is-open .nav-toggle-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
  .nav-toggle.is-open .nav-toggle-bars span:nth-child(2) { top: 5px; transform: rotate(-45deg); }

  .mobile-menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 40;
    background: var(--bg);
    padding: calc(88px + env(safe-area-inset-top, 0px)) var(--pad-x)
             calc(28px + env(safe-area-inset-bottom, 0px));
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms;
  }
  .mobile-menu.is-open {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 280ms var(--ease), transform 280ms var(--ease);
  }
  .mobile-menu-links { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
  .mm-link {
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1.1;
    color: var(--ink); text-decoration: none;
    padding: 26px 2px; border-bottom: 1px solid var(--rule);
  }
  .mobile-menu-foot { margin-top: auto; }
}

/* ---- hero: giant LEFT-aligned serif on white, glow rising under the CTA ---- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left;
  padding-top: 128px; padding-bottom: 96px;
  /* overflow stays visible: the dusk glow bleeds through the fold into #belief
   * (V4, Sameer 2026-06-12). Tight gradient stops self-fade before the glow's
   * own edge, so nothing ever clips. */
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; max-width: var(--wide); margin: 0 auto;
}
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(3rem, 6.6vw, 5.6rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 24ch;   /* wide enough that the forced-break lines don't re-wrap */
}
.hero h1 .it { font-style: italic; }

/* The one saturated phrase in the hero: "transformation engine" */
.hero h1 .hero-grad {
  font-style: italic;
  color: #6A53CE;
  background: linear-gradient(96deg, #5B6FE0 0%, #6A53CE 45%, #9E6BD8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.55;
  color: var(--ink); max-width: 52ch; margin: 28px 0 0;
}
.hero .cta-row { margin-top: 34px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }

/* The hero's one inline link: hairline underline, darkens on hover. Points at
 * #belief so the claim scrolls to the argument. */
.sub-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid #C9C4B8;
  transition: border-bottom-color 140ms var(--ease);
}
.sub-link:hover, .sub-link:focus-visible { border-bottom-color: var(--ink); }

.chip {
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--mute); background: var(--panel); border: 1px solid var(--rule);
  padding: 8px 16px; border-radius: 999px; margin: 0 0 30px;
}
.micro {
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute); margin: 18px 0 0;
}

/* the dusk glow straddling the fold (V4 bleed-through): 30vh above the fold,
 * ~32vh behind the top of #belief; tight stops so it fades on its own */
.glow-under {
  position: absolute; left: 50%; bottom: -32vh; transform: translateX(-50%);
  width: min(1100px, 96vw); height: 62vh;
  border-radius: 50%;
  filter: blur(48px) saturate(1.15);
  opacity: 0.75; pointer-events: none; z-index: 1;
}
.g-static {
  background:
    radial-gradient(50% 60% at 30% 40%, #B9A8F0 0%, transparent 62%),
    radial-gradient(55% 65% at 72% 36%, #7E96E8 0%, transparent 65%),
    radial-gradient(70% 70% at 50% 80%, #F3CDB4 0%, transparent 62%);
}

/* ---- the stage: gradient surface holding the phones ----
 * The ONLY color on the page lives here, and it belongs to the app on screen.
 * Two stacked glow layers crossfade between app palettes on the shared clock. */
.hero-visual { display: flex; flex-direction: column; gap: 16px; }
.stage {
  position: relative;
  border-radius: var(--r-panel);
  background: var(--panel);
  overflow: hidden;
  /* stage height comes from the trio itself + reserved room for the chip below,
     so the chip can never overlap the phone at any width */
  padding: clamp(36px, 4.5vw, 56px) 0 84px;
  display: flex; flex-direction: column; align-items: center;
}
.glow {
  position: absolute; inset: -16%;
  opacity: 0;
  transition: opacity 1400ms var(--ease);
  filter: blur(34px) saturate(1.25);
  pointer-events: none;
}
.glow.is-on { opacity: 1; }

.phone-trio {
  position: relative;
  width: clamp(190px, 17vw, 240px);
  aspect-ratio: 780 / 1688;
  margin: 0 clamp(70px, 8vw, 120px);
  z-index: 1;
}
@media (max-width: 920px) {
  .phone-trio { width: clamp(190px, 44vw, 240px); margin: 0 clamp(64px, 16vw, 110px); }
}

.phone {
  position: absolute; inset: 0;
  aspect-ratio: 780 / 1688;
  background: #0B0C0E;
  border-radius: 38px;
  padding: 10px;
  box-shadow: 0 2px 2px rgba(17,18,19,0.05), 0 30px 60px -30px rgba(17,18,19,0.45), inset 0 0 0 2px rgba(255,255,255,0.06);
}
.phone--side { z-index: 0; filter: saturate(0.92) brightness(0.97); }
.phone--side::after {
  content: ""; position: absolute; inset: 0; border-radius: 38px;
  background: rgba(250,248,245,0.16);
  pointer-events: none;
}
.phone--left  { transform-origin: bottom right; transform: translate(calc(-1 * clamp(54px, 6.5vw, 96px)), -18px) rotate(-8deg) scale(0.86); }
.phone--right { transform-origin: bottom left;  transform: translate(clamp(54px, 6.5vw, 96px), -18px) rotate(8deg) scale(0.86); }
.phone--front { z-index: 1; }

.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 29px; overflow: hidden; background: #0B0C0E; }
.phone-screen .layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top; display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  will-change: opacity;
}
.phone-screen .layer.is-on { opacity: 1; }

/* Niche chip: names the lane on screen. White pill floating over the glow. */
.stage-chip {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-display); font-weight: 400; font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: rgba(255,255,255,0.92);
  padding: 9px 16px; border-radius: 999px; margin: 0;
  box-shadow: 0 1px 2px rgba(17,18,19,0.08);
  white-space: nowrap;
  transition: opacity 300ms var(--ease);
}
.stage-chip.is-fading { opacity: 0; }

.hero-visual-caption {
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute); margin: 0; text-align: center;
}

/* ---- the belief: editorial argument (claim → lede → paragraphs → kicker)
 * + proof explorer (featured story + anonymized serif list, click to open).
 * No mono in the list per Sameer 2026-06-12; serif titles, grotesk niche. ---- */
.manifesto { padding-top: 110px; position: relative; z-index: 2; }
.manifesto .wide { position: relative; z-index: 1; }
/* ambient dusk blooms inside the section (same family as the hero bleed) */
.mglow {
  position: absolute; border-radius: 50%;
  filter: blur(48px) saturate(1.15); pointer-events: none; z-index: 0;
  background:
    radial-gradient(50% 60% at 30% 40%, #B9A8F0 0%, transparent 62%),
    radial-gradient(55% 65% at 72% 36%, #7E96E8 0%, transparent 65%),
    radial-gradient(70% 70% at 50% 80%, #F3CDB4 0%, transparent 62%);
}
/* one glow per section, same dusk family, alternating sides so colour is spread
 * evenly down the whole page instead of stacking at the top. */
.mglow-b { left: -240px; top: 42%;    width: 820px; height: 560px; opacity: 0.42; } /* belief — left, lower */
.mglow-c { right: -220px; top: 16%;   width: 820px; height: 560px; opacity: 0.42; } /* ecosystem — right */
.mglow-d { left: -240px; bottom: 0%;  width: 780px; height: 520px; opacity: 0.36; } /* proof — left, below the pills */
.mglow-e { right: -240px; top: 30%;   width: 840px; height: 580px; opacity: 0.42; } /* builders — right */
.mglow-f { left: -220px; bottom: 4%;  width: 800px; height: 540px; opacity: 0.38; } /* faq — left */
/* keep grouped words from breaking across lines (hero + headlines) */
.nowrap { white-space: nowrap; }
/* a line break that only applies on wider screens; on mobile the text wraps
 * naturally instead (hero reads 2 lines on web, 3 on mobile). */
.br-desktop { display: inline; }
@media (max-width: 600px) { .br-desktop { display: none; } }

.belief-h {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  letter-spacing: -0.02em; line-height: 1.12;
  max-width: 24ch; margin: 0 0 16px;
}
.belief-h .it { font-style: italic; }
/* belief headline: widen so "...tech entrepreneurs." fits 2 lines on web
 * (it wrapped to 3 at 24ch). Mobile keeps wrapping naturally. */
#belief .belief-h { max-width: 30ch; }
@media (max-width: 720px) { #belief .belief-h { max-width: 24ch; } }
.belief-lede {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5;
  color: var(--mute); margin: 0 0 40px;
}
.belief-par p {
  font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.65;
  color: #3B3D42; max-width: 62ch; margin: 0 0 1.1em;
}
.belief-par p:last-child { margin-bottom: 0; }
.belief-par .it { font-style: italic; }
#belief .belief-par p { font-size: 1.08rem; }
#builders .belief-par { margin-top: 56px; }
.belief-kick {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.6rem, 2.9vw, 2.25rem);
  letter-spacing: -0.016em; line-height: 1.24;
  max-width: 38ch; margin: 72px 0 48px;
}
.belief-kick .it { font-style: italic; }

/* courses vs ecosystem — two quiet columns, tonal contrast, no chrome.
 * sits on the section's own ambient glow; no separate background. */
/* web: header row (faint | gap | ink) above 3 paired rows; each .compare-row
 * is its own before → after grid so the arrow centers between the pair.
 * mobile: each row stacks as before ↓ after, preserving the pairing. */
.compare {
  display: grid; grid-template-columns: 1fr auto 1fr;
  column-gap: 40px; row-gap: 0;
  margin: 48px 0 8px; align-items: start;
}
.compare-head {
  font-family: var(--font-body); font-size: 1.1rem; letter-spacing: -0.005em;
  padding-bottom: 22px; margin: 0 0 8px; border-bottom: 1px solid var(--rule);
}
.compare-head.is-faint { color: var(--mute); }
.compare-head.is-ink { color: var(--ink); }
.compare-head-gap { border: 0; }

/* each pair spans all three columns and re-uses the same track sizes */
.compare-row {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr auto 1fr;
  column-gap: 40px; align-items: center;
}
.compare-line {
  font-family: var(--font-body); font-size: 1.18rem; line-height: 1.5;
  margin: 0; padding: 16px 0;
}
/* darker than before for clearer left/right contrast */
.compare-line.is-faint { color: #908C82; }
.compare-line.is-ink { color: var(--ink); }
.compare .it { font-style: italic; }

.compare-arrow {
  font-size: 1.05rem; line-height: 1.5; color: #C9C4B8; text-align: center;
}
/* short "word → word" form: web hides it, mobile shows it (see below) */
.compare-short { display: none; }

@media (max-width: 720px) {
  /* mobile: three single-line "from → to" rows. Hide the full phrase columns
   * and the heads; show the condensed word→word line instead. */
  .compare { grid-template-columns: 1fr; row-gap: 0; }
  .compare > .compare-head, .compare > .compare-head-gap { display: none; }
  .compare-row {
    grid-template-columns: 1fr;
    padding: 16px 0; border-top: 1px solid var(--rule);
  }
  .compare-row:first-of-type { border-top: 0; }
  .compare-row .compare-line, .compare-row .compare-arrow { display: none; }
  .compare-short {
    display: block; margin: 0; white-space: nowrap;
    /* scales down on the narrowest phones so each "two words → two words" pair
     * stays on one line (≈1.15rem at 390px, smaller toward 320px). */
    font-family: var(--font-body); font-size: clamp(0.95rem, 4.4vw, 1.15rem);
    line-height: 1.4; letter-spacing: -0.005em;
  }
  .compare-short .cs-from { color: #908C82; }
  .compare-short .cs-arrow { color: #C9C4B8; margin: 0 0.38em; }
  .compare-short .cs-to { color: var(--ink); font-weight: 500; }
}
.compare-close {
  font-family: var(--font-body); color: var(--ink);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.34;
  letter-spacing: -0.012em; margin: 40px 0 0; white-space: nowrap;
}
.compare-close .it { font-style: italic; }
@media (max-width: 640px) { .compare-close { white-space: normal; } }

/* the asset crescendo — capstone of the proof beat */
.belief-asset {
  font-family: var(--font-body); color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.34;
  letter-spacing: -0.014em; max-width: 46ch; margin: 56px 0 0;
}
.belief-asset .it { font-style: italic; }

/* ============================================================================
 * COMPARISON GRID — Ten vs Kajabi vs Uscreen.
 * Clean monochrome feature table on white. Our column is a soft neutral lane so
 * it reads as the anchor without color; two cell states — black check (yes) /
 * muted dash (no). Tuned to fit within one viewport. Sits above the dashboard.
 * ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* the band centers a large grid so this section fills the viewport */
#compare { padding-top: 40px; padding-bottom: 40px; }
#compare .belief-h {
  font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.1;
  max-width: 20ch; margin: 0;
}
.cmp-lede { max-width: 60ch; margin: 0 0 clamp(22px, 3.2vh, 40px); }
.cmp-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 12px;
}

.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%; border-collapse: separate; border-spacing: 0;
  min-width: 560px; /* below this, horizontal scroll rather than crush the marks */
  font-family: var(--font-display);
}
.cmp th, .cmp td { text-align: center; vertical-align: middle; }

/* header row */
.cmp thead th {
  padding: 0 12px 18px; font-weight: 500; font-size: 1.12rem; color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.cmp thead th.cmp-feat-h {
  text-align: left; font-family: var(--font-body); font-size: 0.98rem;
  font-weight: 400; color: var(--mute); width: 46%;
}
.cmp-co { display: block; font-weight: 500; letter-spacing: -0.01em; }
.cmp-tag {
  display: inline-block; margin-top: 7px; padding: 3px 11px; border-radius: 999px;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #FFFFFF; background: var(--ink);
}

/* row headers (feature names) — tall, roomy rows so the grid fills the screen */
.cmp tbody th {
  text-align: left; font-family: var(--font-body); font-weight: 400;
  font-size: 1.2rem; line-height: 1.3; color: #2A2B2E;
  padding: clamp(18px, 2.7vh, 30px) 18px clamp(18px, 2.7vh, 30px) 2px;
  border-bottom: 1px solid var(--rule);
}
.cmp tbody td {
  padding: clamp(18px, 2.7vh, 30px) 12px; border-bottom: 1px solid var(--rule);
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

/* our column — soft neutral lane running the full height, rounded ends */
.cmp thead th.cmp-us, .cmp tbody td.cmp-us {
  background: rgba(17,18,19,0.035);
  border-left: 1px solid rgba(17,18,19,0.09);
  border-right: 1px solid rgba(17,18,19,0.09);
  width: 18%;
}
.cmp thead th.cmp-us {
  padding-top: 22px; border-top: 1px solid rgba(17,18,19,0.09);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
}
.cmp tbody tr:last-child td.cmp-us {
  border-bottom: 1px solid rgba(17,18,19,0.09);
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
}

/* the marks — simple black check, muted dash */
.cmp-mark {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  font-size: 1.4rem; line-height: 1;
}
.cmp-yes { color: var(--ink); }
.cmp-no { color: #B7B3AB; font-weight: 400; }

/* closing summary line — small, single line on desktop (copy tuned to fit) */
.cmp-foot {
  font-family: var(--font-serif); font-style: italic;
  font-size: 0.9rem; line-height: 1.4; color: var(--mute);
  margin: 20px 0 0; white-space: nowrap;
}

/* phones — fixed layout so the 4 columns obey their widths and wrap instead of
   overflowing; headline shrinks so the forced line break still fits; summary wraps */
@media (max-width: 720px) {
  #compare .belief-h { font-size: clamp(1.4rem, 5.6vw, 2rem); line-height: 1.12; max-width: none; }
  .cmp { min-width: 0; table-layout: fixed; }
  .cmp thead th { font-size: 0.82rem; padding: 0 3px 11px; }
  .cmp thead th.cmp-feat-h { font-size: 0.72rem; width: 40%; }
  .cmp-tag { font-size: 0.52rem; padding: 2px 7px; margin-top: 5px; letter-spacing: 0.06em; }
  .cmp tbody th { font-size: 0.9rem; line-height: 1.25; padding: 14px 4px 14px 0; }
  .cmp tbody td { padding: 14px 2px; }
  .cmp thead th.cmp-us, .cmp tbody td.cmp-us { width: 20%; }
  .cmp-mark { width: 22px; height: 22px; font-size: 0.98rem; }
  .cmp-foot { white-space: normal; font-size: 0.9rem; }
}

/* ============================================================================
 * ONE DASHBOARD — "everything connected, we run it" (Kajabi-style).
 * A realistic app dashboard mockup: nav sidebar + KPI row + chart + connected
 * list. Left copy column sells the seamlessness; the "Managed by Ten" chip is
 * the differentiator (you own it, we operate it).
 * ========================================================================== */
#dashboard .wide {
  /* left = copy, right = the dashboard mockup. Bump the 2nd value (or drop the 1st)
     to make the mockup wider; lower the gap for a touch more room. */
  display: grid; grid-template-columns: 0.9fr 1.2fr; gap: 40px; align-items: center;
}
/* wide enough that "Your whole business." holds one line (business ends row 2)
 * and the lede wraps in three, "together." landing on the third */
#dashboard .belief-h { max-width: none; }
#dashboard .dash-lede { max-width: none; }
#dashboard .belief-lede { max-width: 46ch; }
@media (max-width: 900px) { #dashboard .wide { grid-template-columns: 1fr; gap: 36px; } }

.dash-lede { max-width: 42ch; }
.dash-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.dash-points li {
  /* widen to sit in line with the heading + lede above (was 38ch, which wrapped
     the bullets earlier than the rest of the copy and read as inset) */
  display: flex; align-items: flex-start; gap: 12px; margin: 0; max-width: 44ch;
  font-family: var(--font-body); font-size: 1.06rem; line-height: 1.4; color: #3B3D42;
}
.dash-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; font-size: 0.72rem; color: #FFFFFF;
  background: linear-gradient(135deg, #6E86E4, #6A53CE);
}

/* the mockup frame */
.dash-frame {
  border-radius: 16px; overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--rule);
  box-shadow: 0 40px 80px -40px rgba(40, 36, 70, 0.5);
}
.dash-bar {
  display: flex; gap: 7px; align-items: center;
  padding: 12px 16px; background: #F6F4F0; border-bottom: 1px solid var(--rule);
}
.dash-bar span { width: 10px; height: 10px; border-radius: 50%; background: #D8D4CC; }
.dash-body { display: grid; grid-template-columns: 190px 1fr; min-height: 340px; }
@media (max-width: 520px) { .dash-body { grid-template-columns: 1fr; } .dash-nav { display: none; } }

/* sidebar */
.dash-nav {
  border-right: 1px solid var(--rule); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 18px; background: #FBFAF8;
}
.dash-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px; }
.dash-brand-mark { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #6A53CE, #4452CE); display: grid; place-items: center; }
.dash-brand-mark svg { width: 14px; height: 14px; }
.dash-brand-name { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.dash-nav-list { display: flex; flex-direction: column; gap: 3px; }
.dash-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px;
  font-family: var(--font-display); font-size: 0.82rem; color: var(--mute);
}
.dash-nav-item.is-active { color: var(--ink); background: #EFEBF9; font-weight: 500; }
.dash-managed {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 7px 12px; border-radius: 999px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; color: #5B4BC4;
  background: rgba(126,150,232,0.12); border: 1px solid rgba(126,150,232,0.26);
}
.dash-managed-dot { width: 7px; height: 7px; border-radius: 50%; background: #2E9E6B; box-shadow: 0 0 0 3px rgba(46,158,107,0.18); }

/* simple stroked nav/list icons via ::before glyphs (kept lightweight) */
.di { width: 15px; height: 15px; flex: 0 0 auto; display: inline-block; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.di-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.di-book { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h5v16H6a2 2 0 0 0-2 2zM20 5a2 2 0 0 0-2-2h-5v16h5a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h5v16H6a2 2 0 0 0-2 2zM20 5a2 2 0 0 0-2-2h-5v16h5a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.di-people { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3 2.7-5 6-5s6 2 6 5'/%3E%3Cpath d='M16 6a3 3 0 0 1 0 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3 2.7-5 6-5s6 2 6 5'/%3E%3Cpath d='M16 6a3 3 0 0 1 0 5'/%3E%3C/svg%3E"); }
.di-cal { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.di-card { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.di-chart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 19V5M4 19h16M8 16l3-4 3 2 4-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 19V5M4 19h16M8 16l3-4 3 2 4-6'/%3E%3C/svg%3E"); }

/* main area */
.dash-main { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.dash-main-head { display: flex; align-items: center; justify-content: space-between; }
.dash-h-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.dash-h-live { font-family: var(--font-display); font-size: 0.72rem; color: var(--mute); display: inline-flex; align-items: center; gap: 6px; }
.dash-h-live i { width: 7px; height: 7px; border-radius: 50%; background: #2E9E6B; box-shadow: 0 0 0 3px rgba(46,158,107,0.16); }
/* revenue hero + retention pill (2 stats, upleveled from the old 3-KPI row) */
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dash-hero-stat { display: flex; flex-direction: column; gap: 4px; }
.dash-hero-k { font-family: var(--font-display); font-size: 0.72rem; color: var(--mute); }
.dash-hero-v { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.9rem, 2.4vw, 2.3rem); letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.dash-hero-d { font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; color: #2E9E6B; }
.dash-hero-pill { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 10px 16px; border-radius: 12px; background: #FBFAF8; border: 1px solid var(--rule); }
.dash-pill-k { font-family: var(--font-display); font-size: 0.66rem; color: var(--mute); }
.dash-pill-v { font-family: var(--font-body); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.dash-chart { width: 100%; height: 84px; display: block; }

/* the AI insights assistant — the standout element, gradient-lit */
.dash-ai {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 17px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(126,150,232,0.12), rgba(158,107,216,0.1));
  border: 1px solid rgba(126,150,232,0.3);
  box-shadow: 0 18px 36px -26px rgba(90,74,200,0.5);
}
.dash-ai-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: #FFFFFF;
  background: linear-gradient(135deg, #7E96E8, #6A53CE);
  box-shadow: 0 8px 18px -8px rgba(106,83,206,0.7);
}
.dash-ai-ico svg { width: 20px; height: 20px; }
.dash-ai-body { display: flex; flex-direction: column; gap: 5px; }
.dash-ai-name { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.dash-ai-tag { font-family: var(--font-display); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6A53CE; padding: 2px 7px; border-radius: 999px; background: rgba(106,83,206,0.12); }
.dash-ai-msg { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.4; color: #3B3D42; }
.dash-ai-msg b { color: var(--ink); font-weight: 500; }
.dash-ai-cta { font-family: var(--font-display); font-weight: 500; font-size: 0.78rem; color: #6A53CE; margin-top: 2px; }

/* wide enough that the proof headline holds two lines, not three */
#proof .belief-h { max-width: 38ch; }

/* ---- proof: creator-led precedents (desktop 2×2 airy · mobile swipe carousel) ---- */
.proof-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px;
  margin-top: 48px;
}
/* tablet: drop to two columns so the big stat numbers don't crowd */
@media (max-width: 980px) and (min-width: 721px) {
  .proof-cards { grid-template-columns: 1fr 1fr; gap: 44px 48px; }
}
/* Each precedent is now a real card: bordered surface with a soft per-card glow
 * (drawn from the app's palette), big stat as the hero, creator always visible,
 * and the story sliding up on hover. Cards read as considered objects, not
 * floating text. */
.proof-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 24px 22px 22px;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: 0 24px 44px -32px rgba(40, 36, 70, 0.4);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.proof-card:hover, .proof-card:focus-within {
  transform: translateY(-4px);
  border-color: #E0DAF0;
  box-shadow: 0 32px 54px -30px rgba(70, 58, 160, 0.32);
}
/* the corner bloom: each card's own palette, top-right, subtle */
.proof-glow {
  position: absolute; top: -60px; right: -50px; width: 180px; height: 180px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%, var(--c1) 0%, var(--c2) 45%, transparent 72%);
  opacity: 0.42; filter: blur(14px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.proof-card:hover .proof-glow { opacity: 0.6; transform: scale(1.12); }
.proof-card > *:not(.proof-glow) { position: relative; z-index: 1; }

.proof-niche {
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute); border: 1px solid var(--rule); border-radius: 999px;
  padding: 5px 12px; background: rgba(255,255,255,0.7);
}
.proof-lead {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 18px;
}
.proof-num {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(2.3rem, 3vw, 2.9rem); letter-spacing: -0.025em; line-height: 1;
  font-feature-settings: 'pnum', 'onum';
  color: var(--ink); margin: 0; white-space: nowrap;
}
.proof-statlabel {
  display: block;
  font-family: var(--font-display); font-weight: 400; font-size: 0.74rem;
  letter-spacing: 0.01em; color: var(--mute); margin: 6px 0 0;
}
.proof-app {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.24rem, 1.5vw, 1.46rem); letter-spacing: -0.015em;
  color: var(--ink); margin: 14px 0 0;
}
.proof-who-static {
  font-family: var(--font-body); font-style: italic; font-size: 0.92rem;
  color: var(--mute); margin: 2px 0 0;
}
/* the story + link, revealed on hover (pointer devices); always shown on touch
 * (no hover) and on keyboard focus. Slides up subtly as it fades in. */
.proof-reveal {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px;
}
@media (hover: hover) {
  .proof-reveal {
    opacity: 0; pointer-events: none; transform: translateY(6px);
    transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  }
  .proof-card:hover .proof-reveal,
  .proof-card:focus-within .proof-reveal { opacity: 1; pointer-events: auto; transform: none; }
}
.proof-story {
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.98rem; line-height: 1.45; color: var(--ink-soft); margin: 0;
  padding-top: 14px; border-top: 1px solid var(--rule);
}
.proof-back-link {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 0; margin: 0;
  font-family: var(--font-display); font-weight: 500; font-size: 0.9rem;
  letter-spacing: -0.005em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.proof-back-link .arw { transition: transform 160ms var(--ease); }
.proof-back-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.proof-back-link:hover .arw, .proof-back-link:focus-visible .arw { transform: translateX(3px); }
.proof-back-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ---- story modal (v2 aesthetic) ---- */
.story-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  visibility: hidden; opacity: 0;
  transition: opacity 220ms var(--ease), visibility 0s linear 220ms;
}
.story-modal.is-open { visibility: visible; opacity: 1; transition: opacity 220ms var(--ease); }
.sm-backdrop {
  position: absolute; inset: 0;
  background: rgba(17,18,19,0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.sm-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 580px; max-height: 88vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 22px;
  padding: 40px clamp(24px, 4vw, 44px) 36px;
  box-shadow: 0 24px 70px rgba(17,18,19,0.18);
  transform: translateY(14px) scale(0.985);
  transition: transform 260ms var(--ease);
}
.story-modal.is-open .sm-panel { transform: translateY(0) scale(1); }
.sm-close {
  position: absolute; top: 16px; right: 18px;
  appearance: none; background: none; border: 0; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--mute); padding: 6px 10px; border-radius: 999px;
  transition: color 140ms var(--ease), background 140ms var(--ease);
}
.sm-close:hover { color: var(--ink); background: rgba(17,18,19,0.05); }
.sm-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sm-head { position: relative; }
.sm-niche {
  font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mute); margin: 0;
  padding-bottom: 12px; display: inline-block;
  border-bottom: 2px solid color-mix(in srgb, var(--accent, #C9C4B8) 55%, transparent);
}
.sm-stat { position: relative; isolation: isolate; margin-top: 18px; }
.sm-num {
  position: relative; z-index: 1;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: -0.03em; line-height: 1;
  font-feature-settings: 'pnum', 'onum';
  color: var(--ink); margin: 0;
}
.sm-statlabel {
  position: relative; z-index: 1;
  font-family: var(--font-body); font-size: 0.95rem; line-height: 1.3;
  color: var(--mute); margin: 8px 0 0;
}
.sm-stat::before {
  content: ""; position: absolute; z-index: 0;
  left: -12px; top: -18px; width: 100px; height: 100px; border-radius: 999px;
  background: var(--accent, #C9C4B8); opacity: 0.16; filter: blur(16px);
}
.sm-cite { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.sm-app { font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.015em; color: var(--ink); }
.sm-who { font-family: var(--font-body); font-size: 0.92rem; color: var(--mute); }
.sm-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -0.015em; line-height: 1.28;
  color: var(--ink); margin: 26px 0 8px;
}
.sm-beats { display: flex; flex-direction: column; gap: 0; margin-top: 18px; }
.sm-beat { padding: 18px 0; border-top: 1px solid var(--rule); }
.sm-beat-label {
  font-family: var(--font-display); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); margin: 0 0 6px;
}
.sm-beat-text {
  font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.55;
  color: #3B3D42; margin: 0;
}
.sm-disclaimer {
  font-family: var(--font-serif); font-style: italic; font-size: 0.9rem;
  color: var(--mute); margin: 22px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .story-modal, .sm-panel { transition: none; }
}
/* mobile carousel dots */
.proof-dots { display: none; }

@media (max-width: 720px) {
  /* horizontal snap scroller, one precedent per view, swipe between */
  .proof-cards {
    display: flex; gap: 24px; margin-top: 32px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 4px;
  }
  .proof-cards::-webkit-scrollbar { display: none; }
  .proof-card {
    flex: 0 0 84%; scroll-snap-align: center;
  }
  /* no hover on mobile: show the sentence + "Read the story" in the static state */
  .proof-reveal { opacity: 1; pointer-events: auto; }
  .proof-story { max-width: none; }
  .proof-dots {
    display: flex; gap: 8px; justify-content: center; margin-top: 22px;
  }
  .proof-dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--rule); cursor: pointer;
    transition: background 160ms var(--ease), transform 160ms var(--ease);
  }
  .proof-dot.is-on { background: var(--ink); transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .proof-back-link .arw, .proof-reveal, .about-arw,
  .mobile-menu, .nav-toggle-bars span { transition: none; }
}
.belief-note {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1rem; line-height: 1.6; color: var(--mute);
  max-width: 80ch; margin: 30px 0 0;
}
@media (max-width: 600px) { .belief-note { font-size: 0.85rem; line-height: 1.55; } }

/* ---- section head: headline left, supporting prose right (the reference split) ---- */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: 44px;
}
.section-head h2 { margin-bottom: 0; max-width: 18ch; }
.section-side { color: var(--mute); font-size: 1.16rem; max-width: 46ch; margin: 0; align-self: end; }
.section-side p { color: var(--mute); }
.section-side p:last-child { margin-bottom: 0; }
@media (max-width: 920px) {
  .section-head { grid-template-columns: 1fr; gap: 18px; align-items: start; margin-bottom: 36px; }
}

/* ---- HOW IT WORKS — pitch + CTA on the left, a vertical numbered step-rail on
   the right. Sized to content (not a forced full-viewport) so it reads clean. -- */
#builders { min-height: auto; padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); }
.how {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
@media (max-width: 860px) { .how { grid-template-columns: 1fr; gap: 48px; } }

/* left column — simpler, friendlier copy. Wider so the headline sits on two lines. */
.how-copy { max-width: 34ch; }
.how-h { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.1rem, 3.2vw, 2.7rem); letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); margin: 0 0 20px; max-width: 20ch; }
.how-h .it { font-style: italic; }
.how-sub { font-family: var(--font-body); font-size: 1.14rem; line-height: 1.5; color: var(--mute); margin: 0 0 30px; max-width: 26ch; }
.how-cta { margin-bottom: 0; }

/* right column: the numbered rail — bigger, more presence. Every step is the same
   height so the three rows read evenly (the last one no longer looks cramped). */
.how-steps { list-style: none; margin: 0; padding: 0; }
.how-step { position: relative; display: flex; gap: 24px; align-items: flex-start; min-height: clamp(120px, 13vw, 150px); }
.how-step:last-child { min-height: auto; }
/* connector runs from just below each circle to the next circle; consistent across
   all steps. The last step has no connector (nothing follows it). */
.how-step::before {
  content: ""; position: absolute; left: 25px; top: 52px; bottom: 0;
  width: 1.5px; background: linear-gradient(180deg, var(--rule), rgba(20,17,30,0.06));
}
.how-step:last-child::before { display: none; }
.how-step-n {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--rule);
}
.how-step-b { padding-top: 8px; }
.how-step-b h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.1vw, 1.7rem); letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); margin: 0 0 9px; }
.how-step-b p { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.5; color: var(--mute); margin: 0; max-width: 40ch; }

.about-link-row { margin: clamp(52px, 6vw, 84px) 0 0; text-align: center; }
.about-link {
  font-family: var(--font-body); font-size: 1.08rem; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--rule);
  padding-bottom: 2px; transition: border-color 160ms var(--ease);
}
.about-link:hover, .about-link:focus-visible { border-bottom-color: var(--ink); }
.about-arw { display: inline-block; transition: transform 160ms var(--ease); }
.about-link:hover .about-arw, .about-link:focus-visible .about-arw { transform: translateX(3px); }

/* ---- calculator: monochrome card (restyle only; keep/replace parked) ---- */
.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  overflow: hidden;
}
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }

.calc-result {
  padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--rule);
}
@media (max-width: 820px) { .calc-result { border-right: none; border-bottom: 1px solid var(--rule); padding: 36px 28px; } }
.calc-result-label { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; }
.calc-hero {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.035em;
  font-size: clamp(3rem, 6.5vw, 4.4rem); line-height: 1; margin: 0 0 12px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.calc-result-sub { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; margin: 0; color: var(--mute); }
.calc-mini { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.calc-mini-label { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 6px; }
.calc-mini-val { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-mini-val span { font-family: var(--font-display); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.04em; color: var(--mute); margin-left: 3px; }

.calc-controls { padding: 48px 44px; display: flex; flex-direction: column; gap: 26px; }
@media (max-width: 820px) { .calc-controls { padding: 32px 28px; } }
.calc-field label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute); margin: 0 0 14px;
}
.calc-field output {
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em;
  text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums;
}
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: var(--rule); outline: none; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 3px solid #FFFFFF; box-shadow: 0 2px 8px -2px rgba(17,18,19,0.4); cursor: pointer; transition: transform 120ms var(--ease); }
.calc input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.08); }
.calc input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 3px solid #FFFFFF; box-shadow: 0 2px 8px -2px rgba(17,18,19,0.4); cursor: pointer; }
.calc-keep { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.5; color: var(--mute); margin: 0; }
.calc-fine { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--mute); text-align: center; margin: 16px 0 0; }

/* ---- zero risk: the term sheet (one card, 2×2 hairline grid) ---- */
.terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  overflow: hidden;
}
@media (max-width: 720px) { .terms { grid-template-columns: 1fr; } }
.term { padding: 38px 40px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.term:nth-child(2n) { border-right: none; }
.term:nth-child(n+3) { border-bottom: none; }
@media (max-width: 720px) {
  .term { border-right: none; border-bottom: 1px solid var(--rule); padding: 28px 26px; }
  .term:last-child { border-bottom: none; }
  .term:nth-child(3) { border-bottom: 1px solid var(--rule); }
}
.term-num {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(2.1rem, 3.6vw, 2.8rem); line-height: 1; color: var(--ink); margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
}
.term h3 { margin: 0 0 10px; }
.term p { font-size: 1.02rem; line-height: 1.55; color: var(--mute); margin: 0; }

/* ---- founders ---- */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); margin-top: 36px; }
@media (max-width: 720px) { .founders { grid-template-columns: 1fr; } }
.founder {
  display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start;
}
@media (max-width: 480px) { .founder { grid-template-columns: 1fr; gap: 16px; } }
.founder-head { position: relative; width: 96px; height: 96px; }
.founder-avatar {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px;
  background: var(--panel);
  color: var(--mute);
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em;
}
.founder-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 24px; object-fit: cover;
  border: 1px solid var(--rule);
}
.founder-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 12px; }
.founder-role { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 12px; }
.founder-bio { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--ink); margin: 0; }
.founder-link {
  display: inline-block; margin-top: 12px;
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--rule);
  padding: 8px 0; min-height: 44px; line-height: 1.6;
  transition: color 140ms var(--ease), border-bottom-color 140ms var(--ease);
}
.founder-link:hover, .founder-link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

/* ---- contact: the one dark surface on the page ---- */
#contact { padding-top: 124px; }
.contact-card {
  background: var(--dark);
  border-radius: var(--r-panel);
  padding: clamp(40px, 5vw, 72px);
  color: var(--dark-fg);
}
/* the whole CTA card renders in Inter */
#contact .contact-card,
#contact .contact-card * {
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.contact-card .eyebrow { color: var(--dark-mute); }
.contact-card h2 {
  color: var(--dark-fg); max-width: 15ch;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -0.025em; line-height: 1.08;
}
.apply-sub { font-family: var(--font-display); color: var(--dark-mute); max-width: 40ch; font-size: 1.02rem; line-height: 1.62; }
/* slight emphasis only — not full heavy bold */
/* emphasized words ("free demo"): serif italic, brighter than the body */
.apply-sub em { font-family: var(--font-serif); font-style: italic; color: var(--dark-fg); }
@media (max-width: 600px) {
  .contact-card h2 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .apply-sub { font-size: 0.92rem; line-height: 1.55; }
}
.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 920px) { .apply-grid { grid-template-columns: 1fr; gap: 36px; } }

.form { margin: 0; max-width: 100%; }
.field { margin: 0 0 18px; }
.field label {
  display: block;
  font-family: var(--font-display); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.01em;
  color: var(--dark-mute); margin: 0 0 10px;
}
.field-hint { font-family: var(--font-display); font-weight: 400; font-size: 0.74rem; letter-spacing: 0; color: var(--dark-mute); text-transform: none; margin-left: 8px; }
.field input {
  width: 100%;
  background: #1B1C1F;
  color: var(--dark-fg);
  border: 1px solid var(--dark-rule);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: max(16px, 1.05rem);
  padding: 14px 16px;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.field input::placeholder { color: #6A6D74; }
.field input:hover { border-color: #3A3B40; }
.field input:focus { outline: none; border-color: #7E8188; background: #161719; }
.form-note { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0; color: var(--dark-mute); margin: 16px 0 0; line-height: 1.6; text-align: center; }
.form-success { display: none; }
.form-success.show { display: block; }
.form-success .big { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--dark-fg); margin: 0 0 12px; }
.form-success p { color: var(--dark-mute); }
.form.hide { display: none; }

/* ---- FAQ accordion ---- */
#faq .belief-h { margin-bottom: 40px; }
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%; cursor: pointer; background: none; border: none; text-align: left;
  display: flex; justify-content: space-between; align-items: baseline; gap: 28px;
  padding: 24px 4px;
  font-family: var(--font-body); font-weight: 500; font-size: 1.25rem;
  letter-spacing: -0.012em; line-height: 1.3; color: var(--ink);
}
.faq-q::after {
  content: "+"; flex: none; line-height: 1; align-self: center;
  font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--mute);
  transition: transform 320ms var(--ease), color 160ms var(--ease);
}
.faq-item.is-open .faq-q::after { transform: rotate(45deg); color: var(--ink); }
.faq-q:hover, .faq-q:hover::after { color: var(--ink); }
/* animated expand/collapse */
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms var(--ease); }
.faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; min-height: 0; padding: 0 4px; max-width: 70ch; }
.faq-a p {
  font-family: var(--font-body); font-size: 1.1rem; line-height: 1.62;
  color: var(--mute); margin: 0; padding-bottom: 26px;
}
@media (prefers-reduced-motion: reduce) {
  .faq-a-wrap, .faq-q::after { transition: none; }
}

/* ---- article list (Articles page) ---- */
#articles-hero .belief-h { margin-bottom: 0; }
#articles-hero .belief-par { margin-top: 24px; }
.article-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.article-item { border-bottom: 1px solid var(--rule); }
.article-item a {
  display: block; padding: 28px 4px; text-decoration: none;
  transition: background 160ms var(--ease);
}
.article-item a:hover { background: rgba(17,18,19,0.025); }
.article-meta {
  font-family: var(--font-display); font-weight: 500; font-size: 0.74rem;
  letter-spacing: 0.04em; color: var(--mute); margin: 0 0 10px;
}
.article-title {
  font-family: var(--font-body); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.015em; line-height: 1.28; color: var(--ink); margin: 0 0 10px; max-width: 32ch;
}
.article-sum {
  font-family: var(--font-body); font-size: 1.05rem; line-height: 1.55;
  color: var(--mute); margin: 0; max-width: 64ch;
}
/* ---- migrated long-form article pages (reading column) ---- */
.doc { max-width: 720px; margin: 0 auto; padding: 132px var(--pad-x) 0; }
.article-back {
  display: inline-block; font-family: var(--font-display); font-weight: 500;
  font-size: 0.82rem; color: var(--mute); text-decoration: none; margin-bottom: 26px;
  transition: color 140ms var(--ease);
}
.article-back:hover { color: var(--ink); }
.doc-head { margin-bottom: 50px; }
.doc-head .belief-h { max-width: 22ch; margin-bottom: 0; }
.article-lede {
  font-family: var(--font-body); font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5;
  color: var(--mute); margin: 24px 0 0; max-width: 52ch;
}
.doc-head .article-meta { margin: 22px 0 0; }
.article-body h2 {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.015em; line-height: 1.2;
  color: var(--ink); margin: 2.4em 0 0.5em;
}
.article-body h3 {
  font-family: var(--font-body); font-weight: 500; font-size: 1.28rem;
  letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); margin: 1.8em 0 0.3em;
}
.article-body p, .article-body li {
  font-family: var(--font-body); font-size: 1.12rem; line-height: 1.7;
  color: #3B3D42; margin: 0 0 1.1em;
}
.article-body a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--rule); transition: text-decoration-color 140ms var(--ease);
}
.article-body a:hover { text-decoration-color: var(--ink); }
.article-body em { font-style: italic; }
.article-body ul, .article-body ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.article-body li { margin: 0 0 0.5em; }
.article-cta { margin: 66px 0 0; padding: 42px 0 0; border-top: 1px solid var(--rule); }
.article-cta h2 {
  font-family: var(--font-body); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); margin: 0 0 14px; max-width: 24ch;
}
.article-cta p { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.6; color: var(--mute); margin: 0 0 22px; max-width: 54ch; }
.doc .foot { margin-top: 84px; }

/* article "boundaries" blocks (carried from the migrated articles) */
.boundaries { margin: 2.6em 0; padding-top: 2rem; border-top: 1px solid var(--rule); }
.boundaries-label {
  font-family: var(--font-display); font-weight: 500; font-size: 0.74rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px;
}
.boundaries-foot {
  font-family: var(--font-body); font-style: italic; font-size: 1rem; line-height: 1.55;
  color: var(--mute); margin: 22px 0 0; max-width: 54ch;
}
.boundaries ul { list-style: none; margin: 0; padding: 0; }
.boundaries li {
  font-family: var(--font-body); font-size: 1.06rem; line-height: 1.55;
  color: #3B3D42; margin: 0 0 0.7em;
}
.boundaries li:last-child { margin-bottom: 0; }
/* numbered-ladder variant: <ul> directly under .boundaries, li has <span>n</span><strong> */
.boundaries > ul li { padding-left: 2.6rem; position: relative; margin-bottom: 1em; line-height: 1.6; }
.boundaries > ul li span {
  position: absolute; left: 0; top: 0.15em;
  font-family: var(--font-display); font-weight: 500; font-size: 0.82rem; color: var(--mute);
}
.boundaries > ul li strong { color: var(--ink); font-weight: 600; }
/* card-grid variant */
.boundaries-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.boundaries-col { border: 1px solid var(--rule); border-radius: 16px; padding: 24px 26px; }
.boundaries-col:last-child { background: var(--panel); }
.boundaries-col ul li { padding-left: 1.4rem; position: relative; }
.boundaries-col ul li::before { content: "\2014"; position: absolute; left: 0; color: var(--mute); }

/* ---- footer ---- */
.foot {
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.12em;
  color: var(--mute); text-align: center;
  padding: 44px var(--pad-x); border-top: 1px solid var(--rule); line-height: 2;
}
.foot a {
  color: var(--mute); text-decoration: none; border-bottom: 1px solid transparent;
  display: inline-block; padding: 10px 4px; min-height: 44px; line-height: 1.6;
  transition: color 140ms var(--ease), border-bottom-color 140ms var(--ease);
}
.foot a:hover, .foot a:focus-visible { color: var(--ink); border-bottom-color: var(--rule); }
/* flattened footer: one wrapping row of links, legal line beneath */
.foot-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 22px; line-height: 1;
}
.foot-legal {
  margin: 14px 0 0; line-height: 1.6;
  font-size: 0.7rem; letter-spacing: 0.12em; color: var(--mute);
}

/* ---- reveal ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 720ms var(--ease), transform 720ms var(--ease); will-change: opacity, transform; }
/* once revealed, drop will-change + transform so the element leaves the compositing
   layer (a lingering transform layer can swallow pointer hit-testing on children) */
.reveal.in { opacity: 1; transform: none; will-change: auto; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .glow, .phone-screen .layer, .rotor .rotor-word, .stage-chip { transition: none; }
  * { animation-duration: 0ms !important; }
}

/* ---- mobile safety ---- */
@supports (padding: max(0px)) {
  .band {
    padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
  }
  .foot { padding-bottom: max(44px, env(safe-area-inset-bottom, 0px) + 24px); }
}
@media (max-width: 380px) {
  :root { --pad-x: 20px; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.5rem); }
}
/* clip (not hidden) so html stays the root scroll container for the JS auto-glide */
html, body { overflow-x: clip; }
/* Applied by TenResources.lockScroll while a modal is open. Because html is
 * `overflow-x: clip` (not visible), body's overflow never propagates to the
 * viewport — so `body { overflow: hidden }` alone does nothing here. Pinning the
 * body is also what makes the lock hold on iOS Safari. */
html.is-scroll-locked { overflow: hidden; }
html.is-scroll-locked body { position: fixed; left: 0; right: 0; width: 100%; }
img, svg, video { max-width: 100%; height: auto; }
a, button, summary { -webkit-tap-highlight-color: rgba(17,18,19,0.08); }

/* ============================================================================
 * THE METHOD ENGINE — slide 2 (replaced the flywheel, 2026-07-17).
 * Their signals flow in on the left card, "your method" is the lit core,
 * community + courses flow out the right card. Glance hierarchy: Data ·
 * Next step · Community · Courses are the four bold anchors.
 * ========================================================================== */
/* headline holds the rotating app name; sized so the whole band fits one screen */
#engine .belief-h { max-width: 44ch; font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 14px; }
#engine .belief-lede { margin-bottom: 18px; }
.eng-app { display: inline-block; transition: opacity 0.7s cubic-bezier(0.45, 0.05, 0.35, 1); }
.eng-app.is-fade { opacity: 0; }
.eng { margin-top: 26px; }

/* no container: the diagram sits directly on the page */
.eng-panel { position: relative; }

.eng-stage { position: relative; aspect-ratio: 2.5 / 1; }

/* ---- flow lines ---- */
.eng-flow {
  /* nudged up to match the raised core so the connecting lines stay centered
     between the card bodies */
  position: absolute; inset: -4% 0 0; width: 100%; height: 100%; overflow: visible; z-index: 1;
  opacity: 0; transition: opacity 0.8s var(--ease) 0.45s;
}
.eng.in .eng-flow { opacity: 1; }
.eng-g path { fill: none; stroke-linecap: round; }
.eng-g--in path { stroke: url(#engGradIn); }
.eng-g--out path { stroke: url(#engGradOut); }
/* two quiet layers per strand: steady line + slow travelling dashes */
.eng-line { opacity: 0.16; stroke-width: 1.8; }
.eng-dash { opacity: 0.42; stroke-width: 1.8; stroke-dasharray: 3 9; animation: eng-flow 3.4s linear infinite; }
.eng-g .eng-dash:nth-of-type(6)  { animation-duration: 3.7s; }
.eng-g .eng-dash:nth-of-type(7)  { animation-duration: 3.2s; }
.eng-g .eng-dash:nth-of-type(8)  { animation-duration: 3.5s; }
.eng-g .eng-dash:nth-of-type(9)  { animation-duration: 3.3s; }
.eng-g .eng-dash:nth-of-type(10) { animation-duration: 3.8s; }
@keyframes eng-flow { to { stroke-dashoffset: -24; } }

/* ---- the two pop-out windows ---- */
.eng-side {
  position: absolute; top: 0; bottom: 0; width: 31.5%; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.eng-side--in  { left: 1%;  opacity: 0; transform: translateX(-24px); transition: opacity 0.85s var(--ease) 0.1s,  transform 0.95s var(--ease) 0.1s; }
.eng-side--out { right: 1%; opacity: 0; transform: translateX(24px);  transition: opacity 0.85s var(--ease) 0.3s, transform 0.95s var(--ease) 0.3s; }
.eng.in .eng-side--in, .eng.in .eng-side--out { opacity: 1; transform: none; }

.eng-win {
  position: relative;
  display: flex; flex-direction: column;
  /* both cards share one height so the caption pills beneath them align */
  min-height: 22.5rem;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid #E9E7F0;
  transform: var(--tilt, none);
  transition: transform 0.25s var(--ease);
}
.eng-win:hover { transform: var(--tilt, none) translateY(-4px); }
/* the reference's slant: each card tips gently inward toward the core */
.eng-win--in {
  --tilt: perspective(1100px) rotateY(7deg) rotateX(1.2deg) rotate(-0.8deg);
  box-shadow: 0 26px 52px -30px rgba(40,36,70,0.45), 0 0 40px -16px rgba(91,111,224,0.28);
}
.eng-win--out {
  --tilt: perspective(1100px) rotateY(-7deg) rotateX(1.2deg) rotate(0.8deg);
  box-shadow: 0 26px 52px -30px rgba(40,36,70,0.45), 0 0 40px -16px rgba(194,86,142,0.24);
}
.eng-body { flex: 1; padding: 16px 18px 17px; }
/* left card breathes evenly to fill the shared card height */
.eng-win--in .eng-body { display: flex; flex-direction: column; justify-content: space-between; }

/* ---- the four glance anchors: Data · Next step · Community · Courses ---- */
.eng-bh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.eng-bh-t { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.015em; color: var(--ink); }
.eng-ic { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 14px -6px rgba(80,64,180,0.45); }
.eng-ic svg { width: 17px; height: 17px; }
.eng-ic--data   { background: linear-gradient(135deg, #6E86E4, #4452CE); }
.eng-ic--next   { background: linear-gradient(135deg, #5B6FE0, #8A5BC4); }
.eng-ic--comm   { background: linear-gradient(135deg, #9E6BD8, #6A53CE); }
.eng-ic--course { background: linear-gradient(135deg, #D06AA0, #8A5BC4); }

/* left card internals (cycles per niche) */
.eng-niche {
  margin-left: auto;
  font-family: var(--font-display); font-weight: 500; font-size: 0.6rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
  background: #F2F0F8;
  padding: 3px 9px; border-radius: 999px;
}
.eng-metric { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.eng-metric .n { font-family: var(--font-body); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink); }
.eng-metric .l { font-family: var(--font-display); font-size: 0.64rem; color: var(--mute); }
.eng-chart { width: 100%; height: 52px; }
.eng-chart svg { width: 100%; height: 100%; display: block; }
/* min-height pins two lines so the card never resizes as niches swap */
.eng-insight { font-family: var(--font-body); font-size: 0.84rem; line-height: 1.4; min-height: 2.8em; color: #3B3D42; margin: 9px 0 0; }
.eng-insight b { color: var(--ink); font-weight: 500; }
/* min-height holds two lines so the card stays put as plans swap */
.eng-next-v { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.35; min-height: 2.7em; color: var(--ink); margin: 0; }

/* right card internals (community + courses) */
.eng-live { margin-left: auto; font-family: var(--font-display); font-size: 0.6rem; color: var(--mute); display: inline-flex; align-items: center; gap: 5px; }
.eng-live i { width: 6px; height: 6px; border-radius: 50%; background: #2E9E6B; box-shadow: 0 0 0 3px rgba(46,158,107,0.16); }
/* community chat: real faces + bubbles + a live typing indicator */
.eng-msg { display: flex; align-items: flex-start; gap: 8px; }
.eng-msg + .eng-msg { margin-top: 8px; }
.eng-face { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--rule); }
.eng-bubble {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 1px;
  background: #F4F3F8; border-radius: 4px 12px 12px 12px; padding: 6px 11px 7px;
  font-family: var(--font-body); font-size: 0.84rem; line-height: 1.35; color: #3B3D42;
}
.eng-msg-name { font-family: var(--font-display); font-weight: 600; font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mute); }
.eng-react {
  position: absolute; right: 6px; bottom: -9px;
  font-family: var(--font-display); font-size: 0.6rem; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px;
  box-shadow: 0 2px 6px rgba(17,18,19,0.06);
}
.eng-typing { flex: 0 0 auto; flex-direction: row; gap: 3px; align-items: center; padding: 10px 12px; }
.eng-typing i { width: 5px; height: 5px; border-radius: 50%; background: #B4B0C4; animation: eng-typing 1.3s ease-in-out infinite; }
.eng-typing i:nth-child(2) { animation-delay: 0.18s; }
.eng-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes eng-typing { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
.eng-div { height: 1px; background: #ECEAF3; margin: 10px 0; }
.eng-tag { margin-left: auto; font-family: var(--font-display); font-weight: 500; font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); background: #F2F0F8; padding: 2px 8px; border-radius: 999px; }
.eng-mod { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
/* course thumbnails: real stills with a small play glyph, Kajabi-style */
.eng-thumb { position: relative; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; }
.eng-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eng-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(60,45,140,0.14), rgba(20,15,50,0.24)); }
.eng-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: 0; height: 0; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.eng-mb { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eng-mt { font-family: var(--font-body); font-size: 0.84rem; color: var(--ink); }
.eng-ms { font-family: var(--font-display); font-size: 0.6rem; color: var(--mute); }
.eng-ck { margin-left: auto; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 0.58rem; color: #fff; background: #2E9E6B; flex: 0 0 auto; }

/* the caption pills under each window (reference's red/green callouts) */
.eng-note {
  display: flex; align-items: center; justify-content: center; gap: 9px; align-self: center;
  /* extra top margin drops the note a little below its card */
  margin: 14px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 0.88rem;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
}
.eng-note i { font-style: normal; flex: 0 0 auto; }
.eng-note--in { color: #5B4BC4; background: rgba(126,150,232,0.12); border: 1px solid rgba(126,150,232,0.26); }
.eng-note--in i { width: 8px; height: 8px; border-radius: 50%; background: #5B6FE0; }
.eng-note--out { color: #23795A; background: rgba(46,158,107,0.10); border: 1px solid rgba(46,158,107,0.25); }
.eng-note--out i { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 0.62rem; color: #fff; background: #2E9E6B; }
/* narrower desktops: keep the pills inside their card columns */
@media (max-width: 1100px) { .eng-note { font-size: 0.76rem; padding: 8px 14px; } }

/* ---- the core: your method ---- */
.eng-core {
  /* nudged up to 46% so the circle centers with the card bodies (the notes below
     the cards used to pull the visual center down) */
  position: absolute; left: 50%; top: 46%; width: 17%; aspect-ratio: 1; z-index: 3;
  display: grid; place-items: center;
  opacity: 0; transform: translate(-50%, -50%) scale(0.84);
  transition: opacity 0.55s var(--ease) 0.35s, transform 0.65s var(--ease) 0.35s;
}
.eng.in .eng-core { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.eng-core-glow {
  position: absolute; inset: -62%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(44% 44% at 32% 50%, rgba(126,150,232,0.4) 0%, transparent 70%),
    radial-gradient(44% 44% at 68% 50%, rgba(208,106,160,0.32) 0%, transparent 70%),
    radial-gradient(52% 52% at 50% 50%, rgba(158,107,216,0.28) 0%, transparent 72%);
  filter: blur(26px);
  animation: eng-breathe 5.5s ease-in-out infinite alternate;
}
@keyframes eng-breathe { from { opacity: 0.6; transform: scale(0.95); } to { opacity: 0.95; transform: scale(1.07); } }
/* faint concentric halos around the ring (the reference's echo circles) */
.eng-core-orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.eng-core-orbit--a { inset: -12%; box-shadow: 0 0 0 1px rgba(17,18,19,0.07); }
.eng-core-orbit--b { inset: -24%; box-shadow: 0 0 0 1px rgba(17,18,19,0.04); }
.eng-core-ring {
  position: absolute; inset: -4%; border-radius: 50%;
  background: conic-gradient(from 0deg, #6E86E4, #9E6BD8, #D06AA0, #8A5BC4, #6E86E4);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  filter: drop-shadow(0 0 10px rgba(158,107,216,0.45)) drop-shadow(0 0 24px rgba(110,134,228,0.22));
  animation: eng-rot 14s linear infinite;
}
@keyframes eng-rot { to { transform: rotate(360deg); } }
/* the disc is the flywheel hub: white gap ring + the same deep-indigo radial */
.eng-core-disc {
  position: absolute; inset: 0; border-radius: 50%;
  border: 5px solid #FFFFFF;
  background: radial-gradient(circle at 50% 40%, #3A2F86 0%, #1B1552 100%);
  box-shadow: 0 24px 48px -22px rgba(27,21,82,0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.eng-core-word { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(17px, 1.85vw, 25px); line-height: 1.14; letter-spacing: -0.01em; color: #fff; }
.eng-core-sub  { font-family: var(--font-display); font-weight: 500; font-size: clamp(7px, 0.72vw, 9.5px); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(235,233,250,0.6); }

/* niche-cycle crossfade: symmetric ease both ways, full fade-through, one beat */
.eng [data-eng] { transition: opacity 0.7s cubic-bezier(0.45, 0.05, 0.35, 1); }
.eng.is-swap [data-eng] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .eng-flow, .eng-side--in, .eng-side--out { opacity: 1; transform: none; transition: none; }
  .eng-core { opacity: 1; transform: translate(-50%, -50%); transition: none; }
  .eng-dash, .eng-core-ring, .eng-core-glow, .eng-typing i { animation: none; }
}

/* responsive: stack card → core → card; lines retire */
@media (max-width: 900px) {
  .eng-stage { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 6px 0 4px; }
  .eng-flow { display: none; }
  .eng-win { --tilt: none; }
  .eng-side { position: static; width: 100%; max-width: 340px; opacity: 1 !important; transform: none !important; }
  /* stays relative: the disc/ring/glow inside are absolutely positioned against it */
  .eng-core { position: relative; left: auto; top: auto; width: 150px; margin: 6px 0; opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   MID-PAGE CTA BAND — breaks the flow after the engine. A colored
   gradient rule separates it from the engine above; heading left,
   email + gradient button right. Reuses the apply endpoint.
   ============================================================ */
/* compact CTA strip — NOT a full-height band. A soft tinted fill (like Kajabi's
   gray break) with a thin colored accent line on top; content sits on one row.
   Overrides the .band 100vh min-height so it's just a natural pause. */
.cta-band {
  min-height: 0; padding-top: clamp(30px, 4vw, 46px); padding-bottom: clamp(30px, 4vw, 46px);
  background: linear-gradient(180deg, rgba(126,150,232,0.06), rgba(158,107,216,0.05));
  border-bottom: 1px solid rgba(126,150,232,0.12);
}
/* thin colored accent line across the very top of the strip (indigo→violet) */
.cta-band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, rgba(68,82,206,0) 0%, #5B6FE0 22%, #9E6BD8 50%, #D06AA0 78%, rgba(208,106,160,0) 100%);
}
.cta-rule { display: none; }
.cta-row {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
}
.cta-copy { flex: 1 1 340px; min-width: 280px; }
.cta-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.03em; color: var(--ink); margin: 0 0 10px; }
.cta-sub { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.5; color: var(--mute); margin: 0; max-width: 44ch; }
/* the input + button, pill-grouped like the Kajabi reference */
.cta-form {
  flex: 0 1 460px; display: flex; align-items: center; gap: 8px;
  background: #FFFFFF; border: 1px solid var(--rule); border-radius: 999px;
  padding: 7px 7px 7px 4px;
  box-shadow: 0 18px 40px -26px rgba(40,36,70,0.4);
}
.cta-form:focus-within { border-color: rgba(91,111,224,0.5); box-shadow: 0 18px 40px -24px rgba(91,111,224,0.4); }
.cta-form input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--font-display); font-size: 1rem; color: var(--ink); padding: 12px 16px;
}
.cta-form input::placeholder { color: #9A98A6; }
.cta-btn {
  flex: 0 0 auto; white-space: nowrap; padding: 13px 22px; font-size: 0.96rem;
  color: #fff; background: linear-gradient(120deg, #4452CE 0%, #6A53CE 55%, #8A66D6 100%);
  box-shadow: 0 10px 26px -12px rgba(96,82,210,0.55);
}
.cta-btn:hover, .cta-btn:focus-visible { background: linear-gradient(120deg, #3B48BE 0%, #5E47C2 55%, #7E5ACE 100%); transform: translateY(-1px); }
.cta-btn span { display: inline-block; transition: transform 0.25s var(--ease); }
.cta-btn:hover span { transform: translateX(3px); }
.cta-done { flex: 0 1 460px; margin: 0; font-family: var(--font-display); font-weight: 500; color: #1F9D63; font-size: 1rem; text-align: center; }

@media (max-width: 720px) {
  .cta-row { flex-direction: column; align-items: flex-start; }
  .cta-form { flex: 1 1 100%; width: 100%; }
  .cta-done { flex: 1 1 100%; text-align: left; }
}


/* ============================================================
   SHOWCASE / FEATURE ROW — the Kajabi "here is the app" beat.
   Left column (eyebrow + subtext + button) beside a phone
   mockup that renders a real branded app screen, with a
   profile card + a badge-unlock card floating over its edge.
   ============================================================ */
#showcase { padding-top: 80px; position: relative; z-index: 2; }
#showcase .wide { position: relative; z-index: 1; }
.show-foot { margin-top: 40px; font-family: var(--font-body); font-size: 0.98rem; color: var(--mute); text-align: center; }

/* one-line section header above the tabs. Tighter gap below so the small tab row
   tucks close under it (reads as a header + its menu, not two competing blocks). */
.show-head {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink); margin: 0 0 14px;
}
.show-head .it { font-style: italic; }

/* the tab row reads as small MENU OPTIONS (not big callouts): smaller type, tighter
   padding, sitting close to the card below. */
.show-tabs { position: relative; display: inline-flex; gap: clamp(4px, 0.8vw, 10px); margin-bottom: 16px; padding-bottom: 10px; }
.show-tab {
  position: relative; z-index: 2; cursor: pointer; pointer-events: auto; touch-action: manipulation;
  padding: 5px clamp(10px, 1vw, 13px); background: none;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem); color: var(--mute);
  transition: color 0.28s var(--ease), background 0.28s var(--ease), border-color 0.28s var(--ease), transform 0.12s var(--ease);
}
.show-tab:hover { color: var(--ink); background: rgba(91,111,224,0.08); border-color: rgba(91,111,224,0.16); }
.show-tab:active { transform: scale(0.96); background: rgba(91,111,224,0.13); }
.show-tab.is-active { color: var(--ink); background: rgba(91,111,224,0.07); }
.show-tab:focus-visible { outline: 2px solid #5B6FE0; outline-offset: 3px; }
/* the underline lives under the whole rail; nudge it in to sit under the padded text */
.show-tabs-underline { bottom: 0; }
/* the sliding underline: JS sets --x (left offset) and --w (width) to the active tab */
.show-tabs-underline {
  position: absolute; bottom: 0; left: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #5B6FE0, #9E6BD8);
  width: var(--w, 0px); transform: translateX(var(--x, 0px));
  transition: transform 0.5s var(--ease), width 0.5s var(--ease);
  pointer-events: none; z-index: 1;
}

/* ---- SHOWCASE: three panels STACKED; only the active one shows (simple tab
   switch, NO horizontal scroll). Jumping between any two tabs cross-fades directly,
   so it never flashes the panel in between. ---- */
.carousel { position: relative; }
.carousel-track {
  position: relative;
  border-radius: var(--r-panel);
}

/* panels are stacked in the same box; the active one is shown, others hidden */
.panel {
  position: relative;
  display: grid; grid-template-columns: minmax(230px, 0.6fr) 1.4fr;
  gap: clamp(16px, 2.5vw, 40px); align-items: center;
  padding: clamp(24px, 3vw, 42px) clamp(28px, 4vw, 56px) 0;
  min-height: 476px; overflow: hidden;
  border-radius: var(--r-panel);
  background:
    radial-gradient(130% 130% at 84% 8%, rgba(126,150,232,0.18), transparent 52%),
    radial-gradient(130% 130% at 12% 96%, rgba(158,107,216,0.15), transparent 52%),
    #F7F5F1;
  border: 1px solid rgba(255,255,255,0.6);
}
/* STACK + SHOW/HIDE: the active panel is in flow (sets the container height); the
   other two overlay it, faded out and click-through. Switching cross-fades in place
   with no intermediate panel ever shown. */
.panel:not(.is-active) {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.panel.is-active {
  position: relative;
  opacity: 1; visibility: visible; pointer-events: auto;
}
.carousel-track { transition: none; }
/* cross-fade: the incoming panel fades up; respects reduced-motion */
.panel { transition: opacity 0.45s var(--ease); }
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }

/* copy pinned top-left, sitting a touch higher */
.panel-copy { align-self: start; padding-top: clamp(4px, 1vw, 14px); max-width: 32ch; }
.feat-eyebrow { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.65rem); letter-spacing: -0.025em; color: var(--ink); margin-bottom: 10px; }
.feat-sub { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.5; color: var(--mute); margin-bottom: 20px; max-width: 30ch; }
/* clean text-link CTA (no pill, no underline) — lighter, reclaims vertical room */
.feat-btn {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 0.96rem;
  letter-spacing: -0.01em; color: var(--ink);
}
.feat-btn::after { content: "\2192"; transition: transform 0.25s var(--ease); }
.feat-btn:hover::after { transform: translateX(4px); }
.feat-btn:focus-visible { outline: 2px solid #5B6FE0; outline-offset: 3px; border-radius: 4px; }

/* the scene: a big lifestyle photo card with the cut-off phone overlapping its
   RIGHT edge (phone sits in front, bleeds off the bottom), plus a faint ghost
   card for depth and one floating card. */
.scene { position: relative; align-self: stretch; height: 100%; min-height: 476px; }

/* the lifestyle photo card — occupies the LEFT of the scene, wide & desktop-ish */
.scene-photo {
  position: absolute; left: 0; bottom: 6%; z-index: 2;
  width: 66%; aspect-ratio: 5 / 4; max-height: 82%;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 44px 80px -36px rgba(20,17,30,0.55), inset 0 0 0 1px rgba(255,255,255,0.3);
}
.scene-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-photo-chip {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-display); font-weight: 600; font-size: 0.74rem; color: var(--ink);
  box-shadow: 0 8px 20px -12px rgba(20,17,30,0.5);
}
.scene-chip-dot { width: 15px; height: 15px; border-radius: 5px; background: linear-gradient(135deg, #7E96E8, #6A53CE); }
.scene-chip-dot--comm { background: linear-gradient(135deg, #7E96E8, #6A53CE); }
.scene-photo-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(20,17,30,0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.scene-photo-play svg { width: 20px; height: 20px; margin-left: 2px; }
.scene-photo-title { position: absolute; left: 14px; bottom: 14px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.scene-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,30,0) 55%, rgba(20,17,30,0.32)); pointer-events: none; }

/* a faint ghosted card behind the photo for depth (subtle, not a blank box) */
.scene-ghost {
  position: absolute; left: 0; bottom: 8%;
  width: 46%; height: 66%; border-radius: 24px;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 24px 50px -40px rgba(20,17,30,0.3);
  transform: rotate(-5deg); transform-origin: bottom left;
  z-index: 1;
}

/* ---- COURSES · wide video-player frame (soft device, landscape) ---- */
.scene--wide { min-height: 476px; }
.scene-ghost--wide { left: 8%; bottom: 12%; width: 74%; height: 60%; transform: rotate(-3deg); }

/* the landscape screen: soft borderless frame, bigger & more desktop */
.screen-wide {
  position: absolute; left: 0; bottom: 6%; z-index: 3;
  width: 82%; border-radius: 22px; overflow: hidden;
  background: #fff;
  box-shadow: 0 48px 90px -34px rgba(30,26,54,0.46), 0 2px 8px -4px rgba(30,26,54,0.14), 0 0 0 1px rgba(20,17,30,0.05);
}
.wide-top { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; }
.wide-top .app-brand { font-size: 1rem; }
.wide-lesson { font-family: var(--font-display); font-size: 0.76rem; color: var(--mute); }
.wide-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.wide-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wide-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,30,0) 55%, rgba(20,17,30,0.45)); }
.wide-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,0.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 10px 30px -8px rgba(0,0,0,0.5); }
.wide-play svg { width: 22px; height: 22px; margin-left: 3px; }
.wide-scrub { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.wide-scrub-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.wide-scrub-bar i { display: block; height: 100%; border-radius: 2px; background: #fff; }
.wide-scrub-t { font-family: var(--font-display); font-weight: 500; font-size: 0.68rem; color: #fff; }

/* lesson title + description under the player (real course-page feel) */
.wide-meta { padding: 15px 18px 17px; }
.wide-meta-t { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 6px; }
.wide-meta-d { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.45; color: var(--mute); margin: 0 0 12px; max-width: 46ch; }
.wide-meta-row { display: flex; align-items: center; gap: 8px; }
.wide-chip { font-family: var(--font-display); font-weight: 500; font-size: 0.68rem; color: #5B4BC4; background: #ECEFFB; padding: 4px 10px; border-radius: 999px; }
.wide-meta-next { margin-left: auto; font-family: var(--font-display); font-weight: 500; font-size: 0.74rem; color: var(--mute); }

/* floating module/progress card — overhangs the frame's RIGHT edge, mid-height,
   clear of the video content and the meta text below */
.wide-card {
  position: absolute; right: -6%; top: 30%; z-index: 5;
  width: 42%; max-width: 280px; padding: 18px 18px 15px; border-radius: 20px;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 34px 64px -24px rgba(20,17,30,0.55);
}
.wide-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.wide-card-t { font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; letter-spacing: -0.01em; color: var(--ink); }
.wide-card-pct { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: #6A53CE; }
.wide-card .app-prog-bar { margin-bottom: 12px; }
.wide-mods { display: flex; flex-direction: column; }
.wide-mods .app-mod { padding: 9px 0; }
.wide-mods .app-mod + .app-mod { border-top: 1px solid rgba(20,17,30,0.06); }
/* the completion badge sits INSIDE the video's lower-left, over the image and
   above the scrub bar (positioned against .wide-video, so it never touches the
   lesson meta text below the player) */
/* completion badge — child of .scene--wide (outside the clipped frame) so it can't
   be cut off. Measured layout: video bottom ~71%, lesson title ~74%. Anchor the
   badge to straddle the video's bottom-left corner (top ~61%), clear of the title.
   NB: scoped to .scene--wide so it beats the later, less-specific .scene-badge rule
   (which sets bottom/left for the Engagement/Community photo badges). */
/* badge overlaps the video's lower-left corner a little, then bleeds LEFT into the
   empty gutter beside the wide frame (video left edge ~34%; badge right edge just
   reaches it, body extends left into the blank space) */
/* badge pulled well left so it reads as bleeding in from the edge: the medal + start
   of the label peek past the video's left edge into the margin, the rest runs off */
.scene--wide .scene-badge--wide { position: absolute; top: 47%; bottom: auto; left: -20%; right: auto; z-index: 6; width: auto; max-width: 52%; }

/* the device mockup — a SOFT borderless frame (Kajabi style), not an iPhone.
   Thin light edge + big radius + soft shadow; the app content is the hero, the
   device recedes. No black bezel, no notch. */
.phone {
  position: relative; z-index: 3;
  width: 300px; max-width: 78%;
  border-radius: 32px; padding: 2px;
  /* glow-lit edge (option D): a lit violet gradient border */
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(155deg, rgba(139,123,232,0.55), rgba(126,150,232,0.2) 60%, rgba(214,139,180,0.4)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 44px 80px -34px rgba(30,26,54,0.4), 0 2px 8px -4px rgba(30,26,54,0.13);
}
/* soft ambient glow pooled behind the device (the "lit screen" feel). Scoped to
   NON-cut phones; the .phone--cut variant is masked, so its glow is a sibling
   .phone-halo element instead (a masked ::before would get clipped away). */
.phone:not(.phone--cut)::before {
  content: ""; position: absolute; z-index: -1; inset: -10% -14% -6%;
  border-radius: 46px;
  background: radial-gradient(50% 46% at 50% 40%, rgba(106,83,206,0.5), rgba(139,123,232,0.24) 42%, transparent 70%);
  filter: blur(20px);
}
/* sibling halo for the cut phones (sits in the scene, behind the device) — glow-lit */
.phone-halo {
  position: absolute; z-index: 3; pointer-events: none;
  right: -4%; bottom: -8%; width: min(360px, 60%); height: 86%;
  background: radial-gradient(50% 46% at 60% 36%, rgba(106,83,206,0.5), rgba(139,123,232,0.24) 42%, transparent 70%);
  filter: blur(22px);
}

/* cut-off variant: the device sits over the photo's right edge and bleeds off
   the panel's bottom via a soft mask (no hard bottom edge). */
.phone--cut {
  /* NB: a separate .phone-trio component also defines a bare `.phone` with
     `inset:0` + aspect-ratio; override left/top/inset + aspect-ratio here so
     this carousel device anchors to the scene's RIGHT and keeps its own height. */
  position: absolute; left: auto; top: auto; inset: auto;
  right: 5%; bottom: -8%; z-index: 4;
  width: min(264px, 43%); aspect-ratio: auto;
  border-radius: 30px 30px 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 86%, transparent 99%);
}
.phone--cut .phone-screen { border-radius: 30px 30px 0 0; min-height: 496px; padding-bottom: 44px; }
.phone-notch { display: none; }
.phone-screen {
  position: relative; overflow: hidden;
  border-radius: 30px; padding: 0 15px 18px;
  background: linear-gradient(178deg, #FCFBFF 0%, #F4F2FB 100%);
  min-height: 500px;
}

/* iOS-style status bar (time + signal/battery) — a small realism detail */
.app-status { display: flex; align-items: center; justify-content: space-between; padding: 13px 6px 10px; }
.app-status-time { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; color: var(--ink); letter-spacing: 0.01em; }
.app-status-icons { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); opacity: 0.85; }
.app-status-icons svg { height: 11px; width: auto; display: block; }

/* app header inside the device */
.app-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.app-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; color: var(--ink); }
.app-brand-mark { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #7E96E8, #6A53CE); box-shadow: 0 3px 8px -3px rgba(106,83,206,0.6); }
.app-ava img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; box-shadow: 0 2px 6px -2px rgba(20,17,30,0.4); }
.app-greet { font-family: var(--font-body); font-size: 0.92rem; color: var(--mute); margin-bottom: 13px; }

/* cards inside the app */
.app-card { border-radius: 20px; background: #fff; box-shadow: 0 8px 20px -14px rgba(30,26,54,0.4); border: 1px solid rgba(20,17,30,0.045); }

/* the metric card is the ONE hero moment: a soft indigo gradient, white text */
.app-card--metric {
  padding: 18px 18px 16px; margin-bottom: 13px; border: none;
  background: linear-gradient(158deg, #6D82E6 0%, #5A4BC7 100%);
  box-shadow: 0 16px 32px -18px rgba(90,75,199,0.75);
}
.app-metric-head { display: flex; align-items: center; margin-bottom: 9px; }
.app-metric-k { font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; color: rgba(255,255,255,0.82); }
.app-metric-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: 0.64rem; font-weight: 600; color: #fff; background: rgba(255,255,255,0.18); padding: 3px 8px; border-radius: 999px; }
.app-metric-live i { width: 5px; height: 5px; border-radius: 50%; background: #7DF0B6; box-shadow: 0 0 0 3px rgba(125,240,182,0.28); }
.app-metric-row { display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px; }
.app-metric-v { font-family: var(--font-body); font-weight: 500; font-size: 1.82rem; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.app-metric-d { font-family: var(--font-display); font-size: 0.74rem; font-weight: 600; color: #B7F5D6; }
.app-chart { height: 46px; margin: 2px 0 12px; }
.app-chart svg { width: 100%; height: 100%; display: block; }
.app-streak { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.16); }
.app-flame { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #FFB865, #F0632E); box-shadow: 0 4px 10px -4px rgba(240,99,46,0.8); }
.app-flame svg { width: 14px; height: 14px; }
.app-streak-t { font-family: var(--font-display); font-size: 0.76rem; color: rgba(255,255,255,0.78); }
.app-streak-t b { color: #fff; font-weight: 600; }

/* the in-app nudge / intervention */
.app-card--nudge { display: flex; gap: 11px; padding: 15px 16px; align-items: flex-start; background: #fff; }
.app-nudge-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7E96E8, #6A53CE); box-shadow: 0 6px 14px -6px rgba(106,83,206,0.7); }
.app-nudge-ic svg { width: 16px; height: 16px; }
.app-nudge-body { display: flex; flex-direction: column; gap: 3px; }
.app-nudge-title { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; letter-spacing: -0.01em; color: var(--ink); }
.app-nudge-msg { font-family: var(--font-body); font-size: 0.8rem; line-height: 1.36; color: #43414D; }
.app-nudge-cta { margin-top: 4px; font-family: var(--font-display); font-weight: 500; font-size: 0.78rem; color: #6A53CE; }

/* floating cards over the phone edges */
.feat-float {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px 12px 12px; border-radius: 16px;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 26px 50px -24px rgba(20,17,30,0.5);
}
/* the badge card overhangs the photo's lower-LEFT edge, clear of the phone */
.scene-badge { bottom: 16%; left: -5%; top: auto; z-index: 6; }

/* small pill float (second accent per panel) — compact, rounded */
.feat-float--pill { gap: 8px; padding: 8px 14px 8px 9px; border-radius: 999px; }
.feat-pill-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.feat-pill-ic svg { width: 15px; height: 15px; }
.feat-pill-ic--flame { background: linear-gradient(150deg, #FFB865, #F0632E); box-shadow: 0 4px 10px -4px rgba(240,99,46,0.7); }
.feat-pill-ic--course { background: linear-gradient(135deg, #7E96E8, #6A53CE); box-shadow: 0 4px 10px -4px rgba(106,83,206,0.65); }
.feat-pill-t { font-family: var(--font-display); font-size: 0.8rem; color: var(--mute); letter-spacing: -0.005em; white-space: nowrap; }
.feat-pill-t b { color: var(--ink); font-weight: 600; }
/* engagement pill sits over the photo's upper-right (clear of the phone header);
   courses pill sits top-right of the wide frame */
.scene-pill { top: 8%; left: 40%; right: auto; z-index: 6; }
.scene-pill--wide { top: -3%; right: 6%; left: auto; }

.feat-prof-ring { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; padding: 2px; background: conic-gradient(from -90deg, #7E96E8 0deg, #6A53CE 250deg, rgba(20,17,30,0.08) 250deg 360deg); display: grid; place-items: center; }
.feat-prof-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.feat-prof-body { display: flex; flex-direction: column; gap: 1px; }
.feat-prof-name { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; letter-spacing: -0.01em; color: var(--ink); }
.feat-prof-meta { font-family: var(--font-display); font-size: 0.7rem; color: var(--mute); }

.feat-badge-medal { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #C79A3E, #A8791F); box-shadow: 0 6px 14px -6px rgba(168,121,31,0.8); }
.feat-badge-medal svg { width: 19px; height: 19px; }
.feat-badge-body { display: flex; flex-direction: column; gap: 1px; }
.feat-badge-name { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; letter-spacing: -0.01em; color: var(--ink); }
.feat-badge-sub { font-family: var(--font-display); font-size: 0.66rem; color: var(--mute); }

/* ---- ENGAGEMENT (our whole value prop): widen the photo, move floats onto it ---- */
/* copy column holds a clean two-line subtext + CTA on line three; the rest of the
   width goes to the scene so the photo runs wider than the other panels. */
.panel--eng { grid-template-columns: minmax(238px, 0.62fr) 1.5fr; gap: clamp(12px, 1.6vw, 28px); }
.panel--eng .feat-sub { max-width: 26ch; margin-bottom: 18px; }

/* engagement photo runs wider + a touch taller, and starts further left */
.scene--eng .scene-photo { width: 76%; left: -2%; bottom: 4%; max-height: 90%; }
/* the push already carries the "Rested" brand, so drop the photo's corner chip
   here to avoid stacking two brand marks in the same corner */
.scene--eng .scene-photo-chip { display: none; }
/* engagement phone sits further RIGHT so more of the photo shows and it overlaps
   the image less; that also uncovers more of the push notification */
.scene--eng .phone--cut { right: -3%; }

/* THE PUSH — a genuine iOS lock-screen notification in the creator's voice, with
   THEIR app icon so it reads as a branded push. The hero "check out what's new"
   moment; it overlays the photo's lower-left. iOS notification proportions:
   frosted white, ~22px radius, app icon + APP NAME caps + time, title, 2-line body. */
.push {
  /* sits over the photo's lower-left, fully visible (clear of the phone, which now
     sits further right). Only its left edge grazes the empty gutter. */
  /* ~5/12 of the push bleeds off the photo card's left edge into the gutter */
  position: absolute; z-index: 7; left: -21%; bottom: 6%; width: min(322px, 54%);
  display: flex; gap: 10px; padding: 12px 14px 13px 12px; border-radius: 22px;
  background: rgba(250,249,253,0.72);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 34px 64px -24px rgba(20,17,30,0.66), 0 1px 0 rgba(255,255,255,0.6) inset;
}
.push-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(150deg, #8296EC, #6A53CE);
  box-shadow: 0 6px 14px -5px rgba(106,83,206,0.7), inset 0 1px 0 rgba(255,255,255,0.4); }
.push-icon svg { width: 20px; height: 20px; }
.push-body { min-width: 0; flex: 1; padding-top: 1px; }
.push-top { display: flex; align-items: center; gap: 8px; margin-bottom: 1px; }
.push-app { font-family: var(--font-display); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; color: #6C6A78; }
.push-time { margin-left: auto; font-family: var(--font-display); font-size: 0.66rem; color: #9A98A6; }
.push-title { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: -0.01em; color: #17161C; margin: 0 0 1px; }
.push-text { font-family: var(--font-body); font-size: 0.8rem; line-height: 1.36; color: #3A3844; margin: 0; }
/* a soft coloured aura behind the push so it reads as "arriving" */
.push::before { content: ""; position: absolute; inset: -16px -12px; z-index: -1; border-radius: 34px;
  background: radial-gradient(62% 72% at 26% 60%, rgba(126,150,232,0.3), transparent 70%); filter: blur(7px); }

/* Tracking shows TWO notifications, STAGGERED. The stack is a PANEL child so the
   TOP badge card lines up with the "Tracking" copy; the tracking-result card below
   steps RIGHT to overlap the picture (~5/12 hangs off the picture's left edge,
   ~7/12 sits on the picture). */
.push-stack {
  position: absolute; z-index: 7;
  left: clamp(28px, 4vw, 56px); bottom: clamp(26px, 3.4vw, 48px);
  width: min(340px, 34%); display: flex; flex-direction: column; gap: 14px;
}
/* the cards flow inside the stack instead of positioning themselves */
.push-stack .push { position: static; left: auto; bottom: auto; width: 100%; }
/* stagger: the lower (tracking-result) card slides RIGHT onto the picture card */
.push-stack .push:not(.scene-push--badge) { margin-left: 46%; }
/* gold icon for the badge-earned notification */
.push-icon--gold { background: linear-gradient(150deg, #E6B655, #C08A22) !important; box-shadow: 0 6px 14px -5px rgba(192,138,34,0.75), inset 0 1px 0 rgba(255,255,255,0.4) !important; }

/* entrance: photo/screen + phone rise, floats drift in slightly delayed */
.carousel.in .panel .scene-photo,
.carousel.in .panel .screen-wide { animation: featRise 0.7s var(--ease) both; }
.carousel.in .panel .phone--cut { animation: featRise 0.75s var(--ease) 0.1s both; }
.carousel.in .panel .scene-badge,
.carousel.in .panel .wide-card,
.carousel.in .panel .ins-float,
.carousel.in .panel .chat:not(.chat--ghost) { animation: featRise 0.7s var(--ease) 0.22s both; }
/* the plans box + the insights hero card are vertically centered via
   translateY(-50%), so their entrance must END there too (plain featRise would
   snap them up to transform:none) */
.carousel.in .panel--mem .plan-box,
.carousel.in .panel--ins .ins-hero,
.carousel.in .panel--ins .scene-photo { animation: featRiseY 0.7s var(--ease) 0.22s both; }
.carousel.in .panel--ins .scene-photo { animation-delay: 0s; }
@keyframes featRiseY { from { opacity: 0; transform: translate(0, calc(-50% + 22px)); } to { opacity: 1; transform: translateY(-50%); } }
.carousel.in .panel .scene-pill { animation: featRise 0.7s var(--ease) 0.32s both; }
/* the pushes drop in like real notifications; the badge one arrives first, then
   the tracking result a beat later (they read as a sequence) */
.carousel.in .panel .push { animation: pushIn 0.66s var(--ease) 0.42s both; }
.carousel.in .panel .scene-push--badge { animation-delay: 0.34s; }
.carousel.in .panel .scene-push:not(.scene-push--badge) { animation-delay: 0.56s; }
@keyframes pushIn { from { opacity: 0; transform: translateY(-16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes featRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* responsive: stack copy over the scene inside each panel */
@media (max-width: 860px) {
  #showcase { padding-top: 72px; }
  .panel { grid-template-columns: 1fr; gap: 4px; padding: 30px 22px 0; min-height: 0; }
  .panel-copy { max-width: none; padding-top: 0; }
  .scene { min-height: 440px; }
  .scene-photo { left: 0; width: 66%; bottom: 8%; }
  .phone--cut { right: 0; width: min(240px, 54%); }
  .scene-ghost, .scene-ghost--wide { display: none; }
  .scene-badge { top: 4%; left: 26%; }

  /* Engagement: full-width panel; keep the photo wide, badge top-left, push
     bottom-left, both kept inside the panel bounds on narrow screens */
  .panel--eng { grid-template-columns: 1fr; }
  .scene--eng .scene-photo { width: 66%; left: 0; bottom: 8%; }
  .scene--eng .scene-badge { top: 2%; left: 0; }
  .scene--eng .push { left: 0; bottom: 4%; width: min(280px, 82%); }

  /* Courses wide frame: full-width, module card tucked to the corner */
  .scene--wide { min-height: 420px; }
  .screen-wide { position: relative; left: auto; bottom: auto; width: 100%; margin: 0 auto; }
  .wide-card { right: 0; top: auto; bottom: 8%; width: 60%; max-width: 240px; }
  .scene--wide .scene-badge--wide { top: 6%; left: 0; }

  /* Community: keep only the two solid chats, tuck them to the left; drop ghosts */
  .scene--comm { min-height: 470px; }
  .chat--ghost { display: none; }
  .chat { width: min(230px, 62%); }
  .chat--c3 { top: 8%; left: 0; }
  .chat--c4 { top: auto; bottom: 6%; left: 0; }
}
@media (max-width: 460px) {
  .scene-photo { width: 72%; }
  .phone--cut { width: 58%; }
  .scene-badge { left: 12%; }
  .wide-card { display: none; } /* too tight next to a full-width video on tiny screens */
  .chat { width: min(210px, 68%); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel.in .scene-photo, .carousel.in .screen-wide, .carousel.in .phone--cut,
  .carousel.in .scene-badge, .carousel.in .wide-card, .carousel.in .chat, .carousel.in .scene-pill,
  .carousel.in .push { animation: none; }
  .feat-btn, .show-tab, .show-tabs-underline { transition: none; }
}

/* ---- COURSES + COMMUNITY per-screen internals (reuse .phone / .app-*) ---- */

/* per-panel accent marks */
.app-brand-mark--course { background: linear-gradient(135deg, #7E96E8, #6A53CE); }
.app-brand-mark--comm { background: linear-gradient(135deg, #7E96E8, #6A53CE); }
.feat-badge-medal--course { background: linear-gradient(150deg, #7E96E8, #6A53CE); box-shadow: 0 6px 14px -6px rgba(106,83,206,0.75); }

/* COURSES · progress card */
.app-card--prog { padding: 13px 15px; margin-bottom: 12px; }
.app-prog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.app-prog-t { font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; color: var(--ink); }
.app-prog-pct { font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; color: #6A53CE; }
.app-prog-bar { height: 7px; border-radius: 4px; background: #EAE6F4; overflow: hidden; }
.app-prog-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #7E96E8, #6A53CE); }

/* COURSES · module list */
.app-card--mods { padding: 6px 14px; }
.app-mod { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
.app-mod + .app-mod { border-top: 1px solid rgba(20,17,30,0.06); }
.app-mod-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #EDF0FB; color: #6A53CE; }
.app-mod-ic svg { width: 13px; height: 13px; }
.app-mod-ic.is-done { background: #E7F6EE; color: #1F9D63; }
.app-mod.is-now .app-mod-ic { background: linear-gradient(135deg, #7E96E8, #6A53CE); color: #fff; }
.app-mod.is-locked { opacity: 0.55; }
.app-mod-b { display: flex; flex-direction: column; gap: 1px; }
.app-mod-t { font-family: var(--font-display); font-weight: 500; font-size: 0.84rem; color: var(--ink); }
.app-mod-s { font-family: var(--font-display); font-size: 0.68rem; color: var(--mute); }

/* COMMUNITY · group hero (the accent moment, mirrors the metric card) */
.app-group { display: flex; align-items: center; gap: 10px; padding: 14px 15px; margin-bottom: 12px; border-radius: 20px; background: linear-gradient(158deg, #6D82E6 0%, #5A4BC7 100%); box-shadow: 0 16px 32px -18px rgba(90,75,199,0.75); }
.app-group-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.app-group-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; color: #fff; }
.app-group-meta { font-family: var(--font-display); font-size: 0.7rem; color: rgba(255,255,255,0.8); }
.app-group-faces { display: inline-flex; align-items: center; }
.app-group-faces img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.9); margin-left: -8px; }
.app-group-faces img:first-child { margin-left: 0; }

/* COMMUNITY · composer */
.app-compose { display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 11px; border-radius: 999px; background: #fff; box-shadow: 0 8px 20px -16px rgba(20,17,30,0.5); border: 1px solid rgba(20,17,30,0.04); }
.app-compose-ava img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.app-compose-ph { font-family: var(--font-body); font-size: 0.82rem; color: var(--mute); }

/* COMMUNITY · a post */
.app-card--post { padding: 13px 14px; }
.app-post-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.app-post-head img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.app-post-who { display: flex; align-items: center; gap: 8px; flex: 1; }
.app-post-name { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; }
.app-post-mod { font-family: var(--font-display); font-weight: 500; font-size: 0.6rem; padding: 2px 7px; border-radius: 999px; background: #ECEFFB; color: #5B4BC4; }
.app-post-time { margin-left: auto; font-family: var(--font-display); font-size: 0.68rem; color: var(--mute); }
.app-post-body { font-family: var(--font-body); font-size: 0.84rem; line-height: 1.4; color: #2A2B2E; margin-bottom: 9px; }
.app-post-foot { display: flex; gap: 8px; }
.app-post-react { font-family: var(--font-display); font-size: 0.68rem; padding: 3px 9px; border-radius: 999px; background: #F5F3F0; color: var(--mute); }

/* COMMUNITY · floating pieces */
.feat-faces { display: inline-flex; align-items: center; }
.feat-faces img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -8px; }
.feat-faces img:first-child { margin-left: 0; }
.feat-float--msg { align-items: flex-start; }
.feat-msg-face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.feat-msg-body { display: flex; flex-direction: column; gap: 1px; }
.feat-msg-name { font-family: var(--font-display); font-weight: 600; font-size: 0.66rem; color: #5B4BC4; }
.feat-msg-text { font-family: var(--font-body); font-size: 0.82rem; color: #2A2B2E; }

/* ---- COMMUNITY finale · in-phone club cover + a cloud of floating chats ---- */

/* the club cover inside the phone: image with the name overlaid */
.app-cover-hero { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 10px 24px -16px rgba(20,17,30,0.5); }
.app-cover-hero img { width: 100%; height: 128px; object-fit: cover; display: block; }
.app-cover-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,30,0.05) 30%, rgba(20,17,30,0.62)); }
.app-cover-hero-body { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.app-cover-hero-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.app-cover-hero-meta { font-family: var(--font-display); font-size: 0.72rem; color: rgba(255,255,255,0.9); text-shadow: 0 1px 6px rgba(0,0,0,0.4); }

/* the floating chat cloud that fills the left of the scene */
.scene--comm { min-height: 476px; }
.chat {
  position: absolute; z-index: 4; display: flex; align-items: flex-start; gap: 10px;
  width: min(272px, 42%); padding: 12px 14px; border-radius: 16px;
  background: #fff; box-shadow: 0 26px 50px -24px rgba(20,17,30,0.5);
  border: 1px solid rgba(20,17,30,0.04);
}
.chat img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.chat img[width="30"] { width: 30px; height: 30px; }
.chat-b { display: flex; flex-direction: column; gap: 2px; }
.chat-n { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; color: #5B4BC4; }
.chat-t { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.32; color: #2A2B2E; }
.chat-react { margin-top: 4px; align-self: flex-start; font-family: var(--font-display); font-size: 0.62rem; padding: 2px 8px; border-radius: 999px; background: #F2EFFA; color: #5B4BC4; }
/* ghosted chats sit behind, blurred + faded for depth */
.chat--ghost { z-index: 2; filter: blur(1.5px); opacity: 0.55; box-shadow: 0 20px 40px -30px rgba(20,17,30,0.4); }
/* positions: two solid up front, two ghosted behind, scattered on the left */
.chat--c1 { top: 6%;  left: 30%; }
.chat--c2 { top: 60%; left: 2%; }
.chat--c3 { top: 28%; left: 6%; z-index: 6; }
.chat--c4 { bottom: 6%; left: 26%; z-index: 5; }

/* ============================================================
   INSIGHTS · NO phone (Tracking already uses one right before). Just the photo
   with a cluster of floating cards: the AI hero card (star) + a trend + an alert.
   The lightest format on the page.
   ============================================================ */
.panel--ins { grid-template-columns: minmax(238px, 0.62fr) 1.5fr; gap: clamp(12px, 1.6vw, 28px); }
.panel--ins .feat-sub { max-width: 27ch; margin-bottom: 18px; }
.scene--ins { position: relative; align-self: stretch; min-height: 476px; }
/* the photo sits centered in the scene; shifted a bit LEFT so the hero card covers
   less of the woman on the right. */
.scene--ins .scene-photo {
  position: absolute; left: -5%; right: 21%; top: 50%; bottom: auto; transform: translateY(-50%);
  width: auto; aspect-ratio: 3 / 2; max-height: 86%; z-index: 2;
}
.scene--ins .scene-photo::after { display: none; } /* no dark scrim; nothing to gate here */

/* the AI hero insight card — the star. Indigo, overlaps the photo's RIGHT edge.
   Sized a touch smaller and nudged DOWN so it's not sitting on the woman's face. */
.ins-hero {
  position: absolute; right: -2%; top: 62%; transform: translateY(-50%); z-index: 6;
  width: min(272px, 40%); padding: 16px 16px 15px; border-radius: 18px;
  background: linear-gradient(158deg, #6D82E6 0%, #5A4BC7 100%);
  box-shadow: 0 34px 64px -28px rgba(90,75,199,0.7), inset 0 1px 0 rgba(255,255,255,0.15);
}
.ins-hero-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ins-hero-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,0.2); }
.ins-hero-ic svg { width: 15px; height: 15px; }
.ins-hero-name { font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; letter-spacing: -0.01em; color: #fff; }
.ins-hero-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: 0.66rem; font-weight: 600; color: #fff; background: rgba(255,255,255,0.2); padding: 3px 9px; border-radius: 999px; }
.ins-hero-live i { width: 5px; height: 5px; border-radius: 50%; background: #7DF0B6; box-shadow: 0 0 0 3px rgba(125,240,182,0.28); }
.ins-hero-msg { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.42; color: rgba(255,255,255,0.95); margin: 0 0 12px; }
.ins-hero-msg b { color: #fff; font-weight: 700; }
.ins-hero-cta { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; color: #fff; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,0.2); }

/* the two smaller floating insight cards (glass, twin of .feat-float) */
.ins-float {
  position: absolute; z-index: 7; display: flex; align-items: center; gap: 11px;
  width: min(266px, 44%); padding: 12px 14px 12px 12px; border-radius: 16px;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 26px 50px -24px rgba(20,17,30,0.5);
}
.ins-float--a { top: 4%; left: -6%; }
.ins-float--b { bottom: 6%; left: -17%; } /* ~1/3 hangs off the photo's left edge */
.ins-float-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.ins-float-ic svg { width: 18px; height: 18px; }
.ins-ic--up { background: linear-gradient(150deg, #4FBE8A, #1F9D63); box-shadow: 0 6px 14px -6px rgba(31,157,99,0.7); }
.ins-ic--alert { background: linear-gradient(150deg, #F0A64E, #E07B2E); box-shadow: 0 6px 14px -6px rgba(224,123,46,0.7); }
.ins-float-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-float-t { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.3; color: #2A2B2E; }
.ins-float-t b { font-weight: 700; color: var(--ink); }
.ins-float-s { font-family: var(--font-display); font-size: 0.68rem; color: var(--mute); }

/* responsive: stack the photo, then the hero card, floats tucked to the left */
@media (max-width: 860px) {
  .panel--ins { grid-template-columns: 1fr; }
  .scene--ins { min-height: 470px; }
  .scene--ins .scene-photo { position: relative; left: 0; right: 0; top: auto; transform: none; width: 100%; aspect-ratio: 3/2; max-height: none; margin-bottom: 14px; }
  .ins-hero { position: relative; right: auto; top: auto; transform: none; width: 100%; }
  .ins-float--a { left: 0; top: 2%; }
  .ins-float--b { left: 0; bottom: 4%; width: min(240px, 70%); }
}

/* ---- MEMBERSHIPS · a lifestyle photo (with a lock overlay = gated content) plus
   a SIMPLE floating plans box. No phone — deliberately different from the
   Tracking / Insights panels so the photo+phone format isn't repeated 3 times. ---- */
.panel--mem { grid-template-columns: minmax(238px, 0.62fr) 1.5fr; gap: clamp(12px, 1.6vw, 28px); }
.panel--mem .feat-sub { max-width: 26ch; margin-bottom: 18px; }
/* the photo's corner chip carries the "Members only" label */
.scene--mem .scene-photo-chip { display: inline-flex; }
/* the photo runs large; the plans box overlaps its right edge for depth */
.scene--mem .scene-photo { width: 78%; left: -3%; bottom: 4%; max-height: 94%; }

/* the LOCK overlay on the large lifestyle photo — the gated content. Same clean
   glass circle as the course play button (.wide-play): image stays fully visible,
   just a frosted circle with the white lock on top. Sized up for the big image. */
.scene-photo-lock {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 10px 30px -8px rgba(0,0,0,0.5);
  z-index: 3;
}
.scene-photo-lock svg { width: 22px; height: 22px; margin-left: 0; }
/* bigger lock, centered over the VISIBLE part of the photo (left of the plans box) */
.scene--mem .scene-photo-lock { left: 38%; width: 76px; height: 76px; }
.scene--mem .scene-photo-lock svg { width: 30px; height: 30px; }

/* the simple floating plans box — sits over the photo's right, overlapping it */
.plan-box {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 6;
  width: min(300px, 46%); padding: 20px 20px 18px; border-radius: 22px;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 40px 80px -34px rgba(30,26,54,0.5), 0 2px 8px -4px rgba(30,26,54,0.14);
}
.plan-box-t { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; }

/* pricing rows (reused by the box); the featured row shows a "Popular" badge */
.app-tier {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-radius: 13px; margin-bottom: 9px;
  border: 1px solid rgba(20,17,30,0.09); background: #fff;
}
.app-tier--pick { border-color: transparent; box-shadow: 0 0 0 1.5px #6A53CE; background: linear-gradient(120% 120% at 100% 0%, rgba(126,150,232,0.12), transparent 70%), #fff; }
.app-tier-n { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.app-tier-p { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); letter-spacing: -0.01em; }
.app-tier-p span { font-weight: 500; font-size: 0.72rem; color: var(--mute); }
.plan-badge { font-family: var(--font-display); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #7E96E8, #6A53CE); }
.app-paywall-btn {
  display: block; text-align: center; margin-top: 13px; padding: 12px 14px; border-radius: 13px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; letter-spacing: -0.01em;
  color: #fff; background: linear-gradient(158deg, #6D82E6 0%, #5A4BC7 100%);
  box-shadow: 0 14px 28px -14px rgba(90,75,199,0.7);
}

/* responsive: stack the box under the photo on narrow screens */
@media (max-width: 860px) {
  .panel--mem { grid-template-columns: 1fr; }
  .scene--mem { min-height: 470px; }
  .scene--mem .scene-photo { position: relative; width: 100%; left: 0; bottom: 0; margin-bottom: 14px; }
  .plan-box { position: relative; top: auto; right: auto; transform: none; width: 100%; margin-left: auto; }
}


/* ============================================================
   PHONE CLEANUP  ·  max-width: 560px  ·  added 2026-07-21
   ------------------------------------------------------------
   Everything below is PHONE-ONLY (<=560px). Tablet (561-860px)
   and desktop are untouched — the desktop composition the
   founder likes stays exactly as-is above this line.

   The desktop showcase "scene" is a deliberately-overlapping
   collage (lifestyle photo + cut-off phone + floating push /
   chat / stat cards). Squeezed into a 390px column those layers
   collide into unreadable word-per-line mush. On phones we keep
   ONE clean primary element per panel (the real app UI) and
   retire the decorative overlap layers — the same approach the
   Memberships panel already used successfully.
   ============================================================ */
@media (max-width: 560px) {

  /* ---- HERO: own exactly one phone screen. On taller phones the next
     section ("Imagine the functionality of…") used to peek above the fold,
     which made the opening read as two half-finished thoughts. 100svh is
     the small-viewport unit, so it accounts for the browser chrome and
     doesn't overshoot on mobile Safari/Chrome. A scroll cue at the bottom
     tells people there's more below. ---- */
  .hero {
    min-height: 100vh;                 /* fallback for older engines */
    min-height: 100svh;
    padding-top: 104px; padding-bottom: 96px;
  }
  /* the headline's forced break ("…content into" / "a transformation…") is
     tuned for the desktop measure; at phone width it strands the "a" alone
     on its own line. Let it wrap naturally here. */
  .hero h1 br { display: none; }

  /* the cue: a small chevron that drifts down and back */
  .hero::after {
    content: ""; position: absolute; z-index: 3;
    left: 50%; bottom: 30px; width: 11px; height: 11px; margin-left: -6px;
    border-right: 2px solid rgba(30, 26, 54, 0.4);
    border-bottom: 2px solid rgba(30, 26, 54, 0.4);
    border-radius: 0 0 2px 0;
    transform: rotate(45deg);
    animation: heroScrollCue 2s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes heroScrollCue {
    0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: 0.35; }
    50%      { transform: rotate(45deg) translate(2px, 2px);   opacity: 0.75; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero::after { animation: none; opacity: 0.5; }
  }

  /* ---- SHOWCASE TABS: 5 tabs don't fit at 390px, so "Memberships"
     was clipped. Let the rail scroll horizontally; the JS underline
     uses offsetLeft/offsetWidth (scroll-content-relative) so it
     still lands correctly. ---- */
  .show-tabs {
    display: flex; flex-wrap: nowrap; max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* let the active pill breathe against the scroll edges */
    padding-left: 2px; padding-right: 2px;
  }
  .show-tabs::-webkit-scrollbar { display: none; }
  .show-tab { flex: 0 0 auto; }

  /* ---- SWIPE RAIL: on phones the five panels sit side-by-side in a
     horizontal scroll-snap rail, so you can swipe between them (the tabs
     still work and stay in sync — see the showcase IIFE in index.html).
     Desktop keeps the stacked cross-fade. Laying them out in a flex row
     also makes every panel the SAME HEIGHT for free (align-items:stretch),
     which is what kept Tracking/Insights/Courses/Community mismatched. ---- */
  .carousel-track {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 0;
  }
  .carousel-track::-webkit-scrollbar { display: none; }
  /* every panel is visible in the rail (no more opacity/visibility gating) */
  .panel,
  .panel:not(.is-active),
  .panel.is-active {
    position: relative; inset: auto;
    flex: 0 0 100%; width: 100%; min-width: 100%;
    opacity: 1; visibility: visible; pointer-events: auto;
    scroll-snap-align: start; scroll-snap-stop: always;
    transition: none;
  }

  /* ---- SCENES: drop the fixed 476px scene min-heights; each scene is a
     positioning context for its hero + the faded depth cards behind. ---- */
  .scene,
  .scene--wide,
  .scene--comm,
  .scene--eng,
  .scene--mem,
  .scene--ins { min-height: 0; height: auto; position: relative; }

  /* the panel copy already stacks above the scene (1fr grid from the
     860px rule); add a little air between copy and the visual.
     NB: Memberships (.scene--mem) already has a clean phone-friendly
     layout of its own (photo + plan-box stacked) — leave it alone. */
  /* every panel needs the bottom breathing room — Memberships was excluded
     here originally, which is why its plan box sat flush on the panel edge */
  .panel { padding-bottom: 30px; }
  .scene:not(.scene--mem) { margin-top: 20px; }

  /* retire the layers that can't survive a 390px column: the lifestyle
     photos, ghost cards, halos and loose pills. What SURVIVES is a
     deliberate two-card depth set per panel, handled below.
     Scoped away from .scene--mem, whose photo + plan-box stack already
     works and is the pattern the rest now follows. */
  .scene:not(.scene--mem) .scene-ghost, .scene-ghost--wide,
  .scene:not(.scene--mem) .scene-photo,
  .phone-halo,
  .scene-badge:not(.scene-badge--wide),
  .feat-float:not(.scene-badge--wide),
  .scene-pill, .scene-pill--wide,
  .chat--ghost {
    display: none !important;
  }

  /* ============================================================
     HERO + DEPTH CARDS — INSIGHTS ONLY
     Insights leads with a SMALL card, so two stat cards tucked behind
     it make a real composition. Tracking and Community lead with a
     full-height phone: there the cards had nowhere to live but the
     outer edges and just read as clutter, so those panels are
     hero-only. Courses is hero-only too (its module card was already
     suppressed at phone widths by the older 460px rule).
     ============================================================ */
  .panel--eng .push, .panel--eng .push-stack,
  .scene--comm .chat,
  .scene--wide .wide-card { display: none !important; }

  .scene > .phone--cut,
  .scene--ins > .ins-hero,
  .scene--wide > .screen-wide { position: relative; z-index: 3; }

  /* the two stat cards behind the Insights hero. Fixed footprint so their
     text can never crush to one word per line; whatever overflows is
     clipped and just reads as texture at this opacity. */
  .scene--ins .ins-float {
    position: absolute; z-index: 1;
    width: 212px; min-width: 0; max-width: 212px;
    height: 108px; overflow: hidden;
    pointer-events: none; margin: 0;
    border-radius: 16px;
    box-shadow: 0 20px 38px -26px rgba(20,17,30,0.45);
    /* these are decorative — drop the entrance animation, whose final
       `transform: none` keyframe would otherwise wipe the tilt below */
    animation: none !important;
  }
  /* a wider diagonal + a whisper of tilt, so the pair reads as scattered
     depth rather than two rectangles parked at the margins. The vertical
     insets are tuned so each card TUCKS UNDER the hero by ~20px — without
     that overlap the three elements read as separate stacked bands
     instead of one layered composition. */
  .scene--ins .ins-float--a {
    top: 9%; bottom: auto; left: -15%; right: auto;
    transform: rotate(-3deg); opacity: 0.52;
  }
  .scene--ins .ins-float--b {
    bottom: 9%; top: auto; right: -15%; left: auto;
    transform: rotate(2.5deg); opacity: 0.46;
  }
  /* trim the type so each clipped card still looks composed */
  .scene--ins .ins-float .ins-float-t { font-size: 0.72rem; line-height: 1.3; }
  .scene--ins .ins-float .ins-float-s { font-size: 0.6rem; }
  .scene--ins .ins-float .ins-float-ic { width: 26px; height: 26px; flex: 0 0 26px; }

  /* ---- Every scene gets the SAME fixed height, so the panels match at
     the source rather than being stretched to the tallest and carrying
     slack. The hero centres inside it; anything taller than the box
     (the phones) clips at the bottom behind a soft fade — which is the
     "cut off device" the desktop composition uses anyway. ---- */
  .panel { min-height: 0; align-content: start; }
  .scene:not(.scene--mem) {
    height: 446px;
    display: flex; align-items: center; justify-content: center;
  }

  /* ---- the phone becomes a normal, fully-visible, centered block
     (was absolutely positioned + bottom-masked "cut off") ---- */
  .phone--cut {
    position: relative; inset: auto;
    right: auto; left: auto; top: auto; bottom: auto;
    /* wide enough that the in-app text never wraps awkwardly; the depth
       cards behind bleed past the panel edge, so they still peek */
    width: min(302px, 86%); max-width: 86%;
    /* fill the fixed scene box and clip whatever runs past the bottom */
    align-self: stretch; height: 100%; max-height: 100%; overflow: hidden;
    margin: 0 auto;
    aspect-ratio: auto;
    border-radius: 30px 30px 0 0;
    /* soft bottom fade so the clip reads as "bleeding off", not chopped */
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  }
  .phone--cut .phone-screen {
    border-radius: 30px 30px 0 0;
    height: 100%; min-height: 0; padding-bottom: 12px;
  }
  /* keep the streak line on one line inside the phone */
  .phone--cut .app-streak-t { font-size: 0.7rem; }

  /* ---- COURSES ----
     The player stacks over the "you logged knee pain → watch this lesson"
     CTA, which on desktop floats over the video's corner. Here it becomes
     a strip directly under the player: it's the courses×tracking payoff,
     so it's worth reading rather than decorating with. ---- */
  .scene--wide {
    flex-direction: column; gap: 10px;
  }
  .scene--wide .screen-wide {
    width: min(326px, 93%); max-width: 93%;
    flex: 0 1 auto; min-height: 0;
  }
  .scene--wide .scene-badge--wide {
    position: relative; inset: auto;
    top: auto; right: auto; bottom: auto; left: auto;
    z-index: 3; flex: 0 0 auto;
    width: min(326px, 93%); max-width: 93%; margin: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 13px; border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid rgba(20,17,30,0.06);
    box-shadow: 0 14px 30px -22px rgba(20,17,30,0.45);
  }
  .scene--wide .feat-badge-medal { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; }
  .scene--wide .feat-badge-medal svg { width: 16px; height: 16px; }
  .scene--wide .feat-badge-name { font-size: 0.8rem; line-height: 1.25; }
  .scene--wide .feat-badge-sub  { font-size: 0.7rem; line-height: 1.25; color: #6A53CE; }

  /* type + rhythm inside the player: at this width the stock desktop sizes
     wrapped the title, both chips and the up-next line each onto two lines,
     which read as a wall of double-height rows. */
  .scene--wide .wide-meta { padding: 12px 14px 13px; }
  .scene--wide .wide-meta-t { font-size: 0.94rem; line-height: 1.25; margin-bottom: 5px; }
  .scene--wide .wide-meta-d {
    font-size: 0.79rem; line-height: 1.42; margin-bottom: 10px;
    /* two lines is plenty for a supporting description; a slightly tighter
       measure lets the clamp land at a phrase break rather than mid-clause */
    max-width: 31ch;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .scene--wide .wide-meta-row { flex-wrap: wrap; gap: 7px; }
  .scene--wide .wide-chip { white-space: nowrap; font-size: 0.65rem; padding: 3px 9px; }
  .scene--wide .wide-meta-next { margin-left: 0; white-space: nowrap; font-size: 0.7rem; }
  .scene--wide .wide-top { padding: 10px 14px; }
  .scene--wide .wide-lesson { font-size: 0.7rem; }

  /* MEMBERSHIPS: the lock is deliberately off-centre (left:38%) to sit right
     in the desktop collage; on a full-width phone photo that reads as a
     mistake, so recentre it. */
  .scene--mem .scene-photo-lock { left: 50%; }
  .phone-screen { min-height: 0; }

  /* INSIGHTS: the AI insight card is the hero; both stat cards sit behind
     it as the staggered depth pair (handled by the shared rules above). */
  .scene--ins .ins-hero {
    position: relative; inset: auto;
    right: auto; left: auto; top: auto; bottom: auto;
    width: min(272px, 84%); max-width: 84%; margin: 0 auto;
  }

  /* The entrance animation `featRiseY` ends at `transform: translateY(-50%)`
     because on desktop these cards are absolutely positioned and centered
     that way. With `animation-fill-mode: both` that -50% STICKS — and now
     that the cards are in normal flow on phones it yanked them ~98px up,
     overlapping the copy above and opening a phantom gap below (and it was
     what pushed the Memberships plan-box over its photo). Swap to plain
     `featRise`, which ends at `transform: none`, so they keep the same
     fade-rise entrance but land where the layout puts them. */
  .carousel.in .panel--ins .ins-hero,
  .carousel.in .panel--mem .plan-box { animation-name: featRise; }

  /* COURSES: the wide video player is already relative + full-width;
     just make sure it's centered and the floating cards (hidden above)
     don't leave a gap */
  .scene--wide { min-height: 0; }
  .screen-wide {
    position: relative; left: auto; bottom: auto;
    width: 100%; max-width: 460px; margin: 0 auto;
  }

  /* ---- CTA EMAIL BANDS: the input+button pill was too tight — the
     email text got clipped behind the button. Stack them: full-width
     input, full-width button below, still visually grouped.
     Also: the row is a COLUMN flex here, where the form's desktop
     `flex: 0 1 460px` basis becomes a 460px *height* and, with the
     row's space-between, opened a big gap. Reset both so copy + form
     sit snug. ---- */
  .cta-row { justify-content: flex-start; gap: 20px; }
  /* both children carry a desktop flex-basis (340px / 460px) that, in this
     column flex, is read as a HEIGHT — inflating each to a tall empty block.
     Reset to auto so they're only as tall as their content. */
  .cta-copy { flex: 0 0 auto; min-width: 0; }
  .cta-form {
    flex: 0 0 auto;
    flex-direction: column; align-items: stretch;
    border-radius: 20px; gap: 10px; padding: 12px;
  }
  .cta-form input { width: 100%; text-align: left; padding: 14px 16px; }
  .cta-btn {
    width: 100%; justify-content: center; text-align: center;
    padding: 15px 22px; border-radius: 14px;
  }

  /* ---- trim the desktop-scale vertical dead space that read as
     "scrolling through nothing" on a phone ---- */
  #builders { padding-top: 72px; padding-bottom: 64px; }
  #builders .belief-par { margin-top: 40px; }

  /* ---- NAV: the fixed hamburger floated over section text with a
     transparent bar. Once scrolled, frost the bar so content passes
     cleanly beneath it (phones only — desktop bar stays transparent). ---- */
  .nav.is-scrolled {
    background: rgba(250, 249, 246, 0.82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(20, 17, 30, 0.06);
  }

  /* ---- ENGINE: on desktop the flywheel is Data-card → flow-lines → orb
     → flow-lines → Community-card (horizontal). On phones the SVG flow
     lines are hidden (900px rule) and the three stack vertically, which
     lost the "flows into your method, back out to them" story. Redraw it
     vertically: a thin gradient line flowing DOWN into the orb (indigo,
     the "in" side) and DOWN out of it (violet→pink, the "out" side),
     mirroring the desktop gradient direction. Pure CSS on .eng-core, no
     markup change. ---- */
  .eng-core::before,
  .eng-core::after {
    content: ""; position: absolute; left: 50%; z-index: 0;
    width: 2px; height: 30px; transform: translateX(-50%);
    pointer-events: none; border-radius: 2px;
  }
  /* up-line: reaches from the top of the orb toward the Data card above.
     Indigo at the card end, fading as it enters the orb = flowing IN. */
  .eng-core::before {
    bottom: 100%; margin-bottom: 2px;
    background: linear-gradient(180deg, rgba(91,111,224,0) 0%, #5B6FE0 45%, #7E96E8 100%);
  }
  /* down-line: from the bottom of the orb toward the Community card below.
     Violet/pink at the orb end, fading toward the card = flowing OUT. */
  .eng-core::after {
    top: 100%; margin-top: 2px;
    background: linear-gradient(180deg, #9E6BD8 0%, #D68BB4 55%, rgba(214,139,180,0) 100%);
  }
  /* small connector nodes where each line meets the orb, so it reads as a
     wired junction rather than a floating dash */
  .eng-core-disc::before,
  .eng-core-disc::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    width: 6px; height: 6px; border-radius: 50%; z-index: 4;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.9);
  }
  .eng-core-disc::before { top: -3px; background: #5B6FE0; }
  .eng-core-disc::after  { bottom: -3px; background: #D68BB4; }

  /* ---- DASHBOARD: on a phone the 6-item sidebar is more than the point
     needs. Keep the three that tell the story — Overview, Courses,
     Community — plus the "Managed by Ten" badge; drop Coaching / Payments
     / Insights (items 4-6). Desktop keeps all six. ---- */
  .dash-nav-list .dash-nav-item:nth-child(n + 4) { display: none; }
}