/* =============================================================================
   app.css — page layout on top of colors_and_type.css + theme-landing.css.
   Sections: motion pre-hide · layout primitives · chrome · Home sections ·
   lightbox · reduced-motion · responsive.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0 · MOTION PRE-HIDE
   Only when JS is on AND motion is allowed do we hide reveal targets before
   they animate (prevents FOUC). Under .reduced-motion / no-JS everything is
   visible from the first paint.
   --------------------------------------------------------------------------- */
.motion-ok [data-reveal],
.motion-ok [data-card-3d],
.motion-ok [data-split],
.motion-ok [data-stagger] > *,
.motion-ok [data-divider],
.motion-ok [data-glow] {
  opacity: 0;
}
.motion-ok [data-divider] { transform: scaleX(0); }

/* ---------------------------------------------------------------------------
   1 · LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
/* Horizontal transforms (pinned track, testimonial drift) must never spill into
   a page-wide horizontal scrollbar. `clip` avoids creating a scroll container
   (so it won't break ScrollTrigger pinning the way overflow:hidden can). */
body { overflow-x: clip; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container.narrow { max-width: 860px; }

.section { padding-block: var(--section-y); position: relative; }
section[id] { scroll-margin-top: 92px; }
#main { scroll-margin-top: 0; }
#main:focus { outline: none; } /* skip link moves focus here without a page-wide ring */
[inert] { pointer-events: none; }

.section-head { max-width: 720px; margin-bottom: var(--sp-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--sp-4); }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head .lead { color: var(--tx-2); }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--tx-2); }

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--teal-700), var(--teal-400), var(--teal-300));
  z-index: var(--z-progress);
  box-shadow: 0 0 12px var(--teal-glow);
}

/* ---------------------------------------------------------------------------
   2 · HEADER + NAV
   --------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  transition: background var(--dur-mid) var(--ease-out-quart),
              border-color var(--dur-mid) var(--ease-out-quart),
              backdrop-filter var(--dur-mid) var(--ease-out-quart);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(11, 17, 22, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--line-1);
}
.header-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  transition: padding var(--dur-mid) var(--ease-out-quart);
}
.site-header.scrolled .header-inner { padding-block: 0.7rem; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-chip {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--bg-card-hi);
  border: 1px solid var(--line-2);
}
.brand-chip img { width: 22px; height: 22px; object-fit: contain; } /* two-tone A monogram (logo-a.svg) — colours baked in */
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--tx-1);
}
/* Brand tagline under the logo — subtle, desktop only (header stays tight on mobile) */
.brand-tagline {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--teal-300); opacity: 0.82; margin-top: 0.15rem;
}
@media (max-width: 600px) { .brand-tagline { display: none; } }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  padding: 0.55rem 0.85rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tx-2);
  border-radius: var(--r-pill);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav a:hover { color: var(--tx-1); background: var(--bg-card); }
.nav a[aria-current="page"] { color: var(--teal-300); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-cta { padding: 0.7rem 1.05rem; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--tx-1);
  cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }

/* Mobile slide-in menu */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  background: rgba(11, 17, 22, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out-quart);
}
.mobile-menu.open { opacity: 1; }
.mobile-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 360px);
  background: var(--bg-section);
  border-left: 1px solid var(--line-2);
  padding: 5.5rem var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
  transform: translateX(100%);
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.mobile-menu.open .mobile-menu-panel { transform: translateX(0); }
.mobile-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg-card); border: 1px solid var(--line-2);
  border-radius: 11px; color: var(--tx-1); cursor: pointer;
}
.mobile-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 600;
  color: var(--tx-1);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-1);
}
.mobile-nav a:hover { color: var(--teal-300); }
.mobile-cta { margin-top: auto; }

/* ---------------------------------------------------------------------------
   3 · HERO
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: center;
  padding-block: 9rem 5rem;
  overflow: hidden;
}
/* The WebGL cable is the HERO BACKGROUND (clipped by the hero's
   overflow:hidden, scrolls away with it). `mix-blend-mode: screen` means only
   its glowing cable/bloom adds light. It sits BEHIND the hero copy/card
   (z 0 vs the grid's z 1) and never touches the sections below. */
.hero-canvas-wrap {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: screen;
}
.hero-canvas {
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out-quart);
}
/* Slightly under full strength: it is a backdrop — the copy stays the star. */
.hero.webgl-on .hero-canvas { opacity: 0.82; }
/* Poster is only relevant to the old background mode; the overlay has no
   fallback layer (no WebGL → clean page, no wire). */
.hero-poster { display: none; }
.hero-glow { width: 620px; height: 620px; top: -12%; right: -6%; }

.hero-grid {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}
.hero-copy { max-width: 620px; }
.hero h1 { margin-block: var(--sp-4) var(--sp-5); font-size: clamp(2.4rem, 1.4rem + 4.2vw, 3.7rem); }
.hero .lead { max-width: 540px; margin-bottom: var(--sp-6); }
/* ---------------------------------------------------------------------------
   Page preloader — brand "A" + wordmark + progress hairline. main.js flips
   .is-done on window load; the bar creeps most of the way on its own so it
   reads as live progress, then snaps full as the overlay lifts. The delayed
   preHide animation is a broken-JS fallback so the page is never trapped
   behind the overlay. Reduced motion skips the show entirely.
   --------------------------------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--bg-page);
  transition: opacity 0.55s var(--ease-out-quart), visibility 0.55s var(--ease-out-quart);
  animation: preHide 0.55s var(--ease-out-quart) 6s forwards;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
@keyframes preHide { to { opacity: 0; visibility: hidden; } }
.pre-inner { display: grid; justify-items: center; }
/* Preloader brand mark = the Allure "A" logo monogram (same two-tone as the
   shift section: brand teal leg + light ink), pulsing a teal glow. */
.pre-a {
  width: 5.4rem; height: auto; display: block;
  animation: preGlow 1.5s ease-in-out infinite alternate;
}
.pre-a .ink-teal { fill: var(--teal-500); }
.pre-a .ink-light { fill: var(--tx-1); }
.pre-word {
  margin-top: var(--sp-3);
  font-family: var(--font-display); font-size: 1.15rem;
  color: var(--tx-2); letter-spacing: 0.02em;
}
.pre-bar {
  margin-top: var(--sp-5);
  width: 150px; height: 2px; border-radius: var(--r-pill);
  background: var(--line-2); overflow: hidden;
}
.pre-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--teal-700), var(--teal-300));
  transform-origin: 0 50%; transform: scaleX(0);
  animation: preFill 2.4s var(--ease-out-quart) forwards;
  transition: transform 0.35s var(--ease-out-quart);
}
.preloader.is-done .pre-fill { animation: none; transform: scaleX(1); }
@keyframes preFill { 0% { transform: scaleX(0); } 70% { transform: scaleX(0.82); } 100% { transform: scaleX(0.94); } }
@keyframes preGlow {
  from { filter: drop-shadow(0 0 12px rgba(20, 184, 166, 0.25)); }
  to { filter: drop-shadow(0 0 34px rgba(20, 184, 166, 0.55)); }
}
.reduced-motion .preloader { display: none; }

.hero-cta-q { color: var(--tx-2); font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.hero-trust {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
  font-size: var(--fs-sm); color: var(--tx-3);
}
.hero-trust svg { width: 1.05em; height: 1.05em; color: var(--teal-300); vertical-align: -2px; }
.dot-sep { color: var(--tx-4); }

/* Glass dashboard card */
.hero-dash { padding: var(--sp-6); will-change: transform; border-top: 2px solid var(--copper-soft); } /* warm copper cap — echoes the wire */
.hero-dash::after {
  /* sheen sweep driven by --mx/--my from the tilt system */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(200px 200px at var(--mx, 70%) var(--my, 20%),
              rgba(255,255,255,0.10), transparent 60%);
  opacity: var(--sheen, 0);
  transition: opacity var(--dur-fast) var(--ease-out-quart);
  pointer-events: none;
}
.dash-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-2);
}
.dash-title { font-weight: 600; color: var(--tx-1); font-size: var(--fs-sm); }
.dash-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-xs); color: var(--teal-300);
  font-family: var(--font-mono);
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-400); box-shadow: 0 0 0 0 var(--teal-400);
  animation: pulse 2.2s var(--ease-out-quart) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(45,196,174,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(45,196,174,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,196,174,0); }
}
.dash-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.dash-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0; gap: var(--sp-4);
  border-bottom: 1px solid var(--line-1);
}
.dash-row:last-child { border-bottom: 0; }
.dash-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--tx-2); font-size: var(--fs-sm);
}
.dash-label svg { width: 17px; height: 17px; color: var(--tx-3); }
.dash-val { font-size: 1.1rem; font-weight: 600; color: var(--tx-1); }
.dash-val.pos { color: var(--ok); }
.dash-val.neg { color: var(--tx-1); }
.dash-val.accent-num { color: var(--teal-300); }
.ok-tick { width: 15px; height: 15px; color: var(--ok); vertical-align: -2px; }
.dash-foot {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-xs); color: var(--tx-3);
}

.hero-scroll-cue {
  position: absolute; bottom: 1.6rem; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px; border: 1px solid var(--line-3);
  border-radius: 14px; z-index: 2;
  display: grid; place-items: start center; padding-top: 7px;
}
.hero-scroll-cue span {
  width: 4px; height: 8px; border-radius: 2px; background: var(--teal-300);
  animation: cue 1.8s var(--ease-in-out) infinite;
}
@keyframes cue { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(9px); opacity: 0.2; } }

/* ---------------------------------------------------------------------------
   4 · TRUST STRIP
   --------------------------------------------------------------------------- */
.trust-strip { background: var(--bg-section); padding-block: var(--sp-7); }
.trust-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.trust-line {
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: var(--fs-xs); color: var(--tx-3); margin-bottom: var(--sp-4);
}
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track {
  display: inline-flex; align-items: center; gap: 1.4rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  font-weight: 600; color: var(--tx-1);
  animation: marquee 26s linear infinite;
}
.marquee-track .m-dot { color: var(--teal-400); }
/* When the velocity-coupled JS drive takes over, the CSS keyframe stands down. */
.marquee-track.js-drive { animation: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trust-strip .divider { max-width: var(--maxw); margin-inline: auto; }

/* ---------------------------------------------------------------------------
   5 · PAIN POINTS
   --------------------------------------------------------------------------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.card.feature { transform-style: preserve-3d; }
.card.feature .icon-chip { margin-bottom: var(--sp-4); }
.card.feature h3 { margin-bottom: var(--sp-3); }
.card.feature p { color: var(--tx-2); font-size: var(--fs-sm); }
.card {
  transition: transform var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.card.feature:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-lift); }
/* Shine border — a masked conic ring with two teal hotspots (top + bottom at
   rest, the approved look) that ROTATE slowly around the card border. The
   animatable angle needs @property registration; browsers without it just show
   the static two-spot ring. The mask (border-box XOR content-box) shows only
   the 1.5px ring, so it never touches the text. Brightens + glows on hover. */
@property --shine-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes shineRotate {
  to { --shine-angle: 360deg; }
}
.card.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--shine-angle),
    var(--teal-300) 0deg,
    rgba(79, 212, 193, 0.35) 45deg,
    rgba(79, 212, 193, 0) 80deg,
    rgba(79, 212, 193, 0) 100deg,
    rgba(79, 212, 193, 0.35) 135deg,
    var(--teal-300) 180deg,
    rgba(79, 212, 193, 0.35) 225deg,
    rgba(79, 212, 193, 0) 260deg,
    rgba(79, 212, 193, 0) 280deg,
    rgba(79, 212, 193, 0.35) 315deg,
    var(--teal-300) 360deg);
  animation: shineRotate 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity var(--dur-fast), filter var(--dur-fast);
}
.card.feature:hover::before {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(79, 212, 193, 0.45));
}

/* ---------------------------------------------------------------------------
   4x · GIANT TYPE BANNERS (scrubbed, decorative)
   --------------------------------------------------------------------------- */
.banner { overflow: hidden; padding-block: clamp(1.6rem, 4.5vw, 3.5rem); }
.banner-track {
  display: inline-flex; align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  white-space: nowrap;
  will-change: transform;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-3);
  user-select: none;
}
.banner-track .b-solid { color: var(--teal-300); -webkit-text-stroke: 0; font-style: italic; }
.banner-track .b-dot { color: var(--teal-500); -webkit-text-stroke: 0; font-size: 0.42em; }

/* ---------------------------------------------------------------------------
   4y · SECTION RAIL NAV (fixed dots, desktop)
   --------------------------------------------------------------------------- */
.rail {
  position: fixed;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-header);
  display: flex; flex-direction: column; gap: 13px;
}
.rail a { position: relative; display: grid; place-items: center; width: 16px; height: 16px; }
.rail-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tx-4);
  transition: background var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart);
}
.rail a:hover .rail-dot { background: var(--tx-2); }
.rail a.is-active .rail-dot {
  background: var(--teal-400);
  transform: scale(1.5);
  box-shadow: 0 0 10px var(--teal-glow);
}
.rail-label {
  position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%) translateX(5px);
  white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; color: var(--tx-1);
  background: var(--bg-card-hi);
  border: 1px solid var(--line-2);
  padding: 0.32rem 0.6rem;
  border-radius: var(--r-sm);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}
.rail a:hover .rail-label,
.rail a:focus-visible .rail-label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1200px) { .rail { display: none; } }

/* ---------------------------------------------------------------------------
   4z · UNIFY — floating money-cards collage (pinned)
   --------------------------------------------------------------------------- */
.unify { position: relative; background: var(--bg-page); }
.unify-stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--gutter);
}
/* Ambient background behind the collage (fills the plain dark space) — a broad
   soft teal glow + the drifting mote field. Both sit at z-0 and come first in
   the DOM, so the cards/heading paint over them untouched. */
.unify-glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 48%; transform: translate(-50%, -50%);
  width: min(1100px, 90vw); height: min(820px, 78vh);
  background:
    radial-gradient(ellipse at 50% 42%, var(--teal-tint-14), transparent 62%),
    radial-gradient(ellipse at 50% 68%, var(--copper-tint-12), transparent 66%);
  filter: blur(24px);
}
.unify-stage .unify-field { opacity: 0.5; }
.unify-cards { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.u-card {
  position: absolute;
  width: clamp(170px, 17vw, 235px);
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  display: grid;
  gap: 0.3rem;
  will-change: transform;
}
.u-card .u-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); color: var(--tx-3); }
.u-card .u-label svg { width: 14px; height: 14px; color: var(--teal-300); }
.u-card .u-val { font-size: 1.3rem; font-weight: 700; color: var(--tx-1); line-height: 1.1; }
.u-card .u-pos { color: var(--ok); }
.u-card .u-accent { color: var(--teal-300); }
.u-card .u-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-xs); color: var(--ok); }
.u-card .u-tag svg { width: 12px; height: 12px; }
.uc6 .u-tag { color: var(--tx-3); }
/* scattered slots (desktop, motion) */
.uc1 { left: 7%;  top: 13%; }
.uc2 { right: 9%;  top: 10%; }
.uc3 { left: 4%;  top: 46%; }
.uc4 { right: 5%;  top: 44%; }
.uc5 { left: 13%; bottom: 9%; }
.uc6 { right: 13%; bottom: 11%; }

/* The wallet the deck tucks into (Jeton-style). Two sibling layers sandwich
   the cards: `-back` is the interior wall behind them, `-front` the pocket
   face above them. Both share one geometry; GSAP centres them (xPercent/
   yPercent -50) and drives the rise + bump. Hidden (opacity 0) until the
   scene reveals it, so a JS failure never leaves an empty wallet floating. */
.u-wallet {
  position: absolute;
  left: 50%; top: 57%;
  width: clamp(280px, 26vw, 400px);
  aspect-ratio: 1.6;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.u-wallet-back {
  z-index: 0;
  border-radius: 26px;
  background: linear-gradient(180deg, #14232b, #0c161c 70%);
  border: 1px solid var(--teal-tint-14);
  box-shadow: inset 0 -22px 44px rgba(0, 0, 0, 0.55);
}
.u-wallet-front { z-index: 2; }
.u-wallet-pocket {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  border-radius: 16px 16px 26px 26px;
  background: linear-gradient(180deg, rgba(30, 42, 51, 0.97), rgba(17, 26, 32, 0.99));
  border: 1px solid var(--teal-tint-14);
  border-top: 1px solid var(--copper-soft); /* copper stitch lip — echoes the hero wire */
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.35), 0 34px 70px -22px var(--copper-tint-22), var(--shadow-teal);
  display: grid;
  align-content: end;
  gap: 0.3rem;
  padding: 1rem 1.15rem;
}
.u-wallet-snap {
  position: absolute; top: -9px; left: 50%;
  width: 46px; height: 18px;
  transform: translateX(-50%);
  border-radius: 9px;
  background: linear-gradient(180deg, #d98e4e, #a55c28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.u-wallet-brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 0.95rem; color: var(--tx-1);
}
.u-wallet-mark {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 0.45rem;
  background: var(--bg-card-hi); border: 1px solid var(--line-2);
} /* matches the header brand chip — the two-tone A monogram (logo-a.svg) */
.u-wallet-mark img { width: 1.05rem; height: 1.05rem; object-fit: contain; }
.u-wallet-note { font-size: var(--fs-xs); color: var(--tx-3); }

.unify-head {
  position: relative; z-index: 1;
  text-align: center;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 1.02;
}
/* Words ride ABOVE the wallet (z 3) and higher up the stage (top 30%) so the
   filled wallet keeps the floor while they cycle. */
.unify-words { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.uword {
  position: absolute; left: 50%; top: 30%;
  display: inline-flex; align-items: center; gap: 1.1rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600; font-style: italic;
  font-size: clamp(2.6rem, 6vw, 5rem);
  color: var(--teal-300);
}
.uword .icon-chip { width: 1.15em; height: 1.15em; border-radius: 0.3em; }
.uword .icon-chip svg { width: 0.6em; height: 0.6em; }
.unify-tag {
  position: relative; z-index: 1;
  text-align: center;
  color: var(--tx-2);
  font-size: var(--fs-lead);
  max-width: 46ch;
  margin-top: var(--sp-5);
}
/* Motion path (desktop): JS drives cards + words; the static tagline stands down. */
@media (min-width: 901px) {
  .motion-ok .u-card, .motion-ok .uword { opacity: 0; }
  .motion-ok .unify-tag { display: none; }
}
/* Static composition (small screens and reduced motion): headline + card grid. */
@media (max-width: 900px) {
  .unify-stage { min-height: 0; padding-block: var(--section-y); }
  .unify-cards {
    position: static; order: 2; pointer-events: none;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3); margin-top: var(--sp-6); width: 100%;
  }
  .u-card { position: static; width: auto; transform: none !important; opacity: 1 !important; }
  .unify-head { order: 1; }
  .unify-words { display: none; }
  .unify-tag { order: 3; }
  .u-wallet { display: none; }
}
.reduced-motion .unify-stage { min-height: 0; padding-block: var(--section-y); }
.reduced-motion .unify-cards {
  position: static; order: 2;
  /* Default to 2 columns so phones with OS "Reduce Motion" don't get three
     ~100px columns that clip the "+$48,600" values; widen to 3 only when there
     is room (this rule outranks the max-width:900px 2-col rule, so the phone
     width must be handled here, not there). */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-6); width: 100%; max-width: var(--maxw);
}
@media (min-width: 901px) {
  .reduced-motion .unify-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.reduced-motion .u-card { position: static; width: auto; transform: none !important; opacity: 1 !important; }
.reduced-motion .unify-head { order: 1; }
.reduced-motion .unify-words { display: none; }
.reduced-motion .unify-tag { order: 3; display: block; }
.reduced-motion .u-wallet { display: none; }
/* The unify stage ends bottom-light (deck + word sit high), so the services
   section that follows trims its top padding to close the dead air. */
.unify + .services { padding-top: calc(var(--section-y) * 0.45); }

/* ---------------------------------------------------------------------------
   5b · SERVICES (tabbed showcase)
   --------------------------------------------------------------------------- */
.svc-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-6); }
.svc-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.2rem;
  border-radius: var(--r-pill);
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  color: var(--tx-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}
.svc-tab svg { width: 17px; height: 17px; }
.svc-tab:hover { color: var(--tx-1); background: var(--bg-card-hi); border-color: var(--line-3); }
.svc-tab[aria-selected="true"] {
  color: var(--teal-300);
  background: var(--teal-tint-08);
  border-color: var(--teal-tint-22);
}
/* auto-advance progress hairline inside the active tab (driven by .is-timing) */
.svc-tab-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--teal-400);
  transform: scaleX(0); transform-origin: 0 50%;
}
.svc-tab.is-timing .svc-tab-progress {
  transform: scaleX(1);
  transition: transform var(--svc-auto, 5.5s) linear;
}

/* Panels stack in one grid cell → container sizes to the tallest panel,
   so switching tabs never shifts the page (and never upsets ScrollTrigger). */
.js .svc-panels { display: grid; }
.js .svc-panel {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--dur-mid) var(--ease-out-quart),
              transform var(--dur-mid) var(--ease-out-quart),
              visibility 0s linear var(--dur-mid);
}
.js .svc-panel.is-active {
  opacity: 1; visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.svc-panel {
  display: grid; grid-template-columns: 1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.svc-copy h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: var(--sp-3); }
.svc-copy p { color: var(--tx-2); max-width: 52ch; margin-bottom: var(--sp-4); }
.svc-ticks { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: 0.6rem; }
.svc-ticks li { display: flex; align-items: center; gap: 0.6rem; color: var(--tx-2); font-size: var(--fs-sm); }
.svc-ticks svg { width: 17px; height: 17px; color: var(--teal-300); flex: none; }
.svc-copy .link svg { width: 14px; height: 14px; vertical-align: -2px; }

/* Mini product mock inside each panel */
.svc-visual { padding: var(--sp-5); display: grid; gap: 0.55rem; align-content: start; }
.sv-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--tx-3);
  padding-bottom: 0.55rem; border-bottom: 1px solid var(--line-2);
}
.sv-ok { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ok); font-size: var(--fs-xs); white-space: nowrap; }
.sv-ok svg { width: 13px; height: 13px; }
.sv-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--bg-deep);
  border: 1px solid var(--line-1);
  border-radius: var(--r-sm);
  padding: 0.62rem 0.85rem;
  font-size: var(--fs-sm); color: var(--tx-2);
}
.sv-row .mono { color: var(--tx-1); font-weight: 600; font-size: 0.95rem; }
.sv-row .sv-pos { color: var(--ok); }
.sv-row-hi { border-color: var(--teal-tint-22); background: linear-gradient(90deg, var(--teal-tint-08), var(--bg-deep)); }
.sv-meta { display: inline-flex; align-items: center; gap: 0.6rem; }
.sv-chart { display: flex; align-items: flex-end; gap: 0.4rem; height: 74px; padding: 0.2rem 0.1rem; }
.sv-chart span {
  flex: 1; height: var(--h);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--teal-500), var(--teal-700));
  opacity: 0.5;
}
.sv-chart .sv-bar-hi {
  opacity: 1;
  background: linear-gradient(180deg, var(--teal-300), var(--teal-500));
  box-shadow: 0 0 14px var(--teal-glow);
}

/* ---------------------------------------------------------------------------
   6 · THE SHIFT
   --------------------------------------------------------------------------- */
.shift {
  position: relative; overflow: hidden;
  /* Soft teal glows down each side fill the plain space beside the giant A;
     the drifting motes (.shift-field) add the gentle life on top. */
  background:
    radial-gradient(34% 68% at 0% 48%, var(--teal-tint-08), transparent 60%),
    radial-gradient(32% 66% at 100% 56%, var(--teal-tint-08), transparent 60%),
    linear-gradient(180deg, var(--bg-page), var(--bg-section));
}
.shift .shift-field { opacity: 0.5; }
/* The hero's 3D knot cable half-peeking from the LEFT edge (same pipeline as
   .pains-wire: opaque canvas + bloom, screen-blended, edge fade mask) — fills
   the A's empty upper-left corner. */
.shift-wire3d {
  position: absolute; z-index: 0;
  right: 0; top: 36%;  /* JS (data-slide-wire="right") slides it in from beyond the right edge */
  width: clamp(420px, 38vw, 640px);
  aspect-ratio: 1 / 1.15;
  transform: translate(50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 66% 66% at 50% 50%, #000 40%, transparent 92%);
          mask-image: radial-gradient(ellipse 66% 66% at 50% 50%, #000 40%, transparent 92%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
}
.shift-wire3d canvas { width: 100%; height: 100%; display: block; opacity: 0.82; }
@media (max-width: 900px) { .shift-wire3d { display: none; } }
/* Small card floating in the A's right-side space, gently drifting/rotating. */
.shift-float {
  position: absolute; z-index: 2; pointer-events: none;
  left: clamp(0.75rem, 2.5vw, 2.5rem); top: 10%;
  width: clamp(146px, 13vw, 178px);
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.8rem 0.95rem;
  animation: shiftFloaty 7s ease-in-out infinite;
}
.shift-float .sfl-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-xs); color: var(--teal-300); font-weight: 600;
}
.shift-float .sfl-title { font-family: var(--font-display); font-size: 1.35rem; color: var(--tx-1); line-height: 1; }
.shift-float .sfl-note { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--tx-3); }
@keyframes shiftFloaty {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}
/* Second card sits a little lower/inward, drifting out of phase for an organic feel. */
.shift-float2 {
  top: 27%;
  left: clamp(2.25rem, 5.5vw, 6rem);
  animation-delay: -3.5s;
}
.shift-float2 .sfl-title.sfl-num { font-family: var(--font-mono); color: var(--teal-300); font-size: 1.15rem; }
/* Card 3: up near the A's apex, in the dark gap between the teal leg and the
   grey middle leg. Card 4: the upper-right corner above the cable. Both drift
   out of phase with the first two. */
.shift-float3 {
  left: 48%; top: 10%;
  animation-delay: -1.8s;
}
.shift-float4 {
  left: auto;
  right: clamp(0.75rem, 2.5vw, 2.5rem); top: 9%;
  animation-delay: -5.2s;
}
.shift-float3 .sfl-title.sfl-num, .shift-float4 .sfl-title.sfl-num { font-family: var(--font-mono); color: var(--teal-300); font-size: 1.15rem; }
/* Balancing wobble for the apex "hang" card: the rocking runs on the INNER
   wrapper (bottom-centre pivot = the A's tip) so it never fights the GSAP
   transform positioning the card itself. Toggled by JS via .is-hung while the
   card sits on the tip. */
.shift-float3 .sfl-inner { display: flex; flex-direction: column; gap: 0.2rem; transform-origin: 50% 100%; }
.shift-float3.is-hung .sfl-inner { animation: sflBalance 2.6s ease-in-out infinite; }
@keyframes sflBalance {
  0%, 100% { transform: rotate(-2.4deg) translateY(0); }
  25% { transform: rotate(0.6deg) translateY(-2px); }
  50% { transform: rotate(2.4deg) translateY(0); }
  75% { transform: rotate(-0.6deg) translateY(-2px); }
}
.reduced-motion .shift-float3 .sfl-inner { animation: none; }
.reduced-motion .shift-float { animation: none; }
@media (max-width: 1024px) { .shift-float { display: none; } }
.shift-glow { width: 720px; height: 520px; top: 0; left: 50%; transform: translateX(-50%); }
/* The giant Allure "A" logo mark LEADS the section as a big brand mark; the
   whole copy (heading → lead → KPIs) flows BELOW it — no overlap, never cropped
   (the SVG's own viewBox keeps the whole glyph, aspect-correct, at any size). */
.shift > .container { position: relative; z-index: 1; }
.shift-glow { z-index: 0; }
/* Wide column for THIS section only, so the GIANT A fits centred without
   breaking out of the layout (a transform break-out reserves its pre-shift box
   and causes horizontal scroll — avoided entirely here). */
.shift > .container.narrow { max-width: min(1180px, 94vw); }
.shift-mark {
  /* NEAR-full-bleed: a small inset each side so the legs' outer edges — and
     their glowing rim (2.4px stroke + 11px runner glow ≈ 7px overhang) — are
     fully visible instead of being sliced off by the viewport. Kept to 12px so
     the pocket geometry stays within the copy tunings' verified slack. */
  width: calc(100vw - 24px);
  margin-left: calc(50% - 50vw + 12px);
  /* Pull the copy block UP into the A's counter; offset is a fixed fraction of
     the mark width so the nesting holds at every size (mark aspect ≈ 0.92). */
  margin-bottom: calc((100vw - 24px) * -0.692);
  pointer-events: none;
}
.shift-bigA {
  display: block; height: auto; width: 100%;   /* fills the (giant) .shift-mark */
  pointer-events: none;
  /* The A's feet/sides sit flush on the viewBox edge, so half of every edge
     stroke (the shine rim/halo) falls OUTSIDE the viewBox — an SVG's default
     overflow:hidden clips it, leaving the bottom/side borders looking cut and
     only peeking out at the corners. Let the strokes paint past the box. */
  overflow: visible;
}
/* The copy sits in front of the mark and BOTTOM-aligns into the A's open base:
   the KPI row lands inside the base (never stranded below the feet) and the
   heading rides up in the mouth. min-height ≈ the counter's span, so on wide
   screens (short copy, tall A) flex-end fills the base; on narrow screens (copy
   taller than the counter) it just flows. Text kept to a readable width. */
.shift-lead-2 { margin-top: var(--sp-4); color: var(--tx-3); }
.shift-cta { margin-top: var(--sp-6); }
.shift-copy {
  position: relative; z-index: 1;
  max-width: 760px; margin-inline: auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Deeper (0.66 → 0.70): the lead's last line now lands close above the A's
     feet, so the copy fills the open base to the bottom instead of leaving a
     dead band inside the A. */
  min-height: calc((100vw - 24px) * 0.70); /* tracks the (inset) mark width */
}
/* Wide desktop: the A's clear pocket (teal leg → the grey middle leg) sits well
   LEFT of the viewport centre — its centre lands near 34vw. Nudge the copy into
   it and cap its width so it fits between the legs instead of running onto the
   middle leg. */
/* The pocket is a slanted wedge — narrowest at the top (eyebrow/heading line 1),
   widest at the lead — and it scales with the viewport. Three bands keep the
   copy pixel-clear of both legs at every common desktop size (each verified by
   scanning the rendered text rows against the A's fills). */
/* margin-top drops the copy into the WIDEST part of the wedge (below the
   crossbar) — the whole block reads in the clear pocket, never grazing a leg,
   in the risen (scrolled, heading -26px) state which is the tightest. Depth
   scales with the viewport (the narrower the screen, the deeper the copy must
   sit); each band's slope was scan-fitted at its endpoints. */
@media (min-width: 1200px) and (max-width: 1500px) {
  /* Laptop (e.g. 1366): pocket ≈ 240–680 at the heading. */
  .shift-copy { transform: translateX(-15.2vw); max-width: min(400px, 29.5vw); margin-top: max(0px, calc(700px - 46.9vw)); }
  .shift-copy h2 { font-size: clamp(1.8rem, 2.75vw, 2.4rem); }
  .shift-copy .lead { font-size: clamp(0.92rem, 1.1vw, 1rem); }
  .shift-copy .eyebrow { position: relative; left: 4.5vw; }
}
@media (min-width: 1200px) and (max-width: 1300px) {
  /* Below 1280 the pocket narrows faster — steeper depth (1200→160, 1280→100). */
  .shift-copy { margin-top: max(0px, calc(1060px - 75vw)); }
}
@media (min-width: 1501px) and (max-width: 1750px) {
  /* Mid desktop (e.g. 1536/1600/1680): still a tight wedge. */
  .shift-copy { transform: translateX(-15.5vw); max-width: min(470px, 30vw); margin-top: max(0px, calc(467px - 27.8vw)); }
  .shift-copy h2 { font-size: clamp(2rem, 2.9vw, 2.7rem); }
  .shift-copy .lead { font-size: clamp(0.95rem, 1.1vw, 1.05rem); }
  .shift-copy .eyebrow { position: relative; left: 3.5vw; }
}
@media (min-width: 1751px) {
  /* Wide (e.g. 1920+): pocket ≈ 324–976 at the heading. */
  .shift-copy { transform: translateX(-16vw); max-width: min(700px, 32vw); margin-top: max(0px, calc(760px - 37.5vw)); }
}
/* Two-tone brand mark: teal leg = brand teal, the mark's dark half recoloured to
   light ink; kept low-opacity so the copy nested in the mouth stays readable. */
/* (No filter on the mark: a drop-shadow on this huge, animated SVG forced a
   full re-rasterise every scroll frame — measured ~45ms/frame on its own. The
   section's side glows already give the teal ambience.) */
/* Card-style border on the A — the same quiet, thin outline the floating
   cards wear. The ONLY scroll behaviour: brightness. JS ramps --shine-o with
   the scroll (initShiftShine), fading the rim from faint to fully lit. No
   filters, no dashes — one cheap stroke per leg. */
.shift-shine .shine-rim {
  fill: none;
  stroke: #7CF0DE; /* brighter than teal-300 so the lit state really pops */
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: calc(0.35 + var(--shine-o, 0.5) * 0.65);
}
/* The TRAVELLING light: a segment that rides the outline with the scroll and
   grows brighter (tez) as it goes — soft wide glow under a hot core. No CSS
   filters (perf): the glow is a wider faint stroke on the same dash. */
.shift-shine .shine-run-glow {
  fill: none;
  stroke: rgba(124, 240, 222, 0.55);
  stroke-width: 11;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: calc(var(--shine-o, 0) * 0.9);
}
.shift-shine .shine-run {
  fill: none;
  stroke: #EAFFFB;
  stroke-width: 3.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: calc(0.15 + var(--shine-o, 0) * 0.85);
}
/* No JS / reduced motion: quiet full outline, no runner. */
.reduced-motion .shift-shine .shine-rim { opacity: 0.35; }
.reduced-motion .shift-shine .shine-run,
.reduced-motion .shift-shine .shine-run-glow { display: none; }
.shift-bigA .ink-teal { fill: var(--teal-500); fill-opacity: 0.5; }
.shift-bigA .ink-light { fill: var(--tx-1); fill-opacity: 0.2; }

/* How we work — reuses .section / .cards-3 / .section-head */
.how { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-section), var(--bg-page)); }
.how-glow { width: 640px; height: 480px; top: 4%; left: 50%; transform: translateX(-50%); }
.how .cards-3 { margin-top: var(--sp-7); }
.results-placeholder { display: block; margin-top: var(--sp-3); color: var(--tx-3); font-size: var(--fs-sm); font-style: italic; }
.shift-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  transform-style: preserve-3d;
  /* Full-bleed band: break out of the narrow container to the viewport edges
     (with page gutters), so four stats get real room. */
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-inline: var(--gutter);
  /* Sits BELOW the giant A now (moved out of the .shift-copy overlap in markup) —
     a clean full-width KPI band under the logo mark, with real breathing room
     below the A's feet so it doesn't crowd the mark. */
  margin-top: clamp(4rem, 8vw, 6.5rem);
}
/* The copy sits in front of the whole, aspect-correct A at every width — the
   eyebrow/heading up near the apex and the KPI row down in the wide base (the
   base .shift > .container flex layout with its clamped min-height already
   spreads them). No per-breakpoint nesting offsets: those stretched the A to
   the full section height and cropped it into a band on wide desktop. */
.stat { text-align: center; padding: var(--sp-5) var(--sp-4); border-left: 1px solid var(--line-1); }
.stat:first-child { border-left: 0; }
.stat-num { display: block; font-size: var(--fs-kpi); color: var(--teal-300); font-weight: 600; line-height: 1; }
/* Match the logo/heading serif (Newsreader) instead of the mono figure default */
.shift-stats .stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.stat-cap { display: block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--tx-2); }

/* ---------------------------------------------------------------------------
   6b · "YOUR WEEK" — dashboard builds itself (pinned scrub)
   --------------------------------------------------------------------------- */
.week { position: relative; background: var(--bg-section); }
.week-stage {
  /* grid (not flex) centering: ScrollTrigger's pin-spacing computes reliably on
     a grid/block pinned element; a display:flex pin-spacer intermittently
     collapses to 0 padding on real hosting, overlapping the next section. */
  min-height: 100vh; display: grid; align-content: center;
  padding-block: var(--sp-8); overflow: hidden;
  position: relative;
}
/* Blueprint-grid texture behind the dashboard scene — fine teal lines with
   brighter "major" lines every 5 cells, faded out toward the edges. Reads as an
   electrical schematic sheet; pure CSS, no effect on the pinned scene. */
.week-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 184, 166, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 184, 166, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(20, 184, 166, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 184, 166, 0.09) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 35%, transparent 100%);
}
/* House-wiring schematic behind the dashboard — switchboard, wire runs, fan /
   lights / switches / outlet — drawn in faint teal so it reads as a blueprint
   texture, not a diagram to study. Sits above the grid, below the content. A
   slow dash drift along the runs suggests current flowing. */
.week-schematic {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.85;
  -webkit-mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
}
.week-schematic .ws-lines {
  fill: none; stroke: rgba(79, 212, 193, 0.42); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.week-schematic .ws-lines path { stroke-dasharray: 6 10; animation: wsFlow 3.2s linear infinite; }
.week-schematic .ws-lines rect, .week-schematic .ws-lines circle, .week-schematic .ws-lines line { stroke-dasharray: none; animation: none; }
.week-schematic .ws-breakers rect { fill: rgba(79, 212, 193, 0.08); }
.week-schematic .ws-nodes circle { fill: var(--teal-300); stroke: none; opacity: 0.6; }
@keyframes wsFlow { to { stroke-dashoffset: -32; } }
.reduced-motion .week-schematic .ws-lines path { animation: none; stroke-dasharray: none; }
.week-inner {
  display: grid; grid-template-columns: 0.82fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  position: relative; z-index: 1;
}
.week-copy .eyebrow { margin-bottom: var(--sp-4); }
.week-copy h2 { margin-bottom: var(--sp-4); }
.week-lead { color: var(--tx-2); font-size: var(--fs-lead); margin-bottom: var(--sp-5); }
.week-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.week-caps li { display: flex; align-items: center; gap: 0.6rem; color: var(--tx-2); font-size: var(--fs-sm); }
.week-caps svg { width: 18px; height: 18px; color: var(--teal-300); flex: none; }

.week-dash { padding: var(--sp-6); display: grid; gap: var(--sp-5); }
.wd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-2);
}
.wd-title { font-weight: 600; color: var(--tx-1); font-size: var(--fs-sm); }
.wd-flow { width: 100%; height: 30px; display: block; }
.wd-flow path { filter: drop-shadow(0 0 6px var(--teal-glow)); }

.wd-kpis {
  display: grid; grid-template-columns: 1fr 118px;
  grid-template-areas: "in gauge" "out gauge" "ato gauge";
  gap: 0.55rem var(--sp-5); align-items: center;
}
.wd-kpi {
  background: var(--bg-deep); border: 1px solid var(--line-1);
  border-radius: var(--r-sm); padding: 0.6rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.wd-kpi:nth-child(1) { grid-area: in; }
.wd-kpi:nth-child(2) { grid-area: out; }
.wd-kpi:nth-child(3) { grid-area: ato; }
.wd-k-label { font-size: var(--fs-xs); color: var(--tx-3); }
.wd-k-val { font-size: 1.15rem; font-weight: 600; color: var(--tx-1); }
.wd-k-val.pos { color: var(--ok); }
.wd-kpi-gauge { grid-area: gauge; background: transparent; border: 0; padding: 0; align-items: center; text-align: center; }
.gauge { position: relative; width: 118px; height: 118px; }
.gauge svg { width: 100%; height: 100%; }
.gauge-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.55rem; font-weight: 700; color: var(--teal-300);
}
.wd-kpi-gauge .wd-k-label { order: 2; margin-top: 0.35rem; }

.wd-chart-head { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--tx-3); margin-bottom: var(--sp-3); }
.wd-trend { color: var(--ok); display: inline-flex; align-items: center; gap: 0.3rem; }
.wd-trend svg { width: 14px; height: 14px; }
.wd-bars { display: flex; align-items: flex-end; gap: 0.4rem; height: 84px; }
.wd-bar { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--teal-500), var(--teal-700)); opacity: 0.5; }
.wd-bar-hi { opacity: 1; background: linear-gradient(180deg, var(--teal-300), var(--teal-500)); box-shadow: 0 0 14px var(--teal-glow); }

.wd-ato-label { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--tx-2); margin-bottom: 0.45rem; }
.wd-ato-label svg { width: 14px; height: 14px; color: var(--teal-300); vertical-align: -2px; }
.wd-ato-label .mono { color: var(--teal-300); }
.wd-ato-track { height: 8px; background: var(--bg-deep); border: 1px solid var(--line-1); border-radius: var(--r-pill); overflow: hidden; }
.wd-ato-fill { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--teal-500), var(--teal-300)); border-radius: var(--r-pill); }

/* ---------------------------------------------------------------------------
   7 · PROCESS (horizontal pinned scroll)
   --------------------------------------------------------------------------- */
.process { position: relative; }
.hscroll { position: relative; height: 100vh; overflow: hidden; background: linear-gradient(180deg, var(--bg-section), var(--bg-page)); }
.hscroll-inner { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 4vh, 3rem); }
.hscroll-head { flex: none; }
.hscroll-head .eyebrow { margin-bottom: var(--sp-3); }
.hscroll-hint { color: var(--tx-3); font-family: var(--font-mono); font-size: var(--fs-xs); margin-top: var(--sp-3); letter-spacing: 0.1em; }
.htrack { display: flex; gap: var(--sp-5); padding-inline: var(--gutter); align-items: stretch; will-change: transform; }
.hpanel {
  position: relative;
  flex: 0 0 auto; width: min(80vw, 520px);
  border-radius: var(--r-xl); border: 1px solid var(--line-2);
  background: linear-gradient(155deg, var(--bg-card-hi), var(--bg-card));
  box-shadow: var(--shadow-lift);
  padding: clamp(1.7rem, 3vw, 2.8rem);
  display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center;
  transition: transform 0.38s var(--ease-out-quart),
              box-shadow 0.38s var(--ease-out-quart),
              border-color 0.38s;
}
/* Shine border — the same rotating two-spot conic ring as the feature cards
   (see @property --shine-angle above). Only the 1.5px ring shows. */
.hpanel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--shine-angle),
    var(--teal-300) 0deg,
    rgba(79, 212, 193, 0.35) 45deg,
    rgba(79, 212, 193, 0) 80deg,
    rgba(79, 212, 193, 0) 100deg,
    rgba(79, 212, 193, 0.35) 135deg,
    var(--teal-300) 180deg,
    rgba(79, 212, 193, 0.35) 225deg,
    rgba(79, 212, 193, 0) 260deg,
    rgba(79, 212, 193, 0) 280deg,
    rgba(79, 212, 193, 0.35) 315deg,
    var(--teal-300) 360deg);
  animation: shineRotate 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.38s, filter 0.38s;
}
/* Smooth "popup" on hover: the card lifts + scales up a touch, casts a deeper
   shadow and the shine border brightens with a soft glow. */
.hpanel:hover {
  transform: translateY(-10px) scale(1.025);
  box-shadow: 0 34px 66px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--teal-tint-22) inset;
  border-color: var(--teal-tint-22);
  z-index: 2;
}
.hpanel:hover::before {
  opacity: 1;
  filter: drop-shadow(0 0 9px rgba(79, 212, 193, 0.5));
}
.hpanel .step-num {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--teal-500); font-weight: 700; line-height: 1;
}
.hpanel .step-chip { width: 56px; height: 56px; margin-block: var(--sp-2); }
.hpanel .step-chip svg { width: 26px; height: 26px; }
.hpanel h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.hpanel p { color: var(--tx-2); max-width: 44ch; }
.hpanel-cta { background: linear-gradient(155deg, var(--teal-tint-14), var(--bg-card)); border-color: var(--teal-tint-22); align-items: flex-start; }
.hpanel-cta .btn { margin-top: var(--sp-3); }
.hrail { flex: none; height: 3px; background: var(--line-1); border-radius: var(--r-pill); margin-inline: var(--gutter); overflow: hidden; }
.hrail-fill { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--teal-500), var(--teal-300)); }

/* ---------------------------------------------------------------------------
   7b · SET-ASIDE CALCULATOR
   --------------------------------------------------------------------------- */
.calc { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-page), var(--bg-section) 30%, var(--bg-section) 72%, var(--bg-page)); }
.calc-glow { width: 760px; height: 520px; top: 8%; left: 50%; transform: translateX(-50%); }
.calc .section-head { position: relative; z-index: 1; }
.calc-widget {
  position: relative; z-index: 1;
  max-width: 720px; margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  display: grid; gap: var(--sp-5);
}
.calc-label { display: block; font-size: var(--fs-sm); color: var(--tx-2); font-weight: 600; margin-bottom: 0.3rem; }
.calc-label-sub { color: var(--tx-3); font-weight: 400; }
.calc-amount {
  display: block;
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700; color: var(--tx-1);
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}

/* Range slider — teal fill driven by --pct from JS */
.calc-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--teal-700) 0%, var(--teal-400) var(--pct, 33%), var(--bg-deep) var(--pct, 33%));
  border: 1px solid var(--line-2);
  cursor: pointer;
  outline-offset: 6px;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal-300);
  border: 3px solid #06231F;
  box-shadow: 0 0 0 4px var(--teal-tint-22), 0 8px 20px -8px var(--teal-glow);
  cursor: grab;
  transition: transform var(--dur-fast) var(--ease-out-quart);
}
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc-slider:active::-webkit-slider-thumb { cursor: grabbing; }
.calc-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal-300);
  border: 3px solid #06231F;
  box-shadow: 0 0 0 4px var(--teal-tint-22), 0 8px 20px -8px var(--teal-glow);
  cursor: grab;
}
.calc-range-caps { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--tx-4); margin-top: 0.5rem; }

/* Stacked split bar */
.calc-bar {
  display: flex; height: 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--bg-deep);
  overflow: hidden;
}
.calc-seg { display: block; height: 100%; transition: width 0.45s var(--ease-out-quart); min-width: 2px; }
.calc-seg-keep { background: linear-gradient(90deg, var(--teal-500), var(--teal-300)); box-shadow: 0 0 14px var(--teal-glow); }
.calc-seg-tax { background: var(--warn); opacity: 0.8; }
.calc-seg-gst { background: var(--line-3); }

.calc-rows { display: grid; gap: 0; margin: 0; }
.calc-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line-1);
}
.calc-row dt { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--tx-2); font-size: var(--fs-sm); }
.calc-row dd { margin: 0; font-weight: 600; color: var(--tx-1); font-size: 1.15rem; }
.calc-dot { width: 11px; height: 11px; border-radius: 3.5px; flex: none; }
.calc-dot-keep { background: var(--teal-400); box-shadow: 0 0 8px var(--teal-glow); }
.calc-dot-tax { background: var(--warn); opacity: 0.85; }
.calc-dot-gst { background: var(--line-3); }
.calc-row-year { border-bottom: 0; padding-top: var(--sp-4); }
.calc-row-year dt { color: var(--teal-300); }
.calc-row-year dt svg { width: 17px; height: 17px; flex: none; }
.calc-row-year dd { color: var(--teal-300); }
.calc-note { font-size: var(--fs-xs); color: var(--tx-3); line-height: 1.6; max-width: 58ch; }

/* ---------------------------------------------------------------------------
   8 · RESULTS
   --------------------------------------------------------------------------- */
/* Giant ghost "A" behind the section — apex up top, one leg planted in each
   bottom corner (preserveAspectRatio:none stretches the glyph to the section).
   CSS shows it fully drawn; on motion desktops the JS scrub draws the strokes
   in as the section scrolls into view. */
.results { position: relative; overflow: hidden; }
.results > .container { position: relative; z-index: 1; }
.kpi-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-1);
  border: 1px solid var(--line-1); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: var(--sp-6);
}
.kpi-cell { background: var(--bg-card); padding: var(--sp-6) var(--sp-5); border-top: 2px solid var(--copper-soft); } /* warm copper cap — echoes the wire/wallet */
.kpi-cell .kpi { display: block; font-size: var(--fs-kpi); font-weight: 600; color: var(--tx-1); line-height: 1; }
.kpi-cell .kpi.pos { color: var(--ok); }
.kpi-cap { display: block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--tx-3); }
.kpi-grow { display: block; height: 6px; margin-top: var(--sp-4); background: var(--bg-deep); border: 1px solid var(--line-1); border-radius: var(--r-pill); overflow: hidden; }
.kpi-grow-fill { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--teal-700), var(--teal-300)); }
.results-story { font-size: var(--fs-lead); color: var(--tx-2); max-width: 780px; }
.results-story strong { color: var(--tx-1); }
.results-story .link { white-space: nowrap; }
.results-story .link svg { width: 15px; height: 15px; vertical-align: -2px; }

/* ---------------------------------------------------------------------------
   9 · TESTIMONIALS
   --------------------------------------------------------------------------- */
/* Settled ambient wash behind the otherwise-flat sections — a soft, low teal
   glow from the top (calmer than the mote fields on pains/CTA/unify). Layered as
   a background-image so it sits behind all content with no z-index juggling; the
   page's faint dot-grid still shows through the transparent falloff. */
.process, .results, .founder {
  background-image: radial-gradient(78% 62% at 50% 4%, rgba(20, 184, 166, 0.10), transparent 72%);
}
.testimonials {
  background:
    radial-gradient(78% 62% at 50% 4%, rgba(20, 184, 166, 0.10), transparent 72%),
    linear-gradient(180deg, var(--bg-section), var(--bg-page));
}
.testi-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-5); align-items: stretch; }
.testi-video {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 380px;
  cursor: pointer;
  text-align: left;
  color: var(--tx-1);
  background: var(--bg-card);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-6);
}
.testi-poster {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 60% at 40% 30%, rgba(20,184,166,0.22), transparent 60%),
    linear-gradient(160deg, var(--bg-card), var(--bg-deep));
}
.testi-poster::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* real video still: cover it, and darken top/bottom so the play button + name stay readable */
.testi-poster.has-img { background-size: cover; background-position: center 30%; }
.testi-poster.has-img::after {
  background-image: linear-gradient(180deg, rgba(6,10,14,0.35) 0%, rgba(6,10,14,0.1) 40%, rgba(6,10,14,0.8) 100%);
  background-size: auto;
}
.testi-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center; z-index: 2;
  background: rgba(20,184,166,0.16);
  border: 1px solid var(--teal-400);
  color: var(--teal-300);
  box-shadow: 0 0 0 0 var(--teal-glow);
  transition: transform var(--dur-fast) var(--ease-out-quart), background var(--dur-fast);
}
.testi-play svg { width: 30px; height: 30px; margin-left: 3px; }
.testi-video:hover .testi-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(20,184,166,0.28); }
.testi-video-meta { position: relative; z-index: 2; display: flex; flex-direction: column; }
.testi-video-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.testi-video-role { color: var(--tx-2); font-size: var(--fs-sm); margin-top: 0.2rem; }
.testi-video-tag {
  position: absolute; top: var(--sp-5); left: var(--sp-6); z-index: 2;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--teal-300);
  background: rgba(11,17,22,0.5); border: 1px solid var(--line-2);
  padding: 0.35rem 0.6rem; border-radius: var(--r-pill);
}

/* ── Vertical 3D carousel (right column) ───────────────────────────────────
   JS (initTestimonialCoverflow) rotates the review cards up through the deck:
   the centre card faces front, the ones above/below tilt back in 3D (rotateX)
   and fade, and the far card recedes into the distance. Reduced motion / phones
   fall back to a plain stack. */
.testi-flow { position: relative; height: 100%; }
.flow-stage {
  position: relative;
  height: 100%;
  min-height: clamp(500px, 56vw, 600px);
  perspective: 1500px;
  transform-style: preserve-3d;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.flow-card {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: min(460px, 100%);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(26, 34, 41, 0.96), rgba(19, 27, 34, 0.96));
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.65);
  transform-origin: center center;
  transform: translate(-50%, -50%); /* JS layers the 3D on top of this */
  transition: transform 0.75s var(--ease-out-quart), opacity 0.75s var(--ease-out-quart),
    filter 0.75s var(--ease-out-quart), box-shadow 0.5s var(--ease-out-quart);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.flow-card.is-active {
  border-color: var(--teal-tint-22);
  box-shadow: 0 30px 80px -32px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--teal-tint-14);
}
.flow-card .quote-mark { width: 28px; height: 28px; color: var(--teal-500); opacity: 0.75; margin-bottom: var(--sp-3); }
.flow-card blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem); line-height: 1.44; color: var(--tx-1);
}
.flow-card figcaption { margin-top: var(--sp-4); display: flex; align-items: center; gap: 0.8rem; }
.q-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: #06231f;
  background: linear-gradient(180deg, var(--teal-400), var(--teal-700));
}
.q-meta { display: grid; gap: 0.12rem; }
.q-stars { font-size: 0.9rem; }
.q-name { font-weight: 600; color: var(--tx-1); font-size: var(--fs-sm); }
.q-role { color: var(--tx-3); font-size: var(--fs-xs); }

/* Reduced motion: no 3D — a plain readable stack. */
.reduced-motion .flow-stage {
  height: auto; min-height: 0; perspective: none; transform-style: flat;
  display: grid; gap: var(--sp-5);
  -webkit-mask-image: none; mask-image: none;
}
.reduced-motion .flow-card {
  position: static; left: auto; top: auto; width: auto;
  transform: none !important; opacity: 1 !important; filter: none !important; transition: none;
}

/* ---------------------------------------------------------------------------
   9b · PRICING
   --------------------------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
.price-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.price-name { font-size: 1.4rem; }
.price-for { color: var(--tx-3); font-size: var(--fs-sm); margin-top: -0.7rem; }
.price-tag { display: flex; align-items: baseline; gap: 0.35rem; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-1); }
.price-from { font-size: var(--fs-xs); color: var(--tx-3); }
.price-num { font-size: clamp(2.1rem, 3vw, 2.6rem); font-weight: 700; color: var(--tx-1); line-height: 1; }
.price-per { color: var(--tx-3); font-size: var(--fs-sm); }
.price-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; flex: 1; align-content: start; }
.price-ticks li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--fs-sm); color: var(--tx-2); }
.price-ticks svg { width: 16px; height: 16px; color: var(--teal-300); flex: none; margin-top: 0.18rem; }
.price-cta { margin-top: var(--sp-4); }

.price-featured {
  border-color: var(--teal-tint-22);
  background: linear-gradient(170deg, var(--teal-tint-08), var(--bg-card));
  box-shadow: var(--shadow-teal), var(--shadow-card);
}
.price-featured .price-num { color: var(--teal-300); }
.price-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.35rem;
  white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 700;
  color: #06231F;
  background: linear-gradient(180deg, var(--teal-300), var(--teal-400));
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  box-shadow: 0 10px 24px -10px var(--teal-glow);
}
.price-badge svg { width: 13px; height: 13px; }
.price-foot { text-align: center; color: var(--tx-3); font-size: var(--fs-sm); margin-top: var(--sp-6); }

/* ---------------------------------------------------------------------------
   10 · FOUNDER
   --------------------------------------------------------------------------- */
.founder-grid { display: grid; grid-template-columns: 0.8fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.founder-media { position: relative; }
.founder-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 50% 12%, rgba(20,184,166,0.18), transparent 55%),
    linear-gradient(165deg, var(--bg-card-hi), var(--bg-deep));
  display: grid; place-items: center;
  box-shadow: var(--shadow-lift);
}
.founder-monogram {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(4rem, 12vw, 8rem);
  color: rgba(241,245,248,0.08);
  letter-spacing: -0.04em;
}
.founder-badge {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-xs); color: var(--teal-300);
  background: var(--bg-card-hi); border: 1px solid var(--line-2);
  padding: 0.5rem 0.9rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
}
.founder-badge svg { width: 15px; height: 15px; }
.founder-copy .eyebrow { margin-bottom: var(--sp-4); }
.founder-copy h2 { margin-bottom: var(--sp-4); }
.founder-copy p { color: var(--tx-2); margin-bottom: var(--sp-4); }
.founder-cta { margin-top: var(--sp-6); }
.founder-sign { display: flex; flex-direction: column; gap: 0.1rem; margin-top: var(--sp-5); }
.sign-name { font-family: var(--font-display); font-size: 1.4rem; color: var(--tx-1); font-style: italic; }
.sign-role { font-size: var(--fs-sm); color: var(--tx-3); }

/* ---------------------------------------------------------------------------
   10b · FAQ
   --------------------------------------------------------------------------- */
.faq { background: linear-gradient(180deg, var(--bg-page), var(--bg-section)); }
.faq-list { display: grid; gap: var(--sp-3); }
.faq-item {
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--bg-card-hi), var(--bg-card));
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.faq-item.open { border-color: var(--teal-tint-22); }
.faq-q { margin: 0; font-size: inherit; letter-spacing: normal; }
.faq-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 1.05rem 1.3rem;
  background: none; border: 0;
  color: var(--tx-1);
  font-family: var(--font-body);
  font-size: 1.02rem; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.faq-btn:hover { color: var(--teal-300); }
.faq-btn svg {
  width: 18px; height: 18px; flex: none;
  color: var(--tx-3);
  transition: transform var(--dur-fast) var(--ease-out-quart), color var(--dur-fast);
}
.faq-item.open .faq-btn svg { transform: rotate(180deg); color: var(--teal-300); }
/* Collapse via grid rows — animatable without JS-measured heights. Only when
   JS is on: without it every answer stays open and readable. */
.js .faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-mid) var(--ease-out-quart), visibility 0s linear var(--dur-mid); }
.js .faq-item.open .faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dur-mid) var(--ease-out-quart), visibility 0s; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { padding: 0 1.3rem 1.15rem; color: var(--tx-2); font-size: var(--fs-sm); line-height: 1.65; max-width: 66ch; }
.faq-more { text-align: center; color: var(--tx-2); font-size: var(--fs-sm); margin-top: var(--sp-6); }

/* ---------------------------------------------------------------------------
   11 · FINAL CTA
   --------------------------------------------------------------------------- */
.final-cta { position: relative; text-align: center; }
/* The rounded "sheet" that zooms up to full presence as it enters (data-zoom) */
.cta-sheet {
  position: relative; overflow: hidden;
  max-width: min(1280px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--bg-section), var(--bg-deep));
  box-shadow: var(--shadow-lift);
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  will-change: transform;
}
.cta-field { position: absolute; inset: 0; z-index: 0; opacity: 0.8; }
/* Reusable ambient mote field for any section (hero-style drifting bubbles).
   The host section must be position:relative; content sits above at z 1. */
.section-field {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.8; pointer-events: none;
}
/* Sub-page plain sections given the home ambient motes field: lift their
   content above the z-0 canvas so text/cards stay crisp (mirrors the
   .pains/.results/.shift pattern). */
.believe > .container,
.who > .container,
.problems > .container,
.benefits > .container,
.case > .container,
.growth > .container,
.how-who > .container,
.legal > .container,
.faq > .container,
.reviews > .container { position: relative; z-index: 1; }
/* Home .week "blueprint sheet" grid, reused as the sub-page section texture:
   fine teal minor lines + brighter major lines every 5 cells, radial-faded to
   the edges. Pure CSS; paints at z-0 behind the motes field and the z-1 content.
   Same recipe as .week-stage::before so the sub-pages read like the home scene. */
.believe::before, .who::before,
.problems::before, .benefits::before, .case::before,
.growth::before, .how-who::before, .legal::before, .faq::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 184, 166, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 184, 166, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(20, 184, 166, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 184, 166, 0.09) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px;
  -webkit-mask-image: radial-gradient(ellipse 90% 72% at 50% 50%, #000 32%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 72% at 50% 50%, #000 32%, transparent 100%);
}
.pains { position: relative; overflow: hidden; }
.pains > .container { position: relative; z-index: 1; }
.pains-close {
  text-align: center; max-width: 620px; margin: var(--sp-7) auto 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--tx-2);
}
.pains-close::before { content: ""; display: block; width: 40px; height: 2px; margin: 0 auto var(--sp-4); background: linear-gradient(90deg, var(--teal-700), var(--teal-300)); border-radius: 2px; }
/* The hero's 3D knot cable, half peeking in from the pains section's LEFT edge
   (the section's overflow:hidden crops the outside half). A small standalone
   WebGL scene (see three/sideWire.js) using the hero's EXACT pipeline: opaque
   black canvas + bloom, composited with mix-blend-mode: screen at the hero's
   0.82 strength — so only the glowing cable adds light over the section.
   Behind the copy (z 0 vs container z 1). */
.pains-wire {
  position: absolute; z-index: 0;
  left: 0; top: 50%;
  width: clamp(380px, 32vw, 560px);
  aspect-ratio: 1 / 1.15;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
  /* Fade the canvas out toward its edges so the bloom halo never shows a hard
     rectangular seam against the section background. */
  -webkit-mask-image: radial-gradient(ellipse 66% 66% at 50% 50%, #000 40%, transparent 92%);
          mask-image: radial-gradient(ellipse 66% 66% at 50% 50%, #000 40%, transparent 92%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
}
.pains-wire canvas { width: 100%; height: 100%; display: block; opacity: 0.82; }
/* [data-slide-wire] wires are positioned by GSAP (scroll-scrubbed slide-in from
   beyond the edge — see initSlideInWires); the static transform above is the
   no-JS / reduced-motion resting pose. */
@media (max-width: 900px) {
  .pains-wire { display: none; } /* too busy behind stacked cards on phones */
}
.cta-glow { width: 900px; height: 620px; left: 50%; top: 20%; transform: translateX(-50%); }
.cta-inner { position: relative; z-index: 1; }
.cta-inner .eyebrow { margin-bottom: var(--sp-4); }
.cta-inner h2 { margin-bottom: var(--sp-4); }
.cta-inner .lead { margin-inline: auto; margin-bottom: var(--sp-6); }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cta-alt { font-size: var(--fs-sm); color: var(--tx-3); margin-bottom: var(--sp-5); }
.cta-alt a { color: var(--teal-300); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cta-ticks {
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-5);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-sm); color: var(--tx-2);
}
.cta-ticks li { display: inline-flex; align-items: center; gap: 0.4rem; }
.cta-ticks svg { width: 16px; height: 16px; color: var(--teal-300); }

/* Plug-journey power scene (the hand-drawn brief): a long cable wanders around
   the whole CTA sheet, drawing itself in as you scroll, while the 2-pin plug
   rides its leading end. When the pins reach the wall socket the sheet goes
   `.is-live` (JS initPowerPlug): contact spark, glowing holes, a current pulse
   racing along the ENTIRE cable, and the status text swap. The socket + plug
   are HTML floats positioned by JS from the path itself, so they never distort
   with the stretched (preserveAspectRatio:none) wireline. Hidden on phones and
   reduced motion — the status text alone shows, parked "connected". */
.pp-wireline {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.ppw-core {
  /* Bright enough to read even in the sheet's darkest lower half (away from the
     cta-glow) — a darker slate visually "cuts" there while the teal dashes stay
     visible, which reads as a broken cable jacket.
     NO vector-effect here on purpose: with non-scaling-stroke the browser dashes
     in a different unit space than getPointAtLength() reports, so the drawn end
     and the plug (placed by path length) drift apart by the sheet's stretch —
     worse the wider the screen. In plain user units dash, plug and render all
     agree exactly. Stroke width is set from JS to stay ~7px on screen. */
  fill: none; stroke: #46586a; stroke-width: 7; stroke-linecap: round;
}
.ppw-current {
  fill: none; stroke: var(--teal-300); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 12 26;
  opacity: 0;
  transition: opacity var(--dur-mid);
}
/* The wall switch — sits in the gap of the cable loop's right-hand run (the
   path starts/ends at ~x 905, y 305..395 in the 1000×700 viewBox, so the
   switch is anchored at 90.5% / 50% of the sheet). A real <button>. */
.pp-switch {
  position: absolute; z-index: 2;
  left: 90.5%; top: 50%;
  width: 76px; height: 95px;
  transform: translate(-50%, -50%);
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 14px;
  transition: filter 0.3s var(--ease-out-quart);
}
.pp-switch:hover { filter: brightness(1.06); }
.pp-switch:focus-visible { outline: 2px solid var(--teal-300); outline-offset: 4px; }
.pp-switch svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pp-well { fill: #161d23; stroke: rgba(0, 0, 0, 0.5); stroke-width: 1; }
.pp-well-shade { fill: url(#ppWellShadeG); } /* inset depth at the well's lips */
.pp-rocker {
  /* NO 3D transforms here: browsers flatten perspective/rotateX on SVG children
     into a crooked skew (the rocker rendered visibly twisted). The pressed
     state is drawn with 2D only — a small slide + squash — and the LIGHTING
     (state-swapped gradient + flipped shadow) sells the tilt. */
  fill: url(#ppRockerGrad); stroke: #bdbdb1; stroke-width: 0.8;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
  transform-box: fill-box; transform-origin: 50% 50%;
  /* OFF: sits high in the well (flipped up), top face lit. */
  transform: translateY(-2.5px) scaleY(0.965);
  /* springy flip — tiny overshoot, like a real rocker snapping over */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s, fill 0.2s;
}
/* ON: slides low (flipped down), bottom face lit, shadow thrown upward. */
.pp-switch.is-on .pp-rocker {
  fill: url(#ppRockerOnG);
  transform: translateY(2.5px) scaleY(0.965);
  filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.45));
}
/* mid-flip: a quick squash — the rocker "snapping over" */
.pp-switch.is-flipping .pp-rocker { transform: translateY(0) scaleY(0.88); }
.pp-mark { font: 700 11px var(--font-mono); fill: #97978c; transition: fill 0.25s, filter 0.25s; }
.pp-switch.is-on .pp-mark-off { fill: #b3b3a8; }
.pp-switch.is-on .pp-mark-on {
  fill: var(--teal-500);
  filter: drop-shadow(0 0 3px rgba(20, 184, 166, 0.9));
}
.pp-led { fill: #3a4249; transition: fill 0.25s, filter 0.25s; }
.pp-switch.is-on .pp-led { fill: var(--teal-300); filter: drop-shadow(0 0 5px rgba(79, 212, 193, 0.95)); }
.pp-sock-plate {
  fill: url(#ppPlateGrad); stroke: #c7c7bb; stroke-width: 1;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.42));
}
.pp-screw { fill: #cfcfc4; stroke: rgba(0, 0, 0, 0.22); stroke-width: 0.75; }
.power-panel {
  display: inline-grid; justify-items: center;
  margin-bottom: var(--sp-5);
}
.pp-status { position: relative; display: inline-grid; min-height: 1.5em; place-items: center; }
/* Labels are driven purely by `.is-live` on the sheet, so they track the
   connection state through plug-in AND unplug, in both scroll directions. */
.pp-off, .pp-on {
  grid-area: 1 / 1; font-size: var(--fs-sm); font-weight: 600;
  transition: opacity var(--dur-mid) var(--ease-out-quart), transform var(--dur-mid) var(--ease-out-quart);
}
.pp-off { color: var(--tx-3); }
.pp-on { color: var(--teal-300); opacity: 0; transform: translateY(6px); }
.cta-sheet.is-live .pp-on { opacity: 1; transform: none; }
.cta-sheet.is-live .pp-off { opacity: 0; transform: translateY(-6px); }

/* The CTA headline "powers on" with the plug: its accent words start WHITE
   (no power) and only go teal — with a soft glow — once the pins seat and
   the current flows. Scoped to the sheet so accents elsewhere are untouched. */
.cta-sheet .cta-inner h2 .accent {
  transition: text-shadow var(--dur-mid) var(--ease-out-quart);
}
.cta-sheet.is-live .cta-inner h2 .accent {
  text-shadow: 0 0 26px rgba(20, 184, 166, 0.5);
}

/* (The copy stays at full brightness — power-up is a click interaction now, so
   nothing in the section reads as "off" before the user acts.) */

/* ── ON: the current races round the loop; the cable's core warms up ─────── */
.cta-sheet.is-live .ppw-current {
  opacity: 1;
  animation: ppCurrent 0.9s linear infinite;
  filter: drop-shadow(0 0 6px rgba(20, 184, 166, 0.75));
}
/* While JS is drawing the directional fill/drain (switch↔button) it owns the
   dash offset — pause the continuous race so they don't fight. */
.ppw-current.pp-charging { animation: none !important; }
.ppw-core { transition: stroke 0.4s var(--ease-out-quart), filter 0.4s var(--ease-out-quart); }
.cta-sheet.is-live .ppw-core { stroke: #56707f; filter: drop-shadow(0 0 8px rgba(20, 184, 166, 0.35)); }
/* …and the power reaches the "Book" button: it lights up — brighter fill, a
   hot teal halo and a quick flash — a beat after the switch flips (the current
   has to travel round the loop first). */
.cta-sheet .cta-actions .btn-primary {
  transition: box-shadow 0.5s var(--ease-out-quart), filter 0.5s var(--ease-out-quart), transform 0.3s var(--ease-out-quart);
}
.cta-sheet.is-live .cta-actions .btn-primary {
  filter: brightness(1.2) saturate(1.15);
  box-shadow:
    0 0 0 2px rgba(124, 240, 222, 0.6),
    0 0 24px rgba(20, 184, 166, 0.8),
    0 0 64px rgba(20, 184, 166, 0.5);
  animation: ppPowerFlash 0.7s var(--ease-out-quart) 0.45s both;
}
@keyframes ppPowerFlash {
  0% { transform: scale(1); }
  35% { transform: scale(1.05); filter: brightness(1.7) saturate(1.35); }
  100% { transform: scale(1); filter: brightness(1.2) saturate(1.15); }
}
@keyframes ppCurrent { to { stroke-dashoffset: -38; } }
/* Phones + reduced motion: the cable loop is hidden (too busy under the
   stacked copy); the status text still swaps if the sheet ever goes live. */
@media (max-width: 900px) {
  .pp-wireline, .pp-switch { display: none; }
  .power-panel { margin-top: 0; }
  .pp-status { text-align: center; padding-inline: var(--sp-4); }
}
.reduced-motion .ppw-current { animation: none; }
.reduced-motion .power-panel { margin-top: 0; }

/* ---------------------------------------------------------------------------
   12 · FOOTER
   --------------------------------------------------------------------------- */
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--line-1); padding-block: var(--sp-8) var(--sp-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-6); }
.footer-brand .brand { margin-bottom: var(--sp-4); }
.footer-value { color: var(--tx-3); font-size: var(--fs-sm); max-width: 34ch; margin-bottom: var(--sp-4); }
.footer-xero { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-xs); color: var(--teal-300); }
.footer-xero svg { width: 15px; height: 15px; }
.footer-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--tx-3); margin-bottom: var(--sp-4); font-family: var(--font-body); font-weight: 700; }
.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { color: var(--tx-2); font-size: var(--fs-sm); transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--teal-300); }
.footer-contact a { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-contact svg { width: 15px; height: 15px; color: var(--tx-3); }
.footer-abn { color: var(--tx-3); font-size: var(--fs-xs); margin-top: 0.3rem; }
.footer-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--line-1);
  font-size: var(--fs-xs); color: var(--tx-3);
}

/* ---------------------------------------------------------------------------
   13 · LIGHTBOX
   --------------------------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--gutter); opacity: 0; transition: opacity var(--dur-mid) var(--ease-out-quart); }
/* When closed, JS sets the [hidden] attribute — but `.lightbox{display:grid}`
   (author origin) overrides the UA `[hidden]{display:none}`, so without this the
   invisible (opacity:0) modal stays display:grid + pointer-events:auto and
   overlays the WHOLE page, silently eating every click/hover after the video is
   opened once. This restores display:none while hidden. */
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(11,17,22,0.88); backdrop-filter: blur(6px); }
.lightbox-panel {
  position: relative; z-index: 1;
  width: min(920px, 100%); aspect-ratio: 16 / 9;
  background: var(--bg-card); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lift);
  transform: scale(0.96); transition: transform var(--dur-mid) var(--ease-out-expo);
}
.lightbox.open .lightbox-panel { transform: scale(1); }
.lightbox-media, .lightbox-media video { width: 100%; height: 100%; object-fit: cover; }
.lightbox-placeholder { display: grid; place-content: center; gap: 0.4rem; height: 100%; text-align: center; padding: var(--sp-6); }
.lightbox-placeholder p:first-child { font-family: var(--font-display); font-size: 1.6rem; color: var(--tx-1); }
.lb-sub { color: var(--teal-300); }
.lb-note { color: var(--tx-3); font-size: var(--fs-sm); margin-top: var(--sp-3); }
.lb-note code { font-family: var(--font-mono); color: var(--tx-2); background: var(--bg-deep); padding: 0.1rem 0.4rem; border-radius: 5px; }
.lightbox-close {
  position: absolute; top: 0.8rem; right: 0.8rem; z-index: 3;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(11,17,22,0.7); border: 1px solid var(--line-2);
  border-radius: 11px; color: var(--tx-1); cursor: pointer;
}
body.menu-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   14 · REDUCED MOTION — first-class static path
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; transform: none; justify-content: center; width: 100%; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .pulse, .hero-scroll-cue span { animation: none; }
  .hero-canvas { display: none; }
  .hero-poster { opacity: 1 !important; }
  .card.feature::before, .hpanel::before { animation: none; } /* static two-spot ring */
  .banner { display: none; } /* decorative type strips add nothing when static */
}
.reduced-motion .banner { display: none; }
.reduced-motion [data-reveal],
.reduced-motion [data-card-3d],
.reduced-motion [data-split],
.reduced-motion [data-stagger] > *,
.reduced-motion [data-divider],
.reduced-motion [data-glow] { opacity: 1 !important; transform: none !important; filter: none !important; }

/* The class path (OS setting OR the ?motion=off QA override) must neutralise the
   always-on CSS animations too, so the forced preview matches the real thing. */
.reduced-motion .pulse,
.reduced-motion .marquee-track,
.reduced-motion .hero-scroll-cue span { animation: none !important; }
.reduced-motion .marquee-track { transform: none; justify-content: center; width: 100%; }
.reduced-motion .marquee { -webkit-mask-image: none; mask-image: none; }
.reduced-motion .hero-canvas { display: none; }
.reduced-motion .hero-poster { opacity: 1 !important; }
.reduced-motion .card.feature::before, .reduced-motion .hpanel::before { animation: none; }

/* Pinned scenes collapse to static, unpinned layouts under reduced motion. */
.reduced-motion .week-stage { min-height: 0; overflow: visible; }
.reduced-motion .hscroll { height: auto; overflow: visible; }
.reduced-motion .hscroll-inner { height: auto; padding-block: var(--section-y); }
.reduced-motion .htrack { flex-direction: column; transform: none !important; padding-inline: 0; }
.reduced-motion .hpanel { width: auto; }
.reduced-motion .hrail { display: none; }
.reduced-motion .wd-flow path { stroke-dashoffset: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .week-stage { min-height: 0; overflow: visible; }
  .hscroll { height: auto; overflow: visible; }
  .hscroll-inner { height: auto; padding-block: var(--section-y); }
  .htrack { flex-direction: column; transform: none !important; padding-inline: 0; }
  .hpanel { width: auto; }
  .hrail { display: none; }
}

/* ---------------------------------------------------------------------------
   15 · RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-cta { display: none; }
  /* Four stats → 2×2 on tablets; the 3rd/4th get a top rule instead of a left one. */
  .shift-stats { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); }
  .shift-stats .stat:nth-child(3) { border-left: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-dash { max-width: 460px; }
  .week-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .svc-panel { grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; }
  .svc-visual { max-width: 520px; }
  .price-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .price-featured { order: -1; }
  .testi-grid { grid-template-columns: 1fr; }
  /* Phones: no 3D carousel — the review cards stack in normal flow. */
  .flow-stage {
    height: auto; min-height: 0; perspective: none; transform-style: flat;
    display: grid; gap: var(--sp-5);
    -webkit-mask-image: none; mask-image: none;
  }
  .flow-card {
    position: static; left: auto; top: auto; width: auto;
    transform: none !important; opacity: 1 !important; filter: none !important; transition: none;
  }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-photo { max-width: 380px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer-brand { grid-column: 1 / -1; }
}
/* Below 900px the pinned scenes go static (see scrolly.js); stack them here. */
@media (max-width: 900px) {
  .week-stage { min-height: 0; overflow: visible; padding-block: var(--section-y); }
  .hscroll { height: auto; overflow: visible; }
  .hscroll-inner { height: auto; padding-block: var(--section-y); }
  .htrack { flex-direction: column; transform: none; padding-inline: var(--gutter); }
  .hpanel { width: auto; }
  .hrail { display: none; }
}
@media (max-width: 720px) {
  .cards-3 { grid-template-columns: 1fr; }
  .svc-tab { padding: 0.68rem 0.95rem; font-size: var(--fs-xs); }
  .calc-widget { padding: 1.35rem; }
  .calc-row dd { font-size: 1.02rem; }
  .faq-btn { font-size: var(--fs-sm); padding: 0.95rem 1.05rem; }
  .faq-a-inner p { padding: 0 1.05rem 1rem; }
  .shift-stats { grid-template-columns: 1fr; gap: 1px; background: var(--line-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); overflow: hidden; width: auto; margin-left: 0; padding-inline: 0; }
  .stat { background: var(--bg-card); border-left: 0; }
  .kpi-band { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; }
  .hero { padding-block: 7rem 3rem; }
}
@media (max-width: 420px) {
  .kpi-band { grid-template-columns: 1fr; }
}

/* =============================================================================
   SUB-PAGES (About / Virtual CFO / Accounting & Tax)
   Page-level components on the same tokens + chrome as Home. Append-only:
   new prefixed classes, overrides nothing above.
   ============================================================================= */

/* --- Page hero -------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(8.5rem, 6rem + 8vw, 12rem) var(--section-y);
}
.page-hero-glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: -8%; transform: translateX(-50%);
  width: min(1100px, 96vw); height: min(720px, 82vh);
  background:
    radial-gradient(ellipse at 50% 30%, var(--teal-tint-14), transparent 60%),
    radial-gradient(ellipse at 62% 62%, var(--copper-tint-12), transparent 64%);
  filter: blur(26px);
}
.page-hero-mark {
  position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-90px, -2vw, 0px); top: 50%; transform: translateY(-46%);
  height: min(118%, 820px); width: auto;
  opacity: 0.06;
}
.page-hero-mark .ink-teal { fill: var(--teal-500); }
.page-hero-mark .ink-light { fill: var(--tx-1); }
.page-hero-inner { position: relative; z-index: 1; max-width: 900px; }
.page-hero-title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--sp-4) 0 var(--sp-5);
  max-width: 17ch;
}
.page-hero .lead { color: var(--tx-2); max-width: 62ch; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.page-hero-facts {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-1);
}
.page-hero-facts li { display: flex; flex-direction: column; gap: 0.3rem; max-width: 16rem; }
.phf-num { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem); color: var(--teal-300); font-weight: 700; letter-spacing: var(--tracking-tight); }
.phf-cap { font-size: var(--fs-sm); color: var(--tx-3); line-height: var(--lh-snug); }

/* --- Split grid (copy + panel) --------------------------------------------- */
.split-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-copy .lead { color: var(--tx-2); }
.split-copy p:not(.lead) { color: var(--tx-2); }
.split-copy p + p { margin-top: var(--sp-4); }
.split-panel { padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: var(--r-xl); }
.split-panel-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--teal-300);
  text-transform: uppercase; letter-spacing: var(--tracking-mono);
  margin-bottom: var(--sp-5);
}
.split-panel-note { margin-top: var(--sp-5); color: var(--tx-3); font-size: var(--fs-sm); }

/* --- Tick list -------------------------------------------------------------- */
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.tick-list li {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem;
  color: var(--tx-1); font-size: var(--fs-sm);
}
.tick-list li svg { width: 1.05rem; height: 1.05rem; color: var(--teal-400); margin-top: 0.12rem; }

/* --- Compare panels --------------------------------------------------------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-7); }
.compare-panel { padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: var(--r-xl); border: 1px solid var(--line-2); background: var(--bg-card); }
.compare-panel.is-good {
  border-color: var(--teal-700);
  background: radial-gradient(120% 80% at 50% 0%, var(--teal-tint-08), transparent 60%), var(--bg-card-hi);
  box-shadow: var(--shadow-teal);
}
.compare-tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--tx-3); margin-bottom: var(--sp-3);
}
.compare-panel.is-good .compare-tag { color: var(--teal-300); }
.compare-panel h3 { margin-bottom: var(--sp-5); }
.compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.compare-list li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; color: var(--tx-2); font-size: var(--fs-sm); }
.compare-list li svg { width: 1.05rem; height: 1.05rem; margin-top: 0.12rem; }
.compare-panel:not(.is-good) .compare-list li svg { color: var(--tx-4); }
.compare-panel.is-good .compare-list li { color: var(--tx-1); }
.compare-panel.is-good .compare-list li svg { color: var(--teal-400); }

/* --- Hero supporting copy + inline CTA -------------------------------------- */
.page-hero-sub { color: var(--tx-2); max-width: 62ch; margin-top: var(--sp-4); }

/* Hero intro key points (About) — a scannable icon + text list drawn from the
   intro copy, instead of a wall of paragraphs. */
.hero-points {
  list-style: none; margin: var(--sp-5) 0 var(--sp-7); padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-5);
  max-width: 840px;
}
.hero-points li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  color: var(--tx-2); font-size: var(--fs-sm); line-height: 1.45;
}
.hero-point-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--teal-tint-14); color: var(--teal-300);
  border: 1px solid var(--teal-tint-22);
}
.hero-point-ic svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .hero-points { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* ===== About hero: home-style two-column shape (copy left, glass card right) =====
   Reuses the home hero-dash (.hero-dash / .dash-* / .glass) verbatim; only the
   grid wrapper, the multi-line point rows, and the watermark tuck are new.
   Every selector is About-scoped so other page-heroes stay untouched. */

/* Two-column grid — mirrors the home .hero-grid (1.05fr / 0.95fr, centred, same gap).
   DOUBLE-class selector so it reliably beats .page-hero-inner{max-width:900px}. */
.page-hero-inner.page-hero-inner--split {
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}
.page-hero-copy { max-width: 640px; }
/* Descriptive paragraph moved out of the About card to sit below the CTAs. */
.page-hero-note {
  margin-top: var(--sp-5); max-width: 54ch;
  color: var(--tx-2); font-size: var(--fs-sm); line-height: var(--lh-body);
}

/* Card body = the two intro paragraphs (the 4 short points live in the left
   copy column; this glass card holds the descriptive copy). */
.hero-dash--about .dash-intro {
  margin: 0; color: var(--tx-2);
  font-size: var(--fs-sm); line-height: var(--lh-body);
}
.hero-dash--about .dash-intro + .dash-intro { margin-top: var(--sp-4); }

/* Keep the big "A" complete and on the right, but tuck its densest strokes
   behind / just past the card so the frosted glass stays clean. */
.page-hero--split .page-hero-mark { opacity: 0.05; right: clamp(-140px, -5vw, -40px); }

/* Stack to one column (matches the home hero's 1080px breakpoint); the card
   drops below the full copy stack and is capped like home's stacked .hero-dash. */
@media (max-width: 1080px) {
  .page-hero-inner.page-hero-inner--split { grid-template-columns: 1fr; gap: 2.5rem; }
  .page-hero-copy { max-width: none; }
  .hero-dash--about { max-width: 460px; }
}
.split-cta { margin-top: var(--sp-6); }

/* --- Two-column checklist (Why choose us) ---------------------------------- */
.checks-2 {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) clamp(1.5rem, 4vw, 3rem);
  max-width: 940px; margin: var(--sp-7) auto 0;
  padding-top: var(--sp-6); border-top: 1px solid var(--line-1);
}
.checks-2 li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; color: var(--tx-1); font-size: var(--fs-body); }
.checks-2 li svg { width: 1.15rem; height: 1.15rem; color: var(--teal-400); margin-top: 0.18rem; }

/* --- Testimonial quote cards ----------------------------------------------- */
.quotes-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-7); align-items: stretch; }
/* margin:0 kills the browser-default figure/blockquote margins (40px) that were
   crushing the quote into a narrow off-centre column. */
.quote-card { margin: 0; display: flex; flex-direction: column; padding: clamp(1.6rem, 2.6vw, 2.15rem); }
.quote-card .quote-mark { width: 2rem; height: 2rem; color: var(--teal-500); opacity: 0.8; margin-bottom: var(--sp-4); }
.quote-card blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.5; color: var(--tx-1);
}
.quote-card figcaption { margin-top: var(--sp-5); display: flex; align-items: center; gap: 0.8rem; }

/* --- Sub-page responsive ---------------------------------------------------- */
@media (max-width: 980px) {
  .quotes-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .split-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .compare { grid-template-columns: 1fr; }
  .page-hero-mark { opacity: 0.05; right: -20%; }
}
@media (max-width: 640px) {
  .checks-2 { grid-template-columns: 1fr; gap: var(--sp-3); }
}
@media (max-width: 560px) {
  .page-hero-facts { gap: var(--sp-5); }
  .page-hero-facts li { max-width: none; flex: 1 1 42%; }
}

/* =============================================================================
   VIRTUAL CFO PAGE — components
   ============================================================================= */
.compare-desc { color: var(--tx-2); font-size: var(--fs-sm); line-height: var(--lh-body); margin-top: var(--sp-2); }
.compare-panel h3 { margin-bottom: var(--sp-2); }
.compare-panel.is-good h3 { color: var(--teal-300); }

/* "Isn't this what my accountant does?" note */
.what-note { max-width: 760px; margin: var(--sp-8) auto 0; text-align: center; }
.what-q { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--teal-300); margin-bottom: var(--sp-4); }
.what-a { color: var(--tx-2); line-height: var(--lh-body); }
.what-a strong { color: var(--tx-1); }

/* Feature-card CTA tile (last cell in a card grid) */
.card-cta-tile {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-3);
  background: radial-gradient(120% 100% at 0% 0%, var(--teal-tint-14), transparent 60%), var(--bg-card-hi);
  border-color: var(--teal-700);
}
.card-cta-tile h3 { margin: 0; }
.card-cta-tile p { color: var(--tx-2); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

/* ---- Dashboard preview (the signature visual section) --------------------- */
.dashboard { position: relative; overflow: hidden; }
.dashboard-glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 20%; transform: translateX(-50%);
  width: min(1000px, 92vw); height: min(640px, 70vh);
  background: radial-gradient(ellipse at 50% 40%, var(--teal-tint-14), transparent 62%);
  filter: blur(30px);
}
.dashboard .container { position: relative; z-index: 1; }
.dash-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-7); }
.dash-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: clamp(1.35rem, 2.2vw, 1.7rem);
  transition: transform var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.dash-card:hover { transform: translateY(-4px); border-color: var(--teal-tint-22); box-shadow: var(--shadow-lift); }
.dash-card-top { display: flex; align-items: center; gap: 0.7rem; }
.dash-card-top .icon-chip { margin: 0; }
.dash-label { font-weight: 600; color: var(--tx-1); font-size: var(--fs-sm); letter-spacing: 0.01em; }
.dash-viz { min-height: 56px; display: flex; align-items: flex-end; gap: 0.8rem; }
.dash-stat { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; color: var(--tx-1); letter-spacing: var(--tracking-mono); }
.dash-stat.pos { color: var(--teal-300); }
.dash-sub { align-self: flex-end; color: var(--tx-3); font-size: var(--fs-xs); }
.dash-q { font-family: var(--font-display); font-style: italic; color: var(--tx-2); font-size: var(--fs-sm); line-height: 1.4; margin-top: auto; }
/* mini bar chart */
.dash-bars { display: flex; align-items: flex-end; gap: 5px; height: 48px; }
.dash-bars i { width: 10px; height: var(--h, 50%); border-radius: 3px; background: linear-gradient(180deg, var(--teal-300), var(--teal-700)); }
.dash-bars i.dim { background: var(--line-3); }
.dash-bars.tall { height: 52px; }
/* sparkline */
.dash-spark { width: 96px; height: 40px; }
.dash-spark polyline { stroke: var(--teal-400); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--teal-glow)); }
/* tax ring */
.dash-ring { width: 46px; height: 46px; transform: rotate(-90deg); }
.dash-ring .ring-track { fill: none; stroke: var(--line-2); stroke-width: 4; }
.dash-ring .ring-fill { fill: none; stroke: var(--teal-400); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--p) calc(100 - var(--p)); }

.dash-underneath { max-width: 760px; margin: var(--sp-7) auto 0; text-align: center; color: var(--tx-2); line-height: var(--lh-body); }

/* Monthly CFO cycle */
.cycle { margin-top: var(--sp-8); padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--bg-card); }
.cycle-head { text-align: center; margin-bottom: var(--sp-5); }
.cycle-head h3 { margin-top: var(--sp-3); }
.cycle-list { margin-top: 0; border-top: 0; padding-top: 0; }

/* Case study */
.case-study { padding: clamp(2rem, 5vw, 3.5rem); text-align: center; transform-style: preserve-3d; }
.case-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--teal-300); }
.case-tag svg { width: 1rem; height: 1rem; }
.case-h { margin: var(--sp-4) 0 var(--sp-5); }
.case-lead { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.5; color: var(--tx-1); max-width: 60ch; margin-inline: auto; }
.case-body { color: var(--tx-2); line-height: var(--lh-body); max-width: 62ch; margin: var(--sp-5) auto 0; }

/* ===========================================================================
 * STORYTELLER · PRESSURE DIAL (Virtual CFO #case) — pinned before → after.
 * A two-column stage pins for 140% of the viewport: copy left, a big
 * semicircular gauge right. Scroll sweeps the needle from a warm "pressure"
 * zone into the teal "control" zone (the h2's own two words are the only dial
 * labels) while the BEFORE paragraph hands off to the AFTER paragraph inside
 * the same grid cell and the h2 accent "control." ignites as the needle lands.
 * Deterministic apply(progress) in initCaseGauge (scrolly.js).
 *
 * The BASE rules below are the FINISHED story, static: tag → h2 → BEFORE
 * paragraph → AFTER paragraph stacked, dial parked in "control". That is what
 * mobile (max-width:900px), .reduced-motion and a no-JS page all show.
 * initCaseGauge adds .is-live to the section on desktop + motion, and every
 * pre-state (shared grid cell, dim accent, copper "pressure", warm glow, needle
 * at the pressure pole, empty trail) hangs off .case--dial.is-live.
 * The motes canvas lives INSIDE the pinned stage (bgField sizes to its parent
 * on window-resize only — it must be the 100vh stage, not the growing section).
 * Append-only; everything here is scoped under .case--dial.
 * ======================================================================== */
.case--dial .case-stage { position: relative; }
.case--dial .case-stage > .container { position: relative; z-index: 1; }   /* above the z-0 motes canvas */
.case--dial .case-stage-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
.case--dial .case-copy { text-align: left; }
.case--dial .case-h { font-size: clamp(1.9rem, 1.15rem + 2.3vw, 2.9rem); line-height: 1.1; margin: var(--sp-4) 0 var(--sp-5); max-width: 18ch; }
.case--dial .case-h .accent { display: inline-block; }                        /* GSAP scrubs opacity + text-shadow */
.case-copy-stack > p { margin: 0; }
.case--dial .case-lead { font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem); max-width: 52ch; margin-inline: 0; }
.case--dial .case-body { font-size: var(--fs-lead); max-width: 56ch; margin: var(--sp-5) 0 0; }

/* the dial card (static = parked in "control") */
.case-dial { position: relative; width: 100%; max-width: 420px; margin-inline: auto; padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.4rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 1.6rem); overflow: hidden; }
.case-dial-glow { position: absolute; inset: -20%; pointer-events: none; }
.case-dial-glow--warm { background: radial-gradient(ellipse at 26% 80%, var(--copper-tint-22), transparent 62%); opacity: 0; visibility: hidden; }
.case-dial-glow--cool { background: radial-gradient(ellipse at 74% 80%, var(--teal-tint-22), transparent 62%); }
.case-gauge { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.case-track { fill: none; stroke: var(--line-2); stroke-width: 14; stroke-linecap: round; }
.case-ticks { fill: none; stroke: var(--line-3); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1.2 18.8; }   /* unlabelled tick dots — no numbers */
.case-zone { fill: none; stroke-width: 14; stroke-linecap: round; }
.case-zone--pressure { stroke: var(--warn); opacity: 0.25; }
.case-zone--control { stroke: var(--teal-500); opacity: 0.9; }
.case-trail { fill: none; stroke: url(#case-trail-grad); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px var(--teal-glow)); }
.case-zone-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; }
.case-zone-label--pressure { fill: var(--tx-3); }
.case-zone-label--control { fill: var(--teal-300); }
/* Static needle parked at +78°. Scoped to :not(.is-live) on purpose: a CSS
   transform (even `none`) would override GSAP's SVG transform attribute. */
.case--dial:not(.is-live) .case-needle { transform: rotate(78deg); transform-box: view-box; transform-origin: 200px 210px; }
.case-needle-line { stroke: var(--teal-300); stroke-width: 5; stroke-linecap: round; }
.case-needle-hub { fill: var(--bg-card-hi); stroke: var(--line-3); stroke-width: 2; }
.case-needle-pin { fill: var(--tx-1); }

/* live pre-states — .is-live is added by initCaseGauge (desktop + motion only) */
.case--dial.is-live .case-copy-stack { display: grid; }
.case--dial.is-live .case-copy-stack > p { grid-area: 1 / 1; margin: 0; will-change: transform, opacity; }
.case--dial.is-live .case-word { color: var(--copper-400); }
.case--dial.is-live .case-h .accent { opacity: 0.42; }
.case--dial.is-live .case-dial-glow--warm { opacity: 1; visibility: visible; }
.case--dial.is-live .case-dial-glow--cool { opacity: 0; }
.case--dial.is-live .case-zone--pressure { opacity: 0.9; }
.case--dial.is-live .case-zone--control { opacity: 0.25; }
.case--dial.is-live .case-zone-label--pressure { fill: var(--warn); }
.case--dial.is-live .case-zone-label--control { fill: var(--tx-3); }
.case--dial.is-live .case-trail { stroke-dashoffset: 1; }
.case--dial.is-live .case-needle { will-change: transform; }
.case--dial.is-live .case-needle-line { stroke: var(--warn); }

/* desktop: two columns; when live, the 100vh pinned stage (section padding
   dropped so the pin engages exactly at the stage top — same fix as the About
   values deck, .deck--values { padding-block: 0 }) */
@media (min-width: 901px) {
  .case--dial .case-stage-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2rem, 5vw, 5rem); }
  .case-dial { max-width: min(46vw, 62vh, 560px); margin-inline: 0; justify-self: end; }
  .case--dial.is-live { padding-block: 0; }
  .case--dial.is-live .case-stage {
    min-height: 100vh; display: grid; align-items: center;
    padding: clamp(6rem, 11vh, 7.5rem) 0 clamp(2rem, 5vh, 3.5rem);   /* top clears the fixed header */
  }
}

/* static fallback · mobile: stacked, both paragraphs visible, dial parked in
   "control", no pin — and beat any stale inline GSAP state */
@media (max-width: 900px) {
  .case--dial, .case--dial.is-live { padding-block: var(--section-y); }
  .case--dial .case-stage { min-height: 0; display: block; padding: 0; }
  .case--dial .case-h { max-width: none; }
  .case--dial .case-copy-stack { display: block; }
  .case--dial .case-copy-stack > p { grid-area: auto; opacity: 1 !important; transform: none !important; visibility: visible !important; pointer-events: auto !important; }
  .case--dial .case-body { margin-top: var(--sp-5) !important; }
  .case--dial .case-word { color: inherit !important; }
  .case--dial .case-h .accent { opacity: 1 !important; text-shadow: none !important; }
  .case--dial .case-dial-glow--warm { opacity: 0 !important; visibility: hidden !important; }
  .case--dial .case-dial-glow--cool { opacity: 1 !important; visibility: visible !important; }
  .case--dial .case-zone--pressure { opacity: 0.25 !important; }
  .case--dial .case-zone--control { opacity: 0.9 !important; }
  .case--dial .case-zone-label--pressure { fill: var(--tx-3) !important; }
  .case--dial .case-zone-label--control { fill: var(--teal-300) !important; }
  .case--dial .case-trail { stroke-dashoffset: 0 !important; }
  .case--dial .case-needle { transform: rotate(78deg) !important; transform-box: view-box; transform-origin: 200px 210px; }
  .case--dial .case-needle-line { stroke: var(--teal-300) !important; }
}

/* static fallback · reduced motion (any width): same finished state, keeps the
   two-column layout on desktop but never pins / never goes 100vh */
.reduced-motion .case--dial, .reduced-motion .case--dial.is-live { padding-block: var(--section-y); }
.reduced-motion .case--dial .case-stage { min-height: 0; display: block; padding: 0; }
.reduced-motion .case--dial .case-copy-stack { display: block; }
.reduced-motion .case--dial .case-copy-stack > p { grid-area: auto; opacity: 1 !important; transform: none !important; visibility: visible !important; pointer-events: auto !important; }
.reduced-motion .case--dial .case-body { margin-top: var(--sp-5) !important; }
.reduced-motion .case--dial .case-word { color: inherit !important; }
.reduced-motion .case--dial .case-h .accent { opacity: 1 !important; text-shadow: none !important; }
.reduced-motion .case--dial .case-dial-glow--warm { opacity: 0 !important; visibility: hidden !important; }
.reduced-motion .case--dial .case-dial-glow--cool { opacity: 1 !important; visibility: visible !important; }
.reduced-motion .case--dial .case-zone--pressure { opacity: 0.25 !important; }
.reduced-motion .case--dial .case-zone--control { opacity: 0.9 !important; }
.reduced-motion .case--dial .case-zone-label--pressure { fill: var(--tx-3) !important; }
.reduced-motion .case--dial .case-zone-label--control { fill: var(--teal-300) !important; }
.reduced-motion .case--dial .case-trail { stroke-dashoffset: 0 !important; filter: none; }
.reduced-motion .case--dial .case-needle { transform: rotate(78deg) !important; transform-box: view-box; transform-origin: 200px 210px; }
.reduced-motion .case--dial .case-needle-line { stroke: var(--teal-300) !important; }

/* ---- Virtual CFO responsive ------------------------------------------------ */
@media (max-width: 980px) {
  .dash-preview { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .dash-preview { grid-template-columns: 1fr; }
}

/* =============================================================================
   LEGAL / PROSE PAGES (Terms, Privacy)
   ============================================================================= */
.page-hero-slim { padding-block: clamp(7rem, 5rem + 6vw, 9.5rem) var(--sp-6); }
.page-hero-slim .page-hero-title { max-width: none; margin-bottom: var(--sp-4); }
.legal-updated { margin: 0 0 var(--sp-5); color: var(--tx-3); font-size: var(--fs-sm); }
.legal-placeholder { color: var(--copper-400); font-style: italic; }
.legal { padding-top: 0; }
.legal-body { max-width: var(--maxw-prose); margin-inline: auto; }
.legal-body h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  margin: var(--sp-8) 0 var(--sp-4); padding-top: var(--sp-5);
  border-top: 1px solid var(--line-1);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body p { color: var(--tx-2); line-height: var(--lh-body); margin-bottom: var(--sp-4); }
.legal-body a:not(.btn) { color: var(--teal-300); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:not(.btn):hover { color: var(--teal-400); }
.legal-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); }
.legal-list li { position: relative; padding-left: 1.4rem; color: var(--tx-2); line-height: var(--lh-body); }
.legal-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 2px; background: var(--teal-500); }
.legal-contact { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; gap: var(--sp-3); }
.legal-contact li { display: flex; align-items: center; gap: 0.6rem; color: var(--tx-1); }
.legal-contact li svg { width: 1.1rem; height: 1.1rem; color: var(--teal-400); flex: 0 0 auto; }
.legal-cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

/* =============================================================================
   ACCOUNTING & BOOKKEEPING PAGE
   ============================================================================= */
.panels-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-7); }
.growth-note, .how-note { max-width: 760px; margin: var(--sp-7) auto 0; text-align: center; color: var(--tx-2); line-height: var(--lh-body); }
.growth-note a, .how-note a { color: var(--teal-300); text-decoration: underline; text-underline-offset: 3px; }
.growth-note a:hover, .how-note a:hover { color: var(--teal-400); }
/* FAQ answer package list */
.faq-packages { list-style: none; margin: 0 1.3rem 1.15rem; padding: 0; display: grid; gap: var(--sp-2); }
.faq-packages li { position: relative; padding-left: 1.2rem; color: var(--tx-2); font-size: var(--fs-sm); line-height: 1.55; }
.faq-packages li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 2px; background: var(--teal-500); }
.faq-packages strong { color: var(--tx-1); }

/* =============================================================================
   BOOK A MEETING PAGE
   ============================================================================= */
.book-cal {
  text-align: center; padding: clamp(2rem, 4vw, 3rem); margin: var(--sp-7) auto 0;
  max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  transform-style: preserve-3d;
}
.book-cal-icon { margin: 0; }
.book-cal h3 { margin: 0; }
.book-cal > p { color: var(--tx-2); max-width: 46ch; margin: 0; }
.book-cal .btn { margin-top: var(--sp-2); }
/* the panel holding Luke's inline Calendly scheduler — wide enough that the
   iframe clears ~1000px, where Calendly switches to its full layout (details |
   calendar | times) instead of leaving an empty times column on the right */
.book-cal--embed { max-width: 1100px; }
.book-calendly { width: 100%; min-width: 280px; height: 720px; border-radius: var(--r-md); overflow: hidden; }
.book-cal-alt { font-size: var(--fs-sm); color: var(--teal-300); }
.book-cal-alt:hover { color: var(--teal-400); text-decoration: underline; }
@media (max-width: 640px) {
  .book-cal--embed { padding: var(--sp-6) var(--sp-4); }   /* give the scheduler ~320px on phones */
  .book-calendly { height: 900px; }                          /* details + calendar stack */
}
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); }
.contact-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-card .icon-chip { margin-bottom: var(--sp-2); }
.contact-card h3 { margin: 0; }
.contact-card p { color: var(--tx-2); font-size: var(--fs-sm); }
.contact-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: var(--sp-2); color: var(--teal-300); font-weight: 600; font-size: var(--fs-sm); }
.contact-link svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.contact-link:hover { color: var(--teal-400); }

/* ---------------------------------------------------------------------------
   CONTACT FORM — the "Send a message" component (used by the landing page).
   Markup: form.lp-form[data-contact-form], driven by contactForm.js; delivery
   goes through the OZee Contact Form plugin (allure_contact_endpoint()). Kept
   here, outside landing.css, so any page can drop the form in; the landing adds
   its own card skin + shine ring in landing.css (.lp .lp-form). Scoped under
   .lp-form so the selectors keep the weight they had under .lp.
   --------------------------------------------------------------------------- */
.lp-form { position: relative; }
.lp-form .lp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.lp-form .lp-field { display: flex; flex-direction: column; gap: 0.45rem; }
.lp-form .lp-field-full { grid-column: 1 / -1; }
.lp-form .lp-field-label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-3); }
.lp-form .lp-field-label em { color: var(--teal-300); font-style: normal; }
.lp-form .lp-field input, .lp-form .lp-field textarea {
  font: inherit; color: var(--tx-1); width: 100%;
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 0.8rem 0.95rem; transition: border-color 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart);
}
.lp-form .lp-field textarea { resize: vertical; min-height: 110px; }
.lp-form .lp-field input::placeholder, .lp-form .lp-field textarea::placeholder { color: var(--tx-4); }
.lp-form .lp-field input:focus, .lp-form .lp-field textarea:focus { outline: none; border-color: var(--teal-400); box-shadow: 0 0 0 3px var(--teal-tint-14); }
.lp-form .lp-field.is-invalid input, .lp-form .lp-field.is-invalid textarea { border-color: #e0685f; }
.lp-form .lp-field-error { font-size: var(--fs-xs); color: #e88a82; min-height: 1em; }
.lp-form .lp-form-submit { margin-top: var(--sp-5); width: 100%; justify-content: center; }
/* honeypot: off-screen for people, still in the form for bots */
.lp-form .lp-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* inline status line under the button — the form stays visible:
   error  = delivery failed, with Luke's direct contact details
   mailto = no endpoint, the message was handed to the visitor's mail app */
.lp-form .lp-form-msg {
  margin: var(--sp-3) 0 0; padding: 0.7rem 0.9rem; border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.5; text-align: center;
}
.lp-form .lp-form-msg[hidden] { display: none; }
.lp-form .lp-form-msg[data-kind="error"]  { border: 1px solid rgba(224, 104, 95, 0.35); background: rgba(224, 104, 95, 0.08); color: #f0a39c; }
.lp-form .lp-form-msg[data-kind="mailto"] { border: 1px solid var(--teal-tint-22); background: var(--teal-tint-08); color: var(--teal-300); }
.lp-form .lp-form-note { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--tx-4); text-align: center; }
.lp-form .lp-form-success {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; gap: 0.35rem;
  padding: var(--sp-6); background: var(--bg-card); border-radius: inherit;
  animation: lpFormIn 0.5s var(--ease-out-quart) both;
}
.lp-form .lp-form-success[hidden] { display: none; }
.lp-form .lp-form-success:focus { outline: none; }   /* focused only so screen readers announce it */
@keyframes lpFormIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.lp-form .lp-form-success h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--tx-1); }
.lp-form .lp-form-success p { color: var(--tx-2); font-size: var(--fs-sm); }
.lp-form .lp-form-check svg { width: 58px; height: 58px; margin: 0 auto var(--sp-2); display: block; }
.lp-form .lp-form-check circle { fill: none; stroke: var(--teal-tint-22); stroke-width: 2; }
.lp-form .lp-form-check path { fill: none; stroke: var(--teal-300); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .lp-form .lp-form-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lp-form .lp-form-success { animation: none; } }
.reduced-motion .lp-form .lp-form-success { animation: none; }

@media (max-width: 900px) { .panels-2 { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .contact-cards { grid-template-columns: 1fr; } }

/* ===========================================================================
 * THE STORY — pinned scroll timeline (About). A huge fixed title, a left year
 * axis with a ring marker that travels down as you scroll, and a right-hand
 * milestone (dots · label · description · stats) that swaps per step. Reference:
 * nexola.framer.website/about "The Story." — rebuilt on our tokens + GSAP.
 * ======================================================================== */
.story {
  position: relative;
  background: #0A0F14;
  color: var(--tx-1);
  overflow: hidden;
}
.story-pin { min-height: 100vh; display: flex; }
.story-inner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(120px, 14vw) minmax(0, 1fr) minmax(320px, 40%);
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(6rem, 13vh, 9rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 8vh, 6rem);
  align-content: stretch;
}
.story-title {
  grid-column: 2 / 4; grid-row: 1;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--tx-1);
}

/* The Allure "A" logo mark (logo-a.svg) filling the empty middle column, below
   the title and between the year axis and the milestone content. */
.story-bigA {
  grid-column: 2; grid-row: 2;
  min-width: 0; overflow: hidden;
  z-index: 0; pointer-events: none; user-select: none;
  padding: clamp(0.5rem, 2vh, 2rem) clamp(0.5rem, 1.5vw, 1.5rem);
}
.story-bigA img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;                  /* fill the cell, preserve the logo aspect */
  opacity: 0.9;
  filter: drop-shadow(0 0 40px rgba(20, 184, 166, 0.22));
}
.story-content { z-index: 1; }

/* --- left year axis + ring marker --- */
.story-years {
  grid-column: 1; grid-row: 1 / 3;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end; text-align: right;
  padding: 0.4rem 1.4rem 2.4rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}
.story-year {
  font-family: var(--font-body); font-weight: 700; line-height: 1;
  font-size: clamp(0.95rem, 1.05vw, 1.15rem);
  color: rgba(255, 255, 255, 0.26);
  letter-spacing: 0.01em;
  transition: color 0.45s var(--ease-out-quart), font-size 0.45s var(--ease-out-quart);
}
.story-year.is-active { color: var(--tx-1); font-size: clamp(1.3rem, 1.9vw, 1.9rem); }
.story-marker {
  position: absolute; top: 0;
  right: calc(clamp(40px, 3.4vw, 56px) / -2);
  width: clamp(40px, 3.4vw, 56px); height: clamp(40px, 3.4vw, 56px);
  border: 2px solid var(--teal-400); border-radius: 50%;
  box-shadow: 0 0 18px -2px var(--teal-glow), 0 0 0 6px rgba(45, 196, 174, 0.06);
  pointer-events: none; will-change: transform;
}

/* --- right content --- */
.story-content {
  grid-column: 3; grid-row: 2;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.1rem, 2.2vw, 2rem);
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  min-height: 0;
}
.story-dots { display: flex; gap: 0.55rem; align-items: center; }
.story-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.4s var(--ease-out-quart), transform 0.4s var(--ease-out-quart), box-shadow 0.4s;
}
.story-dot.is-active { background: var(--teal-400); transform: scale(1.3); box-shadow: 0 0 10px -1px var(--teal-glow); }

.story-steps { position: relative; display: grid; }
.story-step {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: clamp(0.9rem, 1.8vw, 1.5rem);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out-quart), transform 0.55s var(--ease-out-quart), visibility 0.55s;
  pointer-events: none;
}
.story-step.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.story-step-label { font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.25rem); color: var(--tx-1); }
.story-step-desc {
  margin: 0; font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.35rem, 2.3vw, 2.05rem); line-height: 1.28; letter-spacing: -0.01em;
  color: var(--tx-1); max-width: 24ch;
}
.story-stats { margin: clamp(1.4rem, 4vh, 2.8rem) 0 0; display: grid; gap: 0.6rem; }
.story-stat { display: flex; align-items: baseline; gap: 0.9rem; }
.story-stat dt { color: var(--tx-3); font-size: var(--fs-sm); min-width: 5.5rem; }
.story-stat dd { margin: 0; font-weight: 700; color: var(--tx-1); font-size: clamp(1rem, 1.3vw, 1.2rem); }

/* --- static fallback: mobile + reduced motion (no pin, all milestones shown) --- */
@media (max-width: 900px) {
  .story-pin { min-height: 0; display: block; }
  .story-inner { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 2.2rem; min-height: 0; padding-block: var(--section-y); }
  .story-title { grid-column: 1; }
  .story-years, .story-dots, .story-bigA { display: none; }
  .story-content { grid-column: 1; border-left: 0; padding-left: 0; justify-content: flex-start; }
  .story-steps { display: grid; gap: 2.2rem; }
  .story-step {
    grid-area: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5rem;
  }
  .story-step::before { content: attr(data-story-yr); display: block; color: var(--teal-300); font-weight: 700; margin-bottom: 0.5rem; letter-spacing: 0.02em; }
}
.reduced-motion .story-pin { min-height: 0; display: block; }
.reduced-motion .story-inner { min-height: 0; }
.reduced-motion .story-step { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

/* ===========================================================================
 * STORYTELLER · FOUNDATION DECK (Accounting & Bookkeeping) — sticky stacking
 * cards. The stage pins; scroll "deals" 4 cards up into a receding pile. Left
 * rail = mono counter + lit segment labels. Transforms are a pure function of
 * ScrollTrigger progress (see initFoundationDeck). Static stacked list on
 * mobile / reduced motion.
 * ======================================================================== */
.deck { position: relative; background: #0A0F14; overflow: hidden; }
.deck-pin { min-height: 100vh; display: flex; align-items: center; }
.deck-grid {
  display: grid; width: 100%;
  grid-template-columns: minmax(230px, 30%) 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.deck-aside { position: relative; z-index: 2; }
.deck-title { margin: var(--sp-4) 0 var(--sp-6); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.1; }
.deck-progress { display: grid; gap: var(--sp-4); }
.deck-count { font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: var(--tx-1); font-weight: 700; letter-spacing: 0.02em; }
.deck-count-total { color: var(--tx-3); font-weight: 500; }
.deck-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.deck-seg {
  position: relative; padding-left: 1.8rem; color: var(--tx-3);
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.02em;
  transition: color 0.4s var(--ease-out-quart);
}
.deck-seg::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 1rem; height: 2px; border-radius: 2px; background: var(--line-3);
  transition: background 0.4s var(--ease-out-quart), width 0.4s var(--ease-out-quart);
}
.deck-seg.is-active { color: var(--tx-1); }
.deck-seg.is-active::before { background: var(--teal-400); width: 1.5rem; box-shadow: 0 0 8px -1px var(--teal-glow); }

.deck-stage { position: relative; z-index: 1; min-height: clamp(460px, 66vh, 640px); }
.deck-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: linear-gradient(180deg, var(--bg-card-hi), var(--bg-card));
  border: 1px solid var(--line-2); border-top: 2px solid var(--teal-500);
  border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.75);
  overflow: hidden; will-change: transform;
}
.deck-card-no { position: absolute; top: clamp(1.1rem, 2.2vw, 1.8rem); right: clamp(1.2rem, 2.4vw, 2rem); color: var(--tx-4); font-size: var(--fs-sm); font-weight: 700; }
.deck-card .icon-chip { margin-bottom: var(--sp-2); }
.deck-card-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--teal-300); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); }
.deck-card-h { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.8rem); line-height: 1.14; }
.deck-card-p { margin: 0; color: var(--tx-2); line-height: var(--lh-body); }
.deck-card .tick-list { margin-top: auto; }
/* Values variant — cards carry just icon + title + copy (no tick-list), so a
   tighter stage with vertically-centred content avoids a big empty lower half. */
.deck--values .deck-stage { min-height: clamp(360px, 54vh, 500px); }
.deck--values .deck-card { justify-content: center; gap: var(--sp-4); }
.deck--values .deck-card-h { font-size: clamp(1.4rem, 2.3vw, 2rem); }
.deck--values .deck-card-p { max-width: 48ch; }

/* Topographic "map" contour texture behind the values cards (client: cards too
   plain — add a map-type background). Two faint teal elevation-ring systems from
   opposite corners read as contour lines; concentrated at the top-right (behind
   the index number) and radially masked so it fades before the copy, keeping the
   text crisp. Scoped to the values deck only — the Accounting deck cards carry
   photos and are untouched. Content is lifted above the z-0 pattern; the card's
   own overflow:hidden clips it to the rounded corners. */
.deck--values .deck-card > .icon-chip,
.deck--values .deck-card > .deck-card-h,
.deck--values .deck-card > .deck-card-p { position: relative; z-index: 1; }
.deck--values .deck-card > .deck-card-no { z-index: 1; }
.deck--values .deck-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-radial-gradient(ellipse 132% 100% at 87% 12%, rgba(20, 184, 166, 0.075) 0 1.4px, transparent 1.4px 30px),
    repeating-radial-gradient(ellipse 150% 122% at 8% 96%, rgba(20, 184, 166, 0.05) 0 1.2px, transparent 1.2px 42px);
  -webkit-mask-image: radial-gradient(155% 135% at 88% 12%, #000 6%, rgba(0, 0, 0, 0.5) 42%, transparent 84%);
          mask-image: radial-gradient(155% 135% at 88% 12%, #000 6%, rgba(0, 0, 0, 0.5) 42%, transparent 84%);
}

/* static fallback: mobile + reduced motion (no pin, cards flow as a plain stack) */
@media (max-width: 900px) {
  .deck-pin { min-height: 0; display: block; padding-block: var(--section-y); }
  .deck-grid { grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
  .deck-progress { display: none; }
  .deck-stage { min-height: 0; display: grid; gap: var(--sp-5); }
  .deck-card { position: static; inset: auto; }
}
.reduced-motion .deck-pin { min-height: 0; display: block; }
.reduced-motion .deck-stage { min-height: 0; display: grid; gap: var(--sp-5); }
.reduced-motion .deck-card { position: static; inset: auto; }

/* ===========================================================================
 * STORYTELLER · vCFO FILMSTRIP (Virtual CFO) — a horizontal pinned "film".
 * The stage pins; scroll translates a track of 6 chapter panels past a gate,
 * spotlighting the centred panel (scale/opacity/blur) with a foreground HUD
 * (mono counter + swapping label + tick rail). Deterministic apply(progress)
 * in initVcfoStory. Static vertical stack on mobile / reduced motion.
 * ======================================================================== */
.vstory { position: relative; background: #0A0F14; overflow: hidden; }
.vstory-stage { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.vstory-track {
  --vs-pw: min(1040px, 82vw);
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: calc((100vw - var(--vs-pw)) / 2); will-change: transform;
}
.vstory-panel {
  flex: 0 0 var(--vs-pw); min-height: min(72vh, 620px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center;
  background: linear-gradient(180deg, var(--bg-card-hi), var(--bg-card));
  border: 1px solid var(--line-1); border-radius: var(--r-xl);
  padding: clamp(1.8rem, 3.5vw, 3rem); position: relative; overflow: hidden;
  will-change: transform, opacity, filter;
}
.vstory-panel.is-current { border-color: var(--teal-500); box-shadow: 0 0 0 1px var(--teal-700) inset, 0 30px 70px -34px var(--teal-glow); }
.vstory-panel-copy { display: flex; flex-direction: column; gap: var(--sp-4); }
.vstory-h { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.12; }
.vstory-lead { margin: 0; color: var(--tx-2); font-size: var(--fs-lead); line-height: var(--lh-body); }
.vstory-note { margin: 0; color: var(--tx-2); line-height: var(--lh-body); }
.vstory-note strong { color: var(--tx-1); }
.vstory-panel-media { position: relative; }
.vs-num { position: absolute; top: -0.5rem; right: 0; font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; color: var(--teal-300); opacity: 0.16; line-height: 1; pointer-events: none; }
.vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.vs-list li { color: var(--tx-2); line-height: 1.45; font-size: var(--fs-sm); }
.vs-list strong { color: var(--tx-1); font-weight: 700; }
.vs-chips, .vs-cycle { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vs-chips li, .vs-cycle li { position: relative; padding-left: 1.5rem; color: var(--tx-2); font-size: var(--fs-sm); line-height: 1.4; }
.vs-chips li::before, .vs-cycle li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 2px; background: var(--teal-500); }
.vs-cycle { grid-template-columns: 1fr 1fr; gap: 0.6rem 1.2rem; }
.vs-compare { display: grid; gap: var(--sp-3); }
.vs-compare-card { border: 1px solid var(--line-2); border-radius: var(--r-lg, 14px); padding: var(--sp-4); }
.vs-compare-card.is-good { border-color: var(--teal-700); background: var(--teal-tint-08); }
.vs-compare-tag { display: block; font-weight: 700; color: var(--tx-1); font-size: var(--fs-sm); margin-bottom: 0.4rem; }
.vs-compare-card.is-good .vs-compare-tag { color: var(--teal-300); }
.vs-compare-card p { margin: 0; color: var(--tx-2); font-size: var(--fs-sm); line-height: 1.45; }
.vstory-panel--end { grid-template-columns: 1fr; place-items: center; text-align: center; }
.vstory-end-copy { align-items: center; max-width: 42ch; }

/* pinned foreground HUD */
.vstory-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.vstory-eyebrow { position: absolute; top: clamp(1.5rem, 4vh, 3rem); left: clamp(1.5rem, 5vw, 5rem); }
.vstory-count { position: absolute; top: clamp(1.3rem, 3.6vh, 2.6rem); right: clamp(1.5rem, 5vw, 5rem); margin: 0; font-family: var(--font-mono); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; }
.vs-count-now { color: var(--tx-1); }
.vs-count-total { color: var(--tx-3); }
.vstory-hud-label { position: absolute; left: 50%; bottom: clamp(3.2rem, 8vh, 5.2rem); transform: translateX(-50%); margin: 0; color: var(--tx-2); font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.vstory-rail { position: absolute; left: clamp(1.5rem, 5vw, 5rem); right: clamp(1.5rem, 5vw, 5rem); bottom: clamp(1.6rem, 4vh, 3rem); height: 2px; background: var(--line-2); display: flex; justify-content: space-between; align-items: center; }
.vstory-rail-fill { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--teal-400); transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 0 8px -1px var(--teal-glow); }
.vstory-tick { width: 7px; height: 7px; border-radius: 50%; background: var(--line-3); transition: background 0.3s, box-shadow 0.3s; }
.vstory-tick.is-active { background: var(--teal-400); box-shadow: 0 0 8px -1px var(--teal-glow); }

/* static fallback: mobile + reduced motion (no pin, panels stack vertically) */
@media (max-width: 900px) {
  .vstory-stage { min-height: 0; display: block; overflow: visible; padding-block: var(--section-y); }
  .vstory-hud { display: none; }
  .vstory-track { --vs-pw: 100%; display: grid; gap: var(--sp-5); padding-inline: 0; transform: none !important; }
  .vstory-panel { flex: none; min-height: 0; grid-template-columns: 1fr; gap: var(--sp-4); opacity: 1 !important; filter: none !important; transform: none !important; }
  .vs-cycle { grid-template-columns: 1fr 1fr; }
}
.reduced-motion .vstory-stage { min-height: 0; display: block; overflow: visible; }
.reduced-motion .vstory-hud { display: none; }
.reduced-motion .vstory-track { display: grid; gap: var(--sp-5); padding-inline: 0; transform: none !important; }
.reduced-motion .vstory-panel { flex: none; min-height: 0; opacity: 1 !important; filter: none !important; transform: none !important; }

/* ===========================================================================
 * STORYTELLER · WHAT HAPPENS NEXT (Book) — kinetic step reveal. A pinned single
 * centred column: one giant line writes on word-by-word (masked translate-up)
 * and lifts off as the next arrives; a ghost numeral + segmented rail track
 * progress. Deterministic apply(progress) in initNextSteps. Static stacked list
 * on mobile / reduced motion.
 * ======================================================================== */
.next { position: relative; background: #0A0F14; overflow: hidden; }
.next::before { content: ""; position: absolute; left: 50%; top: -12%; width: 60vw; height: 60vh; transform: translateX(-50%); background: radial-gradient(circle, var(--teal-glow) 0%, transparent 60%); opacity: 0.45; pointer-events: none; }
.next-pin { position: relative; min-height: 100vh; display: flex; align-items: center; }
.next-inner { position: relative; width: 100%; }
.next-head { position: absolute; top: clamp(1.5rem, 5vh, 3rem); left: var(--gutter); z-index: 2; }
.next-title { margin: var(--sp-3) 0 0; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--tx-1); }
.next-ghost {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-weight: 800; font-size: clamp(14rem, 34vw, 40rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.05); pointer-events: none; z-index: 0; user-select: none;
}
.next-steps { position: relative; z-index: 1; display: grid; place-items: center; min-height: 46vh; text-align: center; }
.nx-step { grid-area: 1 / 1; width: 100%; max-width: min(780px, 90vw); margin-inline: auto; }
.nx-line { margin: 0; font-family: var(--font-body); font-weight: 800; font-size: clamp(1.8rem, 4vw, 3.3rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--tx-1); text-wrap: balance; }
.nx-w { display: inline-block; overflow: hidden; vertical-align: top; }
.nx-wi { display: inline-block; font-style: normal; will-change: transform; }
.nx-wi.accent { color: var(--teal-300); font-style: italic; }
/* italic glyphs overhang their box; widen the overflow mask so it doesn't clip the last letter (e.g. the "d" in "hard") */
.nx-w:has(> .nx-wi.accent) { padding-right: 0.14em; margin-right: -0.14em; }
.nx-sub { margin: var(--sp-4) auto 0; max-width: 44ch; color: var(--tx-2); font-size: var(--fs-lead); line-height: var(--lh-body); }
.nx-sub .accent { color: var(--teal-300); font-style: italic; }
.nx-sub-mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.01em; color: var(--tx-3); }
.next-progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(1.6rem, 5vh, 3rem); display: flex; align-items: center; gap: var(--sp-4); z-index: 2; }
.nx-count { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--tx-3); flex: none; }
.nx-count b { color: var(--tx-1); font-weight: 700; }
.nx-rail { flex: 1; display: flex; gap: 0.5rem; }
.nx-seg { flex: 1; height: 2px; background: rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; }
.nx-seg-fill { position: absolute; inset: 0; background: var(--teal-400); transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 0 8px -1px var(--teal-glow); }

/* static fallback: mobile + reduced motion (words all visible, steps stack) */
@media (max-width: 900px) {
  .next-pin { min-height: 0; display: block; padding-block: var(--section-y); }
  .next-head { position: static; }
  .next-ghost { display: none; }
  .next-steps { display: grid; gap: var(--sp-7); min-height: 0; margin-top: var(--sp-6); text-align: left; }
  .nx-step { grid-area: auto; max-width: none; }
  .nx-w { overflow: visible; }
  .nx-line { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .next-progress { position: static; margin-top: var(--sp-7); }
}
.reduced-motion .next-pin { min-height: 0; display: block; }
.reduced-motion .next-ghost { display: none; }
.reduced-motion .next-steps { display: grid; gap: var(--sp-7); min-height: 0; }
.reduced-motion .nx-step { grid-area: auto; }
.reduced-motion .nx-w { overflow: visible; }
.reduced-motion .next-progress { position: static; }

/* ---------------------------------------------------------------------------
 * FOUNDATION DECK · WIDE variant (Accounting) — full-width stacking cards,
 * each split into an illustration panel + text. Header (title + horizontal
 * progress) sits on top; the deck stacks below full-bleed. Reuses the same
 * initFoundationDeck stacking JS — only the card layout changes.
 * ------------------------------------------------------------------------- */
.deck--wide .deck-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); position: relative; z-index: 1;
}
.deck--wide .deck-head-copy { max-width: 640px; }
.deck--wide .deck-title { margin: var(--sp-3) 0 0; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.1; }
.deck--wide .deck-progress { display: flex; align-items: center; gap: var(--sp-4); }
.deck--wide .deck-count { font-size: clamp(1.2rem, 2vw, 1.7rem); }
.deck--wide .deck-track { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.deck--wide .deck-seg {
  padding: 0.32rem 0.75rem; border: 1px solid var(--line-3); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; color: var(--tx-3); letter-spacing: 0.01em;
  transition: color 0.4s var(--ease-out-quart), border-color 0.4s, background 0.4s;
}
.deck--wide .deck-seg::before { display: none; }
.deck--wide .deck-seg.is-active { color: var(--teal-300); border-color: var(--teal-tint-22); background: var(--teal-tint-08); }

.deck--wide .deck-stage { position: relative; z-index: 1; min-height: clamp(540px, 80vh, 700px); }
.deck--wide .deck-card {
  display: grid; grid-template-columns: minmax(0, 38%) 1fr; padding: 0; gap: 0; overflow: hidden;
}
.deck--wide .deck-card-body { gap: 0.6rem; padding: clamp(1.3rem, 2.6vw, 2.1rem); }
.deck--wide .deck-card-h { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.16; }
.deck--wide .deck-card-p { font-size: 0.9rem; line-height: 1.5; }
.deck--wide .deck-card .tick-list { gap: 0.45rem; }
.deck--wide .deck-card .tick-list li { font-size: 0.85rem; line-height: 1.4; }
.deck--wide .deck-card-media {
  position: relative; overflow: hidden; padding: 0;
  border-right: 1px solid var(--line-2); background: var(--bg-deep, #0a0f14);
}
.deck--wide .deck-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* tint the photo into the dark card so it reads on-brand */
.deck--wide .deck-card-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(20, 184, 166, 0.16), rgba(10, 15, 20, 0.55));
}
.deck--wide .deck-card-body {
  padding: clamp(1.5rem, 3vw, 2.4rem); display: flex; flex-direction: column;
  gap: var(--sp-3); justify-content: center;
}
/* zig-zag: even cards put the illustration on the right */
.deck--wide .deck-card:nth-child(even) .deck-card-media { order: 2; border-right: 0; border-left: 1px solid var(--line-2); }

@media (max-width: 900px) {
  .deck--wide .deck-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .deck--wide .deck-card { grid-template-columns: 1fr; }
  .deck--wide .deck-card-media { min-height: 170px; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .deck--wide .deck-card:nth-child(even) .deck-card-media { order: 0; border-left: 0; border-bottom: 1px solid var(--line-2); }
  .deck--wide .deck-illus { width: min(50%, 200px); }
}

/* Static (non-scrolling) variant of the wide deck — the 4 cards simply flow as
   full-width image|text cards, no pin / no stacking scrub. */
.deck--static .deck-pin { min-height: 0; display: block; }
.deck--static .deck-stage { min-height: 0; display: grid; gap: var(--sp-6); position: static; }
.deck--static .deck-card {
  position: static; inset: auto; opacity: 1 !important; transform: none !important;
  min-height: clamp(300px, 34vw, 380px);
}
.deck--static .deck-card-p { font-size: var(--fs-sm); line-height: var(--lh-body); }
.deck--static .deck-card .tick-list li { font-size: var(--fs-sm); line-height: 1.45; }
@media (max-width: 900px) {
  .deck--static .deck-card { min-height: 0; }
}

/* "Who we work with" panel (About) — icon rows with dividers + highlighted
   numbers, instead of a plain check-list, so the card reads richer. */
.who-card { padding: clamp(1.4rem, 2.4vw, 2rem); }
.who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.who-item {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line-2);
}
.who-item:first-child { padding-top: 0.4rem; }
.who-item:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
.who-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--teal-tint-14); color: var(--teal-300);
  border: 1px solid var(--teal-tint-22);
}
.who-ic svg { width: 20px; height: 20px; }
.who-txt { color: var(--tx-2); font-size: var(--fs-sm); line-height: 1.4; }
.who-txt strong { color: var(--teal-300); font-weight: 700; }

/* Values deck (About) sat too low — the section's OWN padding offset the pinned
   scene before centring it. Drop that padding so the pinned content centres in a
   clean 100vh (balanced top/bottom, well clear of the fixed header). */
.deck--values { padding-block: 0; }

/* ---------------------------------------------------------------------------
 * "How we work / who it's for" (Accounting) — ario-style big-number rows:
 * a large italic index, an uppercase title + line, and a duotone photo, sides
 * alternating. Client ref: ario.law practices. Our copy, their layout.
 * ------------------------------------------------------------------------- */
.practice-list { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
.practice-row {
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: stretch;
  border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(180deg, var(--bg-card-hi), var(--bg-card));
  min-height: clamp(230px, 28vw, 320px);
}
.practice-copy { padding: clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); }
.practice-no { font-family: var(--font-body); font-weight: 800; font-style: italic; font-size: clamp(3.4rem, 7vw, 5.5rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--teal-300); }
.practice-title { margin: 0; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.01em; }
.practice-desc { margin: 0; color: var(--tx-2); font-size: var(--fs-sm); line-height: var(--lh-body); max-width: 44ch; }
.practice-media { position: relative; overflow: hidden; min-height: 200px; }
.practice-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.65) contrast(1.05); }
.practice-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(150deg, rgba(20, 184, 166, 0.16), rgba(10, 15, 20, 0.5)); }
.practice-row:nth-child(even) .practice-media { order: -1; }
@media (max-width: 800px) {
  .practice-row { grid-template-columns: 1fr; }
  .practice-row:nth-child(even) .practice-media { order: 0; }
  .practice-media { min-height: 170px; }
}

/* ============================================================================
   #how ario-style practice flip (initPracticeFlip). The base .practice-* rules
   above are the static, readable fallback; the 3D deck layers on ONLY at
   (min-width:901px) AND :not(.reduced-motion) — the exact gate as JS noPin.
   The header sits OUTSIDE the pin (scrolls in first, ario-style), so the pinned
   stage centres in the FULL viewport with headroom for the fold/rise — the flat
   card is never taller than the viewport, so nothing is cut off top or bottom.
   ------------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* Pin target: centres the card stage in the whole viewport. NO overflow
     clip here — receding/rising cards must not be cut. */
  html:not(.reduced-motion) .practice-pin {
    height: 100vh;
    display: flex; align-items: center; justify-content: center;
    margin-top: clamp(1.5rem, 4vh, 3rem);       /* breathing room under the header */
  }

  /* The 3D stage the absolute cards live in. Height is capped well below 100vh
     so the flat card fits with slack above/below for the fold. */
  html:not(.reduced-motion) .practice-flip {
    position: relative; display: block; width: 100%; margin: 0;
    height: clamp(320px, 56vh, 500px);
    perspective: 1400px; perspective-origin: 50% 45%;
    transform-style: preserve-3d;
  }

  /* Cards absolutely stacked, driven by apply(p). inset:0 fills the stage; the
     base 2-col grid (copy | media) is inherited so LEFT=copy, RIGHT=photo. */
  html:not(.reduced-motion) .practice-flip .practice-row {
    position: absolute; inset: 0; margin: 0;
    height: 100%; min-height: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  }
  /* Stacked mode always reads copy-left / photo-right — cancel the list zig-zag. */
  html:not(.reduced-motion) .practice-flip .practice-row:nth-child(even) .practice-media { order: 0; }
  /* Media half gets its own 3D layer for the secondary crease. */
  html:not(.reduced-motion) .practice-flip .practice-media {
    transform-style: preserve-3d;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
}

/* Reduced-motion (any width): force a flat readable list and beat any stale
   inline transform/opacity/visibility GSAP may have left. */
.reduced-motion .practice-pin { display: block; height: auto; min-height: 0; margin-top: var(--sp-7); padding: 0; }
.reduced-motion .practice-flip { height: auto; perspective: none; transform-style: flat; margin-top: var(--sp-7); }
.reduced-motion .practice-flip .practice-row {
  position: relative; inset: auto; height: auto; min-height: clamp(230px, 28vw, 320px);
  transform: none !important; opacity: 1 !important; visibility: visible !important;
  box-shadow: none;
}
.reduced-motion .practice-flip .practice-row:nth-child(even) .practice-media { order: -1; }
.reduced-motion .practice-flip .practice-media { transform: none !important; }

/* ===================== Why choose us — magnetic scatter -> snap grid (#why, About)
   NON-PINNED scrubbed reveal. As #why crosses the viewport the six capability
   chips are magnetically pulled from a blurred, tilted, off-grid scatter into a
   tidy 2x3 grid; each seats with a soft teal-lifted lock. No pin => zero added
   scroll-jack on a page that already carries two pinned scenes (story timeline,
   values deck). Heading + lead keep their existing data-reveal / data-split
   entrance. Base rules = the static, fully-readable fallback; the .motion-ok
   desktop pre-hide (>=901px, matching the JS small gate) lets apply(0) paint the
   scattered start pose with no FOUC. Driven by initWhyMagnet(). ================ */
/* Clip the off-grid scatter so it never adds page-level horizontal scroll on
   narrow desktops / tablet-landscape (901–1024px); `clip` leaves the vertical
   axis and the non-pinned scene untouched. */
.why { overflow-x: clip; }
.why-grid {
  list-style: none; padding: var(--sp-6) 0 0; margin: var(--sp-7) auto 0;
  max-width: 940px; border-top: 1px solid var(--line-1);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) clamp(1.5rem, 4vw, 3rem);
}
.why-cap {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.85rem;
  padding: clamp(0.9rem, 1.4vw, 1.15rem) clamp(1rem, 1.5vw, 1.25rem);
  background: var(--bg-card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  color: var(--tx-1); font-size: var(--fs-body); line-height: 1.4;
  will-change: transform, opacity, filter;
}
.why-cap svg { width: 1.15rem; height: 1.15rem; color: var(--teal-400); margin-top: 0.15rem; flex: none; }

/* Motion pre-hide — DESKTOP ONLY, gated to the JS `small` boundary (min-width:901px).
   apply(0) paints the scattered start pose immediately after init; <=900px never hides. */
@media (min-width: 901px) {
  .motion-ok .why-grid[data-why-grid] > .why-cap { opacity: 0; }
}

/* Static fallback — reduced motion / phones: finished grid, nothing hidden/transformed/cut. */
.reduced-motion .why-cap {
  opacity: 1 !important; transform: none !important; filter: none !important; box-shadow: none !important;
}
@media (max-width: 900px) {
  .why-cap { opacity: 1 !important; transform: none !important; filter: none !important; box-shadow: none !important; }
}
@media (max-width: 640px) {
  .why-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ===== #benefits — self-completing checklist (initBenefitsChecklist) ==========
   Single-column list with a teal SPINE drawn down the badge gutter; each row's
   empty checkbox fills + ticks on in sequence as the spine tip passes it, and a
   decorative mono tally counts 0→10. Base rules below = the finished, fully
   readable static state (all ticked, spine full, rows lit) — exactly what
   reduced-motion / <=900px / no-JS show. The .motion-ok pre-hide (>=901px, to
   match the JS `small` gate) empties them so apply(0) paints the "nothing ticked
   yet" start with no FOUC. NON-PINNED (no pin / no refreshPriority). ========== */
.ben-track { position: relative; max-width: 720px; margin: var(--sp-7) auto 0; padding-top: var(--sp-6); border-top: 1px solid var(--line-1); }
.ben-list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; } /* above the spine so filled discs mask the rail */
.ben-row { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 0.95rem; padding-block: 0.62rem; color: var(--tx-1); font-size: var(--fs-body); }
.ben-text { line-height: 1.4; }
.ben-check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-300); border: 1.5px solid var(--teal-300); color: #06201d; will-change: transform, background-color, border-color, color; }
.ben-check svg { width: 15px; height: 15px; stroke: currentColor; } /* lucide check follows the badge `color` we animate */

/* Spine: dim rail behind the badge column. It is absolutely positioned inside
   .ben-track, whose padding-top (var(--sp-6)) pushes the normal-flow .ben-list
   down but does NOT push this absolute child — so the top inset must ADD that
   padding to land on the first badge centre (badge 26px, row padding 0.62rem →
   centre = 0.62rem + 13px). */
.ben-spine { position: absolute; left: 13px; top: calc(var(--sp-6) + 0.62rem + 13px); bottom: calc(0.62rem + 13px); width: 2px; transform: translateX(-1px); background: var(--line-1); border-radius: 2px; overflow: hidden; z-index: 0; pointer-events: none; }
.ben-spine-fill { position: absolute; inset: 0; transform: scaleY(1); transform-origin: 50% 0%; background: linear-gradient(180deg, var(--teal-300), var(--teal-500)); box-shadow: 0 0 10px var(--teal-glow); will-change: transform; } /* base = full (finished) */

.ben-tally { display: inline-flex; align-items: baseline; gap: 0.08rem; margin: var(--sp-4) 0 0; font-family: var(--font-mono); font-weight: 700; letter-spacing: var(--tracking-mono); color: var(--teal-300); font-size: clamp(1.1rem, 1.4vw, 1.35rem); }
.ben-tally-tot { color: var(--tx-3); font-size: 0.78em; }

/* Motion pre-hide — DESKTOP ONLY, gated to the JS `small` boundary (min-width:901px).
   apply(0) repaints the empty start immediately after init; <=900px never hides. */
@media (min-width: 901px) {
  .motion-ok [data-ben] .ben-row { opacity: 0.28; }
  .motion-ok [data-ben] .ben-spine-fill { transform: scaleY(0); }
  .motion-ok [data-ben] .ben-check { background: var(--bg-page); border-color: var(--line-2); color: var(--tx-3); }
}

/* Static fallback — reduced motion / phones / no-JS: finished list, nothing hidden. */
.reduced-motion [data-ben] .ben-row { opacity: 1 !important; transform: none !important; }
.reduced-motion [data-ben] .ben-spine-fill { transform: scaleY(1) !important; }
.reduced-motion [data-ben] .ben-check { background: var(--teal-300) !important; border-color: var(--teal-300) !important; color: #06201d !important; }
@media (max-width: 900px) {
  [data-ben] .ben-row { opacity: 1 !important; transform: none !important; }
  [data-ben] .ben-spine-fill { transform: scaleY(1) !important; }
  [data-ben] .ben-check { background: var(--teal-300) !important; border-color: var(--teal-300) !important; color: #06201d !important; }
}

/* ============================================================================
   ACCOUNTING #foundation — ledger-terminal "posting" sequence (initLedgerPost).
   Base CSS = the FINISHED, fully-readable static state (mobile / reduced / no-JS):
   every entry expanded, spine full, no clip. The pinned scrubbed layer (collapse
   posted stages, dim, 2-col body, spine) layers on ONLY at (min-width:901px) AND
   html.motion-ok — the exact gate as JS noPin, ABSENT with no JS so copy is never
   hidden. Header lives OUTSIDE the pin; expanded body is 2-col on desktop so the
   pinned stage always fits <=100vh.
   ------------------------------------------------------------------------- */
.ledger { position: relative; background: #0A0F14; overflow: hidden; }
.ledger > .container { position: relative; z-index: 1; }
.ledger-head { max-width: 640px; margin: 0 0 var(--sp-6); }
.ledger-title { margin: var(--sp-3) 0 0; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.1; }
.ledger-grid {
  display: grid; grid-template-columns: minmax(150px, 210px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.ledger-rail { position: relative; display: grid; gap: var(--sp-4); align-content: start; }
.ledger-count { display: flex; align-items: baseline; gap: 0.5rem; }
.ledger-count [data-ledger-count] { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; color: var(--teal-300); line-height: 1; }
.ledger-count-total { color: var(--tx-4); font-size: var(--fs-sm); font-weight: 600; }
.ledger-spine { position: relative; width: 2px; height: clamp(120px, 22vh, 200px); background: var(--line-2); border-radius: 2px; overflow: hidden; }
.ledger-spine-fill { position: absolute; inset: 0; transform-origin: 50% 0%; transform: scaleY(1); background: linear-gradient(180deg, var(--teal-300), var(--teal-500)); box-shadow: 0 0 10px var(--teal-glow); }
.ledger-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ledger-idx { display: flex; align-items: baseline; gap: 0.5rem; color: var(--tx-3); font-size: var(--fs-sm); font-weight: 600; }
.ledger-idx .mono { color: var(--tx-4); }
.ledger-stack { display: grid; gap: 0; }
.ledger-entry { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-1); }
.ledger-entry:first-child { border-top: 1px solid var(--line-1); }
.ledger-entry-line { display: flex; align-items: center; gap: 0.8rem; }
.ledger-no { color: var(--teal-300); font-size: var(--fs-sm); font-weight: 700; flex: none; }
.ledger-entry-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tx-2); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); }
.ledger-post { width: 1rem; height: 1rem; color: var(--teal-300); margin-left: auto; opacity: 0; flex: none; }
.ledger-body { margin-top: var(--sp-3); display: grid; gap: var(--sp-3); }
.ledger-h { margin: 0; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.16; }
.ledger-detail { display: grid; gap: var(--sp-3); }
.ledger-p { margin: 0; color: var(--tx-2); font-size: var(--fs-sm); line-height: var(--lh-body); max-width: 62ch; }
.ledger-body .tick-list { gap: 0.5rem; }
.ledger-body .tick-list li { font-size: var(--fs-sm); line-height: 1.45; }
@media (max-width: 640px) {
  .ledger-grid { grid-template-columns: 1fr; }
  .ledger-rail { grid-auto-flow: column; align-items: center; justify-content: start; gap: var(--sp-4); }
  .ledger-spine { width: clamp(80px, 40vw, 160px); height: 2px; }
  .ledger-spine-fill { transform-origin: 0% 50%; }
  .ledger-index { display: none; }
}
@media (min-width: 901px) {
  /* box-sizing + top/bottom padding reserve room for the fixed header (~75px) so
     the vertically-centred grid never slips its top ("03" counter) under it on
     shorter laptops. */
  html.motion-ok .ledger-pin { min-height: 100vh; display: flex; align-items: center; box-sizing: border-box; padding-top: clamp(5rem, 10vh, 6.5rem); padding-bottom: clamp(1rem, 3vh, 2rem); }
  html.motion-ok .ledger-pin > .ledger-grid { width: 100%; }
  /* tighten so the whole grid fits above ~640px viewports; collapsed (posted)
     entries sit compact so the open stage gets the room */
  html.motion-ok .ledger-p { line-height: 1.5; }
  html.motion-ok .ledger-body .tick-list { gap: 0.4rem; }
  html.motion-ok .ledger-body .tick-list li { line-height: 1.4; }
  html.motion-ok .ledger-spine-fill { transform: scaleY(0); }
  /* JS-scrubbed "posting": each entry is a row-grid whose BODY row animates from
     0fr (collapsed) to 1fr (open). initLedgerPost writes the fr + opacity every
     frame, so the expand/collapse tracks the scroll EXACTLY — no timed CSS
     transition (so it never auto-plays a "jump") and it animates the real
     content height (no max-height cap snap, no stack-reflow lurch). */
  html.motion-ok .ledger-entry {
    display: grid;
    grid-template-rows: auto 0fr;
    padding: var(--sp-3) 0;
    opacity: 0.42;                 /* JS lifts this toward 1 as the entry opens */
  }
  html.motion-ok .ledger-entry.is-current { opacity: 1; }
  html.motion-ok .ledger-entry.is-past { opacity: 0.6; }
  html.motion-ok .ledger-body {
    overflow: hidden; min-height: 0;        /* clean clip at 0fr */
    margin-top: 0; padding-top: var(--sp-3);
    opacity: 0;                             /* JS fades the body in with its height */
    /* the 2-col layout applies to EVERY body so an opening entry never pops from
       1-col to 2-col mid-morph (collapsed bodies are clipped anyway) */
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(1rem, 3vw, 2.6rem); align-items: start;
  }
  html.motion-ok .ledger-entry .pulse { opacity: 0; }
  html.motion-ok .ledger-entry.is-current .pulse { opacity: 1; }
  html.motion-ok .ledger-entry.is-past .ledger-post { opacity: 1; }
  html.motion-ok .ledger-idx { color: var(--tx-4); transition: color 0.4s var(--ease-out-quart); }
  html.motion-ok .ledger-idx.is-active { color: var(--tx-1); }
  html.motion-ok .ledger-idx.is-active .mono { color: var(--teal-300); }
}
.reduced-motion .ledger-pin { min-height: 0; display: block; }
.reduced-motion .ledger-entry { opacity: 1 !important; }
.reduced-motion .ledger-entry .ledger-body { max-height: none !important; opacity: 1 !important; transform: none !important; overflow: visible; }
.reduced-motion .ledger-spine-fill { transform: scaleY(1) !important; }

/* ============================================================================
   ACCOUNTING #how — light non-pinned "three profiles" reveal (initProfiles).
   Base = finished 3-up row (mobile / reduced / no-JS). Reveal (rule draws L->R +
   copy rises) layers on ONLY at (min-width:901px) AND html.motion-ok.
   ------------------------------------------------------------------------- */
.profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: var(--sp-7); }
.profile { position: relative; padding: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); align-content: start; }
.profile-rule { display: block; height: 2px; width: 100%; transform-origin: 0% 50%; transform: scaleX(1); background: linear-gradient(90deg, var(--teal-300), var(--teal-500)); box-shadow: 0 0 8px var(--teal-glow); border-radius: 2px; }
.profile-no { color: var(--teal-300); font-weight: 700; font-size: 1.05rem; }
.profile-title { margin: 0; font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.18; letter-spacing: -0.02em; }
.profile-desc { margin: 0; color: var(--tx-2); font-size: var(--fs-sm); line-height: var(--lh-body); }
@media (max-width: 800px) {
  .profiles { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (min-width: 901px) {
  html.motion-ok .profile { opacity: 0; }
  html.motion-ok .profile-rule { transform: scaleX(0); }
}
.reduced-motion .profile { opacity: 1 !important; transform: none !important; }
.reduced-motion .profile-rule { transform: scaleX(1) !important; }

/* ===== Monthly CFO cycle — looping conveyor track (#dashboard .cycle) =========
   The card is framed by a stadium/pill outline; a teal segment runs ONE lap and
   returns to the top-centre refresh seam, lighting the nine items in DOM order as
   it sweeps, then the refresh badge spins up to say the month repeats. Base rules
   = the FINISHED static state (loop complete, seam lit, all nine items visible) —
   what reduced-motion / <=900px / no-JS show. The .motion-ok pre-hide (>=901px,
   matching the JS small gate) paints the empty start (no FOUC). NON-PINNED.
   Appended after the existing .cycle rule so these win. ======================= */
.cycle { position: relative; overflow: hidden; }
.cycle-head, .cycle-list { position: relative; z-index: 1; }

.cycle-loop { position: absolute; inset: 14px; z-index: 0; pointer-events: none; overflow: visible; }
.cycle-loop path { fill: none; }
.cycle-loop-track { stroke: var(--line-2); stroke-width: 1.5; opacity: 0.55; }
.cycle-loop-done  { stroke: var(--teal-400); stroke-width: 1.8; opacity: 1; }
.cycle-loop-run   {
  stroke: var(--teal-300); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 18 82; stroke-dashoffset: 0; opacity: 0;
  filter: drop-shadow(0 0 5px var(--teal-glow));
  will-change: stroke-dashoffset, opacity;
}

.cycle-seam {
  position: absolute; top: 0; left: calc(50% - 15px); z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-card); border: 1.5px solid var(--teal-300); color: var(--teal-300);
  box-shadow: 0 0 10px var(--teal-glow);
  will-change: transform, opacity;
}
.cycle-seam svg { width: 15px; height: 15px; stroke: currentColor; }

@media (min-width: 901px) {
  html.motion-ok .cycle [data-cyc-item] { opacity: 0.3; }
  html.motion-ok .cycle .cycle-loop-run { opacity: 1; }
  html.motion-ok .cycle .cycle-loop-done { opacity: 0; }
  html.motion-ok .cycle .cycle-seam { opacity: 0.4; color: var(--tx-3); border-color: var(--line-2); box-shadow: none; }
}

.reduced-motion .cycle [data-cyc-item] { opacity: 1 !important; transform: none !important; }
.reduced-motion .cycle .cycle-loop-done { opacity: 1 !important; }
.reduced-motion .cycle .cycle-loop-run { opacity: 0 !important; }
.reduced-motion .cycle .cycle-seam { opacity: 1 !important; transform: none !important; }
@media (max-width: 900px) {
  .cycle [data-cyc-item] { opacity: 1 !important; transform: none !important; }
  .cycle .cycle-loop-done { opacity: 1 !important; }
  .cycle .cycle-loop-run { opacity: 0 !important; }
  .cycle .cycle-seam { opacity: 1 !important; transform: none !important; }
}

/* ===== "What you get" — value-map constellation (#benefits, initValueMap) =====
   The ten benefits are glowing NODES; as you scroll a teal network line draws
   between them (JS computes the polyline from the live node centres, so it always
   matches) and each node ignites in sequence. Base rules = the FINISHED, fully
   readable static layout (a clean 2-col list of lit nodes, line hidden) — what
   reduced-motion / narrow / no-JS show. The wide 5x2 constellation + the drawn
   line + the .motion-ok pre-hide layer on ONLY at (min-width:1081px); the JS
   scene self-gates to the same width. NON-PINNED. =========================== */
.diff-map { position: relative; margin-top: var(--sp-7); max-width: 1140px; margin-inline: auto; }
.diff-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; display: none; }
.diff-net-line { fill: none; stroke: var(--teal-500); stroke-width: 1.6; opacity: 0.85; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--teal-glow)); }
.diff-nodes { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) clamp(1.4rem, 3vw, 2.6rem); }
.diff-node { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.85rem; }
.diff-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-300); border: 1.5px solid var(--teal-300); color: #06201d; flex: none;
  will-change: transform, background-color, border-color, color; }
.diff-dot svg { width: 16px; height: 16px; stroke: currentColor; }
.diff-label { color: var(--tx-1); font-size: var(--fs-sm); line-height: 1.4; }

@media (max-width: 560px) { .diff-nodes { grid-template-columns: 1fr; } }

/* wide constellation — desktop only (>=1081px), same width the JS scene self-gates to */
@media (min-width: 1081px) {
  .diff-map { height: clamp(340px, 30vw, 430px); }
  .diff-net { display: block; }
  .diff-nodes { grid-template-columns: repeat(5, 1fr); gap: 0; height: 100%; align-content: center; }
  .diff-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; align-self: start; padding-inline: 0.4rem; will-change: opacity; }
  .diff-label { max-width: 17ch; }
  /* organic vertical jitter → constellation feel (JS reads the jittered centres) */
  .diff-node:nth-child(1) { margin-top: 6%; }
  .diff-node:nth-child(2) { margin-top: 0; }
  .diff-node:nth-child(3) { margin-top: 9%; }
  .diff-node:nth-child(4) { margin-top: 1%; }
  .diff-node:nth-child(5) { margin-top: 7%; }
  .diff-node:nth-child(6) { margin-top: 30%; }
  .diff-node:nth-child(7) { margin-top: 38%; }
  .diff-node:nth-child(8) { margin-top: 28%; }
  .diff-node:nth-child(9) { margin-top: 40%; }
  .diff-node:nth-child(10) { margin-top: 29%; }
  html.motion-ok .diff-node { opacity: 0; }
  html.motion-ok .diff-dot { background: var(--bg-page); border-color: var(--line-2); color: var(--tx-3); }
}

/* static fallback — reduced motion / narrow / no-JS: lit nodes, no line, nothing hidden */
.reduced-motion .diff-node { opacity: 1 !important; }
.reduced-motion .diff-dot { background: var(--teal-300) !important; border-color: var(--teal-300) !important; color: #06201d !important; transform: none !important; }
.reduced-motion .diff-net { display: none !important; }
@media (max-width: 1080px) {
  .diff-node { opacity: 1 !important; }
  .diff-dot { background: var(--teal-300) !important; border-color: var(--teal-300) !important; color: #06201d !important; transform: none !important; }
}

/* ============================================================================
   #benefits · "The Ascent" — a climbing-light trail scene (initValueMap)
   The ten OUTCOMES are waypoints on an upward switchback route. A winding trail
   runs up a left rail; a glowing climber-light travels UP it on scroll, drawing
   the lit trail behind it and igniting each outcome it passes, cresting on #10
   at the summit. A route climbed by a light — NOT a node network, NOT a blur-in
   list, NOT a straight spine. Non-pinned, transform/opacity/filter driven; the
   only geometry prop is stroke-dashoffset, written straight to .style in JS.
   BASE CSS BELOW IS THE FINISHED, READABLE STATE (mobile / reduced-motion / no
   JS). The motion pre-hide layers on ONLY under html.motion-ok at >=901px, where
   the JS scene self-gates to the same width. All selectors scoped to .benefits.
   ========================================================================== */
.benefits .climb {
  position: relative;
  margin: var(--sp-7) auto 0;
  max-width: 62rem;
}
.benefits .climb-stage {
  position: relative;
  --rail-w: clamp(58px, 8vw, 104px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- left rail: the winding ascent trail + climbing light + haze ----------- */
.benefits .climb-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  pointer-events: none;
  z-index: 0;
}
.benefits .climb-trail-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.benefits .climb-trail-base {
  fill: none;
  stroke: rgba(79, 212, 193, 0.14);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.benefits .climb-trail-lit {
  fill: none;
  stroke: var(--teal-300);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;                 /* base = fully drawn route */
  filter: drop-shadow(0 0 5px var(--teal-glow));
}
.benefits .climb-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #EAFFFB 0%, var(--teal-300) 52%, rgba(79, 212, 193, 0) 72%);
  box-shadow: 0 0 16px var(--teal-glow), 0 0 34px var(--teal-glow);
  opacity: 0;                            /* only the motion path lights it */
  will-change: transform, opacity;
}
.benefits .climb-haze {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: 0;
  height: 48%;
  background: radial-gradient(120% 100% at 50% 100%, rgba(79, 212, 193, 0.12), rgba(79, 212, 193, 0) 70%);
  opacity: 0;
}
.benefits .climb-summit {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(64vw, 380px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -18%);
  background: radial-gradient(circle, rgba(79, 212, 193, 0.30) 0%, rgba(79, 212, 193, 0.10) 38%, rgba(79, 212, 193, 0) 64%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* --- the ten outcomes stacked as waypoints -------------------------------- */
.benefits .climb-rows {
  list-style: none;
  margin: 0;
  padding: clamp(1.4rem, 4vh, 3rem) 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.55rem, 1.5vw, 1.2rem);
  flex: 1 1 auto;
}
.benefits .climb-row {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: auto auto auto;
  column-gap: clamp(0.7rem, 2vw, 1.5rem);
  align-items: center;
  position: relative;
}
.benefits .climb-dot {
  grid-column: 1;
  grid-row: 1 / span 3;
  justify-self: center;
  align-self: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--teal-300);           /* base = lit waypoint */
  box-shadow: 0 0 10px var(--teal-glow);
  will-change: transform, opacity;
}
.benefits .climb-num {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--teal-300);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.benefits .climb-phrase {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-display), 'Newsreader', Georgia, 'Times New Roman', serif;
  color: var(--tx-1);
  letter-spacing: -0.02em;
  text-wrap: balance;
  will-change: transform, opacity;
}
.benefits .climb-row.t-xl .climb-phrase {
  font-size: clamp(1.7rem, 1.15rem + 2.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.06;
}
.benefits .climb-row.t-lg .climb-phrase {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.05rem);
  font-weight: 500;
  line-height: 1.12;
}
.benefits .climb-row.t-md .climb-phrase {
  font-size: clamp(1.14rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--tx-2);
}
.benefits .climb-rule {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0.5rem;
  width: clamp(28px, 3.6vw, 46px);
  height: 2px;
  border-radius: 2px;
  transform-origin: 0% 50%;
  background: linear-gradient(90deg, var(--teal-300), var(--teal-500));
  box-shadow: 0 0 8px var(--teal-glow);
}

/* --- desktop motion stage: whole climb visible at once + the deterministic
       apply(0) pre-hide. BOTH the tall stage and the reversed order live under
       html.motion-ok ONLY, so reduced-motion / no-JS wide users get a natural,
       finished, top-to-bottom list — never a stranded 80vh gap. ------------- */
@media (min-width: 901px) {
  html.motion-ok .benefits .climb-stage { min-height: clamp(560px, 80vh, 780px); }
  html.motion-ok .benefits .climb-rows { flex-direction: column-reverse; } /* 01 = basecamp (bottom), 10 = summit (top) */
  html.motion-ok .benefits .climb-trail-lit { stroke-dashoffset: 100; }    /* route undrawn */
  html.motion-ok .benefits .climb-light,
  html.motion-ok .benefits .climb-haze,
  html.motion-ok .benefits .climb-summit { opacity: 0; }
  html.motion-ok .benefits .climb-phrase {
    opacity: 0.12;
    transform: translate(18px, 10px);
    color: var(--tx-4);
  }
  html.motion-ok .benefits .climb-num { color: var(--tx-4); opacity: 0.35; text-shadow: none; }
  html.motion-ok .benefits .climb-dot {
    background: #2E3942;
    box-shadow: none;
    opacity: 0.4;
    transform: scale(0.7);
  }
  html.motion-ok .benefits .climb-rule { transform: scaleX(0); opacity: 0; }
}

/* --- static fallback: reduced-motion — finished & readable, no drive ------- */
.reduced-motion .benefits .climb-trail-lit { stroke-dashoffset: 0 !important; }
.reduced-motion .benefits .climb-light,
.reduced-motion .benefits .climb-haze,
.reduced-motion .benefits .climb-summit { opacity: 0 !important; }
.reduced-motion .benefits .climb-phrase { opacity: 1 !important; transform: none !important; color: var(--tx-1); }
.reduced-motion .benefits .climb-row.t-md .climb-phrase { color: var(--tx-2); }
.reduced-motion .benefits .climb-num { opacity: 1 !important; color: var(--teal-300) !important; text-shadow: none !important; }
.reduced-motion .benefits .climb-dot { opacity: 1 !important; transform: none !important; background: var(--teal-300) !important; box-shadow: 0 0 10px var(--teal-glow) !important; }
.reduced-motion .benefits .climb-rule { transform: none !important; opacity: 1 !important; }

/* --- static fallback: narrow / no-JS — tidy readable column, no trail SVG -- */
@media (max-width: 900px) {
  .benefits .climb-stage { --rail-w: clamp(34px, 9vw, 46px); min-height: 0; }
  .benefits .climb-trail-svg,
  .benefits .climb-light,
  .benefits .climb-haze,
  .benefits .climb-summit { display: none; }
  .benefits .climb-rail::before {                 /* quiet straight guide instead */
    content: "";
    position: absolute;
    left: 50%;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--teal-300), var(--teal-700));
    opacity: 0.35;
  }
  .benefits .climb-rows { padding: 0; }
  .benefits .climb-phrase,
  .benefits .climb-rule,
  .benefits .climb-num,
  .benefits .climb-dot { opacity: 1 !important; transform: none !important; }
  .benefits .climb-phrase { color: var(--tx-1); }
  .benefits .climb-row.t-md .climb-phrase { color: var(--tx-2); }
}
@media (max-width: 460px) {
  .benefits .climb-row.t-xl .climb-phrase { font-size: 1.62rem; }
  .benefits .climb-row.t-lg .climb-phrase { font-size: 1.34rem; }
}

/* ===========================================================================
   10a · FOUNDER — dual-image "torch/loupe" cursor reveal (About › Meet founder)
   Base state (no JS / touch / reduced-motion) = clean, vivid, static image A.
   The dim-and-uncover torch layers on ONLY for real (fine, hovering) pointers,
   and every moving part is driven by JS-updated custom properties.
   Everything is clipped by .founder-photo (overflow:hidden + radius upstream).
   =========================================================================== */
.founder-photo[data-founder-reveal] {
  --px: 50%;   /* torch centre X (JS overrides in px) */
  --py: 38%;   /* torch centre Y */
  --lr: 0px;   /* torch / lens radius */
  --cast: 0;   /* how far image A is dimmed (0 = clean) */
  --ring-op: 0;/* teal ring + glow opacity */
  isolation: isolate;
}

/* keep the monogram as the ultimate no-image fallback, behind the photos */
.founder-photo[data-founder-reveal] .founder-monogram {
  position: absolute; inset: 0; z-index: 0; margin: 0;
  display: grid; place-items: center;
}

/* both photos fill the 4/5 frame identically */
.founder-photo[data-founder-reveal] .founder-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
  user-select: none; -webkit-user-drag: none;
}
.founder-photo[data-founder-reveal] .founder-img--base { z-index: 1; }

/* cool cast that darkens A while the torch is lit — invisible at rest (--cast:0) */
.founder-photo[data-founder-reveal] .founder-cast {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: none;                 /* enabled only for fine pointers */
  opacity: var(--cast); mix-blend-mode: multiply;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(10,58,58,0.35), transparent 60%),
    linear-gradient(180deg, rgba(8,20,26,0.72), rgba(6,14,20,0.90));
}

/* IMAGE B — uncovered ONLY inside the feathered circle (radius --lr). With no
   JS, --lr is 0px so the circle is empty and B stays hidden. Slight scale =
   a true loupe "zoom" into the other photo. */
.founder-photo[data-founder-reveal] .founder-img--reveal {
  z-index: 3; display: none;     /* enabled only for fine pointers */
  transform: scale(1.06); transform-origin: 50% 30%;
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--px) var(--py),
            #000 0, #000 62%, rgba(0,0,0,0.35) 84%, transparent 100%);
          mask-image: radial-gradient(circle var(--lr) at var(--px) var(--py),
            #000 0, #000 62%, rgba(0,0,0,0.35) 84%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  will-change: -webkit-mask-image, mask-image;
}

/* the teal loupe ring + warm inner light + soft outer glow, tracking the cursor */
.founder-photo[data-founder-reveal] .founder-torch {
  position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none;
  display: none;                 /* enabled only for fine pointers */
  width: calc(var(--lr) * 2); height: calc(var(--lr) * 2);
  transform: translate3d(calc(var(--px) - var(--lr)), calc(var(--py) - var(--lr)), 0);
  opacity: var(--ring-op); border-radius: 50%;
  border: 1.5px solid rgba(79,212,193,0.55);
  background: radial-gradient(circle at 50% 40%,
     rgba(255,244,230,0.10), rgba(255,244,230,0.02) 46%, transparent 72%);
  box-shadow:
     inset 0 0 22px rgba(79,212,193,0.18),
     0 0 26px rgba(20,184,166,0.30),
     0 0 70px rgba(20,184,166,0.16);
  will-change: transform, width, height, opacity;
}
/* a soft specular sheen so the ring reads as glass */
.founder-photo[data-founder-reveal] .founder-torch::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(38% 30% at 34% 24%, rgba(241,245,248,0.16), transparent 60%);
}

/* faint filmic grain, above everything at low opacity (JS-armed) */
.founder-photo[data-founder-reveal] .founder-grain {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: none; opacity: 0.5; mix-blend-mode: overlay; background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- interactive layer: real, hovering, fine pointers only ----------------- */
@media (hover: hover) and (pointer: fine) {
  .founder-photo[data-founder-reveal] .founder-cast,
  .founder-photo[data-founder-reveal] .founder-img--reveal,
  .founder-photo[data-founder-reveal] .founder-torch { display: block; }

  /* only once JS has taken over does the card hide the OS cursor + arm grain */
  .founder-photo[data-founder-reveal].is-reveal-ready { cursor: none; }
  .founder-photo[data-founder-reveal].is-reveal-ready .founder-grain { display: block; }
}

/* --- reduced motion / no-JS fallback: clean static image A, nothing else --- */
@media (prefers-reduced-motion: reduce) {
  .founder-photo[data-founder-reveal] .founder-cast,
  .founder-photo[data-founder-reveal] .founder-img--reveal,
  .founder-photo[data-founder-reveal] .founder-torch,
  .founder-photo[data-founder-reveal] .founder-grain { display: none !important; }
  .founder-photo[data-founder-reveal].is-reveal-ready { cursor: default; }
}
.reduced-motion .founder-photo[data-founder-reveal] .founder-cast,
.reduced-motion .founder-photo[data-founder-reveal] .founder-img--reveal,
.reduced-motion .founder-photo[data-founder-reveal] .founder-torch,
.reduced-motion .founder-photo[data-founder-reveal] .founder-grain { display: none !important; }
.reduced-motion .founder-photo[data-founder-reveal].is-reveal-ready { cursor: default; }

/* ===== Monthly CFO cycle — sticky "monthly brief" instrument (#dashboard, initCycleLoop) =====
   Sticky/pinned split scrollytelling. LEFT column = an abstract CFO instrument that
   pins via CSS position:sticky (NO GSAP pin — clear of the page's stacked #vstory /
   #case pins). RIGHT column = the nine agenda items as narrative steps. An
   IntersectionObserver read-line lights the crossing item; the instrument advances
   (running numeral 01→09, a vertical tally-spine fills, footer "↻ repeats" ignites
   on item 9). Base rules (no-JS / reduced-motion / <=900px) ARE a finished,
   fully-readable single-column stack with every item shown. Everything on the panel
   is an INDEX or an abstract fill — no numbers/%/$/axes/data. Fresh .mcyc-* classes
   so none of the old .cycle-loop / .cycle-seam rules match anything now. ========= */

/* CRITICAL PIN FIX: the #dashboard SECTION sets `overflow:hidden` (to clip its glow),
   which establishes a scroll container and BREAKS position:sticky on any descendant.
   `overflow:clip` clips identically but does NOT create a scroll container, so the
   sticky pin works. The site already relies on `overflow-x:clip` (body), so support
   is in the baseline. Appended after the base .dashboard rule so this wins. */
.dashboard { overflow: clip; }

.mcyc { margin-top: var(--sp-8); }
.mcyc-head { text-align: center; margin-bottom: var(--sp-6); }
.mcyc-head h3 { margin-top: var(--sp-3); }

/* --- base layout: single-column stack (mobile / no-JS / reduced-motion) --- */
.mcyc-grid { display: block; }

.mcyc-panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: linear-gradient(158deg, var(--bg-card-hi), var(--bg-card));
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-lift);
  margin-bottom: var(--sp-6);
}
/* faint concentric instrument backdrop — decorative, no data */
.mcyc-panel::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal-500) 14%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.mcyc-p-head, .mcyc-p-core, .mcyc-p-foot { position: relative; z-index: 1; }

.mcyc-p-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3);
}
.mcyc-p-count b { color: var(--teal-300); font-weight: 600; }

.mcyc-p-core {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2rem);
  min-height: clamp(150px, 24vh, 240px); padding-block: clamp(1rem, 3vh, 2rem);
}
.mcyc-p-num {
  font-family: var(--font-display); font-weight: 500; line-height: 1; letter-spacing: -.03em;
  font-size: clamp(4.5rem, 11vw, 8rem); color: var(--tx-1);
  font-variant-numeric: tabular-nums;
}
.mcyc-p-num.is-flip { animation: mcycFlip .5s var(--ease-out-quart); }
@keyframes mcycFlip {
  0%   { opacity: 0; transform: translateY(-.16em) scale(.94); }
  100% { opacity: 1; transform: none; }
}

/* vertical tally spine — nine notches; a teal fill climbs as items complete */
.mcyc-p-tally {
  list-style: none; margin: 0; padding: 0 0 0 1.1rem;
  position: relative; display: flex; flex-direction: column; gap: clamp(.5rem, 1.4vh, .85rem);
  align-self: stretch; justify-content: center;
}
.mcyc-p-tally::before,
.mcyc-p-tally::after {
  content: ""; position: absolute; left: .32rem; top: .3rem; bottom: .3rem; width: 2px; border-radius: 2px;
}
.mcyc-p-tally::before { background: var(--line-2); opacity: .6; }
.mcyc-p-tally::after {
  background: var(--teal-400);
  transform-origin: top center; transform: scaleY(var(--fill, 0));
  transition: transform .5s var(--ease-out-quart);
  box-shadow: 0 0 6px var(--teal-glow);
}
.mcyc-notch { display: flex; align-items: center; }
.mcyc-notch-bar {
  display: block; width: 14px; height: 2px; border-radius: 2px; background: var(--line-2);
  transition: width .45s var(--ease-out-quart), background-color .45s ease, box-shadow .45s ease;
}
.mcyc-notch.is-done .mcyc-notch-bar { width: 20px; background: var(--teal-700); }
.mcyc-notch.is-active .mcyc-notch-bar {
  width: 34px; background: var(--teal-300); box-shadow: 0 0 9px var(--teal-glow);
}

.mcyc-p-foot {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--fs-sm); color: var(--tx-4);
  transition: color .5s ease;
}
.mcyc-refresh {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line-2); color: var(--tx-4);
  transition: transform .7s var(--ease-out-quart), color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.mcyc-refresh svg { width: 14px; height: 14px; stroke: currentColor; }
.mcyc-panel.is-repeating .mcyc-p-foot { color: var(--teal-300); }
.mcyc-panel.is-repeating .mcyc-refresh {
  transform: rotate(360deg); color: var(--teal-300); border-color: var(--teal-300);
  box-shadow: 0 0 10px var(--teal-glow);
}

/* agenda steps */
.mcyc-steps { list-style: none; margin: 0; padding: 0; }
.mcyc-step {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: clamp(.9rem, 2vw, 1.4rem);
  padding: .85rem 0;
}
.mcyc-step-idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--tx-3); }
.mcyc-step-txt {
  font-family: var(--font-display); font-weight: 500; line-height: 1.2;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--tx-1);
}

/* --- DESKTOP: sticky split (matches the JS >=901px gate) --- */
@media (min-width: 901px) {
  .mcyc-grid {
    display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 5rem); align-items: start;
  }
  /* pinned instrument — NATURAL height (~37vh), VERTICALLY CENTRED in the
     viewport (top = half the leftover space) so it sits mid-screen aligned with
     the reading flow rather than clinging to the nav. Natural height keeps the
     sticky window (~1165px) well over the nine items' span (~907px) so every
     step still crosses the read-line while pinned. (A 100vh panel would
     un-stick after ~half the steps.) */
  .mcyc-stage { position: sticky; top: clamp(88px, calc(50vh - 190px), 320px); }
  .mcyc-panel { width: 100%; margin-bottom: 0; }

  /* tall agenda gives the sticky track ~1.3 viewports; the top/bottom pad centres
     the first / last item against the read-line at ~45% viewport. */
  .mcyc-steps { display: flex; flex-direction: column; gap: clamp(3.5vh, 5vh, 7vh); padding: 24vh 0 28vh; }

  .mcyc-step { transition: opacity .5s ease, transform .5s var(--ease-out-quart); }
  .mcyc-step-txt, .mcyc-step-idx { transition: color .5s ease; }

  /* pre-hide start pose — ONLY under html.motion-ok (absent on no-JS /
     reduced-motion, so those wide users keep the finished readable state).
     JS lights the active item. */
  html.motion-ok .mcyc-step { opacity: .72; }

  /* is-active / is-done need the html.motion-ok prefix so they OUT-specify the
     base pre-hide (html.motion-ok .mcyc-step) — otherwise the active item never
     reaches full opacity and every line reads the same brightness. */
  html.motion-ok .mcyc-step.is-done { opacity: .62; }
  .mcyc-step.is-done .mcyc-step-idx { color: var(--teal-700); }
  html.motion-ok .mcyc-step.is-active { opacity: 1; transform: translateX(6px); }
  .mcyc-step.is-active .mcyc-step-txt { color: var(--tx-1); }
  .mcyc-step.is-active .mcyc-step-idx { color: var(--teal-300); }
}

/* --- finished/static safety: reduced-motion & narrow show the full readable stack --- */
.reduced-motion .mcyc-step { opacity: 1 !important; transform: none !important; }
.reduced-motion .mcyc-p-num.is-flip { animation: none !important; }
.reduced-motion .mcyc-refresh, .reduced-motion .mcyc-p-tally::after { transition: none !important; }
@media (max-width: 900px) {
  .mcyc-stage { position: static; }
  .mcyc-step { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   WHAT YOU GET — "Resolving Spark" (payoff, #benefits, initValueMap).
   Editorial sticky masthead (a giant serif running index + a single evolving
   mark: ten rays assembling out of a shared core) beside the ten outcomes as
   large serif reading-lines — WORDS are the hero. BASE CSS = the FINISHED,
   readable state (mobile / reduced-motion / no-JS): rays fully drawn & lit,
   core bright, every line inked, index at 10. The motion pre-hide layers on
   ONLY under html.motion-ok at >=901px, where JS self-gates to the same width
   and drives transform/opacity/filter/color from a NON-pinned ScrollTrigger.
   The pin is CSS position:sticky — no GSAP pin, no refreshPriority added.
   #benefits has no overflow/transform ancestor, so the sticky needs no fix.
   All selectors scoped to .benefits.
   ========================================================================== */
.benefits .vgain {
  margin: var(--sp-7) auto 0;
  max-width: 70rem;
}
.benefits .vgain-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
@media (min-width: 901px) {
  .benefits .vgain-grid {
    display: grid;
    grid-template-columns: minmax(260px, 33%) 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  /* CSS pin: the masthead holds, VERTICALLY CENTRED (top = half the leftover
     space), while the taller list scrolls past. The list carries big top/bottom
     padding below so the sticky duration (list height − masthead) spans the whole
     read — the flower stays beside every outcome, no empty band. */
  /* stretch the aside to the full grid (list) height so the sticky child has a
     real pin range — without this the aside is only its own content height and
     the flower barely sticks, scrolling off before the later outcomes. */
  .benefits .vgain-aside { align-self: stretch; }
  .benefits .vgain-sticky {
    position: sticky;
    top: clamp(96px, calc(50vh - 178px), 300px);
  }
}
.benefits .vgain-sticky {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* --- masthead running index -------------------------------------------------- */
.benefits .vgain-kicker {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  line-height: 0.9;
}
.benefits .vgain-count {
  font-family: var(--font-display), 'Newsreader', Georgia, serif;
  font-size: clamp(3.2rem, 2rem + 5.4vw, 5.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--teal-300);
  text-shadow: 0 0 26px rgba(79, 212, 193, 0.34);
  font-variant-numeric: tabular-nums;
}
.benefits .vgain-total {
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--tx-3);
}

/* --- the single evolving mark: rays around a shared core --------------------- */
.benefits .vgain-mark {
  position: relative;
  margin: 0;
  width: min(78%, 258px);
  aspect-ratio: 1 / 1;
}
.benefits .vgain-mark::before {
  content: "";
  position: absolute;
  inset: -22%;
  background: radial-gradient(circle, rgba(79, 212, 193, 0.15), rgba(79, 212, 193, 0) 66%);
  pointer-events: none;
}
.benefits .vgain-spark {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.benefits .vgain-ray {
  stroke: var(--teal-300);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--teal-glow));
  will-change: transform, opacity;
}
.benefits .vgain-core {
  fill: #EAFFFB;
  filter: drop-shadow(0 0 11px var(--teal-glow));
  will-change: transform, opacity;
}

/* --- the ten outcomes -------------------------------------------------------- */
.benefits .vgain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
}
/* Desktop: a tall list (big top/bottom pad + wider gaps) gives the CSS-sticky
   masthead a long pin window, so the flower stays centred beside every outcome
   instead of releasing early and leaving an empty left band. After the base
   rule so it wins the source-order tiebreak. */
@media (min-width: 901px) {
  .benefits .vgain-list { gap: clamp(2.2rem, 4.5vw, 3.6rem); padding: 22vh 0 26vh; }
}
.benefits .vgain-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(0.85rem, 2vw, 1.6rem);
  align-items: baseline;
  padding-left: 1.15rem;
}
.benefits .vgain-mk {
  position: absolute;
  left: 0;
  top: 0.24em;
  width: 3px;
  height: 1.05em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--teal-300), var(--teal-500));
  box-shadow: 0 0 8px var(--teal-glow);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.benefits .vgain-idx {
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(0.7rem, 0.62rem + 0.2vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--teal-300);
  align-self: center;
  line-height: 1;
}
.benefits .vgain-line {
  font-family: var(--font-display), 'Newsreader', Georgia, 'Times New Roman', serif;
  letter-spacing: -0.02em;
  color: var(--tx-1);
  text-wrap: balance;
  line-height: 1.12;
  will-change: transform, opacity;
}
.benefits .vgain-item.lg .vgain-line {
  font-size: clamp(1.5rem, 1.12rem + 1.8vw, 2.35rem);
  font-weight: 600;
}
.benefits .vgain-item.md .vgain-line {
  font-size: clamp(1.2rem, 1.02rem + 0.9vw, 1.64rem);
  font-weight: 500;
  color: var(--tx-2);
}

/* --- desktop motion pre-hide: only under html.motion-ok (JS present), so
       reduced-motion / no-JS wide users keep the finished readable state ------ */
@media (min-width: 901px) {
  html.motion-ok .benefits .vgain-line { opacity: 0.16; transform: translateX(14px); color: var(--tx-4); }
  html.motion-ok .benefits .vgain-idx  { color: var(--tx-4); opacity: 0.4; text-shadow: none; }
  html.motion-ok .benefits .vgain-mk   { transform: scaleY(0.12); opacity: 0; }
  html.motion-ok .benefits .vgain-ray  { opacity: 0; }        /* keep attribute rotation; JS scales/rotates/fades in */
  html.motion-ok .benefits .vgain-core { opacity: 0; }
}

/* --- static fallback: reduced-motion — finished, no drive ------------------- */
.reduced-motion .benefits .vgain-line { opacity: 1 !important; transform: none !important; color: var(--tx-1); }
.reduced-motion .benefits .vgain-item.md .vgain-line { color: var(--tx-2); }
.reduced-motion .benefits .vgain-idx  { opacity: 1 !important; color: var(--teal-300) !important; text-shadow: none !important; }
.reduced-motion .benefits .vgain-mk   { opacity: 1 !important; transform: none !important; }
.reduced-motion .benefits .vgain-ray  { opacity: 1 !important; }
.reduced-motion .benefits .vgain-core { opacity: 1 !important; }

/* --- static fallback: narrow / no-JS — masthead centred above the stacked list */
@media (max-width: 900px) {
  .benefits .vgain-sticky { align-items: center; text-align: center; }
  .benefits .vgain-kicker { justify-content: center; }
  .benefits .vgain-mark   { width: min(52vw, 188px); }
}

/* ===========================================================================
   MOBILE-ADAPTED REVEALS  (JS: initMobileReveals, phones / tablet-portrait)
   On <901px the pinned/scrubbed scenes render static (their JS bailed). JS adds
   `html.mobile-anim` and an IntersectionObserver toggles `.is-in` on each
   scene's key blocks (staggered) as the scene scrolls in. These rules start
   those blocks hidden and settle them up+in — the "everything animates in on
   scroll" spirit, no pinning. `!important` is required: several static
   fallbacks force `opacity:1!important` / `transform:none!important`, and only
   an !important rule of higher specificity can start them hidden. The
   max-width:900 guard + the JS-only `.mobile-anim` class keep desktop and
   reduced-motion completely untouched.
   =========================================================================== */
@media (max-width: 900px) {
  html.mobile-anim :is(
    .wd-kpi, [data-dash-cap], .u-card, .hpanel, .story-step, .deck-card,
    .why-cap, .ledger-entry, .profile, .vstory-panel, .vgain-item,
    .mcyc-step, .nx-step, .case-copy-stack > p
  ) {
    opacity: 0 !important;
    transform: translateY(26px) !important;
    transition:
      opacity 0.6s var(--ease-out-quart),
      transform 0.6s var(--ease-out-quart) !important;
    will-change: opacity, transform;
  }
  html.mobile-anim :is(
    .wd-kpi, [data-dash-cap], .u-card, .hpanel, .story-step, .deck-card,
    .why-cap, .ledger-entry, .profile, .vstory-panel, .vgain-item,
    .mcyc-step, .nx-step, .case-copy-stack > p
  ).is-in {
    opacity: 1 !important;
    transform: none !important;
  }
}