/* ---------------------------------------------------------------
 * Self-hosted type. Same faces the site has always used (Inter,
 * Inter Tight, IBM Plex Sans Condensed) — served from our own origin
 * so first paint costs no third-party DNS/TLS round-trip, and
 * font-display:swap keeps text readable while they arrive.
 * ------------------------------------------------------------- */
/* Inter ships from Google as one variable file covering the whole wght
   axis. Declaring it twice as single static weights shipped the same
   47KB twice and capped the family at the heaviest value declared. One
   face with the range the site actually uses is correct and lighter. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('/assets/fonts/inter.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/inter-tight-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-condensed-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-condensed-500.woff2') format('woff2');}

/* ============================================================
   CITADEL MEDIA — homepage
   Built against DESIGN.md. Structure from Ciridae, surface from
   the Citadel brand standard.
   ============================================================ */

:root{
  /* Canonical palette */
  --color-iron:#18201E;
  --color-evergreen:#18342F;
  --color-parchment:#F4F0E6;
  --color-stone:#D7D0C2;
  --color-brass:#B08D57;
  /* Same hue and saturation as brass, lifted in tone only. Brass clears AA
     on Iron (5.37:1) but not on an Evergreen surface (4.32:1); this reaches
     4.80:1 there, so accent text on Evergreen has a token that passes. */
  --color-brass-raised:#B69665;
  --color-slate:#66716D;

  /* Derived surfaces — pending founder approval */
  --color-iron-deep:#0E1413;
  --color-evergreen-raised:#24463F;
  --color-slate-deep:#565F5B;

  /* Semantic roles — dark field (default) */
  --surface-canvas:var(--color-iron);
  --surface-card:var(--color-evergreen);
  --surface-card-hover:var(--color-evergreen-raised);
  --surface-system:var(--color-iron-deep);
  --text-primary:var(--color-parchment);
  --text-secondary:var(--color-stone);
  --text-accent:var(--color-brass);
  --border-default:var(--color-slate);
  --border-emphasis:var(--color-stone);
  --border-accent:var(--color-brass);

  /* Typography */
  --font-display:"Neue Haas Grotesk Display","Inter Tight",Inter,Arial,sans-serif;
  --font-body:Inter,"Helvetica Neue",Arial,sans-serif;
  --font-numeric:"IBM Plex Sans Condensed","IBM Plex Sans","Arial Narrow",sans-serif;

  --text-micro:11px;
  --text-label:12px;
  --text-eyebrow:13px;
  --text-control:14px;
  --text-body-sm:15px;
  --text-body:16px;
  --text-body-lg:18px;
  --text-lead:20px;
  --text-subhead:24px;
  --text-heading-sm:32px;
  --text-heading:40px;
  --text-heading-lg:48px;
  --text-display:56px;
  --text-display-xl:72px;

  /* Spacing — 4px base */
  --spacing-1:4px;   --spacing-2:8px;   --spacing-3:12px;  --spacing-4:16px;
  --spacing-5:20px;  --spacing-6:24px;  --spacing-8:32px;  --spacing-10:40px;
  --spacing-12:48px; --spacing-16:64px; --spacing-20:80px; --spacing-24:96px;
  --spacing-30:120px;--spacing-40:160px;

  /* Shape grammar */
  --radius-pill:9999px;  /* interactive     */
  --radius-card:10px;    /* content         */
  --radius-sharp:0px;    /* system zone     */
  --border-hairline:1px;

  /* Layout */
  --width-page:1400px;
  --width-content:1200px;
  --width-prose:68ch;

  /* Motion — DESIGN.md §5, amended for scroll choreography */
  --motion-fast:120ms;   /* state change */
  --motion-base:400ms;   /* a thing arriving */
  --motion-slow:800ms;   /* the largest single move; nothing exceeds this */
  --motion-ease:cubic-bezier(.2,0,0,1);
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
}

/* Light inversion — Proof section only. Brass is absent by design. */
.proof{
  --surface-canvas:var(--color-parchment);
  --surface-card:#FFFFFF;
  --text-primary:var(--color-iron);
  --text-secondary:var(--color-slate-deep);
  --text-accent:var(--color-evergreen);
  --border-default:var(--color-stone);
  --border-emphasis:var(--color-slate-deep);
  --border-accent:var(--color-evergreen);
}

*,*::before,*::after{box-sizing:border-box;box-shadow:none;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--color-iron);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--text-body);
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}

/* --- Numeric channel: tabular figures are mandatory --------- */
.numeric,th,td,.price,.rate,.percentile{
  font-family:var(--font-numeric);
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* --- Type roles --------------------------------------------- */
.eyebrow{
  font-family:var(--font-numeric);font-size:var(--text-eyebrow);
  text-transform:uppercase;letter-spacing:.06em;line-height:1.2;
  color:var(--text-accent);margin:0 0 var(--spacing-4);
}
.micro{
  font-family:var(--font-numeric);font-size:var(--text-micro);
  text-transform:uppercase;letter-spacing:.08em;line-height:1.1;
  color:var(--text-secondary);
}
.label{
  font-family:var(--font-numeric);font-size:var(--text-label);
  text-transform:uppercase;letter-spacing:.08em;line-height:1.1;
  color:var(--text-secondary);
}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;color:var(--text-primary);}
h1{font-size:var(--text-display-xl);line-height:1.02;letter-spacing:-.03em;}
h2{font-size:var(--text-heading-lg);line-height:1.08;letter-spacing:-.02em;}
h3{font-size:var(--text-heading-sm);line-height:1.12;letter-spacing:-.015em;}
p{margin:0 0 var(--spacing-4);max-width:var(--width-prose);}
.lead{font-size:var(--text-lead);font-weight:500;line-height:1.45;letter-spacing:-.01em;color:var(--text-secondary);}
.secondary{color:var(--text-secondary);}
a{color:inherit;}

/* --- Layout ------------------------------------------------- */
.wrap{max-width:var(--width-content);margin:0 auto;padding:0 var(--spacing-6);}
section{padding:var(--spacing-30) 0;}
.section-head{margin-bottom:var(--spacing-12);}
.section-head h2{max-width:var(--width-prose);}
.section-head p{margin-top:var(--spacing-6);}

/* --- Focus: two cues, always -------------------------------- */
:focus-visible{
  outline:2px solid var(--color-brass);
  outline-offset:2px;
  border-color:var(--color-brass);
}
.proof :focus-visible{outline-color:var(--color-evergreen);}

/* --- Skip link: off-canvas until focused -------------------- */
.skip-link{
  position:absolute;left:var(--spacing-6);top:-100%;z-index:100;
  background:var(--color-parchment);color:var(--color-iron);
  padding:var(--spacing-3) var(--spacing-5);
  border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:15px;text-decoration:none;
}
.skip-link:focus{top:var(--spacing-3);}

/* ============================================================
   PROMO BANNER — site-wide seasonal notice
   Wording is fixed by the offer it describes; only its presentation
   lives here. Previously an inline-styled div in Arial with the promo
   code set in brass on evergreen at 4.32:1, under AA.
   ============================================================ */
.promo-banner{
  background:var(--color-evergreen);
  color:var(--color-parchment);
  text-align:center;
  padding:10px var(--spacing-4);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.45;
}
.promo-banner strong{color:var(--color-brass-raised);font-weight:500;}

/* ============================================================
   SYSTEM STRIP — sharp (0px) = system zone
   ============================================================ */
.system-strip{
  background:var(--color-iron-deep);
  border-radius:var(--radius-sharp);
  padding:10px var(--spacing-6);
  text-align:center;
}
.system-strip .micro{color:var(--color-parchment);}
/* Slate reads 3.68:1 here — under AA. Separators take Stone. */
.sep{color:var(--color-stone);padding:0 var(--spacing-2);}

/* Brass is a canvas-level accent: it clears AA on Iron (5.37:1) but not
   on an Evergreen surface (4.32:1). Eyebrows inside cards take Stone. */
.card .eyebrow,.tier .eyebrow,.contact .eyebrow{color:var(--color-stone);}
.proof .card .eyebrow,.proof .contact .eyebrow{color:var(--color-slate-deep);}

/* ============================================================
   NAV — pill = interactive
   ============================================================ */
.nav{}   /* §4: Iron canvas, no border on the bar itself */
.nav-inner{
  max-width:var(--width-content);margin:0 auto;
  padding:var(--spacing-3) var(--spacing-6);
  display:flex;align-items:center;gap:var(--spacing-8);
}
.brand{display:flex;align-items:center;min-height:44px;gap:var(--spacing-3);text-decoration:none;flex:0 0 auto;}
.brand img{height:38px;width:auto;}  /* clears the 120px lockup minimum */
.nav-links{display:flex;gap:var(--spacing-5);margin-left:auto;list-style:none;padding:0;}
/* min-height holds the 44px touch target; the brass rule rides on
   text-decoration so it stays tight to the glyphs inside a taller box. */
.nav-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-numeric);font-size:var(--text-control);
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--color-parchment);
  text-decoration:underline;text-decoration-color:transparent;
  text-decoration-thickness:1px;text-underline-offset:6px;
  transition:text-decoration-color var(--motion-fast) var(--motion-ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{text-decoration-color:var(--color-brass);}

/* ============================================================
   BUTTONS — pill = interactive. Brass marks the edge, never fills.
   ============================================================ */
/* min-height holds the 44px touch target; padding alone left these at 43.3px */
.btn-ghost,.btn-solid{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  border-radius:var(--radius-pill);
  font-family:var(--font-numeric);font-size:var(--text-control);
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
  cursor:pointer;white-space:nowrap;
  transition:border-color var(--motion-fast) var(--motion-ease),
             background-color var(--motion-fast) var(--motion-ease);
}
.btn-ghost{
  background:transparent;
  border:var(--border-hairline) solid var(--text-primary);
  color:var(--text-primary);
  padding:10px 20px;
}
.btn-ghost:hover{border-color:var(--color-brass);}
.proof .btn-ghost:hover{border-color:var(--color-evergreen);}
.btn-ghost:active{background:var(--color-evergreen-raised);}
.btn-solid{
  background:var(--text-primary);
  color:var(--surface-canvas);
  border:0;                       /* §4: Solid Button carries no border */
  padding:12px 24px;
}
.btn-solid:hover{background:var(--color-stone);border-color:var(--color-stone);}

/* ============================================================
   HERO — no photography behind type. The artifact is the image.
   ============================================================ */
.hero{padding:var(--spacing-24) 0 var(--spacing-30);position:relative;}
/* Absolute against .hero, centred on the headline — not against the
   document, which parked it on top of the nav. */
.hero-flank{
  display:none;position:absolute;left:0;width:100%;
  pointer-events:none;
}
.hero-flank .wrap{display:flex;justify-content:space-between;}
.hero-inner{text-align:center;display:flex;flex-direction:column;align-items:center;}
.hero-mark{height:76px;width:auto;margin-bottom:var(--spacing-10);}
/* Measure tuned so the headline holds at three lines or fewer at
   every breakpoint — DESIGN.md §2, display type never wraps past three. */
.hero h1{max-width:22ch;margin-bottom:var(--spacing-8);text-wrap:balance;}
.hero .lead{max-width:60ch;margin-bottom:var(--spacing-10);}
.hero-actions{display:flex;gap:var(--spacing-4);flex-wrap:wrap;justify-content:center;}

/* Preview artifact frame — rendered sharp, never blurred */
.artifact{
  margin-top:var(--spacing-20);
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-card);
  background:var(--surface-card);
  overflow:hidden;
}
.artifact-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-4);
  padding:var(--spacing-3) var(--spacing-4);
  border-bottom:var(--border-hairline) solid var(--border-default);
}
.artifact-body{
  aspect-ratio:16/9;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--spacing-3);
  padding:var(--spacing-8);text-align:center;
}
.artifact-body .placeholder-note{max-width:44ch;margin:0;}

/* ============================================================
   SYSTEM CARDS — rounded rect (10px) = content container
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-6);}
.card{
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-card);
  padding:var(--spacing-8);
  transition:border-color var(--motion-fast) var(--motion-ease),
             background-color var(--motion-fast) var(--motion-ease);
}
.card:hover{border-color:var(--color-brass);background:var(--color-evergreen-raised);}
/* A card heading that opens a page — before any h2 exists — has to be an
   h2 or the outline skips a level, but it still has to read as a card
   heading. These two rules keep h2 and h3 inside a card identical, so the
   correct level can be chosen on semantics alone. */
.card h2,.card h3{
  font-size:var(--text-heading-sm);line-height:1.12;letter-spacing:-.015em;
  margin:var(--spacing-5) 0 var(--spacing-4);
}
.card p:last-child{margin-bottom:0;}

/* Pill badge — never free-standing, always ≤12px, never clickable */
.badge{
  display:inline-block;border-radius:var(--radius-pill);
  border:var(--border-hairline) solid var(--border-emphasis);
  padding:5px 12px;
  font-family:var(--font-numeric);font-size:var(--text-label);
  text-transform:uppercase;letter-spacing:.08em;line-height:1.1;
  color:var(--text-primary);
}

/* ============================================================
   PROOF INVERSION — the one light section on the page
   ============================================================ */
.proof{background:var(--color-parchment);color:var(--color-iron);}
.proof h2,.proof h3{color:var(--color-iron);}
.proof .eyebrow{color:var(--color-evergreen);}
.proof .card{background:#fff;border-color:var(--color-stone);}
.proof .card:hover{border-color:var(--color-evergreen);background:#fff;}
.proof .badge{border-color:var(--color-slate-deep);color:var(--color-iron);}
.proof .lead,.proof .secondary{color:var(--color-slate-deep);}
.proof .artifact{background:#fff;border-color:var(--color-stone);}
.proof .artifact-bar{border-bottom-color:var(--color-stone);}
.proof .micro{color:var(--color-slate-deep);}
/* Stone reads 1.35:1 on Parchment — effectively invisible. */
.proof .sep{color:var(--color-slate-deep);}
.proof-steps{margin-top:var(--spacing-12);}

/* ============================================================
   TIER CARDS — scope, price, limitations, exit are structural
   ============================================================ */
.tier{
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-card);
  padding:var(--spacing-8);
  display:flex;flex-direction:column;position:relative;
}
.tier--recommended{border-color:var(--color-brass);}
/* Three cues: border change + shape change + the word itself */
.tier-tab{
  position:absolute;top:0;left:var(--spacing-8);transform:translateY(-50%);
  background:var(--color-iron-deep);
  border:var(--border-hairline) solid var(--color-brass);
  border-radius:var(--radius-sharp);
  padding:4px 10px;
  font-family:var(--font-numeric);font-size:var(--text-micro);
  text-transform:uppercase;letter-spacing:.08em;color:var(--color-brass);
}
/* Brass measures 4.32:1 on Evergreen — below AA for text this size.
   The name takes Stone (8.71:1); brass stays as the hairline above it,
   which is the accent's correct job anyway: mark the edge, not the fill. */
.tier-name{
  font-family:var(--font-numeric);font-size:var(--text-eyebrow);
  text-transform:uppercase;letter-spacing:.06em;color:var(--color-stone);
  margin:0 0 var(--spacing-4);padding-top:var(--spacing-4);
  border-top:var(--border-hairline) solid var(--color-brass);
}
.tier-price{
  font-family:var(--font-numeric);font-feature-settings:"tnum" 1,"lnum" 1;
  font-size:var(--text-heading-lg);line-height:1;letter-spacing:-.02em;
  color:var(--text-primary);margin:0 0 var(--spacing-2);
}
.tier-recurring{margin:0 0 var(--spacing-6);}
.tier-rule{border:0;border-top:var(--border-hairline) solid var(--border-emphasis);margin:0 0 var(--spacing-6);}
.tier-scope{list-style:none;padding:0;margin:0 0 var(--spacing-8);}
.tier-scope li{
  position:relative;padding-left:var(--spacing-5);margin-bottom:var(--spacing-3);
  font-size:var(--text-body);
}
.tier-scope li::before{
  content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;
  background:var(--color-brass);
}
.tier-block{margin-bottom:var(--spacing-6);}
.tier-block p{font-size:var(--text-body-sm);color:var(--text-secondary);margin:var(--spacing-2) 0 0;}
.tier .btn-ghost{margin-top:auto;text-align:center;}

/* ============================================================
   EVIDENCE TABLE — scrolls inside itself, never the page
   ============================================================ */
.table-wrap{
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-card);
  background:var(--surface-card);
  overflow-x:auto;
}
table{border-collapse:collapse;width:100%;min-width:640px;}
th,td{
  text-align:left;padding:12px 16px;font-size:var(--text-control);
  border-bottom:var(--border-hairline) solid var(--border-default);
}
th{
  font-size:var(--text-label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-secondary);font-weight:400;
  border-bottom:var(--border-hairline) solid var(--border-emphasis);
}
td{color:var(--text-primary);}
td.secondary-cell{color:var(--text-secondary);}
tr:last-child td{border-bottom:0;}

/* Row headers are semantics, not a style change: a screen reader needs to
   announce "Growth, one-time price, $1,997" rather than a bare figure, but
   the cell must go on reading as a body cell. */
th[scope="row"]{
  font-size:var(--text-control);text-transform:none;letter-spacing:normal;
  color:var(--text-primary);font-weight:400;
  border-bottom:var(--border-hairline) solid var(--border-default);
}
tr:last-child th[scope="row"]{border-bottom:0;}

/* A table wider than its frame scrolls; the frame is focusable so a
   keyboard can reach that scroll. Focus is only shown when it is useful. */
.table-wrap:focus-visible{outline:2px solid var(--color-brass);outline-offset:2px;}

/* Announced to assistive technology, absent from the page. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Claim provenance — sharp (0px) = system zone */
.provenance{
  border-radius:var(--radius-sharp);
  border-top:var(--border-hairline) solid var(--border-emphasis);
  padding-top:var(--spacing-3);margin-top:var(--spacing-6);
}

/* Simulation label — sharp, brass left edge. Mandatory beside any
   modelled figure. Unused on this buyer-facing page by design;
   ships here so the model/investor pages inherit it unchanged. */
.sim-label{
  display:inline-block;border-radius:var(--radius-sharp);
  background:var(--color-iron-deep);
  border-left:var(--border-hairline) solid var(--color-brass);
  padding:6px 12px;
  font-family:var(--font-numeric);font-size:var(--text-micro);
  text-transform:uppercase;letter-spacing:.08em;color:var(--color-brass);
}

/* ============================================================
   CONTACT — a named human and a real line. Not optional.
   ============================================================ */
.contact{
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-card);
  background:var(--surface-card);
  padding:var(--spacing-12);
  display:grid;grid-template-columns:1.2fr 1fr;gap:var(--spacing-12);align-items:start;
}
.contact h2{margin-bottom:var(--spacing-6);}
.contact-detail{margin-bottom:var(--spacing-6);}
.contact-detail p{margin:var(--spacing-2) 0 0;}
.contact-detail a{text-decoration:none;border-bottom:var(--border-hairline) solid var(--color-brass);padding-bottom:2px;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:var(--border-hairline) solid var(--color-slate);padding:var(--spacing-16) 0 var(--spacing-12);}
.footer-top{display:flex;justify-content:space-between;gap:var(--spacing-12);flex-wrap:wrap;margin-bottom:var(--spacing-12);}
.footer img{height:30px;width:auto;}
.footer-links{display:flex;gap:var(--spacing-2) var(--spacing-6);list-style:none;padding:0;margin:0;flex-wrap:wrap;}
.footer-links a{
  display:inline-flex;align-items:center;min-height:44px;   /* touch target */
  font-family:var(--font-numeric);font-size:var(--text-control);
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--color-parchment);
  text-decoration:underline;text-decoration-color:transparent;
  text-decoration-thickness:1px;text-underline-offset:6px;
  transition:text-decoration-color var(--motion-fast) var(--motion-ease);
}
.footer-links a:hover{text-decoration-color:var(--color-brass);}
.footer-legal{border-top:var(--border-hairline) solid var(--color-slate);padding-top:var(--spacing-6);
  display:flex;justify-content:space-between;gap:var(--spacing-6);flex-wrap:wrap;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1024px){
  .hero-flank{display:block;}
}
@media (max-width:1023px){
  :root{
    /* scale steps only — no invented sizes (§2) */
    --text-display-xl:48px;--text-display:40px;
    --text-heading-lg:32px;--text-heading-sm:24px;--text-lead:18px;
  }
  section{padding:var(--spacing-20) 0;}
  .grid-3{grid-template-columns:1fr;}
  .contact{grid-template-columns:1fr;gap:var(--spacing-8);padding:var(--spacing-8);}
  .nav-links{display:none;}
}
@media (max-width:600px){
  :root{--text-display-xl:40px;--text-heading-lg:32px;}
  section{padding:var(--spacing-16) 0;}
  .hero{padding:var(--spacing-16) 0 var(--spacing-20);}
  .tier,.card{padding:var(--spacing-6);}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-property:opacity!important;
    transition-duration:var(--motion-fast)!important;
  }
}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */

/* Page head — interior pages open smaller than the homepage hero */
.page-head{padding:var(--spacing-20) 0 var(--spacing-16);}
.page-head h1{font-size:var(--text-display);line-height:1.05;letter-spacing:-.025em;max-width:20ch;}
.page-head .lead{margin-top:var(--spacing-6);}

/* Numbered step sequence — the message architecture, 01–06 */
.steps{list-style:none;padding:0;margin:0;
  border-top:var(--border-hairline) solid var(--border-default);}
.steps li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-6);
  padding:var(--spacing-8) 0;
  border-bottom:var(--border-hairline) solid var(--border-default);
}
.steps h3{margin:0 0 var(--spacing-3);font-size:var(--text-subhead);}
.steps p{margin:0;}

/* Median column — brass side rules AND the word, never colour alone */
th.col-median,td.col-median{
  border-left:var(--border-hairline) solid var(--color-brass);
  border-right:var(--border-hairline) solid var(--color-brass);
}
th.col-median{color:var(--color-stone);}

/* Headline figures */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-6);
  margin-bottom:var(--spacing-8);}
.stat{
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-card);
  padding:var(--spacing-8);
}
.stat .value{
  font-family:var(--font-numeric);font-feature-settings:"tnum" 1,"lnum" 1;
  font-size:var(--text-heading);line-height:1;letter-spacing:-.02em;
  color:var(--text-primary);margin:var(--spacing-4) 0 var(--spacing-2);
}
.stat .label{display:block;}
.stat .note{font-size:var(--text-body-sm);color:var(--text-secondary);margin:0;}

/* Two-up grid — gates, terms */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-6);}

/* Identity block — named human, on the preview page this is load-bearing.
   Single column: the portrait frame was removed, and a leftover 200px track
   would strand the copy in it. */
.identity{
  display:block;
  background:var(--surface-card);
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-card);
  padding:var(--spacing-8);
}
.identity p:last-child{margin-bottom:0;}

/* Definition rows — transparent terms */
.terms{list-style:none;padding:0;margin:0;}
.terms li{
  padding:var(--spacing-5) 0;
  border-bottom:var(--border-hairline) solid var(--border-default);
}
.terms li:last-child{border-bottom:0;}
.terms .label{display:block;margin-bottom:var(--spacing-2);}
.terms p{margin:0;}

@media (max-width:1023px){
  .page-head h1{font-size:var(--text-heading-lg);}
  .stat-row,.grid-2{grid-template-columns:1fr;}
    .steps li{grid-template-columns:1fr;gap:var(--spacing-4);}
}

/* ============================================================
   PROSE — long-form legal and policy body
   ============================================================ */
.prose{max-width:var(--width-prose);}
.prose h2{font-size:var(--text-heading-sm);margin:var(--spacing-12) 0 var(--spacing-6);}
.prose h3{font-size:var(--text-subhead);font-family:var(--font-body);font-weight:500;
  margin:var(--spacing-8) 0 var(--spacing-4);}
.prose > :first-child{margin-top:0;}
.prose p{margin:0 0 var(--spacing-6);}
.prose ol,.prose ul{margin:0 0 var(--spacing-6);padding-left:var(--spacing-6);}
.prose li{margin-bottom:var(--spacing-3);}
.prose li::marker{color:var(--color-brass);}
.proof .prose li::marker{color:var(--color-evergreen);}

/* Contents list for legal pages */
.toc{list-style:none;padding:0;margin:0;}
.toc li{border-bottom:var(--border-hairline) solid var(--border-default);}
.toc li:last-child{border-bottom:0;}
.toc a{
  display:flex;align-items:center;min-height:44px;gap:var(--spacing-4);
  font-family:var(--font-numeric);font-size:var(--text-control);
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-primary);
  text-decoration:underline;text-decoration-color:transparent;
  text-decoration-thickness:1px;text-underline-offset:6px;
  transition:text-decoration-color var(--motion-fast) var(--motion-ease);
}
.toc a:hover{text-decoration-color:var(--color-brass);}

/* Counsel-review marker — sharp, system zone, same family as the
   simulation label: both say "this is not finished copy". */
.review-flag{
  display:inline-block;border-radius:var(--radius-sharp);
  background:var(--color-iron-deep);
  border-left:var(--border-hairline) solid var(--color-brass);
  padding:6px 12px;
  font-family:var(--font-numeric);font-size:var(--text-micro);
  text-transform:uppercase;letter-spacing:.08em;color:var(--color-brass);
}

/* ============================================================
   FORM CONTROLS — contact page only
   ============================================================ */
.field{margin-bottom:var(--spacing-6);}
.field-label{
  display:flex;justify-content:space-between;gap:var(--spacing-4);
  margin-bottom:var(--spacing-2);
}
.field label{
  font-family:var(--font-numeric);font-size:var(--text-label);
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);
}
/* "Required" as a word, never an asterisk and never colour alone */
.field-req{
  font-family:var(--font-numeric);font-size:var(--text-label);
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);
}
.field input,.field select,.field textarea{
  width:100%;min-height:44px;
  padding:12px 20px;
  background:transparent;
  border:var(--border-hairline) solid var(--border-default);
  border-radius:var(--radius-pill);
  color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--text-body);
  line-height:1.55;letter-spacing:-.011em;
  transition:border-color var(--motion-fast) var(--motion-ease);
}
/* The one interactive element that is not a pill — see DESIGN.md §3 */
.field textarea{border-radius:var(--radius-card);min-height:140px;resize:vertical;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--border-emphasis);}
.field-help{font-size:var(--text-body-sm);color:var(--text-secondary);margin:var(--spacing-2) 0 0;}

/* ============================================================
   INLINE LINKS — must be distinguishable without colour alone
   ============================================================ */
:where(.prose,.terms,.field-help,.card,.contact-detail,.identity)
  a:not(.btn-ghost):not(.btn-solid){
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--color-brass);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:text-decoration-thickness var(--motion-fast) var(--motion-ease);
}
:where(.prose,.terms,.field-help,.card,.contact-detail,.identity)
  a:not(.btn-ghost):not(.btn-solid):hover{text-decoration-thickness:2px;}
/* Brass fails on Parchment (2.72:1) — the light field uses Evergreen */
.proof :where(.prose,.terms,.card) a:not(.btn-ghost):not(.btn-solid){
  text-decoration-color:var(--color-evergreen);
}

/* Inline code — accessibility page references CSS properties by name */
code{
  font-family:var(--font-numeric);
  font-feature-settings:"tnum" 1,"lnum" 1;
  font-size:.94em;
  color:var(--text-secondary);
  border-bottom:var(--border-hairline) solid var(--color-slate);
  padding-bottom:1px;
}
.prose strong{font-weight:500;color:var(--text-primary);}

/* Footer legal row now carries a link list rather than plain text */
.footer-legal .footer-links{gap:var(--spacing-2) var(--spacing-5);}

/* ============================================================
   MOTION — DESIGN.md §5 (amended)
   Nothing here animates a figure, moves under text being read,
   or intercepts scroll.
   ============================================================ */

/* --- Split text: glyphs clipped by their own line box ------- */
.sp-word{display:inline-block;white-space:nowrap;}
.sp-mask{display:inline-block;overflow:hidden;vertical-align:bottom;}
.sp-char{
  display:inline-block;
  transform:translateY(102%);
  transition:transform 400ms var(--motion-ease-out);
}
/* Scoped to the split element itself. `.is-in .sp-char` also matched the
   hero wrapper, so glyphs revealed the instant the hero started and the
   deferred release did nothing. */
[data-split].is-in .sp-char{transform:translateY(0);}

/* --- Generic reveal ----------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(16px);}
[data-reveal]{
  transition:opacity var(--motion-base) var(--motion-ease),
             transform var(--motion-base) var(--motion-ease-out);
}
[data-reveal].is-in{opacity:1;transform:none;}
[data-reveal][data-delay="1"]{transition-delay:80ms;}
[data-reveal][data-delay="2"]{transition-delay:160ms;}
[data-reveal][data-delay="3"]{transition-delay:240ms;}
[data-reveal][data-delay="4"]{transition-delay:320ms;}

/* ============================================================
   HERO — the mark IS the subject (bar.md §6)
   Four real parts, four real beats. Everything hidden here is gated
   behind html.js, so with JavaScript unavailable the complete mark
   and the full hero render as-is (§1a constraint 5).
   ============================================================ */
.hero{
  position:relative;
  min-height:calc(100svh - 84px);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--spacing-6) 0 var(--spacing-8);
}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;}

.mark-stack{
  position:relative;width:244px;aspect-ratio:669/698;
  margin-bottom:var(--spacing-6);
}
.mark-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}

/* Resting state = the approved mark, complete. Only a JS-capable
   browser ever hides anything. */
.js .mark-rule{transform:scaleX(0);transform-origin:left center;}
.js .mark-battlement,.js .mark-columns,.js .mark-tower{clip-path:inset(0 100% 0 0);}
.js .mark-flag,.js .mark-star{opacity:0;}

.mark-rule      {transition:transform 420ms var(--motion-ease-out);}
.mark-battlement{transition:clip-path 280ms var(--motion-ease-out) 360ms;}
.mark-columns   {transition:clip-path 280ms var(--motion-ease-out) 620ms;}
.mark-tower     {transition:clip-path 300ms var(--motion-ease-out) 880ms;}
.mark-flag      {transition:opacity 200ms var(--motion-ease) 1180ms;}
.mark-star      {transition:opacity 240ms var(--motion-ease) 1360ms;}

[data-hero].is-in .mark-rule{transform:scaleX(1);}
[data-hero].is-in .mark-battlement,
[data-hero].is-in .mark-columns,
[data-hero].is-in .mark-tower{clip-path:inset(0 0 0 0);}
[data-hero].is-in .mark-flag,
[data-hero].is-in .mark-star{opacity:1;}

/* Category line — names the product and the trades, which the approved
   headline deliberately does not. */
.hero-category{margin-bottom:var(--spacing-5);max-width:none;}

.hero h1{
  font-size:var(--text-display);
  max-width:min(100%,880px);margin-bottom:var(--spacing-5);
}
.hero h1 .h1-line{display:block;width:fit-content;margin-inline:auto;}
.hero .lead{max-width:56ch;margin-bottom:var(--spacing-6);font-weight:400;}
/* Scoped to the hero: stacking and centring belong to the centred hero
   column only. Left this rule global and the five .hero-actions outside a
   hero — on preview, contact and the 404 — were silently centred and
   stacked, with their own justify-content:flex-start doing nothing. */
.hero .hero-actions{flex-direction:column;align-items:center;gap:var(--spacing-3);}
/* The mechanic, carried at every width — it used to live only in the
   desktop flanks, so the phone reader never learned money comes later. */
.hero-note{margin:0;}

.mark-row{position:relative;width:100%;height:0;}
.hero-flank{display:none;position:absolute;left:0;width:100%;pointer-events:none;}
.hero-flank .wrap{display:flex;justify-content:space-between;}
.js .hero-flank .micro{opacity:0;}
.hero-flank .micro{transition:opacity 240ms var(--motion-ease) 2100ms;}
[data-hero].is-in .hero-flank .micro{opacity:1;}
/* centred on the mark's own box, not 33px above it */
.mark-row .hero-flank{top:150px;transform:translateY(-50%);}

@media (min-width:1024px){.hero-flank{display:block;}}
@media (max-width:1023px){
  .mark-stack{width:188px;}
  .mark-row .hero-flank{top:94px;}
}
@media (max-width:600px){
  .hero{min-height:auto;padding:var(--spacing-8) 0 var(--spacing-10);}
  .mark-stack{width:140px;margin-bottom:var(--spacing-5);}
}

/* ============================================================
   MOBILE MENU — §4 requires a MENU control below 1024px
   ============================================================ */
.nav-toggle{display:none;}
.nav-panel{display:none;}
@media (max-width:1023px){
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding:10px 20px;margin-left:auto;
    background:transparent;border:var(--border-hairline) solid var(--color-parchment);
    border-radius:var(--radius-pill);
    font-family:var(--font-numeric);font-size:var(--text-control);
    text-transform:uppercase;letter-spacing:.06em;color:var(--color-parchment);
    cursor:pointer;
    transition:border-color var(--motion-fast) var(--motion-ease);
  }
  .nav-toggle:hover{border-color:var(--color-brass);}
  .nav-inner > .btn-ghost{display:none;}
  .nav-panel{
    display:block;position:fixed;inset:0;z-index:80;
    background:var(--color-iron);
    padding:var(--spacing-6);
    opacity:0;visibility:hidden;
    /* Visibility is stepped, not eased: held through the fade-out on close,
       flipped instantly on open. Transitioning it over the full duration
       left the panel visibility:hidden for the first frames, and a hidden
       element cannot take focus — so the menu opened with the reader's
       focus still on the toggle behind it. */
    transition:opacity var(--motion-base) var(--motion-ease),
               visibility 0s linear var(--motion-base);
    overflow-y:auto;
  }
  .nav-panel[data-open="true"]{
    opacity:1;visibility:visible;
    transition:opacity var(--motion-base) var(--motion-ease),visibility 0s;
  }
  .nav-panel-head{display:flex;justify-content:flex-end;margin-bottom:var(--spacing-10);}
  .nav-panel ul{list-style:none;padding:0;margin:0;}
  .nav-panel li{border-bottom:var(--border-hairline) solid var(--color-slate);}
  .nav-panel a{
    display:flex;align-items:center;min-height:64px;
    font-family:var(--font-body);font-size:var(--text-subhead);
    color:var(--color-parchment);text-decoration:none;
  }
  .nav-panel .btn-solid{margin-top:var(--spacing-8);width:100%;}
}

/* ============================================================
   REDUCED MOTION — everything final, all pins released.
   The page must be complete with no motion at all.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sp-char{transform:none;opacity:1;transition:none;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .mark-rule{transform:scaleX(1);transition:none;}
  .mark-battlement,.mark-columns,.mark-tower{clip-path:none!important;}
  .mark-flag,.mark-star{opacity:1;transform:none;transition:none;}
  .hero-flank .micro{opacity:1;transition:none;}
  [data-pin]{height:auto!important;}
  [data-pin] > *{position:static!important;}
}

/* Flank row is a zero-height ruler placed at the mark's vertical centre,
   so the labels sit level with the mark rather than across the headline. */
.mark-row{position:relative;width:100%;height:0;}
.mark-row .hero-flank{top:90px;transform:translateY(-50%);}
@media (max-width:1023px){.mark-row .hero-flank{top:70px;}}

/* Without JavaScript the MENU control cannot open its panel, so the panel
   must not be the only route to navigation. Fall back to inline links. */
@media (max-width:1023px){
  html:not(.js) .nav-links{
    display:flex;flex-wrap:wrap;gap:var(--spacing-2) var(--spacing-5);
    width:100%;margin:var(--spacing-3) 0 0;
  }
  html:not(.js) .nav-inner{flex-wrap:wrap;}
  html:not(.js) .nav-toggle{display:none;}
  html:not(.js) .nav-panel{display:none;}
}

/* Preview artifact — a real screenshot, rendered sharp. Never blurred, never
   tilted into a device mockup (DESIGN.md §6). */
.artifact-shot{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}

/* ============================================================
   PRINT — the legal pages are the ones people actually print.
   The screen canvas is Iron with Parchment text, which prints as a
   near-blank page: browsers drop background colours by default, leaving
   pale text on white. Repointing the tokens is enough to fix every
   surface at once, because everything downstream reads them.
   ============================================================ */
@media print{
  :root{
    --surface-canvas:#FFFFFF;
    --surface-card:#FFFFFF;
    --surface-card-hover:#FFFFFF;
    --surface-system:#FFFFFF;
    --text-primary:#111111;
    --text-secondary:#444444;
    --text-accent:#5A4A2E;
    --border-default:#BBBBBB;
    --border-emphasis:#888888;
  }
  body{background:#FFFFFF;color:#111111;}

  /* Chrome that means nothing on paper. */
  .skip-link,.promo-banner,.system-strip,.nav,.nav-panel,.nav-toggle,
  .footer-links,.btn-solid,.btn-ghost,.hero-actions{display:none!important;}

  /* Reclaim the screen's vertical rhythm; paper has its own. */
  section{padding:var(--spacing-6) 0;}
  .page-head{padding:var(--spacing-4) 0 var(--spacing-6);}
  .wrap{max-width:none;padding:0;}

  /* Keep a heading with the text it introduces, and a clause intact. */
  h1,h2,h3{break-after:avoid;page-break-after:avoid;}
  .card,.tier,.terms li,table,.provenance{break-inside:avoid;page-break-inside:avoid;}

  /* A printed policy loses every destination unless the URL is spelled out. */
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all;}

  .table-wrap{overflow:visible;border-color:var(--border-default);}
  table{min-width:0;}
  .artifact-shot{max-height:14cm;object-fit:contain;}
}

/* ============================================================
   PROMOTIONAL PRICING — FALL2026, expires 31 October 2026
   The struck figure is the genuine regular price; the large figure
   is what checkout actually charges. Remove this block and the
   .tier-price-* / .price-was-inline markup together at expiry.
   ============================================================ */
/* Charged price and anchor sit on one baseline: the discount reads as a
   comparison rather than as two unrelated numbers stacked up. */
.tier-price{
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:12px;margin:0 0 var(--spacing-3);
}
.tier-price-now{display:inline-block;}
/* <s> carries "no longer accurate" semantically. Screen readers do not
   announce it, so each figure also carries an sr-only label — otherwise
   the card reads aloud as "499 699" with no indication which is charged. */
.tier-price-was{
  position:relative;
  font-size:28px;line-height:1;letter-spacing:-.01em;
  color:var(--color-stone);opacity:.7;
  text-decoration:none;          /* replaced by the diagonal rule below */
}
/* 3px, not a hairline: at devicePixelRatio 1 a 2px diagonal all but
   disappeared against the card. Decorative — the <s> and the sr-only
   label carry the meaning, so losing it costs nothing to a screen reader. */
.tier-price-was::after{
  content:"";position:absolute;left:-8%;right:-8%;top:45%;
  height:3px;border-radius:2px;
  background:var(--color-brass-raised);
  transform:rotate(-10deg);
}
/* Solid brass, dark text: 5.7:1, and it carries at a glance. The outlined
   version read as a caption at real scale. */
.tier-save{
  /* A direct flex child of .tier stretches by default, which turned the
     badge into a full-width stripe. Shrink it to its text. */
  display:inline-block;align-self:flex-start;
  background:var(--color-brass);color:var(--color-iron);
  border-radius:var(--radius-sharp);
  padding:6px 12px;margin:0 0 var(--spacing-4);
  font-family:var(--font-numeric);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}
.tier-recurring .free-month{color:var(--text-primary);}
/* A readable sentence. The deadline is a real published date, not
   manufactured scarcity, so it does not need to shout — but at 11px
   uppercase it read as fine print and wrapped mid-phrase. */
.promo-deadline{
  font-family:var(--font-body);font-size:15px;line-height:1.5;
  text-transform:none;letter-spacing:0;
  color:var(--text-secondary);
  margin:var(--spacing-4) 0 0;max-width:52ch;
}
.promo-deadline strong{color:var(--color-brass-raised);font-weight:600;}
/* Inline variant for prices inside a sentence or a table cell. */
.price-was-inline{
  position:relative;text-decoration:none;color:var(--text-secondary);
}
.price-was-inline::after{
  content:"";position:absolute;left:-7%;right:-7%;top:46%;
  height:2px;background:var(--color-brass-raised);transform:rotate(-9deg);
}
@media print{
  .tier-price-was::after,.price-was-inline::after{background:#000;}
}