/* ============================================================================
   Convert · "The Cohort"
   Grammar: cut-scene argument. Every visible word on the page is Convert's
   own, lifted from the pre-rebuild page. This file is the effect only:
   brand tokens, drawn cinematic beds, and the scene compositions.

   The engine (scrollcraft.css) is the mechanism and is never restyled here.
   Grounds are painted PER SCENE and change on a hard edge: there is no
   data-sc-drift on this page, because a cut is not an interpolation.
   ========================================================================== */

:root {
  /* Convert's own palette, carried from public/styles.css unchanged. */
  --sc-canvas:     #FAFAF7;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #0A0A0A;
  --sc-ink-soft:   #6B6B66;
  --sc-accent:     #1A3D2E;
  --sc-accent-ink: #FAFAF7;

  --ink:         #0A0A0A;
  --ink-2:       #1F1F1F;
  --paper:       #FAFAF7;
  --paper-pure:  #FFFFFF;
  --green:       #1A3D2E;
  --green-bright:#2A6B4D;
  --green-lift:  #5FBF92;
  --green-tint:  #E8EFEA;
  --muted:       #63635E;
  --plate:       #0B1F17;
  --plate-2:     #14332A;
  --hair:      rgba(10, 10, 10, 0.10);
  --hair-firm: rgba(10, 10, 10, 0.22);
  --hair-dark: rgba(250, 250, 247, 0.15);

  --sc-font-display: "Geist", system-ui, -apple-system, sans-serif;
  --sc-font-text:    "Geist", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  --nav-h: 88px;
  --max: 1320px;
  --sc-maxw: 1320px;
  --sc-r-sm: 0px; --sc-r-md: 0px; --sc-r-lg: 0px; --sc-r-pill: 0px;

  --lift: 0 1px 2px rgba(10,10,10,0.04),
          0 10px 24px -8px rgba(10,10,10,0.10),
          0 34px 70px -28px rgba(10,10,10,0.16);
}

body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  overflow-wrap: break-word;
}
body.nav-open { overflow: hidden; }
.sc-grain { opacity: 0.028; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }

.container, .wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 40px);
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip {
  position: absolute; left: 16px; top: 16px; z-index: 120;
  transform: translateY(-200%);
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; font-family: var(--sc-font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.skip:focus-visible { transform: translateY(0); }

/* ---------- type: Convert's own ramp ---------- */
.eyebrow {
  font-family: var(--sc-font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green); font-weight: 500; display: block;
}
.mono {
  font-family: var(--sc-font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.display  { font-size: clamp(48px, 8.4vw, 132px); line-height: 0.94; letter-spacing: -0.04em; font-weight: 600; }
.headline { font-size: clamp(34px, 5.2vw, 76px);  line-height: 0.98; letter-spacing: -0.03em; }
.body { font-size: 18px; line-height: 1.55; color: var(--ink); }
.body.muted { color: var(--muted); }
.body.narrow { max-width: 720px; }
.sub-line {
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  color: var(--muted); max-width: 46ch; margin: 24px 0 0; text-wrap: pretty;
}
.accent-bar { width: 120px; height: 8px; background: var(--green); display: block; }

.section-head { margin-bottom: clamp(2.25rem, 5vw, 4rem); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head .headline { margin-bottom: 26px; }
.section-head .accent-bar { margin-bottom: 26px; }

/* ---------- scenes: opaque grounds, hard cuts ---------- */
.scene { position: relative; isolation: isolate; }
.scene > .wrap { position: relative; z-index: 2; padding-block: clamp(3.5rem, 7vw, 7.5rem); }
.scene--tight > .wrap { padding-block: clamp(2.75rem, 5vw, 5rem); }
.scene--paper { background: var(--paper); }
.scene--white { background: var(--paper-pure); border-block: 1px solid var(--hair); }

/* Both dark grounds restate `color` alongside the tokens: `color` inherits as
   a COMPUTED value, so redefining --sc-ink alone would leave every line under
   it still painted in the body's ink. */
.scene--plate,
.scene--dark {
  --ink: #F4F2ED;
  --muted: #ADC2B6;
  --green: var(--green-lift);
  --hair: rgba(244,242,237,0.14);
  --hair-firm: rgba(244,242,237,0.28);
  color: var(--ink);
}
.scene--plate { background: var(--plate); }
.scene--dark  { background: var(--plate-2); }
.scene--plate .eyebrow, .scene--dark .eyebrow { color: var(--green-lift); }
.scene--plate .accent-bar, .scene--dark .accent-bar { background: var(--green-lift); }
.scene--plate .body.muted, .scene--dark .body.muted { color: var(--muted); }

/* Drawn beds. No photography: a contour field, a measure grid, grain and a
   light sweep do the work a background image would have done. */
.plate-bed {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  color: var(--green-lift); opacity: 0.16; pointer-events: none;
}
.plate-bed--soft { opacity: 0.12; }
.plate-bed svg { width: 100%; height: 100%; }

/* ============================ NAV ============================
   This grammar's chrome is the brand's own bar, and it carries the
   page's progress as a hairline plus a scene-aware active link. */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 250, 247, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hair);
  transition: background 300ms linear, border-color 300ms linear;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 88px; }
.nav-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-brand img { height: 40px; width: auto; }
.nav-brand-name { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.nav-links {
  display: flex; gap: 30px;
  font-family: var(--sc-font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-links a { position: relative; padding: 8px 0; transition: color .15s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 1px; background: currentColor;
  transition: right 260ms var(--sc-ease-out);
}
.nav-links a:hover { color: var(--green); }
.nav-links a.is-here { color: var(--green); }
.nav-links a.is-here::after { right: 0; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; background: var(--ink); color: var(--paper);
  font-family: var(--sc-font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background .15s, color .15s, border-color .15s;
}
.nav-cta:hover { background: var(--green); border-color: var(--green); }
.nav-cta:active { transform: translateY(1px); }
.nav-cta .arrow { font-size: 14px; line-height: 1; }
.nav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.nav-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--green);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
}
/* Over a dark scene the bar re-inks, or it disappears into the plate. */
.nav.is-dark {
  background: rgba(11, 31, 23, 0.74);
  border-bottom-color: rgba(244,242,237,0.16);
  color: #F4F2ED;
}
.nav.is-dark .nav-links a:hover, .nav.is-dark .nav-links a.is-here { color: var(--green-lift); }
.nav.is-dark .nav-cta { background: var(--green-lift); color: #08170F; border-color: var(--green-lift); }
.nav.is-dark .nav-progress span { background: var(--green-lift); }

.nav-toggle { display: none; background: none; border: 0; padding: 10px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; margin: 4px 0; transition: transform 200ms var(--sc-ease-out), opacity 160ms; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: none; }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .nav-inner { height: 68px; }
  :root, body { --nav-h: 68px; }
  .nav-brand img { height: 32px; }
  .nav-brand-name { font-size: 21px; }
  .mobile-menu {
    display: grid; gap: 2px;
    max-height: 0; overflow: hidden;
    border-top: 1px solid transparent;
    transition: max-height 340ms var(--sc-ease-drawer), border-color 200ms;
  }
  .mobile-menu.is-open { max-height: 60vh; border-top-color: var(--hair); }
  .mobile-menu a {
    padding: 15px clamp(1.25rem, 4vw, 40px);
    font-family: var(--sc-font-mono); font-size: 13px;
    letter-spacing: 0.14em; text-transform: uppercase;
    border-bottom: 1px solid var(--hair);
  }
  .mobile-menu .mobile-cta { background: var(--ink); color: var(--paper); border-bottom: 0; }
}

/* ============================ SCENE 1 · HERO ============================
   Four drawn planes. Copy rides at exactly 1x; the receipt card travels
   faster and overtakes it, which is the depth cue. Planes transition
   opacity only: a transition on transform would ease every per-frame
   scroll write and read as the card lagging behind the thumb. */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  background: var(--paper);
  padding-top: clamp(1.75rem, 4vh, 3.25rem);
}
.hero__bed { position: absolute; inset: -8% -4% auto -4%; height: 128%; z-index: 0; pointer-events: none; will-change: transform; }
.hero__bed, .hero-left, .hero-right { transition: opacity 380ms var(--sc-ease-out); }

.hero__field {
  background:
    radial-gradient(120% 85% at 78% 8%,  rgba(42,107,77,0.16) 0%, rgba(42,107,77,0) 58%),
    radial-gradient(90% 70% at 12% 92%,  rgba(26,61,46,0.13) 0%, rgba(26,61,46,0) 62%),
    linear-gradient(178deg, #FFFFFF 0%, var(--paper) 46%, var(--green-tint) 100%);
}
.hero__measure { color: var(--green); opacity: 0.14; }
.hero__measure svg { width: 100%; height: 100%; }
.hero__sweep {
  background:
    linear-gradient(101deg,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,0.95) 44%,
      rgba(255,255,255,1) 50%,
      rgba(255,255,255,0.95) 56%,
      rgba(255,255,255,0) 74%),
    linear-gradient(101deg,
      rgba(42,107,77,0) 30%,
      rgba(42,107,77,0.10) 50%,
      rgba(42,107,77,0) 70%);
  mix-blend-mode: overlay;
  opacity: 0.9;
}
.hero__floor {
  position: absolute; inset: auto 0 0 0; height: 180px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(250,250,247,0), var(--paper) 78%);
}

.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
  min-height: min(74vh, 700px);
}
.hero-left .eyebrow { margin-bottom: 20px; }
.hero-left .accent-bar { margin-bottom: 30px; }
.hero-left .display { margin: 0; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--sc-font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background .16s, color .16s, border-color .16s;
}
.btn:hover { background: var(--green); border-color: var(--green); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--hair-firm); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 20px; border-top: 1px solid var(--hair);
}
.hero-meta .k, .footer-stats .k {
  font-family: var(--sc-font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.hero-meta .v, .footer-stats .v { font-size: 14px; font-weight: 500; }

/* the foreground plane */
.hero-right {
  position: relative; z-index: 3; will-change: transform;
  background: var(--plate); color: #F4F2ED;
  padding: clamp(1.5rem, 2.8vw, 2.5rem);
  box-shadow: var(--lift);
  border-top: 4px solid var(--green-lift);
}
.hero-right .tag,
.system-card .tag, .compare-col .tag, .receipt-card .tag, .booking-card .tag {
  font-family: var(--sc-font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-lift);
  margin-bottom: 22px;
}
.hero-right .big { font-size: clamp(64px, 8vw, 108px); line-height: 0.86; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.hero-right .big .pct { font-size: 0.4em; vertical-align: super; letter-spacing: 0; color: var(--green-lift); }
.hero-right .cap { font-size: 14px; line-height: 1.55; color: #A9C4B6; margin-top: 18px; max-width: 34ch; }
.footer-stats { display: flex; gap: 28px; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(244,242,237,0.16); }
.footer-stats .k { color: #8FA79A; }

/* ticker */
.ticker { position: relative; z-index: 2; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden; background: var(--paper-pure); }
.ticker-track { display: flex; gap: 0; width: max-content; animation: tick 46s linear infinite; }
.ticker-track span {
  font-family: var(--sc-font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  padding: 13px 26px; white-space: nowrap; position: relative;
}
.ticker-track span::after { content: "·"; position: absolute; right: -3px; color: var(--hair-firm); }
@keyframes tick { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
}

@media (max-width: 940px) {
  /* Art-directed for the phone: the receipt card stops being a foreground
     plane that overtakes the copy (there is no room for it to travel) and
     becomes the block under it. Type steps down a rung, because the desktop
     floor wraps a hero headline to six lines at 390px. */
  .hero__inner { grid-template-columns: minmax(0,1fr); min-height: 0; padding-bottom: clamp(2.5rem, 6vh, 4rem); }
  .display { font-size: clamp(40px, 12vw, 62px); }
  .sub-line { max-width: none; }
  .hero-right { margin-top: 8px; }
  .hero-right .big { font-size: clamp(52px, 16vw, 78px); }
}

/* ============================ RAIL (scenes 2 and 8) ============================ */
.rail {
  display: flex; align-items: stretch; gap: clamp(1.25rem, 2.4vw, 2.25rem);
  height: 100%; width: max-content;
  padding: clamp(3rem, 8vh, 6rem) clamp(1.25rem, 4vw, 40px);
}
/* A staggered settle driven from the act's own progress: lateral travel alone
   reads as a slideshow; items arriving in sequence read as a drawer being
   pulled. The first item is exempt because a pan act needs its opening content
   already present, and the floor keeps an unsettled card reading as arriving
   rather than as failing to load. */
.rail > * {
  --at: calc(var(--i, 0) * 0.1);
  --lit: clamp(0.85, calc((var(--sc-p, 0) - var(--at)) * 9), 1);
  opacity: var(--lit);
  transform: translateY(calc((1 - var(--lit)) * 18px));
}
.rail > *:first-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rail { width: auto; }
  .rail > * { opacity: 1 !important; transform: none !important; }
}
.rail__lead { width: min(34rem, 80vw); flex: none; display: flex; flex-direction: column; justify-content: center; }
.rail__lead .headline { margin-bottom: 26px; }
.rail__lead .accent-bar { margin-bottom: 26px; }
.rail__lead .body { max-width: 40ch; }

.system-card {
  width: min(28rem, 78vw); flex: none; align-self: center;
  background: var(--paper-pure); border: 1px solid var(--hair);
  border-top: 4px solid var(--green);
  padding: clamp(1.35rem, 2.4vw, 2rem);
  box-shadow: var(--lift);
  position: relative;
}
.system-card.accent { background: var(--green); color: var(--paper); border-color: var(--green); }
.system-card.accent .tag, .system-card.accent .num { color: rgba(250,250,247,0.62); }
.system-card.accent .desc { color: rgba(250,250,247,0.8); }
.system-card.accent .rule { background: rgba(250,250,247,0.3); }
.system-card.accent ul li { color: var(--paper); border-color: rgba(250,250,247,0.18); }
.system-card.accent ul li::before { background: var(--green-lift); }
.system-card .num {
  position: absolute; top: clamp(1.35rem, 2.4vw, 2rem); right: clamp(1.35rem, 2.4vw, 2rem);
  font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted);
}
.system-card .name { font-size: clamp(28px, 3vw, 42px); line-height: 1.0; letter-spacing: -0.035em; font-weight: 600; margin-bottom: 20px; }
.system-card .rule { height: 1px; background: var(--hair-firm); margin-bottom: 20px; }
.system-card .desc { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0 0 22px; }
.system-card ul, .pillar ul, .compare-col ul { list-style: none; margin: 0; padding: 0; }
.system-card ul li, .pillar ul li, .compare-col ul li {
  font-size: 14px; line-height: 1.45; padding: 10px 0 10px 18px;
  border-top: 1px solid var(--hair); position: relative;
}
.system-card ul li::before, .pillar ul li::before, .compare-col ul li::before {
  content: ""; position: absolute; left: 0; top: 17px; width: 7px; height: 1px; background: var(--green);
}

/* ============================ SCENE 3 · EMR ≠ CRM ============================ */
.compare-grid {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: clamp(1rem, 3vw, 3rem); align-items: stretch;
}
.compare-col { padding-top: 22px; border-top: 3px solid var(--ink); }
/* clip-path runs on this wrapper, so no glyph box is clipped by the wipe. */
.compare-col.right { border-top-color: var(--green); background: linear-gradient(to bottom, var(--green-tint), transparent 60%); padding-inline: clamp(1rem, 2vw, 1.5rem); padding-bottom: 22px; }
.compare-col.right .tag { color: var(--green); }
.compare-col .nm { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.0; letter-spacing: -0.035em; font-weight: 600; margin-bottom: 18px; }
.compare-col .desc { font-size: 14px; color: var(--muted); margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.neq { display: flex; align-items: center; justify-content: center; font-size: clamp(28px, 3.4vw, 46px); color: var(--green); line-height: 1; }
.compare-tag {
  margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 26px;
  border-top: 3px solid var(--green);
  font-size: clamp(18px, 2.1vw, 26px); font-weight: 500;
}
.compare-tag em, .body em { font-style: normal; color: var(--green); font-weight: 600; }
@media (max-width: 860px) {
  .compare-grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .neq { justify-content: flex-start; }
}

/* ============================ SCENE 4 · THE PEAK · the cohort walk ==========
   The signature move. 100 marks enter the brand's own six stages, the ones
   that do not convert fall out of frame, and the survivor count runs down
   Convert's published benchmark. Nothing here adds a word to the page.
   ========================================================================= */
.cohort {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.25rem, 3vh, 2.25rem);
  padding-block: clamp(1.5rem, 4vh, 3rem);
  max-width: var(--max); margin-inline: auto;
}
.cohort .section-head { margin-bottom: 0; flex: none; }
.cohort .section-head .headline { margin-bottom: 22px; }
.cohort .section-head .accent-bar { margin-bottom: 0; }
.cohort__stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }

.cohort__read { margin: 0; display: flex; align-items: baseline; gap: 14px; flex: none; }
.cohort__n {
  font-family: var(--sc-font-mono); font-weight: 600;
  font-size: clamp(38px, 5.4vw, 76px); line-height: 1;
  letter-spacing: -0.03em; color: var(--green-lift);
  font-variant-numeric: tabular-nums;
}
.cohort__at {
  font-family: var(--sc-font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 6px;
}
.cohort__svg { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; }
.cohort__rules line { stroke: rgba(244,242,237,0.22); stroke-width: 1; }
.cohort__rules line.is-live { stroke: rgba(95,191,146,0.55); }
.cohort__marks rect { fill: var(--green-lift); }
.cohort__marks rect.is-lost { fill: rgba(244,242,237,0.34); }

.pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); flex: none; }
.pipeline .stage { padding-top: 12px; border-top: 1px solid var(--hair-firm); transition: border-color 260ms linear, color 260ms linear; }
.pipeline .stage.is-live { border-top-color: var(--green-lift); }
.pipeline .pn { display: block; font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 4px; }
.pipeline .stage.is-live .pn { color: var(--green-lift); }
.pipeline .pnm { display: block; font-size: clamp(11px, 1.05vw, 14px); font-weight: 500; line-height: 1.2; }

.pipeline-below { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); flex: none; }
.pipeline-below .card { padding-top: 16px; border-top: 2px solid var(--green-lift); }
.pipeline-below .k { font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-lift); margin-bottom: 10px; }
.pipeline-below .v { font-size: 14px; line-height: 1.5; color: var(--muted); }

@media (max-width: 900px) {
  .cohort { height: auto; padding-block: 0; gap: 20px; }
  .cohort__stage { flex: none; }
  .cohort__svg { height: auto; }
  .pipeline { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 10px; }
  .pipeline .pnm { font-size: 12px; }
}

/* ============================ SCENE 5 · SPEED ============================ */
.speed-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.clock-card {
  background: var(--paper-pure); border: 1px solid var(--hair); border-top: 4px solid var(--green);
  padding: clamp(1.5rem, 2.8vw, 2.5rem); box-shadow: var(--lift);
  display: grid; gap: 22px;
}
.clock-card .unit { font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.clock-card .big { font-size: clamp(76px, 11vw, 150px); line-height: 0.84; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--green); }
.clock-card .big sup { font-size: 0.3em; vertical-align: super; letter-spacing: 0; }
.clock-card .label { font-size: 15px; line-height: 1.55; color: var(--muted); margin-bottom: 20px; }
.sequence { border-top: 3px solid var(--ink); padding-top: 20px; }
.sequence .head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.sequence .t { font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.02em; }
.sequence .d { font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--muted); }
.seq-day { display: grid; grid-template-columns: 4.5rem minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); }
.seq-day .dn { font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--green); }
.seq-day .a { font-size: 14px; line-height: 1.4; }
.channels { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pill { font-family: var(--sc-font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 7px; border: 1px solid var(--hair-firm); color: var(--muted); white-space: nowrap; }
.pill.green { background: var(--green); border-color: var(--green); color: var(--paper); }
@media (max-width: 900px) {
  .speed-grid { grid-template-columns: minmax(0,1fr); }
  .seq-day { grid-template-columns: 3.75rem minmax(0,1fr); }
  .channels { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ============================ SCENE 6 · MONEY MODEL ============================ */
.stairs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2.4vw, 2rem); align-items: end; }
.stairs .step {
  background: rgba(244,242,237,0.06); border: 1px solid var(--hair-firm);
  border-top: 4px solid var(--green-lift);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  /* clip-path is relative to the border box; the padding here means the wipe
     never shears an ascender or a descender off the type inside. */
}
.stairs .s1 { min-height: 12rem; }
.stairs .s2 { min-height: 15rem; }
.stairs .s3 { min-height: 18rem; }
.stairs .n { font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--green-lift); margin-bottom: 14px; }
.stairs .nm { font-size: clamp(20px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 14px; }
.stairs .d { font-size: 14px; line-height: 1.5; color: var(--muted); }
.stairs-tagline { margin-top: clamp(2rem, 4vw, 3.25rem); padding-top: 26px; border-top: 1px solid var(--hair-firm); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: clamp(17px, 2vw, 26px); font-weight: 500; }
.stairs-tagline .front { color: var(--muted); }
.stairs-tagline .back { color: var(--green-lift); }
@media (max-width: 860px) {
  .stairs { grid-template-columns: minmax(0,1fr); }
  .stairs .s1, .stairs .s2, .stairs .s3 { min-height: 0; }
}

/* ============================ SCENE 7 · RECEIPTS ============================ */
.receipts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: clamp(1.25rem, 2.6vw, 2.25rem); }
.receipt-card {
  background: var(--paper); border: 1px solid var(--hair); border-top: 4px solid var(--green);
  padding: clamp(1.5rem, 2.8vw, 2.25rem); box-shadow: var(--lift);
}
.receipt-card.dark { background: var(--plate); color: #F4F2ED; border-color: var(--plate); border-top-color: var(--green-lift); }
.receipt-card.dark .cap { color: #A9C4B6; }
.receipt-card.dark .by { color: #8FA79A; border-top-color: rgba(244,242,237,0.16); }
.receipt-card .num { font-size: clamp(56px, 7vw, 100px); line-height: 0.86; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.receipt-card .num .pct { font-size: 0.4em; vertical-align: super; letter-spacing: 0; color: var(--green); }
.receipt-card.dark .num .pct { color: var(--green-lift); }
.receipt-card .cap { font-size: 15px; line-height: 1.55; color: var(--muted); margin-top: 18px; max-width: 36ch; }
.receipt-card .by { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hair); font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.receipt-card:not(.dark) .tag { color: var(--green); }

.funnel-wrap { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.funnel-wrap .mono { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hair-firm); }
.funnel-bars { display: grid; gap: 2px; }
.fbar { display: grid; grid-template-columns: 9rem minmax(0,1fr) 4rem; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.fbar .nm { font-size: 14px; font-weight: 500; }
.fbar .track { height: 14px; background: rgba(10,10,10,0.05); position: relative; }
.fbar .fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--green); }
.fbar:not(:first-child) .fill { background: var(--green-bright); }
.fbar .ix { font-family: var(--sc-font-mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 700px) { .fbar { grid-template-columns: 6.5rem minmax(0,1fr) 3.25rem; gap: 10px; } }

/* ============================ SCENE 8 · PILLARS ============================ */
.rail--pillars .pillar {
  width: min(24.5rem, 78vw); flex: none; align-self: center;
  background: var(--paper-pure); border: 1px solid var(--hair); border-top: 4px solid var(--green);
  padding: clamp(1.35rem, 2.4vw, 2rem); box-shadow: var(--lift);
  min-height: min(52vh, 22rem);
  display: flex; flex-direction: column;
}
.pillar.accent { background: var(--green); color: var(--paper); border-color: var(--green); }
.pillar.accent .ptag, .pillar.accent .pnum { color: rgba(250,250,247,0.66); }
.pillar.accent ul li { color: var(--paper); border-color: rgba(250,250,247,0.18); }
.pillar.accent ul li::before { background: var(--green-lift); }
.pillar .head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 26px; }
.pillar .pnum { font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted); }
.pillar .ptag { font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); }
.pillar .pnm { font-size: clamp(19px, 2vw, 26px); font-weight: 600; letter-spacing: -0.028em; line-height: 1.12; margin-bottom: 22px; text-wrap: balance; }

/* ============================ SCENE 9 · SUMMARY ============================ */
.three-things { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.three-things .item { padding-top: 18px; border-top: 3px solid var(--green); }
.three-things .n { font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 14px; }
.three-things .t { font-size: clamp(16px, 1.8vw, 21px); line-height: 1.4; }
.three-things b { font-weight: 600; color: var(--green); }

/* ============================ SCENE 10 · CLOSE ============================ */
.scene--close [data-sc-stage] { display: flex; }
.close-vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(95,191,146,0.12) 0%, rgba(95,191,146,0) 55%),
    radial-gradient(100% 100% at 50% 100%, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 70%);
}
.close-inner {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 4vh, 3rem);
  padding-block: clamp(2rem, 5vh, 3.5rem);
  overflow: hidden;
}
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.cta-left .headline { margin: 16px 0 26px; }
.cta-helps { margin-top: 28px; display: grid; gap: 2px; }
.cta-helps .help { display: grid; grid-template-columns: 2.25rem minmax(0,1fr); gap: 10px; padding: 13px 0; border-top: 1px solid var(--hair-firm); }
.cta-helps .n { font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--green-lift); }
.cta-helps .t { font-size: 14px; line-height: 1.45; }

.booking-card { background: rgba(244,242,237,0.032); border: 1px solid var(--hair-firm); padding: clamp(1.35rem, 2.6vw, 2rem); }
.booking-card h3 { font-size: clamp(19px, 2.1vw, 27px); letter-spacing: -0.028em; margin-bottom: 22px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hair-firm);
  color: var(--ink); font-size: 16px; padding: 8px 0; border-radius: 0;
}
.field select { appearance: none; }
.field input:hover, .field select:hover { border-bottom-color: var(--ink); }
.booking-card .submit { width: 100%; justify-content: center; margin-top: 8px; background: var(--green-lift); color: #08170F; border-color: var(--green-lift); }
.booking-card .submit:hover { background: #F4F2ED; border-color: #F4F2ED; color: var(--plate); }
.booking-card .submit:disabled { opacity: 0.75; cursor: default; }
.footnote { margin-top: 16px; font-size: 12px; color: var(--muted); }
@media (max-width: 1000px) { .cta-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 640px) { .row2 { grid-template-columns: 1fr; gap: 0; } }

/* footer, inside the closing stage */
footer.site { position: relative; z-index: 2; border-top: 1px solid var(--hair-firm); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.brand-lockup { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.brand-lockup img { width: 32px; height: 32px; }
.brand-name { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
footer.site .brand p { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 34ch; margin: 0; }
.footer-col h4 { font-family: var(--sc-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { padding: 4px 0; font-size: 13px; }
.footer-col a { color: var(--muted); transition: color 150ms linear; }
.footer-col a:hover { color: var(--green-lift); }
.footer-bottom { margin-top: clamp(1.25rem, 2.6vw, 2rem); padding-top: 16px; border-top: 1px solid var(--hair-firm); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.footer-bottom a:hover { color: var(--green-lift); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- focus, always visible and themed ---------- */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.scene--plate :focus-visible, .scene--dark :focus-visible, .nav.is-dark :focus-visible { outline-color: var(--green-lift); }
::selection { background: var(--green); color: var(--paper); }

/* ============================================================================
   SCRUBBED ANIMATION
   Everything below is driven from each act's own --sc-p, so it is paced by the
   reader's hand rather than by a duration. One shared shape: an element gets
   an index, that index gives it a threshold, and the threshold gives it a
   0-to-1 value the transforms read.

     --a0    when the first item starts, in act progress
     --astep how far apart the items are
     --asp   how sharply each one resolves

   Nothing here animates width, height, top or left, and nothing carries
   transition: all. Under reduced motion every position change is dropped and
   the opacity that carries comprehension is kept.
   ========================================================================== */
[data-stagger-i] > *,
[data-part] > * {
  --at: calc(var(--a0, 0.16) + var(--i, 0) * var(--astep, 0.05));
  --g: clamp(0, calc((var(--sc-p, 0) - var(--at)) * var(--asp, 8)), 1);
}

/* ---- scene 3: the two pages part from the centre --------------------------
   The comparison is the argument, so the columns arrive joined and are pushed
   apart by the scroll, with the inequality opening in the gap between them.
   That is the beat made physical instead of described. */
[data-part] { --a0: 0.14; --astep: 0; --asp: 4.2; }
[data-part] > .compare-col {
  opacity: calc(0.25 + 0.75 * var(--g));
  transform: translate3d(calc(var(--dir, -1) * (1 - var(--g)) * 12%), 0, 0);
}
[data-part] > .compare-col.right { --dir: 1; }
[data-part] > .neq {
  opacity: var(--g);
  transform: scale(calc(0.4 + 0.6 * var(--g)));
}
[data-part] > .compare-col:not(.right) { --dir: -1; }

/* ---- scene 5: the sequence draws itself, row by row ---------------------- */
.seq-body { position: relative; --a0: 0.20; --astep: 0.042; --asp: 9; }
.seq-line {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--green);
  transform-origin: 50% 0;
  transform: scaleY(clamp(0, calc((var(--sc-p, 0) - 0.18) * 3.4), 1));
}
.seq-body .seq-day {
  opacity: calc(0.18 + 0.82 * var(--g));
  transform: translate3d(calc((1 - var(--g)) * 14px), 0, 0);
  padding-left: 18px;
}
.seq-body .seq-day .dn { transition: color 240ms linear; }

/* ---- scene 7: the bars grow, they do not appear -------------------------
   scaleX rather than width, so the browser composites it instead of laying
   the page out again on every frame. */
.funnel-bars { --a0: 0.14; --astep: 0.05; --asp: 9; }
.funnel-bars .fbar { opacity: calc(0.35 + 0.65 * var(--g)); }
.funnel-bars .fill {
  transform-origin: 0 50%;
  transform: scaleX(var(--g, 0));
}
.funnel-bars .ix { opacity: var(--g); }

/* ---- scene 9: the rule draws, then the line rises ----------------------- */
.three-things { --a0: 0.20; --astep: 0.06; --asp: 9; }
.three-things .item {
  border-top-color: transparent;
  position: relative;
}
.three-things .item::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px;
  background: var(--green);
  transform-origin: 0 50%;
  transform: scaleX(var(--g, 0));
}
.three-things .item .n,
.three-things .item .t {
  opacity: var(--g);
  transform: translate3d(0, calc((1 - var(--g)) * 12px), 0);
}

/* ---- scene 10: the close arrives, pinned and scrubbed ------------------- */
.cta-helps { --a0: 0.04; --astep: 0.06; --asp: 11; }
.cta-helps .help {
  opacity: var(--g);
  transform: translate3d(calc((1 - var(--g)) * 16px), 0, 0);
}
/* Greet, not fade in: the headline, the rule and the form are all on screen
   at p = 0, so the stage is never a dark empty rectangle sliding up the page
   while the reader waits for it to populate. */
.scene--close .cta-left .headline,
.scene--close .cta-left .accent-bar,
.scene--close .booking-card { opacity: 1; }
.scene--close .cta-left .accent-bar { transform-origin: 0 50%; }
.scene--close .close-vignette { opacity: clamp(0.6, calc(0.6 + var(--sc-p, 0) * 0.4), 1); }
.scene--close footer.site {
  --g: clamp(0, calc((var(--sc-p, 0) - 0.16) * 5), 1);
  opacity: calc(0.55 + 0.45 * var(--g));
}

@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero: comprehension is kept, every position change
     is dropped, and anything scaled to zero is shown at rest. */
  [data-stagger-i] > *,
  [data-part] > *,
  .scene--close .cta-left .headline,
  .scene--close .cta-left .accent-bar,
  .scene--close .booking-card,
  .scene--close footer.site,
  .three-things .item .n,
  .three-things .item .t,
  .funnel-bars .fbar,
  .funnel-bars .ix,
  .seq-body .seq-day {
    opacity: 1 !important;
    transform: none !important;
  }
  .funnel-bars .fill,
  .three-things .item::before,
  .seq-line { transform: none !important; }
  .funnel-bars .fill { transform: scaleX(1) !important; }
  .three-things .item::before { transform: scaleX(1) !important; }
  .seq-line { transform: scaleY(1) !important; }
  .three-things .item { border-top-color: var(--green); }
}

/* A 14-inch laptop is 820px tall, not 900. Without this the hero runs 39px
   long there and the Channels / Stack / Operating Since row falls under the
   fold, which is exactly the overflow the taste floor forbids. */
@media (min-width: 941px) and (max-height: 880px) {
  .hero { padding-top: clamp(1rem, 2vh, 1.75rem); }
  .hero__inner { min-height: 0; padding-bottom: clamp(1.25rem, 3vh, 2.25rem); }
  .display { font-size: clamp(44px, 6.6vw, 92px); }
  .hero-left .accent-bar { margin-bottom: 20px; }
  .hero-cta-row { margin-top: 22px; }
  .hero-meta { margin-top: 18px; padding-top: 16px; }
  .hero-right { padding: clamp(1.1rem, 2vw, 1.6rem); }
  .hero-right .big { font-size: clamp(52px, 6vw, 82px); }
  .hero-right .cap { margin-top: 12px; }
  .footer-stats { margin-top: 16px; padding-top: 14px; }
}

/* ============================================================================
   THE IGNITION
   Convert's own mark, assembled by scroll, and the moment it completes is the
   moment the three systems start. One continuous choreography off this pan
   act's --sc-p:

     0.00 .. 0.10   the baseline draws
     0.06 .. 0.30   the three bars rise, in order
     0.26 .. 0.38   the plus strikes and flares once
     0.34 ..        the charge runs down the rail and each system lights

   Everything is transform and opacity. No glow, no zero-offset halo: the
   flare is a scaled disc that fades, which is a real light behaving like one.
   ========================================================================== */
.mark {
  position: absolute; z-index: 3;
  left: clamp(1.25rem, 4vw, 40px);
  top: calc(var(--nav-h, 88px) + clamp(1rem, 3.5vh, 2.5rem));
  width: clamp(60px, 6vw, 88px);
}
.mark svg { width: 100%; height: auto; overflow: visible; }

.mark__base {
  fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round;
  --g: clamp(0, calc((var(--sc-p, 0) - 0.00) * 10), 1);
  transform-origin: 0 50%;
  transform: scaleX(var(--g));
}
.mark__bar {
  fill: var(--green);
  transform-origin: 50% 106px;   /* the baseline: bars grow up out of it */
  transform: scaleY(var(--g, 0));
}
.mark__bar[data-b="0"] { --g: clamp(0, calc((var(--sc-p, 0) - 0.06) * 9), 1); }
.mark__bar[data-b="1"] { --g: clamp(0, calc((var(--sc-p, 0) - 0.13) * 9), 1); fill: var(--green-bright); }
.mark__bar[data-b="2"] { --g: clamp(0, calc((var(--sc-p, 0) - 0.20) * 9), 1); }
.mark__plus path {
  fill: none; stroke: var(--green-bright); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 26; stroke-dashoffset: calc(26 * (1 - var(--g, 0)));
  --g: clamp(0, calc((var(--sc-p, 0) - 0.26) * 11), 1);
}
/* the strike: one disc, scaling out and fading, exactly once */
.mark__flare {
  fill: var(--green-bright);
  --g: clamp(0, calc((var(--sc-p, 0) - 0.30) * 9), 1);
  transform-origin: 98px 26px;
  transform: scale(calc(0.2 + var(--g) * 1.5));
  opacity: calc((1 - var(--g)) * var(--g) * 1.6);
}

/* --- the charge reaching each system card ------------------------------- */
.scene--ignite .system-card {
  --chg: clamp(0, calc((var(--sc-p, 0) - (0.34 + var(--i, 0) * 0.07)) * 9), 1);
  border-top-width: 4px;
  border-top-color: color-mix(in oklab, var(--green) calc(var(--chg) * 100%), var(--hair));
}
.scene--ignite .system-card.accent {
  border-top-color: color-mix(in oklab, var(--green-lift) calc(var(--chg) * 100%), rgba(250,250,247,0.25));
}
/* a live line running the width of the card the instant its charge lands */
.scene--ignite .system-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px;
  background: var(--green-lift);
  transform-origin: 0 50%;
  transform: scaleX(var(--chg, 0));
  opacity: calc(1 - var(--chg) * 0.55);
}
.scene--ignite .system-card .num {
  color: color-mix(in oklab, var(--green) calc(var(--chg) * 100%), var(--muted));
  transform: translateY(calc((1 - var(--chg)) * -4px));
}
.scene--ignite .system-card.accent .num {
  color: color-mix(in oklab, #FFFFFF calc(var(--chg) * 100%), rgba(250,250,247,0.5));
}

/* --- the animated background field -------------------------------------
   Drawn, not photographed: a drifting measure grid, a pulse that leaves the
   mark when it strikes, and a slow scan across the plate. */
.scene--ignite { overflow: clip; }
.scene--ignite .rail { padding-top: calc(var(--nav-h, 88px) + clamp(5rem, 13vh, 8rem)); }
@media (max-width: 900px) {
  .scene--ignite .rail { padding-top: calc(var(--nav-h, 68px) + clamp(4.5rem, 12vh, 6.5rem)); }
}
.ignite-bed { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ignite-bed__grid {
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(to right, rgba(26,61,46,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,61,46,0.10) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: ig-drift 34s linear infinite;
}
.ignite-bed__pulse {
  position: absolute;
  left: calc(clamp(1.25rem, 4vw, 40px) + clamp(30px, 3vw, 44px));
  top: calc(var(--nav-h, 88px) + clamp(1rem, 3.5vh, 2.5rem) + clamp(30px, 3vw, 44px));
  width: 52vmax; height: 52vmax;
  margin: -26vmax 0 0 -26vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42,107,77,0.20) 0%, rgba(42,107,77,0.07) 42%, rgba(42,107,77,0) 68%);
  /* it leaves the mark at the instant the plus strikes */
  --g: clamp(0, calc((var(--sc-p, 0) - 0.30) * 3.6), 1);
  transform: scale(calc(0.25 + var(--g) * 1.05));
  opacity: calc((1 - var(--g) * 0.72) * var(--g) * 1.25);
}
.ignite-bed__scan {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 38%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 62%);
  mix-blend-mode: overlay;
  animation: ig-scan 13s ease-in-out infinite;
}
@keyframes ig-drift { to { transform: translate3d(56px, 56px, 0); } }
@keyframes ig-scan  { 0%,18% { transform: translate3d(-60%,0,0); } 62%,100% { transform: translate3d(60%,0,0); } }

@media (prefers-reduced-motion: reduce) {
  /* The mark is shown assembled, the systems shown charged, and the ambient
     loops stop. Nothing that carries meaning is lost. */
  .ignite-bed__grid, .ignite-bed__scan { animation: none; }
  .ignite-bed__pulse { opacity: 0.18; transform: scale(1); }
  .mark__base { transform: scaleX(1) !important; }
  .mark__bar { transform: scaleY(1) !important; }
  .mark__plus path { stroke-dashoffset: 0 !important; }
  .mark__flare { opacity: 0 !important; }
  .scene--ignite .system-card { --chg: 1; }
  .scene--ignite .system-card::after { transform: scaleX(1); opacity: 0.45; }
  .scene--ignite .system-card .num { transform: none; }
}

/* ============================================================================
   THE GRADIENT SYSTEM
   Every gradient on the page resolves to one of these tokens, so the whole
   atmosphere is one edit rather than thirteen scattered declarations.

   Two things make these read as depth rather than as decoration:

   1 · They interpolate in oklab. An sRGB ramp between two saturated greens
       passes through a desaturated grey dead-zone in the middle, which is
       what makes a hand-rolled gradient look muddy. Each token declares a
       plain sRGB version first as the fallback, then the oklab one, so an
       older engine still gets a correct gradient rather than none.

   2 · They are meshes, not ramps. Three offset radials over a base ramp read
       as light arriving from somewhere; a single two-stop ramp reads as a
       swatch.

   The hue never leaves Convert's own green. No violet-to-blue, no glow, and
   no gradient behind type that has to stay legible.
   ========================================================================== */
:root {
  /* light: paper with green light raking across it */
  --grad-hero:
    radial-gradient(68% 52% at 88% 2%,  rgba(42,107,77,0.20) 0%, rgba(42,107,77,0) 60%),
    radial-gradient(56% 46% at 6% 98%,  rgba(26,61,46,0.16) 0%, rgba(26,61,46,0) 64%),
    radial-gradient(44% 38% at 64% 82%, rgba(95,191,146,0.14) 0%, rgba(95,191,146,0) 68%),
    linear-gradient(168deg, #FFFFFF 0%, #FBFBF8 40%, #E8EFEA 100%);

  /* the peak's plate: lifted at the top-left, sinking to near-black bottom-right */
  --grad-plate:
    radial-gradient(76% 56% at 12% -4%, rgba(95,191,146,0.16) 0%, rgba(95,191,146,0) 58%),
    radial-gradient(64% 66% at 98% 104%, rgba(42,107,77,0.30) 0%, rgba(42,107,77,0) 62%),
    linear-gradient(172deg, #102A20 0%, #0B1F17 54%, #071510 100%);

  /* the money model and the close: the same idea, pitched a step warmer */
  --grad-dark:
    radial-gradient(70% 54% at 84% 0%,  rgba(95,191,146,0.15) 0%, rgba(95,191,146,0) 56%),
    radial-gradient(66% 62% at 4% 100%, rgba(11,31,23,0.55) 0%, rgba(11,31,23,0) 64%),
    linear-gradient(174deg, #1A3D2E 0%, #14332A 52%, #0D241C 100%);

  /* the accent rule, along its own length */
  --grad-accent:      linear-gradient(90deg, #1A3D2E 0%, #2A6B4D 100%);
  --grad-accent-lift: linear-gradient(90deg, #2A6B4D 0%, #5FBF92 100%);

  /* the CRM page, and the surfaces that carry the accent as a field */
  --grad-tint: linear-gradient(to bottom, #E8EFEA 0%, rgba(232,239,234,0) 62%);
  --grad-card-accent:
    radial-gradient(120% 90% at 100% 0%, rgba(95,191,146,0.22) 0%, rgba(95,191,146,0) 58%),
    linear-gradient(158deg, #1F4A38 0%, #1A3D2E 62%, #143026 100%);
}

/* The oklab pass. Declared second so it simply wins where it is understood,
   and is ignored as an invalid value where it is not. */
@supports (background-image: linear-gradient(in oklab, red, blue)) {
  :root {
    --grad-hero:
      radial-gradient(68% 52% at 88% 2%,  rgba(42,107,77,0.20) 0%, rgba(42,107,77,0) 60%),
      radial-gradient(56% 46% at 6% 98%,  rgba(26,61,46,0.16) 0%, rgba(26,61,46,0) 64%),
      radial-gradient(44% 38% at 64% 82%, rgba(95,191,146,0.14) 0%, rgba(95,191,146,0) 68%),
      linear-gradient(168deg in oklab, #FFFFFF 0%, #FBFBF8 40%, #E8EFEA 100%);
    --grad-plate:
      radial-gradient(76% 56% at 12% -4%, rgba(95,191,146,0.16) 0%, rgba(95,191,146,0) 58%),
      radial-gradient(64% 66% at 98% 104%, rgba(42,107,77,0.30) 0%, rgba(42,107,77,0) 62%),
      linear-gradient(172deg in oklab, #102A20 0%, #0B1F17 54%, #071510 100%);
    --grad-dark:
      radial-gradient(70% 54% at 84% 0%,  rgba(95,191,146,0.15) 0%, rgba(95,191,146,0) 56%),
      radial-gradient(66% 62% at 4% 100%, rgba(11,31,23,0.55) 0%, rgba(11,31,23,0) 64%),
      linear-gradient(174deg in oklab, #1A3D2E 0%, #14332A 52%, #0D241C 100%);
    --grad-accent:      linear-gradient(90deg in oklab, #1A3D2E 0%, #2A6B4D 100%);
    --grad-accent-lift: linear-gradient(90deg in oklab, #2A6B4D 0%, #5FBF92 100%);
    --grad-card-accent:
      radial-gradient(120% 90% at 100% 0%, rgba(95,191,146,0.22) 0%, rgba(95,191,146,0) 58%),
      linear-gradient(158deg in oklab, #1F4A38 0%, #1A3D2E 62%, #143026 100%);
  }
}

/* --- applied ------------------------------------------------------------
   background-color stays underneath every one of these. If a gradient ever
   fails to paint, the ground is still opaque and the type on it is still
   legible, rather than falling through to whatever is behind the section. */
.hero__field { background: var(--grad-hero); }

.scene--plate { background-color: #0B1F17; background-image: var(--grad-plate); }
.scene--dark  { background-color: #14332A; background-image: var(--grad-dark); }

.accent-bar { background-color: #1A3D2E; background-image: var(--grad-accent); }
.scene--plate .accent-bar,
.scene--dark .accent-bar,
.hero-right .accent-bar { background-color: #2A6B4D; background-image: var(--grad-accent-lift); }

.compare-col.right { background-color: transparent; background-image: var(--grad-tint); }

.system-card.accent,
.pillar.accent {
  background-color: #1A3D2E;
  background-image: var(--grad-card-accent);
}

.receipt-card.dark,
.hero-right {
  background-color: #0B1F17;
  background-image: var(--grad-plate);
}

/* The close keeps its vignette, now pitched to the same system. */
.close-vignette {
  background:
    radial-gradient(110% 80% at 18% 0%, rgba(95,191,146,0.14) 0%, rgba(95,191,146,0) 56%),
    radial-gradient(100% 100% at 50% 104%, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0) 70%);
}

/* ============================================================================
   THE HERO ANIMATION
   Three layers, and they are deliberately separate concerns:

     ENTRANCE   fires once on load. Pure CSS, no script, so there is no
                flash-then-hide and nothing depends on JS having run. Every
                element uses animation-fill-mode: both, which means it holds
                its `from` state through its own delay rather than rendering
                at full and jumping. With animations unsupported or disabled,
                each element simply renders at rest: visible, correct, done.
     AMBIENT    runs forever, slowly. A light rakes across the field and the
                measure bed drifts. This is what stops the hero feeling like
                a screenshot when the visitor has not scrolled yet.
     POINTER    the planes lean a few pixels toward the cursor. Seasoning,
                gated to a real pointer, and folded into the same single
                transform write as the scroll offset so the two never fight.

   The whole entrance is done in about 1.05s. A hero is the one screen every
   visitor sees; a slow reveal there is a page that looks broken on arrival.
   ========================================================================== */

@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-line { from {              transform: translate3d(0, 104%, 0); } to {              transform: none; } }
@keyframes hero-rule { from { opacity: 0; transform: scaleX(0); }                to { opacity: 1; transform: scaleX(1); } }
@keyframes hero-card { from { opacity: 0; transform: translate3d(18px, 20px, 0); } to { opacity: 1; transform: none; } }

.hero-left [data-in],
.hero__inner > [data-in] {
  animation: hero-rise 620ms var(--sc-ease-out) both;
  animation-delay: calc(var(--d, 0) * 1ms);
}
.hero-left [data-in="1"] { --d: 60; }
.hero-left [data-in="5"] { --d: 430; }
.hero-left [data-in="6"] { --d: 520; }
.hero-left [data-in="7"] { --d: 610; }

/* the accent rule draws rather than rises */
.hero-left .accent-bar[data-in="2"] {
  animation: hero-rule 520ms var(--sc-ease-out) both;
  animation-delay: 150ms;
  transform-origin: 0 50%;
}

/* the headline rises out of a mask, one line at a time. The mask carries
   padding for the descender in "systems": a box clipped to the line box
   shears the tail off the y, which is the single most common way this
   effect looks broken. */
.display .ln {
  display: block;
  overflow: hidden;
  /* The display face is set at line-height 0.94, so the line BOX is shorter
     than the ink and a mask clipped to it slices straight through the middle
     of the glyphs. The box is padded out past the ink on both edges and the
     padding is cancelled by matching negative margins, so the mask grows
     without moving the type one pixel. The inner span only ever rises from
     below its own box, so the enlarged masks overlapping each other never
     shows one line inside another's frame. */
  padding-top: 0.34em;
  padding-bottom: 0.30em;
  margin-top: -0.34em;
  margin-bottom: -0.30em;
}
.display .ln > span {
  display: block;
  animation: hero-line 760ms var(--sc-ease-out) both;
}
.display .ln:nth-child(1) > span { animation-delay: 210ms; }
.display .ln:nth-child(2) > span { animation-delay: 310ms; }

/* the foreground plane arrives last, and from the direction it will travel */
.hero__inner > .hero-right[data-in="8"] {
  animation: hero-card 780ms var(--sc-ease-out) both;
  animation-delay: 470ms;
}

/* --- ambient ------------------------------------------------------------
   The sweep's gradient moves onto a pseudo-element, so the plane itself
   stays free for the scroll-and-pointer transform. Two elements, two
   transforms, no contention. */
.hero__sweep { background: none; }
.hero__sweep::before {
  content: "";
  position: absolute; inset: 0 -40% 0 -40%;
  background:
    linear-gradient(101deg,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,0.95) 44%,
      rgba(255,255,255,1) 50%,
      rgba(255,255,255,0.95) 56%,
      rgba(255,255,255,0) 74%),
    linear-gradient(101deg,
      rgba(42,107,77,0) 30%,
      rgba(42,107,77,0.10) 50%,
      rgba(42,107,77,0) 70%);
  mix-blend-mode: overlay;
  opacity: 0.9;
  animation: hero-rake 19s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes hero-rake {
  0%   { transform: translate3d(-26%, 0, 0); }
  50%  { transform: translate3d(26%, 0, 0); }
  100% { transform: translate3d(-26%, 0, 0); }
}
.hero__measure svg { animation: hero-drift 44s linear infinite; }
@keyframes hero-drift { to { transform: translate3d(48px, 48px, 0); } }

@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. With the animations off, fill-mode has
     nothing to hold, so every element renders at rest: the hero is complete
     and legible on arrival, which is the whole point of the greet rule. */
  .hero-left [data-in],
  .hero__inner > [data-in],
  .display .ln > span,
  .hero__sweep::before,
  .hero__measure svg { animation: none !important; }
  .hero-left .accent-bar[data-in="2"] { transform: none !important; opacity: 1 !important; }
}