/* ==========================================================================
   Sections: hero, partners, statement, story (+ product mockup), offers,
   references, answers (paper), closing.
   ========================================================================== */

.grid-12 { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gap); }

/* ---------- Hero: "Denge" ------------------------------------------------ */
/* Static by default (no JS, reduced motion, CDN failure): a first screen
   with the headline and the chart, then the three beats and the weights
   table as normal content. With motion, html.hero-story pins the section
   and the story plays over the first screen (motion.js). */
.hero { position: relative; isolation: isolate; }
.hero__pin {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: var(--header-h);
  overflow: hidden;
}
.hero__stage { position: absolute; inset: 0; z-index: -1; }
.hero__stage picture, .hero__poster, .hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster { object-fit: cover; object-position: 60% 42%; display: none; }
.hero__gl { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero__gl.is-live { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(15 13 11 / 0.55) 0%, rgb(15 13 11 / 0) 16%, rgb(15 13 11 / 0) 52%, rgb(15 13 11 / 0.78) 84%, var(--color-bg) 100%),
    linear-gradient(90deg, rgb(15 13 11 / 0.6) 0%, rgb(15 13 11 / 0) 42%);
}
/* Desktops that may run the WebGL scene (boot script) show the poster, not
   the 2D chart; the chart labels come back once the scene is live and
   positions them itself (hero-gl.js). */
.gl-maybe .hero__poster { display: block; }
.gl-maybe .fx__svg { display: none; }
.gl-maybe .hero:not(.gl-live) .fx { visibility: hidden; }
.hero.gl-live .hero__poster { visibility: hidden; }

.hero__content {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-6);
  align-items: end;
  padding-bottom: var(--space-7);
}
.hero__title {
  grid-column: 1 / span 8;
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.hero__aside {
  grid-column: 9 / span 4;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5);
  padding-bottom: 0.4em;
}
.hero__lead { font-size: var(--step-1); line-height: 1.5; color: var(--color-text-2); max-width: 34ch; }

/* Hero intro (CSS, starts at first paint). Words begin dim and slightly
   offset and settle into place. Never starts from opacity 0, so the
   headline counts for LCP immediately. */
.hero__title.is-split .w {
  display: inline-block;
  animation: word-focus 1.1s var(--ease-focus) calc(80ms + var(--i) * 70ms) both;
}
@keyframes word-focus {
  from { opacity: 0.18; transform: translate3d(0, 0.22em, 0); }
}
.motion-ok .hero__aside { animation: rise-in var(--dur-reveal) var(--ease-focus) 380ms both; }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* ---------- Hero chart (2D): phones, tablets, fallbacks ------------------ */
/* Box keeps the SVG viewBox ratio, so labels can sit at percentages of it. */
.fx {
  --band: 21rem; /* height kept free for the headline band */
  position: absolute;
  top: calc(var(--header-h) + var(--space-5));
  right: max(var(--gutter), calc((100% - var(--container-max)) / 2));
  width: min(56vw, calc((100svh - var(--header-h) - var(--band)) * 1.47));
  aspect-ratio: 1000 / 680;
  pointer-events: none;
}
.fx__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx__svg path, .fx__svg circle { fill: none; vector-effect: non-scaling-stroke; }
.fx__axis, .fx__ticks { stroke: var(--taupe-400); stroke-opacity: 0.4; stroke-width: 1; }
.fx__cloud { stroke: var(--taupe-300); stroke-opacity: 0.34; stroke-width: 2.2; stroke-linecap: round; }
.fx__cloud--hi { stroke: var(--paper-50); stroke-opacity: 0.7; stroke-width: 2.4; }
.fx__chaos { stroke: var(--taupe-400); stroke-opacity: 0.5; stroke-width: 2; stroke-linecap: round; }
.fx__chaos--far { stroke: var(--taupe-300); stroke-opacity: 0.07; stroke-width: 9; }
.fx__frontier { stroke: var(--apricot-400); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fx__frontier-glow { stroke: var(--apricot-400); stroke-opacity: 0.16; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fx__guide { stroke: var(--taupe-300); stroke-opacity: 0.55; stroke-width: 1; stroke-dasharray: 3 5; }
/* The layer (2D): a pane of glass that ends up framing the chart. Its
   leading edge is the scan light; motion.js slides it in from the left. */
.fx__pane {
  position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h);
  border: 1px solid rgb(242 236 227 / 0.2);
  border-radius: var(--radius-lg);
  background: linear-gradient(118deg, rgb(242 236 227 / 0.06), rgb(242 236 227 / 0.012) 38%, rgb(246 179 107 / 0.035));
  box-shadow: inset 0 0 0 1px rgb(242 236 227 / 0.04), inset 0 1px 0 rgb(242 236 227 / 0.12), 0 40px 80px -40px rgb(0 0 0 / 0.8);
}
.fx__pane::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; right: -1px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(246 179 107 / 0), var(--apricot-300) 30%, var(--apricot-400) 70%, rgb(246 179 107 / 0));
  box-shadow: 0 0 18px 2px rgb(246 179 107 / 0.45);
  opacity: var(--lead, 0);
}
.fx__pane-tag, .fx__label--layer {
  font-family: var(--font-mono); font-size: var(--step--2); line-height: 1;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-2);
  white-space: nowrap;
}
.fx__pane-tag { position: absolute; left: 2px; top: calc(100% + 10px); }
@media (max-width: 767px) and (max-height: 740px) { .fx__pane-tag { display: none; } }
.fx__pane-tag::before, .fx__label--layer::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px;
  border-radius: 1px; background: var(--color-signal);
}
.fx__label--layer { display: none; translate: 16px calc(-100% - 14px); }
.hero.gl-live .fx__label--layer { display: block; }
.hero.gl-live .fx__pane { display: none; }

/* Orbital sunrise (2D): a planet dome whose top sits on the target point,
   the sun rising over it, and the loose dots as stars. The markup's
   default is the END of the story (so no-JS and reduced motion see the
   sunrise); motion.js starts every element from the opening state. */
.fx__planet {
  position: absolute; left: calc(var(--x) - 150%); top: var(--y);
  width: 300%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(22% 3.5% at 50% 0%, rgb(255 150 80 / 0.5), rgb(255 122 46 / 0) 100%),
    radial-gradient(50% 12% at 50% 0%, rgb(255 122 46 / 0.12), rgb(255 122 46 / 0) 100%),
    #0A0908;
  /* the atmosphere from the limb up: flame line, pale sky, deep blue */
  box-shadow:
    inset 0 2px 1px -1px rgb(255 150 80 / 0.95),
    0 0 0 1px rgb(255 122 46 / 0.55),
    0 -3px 7px 0 rgb(196 228 255 / 0.62),
    0 -10px 24px 4px rgb(90 150 230 / 0.4),
    0 -22px 60px 12px rgb(46 107 214 / 0.24);
}
/* dawn glare spilling over the night side, centred where the sun rises */
.fx__planet::after {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 42%; height: 14%; translate: -50% -28%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 150 80 / 0.34), rgb(255 122 46 / 0.1) 55%, rgb(255 122 46 / 0));
}
.fx__sun {
  position: absolute; left: var(--x); top: var(--y);
  width: 30px; height: 18px; margin: -10px 0 0 -15px; border-radius: 50%;
  background: #FFFBF4;
  box-shadow: 0 0 10px 4px #FFE6C2, 0 2px 34px 14px rgb(255 140 70 / 0.5), 0 6px 110px 44px rgb(255 122 46 / 0.2);
}
.fx__sun::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 180px; height: 110px; margin: -80px 0 0 -90px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(242 156 192 / 0.22), rgb(242 156 192 / 0));
}
.fx__pane, .fx__order, .fx__noise, .fx__label--x, .fx__label--y, .fx__label--frontier,
.fx__label--ghost, .fx__ghost, .fx__target, .fx__you-layer { visibility: hidden; }
.hero.gl-live .fx__planet, .hero.gl-live .fx__sun { display: none; }
/* With motion on, keep the 2D chart out of sight until motion.js has set its
   opening state (ui.js adds .motion-off if the motion scripts fail) */
.fx { transition: opacity 0.6s var(--ease-out); }
.motion-ok:not(.hero-story):not(.motion-off) .fx { opacity: 0; }

/* Markers (HTML, centred on their anchor with margins so GSAP can scale them) */
.fx__dot { position: absolute; left: var(--x); top: var(--y); border-radius: 50%; }
.fx__you {
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--paper-50);
  box-shadow: 0 0 0 5px rgb(246 179 107 / 0.35), 0 0 24px 6px rgb(246 179 107 / 0.35);
}
.fx__ghost { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1px solid var(--taupe-300); }
.fx__target { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgb(246 179 107 / 0.6); }
.hero.gl-live .fx__dot { display: none; }

.fx__label, .fx__you-tag, .fx__prompt {
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--font-mono); font-size: var(--step--2); line-height: 1;
  letter-spacing: 0.06em; white-space: nowrap;
  color: var(--color-text-muted);
}
.fx__label--x, .fx__label--y { text-transform: uppercase; letter-spacing: var(--tracking-label); }
.fx__label--x { translate: -100% calc(-100% - 10px); }
.fx__label--y { translate: 14px 0; }
.fx__label--frontier { color: var(--color-signal-text); translate: calc(-100% - 16px) -150%; }
.fx__label--ghost { translate: -50% 18px; }
.fx__you-layer { position: absolute; inset: 0; translate: calc(var(--dx) * var(--q, 0)) 0; }
.fx__you-tag { translate: -50% calc(-100% - 16px); color: var(--color-text); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.fx__prompt {
  translate: calc(-100% - 22px) -50%;
  padding: 0.6em 0.85em 0.6em 0.7em;
  font-size: var(--step--1); letter-spacing: 0;
  color: var(--color-text);
  background: rgb(24 21 18 / 0.9);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
}
.fx__caret { color: var(--color-signal-text); }
.motion-ok .fx__prompt > span:last-child { animation: type-in 1.1s steps(22, end) 900ms both; }
@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* WebGL scene live: the label box covers the stage and hero-gl.js places
   every label at its projected 3D anchor (transform only). */
.hero.gl-live .fx { top: 0; left: 0; right: auto; width: 100%; height: 100%; aspect-ratio: auto; }
.hero.gl-live .fx__label, .hero.gl-live .fx__you-layer, .hero.gl-live .fx__you-layer > * { left: 0; top: 0; }
.hero.gl-live .fx__you-layer { inset: auto; translate: none; }

/* ---------- Hero story: beats + weights table ---------------------------- */
.hero__story {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-7);
  align-items: end;
  padding-block: var(--space-8) var(--space-9);
}
.beats { grid-column: 1 / span 6; display: grid; gap: var(--space-6); }
.beat { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--space-3); }
.beat__idx {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label);
  color: var(--color-signal-text); padding-top: 0.8em;
}
.beat__text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 0.95rem + 1.25vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  max-width: 28ch;
  text-wrap: balance;
  white-space: pre-line; /* a "\n" in the copy is a deliberate line break */
}
.story-cta { grid-column: 1 / span 6; justify-self: start; }

/* ---------- Hero, pinned story mode (motion.js) -------------------------- */
.hero-story .hero { height: 100vh; height: 100svh; }
.hero-story .hero__pin { height: 100%; min-height: 0; }
.hero-story .hero__story {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-block: 0 var(--space-7);
  pointer-events: none;
}
.hero-story .beats { gap: 0; }
.hero-story .beat { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.hero-story .story-cta { opacity: 0; visibility: hidden; pointer-events: auto; }
/* Desktop: text and the closing CTA share the left column, centred; the
   scene owns the right side (the WebGL camera frames it there, hero-gl.js) */
@media (min-width: 1024px) {
  .hero-story .hero__story {
    top: var(--header-h);
    grid-template-rows: 1fr auto auto 1fr;
    row-gap: var(--space-7);
    padding-block: var(--space-6);
  }
  .hero-story .beats { grid-column: 1 / span 5; grid-row: 2; }
  .hero-story .story-cta { grid-column: 1 / span 5; grid-row: 3; }
  .hero-story .fx { width: min(54vw, calc((100svh - var(--header-h) - var(--band)) * 1.47)); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero-story .hero__story { row-gap: var(--space-5); padding-block: var(--space-4); }
  .hero-story .beat__text { font-size: clamp(1.25rem, 0.8rem + 1.1vw, 1.875rem); }
}

@media (max-width: 1023px) {
  .hero__title { grid-column: 1 / -1; }
  .hero__aside { grid-column: 1 / span 9; }
  .fx {
    left: var(--gutter); right: var(--gutter); width: auto; aspect-ratio: auto;
    height: clamp(14rem, calc(100svh - var(--header-h) - 30rem), 48svh);
  }
  .beats { grid-column: 1 / span 7; }
  .story-cta { grid-column: 8 / -1; justify-self: end; align-self: end; }
}
@media (max-width: 767px) {
  .hero__content { padding-bottom: var(--space-6); row-gap: var(--space-5); }
  .hero__aside { grid-column: 1 / -1; }
  .hero__scrim {
    background: linear-gradient(180deg, rgb(15 13 11 / 0) 0%, rgb(15 13 11 / 0) 40%, rgb(15 13 11 / 0.85) 62%, var(--color-bg) 100%);
  }
  .fx {
    top: calc(var(--header-h) + var(--space-4)); left: var(--gutter); right: var(--gutter);
    width: auto; aspect-ratio: auto;
    height: clamp(11rem, calc(100svh - var(--header-h) - 27rem), 44svh);
  }
  .fx__prompt { font-size: var(--step--2); }
  .hero__story { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .beats, .story-cta { grid-column: 1; }
  .story-cta { justify-self: start; }
  .beat { grid-template-columns: 2rem minmax(0, 1fr); }
  .beat__text { font-size: var(--step-2); }
  .hero-story .hero__story { padding-bottom: var(--space-5); row-gap: var(--space-5); }
}

/* ---------- Partners (trust strip) -------------------------------------- */
.partners { padding-block: var(--space-6) var(--space-9); }
.partners__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: center;
}
.partners .eyebrow { grid-column: 1 / span 3; }
.partners__list {
  grid-column: 5 / -1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--color-line);
}
.partner { display: grid; place-items: center; height: 5.5rem; }
.partner + .partner { border-left: 1px solid var(--color-line); }
.partner img { width: auto; max-width: 70%; max-height: 1.75rem; opacity: 0.66; transition: opacity var(--dur-base) var(--ease-out); }
.partner:nth-child(3) img { max-height: 2.25rem; }
.partner:hover img { opacity: 1; }

/* ---------- Rule placement ---------------------------------------------- */
.statement > .rule, .offers > .rule, .refs > .rule { margin-bottom: var(--space-section); }

/* ---------- 01 Statement ------------------------------------------------- */
.statement { padding-bottom: var(--space-section); }
.statement__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
.statement__idx {
  grid-column: 1 / span 1;
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label);
  color: var(--color-signal-text);
  padding-top: 1.1em;
}
.statement__text {
  grid-column: 2 / span 10;
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--weight-regular);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
  text-wrap: pretty;
}

/* ---------- 02 Story (services) ----------------------------------------- */
/* Static by default: three steps and one window. ui.js adds .is-tracking
   (the step whose screen is showing leads; the others step back but stay
   AA-readable) and, on tall desktops, .is-scrolly: the grid sticks while
   the track scrolls, each step owns a third of the run and fills its rail. */
.story {
  padding-bottom: var(--space-section);
  --story-dim: #6B6359;   /* inactive title, 3.3:1 (large text) */
  --story-dim-2: #857C71; /* inactive description, 4.7:1 */
  --num-col: 2.75rem;
}
.story__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}
.story__rail { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--space-6); }
.story__visual {
  grid-column: 6 / -1;
  position: sticky; top: calc(var(--header-h) + var(--space-6));
}
.story-step {
  position: relative;
  display: grid; grid-template-columns: var(--num-col) minmax(0, 1fr); column-gap: var(--space-3);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.story-step__num {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label);
  color: var(--color-text-2);
  padding-top: 0.9em;
  transition: color var(--dur-slow) var(--ease-out);
}
.story-step__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
  transition: color var(--dur-slow) var(--ease-out);
}
.story-step__desc {
  margin-top: var(--space-3); color: var(--color-text-2); max-width: 44ch;
  transition: color var(--dur-slow) var(--ease-out);
}
.story-step__rail, .story-step__screen { display: none; }

@media (min-width: 1024px) {
  .story.is-tracking .story-step__title { color: var(--story-dim); }
  .story.is-tracking .story-step__num,
  .story.is-tracking .story-step__desc { color: var(--story-dim-2); }
  .story.is-tracking .story-step.is-active .story-step__title { color: var(--color-text); }
  .story.is-tracking .story-step.is-active .story-step__desc { color: var(--color-text-2); }
  .story.is-tracking .story-step.is-active .story-step__num { color: var(--color-signal-text); }
  .story.is-tracking .story-step--soon.is-active .story-step__num { color: var(--color-secondary); }
}

@media (min-width: 1024px) and (min-height: 620px) {
  .story.is-scrolly { --story-run: 180svh; }
  .story.is-scrolly .story__track { height: calc(100svh - var(--header-h) + var(--story-run)); }
  .story.is-scrolly .story__grid {
    position: sticky; top: var(--header-h);
    height: calc(100svh - var(--header-h));
    align-content: center; align-items: center;
  }
  .story.is-scrolly .story__visual { position: relative; top: auto; }
  .story.is-scrolly .story__rail { gap: clamp(1rem, 3svh, 2.25rem); }
  .story.is-scrolly .story-step {
    border-top: 0;
    padding: clamp(0.6rem, 1.9svh, 1.5rem) 0 clamp(0.6rem, 1.9svh, 1.5rem) 1.75rem;
  }
  /* type follows the viewport height so all three steps always fit */
  .story.is-scrolly .story-step__title { font-size: clamp(1.4rem, 3.6svh, 2.25rem); }
  .story.is-scrolly .story-step__desc { font-size: clamp(0.9375rem, 2.05svh, 1.0625rem); margin-top: clamp(0.5rem, 1.3svh, 0.75rem); max-width: 46ch; }
  .story.is-scrolly .story-step__rail {
    display: block; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px;
    border-radius: 1px; background: var(--color-line); overflow: hidden;
  }
  .story-step__rail::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: var(--color-signal);
    transform-origin: 50% 0; transform: scaleY(var(--fill, 0));
  }
  .story-step--soon .story-step__rail::after { background: var(--color-secondary); }
  .story-step.is-done .story-step__rail::after { opacity: 0.4; }
}

/* ---------- Product window (illustrative) ------------------------------- */
/* One window with three screens. Every screen's markup is its END state
   (no-JS, reduced motion); motion.js plays each from empty. Desktop stacks
   the screens in .mock__stage; small screens show one under each step. */
.mock {
  --mk-pad: clamp(0.75rem, 0.5rem + 0.9vw, 1.25rem);
  --ai: var(--lavender-300);
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hairline), var(--shadow-inner-top), var(--shadow-float);
  overflow: hidden;
  font-size: 12px;
  user-select: none;
}
.mock__bar {
  display: flex; align-items: center; gap: var(--space-3);
  height: 2.75rem; padding-inline: var(--mk-pad);
  border-bottom: 1px solid var(--color-line);
}
.mock__mark { width: 15px; height: auto; flex: none; }
.mock__tabs { position: relative; isolation: isolate; display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.mock__tab {
  position: relative; isolation: isolate;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  color: var(--color-text-muted);
  transition: color var(--dur-slow) var(--ease-out);
}
.mock__tab::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--color-surface-2); box-shadow: var(--shadow-hairline);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.mock[data-state="0"] [data-tab="0"], .mock[data-state="1"] [data-tab="1"], .mock[data-state="2"] [data-tab="2"] { color: var(--color-text); }
.mock[data-state="0"] [data-tab="0"]::before, .mock[data-state="1"] [data-tab="1"]::before, .mock[data-state="2"] [data-tab="2"]::before { opacity: 1; }
/* one pill that slides between tabs (ui.js sets --ink-x/--ink-w) */
.mock__ink {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: -1;
  width: var(--ink-w, 0px); transform: translateX(var(--ink-x, 0px));
  border-radius: var(--radius-pill);
  background: var(--color-surface-2); box-shadow: var(--shadow-hairline);
  opacity: 0;
  transition: transform 560ms var(--ease-focus), width 560ms var(--ease-focus);
}
.mock__tabs.has-ink .mock__ink { opacity: 1; }
.mock__tabs.has-ink .mock__tab::before { display: none; }
.mock__tag {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.2rem 0.55rem;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.mock__stage { position: relative; }
.story__visual .mock__stage { aspect-ratio: 16 / 10; overflow: hidden; }
.story__visual .view {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.mock[data-state="0"] .view[data-view="0"], .mock[data-state="1"] .view[data-view="1"], .mock[data-state="2"] .view[data-view="2"] {
  opacity: 1; visibility: visible; transition-delay: 0s;
}
.story.is-driven .story__visual .view { transition: none; }
/* the reveal's leading edge: the same light line as the hero's glass */
.mock__edge { position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; --edge: var(--apricot-400); }
.mock__edge::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--edge) 18%, var(--edge) 82%, transparent);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--edge) 40%, transparent);
}

/* Screen scaffolding */
.view {
  container: view / inline-size;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 0.9rem;
  padding: var(--mk-pad);
}
.view--ai { grid-template-rows: auto minmax(0, 1fr); }
.sk { display: block; flex: none; height: 5px; width: var(--w); border-radius: 3px; background: var(--color-line-strong); }
.sk--dim { background: var(--color-line); }
.v-head { display: flex; align-items: center; gap: 0.75rem; min-height: 1.6rem; }
.v-name { display: flex; flex-direction: column; gap: 0.4rem; }
.v-plot { position: relative; min-height: 0; }
.v-plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mock--inline { box-shadow: var(--shadow-hairline), var(--shadow-inner-top); }
.mock--inline .v-plot { aspect-ratio: 2 / 1; }

/* 01 Forecasting: raw price, then the wave count drawn over it */
.v-coin {
  flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--apricot-300), var(--apricot-500) 72%);
  box-shadow: 0 0 0 3px rgb(246 179 107 / 0.1);
}
.v-seg { display: flex; gap: 2px; margin-left: 0.5rem; padding: 2px; border-radius: var(--radius-pill); box-shadow: var(--shadow-hairline); }
.v-seg b { display: grid; place-items: center; width: 1.7rem; height: 1.05rem; border-radius: var(--radius-pill); }
.v-seg b::after { content: ""; width: 40%; height: 3px; border-radius: 2px; background: var(--color-line-strong); }
.v-seg b.is-on { background: var(--color-surface-2); box-shadow: var(--shadow-hairline); }
.v-seg b.is-on::after { background: var(--taupe-400); }
.v-live { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.v-live em { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-signal); box-shadow: 0 0 0 3px rgb(246 179 107 / 0.16); }
/* looping details run only while their screen is on screen (ui.js .is-live) */
.motion-ok .is-live .v-live em { animation: mk-pulse 2.2s var(--ease-in-out) infinite; }
@keyframes mk-pulse { 50% { box-shadow: 0 0 0 6px rgb(246 179 107 / 0); } }

.mk-grid line { stroke: var(--color-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-fib line { stroke: var(--color-secondary); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0.8; }
.mk-fib text, .mk-pv text { font-family: var(--font-mono); font-size: 11px; }
.mk-fib text { fill: var(--color-secondary); }
.mk-line { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mk-line--noise { stroke: var(--taupe-400); stroke-width: 1.25; opacity: 0.32; }
.mk-line--clean { stroke: var(--paper-50); stroke-width: 2; }
.mk-pv circle { fill: var(--color-surface); stroke: var(--color-signal); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mk-pv text { fill: var(--color-signal); font-weight: 500; }

.v-video {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem 0.75rem 0.6rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-hairline);
}
.mk-thumb {
  display: grid; place-items: center; flex: none;
  width: 4rem; aspect-ratio: 16 / 10;
  border-radius: 6px;
  background: var(--color-bg);
  box-shadow: var(--shadow-hairline);
  color: var(--color-signal);
}
.mk-thumb .icon { width: 1rem; height: 1rem; }
.mk-lines { display: flex; flex-direction: column; gap: 0.45rem; flex: 1; min-width: 0; }
.mk-lines i { display: block; height: 5px; width: var(--w); border-radius: 3px; background: var(--color-line-strong); }
.v-dur { margin-left: auto; }
.v-video .mk-progress { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.35rem; }
.mk-progress { display: block; height: 2px; border-radius: 1px; background: var(--color-line); overflow: hidden; }
.mk-progress em { display: block; height: 100%; width: 100%; background: var(--color-signal); transform-origin: 0 50%; transform: scaleX(0.38); }

/* 02 Academy: the curriculum as a rising path, one stop per module */
.v-badge { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px; background: rgb(246 179 107 / 0.1); color: var(--color-signal); }
.v-badge .icon { width: 1rem; height: 1rem; }
.v-avatars { margin-left: auto; display: flex; padding-left: 0.4rem; }
.v-avatars b {
  width: 1.35rem; height: 1.35rem; margin-left: -0.4rem; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-surface);
  background: linear-gradient(140deg, var(--taupe-300), var(--umber-600));
}
.v-avatars b:nth-child(2) { background: linear-gradient(140deg, var(--apricot-300), var(--apricot-800)); }
.v-avatars b:nth-child(3) { background: linear-gradient(140deg, var(--lavender-300), var(--umber-600)); }
.cp-grid line { stroke: var(--color-line); stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.cp-area { fill: rgb(246 179 107 / 0.06); }
.cp-todo { fill: none; stroke: var(--color-line-strong); stroke-width: 1.5; stroke-dasharray: 4 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cp-done { fill: none; stroke: var(--paper-50); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cp-dot { fill: var(--color-signal); }
.cp-check { fill: none; stroke: var(--ink-900); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-ring { fill: var(--color-surface); stroke: var(--color-line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.is-current .cp-ring { stroke: var(--color-signal); stroke-width: 2; }
.cp-core { fill: var(--color-signal); }
.cp-halo { fill: rgb(246 179 107 / 0.22); transform-box: fill-box; transform-origin: center; }
.motion-ok .story-step__screen.is-live .cp-halo,
.motion-ok .story__visual.is-live .mock[data-state="1"] .cp-halo { animation: cp-halo 2.6s var(--ease-out) infinite; }
@keyframes cp-halo { from { transform: scale(0.8); opacity: 1; } to { transform: scale(2.3); opacity: 0; } }
.cp-label, .cp-card__idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }
.cp-label { fill: var(--color-text-2); }
.is-next .cp-label { fill: var(--color-text-muted); opacity: 0.6; }
.cp-card__bg { fill: var(--color-surface-2); stroke: var(--color-line-strong); vector-effect: non-scaling-stroke; }
.cp-link { stroke: var(--color-signal); stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.cp-thumb { fill: var(--color-bg); stroke: var(--color-line); vector-effect: non-scaling-stroke; }
.cp-play, .cp-card__idx, .cp-prog__fill { fill: var(--color-signal); }
.cp-sk { fill: var(--color-line-strong); }
.cp-sk--dim, .cp-prog { fill: var(--color-line); }
.v-track { display: flex; align-items: center; gap: 1rem; min-height: 1.6rem; }
.v-steps { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.v-steps b { height: 4px; border-radius: 2px; background: var(--color-line); overflow: hidden; }
.v-steps em { display: block; height: 100%; background: var(--color-signal); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.v-steps .is-done em { background: var(--taupe-300); }
.v-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--color-signal-text); }
.v-count span { color: var(--color-text-muted); }

/* 03 AI tools: a prompt, then three results (scan, scenarios, portfolio) */
.v-prompt {
  display: flex; align-items: center; gap: 0.7rem;
  height: 2.6rem; padding: 0 0.4rem 0 0.8rem;
  border-radius: var(--radius-md);
  border: 1px dashed rgb(195 186 223 / 0.5);
  background: rgb(195 186 223 / 0.04);
}
.v-spark { flex: none; width: 1rem; height: 1rem; color: var(--ai); }
.v-type { display: flex; align-items: center; gap: 0.4em; flex: 1; min-width: 0; overflow: hidden; }
.v-type .sk { background: rgb(195 186 223 / 0.38); }
.v-caret { flex: none; width: 1px; height: 0.95rem; background: var(--ai); }
.motion-ok .is-live .v-caret { animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.v-send { flex: none; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--ai); color: var(--ink-900); }
.v-send .icon { width: 0.9rem; height: 0.9rem; }
.v-cards {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem; min-height: 0;
}
.v-card {
  position: relative; display: flex; flex-direction: column; gap: 0.6rem; min-height: 0;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2); box-shadow: var(--shadow-hairline);
  overflow: hidden;
}
.v-card--scan { grid-row: 1 / span 2; }
.v-label {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 10px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.v-label::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--ai); }
.v-rows { position: relative; flex: 1; display: flex; flex-direction: column; }
.v-row {
  position: relative;
  display: grid; grid-template-columns: 0.5rem minmax(0, 1fr) 3rem 2.2rem; align-items: center; gap: 0.7rem;
  flex: 1 1 0; min-height: 2.6rem; max-height: 3.5rem; padding-inline: 0.5rem;
  border-bottom: 1px solid var(--color-line);
}
.v-row:nth-last-child(2) { border-bottom: 0; }
.v-nm { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.v-row em { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); }
.v-spk { width: 100%; height: 0.9rem; overflow: visible; }
.v-spk path { fill: none; stroke: var(--taupe-400); stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.v-row b { position: relative; height: 4px; border-radius: 2px; background: var(--color-line); overflow: hidden; }
.v-row b::after { content: ""; position: absolute; inset: 0; background: var(--taupe-300); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.v-row.is-hit { border-radius: 6px; border-bottom-color: transparent; background: rgb(195 186 223 / 0.08); box-shadow: inset 0 0 0 1px rgb(195 186 223 / 0.22); }
.v-row.is-hit .sk { background: rgb(195 186 223 / 0.42); }
.v-row.is-hit .sk--dim { background: rgb(195 186 223 / 0.18); }
.v-row.is-hit .v-spk path { stroke: var(--ai); }
.v-row.is-hit b::after { background: var(--ai); }
.v-band {
  position: absolute; left: 0; right: 0; top: 0; height: 2.75rem; border-radius: 6px;
  background: linear-gradient(180deg, rgb(195 186 223 / 0), rgb(195 186 223 / 0.14));
  border-bottom: 1px solid rgb(195 186 223 / 0.55);
  visibility: hidden; pointer-events: none;
}
.v-scen { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.sc-grid line { stroke: var(--color-line); vector-effect: non-scaling-stroke; }
.sc-cone { fill: rgb(195 186 223 / 0.07); }
.sc-past { fill: none; stroke: var(--paper-50); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-now { stroke: var(--color-line-strong); stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.sc-path { fill: none; stroke-width: 1.5; stroke-dasharray: 3 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-path--up, .sc-end--up { stroke: var(--ai); }
.sc-path--base, .sc-end--base { stroke: var(--taupe-300); }
.sc-path--down, .sc-end--down { stroke: var(--taupe-400); }
.sc-end { fill: var(--color-surface-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sc-dot { fill: var(--paper-50); }
.v-port { flex: 1; min-height: 0; display: flex; align-items: center; gap: 1rem; }
.v-donut { flex: none; width: 6.5rem; height: 6.5rem; }
.dn-track { fill: none; stroke: var(--color-line); stroke-width: 10; }
.dn-seg { fill: none; stroke-width: 10; }
.dn-sk { fill: var(--color-line-strong); }
.dn-sk--dim { fill: var(--color-line); }
.v-legend { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.v-leg { display: grid; grid-template-columns: 0.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.v-leg em { width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--c); }

/* Narrow screens (under each step on phones) */
@container view (max-width: 520px) {
  .v-seg, .v-dur, .mk-fib text { display: none; }
  .mk-fib text, .mk-pv text, .cp-label, .cp-card__idx { font-size: 17px; }
  .v-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .v-card--scan { grid-row: auto; }
  .v-row { flex: none; min-height: 0; height: 2.4rem; }
  .v-row:nth-child(n+5) { display: none; }
  .v-row:nth-child(4) { border-bottom: 0; }
  .v-scen { flex: none; height: auto; aspect-ratio: 260 / 100; }
  .v-donut { width: 5.5rem; height: 5.5rem; }
}

/* ---------- 03 Offers ---------------------------------------------------- */
.offers { padding-bottom: var(--space-section); }
.offers__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}
.offers__head { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + var(--space-6)); padding-top: var(--space-6); }
.offers__list { grid-column: 4 / -1; }
.offer {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 4fr) minmax(0, 5fr) 7.5rem;
  column-gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-6) var(--space-7);
  border-top: 1px solid var(--color-line);
}
.offer:last-child { border-bottom: 1px solid var(--color-line); }
.offer__num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label); color: var(--color-text-muted); padding-top: 0.7em; transition: color var(--dur-base) var(--ease-out); }
.offer__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
  transition: transform var(--dur-slow) var(--ease-out);
}
.offer__desc { color: var(--color-text-2); padding-top: 0.2em; }
.offer__glyph { width: 7.5rem; height: 2.5rem; overflow: visible; margin-top: 0.35rem; }
.offer__glyph path { fill: none; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity var(--dur-slow) var(--ease-out); }
.g-noise { stroke: var(--taupe-400); opacity: 0.5; }
.g-clean { stroke: var(--color-signal); opacity: 0; }
@media (hover: hover) {
  .offer:hover .offer__num { color: var(--color-signal-text); }
  .offer:hover .offer__title { transform: translateX(4px); }
  .offer:hover .g-noise { opacity: 0; }
  .offer:hover .g-clean { opacity: 1; }
}

/* ---------- 04 References ----------------------------------------------- */
.refs { padding-bottom: var(--space-section); }
.section-head { display: flex; flex-direction: column; gap: var(--space-4); }
.section-head .h2 { max-width: 13em; }
.refs__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--space-block);
}
.quote {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hairline);
  transition: transform var(--dur-slow) var(--ease-out);
}
.quote::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px var(--color-line-strong), var(--shadow-float);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .quote:hover { transform: translateY(-3px); }
  .quote:hover::after { opacity: 1; }
}
.quote blockquote p { color: var(--color-text-2); hyphens: auto; }
.quote--feature { grid-column: 1 / span 7; grid-row: span 2; background: var(--color-surface); }
.quote--feature blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2.125rem);
  line-height: 1.32;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  hyphens: manual;
}
.quote:not(.quote--feature) { grid-column: 8 / span 5; }
.quote__by { display: flex; align-items: center; gap: var(--space-3); font-size: var(--step--1); }
.quote__by img { width: 2.25rem; height: 2.25rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--color-line); }
.quote--feature .quote__by img { width: 2.75rem; height: 2.75rem; }
.quote__by a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); letter-spacing: 0.02em;
  color: var(--color-text);
  border-radius: var(--radius-xs);
}
.quote__by a .icon { width: 0.85rem; height: 0.85rem; color: var(--color-text-muted); transition: color var(--dur-fast) var(--ease-out); }
.quote__by a:hover .icon { color: var(--color-text); }
.quote__by a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 05 Answers (paper) ------------------------------------------ */
.faq {
  position: relative;
  background: var(--color-bg);
  color: var(--color-text);
  padding-block: var(--space-section);
  margin-top: 48px;
}
/* Paper edge: the calm contour the page resolves into */
.faq::before {
  content: ""; position: absolute; left: 0; right: 0; top: -47px; height: 48px;
  background: var(--color-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V30C160 30 250 6 420 8S700 40 900 38 1210 12 1440 16V48Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V30C160 30 250 6 420 8S700 40 900 38 1210 12 1440 16V48Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.faq__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-7);
  align-items: start;
}
.faq__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-4); }
.faq__head .h2 { max-width: 14ch; }
.faq__list { grid-column: 7 / -1; border-top: 1px solid var(--color-line-strong); }
.qa { border-bottom: 1px solid var(--color-line-strong); }
.qa summary {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; column-gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
}
.qa summary::-webkit-details-marker { display: none; }
.qa__num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label); color: var(--color-text-muted); }
.qa__q {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  transition: transform var(--dur-base) var(--ease-out);
}
.qa__icon { position: relative; width: 0.875rem; height: 0.875rem; align-self: center; }
.qa__icon::before, .qa__icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px;
  background: currentColor; border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-out);
}
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa[open] .qa__num { color: var(--color-signal-text); }
@media (hover: hover) { .qa summary:hover .qa__q { transform: translateX(3px); } }
.qa__a { padding: 0 2.5rem var(--space-6) calc(2.5rem + var(--space-4)); color: var(--color-text-2); max-width: 64ch; }
.motion-ok .qa[open] .qa__a p { animation: qa-in var(--dur-slow) var(--ease-out); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Closing CTA -------------------------------------------------- */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 78vh; min-height: 78svh;
  display: grid; align-items: center;
  padding-block: var(--space-section);
}
.closing__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
.closing::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--color-bg) 0%, rgb(15 13 11 / 0.4) 40%, rgb(15 13 11 / 0.1) 70%, var(--color-bg) 100%);
}
.closing__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-7); }
.closing__title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  max-width: 13ch;
}

/* ---------- Tablet ------------------------------------------------------- */
@media (max-width: 1023px) {
  .partners .eyebrow { grid-column: 1 / -1; margin-bottom: var(--space-4); }
  .partners__list { grid-column: 1 / -1; }
  .statement__idx { grid-column: 1 / -1; padding-top: 0; margin-bottom: var(--space-4); }
  .statement__text { grid-column: 1 / -1; }

  .story__rail { grid-column: 1 / -1; }
  .story__visual { display: none; }
  .story-step__screen {
    display: block; margin: var(--space-5) 0 0 calc(-1 * (var(--num-col) + var(--space-3)));
    /* far below the fold: skip their layout until they come near. The
       placeholder heights are fitted to the real ones (within ~10px). */
    content-visibility: auto;
    contain-intrinsic-block-size: auto calc(45.9vw + 170px);
  }
  [data-step="1"] .story-step__screen { contain-intrinsic-block-size: auto calc(45.9vw + 134px); }
  [data-step="2"] .story-step__screen { contain-intrinsic-block-size: auto calc(39.5vw + 177px); }
  .story-step__desc { margin-top: var(--space-5); }

  .offers__head { grid-column: 1 / -1; position: static; padding-top: 0; margin-bottom: var(--space-6); }
  .offers__list { grid-column: 1 / -1; }
  .offer { grid-template-columns: 2.75rem minmax(0, 1fr) 6rem; row-gap: var(--space-3); }
  .offer__desc { grid-column: 2 / 3; grid-row: 2; }
  .offer__glyph { grid-column: 3; grid-row: 1 / span 2; width: 6rem; }

  .quote--feature { grid-column: 1 / -1; grid-row: auto; }
  .quote:not(.quote--feature) { grid-column: span 6; }

  .faq__head { grid-column: 1 / -1; position: static; }
  .faq__list { grid-column: 1 / -1; }
}

/* ---------- Mobile ------------------------------------------------------- */
@media (max-width: 767px) {
  .partners { padding-bottom: var(--space-8); }
  .partner { height: 4.5rem; }
  .partner img { max-height: 1.35rem; }
  .partner:nth-child(3) img { max-height: 1.75rem; }

  .mock { font-size: 11px; }
  .story { --num-col: 2rem; }
  .story-step__screen { contain-intrinsic-block-size: auto calc(50vw + 148px); }
  [data-step="1"] .story-step__screen { contain-intrinsic-block-size: auto calc(50vw + 112px); }
  [data-step="2"] .story-step__screen { contain-intrinsic-block-size: auto calc(27vw + 531px); }

  .offer { grid-template-columns: 2rem minmax(0, 1fr); }
  .offer__glyph { display: none; }

  .quote:not(.quote--feature) { grid-column: 1 / -1; }
  .quote--feature blockquote p { font-size: 1.25rem; line-height: 1.38; }
  .qa summary { grid-template-columns: 2rem minmax(0, 1fr) 1rem; column-gap: var(--space-3); }
  .qa__a { padding-left: calc(2rem + var(--space-3)); padding-right: 0; }
  .closing { min-height: 70svh; }
}

/* ---------- Motion helpers ---------------------------------------------- */
.mock { transform-origin: 50% 50%; }
.split-line { padding-bottom: 0.06em; }