/* ============================================================================
   currency.css · the Carcin Currency Visual System
   ----------------------------------------------------------------------------
   Spec:      specs/brand/003-currency-visual-system.md
   Rollout:   specs/brand/004-currency-rollout.md  (extracted in PR 1)
   Reference: public/redesign/v4-signal.html (homepage)
              public/redesign/v4-brand.html  (brand library)

   Extracted mechanically from the two reference implementations: this file is
   the exact set of rules both files carried identically, in v4-signal's
   original order. Page-specific rules stay inline in each page's <style>.

   Cascade contract: this sheet is linked in <head>, BEFORE each page's inline
   <style>. That was verified safe at extraction time - no page-specific rule
   originally preceded a shared rule it shares a selector with, so linking here
   preserves the original cascade order exactly. If you add a rule here that a
   page already defines inline, the PAGE wins. That is intended.

   A page that adopts this system loads currency.css and does NOT load
   brand.css. Gate: grep -rnE 'href=.?/?brand\.css' public/ --include='*.html'

   Gold is banned. --money-gold / --money-gold-sh are defined but inert; do not
   consume them. See spec 003, "Risks".

   The reduced-motion guard here is load-bearing and its !important is not
   stylistic. See PR 00 and spec 003 "Motion palette" before touching it.
   ============================================================================ */

/* =====================================================================
   V4 · SIGNAL — full homepage.
   One committed poster system: flat amber field, flat ink field,
   flat paper field. Enormous type, hairline rules, zero decoration.
   The mark appears cropped and huge exactly twice.
   ===================================================================== */
*,*::before,*::after {box-sizing:border-box;margin:0;padding:0}

:root {
  /* --- CURRENCY PALETTE I · Federal Reserve Note (parchment + intaglio green) --- */
  --parchment-hi:#FAF8F0;
  --parchment:#F0EBCF;
  --parchment-sh:#E5E0C0;
  --parchment-dp:#D4CEAA;
  --money-green-lt:#C8DFA8;
  --money-green:#85BB65;
  --money-green-mid:#4A7A3A;
  --money-green-dp:#2D5C38;
  --money-ink:#1B3020;
  --money-ribbon-hi:#C2D9F0;
  --money-ribbon:#5A8EC8;
  --money-ribbon-dp:#2B5B8E;
  --money-ribbon-sh:#1A3A60;
  --money-copper-hi:#E8A040;
  --money-copper:#C87828;
  --money-shifted:#3A7A30;
  --money-uv:#E878A8;
  --money-gold:#E8E8D8;
  --money-gold-sh:#A88030;
  --money-fiber:#E8E8D8;
  /* --- CURRENCY PALETTE II · Plaid BESK arc (space money) --- */
  --space-magenta:#983792;
  --space-purple:#844097;
  --space-deep-purple:#6C347E;
  --space-violet:#544891;
  --space-indigo:#3D4E91;
  --space-navy:#2D3978;
  --space-teal-blue:#256994;
  --space-deep-teal:#1D5B82;
  --space-bg:#0a1628;

  /* ------------------------------------------------------------------------
     THE SPACE BAND. Every hero and final-CTA background on the site resolves
     to this one token, so changing the space substrate is a one-line edit here
     rather than a hunt through three stylesheets.

     Currently: near-black, so the starfield and the mark read clearly against
     it. Swap the value to change every space band on every page at once.

     The Plaid arc it replaced, if you want it back:
       radial-gradient(120% 120% at 12% 18%,
         var(--space-magenta) 0%, var(--space-purple) 14%, var(--space-deep-purple) 26%,
         var(--space-violet) 40%, var(--space-indigo) 54%, var(--space-navy) 66%,
         var(--space-teal-blue) 80%, var(--space-deep-teal) 90%, var(--space-bg) 100%)
     ------------------------------------------------------------------------ */
  --space-band:radial-gradient(ellipse 120% 120% at 50% 35%,
    #141a26 0%, #0b0f18 45%, #05070c 75%, #000 100%);
  --space-light-pink:#E4B3EC;
  --space-light-purple:#C8A8EE;
  --space-light-teal:#A2C0EC;
  --space-periwinkle:#D4C8F8;
  /* --- Signal role tokens, reassigned to currency ---
     Names kept for continuity; the values now speak money. `--field` (the
     "bright" band) is parchment; `--ink` is engraved intaglio green;
     `--paper` is edge-highlight parchment. Bands override their own bg
     below — the hero-class amber band becomes the space-money moment. */
  --field:var(--parchment);
  --ink:var(--money-ink);
  --ink-soft:rgba(27,48,32,.62);
  --paper:var(--parchment-hi);
  --paper-soft:rgba(250,248,240,.66);
  --sans:'Cabinet Grotesk',sans-serif;
}

@keyframes oviShift {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@keyframes ribbonShimmer {0%{background-position:200% 50%}100%{background-position:-100% 50%}}

@keyframes plaidShift {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@keyframes plaidGlow {0%,100%{background-position:30% 70%}50%{background-position:70% 30%}}

@media (prefers-reduced-motion:reduce) {
  /* Reduced-motion guard, by the animated elements' REAL selectors.
     This block previously listed .ovi-swipe/.ribbon-swipe/.plaid-hero/
     .plaid-radial, none of which exist on any element, so plaidGlow and
     ribbonShimmer ran unguarded.

     !important is required, not stylistic: the starfield's animation is set
     by `.starfield .s1` (specificity 0,2,0), which outranks the plain
     `.starfield i` guard further down (0,1,1). Without !important the guard
     silently loses the cascade.

     .tier--pro::before is a pseudo-element, so it is invisible to any
     getComputedStyle() check over real elements. It must be listed here
     explicitly or the ribbon shimmer keeps running unnoticed. */
  .band--amber,
  .starfield i,.starfield .s1,.starfield .s2,.starfield .s3,
  .tier--pro::before {animation:none !important}
}

html {scroll-behavior:smooth}

body {
  font-family:var(--sans);
  background:var(--parchment);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.wrap {max-width:1400px;margin:0 auto;padding-left:36px;padding-right:36px}

/* ---- bands ---- (currency retone)
   band--amber is the SPACE MONEY band: deep radial magenta→teal→space navy
     with the plaid glow drifting diagonally. This is the identity moment.
   band--ink is the VAULT band: deep engraved intaglio green, dollar-green
     type; where money-body reads like the inside of a bill.
   band--paper is the PARCHMENT band: real currency-paper cream with
     engraved green ink, where prices and copy sit like they're printed. */
.band {position:relative;overflow:clip}

.band--amber {
  /* Was accidentally repainted in money-green by a scripted edit in the
     universal-header commit. It is the SPACE band, per the comment above. */
  background:var(--space-band);
  background-size:200% 200%;
  animation:plaidGlow 18s ease-in-out infinite;
  color:var(--parchment-hi);
}

.band--amber::after {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(10,22,40,.45) 100%);
}

.band--ink {background:var(--money-ink);color:var(--money-green-lt)}

.band--paper {background:var(--parchment-hi);color:var(--ink)}

/* Sections butt directly against each other with no hairline between them. */
.band+.band {border-top:0}

/* ---- section head pattern ---- */
.b-head {padding:56px 0 40px;position:relative;z-index:2}

.b-kicker {
  font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:14px;
}

.band--ink .b-kicker {color:var(--money-green)}

.band--amber .b-kicker {color:var(--space-light-purple)}

.b-title {
  font-weight:800;
  font-size:clamp(34px,4.6vw,68px);
  line-height:.98;letter-spacing:-0.025em;
  max-width:20ch;
}

.b-title .soft {color:var(--ink-soft)}

.band--ink .b-title .soft {color:rgba(200,223,168,.6)}

.band--amber .b-title .soft {color:var(--space-periwinkle);opacity:.7}

/* ---- nav ---- */
.topbar {border-bottom:2px solid var(--money-ink);position:sticky;top:0;z-index:40;background:var(--parchment-hi)}

header.tb {
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 36px;max-width:1400px;margin:0 auto;
}

.lockup {display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--money-ink)}

.lockup svg {width:32px;height:32px}

/* Scoped to the header. As bare element selectors these hit EVERY <nav>
   landmark on every page: the new tables of contents on /terms, /privacy and
   /docs came out as side-by-side pill rows with nowrap, because a TOC is also
   a <nav>. Scoping is the fix; the markup was right. */
.topbar nav,.site-nav {display:flex;gap:2px}

.topbar nav a,.site-nav a {
  font-size:14px;font-weight:600;color:var(--money-ink);text-decoration:none;
  padding:9px 13px;border-radius:100px;white-space:nowrap;
}

.topbar nav a:hover,.site-nav a:hover {background:var(--money-ink);color:var(--money-green-lt)}

.hero h1 {max-width:16ch}

.hero .sub {max-width:60ch}

/* ---- the ascent chart · now on its own parchment row
   A printed statement of the growth sequence: parchment substrate,
   intaglio-green drafting grid, engraved-green plot. Ink corner tags
   like the edge globe frame. */
.plot-frame {
  position:relative;
  border:2px solid var(--money-ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(27,48,32,.08) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(27,48,32,.08) 31px 32px),
    var(--parchment-hi);
  padding:22px 18px 12px;
  display:flex;flex-direction:column;
  color:var(--money-ink);
}

.plot-frame--standalone {margin:0 auto;max-width:1120px}

.plot-tag {
  position:absolute;z-index:2;padding:8px 12px;
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--money-ink);background:var(--parchment-hi);
  border:2px solid var(--money-ink);
}

.plot-tag--tl {top:-2px;left:-2px;border-left:0;border-top:0}

.plot-tag--tr {top:-2px;right:-2px;border-right:0;border-top:0;color:var(--money-green-mid)}

.plot {position:relative;flex:1;min-height:420px}

.plot svg {position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.plot-caption {
  border-top:2px solid var(--money-ink);margin-top:14px;padding:10px 4px 2px;
  display:flex;justify-content:space-between;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--money-ink);
}

.plot-caption span:last-child {color:var(--money-green-mid)}

.traj {fill:none;stroke:var(--money-green-dp);stroke-width:1.6;stroke-dasharray:1 7;stroke-linecap:round;opacity:.55}

.traj-run {fill:none;stroke:var(--money-green-dp);stroke-width:1.6;stroke-dasharray:1 7;stroke-linecap:round;animation:dash 30s linear infinite}

@keyframes dash {to{stroke-dashoffset:-400}}

@media (prefers-reduced-motion:reduce) {.traj-run{animation:none}}

.wp circle {fill:var(--parchment-hi);stroke:var(--money-ink);stroke-width:2}

.wp.hit circle {fill:var(--money-green-dp);stroke:var(--money-ink)}

.wp text {
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.08em;
  fill:rgba(27,48,32,.55);text-transform:uppercase;
}

.wp text.t {fill:var(--money-ink)}

.axis {stroke:var(--money-ink);stroke-width:1;opacity:.4}

.axis-lab {font-family:var(--sans);font-size:9.5px;font-weight:700;fill:rgba(27,48,32,.5);letter-spacing:.08em}

.craft {color:var(--money-ink)}

.craft .puff {fill:var(--money-green-mid)}

/* =================== EDGE GLOBE (schematic on parchment) =================== */
.globe-frame {
  position:relative;margin-top:28px;
  border:2px solid var(--money-ink);
  height:520px;overflow:hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(27,48,32,.08) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(27,48,32,.08) 31px 32px),
    linear-gradient(135deg, var(--parchment-hi), var(--parchment) 60%, var(--parchment-sh));
  color:var(--money-ink);
}

.globe-frame canvas {position:absolute;inset:0;width:100%;height:100%;display:block}

.globe-tag {
  position:absolute;z-index:2;padding:8px 12px;
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--money-ink);background:var(--parchment-hi);
  border:2px solid var(--money-ink);
  display:inline-flex;align-items:center;gap:8px;
}

.globe-tag--tl {top:-2px;left:-2px;border-left:0;border-top:0}

.globe-tag--tr {top:-2px;right:-2px;border-right:0;border-top:0}

.globe-tag--bl {bottom:-2px;left:-2px;border-left:0;border-bottom:0;color:var(--money-green-mid)}

.globe-tag--br {bottom:-2px;right:-2px;border-right:0;border-bottom:0;color:var(--money-green-mid)}

.globe-dot {width:8px;height:8px;border-radius:50%;background:var(--money-green-dp);animation:globePulse 2s ease-in-out infinite;display:inline-block}

@keyframes globePulse {0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

@media (prefers-reduced-motion:reduce) {.globe-dot{animation:none}}

.kicker {
  font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:22px;
}

h1 {
  font-weight:800;
  font-size:clamp(52px,8vw,128px);
  line-height:.94;letter-spacing:-0.03em;
  max-width:11ch;margin-bottom:30px;
}

/* Hero copy sits on the space band. Kickers, headline, sub — reset to parchment tones. */
.band--amber .kicker {color:var(--space-light-pink)}

.band--amber h1 {color:var(--parchment-hi)}

/* Highlighted word: the Plaid canonical light-on-dark gradient
   (pink → purple → teal). This is the palette's own logo treatment. */
h1 .under {
  background:linear-gradient(90deg, var(--space-light-pink) 0%, var(--space-light-purple) 50%, var(--space-light-teal) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.sub {
  font-size:clamp(16px,1.5vw,19px);font-weight:500;line-height:1.6;
  color:var(--ink-soft);max-width:52ch;margin-bottom:44px;
}

.band--amber .sub {color:var(--space-periwinkle);opacity:.9}

.sub strong {color:var(--ink);font-weight:700}

.band--amber .sub strong {color:var(--parchment-hi);opacity:1}

/* The audit input becomes the "check" — parchment with money-ink border on space. */
.audit {
  display:flex;gap:0;max-width:520px;
  border:2px solid var(--money-ink);background:var(--parchment-hi);
  box-shadow:0 24px 60px -20px rgba(10,22,40,.65);
}

.audit input {
  flex:1;min-width:0;background:transparent;border:0;outline:none;border-radius:0;
  font-family:var(--sans);font-size:18px;font-weight:600;color:var(--money-ink);
  padding:16px 18px;
}

.audit input::placeholder {color:rgba(27,48,32,.4);font-weight:500}

/* Solid ink CTA — the check-signature block. No gradient, no shift. */
.go {
  flex-shrink:0;width:62px;border:0;border-left:2px solid var(--money-ink);
  background:var(--money-ink);color:var(--money-green-lt);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}

.go:hover {background:#0d1a10}

.go svg {transition:transform .15s ease}

.go:hover svg {transform:translateX(4px)}

.hint {margin-top:14px;font-size:13px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em}

.band--amber .hint {color:var(--space-periwinkle)}

/* Bottom-of-hero strip — was a stark ink band, now the fiber-thread strip. */
.strip {
  border-top:2px solid var(--money-ink);
  display:flex;justify-content:space-between;gap:20px;
  padding:14px 36px;position:relative;z-index:2;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--money-ink);color:var(--money-fiber);
}

.strip span {white-space:nowrap}

.strip span+span {color:var(--money-green-lt)}

/* =================== PAIN (vault: intaglio green) =================== */
.pain-grid {
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(200,223,168,.22);
}

.pain {padding:44px 34px 52px}

.pain+.pain {border-left:1px solid rgba(200,223,168,.22)}

.pain .n {
  font-weight:800;color:var(--money-green);
  font-size:clamp(64px,7.5vw,120px);line-height:.95;letter-spacing:-0.03em;
  margin-bottom:16px;
  text-shadow:0 0 24px rgba(133,187,101,.25);
}

.pain .n small {font-size:.4em;font-weight:700}

.pain .s {font-size:17px;font-weight:600;line-height:1.45;margin-bottom:14px;max-width:40ch /* was 24ch: a real citation stacked into eight lines beside the numeral */;color:var(--money-fiber)}

.pain .src a {
  font-size:12.5px;font-weight:600;color:rgba(200,223,168,.7);
  text-decoration:underline;text-underline-offset:4px;
}

.pain .src a:hover {color:var(--money-green)}

.pain-foot {
  border-top:1px solid rgba(200,223,168,.22);
  padding:16px 0 52px;text-align:right;
}

.pain-foot a {
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--money-green);text-decoration:none;
}

.pain-foot a:hover {text-decoration:underline;text-underline-offset:4px}

/* =================== HOW (space band) =================== */
.how-grid {
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-bottom:72px;gap:32px;
}

.how {padding:6px 6px 8px;position:relative;color:var(--parchment-hi)}

.how .n {
  font-weight:800;font-size:clamp(56px,5.6vw,92px);line-height:1;letter-spacing:-0.03em;
  color:transparent;-webkit-text-stroke:2px var(--space-light-pink);
  margin-bottom:18px;
}

.how h3 {font-weight:800;font-size:21px;line-height:1.1;letter-spacing:-0.015em;margin-bottom:12px;max-width:16ch;color:var(--parchment-hi)}

.how p {font-size:15px;font-weight:500;line-height:1.6;color:var(--space-periwinkle)}

/* =================== VALUE PROPS (space, big statements) =================== */
.vp-list {margin-bottom:72px;border-top:2px solid rgba(228,179,236,.4)}

.vp {
  display:flex;align-items:baseline;gap:26px;
  padding:26px 4px;border-bottom:2px solid rgba(228,179,236,.4);
}

.vp .i {
  font-weight:800;font-size:15px;letter-spacing:.08em;flex-shrink:0;
  width:44px;color:var(--space-light-pink);
}

.vp p {
  font-weight:800;font-size:clamp(20px,2.6vw,34px);letter-spacing:-0.02em;line-height:1.15;
  color:var(--parchment-hi);
}

.vp p span {color:var(--space-periwinkle);font-weight:700;opacity:.7}

/* =================== INDUSTRIES (parchment) =================== */
.ind-grid {display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--money-ink);margin-bottom:72px;background:var(--parchment-hi)}

a.ind {
  display:flex;flex-direction:column;text-decoration:none;color:var(--money-ink);
  padding:26px 26px 30px;min-height:190px;
  border-right:1px solid rgba(27,48,32,.22);border-bottom:1px solid rgba(27,48,32,.22);
  transition:background .12s ease,color .12s ease;
}

.ind-grid a.ind:nth-child(3n) {border-right:0}

.ind-grid a.ind:nth-child(n+4) {border-bottom:0}

a.ind:hover {background:var(--money-ink);color:var(--money-green-lt)}

a.ind h3 {font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.02em;margin-bottom:10px}

a.ind p {font-size:14.5px;font-weight:500;line-height:1.55;color:var(--money-green-mid);max-width:30ch}

a.ind:hover p {color:rgba(200,223,168,.75)}

a.ind .arrow {margin-top:auto;padding-top:16px}

a.ind .arrow svg {display:block}

a.ind.all {background:var(--money-green);color:var(--money-ink)}

a.ind.all:hover {background:var(--money-ink);color:var(--money-green)}

/* =================== CASES (vault) =================== */
.case-grid {display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(200,223,168,.22)}

.case {padding:38px 34px 46px;display:flex;flex-direction:column}

.case+.case {border-left:1px solid rgba(200,223,168,.22)}

.case .cl {
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--money-green);margin-bottom:14px;
}

.case h3 {
  font-weight:800;font-size:clamp(26px,2.8vw,40px);letter-spacing:-0.02em;line-height:1;
  margin-bottom:16px;color:var(--money-fiber);
}

.case p {font-size:14px;font-weight:500;line-height:1.6;color:rgba(200,223,168,.7);margin-bottom:22px}

.case-metrics {display:flex;gap:0;border-top:1px solid rgba(200,223,168,.22);margin-top:auto}

.cm {flex:1;padding:14px 12px 0}

.cm+.cm {border-left:1px solid rgba(200,223,168,.22)}

.cm .v {font-weight:800;font-size:22px;color:var(--money-green);letter-spacing:-0.01em}

.cm .k {font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(200,223,168,.7);margin-top:4px;line-height:1.4}

.case-foot {
  border-top:1px solid rgba(200,223,168,.22);
  padding:20px 0 56px;text-align:center;
  font-size:16px;font-weight:500;color:rgba(200,223,168,.7);
}

.case-foot strong {color:var(--money-fiber);font-weight:700}

/* =================== PRICING · 3-tier (parchment note) ===================
   Three tiers arranged like a set of banknotes: engraved-green amount,
   feature list underneath, ink CTA at the foot. The Pro tier is featured
   with the ribbon shimmer along its top edge (the 3D security thread)
   and a gold "Most popular" seal notching over the top border. */
.tier-grid {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border:2px solid var(--money-ink);
  margin-bottom:32px;background:var(--parchment-hi);
}

.tier {
  padding:36px 30px 30px;position:relative;
  display:flex;flex-direction:column;
  border-right:2px solid var(--money-ink);
  min-height:520px;
}

.tier:last-child {border-right:0}

.tier--pro {background:var(--parchment)}

.tier--pro::before {
  content:'';position:absolute;top:-2px;left:-2px;right:-2px;height:6px;
  background:linear-gradient(90deg, var(--money-ribbon-sh) 0%, var(--money-ribbon) 25%, var(--money-ribbon-hi) 50%, var(--money-ribbon) 75%, var(--money-ribbon-sh) 100%);
  background-size:200% 100%;
  animation:ribbonShimmer 12s linear infinite;
  z-index:2;
}

.tier-seal {
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--money-ink);color:var(--money-green-lt);
  padding:6px 14px;border:2px solid var(--money-ink);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  z-index:3;white-space:nowrap;
}

.tier-hd {margin-bottom:22px;padding-top:6px}

.tier--pro .tier-hd {padding-top:14px}

.tier-name {
  font-weight:800;font-size:26px;letter-spacing:-0.01em;color:var(--money-ink);
  margin-bottom:4px;line-height:1;
}

.tier-tag {
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--money-green-mid);
}

.tier-amt {
  font-weight:800;line-height:.9;letter-spacing:-0.04em;
  font-size:clamp(48px,5.6vw,84px);
  color:var(--money-ink);
  margin-bottom:6px;
}

.tier-amt span {font-size:.28em;font-weight:700;letter-spacing:-0.01em;color:var(--money-green-mid);-webkit-text-fill-color:var(--money-green-mid)}

.tier-hint {
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--money-green-mid);
  margin-bottom:26px;
}

.tier-feats {
  list-style:none;margin:0 0 30px;padding:0;
  border-top:1px solid rgba(27,48,32,.18);
}

.tier-feats li {
  padding:12px 0 12px 26px;border-bottom:1px solid rgba(27,48,32,.10);
  font-size:14.5px;font-weight:500;line-height:1.4;color:var(--money-green-dp);
  position:relative;
}

.tier-feats li:last-child {border-bottom:0}

.tier-feats li::before {
  content:'';position:absolute;left:0;top:16px;
  width:14px;height:8px;
  border-left:2px solid var(--money-green-mid);
  border-bottom:2px solid var(--money-green-mid);
  transform:rotate(-45deg);
}

.tier-cta {
  margin-top:auto;
  display:inline-block;
  font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--money-ink);text-decoration:none;
  padding:14px 20px;border:2px solid var(--money-ink);
  background:transparent;
  text-align:center;
  transition:background .12s ease, color .12s ease;
}

.tier-cta:hover {background:var(--money-ink);color:var(--money-green-lt)}

.tier--pro .tier-cta {background:var(--money-ink);color:var(--money-green-lt)}

.tier--pro .tier-cta:hover {background:var(--money-green-dp)}

/* Pro's CTA breaks the fill/outline pair by using the hero's arrow-icon
   button at tier scale — a physical object, not another text pill. */
.tier-pro-cta {
  margin-top:auto;display:flex;flex-direction:column;align-items:center;
  gap:14px;padding-top:14px;
}

.tier-cta-icon {
  width:72px;height:72px;border-radius:50%;
  background:var(--money-ink);color:var(--money-green-lt);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;cursor:pointer;
  transition:background .12s ease,transform .18s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 12px 24px -8px rgba(27,48,32,.4);
}

.tier-cta-icon:hover {transform:translateY(-2px);background:var(--money-green-dp)}

.tier-cta-icon:active {transform:translateY(0) scale(.97)}

.tier-cta-icon svg {transition:transform .15s ease}

.tier-cta-icon:hover svg {transform:translateX(3px)}

.tier-cta-label {
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--money-ink);
}

.tier-foot {
  text-align:center;font-size:14px;font-weight:500;color:var(--money-green-mid);
  padding-bottom:32px;
}

/* =================== FINAL CTA (space) =================== */
.final {position:relative;padding-top:72px;padding-bottom:88px}

.final .big-mark2 {
  position:absolute;z-index:1;pointer-events:none;
  left:-18vw;bottom:-30%;transform:rotate(-12deg);
  width:52vw;max-width:720px;min-width:360px;aspect-ratio:1;
  color:var(--space-light-pink);opacity:.16;
}

.final .big-mark2 svg {width:100%;height:100%}

.final-inner {position:relative;z-index:2}

.final h2 {
  font-weight:800;font-size:clamp(44px,6.6vw,104px);
  line-height:.94;letter-spacing:-0.03em;max-width:13ch;margin-bottom:18px;
  color:var(--parchment-hi);
}

.final h2 .under {
  background:linear-gradient(90deg, var(--space-light-pink) 0%, var(--space-light-purple) 50%, var(--space-light-teal) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.final .fs {
  font-size:clamp(16px,1.6vw,20px);font-weight:500;color:var(--space-periwinkle);margin-bottom:40px;
}

.final .fs strong {color:var(--parchment-hi);font-weight:700}

/* =================== FOOTER (vault) =================== */
footer.sig-foot {background:var(--money-ink);color:rgba(200,223,168,.7)}

.foot-wrap {max-width:1400px;margin:0 auto;padding:52px 36px 0}

.foot-cols {display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:30px 20px;padding-bottom:44px}

.foot-brand {display:flex;flex-direction:column;gap:14px}

.foot-brand .lk {display:flex;align-items:center;gap:9px;color:var(--money-fiber);text-decoration:none}

.foot-brand .lk svg {width:26px;height:26px;color:var(--money-green)}

.foot-brand p {font-size:13px;font-weight:500;line-height:1.6;max-width:40ch /* was 24ch: a real citation stacked into eight lines beside the numeral */}

.foot-head {
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--money-green);margin-bottom:12px;
}

.foot-col {display:flex;flex-direction:column;gap:1px}

.foot-col a {color:rgba(200,223,168,.7);text-decoration:none;font-size:13.5px;font-weight:500;padding:5px 0}

.foot-col a:hover {color:var(--money-fiber)}

.foot-strip {
  border-top:1px solid rgba(200,223,168,.22);
  display:flex;justify-content:space-between;gap:20px;
  padding:16px 36px;max-width:1400px;margin:0 auto;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

.foot-strip span {white-space:nowrap}

/* =================== SCROLLING SPACESHIP ===================
   Ported from prod index.html (initShip): same stations, easing, and
   velocity-based banked rotation. Signal adaptations: flat ink instead
   of gold glow, flies ABOVE the opaque bands (prod runs below content
   on a transparent cosmic bg), and swaps to amber over ink bands so a
   flat field can never swallow it. */
#carcin-ship {
  position:fixed;top:0;left:0;
  width:64px;height:64px;
  pointer-events:none;z-index:1;
  color:var(--money-ink);
  opacity:0;
  will-change:transform,opacity;
  transform-origin:center;
  transition:color .25s ease;
}

/* --- Mark exhaust twinkle (ported from carcin.ai/brand.css @f1a-c).
   Every ship SVG on the page has three exhaust dots tagged .exhaust;
   each dot flickers on its own 1.8s cycle so no two mark instances
   twinkle in phase. */
@keyframes f1a {0%,100%{opacity:1}15%{opacity:.5}40%{opacity:.9}60%{opacity:.6}80%{opacity:1}}

@keyframes f1b {0%,100%{opacity:.8}20%{opacity:1}50%{opacity:.4}75%{opacity:.9}}

@keyframes f1c {0%,100%{opacity:.6}25%{opacity:1}55%{opacity:.7}80%{opacity:.3}}

.exhaust {fill:currentColor}

.exhaust:nth-of-type(1) {animation:f1a 1.8s ease-in-out infinite}

.exhaust:nth-of-type(2) {animation:f1b 1.8s ease-in-out infinite .3s}

.exhaust:nth-of-type(3) {animation:f1c 1.8s ease-in-out infinite .6s}

@media (prefers-reduced-motion:reduce) {.exhaust{animation:none !important}}

/* --- Starfield backdrop (ported from carcin.ai rich-landing.css).
   Now living on TWO dark band types: the vault (band--ink) AND the
   space-money hero band (band--amber). Stars are cream and money-gold
   inside the vault, cream and space-light-pink over the space band. */
.band--ink, .band--amber {position:relative;overflow:hidden}

.starfield {position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}

.starfield i {position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%;background:transparent}

.starfield .s1 {
  box-shadow:
    6vw 14vh 0 0 #fff, 21vw 6vh 0 -0.5px #E8E8D8, 38vw 22vh 0 0 #fff,
    57vw 9vh 0 -0.5px #fff, 74vw 18vh 0 0 #E8E8D8, 90vw 7vh 0 -0.5px #fff,
    12vw 64vh 0 0 #fff, 84vw 58vh 0 -0.5px #E8E8D8;
  animation:starTwk 4.2s ease-in-out infinite;
}

.starfield .s2 {
  box-shadow:
    11vw 34vh 0 -0.5px #E8E8D8, 29vw 48vh 0 0 #fff, 46vw 31vh 0 -0.5px #fff,
    66vw 42vh 0 0.5px #fff, 81vw 33vh 0 -0.5px #E8E8D8, 94vw 49vh 0 0 #fff,
    4vw 88vh 0 -0.5px #fff, 52vw 72vh 0 0 #E8E8D8;
  animation:starTwk 5.6s ease-in-out infinite .7s;
}

.starfield .s3 {
  box-shadow:
    17vw 79vh 0 0 #fff, 33vw 91vh 0 -0.5px #E8E8D8, 49vw 84vh 0 0 #fff,
    63vw 93vh 0 -0.5px #fff, 77vw 76vh 0 0.5px #E8E8D8, 92vw 87vh 0 -0.5px #fff,
    26vw 16vh 0 -0.5px #fff, 70vw 62vh 0 0 #fff;
  animation:starTwk 3.8s ease-in-out infinite 1.4s;
}

/* Space band gets a pinker star temperature to lean into the plaid arc. */
.band--amber .starfield .s1,
.band--amber .starfield .s2,
.band--amber .starfield .s3 {
  box-shadow:
    6vw 14vh 0 0 #fff, 21vw 6vh 0 -0.5px #E4B3EC, 38vw 22vh 0 0 #fff,
    57vw 9vh 0 -0.5px #A2C0EC, 74vw 18vh 0 0 #E4B3EC, 90vw 7vh 0 -0.5px #fff,
    12vw 64vh 0 0 #fff, 84vw 58vh 0 -0.5px #E4B3EC,
    29vw 48vh 0 0 #fff, 46vw 31vh 0 -0.5px #A2C0EC,
    66vw 42vh 0 0.5px #fff, 81vw 33vh 0 -0.5px #E4B3EC, 94vw 49vh 0 0 #fff,
    17vw 79vh 0 0 #fff, 33vw 91vh 0 -0.5px #A2C0EC, 49vw 84vh 0 0 #fff,
    63vw 93vh 0 -0.5px #fff, 77vw 76vh 0 0.5px #E4B3EC, 92vw 87vh 0 -0.5px #fff;
}

@keyframes starTwk {0%,100%{opacity:1}50%{opacity:.35}}

@media (prefers-reduced-motion:reduce) {.starfield i{animation:none}}

/* Ship sits above the band FIELD but below all content. Every band's
   .wrap (and the between-band strip) opens its own stacking context at
   z:2 so headings, copy, and buttons draw above the ship regardless of
   which band they're in. */
.band > .wrap,
.band > .hero,
.strip,
.foot-strip {position:relative;z-index:2}

#carcin-ship.on-ink {color:var(--money-fiber)}

#carcin-ship svg {width:100%;height:100%;display:block}

@media (max-width:600px) {#carcin-ship{width:44px;height:44px}}

@media (prefers-reduced-motion:reduce) {#carcin-ship{display:none}}

/* =================== FAQ (parchment · buffer between final CTA + footer) ===================
   Native <details> stack. Each row: mono index, question, ink plus icon that
   rotates 45° to become an ×. Open state tints the row soft green. */
.faq {
  max-width:920px;margin:0 auto 28px;
  border-top:2px solid var(--money-ink);
  border-bottom:2px solid var(--money-ink);
}

.faq-row {
  border-bottom:1px solid rgba(27,48,32,.18);
  transition:background .12s ease;
}

.faq-row:last-child {border-bottom:0}

.faq-row[open] {background:linear-gradient(180deg, rgba(133,187,101,.06), transparent 40%)}

.faq-q {
  display:flex;align-items:baseline;gap:22px;
  padding:24px 20px;cursor:pointer;list-style:none;
  font-family:var(--sans);font-weight:700;font-size:20px;
  line-height:1.25;color:var(--money-ink);
  transition:color .12s ease;
}

.faq-q::-webkit-details-marker {display:none}

.faq-q::marker {content:''}

.faq-row:hover .faq-q {color:var(--money-green-dp)}

.faq-num {
  flex-shrink:0;width:38px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.16em;color:var(--money-green-mid);
  padding-top:6px;
}

.faq-text {flex:1;min-width:0}

.faq-icon {
  flex-shrink:0;width:28px;height:28px;position:relative;margin-top:2px;
  border-radius:50%;border:1.5px solid var(--money-ink);
  transition:transform .25s cubic-bezier(0.22,1,0.36,1),background .12s ease;
}

.faq-icon::before,.faq-icon::after {
  content:'';position:absolute;left:50%;top:50%;
  width:12px;height:1.5px;background:var(--money-ink);
  transform:translate(-50%,-50%);
  transition:background .12s ease;
}

.faq-icon::after {transform:translate(-50%,-50%) rotate(90deg)}

.faq-row[open] .faq-icon {transform:rotate(45deg);background:var(--money-ink)}

.faq-row[open] .faq-icon::before,
.faq-row[open] .faq-icon::after {background:var(--money-green-lt)}

.faq-a {
  padding:0 20px 26px 80px;
  font-size:16px;line-height:1.6;color:var(--money-green-dp);
  max-width:78ch;
}

.faq-a strong {color:var(--money-ink);font-weight:700}

/* =================== RESPONSIVE =================== */
@media (max-width:980px) {
  .wrap{padding-left:22px;padding-right:22px}
  header.tb{padding:16px 22px}
  .plot{min-height:340px}
  h1{max-width:none}
  .strip{overflow-x:auto;scrollbar-width:none;padding:14px 22px}
  .strip::-webkit-scrollbar{display:none}
  .pain-grid,.how-grid,.case-grid{grid-template-columns:1fr}
  .pain+.pain{border-left:0;border-top:1px solid rgba(232,232,216,.25)}
  .how+.how{border-left:0;border-top:2px solid var(--ink)}
  .case+.case{border-left:0;border-top:1px solid rgba(232,232,216,.25)}
  .ind-grid{grid-template-columns:1fr 1fr}
  .ind-grid a.ind{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}
  .ind-grid a.ind:nth-child(2n){border-right:0}
  .ind-grid a.ind:nth-child(n+5){border-bottom:0}
  .price{grid-template-columns:1fr;gap:24px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .pain{padding:36px 22px 42px}
  .case{padding:32px 22px 40px}
}

@media (max-width:520px) {
  nav a{padding:8px 9px;font-size:13px}
  nav a:nth-child(n+3){display:none}
  .audit{flex-direction:column}
  .go{width:100%;height:54px;border-left:0;border-top:2px solid var(--ink)}
  .ind-grid{grid-template-columns:1fr}
  .ind-grid a.ind{border-right:0!important;border-bottom:2px solid var(--ink)!important}
  .ind-grid a.ind:last-child{border-bottom:0!important}
  .foot-strip{overflow-x:auto;scrollbar-width:none}
  .vp{gap:14px;padding:20px 2px}
}

/* ============================================================================
   Sitewide primitives · promoted from v4-signal (spec 003 sections 9, 10, 11)
   ----------------------------------------------------------------------------
   These are named in spec 003 as sitewide primitives, and 004 requires the
   kicker variants "at least once per top-level page". They were nevertheless
   missing from this file, because PR 1's extraction only took rules that BOTH
   reference implementations carried identically. Ledger heads, the portrait
   order-break and the stat head exist only in v4-signal, so they were
   classified page-specific and left inline.

   The consequence surfaced when three separate agents each reimplemented them
   from scratch on three different pages. Promoted here so there is one
   definition. If a page needs a variant, extend it here rather than re-declaring.
   ============================================================================ */
.b-head--stat {padding-bottom:24px}

.pain-lead {display:flex;align-items:baseline;gap:26px;margin-bottom:26px;flex-wrap:wrap}

.pain-lead-num {
  font-family:var(--sans);font-weight:800;
  font-size:clamp(72px,10vw,144px);line-height:1;letter-spacing:-0.04em;
  color:var(--money-green);text-shadow:0 0 32px rgba(133,187,101,.3);
}

.pain-lead-num small {font-size:.32em;font-weight:700}

.pain-lead-src {
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--money-green-lt);
  max-width:40ch /* was 24ch: a real citation stacked into eight lines beside the numeral */;line-height:1.55;padding-top:6px;
}

.b-head--ledger .ledger-line {
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:16px 0;border-top:1px solid rgba(200,223,168,.28);border-bottom:1px solid rgba(200,223,168,.28);
  margin-bottom:28px;font-family:'JetBrains Mono',monospace;
}

.ledger-lbl {font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--money-green)}

.ledger-num {font-family:var(--sans);font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--money-green-lt);line-height:.9}

.ledger-txt {font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--money-green-lt)}

.ledger-year {font-size:11px;letter-spacing:.16em;color:rgba(200,223,168,.55)}

.ledger-sep {color:rgba(200,223,168,.3)}

.ledger-file {margin-left:auto;font-size:10px;letter-spacing:.18em;color:rgba(200,223,168,.5);text-transform:uppercase}

.band--photo {position:relative;overflow:hidden;min-height:64vh;display:flex;align-items:flex-end;background:var(--money-ink)}

.portrait-bg {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}

.portrait-scrim {position:absolute;inset:0;background:linear-gradient(to right, rgba(27,48,32,.95) 0%, rgba(27,48,32,.7) 40%, rgba(27,48,32,.15) 100%), linear-gradient(to top, rgba(27,48,32,.85) 0%, transparent 50%)}

.portrait-inner {position:relative;z-index:2;padding-top:88px;padding-bottom:80px}

.portrait-mark {
  display:inline-flex;color:var(--money-green);opacity:.85;
  margin-bottom:22px;
}

.portrait-quote {
  font-family:var(--sans);font-weight:800;
  font-size:clamp(30px,4.4vw,58px);line-height:1.05;letter-spacing:-.025em;
  color:var(--parchment-hi);max-width:22ch;margin:0 0 26px;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}

.portrait-quote em {
  font-style:normal;
  background:linear-gradient(90deg, var(--money-green-lt) 0%, var(--money-green) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.portrait-attr {display:flex;flex-direction:column;gap:6px;max-width:36ch}

.portrait-attr-line {
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--money-green);
}

.portrait-attr-sub {font-size:14px;color:rgba(250,248,240,.78);line-height:1.55}

/* ============================================================================
   Primitives the pages had to invent · promoted (second pass)
   ----------------------------------------------------------------------------
   Eight agents rebuilt 22 pages and independently re-declared these. The drift
   count at the time of promotion: .b-sub in 14 pages, .pain-lead-src in 17,
   .ledger-num in 21. Every one of those is a chance for a page to diverge.
   ============================================================================ */

/* .b-sub is documented in spec 003 section 1 as part of .b-head, but was never
   in this file, so every page that followed the spec got unstyled text. */
.b-sub {
  font-size:17px;font-weight:500;line-height:1.55;
  color:rgba(27,48,32,.7);max-width:62ch;margin-top:14px;
}
.band--ink .b-sub,.band--amber .b-sub{color:rgba(200,223,168,.82)}
.band--amber .b-sub{color:var(--space-periwinkle)}

/* .b-head--ledger was vault-only: .ledger-num/.ledger-txt resolve to
   --money-green-lt, which on parchment is cream on cream. Two pages hit this
   and patched locally before it was noticed. */
.band--paper .ledger-lbl,.band--paper .ledger-year,
.rl-section:nth-of-type(odd) .ledger-lbl,.rl-section:nth-of-type(odd) .ledger-year{
  color:var(--money-green-mid);
}
.band--paper .ledger-num,.band--paper .ledger-txt,.band--paper .ledger-file,
.rl-section:nth-of-type(odd) .ledger-num,
.rl-section:nth-of-type(odd) .ledger-txt,
.rl-section:nth-of-type(odd) .ledger-file{
  color:var(--money-ink);
}
.band--paper .ledger-line,.rl-section:nth-of-type(odd) .ledger-line{
  border-color:rgba(27,48,32,.24);
}

/* The stat lead centres on inner pages, so the figure and its citation must
   stack rather than sit in a ragged flex row. The glow also reads as a green
   halo on parchment. */
.b-head--stat .pain-lead{flex-direction:column;align-items:inherit;gap:6px}
.band--paper .pain-lead-num,.rl-section:nth-of-type(odd) .pain-lead-num{text-shadow:none}

/* The photo band was defined for v4-signal's .band structure only, so every
   adapter page re-declared the same breakout. Third copy existed before this. */
.rl-section.band--photo,.band--photo{padding-bottom:0}


/* ============================================================================
   Universal site header
   ----------------------------------------------------------------------------
   The header must be identical on every page. It was not: the homepage carried
   v4-signal's .topbar (no CTA button) while all 30 other pages carried
   .site-header (with one), so the arrow button appeared and disappeared as you
   moved through the site, and /brand/ had no navigation at all.

   These rules live in currency.css rather than currency-pages.css because the
   homepage loads only currency.css. Putting them in the adapter sheet would
   have left the homepage header unstyled and recreated the split in a new form.

   .topbar is kept as an alias so the v4 reference implementations keep working.
   ============================================================================ */
.site-header,.topbar{
  width:100vw;max-width:none;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:16px max(24px,calc(50vw - 550px));
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  position:sticky;top:0;z-index:100;
  background:var(--parchment-hi);
  border-bottom:1px solid rgba(27,48,32,.14);
}
.site-header .brand-lockup,.topbar .lockup{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;color:var(--money-ink);flex:0 0 auto;
}
.site-header .brand-wordmark,.topbar .word{
  font-family:var(--sans);font-weight:700;font-size:25px;
  letter-spacing:-.025em;color:var(--money-ink);
}
/* The mark scales with the wordmark: 22/19 held the old ratio, so 25px type
   takes a 29px mark. Sized here rather than in markup because the width and
   height attributes are hardcoded on the svg across 32 pages; CSS overrides
   them, so the lockup stays adjustable from one place. */
.site-header .brand-icon,.topbar .lockup svg{
  width:29px;height:29px;flex:0 0 29px;color:var(--money-ink);
}
.site-header .brand-lockup,.topbar .lockup{gap:11px}

.site-nav,.topbar nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.site-nav a,.topbar nav a{
  font-size:13.5px;font-weight:600;color:rgba(27,48,32,.72);
  text-decoration:none;padding:9px 11px;border-radius:3px;line-height:1;
  white-space:nowrap;transition:color .18s,background .18s;
}
.site-nav a:hover,.topbar nav a:hover{color:var(--money-ink);background:rgba(133,187,101,.14)}
.site-nav a[aria-current="page"],.topbar nav a[aria-current="page"]{
  color:var(--money-ink);background:rgba(133,187,101,.18);
}

/* The arrow icon button is the only primary CTA (house rule), so it belongs in
   the header on every page, not just the inner ones. */
.site-header .btn-header-cta{
  width:44px;height:44px;flex:0 0 44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--money-ink);border:0;border-radius:2px;
  color:var(--parchment-hi);text-decoration:none;
  transition:background .18s,transform .18s;
}
.site-header .btn-header-cta:hover{background:var(--money-green-dp);transform:translateY(-1px)}
.site-header .btn-header-cta svg{width:20px;height:20px}
.site-header .btn-header-cta svg path{stroke:var(--parchment-hi)}
.site-header .btn-header-cta svg circle{fill:var(--parchment-hi)}

@media (max-width:640px){
  .site-header,.topbar{padding-top:10px;padding-bottom:10px;gap:10px}
  .site-nav,.topbar nav{
    overflow-x:auto;flex-wrap:nowrap;margin-right:8px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .site-nav::-webkit-scrollbar,.topbar nav::-webkit-scrollbar{display:none}
  .site-nav a,.topbar nav a{padding:8px 9px;font-size:13px}
  .site-header .btn-header-cta{width:38px;height:38px;flex:0 0 38px}
  .site-header .brand-wordmark,.topbar .word{font-size:21px}
  .site-header .brand-icon,.topbar .lockup svg{width:24px;height:24px;flex:0 0 24px}
  .site-header .brand-lockup,.topbar .lockup{gap:9px}
}
