/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   CADENCE — the public design system for talaissuing.com
   ══════════════════════════════════════════════════════════════════════════════════════════════════
   Extracted from docs/TalaWebMain Marketing Face/mockup-2-cadence.html (D23/D24), faithfully:
   the token values, the four-block dual-theme cascade and every measurement are the mockup's.

   SELF-CONTAINED (D50). Cadence depends on nothing — not Movement, not Bootstrap. TalaWebMain
   references this and only this. Two design systems in one project is how a bridge file becomes a
   cascade nobody can reason about, and how the public face ends up depending on the internal console.

   PREFIXES. Every token is `--cd-` and every class is `cd-`. The mockup's classes were bare
   (.hero, .nav, .display) and would collide with Bootstrap on sight; the tokens are prefixed for the
   same reason a namespace exists — `--ink` and `--paper` are exactly the names Movement uses, with
   different values, and load order must never be what decides how a page looks.

   VOICE. Light-first "porcelain dial": airy grotesk display, serif numerals, mono micro-labels.
   Red is reserved for three things — the beating jewel, the chapter ticks, and one underline.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════ 0 · TYPEFACES ═══════════════
   THE MOCKUP'S STACKS, VERBATIM. No @font-face, no web fonts, no external requests.

   An earlier pass put self-hosted IBM Plex first, following D24's note that production would do what
   Movement does. That was wrong, and visibly so: the display voice is specified at weight 250, and
   `system-ui` on Windows resolves to Segoe UI Variable, which *has* a 250. IBM Plex Sans ships
   nothing below 400, so every heading rendered heavier than the design — and the figures moved from
   Georgia's warmth to Plex Serif, and the labels from Cascadia Code to Plex Mono. Three voices
   changed at once. What was approved is what the mockup renders, so this is what the mockup renders.

   Consequence, deliberately accepted: `system-ui` is not the same face on every platform — SF Pro on
   macOS, Roboto on Android. The mockup accepted that and so does this. Reinstating web fonts is a
   local change (add @font-face and reorder these three tokens); the ten IBM Plex faces are still in
   wwwroot/fonts, staged rather than deleted, for exactly that decision.  */


/* ═══════════════ 1 · TOKENS — light-first, four-block cascade ═══════════════
   The four blocks are load-bearing and their order is the contract:
     1. :root                                  — light, the default
     2. @media (prefers-color-scheme: dark)    — scoped :not([data-theme="light"]) so an explicit
                                                 light choice survives an OS set to dark
     3. :root[data-theme="dark"]               — explicit choice beats the OS
     4. :root[data-theme="light"]              — and so does the other way
   Collapsing any of them breaks one of the four states. */

:root {
  color-scheme: light;
  --cd-paper: #FBFBF8;
  --cd-panel: #FFFFFF;
  --cd-ink: #101F38;
  --cd-ink-2: #45516B;
  --cd-muted: #75809A;
  --cd-steel: #2C4F92;
  --cd-steel-contrast: #FFFFFF;   /* text on a steel-filled surface */
  --cd-steel-tint: #EEF2FA;       /* faint steel wash for callouts */
  --cd-hairline: #D9DEE7;
  --cd-red: #B3271E;
  --cd-dial-alpha: .5;            /* hero dial ambience */
  --cd-lume: none;                /* jewel lume glow — lit only on the night dial */
  --cd-lume-ink: var(--cd-ink);   /* active station label — lume-tinted in dark */

  /* Radii, and the spacing scale A4c's components draw on. The mockup only ever needed three radii
     and a 4px base; both are stated as tokens here so the application layer inherits the same
     rhythm instead of inventing a second one. */
  --cd-r-s: 3px; --cd-r-m: 5px; --cd-r-l: 9px;
  --cd-sp-1: 4px; --cd-sp-2: 8px; --cd-sp-3: 12px; --cd-sp-4: 16px;
  --cd-sp-5: 22px; --cd-sp-6: 28px; --cd-sp-7: 36px; --cd-sp-8: 48px;

  /* State colours. The marketing face never needed them; every form, table and toast in A4c does,
     and inventing them there would mean two palettes claiming to be the same system. */
  --cd-good: #2F6B4E; --cd-good-tint: #E7F0EA;
  --cd-warn: #8A6D23; --cd-warn-tint: #F3EEDE;
  --cd-crit: #B3271E; --cd-crit-tint: #F6E5E3;

  --cd-shadow-sm: 0 1px 2px rgba(16, 31, 56, .06);
  --cd-shadow-pop: 0 24px 60px -30px rgba(10, 16, 30, .45);

  --cd-serif: Georgia, Cambria, "Times New Roman", serif;
  --cd-sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cd-mono: "Cascadia Code", Consolas, ui-monospace, monospace;

  /* The display voice, deliberately lighter than body text — and the reason the stack above leads
     with system-ui. Segoe UI Variable renders a true 250; a face that stops at 400 cannot. */
  --cd-display-weight: 250;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cd-paper: #0A101E;
    --cd-panel: #101827;
    --cd-ink: #E8EDF5;
    --cd-ink-2: #A9B6D0;
    --cd-muted: #67748F;
    --cd-steel: #7FA4E8;
    --cd-steel-contrast: #0A101E;
    --cd-steel-tint: #14203A;
    --cd-hairline: #22304A;
    --cd-red: #C4372B;
    --cd-dial-alpha: .6;
    --cd-lume: drop-shadow(0 0 3px rgba(255, 112, 92, .85)) drop-shadow(0 0 10px rgba(255, 96, 72, .4));
    --cd-lume-ink: #F2CDBF;
    --cd-good: #55A07C; --cd-good-tint: #12241B;
    --cd-warn: #C09A44; --cd-warn-tint: #241D0E;
    --cd-crit: #C4372B; --cd-crit-tint: #2A1517;
    --cd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --cd-paper: #0A101E;
  --cd-panel: #101827;
  --cd-ink: #E8EDF5;
  --cd-ink-2: #A9B6D0;
  --cd-muted: #67748F;
  --cd-steel: #7FA4E8;
  --cd-steel-contrast: #0A101E;
  --cd-steel-tint: #14203A;
  --cd-hairline: #22304A;
  --cd-red: #C4372B;
  --cd-dial-alpha: .6;
  --cd-lume: drop-shadow(0 0 3px rgba(255, 112, 92, .85)) drop-shadow(0 0 10px rgba(255, 96, 72, .4));
  --cd-lume-ink: #F2CDBF;
  --cd-good: #55A07C; --cd-good-tint: #12241B;
  --cd-warn: #C09A44; --cd-warn-tint: #241D0E;
  --cd-crit: #C4372B; --cd-crit-tint: #2A1517;
  --cd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
}

:root[data-theme="light"] {
  color-scheme: light;
  --cd-paper: #FBFBF8;
  --cd-panel: #FFFFFF;
  --cd-ink: #101F38;
  --cd-ink-2: #45516B;
  --cd-muted: #75809A;
  --cd-steel: #2C4F92;
  --cd-steel-contrast: #FFFFFF;
  --cd-steel-tint: #EEF2FA;
  --cd-hairline: #D9DEE7;
  --cd-red: #B3271E;
  --cd-dial-alpha: .5;
  --cd-lume: none;
  --cd-lume-ink: var(--cd-ink);
  --cd-good: #2F6B4E; --cd-good-tint: #E7F0EA;
  --cd-warn: #8A6D23; --cd-warn-tint: #F3EEDE;
  --cd-crit: #B3271E; --cd-crit-tint: #F6E5E3;
  --cd-shadow-sm: 0 1px 2px rgba(16, 31, 56, .06);
}


/* ═══════════════ 2 · BASE ═══════════════
   Scoped to `.cd-root` rather than applied to bare elements. A design system that restyles `*` and
   `body` on import cannot share a page with anything, and cannot be adopted one page at a time. */

.cd-root, .cd-root *, .cd-root *::before, .cd-root *::after { box-sizing: border-box; }
.cd-root :where(h1, h2, h3, h4, h5, h6, p, figure, figcaption, blockquote, dl, dd, pre) { margin: 0; }

/* The host page's own margin, not Cadence's. The mockup reset it with a bare `* { margin: 0 }`;
   scoping the reset to .cd-root missed `body` itself and left the UA's 8px, which offset every
   element on the page by 8px and made the document 16px taller than the artefact. */
html:has(.cd-root), body:has(.cd-root) { overflow-x: clip; margin: 0; }
html:has(.cd-root) { scroll-behavior: smooth; }

.cd-root {
  background: var(--cd-paper);
  color: var(--cd-ink);
  font: 400 16px/1.6 var(--cd-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Element resets are wrapped in :where() so they contribute ZERO specificity, exactly as the
   mockup's bare `a { … }` / `button { … }` rules did.
   Without it, `.cd-root a { color: inherit }` scores (0,1,1) and beats `.cd-btn-primary`'s (0,1,0) —
   which silently turned every anchor-styled button's label to body ink. In light theme that was ink
   on steel at 2.07:1 against the mockup's 7.95:1, i.e. unreadable. Scoping a reset must not promote
   it: `:where()` keeps it scoped and still losing to every component. */
:where(.cd-root) :where(img, svg) { display: block; max-width: 100%; }
:where(.cd-root) :where(a) { color: inherit; text-decoration: none; }
:where(.cd-root) :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.cd-root) :where(ul, ol) { list-style: none; padding: 0; margin: 0; }
.cd-root ::selection { background: var(--cd-steel); color: var(--cd-steel-contrast); }
.cd-root :focus-visible { outline: 2px solid var(--cd-steel); outline-offset: 2px; border-radius: 2px; }

.cd-wrap { max-width: 1120px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
.cd-mono { font-family: var(--cd-mono); font-variant-numeric: tabular-nums; }

.cd-skip {
  position: absolute; left: 12px; top: -48px; z-index: 60;
  background: var(--cd-panel); border: 1px solid var(--cd-hairline); border-radius: var(--cd-r-m);
  padding: 8px 14px; font-size: 13px; transition: top .15s ease;
}
.cd-skip:focus-visible { top: 12px; }

/* Eyebrow micro-label — 10.5px / .14em, the system's smallest voice. */
.cd-eyebrow {
  font-family: var(--cd-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-steel);
}

/* Display voice — airy light grotesk, the deliberate inverse of Movement's serif. */
.cd-display {
  font-family: var(--cd-sans);
  font-weight: var(--cd-display-weight);
  letter-spacing: -0.02em;
  line-height: 1.06;
}

/* Minute-track ruler — the section-divider motif. Ticks live in one SVG pattern. */
.cd-ruler { width: 100%; height: 14px; }
.cd-tk  { stroke: var(--cd-hairline); stroke-width: 1; }
.cd-tk5 { stroke: var(--cd-steel); opacity: .55; }
.cd-defs { position: absolute; width: 0; height: 0; }

/* Scroll reveal — a 10px settle, metronomic. */
.cd-rv { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.cd-rv.cd-in { opacity: 1; transform: none; }
.cd-grid > .cd-rv:nth-child(2) { transition-delay: 75ms; }
.cd-grid > .cd-rv:nth-child(3) { transition-delay: 150ms; }
.cd-grid > .cd-rv:nth-child(4) { transition-delay: 225ms; }
.cd-grid > .cd-rv:nth-child(5) { transition-delay: 300ms; }
.cd-grid > .cd-rv:nth-child(6) { transition-delay: 375ms; }
/* Proof strip shares the same metronomic stagger. */
.cd-proof > .cd-rv:nth-child(2) { transition-delay: 75ms; }
.cd-proof > .cd-rv:nth-child(3) { transition-delay: 150ms; }
.cd-proof > .cd-rv:nth-child(4) { transition-delay: 225ms; }


/* ═══════════════ 3 · BUTTONS ═══════════════ */
.cd-btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--cd-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 22px; border-radius: var(--cd-r-m);
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.cd-btn:active { transform: translateY(1px); }
.cd-btn-primary { background: var(--cd-steel); color: var(--cd-steel-contrast); }
.cd-btn-primary:hover { filter: brightness(1.12); }
.cd-btn-ghost { border-color: var(--cd-hairline); color: var(--cd-ink); background: var(--cd-panel); }
.cd-btn-ghost:hover { border-color: var(--cd-steel); color: var(--cd-steel); }
.cd-btn-s { padding: 8px 14px; font-size: 11px; }


/* ═══════════════ 4 · HEADER ═══════════════ */
.cd-site {
  position: sticky; top: 0; z-index: 50;
  background: var(--cd-paper);
  border-bottom: 1px solid var(--cd-hairline);
}
.cd-bar { display: flex; align-items: center; gap: 28px; height: 64px; }
.cd-brand { display: inline-flex; align-items: center; gap: 10px; }
.cd-glyph { width: 22px; height: 22px; }
.cd-glyph rect { fill: var(--cd-steel); }
.cd-word {
  font-family: var(--cd-sans); font-weight: 300; font-size: 17px; letter-spacing: .34em;
  color: var(--cd-ink); padding-left: .08em;
}
.cd-nav { display: flex; align-items: center; gap: 22px; margin-inline: auto; }
.cd-nav a {
  font-size: 13.5px; color: var(--cd-ink-2);
  padding: 4px 2px; border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.cd-nav a:hover { color: var(--cd-steel); border-color: var(--cd-steel); }
.cd-nav a.cd-navtrust { color: var(--cd-steel); }
.cd-acts { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.cd-member { font-size: 13.5px; color: var(--cd-ink-2); transition: color .2s ease; }
.cd-member:hover { color: var(--cd-steel); }
.cd-tgl {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--cd-hairline); border-radius: var(--cd-r-m);
  color: var(--cd-ink-2); transition: border-color .2s ease, color .2s ease;
}
.cd-tgl:hover { border-color: var(--cd-steel); color: var(--cd-steel); }
.cd-tgl svg { width: 16px; height: 16px; display: none; }
.cd-tgl svg * { stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Pre-JS icon follows the OS scheme, so the no-JS default matches the effective theme. */
@media (prefers-color-scheme: light) { .cd-tgl:not([data-mode]) .cd-ic-moon { display: block; } }
@media (prefers-color-scheme: dark)  { .cd-tgl:not([data-mode]) .cd-ic-sun  { display: block; } }
.cd-tgl[data-mode="light"] .cd-ic-moon { display: block; }     /* click → night dial */
.cd-tgl[data-mode="dark"] .cd-ic-sun { display: block; }       /* click → daylight */

/* Mobile disclosure menu (≤860px) — hairline panel, mono indices, token-styled. */
.cd-mtgl { display: none; }
.cd-mtgl[aria-expanded="false"] .cd-ic-bars { display: block; }
.cd-mtgl[aria-expanded="true"] .cd-ic-x { display: block; }
.cd-mnav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cd-paper); border-bottom: 1px solid var(--cd-hairline);
}
.cd-mnav a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px clamp(20px, 5vw, 48px);
  font-size: 14.5px; color: var(--cd-ink-2);
  border-bottom: 1px solid var(--cd-hairline);
  transition: color .2s ease;
}
.cd-mnav a:last-of-type { border-bottom: 0; }
.cd-mnav a:hover { color: var(--cd-steel); }
.cd-mnav a.cd-navtrust { color: var(--cd-steel); }
.cd-mnav .cd-mnum {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cd-muted);
}


/* ═══════════════ 5 · HERO ═══════════════ */
.cd-hero { position: relative; padding: clamp(64px, 10vw, 128px) 0 clamp(48px, 7vw, 88px); }
.cd-dialbg { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.cd-dialbg svg {
  position: absolute; left: 50%; top: -12%; transform: translateX(-50%);
  width: 1200px; max-width: none;
  opacity: var(--cd-dial-alpha);
}
.cd-dialbg circle { fill: none; stroke: var(--cd-hairline); }
.cd-dialbg .cd-dring { stroke-width: 1; }
.cd-dialbg .cd-dash1 { stroke-dasharray: 3 9; opacity: .85; }
.cd-dialbg .cd-dash2 { stroke-dasharray: 1 7; opacity: .7; }
.cd-dialbg .cd-faint { opacity: .55; }
.cd-dialbg .cd-faintest { opacity: .4; }
/* Minute track: dasharray over a normalised pathLength cuts the ring into ticks. */
.cd-dialbg .cd-mintick { stroke-width: 14; stroke-dasharray: .05 .95; stroke-dashoffset: .025; }
.cd-dialbg .cd-fivetick { stroke: var(--cd-steel); stroke-width: 22; stroke-dasharray: .03 .97; stroke-dashoffset: .015; opacity: .5; }
/* Radial brushed texture: an over-stroked circle whose dashes become faint sunray spokes. */
.cd-dialbg .cd-spokes { stroke-width: 360; stroke-dasharray: .1 .9; opacity: .12; }
.cd-dialbg .cd-rot { transform-box: fill-box; transform-origin: center; animation: cd-dialrot 120s linear infinite; }
@keyframes cd-dialrot { to { transform: rotate(1turn); } }

.cd-herocore { position: relative; text-align: center; }
.cd-hero h1 {
  margin: 18px auto 0;
  font-size: clamp(44px, 8.2vw, 96px);
  max-width: 14ch;
  font-variant-numeric: tabular-nums;
}
.cd-u-red { border-bottom: 2px solid var(--cd-red); }          /* the one red underline */
.cd-herosub {
  margin: 22px auto 0; max-width: 62ch;
  color: var(--cd-ink-2); font-size: clamp(15px, 1.6vw, 17.5px);
}
.cd-heroctas { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* ── The going-train ── */
.cd-trainbay { margin-top: clamp(44px, 6vw, 72px); }
.cd-railwrap { overflow-x: auto; padding-bottom: 4px; }
.cd-train { width: 100%; min-width: 760px; height: auto; }
.cd-train .cd-rail { stroke: var(--cd-hairline); stroke-width: 1.25; }
.cd-train .cd-ring { fill: var(--cd-paper); stroke: var(--cd-hairline); stroke-width: 1.25; transition: stroke .3s ease; }
.cd-train .cd-jewel { fill: var(--cd-steel); transition: fill .3s ease; transform-box: fill-box; transform-origin: center; }
.cd-train .cd-halo { fill: none; stroke: var(--cd-red); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cd-train .cd-stlabel {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: .08em;
  fill: var(--cd-muted); transition: fill .3s ease;
}
.cd-train .cd-st.cd-active .cd-ring { stroke: var(--cd-steel); }
.cd-train .cd-st.cd-active .cd-jewel { fill: var(--cd-red); filter: var(--cd-lume); animation: cd-beat 750ms cubic-bezier(.3, 0, .2, 1) infinite; }
.cd-train .cd-st.cd-active .cd-halo { animation: cd-halo 750ms ease-out infinite; }
.cd-train .cd-st.cd-active .cd-stlabel { fill: var(--cd-lume-ink); }
@keyframes cd-beat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 30% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes cd-halo {
  0% { transform: scale(.55); opacity: .75; }
  70% { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}
.cd-counter {
  margin-top: 14px; text-align: center;
  font-family: var(--cd-mono); font-variant-numeric: tabular-nums;
}
.cd-ctime { font-size: 22px; color: var(--cd-ink); }
.cd-cunit { font-size: 10.5px; letter-spacing: .14em; color: var(--cd-muted); text-transform: uppercase; margin-left: 10px; }


/* ═══════════════ 6 · PROOF STRIP ═══════════════ */
.cd-proofband { border-top: 1px solid var(--cd-hairline); border-bottom: 1px solid var(--cd-hairline); background: var(--cd-panel); }
.cd-proof { display: grid; grid-template-columns: repeat(4, 1fr); }
.cd-proof li { padding: clamp(20px, 3vw, 32px) clamp(16px, 2.4vw, 28px); border-left: 1px solid var(--cd-hairline); }
.cd-proof li:first-child { border-left: 0; }
.cd-figure {
  font-family: var(--cd-serif); font-weight: 400;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.cd-figcap {
  margin-top: 6px; font-family: var(--cd-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cd-muted);
}


/* ═══════════════ 7 · SECTIONS & CHAPTER RING ═══════════════ */
/* The `section` qualifier is load-bearing — do not simplify it to `.cd-chapter`.
   This shorthand sets padding-bottom: 0, and at specificity (0,1,1) it deliberately beats
   `.cd-ctaband`'s padding-bottom at (0,1,0) further down the file. Dropping the element selector
   lets the CTA band win on source order instead and adds 112px of dead space above the footer —
   which is exactly how this was got wrong once already. */
section.cd-chapter { padding: clamp(56px, 9vw, 112px) 0 0; }
section.cd-chapter > .cd-wrap > .cd-ruler { margin-bottom: clamp(36px, 5vw, 56px); }
.cd-sechead { max-width: 720px; }
.cd-chap { display: flex; align-items: center; gap: 12px; }
.cd-chapnum {
  font-family: var(--cd-serif); font-size: 15px; color: var(--cd-ink);
  font-variant-numeric: tabular-nums;
}
.cd-chaptick { width: 2px; height: 12px; background: var(--cd-red); }  /* red tick marks */
.cd-chapkicker {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cd-muted);
}
.cd-sechead h2 { margin-top: 16px; font-size: clamp(30px, 4.4vw, 52px); }
.cd-lede { margin-top: 14px; color: var(--cd-ink-2); font-size: clamp(15px, 1.5vw, 16.5px); max-width: 58ch; }
.cd-secbody { margin-top: clamp(32px, 4.5vw, 52px); }


/* ═══════════════ 8 · PIPELINE (chapter 01) ═══════════════ */
.cd-stages { border-top: 1px solid var(--cd-hairline); }
.cd-stage {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 10px 28px;
  align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--cd-hairline);
}
.cd-tmark {
  font-family: var(--cd-mono); font-size: 12.5px; color: var(--cd-steel);
  font-variant-numeric: tabular-nums;
}
.cd-stgname { font-weight: 500; font-size: 16.5px; }
.cd-stgdesc { color: var(--cd-ink-2); font-size: 14px; margin-top: 2px; max-width: 62ch; }
.cd-stgcode {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--cd-muted); text-transform: uppercase;
}


/* ═══════════════ 9 · CAPABILITIES — complication dials (chapter 02) ═══════════════ */
.cd-grid { display: grid; gap: 18px; }
.cd-caps { grid-template-columns: repeat(3, 1fr); }
.cd-dial {
  position: relative; overflow: hidden;
  background: var(--cd-panel); border: 1px solid var(--cd-hairline); border-radius: var(--cd-r-l);
  padding: 24px 22px 26px;
  transition: border-color .25s ease, transform .25s ease, opacity .6s ease;
}
.cd-dial:hover { border-color: var(--cd-steel); transform: translateY(-2px); }
.cd-dial.cd-rv { transition: border-color .25s ease, transform .6s ease, opacity .6s ease; }
.cd-dial.cd-rv.cd-in { transition: border-color .25s ease, transform .25s ease, opacity .6s ease; }
/* crosshair-follow: a faint + mark tracking the pointer */
.cd-dial::after {
  content: ""; position: absolute; left: var(--cd-mx, 50%); top: var(--cd-my, 50%);
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background:
    linear-gradient(var(--cd-steel) 0 0) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--cd-steel) 0 0) 0 50% / 100% 1px no-repeat;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.cd-dial:hover::after { opacity: .35; }
.cd-comp { width: 30px; height: 30px; color: var(--cd-steel); margin-bottom: 16px; }
.cd-comp * { stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cd-comp .cd-dot { fill: currentColor; stroke: none; }
.cd-dial h3 { font-size: 16px; font-weight: 600; }
.cd-dial p { margin-top: 8px; font-size: 14px; color: var(--cd-ink-2); }
.cd-dial .cd-idx {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--cd-muted);
}


/* ═══════════════ 10 · HARDWARE TRIO (chapter 03) ═══════════════ */
.cd-trio { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cd-instrument { text-align: left; }
.cd-plate {
  background: var(--cd-panel); border: 1px solid var(--cd-hairline); border-radius: var(--cd-r-l);
  padding: 26px; display: grid; place-items: center; aspect-ratio: 5 / 4;
}
.cd-plate svg { width: 100%; max-width: 220px; height: auto; }
.cd-plate svg * { stroke: var(--cd-steel); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cd-plate svg .cd-fine { stroke-width: 1.1; opacity: .8; }
.cd-plate svg .cd-dot { fill: var(--cd-steel); stroke: none; }
.cd-instrument h3 { margin-top: 16px; font-size: 16px; font-weight: 600; }
.cd-instrument .cd-svc {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cd-steel); margin-top: 4px;
}
.cd-instrument p { margin-top: 8px; font-size: 14px; color: var(--cd-ink-2); }


/* ═══════════════ 11 · SECURITY & TRUST (chapter 04) ═══════════════ */
.cd-sec4 { grid-template-columns: repeat(2, 1fr); }
.cd-vault {
  background: var(--cd-panel); border: 1px solid var(--cd-hairline); border-radius: var(--cd-r-l);
  padding: 22px;
}
.cd-vault h3 { font-size: 15.5px; font-weight: 600; }
.cd-vault p { margin-top: 8px; font-size: 14px; color: var(--cd-ink-2); }
.cd-vault .cd-spec {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cd-steel); margin-top: 12px;
}
.cd-trust {
  margin-top: 18px;
  background: var(--cd-steel-tint); border: 1px solid var(--cd-hairline); border-radius: var(--cd-r-l);
  padding: clamp(24px, 3.5vw, 36px);
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px clamp(24px, 3.5vw, 40px); align-items: center;
}
.cd-trust h3 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 300; letter-spacing: -0.01em; }
.cd-trust p { margin-top: 8px; font-size: 14.5px; color: var(--cd-ink-2); max-width: 56ch; }
.cd-trustlinks { display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex-wrap: wrap; }

/* Caseback medallion — the Trust Centre mark, struck as a chronometer caseback.
   Steel/ink hairlines only; on the night dial the chapter ring and monogram are
   lume-filled (--cd-lume-ink) — colour only, no glow: the going-train jewel stays the star. */
.cd-caseback { text-align: center; }
.cd-caseback svg { width: 184px; height: auto; margin-inline: auto; }
.cd-cb-ring { stroke: var(--cd-ink-2); fill: none; opacity: .85; }
.cd-cb-core { stroke: var(--cd-lume-ink); opacity: .9; }
/* 60-tick minute-track ring, cut with the same pathLength/dasharray trick as the hero dial. */
.cd-cb-tick  { stroke: var(--cd-ink-2); fill: none; opacity: .5;  stroke-width: 8;  stroke-dasharray: .05 .95; stroke-dashoffset: .025; }
.cd-cb-tick5 { stroke: var(--cd-steel); fill: none; opacity: .55; stroke-width: 11; stroke-dasharray: .03 .97; stroke-dashoffset: .015; }
.cd-cb-arc { font-family: var(--cd-mono); font-size: 11px; letter-spacing: .14em; fill: var(--cd-ink-2); }
.cd-cb-t { font-family: var(--cd-serif); font-size: 54px; fill: var(--cd-lume-ink); }
.cd-cb-cap {
  margin-top: 12px; font-family: var(--cd-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cd-muted);
}
/* The tick ring turns once per 90 s — one full issuance sweep. The text arcs never move. */
.cd-cbrot { transform-box: fill-box; transform-origin: center; animation: cd-cbrot 90s linear infinite; }
@keyframes cd-cbrot { to { transform: rotate(1turn); } }


/* ═══════════════ 12 · DEPLOYMENT (chapter 05) + CTA (06) ═══════════════ */
.cd-homes { grid-template-columns: 1fr 1fr; gap: 22px; }
.cd-home {
  background: var(--cd-panel); border: 1px solid var(--cd-hairline); border-radius: var(--cd-r-l);
  padding: clamp(24px, 3vw, 34px);
}
.cd-home .cd-where {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cd-steel);
}
.cd-home h3 { margin-top: 12px; font-size: 21px; font-weight: 300; letter-spacing: -0.01em; }
.cd-home p { margin-top: 10px; font-size: 14.5px; color: var(--cd-ink-2); }
.cd-switchnote {
  margin-top: 20px; text-align: center;
  font-family: var(--cd-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cd-muted);
}
/* Qualified to (0,1,1) so it actually lands — and this is a DELIBERATE correction to the artefact,
   the one place Cadence does not reproduce it.
   The mockup asked for this padding and never got it: `section.chapter`'s `padding: … 0 0` shorthand
   outscored the unqualified `.ctaband` rule, so the closing section sat flush on the footer with no
   breathing room. The intent was written down; specificity ate it. Restoring it costs ~112px of
   document height against the mockup at 1440 — see D51. */
section.cd-ctaband { padding-bottom: clamp(56px, 9vw, 112px); }
.cd-ctaband { text-align: center; }
.cd-ctaband .cd-sechead { margin-inline: auto; }
.cd-ctaband .cd-chap { justify-content: center; }
.cd-ctaband h2 { font-size: clamp(40px, 6vw, 72px); }
.cd-ctaband .cd-lede { margin-inline: auto; }
.cd-ctaband .cd-heroctas { margin-top: 28px; }


/* ═══════════════ 13 · FOOTER ═══════════════ */
.cd-foot { border-top: 1px solid var(--cd-hairline); background: var(--cd-panel); }
.cd-footgrid {
  display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap;
  padding-block: 34px;
}
.cd-fbrand { display: inline-flex; align-items: center; gap: 10px; }
.cd-fbrand .cd-word { font-size: 14px; }
.cd-fnav { display: flex; gap: 20px; flex-wrap: wrap; }
.cd-fnav a { font-size: 13.5px; color: var(--cd-ink-2); transition: color .2s ease; }
.cd-fnav a:hover { color: var(--cd-steel); }
.cd-legal {
  margin-left: auto; font-family: var(--cd-mono); font-size: 11px;
  letter-spacing: .04em; color: var(--cd-muted);
}


/* ═══════════════ 14 · RESPONSIVE ═══════════════ */
@media (max-width: 960px) {
  .cd-caps { grid-template-columns: repeat(2, 1fr); }
  .cd-trio { grid-template-columns: 1fr; }
  .cd-plate { aspect-ratio: auto; }
  .cd-trust { grid-template-columns: auto 1fr; }
  .cd-trustlinks { grid-column: 1 / -1; flex-direction: row; }
}
@media (max-width: 860px) {
  .cd-nav, .cd-member { display: none; }
  .cd-mtgl { display: grid; }
  .cd-mnav:not([hidden]) { display: block; }
}
@media (max-width: 720px) {
  .cd-proof { grid-template-columns: 1fr 1fr; }
  .cd-proof li:nth-child(odd) { border-left: 0; }
  .cd-proof li:nth-child(n+3) { border-top: 1px solid var(--cd-hairline); }
  .cd-stage { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .cd-stgcode { order: -1; }
  .cd-sec4, .cd-homes { grid-template-columns: 1fr; }
  .cd-legal { margin-left: 0; }
}
@media (max-width: 560px) {
  .cd-caps { grid-template-columns: 1fr; }
  .cd-trust { grid-template-columns: 1fr; }
  .cd-caseback { justify-self: center; }
  .cd-caseback svg { width: 152px; }
}
@media (max-width: 480px) {
  .cd-bar { gap: 14px; }
  .cd-acts { gap: 8px; }
  .cd-btn-s { padding: 8px 10px; }
}


/* ═══════════════ 15 · REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  .cd-root *, .cd-root *::before, .cd-root *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html:has(.cd-root) { scroll-behavior: auto; }
  .cd-rv { opacity: 1; transform: none; }
  .cd-train .cd-st.cd-active .cd-jewel { animation: none; }
  .cd-train .cd-st.cd-active .cd-halo { animation: none; opacity: 0; }
  .cd-dialbg .cd-rot { animation: none; }
  .cd-cbrot { animation: none; }
}