/* ============================================================
   aithne.online — "The Ember in the Wallet" (Option A)
   Design source: JAL-63 design-direction (2.1 tokens, 2.2 type,
   2.3 spacing/grid, 2.4 iconography, 2.5 motion) + approved
   Option A prototype. Semantics roles only — never raw hex.
   Zero-PII: no forms, no trackers, no external requests.
   ============================================================ */

:root{
  /* Aithne — deep teal-navy base */
  --teal-950:#061A21; --teal-900:#0A2631; --teal-800:#0E3542; --teal-700:#144857;
  --teal-600:#1B5C6E; --teal-500:#247789; --teal-400:#3E97A9; --teal-300:#7BBCC9;
  --teal-200:#AAD8E0; --teal-100:#D4EDF1; --teal-50:#EAF7F8;
  /* Aithne — ember accent */
  --ember-700:#A34516; --ember-600:#B4501B; --ember-500:#D96A2B; --ember-400:#E5833F; --ember-300:#F0A66D;
  --ember-200:#F7CBA3; --ember-100:#FCE9DA; --ember-50:#FDF4EC;
  /* Aithne — neutrals */
  --grey-50:#F6F8F9; --grey-100:#EDF0F2; --grey-200:#DCE1E5; --grey-300:#C2C9CF;
  --grey-400:#9AA6AF; --grey-500:#77848F; --grey-600:#5C6873; --grey-700:#47525C;
  --grey-800:#2F3942; --grey-900:#1B232A;
  /* Functional (status only) */
  --verified:#2E7D5B; --warn:#A06A00; --error:#B4323C;

  /* Semantic role map — components reference these only */
  --bg:var(--grey-50); --bg-dark:var(--teal-950); --surface:var(--grey-100);
  --surface-dark:var(--teal-900); --ink:var(--grey-900); --ink-muted:var(--grey-600);
  --brand:var(--teal-600); --brand-hover:var(--teal-500); --accent:var(--ember-600);
  --accent-soft:var(--ember-500); --accent-strong:var(--ember-700); --ink-on-dark:#F2FBFC; --ink-on-dark-muted:var(--teal-200);
  --line:var(--grey-200); --line-dark:var(--teal-700); --focus-ring:var(--teal-400);

  /* Type */
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale */
  --text-display:clamp(2.5rem,7vw,4rem); --text-display-lh:1.05;
  --text-h1:clamp(2rem,5vw,2.75rem);      --text-h1-lh:1.15;
  --text-h2:clamp(1.5rem,3.5vw,2rem);     --text-h2-lh:1.25;
  --text-h3:clamp(1.25rem,2vw,1.5rem);    --text-h3-lh:1.3;

  /* Spacing (8pt scale: 4..128) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --sp-12:48px; --sp-16:64px; --sp-24:96px; --sp-32:128px;

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(6,26,33,0.06);
  --shadow-md:0 4px 12px rgba(6,26,33,0.08);
  --ease:cubic-bezier(0.2,0,0,1);
  --maxlen:38rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:var(--font-body); font-size:1rem; line-height:1.7;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Self-hosted fonts — zero third-party requests */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900;
  font-display:swap;
  src:url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
  font-named-instance:"Normal";
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900;
  font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-named-instance:"Normal";
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

a{color:var(--brand-hover); text-decoration-thickness:from-font; text-underline-offset:3px}
a:hover{color:var(--brand); text-decoration:underline}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:4px;
}
button{font:inherit}
code,pre,kbd{font-family:var(--font-mono)}
code{font-size:0.88em}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 16px; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0}

.container{max-width:72rem; margin-inline:auto; padding-inline:16px; width:100%}
@media(min-width:768px){.container{padding-inline:32px}}
.site-width{max-width:var(--maxlen)}
.center{text-align:center}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(6,26,33,0.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-dark);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink-on-dark); min-height:44px}
.brand:hover{color:var(--ink-on-dark); text-decoration:none}
.brand-mark{width:34px;height:34px; border-radius:10px; background:linear-gradient(135deg,var(--teal-600),var(--teal-800)); display:grid; place-items:center; flex:none}
.brand-mark svg{width:20px;height:20px}
.brand-name{font-family:var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:0.01em}
nav.main-nav{display:none; align-items:center; gap:24px}
nav.main-nav a{color:var(--teal-200); text-decoration:none; font-size:0.95rem; font-weight:500; min-height:44px; display:inline-flex; align-items:center}
nav.main-nav a:hover{color:#fff; text-decoration:none}
nav.main-nav a[aria-current="page"]{color:#fff; text-decoration:underline; text-underline-offset:6px}
@media(min-width:768px){nav.main-nav{display:flex}}
.nav-toggle{
  display:block; background:transparent; border:1px solid var(--line-dark); color:var(--teal-200);
  min-height:44px; padding:8px 14px; border-radius:var(--radius-sm); font-size:0.875rem; cursor:pointer;
}
@media(min-width:768px){.nav-toggle{display:none}}
.mobile-menu{background:var(--teal-900); border-top:1px solid var(--line-dark)}
.mobile-menu nav{display:none}
.mobile-menu[open] nav{display:block}
.mobile-menu a{display:block; padding:14px 16px; color:var(--teal-200); text-decoration:none; border-top:1px solid var(--line-dark); min-height:48px}
.mobile-menu a:hover{color:#fff}
@media(min-width:768px){.mobile-menu nav{display:none!important}}

/* ---------- Buttons ---------- */
.btn{
  border:none; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:1rem; line-height:1;
  min-height:48px; padding:16px 24px; border-radius:var(--radius-md); text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  transition:background-color 160ms var(--ease), transform 160ms var(--ease), border-color 160ms var(--ease);
}
.btn:focus-visible{outline-offset:3px}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-hover); color:#fff; text-decoration:none}
.btn-secondary{
  background:transparent; color:var(--teal-100); border:1px solid var(--teal-300);
}
.btn-secondary:hover{background:rgba(62,151,169,0.14); text-decoration:none}
.btn-outline{
  background:transparent; color:var(--brand); border:1px solid var(--teal-400);
}
.btn-outline:hover{background:rgba(27,92,110,0.08); text-decoration:none}
.btn-ghost{background:transparent; color:var(--brand)}
.btn-ghost:hover{text-decoration:underline; background:none}
a.btn{text-decoration:none}

/* ---------- Hero ---------- */
section.hero{
  background:var(--bg-dark); color:var(--ink-on-dark); padding:64px 0 72px;
  position:relative; overflow:hidden;
}
section.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(52rem 26rem at 88% -10%, rgba(217,106,43,0.28), transparent 62%),
    radial-gradient(40rem 24rem at -8% 112%, rgba(62,151,169,0.22), transparent 60%);
  pointer-events:none;
}
.hero-inner{position:relative; max-width:52rem}
.eyebrow{
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--teal-300); margin-bottom:20px;
}
h1.hero-title{
  font-family:var(--font-display); font-size:var(--text-display); line-height:var(--text-display-lh);
  font-weight:600; letter-spacing:-0.01em; margin-bottom:20px;
}
h1 .ember{
  color:var(--ember-400); position:relative; white-space:nowrap;
  text-shadow:0 0 24px rgba(217,106,43,0.35);
}
.hero-lead{display:block; max-width:40rem; font-size:clamp(1.05rem,2vw,1.25rem); color:var(--teal-100); margin-bottom:32px; line-height:1.7}
.cta-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center}
.endpoint{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:0.85rem; color:var(--teal-200);
  background:rgba(10,38,49,0.7); border:1px solid var(--line-dark); padding:10px 14px; border-radius:var(--radius-sm);
}
.endpoint a{color:var(--teal-200)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--verified); display:inline-block; flex:none}
.planned-dot{width:8px;height:8px;border-radius:50%;background:var(--ember-400); display:inline-block; flex:none}

/* Interior page hero (smaller, keeps brand rhythm) */
section.page-hero{
  background:var(--bg-dark); color:var(--ink-on-dark); padding:48px 0 56px;
  position:relative; overflow:hidden;
}
section.page-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(40rem 18rem at 90% -20%, rgba(217,106,43,0.22), transparent 60%);
  pointer-events:none;
}
.page-hero-slate{position:relative; max-width:52rem}
.page-hero h1{
  font-family:var(--font-display); font-size:var(--text-h1); line-height:var(--text-h1-lh);
  font-weight:600; letter-spacing:-0.01em; margin-bottom:16px;
}
.page-lead{max-width:42rem; font-size:1.125rem; color:var(--teal-100)}
.breadcrumb{
  font-family:var(--font-mono); font-size:0.85rem; color:var(--teal-300);
  margin-bottom:16px; letter-spacing:0.02em;
}
.breadcrumb a{color:var(--teal-200); text-decoration:none}
.breadcrumb a:hover{color:#fff; text-decoration:underline}

/* ---------- Sections ---------- */
section.block{padding:64px 0}
@media(min-width:768px){section.block{padding:92px 0}}
section.block.alt{background:var(--surface)}
section.block.tint-a{background:var(--teal-50)}
section.block.tint-e{background:var(--ember-50)}
h2.sec-title{font-family:var(--font-display); font-weight:600; font-size:var(--text-h2); line-height:var(--text-h2-lh); margin-bottom:12px}
h3.sec-title{font-family:var(--font-display); font-weight:600; font-size:var(--text-h3); line-height:var(--text-h3-lh); margin-bottom:10px}
.sec-eyebrow{font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--brand); margin-bottom:10px}
.lead-para{max-width:42rem; font-size:1.125rem; color:var(--ink-muted); margin-bottom:28px}

/* ---------- Steps ---------- */
.steps{display:grid; gap:24px; margin-top:28px}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr); gap:32px}}
.steps.single{grid-template-columns:1fr}
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; position:relative; box-shadow:var(--shadow-sm);
}
.step .step-n{font-family:var(--font-mono); font-size:0.8rem; color:var(--accent-strong); letter-spacing:0.08em; margin-bottom:8px}
.step h3{font-family:var(--font-display); font-weight:600; font-size:1.2rem; margin-bottom:8px}
.step p{color:var(--ink-muted); font-size:0.95rem}
.step .step-icon{width:44px;height:44px;border-radius:12px;background:var(--teal-100);color:var(--brand);display:grid;place-items:center;margin-bottom:16px;flex:none}
.step .step-icon svg{width:24px;height:24px}
.step-split{display:flex; gap:20px; align-items:flex-start}

/* ---------- Cards / grids ---------- */
.grid-3{display:grid; gap:20px}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr); gap:28px}}
.grid-2{display:grid; gap:20px}
@media(min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr); gap:28px}}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm);
}
.card h3{font-family:var(--font-display); font-weight:600; font-size:1.15rem; margin-bottom:10px}
.card p{color:var(--ink-muted); font-size:0.95rem; margin-bottom:14px}
.card .card-icon{width:44px;height:44px;border-radius:12px;background:var(--ember-100);color:var(--accent);display:grid;place-items:center;margin-bottom:16px}
.card .card-icon svg{width:24px;height:24px}
.card .card-link{display:inline-block; font-weight:600}
.card.verified{border-color:var(--verified)}
.card.dark{background:var(--surface-dark); border-color:var(--line-dark); color:var(--ink-on-dark)}
.card.dark h3{color:#fff}
.card.dark p{color:var(--teal-200)}
.card.tint-ember{background:var(--ember-50); border-color:var(--ember-200)}
.card.tint-ember h3{color:var(--accent)}

/* ---------- SDK listing ---------- */
.sdk-grid{display:grid; gap:20px}
@media(min-width:768px){.sdk-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.sdk-grid{grid-template-columns:repeat(3,1fr)}}
.sdk{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.sdk-top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.sdk-lang{
  width:44px;height:44px;border-radius:12px;background:var(--teal-100);color:var(--brand);
  display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;font-size:0.72rem;flex:none; text-align:center;
}
.sdk h3{font-family:var(--font-display); font-weight:600; font-size:1.05rem}
.sdk .pkg{font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-muted)}
.sdk p{color:var(--ink-muted); font-size:0.92rem; margin:10px 0 14px; flex:1}
.sdk .sdk-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px}
.sdk a.detail-link{font-size:0.92rem; font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:0.75rem; padding:4px 10px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--grey-100); color:var(--grey-600)}
.chip.ok{border-color:var(--verified); color:var(--verified); background:rgba(46,125,91,0.08)}
.chip.live{background:var(--teal-100); color:var(--brand); border-color:var(--teal-200)}
.chip.warn{background:var(--ember-100); color:var(--accent); border-color:var(--ember-200)}

/* ---------- Code ---------- */
.codeblock{
  background:var(--bg-dark); color:var(--teal-200); border:1px solid var(--line-dark);
  border-radius:var(--radius-md); padding:20px; overflow-x:auto;
  font-family:var(--font-mono); font-size:0.85rem; line-height:1.7; direction:ltr; text-align:left;
}
.codeblock .hl{color:var(--ember-400)}
.codeblock .cm{color:var(--teal-400)}
.codeblock pre{white-space:pre; font-family:inherit; font-size:inherit; line-height:inherit}
.codeblock code{white-space:pre; font-family:inherit}
.warnnote{
  background:var(--ember-100); border:1px solid var(--ember-200); color:var(--accent);
  border-radius:var(--radius-sm); padding:10px 14px; font-size:0.85rem; margin-top:12px;
}

/* ---------- Security model ---------- */
.sec-model{display:grid; gap:20px}
@media(min-width:768px){.sec-model{grid-template-columns:repeat(3,1fr); gap:28px}}

/* ---------- No-PII row ---------- */
.no-pii{display:grid; gap:12px}
@media(min-width:768px){.no-pii{grid-template-columns:repeat(3,1fr)}}
.pii-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:18px; font-weight:600}
.pii-item small{display:block; font-weight:400; color:var(--ink-muted); font-size:0.85rem; margin-top:4px}

/* ---------- FAQ ---------- */
details.faq{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:12px; overflow:hidden}
details.faq > summary{
  cursor:pointer; padding:18px 20px; font-weight:600; font-family:var(--font-display); font-size:1.05rem;
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; min-height:48px;
}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary::after{content:"+"; font-family:var(--font-mono); color:var(--brand); font-size:1.2rem; flex:none; transition:transform 160ms var(--ease)}
details.faq[open] > summary::after{content:"–"}
details.faq .faq-body{padding:0 20px 18px; color:var(--ink-muted)}
details.faq .faq-body p{margin-bottom:10px}
details.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- Glossary ---------- */
dl.glossary dt{font-family:var(--font-mono); font-size:0.95rem; font-weight:600; color:var(--brand); margin-bottom:2px; margin-top:24px}
dl.glossary dt:first-child{margin-top:0}
dl.glossary span{display:block}
.term-token{font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-muted)}
dl.glossary dd{margin-bottom:20px; color:var(--ink-muted); font-size:0.98rem; max-width:var(--maxlen)}
dl.glossary dd a.detail-link{font-weight:600; font-size:0.9rem}

/* ---------- Detail layout ---------- */
.detail-split{display:grid; gap:32px}
@media(min-width:1024px){.detail-split{grid-template-columns:minmax(0,1fr) 300px}}
.aside{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; align-self:start}
.aside .aside-title{font-family:var(--font-display); font-size:1rem; margin:16px 0 12px}
.aside .aside-title:first-child{margin-top:0}
.aside a{display:block; padding:6px 0; font-size:0.92rem}
.aside .codeblock{font-size:0.8rem; overflow-wrap:anywhere}
.aside .aside-caption{font-size:0.82rem; color:var(--ink-muted); margin-top:8px}

/* Prose (long-form copy) */
.prose{max-width:var(--maxlen); color:var(--ink)}
.prose h2,.prose h3{font-family:var(--font-display); font-weight:600}
.prose h2{font-size:var(--text-h2); line-height:var(--text-h2-lh); margin:48px 0 12px}
.prose h3{font-size:1.25rem; margin:32px 0 10px}
.prose p{margin-bottom:16px; color:var(--ink); font-size:1rem}
.prose ul,.prose ol{margin:0 0 16px 0; padding-left:24px}
.prose li{margin-bottom:8px}
.prose a{font-weight:600}

/* ---------- Tables (status / endpoint) ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff}
table.site-table{width:100%; border-collapse:collapse; min-width:520px}
table.site-table th{
  text-align:left; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--grey-600); padding:14px 18px; border-bottom:1px solid var(--line);
}
table.site-table td{padding:14px 18px; border-bottom:1px solid var(--line); font-size:0.95rem; vertical-align:top}
table.site-table tr:last-child td{border-bottom:none}
table.site-table td code{white-space:nowrap; font-size:0.85em}
.status-pill{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.82rem; color:var(--verified); font-weight:600; text-transform:uppercase; letter-spacing:0.06em}
.status-pill.down{color:var(--error)}
.status-pill.warn{color:var(--warn)}

/* ---------- Trust strip + footer ---------- */
.trust-strip{background:var(--teal-100); color:var(--teal-800); text-align:center; padding:20px 16px; font-weight:500}
.trust-strip a{color:var(--brand); font-weight:600}
footer.site{background:var(--bg-dark); color:var(--teal-200); padding:56px 0 32px}
.footer-grid{display:grid; gap:28px; margin-bottom:32px}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
footer h4{color:#fff; font-family:var(--font-display); font-size:1rem; margin-bottom:12px}
footer a{color:var(--teal-200); text-decoration:none; display:inline-block; padding:4px 0; font-size:0.92rem; min-height:36px}
footer a:hover{color:#fff}
footer .foot-col a{display:block}
footer .brand{min-height:44px}
.foot-note{margin-top:12px; font-size:0.9rem; color:var(--teal-300); max-width:36rem}
.footer-meta{font-size:0.8rem; color:var(--teal-300); margin-top:20px; max-width:46rem}
.legal{font-size:0.8rem; color:var(--teal-300); border-top:1px solid var(--line-dark); padding-top:20px}
.legal p{margin-bottom:8px}

/* ---------- App-store badges ---------- */
.store-badges{display:flex; flex-wrap:wrap; gap:12px}
.store-badge{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:8px 16px;
  border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; text-decoration:none; color:var(--ink);
  font-weight:600;
}
.store-badge:hover{background:var(--grey-100); text-decoration:none; color:var(--ink)}
.store-badge svg{width:22px; height:22px; flex:none}
.store-badge small{display:block; font-weight:500; font-size:0.72rem; color:var(--ink-muted); line-height:1.2}

/* ---------- Motion (fade+lift, honor reduced motion) ---------- */
.reveal{opacity:0; transform:translateY(10px); animation:rise 300ms var(--ease) both}
@keyframes rise{to{opacity:1; transform:none}}
.ember-pulse{animation:emberGlow 2s ease-in-out infinite}
@keyframes emberGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(217,106,43,0.05))}50%{filter:drop-shadow(0 0 12px rgba(217,106,43,0.35))}}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; animation:none}
  .ember-pulse{animation:none; filter:none}
}

/* ---------- Misc ---------- */
.stack-24>*+*{margin-top:24px}
.stack-32>*+*{margin-top:32px}
.lead-in{font-size:1.1rem; color:var(--ink-muted); max-width:42rem}
.mt-8{margin-top:32px}
.mt-12{margin-top:48px}
.mt-6{margin-top:24px}
.mb-0{margin-bottom:0}
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.dark-chip-on-dark{background:rgba(10,38,49,0.7); border:1px solid var(--line-dark)}
hr.rule{border:none; border-top:1px solid var(--line); margin:48px 0}

/* 404 */
.notfound-block{background:var(--bg-dark); color:var(--ink-on-dark); padding:96px 0; text-align:center}
.notfound-block h1{font-family:var(--font-display); font-size:var(--text-display); color:var(--ember-400)}
.notfound-block p{color:var(--teal-100); max-width:32rem; margin:16px auto 32px}