/* ================================================================
   cbi.vu — Vanuatu Citizenship by Investment
   Design system v2. Editorial-grade luxe. Aman × private bank ×
   editorial magazine. Hairline rules, generous whitespace, paper
   grain, magazine-grade numerals.
   ================================================================ */

/* ---------- SELF-HOSTED FONTS ----------
   Latin-subset woff2, served from /fonts. No Google CDN dependency:
   no third-party round-trip, no font-swap flash, nothing phoning home.
   Exotic glyphs (∞, ₿, ₽, ﷼) fall back to the system stacks below. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/instrument-400.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/instrument-400-italic.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif Fallback';src:local('Georgia');size-adjust:75%;}
/* inter-300/500/600.woff2 were byte-identical copies of this same static
   instance; one declaration with a weight range serves all four (saves
   ~145KB on first visit). */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-500.woff2') format('woff2');}

/* ---------- TOKENS ---------- */
:root {
  /* Palette — Volcanic Pacific (dark-default) */
  --ink:           #0C0A09;   /* obsidian — page background + dark dramatic sections */
  --ink-soft:      #16130F;   /* basalt — raised cards/surfaces */
  --ink-strong:    #070605;   /* deepest obsidian — footer well */
  --lagoon:        #15B8A6;   /* crater-lake teal — cool accent */
  --lagoon-fog:    #93B0AA;   /* muted teal-tinted light — on-dark eyebrow/labels */
  --cream:         #F5F1EA;   /* warm off-white — explicit light text on dark; light button bg */
  --paper:         #F5F1EA;   /* volcanic-ash white — light "paper moment" section bg */
  --paper-warm:    #ECE4D8;
  --sand:          #221C16;   /* ash — dark hairline wells (was a light value) */
  --gold:          #C2752E;   /* ember bronze — warm DECORATIVE accent (NOT the CTA) */
  --gold-soft:     #D89A52;
  --gold-ink:      #8A4E1E;   /* ember readable on light paper (AA) */
  --bitcoin:       #F7931A;   /* magma / Bitcoin orange — the ONLY CTA color */
  --error:         #b3261e;
  --rule:          rgba(201,194,186,0.12);
  --rule-strong:   rgba(201,194,186,0.24);
  --rule-light:    rgba(26,23,20,0.12);
  --rule-light-strong: rgba(26,23,20,0.24);
  --text:          #ECE6DD;   /* light body text on obsidian (default) */
  --text-soft:     #C9C2BA;
  --muted:         #9A9089;   /* muted label text — verify AA on obsidian */
  --muted-soft:    #8B817A;
  --muted-light:   rgba(245,241,234,0.60);

  /* New Volcanic Pacific tokens */
  --fg:            #F2ECE3;   /* contextual foreground for headings/emphasis; re-pointed dark inside light sections */
  --paper-ink:     #1A1714;   /* text on light paper sections */
  --deep-sea:      #06403E;   /* cool dark section variant */
  --cobalt:        #7C9BF0;   /* sovereign blue, AA on dark; remapped to #1E40AF on light paper below. orig — official elements only, rationed */
  --cobalt-soft:   #3B5BC7;
  --magma:         #E2571E;   /* molten ember — gradient mid / hovers */
  --magma-deep:    #B23A12;   /* deep lava — pressed/shadow */
  --ember:         rgba(247,147,26,0.14);  /* radial glow wash */
  --line:          rgba(201,194,186,0.12);

  /* Typography */
  --font-display:  'Instrument Serif', 'Instrument Serif Fallback', 'Cormorant Garamond', Georgia, serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Scale (editorial-tuned) */
  --step-xxxs:     0.6875rem;      /* 11 */
  --step-xxs:      0.75rem;        /* 12 */
  --step-xs:       0.8125rem;      /* 13 */
  --step-sm:       0.9375rem;      /* 15 */
  --step-base:     1.0625rem;      /* 17 */
  --step-md:       1.25rem;        /* 20 */
  --step-lg:       1.5rem;         /* 24 */
  --step-xl:       clamp(1.75rem, 2.6vw, 2.25rem);
  --step-2xl:      clamp(2.25rem, 4vw, 3.25rem);
  --step-3xl:      clamp(3rem, 5.5vw, 4.75rem);
  --step-display:  clamp(3.25rem, 8.5vw, 7.5rem);
  --step-monolith: clamp(5rem, 14vw, 12rem); /* magazine-grade numerals */

  /* Spacing */
  --s-1:           0.5rem;
  --s-2:           1rem;
  --s-3:           1.5rem;
  --s-4:           2rem;
  --s-5:           3rem;
  --s-6:           4rem;
  --s-7:           6rem;
  --s-8:           8rem;
  --s-9:           12rem;

  /* Layout */
  --container:        min(1280px, 90vw);
  --container-narrow: min(780px, 88vw);
  --container-editorial: min(960px, 90vw);

  /* Motion */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick:     180ms;
  --dur-mid:       420ms;
  --dur-slow:      900ms;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--step-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--ink);
  font-feature-settings: 'kern', 'liga', 'calt', 'ss01', 'onum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { list-style: none; }

/* Skip link */
.skip-link {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  transform: translateY(calc(-100% - 2rem));
  padding: 0.75rem 1.25rem;
  background: var(--ink); color: var(--cream);
  z-index: 100;
}
.skip-link:focus { transform: translateY(0); }

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

/* Visually hidden, still exposed to assistive tech. For text alternatives
   and screen-reader-only labels (e.g. the map's regional summary). */
.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;
}

::selection { background: var(--bitcoin); color: var(--ink); }

/* Base focus ring for every interactive element. Specificity 0 (:where)
   so the component-specific rings below still win where defined; this
   closes the gaps on <summary>, filter/aria-pressed buttons, and links. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bitcoin);
  outline-offset: 3px;
}

/* Warm black-sand grain — obsidian-toned volcanic ash. Two faint ember/teal
   washes over the obsidian field, plus a barely-there repeating speckle that
   reads as fine basalt grain rather than paper tooth. */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-color: transparent;
  background-image:
    radial-gradient(circle at 17% 23%, rgba(226, 87, 30, 0.05) 0, transparent 35%),
    radial-gradient(circle at 83% 71%, rgba(21, 184, 166, 0.04) 0, transparent 38%),
    radial-gradient(rgba(245, 241, 234, 0.018) 0.5px, transparent 0.5px),
    radial-gradient(rgba(12, 10, 9, 0.6) 0.5px, transparent 0.5px);
  background-size: auto, auto, 3px 3px, 3px 3px;
  background-position: 0 0, 0 0, 0 0, 1.5px 1.5px;
  pointer-events: none;
  z-index: 0;
}
main { position: relative; z-index: 1; }

/* ---------- TYPOGRAPHY ---------- */
.display, .headline, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--fg);
  font-feature-settings: 'kern', 'liga', 'dlig';
}
h1, .display {
  font-size: var(--step-display);
  letter-spacing: -0.028em;
  line-height: 0.98;
}
h2 {
  font-size: var(--step-3xl);
  line-height: 1.05;
  letter-spacing: -0.022em;
}
h3 {
  font-size: var(--step-2xl);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h4 {
  font-size: var(--step-xl);
  line-height: 1.18;
  letter-spacing: -0.012em;
}

.sovereignty-italic {
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Eyebrow — refined editorial label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::before {
  content: '';
  width: 2.25rem; height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.on-dark { color: var(--lagoon-fog); }
.eyebrow.center { justify-content: center; }
.eyebrow.gold { color: var(--gold-ink); }

/* Section heads — composed editorial pair */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 62ch;
  margin-bottom: var(--s-5);
}
.section-head.center { align-items: center; text-align: center; margin-inline: auto; }
.section-head.split {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-5);
  max-width: none;
  flex-wrap: wrap;
}
.section-head .lede {
  font-size: var(--step-md);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 52ch;
  font-weight: 300;
}
@media (max-width: 760px) {
  .section-head.split { flex-direction: column; align-items: flex-start; }
}

/* Body type */
.lead {
  font-family: var(--font-display);
  font-size: var(--step-xl);
  line-height: 1.32;
  color: var(--text-soft);
  letter-spacing: -0.008em;
  font-weight: 400;
}
.body-lg {
  font-size: var(--step-md);
  line-height: 1.65;
  color: var(--text-soft);
  font-weight: 300;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.fine {
  font-size: var(--step-xs);
  color: var(--muted);
  line-height: 1.6;
  font-weight: 300;
}

/* Drop-cap — magazine first-paragraph treatment */
.dropcap::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 4.8em;
  line-height: 0.84;
  padding: 0.08em 0.14em 0 0;
  color: var(--fg);
  font-style: italic;
  font-feature-settings: 'dlig', 'liga';
}

/* ---------- LAYOUT ---------- */
.container       { width: var(--container); margin-inline: auto; }
.container-narrow { width: var(--container-narrow); margin-inline: auto; }
.container-editorial { width: var(--container-editorial); margin-inline: auto; }

.section { padding-block: var(--s-8); }
.section-loose { padding-block: var(--s-9); }
@media (max-width: 760px) {
  .section { padding-block: var(--s-6); }
  .section-loose { padding-block: var(--s-7); }
}

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.bg-cream  { background: var(--cream); }
.bg-paper  { background: var(--paper); }
.bg-ink    { background: var(--deep-sea); color: var(--cream); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: var(--cream); }
.bg-ink .eyebrow { color: var(--lagoon-fog); }
/* Light "paper moment" sections sit on the dark default: re-point the
   contextual foreground + text/rule tokens so contrast auto-corrects and
   the 59 var(--fg) text usages flip to dark ink inside these surfaces. */
.bg-paper, .bg-cream { --fg: var(--paper-ink); --text: #2A251F; --text-soft: #4A443D; --muted: #6B635C; --rule: var(--rule-light); --rule-strong: var(--rule-light-strong); --cobalt: #1E40AF; color: var(--text); }

/* ---------- TRUST STRIP ----------
   Discrete, single-line credentials band. Sits below the sub-hero
   ledger-line on pages where authority signaling matters (program,
   pricing). Mono small-caps, gold accent dot, generous spacing. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.trust-strip .ts-mark {
  color: var(--gold);
  font-size: 1.1em;
  line-height: 1;
}
.trust-strip .ts-sep {
  width: 1px;
  height: 12px;
  background: var(--rule-strong);
}
.trust-strip a { color: var(--fg); }
.trust-strip a:hover { color: var(--gold); }
.trust-strip.on-dark {
  border-bottom-color: var(--rule-light-strong);
  color: var(--muted-light);
}
.trust-strip.on-dark a { color: var(--cream); }
.trust-strip.on-dark .ts-sep { background: var(--rule-light-strong); }

/* Verified-on micro stamp — sits beneath a fact ledger. Subtle,
   just enough to show the file is fresh. */
.verified-stamp {
  font-family: var(--font-mono);
  font-size: var(--step-xxxs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
}
.verified-stamp::before {
  content: '✓';
  color: var(--gold);
  font-size: 1.1em;
  line-height: 1;
}
.verified-stamp.on-dark { color: var(--muted-light); }

/* ---------- LEDGER LINE (single-line letterhead, editorial) ---------- */
.ledger-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ledger-line .ll-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.ledger-line .ll-label {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.ledger-line .ll-val {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  font-style: italic;
  color: var(--fg);
  line-height: 1;
  letter-spacing: -0.01em;
}
.ledger-line.on-dark {
  border-color: var(--rule-light-strong);
}
.ledger-line.on-dark .ll-label { color: var(--muted-light); }
.ledger-line.on-dark .ll-val { color: var(--cream); }

/* ---------- NAVIGATION ---------- */
/* Nav modeled after 21cbi.io: always pinned, always translucent
   paper with backdrop blur, always with a hairline bottom border.
   No transparent→solid scroll toggle — the bar reads the same on
   every page over every background. Matches the parent's
   `bg-surface/80 backdrop-blur-md fixed top-0 w-full z-50
   border-b border-outline-variant/10` posture. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 0.95rem 0;
  background: rgba(12, 10, 9, 0.82);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}
.brand {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: -0.015em;
  line-height: 1;
  font-style: italic;
}
.brand .dot { display: inline-block; width: 4px; height: 4px; background: currentColor; border-radius: 50%; margin-inline: 2px; vertical-align: middle; transform: translateY(-0.35em); }
.brand .vu {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: translateY(-0.4em);
  opacity: 0.75;
  margin-left: 0.25rem;
  font-style: normal;
}
.nav-links {
  display: flex; gap: var(--s-4); align-items: center;
}
.nav-link {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  min-height: 44px;
  display: inline-flex; align-items: center;
  padding: 0 0.3rem;
  transition: color var(--dur-quick) var(--ease-out);
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.65rem; height: 1px;
  background: currentColor; opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--dur-quick), transform var(--dur-quick);
}
.nav-link:hover { color: var(--gold); }
.nav-link:hover::after { opacity: 1; transform: translateY(0); background: var(--gold); }
.nav-link.is-current::after { opacity: 0.5; transform: translateY(0); }
.nav-link:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 4px; }

.nav-cta {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.9rem 1.3rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  min-height: 44px;
  display: inline-flex; align-items: center;
  transition: all var(--dur-quick) var(--ease-out);
}
.nav-cta:hover { background: var(--bitcoin); border-color: var(--bitcoin); color: var(--ink); }
/* The CTA is a pill button, not a text link: suppress the nav-link
   underline so it never draws a line through the button (including the
   is-current and hover states). */
.nav-cta::after { content: none; }

/* Below 900px the inline links fold into the mobile sheet (site.js builds
   it from this same nav), leaving brand · ticker · Menu · Begin. */
.nav-menu-trigger {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(201, 194, 186, 0.20);
  border-radius: 9999px;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-quick), color var(--dur-quick);
}
.nav-menu-trigger:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 900px) {
  .nav-links .nav-link:not(.priority) { display: none; }
  .nav-menu-trigger { display: inline-flex; }
}
@media (min-width: 900.02px) { .mobile-nav-sheet { display: none !important; } }
.mobile-nav-sheet .section-sheet__panel { max-height: 84vh; overflow-y: auto; }
.mobile-nav-sheet .sheet-sub a {
  padding-inline-start: 1.15rem;
  min-height: 42px;
  font-size: var(--step-xxs);
  color: var(--text-soft);
}
.mobile-nav-sheet .sheet-lang-title { margin-top: 1rem; }
.mobile-nav-sheet .sheet-lang-list a { justify-content: flex-start; }

/* ---------- SECTION RAIL (in-page nav: program, pricing) ----------
   A frosted paper-glass panel fixed at the right edge, vertically
   centered, that floats OVER the page's alternating light/dark
   sections (the backdrop blur + border + shadow keep it legible over
   both). Built and wired by /section-nav.js (progressive enhancement,
   injected like the FAB). Desktop states via [data-state] on
   .section-rail: expanded panel -> minimized "Menu" pill -> closed
   (with a slim re-open tab on the edge). Below 1024px the rail is
   replaced by a bottom-left "Sections" trigger + bottom sheet. Active
   section highlighted in gold; collapse state persisted in
   localStorage by the script. Stacking: rail 40 (below nav 50 and the
   FAB modal 60); the mobile sheet sits at 55 (below the FAB modal). */

/* Scroll targets clear the ~75px fixed header when jumped to. */
main section[id] { scroll-margin-top: 100px; }

.section-rail {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 40;
  overflow: hidden;
  display: block;
  font-family: var(--font-mono);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  /* Light frosted-glass panel island floating over the dark page:
     dark text + dark hairlines + dark muted so links read on the ash glass. */
  --fg: var(--paper-ink); --text: #2A251F; --muted: #6B635C;
  --rule: var(--rule-light); --rule-strong: var(--rule-light-strong);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(12, 10, 9, 0.12);
  padding: 0.7rem 0.85rem 0.8rem;
  /* top / width / height are set inline per state by section-nav.js so the
     collapse can MORPH (animate) between the panel and the pill. */
}
/* Transitions enable only after the first paint (.is-ready) so the rail
   appears in place instead of sliding in on load. The morph animates
   position, size, padding, and radius together. */
.section-rail.is-ready {
  transition:
    top 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
    width 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 350ms ease, box-shadow 350ms ease, opacity 300ms ease;
}
@supports not (background: color-mix(in srgb, white, black)) {
  .section-rail { background: rgba(250, 246, 236, 0.95); }
}

/* traffic-light chrome */
.section-rail__chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  transition: opacity 200ms ease;
}
.section-rail__dot {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px/1 var(--font-mono);
  color: var(--muted);
  border: 1px solid var(--rule-strong);
  background: transparent;
  border-radius: 50%;
  flex: 0 0 auto;
  opacity: 0.92;
  transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.section-rail__dot:hover { opacity: 1; color: var(--gold-ink); border-color: var(--gold-ink); }
.section-rail__dot--close::before { content: '\00D7'; }
.section-rail__dot--min::before { content: '\2212'; }
.section-rail__dot:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 2px; }

/* list */
.section-rail__list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  transition: opacity 220ms ease;
}
.section-rail__link {
  display: block;
  text-align: right;
  padding: 0.42rem 0.6rem;
  border-radius: 8px;
  font-size: var(--step-xxxs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
.section-rail__link:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--sand) 40%, transparent);
}
.section-rail__link.is-active {
  color: var(--gold-ink);
  background: color-mix(in srgb, var(--gold) 15%, transparent);
}
.section-rail__link:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 2px; }

/* minimized "Menu" pill: a button overlaying the whole container, only
   interactive in the pill state; the container morphs down to its size and
   turns bitcoin-orange. Hamburger glyph + label, in dark ink. */
.section-rail__pill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  opacity: 0;
  pointer-events: none;
  background: none;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--step-xxxs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity 220ms ease;
}
.section-rail__pill-label { display: inline-block; }
.section-rail__pill-icon { flex: 0 0 auto; margin-top: -1px; }
.section-rail__pill:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 999px; }

/* ---- state switching: the contents cross-fade while the container itself
   morphs via the inline geometry (top/width/height) set by the script ---- */
.section-rail[data-state="pill"] {
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  background: var(--bitcoin);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(12, 10, 9, 0.22), 0 2px 6px rgba(12, 10, 9, 0.14);
}
.section-rail[data-state="pill"] .section-rail__chrome,
.section-rail[data-state="pill"] .section-rail__list { opacity: 0; pointer-events: none; }
.section-rail[data-state="pill"] .section-rail__pill { opacity: 1; pointer-events: auto; }

.section-rail[data-state="closed"] {
  opacity: 0;
  transform: translateX(14px) scale(0.97);
  pointer-events: none;
}

/* ---- closed: slim re-open tab on the screen edge. A separate sibling so it
   stays visible while the rail is faded out. ---- */
.section-rail-reopen {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 60px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid var(--rule);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 10px 30px rgba(12, 10, 9, 0.12);
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease, color var(--dur-quick) var(--ease-out);
}
.section-rail-reopen.is-shown { opacity: 1; pointer-events: auto; }
.section-rail-reopen:hover { color: var(--gold-ink); }
.section-rail-reopen:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 2px; }
.section-rail-reopen .bars { display: flex; flex-direction: column; gap: 3px; }
.section-rail-reopen .bars i { display: block; width: 12px; height: 1.5px; background: currentColor; border-radius: 1px; }
@supports not (background: color-mix(in srgb, white, black)) {
  .section-rail-reopen { background: rgba(250, 246, 236, 0.95); }
}

/* ---- mobile trigger + bottom sheet ---- */
.section-trigger {
  display: none;
  position: fixed;
  left: clamp(1rem, 4vw, 1.5rem);
  bottom: clamp(1rem, 4vw, 1.5rem);
  z-index: 40;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 1.05rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(12, 10, 9, 0.22);
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section-trigger svg { opacity: 0.85; }
.section-trigger:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 3px; }

.section-sheet { position: fixed; inset: 0; z-index: 55; display: none; }
.section-sheet[data-open="true"] { display: block; }
.section-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 9, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.section-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  border-radius: 18px 18px 0 0;
  padding: 0.5rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(12, 10, 9, 0.25);
}
.section-sheet__grip { width: 38px; height: 4px; border-radius: 2px; background: var(--rule-strong); margin: 0.4rem auto 0.7rem; }
.section-sheet__title {
  font-family: var(--font-mono);
  font-size: var(--step-xxxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 0.4rem;
}
.section-sheet__list { display: flex; flex-direction: column; }
.section-sheet__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.section-sheet__list li:last-child a { border-bottom: 0; }
.section-sheet__list a.is-active { color: var(--gold-ink); }
.section-sheet__list a.is-active::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }

/* ---- responsive switch (rail <-> mobile) ---- */
@media (max-width: 1023.98px) {
  .section-rail, .section-rail-reopen { display: none !important; }
  .section-trigger { display: inline-flex; }
}
@media (min-width: 1024px) {
  .section-sheet, .section-trigger { display: none !important; }
}

/* ---- reduced motion: keep the state changes, drop the morph/fade ---- */
@media (prefers-reduced-motion: reduce) {
  .section-rail.is-ready,
  .section-rail__chrome,
  .section-rail__list,
  .section-rail__pill,
  .section-rail__dot,
  .section-rail__link,
  .section-rail-reopen { transition: none; }
}

/* ---------- LANGUAGE PICKER (nav dropdown) ---------- */
.lang-picker {
  position: relative;
  display: inline-block;
}
.lang-trigger {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0 0.6rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  transition: color var(--dur-quick);
}
.lang-trigger:hover { color: var(--gold); }
.lang-trigger:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 4px; }
.lang-trigger .lang-chev {
  width: 10px; height: 10px;
  transition: transform var(--dur-quick);
}
.lang-picker.is-open .lang-trigger .lang-chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  min-width: 180px;
  background: var(--paper);
  /* Light dropdown island: dark ink text + dark hairlines. */
  --fg: var(--paper-ink); --rule-strong: var(--rule-light-strong);
  color: var(--fg);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  padding: 0.4rem;
  list-style: none;
  margin: 0;
  box-shadow: 0 20px 40px -16px rgba(12, 10, 9, 0.25);
  z-index: 51;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-quick), transform var(--dur-quick);
}
.lang-picker.is-open .lang-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-menu li { margin: 0; }
.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: var(--step-sm);
  letter-spacing: normal;
  text-transform: none;
  color: var(--fg);
  transition: background var(--dur-quick);
}
.lang-menu a:hover { background: var(--cream); }
.lang-menu a[aria-current="true"] {
  background: var(--ink);
  color: var(--cream);
}
.lang-menu .lang-code {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Hide on the narrowest screens to keep mobile nav clean. */
@media (max-width: 540px) {
  .lang-picker { display: none; }
}

/* RTL/CJK override block removed: launch is EN + ES, both LTR Latin. */

/* ---------- BLOG INDEX (the journal) ---------- */
.journal-list {
  display: flex;
  flex-direction: column;
}
.journal-entry {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule-strong);
  align-items: start;
}
.journal-entry:last-child { border-bottom: 1px solid var(--rule-strong); }
.journal-entry .je-meta {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.journal-entry .je-meta .je-date,
.journal-entry .je-meta .je-lang {
  color: var(--fg);
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.008em;
  text-transform: none;
}
.journal-entry .je-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.journal-entry .je-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.journal-entry h2, .journal-entry h3 {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.12;
  color: var(--fg);
  letter-spacing: -0.018em;
}
.journal-entry .je-excerpt {
  font-size: var(--step-md);
  line-height: 1.6;
  color: var(--text-soft);
  font-weight: 300;
  max-width: 56ch;
}
.journal-entry .je-byline {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.journal-entry a.je-link {
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
}
.journal-entry a.je-link:hover { color: var(--gold-ink); }
.journal-entry a.je-link::after { content: ' →'; }
@media (max-width: 760px) {
  .journal-entry { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ---------- BLOG POST (essay layout) ---------- */
.essay {
  max-width: var(--container-editorial);
  margin: 0 auto;
}
.essay .essay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.essay .essay-body p {
  font-size: var(--step-md);
  line-height: 1.75;
  color: var(--text);
  max-width: 64ch;
  margin-bottom: 1.25rem;
}
.essay .essay-body h2 {
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  letter-spacing: -0.012em;
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}
.essay .essay-body h3 {
  font-size: var(--step-xl);
  font-style: italic;
  margin-top: var(--s-4);
  margin-bottom: var(--s-1);
}
.essay .essay-body .pullquote { margin: var(--s-5) 0; }

/* ---------- BTC TICKER (nav pill) ----------
   1:1 port of the 21cbi.io navbar ticker (components/layout/
   BtcTicker.jsx + .btn-primary-pill in app/globals.css). Pure
   black pill, white text, Inter 10px/700/0.25em label, tabular
   12px price that transitions to emerald-400 (up) or red-400
   (down) over 500 ms, lucide-style ArrowUpRight / ArrowDownRight
   icons, Tailwind animate-ping on the status dot, Bitcoin-orange
   hover with price flipping to pure white. Hidden until the
   first successful price fetch (matches the parent's
   `if (!price) return null`). Hidden below 768 px (md breakpoint).
---------------------------------------------------------------- */
.btc-ticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;                  /* gap-2.5 */
  padding: 0.625rem 1.25rem;      /* py-2.5 px-5 */
  background: #000000;            /* btn-primary-pill */
  color: #ffffff;
  border: 0;
  border-radius: 9999px;          /* rounded-full */
  font-family: var(--font-body);  /* Inter */
  font-size: 10px;                /* text-[10px] */
  font-weight: 700;               /* font-bold */
  letter-spacing: 0.25em;         /* tracking-[0.25em] */
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.btc-ticker[hidden] { display: none; }
.btc-ticker:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 4px; }

/* Hover: pill turns Bitcoin orange, price flips to pure white
   (overrides the emerald/red market-direction color). */
.btc-ticker:hover { background-color: #f7931a; }
.btc-ticker:hover .bt-price { color: #ffffff; }

/* Status dot (h-1.5 w-1.5 = 6 × 6 px). The ping pseudo-element
   uses Tailwind's exact `animate-ping` keyframes. */
.btc-ticker .bt-dot {
  position: relative;
  display: inline-flex;
  width: 6px; height: 6px;
  flex-shrink: 0;
}
.btc-ticker .bt-dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.4); /* cached / stale */
}
.btc-ticker.is-live .bt-dot::after { background: #22c55e; }            /* CoinGecko green-500 */
.btc-ticker.is-live .bt-dot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: #22c55e;
  opacity: 0.75;
  animation: tickerPing 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes tickerPing {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btc-ticker .bt-dot::before { animation: none; opacity: 0; }
}

/* BTC label — inherits the 10 px / 700 / 0.25em styling. */
.btc-ticker .bt-label { opacity: 0.75; }

/* Price — Inter, 12 px, tabular numerals, normal tracking. Stays
   white by default; turns emerald-400 / red-400 only when the
   direction class is set. 500 ms color transition matches the
   parent's `duration-500`. */
.btc-ticker .bt-price {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  transition: color 0.5s ease;
}
.btc-ticker.dir-up   .bt-price { color: #34d399; }   /* emerald-400 */
.btc-ticker.dir-down .bt-price { color: #f87171; }   /* red-400 */

/* Arrows — lucide ArrowUpRight / ArrowDownRight at 14 px. Only
   the one that matches the active direction renders. */
.btc-ticker .bt-arrow {
  display: none;
  width: 14px; height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
  transition: color 0.5s ease;
}
.btc-ticker.dir-up   .bt-arrow.up   { display: inline-block; color: #34d399; }
.btc-ticker.dir-down .bt-arrow.down { display: inline-block; color: #f87171; }
.btc-ticker:hover .bt-arrow { color: #ffffff; }
/* Screen-reader-only price direction: only the active direction enters the a11y tree. */
.btc-ticker .bt-dir { display: none; }
.btc-ticker.dir-up .bt-dir-up,
.btc-ticker.dir-down .bt-dir-down {
  display: inline; position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Phones keep a condensed price-only ticker pill: the most Bitcoin-native
   trust signal in the chrome, doubling as the shortcut to the calculator. */
@media (max-width: 767px) {
  .btc-ticker .bt-label, .btc-ticker .bt-arrow { display: none; }
  .btc-ticker { padding: 0.4rem 0.7rem; }
}
@media (max-width: 419px) { .btc-ticker { display: none; } }

/* ---------- BUTTONS ---------- */
.btn {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 1.15rem 2.1rem;
  border-radius: 999px;
  min-height: 56px;
  min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.7rem;
  transition: all var(--dur-quick) var(--ease-out);
  position: relative;
  overflow: hidden;
}
/* Primary CTA = magma (Bitcoin orange), the only CTA color. */
.btn-primary { background: var(--bitcoin); color: var(--ink); }
.btn-primary:hover { background: var(--magma); color: var(--ink); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: transparent; color: inherit; border: 1px solid currentColor; }
.btn-ghost:hover { background: transparent; color: var(--gold); border-color: var(--gold); }
/* Light secondary: cream surface, explicit dark ink text (var(--fg) would be
   light here and go invisible on the cream fill). Hover to a subtle magma tint. */
.btn-light { background: var(--cream); color: var(--paper-ink); }
.btn-light:hover { background: var(--gold-soft); color: var(--paper-ink); }
.btn:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 4px; }
.btn .arrow { display: inline-block; transition: transform var(--dur-quick) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
/* Primary CTA: ember glow + subtle lift on hover (premium feedback) */
.btn-primary { transition: background var(--dur-quick) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), transform var(--dur-quick) var(--ease-out); }
.btn-primary:hover { box-shadow: 0 10px 30px -8px rgba(247, 147, 26, 0.5), 0 2px 8px -2px rgba(247, 147, 26, 0.3); transform: translateY(-1px); }
/* Dark focus ring on light "paper" islands (the magma ring fails contrast on cream) */
.bg-paper :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.bg-cream :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.nav-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Tabular lining numerals for figures in tables, ledgers, stat strips (private-bank alignment) */
.cost-table td, .cost-table th, .ledger .item-val, .ledger-line .ll-val, .calc-total,
.shm-val, .hero-meta .meta-pair .v, .sub-hero-meta .shm-val, .total-usd, .total-btc, .total-sats,
.bt-price { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  /* 88vh, not 100vh: at typical desktop heights this keeps the eyebrow
     and headline in the viewport without scroll, and at the fold a hint
     of the next section is visible — which invites scroll instead of
     suggesting the photo IS the page. */
  min-height: 88vh;
  min-height: 88svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--cream);
  isolation: isolate;
}
.hero-photo {
  position: absolute; inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  animation: kenBurns 28s var(--ease-in-out) infinite alternate;
  filter: saturate(0.9) contrast(1.05) brightness(0.9);
}
.hero-photo--home{background-image:url('/images/hero-sm.jpg');background-image:image-set(url('/images/hero-sm.avif') type('image/avif'),url('/images/hero-sm.jpg') type('image/jpeg'));}
@media (min-width:601px){.hero-photo--home{background-image:url('/images/hero.jpg');background-image:image-set(url('/images/hero.avif') type('image/avif'),url('/images/hero.jpg') type('image/jpeg'));}}
/* Warm duotone crush over obsidian: a low ember wash warms the shadows,
   then the obsidian radial + vertical scrims press the photo down into the
   page so the cream hero copy reads against it. */
.hero-photo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 100% at 50% 112%, rgba(226, 87, 30, 0.18) 0%, transparent 56%),
    linear-gradient(180deg, rgba(12, 10, 9, 0.60) 0%, rgba(12, 10, 9, 0.14) 26%, rgba(12, 10, 9, 0.52) 62%, rgba(12, 10, 9, 0.96) 100%);
  mix-blend-mode: normal;
}
@keyframes kenBurns {
  from { transform: scale(1.04) translate(-0.5%, -0.5%); }
  to   { transform: scale(1.12) translate(0.5%, 0.5%); }
}
.hero-content {
  /* Bottom value reduced from --s-7 so the bottom-anchored hero text sits
     about one line lower in the frame. */
  padding-block: var(--s-7) var(--s-5);
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lagoon-fog);
  flex-wrap: wrap;
}
.hero-eyebrow .seal {
  width: 8px; height: 8px;
  background: var(--bitcoin);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(247, 147, 26, 0.18);
}
.hero-eyebrow .sep { opacity: 0.35; }
.hero-h1 {
  font-size: var(--step-display);
  line-height: 0.97;
  letter-spacing: -0.032em;
  color: var(--cream);
  max-width: 17ch;
  margin-bottom: var(--s-4);
}
/* Hero headline italic-accent in Bitcoin orange, matching the OG card. */
.hero-h1 .sovereignty-italic { color: var(--bitcoin); }
.hero-sub {
  font-size: var(--step-md);
  line-height: 1.55;
  color: var(--muted-light);
  max-width: 50ch;
  margin-bottom: var(--s-5);
  font-weight: 300;
}
.hero-cta-row {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: center;
}
.hero-meta {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-light-strong);
  display: flex; flex-wrap: wrap;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lagoon-fog);
}
.hero-meta .meta-pair { display: flex; flex-direction: column; gap: 0.4rem; }
.hero-meta .meta-pair .v {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  letter-spacing: -0.005em;
  color: var(--cream);
  text-transform: none;
}

.hero-scroll {
  position: absolute;
  bottom: var(--s-4);
  right: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lagoon-fog);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  z-index: 2;
}
.hero-scroll .line {
  display: inline-block;
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, transparent, var(--lagoon-fog) 30%, var(--lagoon-fog));
  animation: scrollPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.5; transform: scaleY(0.8); transform-origin: bottom; }
  50% { opacity: 1; transform: scaleY(1); }
}
@media (max-width: 760px) {
  .hero { min-height: 92vh; min-height: 92svh; }
  .hero-scroll { display: none; }
  .hero-meta { gap: var(--s-3); }
}

/* ---------- LEAD / EDITORIAL OPENER ---------- */
.lead-block {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: var(--s-6);
  align-items: start;
}
.lead-block .label {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}
.lead-block .copy {
  font-family: var(--font-display);
  font-size: var(--step-xl);
  line-height: 1.32;
  color: var(--text);
  letter-spacing: -0.008em;
}
.lead-block .copy p + p { margin-top: 1.5rem; }
@media (max-width: 880px) {
  .lead-block { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ---------- PILLAR — editorial chapters, no boxes ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-7);
}
.pillar {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-strong);
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.pillar-num {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.24em;
  color: var(--muted);
  display: flex; align-items: baseline; gap: 0.7rem;
  text-transform: uppercase;
}
.pillar-num .num-big {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.5rem;
  color: var(--fg);
  letter-spacing: -0.015em;
  text-transform: none;
}
.pillar-num .slash { color: var(--gold); }
.pillar h3 {
  font-size: clamp(1.6rem, 2.3vw, 2.125rem);
  line-height: 1.12;
  margin-top: 0.4rem;
}
.pillar p {
  font-size: var(--step-sm);
  line-height: 1.72;
  color: var(--text-soft);
  max-width: 42ch;
  font-weight: 300;
}
@media (max-width: 880px) {
  .pillar-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ---------- PHOTO BREAK ---------- */
.photo-break {
  position: relative;
  min-height: 82vh;
  min-height: 82svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--cream);
}
.photo-break-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: -2;
}
/* Parallax headroom: when JS enables motion, the photo-break background
   is oversized so it can drift on scroll without revealing an edge.
   site.js sets the transform; reduced-motion never gets the class. */
html.motion .photo-break-bg { top: -12%; bottom: auto; height: 124%; will-change: transform; }
.photo-break-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 10, 9, 0.30) 0%, rgba(12, 10, 9, 0.10) 28%, rgba(12, 10, 9, 0.55) 72%, rgba(12, 10, 9, 0.90) 100%),
    radial-gradient(ellipse 90vw 45vh at 20% 95%, rgba(12, 10, 9, 0.55) 0%, transparent 70%);
}
.photo-break-content {
  padding-block: var(--s-7);
  position: relative;
}
.photo-break .caption-line {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lagoon-fog);
  display: inline-flex; align-items: center; gap: 0.8rem;
}
.photo-break .caption-line::before {
  content: ''; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.55;
}
/* GATEWAY paragraph: the 21cbi glass-panel recipe, copied exactly, so the
   dense visa copy reads over the bright bay photo as true frosted glass
   semi-transparent (a dark ink tint with a light blur) so the lagoon photo
   reads through it, matching the 21cbi.io program-card treatment, rather than
   a near-solid frosted panel. Scoped to this one paragraph via .gw-frost. */
.photo-break .photo-break-content p.gw-frost{
  background: rgba(6, 21, 33, 0.34);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  border: 1px solid rgba(244, 238, 226, 0.16);
  border-radius: 16px;
  padding: var(--s-3);
  color: var(--cream);
  box-shadow: 0 8px 32px rgba(6, 21, 33, 0.22);
}
/* No backdrop-filter (older browsers): deepen the tint a little so the cream
   text stays legible without the blur, still letting the photo show through. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .photo-break .photo-break-content p.gw-frost{ background: rgba(6, 21, 33, 0.55); }
}
/* Yasur photo-break: the caption sits over the bright crater photo, where the
   pale --lagoon-fog default was hard to read. Black reads against it. */
.photo-break.yasur-break .caption-line{ color: #000; }
.photo-break h2 {
  font-size: var(--step-3xl);
  color: var(--cream);
  max-width: 16ch;
  line-height: 1.0;
  margin-top: var(--s-3);
}
.photo-break p {
  margin-top: var(--s-3);
  max-width: 52ch;
  color: var(--muted-light);
  font-size: var(--step-md);
  line-height: 1.6;
  font-weight: 300;
}

/* ---------- MATH / LEDGER — editorial accounting ---------- */
.ledger {
  background: transparent;
}
.ledger-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  padding: 1.65rem 0;
  gap: var(--s-4);
  border-top: 1px solid var(--rule);
}
.ledger-row:first-child { border-top: 1px solid var(--rule-strong); }
.ledger-row:last-child { border-bottom: 1px solid var(--rule); }
.ledger-row .item-name {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-style: italic;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.ledger-row .item-desc {
  font-family: var(--font-body);
  font-size: var(--step-xs);
  color: var(--muted);
  font-style: normal;
  display: block;
  margin-top: 0.35rem;
  letter-spacing: 0;
  font-weight: 300;
  line-height: 1.55;
}
.ledger-row .item-val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--fg);
  text-align: right;
  letter-spacing: -0.005em;
  font-feature-settings: 'tnum', 'lnum';
}
.ledger-row .item-dots {
  border-bottom: 1px dotted var(--rule-strong);
  align-self: end;
  height: 1.4rem;
  min-width: 4rem;
}
.ledger-total {
  background: var(--ink);
  color: var(--cream);
  padding-inline: var(--s-3);
  margin-top: 0;
  border: 0;
  border-top: 2px solid var(--gold);
  border-bottom: 4px double var(--gold);   /* the audited-statement close */
}
.ledger-total .item-name,
.ledger-total .item-val { color: var(--cream); }
.item-sats {
  display: block;
  min-height: 1em;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ledger-total .item-name {
  font-style: normal;
  font-weight: 400;
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ledger-total .item-val {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-style: italic;
}
.ledger-total .item-dots { border-bottom-color: var(--rule-light); }
@media (max-width: 760px) {
  .ledger-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.2rem 0;
  }
  .ledger-row .item-dots { display: none; }
  .ledger-row .item-val { text-align: left; }
}

/* ---------- TWO-TRACK COMPARE — editorial spread ---------- */
.tracks {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-6);
}
.track {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-strong);
  display: flex; flex-direction: column;
  gap: var(--s-3);
  position: relative;
}
.track.featured { border-top-color: var(--ink); }
.track-badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.track.featured .track-badge {
  color: var(--gold-ink);
  background: none;
}
.track.featured .track-badge::before {
  content: '◆';
  margin-right: 0.5rem;
  font-size: 0.6em;
  vertical-align: middle;
  color: var(--gold);
}
.track h3 {
  font-size: clamp(1.85rem, 2.5vw, 2.4rem);
  line-height: 1.08;
}
.track .price {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 0.95;
  color: var(--fg);
  font-style: italic;
  margin-top: 0.3rem;
  letter-spacing: -0.018em;
  font-feature-settings: 'tnum', 'lnum';
}
.track .price-note {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.65rem;
  display: block;
  line-height: 1.5;
  font-style: normal;
}
.track ul { display: flex; flex-direction: column; gap: 0.85rem; margin: var(--s-2) 0; }
.track li {
  padding-left: 1.6rem;
  position: relative;
  font-size: var(--step-sm);
  line-height: 1.65;
  color: var(--text-soft);
  font-weight: 300;
}
.track li::before {
  content: '';
  position: absolute; left: 0; top: 0.7rem;
  width: 0.85rem; height: 1px;
  background: var(--gold);
}
.track .track-cta { margin-top: auto; padding-top: var(--s-3); }
@media (max-width: 760px) {
  .tracks { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ---------- TIMELINE — editorial chapters ---------- */
.timeline {
  display: flex; flex-direction: column;
  position: relative;
}
.timeline-step {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
.timeline-step:first-child { border-top: 1px solid var(--rule-strong); }
.timeline-step:last-child { border-bottom: 1px solid var(--rule); }
.timeline-step .marker {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.timeline-step .marker .num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--fg);
  font-style: italic;
  margin-bottom: 0.45rem;
  letter-spacing: -0.015em;
}
.timeline-step h3, .timeline-step h4 {
  font-size: var(--step-xl);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  font-style: italic;
}
.timeline-step p {
  font-size: var(--step-sm);
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 60ch;
  font-weight: 300;
}
@media (max-width: 760px) {
  .timeline-step { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ---------- PAYMENT RAILS — editorial cards ---------- */
.rails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-block: var(--s-3);
}
.rail {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-strong);
  display: flex; flex-direction: column; gap: 0.7rem;
  transition: border-color var(--dur-quick), padding-top var(--dur-quick);
}
.rail:hover { border-top-color: var(--bitcoin); }
.rail .glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--bitcoin);
}
.rail .name {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail h3, .rail h4 {
  font-size: var(--step-lg);
  font-style: italic;
}
.rail p {
  font-size: var(--step-sm);
  color: var(--text-soft);
  line-height: 1.6;
  font-weight: 300;
}
@media (max-width: 760px) {
  .rails { grid-template-columns: 1fr; }
}

/* ---------- FOUNDER BLOCK — magazine portrait ---------- */
.founder {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: var(--s-6);
  align-items: center;
}
.founder-portrait {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--ink) 35% center / cover;
  overflow: hidden;
}
.founder-portrait::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(12, 10, 9, 0.5));
}
.founder-portrait .mark {
  position: absolute; bottom: var(--s-3); left: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  z-index: 1;
}
.founder-body h2 {
  font-size: var(--step-2xl);
  font-style: italic;
  max-width: 20ch;
}
.founder-body p {
  margin-top: var(--s-3);
  font-size: var(--step-md);
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 56ch;
  font-weight: 300;
}
.founder-body .sig {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.founder-body .sig .name {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-style: italic;
}
.founder-body .sig .title {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 880px) {
  .founder { grid-template-columns: 1fr; }
}

/* ---------- CLOSER CTA ---------- */
.closer {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Geothermal glow: a low magma ellipse rising from the bottom edge, with a
   cooler teal counter-ellipse drifting in from the upper corner. Reads as
   heat welling up under the obsidian. */
.closer::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(120% 80% at 50% 100%, var(--ember), transparent 60%),
    radial-gradient(ellipse 70% 55% at 82% 12%, rgba(21, 184, 166, 0.14) 0%, transparent 62%);
  z-index: -1;
}
.closer .inner {
  text-align: center;
  padding-block: var(--s-9);
}
.closer h2 {
  font-size: var(--step-display);
  line-height: 0.98;
  color: var(--cream);
  margin-bottom: var(--s-4);
  max-width: 14ch;
  margin-inline: auto;
}
.closer p {
  font-size: var(--step-md);
  color: var(--muted-light);
  max-width: 52ch;
  margin: 0 auto var(--s-5);
  font-weight: 300;
}
.closer .btn-light { background: var(--cream); color: var(--fg); }
.closer .btn-light:hover { background: var(--gold); color: var(--fg); }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--ink-strong);
  color: var(--cream);
  padding-block: var(--s-7) var(--s-4);
  font-size: var(--step-xs);
  border-top: 1px solid rgba(244, 238, 226, 0.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: var(--s-5);
  align-items: start;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(244, 238, 226, 0.08);
}
.footer h2 {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lagoon-fog);
  margin-bottom: var(--s-2);
}
.footer ul li { margin-bottom: 0.7rem; }
.footer a:hover { color: var(--bitcoin); }
.footer .brand-block {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1.1;
  font-style: italic;
  color: var(--cream);
  margin-bottom: var(--s-3);
  letter-spacing: -0.015em;
}
.footer .rails-line {
  font-family: var(--font-body);
  font-size: var(--step-sm);
  color: var(--muted-light);
  max-width: 40ch;
  margin-bottom: var(--s-3);
  line-height: 1.6;
  font-style: normal;
  font-weight: 300;
}
.footer .ecosystem {
  display: flex; flex-direction: column;
  gap: 0.55rem;
}
.footer-fine {
  padding-top: var(--s-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.footer-x {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0.7rem 0 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.04em;
  color: var(--muted-light);
}
.footer-x svg { flex: none; }
.footer-x:hover { color: var(--bitcoin); }

@media (max-width: 1040px) and (min-width: 761px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-4); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .footer { padding-bottom: calc(var(--s-4) + 5rem); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- SUB-HEADER (interior pages) ---------- */
.sub-hero {
  padding-top: 8rem;
  padding-bottom: var(--s-7);
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
/* Warm duotone crush over obsidian: the page-family photograph (set by
   site.js on window load) is blended as a luminosity-only texture, then
   pushed toward a warm ember/obsidian duotone so it reads as molten
   shadow rather than a literal photo. Keeps mix-blend-mode + the
   --subhero-photo hook intact for the script. */
.sub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(226, 87, 30, 0.10) 0%, rgba(12, 10, 9, 0.55) 100%),
    var(--subhero-photo, none);
  background-size: cover;
  background-position: center 35%;
  opacity: 0;
  mix-blend-mode: luminosity;
  pointer-events: none;
  transition: opacity 1.2s var(--ease-out, ease-out);
}
.sub-hero.has-photo::before { opacity: 0.1; }
.sub-hero > * { position: relative; z-index: 1; }
/* Geothermal glow: magma ellipse welling up from the bottom edge, with a
   teal counter-ellipse drifting in from the top-right corner. */
.sub-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(120% 75% at 50% 100%, var(--ember), transparent 60%),
    radial-gradient(ellipse 60vw 40vw at 100% 0%, rgba(21, 184, 166, 0.28) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.sub-hero .inner { position: relative; z-index: 1; padding-top: var(--s-3); padding-bottom: var(--s-2); }
.sub-hero .crumb {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lagoon-fog);
  margin-bottom: var(--s-4);
  display: inline-flex; align-items: center; gap: 0.85rem;
}
.sub-hero .crumb a:hover { color: var(--bitcoin); }
.sub-hero h1 {
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  line-height: 0.98;
  color: var(--cream);
  letter-spacing: -0.028em;
  max-width: 18ch;
  margin-bottom: var(--s-4);
}
.sub-hero p {
  font-size: var(--step-md);
  max-width: 60ch;
  color: var(--muted-light);
  line-height: 1.6;
  margin-bottom: var(--s-5);
  font-weight: 300;
}

/* ---------- SUB-HERO META LEDGER ----------
   Bottom-of-sub-hero horizontal ledger strip, matching the program /
   pricing pages' pattern. Use on inner pages where the dark sub-hero
   would otherwise read as empty after the H1 + lede. Reads like a
   private-banker letterhead: small mono label, italic display value,
   tight grid. */
.sub-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-3);
  margin-top: var(--s-4);
  border-top: 1px solid var(--rule-light-strong);
}
.sub-hero-meta .shm-pair {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.sub-hero-meta .shm-label {
  font-family: var(--font-mono);
  font-size: var(--step-xxxs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.sub-hero-meta .shm-val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--cream);
}

/* ---------- PULL QUOTE ---------- */
.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2xl);
  line-height: 1.2;
  color: var(--fg);
  border-left: 1px solid var(--gold);
  padding-left: var(--s-3);
  max-width: 32ch;
  margin: var(--s-5) 0;
  letter-spacing: -0.012em;
}
.pullquote.center { margin-inline: auto; }

/* ---------- TRIO IMPERATIVE — editorial moment ---------- */
.trio-section {
  position: relative;
}
.trio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3.25rem);
  color: var(--fg);
  justify-content: center;
  text-align: center;
  letter-spacing: -0.018em;
  line-height: 1.05;
}
.trio .beat { white-space: nowrap; }
.trio .sep {
  color: var(--gold);
  font-style: normal;
  margin-inline: 0.25rem;
  opacity: 0.7;
}

/* ---------- CONTACT GRID (begin page) — editorial channels ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-6);
}
.contact-card {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-strong);
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: border-top-color var(--dur-quick);
}
.contact-card:hover { border-top-color: var(--bitcoin); }
.contact-card .channel {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-card h3 {
  font-size: var(--step-xl);
  font-style: italic;
}
.contact-card p {
  font-size: var(--step-sm);
  color: var(--text-soft);
  line-height: 1.65;
  font-weight: 300;
  max-width: 42ch;
}
.contact-card .value {
  font-family: var(--font-mono);
  font-size: var(--step-sm);
  color: var(--fg);
  padding-top: var(--s-2);
  margin-top: auto;
  word-break: break-all;
  letter-spacing: 0.04em;
}
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ---------- BIO TIMELINE ---------- */
.creds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-5);
}
.cred {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-2);
}
.cred .when {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.cred .what {
  font-family: var(--font-display);
  font-size: var(--step-md);
  line-height: 1.3;
  color: var(--fg);
  font-style: italic;
  letter-spacing: -0.008em;
}
@media (max-width: 760px) { .creds { grid-template-columns: 1fr; } }

/* ---------- BIOMETRIC CALLOUT — editorial framed ---------- */
.callout {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: var(--s-5) 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-5);
  align-items: start;
}
.callout .tag {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-ink);
  padding-top: 0.5rem;
  border-top: 1px solid var(--gold);
  display: inline-block;
  align-self: start;
  width: fit-content;
}
.callout h2, .callout h3, .callout h4 {
  font-size: var(--step-xl);
  font-style: italic;
  margin-bottom: 0.7rem;
}
.callout p {
  font-size: var(--step-sm);
  line-height: 1.7;
  color: var(--text-soft);
  font-weight: 300;
  max-width: 58ch;
}
.callout .centers {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.4rem;
  margin-top: var(--s-3);
}
.callout .center {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--fg);
  background: transparent;
}
@media (max-width: 760px) {
  .callout { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ---------- TAX SPREAD — magazine 0/0/0 ---------- */
.tax-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5) var(--s-6);
}
.tax-cell {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-strong);
}
.tax-cell .tax-label {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--s-3);
}
.tax-cell .tax-figure {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-monolith);
  line-height: 0.9;
  color: var(--fg);
  letter-spacing: -0.04em;
  display: block;
  margin-bottom: var(--s-3);
  font-feature-settings: 'lnum';
}
.tax-cell .tax-note {
  font-size: var(--step-sm);
  line-height: 1.65;
  color: var(--text-soft);
  font-weight: 300;
  max-width: 38ch;
}
@media (max-width: 880px) { .tax-grid { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ---------- CONTEXT TILES — editorial cards (no boxes) ---------- */
.context-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5) var(--s-6);
}
.context-cell {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-strong);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.context-cell .label {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}
.context-cell h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-xl);
  color: var(--fg);
  letter-spacing: -0.012em;
}
.context-cell p {
  font-size: var(--step-sm);
  line-height: 1.7;
  color: var(--text-soft);
  font-weight: 300;
  max-width: 38ch;
}
@media (max-width: 880px) { .context-grid { grid-template-columns: 1fr; gap: var(--s-4); } }

/* Landscape panel: a duotone country photo leading a context-cell. Home
   "three landscapes" centerpiece; image first, then label / heading / body. */
.landscape-panel { border-top: 0; padding-top: 0; gap: var(--s-3); }
.landscape-panel .landscape-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
  filter: grayscale(0.35) contrast(1.04) sepia(0.12);
  border: 1px solid var(--rule);
}
.landscape-panel h3 { margin-top: 0.25rem; }

/* ============ SEO depth modules (A+ sprint) ============ */
/* Clickable related / discovery cards reuse .context-cell as an anchor */
a.context-cell.linked {
  text-decoration: none;
  transition: transform var(--dur-quick) var(--ease-out), border-top-color var(--dur-quick) var(--ease-out);
}
a.context-cell.linked:hover { transform: translateY(-2px); border-top-color: var(--bitcoin); }
a.context-cell.linked:hover h3 { color: var(--bitcoin); }
a.context-cell.linked .arrow { color: var(--bitcoin); }
a.context-cell.linked:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 4px; }

/* Sources & authorities citation list */
.source-list { margin-top: var(--s-5); max-width: 82ch; }
.source-list .src-row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule-strong);
}
.source-list dt {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lagoon);
}
.source-list dd { margin: 0; font-size: var(--step-sm); line-height: 1.7; color: var(--text-soft); font-weight: 300; }
@media (max-width: 640px) { .source-list .src-row { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ============ Header dropdown: SEO cluster under The Program (desktop) ============ */
.nav-has-menu { position: relative; display: inline-flex; align-items: center; }
.nav-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 15rem; padding: var(--s-2);
  /* Light dropdown island: dark ink links + dark hairlines. */
  --fg: var(--paper-ink); --rule-strong: var(--rule-light-strong);
  background: var(--cream); border: 1px solid var(--rule-strong); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(12, 10, 9, 0.16);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform-origin: top center;
  transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out), visibility var(--dur-quick);
  z-index: 200;
}
.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-menu a {
  font-family: var(--font-mono); font-size: var(--step-xxs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg); padding: 0.7rem 0.8rem; border-radius: 6px;
  min-height: 40px; display: flex; align-items: center; white-space: nowrap;
  transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--paper-warm); color: var(--gold-ink); }
.nav-menu a::after { content: none; }
@media (max-width: 900px) { .nav-has-menu .nav-menu { display: none; } }

/* Brief opt-in: name the contents above the form */
.brief-form-live .brief-promise {
  font-size: var(--step-sm); line-height: 1.65; color: var(--fg);
  margin-top: var(--s-2); font-weight: 400;
}
.brief-form-live .brief-promise strong { font-weight: 600; }

/* ---------- PASSPORT ANCHOR — editorial 2-up ---------- */
.passport-anchor {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-6);
  align-items: center;
}
.passport-photo {
  aspect-ratio: 4/5;
  background: var(--ink) center / cover;
  box-shadow: 0 30px 60px -20px rgba(12, 10, 9, 0.35);
}
.passport-copy h2 {
  font-size: var(--step-2xl);
  letter-spacing: -0.018em;
  max-width: 18ch;
}
.passport-copy .body-lg { max-width: 56ch; }
.passport-copy .fine { max-width: 56ch; }
@media (max-width: 880px) {
  .passport-anchor { grid-template-columns: 1fr; }
}

/* ---------- FAQ — editorial chapters ---------- */
.faq {
  display: flex;
  flex-direction: column;
}
.faq details {
  border-top: 1px solid var(--rule-strong);
  padding: var(--s-3) 0;
  position: relative;
}
.faq details[hidden] { display: none; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule-strong); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 2.5rem;
  align-items: baseline;
  gap: var(--s-3);
  padding-right: 0.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.875rem);
  line-height: 1.25;
  color: var(--fg);
  letter-spacing: -0.012em;
  transition: color var(--dur-quick);
}
.faq summary:hover { color: var(--gold-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-display);
  font-style: normal;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-ink);
  transition: transform var(--dur-mid) var(--ease-out);
  justify-self: end;
  align-self: start;
  margin-top: 0.1em;
}
.faq details[open] summary::after { content: '−'; }
.faq .answer {
  padding-top: var(--s-3);
  font-size: var(--step-base);
  line-height: 1.72;
  color: var(--text-soft);
  font-weight: 300;
  max-width: 70ch;
}
.faq .answer p { margin-top: 0; }
.faq .answer p + p { margin-top: var(--s-2); }
.faq .meta-cat {
  position: absolute;
  top: var(--s-3);
  left: -7rem;
  width: 6rem;
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.4rem;
}
html[dir="rtl"] .faq .meta-cat,
html[lang^="zh"] .faq .meta-cat,
html[lang^="ru"] .faq .meta-cat {
  position: static;
  width: auto;
  max-width: 100%;
  padding-top: 0;
  margin-bottom: 0.5rem;
  display: block;
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
  white-space: normal;
}
html[dir="rtl"] .faq .meta-cat {
  text-align: right;
}
html[lang^="zh"] .faq .meta-cat,
html[lang^="ru"] .faq .meta-cat {
  text-align: left;
}
@media (max-width: 1100px) {
  .faq .meta-cat { position: static; width: auto; padding-top: 0; margin-bottom: 0.5rem; display: block; }
}

/* ---------- VISA-FREE REGIONAL BREAKDOWN ---------- */
.visa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}
.visa-row {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.visa-row:nth-child(even) { padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--rule); }
.visa-row .vr-count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  color: var(--fg);
  line-height: 1;
  letter-spacing: -0.012em;
}
.visa-row .vr-region {
  display: flex; flex-direction: column;
  gap: 0.25rem;
}
.visa-row .vr-region .vr-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-md);
  color: var(--fg);
  letter-spacing: -0.008em;
}
.visa-row .vr-region .vr-list {
  font-family: var(--font-body);
  font-size: var(--step-xs);
  color: var(--text-soft);
  line-height: 1.55;
  font-weight: 300;
}
.visa-row .vr-tag {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  white-space: nowrap;
  align-self: start;
  padding-top: 0.4rem;
}
@media (max-width: 880px) {
  .visa-grid { grid-template-columns: 1fr; }
  .visa-row, .visa-row:nth-child(even) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}
@media (max-width: 560px) {
  html[lang^="ru"] h1,
  html[lang^="ru"] h2,
  html[lang^="ru"] h3,
  html[lang^="ru"] h4,
  html[lang^="ru"] .sovereignty-italic,
  html[lang^="ru"] .trio .beat,
  html[lang^="ru"] .visa-row .vr-tag {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  html[lang^="ru"] .trio .beat,
  html[lang^="ru"] .visa-row .vr-tag {
    white-space: normal;
  }
  html[lang^="ru"] .visa-row .vr-tag {
    max-width: 100%;
    letter-spacing: 0.12em;
  }
}

/* ---------- ECOSYSTEM SPREAD ---------- */
.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5) var(--s-6);
}
.eco-card {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-strong);
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: border-top-color var(--dur-quick);
}
.eco-card:hover { border-top-color: var(--gold); }
.eco-card .role {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.eco-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-xl);
  letter-spacing: -0.012em;
}
.eco-card p {
  font-size: var(--step-sm);
  color: var(--text-soft);
  line-height: 1.65;
  font-weight: 300;
}
.eco-card .domain {
  margin-top: auto;
  padding-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}
@media (max-width: 880px) { .ecosystem-grid { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ---------- BTC CALCULATOR — editorial sovereign ledger ---------- */
.calculator {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s-6);
  align-items: start;
}
.calculator .calc-intro {
  position: sticky;
  top: 7rem;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.calculator .calc-intro h2 {
  font-size: var(--step-2xl);
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.calculator .calc-intro p {
  font-size: var(--step-md);
  line-height: 1.6;
  color: var(--text-soft);
  font-weight: 300;
  max-width: 38ch;
}
.calculator .live-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  align-self: flex-start;
  margin-top: var(--s-2);
}
.calculator .live-chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted);
}
.calculator .live-chip.is-live .dot {
  background: #5BAE6F;
  box-shadow: 0 0 0 3px rgba(91, 174, 111, 0.18);
  animation: livePulse 2.4s var(--ease-in-out) infinite;
}
.calculator .live-chip .price-val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-transform: none;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Currency picker — sits in the intro column under the live chip */
.calc-currency {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.4rem;
}
.calc-currency .cur-label {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.55rem 0.6rem 0.55rem 0;
}
.calc-currency button {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  transition: all var(--dur-quick);
  min-height: 32px;
  font-weight: 500;
}
.calc-currency button:hover { color: var(--fg); border-color: var(--ink); }
.calc-currency button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.calculator .calc-body {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-strong);
  display: flex; flex-direction: column;
  gap: var(--s-4);
}
.calculator .calc-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 4px;
  background: var(--paper);
  /* Light pill island: keep idle/muted text dark even if the calculator
     ever sits on a dark section (var(--fg) would otherwise be light). */
  --fg: var(--paper-ink); --muted: #6B635C; --rule-strong: var(--rule-light-strong);
}
.calculator .calc-toggle button {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  color: var(--muted);
  transition: all var(--dur-quick);
  min-height: 44px;
}
.calculator .calc-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cream);
}
.calculator .calc-family {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.calculator .calc-family button {
  padding: 1.1rem 0.5rem;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 0;
  border-left: 0; border-right: 0;
  text-align: left;
  display: flex; flex-direction: column; gap: 0.3rem;
  transition: border-top-color var(--dur-quick), color var(--dur-quick);
  min-height: 88px;
}
.calculator .calc-family button:hover { border-top-color: var(--ink); }
.calculator .calc-family button[aria-pressed="true"] {
  border-top-color: var(--gold);
}
.calculator .calc-family .ft-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--fg);
  letter-spacing: -0.008em;
}
.calculator .calc-family .ft-desc {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}
/* Selected family tier sits on the light paper section; pin the active
   label to dark ink so it reads against the cream regardless of context. */
.calculator .calc-family button[aria-pressed="true"] .ft-label { color: var(--paper-ink); }
.calculator .calc-family button[aria-pressed="true"] .ft-desc { color: var(--gold-ink); }

.calculator .calc-stepper {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  gap: var(--s-2);
}
.calculator .calc-stepper[hidden] { display: none; }
.calculator .calc-stepper .lbl {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--fg);
}
.calculator .calc-stepper .sublbl {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}
.calculator .calc-stepper .controls {
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.calculator .calc-stepper .controls button {
  width: 44px; height: 44px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--fg);
  transition: all var(--dur-quick);
}
.calculator .calc-stepper .controls button:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.calculator .calc-stepper .controls button:disabled { opacity: 0.3; cursor: not-allowed; }
.calculator .calc-stepper .controls .v {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  min-width: 2.5rem;
  text-align: center;
  color: var(--fg);
}

.calc-lines {
  display: flex; flex-direction: column;
}
.calc-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.calc-line:first-child { border-top: 0; padding-top: var(--s-3); }
.calc-line .cl-label {
  font-family: var(--font-body);
  font-size: var(--step-sm);
  color: var(--text-soft);
  font-weight: 300;
}
.calc-line .cl-usd {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--fg);
  font-feature-settings: 'tnum';
}
.calc-line .cl-sats {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: right;
  min-width: 9ch;
  font-feature-settings: 'tnum';
}
.calc-line.is-highlight .cl-label { color: var(--gold-ink); }
.calc-line.is-highlight .cl-usd { color: var(--gold-ink); }
.calc-line.is-highlight .cl-sats { color: var(--gold-ink); opacity: 0.7; }

.calc-total {
  margin-top: var(--s-3);
  background: var(--ink);
  color: var(--cream);
  padding: var(--s-4);
  border-bottom: 4px double var(--gold);
  display: grid;
  gap: var(--s-2);
  border-top: 2px solid var(--gold);   /* the ruled bottom line */
}
.calc-total .row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-2);
}
.calc-total .row[hidden] { display: none; }
.calc-total .row + .row { padding-top: 0.8rem; border-top: 1px solid var(--rule-light); }
.calc-total .label {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.calc-total .val {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream);
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum', 'lnum';
}
.calc-total .val.usd { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; }
.calc-total .val.btc { font-size: 1.75rem; color: var(--bitcoin); }
.calc-total .val.sats { font-family: var(--font-mono); font-style: normal; font-size: 1rem; color: var(--cream); letter-spacing: 0; }

.calc-disclosure {
  font-size: var(--step-xs);
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
  max-width: 60ch;
  margin-top: var(--s-2);
}

/* Calculator closing CTA: turns the computed total into a next step
   instead of dead space. Sits between the totals and the disclosure. */
.calc-cta {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-light-strong);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.calc-cta-line {
  font-family: var(--font-display);
  font-size: var(--step-md);
  line-height: 1.4;
  color: var(--cream);
  letter-spacing: -0.008em;
  max-width: 42ch;
}
.calc-cta-line strong { color: var(--bitcoin); font-weight: 400; font-style: italic; }
.calc-cta-btn { align-self: flex-start; }
.calc-cta-alt {
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lagoon-fog);
}
.calc-cta-alt:hover { color: var(--bitcoin); }
@media (max-width: 880px) {
  .calculator { grid-template-columns: 1fr; gap: var(--s-4); }
  .calculator .calc-intro { position: static; }
  .calculator .calc-family { grid-template-columns: 1fr; }
  .calc-line { grid-template-columns: 1fr auto; }
  .calc-line .cl-sats { grid-column: 1 / -1; text-align: left; }
}

/* ---------- STRATEGY SESSION FAB ---------- */
/* Bottom-right floating Bitcoin button. Opens a modal containing a
   Calendly inline widget → Stripe Embedded Checkout. 1:1 port of the
   parent StrategySessionFab.jsx (h-14 w-14, bg #F6931C, hover scale
   1.1, BTC_symbol image scaled 110% to fill the circle). */
/* The FAB used to have a solid #F6931C background and the Bitcoin
   image sitting on top of it. Because the image's own circle is
   the same orange, the visual collapsed: you could not tell whether
   the orange was the CSS background or the image itself, and it
   read as a flat rendered icon rather than an asset. Now the
   background is transparent; the image carries the orange and the
   B itself. A subtle deep-ink shadow + a hairline gold ring give
   the FAB a private-banker frame (a small luxe touch over the
   stock crypto icon), and the button's circular border-radius
   clips any of the image's black canvas. */
.fab-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: transparent;
  padding: 0;
  border: 1px solid rgba(226, 87, 30, 0.45);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(12, 10, 9, 0.42),
              0 2px 6px -1px rgba(12, 10, 9, 0.18);
  transition: transform var(--dur-quick) var(--ease-out),
              box-shadow var(--dur-quick) var(--ease-out);
}
.fab-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 18px 36px -10px rgba(12, 10, 9, 0.5),
              0 3px 8px -1px rgba(12, 10, 9, 0.22);
}
.fab-btn:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 3px; }
.fab-btn picture {
  display: block;
  width: 100%;
  height: 100%;
}
.fab-btn img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
html[dir="rtl"] .fab-btn {
  right: auto;
  left: 1.5rem;
}

/* RTL mirrors for components still using physical properties. The FAB
   flips to the bottom-left above, so the Sections trigger takes the
   bottom-right corner; the pair must never share a corner. */
html[dir="rtl"] .section-trigger { left: auto; right: clamp(1rem, 4vw, 1.5rem); }
html[dir="rtl"] .track li { padding-left: 0; padding-right: 1.6rem; }
html[dir="rtl"] .track li::before { left: auto; right: 0; }
html[dir="rtl"] .pullquote { border-left: 0; padding-left: 0; border-right: 1px solid var(--gold); padding-right: var(--s-3); }
html[dir="rtl"] .journal-entry a.je-link::after { content: ' \2190'; }
html[dir="rtl"] .fab-opt { text-align: right; }
html[dir="rtl"] .fab-note { border-left: 0; border-right: 2px solid var(--gold); border-radius: 8px 0 0 8px; }
html[dir="rtl"] .fab-continue { margin-left: 0; margin-right: auto; }

/* Modal overlay + dialog. Locked-scroll body via JS. */
.fab-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fab-overlay[hidden] { display: none; }
.fab-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  max-height: 92svh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--text);
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.4);
  /* Light modal island floating over the dark page: re-point the
     contextual tokens so every descendant (options, inputs, ledes,
     fine print) auto-corrects to dark-on-light instead of inheriting
     the page's light-on-dark defaults. */
  --fg: var(--paper-ink);
  --text: #2A251F;
  --text-soft: #4A443D;
  --muted: #6B635C;
  --rule: var(--rule-light);
  --rule-strong: var(--rule-light-strong);
}
.fab-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--muted);
  font-size: 1.75rem;
  line-height: 1;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-quick), color var(--dur-quick);
}
.fab-close:hover { background: rgba(12, 10, 9, 0.06); color: var(--fg); }
.fab-close:focus-visible { outline: 2px solid var(--bitcoin); outline-offset: 2px; }

.fab-stage { padding: 2.5rem 1.5rem 1.5rem; }
@media (min-width: 640px) { .fab-stage { padding: 2.5rem 2rem 2rem; } }

.fab-eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--bitcoin);
}
.fab-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--fg);
}
.fab-lede {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-soft);
}

.fab-cal-mount {
  position: relative;
  margin-top: 1rem;
  min-width: 280px;
  height: 700px;
}
.fab-cal-mount > div { width: 100%; height: 100%; }
.fab-spinner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  pointer-events: none;
}
.fab-spinner {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(12, 10, 9, 0.15);
  border-top-color: var(--bitcoin);
  border-radius: 9999px;
  animation: fabSpin 0.8s linear infinite;
}
.fab-spinner-overlay p {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
@keyframes fabSpin { to { transform: rotate(360deg); } }

.fab-confirm h2 { font-family: var(--font-display); font-size: clamp(1.875rem, 4vw, 2.5rem); line-height: 1.1; }
.fab-confirm p { margin-top: 1rem; font-size: 1rem; line-height: 1.7; color: var(--text-soft); font-weight: 300; }
.fab-confirm .fine { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); font-weight: 300; line-height: 1.65; }

.fab-action {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-quick);
}
.fab-action:hover { background: var(--bitcoin); color: var(--ink); }
.fab-action.secondary { background: transparent; color: var(--fg); border: 1px solid rgba(12, 10, 9, 0.2); }
.fab-action.secondary:hover { background: rgba(12, 10, 9, 0.05); color: var(--fg); }

/* ---------- BOOKING SCREENER (inside the FAB modal) ---------- */
.fab-progress { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.25rem; }
.fab-progress-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.fab-progress-bar { height: 2px; background: var(--rule); border-radius: 9999px; overflow: hidden; }
.fab-progress-bar i { display: block; height: 100%; width: 20%; background: var(--bitcoin); transition: width var(--dur-mid) var(--ease-out); }

.fab-intro { margin-bottom: 1.25rem; }
.fab-intro p { font-size: 0.875rem; line-height: 1.7; color: var(--text-soft); font-weight: 300; }
.fab-intro p:first-child { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--fg); margin-bottom: 0.5rem; }

.fab-q-label { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.fab-q-lead { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.6; color: var(--text-soft); font-weight: 300; }
.fab-helper { margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.55; color: var(--muted); font-weight: 300; }

.fab-opts { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.1rem; }
.fab-opt { text-align: left; display: block; width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--paper); color: var(--fg); cursor: pointer; transition: border-color var(--dur-quick), background var(--dur-quick); }
.fab-opt:hover { border-color: var(--ink); background: #fff; }
.fab-opt.is-selected { border-color: var(--bitcoin); background: #fff; box-shadow: inset 0 0 0 1px var(--bitcoin); }
.fab-opt-t { display: block; font-size: 0.95rem; font-weight: 500; line-height: 1.3; }
.fab-opt-d { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--muted); font-weight: 300; line-height: 1.45; }

.fab-note { margin-top: 0.9rem; padding: 0.85rem 1rem; border-left: 2px solid var(--gold); background: var(--paper-warm); border-radius: 0 8px 8px 0; font-size: 0.82rem; line-height: 1.6; color: var(--text-soft); }
.fab-note a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 2px; }

.fab-country { margin-top: 1.1rem; position: relative; }
.fab-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.fab-chips:empty { display: none; }
.fab-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.35rem 0.3rem 0.75rem; background: var(--ink); color: var(--cream); border-radius: 9999px; font-size: 0.8rem; }
.fab-chip button { width: 24px; height: 24px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; color: var(--cream); background: rgba(255, 255, 255, 0.14); }
.fab-chip button:hover { background: var(--bitcoin); color: var(--ink); }
.fab-country-search { width: 100%; padding: 0.8rem 1rem; font-family: var(--font-body); font-size: 0.95rem; border: 1px solid var(--rule-strong); border-radius: 10px; background: #fff; color: var(--fg); }
.fab-country-search:focus { outline: 2px solid var(--bitcoin); outline-offset: 1px; border-color: transparent; }
.fab-country-results { margin-top: 0.3rem; border: 1px solid var(--rule-strong); border-radius: 10px; background: #fff; max-height: 220px; overflow-y: auto; box-shadow: 0 12px 30px -12px rgba(12, 10, 9, 0.3); }
.fab-country-results[hidden] { display: none; }
.fab-country-results li { border-bottom: 1px solid var(--rule); }
.fab-country-results li:last-child { border-bottom: 0; }
.fab-country-results button { display: block; width: 100%; text-align: left; padding: 0.6rem 1rem; font-size: 0.9rem; color: var(--fg); cursor: pointer; }
.fab-country-results button:hover { background: var(--paper-warm); color: var(--bitcoin); }

.fab-nav { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.fab-back { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 0.5rem 0.2rem; cursor: pointer; }
.fab-back:hover { color: var(--fg); }
.fab-back[hidden] { display: none; }
.fab-continue { margin-left: auto; display: inline-flex; align-items: center; padding: 0.7rem 1.3rem; border-radius: 9999px; background: var(--ink); color: var(--cream); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background var(--dur-quick); }
.fab-continue:hover { background: var(--bitcoin); color: #fff; }
.fab-continue[hidden] { display: none; }

.fab-field { margin-top: 1rem; }
.fab-field label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.fab-field input, .fab-field select { width: 100%; padding: 0.8rem 1rem; font-family: var(--font-body); font-size: 0.95rem; border: 1px solid var(--rule-strong); border-radius: 10px; background: #fff; color: var(--fg); }
.fab-field input:focus, .fab-field select:focus { outline: 2px solid var(--bitcoin); outline-offset: 1px; border-color: transparent; }
.fab-field input.is-invalid { border-color: var(--bitcoin); box-shadow: inset 0 0 0 1px var(--bitcoin); }
.fab-error { margin-top: 0.85rem; font-size: 0.8rem; line-height: 1.5; color: #b3261e; font-weight: 400; }
.fab-error[hidden] { display: none; }
#cbi-fab-contact .fab-action { margin-top: 1.5rem; width: 100%; }
.fab-hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.fab-fine { margin-top: 0.85rem; font-size: 0.75rem; color: var(--muted); font-weight: 300; line-height: 1.5; text-align: center; }

/* Mobile: the modal becomes a full-screen sheet. */
@media (max-width: 560px) {
  .fab-overlay { padding: 0; }
  .fab-dialog { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

/* ---------- REVEAL ANIMATION (fail-open) ----------
   Content is visible by DEFAULT. The hide-then-reveal is applied only once
   site.js confirms motion is allowed and sets html.motion, so if JS never
   runs, errors, is reduced-motion, or the observer stalls, the content shows
   rather than getting stuck at opacity:0. (site.js also has a timeout
   backstop that marks everything visible if the observer never fires.) */
.reveal, .reveal-stagger > * { opacity: 1; transform: none; }

html.motion .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
html.motion .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
html.motion .reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
html.motion .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
html.motion .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 120ms; }
html.motion .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 240ms; }
html.motion .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 360ms; }
html.motion .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 480ms; }
html.motion .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 600ms; }
html.motion .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  /* Stop the infinite hero/scroll loops outright rather than cycling
     them imperceptibly every 0.001ms. */
  .hero-photo, .hero-scroll .line, .photo-break-bg { animation: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* No-JS / scripting-disabled fallback: site.js adds .is-visible to reveal
   content. If scripting never runs, show everything instead of leaving the
   page blank. */
@media (scripting: none) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- VIEW TRANSITIONS ----------
   Cross-document navigation dissolves between pages instead of a hard
   white reload (Chromium 126+, Safari 18.2+). Degrades to a normal
   navigation everywhere else. Disabled under reduced-motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---------- PRINT STYLESHEET ----------
   For HNW clients who print quotes. Strip interactive chrome,
   force light backgrounds, expose link URLs in parentheses,
   keep editorial typography. */
@media print {
  body { background: #fff !important; color: #000 !important; }
  /* A printed quote is a document: hide the controls, keep the figures,
     and open every accordion so nothing the client saved is missing. */
  .calc-toggle, .calc-family, .calc-stepper, .calc-currency, .calc-cta,
  .dq, .dq-result, .nav-menu-trigger, .mobile-nav-sheet,
  .section-trigger, .section-sheet { display: none !important; }
  .faq details > .answer { display: block !important; }
  .faq details > summary { list-style: none; }
  .sub-hero::before { display: none !important; }
  body::before { display: none; }
  .nav, .fab-btn, .fab-overlay, .hero-scroll, .btc-ticker, .lang-picker, .skip-link { display: none !important; }
  .hero, .photo-break, .sub-hero, .closer { min-height: 0 !important; padding: 1.5rem 0 !important; color: #000 !important; background: #fff !important; }
  .hero-photo, .photo-break-bg, .closer::before { display: none !important; }
  .hero h1, .photo-break h2, .sub-hero h1, .closer h2 { color: #000 !important; max-width: none; font-size: 24pt; }
  .hero-sub, .photo-break p, .sub-hero p, .closer p { color: #333 !important; max-width: none; }
  .hero-meta, .ledger-line, .ledger { color: #000 !important; border-color: #999 !important; }
  .ledger-total, .calc-total { background: #f4f4f4 !important; color: #000 !important; border: 1px solid #999 !important; }
  .ledger-total .item-name, .ledger-total .item-val, .calc-total .label, .calc-total .val { color: #000 !important; }
  .footer { background: #fff !important; color: #000 !important; border-top: 1px solid #999 !important; padding-block: 1rem !important; }
  .footer * { color: #000 !important; }
  section { page-break-inside: avoid; }
  h1, h2, h3, h4 { page-break-after: avoid; }
  a[href^="http"]::after,
  a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; font-style: normal; }
  a[href^="#"]::after, a[href^="mailto:"]::after { content: ""; }
  .btn { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; padding: 0.25rem 0.5rem !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- UTILS ---------- */
.text-center { text-align: center; }

/* ---------- VOLCANIC EFFECTS ----------
   Net-new utilities for the Volcanic Pacific skin: a glowing lava divider,
   a section-level geothermal ember glow, and a topographic-contour wash. */

/* (a) Glowing lava seam. A 1px divider that fades a deep-lava → magma →
   deep-lava gradient with an ember bloom. Doubles as the active-nav
   underline and the rule beneath eyebrows. */
.magma-seam {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--magma-deep), var(--bitcoin), var(--magma-deep), transparent);
  box-shadow: 0 0 12px var(--ember);
}

/* (b) Geothermal section glow. Drop on any section (the section must be
   position:relative); paints a low ember radial welling up under the
   content, behind everything, non-interactive. */
.geothermal { position: relative; }
.geothermal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 100%, var(--ember), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 8%, rgba(21, 184, 166, 0.10) 0%, transparent 62%);
}
.geothermal > * { position: relative; z-index: 1; }

/* (c) Topographic contours. Layered concentric radial-gradients at ~5%
   opacity that read as faint elevation lines; for dark sections and the
   footer. Non-interactive; sits behind content. */
.contours { position: relative; }
.contours::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 18% 120%, transparent 0 22px, rgba(201, 194, 186, 0.05) 22px 23px, transparent 23px 46px),
    repeating-radial-gradient(circle at 88% -20%, transparent 0 28px, rgba(201, 194, 186, 0.04) 28px 29px, transparent 29px 58px);
}
.contours > * { position: relative; z-index: 1; }

/* ---------- Audit utility layer (2026-06-07) ----------
   Absorbs repeated inline styles into reusable utilities. */
.ml-2 { margin-inline-start: var(--s-2); }
/* Ghost buttons sit on dark photo/closer/hero sections and read in cream. */
.hero .btn-ghost, .photo-break .btn-ghost, .closer .btn-ghost { color: var(--cream); }
/* Mono micro-link: small uppercase monospace link, optional trailing arrow. */
.micro-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--step-xxs); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.micro-link.fog { color: var(--lagoon-fog); }
.micro-link.goldink { color: var(--gold-ink); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }


/* CIIP net-after-redemption: the decision number gets first-class type,
   one step below Total USD, clearly above the sats line. */
.calc-total .val.net {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: -0.01em;
}


/* The number gets its quiet room: one full-stop figure before the closer. */
.monolith-fig {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-monolith);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin: 0;
}
.monolith-cap {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--step-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.monolith-cap .item-sats { display: inline; margin: 0; text-transform: none; letter-spacing: 0.04em; }

/* Prose measure utility, replacing the repeated inline max-width. */
.measure-72 { max-width: 72ch; }

/* Source-of-funds readiness checklist (relocated from source-of-funds.html in-body style) */
.sofck{ margin-top:var(--s-5); }
.sofck-bar{ height:4px; background:var(--rule-strong); border-radius:3px; overflow:hidden; margin-bottom:0.5rem; max-width:420px; }
.sofck-fill{ height:100%; width:0; background:var(--bitcoin); transition:width 280ms var(--ease-out); }
.sofck-count{ font-family:var(--font-mono); font-size:var(--step-xxs); letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-4); }
.sofck-count span{ color:var(--ink); }
.sofck-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4) var(--s-5); }
.sofck-group{ break-inside:avoid; }
.sofck-group h3{ font-size:var(--step-lg); margin-bottom:var(--s-1); padding-bottom:0.45rem; border-bottom:1px solid var(--rule); }
.sofck-group h3 .n{ font-family:var(--font-mono); color:var(--gold-ink); font-size:var(--step-sm); margin-right:0.5rem; }
.sofck-item{ display:flex; gap:0.7rem; align-items:flex-start; padding:0.5rem 0; cursor:pointer; }
.sofck-item input{ flex:none; width:1.1rem; height:1.1rem; margin-top:0.15rem; accent-color:var(--bitcoin); cursor:pointer; }
.sofck-item > span{ font-size:var(--step-sm); line-height:1.45; color:var(--ink); }
.sofck-item input:checked + span{ color:var(--muted); text-decoration:line-through; text-decoration-color:var(--gold); }
.sofck-actions{ display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap; margin-top:var(--s-5); }
.sofck-reset{ font-family:var(--font-mono); font-size:var(--step-xxs); letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); background:none; border:none; cursor:pointer; padding:0; }
.sofck-reset:hover{ color:var(--bitcoin); }
.sofck-email{ margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--rule); max-width:520px; }
.sofck-email p{ font-size:var(--step-sm); color:var(--text-soft); line-height:1.5; margin-bottom:0.75rem; }
.sofck-form{ display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; }
.sofck-form input[type=email]{ flex:1 1 220px; min-width:0; padding:0.7rem 0.9rem; border:1px solid var(--rule-strong); border-radius:6px; background:var(--paper); color:var(--ink); font:inherit; }
.sofck-form input[type=email]:focus-visible{ outline:none; border-color:var(--bitcoin); }
.sofck-hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.sofck-error{ color:var(--error); font-size:var(--step-xs); margin-top:0.5rem; }
.sofck-error[hidden]{ display:none; }
.sofck-sent{ font-size:var(--step-sm); color:var(--gold-ink); margin-top:0.5rem; }
@media (max-width:680px){ .sofck-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Audit elevations: homepage manifesto, pricing close, SoF dossier
   ============================================================ */
/* 1 - Four-fact block as a numbered manifesto (homepage, .bg-ink .fourfact) */
.fourfact .sovereignty-italic{ color: var(--bitcoin); }
.fourfact .lede{ color: var(--muted-light); }
.fact-manifesto{ list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.fact-manifesto li{ display: grid; grid-template-columns: 120px 1fr; gap: var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--rule-light); align-items: start; }
.fact-manifesto li:last-child{ border-bottom: 1px solid var(--rule-light); }
.fm-num{ font-family: var(--font-display); font-size: 4.5rem; line-height: 0.82; color: var(--gold); font-variant-numeric: tabular-nums; }
.fm-label{ font-family: var(--font-mono); font-size: var(--step-xxs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-soft); display: block; margin-bottom: 0.55rem; }
.fm-body h3{ font-family: var(--font-display); font-weight: 400; font-size: var(--step-xl); color: var(--cream); margin: 0 0 0.55rem; line-height: 1.04; }
.fm-body p{ color: var(--muted-light); font-size: var(--step-sm); line-height: 1.62; max-width: 56ch; margin: 0; }
@media (max-width:720px){ .fact-manifesto li{ grid-template-columns: 72px 1fr; gap: var(--s-4); } .fm-num{ font-size: 3rem; } }

/* 2 - Pricing total as a document-grade close (.calc-close, on .bg-paper) */
.calc-close .cc-main{ display: flex; flex-direction: column; gap: 0.2rem; border-top: 2px solid var(--ink); padding-top: var(--s-3); }
.calc-close .cc-main .label{ font-family: var(--font-mono); font-size: var(--step-xxs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); order: -1; }
.calc-close .cc-main .val.usd{ font-family: var(--font-display); font-size: var(--step-3xl); line-height: 0.92; letter-spacing: -0.015em; color: var(--fg); }
.calc-close .cc-secondary{ font-family: var(--font-mono); font-size: var(--step-sm); color: var(--gold-ink); margin-top: 0.45rem; display: flex; gap: 0.55rem; align-items: baseline; flex-wrap: wrap; }
.calc-close .cc-secondary .cc-dot{ color: var(--rule-strong); }
.calc-close .cc-sub{ display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; }
.calc-close .cc-sub .label{ font-family: var(--font-mono); font-size: var(--step-xxs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.calc-close .cc-sub .val{ color: var(--text-soft); }
.calc-close .cc-foot{ display: flex; justify-content: space-between; gap: 1rem; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule-strong); font-family: var(--font-mono); font-size: var(--step-xxs); letter-spacing: 0.04em; color: var(--muted); }

/* 3 - Source-of-funds checklist as a file-builder dossier (.sof-dossier, on .bg-cream) */
.sof-dossier{ background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 4px; padding: var(--s-5); margin-top: var(--s-5); }
.sof-meter{ display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-4); }
.sof-meter-kicker{ font-family: var(--font-mono); font-size: var(--step-xxs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.sof-meter-title{ font-family: var(--font-display); font-weight: 400; font-size: var(--step-lg); color: var(--fg); margin: 0.25rem 0 0; line-height: 1.1; }
.sof-meter-r{ min-width: 170px; }
.sof-dossier .sofck-count{ font-family: var(--font-mono); font-size: var(--step-base); color: var(--fg); margin: 0 0 0.35rem; letter-spacing: 0; text-transform: none; }
.sof-dossier .sofck-count b{ color: var(--bitcoin); font-weight: 500; }
.sof-dossier .sofck-bar{ max-width: none; margin-bottom: 0.3rem; }
.sof-meter-state{ font-family: var(--font-mono); font-size: var(--step-xxs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.sof-dossier .sofck-grid{ gap: 0.4rem var(--s-5); }
.sof-dossier .sofck-group{ padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.sof-dossier .sofck-group h3{ display: flex; align-items: baseline; gap: 0.5rem; }
.btn-gold{ background: transparent; color: var(--gold-ink); border: 1px solid var(--gold); }
.btn-gold:hover{ border-color: var(--gold-ink); background: rgba(226, 87, 30,0.08); }
@media (max-width:680px){ .sof-meter{ flex-direction: column; align-items: flex-start; gap: var(--s-3); } .sof-meter-r{ width: 100%; } }