/* ===========================================================================
   CASEFLOW NOTE — marketing site
   ---------------------------------------------------------------------------
   Aesthetic: "Daylight Eucalypt" — the app's own design system (Fraunces +
   DM Sans, cream + eucalyptus teal, from yarn-note/utils/theme.ts) in a bright,
   warm, airy register. The organising image is the light in the hero film:
   late-afternoon sun, a warm room, a phone in one hand.

   Light grounds carry the whole page. Exactly two dark moments — the practice
   doctrine quote and the footer — and both are deep EUCALYPTUS, not black, so
   the page never goes cold.

   Zero dependencies — no GSAP, no Lenis, no CDN JS. A content site with an
   LCP budget of 2.5s does not get to spend 90KB on scroll easing; the reveal
   work is ~2KB of IntersectionObserver in script.js.
   =========================================================================== */

/* ===========================================================================
   1 · TOKENS
   =========================================================================== */
:root {
  /* — Paper (the page lives here) — */
  --paper:    #FBF9F5;
  --paper-2:  #F4F1EA;
  --paper-3:  #EDE8DE;
  --surface:  #FFFFFF;
  --line:     #E6E1D6;
  --line-2:   #D5CEC0;

  /* — Deep eucalyptus (the only dark grounds) — */
  --deep:     #103129;
  --deep-2:   #164036;

  /* — Eucalyptus (brand) — */
  --euc:       #217A6A;   /* AA on white; the workhorse accent */
  --euc-mid:   #2A8C7A;   /* app primary — decorative use only */
  --euc-light: #4FC0A6;   /* accents on the deep grounds */
  --euc-deep:  #12483E;
  --euc-wash:  #E6F1ED;
  --euc-wash2: #D5E9E2;

  /* — Warmth + signal — */
  --gold:      #B8862B;   /* decorative only — fails AA as text */
  --gold-ink:  #8A6520;   /* >=4.55:1 on every surface — use for any gold TEXT */
  --gold-wash: #FAF0DC;
  --clay:      #A05839;   /* >=4.57:1 on every surface */
  --clay-wash: #F9EBE4;

  /* — Ink — */
  --ink:    #16241F;
  --ink-2:  #4E605A;
  --ink-3:  #636E69;   /* >=4.55:1 on EVERY surface incl. the tinted washes.
                          Was #82908A (3.17:1). Tuned against --clay-wash, the
                          darkest ground it lands on — tuning against --paper
                          alone still failed on the wash panels. */
  --on-deep:   #EDF4F1;
  --on-deep-2: rgba(237,244,241,.76);
  --on-deep-3: rgba(237,244,241,.58);

  /* — Type — */
  --display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* — Rhythm — */
  --gut:    clamp(20px, 5vw, 40px);
  --band-y: clamp(72px, 10vw, 138px);
  --wrap:   1180px;

  /* — Radii — */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* — Motion — */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* — Elevation, warm-tinted so cards sit on cream not grey — */
  --lift-1: 0 1px 2px rgba(22,36,31,.04), 0 6px 16px -8px rgba(22,36,31,.08);
  --lift-2: 0 2px 4px rgba(22,36,31,.04), 0 18px 40px -18px rgba(22,36,31,.16);
  --lift-3: 0 30px 70px -30px rgba(22,36,31,.24);
}

/* ===========================================================================
   2 · RESET & BASE
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` must beat the component display rules below — the App Store CTA
   and the sound toggle both rely on it to stay off the page. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
code { font-family: var(--mono); font-size: .88em; letter-spacing: -.01em; }

::selection { background: var(--euc-wash2); color: var(--euc-deep); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  transform: translateY(-160%);
  background: var(--euc); color: #fff;
  padding: 11px 18px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: none; }

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

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gut);
}
.wrap-narrow { max-width: 760px; }

/* ===========================================================================
   3 · ATMOSPHERE
   Grain stays, but on a light ground it multiplies at low opacity — an
   overlay blend (which is what a dark page wants) turns cream milky.
   =========================================================================== */
.grain {
  position: fixed; inset: -50%;
  z-index: 3; pointer-events: none;
  opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: grain-drift 7s steps(6) infinite;
}
@keyframes grain-drift {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-2%,1.5%) }
  40% { transform: translate(1.5%,-1%) }
  60% { transform: translate(-1%,-2%) }
  80% { transform: translate(2%,1%) }
}

/* ===========================================================================
   4 · TYPE
   =========================================================================== */
.display {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "SOFT" 34, "opsz" 144;
  font-size: clamp(2.35rem, 4.9vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}
.display em {
  font-style: italic; font-weight: 300;
  font-variation-settings: "SOFT" 64, "opsz" 144;
  color: var(--euc);
}
.display-block em { display: block; }
.display-sm { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 28, "opsz" 100;
  font-size: clamp(1.95rem, 4.2vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.024em;
  color: var(--ink);
  text-wrap: balance;
}
.h2 em {
  font-style: italic;
  font-variation-settings: "SOFT" 62, "opsz" 100;
  color: var(--euc);
}
.h2-light { color: var(--on-deep); }
.h2-light em { color: var(--euc-light); }
.h2-sm { font-size: clamp(1.65rem, 3.2vw, 2.35rem); }

.eyebrow {
  display: inline-flex;
  /* flex-start, not center: on narrow screens the eyebrow wraps to two lines
     and a centred pip drifts down beside the gap between them. */
  align-items: flex-start;
  gap: 9px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--euc);
  margin-bottom: 18px;
}
.eyebrow-light { color: var(--euc-light); }

.pip {
  width: 6px; height: 6px; border-radius: 50%;
  flex: none; margin-top: .42em;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(184,134,43,.6);
  animation: pip 2.6s var(--ease) infinite;
}
@keyframes pip {
  0%   { box-shadow: 0 0 0 0 rgba(184,134,43,.55) }
  70%  { box-shadow: 0 0 0 9px rgba(184,134,43,0) }
  100% { box-shadow: 0 0 0 0 rgba(184,134,43,0) }
}

.lede {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 46ch;
  margin-top: 20px;
}

.prose { font-size: 1.02rem; line-height: 1.72; color: var(--ink-2); max-width: 62ch; }
.prose + .prose { margin-top: 1.1em; }
.prose-dim { color: var(--ink-3); font-size: .95rem; }

.sec-head { max-width: 760px; margin-bottom: clamp(40px, 5.5vw, 68px); }
.sec-lede { font-size: 1.04rem; line-height: 1.68; color: var(--ink-2); margin-top: 20px; max-width: 58ch; }
.sec-lede-light { color: var(--on-deep-2); }

/* ===========================================================================
   5 · BUTTONS
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600;
  letter-spacing: -.005em; white-space: nowrap;
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out),
              background-color .28s var(--ease), border-color .28s var(--ease),
              color .28s var(--ease);
}
.btn svg { flex: none; transition: transform .34s var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--euc); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 10px 24px -10px rgba(33,122,106,.6);
}
.btn-primary:hover {
  background: var(--euc-deep);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 18px 34px -12px rgba(33,122,106,.55);
}

.btn-outline {
  color: var(--euc-deep);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-outline:hover { background: #fff; border-color: var(--euc); }

.btn-onDeep {
  color: var(--on-deep);
  border: 1px solid rgba(237,244,241,.26);
}
.btn-onDeep:hover { border-color: rgba(237,244,241,.55); background: rgba(237,244,241,.06); }

.btn-lg { padding: 17px 32px; font-size: 16px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ===========================================================================
   6 · NAV
   =========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-stuck {
  background: rgba(251,249,245,.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 16px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-glyph { color: var(--euc); flex: none; transition: transform .5s var(--ease-out); }
.brand:hover .brand-glyph { transform: rotate(-14deg); }
.brand-name {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "SOFT" 20, "opsz" 40;
  font-size: 19.5px; letter-spacing: -.018em;
}

.nav-menu { display: flex; align-items: center; gap: 3px; }
.nav-menu > a {
  padding: 9px 13px; font-size: 14.5px; font-weight: 500;
  color: var(--ink-2); border-radius: var(--r-pill);
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav-menu > a:hover { color: var(--ink); background: rgba(22,36,31,.05); }

.nav-cta {
  margin-left: 8px;
  background: var(--euc) !important; color: #fff !important;
  padding: 10px 20px !important;
  box-shadow: 0 8px 20px -10px rgba(33,122,106,.75);
}
.nav-cta:hover { background: var(--euc-deep) !important; }

.nav-toggle {
  display: none; width: 42px; height: 42px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: rgba(255,255,255,.7);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 17px; height: 1.6px;
  background: var(--ink); border-radius: 2px;
  transition: transform .35s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.3px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed; inset: 72px 12px auto 12px;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px; border-radius: var(--r-lg);
    background: rgba(251,249,245,.97);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--line);
    box-shadow: var(--lift-3);
    opacity: 0; transform: translateY(-10px) scale(.985);
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .35s var(--ease-out);
  }
  .nav-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-menu > a { padding: 13px 16px; font-size: 16px; }
  .nav-cta { margin: 6px 0 0; text-align: center; }
}

/* ===========================================================================
   7 · HERO
   Film directly under the menu, filling the first screen. A glass panel sits
   over its lower third carrying the headline, the CTA and the three proof
   points — so the whole proposition is above the fold without a separate
   headline block pushing the film down.

   The panel is positioned to clear the film's four caption cards, which live
   in the middle band. It does cover the film's burnt-in tagline; the headline
   inside the panel says the same thing in our own words.

   `height` not `min-height` — an `fr` track inside an auto-sized grid resolves
   to its content size, so the film would keep its full 16:9 height and push
   itself past the fold.
   =========================================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding-top: 70px;             /* clears the fixed nav */
  background: var(--paper);
  overflow: hidden;
}

.hero-film { position: relative; min-height: 0; overflow: hidden; }
.hero-film picture { display: block; width: 100%; height: 100%; }
.hero-film video,
.hero-film .hero-plate {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Art direction, not a single crop. Retuned 7 Aug for the wider plate:
     the subject now sits LOW and LEFT (chair and throw in the bottom-left
     quadrant, phone at roughly 28% across, 38% down) with the right half
     given over to floor and window light. The old values were framed for the
     previous, much tighter plate and cropped straight onto blank wall.

     Which axis bites depends on the box: on desktop the box is wider than
     16:9, so the image fits to width and only the Y matters; below 900px the
     box is squarer than the image, so it fits to height and only the X does.
     Both are set everywhere anyway — the inactive one costs nothing. */
  object-position: 28% 52%;
}

/* Wide desktop — the full scene reads, so sit near centre. */
@media (min-width: 1500px) {
  .hero-film video, .hero-film .hero-plate { object-position: 28% 49%; }
}
/* Laptop / small desktop — pull toward the phone as the frame narrows. */
@media (max-width: 1180px) and (min-width: 901px) {
  .hero-film video, .hero-film .hero-plate { object-position: 28% 56%; }
}
/* Feather the top edge into the cream so the film reads as part of the page
   rather than a rectangle butting the menu. */
.hero-film::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 58px; z-index: 2;
  background: linear-gradient(180deg, var(--paper) 0%, rgba(251,249,245,0) 100%);
  pointer-events: none;
}
.hero-film::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 26%; z-index: 1;
  background: linear-gradient(180deg, rgba(251,249,245,0) 0%, rgba(251,249,245,.32) 60%, rgba(251,249,245,.72) 100%);
  pointer-events: none;
}


/* ── feature rail ────────────────────────────────────────────────────────
   The four things the product does, as glass chips over the plate. These are
   HTML, not baked into the artwork, for two reasons: the artwork's own
   captions were wrong and needed a re-render to fix, and text over an image
   is invisible to search engines and screen readers.

   Positioned right-of-centre over the quiet blurred background. The phone
   stays the focal point and is never covered.
   ──────────────────────────────────────────────────────────────────────── */
.hero-rail {
  position: absolute; z-index: 3;
  right: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  top: clamp(96px, 15vh, 200px);
  display: grid;
  gap: 8px;
  width: clamp(240px, 26vw, 300px);
}

/* Short laptops: tighten the chips so all four clear the glass panel. */
@media (min-width: 901px) and (max-height: 840px) {
  .hero-rail { top: 88px; gap: 6px; }
  .rail-item { padding: 9px 13px; border-radius: 12px; }
  .rail-ico { width: 24px; height: 24px; border-radius: 8px; }
  .rail-ico svg { width: 14px; height: 14px; }
  .rail-txt { font-size: 11.8px; line-height: 1.34; }
  .rail-txt b { font-size: 12.5px; }
}

.rail-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 15px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(252,250,247,.80), rgba(249,246,240,.62));
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 18px 34px -22px rgba(16,49,41,.45);
  /* Staggered entrance so the rail reads as a sequence, matching the flow it
     describes, rather than four things appearing at once. */
  opacity: 0;
  transform: translateY(10px);
  animation: rail-in .7s var(--ease-out) forwards;
  animation-delay: calc(.35s + var(--i) * .11s);
}
@keyframes rail-in { to { opacity: 1; transform: none; } }

.rail-ico {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--euc-wash);
  color: var(--euc);
}
.rail-txt {
  font-size: 12.4px;
  line-height: 1.4;
  color: var(--ink-2);
}
.rail-txt b {
  display: block;
  font-size: 13.2px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rail-item { background: rgba(251,249,245,.95); }
}

/* Below the desktop breakpoint the rail can't float — it would sit on the
   phone. It becomes a two-up grid in the flow, under the glass card. This
   breakpoint MUST match the one where .hero-glass stops being absolute
   (900px); if the rail goes in-flow while the panel is still out of flow,
   they occupy the same space and overlap. */
@media (max-width: 900px) {
  .hero-rail {
    position: static; transform: none;
    width: auto;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px var(--gut) 0;
  }
  /* Off the photo, the chips sit on cream — and cream glass on cream is
     invisible. They become plain surfaces with a real border instead. */
  .rail-item {
    background: var(--surface);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-color: var(--line);
    box-shadow: var(--lift-1);
    animation-delay: calc(.1s + var(--i) * .07s);
  }
}
@media (max-width: 560px) {
  .hero-rail { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-item { opacity: 1; transform: none; animation: none; }
}

/* ── the glass panel ─────────────────────────────────────────────────────
   Real glass needs three things working together: a translucent tint so the
   film reads through it, a blur heavy enough that the film becomes texture
   rather than competing detail, and a bright hairline on the top edge where
   light would catch. Without the third it looks like flat opacity.
   ──────────────────────────────────────────────────────────────────────── */
.hero-glass {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(12px, 1.8vw, 22px);

  /* Spans gutter to gutter rather than capping at --wrap. Two reasons: it
     reads as a glass dock across the base of the hero instead of a floating
     card, and its right edge tracks the viewport, which is what actually
     covers the generator watermark burnt into the footage. That mark sits at
     ~90% of the video's displayed width, so a centred fixed-width panel can
     never reach it — at 1920px it lands near x=1724 while a 1180 panel ends
     at 1550. Gutter-to-gutter always clears it. */
  width: calc(100% - (var(--gut) * 2));

  padding: clamp(18px, 2.1vw, 28px) clamp(20px, 2.6vw, 34px);
  border-radius: clamp(20px, 2.2vw, 30px);

  /* App-glass surface. The panel fill is painted to padding-box and a separate
     gradient to border-box, which gives a hairline that is bright along the top
     edge and fades down the sides — light from above, the way real glass reads.
     A flat 1px white border looks printed on; this does not. */
  background:
    /* Opacity floor raised after sampling the composited pixels: at .68 the
       --ink-2 lede fell to 4.45:1 against the panel on the right side, under
       the 4.5 AA line — and the ground behind it is moving footage, so it
       varies frame to frame. The glass read comes from the blur, saturation
       and the light top edge, not from being see-through. */
    linear-gradient(157deg, rgba(252,250,247,.93) 0%, rgba(249,246,241,.88) 55%, rgba(247,244,238,.90) 100%) padding-box,
    linear-gradient(170deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.42) 26%,
      rgba(255,255,255,.14) 62%,
      rgba(22,36,31,.06) 100%) border-box;
  border: 1px solid transparent;

  backdrop-filter: blur(40px) saturate(1.7) brightness(1.04);
  -webkit-backdrop-filter: blur(40px) saturate(1.7) brightness(1.04);

  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,           /* catch-light along the top */
    0 -12px 24px -20px rgba(16,49,41,.22) inset,  /* the glass has thickness */
    0 2px 6px -2px rgba(16,49,41,.10),
    0 18px 36px -20px rgba(16,49,41,.34),
    0 48px 90px -44px rgba(16,49,41,.55);
}

/* A single soft specular band across the upper surface. Very low contrast on
   purpose — you should feel it rather than see it. */
.hero-glass::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(168deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.07) 22%,
    rgba(255,255,255,0) 46%);
  mix-blend-mode: screen;
}

/* Content keeps the old measure so the columns do not stretch on wide screens. */
.glass-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 54px);
  align-items: end;
}
/* Browsers without backdrop-filter get a near-opaque panel rather than
   unreadable text over moving footage. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-glass { background: rgba(251,249,245,.96); }
}

.hero-glass .eyebrow {
  margin-bottom: 10px;
  /* --euc measures 4.28:1 where the glass is thinnest — under AA for 11.5px
     text, and the ground behind it is moving footage rather than a fixed
     colour. --euc-deep is the same brand green a few steps down and lands at
     8.58:1, which holds whatever frame is underneath. */
  color: var(--euc-deep);
}
.hero-glass .display {
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  line-height: 1.03;
}
.glass-lede {
  margin-top: 12px;
  font-size: clamp(1rem, 1.1vw, 1.05rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}

.glass-side { display: grid; gap: 18px; }
.glass-side .cta-row { margin-top: 0; }

.glass-facts {
  display: grid; gap: 9px;
  padding-top: 16px;
  border-top: 1px solid rgba(22,36,31,.12);
}
.glass-facts li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.8px; line-height: 1.45;
  color: var(--ink-2);
}
.glass-facts svg { color: var(--euc); flex: none; margin-top: 2px; }
.glass-facts b { font-weight: 600; color: var(--ink); }

/* Secondary button reads as cut from the same glass, not stuck on it. */
.btn-glass {
  color: var(--euc-deep);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.btn-glass:hover { background: rgba(255,255,255,.85); border-color: var(--euc-wash2); }

.hero-sound {
  position: absolute; z-index: 4;
  right: var(--gut); top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(251,249,245,.62);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  color: var(--ink-2); font-size: 12.5px; font-weight: 500;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, var(--lift-1);
  transition: color .25s, border-color .25s, background-color .25s;
}
.hero-sound:hover { color: var(--ink); background: rgba(251,249,245,.9); }
.hero-sound .ico-sound { display: none; }
.hero-sound[aria-pressed="true"] .ico-sound { display: block; }
.hero-sound[aria-pressed="true"] .ico-muted { display: none; }

/* — narrow: the panel stops floating and becomes the block under the film —
   Over a 16:9 film on a phone, a glass panel would cover the whole frame. */
/* Phones: squarer still, and the crop tightens onto the phone in frame. */
@media (max-width: 600px) {
  .hero-film { aspect-ratio: 5 / 4; }
  .hero-film video, .hero-film .hero-plate { object-position: 21% 50%; }
}

@media (max-width: 900px) {
  .hero {
    height: auto;
    min-height: 0;
    padding-top: 66px;
    /* Flex, so the source order (plate → rail → glass, which is what the
       desktop overlay wants) can be re-sequenced to plate → glass → rail.
       The pitch and the CTA come before the feature list on a phone. */
    display: flex;
    flex-direction: column;
  }
  .hero-film  { order: 1; }
  .hero-glass { order: 2; }
  .hero-rail  { order: 3; }
  /* Tablet + phone: the plate gets a taller crop than its native 16:9 — at
     390px wide a 16:9 band is only ~220px and the phone in frame becomes
     unreadable. Squarer ratios let the subject fill the space. */
  .hero-film { aspect-ratio: 4 / 3; }
  .hero-film::before { height: 36px; }
  .hero-film video, .hero-film .hero-plate { object-position: 24% 50%; }

  .hero-glass {
    position: static; transform: none;
    width: auto; max-width: none;
    margin: -40px var(--gut) 0;
    /* The card laps 40px up over the plate; without matching top padding the
       eyebrow sits under the plate's edge and gets clipped. */
    padding-top: calc(clamp(18px, 2.1vw, 28px) + 14px);
    background: var(--surface);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    box-shadow: var(--lift-2);
  }
  /* The specular band belongs to the glass surface, not the flat card. */
  .hero-glass::after { display: none; }
  .glass-inner { grid-template-columns: 1fr; gap: 20px; max-width: none; }
  .hero-glass .display { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  /* The glass button's white-on-white borders vanish once the panel becomes
     an opaque white card. */
  .hero-glass .btn-glass {
    background: transparent;
    border-color: var(--line-2);
    color: var(--euc-deep);
    box-shadow: none;
  }
  .hero-glass .btn-glass:hover { background: var(--euc-wash); border-color: var(--euc); }
  .glass-lede { max-width: none; }
  .cta-row .btn { flex: 1 1 auto; }
}

/* ===========================================================================
   8 · SECTOR STRIP
   =========================================================================== */
.sectors {
  position: relative;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden; padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sectors-track {
  display: flex; align-items: center; gap: 24px;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.sectors-track span {
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.sectors-track i { width: 4px; height: 4px; border-radius: 50%; background: var(--euc); opacity: .5; flex: none; }
@keyframes marquee { to { transform: translateX(-50%) } }
.sectors:hover .sectors-track { animation-play-state: paused; }

/* ===========================================================================
   9 · BANDS
   =========================================================================== */
.band { position: relative; padding: var(--band-y) 0; }
.band-paper  { background: var(--paper); }
.band-cream  { background: var(--paper-2); }
.band-deep   { background: var(--deep); color: var(--on-deep); }
.band-wash   { background: linear-gradient(172deg, var(--euc-wash) 0%, var(--paper) 78%); }

/* ===========================================================================
   10 · STEPS
   =========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
  position: relative;
  padding: 32px 28px 30px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--lift-1);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease);
}
.step:hover { transform: translateY(-5px); border-color: var(--euc-wash2); box-shadow: var(--lift-2); }
.step-n {
  position: absolute; top: 24px; right: 26px;
  font-family: var(--display); font-size: 40px; font-weight: 300;
  font-variation-settings: "opsz" 100;
  line-height: 1; color: var(--paper-3);
  transition: color .45s var(--ease);
}
.step:hover .step-n { color: var(--euc-wash2); }

.step-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 22px; }
.step-ico[data-tone="clay"]  { background: var(--clay-wash); color: var(--clay); }
.step-ico[data-tone="euc"]   { background: var(--euc-wash);  color: var(--euc); }
.step-ico[data-tone="gold"]  { background: var(--gold-wash); color: var(--gold-ink); }

.step-t {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "SOFT" 22, "opsz" 40;
  font-size: 20.5px; letter-spacing: -.018em;
  margin-bottom: 11px; color: var(--ink);
}
.step-b { font-size: .96rem; line-height: 1.68; color: var(--ink-2); }

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

/* ===========================================================================
   11 · PULL QUOTE — dark moment #1
   =========================================================================== */
.band-deep.band-quote {
  text-align: center;
  padding: clamp(60px, 7.5vw, 100px) 0;
  background:
    radial-gradient(70% 60% at 50% 0%, var(--deep-2) 0%, transparent 70%),
    var(--deep);
}
.pull { margin: 0; }
.pull-q {
  font-family: var(--display); font-weight: 300;
  font-variation-settings: "SOFT" 42, "opsz" 144;
  font-size: clamp(2.15rem, 5.6vw, 3.9rem);
  line-height: 1.04; letter-spacing: -.03em;
  color: var(--on-deep);
}
.pull-q em {
  font-style: italic;
  font-variation-settings: "SOFT" 72, "opsz" 144;
  color: var(--euc-light);
}
.pull-b {
  font-size: clamp(1rem, 1.45vw, 1.1rem);
  line-height: 1.7; color: var(--on-deep-2);
  max-width: 56ch; margin: 26px auto 0;
}
.pull-c {
  display: block; margin-top: 26px;
  font-size: 11.5px; font-style: normal;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--on-deep-3);
}
.pull-c span { color: var(--euc-light); }

/* ===========================================================================
   12 · SPLIT (why voice)
   =========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(36px, 5.5vw, 70px);
  align-items: center;
}
.split-copy .h2 { margin-bottom: 24px; }

.ticks { display: grid; gap: 17px; margin-top: 30px; }
.ticks li { position: relative; padding-left: 30px; font-size: .96rem; line-height: 1.66; color: var(--ink-2); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--euc-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12 4.5 4.5L19 7' stroke='%23217A6A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.ticks strong { color: var(--ink); font-weight: 600; }

.compare { display: grid; gap: 13px; align-items: center; }
.compare-col { padding: 24px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.compare-then { background: var(--clay-wash); border-color: #EEDBD1; }
.compare-now  { background: var(--euc-wash);  border-color: var(--euc-wash2); }
.compare-h { font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 11px; }
.compare-then .compare-h { color: var(--clay); }
.compare-now  .compare-h { color: var(--euc-deep); }
.compare-body {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 18, "opsz" 20;
  font-size: 15.5px; line-height: 1.5; color: var(--ink);
}
.compare-note {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed var(--line-2);
  font-size: 12.8px; line-height: 1.55; color: var(--ink-3);
}
.compare-arrow {
  justify-self: center; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--euc);
}

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

/* ===========================================================================
   13 · STATS
   =========================================================================== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat {
  padding: 30px 26px 28px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--lift-1);
  transition: transform .5s var(--ease-out), border-color .4s var(--ease), box-shadow .5s var(--ease-out);
}
.stat:hover { transform: translateY(-5px); border-color: var(--euc-wash2); box-shadow: var(--lift-2); }

.stat-n {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--display); font-weight: 300;
  font-variation-settings: "SOFT" 20, "opsz" 144;
  font-size: clamp(2.6rem, 4.2vw, 3.5rem);
  line-height: 1; letter-spacing: -.035em;
  color: var(--euc); margin-bottom: 16px;
}
.stat-was { font-size: max(13px, .46em); color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.stat-to  { color: var(--ink-3); align-self: center; flex: none; }

.stat-t {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "SOFT" 20, "opsz" 40;
  font-size: 17.5px; letter-spacing: -.016em;
  color: var(--ink); margin-bottom: 10px;
}
.stat-b { font-size: .93rem; line-height: 1.66; color: var(--ink-2); }
.stat-src {
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
}
.stat-src cite { font-style: italic; }
/* The citation link is the point of the block, so it gets the accent and its
   own line — a source you can actually open is what separates a claim from a
   number on a slide. */
.stat-src a {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px;
  color: var(--euc); font-weight: 600;
  border-bottom: 1px solid var(--euc-wash2);
  padding-bottom: 1px;
  transition: border-color .25s var(--ease), gap .25s var(--ease-out);
}
.stat-src a:hover { border-bottom-color: var(--euc); gap: 8px; }
.stat-src a svg { flex: none; }

.caveat cite { font-style: italic; }

.caveat {
  margin-top: 22px; padding: 26px 28px;
  border-radius: var(--r-lg);
  border: 1px solid #E9D9B4;
  background: var(--gold-wash);
}
.caveat-t {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--ph); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 13px;
}
.caveat p { font-size: .94rem; line-height: 1.7; color: var(--ink-2); max-width: 76ch; }
.caveat p + p { margin-top: .85em; }

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

/* ===========================================================================
   14 · VISIT TYPES
   =========================================================================== */
.visits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.visit {
  display: grid;
  grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 14px; align-items: center;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .45s var(--ease-out), border-color .35s var(--ease), box-shadow .45s var(--ease-out);
}
.visit:hover { transform: translateY(-3px); border-color: var(--euc-wash2); box-shadow: var(--lift-2); }
.visit-ico { grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.visit[data-tone="in-person"] .visit-ico { background: var(--euc-wash); color: var(--euc); }
.visit[data-tone="remote"]    .visit-ico { background: #E4EEF5; color: #3B7699; }
.visit[data-tone="attempted"] .visit-ico { background: var(--clay-wash); color: var(--clay); }
.visit-l {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "SOFT" 18, "opsz" 30;
  font-size: 16.5px; letter-spacing: -.014em; color: var(--ink); align-self: end;
}
.visit-s { font-size: 12.8px; color: var(--ink-3); align-self: start; }

.visits-foot { margin-top: 24px; font-size: .94rem; line-height: 1.66; color: var(--ink-3); max-width: 62ch; }

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

/* ===========================================================================
   15 · TRUST PILLARS
   =========================================================================== */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pillar {
  padding: 30px 28px;
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--lift-1);
  transition: border-color .4s var(--ease), transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.pillar:hover { border-color: var(--euc-wash2); transform: translateY(-4px); box-shadow: var(--lift-2); }
.pillar-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--euc-wash); color: var(--euc);
  margin-bottom: 20px;
}
.pillar-t {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "SOFT" 20, "opsz" 40;
  font-size: 19px; letter-spacing: -.018em;
  color: var(--ink); margin-bottom: 11px;
}
.pillar-b { font-size: .94rem; line-height: 1.7; color: var(--ink-2); }
.pillar-b code { color: var(--euc-deep); background: var(--euc-wash); padding: 1px 5px; border-radius: 4px; }
.pillar-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 15px; font-size: 13.5px; font-weight: 600;
  color: var(--euc); border-bottom: 1px solid var(--euc-wash2);
  padding-bottom: 2px;
  transition: border-color .3s var(--ease), gap .3s var(--ease-out);
}
.pillar-link:hover { border-color: var(--euc); gap: 11px; }

.trust-foot { margin-top: 28px; font-size: .94rem; color: var(--ink-3); line-height: 1.7; }
.trust-foot a { color: var(--euc); border-bottom: 1px solid var(--euc-wash2); }
.trust-foot a:hover { border-bottom-color: var(--euc); }

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

/* ===========================================================================
   16 · HUMILITY
   =========================================================================== */
.humility {
  padding: clamp(32px, 4.6vw, 50px);
  border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--lift-2);
}
.humility .h2 { margin-bottom: 20px; }

/* ===========================================================================
   17 · PRICING
   =========================================================================== */
.plans { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: 18px; align-items: start; }
.plan {
  position: relative;
  padding: 34px 32px;
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--lift-1);
}
.plan-feature {
  border-color: var(--euc-wash2);
  box-shadow: var(--lift-3);
  background: linear-gradient(172deg, #fff 0%, #F7FCFA 100%);
}
.plan-flag {
  position: absolute; top: -11px; left: 32px;
  padding: 5px 14px; border-radius: var(--r-pill);
  background: var(--euc); color: #fff;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.plan-e {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--euc); margin-bottom: 14px;
}
.plan-p {
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--display); font-weight: 300;
  font-variation-settings: "SOFT" 18, "opsz" 144;
  font-size: clamp(2.9rem, 4.8vw, 3.8rem);
  line-height: 1; letter-spacing: -.035em; color: var(--ink);
}
.plan-cur { font-size: .46em; color: var(--ink-3); }
.plan-per {
  font-family: var(--body); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0; color: var(--ink-3); margin-left: 6px;
}
.plan-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 9px; }
.plan-b { font-size: .95rem; line-height: 1.68; color: var(--ink-2); margin-top: 18px; }

.plan-list { display: grid; gap: 9px; margin-top: 18px; }
.plan-list li { position: relative; padding-left: 24px; font-size: .91rem; color: var(--ink-2); }
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--euc-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12 4.5 4.5L19 7' stroke='%23217A6A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.bands { margin-top: 22px; font-size: 14.5px; }
.bands th, .bands td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.bands thead th {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border-bottom-color: var(--line-2);
}
.bands tbody th { font-weight: 600; color: var(--ink); }
.bands tbody td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bands tbody tr:last-child th, .bands tbody tr:last-child td { border-bottom: 0; color: var(--euc-deep); }

.plan-cta { width: 100%; margin-top: 24px; }
.plans-foot { margin-top: 24px; font-size: .92rem; line-height: 1.68; color: var(--ink-3); max-width: 62ch; }

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

/* ===========================================================================
   18 · CLOSING
   =========================================================================== */
.band-close {
  position: relative; text-align: center; overflow: hidden;
  background:
    radial-gradient(64% 56% at 50% 108%, var(--euc-wash2) 0%, transparent 68%),
    radial-gradient(44% 38% at 86% -8%, var(--gold-wash) 0%, transparent 66%),
    var(--paper);
  border-top: 1px solid var(--line);
}
.close .eyebrow { justify-content: center; }
.close-lede {
  font-size: clamp(1rem, 1.45vw, 1.12rem);
  line-height: 1.68; color: var(--ink-2);
  max-width: 52ch; margin: 24px auto 0;
}
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.close-foot { margin-top: 24px; font-size: 13.5px; color: var(--ink-3); }
.close-foot a { color: var(--euc); border-bottom: 1px solid var(--euc-wash2); }
.close-who {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line);
}
.close-who li {
  padding: 7px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.6);
  font-size: 12.5px; color: var(--ink-3);
}

/* ===========================================================================
   19 · FOOTER — dark moment #2
   =========================================================================== */
.foot {
  background: var(--deep); color: var(--on-deep);
  padding: clamp(52px, 6.5vw, 78px) 0 32px;
}
.foot .brand { color: var(--on-deep); }
.foot .brand-glyph { color: var(--euc-light); }
.foot-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,2fr); gap: clamp(34px, 5vw, 60px); }
.brand-foot { margin-bottom: 16px; }
.foot-tag { font-size: .93rem; line-height: 1.66; color: var(--on-deep-3); max-width: 34ch; }
.foot-by { margin-top: 13px; font-size: 13px; color: var(--on-deep-3); }
.foot-by a { color: var(--euc-light); border-bottom: 1px solid rgba(79,192,166,.34); }

.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.foot-col { display: grid; align-content: start; gap: 10px; }
.foot-h {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--euc-light); margin-bottom: 3px;
}
.foot-col a {
  font-size: 14px; color: var(--on-deep-3); width: fit-content;
  padding: 9px 0; min-height: 24px;   /* WCAG 2.2 SC 2.5.8 — was 23px tall */
  display: flex; align-items: center;
  transition: color .25s var(--ease);
}
.foot-col a:hover { color: var(--on-deep); }

.foot-bottom {
  margin-top: clamp(40px, 5.5vw, 62px); padding-top: 22px;
  border-top: 1px solid rgba(237,244,241,.12);
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--on-deep-3);
}
.foot-ack { max-width: 60ch; line-height: 1.6; }

@media (max-width: 880px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   20 · REVEAL
   =========================================================================== */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .95s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ===========================================================================
   21 · LEGACY TOKEN ALIASES — privacy / terms / data-residency
   ---------------------------------------------------------------------------
   Those three pages carry their own inline <style> block written against the
   PREVIOUS stylesheet's variable names. They are legally reviewed documents
   and aren't being redesigned in this pass, so the old names are re-pointed at
   the new palette here rather than editing three files of settled copy.
   =========================================================================== */
:root {
  --cream:       var(--paper);
  --cream-deep:  var(--paper-2);
  --sand:        var(--line);
  --warmblack:   var(--ink);
  --warm-gray:   var(--ink-3);
  --bark:        var(--euc);
  --bark-soft:   var(--euc-wash);
  --earth:       var(--euc-deep);
  --font-display: var(--display);
  --font-body:    var(--body);
  --type-small:   13.5px;
  --type-prose:   17px;
}

/* ===========================================================================
   22 · REDUCED MOTION
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .grain { display: none; }
  .sectors-track { animation: none; }
}

/* ===========================================================================
   23 · PRINT
   =========================================================================== */
@media print {
  .nav, .grain, .sectors, .hero-sound, .hero-film { display: none !important; }
  body { background: #fff; color: #000; }
  .band, .hero { padding: 24px 0; background: #fff !important; }
  .display, .h2, .h2-light, .pull-q { color: #000; }
  .reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   01b · SCROLL SHOWCASE — "watch a note take shape"
   ──────────────────────────────────────────────────────────────────────
   Two layouts in one component.

   DEFAULT (no JS, reduced motion, old browsers): a plain readable stack.
   Phone on top, panels in a grid underneath, every stage visible at once.
   Nothing is hidden behind a scroll position that may never arrive.

   .is-live (added by script.js only when motion is welcome): the section
   grows a tall track, the stage pins to the viewport, and scroll progress
   drives the sequence through CSS custom properties. All easing maths
   lives in JS; CSS only ever consumes plain 0→1 numbers.
   ══════════════════════════════════════════════════════════════════════ */

.showcase { padding: 0; overflow: clip; }
.sc-pin   { padding: var(--band-y) 0; }

.sc-head  { max-width: 620px; margin: 0 auto clamp(30px, 4.5vw, 52px); text-align: center; }
.sc-head .eyebrow { justify-content: center; }
.sc-head .h2 { margin-bottom: 16px; }
.sc-lede {
  color: var(--on-deep-2);
  font-size: clamp(1rem, 1.5vw, 1.09rem);
  line-height: 1.62;
}

/* Centring the device is not the sequence's job — it must hold in the static
   state too, where the grid was letting the wrapper stretch full-width and
   the phone hung off to the left. */
.sc-phone { display: flex; justify-content: center; }

.sc-scene {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vw, 44px);
}

/* ── phone ──────────────────────────────────────────────────────────────
   Sized off viewport height, not width: in pinned mode the whole stage has
   to survive inside 100vh, and height is the scarce axis.
   ─────────────────────────────────────────────────────────────────────── */
.ph-shell {
  position: relative;
  height: clamp(430px, 56vh, 545px);
  aspect-ratio: 9 / 19.3;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(160deg, #35413d, #131b19 42%, #0a0f0e);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    0 40px 80px -30px rgba(0,0,0,.72),
    0 8px 24px -12px rgba(0,0,0,.5);
}
.ph-island {
  position: absolute; z-index: 3;
  top: 20px; left: 50%; transform: translateX(-50%);
  width: 27%; height: 20px; border-radius: 999px;
  background: #050908;
}
.ph-screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 32px;
  background: var(--paper);
  color: var(--ink);
  display: flex; flex-direction: column;
  --ph: 12.5px;              /* one knob: everything below is a ratio of this */
  font-size: var(--ph);
}

.ph-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 18px 2px;
  font-size: calc(var(--ph) * .84); font-weight: 600; color: var(--ink-2);
}
.ph-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; }
.ph-sig i { width: 2.5px; border-radius: 1px; background: var(--ink-3); }
.ph-sig i:nth-child(1) { height: 3px; }
.ph-sig i:nth-child(2) { height: 5px; }
.ph-sig i:nth-child(3) { height: 7px; }
.ph-sig i:nth-child(4) { height: 9px; background: var(--ink-2); }

.ph-nav {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px 9px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.ph-kind { font-weight: 600; color: var(--ink); font-size: calc(var(--ph) * .96); }
.ph-step { margin-left: auto; font-size: calc(var(--ph) * .84); color: var(--ink-3); }

.ph-body {
  flex: 1; min-height: 0;
  padding: 14px 15px 8px;
  transition: transform .5s var(--ease-out);
}
.ph-q {
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(var(--ph) * 1.16);
  line-height: 1.34;
  letter-spacing: -.012em;
  margin-bottom: 7px;
}
.ph-hint {
  font-size: calc(var(--ph) * .864); line-height: 1.45; color: var(--ink-3);
  padding-left: 9px; border-left: 1.5px solid var(--line-2);
  margin-bottom: 3px;
}

.ph-said {
  margin-top: 13px;
  font-size: calc(var(--ph) * .96); line-height: 1.58; color: var(--ink-2);
}
.ph-said span { transition: opacity .18s linear; }

.ph-draft {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line-2);
}
.ph-dh {
  font-weight: 600; font-size: calc(var(--ph) * .84); letter-spacing: .07em;
  text-transform: uppercase; color: var(--euc);
  margin-bottom: 5px;
}
.ph-db { font-size: calc(var(--ph) * .96); line-height: 1.6; }
.ph-db mark {
  background: linear-gradient(var(--euc-wash), var(--euc-wash)) left / var(--keep, 100%) 100% no-repeat;
  color: inherit;
  border-radius: 3px;
  padding: 1px 1.5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.ph-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 15px 15px;
  border-top: 1px solid var(--line);
}
.ph-mic {
  position: relative;
  width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--euc-mid);          /* eucalyptus — NOT clay. Clay means destructive. */
  color: #fff;
  display: grid; place-items: center;
}
.ph-ring {
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--euc-mid);
  opacity: 0;
}
.ph-next {
  flex: 1; text-align: center;
  padding: 11px 0; border-radius: var(--r-pill);
  background: var(--euc-deep); color: #fff;
  font-size: 12.5px; font-weight: 600;
}

/* ── glass panels ───────────────────────────────────────────────────────
   Translucent white over the deep ground. These only read because the band
   underneath is #103129 — the same treatment over cream is invisible.
   ─────────────────────────────────────────────────────────────────────── */
.sc-panels {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px; width: 100%; max-width: 880px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.sc-panel {
  position: relative;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.6);
}
.sp-ico {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(79,192,166,.16);
  color: var(--euc-light);
}
.sp-txt { min-width: 0; }
.sp-txt b {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: -.005em;
  color: var(--on-deep); margin-bottom: 3px;
}
.sp-txt > span { display: block; font-size: 11.8px; line-height: 1.45; color: var(--on-deep-3); }

.sp-list { list-style: none; padding: 0; margin: 0; }
.sp-list li {
  position: relative;
  padding-left: 15px;
  font-size: 11.6px; line-height: 1.5; color: var(--on-deep-3);
  margin-top: 3px;
}
.sp-list li::before {
  content: ""; position: absolute; left: 0; top: 6.5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--euc-light); opacity: .55;
}
.sp-keep em { font-style: normal; color: var(--euc-light); font-weight: 600; }

/* audio waveform — decorative, animates only while stage A is lit */
.sp-wave { display: inline-flex; align-items: center; gap: 2.5px; margin-left: auto; height: 20px; }
.sp-wave i {
  width: 2.5px; height: 5px; border-radius: 2px;
  background: var(--euc-light); opacity: .55;
}

/* ── stage rail ─────────────────────────────────────────────────────────
   In the static fallback this reads as a plain four-word summary of the
   sequence, which is exactly what someone with motion turned off needs.
   ─────────────────────────────────────────────────────────────────────── */
.sc-rail {
  list-style: none; margin: clamp(26px, 3.5vw, 40px) 0 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(14px, 3vw, 30px);
}
.sc-rail li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-deep-3);
  transition: color .35s var(--ease);
}
.sc-rail li span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.sc-rail li.on { color: var(--on-deep); }
.sc-rail li.on span {
  background: var(--euc-light);
  box-shadow: 0 0 0 4px rgba(79,192,166,.16);
}

/* ── .is-live — the pinned scroll choreography ──────────────────────────
   Everything below is additive. Strip .is-live and the section falls back
   to the readable stack above with no layout debt.
   ─────────────────────────────────────────────────────────────────────── */
.showcase.is-live .sc-track { height: 480vh; }
.showcase.is-live .sc-pin {
  position: sticky; top: 0;
  height: 100vh; min-height: 620px;
  display: flex; align-items: center;
  padding: 0;
}
.showcase.is-live .sc-head { margin-bottom: clamp(20px, 3vh, 38px); }

.showcase.is-live .sc-scene { display: block; }


.showcase.is-live .sc-panels {
  position: absolute; inset: 0;
  display: block; max-width: none;
  pointer-events: none;
}
.showcase.is-live .sc-panel {
  position: absolute;
  width: clamp(196px, 19.5vw, 246px);
  opacity: var(--s, 0);
  transform:
    translate3d(calc((1 - var(--s, 0)) * var(--dx, 0px)), calc((1 - var(--s, 0)) * 10px), 0)
    scale(calc(.966 + .034 * var(--s, 0)));
  will-change: opacity, transform;
}
.showcase.is-live .p-a { --dx: -20px; left: 0;  top: 4%; }
.showcase.is-live .p-b { --dx:  20px; right: 0; top: 2%; }
.showcase.is-live .p-c { --dx:  20px; right: 0; bottom: 3%; }
.showcase.is-live .p-d { --dx: -20px; left: 0;  bottom: 8%; }

/* dotted connectors, drawn from each panel toward the phone */
.showcase.is-live .sc-panel::after {
  content: ""; position: absolute; top: 50%;
  width: clamp(24px, 5.5vw, 86px);
  border-top: 1.5px dotted rgba(79,192,166,.45);
  opacity: calc(var(--s, 0) * var(--s, 0));
}
.showcase.is-live .p-a::after,
.showcase.is-live .p-d::after { left: 100%;  margin-left: 10px; }
.showcase.is-live .p-b::after,
.showcase.is-live .p-c::after { right: 100%; margin-right: 10px; }

/* phone screen states, all driven by plain 0→1 numbers from JS */
.showcase.is-live .ph-hint {
  opacity: calc(1 - var(--draft, 0));
  max-height: calc((1 - var(--draft, 0)) * 32px);
  margin-bottom: calc((1 - var(--draft, 0)) * 3px);
  overflow: hidden;
}
.showcase.is-live .ph-said  { opacity: calc(1 - var(--draft, 0) * .58); }
.showcase.is-live .ph-draft {
  opacity: var(--draft, 0);
  transform: translateY(calc((1 - var(--draft, 0)) * 12px));
}
.showcase.is-live .ph-db mark { --keep: 0%; transition: background-size .5s var(--ease-out); }
.showcase.is-live .ph-db mark { background-size: var(--keep) 100%; }

/* recording — discrete on/off, so a class rather than a variable */
.showcase.is-live .ph-mic .ph-ring { animation: none; }
.showcase.is-live .is-rec .ph-ring { animation: micPulse 1.9s var(--ease-out) infinite; }
@keyframes micPulse {
  0%   { opacity: .85; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}
.showcase.is-live .sc-panel.on .sp-wave i { animation: wave 1.05s var(--ease) infinite; }
.sp-wave i:nth-child(1) { animation-delay: 0s; }
.sp-wave i:nth-child(2) { animation-delay: .09s; }
.sp-wave i:nth-child(3) { animation-delay: .18s; }
.sp-wave i:nth-child(4) { animation-delay: .27s; }
.sp-wave i:nth-child(5) { animation-delay: .36s; }
.sp-wave i:nth-child(6) { animation-delay: .45s; }
.sp-wave i:nth-child(7) { animation-delay: .54s; }
@keyframes wave {
  0%, 100% { height: 5px;  opacity: .45; }
  50%      { height: 15px; opacity: 1; }
}

/* ── narrow screens ─────────────────────────────────────────────────────
   Pinning a 100vh stage on a phone fights the browser's own scroll UI and
   leaves no room beside the device for panels. Below 900px the section
   reverts to the static stack for everyone.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .showcase.is-live .sc-track { height: auto; }
  .showcase.is-live .sc-pin   { position: static; height: auto; padding: var(--band-y) 0; }
  .showcase.is-live .sc-scene { display: grid; }
  .showcase.is-live .sc-panels {
    position: static; display: grid; max-width: 880px; pointer-events: auto;
  }
  .showcase.is-live .sc-panel {
    position: relative; width: auto;
    opacity: 1; transform: none;
    left: auto; right: auto; top: auto; bottom: auto;
  }
  .showcase.is-live .sc-panel::after { display: none; }
  .showcase.is-live .ph-hint { opacity: 1; max-height: 32px; margin-bottom: 3px; }
  .showcase.is-live .ph-said { opacity: 1; }
  .showcase.is-live .ph-draft { opacity: 1; transform: none; }
  .showcase.is-live .ph-db mark { --keep: 100%; }
  .showcase.is-live .ph-said span { opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase.is-live .sc-track { height: auto; }
  .showcase.is-live .sc-pin   { position: static; height: auto; padding: var(--band-y) 0; }
  .showcase.is-live .sc-panel { opacity: 1; transform: none; }
  .showcase.is-live .ph-said span { opacity: 1 !important; }
  .showcase.is-live .ph-draft { opacity: 1; transform: none; }
  .showcase.is-live .ph-db mark { --keep: 100%; }
}

/* ── fixes found in review ──────────────────────────────────────────────
   1. The word-by-word reveal. Opacity is derived from (--shown - --i):
      --shown is a single fractional counter written once per frame on the
      paragraph, --i is the word's index. As --shown crosses an index that
      word fades up. One property write per frame instead of 34 class
      toggles, and it interpolates for free. The 999 fallback is what makes
      the static/no-JS state legible — without it every word would be
      invisible when --shown is never set.
   2. Scene width. Panels pinned to the 1180px .wrap left them stranded a
      long way from the phone with a stub of connector between. Narrowing
      the scene pulls them in and lets the dotted line actually reach.
   ─────────────────────────────────────────────────────────────────────── */
.showcase.is-live .ph-said span {
  opacity: calc(var(--shown, 999) - var(--i, 0));
}

.showcase.is-live .sc-scene {
  max-width: 1010px;
  margin-inline: auto;
}
.showcase.is-live .sc-panel::after { width: clamp(40px, 8vw, 120px); }

/* The phone is the focal point; give it a little more presence and let the
   screen breathe now that the panels sit closer. */
.showcase.is-live .ph-shell { height: clamp(444px, 58vh, 566px); }

/* Draft overflow. Once the note appears, question + transcript + draft are
   ~28px taller than the screen, so the last line slid under the footer. The
   body eases upward as --draft rises — the question scrolls off under the
   header exactly as it would in the app — and the transcript, now history,
   gives up a little size. A mask keeps the top edge soft instead of cut. */
.showcase.is-live .ph-body {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 10px);
}

/* Sliding the body up only moved the collision from the footer to the header.
   The content is genuinely taller than the screen once all three parts are
   present, so one of them has to go — and by the time the note exists the
   question has done its job. It collapses, the hints with it, and the screen
   is left showing the honest before/after: what you said, what it wrote. */
.showcase.is-live .ph-q {
  opacity: calc(1 - var(--draft, 0));
  max-height: calc((1 - var(--draft, 0)) * 84px);
  margin-bottom: calc((1 - var(--draft, 0)) * 7px);
  overflow: hidden;
}
.showcase.is-live .ph-said {
  font-size: calc(var(--ph) * .96 - var(--draft, 0) * var(--ph) * .096);
  line-height: calc(1.58 - var(--draft, 0) * .1);
}

/* "You said" — names the dimmed block as history once the note lands, so the
   two halves can't be misread as one long note. Fallback of 1 keeps it
   visible in the static/no-JS state, where both halves are shown at once. */
.ph-said-label {
  font-size: calc(var(--ph) * .78); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
  margin-top: 12px;
}
.showcase.is-live .ph-said-label {
  opacity: var(--draft, 1);
  max-height: calc(var(--draft, 1) * 18px);
  margin-top: calc(6px + var(--draft, 1) * 6px);
  overflow: hidden;
}
.showcase.is-live .ph-said { margin-top: 3px; }

/* ── static-state phone ─────────────────────────────────────────────────
   The device is a fixed-height box because the pinned sequence swaps its
   contents in and out of a screen that never changes size. With nothing
   driving it, every stage is on screen at once and the note — the whole
   point of the section — was being clipped by the bezel.

   So whenever the choreography is off, the phone stops being a fixed
   device and grows to fit. Three separate cases, because two of them keep
   .is-live on the element and only switch off the pinning:
     1. no JS at all
     2. narrow screens
     3. reduced motion
   ─────────────────────────────────────────────────────────────────────── */
.showcase:not(.is-live) .ph-shell {
  height: auto; aspect-ratio: auto; width: min(332px, 100%);
}
.showcase:not(.is-live) .ph-screen { overflow: visible; }

@media (max-width: 900px) {
  .showcase.is-live .ph-shell {
    height: auto; aspect-ratio: auto; width: min(332px, 100%);
  }
  .showcase.is-live .ph-screen { overflow: visible; }
  .showcase.is-live .ph-q { opacity: 1; max-height: none; margin-bottom: 7px; }
  .showcase.is-live .ph-said-label { opacity: 1; max-height: none; }
  .showcase.is-live .ph-body { -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase.is-live .ph-shell {
    height: auto; aspect-ratio: auto; width: min(332px, 100%);
  }
  .showcase.is-live .ph-screen { overflow: visible; }
  .showcase.is-live .ph-q { opacity: 1; max-height: none; margin-bottom: 7px; }
  .showcase.is-live .ph-said-label { opacity: 1; max-height: none; }
  .showcase.is-live .ph-body { -webkit-mask-image: none; mask-image: none; }
}

/* ── grid blowout on narrow screens ─────────────────────────────────────
   .sc-scene is a single-column grid. An implicit column is `auto`, which
   resolves to the MAX-CONTENT of its widest item — and .sc-panels declares
   repeat(auto-fit, minmax(238px, 1fr)), whose max-content is three full
   238px columns. So the column computed to 738px inside a 335px box: on a
   375px phone the device sat half off-screen and two of the four panels
   were never visible.

   `overflow: clip` on the section is what hid it — no horizontal scrollbar
   ever appeared, so the page looked fine while a third of the content sat
   outside the viewport.

   minmax(0, 1fr) lets the column shrink below its content's max-content
   size; min(238px, 100%) lets the panel grid drop to one column when 238px
   is wider than the space available.
   ─────────────────────────────────────────────────────────────────────── */
.sc-scene  { grid-template-columns: minmax(0, 1fr); }
.sc-panels { grid-template-columns: repeat(auto-fit, minmax(min(238px, 100%), 1fr)); }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE TYPOGRAPHY
   ──────────────────────────────────────────────────────────────────────
   The page was sized desktop-first and the small-screen rules only ever
   changed layout, never type. Measured on a real 390px viewport, reading
   copy landed at 14.7–15.4px and supporting copy at 11.5–12.8px — the
   hero's own proof points were 12.8px and the feature rail 12.4px.

   Phones are held closer than a laptop but the text is physically smaller,
   so body copy needs to go UP here, not down. Floors applied below:
     reading copy   >= 16.5px
     supporting     >= 14px
     tracked labels >= 12.5px   (uppercase + letter-spacing reads larger)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Body / reading copy — was .93–.96rem, i.e. under 16px. */
  .prose            { font-size: 1.05rem; line-height: 1.7; }
  .sec-lede         { font-size: 1.07rem; line-height: 1.66; }
  .step-b           { font-size: 1.02rem; line-height: 1.66; }
  .stat-b           { font-size: 1rem;    line-height: 1.62; }
  .plan-b           { font-size: 1.02rem; line-height: 1.64; }
  .compare-body     { font-size: 1.02rem; line-height: 1.6; }
  .evidence-note p,
  .band-wash p      { font-size: 1.02rem; }

  /* Supporting copy — small by design, but not this small. */
  .glass-facts li   { font-size: 14.3px; line-height: 1.5; }
  .rail-txt         { font-size: 13.8px; line-height: 1.42; }
  .rail-txt b       { font-size: 14.6px; }
  .sp-txt b         { font-size: 14.6px; }
  .sp-txt > span    { font-size: 13.8px; line-height: 1.5; }
  .sp-list li       { font-size: 13.8px; line-height: 1.55; }
  .pillar-link      { font-size: 14.6px; }
  .plan-sub         { font-size: 14.2px; }
  .plan-per         { font-size: 14.2px; }
  .sectors span     { font-size: 13.4px; }

  /* Tracked uppercase labels — legible at a smaller size, but 11px is not it. */
  .eyebrow          { font-size: 12.5px; }
  .compare-h        { font-size: 12.2px; }
  .sc-rail li       { font-size: 12.2px; }

  /* The phone mock was drawn at desktop scale, so on an actual phone its
     text was smaller than the device rendering it. One knob, set bigger. */
  .ph-screen        { --ph: 14px; }

  /* Caught on a second sweep at 390px — all below the 12.5px label floor. */
  .plan-flag        { font-size: 12px; }
  .pull-c           { font-size: 13px; }
  .compare-note     { font-size: 13.8px; line-height: 1.55; }

  /* Third sweep, selectors confirmed against the live DOM rather than guessed:
     the pricing table is table.bands, and the footer column headings are
     .foot-h — both were rendering at 10.5px. */
  .bands thead th   { font-size: 13px; letter-spacing: .09em; }  /* .bands thead th beats .bands th */
  .foot-h           { font-size: 12.5px; }
  .foot-ack         { font-size: 13.5px; line-height: 1.6; }
  .plan-e           { font-size: 13px; }
  .visit-s          { font-size: 14px; line-height: 1.5; }
}

@media (max-width: 600px) {
  /* Narrower still: hold the reading floor and give the mock more room —
     the section is stacked here, so the device can afford to be wider. */
  .prose            { font-size: 1.06rem; }
  .sec-lede         { font-size: 1.06rem; }
  .glass-lede       { font-size: 1.04rem; line-height: 1.58; }

  .ph-shell         { height: min(66vh, 540px); }
  .ph-screen        { --ph: 15px; }

  /* Long uppercase eyebrows wrap to three lines at this width and start to
     read as a paragraph; tighten the tracking rather than shrink the type. */
  .eyebrow          { letter-spacing: .1em; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO LOOP
   ──────────────────────────────────────────────────────────────────────
   Sits on top of the still, which stays in the DOM as the real LCP element.
   Starts at opacity 0 and is only faded in by script.js once the video has
   buffered enough to play — so a slow connection shows the photograph
   indefinitely rather than a black rectangle, and there is no pop-in.

   No `poster` attribute on purpose: a poster is one fixed image and would
   have discarded the responsive srcset underneath it.
   ══════════════════════════════════════════════════════════════════════ */

.hero-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s var(--ease-out);
  pointer-events: none;
}
.hero-vid.is-playing { opacity: 1; }

/* Someone who asks the OS for less motion gets the still, full stop.
   script.js also never loads the file, so this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
  .hero-vid { display: none; }
}