/* ============================================================================
   ORKSTRA.ai — Track A interim website uplift
   Implementation of 2026-08-14_TRACK_A_IMPLEMENTATION_SPEC.md
   Static, dependency-free. No frameworks, no external requests.
   ========================================================================= */

/* ---------- 1. Font ------------------------------------------------------ */

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------------------------------------------------- */

:root {
  /* Confirmed ORKSTRA brand hexes (DESIGN.md — not Tailwind defaults) */
  --brand-purple: #a43eee;
  --brand-blue:   #4263ea;
  --brand-teal:   #189ebd;

  /* Tonal ramp, not a new brand colour: brand-purple lifted for use as small
     bold text on the night stage. #a43eee on #04050a measures 4.46:1, which
     fails WCAG AA for text under 18.66px; this lift measures 7.6:1. Used only
     for the section label on night bands. Flagged to Tal for design-system
     ratification (Track A build note, 2026-08-14). */
  --brand-purple-lift: #c07dff;

  /* Same idea, other direction: brand-purple darkened 4% for small bold text on
     the tint band. #a43eee on #f4f7fb measures 4.34:1 and misses AA; this
     measures 4.65:1 on tint and 5.00:1 on white. Section labels only. */
  --brand-purple-ink: #9d3ce4;

  /* Night stage — measured off Julia's 2x exports. The hero is FLAT BLACK;
     the constraint and proof bands sit a touch above it. */
  --hero-black:  #000000;
  --night-base:  #0d0d0f;
  --night-deep:  #0a0a0c;
  --night-raise: #17171a;
  --night-mid:   #121215;

  /* Day stage */
  --day-white: #ffffff;
  --day-tint:  #f4f7fb;
  --day-edge:  #e3e9f2;
  --day-fill:  #f7f9fc;   /* second audience card */
  --lavender:  #f9f1fe;   /* product panel frame */
  --lavender-edge: #efe0fb;

  /* Ink */
  --ink-strong: #0a0d18;
  --ink-body:   #4a5568;
  --ink-muted:  #6b7688;

  /* On-night ink */
  --ink-night-strong: #ffffff;
  --ink-night-body:   #a7b0c0;
  --ink-night-muted:  #78829a;
  --hairline-night:   rgba(255, 255, 255, 0.12);
  --hairline-day:     var(--day-edge);

  /* Decorative three-stop brand range — never carries text. */
  --grad-brand: linear-gradient(100deg, var(--brand-purple) 0%, var(--brand-blue) 55%, var(--brand-teal) 100%);

  /* Text-bearing surfaces use the two-stop range. White on the teal endpoint
     measures 3.15:1 and fails AA; purple->blue measures 4.66:1 to 4.99:1
     across the whole sweep. Approval record §5 explicitly permits a two-stop
     brand gradient "where appropriate and AA-compliant". */
  --grad-brand-text: linear-gradient(100deg, var(--brand-purple) 0%, var(--brand-blue) 100%);

  /* Type */
  --font-sans: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.25rem, 1.35rem + 3.9vw, 4rem);
  --fs-h2:      clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
  --fs-h3:      clamp(1.0625rem, 0.98rem + 0.38vw, 1.3125rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;

  --lh-tight: 1.08;
  --lh-snug:  1.22;
  --lh-body:  1.62;

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;

  --band-pad: clamp(3.5rem, 1.5rem + 7vw, 7.5rem);
  --shell-max: 1200px;
  --gutter: clamp(1.25rem, 0.5rem + 3.2vw, 5rem);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Hero-exit sheet: how far the light section rises over the hero foot.
     The hero adds the same amount of bottom padding, so content spacing is
     unchanged and the overlap zone contains only dimmed footage. Refined
     2026-08-20 pass 2: quieter values so the boundary is felt, not noticed. */
  --sheet-overlap: 64px;
  /* Gap between the stage and the viewport edge: near-full-bleed, so the
     stage reads as a scene within the page, not a card on it. */
  --stage-edge: clamp(16px, 2vw, 32px);
}

/* ---------- 3. Reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
  background: var(--day-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink-strong);
  font-weight: 700;
  letter-spacing: -0.02em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* No radius here on purpose: modern browsers follow the element's own
   border-radius for the outline, so the ring matches each component's
   documented shape instead of imposing an off-scale one. */
:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -4rem; z-index: 200;
  background: var(--day-white); color: var(--ink-strong);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm);
  font-weight: 600; transition: top 0.18s var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- 4. Band + shell primitives ----------------------------------- */

.band {
  padding-block: var(--band-pad);
  position: relative;
}
.band--night {
  background: var(--night-base);
  color: var(--ink-night-body);
}
.band--night h1, .band--night h2, .band--night h3 { color: var(--ink-night-strong); }
.band--white { background: var(--day-white); }
.band--tint  { background: var(--day-tint); }

.band--flush-bottom { padding-bottom: 0; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 5. Section label + headings ---------------------------------- */

.label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-purple-ink);
  margin-bottom: var(--sp-4);
}
.band--night .label { color: var(--brand-purple-lift); }

.h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 62ch;
}
.band--night .lead { color: var(--ink-night-body); }

.section-head { margin-bottom: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
/* canonical name casing survives uppercase label styling (Shlomo:
   always "ORKSTRA.ai", never ORKSTRA.AI) */
.keepcase { text-transform: none; }

.section-head--center { text-align: center; }
.section-head--center .h2 { margin-inline: auto; }
.section-head .lead { margin-top: var(--sp-5); }

/* ---------- 6. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
              background-color 0.16s var(--ease), border-color 0.16s var(--ease);
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background-image: var(--grad-brand-text);
  color: #fff;
  box-shadow: 0 2px 14px rgba(66, 99, 234, 0.28);
}
.btn--primary:hover { box-shadow: 0 6px 22px rgba(66, 99, 234, 0.4); }

.btn--ghost-night {
  background: transparent;
  color: var(--ink-night-strong);
  border-color: rgba(255, 255, 255, 0.34);
}
.btn--ghost-night:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

.btn--sm { min-height: 42px; padding: 0 var(--sp-5); }

/* Pill treatment, used in the nav and hero per Tal's reference. Down-page
   buttons deliberately keep Julia's lightly-rounded rectangles. */
.btn--pill { border-radius: 999px; padding-inline: var(--sp-7); }
.btn--pill.btn--sm { padding-inline: var(--sp-6); }
.btn__arrow { width: 15px; height: 15px; flex: 0 0 auto; transition: transform 0.18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(2px); }
.btn--block { width: 100%; }

/* ---------- 7. Utilities ------------------------------------------------- */

.hairline-top { border-top: 1px solid var(--hairline-day); }
.band--night .hairline-top { border-top-color: var(--hairline-night); }

.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* Julia's buttons are lightly rounded rectangles, not pills. */
.btn--dark   { background: #101014; color: #fff; }
.btn--dark:hover { background: #23232a; }
.btn--purple { background: var(--brand-purple); color: #fff; }
.btn--purple:hover { background: #b055f5; }

/* ---------- 8. Site header ----------------------------------------------- */

.siteheader {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              backdrop-filter 0.25s var(--ease);
}
/* CSS-only guarantee of legibility. Invisible over the black hero, but keeps
   the white wordmark and nav readable over light bands even if JS never runs. */
.siteheader::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 62%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.siteheader__inner { position: relative; z-index: 1; }

.siteheader.is-stuck {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}
/* Once the solid bar is in, the gradient is redundant. */
.siteheader.is-stuck::before { opacity: 0; }
.siteheader.is-stuck { border-bottom-color: var(--hairline-night); }

/* Three columns: brand left, nav centred in the BAR (not merely between the
   other two items), actions right. The outer columns are given equal minimum
   width so the centre column stays optically centred. */
.siteheader__inner {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: var(--sp-5);
  min-height: 84px;
}

.brand { display: flex; align-items: center; justify-self: start; }
.brand__mark {
  /* stacked lockup (name under the mark, per Shlomo 2026-08-21): narrower
     and taller than the old horizontal wordmark; the logotype line ends up
     slightly LARGER than before at these widths */
  width: clamp(58px, 5vw, 72px);
  height: auto;
  display: block;
}

.nav { justify-self: center; }
.nav__list { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 2rem); }
.nav__link {
  font-size: 0.9375rem; font-weight: 500;
  color: #d3d8e2; padding: var(--sp-2) 0;
  position: relative; transition: color 0.16s var(--ease);
}
.nav__link:hover { color: #fff; }
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background-image: var(--grad-brand);
  transform: scaleX(0); transform-origin: left; transition: transform 0.2s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }

.siteheader__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); justify-self: end; }
.navtoggle {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: transparent; border: 1px solid var(--hairline-night);
  border-radius: var(--radius-sm); cursor: pointer;
}
.navtoggle__bar { display: block; width: 18px; height: 1.5px; background: #fff; transition: transform 0.2s var(--ease); }
.navtoggle[aria-expanded="true"] .navtoggle__bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bar:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- 9. Hero ------------------------------------------------------ */
/* Julia: FLAT BLACK, content left, art right. The art slot now carries Tal's
   supplied operational-network media as a full-bleed layer whose bright side
   sits right, matching her composition. */

.hero {
  background: var(--hero-black);
  overflow: hidden;
  /* bottom: the product sheet rises over the problem band now (2026-09-10),
     so the hero keeps only its own breathing room */
  padding-block: calc(84px + clamp(2.5rem, 0.8rem + 5vw, 4.5rem)) clamp(3rem, 1rem + 5vw, 5rem);
  min-height: clamp(560px, 82vh, 880px);
  display: flex;
  align-items: center;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video,
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}
/* Protects headline legibility over the media without dulling the artwork. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      #000 0%, rgba(0,0,0,0.97) 18%, rgba(0,0,0,0.9) 32%, rgba(0,0,0,0.74) 44%,
      rgba(0,0,0,0.5) 56%, rgba(0,0,0,0.28) 68%, rgba(0,0,0,0.12) 80%, rgba(0,0,0,0.3) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 36%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 18%);
}

/* The foot darkens in a single gradient; the crisp boundary itself is the
   sheet edge below, so nothing is smudged across the seam. */
.hero__dissolve {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(140px, 20vh, 230px);
  /* Settles the footage DOWN, not out: the foot stays faintly alive so the
     sheet's rounded edge and shadow visibly rise over the hero world instead
     of meeting dead black (2026-08-20 direction, Transition; end value 0.78
     ratified by the director over the doc's "true black" after the first
     seam render met solid black and the edge stopped reading). */
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.62) 70%,
    rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; max-width: 1400px; }
.hero__content { max-width: 43rem; }

/* Julia's eyebrow is a RECTANGLE, not a pill. */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #d5b6ff;
  border: 1px solid rgba(164, 62, 238, 0.62);
  border-radius: var(--radius-xs);
  padding: 0.5rem 0.85rem;
  margin-bottom: var(--sp-6);
  line-height: 1.25;
}

/* Eyebrow: solid, not gradient. Three reasons, all independent:
   1. Accessibility. The brand gradient's blue midpoint (#4263ea) measures
      4.20:1 on the flat-black hero. This text is 13px bold, so WCAG AA needs
      4.5:1 and roughly the middle third of the line failed. The solid lift
      token measures 7.62:1.
   2. Track B approval record §5 explicitly retires the gradient eyebrow as a
      site-wide device in favour of the disciplined section-label system, which
      every other label on this page already uses.
   3. Gradient text reads as decoration rather than meaning.
   Size, position, tracking and uppercase treatment are unchanged; only the
   fill is. Reverting is a one-line change if Tal prefers the gradient. */
.hero__eyebrow {
  display: block;
  font-size: clamp(0.6875rem, 0.64rem + 0.2vw, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
  color: var(--brand-purple-lift);
}

.hero__title {
  /* One size step below the original scale: the 2026-08-21 founder headline
     runs nine words, and at the old clamp it stacked five lines on a laptop
     and pushed the subhead below the fold. */
  font-size: clamp(2.3rem, 1.2rem + 4.1vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-5);
  /* Measure tuned to the final copy so the breaks land as
     Plan the whole / distribution day / together.
     The previous 34rem was set for the longer words of the retired headline and
     stranded "whole" on a line of its own. */
  max-width: 43rem;
}
.hero__sub {
  font-size: var(--fs-lead); line-height: 1.6;
  color: #b9c0cc; max-width: 33rem; margin-bottom: var(--sp-7);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Trust row: four capability facts beneath the CTAs, divided by hairlines. */
.trustrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: clamp(2rem, 1.1rem + 2.2vw, 3.25rem);
}
.trustrow__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-inline: clamp(0.9rem, 0.5rem + 1vw, 1.5rem);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.trustrow__item:first-child { padding-inline-start: 0; border-left: 0; }
.trustrow__icon { flex: 0 0 auto; color: var(--brand-purple-lift); display: block; }
.trustrow__icon svg { width: 22px; height: 22px; }
.trustrow__label {
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
  color: #c3cad6;
}

/* ---------- 10. Sheet transition (hero -> what-it-does) ------------------- */

/* The section rises over the hero's black foot as a rounded sheet. The
   boundary is a crafted object edge, not a gradient: nothing blends, so
   nothing can band. The former connector-line system (handoff band, SVG
   sweep, tail, section rail) is deleted per the 2026-08-20 direction. */
.planning {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--sheet-overlap));
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 40px -24px rgba(0, 0, 0, 0.38);
  padding-top: clamp(3.5rem, 2rem + 4vw, 6.5rem);
}
@media (max-width: 620px) {
  :root { --sheet-overlap: 44px; }
  .planning { border-radius: 16px 16px 0 0; }
}

/* ---------- 11. What ORKSTRA does · beats on the product stage ------------ */

.planning__head { max-width: 46rem; }

/* Wrapper provides the scroll runway on desktop. Its height is set by CSS
   only when JS has marked the page enhanced, so the no-JS page keeps its
   natural height and simply shows the stage once. */
.stagewrap { position: relative; --stage-h: min(80vh, 760px); }

/* One condition governs the whole desktop mechanic: pin, two-column stage,
   quiet/lit beats. Below it in EITHER dimension, the section uses the
   stacked layout, so a half-height desktop window never shows a pinned box
   with unreachable content (critic H2). */
@media (min-width: 1024px) and (min-height: 700px) {
  /* 232vh (was 280): four states stay comfortable and each beat change
     lands sooner. Optimove-benchmark pacing, no scroll interception. */
  html[data-enhanced] .stagewrap { height: 232vh; }
  html[data-enhanced] .stagewrap__pin {
    position: sticky;
    /* optically centred under the header, never jammed to the top */
    top: max(96px, calc((100vh - var(--stage-h)) / 2));
  }
  /* Unshell the pin: the stage runs nearly edge to edge (a scene, not a
     card). The beat index sits near the stage's own left edge; anchoring it
     to the page grid inside the fixed 380px column would crush the measure,
     so the stage keeps its own internal grid by design. */
  .stagewrap__pin { max-width: none; padding-inline: var(--stage-edge); }
}

.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(2rem, 3vw, 3.5rem);
  /* min-height, not height: if the beats column ever needs more room (short
     viewport, long wrap), the stage grows instead of clipping copy under
     overflow:hidden (critic C1). */
  min-height: var(--stage-h);
  /* Lit like a set, not filled like a card: a faint key from the upper
     left, falling off toward the edges. No drop shadow, no border: the
     tonal shift against the tint band is the boundary. */
  background:
    radial-gradient(120% 110% at 28% 12%, #14141a 0%, var(--night-base) 52%, var(--night-deep) 100%);
  border-radius: 16px;
  overflow: hidden;
}

/* --- beats: lighting model, no cards ------------------------------------- */
.beats {
  position: relative;
  z-index: 1;
  align-self: center;
  display: grid;
  gap: clamp(1.1rem, 2.4vh, 2rem);
  padding: clamp(1.75rem, 3.5vh, 2.75rem) clamp(1.25rem, 2vw, 2rem)
           clamp(1.75rem, 3.5vh, 2.75rem) clamp(2rem, 1rem + 2vw, 3.25rem);
}
.beat { position: relative; }

/* One understated position cue for the whole index: a 44px hairline that
   fills with overall section progress. No per-beat rails, no tracks. */
.beats::after {
  content: '';
  width: 44px; height: 2px; border-radius: 1px;
  margin-top: 0.25rem;
  background-color: rgba(255, 255, 255, 0.14);
  background-image: var(--grad-brand-text);
  background-repeat: no-repeat;
  background-size: calc(var(--sp, 0) * 100%) 100%;
}
@media (max-width: 1023px), (max-height: 699px) { .beats::after { display: none; } }

.beat__title {
  display: flex; align-items: baseline; gap: var(--sp-3);
  color: var(--ink-night-strong);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  margin-bottom: var(--sp-2);
  transition: opacity 0.3s var(--ease);
}
.beat__num {
  flex: none;
  font-size: var(--fs-small); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-night-muted);
  transition: color 0.3s var(--ease);
}
.beat__body {
  font-size: var(--fs-small); line-height: 1.55;
  color: var(--ink-night-body);
  max-width: 38ch;
  transition: opacity 0.3s var(--ease);
}
/* The quiet state exists only on enhanced desktop pages: with JS off, or on
   the stacked mobile layout, there is no active-beat mechanic, so every beat
   reads at full contrast. */
@media (min-width: 1024px) and (min-height: 700px) {
  html[data-enhanced] .beat__title { opacity: 0.85; }
  html[data-enhanced] .beat__body { opacity: 0.8; }
  html[data-enhanced] .beat.is-active .beat__title,
  html[data-enhanced] .beat.is-active .beat__body { opacity: 1; }
}
.beat.is-active .beat__num { color: var(--brand-purple-lift); }

/* --- the product, mounted large ------------------------------------------ */
.stage__view { position: relative; }

/* The camera never moves: every state renders into the same rect. Each
   platform page is shown COMPLETE (no zoom, no crop; Tal 2026-08-20 late):
   the media sizes itself inside the rect and the night stage mats the rest.
   The incoming state arrives as a masked reveal with a few px of depth; the
   outgoing state simply yields. */
.stage__shot {
  position: absolute; margin: 0;
  inset: clamp(1.25rem, 3vh, 2rem) clamp(1rem, 1.5vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  clip-path: inset(5% 0 0 0);
  transform: translateY(8px) scale(0.995);
  /* Outgoing fades IN PLACE: the pre-entry pose (clip, offset, scale) only
     resets after the fade has finished, so no visible geometry ever snaps
     (critic C1, round 3). */
  transition: opacity 0.18s var(--ease), clip-path 0s 0.2s, transform 0s 0.2s;
  pointer-events: none;
}
.stage__shot.is-shown {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: none;
  transition:
    opacity 0.3s var(--ease),
    clip-path 0.55s var(--ease),
    transform 0.55s var(--ease);
}

/* Whole pages, edge to edge of themselves: auto-sized within the rect so
   the mount chrome (radius, hairline, shadow) wraps the actual screenshot,
   not a letterbox. */
.stage__shot img,
.stage__shot video {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55);
  transform: scale(1.015) translateY(4px);
  transition: transform 0s 0.2s;   /* same deal: reset after the fade */
}

/* The recording's frame carries iPad OS chrome in its pixels. The element is
   given the app region's own ratio (768 x 540) and draws only that region:
   object-view-box where supported, with a top-biased cover as the fallback.
   Only OS chrome is ever trimmed, never the app. */
.stage__shot video.stage__vid {
  /* 2026-08-21 capture set: OS chrome is trimmed in the encode itself, so
     the element needs only its intrinsic ratio (pre-metadata sizing). */
  aspect-ratio: 1600 / 890;
}
.stage__shot.is-shown img,
.stage__shot.is-shown video {
  transform: none;
  transition: transform 0.7s var(--ease);
}

/* --- entrances (enhanced pages only; reduced-motion never hides content) -- */
@media (prefers-reduced-motion: no-preference) {
  html[data-enhanced] .fx {
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }
  html[data-enhanced] .fx[data-fx="2"] { transition-delay: 60ms; }
  html[data-enhanced] .fx[data-fx="3"] { transition-delay: 120ms; }
  html[data-enhanced] .stage.fx { transform: translateY(16px); transition-duration: 0.5s; }
  html[data-enhanced] .fx.is-in { opacity: 1; transform: none; transition-delay: 0ms; }
  html[data-enhanced] .fx.is-in[data-fx="2"] { transition-delay: 60ms; }
  html[data-enhanced] .fx.is-in[data-fx="3"] { transition-delay: 120ms; }
}

/* Reduced motion, per the 2026-08-20 ratification: all movement dies (the
   global kill zeroes every duration), but the state change keeps a short
   opacity-only fade — an instant swap reads as broken. Durations need
   !important to outrank the global reset's. */
@media (prefers-reduced-motion: reduce) {
  .stage__shot {
    clip-path: none; transform: none;
    transition-property: opacity;
    transition-duration: 0.24s !important;
  }
  .stage__shot img, .stage__shot video { transform: none; }
  .beat__title, .beat__body {
    transition-property: opacity;
    transition-duration: 0.3s !important;
  }
}

/* --- tablet and mobile: no pin, claim and evidence interleaved ------------ */
.beat__evidence { display: none; }

@media (max-width: 1023px), (max-height: 699px) {
  .stage {
    display: block; height: auto; min-height: 0;
    background: transparent; box-shadow: none;
    border-radius: 0; overflow: visible;
  }
  .beats { padding: 0; gap: clamp(2.25rem, 5vw, 3rem); }
  .beat__title { color: var(--ink-strong); }
  .beat__body { color: var(--ink-body); max-width: none; font-size: var(--fs-body); }
  .beat__num { color: var(--brand-purple-ink); }

  /* JS clones each screen under its beat in a slim night mount */
  .beat__evidence {
    display: block;
    margin-top: var(--sp-5);
    padding: clamp(0.375rem, 1.5vw, 0.625rem);
    background: var(--night-base);
    border-radius: 16px;
  }
  .beat__evidence img,
  .beat__evidence video {
    display: block; width: 100%; height: auto;
    border-radius: 10px;
  }

  /* Without JS there are no clones: the view shows the first screen once. */
  .stage__view { position: relative; margin-top: var(--sp-6); }
  html[data-enhanced] .stage__view { display: none; }
  .stage__shot { display: none; position: static; inset: auto; clip-path: none; transform: none; padding: clamp(0.375rem, 1.5vw, 0.625rem); background: var(--night-base); border-radius: 14px; }
  .stage__shot img, .stage__shot video { transform: none; }
  .stage__shot.is-shown { display: block; }
  .stage__shot::before { display: none; }
  .stage__shot img, .stage__shot video { width: 100%; height: auto; border-radius: 10px; }
}

/* ---------- 12. Industry fit · the eight constraints ---------------------- */

/* The night section rises over Section 2's tint as a dark sheet: the page's
   established boundary grammar (hero -> S2 sheet), inverted. No gradient, no
   line; the covered area is only S2's empty band padding, so the locked
   section itself is untouched. */
.industry {
  position: relative;
  z-index: 3;
  margin-top: -48px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 40px -24px rgba(10, 13, 24, 0.35);
}
@media (max-width: 620px) {
  .industry { margin-top: -32px; border-radius: 16px 16px 0 0; }
}

/* Environmental scene slot: one cinematic cold-chain loading environment,
   mounted with the Section 2 stage's near-full-bleed grammar. Ships hidden
   ([hidden]) until the produced asset exists; everything below is ready for
   it. The inner shade seats the photograph into the night band from within
   the mount, which is internal grading, not a section seam. */
.industry__scene {
  margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
  width: calc(100% - 2 * var(--stage-edge));
  aspect-ratio: 21 / 8;
  max-height: 460px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--night-mid);
}
.industry__scene img,
.industry__scene video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.industry__scene::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 13, 15, 0.5) 0%, rgba(13, 13, 15, 0) 22%,
                            rgba(13, 13, 15, 0) 72%, rgba(13, 13, 15, 0.55) 100%);
  pointer-events: none;
}

.realities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  row-gap: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

.reality {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  margin: calc(var(--sp-4) * -1);
  border-radius: var(--radius);
  border: 1px solid transparent;
  /* out: unhurried release */
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease),
              transform 0.28s var(--ease);
}

/* The whole constraint responds: brand wash across the item, icon tile and
   stroke lift together, copy brightens, 2px of rise. Gated to real pointers
   so touch devices never catch a stuck hover state. */
@media (hover: hover) and (pointer: fine) {
  .reality:hover {
    background:
      linear-gradient(100deg, rgba(164, 62, 238, 0.10) 0%, rgba(66, 99, 234, 0.06) 55%, rgba(24, 158, 189, 0.03) 100%);
    border-color: rgba(164, 62, 238, 0.28);
    transform: translateY(-2px);
    /* in: immediate */
    transition-duration: 0.16s;
  }
  .reality:hover .reality__icon {
    border-color: rgba(164, 62, 238, 0.45);
    background: rgba(164, 62, 238, 0.14);
    color: #d9b3ff;
  }
  .reality:hover .reality__title { color: #fff; }
  .reality:hover .reality__body { color: #c6cddc; }
}

.reality__icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--night-raise);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--brand-purple-lift);
  transition: border-color 0.28s var(--ease), background-color 0.28s var(--ease),
              color 0.28s var(--ease);
}
.reality__icon svg { width: 21px; height: 21px; }

.reality__title {
  font-size: 1.0625rem; color: #fff; margin-bottom: var(--sp-2);
  transition: color 0.28s var(--ease);
}
.reality__body {
  font-size: var(--fs-small); line-height: 1.62; color: var(--ink-night-body);
  max-width: 46ch;
  transition: color 0.28s var(--ease);
}

/* Entrance: the eight constraints cascade in once, 40ms apart. The list
   itself never hides (the .fx base state is neutralized), only its items. */
@media (prefers-reduced-motion: no-preference) {
  html[data-enhanced] .realities.fx { opacity: 1; transform: none; transition: none; }
  html[data-enhanced] .realities.fx > .reality {
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  }
  html[data-enhanced] .realities.fx.is-in > .reality { opacity: 1; transform: none; }
  html[data-enhanced] .realities.fx.is-in > .reality:nth-child(2) { transition-delay: 40ms; }
  html[data-enhanced] .realities.fx.is-in > .reality:nth-child(3) { transition-delay: 80ms; }
  html[data-enhanced] .realities.fx.is-in > .reality:nth-child(4) { transition-delay: 120ms; }
  html[data-enhanced] .realities.fx.is-in > .reality:nth-child(5) { transition-delay: 160ms; }
  html[data-enhanced] .realities.fx.is-in > .reality:nth-child(6) { transition-delay: 200ms; }
  html[data-enhanced] .realities.fx.is-in > .reality:nth-child(7) { transition-delay: 240ms; }
  html[data-enhanced] .realities.fx.is-in > .reality:nth-child(8) { transition-delay: 280ms; }
}

/* ---------- 13. Who it's for · two operating environments ----------------- */

/* Light sheet over the dark constraints section: the page's boundary grammar
   once more. Covers only Section 3's empty band padding; the locked section's
   code is untouched. */
.whofor {
  position: relative;
  z-index: 4;
  margin-top: -48px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 40px -24px rgba(0, 0, 0, 0.35);
}
@media (max-width: 620px) {
  .whofor { margin-top: -32px; border-radius: 16px 16px 0 0; }
}

/* This section's head sits closer to its panels than the site default: the
   short lead left a dead zone at tall viewports (lock-pass finding). */
.whofor .section-head { margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.25rem); }

/* Three segments since 2026-08-21 (founder segmentation: foodservice
   distribution, retail distribution, self-distribution). Three-up on desktop;
   the 900px rule below stacks them. Titles step down half a size so three
   columns keep breathing room. */
.audiences {
  display: grid;
  /* four segments since 2026-09-10 (3PL operators): two by two */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}
@media (min-width: 901px) {
  .audiences .audience__title { font-size: clamp(1.2rem, 0.95rem + 0.55vw, 1.45rem); }
  .audiences .audience { padding: clamp(1.5rem, 0.9rem + 1.6vw, 2.25rem); }
}
.audience {
  padding: clamp(1.75rem, 1rem + 2.2vw, 3rem);
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: flex-start;
  /* out: unhurried */
  transition: border-color 0.28s var(--ease), background-color 0.28s var(--ease),
              transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
/* One ground for all four (Tal, 2026-09-10: the tint/white alternation read
   as meaning it didn't have); identity lives in the label color and in the
   accent each card lifts toward on hover. A resting shadow with offset and
   blur keeps white cards from going flat on the white band. */
.audience--a, .audience--b, .audience--c, .audience--d {
  background: var(--day-white);
  border: 1px solid var(--day-edge);
  box-shadow: 0 1px 2px rgba(10, 13, 24, 0.04), 0 14px 32px -26px rgba(10, 13, 24, 0.22);
}

/* Whole-panel response, gated to real pointers. Each panel deepens toward its
   own accent: A toward blue, B toward purple. Restrained: tone, hairline and
   2px of lift, nothing else. */
@media (hover: hover) and (pointer: fine) {
  .audience:hover {
    transform: translateY(-4px);
    transition-duration: 0.18s;
  }
  /* the entrance system's resting transform/delay would otherwise outrank
     the lift on enhanced pages (critic H1, lock pass; pointer guard added in
     the S5 round when the same leak was caught on touch) */
  @media (hover: hover) and (pointer: fine) {
    html[data-enhanced] .audiences.fx.is-in > .audience:hover {
      transform: translateY(-4px);
      transition-delay: 0ms;
      transition-duration: 0.16s;
    }
  }
  /* each card lifts toward its own accent: hairline turns the accent, the
     shadow takes its hue, offset and blur intact */
  .audience--a:hover {
    border-color: rgba(47, 79, 216, 0.55);
    box-shadow: 0 2px 6px -2px rgba(47, 79, 216, 0.16), 0 24px 44px -22px rgba(47, 79, 216, 0.38);
  }
  .audience--b:hover {
    border-color: rgba(157, 60, 228, 0.5);
    box-shadow: 0 2px 6px -2px rgba(157, 60, 228, 0.16), 0 24px 44px -22px rgba(157, 60, 228, 0.36);
  }
  .audience--c:hover {
    border-color: rgba(24, 158, 189, 0.55);
    box-shadow: 0 2px 6px -2px rgba(24, 158, 189, 0.16), 0 24px 44px -22px rgba(24, 158, 189, 0.38);
  }
  .audience--d:hover {
    border-color: rgba(10, 13, 24, 0.42);
    box-shadow: 0 2px 6px -2px rgba(10, 13, 24, 0.12), 0 24px 44px -22px rgba(10, 13, 24, 0.32);
  }
}

.audience__label {
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brand-purple-ink); margin-bottom: var(--sp-5);
}
.audience__label--blue { color: #2f4fd8; }
/* darker step of the metrics teal (#189ebd) for AA at label size */
.audience__label--teal { color: #0e7391; }
.audience__label--ink { color: var(--ink-strong); }
.audience__title { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.85rem); line-height: 1.2; margin-bottom: var(--sp-4); }
.audience__body { font-size: var(--fs-body); color: var(--ink-body); }

/* the complexity markers: a quiet hairline list, no icons, fast to scan */
.audience__marks {
  margin-block: var(--sp-5);
  align-self: stretch;
}
.audience__marks li {
  font-size: var(--fs-small);
  color: var(--ink-body);
  padding-block: var(--sp-3);
}
.audience__marks li + li { border-top: 1px solid var(--day-edge); }

.audience__why {
  font-size: var(--fs-body);
  color: var(--ink-strong);
  font-weight: 600;
  margin-top: auto;
}

/* entrance: the two panels follow the head, 60ms apart */
@media (prefers-reduced-motion: no-preference) {
  html[data-enhanced] .audiences.fx { opacity: 1; transform: none; transition: none; }
  html[data-enhanced] .audiences.fx > .audience {
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
                border-color 0.28s var(--ease), background-color 0.28s var(--ease),
                box-shadow 0.28s var(--ease);
  }
  html[data-enhanced] .audiences.fx.is-in > .audience { opacity: 1; transform: none; }
  html[data-enhanced] .audiences.fx.is-in > .audience:nth-child(2) { transition-delay: 60ms; }
  html[data-enhanced] .audiences.fx.is-in > .audience:nth-child(3) { transition-delay: 120ms; }
  html[data-enhanced] .audiences.fx.is-in > .audience:nth-child(4) { transition-delay: 180ms; }
}

/* ---------- 14. Proof · What ORKSTRA Delivers ----------------------------- */

/* Dark sheet over the light audience section: the page's alternating
   boundary grammar, fourth appearance. Covers only Section 4's empty band
   padding. */
.proofband {
  position: relative;
  z-index: 5;
  margin-top: -48px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 40px -24px rgba(0, 0, 0, 0.35);
}
@media (max-width: 620px) {
  .proofband { margin-top: -32px; border-radius: 16px 16px 0 0; }
}

/* Five proof slabs: typography-first columns, not dashboard widgets. At rest
   a slab is only its accent tick, its value and its line; a hairline and a
   faint brand halo materialize on hover. The tick hue steps the ORKSTRA
   range purple -> blue -> teal across the row (--tick per slab). */
.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
}
.metric {
  text-align: center;
  padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem) clamp(0.75rem, 0.4rem + 0.8vw, 1.25rem);
  border-radius: 16px;
  border: 1px solid transparent;
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease),
              box-shadow 0.24s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .metric:hover {
    transform: translateY(-2px);
    border-color: var(--tick-soft);
    box-shadow: 0 10px 30px -20px var(--tick-soft);
    transition-duration: 0.2s;
  }
  .metric:hover .metric__tick { width: 44px; }
}

.metric__tick {
  display: inline-block;
  width: 28px; height: 3px; border-radius: 2px;
  background: var(--tick);
  margin-bottom: clamp(1rem, 0.6rem + 1vh, 1.5rem);
  transition: width 0.24s var(--ease);
}
/* All five values share one block height and sit on its floor, so numerals,
   words and the prefixed value keep a common baseline and every label row
   starts at the same y. */
.metric__value {
  font-size: clamp(1.9rem, 1.1rem + 2.1vw, 2.9rem);
  line-height: 1.05; font-weight: 700; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-night-strong);
  margin-bottom: var(--sp-3);
  white-space: nowrap;
  min-height: clamp(3.3rem, 2.2rem + 2.8vw, 4.5rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center;
}
/* Word-values sit one step below the numerals: a number is proof, a word is
   a caption to it, and "Real-time" must never outshout "99%". Also keeps
   every value inside its slab at the 5-up width. */
.metric__value--word { font-size: clamp(1.45rem, 0.95rem + 1.25vw, 2rem); }
/* "Later cut-offs" runs longer than the other word values; one step down and
   nowrap keep it on a single line inside its slab at the 5-up width */
.metric__value--long { font-size: clamp(1.3rem, 0.85rem + 1.1vw, 1.75rem); white-space: nowrap; }
.metric__prefix {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-night-body);
  margin-bottom: 2px;
}
.metric__label {
  font-size: var(--fs-small); line-height: 1.5;
  color: var(--ink-night-body);
  max-width: 20ch; margin-inline: auto;
}

/* validation line: muted statement, stronger linked phrase */
.proof__foot {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  text-align: center;
  font-size: var(--fs-body);
}
.proof__foot-muted { color: var(--ink-night-muted); }
.proof__foot-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-night-strong);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(192, 125, 255, 0.55);
  text-underline-offset: 4px;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.proof__foot-link:hover { color: var(--brand-purple-lift); text-decoration-color: currentColor; }

/* entrance: label, heading, then the five slabs left to right */
@media (prefers-reduced-motion: no-preference) {
  html[data-enhanced] .metrics.fx { opacity: 1; transform: none; transition: none; }
  html[data-enhanced] .metrics.fx > .metric {
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
                border-color 0.24s var(--ease), box-shadow 0.24s var(--ease);
  }
  html[data-enhanced] .metrics.fx.is-in > .metric { opacity: 1; transform: none; }
  html[data-enhanced] .metrics.fx.is-in > .metric:nth-child(2) { transition-delay: 60ms; }
  html[data-enhanced] .metrics.fx.is-in > .metric:nth-child(3) { transition-delay: 120ms; }
  html[data-enhanced] .metrics.fx.is-in > .metric:nth-child(4) { transition-delay: 180ms; }
  html[data-enhanced] .metrics.fx.is-in > .metric:nth-child(5) { transition-delay: 240ms; }
  /* the hover lift must outrank the entrance resting transform (S4 lesson),
     and only for real pointers: touch taps must not stick a half-state */
  @media (hover: hover) and (pointer: fine) {
    html[data-enhanced] .metrics.fx.is-in > .metric:hover {
      transform: translateY(-2px);
      transition-delay: 0ms;
      transition-duration: 0.2s;
    }
  }
}

/* intentional smaller layouts: 2+2+1 on tablet, single column on phones */
@media (max-width: 1199px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:last-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .metrics { grid-template-columns: 1fr; gap: 0.5rem; }
  .metric { padding-block: 1.25rem; }
  .metric:last-child { grid-column: auto; }
}

/* ---------- 15. Why ORKSTRA · the distribution day ------------------------ */

/* Light sheet over the dark proof band: fifth appearance of the boundary
   grammar. Covers only the proof section's empty band padding. */
.whyband {
  position: relative;
  z-index: 6;
  margin-top: -48px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 40px -24px rgba(0, 0, 0, 0.35);
}
@media (max-width: 620px) {
  .whyband { margin-top: -32px; border-radius: 16px 16px 0 0; }
}

/* The film window: near-full-bleed, the same mount grammar as the Section 2
   stage and the Section 3 scene slot. Holds the distribution-day film; the
   dark ground shows only while the poster/film paints in. */
.whyfilm {
  margin: 0 auto clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  width: calc(100% - 2 * var(--stage-edge));
  aspect-ratio: 21 / 9;
  max-height: 560px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--night-mid);
}
.whyfilm img,
.whyfilm video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Seats the plate on the white sheet. The film ends its loop on a near-white
   sunrise sky, which dissolves the mount's top corners into the band; one
   hairline holds the boundary across the whole luminance swing. The sibling
   scene slot carries the opposite device (an inner shade) for the night band. */
.whyfilm::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(11, 15, 26, 0.10);
  pointer-events: none;
}
/* Phones sit below the playback gate, so the poster IS the section here. At
   21:9 a 390px screen gives it 153px of height and the loading bay becomes a
   smudge; 16:9 lets object-fit drop the dark side jambs and keep the action. */
@media (max-width: 620px) {
  .whyfilm { aspect-ratio: 16 / 9; }
}
/* The one cinematic motion idea: the window opens from a slightly inset mask
   and settles from 1.03. Runs once; the page stays calm afterwards. */
@media (prefers-reduced-motion: no-preference) {
  html[data-enhanced] .whyfilm.fx {
    opacity: 1;
    transform: scale(1.03);
    clip-path: inset(9% 7% 9% 7% round 24px);
    transition: clip-path 0.9s var(--ease), transform 0.9s var(--ease);
  }
  html[data-enhanced] .whyfilm.fx.is-in {
    transform: none;
    clip-path: inset(0 0 0 0 round 16px);
  }
}

/* Four editorial columns, no cards: keyword title over one line, a single
   hairline above the row of them. */
.whys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  row-gap: var(--sp-6);
  border-top: 1px solid var(--day-edge);
  padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}
.whyrow__title {
  /* the site's h3 token, same as every other h3 including the FAQ questions
     directly below: pinning this to the token's floor left the four
     differentiators smaller than the accordion labels under them */
  font-size: var(--fs-h3);
  color: var(--brand-purple-ink);
  margin-bottom: var(--sp-3);
}
.whyrow__body { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-body); }

/* rows follow the film, left to right */
@media (prefers-reduced-motion: no-preference) {
  html[data-enhanced] .whys.fx { opacity: 1; transform: none; transition: none; }
  html[data-enhanced] .whys.fx > .whyrow {
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  }
  html[data-enhanced] .whys.fx.is-in > .whyrow { opacity: 1; transform: none; }
  html[data-enhanced] .whys.fx.is-in > .whyrow:nth-child(2) { transition-delay: 60ms; }
  html[data-enhanced] .whys.fx.is-in > .whyrow:nth-child(3) { transition-delay: 120ms; }
  html[data-enhanced] .whys.fx.is-in > .whyrow:nth-child(4) { transition-delay: 180ms; }
}

@media (max-width: 1023px) {
  .whys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .whys { grid-template-columns: 1fr; }
}

/* ---------- 15b. Free trial ---------------------------------------------- */

.trial__lead { margin-inline: auto; max-width: 54ch; }

.phases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.phase {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.phase__num {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-purple);
  margin-bottom: var(--sp-4);
}
.phase__title {
  font-size: var(--fs-h3);
  color: #fff;
  margin-bottom: var(--sp-3);
}
.phase__body { font-size: var(--fs-small); line-height: 1.65; color: var(--ink-night-body); }

.trial__foot {
  margin-top: clamp(1.5rem, 1rem + 1.25vw, 2.25rem);
  margin-inline: auto;
  max-width: 62ch;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-night-muted);
}
.trial__cta { margin-top: var(--sp-6); display: flex; justify-content: center; }

@media (max-width: 900px) {
  .phases { grid-template-columns: 1fr; }
}

/* ---------- 16. FAQ ------------------------------------------------------ */

.faq { border-top: 1px solid var(--hairline-day); }
.faq__item { border-bottom: 1px solid var(--hairline-day); }
.faq__item h3 { margin: 0; font-weight: inherit; letter-spacing: normal; }
.faq__q {
  width: 100%; min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-5) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-strong); transition: color 0.16s var(--ease);
}
.faq__q:hover { color: var(--brand-purple-ink); }
.faq__icon { flex: 0 0 auto; position: relative; width: 14px; height: 14px; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 1.5px;
  background: currentColor; transition: transform 0.22s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding: 0 0 var(--sp-6); max-width: 76ch; }
.faq__a p { font-size: var(--fs-body); color: var(--ink-body); }

/* ---------- 17. Closing band --------------------------------------------- */

.closing__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem); align-items: center;
}
.closing .h2 { max-width: 20ch; }
.closing__text { margin-top: var(--sp-5); max-width: 54ch; }

/* ---------- 18. Footer --------------------------------------------------- */

.sitefooter {
  background: var(--night-deep);
  border-top: 1px solid var(--hairline-night);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--sp-6);
  color: var(--ink-night-body);
}
.sitefooter__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-7); padding-bottom: var(--sp-7);
}
.sitefooter__mark { width: 104px; margin-bottom: var(--sp-4); }
.sitefooter__desc { font-size: var(--fs-small); max-width: 44ch; }
.sitefooter__contact { text-align: right; }
.sitefooter__ctitle {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-night-strong); margin-bottom: var(--sp-4);
}
.sitefooter__contact li + li { margin-top: var(--sp-2); }
.sitefooter__contact a { font-size: var(--fs-small); color: var(--ink-night-body); transition: color 0.16s var(--ease); }
.sitefooter__contact a:hover { color: #fff; }
/* Scoped past `.sitefooter__contact a`, which would otherwise mute the button text. */
.sitefooter__contact .sitefooter__cbtn { margin-top: var(--sp-5); color: #fff; }
.sitefooter__legal {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  padding-top: var(--sp-5); border-top: 1px solid var(--hairline-night);
  font-size: var(--fs-small); color: var(--ink-night-muted);
}
.sitefooter__links { display: flex; gap: var(--sp-6); }
.sitefooter__links a:hover { color: #fff; }

/* ---------- 19. Demo dialog + form --------------------------------------- */

.dialog {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--sp-4);
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.dialog[hidden] { display: none; }
.dialog__panel {
  position: relative; width: min(560px, 100%);
  max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--night-mid); border: 1px solid var(--hairline-night);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.dialog__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--hairline-night);
  border-radius: var(--radius-sm); color: var(--ink-night-body); cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.dialog__close:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.dialog__title { font-size: 1.5rem; color: #fff; margin-bottom: var(--sp-2); }
.dialog__sub { font-size: var(--fs-small); color: var(--ink-night-body); margin-bottom: var(--sp-6); }

.form { display: grid; gap: var(--sp-4); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { display: grid; gap: var(--sp-2); min-width: 0; }
.field__label { font-size: var(--fs-small); font-weight: 600; color: #fff; }
.field__opt { font-weight: 400; color: var(--ink-night-muted); }
.field__input {
  width: 100%; min-height: 46px; padding: var(--sp-3) var(--sp-4);
  font: inherit; font-size: var(--fs-small); color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-night); border-radius: var(--radius-sm);
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.field__input:hover { border-color: rgba(255,255,255,0.24); }
.field__input:focus { outline: none; border-color: var(--brand-teal); background: rgba(255,255,255,0.07); }
.field__input:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 1px; }
.field__input:user-invalid { border-color: #e08a8a; }
textarea.field__input { resize: vertical; min-height: 84px; line-height: 1.5; }
.form__notice {
  font-size: var(--fs-small); color: #fff;
  background: rgba(164, 62, 238, 0.12); border: 1px solid rgba(164, 62, 238, 0.4);
  border-radius: var(--radius-sm); padding: var(--sp-4);
}
.form[hidden] { display: none; } /* .form's display:grid outranks the UA [hidden] rule */
.form__notice[hidden] { display: none; }
.form__notice a { text-decoration: underline; }
/* success reads in the metrics teal, the site's confirmation register */
.form__notice--ok {
  background: rgba(24, 158, 189, 0.14);
  border-color: rgba(24, 158, 189, 0.45);
}
/* honeypot: off-canvas, not display:none, so naive bots still render it */
.field--hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-2); }

/* ---------- 20. Responsive ----------------------------------------------- */

@media (max-width: 1100px) {
}

@media (max-width: 1023px) {
  .siteheader__inner { grid-template-columns: 1fr auto; min-height: 72px; }
  .hero { padding-top: calc(72px + clamp(2rem, 0.8rem + 4vw, 3.5rem)); }
  .navtoggle { display: flex; }
  .nav {
    grid-column: 1 / -1;
    position: absolute; inset: 100% 0 auto 0;
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-block: 1px solid var(--hairline-night);
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline-night); }
  .nav__list li:last-child .nav__link { border-bottom: 0; }
  .nav__link::after { display: none; }

  .suite { grid-template-columns: 1fr; }
  .section-head--wide .h2 { max-width: 26ch; }
}

@media (max-width: 900px) {
  .realities { grid-template-columns: 1fr; }
  .audiences { grid-template-columns: 1fr; }
  .closing__inner { grid-template-columns: 1fr; }
  .sitefooter__inner { grid-template-columns: 1fr; }
  .sitefooter__contact { text-align: left; }
}

@media (max-width: 760px) {
  .metric { min-height: 0; }
}

@media (max-width: 620px) {
  /* Keep the wordmark legible: the grid column must not be allowed to crush it.
     The nav CTA is trimmed to buy the space back. */
  .brand__mark { width: 54px; max-width: none; }
  .siteheader__actions { gap: var(--sp-2); }
  .siteheader__actions .btn--primary {
    font-size: 0.75rem;
    padding-inline: var(--sp-4);
    letter-spacing: 0;
  }
  .siteheader__actions .btn__arrow { display: none; }

  .hero { min-height: 0; }
  .trustrow { margin-top: var(--sp-7); }
  .trustrow__item {
    flex: 0 0 calc(50% - 0.5px);
    border-left: 0;
    padding-inline: 0;
    padding-block: var(--sp-3);
  }
  .trustrow__item:nth-child(even) { padding-inline-start: var(--sp-4); border-left: 1px solid rgba(255,255,255,0.14); }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.9) 100%);
  }
  .hero__cta .btn { width: 100%; }
  .hero__title { max-width: none; }
  .form__row { grid-template-columns: 1fr; }
  .form__actions { flex-direction: column-reverse; }
  .form__actions .btn { width: 100%; }
  .closing__cta .btn { width: 100%; }
  .faq__q { font-size: 1rem; gap: var(--sp-4); }
  .sitefooter__legal { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .step { padding-left: var(--sp-5); }
}

/* ============================================================
   Legal pages (privacy/, terms/) — static reading pages.
   They load no main.js, so the header is a solid night bar
   (the main page's transparent-to-solid scroll behavior needs JS).
   ============================================================ */
.legalpage .siteheader {
  position: static;
  background: var(--night-base);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Two children only (no nav), so drop the 3-column grid's empty center track. */
.legalpage .siteheader__inner { grid-template-columns: 1fr auto; }
.legalpage .siteheader__actions { justify-self: end; }
.legal-hero { padding-block: var(--sp-8) var(--sp-7); }
.legal-hero h1 { font-size: var(--fs-h2); line-height: var(--lh-snug); margin: var(--sp-3) 0; }
.legal-hero__meta { color: var(--ink-night-muted); font-size: var(--fs-small); }

.legal { max-width: 72ch; }
.legal h2 {
  font-size: 1.25rem; line-height: var(--lh-snug); color: var(--ink-strong);
  margin: var(--sp-7) 0 var(--sp-3);
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 var(--sp-4); }
.legal ul { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
.legal li { margin-bottom: var(--sp-2); }
.legal a { color: var(--brand-purple-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--brand-blue); }
.legal strong { color: var(--ink-strong); }


/* ---------- 2026-09-10 · The problem ------------------------------------ */
/* One world with the hero: same black, a hairline to mark the seam, and the
   product sheet's overlap carried at this band's foot instead of the hero's.
   Two columns — the statement leads, the three leaks answer as a ledger. */
.problem {
  background: var(--hero-black);
  padding-top: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
  padding-bottom: calc(clamp(3.5rem, 1.5rem + 6vw, 6.5rem) + var(--sheet-overlap));
}
.problem__inner {
  border-top: 1px solid var(--hairline-night);
  padding-top: clamp(2.5rem, 1rem + 3.5vw, 4.25rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(2.5rem, 1rem + 6vw, 7rem);
  align-items: start;
}
.problem__lede .h2 { max-width: 17ch; text-wrap: balance; }
.problem__lede .lead { margin-top: var(--sp-5); max-width: 40ch; }
.problem__turn {
  margin-top: var(--sp-4);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-night-strong);
}
.leaks { border-top: 1px solid var(--hairline-night); }
.leak {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  column-gap: var(--sp-6);
  row-gap: var(--sp-2);
  align-items: baseline;
  padding-block: clamp(1.25rem, 0.75rem + 1.5vw, 1.875rem);
  border-bottom: 1px solid var(--hairline-night);
}
.leak__title { font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink-night-strong); }
.leak__body { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-night-body); }
/* rows follow the statement, top to bottom (same cadence as the Why rows) */
@media (prefers-reduced-motion: no-preference) {
  html[data-enhanced] .leaks.fx { opacity: 1; transform: none; transition: none; }
  html[data-enhanced] .leaks.fx > .leak {
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  }
  html[data-enhanced] .leaks.fx.is-in > .leak { opacity: 1; transform: none; }
  html[data-enhanced] .leaks.fx.is-in > .leak:nth-child(2) { transition-delay: 60ms; }
  html[data-enhanced] .leaks.fx.is-in > .leak:nth-child(3) { transition-delay: 120ms; }
}
@media (max-width: 900px) {
  .problem__inner { grid-template-columns: 1fr; row-gap: clamp(2rem, 1rem + 3vw, 3rem); }
  .problem__lede .h2 { max-width: none; }
  .leak { grid-template-columns: 1fr; }
}