@charset "utf-8";
/* ==========================================================================
   LYMRIC — AI Content Operating System
   Landing stylesheet. Tokens mirror 04_Design_Tokens/lymric-design-tokens.json
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Brand */
  --navy: #071D3F;
  --navy-2: #0D2B56;
  --gold: #D6A13A;
  --gold-light: #E7C36F;
  /* Gold family, darkened for TEXT on light grounds (5.18:1 on ivory).
     Signal Gold itself is 2.23:1 on ivory = accent only, never copy. */
  --gold-ink: #8C6220;
  --ivory: #FBFAF6;
  --white: #FFFFFF;
  /* Neutral */
  --ink: #101828;
  --slate: #667085;
  --mist: #E7EBF1;
  --soft: #F2F4F7;
  /* Semantic */
  --success: #3F8F6B;
  --warning: #C58A2B;
  --error: #C84A4A;
  /* Signal gradient */
  --signal: linear-gradient(90deg, #D6A13A 0%, #B88B4A 44%, #6A6570 62%, #071D3F 100%);
  --signal-soft: linear-gradient(90deg, rgba(214,161,58,.9) 0%, rgba(184,139,74,.6) 44%, rgba(106,101,112,.35) 62%, rgba(7,29,63,0) 100%);

  /* Radius + elevation */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow: 0 12px 40px rgba(7, 29, 63, .10);
  --shadow-lift: 0 22px 64px rgba(7, 29, 63, .16);

  /* Type */
  --font-d: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-u: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-m: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Motion — 600-900ms signature, 180-280ms UI feedback */
  --t-sig: 760ms;
  --t-sig-slow: 900ms;
  --t-ui: 220ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.42, 0, .58, 1);

  /* Entrances. The page is finished at rest: these time the entrance of the
     elements that were below the fold at load, never a precondition to read. */
  --t-reveal: 480ms;      /* below-fold reveals */
  --t-draw: 420ms;        /* connector draw */
  --t-undraw: 320ms;      /* connector undraw */
  --stagger-max: 240ms;   /* cap for any group; JS clamps --d to this */
  --connector-w: 2px;     /* the provenance section uses 2.5px via .prov */
  --rights-ok: var(--success);
  --rights-blocked: var(--error);

  /* Layout — 12 col, 8px base */
  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(72px, 8.5vw, 136px);
  --u: 8px;
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
/* A deep link lands instantly: <head> adds html.jump when a hash is present; boot removes it after load. */
html.jump { scroll-behavior: auto; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--font-u);
  font-size: clamp(16px, .55vw + 14.4px, 18px);
  font-weight: 400;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

::selection { background: rgba(214, 161, 58, .26); color: var(--navy); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.dark :focus-visible { outline-color: var(--gold-light); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--ivory);
  border-radius: 0 0 var(--r-sm) 0;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------- 3. Typography */
.display,
h1, h2, h3 {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.display {
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.032em;
}

h1, .h1 {
  font-size: clamp(32px, 4.4vw, 62px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.028em;
}

h2, .h2 {
  font-size: clamp(25px, 2.5vw, 36px);
  font-weight: 400;
  line-height: 1.12;
}

h3, .h3 {
  font-size: clamp(19px, 1.35vw, 23px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.014em;
}

.label {
  font-family: var(--font-u);
  font-size: clamp(11px, .35vw + 9.8px, 13px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate);
  font-variation-settings: normal;
}
.label--gold { color: var(--gold-ink); }
.dark .label { color: rgba(251, 250, 246, .58); }
.dark .label--gold { color: var(--gold); }

.lead {
  font-size: clamp(17px, .9vw + 14px, 22px);
  line-height: 1.5;
  color: var(--navy);
  max-width: 34ch;
  text-wrap: pretty;
}

.body-2 { color: var(--slate); }
.dark .body-2 { color: rgba(251, 250, 246, .72); }
.dark { color: var(--ivory); }

.measure { max-width: 62ch; text-wrap: pretty; }
.mono {
  font-family: var(--font-m);
  font-size: .82em;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- 4. Layout */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 92px); }
.section--navy {
  background: var(--navy);
  color: var(--ivory);
}
.section--soft { background: linear-gradient(180deg, var(--ivory) 0%, #F4F2EC 100%); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.sec-head { margin-bottom: clamp(36px, 4.4vw, 68px); }
.sec-head .label { margin-bottom: 20px; display: block; }
.sec-head h2 { max-width: 20ch; }
.sec-head p { margin-top: 20px; }

/* Gold hairline that introduces a section */
.hair {
  height: 1px;
  width: clamp(56px, 8vw, 112px);
  background: var(--signal);
  margin-bottom: 24px;
  transform-origin: left;
}

/* -------------------------------------------------- 5. Scroll signal line */
.signal-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 90;
  background: var(--signal);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

/* ------------------------------------------------------------- 6. Header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(251, 250, 246, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui) var(--ease-io), background var(--t-ui) var(--ease-io);
}
.site-head.is-stuck {
  border-bottom-color: var(--mist);
  background: rgba(251, 250, 246, .93);
}

.head-in {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
  min-height: 76px;
  padding-block: 14px;
}

.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { width: clamp(140px, 12vw, 168px); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.7vw, 30px);
  margin-left: auto;
}
.nav a {
  font-size: 14.5px;
  font-weight: 450;
  color: var(--navy);
  padding: 6px 2px;
  position: relative;
  transition: color var(--t-ui) var(--ease-io);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-ui) var(--ease);
}
.nav a:hover { color: var(--navy-2); }
.nav a:hover::after { transform: scaleX(1); }

/* The bar is 76px tall and its children are centred in it, so every child box
   has to be an even whole number of pixels. A fractional box (14.5px text on a
   unitless leading) centres on a half pixel, and the header text then rasterises
   on a different sub-pixel grid once the sticky bar is composited — which reads
   as the baseline drifting while the page scrolls. Integer leading, no drift. */
.head-cta { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 20px); flex: 0 0 auto; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--mist);
  border-radius: var(--r-sm);
  /* The padding sets the shape; the minimum sets the target. A narrower
     padding at <=900 used to shrink the button to 40 x 30. */
  padding: 16px 13px;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  cursor: pointer;
  line-height: 0;
}
.nav-toggle svg { width: 18px; height: 12px; }
.nav-toggle rect {
  fill: var(--navy);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--t-ui) var(--ease), opacity var(--t-ui) linear;
}
.nav-toggle[aria-expanded="true"] rect:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] rect:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] rect:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* -------------------------------------------------------------- 7. Buttons */
.btn {
  --btn-fg: var(--ivory);
  --btn-bg: var(--navy);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px; /* 44 px tap target */
  border: 1px solid var(--btn-bg);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-u);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform var(--t-ui) var(--ease-io),
              background var(--t-ui) var(--ease-io),
              border-color var(--t-ui) var(--ease-io),
              color var(--t-ui) var(--ease-io),
              box-shadow var(--t-ui) var(--ease-io);
}
.btn > span { position: relative; z-index: 1; }

/* gold signal sweep on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-sig) var(--ease);
  z-index: 0;
}
.btn:hover::before { transform: scaleX(1); }

.btn--primary:hover { background: var(--navy-2); border-color: var(--navy-2); box-shadow: var(--shadow); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  border-color: rgba(7, 29, 63, .3);
}
.btn--ghost:hover { border-color: var(--navy); background: rgba(7, 29, 63, .04); }

.dark .btn--primary { --btn-bg: var(--ivory); --btn-fg: var(--navy); border-color: var(--ivory); }
.dark .btn--primary:hover { background: var(--white); border-color: var(--white); }
.dark .btn--ghost { --btn-fg: var(--ivory); border-color: rgba(251, 250, 246, .3); }
.dark .btn--ghost:hover { border-color: var(--ivory); background: rgba(251, 250, 246, .07); }

.btn--sm { padding: 12px 20px; font-size: 12px; }
.btn--sm::after { content: ""; position: absolute; inset: -4px; } /* 44 px hit area, visual unchanged */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.microcopy {
  font-size: 13.5px;
  color: var(--slate);
  letter-spacing: .01em;
}
.dark .microcopy { color: rgba(251, 250, 246, .6); }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  border-bottom: 1px solid rgba(7, 29, 63, .2);
  padding-bottom: 3px;
  transition: border-color var(--t-ui) var(--ease-io);
}
.textlink svg { flex: 0 0 auto; transition: transform var(--t-ui) var(--ease); }
.textlink:hover { border-color: var(--gold); }
.textlink:hover svg { transform: translateX(4px); }
.dark .textlink { color: var(--ivory); border-bottom-color: rgba(251, 250, 246, .28); }
.dark .textlink:hover { border-color: var(--gold); }

/* ---------------------------------------------------------- 8. Chips + tags */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--mist);
  border-radius: var(--r-pill);
  background: rgba(251, 250, 246, .92);
  color: var(--navy);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip--onmedia {
  background: rgba(7, 29, 63, .74);
  border-color: rgba(251, 250, 246, .26);
  color: var(--ivory);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.chip--time { font-family: var(--font-m); letter-spacing: .02em; }
.chip i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}
.chip--ok i { background: var(--success); }
.chip--no i { background: var(--error); }
.chip--warn i { background: var(--warning); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row > li { display: contents; } /* a list item wrapper must not add a line box to the row */

.tm {
  font-size: .6em;
  vertical-align: .56em;
  letter-spacing: 0;
  font-weight: 400;
  opacity: .72;
}
/* At 11.5px a superscript mark is noise, not information */
.chip .tm { display: none; }
.label .tm { font-size: .78em; vertical-align: .42em; opacity: .8; }

/* --------------------------------------------------------------- 9. Cards */
.card {
  border: 1px solid var(--mist);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: clamp(24px, 2.4vw, 36px);
  transition: transform var(--t-sig) var(--ease), box-shadow var(--t-sig) var(--ease), border-color var(--t-sig) var(--ease);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--slate); font-size: 15.5px; line-height: 1.6; }
.dark .card {
  background: rgba(251, 250, 246, .04);
  border-color: rgba(251, 250, 246, .14);
}
.dark .card p { color: rgba(251, 250, 246, .7); }

/* -------------------------------------------------------- 10. Media / photo */
.media {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}
.media__frame { position: relative; overflow: hidden; }
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.09) translate3d(0, var(--py, 0px), 0);
  filter: saturate(var(--sat, .58)) contrast(1.04) brightness(.9);
  will-change: transform;
}
/* Muted premium navy grade */
.media__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 29, 63, .30) 0%, rgba(7, 29, 63, .12) 42%, rgba(7, 29, 63, .78) 100%),
    linear-gradient(90deg, rgba(7, 29, 63, .48) 0%, rgba(7, 29, 63, .06) 62%);
  pointer-events: none;
}
.media__over {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(18px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}
.media__quote {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 27px);
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--ivory);
  max-width: 26ch;
}
.media__top {
  position: absolute;
  inset: clamp(16px, 1.8vw, 26px) clamp(16px, 1.8vw, 26px) auto auto;
  z-index: 2;
}

.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-3x2 { aspect-ratio: 3 / 2; }

.band {
  position: relative;
  min-height: clamp(420px, 58vh, 640px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}
.band__bg { position: absolute; inset: 0; z-index: 0; }
.band__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12) translate3d(0, var(--py, 0px), 0);
  filter: saturate(var(--sat, .5)) contrast(1.05) brightness(.82);
  will-change: transform;
}
.band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 29, 63, .58) 0%, rgba(7, 29, 63, .34) 40%, rgba(7, 29, 63, .92) 100%),
    linear-gradient(90deg, rgba(7, 29, 63, .72) 0%, rgba(7, 29, 63, .18) 70%);
}
.band__in {
  position: relative;
  z-index: 2;
  padding-block: clamp(44px, 6vw, 92px);
  color: var(--ivory);
}

/* ------------------------------------------------------------- 11. Motifs */
.motif { display: block; overflow: visible; }
.motif .draw { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.motif--cadence { width: clamp(200px, 26vw, 320px); }
.motif--flow { width: clamp(160px, 20vw, 240px); }

/* stroke draw */
.draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.is-drawn .draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-sig-slow) var(--ease-io) var(--dd, 0ms); }
.dot { opacity: 0; transform: scale(.4); transform-origin: center; transform-box: fill-box; }
.is-drawn .dot {
  opacity: 1;
  transform: scale(1);
  transition: opacity 320ms var(--ease-io) var(--dd, 0ms), transform 420ms var(--ease) var(--dd, 0ms);
}

/* Hero signature */
.signature { width: 100%; max-width: 640px; }

/* --------------------------------------------------------------- 12. Hero */
.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 104px) clamp(56px, 7vw, 112px);
  overflow: hidden;
}
/* Very low-contrast signal field, per brand templates */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 120%;
  background:
    radial-gradient(70% 55% at 18% 12%, rgba(214, 161, 58, .10) 0%, rgba(214, 161, 58, 0) 62%),
    radial-gradient(60% 50% at 92% 46%, rgba(13, 43, 86, .09) 0%, rgba(13, 43, 86, 0) 60%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.hero-copy { grid-column: 1 / span 7; }

.hero .display { margin-block: 22px 0; max-width: 15ch; }
.hero .lead { margin-top: 26px; max-width: 46ch; font-size: clamp(16.5px, .7vw + 14.5px, 20px); color: var(--slate); }
.hero .cta-row { margin-top: 36px; }
.hero .microcopy { margin-top: 18px; }

/* ------------------------------------------------------------ 13. Metrics */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  border-top: 1px solid var(--mist);
  padding-top: clamp(26px, 3vw, 44px);
}
.dark .metrics { border-top-color: rgba(251, 250, 246, .16); }
.metric__n {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-weight: 300;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.metric__l { margin-top: 12px; display: block; }

/* ------------------------------------------------------- 14. Before/After */
.chain { display: grid; gap: clamp(22px, 2.6vw, 38px); }
.chain__row {
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--white);
  padding: clamp(20px, 2vw, 28px);
}
.chain__row .label { display: block; margin-bottom: 16px; }
.chain__steps { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; }
.chain__steps li { display: flex; align-items: center; gap: 6px; }
.chain__steps li > span {
  font-size: 13px;
  color: var(--slate);
  padding: 7px 12px;
  border: 1px dashed var(--mist);
  border-radius: var(--r-sm);
  background: var(--soft);
}
.chain__steps li > b { font-weight: 400; font-size: 12px; color: rgba(102, 112, 133, .6); }
.chain__steps li:last-child > b { display: none; }

.chain__row--after { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.chain__row--after .label { color: var(--gold); }
.chain__row--after .chain__steps li > span {
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ivory);
  background: rgba(251, 250, 246, .07);
  border: 1px solid rgba(251, 250, 246, .2);
  padding: 10px 18px;
}
.chain__row--after .chain__steps li > b { color: var(--gold); }

/* --------------------------------------------------------- 15. Loop stages */
.loop { position: relative; }
.loop__rail {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--mist);
  border-radius: 2px;
  overflow: hidden;
}
.loop__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--gold) 0%, #B88B4A 46%, var(--navy) 100%);
  transform: scaleY(var(--fp, 0));
  transform-origin: 50% 0;
  transition: transform 120ms linear;
  will-change: transform;
}

/* --------------------------------------------------- 17. Blueprint mockup */
.bp { display: grid; gap: clamp(20px, 2vw, 28px); }
.bp__hero {
  border-radius: var(--r-lg);
  border: 1px solid rgba(251, 250, 246, .16);
  background: rgba(251, 250, 246, .05);
  padding: clamp(24px, 2.6vw, 40px);
}
.bp__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: rgba(251, 250, 246, .16); border: 1px solid rgba(251, 250, 246, .16); border-radius: var(--r-md); overflow: hidden; }
.bp__cell { background: var(--navy); padding: clamp(18px, 1.8vw, 26px); }
.bp__cell .label { color: rgba(251, 250, 246, .5); display: block; margin-bottom: 12px; }
.bp__cell p { font-size: 14.5px; line-height: 1.55; color: rgba(251, 250, 246, .82); }

.rec {
  border-radius: var(--r-lg);
  border: 1px solid rgba(214, 161, 58, .42);
  background: linear-gradient(180deg, rgba(214, 161, 58, .09), rgba(214, 161, 58, 0) 62%), rgba(251, 250, 246, .04);
  padding: clamp(24px, 2.6vw, 40px);
}
.rec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; }
.rec h3 {
  font-size: clamp(23px, 2.4vw, 34px);
  font-weight: 300;
  letter-spacing: -.026em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.rec p { color: rgba(251, 250, 246, .78); font-size: 15.5px; }
.rec__why { margin-top: 22px; display: grid; gap: 10px; }
.rec__why li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(251, 250, 246, .8);
}
.rec__why svg { width: 14px; margin-top: 6px; }
.score {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-m);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gold);
  border: 1px solid rgba(214, 161, 58, .4);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}

/* Bars — navy default, gold = the signal */
.bars { display: grid; gap: 14px; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bar__top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bar__top b { font-weight: 500; font-variant-numeric: tabular-nums; }
.bar__track { height: 6px; border-radius: 3px; background: var(--mist); overflow: hidden; }
.dark .bar__track { background: rgba(251, 250, 246, .14); }
.bar__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-sig-slow) var(--ease) var(--dd, 0ms);
  will-change: transform;
}
.dark .bar__fill { background: rgba(251, 250, 246, .5); }
.bar--signal .bar__fill { background: var(--gold); }
.in .bar__fill { transform: scaleX(var(--w, 0)); }

/* --------------------------------------------------------- 19. Transform */
.xform { border: 1px solid rgba(251, 250, 246, .18); border-radius: var(--r-lg); overflow: hidden; }
.xform__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(8px, 1.4vw, 20px);
  padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 26px);
  border-top: 1px solid rgba(251, 250, 246, .13);
}
.xform__row:first-child { border-top: 0; background: rgba(251, 250, 246, .05); }
.xform__row .label { color: rgba(251, 250, 246, .5); }
.xform__b { font-size: clamp(14px, 1.1vw, 17px); color: rgba(251, 250, 246, .62); font-variant-numeric: tabular-nums; }
.xform__a { font-size: clamp(14px, 1.1vw, 17px); color: var(--ivory); font-weight: 450; }
.xform__arrow { color: var(--gold); justify-self: center; }
.xform__arrow svg { width: 26px; }

/* ------------------------------------------------------------- 20. Oracle */
.asks { display: grid; gap: 12px; }
.asks li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--white);
  padding: 16px 20px;
  font-size: clamp(15px, 1.1vw, 17.5px);
  line-height: 1.5;
  transition: border-color var(--t-sig) var(--ease), transform var(--t-sig) var(--ease);
}
.asks li:hover { border-color: rgba(214, 161, 58, .5); transform: translateX(4px); }
.asks li span:first-child { color: var(--gold-ink); font-family: var(--font-m); font-size: 13px; padding-top: 3px; }

/* ------------------------------------------------------------ 21. Deploy */
.deploy { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: rgba(251, 250, 246, .16); border: 1px solid rgba(251, 250, 246, .16); border-radius: var(--r-lg); overflow: hidden; }

.code {
  border: 1px solid rgba(251, 250, 246, .18);
  border-radius: var(--r-md);
  background: rgba(7, 29, 63, .6);
  padding: 20px 22px;
  font-family: var(--font-m);
  font-size: 13px;
  line-height: 1.9;
  color: rgba(251, 250, 246, .84);
  overflow-x: auto;
}
.code .c-k { color: var(--gold); }
.code .c-c { color: rgba(251, 250, 246, .62); } /* 6.8:1 on navy; .42 measured 3.83:1 */

/* ------------------------------------------------------------ 22. Pricing */
.price-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--mist);
  border-radius: var(--r-pill);
  background: var(--white);
}
.toggle button {
  border: 0;
  background: none;
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: pointer;
  transition: background var(--t-ui) var(--ease-io), color var(--t-ui) var(--ease-io);
}
.toggle button[aria-pressed="true"] { background: var(--navy); color: var(--ivory); }
.toggle .save { color: var(--gold-ink); font-size: 11px; margin-left: 6px; letter-spacing: .06em; }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  margin-top: clamp(32px, 3.6vw, 52px);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mist);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: clamp(22px, 2.2vw, 32px);
  /* Reserve the badge band in every card so plan names sit on one baseline */
  padding-top: calc(clamp(22px, 2.2vw, 32px) + 30px);
  transition: transform var(--t-sig) var(--ease), box-shadow var(--t-sig) var(--ease), border-color var(--t-sig) var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan--feature {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--ivory);
  box-shadow: var(--shadow);
}
.plan--feature .plan__best, .plan--feature .plan__incl li { color: rgba(251, 250, 246, .74); }
.plan--feature .plan__per { color: rgba(251, 250, 246, .6); }
.plan--feature .plan__incl li::before { background: var(--gold); }
.plan__tag {
  position: absolute;
  top: clamp(22px, 2.2vw, 32px);
  left: clamp(22px, 2.2vw, 32px);
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  border: 1px solid rgba(214, 161, 58, .45);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.plan__name { font-size: 17px; font-weight: 500; letter-spacing: -.01em; display: block; }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 16px 0 4px;
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-weight: 300;
  letter-spacing: -.03em;
}
.plan__amt { font-size: clamp(32px, 3vw, 44px); line-height: 1; font-variant-numeric: tabular-nums; transition: opacity var(--t-ui) var(--ease-io); }
.plan__amt.swap { opacity: 0; }
.plan__per { font-family: var(--font-u); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--slate); }
.plan__best { font-size: 14px; color: var(--slate); min-height: 2.9em; }
.plan__incl { margin: 20px 0 24px; display: grid; gap: 9px; }
.plan__incl li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
}
.plan__incl li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--navy);
  opacity: .5;
}
.plan .btn { margin-top: auto; width: 100%; }
.plan-ent {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto;
  gap: clamp(20px, 2.6vw, 48px);
  align-items: center;
  margin-top: clamp(16px, 1.6vw, 24px);
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--navy);
  border-radius: var(--r-lg);
  background: var(--navy);
  color: var(--ivory);
}
.plan-ent .label { color: var(--gold); display: block; margin-bottom: 12px; }
.plan-ent h3 { font-size: clamp(20px, 1.9vw, 28px); font-weight: 300; letter-spacing: -.024em; margin-bottom: 10px; }
.plan-ent p { font-size: 14.5px; color: rgba(251, 250, 246, .74); max-width: 42ch; }
.plan-ent__list { display: grid; gap: 9px; }
.plan-ent__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(251, 250, 246, .8);
}
.plan-ent__list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.plan-ent .btn { white-space: nowrap; }

.price-note { margin-top: clamp(26px, 3vw, 40px); font-size: 14px; color: var(--slate); max-width: 88ch; }

/* ---------------------------------------------------------------- 23. FAQ */
.faqs { display: grid; gap: 0; border-top: 1px solid var(--mist); }
.faq { border-bottom: 1px solid var(--mist); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: clamp(20px, 2vw, 28px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.3;
  transition: color var(--t-ui) var(--ease-io);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--navy-2); }
.faq summary::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 13px; height: 13px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--t-ui) var(--ease);
}
.faq[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq__a { padding-bottom: clamp(20px, 2vw, 28px); color: var(--slate); max-width: 76ch; }

/* -------------------------------------------------------- 24. Closing CTA */
.close-cta { text-align: left; }
.close-cta h2 {
  font-size: clamp(30px, 4.4vw, 62px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: 22ch;
}
.close-cta .cta-row { margin-top: 36px; }

/* ------------------------------------------------------------- 25. Footer */
.site-foot {
  background: var(--navy);
  color: var(--ivory);
  padding-block: clamp(52px, 6vw, 88px) 32px;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.2vw, 56px);
}
.foot-brand img { width: clamp(196px, 20vw, 254px); margin-bottom: 26px; }
.foot-brand p { color: rgba(251, 250, 246, .62); font-size: 14.5px; max-width: 34ch; }
.foot-col h4 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, .48);
  margin-bottom: 16px;
}
.foot-col li + li { margin-top: 10px; }
.foot-col a {
  font-size: 14.5px;
  color: rgba(251, 250, 246, .84);
  transition: color var(--t-ui) var(--ease-io);
}
.foot-col a:hover { color: var(--gold); }
.foot-base {
  margin-top: clamp(40px, 4.4vw, 68px);
  padding-top: 24px;
  border-top: 1px solid rgba(251, 250, 246, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  font-size: 13px;
  color: rgba(251, 250, 246, .56);
}
.foot-base .sep { opacity: .4; }

/* -------------------------------------------------------- 25b. Utilities */
.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 72px);
  align-items: start;
}
.two--copy-first { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.two--media-first { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.two--head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }

.stack { display: grid; gap: clamp(18px, 1.8vw, 26px); align-content: start; justify-items: start; }

.feature { padding-block: clamp(40px, 4.6vw, 84px); border-top: 1px solid var(--mist); }
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature:last-of-type { padding-bottom: 0; }
.dark .feature { border-top-color: rgba(251, 250, 246, .14); }
.feature h3 {
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 300;
  letter-spacing: -.028em;
  line-height: 1.08;
  max-width: 22ch;
}
.feature p { color: var(--slate); }

.quote-big {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -.028em;
  max-width: 26ch;
}

/* Brand Memory node list */
.nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); margin: 0; }
.nodes > div { padding: 13px 22px; border-top: 1px solid var(--mist); }
.nodes dt { font-size: 13.5px; font-weight: 500; letter-spacing: .01em; }
.nodes dd { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--slate); }

/* Product modules index: the node list at page scale */
.nodes--index { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); }
.nodes--index > div { padding: 18px 0 20px; }
.nodes--index dt { font-size: 16px; letter-spacing: -.005em; }
.nodes--index dd { margin-top: 5px; font-size: 14.5px; }

/* Rights permission matrix */
.perm {
  border: 1px solid var(--mist);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
  width: 100%;
}
.perm__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 18px 22px;
  background: var(--soft);
}
.perm__who { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
.perm__rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.perm__rows--wide { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.perm__row span:last-child { white-space: nowrap; }
.perm__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px;
  border-top: 1px solid var(--mist);
  font-size: 14px;
}
.perm__row span:first-child { color: var(--slate); }
.perm__yes { color: #2E6B50; font-weight: 500; }
.perm__no { color: #A83232; font-weight: 500; }
.perm__foot {
  padding: 16px 22px;
  border-top: 1px solid var(--mist);
  background: rgba(200, 74, 74, .05);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.perm__foot b { font-weight: 500; }

.loop-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--mist);
  border-radius: var(--r-lg);
  background: var(--white);
}
.loop-strip li { display: flex; align-items: center; gap: 8px; }
.loop-strip li > span {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 8px 13px;
  border: 1px solid var(--mist);
  border-radius: var(--r-pill);
  background: var(--ivory);
}
.loop-strip li > b { color: var(--gold-ink); font-weight: 400; font-size: 13px; }
.loop-strip li:last-child > b { display: none; }
.loop-strip .cycle > span {
  border-color: rgba(214, 161, 58, .5);
  background: rgba(214, 161, 58, .09);
  color: var(--gold-ink);
}


.callout {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 22px;
  color: var(--slate);
  max-width: 56ch;
}
.dark .callout { color: rgba(251, 250, 246, .74); }


.figcap { margin-top: 14px; font-size: 13px; color: var(--slate); max-width: 46ch; }
.dark .figcap { color: rgba(251, 250, 246, .58); }

.w-full { width: 100%; }

/* ---------------------------------------------------------- 26. Reveal fx */
/* The page is finished at rest. A revealable is VISIBLE by default; script
   adds .is-pending only to the elements that started below the fold, and the
   observer takes it away again. With JS off, nothing here ever hides. */
.reveal {
  transition: opacity var(--t-reveal) var(--ease-io) var(--d, 0ms), transform var(--t-reveal) var(--ease) var(--d, 0ms);
}
.reveal-x {
  transition: opacity var(--t-reveal) var(--ease-io) var(--d, 0ms), transform var(--t-reveal) var(--ease) var(--d, 0ms);
}
.grow { transition: transform var(--t-reveal) var(--ease) var(--d, 0ms); }

.reveal.in, .reveal-x.in { opacity: 1; transform: none; }
.grow.in { transform: scaleX(1); }

/* Hidden state — the only rules that may hide a revealable. */
.reveal.is-pending { opacity: 0; transform: translate3d(0, 16px, 0); }
.reveal-x.is-pending { opacity: 0; transform: translate3d(-16px, 0, 0); }
.grow.is-pending { transform: scaleX(0); }

/* -------------------------------------------------------- 27. Breakpoints */
@media (max-width: 1080px) {
  .hero-copy { grid-column: 1 / -1; }
  .hero .display { max-width: 18ch; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .head-cta { margin-left: 12px; }
  .site-head { position: sticky; }
  .xform__row { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
  .xform__arrow svg { width: 20px; }
  .two,
  .two--copy-first,
  .two--media-first,
  .two--head { grid-template-columns: minmax(0, 1fr); }
  .plan-ent { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .plan-ent .btn { justify-self: start; }
  .quote-big { max-width: 30ch; }
}

@media (max-width: 980px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --sec: clamp(56px, 12vw, 84px); }
  .head-in { min-height: 64px; }
  .btn { padding: 14px 20px; font-size: 12px; }
  .cta-row { gap: 10px; }
  .cta-row .btn { flex: 1 1 auto; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .chain__row--after .chain__steps li > span { font-size: 14px; padding: 9px 14px; }
  .band { min-height: 380px; }
}

@media (max-width: 560px) {
  /* Keep the persistent primary CTA in the bar without overflowing 320px */
  .head-in { gap: 12px; min-height: 62px; }
  .head-cta { margin-left: 8px; }
  /* 140px (the guideline minimum) wherever it fits; below ~364px the lockup
     yields width so the menu and the CTA stay whole. */
  .brand { flex: 0 1 140px; min-width: 0; }
  .brand img { width: 100%; }
  .head-cta .btn--sm { padding: 11px 16px; letter-spacing: .07em; }
  .nav-toggle { padding: 8px 10px; }
}

@media (min-width: 1560px) {
  :root { --maxw: 1400px; }
}

/* --------------------------------------------------- 28. 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;
    transition-delay: 0ms !important;
  }
  .reveal, .reveal-x { opacity: 1 !important; transform: none !important; }
  .grow { transform: none !important; }
  .draw { stroke-dashoffset: 0 !important; }
  .dot { opacity: 1 !important; transform: none !important; }
  .media img, .band__bg img { transform: scale(1.02) !important; }
  .bar__fill { transform: scaleX(var(--w, 0)) !important; }
  .loop__rail::after { transform: scaleY(var(--fp, 0)) !important; }
  .signal-progress { display: none; }
}

/* ------------------------------------------------------------- 29. Print */
@media print {
  .site-head, .signal-progress, .btn { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   30. MULTI-PAGE ADDITIONS
   Modern navigation, sliders, filmstrip, page heroes, premium hover.
   Animation surface is restricted to transform / opacity / colour only.
   ========================================================================== */

/* ------------------------------------------------- 30.1 Page-load lift */
.js .page-lift {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 400ms var(--ease-io), transform 440ms var(--ease);
}
.js .page-lift.in { opacity: 1; transform: none; }

/* ------------------------------------------------- 30.2 Primary nav bar */
.site-head { position: sticky; }

.nav { gap: clamp(2px, .7vw, 10px); }

.nav__item { display: flex; align-items: center; }

.nav__btn,
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  padding: 8px 11px;
  font-family: var(--font-u);
  font-size: 14.5px;
  font-weight: 450;
  /* Whole-pixel leading: 20 + 16 padding = a 36px box that centres exactly in
     the 76px bar. See the note in §6 — fractional boxes make the nav baseline
     look as if it moves when the sticky header is composited. */
  line-height: 20px;
  letter-spacing: 0;
  color: var(--navy);
  cursor: pointer;
  transition: color var(--t-ui) var(--ease-io);
}
.nav__btn::after,
.nav__link::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: 2px;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-ui) var(--ease);
}
.nav__btn:hover, .nav__link:hover { color: var(--navy-2); }
.nav__btn:hover::after,
.nav__link:hover::after,
.nav__item.is-open .nav__btn::after,
.nav__link[aria-current="page"]::after,
.nav__btn.is-current::after { transform: scaleX(1); }

.nav__link[aria-current="page"],
.nav__btn.is-current { color: var(--navy); font-weight: 500; }

.nav__caret {
  width: 9px; height: 6px;
  flex: 0 0 auto;
  opacity: .55;
  transform-origin: center;
  transition: transform var(--t-ui) var(--ease), opacity var(--t-ui) linear;
}
.nav__caret path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); opacity: .9; }

/* ------------------------------------------------ 30.3 Mega dropdown */
.mega {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 70;
  background: rgba(251, 250, 246, .975);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -10px, 0);
  /* There is no per-link stagger in this panel and there must not be one: the
     links are a destination list, so the text is legible well before the panel
     has finished settling. Opacity leads, the 10px slide trails behind it. */
  transition: opacity 180ms var(--ease-io),
              transform 260ms var(--ease-io),
              visibility 180ms linear;
}
.nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: none; }

.mega__in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 4px clamp(8px, 1.2vw, 20px);
  padding-block: clamp(20px, 2.2vw, 30px);
}
.mega__link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: background var(--t-ui) var(--ease-io),
              border-color var(--t-ui) var(--ease-io),
              transform var(--t-ui) var(--ease);
}
.mega__link:hover {
  background: var(--white);
  border-color: var(--mist);
  transform: translate3d(0, -2px, 0);
}
.mega__ico {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mist);
  border-radius: var(--r-sm);
  background: var(--white);
  transition: border-color var(--t-ui) var(--ease-io);
}
.mega__link:hover .mega__ico { border-color: rgba(214, 161, 58, .55); }
.mega__ico svg { width: 18px; height: 18px; }
.mega__ico svg [data-s] { fill: none; stroke: var(--gold-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mega__ico svg [data-f] { fill: var(--gold); }
.mega__link b {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--navy);
}
.mega__link i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 13.2px;
  line-height: 1.46;
  color: var(--slate);
}
.mega__foot {
  border-top: 1px solid var(--mist);
  padding-block: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.mega__foot .label { color: var(--slate); }

/* ------------------------------------------- 30.4 Mobile overlay drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  background: var(--navy);
  color: var(--ivory);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -14px, 0);
  transition: opacity 240ms var(--ease-io),
              transform 300ms var(--ease-io),
              visibility 240ms linear;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__in {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 34px);
  padding: 18px var(--gut) calc(28px + env(safe-area-inset-bottom, 0px));
}
.drawer__top { display: flex; align-items: center; min-height: 46px; }
.drawer__top img { width: 140px; }
.drawer__close {
  margin-left: auto;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 1px solid rgba(251, 250, 246, .26);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  line-height: 0;
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease-io), background var(--t-ui) var(--ease-io);
}
.drawer__close:hover { border-color: var(--gold); background: rgba(251, 250, 246, .07); }
.drawer__close svg { width: 15px; height: 15px; }
.drawer__close path { fill: none; stroke: var(--ivory); stroke-width: 1.6; stroke-linecap: round; }

.drawer__nav { display: grid; align-content: start; gap: 2px; }
.drawer__group { border-top: 1px solid rgba(251, 250, 246, .13); padding-block: 6px; }
.drawer__group:first-child { border-top: 0; }
.drawer__link {
  display: block;
  padding: 13px 0;
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-size: clamp(21px, 6vw, 27px);
  font-weight: 300;
  letter-spacing: -.024em;
  line-height: 1.16;
  color: var(--ivory);
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 420ms var(--ease-io) calc(var(--i, 0) * 52ms + 80ms),
              transform 480ms var(--ease) calc(var(--i, 0) * 52ms + 80ms);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link span {
  display: block;
  font-family: var(--font-u);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  margin-top: 5px;
  color: rgba(251, 250, 246, .6);
}
.drawer__sub {
  display: block;
  padding: 11px 0;
  font-size: 16.5px;
  color: rgba(251, 250, 246, .88);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 420ms var(--ease-io) calc(var(--i, 0) * 52ms + 80ms),
              transform 480ms var(--ease) calc(var(--i, 0) * 52ms + 80ms);
}
.drawer.is-open .drawer__sub { opacity: 1; transform: none; }
.drawer__sub:hover, .drawer__link:hover { color: var(--gold-light); }
.drawer__foot {
  margin-top: auto;
  display: grid;
  gap: 12px;
  padding-top: clamp(18px, 3vw, 28px);
  border-top: 1px solid rgba(251, 250, 246, .14);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 420ms var(--ease-io) 420ms, transform 460ms var(--ease) 420ms;
}
.drawer.is-open .drawer__foot { opacity: 1; transform: none; }
.drawer__foot .btn { width: 100%; }

html.is-locked { overflow: hidden; }

/* ---------------------------------------------------- 30.5 Sticky subnav */
.subnav {
  position: sticky;
  top: var(--head-h, 76px);
  z-index: 60;
  background: rgba(251, 250, 246, .93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--mist);
}
.subnav__in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 11px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--mist);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
  transition: color var(--t-ui) var(--ease-io),
              border-color var(--t-ui) var(--ease-io),
              transform var(--t-ui) var(--ease);
}
.subnav a:hover { color: var(--navy); border-color: rgba(214, 161, 58, .55); transform: translate3d(0, -1px, 0); }
.subnav a.is-active { color: var(--navy); border-color: var(--navy); }

/* ------------------------------------------------------ 30.6 Page hero */
.phero {
  position: relative;
  background: var(--navy);
  color: var(--ivory);
  overflow: hidden;
  padding-block: clamp(48px, 6.4vw, 100px) clamp(52px, 6.4vw, 104px);
  isolation: isolate;
}
.phero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -20%;
  height: 140%;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(214, 161, 58, .16) 0%, rgba(214, 161, 58, 0) 62%),
    radial-gradient(55% 46% at 88% 70%, rgba(13, 43, 86, .7) 0%, rgba(13, 43, 86, 0) 64%);
  pointer-events: none;
  z-index: 0;
}
.phero > * { position: relative; z-index: 1; }
.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(30px, 3.6vw, 68px);
  align-items: center;
}
.phero h1 {
  font-size: clamp(33px, 4.6vw, 66px);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -.03em;
  max-width: 20ch;
  margin-top: 20px;
}
.phero .lead { color: rgba(251, 250, 246, .78); max-width: 48ch; margin-top: 24px; }
.phero .cta-row { margin-top: 32px; }
.phero__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, .5);
}
.phero__crumb a { transition: color var(--t-ui) var(--ease-io); }
.phero__crumb a:hover { color: var(--gold); }
.phero__crumb b { font-weight: 400; color: var(--gold); }

/* ------------------------------------------------- 30.7 Zoom photo frame */
.zoomf { position: relative; overflow: hidden; background: var(--navy); }
.zoomf img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  /* Card frames are small and often already dark footage: keep the muted navy
     grade, but not so heavy that the subject disappears. */
  filter: saturate(var(--sat, .5)) contrast(1.06) brightness(1.06);
  transition: transform var(--t-sig-slow) var(--ease);
}
.zoomf::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 29, 63, .14) 0%, rgba(7, 29, 63, .05) 46%, rgba(7, 29, 63, .6) 100%),
    linear-gradient(90deg, rgba(7, 29, 63, .22) 0%, rgba(7, 29, 63, .02) 62%);
  pointer-events: none;
}
.zoomf:hover img,
a:hover > .zoomf img,
.card:hover .zoomf img,
.slide:hover .zoomf img { transform: scale(1.1); }

.zoomf__over {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(14px, 1.6vw, 22px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.zoomf__top {
  position: absolute;
  inset: clamp(12px, 1.4vw, 18px) clamp(12px, 1.4vw, 18px) auto auto;
  z-index: 2;
}

/* ------------------------------------------------ 30.8 Card edge sweep */
.card--sweep { position: relative; isolation: isolate; }
.card--sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--signal);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-sig) var(--ease-io);
  pointer-events: none;
  z-index: 1;
}
.card--sweep::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: inherit;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-sig) var(--ease);
  pointer-events: none;
  z-index: 2;
}
.card--sweep:hover::before { opacity: 1; }
.card--sweep:hover::after { transform: scaleX(1); }
.card--sweep > * { position: relative; z-index: 3; }

/* ------------------------------------------------------- 30.9 Slider */
.slider { position: relative; }
.slider__vp {
  overflow-x: auto;
  overflow-y: hidden;
  /* proximity, never mandatory: a mandatory snap area keeps re-targeting the
     scroll and the viewport swallows the reader's vertical wheel with it. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-block: 4px;
}
.slider__vp::-webkit-scrollbar { display: none; }
.slider__vp.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.slider__track {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 24px);
}
.slide {
  flex: 0 0 auto;
  width: min(462px, 84vw);
  scroll-snap-align: start;
  display: flex;
}
.slide > * { width: 100%; }
.slide--film { width: min(372px, 78vw); }

.slider__ctl {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(20px, 2.2vw, 30px);
}
.dots { display: flex; align-items: center; gap: 9px; }
.dots button {
  position: relative;
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--mist);
  cursor: pointer;
  transform-origin: 0 50%;
  transition: transform var(--t-ui) var(--ease), background var(--t-ui) var(--ease-io);
}
.dots button::after { content: ""; position: absolute; inset: -18px; } /* 43 px hit area around a 7 px dot */
.dots button[aria-selected="true"] { background: var(--gold); transform: scaleX(3.2); }
.dark .dots button { background: rgba(251, 250, 246, .26); }
.dark .dots button[aria-selected="true"] { background: var(--gold); }

.slider__arrows { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.slider__arrows button {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mist);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease-io),
              background var(--t-ui) var(--ease-io),
              transform var(--t-ui) var(--ease),
              opacity var(--t-ui) linear;
}
.slider__arrows button:hover { border-color: var(--navy); transform: translate3d(0, -2px, 0); }
.slider__arrows button[disabled] { opacity: .34; cursor: default; transform: none; }
.slider__arrows svg { width: 15px; height: 11px; }
.slider__arrows path { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dark .slider__arrows button { background: rgba(251, 250, 246, .06); border-color: rgba(251, 250, 246, .24); }
.dark .slider__arrows button:hover { border-color: var(--ivory); background: rgba(251, 250, 246, .12); }
.dark .slider__arrows path { stroke: var(--ivory); }

.slider__hint {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}
.dark .slider__hint { color: rgba(251, 250, 246, .5); }

/* ------------------------------------------------- 30.10 Slide contents */
.icp {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--mist);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
  transition: transform var(--t-sig) var(--ease), box-shadow var(--t-sig) var(--ease), border-color var(--t-sig) var(--ease);
}
.icp:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow); border-color: rgba(214, 161, 58, .45); }
.icp .zoomf { aspect-ratio: 16 / 10; }
.icp__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(20px, 2vw, 28px); gap: 12px; }
.icp__body h3 { font-size: clamp(19px, 1.5vw, 23px); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.icp__body p { font-size: 14.8px; line-height: 1.58; color: var(--slate); flex: 1 1 auto; }
.icp__body .textlink { margin-top: 4px; align-self: flex-start; }

/* --------------------------------------------------- 30.11 Filmstrip */
.film {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(251, 250, 246, .16);
  border-radius: var(--r-lg);
  background: rgba(251, 250, 246, .04);
  overflow: hidden;
}
.film .zoomf { aspect-ratio: 4 / 3; }
.film__meta { padding: 16px 18px; display: grid; gap: 10px; }
.film__q {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.32;
  letter-spacing: -.018em;
  color: var(--ivory);
}
.film__meta .chip-row { gap: 6px; }

/* ------------------------------------------------- 30.12 Misc blocks */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(18px, 2vw, 34px);
}
.stat__n {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1;
  letter-spacing: -.028em;
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat__l { display: block; margin-top: 10px; }


.pr-tease {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.pr-tease__c {
  border: 1px solid var(--mist);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: clamp(20px, 2vw, 30px);
  display: grid;
  gap: 10px;
  align-content: start;
  transition: transform var(--t-sig) var(--ease), box-shadow var(--t-sig) var(--ease), border-color var(--t-sig) var(--ease);
}
.pr-tease__c:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow); }
.pr-tease__c.is-feat { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.pr-tease__c.is-feat .label { color: var(--gold); }
.pr-tease__c.is-feat p { color: rgba(251, 250, 246, .74); }
.pr-tease__amt {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-weight: 300;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.pr-tease__c p { font-size: 14px; color: var(--slate); line-height: 1.5; }

.wl {
  border: 1px solid rgba(251, 250, 246, .18);
  border-radius: var(--r-lg);
  background: rgba(251, 250, 246, .04);
  padding: clamp(24px, 2.6vw, 40px);
  display: grid;
  gap: clamp(20px, 2.2vw, 30px);
}
.wl__chrome {
  border: 1px solid rgba(251, 250, 246, .16);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(7, 29, 63, .55);
}
.wl__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(251, 250, 246, .13);
  background: rgba(251, 250, 246, .05);
}
.wl__mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
}
.wl__mark em {
  font-style: normal;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--signal);
  flex: 0 0 auto;
}
.wl__powered { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .06em; color: rgba(251, 250, 246, .56); }
.wl__powered img { width: 62px; opacity: .8; }
.wl__cell { background: rgba(7, 29, 63, .72); padding: 16px; }
.wl__cell .label { color: rgba(251, 250, 246, .5); display: block; margin-bottom: 8px; }
.wl__cell p { font-size: 13.4px; line-height: 1.5; color: rgba(251, 250, 246, .82); }
.wl__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px 26px; }
.wl__list li {
  position: relative;
  padding-left: 17px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
}
.dark .wl__list li { color: rgba(251, 250, 246, .8); }
.wl__list li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
}

/* Six controls: 3 × 2, never a ragged last row */
.gov { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(251, 250, 246, .16); border: 1px solid rgba(251, 250, 246, .16); border-radius: var(--r-lg); overflow: hidden; }
.gov__cell { background: var(--navy); padding: clamp(18px, 1.9vw, 26px); }
@media (max-width: 900px) { .gov { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gov { grid-template-columns: 1fr; } }
.gov__cell b { display: block; font-size: 14.5px; font-weight: 500; margin-bottom: 8px; }
.gov__cell p { font-size: 13.6px; line-height: 1.55; color: rgba(251, 250, 246, .72); }

/* Light-ground variants of the two dark-first blocks */
.gov--light { background: var(--mist); border-color: var(--mist); }
.gov--light .gov__cell { background: var(--white); color: var(--navy); }
.gov--light .gov__cell p { color: var(--slate); }

.code--light {
  background: var(--white);
  border-color: var(--mist);
  color: var(--slate);
}
.code--light .c-k { color: var(--gold-ink); }
.code--light .c-c { color: rgba(102, 112, 133, .7); }

.tbl { border: 1px solid var(--mist); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.tbl__r {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(10px, 1.6vw, 26px);
  padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 26px);
  border-top: 1px solid var(--mist);
  align-items: baseline;
}
.tbl__r:first-child { border-top: 0; background: var(--soft); }
.tbl__r b { font-size: 14.6px; font-weight: 500; }
.tbl__r p { font-size: 14.2px; line-height: 1.55; color: var(--slate); }
.dark .tbl { background: rgba(251, 250, 246, .04); border-color: rgba(251, 250, 246, .16); }
.dark .tbl__r { border-top-color: rgba(251, 250, 246, .13); }
.dark .tbl__r:first-child { background: rgba(251, 250, 246, .05); }
.dark .tbl__r p { color: rgba(251, 250, 246, .74); }

.next-up {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.next-up a {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid rgba(251, 250, 246, .18);
  border-radius: var(--r-lg);
  background: rgba(251, 250, 246, .04);
  padding: clamp(20px, 2vw, 28px);
  transition: background var(--t-ui) var(--ease-io), border-color var(--t-ui) var(--ease-io), transform var(--t-ui) var(--ease);
}
.next-up a:hover { background: rgba(251, 250, 246, .08); border-color: rgba(214, 161, 58, .5); transform: translate3d(0, -3px, 0); }
.next-up b { font-size: 17px; font-weight: 400; letter-spacing: -.014em; }
.next-up p { font-size: 13.8px; line-height: 1.5; color: rgba(251, 250, 246, .68); }

/* ------------------------------------------ 30.13 New breakpoints */
@media (max-width: 1080px) {
  .phero__grid { grid-template-columns: minmax(0, 1fr); }
  .phero__fig { max-width: 620px; }
}

@media (max-width: 900px) {
  .drawer { display: block; }
  .mega { display: none; }
}

@media (max-width: 640px) {
  .slider__ctl { gap: 14px; }
  .slider__hint { display: none; }
  .tbl__r { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* --------------------------- 30.14 Reduced motion — final overrides */
@media (prefers-reduced-motion: reduce) {
  .js .page-lift { opacity: 1 !important; transform: none !important; }
  .drawer__link,
  .drawer__sub,
  .drawer__foot { opacity: 1 !important; transform: none !important; }
  .mega,
  .drawer { transition: none !important; }
  .zoomf img { transform: scale(1.02) !important; }
  .card--sweep::after { transform: scaleX(0) !important; }
  .card--sweep:hover::after { transform: scaleX(1) !important; }
  .dots button { transform: none !important; }
  .dots button[aria-selected="true"] { transform: scaleX(3.2) !important; }
  .slider__vp { scroll-behavior: auto !important; }
  .icp:hover,
  .pr-tease__c:hover,
  .next-up a:hover,
  .mega__link:hover,
  .subnav a:hover,
  .slider__arrows button:hover { transform: none !important; }
  .nav__btn::after,
  .nav__link::after { transition: none !important; }
}

/* ==========================================================================
   31. THE SIGNAL STAGE — hero theatre + editorial set pieces
   Motion budget: transform + opacity + colour only. Never geometry.
   ========================================================================== */

/* --------------------------------------------- 31.1 Page transitions */
@view-transition { navigation: auto; }

/* ------------------------------------------------- 31.2 Intro curtain */
/* One continuous line (AD 5.3). The veil signature shares .stage-sig's
   viewBox and path data, is drawn 0-700ms, then flies onto the stage's
   measured position over 400ms while the ivory ground fades away. Nothing
   is ever blank: the first stroke is on screen in the first frame. */
.boot-veil { display: none; }
.intro .boot-veil {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 300;
  place-items: center;
  background-color: var(--ivory);
  opacity: 1;
  transition: background-color 400ms var(--ease-io), opacity 160ms var(--ease-io);
}
.boot-veil__in { width: min(720px, 78vw); }
.boot-veil .signature { width: 100%; max-width: none; overflow: visible; }

/* The veil runs its own draw clock — 0-700ms — not the 900ms section one. */
.boot-veil .signature.is-drawn .draw {
  transition: stroke-dashoffset 580ms var(--ease-io) var(--dd, 0ms);
}
.boot-veil .signature.is-drawn .dot {
  transition: opacity 180ms var(--ease-io) var(--dd, 0ms),
              transform 220ms var(--ease) var(--dd, 0ms);
}

/* Flight: the ground goes, the line stays and travels. */
.intro .boot-veil.is-flying { background-color: rgba(251, 250, 246, 0); pointer-events: none; }
.intro .boot-veil.is-flying .signature { transition: transform 400ms var(--ease); }
/* Any input cuts the intro: the veil leaves in 160ms, final state underneath. */
.intro .boot-veil.is-cut { opacity: 0; pointer-events: none; }

/* Held back while the veil's line is still in the air, so the page can come
   up underneath without a second signature drawing itself. */
.stage-sig.is-hold .draw { stroke-dashoffset: var(--len, 1000); transition: none; }
.stage-sig.is-hold .dot { opacity: 0; transform: scale(.4); transition: none; }
/* Then handed the finished line; it is never re-drawn. */
.stage-sig.is-set .draw { stroke-dashoffset: 0; transition: none; }
.stage-sig.is-set .dot { opacity: 1; transform: scale(1); transition: none; }

/* ---------------------------------------------- 31.3 Cursor accent */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 210;
  pointer-events: none;
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0);
  will-change: transform;
  opacity: 0;
  transition: opacity 260ms var(--ease-io);
}
.cursor.is-live { opacity: 1; }
.cursor i {
  position: absolute;
  display: block;
  border-radius: 50%;
  transition: transform 280ms var(--ease-io), opacity 280ms var(--ease-io);
}
.cursor__d {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--gold);
  transform: scale(1);
}
.cursor__r {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--gold);
  transform: scale(.26);
  opacity: 0;
}
.cursor.is-on .cursor__d { transform: scale(.3); opacity: 0; }
.cursor.is-on .cursor__r { transform: scale(1); opacity: 1; }

/* --------------------------------------------- 31.4 Signal field canvas */
.field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ----------------------------------------------- 31.5 Oversized display */
.hero-h {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-size: clamp(40px, 6.55vw, 92px);
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.038em;
  text-wrap: balance;
  margin-top: 22px;
}
.hero-h em { font-style: normal; display: block; }
/* Gold-family ink ramp. Every stop clears 3:1 on ivory at display size. */
.ink-signal {
  background: linear-gradient(96deg, #8C6220 0%, #B88B4A 38%, #3C4A66 74%, #071D3F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.dark .ink-signal {
  background: linear-gradient(96deg, #D6A13A 0%, #E7C36F 40%, #FBFAF6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ink-signal { color: var(--gold-ink); -webkit-text-fill-color: currentColor; }
  .dark .ink-signal { color: var(--gold); }
}

/* ------------------------------------------ 31.6 Accumulating tally (2.4) */
/* The yield accumulates instead of rolling: every item joins the line and
   stays there. The line is finished at rest — script adds .is-run only when it
   is about to animate, so JS off and reduced motion both read the full tally. */
.tally { color: var(--gold-ink); }
.tally b {
  display: inline-block;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tally b + b::before { content: " · "; color: var(--slate); font-weight: 400; }
.dark .tally { color: var(--gold); }
.dark .tally b + b::before { color: rgba(251, 250, 246, .5); }
.tally.is-run b {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 240ms var(--ease-io), transform 240ms var(--ease);
}
.tally.is-run b.is-in { opacity: 1; transform: none; }

/* ------------------------------------------- 31.7 The hero source stage */
/* Three things only (5.1): the copy, the Signal Stage and the cue words —
   which is the DOM order, so the stacked layout below 1080 re-orders nothing.
   The desktop split lives in 31.14 and the stage itself in §40. */
.hero--stage { padding-block: clamp(22px, 2.4vw, 38px) clamp(44px, 5vw, 84px); }
.hero--stage .hero-grid { row-gap: 0; }
.hero--stage .hero-copy,
.hero--stage .stage3d,
.hero--stage .stage-cue { grid-column: 1 / -1; }
.hero--stage .hero-h { max-width: 26ch; }
.hero--stage .lead { margin-top: 22px; }
.hero--stage .cta-row { margin-top: 28px; }
.hero__yield {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: 22px;
  font-size: clamp(16px, .7vw + 14px, 20px);
  color: var(--slate);
}

/* Act two — the signature, drawn at architectural width across the stage */
.stage-sig {
  width: 100%;
  max-width: none;
  overflow: visible;
  margin-top: clamp(26px, 3vw, 46px);
}
.stage-cue {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 12px;
}
.stage-cue span { color: var(--slate); }
.dark .stage-cue span { color: rgba(251, 250, 246, .6); }

.stage-io {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: stretch;
  gap: clamp(18px, 2.6vw, 44px);
  margin-top: clamp(16px, 2vw, 30px);
}

/* Both halves of the stage are <figure>; the UA's 40px side margin was
   silently eating 80px of the row. */
.io-src, .io-out { margin: 0; }

/* Act one — the source */
.io-src { position: relative; display: grid; }
.io-src .zoomf {
  height: 100%;
  min-height: 300px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}
/* The hero source frame carries the composition; it must not sit in the dark. */
.io-src .zoomf img { filter: saturate(.5) contrast(1.05) brightness(1.02); }
.io-src .zoomf::after {
  background:
    linear-gradient(180deg, rgba(7, 29, 63, .12) 0%, rgba(7, 29, 63, .08) 44%, rgba(7, 29, 63, .74) 100%),
    linear-gradient(90deg, rgba(7, 29, 63, .3) 0%, rgba(7, 29, 63, .04) 62%);
}

/* Act three — the campaign stack */
.io-out { position: relative; }
.io-out__frame { position: relative; aspect-ratio: 1 / 0.82; }
.io-card {
  position: absolute;
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(-26px, -16px, 0) scale(.94) rotate(0deg);
  transition: opacity 640ms var(--ease-io) var(--dd, 0ms),
              transform 780ms var(--ease) var(--dd, 0ms),
              box-shadow var(--t-ui) var(--ease-io);
}
.is-fanned .io-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(var(--rot, 0deg));
}
.io-card:hover { box-shadow: var(--shadow-lift); z-index: 9; }
.is-fanned .io-card:hover { transform: translate3d(0, -6px, 0) scale(1.03) rotate(var(--rot, 0deg)); }

.io-card--clip  { left: 0;    top: 0;    width: 54%; --rot: -2.2deg; --dd: 340ms; z-index: 4; }
.io-card--post  { left: 47%;  top: 7%;   width: 53%; --rot: 2.0deg;  --dd: 460ms; z-index: 5; }
.io-card--still { left: 0;    top: 55%;  width: 50%; --rot: 1.4deg;  --dd: 580ms; z-index: 6; }
.io-card--news  { left: 48%;  top: 64%;  width: 52%; --rot: -1.6deg; --dd: 700ms; z-index: 7; }

.io-card__h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--mist);
  background: var(--soft);
}
.io-card__k {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.io-card__n { margin-left: auto; font-family: var(--font-m); font-size: 9.5px; color: var(--slate); }
.io-card__b { padding: 10px 11px; display: grid; gap: 7px; }
.io-card__q {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.32;
  letter-spacing: -.012em;
  color: var(--navy);
}
.io-card__t { font-size: 9.5px; letter-spacing: .04em; color: var(--slate); }
.io-card .zoomf { aspect-ratio: 16 / 9; }
.io-card .zoomf img { filter: saturate(.52) contrast(1.04) brightness(1.1); }
.io-card .zoomf::after {
  background: linear-gradient(180deg, rgba(7, 29, 63, .08) 0%, rgba(7, 29, 63, .5) 100%);
}
/* 90px thumbnails: they have to read as photographs, so the grade lifts. */
.io-still .zoomf img { filter: saturate(.66) contrast(1.04) brightness(1.34); }
.io-still .zoomf::after {
  background: linear-gradient(180deg, rgba(7, 29, 63, .04) 0%, rgba(7, 29, 63, .18) 100%);
}
.io-card__chip {
  position: absolute;
  inset: auto auto 7px 8px;
  z-index: 3;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: rgba(7, 29, 63, .8);
  color: var(--ivory);
  font-family: var(--font-m);
  font-size: 8.5px;
  letter-spacing: .02em;
}
.ln { display: block; height: 4px; border-radius: 2px; background: #D3DAE4; }
.ln--90 { width: 90%; } .ln--70 { width: 70%; } .ln--50 { width: 50%; }
.ln--gold { background: rgba(214, 161, 58, .5); }
.io-still { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.io-still .zoomf { aspect-ratio: 1 / 1; border-radius: 4px; }
.io-avat {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--signal);
  flex: 0 0 auto;
}

/* -------------------------------------------- 31.8 Section markers */
/* The ghost numerals are gone (AD 5.4): a numeral now only appears where the
   content is a sequence — the seven loop stages and the Oracle's four
   queries. The gold hairline above the eyebrow is the section marker. */

/* ------------------------------------------------- 31.9 Marquee strip */
.marq {
  overflow: hidden;
  border-block: 1px solid var(--mist);
  padding-block: clamp(14px, 1.6vw, 22px);
  background: var(--ivory);
}
.dark .marq, .section--navy .marq { border-block-color: rgba(251, 250, 246, .14); background: transparent; }
.marq__row {
  display: flex;
  width: max-content;
  animation: marq-slide 46s linear infinite;
  will-change: transform;
}
.marq:hover .marq__row { animation-play-state: paused; }
.marq__set { display: flex; align-items: center; }
.marq__set li {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 42px);
  padding-inline: clamp(10px, 1.3vw, 21px);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 450;
  letter-spacing: .06em;
  color: var(--slate);
  white-space: nowrap;
}
.marq__set li::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .7;
  flex: 0 0 auto;
}
.dark .marq__set li { color: rgba(251, 250, 246, .66); }
@keyframes marq-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------- 31.11 Scrollytelling loop */
.scrolly {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 3.4vw, 68px);
  align-items: start;
}
.scrolly__rail { position: sticky; top: calc(var(--head-h, 76px) + clamp(20px, 3vw, 44px)); }
.scrolly__idx { position: relative; display: grid; gap: 2px; padding-left: clamp(22px, 2.6vw, 38px); }
.scrolly__line {
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--mist);
  overflow: hidden;
}
.scrolly__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--gold) 0%, #B88B4A 46%, var(--navy) 100%);
  transform: scaleY(var(--fp, 0));
  transform-origin: 50% 0;
  transition: transform 200ms linear;
  will-change: transform;
}
.scrolly__idx a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  font-size: 15px;
  color: var(--slate);
  transition: color var(--t-ui) var(--ease-io), transform var(--t-ui) var(--ease);
}
.scrolly__idx a b {
  font-family: var(--font-m);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--gold-ink);
  opacity: .7;
}
.scrolly__idx a::before {
  content: "";
  position: absolute;
  left: calc(clamp(22px, 2.6vw, 38px) * -1 - 3px);
  top: 17px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ivory);
  border: 2px solid var(--mist);
  transition: background var(--t-ui) var(--ease-io), border-color var(--t-ui) var(--ease-io), transform var(--t-ui) var(--ease);
}
.scrolly__idx a:hover { color: var(--navy); transform: translate3d(3px, 0, 0); }
.scrolly__idx a.is-active { color: var(--navy); font-weight: 500; }
.scrolly__idx a.is-active::before { background: var(--gold); border-color: var(--gold); transform: scale(1.15); }

.scrolly__panels { display: grid; gap: clamp(28px, 3.6vw, 60px); }
.sp {
  display: grid;
  gap: clamp(16px, 1.8vw, 24px);
  align-content: center;
  min-height: clamp(340px, 56vh, 520px);
  padding-block: clamp(14px, 2vw, 30px);
  border-top: 1px solid var(--mist);
  opacity: .42;
  transition: opacity 520ms var(--ease-io);
}
.sp:first-child { border-top: 0; }
.sp.is-active { opacity: 1; }
.sp__n {
  display: flex;
  align-items: baseline;
  gap: 13px;
}
.sp__n b {
  font-family: var(--font-m);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--gold-ink);
}
.sp h3 {
  font-size: clamp(23px, 2.5vw, 37px);
  font-weight: 300;
  letter-spacing: -.028em;
  line-height: 1.08;
  max-width: 24ch;
}
.sp p { color: var(--slate); max-width: 54ch; }

/* ------------------------------------------------- 31.12 Footer finale */
.finale { overflow: hidden; padding-bottom: clamp(30px, 3.4vw, 54px); }
.finale__mask { overflow: hidden; }
.finale__mask img {
  width: 100%;
  transform: translate3d(0, 46%, 0);
  transition: transform var(--t-sig-slow) var(--ease);
  will-change: transform;
}
.finale.in .finale__mask img { transform: translate3d(0, 0, 0); }
.finale__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: clamp(14px, 1.6vw, 22px);
  padding-top: 16px;
  border-top: 1px solid rgba(251, 250, 246, .14);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, .5);
}

/* ------------------------------- 31.13 Slider refinements + drift */
/* Edge fade. A mask blends the track into whatever ground is behind it, so it
   can never mismatch the section colour. What it cannot do is blend kindly: on
   a light ground the fade drags a navy-graded photograph 46px through the ivory
   and reads as a dirty band laid over the picture. So the fade is a dark-ground
   treatment, where the photographs are already graded into the navy and the
   blend is invisible. Light sections cut clean at the wrap edge; the dots and
   the arrows carry the "there is more track" message there. */
.slider__vp { --fl: 0px; --fr: 0px; }
.dark .slider__vp {
  --fl: 46px;
  --fr: 46px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.dark .slider__vp.no-fl { --fl: 0px; }
.dark .slider__vp.no-fr { --fr: 0px; }

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

.slide { transform: translate3d(0, calc(var(--sp, 0) * 9px), 0); }
.film .zoomf img {
  transform: translate3d(calc(var(--px, 0) * 1px), 0, 0) scale(1.16);
  transition: none;
}

/* ----------------------------------- 31.14 Section 31 breakpoints */
@media (max-width: 1180px) {
  .stage-io { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .io-out__frame { aspect-ratio: 1 / 0.94; }
}

/* The hero split (task 5.1). Copy in columns 1-6, the Signal Stage in 7-12 and
   bleeding past the wrap, with the cue words under it on the same columns so
   they can sit on the signature's own x positions. The whole stage — source
   point, both tubes, three tiles — has to clear an 800px fold at 1440, so its
   height is a ratio of its own width and nothing else grows. */
@media (min-width: 1080px) {
  .hero--stage .hero-copy { grid-column: 1 / span 6; grid-row: 1; }
  .hero--stage .stage3d   { grid-column: 7 / -1; grid-row: 1; align-self: center; }
  /* Same columns and the same bleed as the stage, or the cue words would sit
     on a narrower box than the signature they are naming. */
  .hero--stage .stage-cue { grid-column: 7 / -1; grid-row: 2; margin-right: calc(-1 * var(--s3-bleed)); }

  /* Six columns is 24 characters of display type, not 26; the column itself
     is the measure, so no ch cap is applied or the second line would wrap. */
  .hero--stage .hero-h { font-size: clamp(34px, 3.1vw, 52px); max-width: none; margin-top: 18px; }
  .hero--stage .lead { max-width: none; margin-top: 18px; font-size: clamp(15px, .45vw + 10.5px, 17px); }
  /* Both buttons have to sit on one line inside six columns. */
  .hero--stage .cta-row { margin-top: 24px; gap: 12px; }
  .hero--stage .cta-row .btn {
    padding: 15px clamp(15px, 1.4vw, 20px);
    font-size: clamp(11.5px, .55vw + 5.5px, 13px);
    letter-spacing: .07em;
  }
  .hero--stage .hero__yield { margin-top: 18px; font-size: clamp(14.5px, .35vw + 11px, 16.5px); }
  .hero--stage .microcopy { margin-top: 14px; }
}

@media (max-width: 900px) {
  .hero--stage .hero-copy { grid-column: 1 / -1; }
  .stage-io { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 34px); }
  .io-src .zoomf { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .stage-sig { margin-top: clamp(24px, 4vw, 38px); }
  .io-out__frame { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .io-card {
    position: static;
    width: auto;
    --rot: 0deg;
    transform: translate3d(0, 10px, 0) scale(.98);
  }
  .is-fanned .io-card:hover { transform: translate3d(0, -3px, 0) scale(1); }
  .scrolly { grid-template-columns: minmax(0, 1fr); }
  .scrolly__rail { display: none; }
  .sp { min-height: 0; opacity: 1; }
}

@media (max-width: 760px) {
  /* space-between orphans the last cue word once it wraps */
  .stage-cue { justify-content: flex-start; gap: 8px 16px; }
  /* the secondary meta cannot share a 150px card header */
  .io-card__n { display: none; }
}

@media (max-width: 560px) {
  .io-out__frame { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boot-veil__in { width: 82vw; }
}

/* ------------------------ 31.15 Reduced motion — authoritative last word */
@media (prefers-reduced-motion: reduce) {
  .boot-veil, .intro .boot-veil { display: none !important; }
  .cursor { display: none !important; }
  .marq__row { animation: none !important; transform: none !important; }
  .marq__set + .marq__set { display: none !important; }
  .tally.is-run b { opacity: 1 !important; transform: none !important; transition: none !important; }
  .io-card { opacity: 1 !important; transform: rotate(var(--rot, 0deg)) !important; }
  .is-fanned .io-card:hover { transform: rotate(var(--rot, 0deg)) !important; }
  .finale__mask img { transform: none !important; }
  .sp { opacity: 1 !important; }
  .scrolly__line::after { transform: scaleY(var(--fp, 0)) !important; }
  .slide { transform: none !important; }
  .film .zoomf img { transform: scale(1.16) !important; }
  .scrolly__idx a:hover { transform: none !important; }
  .scrolly__idx a.is-active::before { transform: none !important; }
  /* A pending revealable must never survive here, whatever script decided. */
  .reveal.is-pending, .reveal-x.is-pending { opacity: 1 !important; transform: none !important; }
  .grow.is-pending { transform: none !important; }
}

/* ==========================================================================
   32+. PASSES 1-4. Each section below is owned by one work package;
   see docs/BUILD_CONTRACT.md. Edit only your own section.
   ========================================================================== */

/* -------------------------------------------- 32. Connector (pass 2 - 2.1) */
/* State only; every coordinate is measured in JS §15. Contract §4. */

[data-connector-scope] { position: relative; }

/* The overlay sits over the photographs and under the card content. Targets
   that are already positioned keep their own z-index; static ones are lifted
   by .cx-lift (added by script) so text never falls under the path. */
.cx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}
/* The dash pattern is composed in JS (§15) so an interpretation path draws
   from the source instead of marching its dashes along; only the offset moves. */
.cx__path {
  fill: none;
  stroke-width: var(--connector-w, 2px);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset var(--t-draw, 420ms) var(--ease);
}
.cx__path--blocked { stroke: var(--slate); }
/* Slate reads as a hole on navy: the blocked stroke and its cross lift to ivory. */
.dark .cx__path--blocked, .dark .cx__x { stroke: rgba(251, 250, 246, .45); }
.cx__path.is-out { transition-duration: var(--t-undraw, 320ms); }
.cx__x {
  fill: none;
  stroke: var(--slate);
  stroke-width: var(--connector-w, 2px);
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease) calc(var(--t-draw, 420ms) * .7);
}
.cx__x.is-on { opacity: 1; }
.cx__x.is-out { opacity: 0; transition-delay: 0s; }

/* Target ring: in at 70% of the draw, out at 30% of the undraw. Never a shadow.
   Targets are [data-tc] on a timeline scope, [data-cx-from] on a pair scope. */
[data-connector-scope] [data-tc],
[data-connector-scope] [data-cx-from] {
  outline: 1.5px solid transparent;
  outline-offset: 0;
  transition: outline-color var(--t-ui) var(--ease) calc(var(--t-undraw, 320ms) * .3);
}
[data-connector-scope] [data-tc].is-linked,
[data-connector-scope] [data-cx-from].is-linked {
  outline-color: var(--gold);
  transition-delay: calc(var(--t-draw, 420ms) * .7);
}
/* .is-blocked and .cx-lift are only ever set on a target by the script. */
[data-connector-scope] .is-linked.is-blocked { outline-color: var(--rights-blocked, #C84A4A); }
[data-connector-scope] .cx-lift { position: relative; z-index: 3; }
/* The base rule out-specifies the global focus ring, so restate it here. */
[data-connector-scope] [data-tc]:focus-visible,
[data-connector-scope] [data-cx-from]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  transition-delay: 0s;
}
.dark [data-connector-scope] [data-tc]:focus-visible,
.dark [data-connector-scope] [data-cx-from]:focus-visible { outline-color: var(--gold-light); }

/* Timeline strip: every known segment is a faint tick at t / duration. */
.tl {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(7, 29, 63, .12);
}
.tl__seg {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 14px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(7, 29, 63, .34);
  transition: background-color var(--t-ui) var(--ease);
}
.tl__seg.is-on { background: var(--gold); }
/* Inverse: on navy, and anywhere the strip is laid over a photograph. */
.dark .tl, .zoomf .tl { background: rgba(251, 250, 246, .2); }
.dark .tl__seg, .zoomf .tl__seg { background: rgba(251, 250, 246, .5); }
.dark .tl__seg.is-on, .zoomf .tl__seg.is-on { background: var(--gold); }

/* Held state: the timecode and speaker read out on the source card. */
.tl__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 15px;
  margin-top: 8px;
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease);
}
.tl__meta b { font-weight: 500; color: var(--gold); }
.tl__meta i { font-style: normal; color: var(--slate); }
.dark .tl__meta i, .zoomf .tl__meta i { color: rgba(251, 250, 246, .7); }
[data-source].is-linked .tl__meta { opacity: 1; }

[data-cx-cue] {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate);
  text-align: center;
}
.dark [data-cx-cue] { color: rgba(251, 250, 246, .62); }

/* ------------------------------------------- 32.1 Segmented switch (3.1) */
/* Colour moves, nothing else: the pill never changes size between states. */
.sw {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--mist);
  border-radius: var(--r-pill);
  background: var(--white);
}
.sw__opt {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--slate);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease);
}
.sw__opt:hover { color: var(--navy); }
.sw__opt[aria-checked="true"] { background: var(--navy); color: var(--ivory); }
.sw__opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dark .sw { background: rgba(251, 250, 246, .06); border-color: rgba(251, 250, 246, .22); }
.dark .sw__opt { color: rgba(251, 250, 246, .66); }
.dark .sw__opt:hover { color: var(--ivory); }
.dark .sw__opt[aria-checked="true"] { background: var(--ivory); color: var(--navy); }
[data-count-for] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .cx__path, .cx__x, .tl__seg, .tl__meta, .sw__opt,
  [data-connector-scope] [data-tc],
  [data-connector-scope] [data-cx-from] { transition: none !important; }
}

/* ------------------------- 33. Hero provenance markup (pass 2 - 2.2 to 2.5) */
/* State and placement only. Every coordinate — the path, the ticks, the ring —
   is measured by the connector primitive (§32, js §15). This section puts the
   strip on the hero source card, expands the evidence footer while a card is
   linked, and reuses both on product > Source Truth. */

/* 2.2 — the provenance stroke is heavier than the default 2px (contract §2).
   It moved out of the hero with the section in 5.1. */
.prov { --connector-w: 2.5px; }

/* Stacking: the scope is .stage-io and the overlay sits at z-index 2. Between
   the scope and the cards are .io-out (a .reveal, resting transform `none`)
   and .io-out__frame (position:relative, z-index auto) — neither opens a
   stacking context, so the fan's own z-index 4-7 keeps the path behind the
   card content, which is what §32 asks for. Nothing to correct here; if a
   transform, filter or isolation is ever added to either, the overlay would
   jump above the cards and this is where it gets fixed. */

/* The strip lies along the bottom edge of the source card, over the photograph
   and above its chips. It lives inside the absolutely positioned .zoomf__over,
   so it can never change the hero's height. */
.io-src__tl { flex: 0 0 100%; }
.io-src .zoomf__over { align-items: flex-end; }
.io-src .tl { height: 6px; }
.io-src .tl__seg { top: -3px; height: 12px; }
/* The readout is bottom-anchored inside .zoomf__over, so a box that grew when
   the text arrived would push the chips up — a real layout shift over the
   photograph. Its height is therefore fixed, not minimum. */
.io-src .tl__meta {
  height: 16px;
  min-height: 0;
  margin-top: 7px;
  overflow: hidden;
}
.io-src .tl__meta b, .io-src .tl__meta i { line-height: 16px; }
.prov .io-src .zoomf__over { padding: clamp(10px, 1.1vw, 16px); gap: 6px; }

/* The touch cue sits under the fan, not under the figure caption's measure. */
.cx-cue { max-width: 34ch; margin-inline: auto; }

/* 2.3 — evidence. One summary line at rest; three while the card is linked.
   Only the card's own box grows: above 900px the fan is absolutely positioned,
   so nothing outside a card can move (CLS 0). Block, not grid: the summary and
   the expanding part simply stack. */
.io-card__ev { display: block; }
/* 10px is the floor for this text at every width: it was 8.5px inside the
   compact hero stage at >=1080, which is below anything readable. */
.ev__sum, .ev__l {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--slate);
}
.ev__more {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 260ms var(--ease) 200ms;
}
.io-card.is-linked .ev__more { grid-template-rows: 1fr; }
/* min-height:0 lets the 0fr track collapse to nothing; the item's own padding
   would survive that clamp, so the opening gap is a margin on the first line. */
.ev__in { min-height: 0; display: grid; gap: 2px; }
.ev__in .ev__l:first-child { margin-top: 5px; }
.ev__sum b, .ev__l b { font-weight: 600; color: var(--rights-ok, #3F8F6B); }
.ev__no { font-weight: 600; color: var(--rights-blocked, #C84A4A); }

/* 2.5 — Source Truth. The scope wraps the whole slider block, never the
   viewport, so .slider__vp's horizontal overflow cannot clip the overlay. */
.src-bar {
  display: grid;
  gap: 7px;
  max-width: 520px;
  margin-bottom: clamp(18px, 2.2vw, 30px);
}
.src-bar__l {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--slate);
}
.dark .src-bar__l { color: rgba(251, 250, 246, .66); }
.src-bar .tl__meta { margin-top: 0; }

/* The legend above the slider is a filter: pointing at a claim kind dims every
   card that is not of that kind. Script owns .is-dim (js §16). */
/* 4.6 L3: the legend chips are buttons now — pointing previews a filter, a
   click or Enter holds it, and the held one wears the connector's own ring. */
[data-cx-filter] { cursor: pointer; font-family: inherit; } /* .chip keeps size and weight */
[data-cx-filter][aria-pressed="true"] { outline: 1.5px solid var(--gold); outline-offset: 2px; }
.film { transition: opacity var(--t-ui) var(--ease); }
.film.is-dim { opacity: .4; }

@media (prefers-reduced-motion: reduce) {
  .ev__more, .film { transition: none !important; }
}

/* ------------------------------------------------ 34. Home moments (pass 3) */
/* Tasks 3.2 and 3.3. State only: every coordinate is measured from the DOM by
   §18a, and every rule has a finished resting state, so the page reads the
   same with the script off. */

/* ---- 3.2 Yield switch -------------------------------------------------- */
.yield-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 26px;
  margin-bottom: 26px;
}
.yield-sw { display: grid; gap: 8px; justify-items: start; }
.yield-sw__help { font-size: 12.5px; color: var(--slate); }
.dark .yield-sw__help { color: rgba(251, 250, 246, .58); }

/* ---- 3.3 Twelve handoffs become three decisions ------------------------ */
/* Only the chips move. The rows keep their boxes, so nothing reflows. */
[data-chain="compress"] .chain__steps li {
  transition:
    transform 460ms var(--ease) var(--d, 0ms),
    opacity 460ms var(--ease-io) var(--d, 0ms);
}
/* The handoffs travel toward the decision that absorbs them and stay legible. */
[data-chain="compress"] .chain__row--before.is-compressed .chain__steps li {
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  opacity: .55;
}
/* The decisions are armed by script for one frame, then rise into place. */
[data-chain="compress"] .chain__row--after.is-armed .chain__steps li {
  transform: translate3d(0, 12px, 0);
  opacity: .6;
}
/* Scrubbed by GSAP on desktop: the scroll position is the clock, so the CSS
   transitions step aside and the inline transforms are the state. */
[data-chain="compress"].is-scrubbed .chain__steps li { transition: none; }
/* The arrow between the rows draws inside the last 300ms of the compression. */
[data-chain="compress"] .motif--flow.is-drawn .draw {
  transition-duration: 300ms;
  transition-delay: 0ms;
}

/* ---- 3.3 Footer signature --------------------------------------------- */
/* Injected by §18a, so the footer markup stays byte-identical across the five
   pages. Same viewBox and path data as the veil signature. */
.fin-sig { width: 220px; flex: 0 0 auto; overflow: visible; }
.fin-sig .draw { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Home surfaces ----------------------------------------------------- */
/* §05 pricing teaser: the cards are links to one page, not a chooser. */
.pr-tease__c:hover { transform: none; }

/* §04 the slider hint is instruction, not decoration: it arrives when a
   pointer or the keyboard is actually in the slider, and stays in the
   accessibility tree the rest of the time. */
[data-page="home"] [data-slider] .slider__hint {
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease-io);
}
[data-page="home"] [data-slider]:hover .slider__hint,
[data-page="home"] [data-slider]:focus-within .slider__hint { opacity: 1; }


/* Reduced motion: nothing compresses and nothing pulses. Both chain rows read
   in full, exactly as they do with no script at all. */
@media (prefers-reduced-motion: reduce) {
  [data-chain="compress"] .chain__steps li {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* --------------------------------------------- 35. Product moments (pass 3) */
/* Tasks 3.4 and 3.5. State and geometry only: every return-curve coordinate is
   measured in §18b, exactly as the connector measures its own in §15. */

/* ------------------------------------- 35.1 The loop closes (#loop, task 3.4)
   One return curve: it leaves the last stage, swings wide and comes back into
   "Understand". The stroke is the connector's, with the signal
   gradient reversed so gold arrives at the beginning. */
.loop-ret {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;   /* the rail curve swings into the page gutter */
  pointer-events: none;
  z-index: 1;
}
.loop-ret__p {
  fill: none;
  stroke-width: var(--connector-w, 2px);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset var(--t-sig-slow) var(--ease);
}

/* The rail dot is a pseudo-element, so the pulse is a keyframe on it. It runs
   once, after the curve lands, and leaves nothing behind. */
@keyframes loopDot {
  0% { transform: scale(1); }
  42% { transform: scale(1.4); background-color: var(--gold); border-color: var(--gold); }
  100% { transform: scale(1); }
}
#loop .scrolly__idx a.is-loop-in::before { animation: loopDot 600ms var(--ease); }

/* The line under the rail: what the return curve means, said once. */
.loop-coda {
  --gap: clamp(24px, 3.4vw, 68px);
  margin-top: clamp(30px, 3.6vw, 58px);
  /* Sits on the stage column, so it reads as the loop's last line */
  padding-left: calc((100% - var(--gap)) * 4 / 11 + var(--gap));
  max-width: none;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--navy);
}
@media (max-width: 900px) { .loop-coda { padding-left: 0; } }

/* ------------------------------- 35.2 Rights Gate, operable (#rights, task 3.4)
   The switches ask the question; the matrix answers in colour alone. */
.rights-pick {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 30px);
  margin-bottom: clamp(16px, 1.6vw, 22px);
}
.rights-pick__meter { display: grid; gap: 10px; justify-items: start; }
.rights-pick__meter .label { margin-bottom: 0; color: var(--slate); }
/* Both verdicts are right-aligned in a reserved box, so the word changes and
   the column does not move. 6.8em clears "✕ Restricted" at every step. */
#rights .perm__row span:last-child {
  min-width: 6.8em;
  text-align: right;
  transition: color var(--t-ui) var(--ease-io);
}
#rights .perm__yes { color: var(--rights-ok); }
#rights .perm__no { color: var(--rights-blocked); }
/* The sentence takes the rest of the row, so the blocked path — which stops
   12 px short of its target and ends in a cross (§15) — lands in the space
   after the full stop instead of on a word, and the ring reads as the result
   line rather than as a text field. */
#rights [data-rg-result] { flex: 1 1 auto; border-radius: 6px; }
#rights [data-rg-result].is-linked { outline-offset: 3px; }
/* The footer ground carries the verdict too: red while something is blocked,
   green the moment the planned use clears. */
#rights .perm__foot { transition: background-color var(--t-ui) var(--ease-io); }
#rights .perm.perm--ok .perm__foot { background: rgba(63, 143, 107, .07); }

/* ----------------------------------- 35.3 Oracle disclosures (#learning, 3.5)
   The question row becomes the control, so the row itself stops moving under
   the pointer; only the border answers the hover. Keyed to the component,
   not the section: it moved from #oracle to #learning in the rebuild. */
.asks li:has(> .ask) { display: block; padding: 0; }
.asks li:has(> .ask):hover { transform: none; }
.asks li:has(.ask[open]) { border-color: rgba(214, 161, 58, .5); }
.asks__note { margin-bottom: 14px; }
.ask > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.ask > summary::-webkit-details-marker { display: none; }
.ask > summary::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  align-self: center;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--t-ui) var(--ease);
}
.ask[open] > summary::after { transform: rotate(225deg) translateY(-3px); }
.ask.is-closing > summary::after { transform: rotate(45deg) translateY(-3px); }
.ask > summary span:first-child {
  color: var(--gold-ink);
  font-family: var(--font-m);
  font-size: 13px;
  padding-top: 3px;
}
/* Same two-frame arm as the pricing FAQ (§38): the row is pinned closed with
   the transition off, armed a frame later and released the frame after. */
.ask__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 260ms var(--ease);
}
.ask.is-opening .ask__a, .ask.is-closing .ask__a { grid-template-rows: 0fr; }
.ask.is-instant .ask__a { transition: none; }
/* The closing space is a margin on the content, not padding on the track: a
   0fr row still reserves its own padding, and the answer would pop 18 px. */
.ask__in {
  min-height: 0;
  overflow: hidden;
  padding: 0 20px 0 47px;
}
.ask__in > :last-child { margin-bottom: 18px; }
.ask__line {
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 10px;
}

/* --------------------------- 35.4 Learning trajectories (#learning, task 3.5)
   The base rule (§17) keys the fill off ANY ancestor .in, and .page-lift is
   given one the moment the page lifts — so the bars grew at load, off screen,
   and were already full by the time anyone scrolled to them. Here they wait
   for their own revealed container: 0 → width, once, on entry. */
#learning .bar__fill { transform: scaleX(0); }
#learning .bars.in .bar__fill { transform: scaleX(var(--w, 0)); }
/* The trajectory arrow rotates into place on the same trigger. It never
   changes size or position, and it is decoration: the word carries the fact. */
#learning .bar__top b { display: inline-flex; align-items: center; gap: 6px; }
.trend {
  width: 12px; height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(0deg);
  transition: transform var(--t-sig) var(--ease) var(--dd, 0ms);
}
#learning .bars.in .bar--up .trend { transform: rotate(-45deg); }
#learning .bars.in .bar--down .trend { transform: rotate(45deg); }
.bar--up .bar__top b { color: var(--success); }
.bar--down .bar__top b { color: var(--slate); }

@media (max-width: 640px) {
  .rights-pick__meter { width: 100%; }
  .rights-pick__meter .sw { width: 100%; justify-content: space-between; }
  .rights-pick__meter .sw__opt { flex: 1 1 0; padding: 0 10px; }
  .ask__in { padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The curves are present, nothing draws and the dot does not pulse. */
  .loop-ret__p, .trend, .ask__a, .ask > summary::after,
  #rights .perm__row span:last-child, #rights .perm__foot { transition: none !important; }
  #loop .scrolly__idx a.is-loop-in::before { animation: none !important; }
}

/* ------------------------------------------- 36. Solutions moments (pass 3) */
/* Task 3.6. State and geometry only; every connector coordinate is measured
   by §15 and the sequencing lives in §18c. */

/* --------------------------------------------- 36.1 Before -> After (#events)
   The middle column is the connector's runway. The arrow glyph is gone — the
   drawn line is the arrow — but the cell keeps its width so the path has room
   to leave the left cell's right edge and arrive at the right cell's left. */
#events .xform__row {
  grid-template-columns: minmax(0, 1fr) clamp(72px, 7vw, 108px) minmax(0, 1.2fr);
}
#events .xform__arrow { display: block; min-height: 1px; }

/* The After cell is the connector's target, so it must be the size of its
   sentence, not of its column — a ring around empty grid space reads as a form
   field. The negative inline margin keeps the text on the "After" heading while
   the line arrives at the ring rather than at the first glyph. */
#events .xform__a {
  justify-self: start;
  padding: 3px 10px;
  margin-inline: -10px;
  border-radius: var(--r-sm);
}

/* At rest the After column is a claim; it becomes fact as its line arrives.
   .xform--cx is added by §18c, so with JavaScript off nothing is ever dimmed. */
.xform--cx .xform__a {
  opacity: .6;
  transition: opacity 260ms var(--ease);
}
/* Timed to the ring in §32: both land at 70% of the draw. */
.xform--cx .xform__a.is-linked {
  opacity: 1;
  transition-delay: calc(var(--t-draw, 420ms) * .7);
}

/* ------------------------------------- 36.2 Agency workflow chain (#agencies)
   Each chip takes the gold border for a moment as the sequence passes through
   it, then settles back into the resting style. Border colour only. */
#agencies .chain__steps li > span { transition: border-color var(--t-ui) var(--ease); }
#agencies .chain__steps li > span.is-lit { border-color: var(--gold); }

/* --------------------------------- 36.3 Sponsor Lens report card (#sponsor-lens)
   Evidence of exposure, not a logo in a PDF. Entirely static. */
.slcard {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy);
  color: var(--ivory);
  isolation: isolate;
}
.slcard__fig { margin: 0; aspect-ratio: 16 / 10; }
/* The card does not move under the pointer; it is a report, not a control. */
.slcard .zoomf:hover img { transform: scale(1.02); }
.slcard__body {
  display: grid;
  gap: clamp(16px, 1.6vw, 22px);
  padding: clamp(20px, 2.2vw, 32px);
}
.slcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.slcard__head .label { margin: 0; }
.slcard__ill {
  padding: 4px 9px;
  border: 1px solid rgba(251, 250, 246, .24);
  border-radius: var(--r-pill);
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, .58);
}
.slcard__rows { display: grid; margin: 0; }
.slcard__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(10px, 1.4vw, 20px);
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid rgba(251, 250, 246, .13);
}
.slcard__row:first-child { padding-top: 0; border-top: 0; }
.slcard__row:last-child { padding-bottom: 0; }
.slcard__row dt { font-size: 13px; color: rgba(251, 250, 246, .62); }
.slcard__row dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ivory); }
/* The same 1.5px gold ring a connector leaves on a linked target (§32), held
   permanently: these two timecodes are the evidence, already attached. */
.tc-ring {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  outline: 1.5px solid var(--gold);
  outline-offset: 0;
  font-family: var(--font-m);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--gold);
}

@media (max-width: 640px) {
  /* 40px is the narrowest runway the eye still reads as a drawn line; the
     cells give up padding rather than the connector giving up its column. */
  #events .xform__row {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: 6px;
    padding: 12px 12px;
  }
  .slcard__row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .xform--cx .xform__a,
  #agencies .chain__steps li > span { transition: none !important; }
}

/* ------------------------------------------ 37. Enterprise moments (pass 3) */
/* "LYMRIC disappears" (3.7). One mock, four stops. Everything that leaves is
   faded and collapsed with grid-template-rows; nothing slides, and the stage
   reserves the tallest stop so the page below never moves. */

.wl__sw { display: grid; gap: 12px; justify-items: start; }
.wl__sw .label { margin: 0; }

/* Wrap rather than scroll: four long labels do not fit one line on a phone,
   and a scrolled radiogroup hides stops the reader has to find. */
@media (max-width: 860px) {
  .wl__sw .sw { flex-wrap: wrap; }
  .wl__sw .sw__opt { padding: 0 13px; font-size: 12.5px; }
}

/* §18d measures the four stops once and writes min-height here, so the chips
   sit in the same place at every stop and the page below never moves. With
   scripting off there is no switch, so there is nothing to reserve. */
.wl__stage {
  --t-chrome: 360ms;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
/* What LYMRIC still occupies, centred in the space the frame always holds:
   the surface shrinks stop by stop, the frame and the chips do not. */
.wl__screen { display: grid; align-content: center; }

/* Every stop layer fades; the block-level ones also collapse their row.
   The display rules below out-specify the UA's [hidden], so restate it: a
   layer the switch has hidden must leave the layout, not merely go quiet. */
.wl__stage [data-bind][hidden] { display: none; }
.wl__stage [data-bind] { transition: opacity var(--t-chrome) var(--ease); }
.wl__stage [data-bind].is-off { opacity: 0; }
.wl__slot {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-chrome) var(--ease),
              opacity var(--t-chrome) var(--ease);
}
.wl__slot > .wl__slot-in { overflow: hidden; min-height: 0; }
.wl__slot.is-off { grid-template-rows: 0fr; }

/* The host frame is always in the layout and only its colours change, so the
   Embedded stop arrives without a single pixel of movement. */
.wl__host {
  padding: 14px;
  border: 1px dashed transparent;
  border-radius: var(--r-md);
  transition: border-color var(--t-chrome) var(--ease),
              background-color var(--t-chrome) var(--ease);
}
[data-deploy="embedded"] .wl__host {
  border-color: rgba(251, 250, 246, .32);
  background: rgba(251, 250, 246, .05);
}
/* The label's line is reserved at every stop, so arriving at Embedded adds a
   word rather than a row: the stage height never changes. */
.wl__hostl {
  margin: 0 0 12px;
  min-height: 1.6em;
  line-height: 1.6;
  font-family: var(--font-m);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, .62);
}

/* LYMRIC's own chrome disappears with the wordmark: no border, no ground. */
.wl__chrome {
  transition: border-color var(--t-chrome) var(--ease),
              background-color var(--t-chrome) var(--ease);
}
[data-deploy="embedded"] .wl__chrome,
[data-deploy="headless"] .wl__chrome {
  border-color: transparent;
  background: transparent;
}

/* Both marks share one grid cell and one reserved height, so White-label is a
   cross-fade in place: the bar keeps its height and nothing under it slides. */
.wl__marks { display: grid; align-items: center; min-height: 22px; }
.wl__marks > * { grid-area: 1 / 1; }
.wl__mark--lym img { width: 82px; opacity: .95; }

/* Wraps rather than scrolls: no word of the chrome may be out of reach. */
.wl__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(251, 250, 246, .13);
  font-size: 12.5px;
  letter-spacing: .015em;
  color: rgba(251, 250, 246, .58);
}
.wl__nav span { white-space: nowrap; }
.wl__nav .is-here { color: var(--ivory); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }

/* Explicit cells: removing Sources and Reports must not pull Rights sideways. */
.wl__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
.wl__grid > :nth-child(1) { grid-area: 1 / 1; }
.wl__grid > :nth-child(2) { grid-area: 1 / 2; }
.wl__grid > :nth-child(3) { grid-area: 2 / 1; }
.wl__grid > :nth-child(4) { grid-area: 2 / 2; }
.wl__grid .wl__cell {
  height: 100%;
  border: 1px solid rgba(251, 250, 246, .13);
  border-radius: 10px;
}
@media (max-width: 559px) {
  .wl__grid { grid-template-columns: 1fr; }
  .wl__grid > * { grid-area: auto; }
}

.wl__code {
  margin: 0;
  white-space: pre;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.75;
}
.wl__code .c-s { color: var(--gold-light); }

/* The chips outlive every stop, in the same place, and take the connector ring
   at each transition: gold immediately, then a 220 ms fade back to nothing. */
.wl__prov { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.wl__prov .chip {
  outline: 1.5px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--t-ui) var(--ease);
}
.wl__prov .chip.is-ringed { outline-color: var(--gold); transition: none; }

/* ------------------------------------------------ 37.1 Governance quote */
.pquote {
  margin: 0;
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 22px;
}
.pquote p {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-weight: 300;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.24;
  letter-spacing: -.022em;
  color: var(--ink);
  max-width: 34ch;
}
.dark .pquote p { color: var(--ivory); }

/* -------------------------------------------- 37.2 Developer copy block */
/* The toast keeps its row whether or not it has text, so nothing reflows. */
.codeblock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "code code" "btn toast";
  gap: 12px;
  align-items: center;
}
.codeblock pre.code { grid-area: code; margin: 0; white-space: pre; }
.copy {
  grid-area: btn;
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--mist);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color var(--t-ui) var(--ease),
              background-color var(--t-ui) var(--ease),
              border-color var(--t-ui) var(--ease);
}
.copy:hover { border-color: var(--gold); }
.copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.copy__toast {
  grid-area: toast;
  min-height: 1em;
  font-family: var(--font-m);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--gold-ink);
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease);
}
.copy__toast.is-on { opacity: 1; }

/* --------------------------------------------- 37.3 Scoped MCP tool list */
.tools { line-height: 1.85; }
.tools__note { margin: 0 0 4px; }
.tool { margin: 0; }
.tool b { font-weight: 500; }
.tool i { font-style: normal; margin-left: 14px; color: rgba(251, 250, 246, .62); }
/* Same .62 as every other scope: .42 measured 3.83:1 on navy. */
.tool i.c-c { color: rgba(251, 250, 246, .62); }

/* From 1080 the scope leaves the line and waits in the right margin; its
   column is reserved at rest, so revealing it never moves the tool name. */
@media (min-width: 1080px) {
  .tool {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: 20px;
    align-items: baseline;
  }
  /* The scope stays readable at rest (the page is finished without a hover);
     hovering the tool name only brightens it. Tool names are not tab stops. */
  .tool i {
    margin-left: 0;
    justify-self: end;
    text-align: right;
    transition: color var(--t-ui) var(--ease);
  }
  .tool b:hover + i { color: var(--ivory); }
}

@media (prefers-reduced-motion: reduce) {
  .wl__stage [data-bind], .wl__slot, .wl__host, .wl__chrome,
  .wl__prov .chip, .copy, .copy__toast, .tool i { transition: none !important; }
}

/* --------------------------------------------- 38. Pricing moments (pass 3) */
/* Only two meters, and you can see both. The steppers sit above the cards and
   the navy treatment travels to the recommended plan. Nothing about a card
   moves when the recommendation changes, so the swap costs no layout. */
.meters-pick { margin-top: clamp(30px, 3.4vw, 48px); }
.meters-pick__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.2vw, 36px);
}
.meters-pick__meter { display: grid; gap: 10px; justify-items: start; }
/* The options are bare figures, so the 44 px tap target has to be asked for. */
.meters-pick .sw__opt { min-width: 44px; }
.meters-pick__meter .label { color: var(--slate); }
.meters-pick__note { margin-top: 16px; max-width: 72ch; }

/* AD §3 "pricing cards never lift": the §21 base rule animates transform and
   raises a shadow on hover. Both are cancelled here and the card trades them
   for the 220 ms colour swap this moment is built on. --shadow is dropped from
   the featured card too: box-shadow is not an animatable property under
   contract §0, so it cannot travel with the recommendation. */
.plan {
  /* Two badge rows are reserved on every card so the plan names stay on one
     baseline whichever card is carrying the chip. */
  padding-top: calc(clamp(22px, 2.2vw, 32px) + 64px);
  transition: background-color 220ms var(--ease),
              border-color 220ms var(--ease),
              color 220ms var(--ease);
}
.plan:hover { transform: none; box-shadow: none; }
.plan--feature { box-shadow: none; }
.plan__best, .plan__per, .plan__incl li { transition: color 220ms var(--ease); }
.plan__incl li::before { transition: background-color 220ms var(--ease); }

.plan.is-fit {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--ivory);
}
.plan.is-fit .plan__best, .plan.is-fit .plan__incl li { color: rgba(251, 250, 246, .74); }
.plan.is-fit .plan__per { color: rgba(251, 250, 246, .6); }
.plan.is-fit .plan__incl li::before { background: var(--gold); }
.plan.is-fit .btn--ghost { --btn-fg: var(--ivory); border-color: rgba(251, 250, 246, .3); }
.plan.is-fit .btn--ghost:hover { border-color: var(--ivory); background: rgba(251, 250, 246, .07); }

/* The chip sits in the second badge row, out of flow: showing and hiding it
   never moves a pixel of the card. */
.plan__fit {
  position: absolute;
  top: calc(clamp(22px, 2.2vw, 32px) + 33px);
  left: clamp(22px, 2.2vw, 32px);
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--gold);
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-ent { transition: border-color 220ms var(--ease); }
.plan-ent.is-fit { border-color: var(--gold); }
.plan-ent__band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 27px;   /* the chip's height, reserved whether or not it shows */
  margin-bottom: 12px;
  max-width: none;    /* the band must never wrap: wrapping would shift the card */
}
.plan-ent__band .label { margin-bottom: 0; }
.plan-ent .plan__fit { position: static; }

/* FAQ answers open on grid-template-rows; the details element keeps its own
   semantics and JS only holds the closing frame open long enough to animate. */
.faq__a {
  display: grid;
  grid-template-rows: 1fr;
  padding-bottom: 0;
  transition: grid-template-rows 260ms var(--ease);
}
.faq.is-opening .faq__a, .faq.is-closing .faq__a { grid-template-rows: 0fr; }
.faq.is-instant .faq__a { transition: none; }
.faq__in {
  min-height: 0;
  overflow: hidden;
  padding-bottom: clamp(20px, 2vw, 28px);
}
.faq summary::after { transition: transform 260ms var(--ease); }
.faq.is-closing summary::after { transform: rotate(45deg) translateY(-3px); }

@media (max-width: 640px) {
  .meters-pick__row { gap: 18px; }
  .meters-pick__meter { width: 100%; }
  .meters-pick__meter .sw { width: 100%; justify-content: space-between; }
  .meters-pick__meter .sw__opt { flex: 1 1 0; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .plan, .plan__best, .plan__per, .plan__incl li, .plan__incl li::before,
  .plan-ent, .faq__a, .faq summary::after { transition: none !important; }
}

/* -------------------------------------------------- 39. Atmosphere (pass 4) */

/* --------------------------------------------- 39.1 WebP picture wrappers */
/* Every photograph ships as <picture><source webp><img jpg></picture>. The
   wrapper must not become a box: `.zoomf img`, `.media img`, `.band__bg img`
   and `.finale__mask img` all size against their frame, so `display: contents`
   keeps the <img> in exactly the layout slot it held before the wrapper. */
picture { display: contents; }

/* ------------------------------------- 39.2 Navy-section field variant (4.1) */
/* The canvas is the first child of a `.section--navy`; the copy that follows it
   has to own a layer of its own, or a positioned canvas at z-index 0 would
   paint over the static text next to it. JS (§6d) owns the variant itself. */
.field[data-field="dark"] ~ .wrap { position: relative; z-index: 1; }

/* ---------------------------------------- 39.3 Interior hero H1 line mask */
/* JS (§19) wraps each RENDERED line in .h1ln > i; without it the heading is a
   plain heading. The resting state here is the finished one — the keyframe
   supplies the offset — so a heading that never animates is still readable.
   The mask is a sixth of an em taller than the line so descenders are not
   clipped, and the line starts 115% low so nothing peeks into that strip. */
.js .phero h1 .h1ln {
  display: block;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
/* The last mask's descender strip is the one the negative margin cannot take
   back, so the heading gives it back here: nothing below the heading moves
   when the masks are added at load or removed once they have landed. */
.js .phero h1.is-masked { margin-bottom: -.16em; }
.js .phero h1 .h1ln > i {
  display: block;
  font-style: inherit;
  animation: ln-up 600ms var(--ease) var(--d, 0ms) both;
}
@keyframes ln-up {
  from { transform: translate3d(0, 115%, 0); }
  to { transform: none; }
}

/* ------------------------------------------------- 39.9 Reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* The field paints one static frame (§6d bails before the loop) and the
     heading is never split, but the animation is disabled here too so a
     heading split before the setting changed still rests finished. */
  .js .phero h1 .h1ln > i { animation: none !important; transform: none !important; }
}


/* --------------------------------------- 40. 3D Signal Stage hero (pass 5) */
/* One box, two renderings of the same signature. `assets/js/stage3d.js` builds
   the WebGL performance inside `.stage3d`; until its first frame lands — and
   for ever, with no WebGL, in reduced motion, on a saving connection, with
   data-3d="off" or below 900px — the SVG below is the finished state.

   The flat signature sits on a centred band 88.2353% of the box wide. The 3D
   camera is a 3/4 view fitted to the composition's own bounding box, so it
   deliberately does NOT frame that same rectangle — the two cross-fade over
   400ms instead of cutting, and neither has to match the other. */

/* Past the wrap and out to the page edge. --vw is documentElement.clientWidth,
   set by the head snippet on load and resize: 100vw counts the scrollbar, and
   the ~15px it adds used to be clipped off the right of the stage. The 100vw
   fallback only applies with scripting off, where nothing is clipped anyway. */
.hero--stage { --s3-bleed: calc(var(--gut) + max(0px, (var(--vw, 100vw) - var(--maxw)) / 2)); }

.stage3d {
  position: relative;
  aspect-ratio: 1.97;   /* ~62% of the hero's height at 1440 */
  margin-right: calc(-1 * var(--s3-bleed));
}

.stage3d canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 400ms var(--ease-io);
}
.stage3d.is-live canvas { opacity: 1; }

/* The 3/4 camera does not frame the signature the way the flat SVG does, so
   the two cross-fade over the same 400ms rather than cutting. The SVG is then
   given `hidden` by the module, which is what takes it out of the layout. */
.stage3d .stage-sig { transition: opacity 400ms var(--ease-io); }
.stage3d.is-live .stage-sig { opacity: 0; }

/* The fallback, on the rectangle the flat signature renders into. */
.hero--stage .stage-sig {
  position: absolute;
  left: 5.8824%;
  width: 88.2353%;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}
/* A hidden <svg> keeps its display:block from §31.7 without this. */
.stage3d .stage-sig[hidden] { display: none; }

/* ------------------------------------------------------- 40.1 Tile labels */
/* HTML, not canvas text: projected with camera.project every frame, so they
   stay crisp at any dpr. They restate the provenance section, so the whole
   layer is hidden from the accessibility tree in the markup. */
.s3-labs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.s3-lab {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  white-space: nowrap;
  font-family: var(--font-m);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate);
  transition: opacity 260ms var(--ease-io), color 200ms var(--ease-io);
}
.s3-lab.is-on { opacity: 1; }
.s3-lab.is-hot { color: var(--navy); }
.s3-lab--src { color: var(--gold-ink); }

/* The stage answers the pointer only where a tile is. */
.stage3d.is-hot { cursor: pointer; }

/* ------------------------------------------------------ 40.2 The cue words */
/* Below 1080 the flex row from §31.7 stands. On the desktop split each word
   is parked on its own x position in the signature: Source under the gold
   point (viewBox x 22), Distribute under the three dots (x 1142). The percent
   in the markup is 5.8824% + 88.2353% * x/1200 — the same mapping as above. */
@media (min-width: 1080px) {
  .hero--stage .stage-cue {
    position: relative;
    display: block;
    min-height: 1.5em;
    margin-top: clamp(12px, 1.4vw, 20px);
  }
  .hero--stage .stage-cue span {
    position: absolute;
    top: 0;
    left: var(--cx, 0%);
    transform: translateX(-50%);
    white-space: nowrap;
  }
}

/* ------------------------------------------------- 40.3 Below the split */
/* Under 900px the module never builds (see stage3d.js): the tiles would be
   40px wide and the mobile Lighthouse budget has no room for a renderer. The
   box goes back to being nothing but the signature. */
@media (max-width: 900px) {
  .stage3d { aspect-ratio: auto; margin-right: 0; }
  .hero--stage .stage-sig {
    position: static;
    left: auto;
    width: 100%;
    transform: none;
    margin-top: clamp(24px, 4vw, 38px);
  }
}

/* --------------------------------------------------- 40.4 Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .s3-lab { transition: none !important; }
}

/* -------------------------------- 40.5 Provenance section (moved in 5.1) */
/* The source card and the fan left the hero for their own section below the
   yield bar. Nothing about them changed; they are simply back at full size,
   which is the layout §31.7 and §32 were written against. */
.prov__head { max-width: 62ch; }
.prov__head .measure { margin-top: 14px; }



/* ------------------------------------------------ 41. Motif row (pass 5) */
/* Four marks from LYMRIC_Brand_Kit_v1.0/02_Flow_Icons, geometry unchanged.
   The row is finished at rest: every line is drawn, every dot is placed and
   the highlight is parked. The keyframes only ever run under .is-run and each
   one lands exactly on the resting values, so dropping the class moves nothing.
   .is-armed is the pending state — §20 adds it only to a card that started
   below the fold, the same rule the reveal uses for text (contract §3).
   With no script at all the marks still read: the resting values below win
   over the global .draw rule, and an unmeasured --len falls back to a dash
   longer than any of these paths. */
.motifs .sec-head { margin-bottom: clamp(28px, 3.4vw, 52px); }

.motif-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
}

.motif-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2vw, 28px);
  background: var(--ivory);
  border: 1px solid var(--mist);
  border-radius: var(--r-lg);
}
/* The mark moves; the card never does — there is deliberately no hover rule
   here. The focus ring is the shared one, but it carries a 4px radius that
   would square these corners, so the card keeps its own. */
.motif-card:focus-visible { border-radius: var(--r-lg); }

/* A fixed box keeps four marks of four different aspect ratios on one baseline
   and gives the Campaign Flow dots somewhere off-frame to arrive from. */
.motif-card__mk {
  height: 68px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.mk { width: 220px; max-width: 100%; height: auto; }
.motif-card__name { display: block; }
.motif-card__t { color: var(--slate); font-size: 15px; line-height: 1.55; max-width: 28ch; }

/* ---- 41.1 The resting state (also the last frame of every entrance) ---- */
.mk .draw { stroke-dashoffset: 0; }
.mk .mk-dot,
.mk .mk-head {
  opacity: 1;
  transform: none;
  transform-box: fill-box;
  transform-origin: center;
}
/* One short dash, and a gap that makes the pattern repeat exactly every path
   length — so the run below can sweep the dash from the first user unit to the
   last with no second copy ever entering behind it. */
.mk .mk-hl {
  --dash: 46;
  opacity: 0;
  stroke-dasharray: var(--dash) calc(var(--len, 1000) - var(--dash));
}

/* ---- 41.2 Armed: below the fold at load, waiting for its entrance ---- */
.motif-card.is-armed .mk .draw { stroke-dashoffset: var(--len, 1000); }
.motif-card.is-armed .mk .mk-dot,
.motif-card.is-armed .mk .mk-head { opacity: 0; transform: scale(.4); }
/* Cadence's three dots are the beat, not an entrance: they stay placed. */
.motif-card.is-armed .mk--cadence .mk-dot { opacity: 1; transform: none; }

/* ---- 41.3 Cadence: three beats, then the wave, left to right ---- */
.motif-card.is-run .mk--cadence .mk-dot {
  animation: mk-pulse 380ms var(--ease) var(--dd, 0ms) both;
}
.motif-card.is-run .mk--cadence .draw {
  animation: mk-draw var(--t-sig) var(--ease-io) 340ms both;
}

/* ---- 41.4 Signal: the wave draws, then one travelling highlight ---- */
.motif-card.is-run .mk--signal .mk-line {
  animation: mk-draw var(--t-sig) var(--ease-io) 0ms both;
}
.motif-card.is-run .mk--signal .mk-hl {
  animation: mk-travel 900ms var(--ease-io) var(--t-sig) both;
}

/* ---- 41.5 Campaign Flow: the dots arrive, the arrow draws, the head lands ---- */
.motif-card.is-run .mk--flow .mk-dot {
  animation: mk-arrive 420ms var(--ease) var(--dd, 0ms) both;
}
.motif-card.is-run .mk--flow .draw {
  animation: mk-draw var(--t-draw) var(--ease-io) 120ms both;
}
.motif-card.is-run .mk--flow .mk-head {
  animation: mk-pop 300ms var(--ease) 540ms both;
}

/* ---- 41.6 LYMRIC: the signature's own timing — source, lines, three dots ---- */
.motif-card.is-run .mk--lymric .draw {
  animation: mk-draw 580ms var(--ease-io) 120ms both;
}
.motif-card.is-run .mk--lymric .mk-dot {
  animation: mk-pop 420ms var(--ease) var(--dd, 0ms) both;
}

@keyframes mk-draw {
  from { stroke-dashoffset: var(--len, 1000); }
  to { stroke-dashoffset: 0; }
}
@keyframes mk-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes mk-pop {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes mk-arrive {
  from { opacity: 0; transform: translateX(-64px); }
  to { opacity: 1; transform: translateX(0); }
}
/* A whole period of the dash pattern, so the highlight enters at the source
   end and leaves at the far end. Both ends of the tween must be a plain value:
   a calc() carrying a var() steps from one to the other instead of moving,
   which is why the offset is never expressed as a negative length. */
@keyframes mk-travel {
  from { opacity: 1; stroke-dashoffset: var(--len, 1000); }
  to { opacity: 1; stroke-dashoffset: var(--dash, 46); }
}

@media (max-width: 900px) {
  .motif-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .motif-row { grid-template-columns: minmax(0, 1fr); }
  .motif-card__t { max-width: none; }
}

/* ---------------------------------------------- 41.9 Reduced motion */
/* §20 arms nothing and binds nothing when the setting is on, so the marks rest
   drawn on their own. These rules are the belt: a card that was already armed
   when the setting changed still ends up finished and still. */
@media (prefers-reduced-motion: reduce) {
  .motif-card.is-armed .mk .draw { stroke-dashoffset: 0; }
  .motif-card.is-armed .mk .mk-dot,
  .motif-card.is-armed .mk .mk-head { opacity: 1; transform: none; }
  .motif-card .mk .mk-hl { opacity: 0; }
  .motif-card.is-run .mk .draw,
  .motif-card.is-run .mk .mk-dot,
  .motif-card.is-run .mk .mk-head,
  .motif-card.is-run .mk .mk-hl { animation: none !important; }
}


/* ---------------------------------------------- 42. Hero film (pass 6) */
/* A 24s motion film on a 120 BPM grid (contract §11). The markup rests in
   the FINAL frame (.film-end); the film is a decorative layer over it.
   html.is-film (set in <head>) holds the first frame of the film until
   hero-film.js takes over — or, if it never does, the 4s failsafe below
   releases the final frame. Sizes inside the film run off --k, one
   hundredth of the film's short-ish side, so every frame holds its
   composition from 390px phones to wide desktops.
   The final frame must sit whole above the fold, chapter bar included, so
   its sizes and gaps run off the viewport height (svh) as well as width. */
.hero--film {
  --bar-h: 46px;
  --bar-y: clamp(16px, 2.2vw, 28px);
  /* the strip the chapter bar plays in; scenes compose above it */
  --bar-zone: calc(var(--bar-h) + var(--bar-y) + 8px);
  --k: min(1cqw, calc((100cqh - var(--bar-zone)) * .018));
  display: grid;
  place-items: center;
  min-height: clamp(500px, calc(100svh - var(--head-h, 76px)), 940px);
  padding-block: clamp(12px, 2.4svh, 48px) calc(var(--bar-h) + var(--bar-y) + clamp(12px, 2.6svh, 32px));
  isolation: isolate;
}

/* ---- the final frame */
.film-end {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.film-sig { width: min(560px, 78%, 42svh); height: auto; overflow: visible; }
.film-end__k { margin-top: clamp(10px, 2.4svh, 30px); }
.film-end__h {
  font-size: clamp(38px, min(6.2vw, 10svh), 100px);
  max-width: 24ch;
  margin-top: clamp(8px, 1.6svh, 16px);
}
.film-end__h > span { display: block; }
.film-end__lead { max-width: 46ch; margin-top: clamp(12px, 2.2svh, 26px); }
.film-end__cta { justify-content: center; margin-top: clamp(16px, 3svh, 34px); }
.film-end__micro { margin-top: clamp(10px, 1.6svh, 16px); }

/* ---- the film layer */
.reel { display: none; }
html.is-film .reel, .hero--film.is-rolling .reel {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  container-type: size;
  perspective: 1400px;
  color: var(--ivory);
  pointer-events: none;
}
html.is-film .film-end { opacity: 0; }

/* Failsafe: if the film never takes over, the final frame comes back. */
html.is-film .film-end { animation: film-release 1ms 4s forwards; }
html.is-film .hero--film .reel { animation: film-leave 1ms 4s forwards; }
@keyframes film-release { to { opacity: 1; } }
@keyframes film-leave { to { opacity: 0; visibility: hidden; } }

.reel__bg, .reel__glow, .reel__wipe, .reel__flash, .reel__cam { position: absolute; inset: 0; }
.reel__bg { background: var(--navy); }
.reel__glow {
  background: radial-gradient(42% 46% at 50% 50%, rgba(214, 161, 58, .26) 0%, rgba(214, 161, 58, 0) 70%);
  opacity: 0;
}
.reel__cam { transform-style: preserve-3d; will-change: transform; }
.reel__wipe { background: var(--ivory); clip-path: circle(0% at 50% 50%); }
.reel__flash { background: var(--ivory); opacity: 0; mix-blend-mode: screen; }

/* The source point — the one character in every shot. Position and size are
   CSS variables so GSAP can move it in container units. */
.reel__src {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: calc(var(--k) * 2.4);
  height: calc(var(--k) * 2.4);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 calc(var(--k) * 3) rgba(214, 161, 58, .7);
  transform: translate(-50%, -50%) translate(calc(var(--sx, 0) * 1cqw), calc(var(--sy, 0) * 1cqh)) scale(var(--ss, 1));
}
.reel__src::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold-light);
  transform: scale(var(--ring, 1));
  opacity: var(--ring-o, 0);
}

/* ---- scenes */
.sc {
  position: absolute;
  inset: 0 0 var(--bar-zone);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--k) * 3);
  padding: 0 4cqw;
  visibility: hidden;
  opacity: 0;
  transform-style: preserve-3d;
}
.sc__say {
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-size: max(30px, calc(var(--k) * 5.6));
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
  text-align: center;
  text-wrap: balance;
  max-width: 18ch;
}
.sc__step {
  font-family: var(--font-m);
  font-size: max(11px, calc(var(--k) * 1.15));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc__step b {
  font-weight: 500;
  color: var(--navy);
  background: var(--gold);
  border-radius: var(--r-pill);
  padding: .3em .7em;
  letter-spacing: .08em;
}
.sc__note {
  font-size: max(14px, calc(var(--k) * 1.6));
  color: rgba(251, 250, 246, .72);
}
/* SplitText masks: words rise out of their own line box */
.reel [data-split] .w-mask { padding-bottom: .08em; margin-bottom: -.08em; }

/* 1 · hook */
.hook__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74cqw, 120cqh);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(251, 250, 246, .3);
  border-radius: calc(var(--k) * 1.4);
}
.hook__rec, .hook__tc {
  position: absolute;
  top: calc(var(--k) * 1.8);
  font-family: var(--font-m);
  font-size: max(11px, calc(var(--k) * 1.15));
  letter-spacing: .14em;
  color: rgba(251, 250, 246, .8);
  font-variant-numeric: tabular-nums;
}
.hook__rec { left: calc(var(--k) * 2.2); display: flex; align-items: center; gap: .6em; }
.hook__rec i { width: .8em; height: .8em; border-radius: 50%; background: var(--error); }
.hook__tc { right: calc(var(--k) * 2.2); }
.hook__word {
  position: relative;
  font-family: var(--font-d);
  font-variation-settings: "opsz" 32;
  font-size: max(58px, calc(var(--k) * 13));
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.055em;
  white-space: nowrap;
}
.hook__sub {
  position: relative;
  font-family: var(--font-m);
  font-size: max(12px, calc(var(--k) * 1.4));
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* 2 · problem */
.sc--problem .sc__say { position: absolute; top: 13%; }
.chores { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.chores li {
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  font-size: max(12px, calc(var(--k) * 1.55));
  padding: .55em 1.05em;
  border-radius: var(--r-pill);
  border: 1px solid rgba(251, 250, 246, .22);
  background: rgba(251, 250, 246, .07);
  color: rgba(251, 250, 246, .86);
  transform: translate(-50%, -50%);
}
.sc__punch {
  position: absolute;
  bottom: 12%;
  font-family: var(--font-d);
  font-size: max(26px, calc(var(--k) * 4.4));
  font-weight: 600;
  letter-spacing: -.04em;
  text-align: center;
}

/* 3 · meet */
.meet__sig { width: min(80cqw, 150cqh); height: auto; overflow: visible; }
.meet__mark { width: min(46cqw, 72cqh); height: auto; margin-top: calc(var(--k) * -1); }
.meet__line {
  font-size: max(16px, calc(var(--k) * 2.1));
  color: rgba(251, 250, 246, .82);
  letter-spacing: -.01em;
}

/* 4 · understand */
.watch {
  position: relative;
  width: min(80cqw, 140cqh);
  height: calc(var(--k) * 16);
  /* room for the quote card, which hangs above the wave */
  margin-top: calc(var(--k) * 12);
}
.watch__wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.watch__wave i {
  flex: 1;
  height: calc(var(--h, .5) * 100%);
  border-radius: 2px;
  background: rgba(251, 250, 246, .3);
  transform-origin: 50% 50%;
}
.watch__head {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 0;
  width: 2px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(214, 161, 58, .8);
}
.watch__pin {
  position: absolute;
  left: var(--at);
  bottom: -26%;
  width: calc(var(--k) * 1.3);
  height: calc(var(--k) * 1.3);
  background: var(--gold-light);
  transform: translateX(-50%) rotate(45deg);
}
.watch__pin--best { background: var(--gold); width: calc(var(--k) * 1.9); height: calc(var(--k) * 1.9); }
.watch__quote {
  position: absolute;
  left: 54%;
  bottom: calc(100% + var(--k) * 1.5);
  width: min(60cqw, 96cqh);
  transform: translateX(-50%);
  padding: calc(var(--k) * 1.6) calc(var(--k) * 2);
  border-radius: calc(var(--k) * 1.2);
  background: var(--ivory);
  color: var(--navy);
  text-align: left;
}
.watch__tag {
  display: block;
  font-family: var(--font-m);
  font-size: max(10px, calc(var(--k) * 1.05));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.watch__quote q {
  display: block;
  margin-top: .45em;
  font-size: max(14px, calc(var(--k) * 1.9));
  line-height: 1.22;
  letter-spacing: -.015em;
  quotes: "“" "”";
}

/* 5 · create */
.deck {
  position: relative;
  width: 100%;
  height: calc(var(--k) * 26);
  transform-style: preserve-3d;
}
.film-card {
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  border-radius: calc(var(--k) * 1.1);
  background: var(--ivory);
  color: var(--navy);
  box-shadow: 0 calc(var(--k) * 2) calc(var(--k) * 5) rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
}
.film-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-card > span {
  position: absolute;
  left: calc(var(--k) * 1);
  bottom: calc(var(--k) * 1);
  font-family: var(--font-m);
  font-size: max(10px, calc(var(--k) * 1.05));
  letter-spacing: .08em;
  padding: .35em .7em;
  border-radius: var(--r-pill);
  background: rgba(7, 29, 63, .82);
  color: var(--ivory);
}
.film-card--clip  { width: calc(var(--k) * 14); height: calc(var(--k) * 24); }
.film-card--still { width: calc(var(--k) * 18); height: calc(var(--k) * 12); }
.film-card--long  { width: calc(var(--k) * 22); height: calc(var(--k) * 12.4); }
.film-card--post, .film-card--news {
  width: calc(var(--k) * 17);
  height: calc(var(--k) * 19);
  padding: calc(var(--k) * 1.6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--k) * 1);
}
.film-card .film-card__who {
  position: static;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 0 0 calc(var(--k) * .6);
  background: none;
  color: var(--navy);
  font-family: var(--font-u);
  font-weight: 500;
  font-size: max(11px, calc(var(--k) * 1.3));
  letter-spacing: 0;
}
.film-card__who i { width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--signal); }
.film-card__l { display: block; height: calc(var(--k) * .9); border-radius: 4px; background: var(--mist); }
.film-card__l--s { width: 60%; }
.film-card--news .film-card__who { color: var(--gold-ink); }
.count {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--k) * .8) calc(var(--k) * 2.6);
  font-size: max(13px, calc(var(--k) * 1.5));
  color: rgba(251, 250, 246, .72);
}
.count b {
  font-family: var(--font-d);
  font-size: 2em;
  font-weight: 500;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-right: .2em;
  letter-spacing: -.03em;
}

/* 6 · check */
.gate {
  position: relative;
  width: min(84cqw, 130cqh);
  display: grid;
  gap: calc(var(--k) * 1);
}
.gate__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.6fr;
  align-items: center;
  gap: calc(var(--k) * 1);
  padding: calc(var(--k) * 1.1) calc(var(--k) * 1.6);
  border-radius: calc(var(--k) * 1);
  background: rgba(251, 250, 246, .06);
  border: 1px solid rgba(251, 250, 246, .12);
  font-size: max(11px, calc(var(--k) * 1.45));
}
.gate__row > span { font-weight: 500; }
.gate__row em {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-style: normal;
  font-size: .9em;
  padding: .35em .8em;
  border-radius: var(--r-pill);
  border: 1px dashed rgba(251, 250, 246, .3);
  color: rgba(251, 250, 246, .5);
  white-space: nowrap;
}
.gate__row em i { font-style: normal; display: inline-block; transform: scale(0); width: 1em; text-align: center; }
.gate__row em.no { --hit: var(--error); }
.gate__beam {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(214, 161, 58, 0), var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, rgba(214, 161, 58, 0));
  box-shadow: 0 0 22px rgba(214, 161, 58, .9);
  opacity: 0;
}

/* 7 · publish */
.cal {
  position: relative;
  width: min(80cqw, 120cqh);
  display: grid;
  gap: calc(var(--k) * .8);
}
.cal__head, .cal__row {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: calc(var(--k) * .8);
  align-items: center;
}
.cal__head span, .cal__row > span {
  font-family: var(--font-m);
  font-size: max(10px, calc(var(--k) * 1.1));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, .55);
}
.cal__row i {
  height: calc(var(--k) * 3.6);
  border-radius: calc(var(--k) * .7);
  border: 1px solid rgba(251, 250, 246, .12);
  background: rgba(251, 250, 246, .04);
}
.cal__row i.on { position: relative; }
.cal__row i.on::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--gold), var(--gold-light));
  transform: scale(var(--fill, 0));
}
.cal__learn {
  position: absolute;
  left: 22%;
  right: 0;
  top: -10%;
  width: 78%;
  height: 120%;
  overflow: visible;
}
.cal__learn path {
  fill: none;
  stroke: var(--ivory);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 8px rgba(251, 250, 246, .6));
}

/* ---- chapter bar = the film's controls */
.film-bar {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: var(--bar-y);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  /* left: 50% would cap the shrink-to-fit width at half the hero */
  width: max-content;
  max-width: calc(100% - 2 * var(--gut));
  white-space: nowrap;
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(7, 29, 63, .05);
  border: 1px solid rgba(7, 29, 63, .1);
  color: var(--navy);
  font-size: 12.5px;
  transition: background-color 400ms var(--ease-io), border-color 400ms var(--ease-io), color 400ms var(--ease-io);
}
.film-bar[hidden] { display: none; }
.is-rolling .film-bar {
  background: rgba(251, 250, 246, .08);
  border-color: rgba(251, 250, 246, .16);
  color: var(--ivory);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.film-bar button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--r-pill);
  min-height: 32px;
}
.film-bar button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.film-bar__play { width: 32px; display: grid; place-items: center; background: currentColor !important; }
.film-bar__play i {
  width: 10px;
  height: 11px;
  border-left: 3px solid var(--ivory);
  border-right: 3px solid var(--ivory);
}
.is-rolling .film-bar__play i { border-color: var(--navy); }
.film-bar__play[aria-pressed="true"] i {
  width: 0;
  height: 0;
  border-left: 9px solid var(--ivory);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 0;
  margin-left: 3px;
}
.is-rolling .film-bar__play[aria-pressed="true"] i { border-left-color: var(--navy); border-top-color: transparent; border-bottom-color: transparent; }
.film-bar__ch { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.film-bar__ch button {
  position: relative;
  overflow: hidden;
  padding: 0 12px;
  opacity: .62;
  transition: opacity var(--t-ui) var(--ease);
}
.film-bar__ch button:hover, .film-bar__ch button.is-on { opacity: 1; }
.film-bar__ch button i {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
.film-bar__ch span { position: relative; }
.film-bar__skip { padding: 0 14px; font-weight: 500; }
.film-bar__skip::after { content: " →"; }
.hero--film.is-ended .film-bar__ch { display: none; }
.hero--film.is-ended .film-bar__skip::after { content: ""; }
.hero--film.is-ended .film-bar__skip::before { content: "↺ "; }

@media (max-width: 760px) {
  .hero--film { --k: min(1.35cqw, calc((100cqh - var(--bar-zone)) * .018)); }
  .film-bar__ch li:not(:has(.is-on)) { display: none; }
  .watch { margin-top: calc(var(--k) * 17); }
  .watch__quote { left: 50%; width: 86cqw; }
  .gate__row { grid-template-columns: 1fr 1fr 1fr; }
  .gate__row > span { grid-column: 1 / -1; }
  .gate__row em.no { grid-column: 3; }
  .cal__head, .cal__row { grid-template-columns: 1.6fr repeat(5, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .film-bar__ch button i { transition: none; }
}

/* ------------------------------------------------- 31. Early access */
/* An ivory card on the navy page hero. It sits inside .dark, so the
   dark-context overrides for buttons, labels and focus are reset here. */
.ea .phero__grid { align-items: start; }
.ea__steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; max-width: 46ch; }
.ea__steps li { display: flex; gap: 14px; align-items: baseline; color: rgba(251, 250, 246, .82); }
.ea__steps b {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(214, 161, 58, .6);
  border-radius: 50%;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold);
}
.ea .microcopy { margin-top: 28px; }

.ea__card {
  background: var(--ivory);
  color: var(--navy);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 40px);
}
.ea__card :focus-visible { outline-color: var(--navy); }
.ea__card .label--gold { color: var(--gold-ink); }
.ea__card .btn--primary { --btn-bg: var(--navy); --btn-fg: var(--ivory); border-color: var(--navy); }
.ea__card .btn--primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.ea__card .btn--ghost { --btn-fg: var(--navy); border-color: rgba(7, 29, 63, .25); }
.ea__card .btn--ghost:hover { border-color: var(--navy); background: rgba(7, 29, 63, .04); }

.ea__form { display: grid; gap: 18px; }
.ea__title { font-size: clamp(22px, 1.4vw + 14px, 30px); font-weight: 400; letter-spacing: -.02em; }
.ea__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ea__field { display: grid; gap: 7px; align-content: start; }
.ea__field label, .ea__check label { font-size: 14px; font-weight: 500; }
.ea__opt { font-weight: 400; color: var(--slate); margin-left: 6px; }
.ea__field input, .ea__field select, .ea__field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming into the field */
  color: var(--ink);
  background: var(--white);
  border: 1px solid #CDD4DF;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color var(--t-ui) var(--ease-io), box-shadow var(--t-ui) var(--ease-io);
}
.ea__field textarea { resize: vertical; min-height: 92px; }
.ea__field input:hover, .ea__field select:hover, .ea__field textarea:hover { border-color: var(--slate); }
.ea__field input:focus, .ea__field select:focus, .ea__field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(214, 161, 58, .35);
}
.ea__field [aria-invalid="true"], .ea__check [aria-invalid="true"] { border-color: var(--error); }
.ea__field ::placeholder { color: #98A2B3; }

.ea__check { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; }
.ea__check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--navy); }
.ea__check label { font-weight: 400; color: var(--slate); line-height: 1.45; }
.ea__check .ea__err { grid-column: 2; }

.ea__err { font-size: 13px; color: var(--error); min-height: 0; }
.ea__err:empty { display: none; }
.ea__alert {
  display: none;
  padding: 12px 14px;
  border-left: 3px solid var(--error);
  background: rgba(200, 74, 74, .07);
  font-size: 14.5px;
  color: var(--navy);
}
/* is-dismissed: scripts took over, so a :target left by a no-script error no longer shows. */
.ea__alert.is-shown, .ea__alert:target:not(.is-dismissed) { display: block; }

.ea__submit { justify-self: start; }
.ea__submit[aria-busy="true"] { opacity: .7; cursor: progress; }

/* The honeypot stays out of sight and out of the tab order. */
.ea__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.ea__done { display: none; gap: 16px; justify-items: start; }
.ea__done p:not(.label) { color: var(--slate); }
.ea__done:target, .ea__card.is-done .ea__done { display: grid; }
.ea__card:has(.ea__done:target) .ea__form, .ea__card.is-done .ea__form { display: none; }

@media (max-width: 560px) {
  .ea__row { grid-template-columns: minmax(0, 1fr); }
  .ea__submit { justify-self: stretch; }
}