/* First Buy: design tokens and components.
   Layout: one column, 36rem text, 48rem page. One quiet accent for everything interactive.
   The coin's own colour appears only through --subject, set per flow (data-flow="btc" or "usd"). */

/* ---------- tokens: grayscale page, the colour follows the coin ---------- */
:root {
  --bg:#FBFBFB; --surface:#FFFFFF; --text:#000000; --muted:#5A5A5A; --line:#E6E6E6;
  --accent:#000000; --accent-ink:#FFFFFF; --accent-soft:#EFEFEF; --accent-strong:#000000;
  --good:#1E7A46; --warn:#8F5400; --bad:#B42318; --bad-soft:#FBE4E1;
  --subject:#000000; --subject-soft:#EFEFEF;
  --font:"Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius:12px; --radius-s:8px;
  --ease:160ms ease-out;
  color-scheme:light;
}
/* --accent fills buttons and selected states (dark ink on it); --accent-strong is for text, outlines and focus */
[data-flow="btc"] { --accent:#F7931A; --accent-ink:#1A1000; --accent-soft:#FDEBD5; --accent-strong:#9C5C19; --subject:#F7931A; --subject-soft:#FDEBD5; }
[data-flow="usd"] { --accent:#2775CA; --accent-ink:#FFFFFF; --accent-soft:#E0ECF8; --accent-strong:#1F5FA8; --subject:#2775CA; --subject-soft:#E0ECF8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0D0D0F; --surface:#17181B; --text:#FFFFFF; --muted:#A8A8A8; --line:#2C2C30;
    --accent:#FFFFFF; --accent-ink:#000000; --accent-soft:#23242A; --accent-strong:#FFFFFF;
    --good:#6ACF93; --warn:#E6B05C; --bad:#F28B82; --bad-soft:#3F1F1C;
    --subject:#FFFFFF; --subject-soft:#23242A; color-scheme:dark;
  }
  :root:not([data-theme="light"]) [data-flow="btc"] { --accent:#F7931A; --accent-ink:#1A1000; --accent-soft:#2E2113; --accent-strong:#F7931A; --subject:#F7931A; --subject-soft:#2E2113; }
  :root:not([data-theme="light"]) [data-flow="usd"] { --accent:#5BA3F5; --accent-ink:#031020; --accent-soft:#132536; --accent-strong:#7FB6F7; --subject:#5BA3F5; --subject-soft:#132536; }
}
:root[data-theme="dark"] {
  --bg:#0D0D0F; --surface:#17181B; --text:#FFFFFF; --muted:#A8A8A8; --line:#2C2C30;
  --accent:#FFFFFF; --accent-ink:#000000; --accent-soft:#23242A; --accent-strong:#FFFFFF;
  --good:#6ACF93; --warn:#E6B05C; --bad:#F28B82; --bad-soft:#3F1F1C;
  --subject:#FFFFFF; --subject-soft:#23242A; color-scheme:dark;
}
:root[data-theme="dark"] [data-flow="btc"] { --accent:#F7931A; --accent-ink:#1A1000; --accent-soft:#2E2113; --accent-strong:#F7931A; --subject:#F7931A; --subject-soft:#2E2113; }
:root[data-theme="dark"] [data-flow="usd"] { --accent:#5BA3F5; --accent-ink:#031020; --accent-soft:#132536; --accent-strong:#7FB6F7; --subject:#5BA3F5; --subject-soft:#132536; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--accent-strong); text-decoration-thickness:1px; text-underline-offset:2px; }
button { font:inherit; }
h1[tabindex], h2[tabindex] { outline:none; }
h1, h2, h3 { margin:0; font-weight:600; letter-spacing:-0.02em; line-height:1.15; text-wrap:balance; }
h1 { font-size:2rem; }           /* 32, 40 on desktop */
h2 { font-size:1.375rem; }       /* 22, 26 on desktop */
h3 { font-size:1.0625rem; }
p { margin:0; }
.meta { font-size:0.8125rem; color:var(--muted); letter-spacing:0.02em; }
.helper { font-size:0.9375rem; color:var(--muted); }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.addr { font-family:var(--mono); font-size:0.9375rem; word-break:break-all; }
.addr .mid { color:var(--muted); }
@media (min-width:720px) { h1 { font-size:2.5rem; } h2 { font-size:1.625rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }

/* ---------- shell ---------- */
.shell { min-height:100%; display:flex; flex-direction:column; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding-inline:16px; border-bottom:1px solid var(--line); }
.topbar .wordmark { font-weight:600; letter-spacing:-0.02em; color:var(--text); text-decoration:none; display:flex; align-items:center; gap:8px; }
.topbar .wordmark .mark { width:20px; height:20px; color:var(--subject); display:inline-flex; }
.topbar .wordmark .mark svg { width:100%; height:100%; display:block; }
.topbar nav { display:flex; align-items:center; gap:16px; font-size:0.9375rem; }
.topbar nav a { color:var(--text); text-decoration:none; }
.icon-btn { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); display:inline-grid; place-items:center; cursor:pointer; }
.page { flex:1; width:100%; max-width:48rem; margin:0 auto; padding-block:24px 48px; padding-inline:16px; }
.page.narrow { max-width:36rem; }
.stack { display:flex; flex-direction:column; gap:16px; }
.stack-lg { display:flex; flex-direction:column; gap:24px; }
.footer { border-top:1px solid var(--line); padding:16px; font-size:0.8125rem; color:var(--muted); text-align:center; }
.footer a { color:var(--muted); }
:where(a, button, input, select, [tabindex]):focus-visible { outline:3px solid var(--accent-strong); outline-offset:2px; border-radius:var(--radius-s); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px; border-radius:var(--radius-s); border:1px solid var(--line); background:var(--surface); color:var(--text); font-weight:600; cursor:pointer; text-decoration:none; transition:background var(--ease), border-color var(--ease), transform var(--ease); }
.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn.block { width:100%; }
.btn:disabled { cursor:not-allowed; }
.btn.primary:disabled { background:var(--surface); color:var(--muted); border-color:var(--line); }
.btn:not(:disabled):hover { border-color:var(--text); }
.btn.primary:not(:disabled):hover { filter:brightness(1.08); border-color:var(--accent); }
.link-btn { background:none; border:0; padding:0; color:var(--accent-strong); font-weight:500; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.back { font-size:0.9375rem; color:var(--muted); }
.back:hover { color:var(--text); }

/* ---------- badge, callout ---------- */
.badge { display:inline-block; font-size:0.8125rem; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); }
.badge.subject { background:var(--subject-soft); color:var(--subject); }
.callout { border-left:3px solid var(--warn); padding:10px 14px; background:var(--surface); border-radius:0 var(--radius-s) var(--radius-s) 0; font-size:0.9375rem; }
.callout.bad { border-left-color:var(--bad); }

/* ---------- home ---------- */
.page.home { max-width:42rem; }
@media (min-width:720px) and (min-height:760px) { .page.home { display:flex; flex-direction:column; justify-content:center; padding-block:32px 80px; } }
.hero { padding-block:24px 8px; }
.hero h1 { max-width:14ch; }
.hero p { margin-top:12px; max-width:36ch; color:var(--muted); font-size:1.0625rem; }
.page.home .hero { padding-block:16px 0; }
.page.home .hero h1 { max-width:22ch; font-size:clamp(2.125rem, 1.25rem + 3.6vw, 3rem); line-height:1.08; }
.page.home .hero p { font-size:1.125rem; max-width:40ch; }
.page.home .tiles { margin-top:36px; }
.tiles { display:grid; gap:12px; }
@media (min-width:720px) { .tiles { grid-template-columns:1fr 1fr; } .page.home .tiles { grid-template-columns:1fr; } }
.tile { display:flex; flex-direction:column; align-items:flex-start; gap:6px; position:relative; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--text); text-decoration:none; transition:border-color var(--ease), transform var(--ease); }
.tile:hover { border-color:var(--text); transform:translateY(-2px); }
.tile .badge { margin-bottom:6px; }
.tile h2 { font-size:1.25rem; }
.tile p { color:var(--muted); font-size:0.9375rem; }
.tile .go { align-self:flex-end; margin-top:auto; padding-top:10px; color:var(--accent-strong); font-size:1.375rem; line-height:1; }
.tile.row { flex-direction:row; align-items:center; gap:16px; padding:16px 20px; }
.tile.row .text { min-width:0; }
.tile.row .text .badge { display:inline-block; margin-bottom:8px; }
.tile.row h2 { font-size:1.0625rem; }
.tile.row p { margin-top:2px; }
.tile.row .go { align-self:center; margin-top:0; padding-top:0; margin-left:auto; }
.tile.primary { padding:24px; }
.tile.primary h2 { font-size:1.5rem; }
.tile.primary p { font-size:1.0625rem; }
.tile.primary .go { font-size:1.625rem; }


/* ---------- question screen ---------- */
.question h2 { margin-top:8px; }
.options { display:grid; gap:10px; margin-top:20px; }
.option { position:relative; display:flex; align-items:center; gap:14px; min-height:64px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); cursor:pointer; transition:border-color var(--ease), background var(--ease); }
.option:hover { border-color:var(--text); }
.option input { position:absolute; opacity:0; width:1px; height:1px; }
.option .ico { width:28px; height:28px; flex:none; color:var(--subject); display:grid; place-items:center; }
.option .ico svg { width:24px; height:24px; }
.option .label { font-weight:600; }
.option .helper { display:block; margin-top:2px; }
.option .tick { margin-left:auto; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); flex:none; display:grid; place-items:center; color:var(--accent-ink); transition:background var(--ease), border-color var(--ease); }
.option:has(input:checked) { border-color:var(--accent-strong); background:var(--accent-soft); }
.option:has(input:checked) .tick { background:var(--accent); border-color:var(--accent); }
.option:has(input:focus-visible) { outline:3px solid var(--accent-strong); outline-offset:2px; }
.option .tick svg { width:14px; height:14px; display:none; }
.option:has(input:checked) .tick svg { display:block; }
.actions { display:flex; flex-direction:column; gap:14px; align-items:flex-start; margin-top:24px; }
.actions .btn { align-self:stretch; }
select.field { width:100%; min-height:48px; padding:0 12px; font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); }

/* ---------- result ---------- */
.result { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:20px; }
.result h2 { margin-top:10px; font-size:1.5rem; }
.result .why { margin-top:6px; }
.result .facts { margin-top:8px; color:var(--muted); font-size:0.9375rem; }
.result img { width:100%; height:auto; border-radius:var(--radius-s); border:1px solid var(--line); margin-top:14px; display:block; }
.alts { margin-top:18px; border-top:1px solid var(--line); }
.alt { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:0.9375rem; }
.alt b { font-weight:600; }
.answers { margin-top:18px; font-size:0.9375rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 14px; }

/* ---------- steps ---------- */
.step { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:20px; }
.step .num { width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:600; display:grid; place-items:center; margin-bottom:12px; }
.step .see { margin-top:10px; padding:10px 12px; border-radius:var(--radius-s); border:1px solid var(--line); font-size:0.9375rem; color:var(--muted); }
.step img { width:100%; height:auto; border-radius:var(--radius-s); border:1px solid var(--line); margin-top:14px; display:block; }
.helpline { margin-top:16px; font-size:0.8125rem; color:var(--muted); }

/* ---------- learn hub ---------- */
.topics { display:grid; gap:10px; }
.topic { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; padding:14px 18px; border:1px solid var(--line); border-left:4px solid var(--subject); border-radius:var(--radius); background:var(--surface); color:var(--text); text-decoration:none; transition:border-color var(--ease); }
.topic:hover { border-color:var(--text); border-left-color:var(--subject); }
.topic h3 { font-size:1.0625rem; }
.topic .meta { white-space:nowrap; }

/* ---------- lesson slide ---------- */
.slide { display:flex; flex-direction:column; gap:20px; min-height:calc(100vh - 56px - 48px); }
.art { aspect-ratio:4/3; width:100%; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--text); overflow:hidden; }
.art svg { width:72%; height:72%; }
.art .fill { fill:var(--subject-soft); }
.art .ink { stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.art .sub { stroke:var(--subject); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.art .subfill { fill:var(--subject); }
.art text { font-family:var(--font); font-weight:600; fill:currentColor; }
.slide .copy h2 { font-size:1.5rem; }
.slide .copy p { margin-top:10px; font-size:1.0625rem; }
.dots { display:flex; gap:8px; align-items:center; }
.dots i { width:8px; height:8px; border-radius:50%; background:var(--line); display:inline-block; }
.dots i.on { background:var(--accent-strong); width:20px; border-radius:4px; }
.slide-nav { display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.slide-nav .meta { font-size:0.8125rem; }
@media (min-width:720px) { .slide { min-height:0; } .slide .slide-nav { margin-top:12px; } .slide .art { aspect-ratio:16/10; } }

/* ---------- pieces used by the script ---------- */
.eyebrow { font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.card h2 { font-size:1.25rem; margin-bottom:8px; }
.prose { max-width:36rem; }
.prose h1 { margin-bottom:12px; }
.prose h2 { font-size:1.25rem; margin-bottom:6px; }
.alt-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:16px 20px; }
.alt-card h2 { font-size:1.125rem; }
.alt-card .why, .alt-card .facts { font-size:0.9375rem; }
.alt-card .actions { margin-top:12px; }
.alt-card .actions .btn { align-self:flex-start; }
.btn.small { min-height:40px; padding:0 14px; font-size:0.9375rem; }
.result .actions { margin-top:16px; }
.why-list { margin:10px 0 0; padding-left:1.1em; font-size:0.9375rem; color:var(--muted); }
.why-list li { margin:0.25em 0; }
.why-list b { color:var(--text); font-weight:600; }
.takeaways { margin:14px 0 0; padding-left:1.1em; font-size:1.0625rem; }
.takeaways li { margin:0.5em 0; }
.step .line { margin-top:8px; font-size:1.0625rem; }
.step .facts { margin-top:8px; color:var(--muted); font-size:0.9375rem; }
.step .callout { margin-top:12px; }
.step .art { margin-top:14px; aspect-ratio:4/2.2; }
.step .art svg { width:60%; height:80%; }
.step .tiles { margin-top:14px; }
details.detail { border-top:1px solid var(--line); padding-top:12px; }
details.detail > summary { cursor:pointer; font-weight:600; color:var(--accent-strong); list-style:none; }
details.detail > summary::-webkit-details-marker { display:none; }
details.detail > summary::after { content:" +"; }
details.detail[open] > summary::after { content:" \2212"; }
table.plain { border-collapse:collapse; width:100%; font-size:0.9375rem; }
table.plain th, table.plain td { text-align:left; vertical-align:top; padding:8px 8px 8px 0; border-bottom:1px solid var(--line); }
table.plain th { font-size:0.75rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); font-weight:600; white-space:nowrap; }
.tablewrap { overflow-x:auto; max-width:100%; }
.checklist { list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:8px; }
.checklist label { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--bg); cursor:pointer; }
.checklist input { flex:none; width:18px; height:18px; margin:4px 0 0; accent-color:var(--accent-strong); }
.checklist label:has(input:checked) { border-color:var(--good); }
.art .bad { stroke:var(--bad); fill:none; stroke-width:2.5; stroke-linecap:round; }
.art .mid { fill:var(--muted); font-family:var(--mono); }
.art .onsub { fill:var(--accent-ink); font-family:var(--font); font-weight:600; }
.art .ink[stroke-dasharray], .art path.ink { fill:none; }
.slide .copy p + p { margin-top:8px; }

/* ---------- every option: badges, compact rows, filters ---------- */
.badge.quiet { background:transparent; border:1px solid var(--line); color:var(--muted); font-weight:500; }
.badge.bad { background:var(--bad-soft); color:var(--bad); }
.badges { display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle; margin-left:6px; }
.result .badges, .alt-card .badges { margin:6px 0 0; display:flex; margin-left:0; }
.alt-card h2 .badges { margin:0 0 0 6px; display:inline-flex; }
.page.wide { max-width:48rem; }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.filters select.field { width:auto; min-width:11rem; }
.filters .meta { flex-basis:100%; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font:inherit; font-size:0.875rem; font-weight:500; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; transition:border-color var(--ease), background var(--ease); }
.chip:hover { border-color:var(--text); }
.chip.on { background:var(--text); color:var(--bg); border-color:var(--text); }
.group h2 { font-size:1.25rem; }
.group .helper { margin-top:4px; }
.rows { margin-top:12px; border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:1fr auto; column-gap:16px; row-gap:3px; padding:14px 0; border-bottom:1px solid var(--line); align-items:start; }
.row > h3, .row > .why, .row > .meta { grid-column:1; }
.row h3 { font-size:1.0625rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row .badge { white-space:nowrap; }
.row .why { font-size:0.9375rem; }
.row .meta { font-size:0.8125rem; letter-spacing:0; }
.row .go-link { grid-column:2; grid-row:1 / -1; align-self:center; font-weight:600; font-size:0.9375rem; white-space:nowrap; color:var(--accent-strong); text-decoration:none; }
.row .go-link:hover { text-decoration:underline; }
.hidden { display:none !important; }
.step .why-list { margin-top:10px; color:var(--text); }
.page.wide .hero p { max-width:48ch; }
@media (max-width:719px) { .row { grid-template-columns:1fr; } .row .go-link { grid-column:1; grid-row:auto; align-self:start; margin-top:4px; } }

/* ---------- phones and tablets: tap targets, safe areas, stacked tables ---------- */
a, button, .option, .tile, .chip { -webkit-tap-highlight-color:transparent; }
.icon-btn { width:40px; height:40px; }
.back, .answers a, .link-btn { display:inline-block; padding:6px 0; }
.row .go-link { padding:6px 0; }
.topbar { padding-inline:max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
.page { padding-inline:max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
.footer { padding-inline:max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); padding-bottom:max(16px, env(safe-area-inset-bottom)); }
.slide { min-height:calc(100dvh - 56px - 48px); }
@media (min-width:720px) { .slide { min-height:0; } }
@media (max-width:599px) {
  table.plain.stack thead { display:none; }
  table.plain.stack tr { display:block; padding:12px 0; border-bottom:1px solid var(--line); }
  table.plain.stack td { display:block; padding:2px 0; border:0; }
  table.plain.stack td[data-label="Fee to send"]::before, table.plain.stack td[data-label="Speed"]::before, table.plain.stack td[data-label="Phone"]::before, table.plain.stack td[data-label="Help page"]::before { content:attr(data-label) ": "; color:var(--muted); }
  table.plain.stack td .meta { margin-top:2px; }
}
.tile.ext .eyebrow { margin-bottom:4px; }
.tile.ext .go { color:var(--muted); }
.tile.ext:hover .go { color:var(--text); }
.page.home .tile.ext { margin-top:4px; }

/* ---------- outbound links: website, App Store, Google Play ---------- */
.links { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.result .links { margin-top:10px; }
.row > .links { grid-column:1; margin-top:2px; }
.row .links a { color:var(--muted); text-decoration:none; }
.row .links a:hover { color:var(--text); text-decoration:underline; }