/* OnWallet Genesis: the site layer.
 *
 * Loaded after vendor/tokens/styles.css (the OpenApps tokens and base layer).
 * Every colour, size and duration here is a token; the only literals are the
 * breakpoints (custom properties do not work in media conditions) and a few
 * geometry values the house standard gives as numbers.
 *
 * Type A site ("the app on the page"): one ground from header to footer,
 * following the visitor's colour scheme through `oa-auto` on <html>.
 */

:root {
  /* OnWallet claims accent slot 30 (amethyst). One slot per application.
     It is used for the wordmark's full stop, the brand tile and 16% chips. */
  --accent: var(--accent-30);
  --logo-dot: var(--accent);
  --accent-chip: color-mix(in oklab, var(--accent) 16%, transparent);

  --container-max: 1200px;
  --gutter-page-lg: 48px;
  --header-height: 64px;
}

html {
  background: var(--bg-page);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html.i18n-pending body { visibility: hidden; }

body { min-height: 100vh; overflow-wrap: anywhere; }

/* Only 400 and 500 ship: a browser-default bold would be synthesised. */
b, strong { font-weight: var(--weight-medium); color: var(--text-strong); }

/* Chinese headings break at punctuation, not in the middle of a phrase. */
:lang(zh-Hans) :is(h1, h2, h3, dt) { word-break: keep-all; }
:lang(zh-Hans) .section-head { max-width: 760px; }

.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;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 60;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-inverse); color: var(--text-inverse); font: var(--type-ui);
}
.skip-link:focus { top: var(--space-3); text-decoration: none; color: var(--text-inverse); }

.container {
  max-width: var(--container-max); margin: 0 auto;
  padding-inline: var(--gutter-page-lg);
}
@media (max-width: 900px) {
  .container { padding-inline: var(--space-6); }
}
@media (max-width: 430px) {
  .container { padding-inline: var(--space-4); }
}

/* Links inside running text are underlined: colour alone does not mark them. */
main p a, main li a, main dd a, main td a, .site-footer p a {
  text-decoration: underline; text-decoration-color: var(--border-strong);
}
main p a:hover, main li a:hover, main dd a:hover, main td a:hover { text-decoration-color: currentColor; }

/* A name or an address quoted in running text: mono, and never broken at its hyphen. */
.mono { font-family: var(--font-mono); font-size: 0.94em; white-space: nowrap; color: var(--text-body); }

code {
  padding: 1px 5px; border-radius: var(--radius-xs);
  background: var(--surface-hover); color: var(--text-strong);
  overflow-wrap: anywhere;
}

/* ---- Icons: vendored Lucide, tinted with the text colour ------------------- */
.icon {
  display: inline-block; flex: 0 0 auto; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-wallet { --icon: url("icons/wallet.svg"); }
.icon-globe { --icon: url("icons/globe.svg"); }
.icon-check { --icon: url("icons/check.svg"); }
.icon-circle-check { --icon: url("icons/circle-check.svg"); }
.icon-circle-x { --icon: url("icons/circle-x.svg"); }
.icon-ban { --icon: url("icons/ban.svg"); }
.icon-lock { --icon: url("icons/lock.svg"); }
.icon-clock { --icon: url("icons/clock.svg"); }
.icon-copy { --icon: url("icons/copy.svg"); }
.icon-search { --icon: url("icons/search.svg"); }
.icon-triangle-alert { --icon: url("icons/triangle-alert.svg"); }
.icon-info { --icon: url("icons/info.svg"); }
.icon-mail { --icon: url("icons/mail.svg"); }
.icon-shield-check { --icon: url("icons/shield-check.svg"); }
.icon-key-round { --icon: url("icons/key-round.svg"); }
.icon-badge-check { --icon: url("icons/badge-check.svg"); }
.icon-at-sign { --icon: url("icons/at-sign.svg"); }
.icon-coins { --icon: url("icons/coins.svg"); }

.spinner {
  display: inline-block; flex: 0 0 auto; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("icons/loader-circle.svg") center / contain no-repeat;
  mask: url("icons/loader-circle.svg") center / contain no-repeat;
  animation: oa-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 42px; padding: 0 var(--space-5); border-radius: var(--radius-md);
  font: var(--type-ui); white-space: nowrap; border: 1px solid transparent;
  cursor: pointer; transition: var(--transition-control); text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn-primary { background: var(--brand); color: var(--brand-contrast); }
.btn-primary:hover { background: var(--green-400); color: var(--brand-contrast); }
.btn-primary:active { background: var(--green-600); }
.btn-secondary {
  background: var(--surface-card); color: var(--text-strong);
  border-color: var(--border-strong); box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--surface-hover); color: var(--text-strong); }
.btn-secondary:active { background: var(--surface-active); }
/* Destructive: the tint and the rule carry the colour, the label stays at
   full strength (red text on a red tint is 4.1:1 on the dark ground). */
.btn-danger { background: var(--danger-bg); color: var(--text-strong); border-color: var(--danger-fg); }
.btn-danger:hover { background: var(--surface-hover); color: var(--text-strong); }
.btn-sm { height: 38px; padding: 0 var(--space-4); }
.btn-lg { height: 48px; padding: 0 var(--space-6); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- Header: 1200 / 64 / sticky ------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg-page) 82%, transparent);
  backdrop-filter: var(--blur-panel); -webkit-backdrop-filter: var(--blur-panel);
  border-bottom: 1px solid var(--border-hairline);
}
.site-header .container {
  display: flex; align-items: center; gap: 32px; height: var(--header-height);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--logo-fg); }
.brand:hover { text-decoration: none; color: var(--logo-fg); }
.brand-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--accent); color: var(--white);
}
.brand-tile .icon { width: 15px; height: 15px; }
.brand-word {
  font: var(--weight-medium) var(--text-md) / 1 var(--font-display);
  letter-spacing: var(--logo-tracking); color: var(--logo-fg);
}
.brand-word .muted { color: var(--text-muted); }
.brand-word .dot { color: var(--logo-dot); }

.site-nav { display: flex; gap: 24px; flex: 1; }
.site-nav a {
  font: var(--type-ui); color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}
.site-nav a:hover { color: var(--text-strong); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 20px; }
.header-actions > a:not(.btn) { font: var(--type-ui); color: var(--text-muted); }
.header-actions > a:not(.btn):hover { color: var(--text-strong); text-decoration: none; }

/* The language control: a bordered button with a globe and the locale's short
   label, opening a menu of endonyms. A native <details>, so it works from the
   keyboard with no script. */
.lang { position: relative; }
.lang > summary {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font: var(--type-ui); color: var(--text-strong); cursor: pointer; list-style: none;
  transition: var(--transition-control);
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { background: var(--surface-hover); }
.lang > summary .icon { color: var(--text-muted); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 168px;
  margin: 0; padding: var(--space-1); list-style: none;
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.lang-menu a {
  display: flex; align-items: center; gap: var(--space-2); min-height: 44px;
  padding: 0 var(--space-3); border-radius: var(--radius-sm);
  font: var(--type-ui); color: var(--text-body);
}
.lang-menu a:hover { background: var(--surface-hover); text-decoration: none; color: var(--text-strong); }
.lang-menu a .icon { visibility: hidden; }
.lang-menu a[aria-current="true"] { color: var(--text-strong); }
.lang-menu a[aria-current="true"] .icon { visibility: visible; }

@media (max-width: 760px) {
  .site-header .container { flex-wrap: wrap; height: auto; padding-block: 10px 0; gap: 0 16px; }
  .site-nav {
    order: 3; flex-basis: 100%; gap: 4px; padding-block: 0;
    overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--space-6) * -1); padding-inline: calc(var(--space-6) - 8px);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
  .header-actions { margin-left: auto; gap: 12px; }
  .brand { min-height: 44px; }
  .lang > summary { height: 44px; }
  .btn, .btn-sm { height: 44px; }
  .btn-lg { height: 48px; }
}
@media (max-width: 600px) {
  .lang-menu { right: auto; left: 0; }
}
@media (max-width: 430px) {
  .header-actions > a:not(.btn) { display: none; }
  .site-nav { margin-inline: calc(var(--space-4) * -1); padding-inline: calc(var(--space-4) - 8px); }
  .header-actions .btn { padding: 0 var(--space-3); }
}

/* ---- Rhythm: 96 desktop, 56 phone, a hairline between sections ------------- */
main > section { padding-block: var(--space-24); border-top: 1px solid var(--border-hairline); }
main > section.hero, main > section.app { border-top: 0; }
section, .hero, [id] { scroll-margin-top: 5.5rem; }
@media (max-width: 900px) {
  main > section { padding-block: var(--space-14); }
}
@media (max-width: 760px) {
  section, .hero, [id] { scroll-margin-top: 8rem; }
}

.eyebrow {
  display: block; font: var(--type-eyebrow); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted);
}
.section-head { max-width: 640px; display: grid; gap: 12px; margin-bottom: var(--space-10); }
.section-head h2 { font: var(--type-h2); letter-spacing: var(--tracking-heading); text-wrap: balance; }
.section-head p { font: var(--type-body-lg); color: var(--text-muted); max-width: var(--container-prose); }
@media (max-width: 600px) {
  .section-head h2 { font: var(--weight-medium) var(--text-xl) / 1.2 var(--font-display); }
}

/* ---- Hero: no buttons; the search below it is the call to action ----------- */
main > section.hero { padding-block: var(--space-20) var(--space-10); }
.hero-inner { display: grid; justify-items: center; text-align: center; gap: var(--space-5); }
.hero h1 {
  max-width: 820px; letter-spacing: var(--tracking-display); text-wrap: balance;
  font: var(--weight-medium) clamp(36px, 6vw, var(--text-4xl)) / 1.04 var(--font-display);
}
.hero .lead { max-width: 600px; font: var(--type-body-lg); color: var(--text-muted); text-wrap: balance; }
.hero-note { font: var(--type-caption); color: var(--text-faint); max-width: 600px; }
.hero-note time { color: var(--text-muted); font-family: var(--font-mono); }
@media (max-width: 900px) {
  main > section.hero { padding-block: var(--space-12) var(--space-8); }
}

/* ---- The app: search, verdict, reserve flow, counter ----------------------- */
main > section.app { padding-block: var(--space-2) var(--space-20); }
@media (max-width: 900px) {
  main > section.app { padding-block: var(--space-2) var(--space-14); }
}
.app-inner { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--space-4); }

.oa-label { display: block; font: var(--type-ui); color: var(--text-strong); margin-bottom: var(--space-2); }
.oa-hint { font: var(--type-caption); color: var(--text-muted); margin-top: var(--space-2); }

.oa-field {
  display: flex; align-items: center; gap: var(--space-2);
  height: 56px; padding: 0 var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  transition: var(--transition-control);
}
.oa-field:focus-within { box-shadow: var(--focus-ring); border-color: var(--border-focus); }
.oa-field .icon { width: 18px; height: 18px; color: var(--text-faint); }
.oa-field input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
  font: var(--weight-regular) var(--text-lg) / 1 var(--font-mono); color: var(--text-strong);
}
.oa-field input:focus-visible { box-shadow: none; }
.oa-field input::placeholder { color: var(--text-faint); }
.oa-field-suffix { font: var(--weight-regular) var(--text-lg) / 1 var(--font-mono); color: var(--text-muted); }

.oa-input {
  display: block; width: 100%; height: 48px; padding: 0 var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); font: var(--type-body); color: var(--text-strong);
  transition: var(--transition-control);
}
.oa-input:focus-visible { border-color: var(--border-focus); }
.oa-input[aria-invalid="true"] { border-color: var(--danger-fg); }
.oa-input--mono { font-family: var(--font-mono); font-size: var(--text-sm); }
textarea.oa-input { display: block; height: auto; min-height: 96px; padding-top: var(--space-3); padding-bottom: var(--space-3); line-height: 1.5; resize: vertical; overflow-wrap: anywhere; }
textarea.oa-input--short { min-height: 72px; }

.oa-verdict-region:empty { display: none; }
.oa-verdict {
  display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); animation: oa-fade-up var(--duration-base) var(--ease-out);
}
.oa-verdict-badge {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  height: 26px; padding: 0 10px; border-radius: var(--radius-full);
  font: var(--type-ui); color: var(--text-strong); background: var(--surface-active);
}
.oa-verdict--ok .oa-verdict-badge { background: var(--success-bg); }
.oa-verdict--ok .oa-verdict-badge .icon { color: var(--success-fg); }
.oa-verdict--warn .oa-verdict-badge { background: var(--warning-bg); }
.oa-verdict--warn .oa-verdict-badge .icon { color: var(--warning-fg); }
.oa-verdict--bad .oa-verdict-badge { background: var(--danger-bg); }
.oa-verdict--bad .oa-verdict-badge .icon { color: var(--danger-fg); }
.oa-verdict--info .oa-verdict-badge .icon { color: var(--text-muted); }
.oa-verdict-text { color: var(--text-body); }
.oa-verdict-text b, .oa-panel b { font-weight: var(--weight-medium); color: var(--text-strong); font-family: var(--font-mono); font-size: 0.95em; }
.oa-verdict-more { font: var(--type-caption); color: var(--text-muted); max-width: var(--container-prose); }
.oa-verdict-more .placeholder { font: inherit; }
.oa-verdict-actions, .oa-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.oa-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.oa-suggest-label { font: var(--type-caption); color: var(--text-muted); margin-right: var(--space-1); }
.oa-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-full);
  background: var(--surface-card); color: var(--text-strong);
  font: var(--weight-regular) var(--text-sm) / 1 var(--font-mono); cursor: pointer;
  transition: var(--transition-control);
}
.oa-chip:hover { background: var(--surface-hover); }
@media (max-width: 760px), (pointer: coarse) {
  .oa-chip { min-height: 44px; }
}

.oa-note {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font: var(--type-caption); color: var(--text-muted);
}
.oa-note .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--text-faint); }

.oa-panel {
  display: grid; gap: var(--space-4); padding: var(--space-6);
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
}
.oa-panel[hidden] { display: none; }
.oa-panel form { display: grid; gap: var(--space-4); }
.oa-panel form .oa-label { margin-bottom: calc(var(--space-2) * -1); }
.oa-panel form .oa-hint { margin-top: calc(var(--space-2) * -1); }
.oa-panel-title {
  display: flex; align-items: center; gap: var(--space-2);
  font: var(--type-h4); color: var(--text-strong); outline: none; overflow-wrap: anywhere;
}
.oa-panel-title .icon { width: 20px; height: 20px; color: var(--text-muted); }
/* The title takes focus when a step changes, so a screen reader announces it.
   It is not a control, so it draws no ring. */
.oa-panel-title:focus-visible { box-shadow: none; }
.oa-problem { display: grid; gap: var(--space-4); }
.oa-problem--warn .oa-panel-title .icon { color: var(--warning-fg); }
.oa-problem--bad .oa-panel-title .icon { color: var(--danger-fg); }

.oa-steps { display: flex; gap: var(--space-5); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.oa-step { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-caption); color: var(--text-muted); }
.oa-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); font: var(--weight-regular) var(--text-xs) / 1 var(--font-mono);
  color: var(--text-muted);
}
.oa-step-n .icon { width: 12px; height: 12px; }
.oa-step--current { color: var(--text-strong); font-weight: var(--weight-medium); }
.oa-step--current .oa-step-n { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-inverse); }
.oa-step--done .oa-step-n { color: var(--text-strong); }

/* The field people leave empty. Off-screen rather than display:none, which
   some form-filling scripts skip. */
.oa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.oa-check { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text-body); cursor: pointer; min-height: 44px; }
.oa-check input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--text-strong);  /* checked is black, not green: green means action */
}
.oa-error { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--danger-fg); font: var(--type-ui); }
.oa-error .icon { margin-top: 1px; }
.oa-busy { display: flex; gap: var(--space-3); align-items: center; color: var(--text-body); }
.oa-list { display: grid; gap: var(--space-2); color: var(--text-body); }
main > section .container > .oa-list { margin-top: var(--space-8); max-width: 54rem; }
.more-link { margin-top: var(--space-6); font: var(--type-ui); }

.oa-code {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-5); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); background: var(--bg-subtle);
}
.oa-code-label { grid-column: 1 / -1; font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.oa-code-value {
  font: var(--weight-regular) clamp(24px, 7vw, var(--text-2xl)) / 1.1 var(--font-mono);
  letter-spacing: 0.04em; color: var(--text-strong); user-select: all;
}
@media (max-width: 480px) {
  .oa-code { grid-template-columns: 1fr; }
  .oa-code .btn { justify-self: start; }
}
.oa-facts { display: grid; gap: var(--space-2); margin: 0; }
.oa-facts > div { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-3); }
.oa-facts dt { font: var(--type-caption); color: var(--text-muted); padding-top: 2px; }
.oa-facts dd { margin: 0; color: var(--text-body); }
.oa-next-title { font: var(--type-ui); color: var(--text-strong); }
.oa-next { display: grid; gap: var(--space-2); color: var(--text-body); }

.oa-dev {
  display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-4);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  font: var(--type-caption); color: var(--text-muted);
}

/* The counter */
.oa-counter[hidden] { display: none; }
.oa-counter { margin-top: var(--space-6); }
.oa-stats, .oa-counter[data-state="loading"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.oa-stat {
  display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: var(--surface-card);
}
.oa-stat-n { font: var(--weight-regular) var(--text-xl) / 1.1 var(--font-mono); color: var(--text-strong); }
.oa-stat-l { font: var(--type-caption); color: var(--text-muted); }
.oa-stat-note { margin-top: var(--space-3); font: var(--type-caption); color: var(--text-faint); text-align: center; }
.oa-stat--skeleton { min-height: 76px; }
.oa-stat--skeleton span { display: block; height: 14px; border-radius: var(--radius-xs); background: var(--surface-active); }
.oa-stat--skeleton span:first-child { width: 48%; height: 22px; }
.oa-stat--skeleton span:last-child { width: 80%; }
@media (max-width: 600px) {
  .oa-stats, .oa-counter[data-state="loading"] { grid-template-columns: 1fr; }
  .oa-stat { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-3); }
}

/* ---- Content blocks -------------------------------------------------------- */
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-14); margin: 0; padding: 0; list-style: none; counter-reset: reason; }
.reasons li {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--space-1) var(--space-3);
  padding: var(--space-5) 0; border-top: 1px solid var(--border-hairline); counter-increment: reason;
}
.reasons li::before {
  content: counter(reason, decimal-leading-zero); grid-row: 1 / span 2;
  font: var(--weight-regular) var(--text-lg) / 1.3 var(--font-mono); color: var(--text-faint);
}
.reasons h3 { font: var(--weight-medium) var(--text-md) / 1.3 var(--font-sans); letter-spacing: var(--tracking-body); }
.reasons p { grid-column: 2; color: var(--text-muted); }
@media (max-width: 900px) {
  .reasons { grid-template-columns: 1fr; }
}

.fineprint {
  margin-top: var(--space-8); padding: var(--space-4) var(--space-5); max-width: var(--container-prose);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--text-body); font: var(--type-body);
}
.fineprint strong { font-weight: var(--weight-medium); color: var(--text-strong); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.step, .card {
  display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5);
  background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
}
.step-chip {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--radius-md); background: var(--accent-chip); color: var(--text-strong);
}
.step-chip .icon { width: 18px; height: 18px; }
.step-n { font: var(--type-mono); color: var(--text-faint); }
.step h3, .card h3 { font: var(--weight-medium) var(--text-md) / 1.3 var(--font-sans); letter-spacing: var(--tracking-body); }
.step p, .card p { color: var(--text-muted); }
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
}

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

.callout {
  display: grid; gap: var(--space-2); padding: var(--space-6); margin-bottom: var(--space-8);
  background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  max-width: 54rem;
}
.callout p { font: var(--type-body-lg); color: var(--text-strong); }
.callout p + p { color: var(--text-body); }

.ledger-list { margin: var(--space-8) 0 0; display: grid; gap: 0; max-width: 54rem; }
.ledger-list > div {
  display: grid; grid-template-columns: 160px 1fr; gap: var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline);
}
.ledger-list > div:last-child { border-bottom: 1px solid var(--border-hairline); }
.ledger-list dt { font: var(--type-mono); color: var(--text-strong); }
.ledger-list dd { margin: 0; color: var(--text-muted); }
@media (max-width: 600px) {
  .ledger-list > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

.warn-line {
  display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-8); max-width: 54rem;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--warning-bg); color: var(--text-strong);
}
.warn-line .icon { margin-top: 3px; color: var(--warning-fg); }

/* Tables restack below 640: what it is, then the value under it. */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-4) var(--space-4) 0; border-top: 1px solid var(--border-hairline); }
.table thead td { border-top: 0; }
.table thead th { border-top: 0; padding-block: 0 var(--space-3); font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 1px solid var(--border-hairline); }
.table tbody th { font: var(--weight-medium) var(--text-base) / var(--leading-normal) var(--font-sans); color: var(--text-strong); width: 28%; }
.table td { color: var(--text-body); }
.table .num { font-family: var(--font-mono); color: var(--text-strong); white-space: nowrap; }
@media (max-width: 640px) {
  .table thead { display: none; }
  .table tr { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-top: 1px solid var(--border-hairline); }
  .table th, .table td, .table tbody tr:last-child th, .table tbody tr:last-child td { border: 0; padding: 0; width: auto; }
  .table tbody tr:last-child { border-bottom: 1px solid var(--border-hairline); }
  .table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); font: var(--type-caption); }
}
.subhead { font: var(--type-h4); margin: var(--space-12) 0 var(--space-5); }

/* FAQ: questions and answers both visible, not an accordion. */
.faq-list { margin: 0; border-top: 1px solid var(--border-hairline); }
.faq-item { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--border-hairline); }
.faq-item dt { font: var(--weight-medium) var(--text-md) / 1.3 var(--font-sans); color: var(--text-strong); }
.faq-item dd { margin: 0; font: var(--type-body); color: var(--text-muted); }
@media (max-width: 760px) {
  .faq-item { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
}

/* The one filled panel on the page: the closing call. */
.cta-panel {
  display: grid; justify-items: center; text-align: center; gap: var(--space-5);
  padding: var(--space-16) var(--space-6); border-radius: var(--radius-xl);
  background: var(--surface-card); border: 1px solid var(--border-hairline);
}
.cta-panel h2 { font: var(--type-h2); letter-spacing: var(--tracking-heading); text-wrap: balance; max-width: 640px; }
.cta-panel p { color: var(--text-muted); max-width: 520px; }

/* ---- Footer ---------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border-hairline); }
.site-footer > .container {
  padding-block: 56px 32px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px;
}
.footer-about { display: grid; gap: var(--space-3); align-content: start; }
.footer-about p { color: var(--text-muted); font: var(--type-caption); max-width: 34ch; }
.footer-group { display: flex; flex-direction: column; gap: 10px; }
.footer-group a, .footer-group span:not(.eyebrow) { color: var(--text-muted); font: var(--type-ui); }
.footer-group a:hover { color: var(--text-strong); }
.footer-group a[aria-disabled="true"] { color: var(--text-faint); }
.footer-base { border-top: 1px solid var(--border-hairline); }
.footer-base .container {
  padding-block: 20px 40px; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font: var(--type-caption); color: var(--text-muted);
}
.footer-base span { max-width: 60ch; }
@media (max-width: 900px) {
  .site-footer > .container { grid-template-columns: repeat(3, 1fr); }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .site-footer > .container { grid-template-columns: repeat(2, 1fr); }
  .footer-group a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-group { gap: 0; }
  .footer-group .eyebrow { margin-bottom: var(--space-2); }
}

/* ---- Sub-pages: the same chrome, a prose column in the middle -------------- */
.doc { max-width: 46rem; padding-block: var(--space-12) var(--space-20); }
.doc-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.doc-head h1 { font: var(--type-h1); letter-spacing: var(--tracking-display); text-wrap: balance; }
.doc-head p { font: var(--type-body-lg); color: var(--text-muted); }
.doc h2 { font: var(--type-h3); letter-spacing: var(--tracking-heading); margin: var(--space-12) 0 var(--space-4); }
.doc h3 { font: var(--type-h4); margin: var(--space-8) 0 var(--space-3); }
.doc h4 { font: var(--weight-medium) var(--text-md) / 1.3 var(--font-sans); margin: var(--space-6) 0 var(--space-2); }
.doc p, .doc ul, .doc ol, .doc dl, .doc pre, .doc .table-wrap { margin: 0 0 var(--space-4); }
.doc li { margin-bottom: var(--space-2); }
.doc li > p { margin: 0; }
.doc strong { font-weight: var(--weight-medium); color: var(--text-strong); }
.doc pre {
  padding: var(--space-4); overflow-x: auto; border-radius: var(--radius-md);
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  font: var(--type-mono); color: var(--text-strong); overflow-wrap: normal;
}
.doc pre code { padding: 0; background: none; overflow-wrap: normal; }
.doc .table { min-width: 34rem; font-size: var(--text-sm); }
.doc .table th, .doc .table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; }
/* Row headings in the legal tables are often a whole clause: regular weight reads better. */
.doc .table tbody th { font: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-sans); color: var(--text-strong); }
.doc .table thead th { font: var(--type-eyebrow); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-strong); }
@media (max-width: 640px) {
  /* Prose tables keep their columns and scroll inside their own wrapper. */
  .doc .table thead { display: table-header-group; }
  .doc .table tr { display: table-row; padding: 0; border: 0; }
  .doc .table th, .doc .table td { display: table-cell; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-top: 1px solid var(--border-hairline); }
}

.draft-banner {
  display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--warning-bg); border: 1px solid var(--warning-fg); color: var(--text-strong);
}
.draft-banner .icon { margin-top: 3px; color: var(--warning-fg); }
.draft-banner strong { font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); }
.draft-banner p { margin: 0; }
.draft-mark {
  display: inline-block; padding: 0 6px; border-radius: var(--radius-xs);
  background: var(--warning-bg); color: var(--text-strong); font: var(--type-caption);
}

.placeholder {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs);
  border: 1px dashed var(--border-strong); color: var(--text-muted);
  font: var(--type-caption); background: var(--surface-hover);
}
.placeholder-note { color: var(--text-faint); font: var(--type-caption); }
.kv { display: grid; gap: 0; margin: 0 0 var(--space-6); }
.kv > div { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline); }
.kv > div:last-child { border-bottom: 1px solid var(--border-hairline); }
.kv dt { color: var(--text-strong); font: var(--type-ui); padding-top: 2px; }
.kv dd { margin: 0; color: var(--text-body); font-family: var(--font-mono); font-size: var(--text-sm); }
.kv dd .placeholder { font-family: var(--font-sans); }
@media (max-width: 600px) {
  .kv > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.two-col .card ul { padding-left: 1.15em; margin: 0; color: var(--text-muted); }
@media (max-width: 760px) {
  .two-col { grid-template-columns: 1fr; }
}

.checker { display: grid; gap: var(--space-4); padding: var(--space-5); margin-bottom: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); }
.checker .oa-label { margin-bottom: var(--space-2); }
.checker .oa-hint { margin-top: var(--space-2); }
.checker .oa-actions { margin: 0; }
.checker-pair { display: grid; grid-template-columns: 1fr 200px; gap: var(--space-4); align-items: start; }
@media (max-width: 640px) { .checker-pair { grid-template-columns: 1fr; } }
.oa-check-result { display: flex; gap: var(--space-2); align-items: flex-start; font: var(--type-ui); color: var(--text-strong); margin: 0 0 var(--space-3); }
.oa-check-result--bad { color: var(--danger-fg); }
.oa-check-result .icon { flex: none; margin-top: 2px; }
.oa-check-row dd code { overflow-wrap: anywhere; }
.oa-check-list { display: grid; margin: 0; }
.oa-check-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline); }
.oa-check-row dt { font: var(--type-ui); color: var(--text-muted); }
.oa-check-row dd { margin: 0; color: var(--text-body); }
.oa-check-row--ok dd { color: var(--text-strong); }
.oa-check-row--bad dd { color: var(--danger-fg); }
@media (max-width: 600px) {
  .oa-check-row { grid-template-columns: 1fr; gap: var(--space-1); }
}