/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio, geometry.
   Put this @layer first; product CSS outside the layer wins ordinary layout rules.
   Native hidden and closed-dialog states take precedence over component display rules. */
@layer od-layout {
  [hidden]:not([hidden="until-found" i]) { display: none !important; }
  dialog:not([open]) { display: none !important; }

  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  .od-icon { display: inline-block; inline-size: var(--od-icon-size, 1em); block-size: var(--od-icon-size, 1em); flex: none; }

  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }

  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
:root [hidden]:where(:not([hidden="until-found" i])) { display: none; }
/* /OD-LAYOUT-PRIMITIVES v1 */

@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque-Variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------- Tokens (mirrored in DESIGN.md) ---------- */
:root {
  --ink: #0E1B27;
  --ink-2: #1E2F3D;
  --steel: #9BABB9;
  --signal: #FF4F1F;
  --signal-press: #E8441A;
  --paper: #EEF1F3;
  --surface: #FAFBFC;
  --line: #D3DAE0;
  --text: #0E1B27;
  --text-muted: #4A5866;
  --field-border: #6B7A88;
  --positive: #1A7349;
  --negative: #B3261E;
  --pending: #8A5A00;

  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero: clamp(2.625rem, 1.2rem + 6.2vw, 6rem);
  --fs-display: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3: 1.5rem;
  --fs-body-lg: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.875rem;
  --track-display: -0.045em;
  --track-heading: -0.03em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --r-control: 4px;
  --r-block: 16px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-reveal: 360ms;

  --focus: var(--ink);
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; color: var(--text); background: var(--paper); font-feature-settings: "ss01", "tnum" 0; -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0; font-feature-settings: "tnum" 1; }
.num { font-feature-settings: "tnum" 1; }
.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; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.on-ink { --focus: var(--signal); color: var(--paper); }
.on-signal { --focus: var(--ink); color: var(--ink); }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 12px 16px; z-index: 30; border-radius: var(--r-control); }
.skip:focus { top: 12px; }

/* ---------- Wordmark ---------- */
.wm { display: inline-flex; align-items: baseline; gap: 0.08em; font-weight: 720; letter-spacing: -0.055em; line-height: 1; text-decoration: none; color: inherit; white-space: nowrap; }
.wm-mark { display: inline-block; width: 0.22em; height: 0.22em; background: var(--signal); transform: translateY(-0.02em); }
.on-signal .wm-mark { background: var(--ink); }
.card-ink .wm-mark { background: var(--signal); }
.wm-desc { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; font-size: 0.42em; margin-left: 0.5em; opacity: 1; }

/* ---------- Buttons ---------- */
.btn { --btn-bg: var(--signal); --btn-fg: var(--ink); --btn-bd: var(--signal); --btn-bg-h: var(--signal-press);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd); border-radius: var(--r-control);
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn .od-icon { --od-icon-size: 18px; }
@media (hover: hover) { .btn:hover, .btn.is-hover { background: var(--btn-bg-h); border-color: var(--btn-bg-h); } }
.btn.is-hover { background: var(--btn-bg-h); border-color: var(--btn-bg-h); }
.btn:active { transform: translateY(1px); }
.btn.is-focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn[disabled], .btn.is-disabled { --btn-bg: #DCE2E7; --btn-bd: #DCE2E7; --btn-fg: #56636F; --btn-bg-h: #DCE2E7; cursor: not-allowed; transform: none; }
.btn-ink { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); --btn-bg-h: var(--ink-2); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); --btn-bg-h: rgba(14, 27, 39, 0.08); }
.on-ink .btn-ghost { --btn-fg: var(--paper); --btn-bd: var(--steel); --btn-bg-h: rgba(238, 241, 243, 0.1); }
.on-signal .btn-ghost { --btn-fg: var(--ink); --btn-bd: var(--ink); --btn-bg-h: rgba(14, 27, 39, 0.1); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }

/* ---------- Hero ---------- */
.hero { background: var(--signal); padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 104px); overflow: hidden; }
.hero-eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; margin-bottom: var(--s-5); }
.hero h1 { font-size: var(--fs-hero); line-height: 0.98; letter-spacing: var(--track-display); font-weight: 700; max-width: 14ch; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.hero-lede { font-size: var(--fs-body-lg); line-height: 1.55; max-width: 44ch; font-weight: 450; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; width: 100%; margin: 0; }
@media (max-width: 899px) {
  .hero h1 { max-width: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .hero-cards { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); max-width: 420px; }
  .hero-cards .card { width: 88%; }
  .hero-cards .card-phys { justify-self: end; margin-top: 0; }
}

/* ---------- Corporate card object ---------- */
.card { position: relative; aspect-ratio: 1.586; width: 100%; border-radius: 14px; padding: 7% 7.5%; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; container-type: inline-size; }
.card-ink { background: var(--ink); color: var(--paper); }
.card-paper { background: var(--paper); color: var(--ink); }
.card-signal { background: var(--signal); color: var(--ink); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card .wm { font-size: clamp(18px, 7.2cqi, 32px); }
.card-type { font-family: var(--font-mono); font-size: clamp(10px, 3cqi, 13px); text-align: right; line-height: 1.3; }
.card-chip { width: 13%; aspect-ratio: 1.3; border-radius: 3px; background: var(--steel); align-self: center; }
.card-bottom { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.card-num { font-family: var(--font-mono); font-size: clamp(13px, 5cqi, 20px); letter-spacing: 0.04em; }
.card-name { font-family: var(--font-mono); font-size: clamp(10px, 3.2cqi, 13px); margin-top: 4px; }
/* Signal stripe sits inside the face, away from the rounded corners, so no edge fringe */
.card-band { position: absolute; top: 0; bottom: 0; left: 58%; width: 11%; background: var(--signal); }
.card-ink .card-top, .card-ink .card-bottom, .card-ink .card-chip { position: relative; }
.card-logo-sq { width: 9cqi; height: 9cqi; background: var(--ink); }
.hero-cards .card-phys { margin-top: var(--s-7); border: 1px solid var(--ink); }
.hero-cards .sample-tag { grid-column: 1 / -1; }
.sample-tag { font-family: var(--font-mono); font-size: 12px; text-align: right; }

/* ---------- Facts strip ---------- */
.facts { background: var(--ink); }
.facts ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts li { padding: var(--s-6) var(--s-5) var(--s-6) 0; display: grid; gap: 4px; }
.facts li + li { padding-left: var(--s-5); border-left: 1px solid var(--ink-2); }
.facts .k { color: var(--steel); font-size: var(--fs-small); }
.facts .v { color: var(--paper); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
@media (max-width: 899px) {
  .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li { padding: var(--s-5) var(--s-4) var(--s-5) 0; }
  .facts li + li { padding-left: 0; border-left: 0; }
  .facts li:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--ink-2); }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--ink-2); }
}
@media (max-width: 479px) {
  .facts ul { grid-template-columns: minmax(0, 1fr); }
  .facts li, .facts li:nth-child(even) { padding: var(--s-4) 0; border-left: 0; }
  .facts li + li { border-top: 1px solid var(--ink-2); }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 128px); }
.section-head { max-width: 22ch; font-size: var(--fs-display); line-height: 1.02; letter-spacing: var(--track-display); font-weight: 700; }
.section-lede { margin-top: var(--s-5); max-width: 56ch; font-size: var(--fs-body-lg); color: var(--text-muted); }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); margin-top: clamp(40px, 5vw, 64px); }
.block { border-radius: var(--r-block); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.block h3 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); line-height: 1.05; letter-spacing: var(--track-heading); font-weight: 700; max-width: 18ch; }
.block p.block-copy { margin-top: var(--s-3); max-width: 46ch; }
.b-white { background: var(--surface); }
.b-white p.block-copy { color: var(--text-muted); }
.b-ink { background: var(--ink); }
.b-ink p.block-copy { color: var(--steel); }
.b-ink2 { background: var(--ink-2); }
.b-ink2 p.block-copy { color: #C3CDD6; }
.b-signal { background: var(--signal); }
.span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } .span-12 { grid-column: span 12; }
@media (max-width: 1023px) { .span-7, .span-12 { grid-column: span 12; } .span-5 { grid-column: span 12; } }
.frag-label { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; }
.b-white .frag-label { color: var(--text-muted); }
.b-ink .frag-label, .b-ink2 .frag-label { color: var(--steel); }

/* Fragment: balances */
.frag { border-radius: 10px; padding: var(--s-5); }
.frag-light { background: var(--paper); }
.frag-dark { background: var(--ink-2); color: var(--paper); }
.frag-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: var(--s-4); }
.bal-list { display: grid; }
.bal { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.bal:first-child { border-top: 0; padding-top: 0; }
.ccy { font-family: var(--font-mono); font-weight: 600; font-size: 14px; display: inline-grid; place-items: center; height: 32px; border-radius: var(--r-control); background: var(--ink); color: var(--paper); }
.bal-meta { display: grid; gap: 2px; }
.bal-meta b { font-weight: 600; }
.bal-meta span { font-size: var(--fs-small); color: var(--text-muted); }
.bal-amt { font-family: var(--font-mono); font-size: clamp(15px, 1.4vw, 19px); font-weight: 500; text-align: right; white-space: nowrap; }
.pay-row { margin-top: var(--s-4); padding: var(--s-4); border-radius: 8px; background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: center; }
.pay-row .t { font-weight: 600; }
.pay-row .s { font-size: var(--fs-small); color: var(--text-muted); }
.pay-row .a { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.pay-row .a small { display: block; font-size: 12px; color: var(--text-muted); }
@media (max-width: 479px) {
  .bal { grid-template-columns: 48px minmax(0, 1fr); }
  .bal-amt { grid-column: 2; text-align: left; }
  .pay-row { grid-template-columns: minmax(0, 1fr); }
  .pay-row .a { text-align: left; }
}

/* Fragment: receipt */
.receipt dl { display: grid; gap: 0; }
.receipt .r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); padding: 10px 0; border-top: 1px solid rgba(155, 171, 185, 0.25); font-size: var(--fs-small); }
.receipt .r:first-child { border-top: 0; }
.receipt dt { color: var(--steel); }
.receipt dd { font-family: var(--font-mono); text-align: right; white-space: nowrap; color: var(--paper); }
.receipt .credit { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--steel); display: grid; gap: 4px; }
.receipt .credit-k { color: var(--steel); font-size: var(--fs-small); }
.receipt .credit-v { font-family: var(--font-mono); font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--paper); white-space: nowrap; }
.receipt .credit-v .unit { font-size: 0.45em; color: var(--steel); margin-left: 6px; letter-spacing: 0; }
.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.status .od-icon { --od-icon-size: 13px; }
.status-ok { background: #D7EEE2; color: #0F5132; }
.status-wait { background: #FBE9C9; color: #6B4400; }
.status-bad { background: #F8DAD7; color: #8C1D16; }
.status-dark-ok { background: rgba(155, 171, 185, 0.18); color: var(--paper); }
.hold-note { font-size: var(--fs-small); color: var(--steel); }

/* Fragment: card txns on signal */
.b-signal .block-copy { color: var(--ink); }
.cards-frag { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.cards-frag .card { max-width: 300px; }
.txns { display: grid; }
.txn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding: 10px 0; border-top: 1px solid rgba(14, 27, 39, 0.28); font-size: var(--fs-small); }
.txn:first-child { border-top: 0; }
.txn b { font-weight: 600; display: block; }
.txn span { display: block; }
.txn .amt { font-family: var(--font-mono); text-align: right; white-space: nowrap; }

/* Fragment: team + approval */
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-5); align-items: start; }
.roles { display: grid; }
.role { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.role:first-child { border-top: 0; padding-top: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; background: var(--ink); color: var(--paper); }
.avatar.alt { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); }
.role-meta { display: grid; }
.role-meta b { font-weight: 600; line-height: 1.3; }
.role-meta span { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.4; }
.approval { border: 1.5px solid var(--ink); border-radius: 10px; padding: var(--s-5); background: var(--surface); display: grid; gap: var(--s-4); }
.approval-amt { font-family: var(--font-mono); font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.approval dl { display: grid; gap: 6px; font-size: var(--fs-small); }
.approval dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); }
.approval dt { color: var(--text-muted); }
.approval-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.approval-result { font-size: var(--fs-small); display: grid; gap: var(--s-3); justify-items: start; }
@media (max-width: 767px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

/* Fragment: security */
.sec-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.sec-list { display: grid; margin-top: var(--s-6); }
.sec-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid rgba(155, 171, 185, 0.3); color: var(--paper); font-weight: 500; }
.sec-list li .od-icon { --od-icon-size: 22px; color: var(--signal); margin-top: 2px; }
.passkey { background: var(--paper); color: var(--ink); border-radius: 12px; padding: var(--s-6); display: grid; gap: var(--s-4); justify-items: center; text-align: center; max-width: 380px; width: 100%; justify-self: end; }
.passkey .fp { width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: var(--signal); display: grid; place-items: center; }
.passkey .fp .od-icon { --od-icon-size: 40px; }
.passkey h4 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; }
.passkey p { font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 899px) { .sec-grid { grid-template-columns: minmax(0, 1fr); } .passkey { justify-self: start; } }

/* ---------- Onboarding ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 3px solid var(--ink); }
.step { padding: var(--s-5) var(--s-5) 0 0; display: grid; gap: var(--s-3); align-content: start; position: relative; }
.step + .step { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.step-n { font-family: var(--font-mono); font-size: 14px; font-weight: 600; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.step:last-child .step-n { background: var(--signal); color: var(--ink); }
.step h3 { font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; font-weight: 650; }
.step p { color: var(--text-muted); font-size: 1rem; }
@media (max-width: 899px) {
  .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 3px solid var(--ink); }
  .step, .step + .step { padding: 0 0 var(--s-6) var(--s-5); border-left: 0; }
  .step:last-child { padding-bottom: 0; }
}

/* ---------- Who ---------- */
.who { background: var(--ink); }
.who-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.who .section-head { color: var(--paper); }
.who .section-lede { color: var(--steel); }
.regions { display: grid; }
.region { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: baseline; padding: var(--s-5) 0; border-top: 1px solid var(--ink-2); }
.region:last-child { border-bottom: 1px solid var(--ink-2); }
.region b { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); letter-spacing: var(--track-display); line-height: 1.05; font-weight: 700; color: var(--paper); }
.region span { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--steel); white-space: nowrap; }
@media (max-width: 899px) { .who-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Closing CTA ---------- */
.closing { background: var(--signal); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: end; }
.closing h2 { font-size: var(--fs-hero); line-height: 0.98; letter-spacing: var(--track-display); font-weight: 700; max-width: 12ch; }
.closing p { margin-top: var(--s-5); font-size: var(--fs-body-lg); max-width: 46ch; }
@media (max-width: 899px) { .closing-grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); padding-block: var(--s-8) var(--s-7); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: start; }
.site-foot .wm { font-size: 36px; color: var(--paper); }
.foot-legal { margin-top: var(--s-5); max-width: 68ch; color: var(--steel); font-size: var(--fs-small); line-height: 1.6; }
.foot-links { display: grid; gap: var(--s-2); justify-items: end; }
.foot-links a { color: var(--paper); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); }
@media (hover: hover) { .foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 767px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } .foot-links { justify-items: start; } }

/* ---------- Brand sheet ---------- */
.brand { background: var(--surface); border-top: 6px solid var(--ink); }
.brand-eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; color: var(--text-muted); margin-bottom: var(--s-4); }
.bs-block { margin-top: clamp(48px, 6vw, 80px); }
.bs-title { font-size: var(--fs-h3); letter-spacing: -0.02em; font-weight: 650; padding-bottom: var(--s-4); border-bottom: 1.5px solid var(--ink); margin-bottom: var(--s-6); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.bs-title small { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
.wm-tiles { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-4); }
.wm-tile { border-radius: var(--r-block); padding: clamp(24px, 3vw, 40px); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); }
.wm-tile .wm { font-size: clamp(40px, 5vw, 80px); }
.wm-tile.small .wm { font-size: clamp(32px, 3vw, 44px); }
.wm-tile .cap { font-family: var(--font-mono); font-size: 12px; }
.wm-tile.paper { background: var(--paper); border: 1px solid var(--line); }
.wm-tile.paper .cap { color: var(--text-muted); }
.wm-tile.ink .cap { color: var(--steel); }
.wm-notes { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); font-size: var(--fs-small); color: var(--text-muted); }
.wm-notes b { color: var(--ink); display: block; font-weight: 600; }
@media (max-width: 899px) { .wm-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wm-tile:first-child { grid-column: 1 / -1; } .wm-notes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .wm-tiles { grid-template-columns: minmax(0, 1fr); } .wm-tile { min-height: 160px; } }

.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.sw { display: grid; grid-template-rows: auto 1fr; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.sw-chip { aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: var(--s-3); font-weight: 650; font-size: 1.5rem; letter-spacing: -0.03em; }
.sw-body { padding: var(--s-3) var(--s-3) var(--s-4); display: grid; gap: 2px; font-size: 13px; }
.sw-body b { font-weight: 600; font-size: 0.9375rem; }
.sw-body .mono { font-size: 12.5px; }
.sw-body .use { color: var(--text-muted); line-height: 1.4; margin-top: 4px; }
.sw-sig .sw-chip { background: var(--signal); color: var(--ink); }
.sw-ink .sw-chip { background: var(--ink); color: var(--paper); }
.sw-ink2 .sw-chip { background: var(--ink-2); color: var(--paper); }
.sw-steel .sw-chip { background: var(--steel); color: var(--ink); }
.sw-paper .sw-chip { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.sw-surface .sw-chip { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
.sys-colors { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); font-size: var(--fs-small); color: var(--text-muted); }
.sys-colors span { display: inline-flex; align-items: center; gap: 8px; }
.sys-colors i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
@media (max-width: 1023px) { .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.type-scale { display: grid; }
.ts { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); align-items: baseline; padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.ts:first-child { border-top: 0; padding-top: 0; }
.ts-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.ts-meta b { display: block; color: var(--ink); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600; }
.ts-sample { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) { .ts { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } }

.comp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); }
.comp-grid > div { min-width: 0; }
.comp-sub { font-weight: 600; margin-bottom: var(--s-4); }
.btn-board { display: grid; gap: var(--s-4); }
.btn-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.btn-row > span { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.btn-row .od-cluster { --od-gap: 12px; }
.btn-board-dark { margin-top: var(--s-5); background: var(--ink); border-radius: 12px; padding: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.btn-board-signal { margin-top: var(--s-3); background: var(--signal); border-radius: 12px; padding: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
@media (max-width: 899px) { .comp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .btn-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } }

/* Inputs */
.field { display: grid; gap: var(--s-2); }
.field label, .field .label { font-weight: 600; font-size: 0.9375rem; }
.field .req { color: var(--negative); font-weight: 600; }
.input { width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--field-border); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font-size: 1rem; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.input::placeholder { color: #5E6C79; }
.input:focus, .input.is-focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--signal); }
.input[aria-invalid="true"], .input.is-error { border-color: var(--negative); border-width: 2px; }
.input:disabled { background: #E3E8EC; border-color: #B7C1CA; color: #56636F; cursor: not-allowed; }
.help { font-size: var(--fs-small); color: var(--text-muted); }
.err { font-size: var(--fs-small); color: var(--negative); display: flex; gap: 6px; align-items: flex-start; font-weight: 500; }
.err .od-icon { --od-icon-size: 16px; margin-top: 3px; }
.input-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); }
@media (max-width: 479px) { .input-board { grid-template-columns: minmax(0, 1fr); } }

/* Data table */
.table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.dt { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.dt th { text-align: left; font-weight: 500; font-size: 13px; color: var(--text-muted); padding: 12px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
.dt td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dt tr:last-child td { border-bottom: 0; }
.dt .amt { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.dt th.amt { font-family: var(--font-sans); }
.dt .who-cell b { display: block; font-weight: 600; }
.dt .who-cell span { display: block; font-size: 13px; color: var(--text-muted); }
.dt .date { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; color: var(--text-muted); }
.dt tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .dt tbody tr:hover { background: #F2F5F7; } }
.dt tr.is-selected { background: #FFF1EC; box-shadow: inset 4px 0 0 var(--signal); }
@media (max-width: 767px) {
  .dt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dt, .dt tbody, .dt tr, .dt td { display: block; }
  .dt tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 16px; border-bottom: 1px solid var(--line); }
  .dt tr:last-child { border-bottom: 0; }
  .dt td { padding: 0; border: 0; }
  .dt td.who-cell { grid-column: 1; grid-row: 1; }
  .dt td.amt { grid-column: 2; grid-row: 1; }
  .dt td.date { grid-column: 1; grid-row: 2; }
  .dt td.st { grid-column: 2; grid-row: 2; justify-self: end; }
  .dt td.method { grid-column: 1 / -1; grid-row: 3; font-size: 13px; color: var(--text-muted); }
}

/* Account card component */
.acct-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.acct { border-radius: var(--r-block); padding: var(--s-5); display: grid; gap: var(--s-6); min-width: 0; }
.acct.paper { background: var(--paper); border: 1px solid var(--line); }
.acct.ink { background: var(--ink); color: var(--paper); }
.acct.signal { background: var(--signal); color: var(--ink); }
.acct-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acct .ccy-l { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.acct .det { font-family: var(--font-mono); font-size: 12.5px; }
.acct.paper .det { color: var(--text-muted); }
.acct.ink .det { color: var(--steel); }
.acct-bal { font-family: var(--font-mono); font-size: clamp(26px, 2.2vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.acct-bal small { font-size: 13px; display: block; font-family: var(--font-sans); letter-spacing: 0; font-weight: 400; margin-bottom: 6px; }
.acct.paper .acct-bal small { color: var(--text-muted); }
.acct.ink .acct-bal small { color: var(--steel); }
.acct-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.acct-actions .btn { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; }
@media (max-width: 1023px) { .acct-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 599px) { .acct-cards { grid-template-columns: minmax(0, 1fr); } }
.card-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); align-items: start; }
@media (max-width: 899px) { .card-board { grid-template-columns: minmax(0, 1fr); max-width: 380px; } }

/* ---------- Dialogs ---------- */
dialog.dlg { border: 0; padding: 0; border-radius: var(--r-block); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--surface); color: var(--ink); }
dialog.dlg::backdrop { background: rgba(14, 27, 39, 0.64); }
.dlg-in { padding: clamp(24px, 4vw, 40px); display: grid; gap: var(--s-5); }
.dlg-head { display: flex; justify-content: space-between; align-items: start; gap: var(--s-4); }
.dlg-head h2 { font-size: 1.875rem; letter-spacing: var(--track-heading); line-height: 1.1; font-weight: 700; }
.dlg-head p { margin-top: var(--s-2); color: var(--text-muted); font-size: 0.9375rem; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-control); border: 1.5px solid var(--line); background: transparent; cursor: pointer; flex: none; }
.icon-btn .od-icon { --od-icon-size: 20px; }
@media (hover: hover) { .icon-btn:hover { border-color: var(--ink); } }
.form-grid { display: grid; gap: var(--s-5); }
.err-summary { border: 2px solid var(--negative); border-radius: 8px; padding: var(--s-4); font-size: var(--fs-small); }
.err-summary b { display: block; margin-bottom: 6px; }
.err-summary a { color: var(--negative); font-weight: 500; }
.err-summary li { padding: 2px 0; }
.dlg-foot { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center; }
.dlg-foot .note { font-size: 13px; color: var(--text-muted); max-width: 30ch; }
.success { display: grid; gap: var(--s-4); justify-items: start; }
.success .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--signal); display: grid; place-items: center; }
.success .tick .od-icon { --od-icon-size: 28px; }
.success p { color: var(--text-muted); }
.spinner-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  dialog.dlg[open] { animation: dlg-in var(--dur-base) var(--ease-out); }
  .is-busy .spinner-dot { animation: blink 900ms ease-in-out infinite; }
}
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- Reveal (purposeful, short, ease-out) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* =====================================================================
   Multi-page site components (Synterra Innovations public site)
   ===================================================================== */

/* ---------- Header + dropdown nav ---------- */
.site-head { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: var(--s-5); min-height: 72px; }
.site-head .wm { font-size: 28px; flex: none; }
.menu-toggle { display: none; }
.head-panel { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.mainnav > ul { display: flex; gap: var(--s-1); }
.nav-item { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; background: none; border: 0; border-radius: var(--r-control); color: var(--ink); font-weight: 500; font-size: 0.9375rem; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.nav-trigger .od-icon, .signin .btn .od-icon { --od-icon-size: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.nav-trigger[aria-expanded="true"] .od-icon, .signin .btn[aria-expanded="true"] .od-icon { transform: rotate(180deg); }
.nav-trigger.is-current { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: 8px; }
@media (hover: hover) { .nav-trigger:hover { background: rgba(14, 27, 39, 0.07); } }
.menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 31; min-width: 264px; padding: var(--s-2); background: var(--ink); color: var(--paper); border-radius: 12px; --focus: var(--signal); }
.menu-right { left: auto; right: 0; }
.menu a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-3); border-radius: 6px; color: var(--paper); text-decoration: none; font-size: 0.9375rem; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out); }
.menu a .od-icon { --od-icon-size: 14px; color: var(--steel); }
@media (hover: hover) { .menu a:hover { background: var(--ink-2); } }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) { animation: menu-in var(--dur-fast) var(--ease-out); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.head-actions { display: flex; align-items: center; gap: var(--s-3); }

@media (max-width: 1179px) {
  .head-row { min-height: 64px; }
  .site-head .wm { font-size: 24px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: var(--r-control); background: transparent; color: var(--ink); font-weight: 600; cursor: pointer; }
  .menu-toggle .od-icon { --od-icon-size: 18px; }
  .head-panel { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--s-2) var(--gutter) var(--s-8); flex-direction: column; align-items: stretch; gap: var(--s-6); background: var(--paper); border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; }
  .site-head.is-open .head-panel { display: flex; }
  .mainnav > ul { flex-direction: column; gap: 0; }
  .mainnav .nav-item { border-bottom: 1px solid var(--line); }
  .nav-trigger { width: 100%; justify-content: space-between; min-height: 60px; padding: 0; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.01em; }
  .nav-trigger .od-icon { --od-icon-size: 20px; }
  .nav-trigger.is-current { text-underline-offset: 6px; }
  .menu { position: static; min-width: 0; padding: 0 0 var(--s-3); background: transparent; color: var(--ink); --focus: var(--ink); }
  .menu a { color: var(--ink); padding: 0 var(--s-3); font-size: 1.0625rem; white-space: normal; }
  .menu a .od-icon { color: var(--text-muted); }
  .head-actions { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .head-actions .btn { width: 100%; min-height: 52px; font-size: 1rem; }
  .signin .menu { padding-top: var(--s-2); }
  body.nav-locked { overflow: hidden; }
}

/* ---------- Generic page structure ---------- */
.eyebrow { display: block; margin-bottom: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; line-height: 1.4; color: var(--text-muted); }
.on-ink .eyebrow, .ink .eyebrow { color: var(--steel); }
.on-signal .eyebrow, .signal .eyebrow { color: var(--ink); }

.pg-hero { padding-block: clamp(48px, 7vw, 104px) clamp(56px, 7vw, 104px); }
.pg-hero.signal { background: var(--signal); color: var(--ink); --focus: var(--ink); }
.pg-hero.ink { background: var(--ink); color: var(--paper); --focus: var(--signal); }
.pg-hero h1 { max-width: 17ch; font-size: clamp(2.5rem, 1.35rem + 4.6vw, 5.25rem); line-height: 1; letter-spacing: var(--track-display); font-weight: 700; }
.pg-hero .lede { margin-top: var(--s-6); max-width: 60ch; font-size: var(--fs-body-lg); line-height: 1.55; }
.pg-hero.ink .lede { color: #C3CDD6; }
.hero-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); align-items: end; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 899px) { .hero-split { grid-template-columns: minmax(0, 1fr); } }

.sec { padding-block: clamp(64px, 8vw, 120px); }
.sec.white { background: var(--surface); }
.sec.ink { background: var(--ink); color: var(--paper); --focus: var(--signal); }
.sec.ink2 { background: var(--ink-2); color: var(--paper); --focus: var(--signal); }
.sec.signal { background: var(--signal); color: var(--ink); --focus: var(--ink); }
.sec-head { max-width: 820px; }
.sec-head h2, .sec-split h2 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: var(--track-display); font-weight: 700; }
.sec-split h3.h-sub { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--track-heading); font-weight: 700; }
.prose { display: grid; gap: var(--s-4); max-width: 64ch; margin-top: var(--s-5); }
.prose p { color: var(--text-muted); }
.ink .prose p, .ink2 .prose p { color: #C3CDD6; }
.signal .prose p { color: var(--ink); }
.prose .lead { font-size: var(--fs-body-lg); }
.sec-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.sec-split .prose { margin-top: var(--s-5); }
.sub-block { margin-top: clamp(48px, 6vw, 88px); }
@media (max-width: 899px) { .sec-split { grid-template-columns: minmax(0, 1fr); } }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- Facts card (definition list on a flat field) ---------- */
.facts-card { border-radius: var(--r-block); padding: clamp(24px, 3vw, 36px); background: var(--ink); color: var(--paper); --focus: var(--signal); }
.facts-card.paper { background: var(--surface); color: var(--ink); border: 1px solid var(--line); --focus: var(--ink); }
.sec.white .facts-card.paper { background: var(--paper); }
.fc-label { font-family: var(--font-mono); font-size: 13px; color: var(--steel); }
.facts-card.paper .fc-label { color: var(--text-muted); }
.fc-name { margin-top: var(--s-2); margin-bottom: var(--s-4); font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.facts-card dl { display: grid; }
.facts-card dl > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-4); padding: 12px 0; border-top: 1px solid rgba(155, 171, 185, 0.28); }
.facts-card dl > div:first-child { border-top: 0; }
.facts-card.paper dl > div { border-top-color: var(--line); }
.facts-card dt { color: var(--steel); font-size: var(--fs-small); line-height: 1.5; }
.facts-card.paper dt { color: var(--text-muted); }
.facts-card dd { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.facts-card dd a { color: inherit; }
.fc-note { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid rgba(155, 171, 185, 0.28); font-size: var(--fs-small); color: #C3CDD6; }
.facts-card.paper .fc-note { color: var(--text-muted); border-top-color: var(--line); }
@media (max-width: 479px) { .facts-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats > div { padding: var(--s-6) var(--s-5) var(--s-6) 0; }
.stats > div + div { padding-left: var(--s-5); border-left: 1px solid var(--ink-2); }
.stats .v { display: block; font-family: var(--font-mono); font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--paper); white-space: nowrap; }
.stats .k { display: block; margin-top: var(--s-2); color: var(--steel); font-size: var(--fs-small); }
@media (max-width: 1023px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--ink-2); }
}
@media (max-width: 479px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats > div, .stats > div + div { padding: var(--s-5) 0; border-left: 0; }
  .stats > div + div { border-top: 1px solid var(--ink-2); }
}

/* ---------- Bento tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); margin-top: clamp(40px, 5vw, 64px); }
.tiles.t3 > :nth-child(1) { grid-column: span 5; }
.tiles.t3 > :nth-child(2) { grid-column: span 4; }
.tiles.t3 > :nth-child(3) { grid-column: span 3; }
.tiles.t4 > :nth-child(4n+1), .tiles.t4 > :nth-child(4n+4) { grid-column: span 7; }
.tiles.t4 > :nth-child(4n+2), .tiles.t4 > :nth-child(4n+3) { grid-column: span 5; }
.tiles.t2 > * { grid-column: span 6; }
.tiles.t2.wide-first > :nth-child(1) { grid-column: span 7; }
.tiles.t2.wide-first > :nth-child(2) { grid-column: span 5; }
.tiles.t1 > * { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  .tiles.t3 > :nth-child(1) { grid-column: 1 / -1; }
  .tiles.t3 > :nth-child(2), .tiles.t3 > :nth-child(3) { grid-column: span 6; }
  .tiles.t4 > * { grid-column: span 6 !important; }
}
@media (max-width: 639px) { .tiles.t1 > *, .tiles.t2 > *, .tiles.t3 > *, .tiles.t4 > * { grid-column: 1 / -1 !important; } }
.tile { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-block); background: var(--surface); color: var(--ink); }
.sec.white .tile { background: var(--paper); }
.tile .num { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.tile h3 { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.tile p { color: var(--text-muted); }
.tile .more { margin-top: auto; display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; color: inherit; }
@media (hover: hover) { .tile .more:hover { text-decoration: underline; text-underline-offset: 4px; } }
.tile.ink, .sec.white .tile.ink { background: var(--ink); color: var(--paper); --focus: var(--signal); }
.tile.ink p { color: #C3CDD6; } .tile.ink .num { color: var(--steel); }
.tile.ink2, .sec.white .tile.ink2 { background: var(--ink-2); color: var(--paper); --focus: var(--signal); }
.tile.ink2 p { color: #C3CDD6; } .tile.ink2 .num { color: #C3CDD6; }
.tile.signal, .sec.white .tile.signal { background: var(--signal); color: var(--ink); --focus: var(--ink); }
.tile.signal p, .tile.signal .num { color: var(--ink); }
.tile.line { background: transparent; border: 1.5px solid var(--ink); }
.ink .tile.line { border-color: var(--steel); color: var(--paper); }
.ink .tile.line p { color: #C3CDD6; } .ink .tile.line .num { color: var(--steel); }

/* ---------- Ruled item grids (light-weight lists) ---------- */
.ruled { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s-6) var(--s-5); margin-top: clamp(40px, 5vw, 64px); }
.ruled > div { padding-top: var(--s-4); border-top: 2px solid var(--ink); min-width: 0; }
.ink .ruled > div, .ink2 .ruled > div { border-top-color: var(--signal); }
.ruled h3, .ruled b { display: block; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }
.ruled .num { display: block; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.ink .ruled .num, .ink2 .ruled .num { color: var(--steel); }
.ruled p { margin-top: var(--s-2); color: var(--text-muted); }
.ink .ruled p, .ink2 .ruled p { color: #C3CDD6; }
@media (max-width: 1023px) { .ruled { --cols: 2 !important; } }
@media (max-width: 599px) { .ruled { --cols: 1 !important; } }

/* ---------- Steps (labels from copy) ---------- */
.step-l { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-muted); }
.steps .step:last-child .step-l { color: var(--ink); }

/* ---------- Rate boards ---------- */
.board { padding: clamp(24px, 3vw, 48px); border-radius: var(--r-block); background: var(--surface); }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.board-head h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: var(--track-heading); font-weight: 700; }
.badge-ill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.tablist { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.tab { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-control); background: transparent; color: var(--ink); font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) { .tab:not([aria-selected="true"]):hover { border-color: var(--ink); } }
.board-desc { margin: var(--s-5) 0 var(--s-4); color: var(--text-muted); }
.board-notes { display: grid; gap: var(--s-3); max-width: 84ch; margin-top: var(--s-5); font-size: var(--fs-small); color: var(--text-muted); }

/* ---------- Tables (scroll inside their own container) ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sec.white .table-scroll, .board .table-scroll { background: var(--surface); }
.rt { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 0.9375rem; }
.rt.wide { min-width: 760px; }
.rt th { padding: 12px 20px; background: var(--paper); border-bottom: 1px solid var(--line); text-align: left; vertical-align: bottom; font-weight: 600; font-size: 13px; line-height: 1.35; color: var(--ink); }
.rt th small { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-muted); }
.rt td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rt tr:last-child td { border-bottom: 0; }
.rt .n { text-align: right; white-space: nowrap; font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.rt th.n { font-family: var(--font-sans); }
.rt td.pair { white-space: nowrap; font-family: var(--font-mono); font-weight: 600; }
.rt td.track { font-weight: 650; min-width: 220px; }
.scroll-hint { display: none; margin-top: var(--s-2); font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* ---------- Worked example ---------- */
.formula { font-family: var(--font-mono); font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }

/* ---------- Post.Cash cheque (flat graphic, source text) ---------- */
.cheque { display: grid; gap: var(--s-4); padding: clamp(20px, 2.4vw, 32px); border-radius: 12px; background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 13.5px; line-height: 1.5; }
.cheque-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--ink); font-weight: 600; }
.cheque-amt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.cheque-amt b { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); font-weight: 500; letter-spacing: -0.02em; }
.cheque-amt span { padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: var(--r-control); }
.cheque-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--field-border); }
.stamp { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-control); background: var(--signal); color: var(--ink); font-weight: 700; }

/* ---------- FAQ disclosure ---------- */
.faq { max-width: 920px; margin-top: clamp(40px, 5vw, 64px); border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding: var(--s-4) 0; list-style: none; cursor: pointer; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .od-icon { --od-icon-size: 20px; transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary .od-icon { transform: rotate(180deg); }
.faq .ans { max-width: 72ch; padding: 0 0 var(--s-6); color: var(--text-muted); }
@media (hover: hover) { .faq summary:hover .q { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 5px; } }
@media (prefers-reduced-motion: no-preference) { .faq details[open] .ans { animation: menu-in var(--dur-base) var(--ease-out); } }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.chips li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: var(--r-pill); font-weight: 600; }

/* ---------- People ---------- */
.person .who { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; }
.person .sub { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-top: calc(-1 * var(--s-2)); }
.tile.ink .person-sub, .tile.ink .sub { color: var(--steel); }

/* ---------- The mark ---------- */
.mark-tile { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--s-6); border-radius: var(--r-block); background: var(--signal); color: var(--ink); }
.mark-tile .wm { font-size: clamp(48px, 7vw, 104px); }
.mark-tile .wm-mark { background: var(--ink); }

/* ---------- Contact rows ---------- */
.mail-rows { margin-top: clamp(40px, 5vw, 64px); border-top: 2px solid var(--ink); }
.mail-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: var(--s-3) var(--s-6); align-items: baseline; padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.mail-row .num { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.mail-row h3 { font-size: clamp(1.25rem, 0.95rem + 1vw, 1.875rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; overflow-wrap: anywhere; }
.mail-row h3 a { text-decoration: none; }
@media (hover: hover) { .mail-row h3 a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: 6px; } }
.mail-row p { color: var(--text-muted); }
@media (max-width: 899px) { .mail-row { grid-template-columns: minmax(0, 1fr); } }
.address { font-style: normal; line-height: 1.6; }

/* ---------- Legal ---------- */
.notice { display: grid; gap: var(--s-2); padding: var(--s-5); border-radius: 12px; background: #FBE9C9; color: #4D3100; }
.notice b { font-weight: 700; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.toc { position: sticky; top: 96px; }
.toc ol { display: grid; margin-top: var(--s-3); border-top: 2px solid var(--ink); }
.toc a { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 0.9375rem; }
.toc a span { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); min-width: 2ch; }
@media (hover: hover) { .toc a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.clauses { display: grid; }
.clause { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.clause:first-child { border-top: 0; padding-top: 0; }
.clause-n { font-family: var(--font-mono); font-size: 1.25rem; line-height: 1.4; color: var(--ink); }
.clause h2 { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.clause .prose { margin-top: var(--s-4); max-width: 70ch; }
.clause ul { display: grid; gap: var(--s-2); padding-left: 1.25em; list-style: disc; color: var(--text-muted); }
.legal-sign { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 2px solid var(--ink); font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
@media (max-width: 899px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
  .clause { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); }
}
@media (max-width: 379px) { .toc ol { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Site footer ---------- */
.sf { padding-block: var(--s-9) var(--s-6); background: var(--ink); color: var(--paper); --focus: var(--signal); }
.sf-top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: var(--s-6); }
.sf .wm { font-size: 36px; color: var(--paper); }
.sf-blurb { margin-top: var(--s-4); max-width: 42ch; font-size: var(--fs-small); color: var(--steel); }
.sf h2 { margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--steel); }
.sf ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); text-decoration: none; font-size: 0.9375rem; }
@media (hover: hover) { .sf ul a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.sf-disclaimer { max-width: 92ch; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--ink-2); font-size: var(--fs-small); color: var(--steel); }
.sf-legal { display: grid; gap: 4px; margin-top: var(--s-4); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--steel); }
@media (max-width: 899px) { .sf-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 599px) { .sf-top { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }
.ink-band { background: var(--ink); color: var(--paper); --focus: var(--signal); }
@media (max-width: 767px) {
  .rt th:first-child, .rt td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .rt th:first-child { background: var(--paper); }
  .rt td.track { min-width: 168px; }
}