/* =========================================================================
   REACTOR by Activtrim — site styles (v2)
   Direction: hard black/white alternation, full-bleed bands, compressed
   uppercase display type, cards that break the band edge, zero radius.
   Palette derived from the Activtrim logo SVGs.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Ground */
  --black:    #05090b;   /* the black sections */
  --navy:     #0d2533;   /* brand navy — bands and fields */
  --line-dk:  #1f3a48;   /* hairline on dark */

  /* Light */
  --white:    #ffffff;
  --paper:    #f4f7f8;   /* the one soft light tone */
  --line-lt:  #dde6e9;   /* hairline on light */

  /* Accent */
  --cyan:      #00b7e8;   /* the working accent, on dark grounds */
  --cyan-deep: #00718f;   /* same hue for light grounds — 5.6:1 on white */
  --green:    #63f763;   /* signature only — "in range" */
  --aqua:     #c4f7f6;
  --red:      #ff4438;   /* the strike-through only — the one cut mark on the page */
  --red-deep: #c4261c;   /* form errors on light grounds — 5.6:1 on white */

  /* Text */
  --muted:    #8aa5b1;   /* on dark  — 7.7:1 on black */
  --muted-lt: #5a7480;   /* on white — 4.95:1 */

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --wrap:      1340px;
  --gutter:    1.25rem;
  --section-y: 4.5rem;
  --air:       5.5rem;   /* the generous setting, for light sections */

  --radius: 0;           /* hard edges throughout */

  /* Elevation. Layered and low-alpha — depth comes from several soft passes,
     never one hard drop shadow. */
  --sh-1: 0 1px 2px rgba(5,9,11,.05), 0 2px 8px rgba(5,9,11,.05);
  --sh-2: 0 2px 4px rgba(5,9,11,.05), 0 8px 20px rgba(5,9,11,.07),
          0 16px 40px rgba(5,9,11,.05);
  --sh-3: 0 4px 8px rgba(5,9,11,.06), 0 14px 32px rgba(5,9,11,.10),
          0 28px 64px rgba(5,9,11,.08);
  /* On dark grounds a cast shadow is invisible, so depth is carried by a
     hairline top highlight plus a deep ambient pool. */
  --sh-d1: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 26px rgba(0,0,0,.45);
  --sh-d2: inset 0 1px 0 rgba(255,255,255,.075), 0 18px 46px rgba(0,0,0,.6);
  --sh-fusion: inset 0 1px 0 rgba(255,255,255,.09),
               0 0 0 1px rgba(0,183,232,.30),
               0 16px 44px rgba(0,183,232,.14),
               0 30px 72px rgba(5,9,11,.55);

  --ease: cubic-bezier(0.32, 0.72, 0.3, 1);
  --tick:   rgba(196, 247, 246, 0.30);
}

@media (min-width: 768px) {
  :root { --gutter: 2.5rem; --section-y: 6.5rem; --air: 8.5rem; }
}
@media (min-width: 1200px) {
  :root { --gutter: 4rem; --section-y: 8rem; --air: 11rem; }
}

/* Faint film grain, used only on dark grounds so large black fields do not
   band or read as dead flat. Applied as a background layer rather than an
   overlay element so it never interferes with stacking. */
:root {
  --grain: 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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset & base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--cyan); color: var(--black); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: var(--black);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* ---------- 3. Typography ------------------------------------------------ */
/* Display is compressed and uppercase — the scale is where the impact lives. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display {
  font-stretch: 82%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.75rem, 6.6vw, 5.4rem); }
h2 { font-size: clamp(1.95rem, 4.4vw, 3.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -0.015em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.0625rem, 1.75vw, 1.3125rem);
  line-height: 1.6;
  color: var(--aqua);
  max-width: 40ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::before {
  content: "";
  width: 2.25rem; height: 2px;
  background: var(--cyan);
  flex: none;
}

.mono { font-family: var(--font-mono); }

/* A hard accent bar under a display line — the one nod to the reference's
   struck-through headline word. */
.bar-under {
  display: inline-block;
  position: relative;
}
.bar-under::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.085em;
  background: var(--cyan);
}

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Holds a display headline to two or three lines. Sized in rem because
   `ch` here resolves against the body font, not the display face. */
.sec-head { max-width: 40rem; }
.sec-head .lede { margin-top: 2rem; }

.section { padding-block: var(--section-y); }
.section--air { padding-block: var(--air); }

.section--black {
  color: var(--white);
  background:
    var(--grain),
    radial-gradient(58% 42% at 18% 8%, rgba(0,183,232,.055) 0%, transparent 62%),
    linear-gradient(178deg, #0c1820 0%, var(--black) 58%, #04080a 100%);
  background-color: var(--black);
}
.section--white {
  color: var(--black);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  background-color: var(--white);
}
.section--paper {
  color: var(--black);
  background: linear-gradient(180deg, #f7fafb 0%, var(--paper) 55%, #eef4f5 100%);
  background-color: var(--paper);
}

/* Light-section colour corrections */
.section--white .eyebrow,
.section--paper .eyebrow { color: var(--black); }
.section--white .eyebrow::before,
.section--paper .eyebrow::before { background: var(--cyan-deep); }
.section--white .lede,
.section--paper .lede { color: var(--muted-lt); }

/* The measuring-tape motif from the brand mark, used as the divider. */
.ticks {
  height: 16px;
  background-image: repeating-linear-gradient(
    to right, var(--tick) 0 1px, transparent 1px 13px);
  background-position: bottom left;
  background-repeat: repeat-x;
  border-bottom: 1px solid var(--line-dk);
}

/* ---------- 5. Header ---------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--black);
  border-bottom: 1px solid var(--line-dk);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}

.header__logo img { width: 106px; }
@media (min-width: 640px) { .header__logo img { width: 128px; } }

.nav { margin-left: auto; }

.nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0; padding: 0;
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.18s ease;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0.3, 1);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  background: none;
  border: 1px solid var(--line-dk);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav__toggle span {
  display: block; width: 20px; height: 2px;
  background: var(--white);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header__cta { flex: none; }

@media (min-width: 960px) { .nav__cta { display: none; } }

@media (max-width: 959px) {
  .nav__toggle { display: flex; }
  .header__cta { display: none; }
  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    background: var(--black);
    border-bottom: 1px solid var(--line-dk);
    margin-left: 0;
    transform: translateY(-130%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.75rem;
  }
  .nav__list li { border-bottom: 1px solid var(--line-dk); }
  .nav__link { display: block; font-size: 0.9375rem; padding: 1.1rem 0; min-height: 44px; }
  .nav__link::after { display: none; }
  .nav__list .btn { margin-top: 1.75rem; width: 100%; min-height: 52px; font-size: 0.75rem; }
  .nav__list li.nav__cta { border-bottom: 0; }
}

/* ---------- 6. Buttons --------------------------------------------------- */
/* Hard-edged, generous, with a sliding fill on hover. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 54px;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.24s ease, border-color 0.24s ease;
}

.btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.3, 1);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }

.btn--primary { background: var(--cyan); color: var(--black); }
.btn--primary::before { background: var(--white); }

.btn--ghost { background: transparent; color: var(--white); border-color: var(--line-dk); }
.btn--ghost::before { background: var(--white); }
.btn--ghost:hover { color: var(--black); border-color: var(--white); }

/* on light grounds */
.btn--dark { background: var(--black); color: var(--white); }
.btn--dark::before { background: var(--cyan); }
.btn--dark:hover { color: var(--black); }


.btn--sm { min-height: 44px; padding: 0.6rem 1.25rem; font-size: 0.6875rem; letter-spacing: 0.14em; }

.btn__arrow { transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.3, 1); }
.btn:hover .btn__arrow { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
  .btn__arrow { transition: none; }
}

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.5rem; }
@media (max-width: 519px) { .actions .btn { width: 100%; } }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  background:
    var(--grain),
    radial-gradient(52% 48% at 24% 30%, rgba(0,183,232,.11) 0%, transparent 64%),
    radial-gradient(40% 40% at 88% 76%, rgba(0,183,232,.05) 0%, transparent 66%),
    linear-gradient(172deg, #0e1c25 0%, var(--black) 62%, #04080a 100%);
  background-color: var(--black);
}

.hero__grid {
  display: grid;
  gap: 2.25rem;
  padding-block: 2rem 0;
}
/* Grid items default to min-width: auto, sizing to their content's longest
   unbreakable run rather than the track — without this the hook's longest
   word/line pushes .hero__head past the column and off the right edge. */
.hero__head { min-width: 0; }
@media (min-width: 1000px) {
  /* The headline spans the full hero width so each sentence holds one line
     at full display size; the copy/CTA column and the video split the row
     beneath it. Confining the headline to the left column (alongside the
     video) was what forced "You measure everything." to wrap mid-sentence. */
  .hero__grid {
    grid-template-columns: 1.06fr 0.94fr;
    grid-template-areas:
      "head head"
      "copy vsl";
    column-gap: 4.5rem;
    row-gap: 2.5rem;
    padding-block: 4.25rem 0;
  }
  .hero__head { grid-area: head; }
  /* Align — the video's top now lines up with the top of the copy block
     instead of both being centered against each other's height. */
  .hero__copy { grid-area: copy; align-self: start; }
  .hero__grid .vsl { grid-area: vsl; align-self: start; }
}

.hero__lede { margin-top: 0; max-width: none; }

/* Hero headline hook sequence. The visible line is a plain <p>, not the
   h1 itself (see markup), so it needs the h1's own family/size/wrap
   explicitly; stretch/weight/uppercase/line-height/letter-spacing still
   come from the shared .display class.

   font-size is NOT the sitewide h1 clamp — it's tuned per range so the
   longest hook always wraps to exactly 3 lines, and deliberately
   plain-wraps rather than text-wrap: balance. Balance
   recomputes its "ideal" break points on every content change, so under
   the typewriter it was visibly moving words between lines as each
   character landed (reported by Jeff, reproduced, root-caused to balance).
   Plain wrap only pushes a word to the next line once it stops fitting and
   never pulls it back, so typing is monotonic — nothing moves backward.
   Each size below is the largest that still holds the longest hook to 3
   lines at that range, measured directly in-browser (not from the clamp),
   with a small margin below the measured 4-line threshold. Because every
   size targets the same 3-line result, min-height only needs one uniform
   formula instead of a per-range line count. */
.hero__hook {
  font-family: var(--font-display);
  font-size: 19px;
  margin: 0;
  text-wrap: wrap;
  overflow-wrap: break-word;
  /* Opens up the shared .display class's tight -0.005em tracking (tuned for
     the sitewide h1, not this compressed, 3-line-constrained size) — Jeff
     flagged the hook reading too dense. Scoped to this element only, so
     the rest of the site's display type is untouched. */
  letter-spacing: 0.01em;
  word-spacing: 0.2em;
  /* "Entrepreneurs" (hook 1's first word, 13 uppercase characters at this
     compressed display size) is wider than the column at narrow widths —
     without this it silently clips against body's overflow-x: hidden
     instead of wrapping. */
  min-height: calc(0.86em * 3);
}
@media (min-width: 480px) { .hero__hook { font-size: 25px; } }
@media (min-width: 600px) { .hero__hook { font-size: 33px; } }
@media (min-width: 768px) { .hero__hook { font-size: 40px; } }
@media (min-width: 1000px) { .hero__hook { font-size: 52px; } }
@media (min-width: 1200px) { .hero__hook { font-size: 62px; } }
@media (min-width: 1400px) { .hero__hook { font-size: 68px; } }

.hero__hook-cursor {
  display: inline-block;
  width: 0.06em;
  margin-left: 0.04em;
  height: 0.72em;
  vertical-align: -0.02em;
  background: var(--cyan);
  opacity: 0;
}
.hero.is-typing .hero__hook-cursor {
  opacity: 1;
  animation: hook-blink 0.9s steps(1) infinite;
}
@keyframes hook-blink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }

.hero__hook-text.is-clearing {
  transition: opacity 0.22s var(--ease);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero__hook-cursor { display: none; }
  .hero__hook-text.is-clearing { transition: none; }
}

/* Hero subline strike-through. The hero is visible on load, above the fold,
   so this can't hook into the scroll-triggered .reveal system elsewhere on
   the page (it would never fire) — it plays once, shortly after load,
   driven by JS below.

   Base state (no JS, or prefers-reduced-motion): a plain, correct, teal
   strikethrough via text-decoration, which wraps safely at any width. This
   is also the permanent state for anyone without JS.

   html.js state: JS clears the native strike and reveals it either as a
   left-to-right drawn bar (the common case, one line) or, for the rare case
   a phrase wraps onto two lines at a very narrow width, falls back to the
   same native strike rather than trying to draw a bar across two lines. */
.strike {
  position: relative;
  text-decoration-line: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}

html.js .strike { text-decoration-line: none; }

html.js .strike:not(.is-wrapped)::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 54%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s var(--ease);
}
html.js .strike.is-struck:not(.is-wrapped)::after { transform: scaleX(1); }

html.js .strike.is-wrapped.is-struck {
  text-decoration-line: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html.js .strike { text-decoration-line: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
  html.js .strike::after { content: none; }
}


.hero__trust {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dk);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5625rem;
}
.hero__trust span { display: inline-flex; align-items: center; gap: 1.5625rem; }
@media (min-width: 700px) {
  .hero__trust span:not(:last-child)::after {
    content: ""; width: 4px; height: 4px; background: var(--cyan);
  }
}
@media (max-width: 699px) { .hero__trust { flex-direction: column; gap: 0.45rem; } }

/* VSL frame */
.vsl {
  position: relative;
  border: 1px solid var(--line-dk);
  background: var(--navy);
  box-shadow: var(--sh-d2);
  transition: box-shadow 0.34s var(--ease), transform 0.34s var(--ease);
}
.vsl:hover { box-shadow: var(--sh-fusion); transform: translateY(-4px); }

.vsl__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(to right,  rgba(196,247,246,0.055) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, rgba(196,247,246,0.055) 0 1px, transparent 1px 44px),
    var(--navy);
}
/* corner registration marks — instrument detail, not decoration */
.vsl__screen::before,
.vsl__screen::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--cyan);
  opacity: 0.55;
}
.vsl__screen::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.vsl__screen::after  { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.vsl__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vsl__screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vsl__play {
  position: relative;
  z-index: 1;
  width: 82px; height: 82px;
  border-radius: 50%;
  background: var(--cyan);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.24s cubic-bezier(0.32,0.72,0.3,1), background-color 0.24s ease;
}
.vsl__play:hover { background: var(--white); transform: scale(1.08); }
.vsl__play svg { margin-left: 5px; }
@media (prefers-reduced-motion: reduce) { .vsl__play:hover { transform: none; } }

.vsl__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  border-top: 1px solid var(--line-dk);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.vsl__bar strong { color: var(--white); font-weight: 600; }

/* ---------- 8. Baseline panel (the signature element) --------------------
   Now its own section (moved below Blind Spot), so the section wrapper's
   own padding-block provides top/bottom rhythm — .panel no longer needs to
   carry its own margin/border/padding for that. */
.panel { }

.panel__head {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 2.5rem;
}
.panel__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black);
  margin: 0;
}
.panel__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--muted-lt);
  margin: 0;
}

.panel__grid { display: grid; gap: 2.25rem 3rem; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .panel__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .panel__grid { grid-template-columns: repeat(4, 1fr); } }

.marker {
  background: linear-gradient(180deg, #101d26 0%, #0a141b 100%);
  border: 1px solid var(--line-dk);
  box-shadow: var(--sh-d1);
  padding: 1.5rem 1.35rem 1.35rem;
  transition: box-shadow 0.32s var(--ease), transform 0.32s var(--ease),
              border-color 0.32s ease;
  background-color: #0e1820;
}
.marker:hover {
  box-shadow: var(--sh-d2);
  transform: translateY(-4px);
  border-color: rgba(0,183,232,.4);
}

.marker__name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1rem;
}
.marker__track {
  position: relative;
  height: 3px;
  background: var(--line-dk);
  margin-bottom: 1rem;
}
.marker__range {
  position: absolute; top: 0; bottom: 0;
  left: var(--range-start);
  width: 0;
  background: rgba(0, 183, 232, 0.45);
  transition: width 0.9s var(--ease);
}
.panel.is-live .marker__range { width: var(--range-width); }
.panel.is-live .marker:nth-child(2) .marker__range { transition-delay: 0.08s; }
.panel.is-live .marker:nth-child(3) .marker__range { transition-delay: 0.16s; }
.panel.is-live .marker:nth-child(4) .marker__range { transition-delay: 0.24s; }
.marker__dot {
  position: absolute; top: 50%; left: var(--from);
  width: 14px; height: 14px;
  margin-left: -7px; margin-top: -7px;
  border-radius: 50%;
  background: var(--muted);
  border: 2px solid var(--black);
  transition: left 1.15s cubic-bezier(0.32, 0.72, 0.3, 1), background-color 1.15s ease;
}
.panel.is-live .marker__dot { left: var(--to); background: var(--green); }
.panel.is-live .marker:nth-child(2) .marker__dot { transition-delay: 0.12s; }
.panel.is-live .marker:nth-child(3) .marker__dot { transition-delay: 0.24s; }
.panel.is-live .marker:nth-child(4) .marker__dot { transition-delay: 0.36s; }

.marker__foot {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.marker__state { color: var(--muted); transition: color 0.4s ease 0.75s; }
.panel.is-live .marker__state { color: var(--green); }
.marker__state::before { content: attr(data-before); }
.panel.is-live .marker__state::before { content: attr(data-after); }

@media (prefers-reduced-motion: reduce) {
  .marker__dot, .marker__state { transition: none; }
}

/* ---------- 9. Split / blind spot ---------------------------------------- */
.split { display: grid; gap: 3rem; }
@media (min-width: 960px) {
  .split { grid-template-columns: 0.92fr 1.08fr; gap: 6rem; align-items: start; }
}

.costs { list-style: none; margin: 0; padding: 0; }
.costs li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 1.85rem 0;
  border-top: 1px solid var(--line-lt);
}
.costs li:last-child { border-bottom: 1px solid var(--line-lt); }
.costs__idx {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--cyan-deep);
  padding-top: 0.4rem;
}
.costs h3 { margin-bottom: 0.5rem; }
.costs p { color: var(--muted-lt); font-size: 0.9688rem; margin: 0; }

/* ---------- 10. Process -------------------------------------------------- */
.steps { display: grid; gap: 0; margin-top: 4rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step { position: relative; padding: 2.5rem 0; border-top: 2px solid var(--cyan); }
@media (min-width: 900px) {
  .step { padding: 2.75rem 3rem 0 0; }
  .step + .step { padding-left: 3rem; border-left: 1px solid var(--line-dk); }
}
.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  color: var(--cyan);
  margin-bottom: 1.35rem;
}
.step h3 { margin-bottom: 0.8rem; }
.step p { color: var(--muted); font-size: 0.9688rem; }

/* ---------- 10a. How-it-works header photo -------------------------------- */
.how__head { display: grid; gap: 3rem; }
@media (min-width: 900px) {
  .how__head { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
}

.how__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: var(--sh-d2);
  background:
    var(--grain),
    linear-gradient(168deg, #14303f 0%, var(--navy) 60%, #091a24 100%);
  background-color: var(--navy);
}
.how__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source is a tall phone selfie (portrait, ~9:16) cropped into this 4:3
     landscape frame — biased toward the top third so the face and shirt
     logo survive the crop instead of a dead-center crop landing on the
     midsection. */
  object-position: center 20%;
}

/* ---------- 10b. Phases (the narrative walk-through, dark ground) -------- */
/* Distinct from the Tiers cards below: this is the "why" in long form, laid
   out as intro copy beside its own inclusion list, rather than a
   side-by-side comparison. Deliberately duplicates some of the same facts as
   Tiers for now, at the site owner's request, pending a later pass. */
.phases {
  display: grid;
  gap: 0;
  margin-top: 4rem;
}

.phase {
  padding-block: 3rem;
  border-top: 2px solid var(--cyan);
}
.phase:first-child { padding-top: 0; border-top: 0; }

.phase__grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .phase__grid { grid-template-columns: 0.95fr 1.05fr; gap: 4.5rem; align-items: start; }
}

.phase__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1rem;
}

.phase__name {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  margin: 0 0 1rem;
}

.phase__for {
  color: var(--aqua);
  font-size: 1.0625rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.phase__intro p:not(.phase__for) {
  color: var(--muted);
  font-size: 0.9688rem;
}

.phase__list-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-dk);
}

.phase__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.phase__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}
.phase__list li:last-child { margin-bottom: 0; }
.phase__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 9px; height: 2px;
  background: var(--cyan);
}

.phase__close {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-dk);
}
.phase__close-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 0.9rem;
}
.phase__close p {
  color: var(--aqua);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
}

/* ---------- 12. Full-bleed band + overlapping card ----------------------- */
/* The reference's signature move: a card breaking up into a full-bleed band. */
.band { background: var(--paper); }

.band__field {
  position: relative;
  padding-block: var(--section-y) calc(var(--section-y) + 6.5rem);
  overflow: hidden;
  background:
    var(--grain),
    radial-gradient(56% 60% at 22% 26%, rgba(0,183,232,.10) 0%, transparent 64%),
    linear-gradient(168deg, #14303f 0%, var(--navy) 55%, #091a24 100%);
  background-color: var(--navy);
}
.band__field::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to right,  rgba(196,247,246,0.05) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(to bottom, rgba(196,247,246,0.05) 0 1px, transparent 1px 52px);
  pointer-events: none;
}
.band__field > * { position: relative; }
.band__field h2 { color: var(--white); }
.band__field .lede { color: var(--aqua); }
.band__intro { margin-top: 1.75rem; max-width: 52ch; }

.band__card {
  background: var(--white);
  border: 1px solid var(--line-lt);
  box-shadow: var(--sh-3);
  margin-top: -6.5rem;
  padding: 2.5rem 1.5rem;
}
@media (min-width: 768px) { .band__card { padding: 3.5rem 3rem; } }

/* Nine cards, three across, three rows. Height is fixed from 1000px up so the
   rows read as a grid rather than a ragged stack; below that it relaxes to
   content height because the copy needs the room. */
.measure {
  display: grid;
  gap: 2.5rem 3rem;
  --measure-h: 17.5rem;
}
@media (min-width: 640px)  { .measure { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .measure { grid-template-columns: repeat(3, 1fr); grid-auto-rows: var(--measure-h); }
}
/* 17.5rem is the safe floor for the narrower 3-column widths, where the
   longest card's copy wraps furthest and leaves the least slack above the
   label. Once the row's content column stops growing (.wrap hits its
   1340px cap, confirmed stable from ~1360px up), the longest card has 79px
   of verified slack, enough to cut a further 60px and still keep a ~19px
   buffer above the label. */
@media (min-width: 1360px) {
  .measure { --measure-h: 13.75rem; }
}

.measure__item {
  border: 1px solid var(--line-lt);
  border-top: 3px solid var(--black);
  background: var(--white);
  padding: 1.15rem 1.35rem 1.1rem;
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease),
              border-top-color 0.3s ease;
}
.measure__item:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-4px);
  border-top-color: var(--cyan-deep);
}
/* Scoped to the item because `.measure__item p { margin: 0 }` is more
   specific than `.measure__label` and would otherwise win. */
.measure__item .measure__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-lt);
  margin: 1.35rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-lt);
}
/* pinned to the foot of the card once the height is fixed */
@media (min-width: 1000px) {
  .measure__item .measure__label { margin-top: auto; }
}
.measure__item h3 { margin-bottom: 0.6rem; color: var(--black); }
.measure__item p { font-size: 0.9375rem; color: var(--muted-lt); margin: 0; }
.measure__item h3 + p { line-height: 1.6; }

/* ---------- 13. Founder -------------------------------------------------- */
.founder { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .founder { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; } }

.founder__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  box-shadow: var(--sh-3);
  background:
    var(--grain),
    linear-gradient(168deg, #14303f 0%, var(--navy) 60%, #091a24 100%);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background-color: var(--navy);
}
.founder__frame::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(196,247,246,0.06) 0 1px, transparent 1px 36px);
}
.founder__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source is a tall phone selfie (1607×2857, ~9:16) cropped into this
     4:5 frame — biased toward the top so the face and shirt logo stay in
     frame instead of a dead-center crop eating into the hairline. */
  object-position: center 22%;
}
.founder__ph {
  position: relative;
  width: 100%;
  padding: 1.35rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line-dk);
  margin: 0;
}

.founder__quote {
  position: relative;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: var(--black);
  margin: 0 0 2.25rem;
  padding-top: 2.25rem;
  text-wrap: pretty;
}
/* Hanging quote mark, set large and quiet — an editorial device, not an icon. */
.founder__quote::before {
  content: "\201C";
  position: absolute;
  top: -0.28em; left: -0.06em;
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan-deep);
  opacity: 0.22;
  pointer-events: none;
}
.founder__body p:first-child {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #40575f;
}
.founder__body p { color: var(--muted-lt); }
.founder__by {
  margin-top: 2rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-lt);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
}
.founder__by span { color: var(--muted-lt); }

/* ---------- 14. Reports -------------------------------------------------- */
.reports { display: grid; gap: 2rem; margin-top: 3.5rem; list-style: none; padding: 0; }
@media (min-width: 700px)  { .reports { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3.5rem; } }
@media (min-width: 1024px) { .reports { grid-template-columns: repeat(4, 1fr); } }

.reports li { border-top: 2px solid var(--cyan); padding-top: 1.35rem; }
.reports h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.reports p { font-size: 0.9375rem; color: var(--muted); margin: 0; }

.claim {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-dk);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--muted);
  max-width: 72ch;
}

/* ---------- 15. FAQ ------------------------------------------------------ */
.faq { margin-top: 3.5rem; display: grid; gap: 0.75rem; }
.faq__item {
  background: var(--white);
  border: 1px solid var(--line-lt);
  box-shadow: var(--sh-1);
  padding: 0 1.5rem;
  transition: box-shadow 0.28s var(--ease), transform 0.28s var(--ease),
              border-color 0.28s ease;
}
.faq__item:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
  border-color: #c6d5da;
}
.faq__item:has(.faq__q[aria-expanded="true"]) {
  box-shadow: var(--sh-2);
  border-color: #c6d5da;
}

.faq__q {
  width: 100%;
  background: none; border: 0;
  text-align: left;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem;
  padding: 1.6rem 0;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--black);
  transition: color 0.18s ease;
}
.faq__q:hover { color: var(--cyan-deep); }

.faq__sign { flex: none; width: 18px; height: 18px; position: relative; margin-top: 0.35rem; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform 0.26s cubic-bezier(0.32,0.72,0.3,1);
}
.faq__sign::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq__sign::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: scaleY(0); }

.faq__a {
  display: none;
  padding: 0 0 1.85rem;
  color: var(--muted-lt);
  font-size: 0.9688rem;
}
.faq__a.is-open { display: block; }

@media (prefers-reduced-motion: reduce) {
  .faq__sign::before, .faq__sign::after { transition: none; }
}

/* ---------- 16. Finale --------------------------------------------------- */
.finale {
  color: var(--white);
  background:
    var(--grain),
    radial-gradient(58% 42% at 18% 8%, rgba(0,183,232,.055) 0%, transparent 62%),
    linear-gradient(178deg, #0c1820 0%, var(--black) 58%, #04080a 100%);
  background-color: var(--black);
}
.finale__grid { display: grid; gap: 3rem; }
@media (min-width: 900px) {
  .finale__grid { grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: center; }
}
.finale h2 { color: var(--white); }
.finale p { color: var(--muted); }

.finale__next { list-style: none; margin: 0; padding: 0; }
.finale__next li {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line-dk);
  font-size: 0.9688rem;
}
.finale__next li:last-child { border-bottom: 1px solid var(--line-dk); }
.finale__next .mono { font-size: 0.75rem; letter-spacing: 0.14em; padding-top: 0.25rem; color: var(--cyan); }

/* ---------- 17. Footer --------------------------------------------------- */
.footer {
  padding-block: 4.5rem 2.5rem;
  background: var(--grain), linear-gradient(180deg, #04080a 0%, #0a141b 100%);
  background-color: var(--black);
}

.footer__top {
  display: grid; gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-dk);
}
@media (min-width: 800px) { .footer__top { grid-template-columns: 1.3fr 1fr 1fr 0.8fr; gap: 3.5rem; } }

.footer__logo img { width: 148px; margin-bottom: 1.5rem; }
.footer__blurb { color: var(--muted); font-size: 0.9375rem; max-width: 40ch; }

.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1.35rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 0.7rem; }
.footer__list a {
  color: var(--muted); font-size: 0.9375rem;
  transition: color 0.18s ease;
  display: inline-block; padding: 0.15rem 0;
}
.footer__list a:hover { color: var(--cyan); }

.disclaimer {
  margin-top: 3rem;
  font-size: 0.8125rem; line-height: 1.75;
  color: var(--muted);
}
.disclaimer strong { color: var(--aqua); font-weight: 600; }

.footer__base {
  margin-top: 2.5rem; padding-top: 1.85rem;
  border-top: 1px solid var(--line-dk);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em;
  color: var(--muted);
}

.footer__seal { display: inline-block; line-height: 0; }
.footer__seal img { width: 88px; }

/* ---------- 18. Page head (inner pages) ---------------------------------- */
.pagehead {
  padding-block: 4rem 3.5rem;
  background:
    var(--grain),
    radial-gradient(56% 60% at 20% 24%, rgba(0,183,232,.10) 0%, transparent 64%),
    linear-gradient(172deg, #0e1c25 0%, var(--black) 70%);
  background-color: var(--black);
}
.pagehead h1 { max-width: 17ch; }
.pagehead .lede { margin-top: 1.75rem; max-width: 54ch; }

.pagehead__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) {
  .pagehead__grid { grid-template-columns: 1.1fr 0.9fr; column-gap: 3.5rem; align-items: start; }
}

/* ---------- 19. Quiz ----------------------------------------------------- */
.quiz__layout { display: grid; gap: 3.5rem; }
@media (min-width: 1000px) {
  .quiz__layout { grid-template-columns: 1.3fr 0.7fr; gap: 5rem; align-items: start; }
}

.quiz {
  border: 1px solid var(--line-lt);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--sh-3);
}

.quiz__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line-lt);
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-lt);
}
.quiz__progress { flex: 1; max-width: 200px; height: 3px; background: var(--line-lt); position: relative; }
.quiz__progress i {
  position: absolute; inset: 0 auto 0 0;
  background: var(--cyan-deep); width: 0%;
  transition: width 0.38s cubic-bezier(0.32, 0.72, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) { .quiz__progress i { transition: none; } }

.quiz__body { padding: 2.25rem 1.5rem 2.5rem; }
@media (min-width: 700px) { .quiz__body { padding: 3rem 3rem 3.25rem; } }

.qstep { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.qstep.is-active { display: block; }

.qstep__legend {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--black);
  margin: 0 0 0.85rem;
  padding: 0; border: 0;
}
/* Headings that receive focus from script (for screen readers) are not
   controls, so they don't take the focus ring. */
.quiz [tabindex="-1"]:focus { outline: none; }
.qstep__help { color: var(--muted-lt); font-size: 0.9375rem; margin-bottom: 2rem; }

/* A step that asks two questions: each is its own group */
.qgroup { border: 0; margin: 0; padding: 0; min-width: 0; }
.qgroup + .qgroup { margin-top: 3rem; }

.opts { display: grid; gap: 0.625rem; border: 0; margin: 0; padding: 0; }

.opt {
  position: relative;
  display: flex; align-items: center; gap: 1.1rem;
  min-height: 60px;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-lt);
  cursor: pointer;
  background: var(--white);
  transition: border-color 0.2s ease, background-color 0.2s ease,
              box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.opt:hover {
  border-color: var(--black);
  box-shadow: var(--sh-1);
  transform: translateY(-2px);
}
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt input:focus-visible ~ .opt__box { outline: 2px solid var(--cyan-deep); outline-offset: 3px; }

.opt__box {
  flex: none; width: 20px; height: 20px;
  border: 1px solid var(--muted-lt);
  border-radius: 50%;
  position: relative;
}
.opt__box::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--cyan-deep);
  transform: scale(0);
  transition: transform 0.18s cubic-bezier(0.32,0.72,0.3,1);
}
.opt input:checked ~ .opt__box::after { transform: scale(1); }
.opt input:checked ~ .opt__box { border-color: var(--cyan-deep); }
.opt:has(input:checked) { border-color: var(--black); background: var(--paper); }
/* Multi-select options get a square box, so they don't read as either/or */
.opt input[type="checkbox"] ~ .opt__box,
.opt input[type="checkbox"] ~ .opt__box::after { border-radius: 0; }
.opt__text { font-size: 0.9688rem; }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-lt);
  margin-bottom: 0.55rem;
}
.field input, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--line-lt);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.18s ease;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--black); outline: none; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 2px; }

.quiz__nav {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  margin-top: 2.25rem; padding-top: 2rem;
  border-top: 1px solid var(--line-lt);
}
.quiz__nav .btn--ghost {
  margin-right: auto;
  color: var(--black);
  border-color: var(--line-lt);
}
.quiz__nav .btn--ghost::before { background: var(--black); }
.quiz__nav .btn--ghost:hover { color: var(--white); border-color: var(--black); }

.quiz__done { display: none; }
.quiz__done.is-active { display: block; }
.quiz__done h2 { margin-bottom: 1.25rem; color: var(--black); }
.quiz__done .eyebrow { color: var(--black); }
.quiz__done .eyebrow::before { background: var(--cyan-deep); }

.field input[aria-invalid="true"] {
  border-color: var(--red-deep);
  box-shadow: inset 0 0 0 1px var(--red-deep);   /* reads as a 2px border without shifting layout */
}
.field input[aria-invalid="true"]:focus-visible { outline-color: var(--red-deep); }
.field__err, .quiz__status {
  font-family: var(--font-mono);
  font-size: 0.75rem; line-height: 1.6;
  color: var(--red-deep);
}
.field__err { margin-top: 0.5rem; }
.field__hint { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--muted-lt); }
.quiz__status { margin-top: 1.25rem; padding: 0.9rem 1rem; border: 1px solid var(--line-lt); border-left: 3px solid var(--black); color: var(--black); }

.quiz__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.quiz .btn[disabled] { opacity: 0.6; cursor: progress; }
.quiz .btn[disabled]::before { display: none; }

.quiz__calendar { margin-top: 2rem; border: 1px solid var(--line-lt); }
.quiz__calendar:empty { display: none; }
.quiz__calendar iframe { display: block; width: 100%; min-height: 760px; border: 0; }

.readout { margin: 2rem 0; border: 1px solid var(--line-lt); }
.readout__row {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--line-lt);
}
.readout__row:last-child { border-bottom: 0; }
.readout__row dt { color: var(--muted-lt); margin: 0; }
.readout__row dd { color: var(--black); margin: 0; text-align: right; }
.readout__row dd span { display: block; }

.aside__block {
  border: 1px solid var(--line-lt);
  border-top: 3px solid var(--black);
  background: var(--white);
  box-shadow: var(--sh-1);
  padding: 1.5rem 1.35rem 1.6rem;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.aside__block:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.aside__block h3 { margin-bottom: 1rem; font-size: 1.125rem; color: var(--black); }
.aside__block p, .aside__block li { color: var(--muted-lt); font-size: 0.9375rem; }
.aside__block ul { margin: 0; padding-left: 1.15rem; }
.aside__block li { margin-bottom: 0.55rem; }

/* ---------- 20. Legal pages ---------------------------------------------- */
.legal { max-width: 76ch; }
.legal h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  letter-spacing: -0.02em;
  margin: 3.25rem 0 1.1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-lt);
  color: var(--black);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 1.0625rem; margin: 2rem 0 0.65rem; color: var(--black); }
.legal p, .legal li { color: var(--muted-lt); font-size: 0.9688rem; }
.legal ul { padding-left: 1.25rem; margin: 0 0 1.15rem; }
.legal li { margin-bottom: 0.55rem; }
.legal strong { color: var(--black); font-weight: 600; }
.legal a { color: var(--black); text-decoration: underline; text-decoration-color: var(--cyan-deep); text-underline-offset: 3px; }
.legal a:hover { color: var(--cyan-deep); }
.legal__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--muted-lt);
  margin-bottom: 3rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line-lt);
}

/* ---------- 20b. Asset placeholders -------------------------------------
   Deliberately conspicuous. These mark the two slots that still need real
   photography/video and are meant to be removed before launch. */
.asset-flag {
  position: absolute;
  top: 0.875rem; left: 0.875rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0b0b0b;
  background: #ffb000;
  border: 1px dashed rgba(11,11,11,.55);
}
.asset-note {
  position: absolute;
  bottom: 0.875rem; left: 0.875rem; right: 0.875rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
  margin: 0;
}
.founder__frame .asset-note { position: static; padding: 1.35rem; }

/* ---------- 21. Scroll reveal -------------------------------------------
   Content is visible by default; the hidden start state applies only once JS
   confirms it can reveal it again. */
html.js .reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.7s ease, translate 0.7s var(--ease);
}
html.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* Staggered children. The index is set on each child by the observer so the
   items in a grid or list arrive in sequence rather than all at once. */
html.js .stagger > * {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.6s ease, translate 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.js .stagger.is-in > * { opacity: 1; translate: 0 0; }
/* the hover/elevation transition must survive the entrance delay */
html.js .stagger.is-in > *:hover { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .stagger > * { opacity: 1; translate: 0 0; transition: none; }
  .marker, .measure__item, .faq__item,
  .aside__block, .opt, .vsl, .btn {
    transition: none !important;
  }
  .marker:hover, .measure__item:hover,
  .faq__item:hover, .aside__block:hover, .opt:hover, .vsl:hover {
    transform: none;
  }
  .marker__range, .marker__dot, .marker__state { transition: none; }
  .panel.is-live .marker__range { width: var(--range-width); }
}