/* Thrilla site styles — shared by index / download / privacy / how-it-works.
   One light palette, stated explicitly: the page keeps its paper ground on
   every device rather than following the OS into a dark theme. */

:root {
  color-scheme: light;

  --bg: #fbfaf7;           /* paper */
  --bg-2: #f3f0ea;
  --panel: #ffffff;
  --border: #e7e2d8;
  --border-bright: #d5cec0;
  --ink: #16130f;
  --dim: #55504a;
  --faint: #857e74;
  --orange: #b95c00;       /* text-safe on paper */
  --orange-solid: #f7931a; /* bitcoin, for fills and marks */
  --orange-dim: rgba(247,147,26,.12);
  --green: #14713a;
  --green-dim: rgba(20,113,58,.10);
  --red: #b3261e;
  --on-solid: #1a1206;
  --shadow: 0 1px 2px rgba(22,19,15,.05), 0 8px 24px rgba(22,19,15,.05);
  --radius: 12px;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Longhands, not shorthands: every section on the site is <section class="wrap">,
   and `.wrap { padding: 0 28px }` beats `section { padding: 62px 0 }` on
   specificity — so the shorthand silently zeroed every section's vertical
   padding and headings sat right on top of the paragraph above them. Splitting
   the axes means the two rules compose instead of fighting. */
.wrap { max-width: 900px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
section { padding-top: 62px; padding-bottom: 62px; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: 0; }

/* ── top bar + dropdown menu ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.bar { max-width: 900px; margin: 0 auto; padding: 12px 28px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16.5px; text-decoration: none; letter-spacing: -.01em; }
.brand img { width: 28px; height: 28px; object-fit: contain; }
/* What kind of wallet this is, stated in the bar. Replaced the "₿ Bitcoin
   only" badge, which said what the wallet excludes — useful, but it left
   someone who has never heard of Silent Payments none the wiser about what
   they were looking at. Plain text rather than a pill: three claims in a badge
   read as decoration, and this is meant to be read. */
.kind {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim);
  white-space: nowrap; flex-shrink: 0;
}
.kind b { color: var(--orange); font-weight: 600; }
/* The bar is a fixed set of items in a fixed width, so nothing in it may
   shrink or wrap — it sheds labels at the breakpoints below instead. */
.bar .brand, .bar .btn { flex-shrink: 0; white-space: nowrap; }
.bar .spacer { flex: 1; }

/* <details> gives a click-to-open menu with no JavaScript; the script only
   closes it on outside-click and Escape. The panel is a left drawer, so the
   menu reads as "on the left" even though the button lives in the top bar. */
.menu summary {
  list-style: none; cursor: pointer;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--border-bright); border-radius: 9px; background: var(--panel);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { border-color: var(--dim); }
.burger, .burger::before, .burger::after {
  display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink);
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(22,19,15,.35); }
.drawer {
  position: fixed; left: 0; top: 0; z-index: 61;
  width: min(276px, 84vw); height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 14px;
  background: var(--panel); border-right: 1px solid var(--border-bright);
  box-shadow: 0 0 40px rgba(22,19,15,.16);
  animation: drawer-in .18s ease-out;
}
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); padding: 2px 6px 10px 12px;
}
.drawer-close {
  border: 0; background: transparent; cursor: pointer;
  color: var(--faint); font-size: 15px; line-height: 1;
  padding: 6px 8px; border-radius: 7px;
}
.drawer-close:hover { background: var(--bg-2); color: var(--ink); }
.drawer a {
  text-decoration: none; font-size: 14.5px; color: var(--dim);
  padding: 10px 12px; border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.drawer a:hover { background: var(--bg-2); color: var(--ink); }
.drawer a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--orange-dim); }
.drawer a .ext { font-size: 11px; color: var(--faint); }
.menu-sep { height: 1px; background: var(--border); margin: 8px 6px; }
.drawer-group {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); padding: 6px 12px 4px;
}

/* ── type ────────────────────────────────────────────────────────────────── */
h1, h2, h3, .sec-title { font-family: var(--display); letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(36px, 5.2vw, 58px); line-height: 1.05; font-weight: 700; margin-bottom: 18px; }
h1 em { font-style: normal; color: var(--orange); }
.lead { font-size: clamp(16px, 1.6vw, 18.5px); color: var(--dim); max-width: 62ch; }
.lead strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 20px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.eyebrow b { color: var(--orange); font-weight: 500; }

.page-head { padding: 46px 0 8px; }
.page-head h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 12px; }
.page-head .lead { max-width: 66ch; }

.sec-head { margin-bottom: 30px; }
.sec-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 11px; }
.sec-title { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.15; font-weight: 600; }
.sec-sub { color: var(--dim); margin-top: 11px; max-width: 62ch; }

/* ── hero ────────────────────────────────────────────────────────────────── */
header.hero { padding: 56px 0 60px; border-bottom: 1px solid var(--border); }
/* Larger than the old mascot: this mark carries the WhiSPa wordmark, and below
   about 130px the lettering stops being readable. */
/* 34px, not 20: the eyebrow used to sit between the mascot and the headline
   and carried its own 20px below it. With the eyebrow gone the h1 came up to
   20px under a bobbing image, which read as crowded — this restores the gap
   the hero had before. */
.hero-mascot { display: block; width: clamp(132px, 15vw, 188px); height: auto; margin: 0 auto 34px; animation: bob 6s ease-in-out infinite; }
/* The previous version rocked between -2deg and 2deg, which suited a
   celebrating coin. A figure asking for quiet should not wobble: just a slow
   rise and fall, and none at all for anyone who has asked for less motion. */
@keyframes bob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
@media (prefers-reduced-motion: reduce) { .hero-mascot { animation: none; } }

.actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.btn {
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  padding: 12px 20px; border-radius: 10px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px; border: 1px solid transparent;
  transition: transform .15s, border-color .15s;
}
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-primary { background: var(--orange-solid); color: var(--on-solid); box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { border-color: var(--border-bright); color: var(--ink); background: var(--panel); }
.btn-ghost:hover { border-color: var(--dim); }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }

.btc-note {
  margin-top: 24px; padding: 16px 18px;
  border: 1px solid var(--border); border-left: 3px solid var(--orange-solid);
  border-radius: 10px; background: var(--panel); font-size: 14px; color: var(--dim);
}
.btc-note strong { color: var(--ink); font-weight: 600; }

.note { margin-top: 15px; font-size: 13px; color: var(--faint); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.badge {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); border: 1px solid var(--border-bright); background: var(--green-dim);
  padding: 2px 8px; border-radius: 5px;
}

/* address demo */
.demo { margin-top: 38px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }
.demo-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.demo-bar .d { width: 10px; height: 10px; border-radius: 50%; background: var(--border-bright); }
.demo-bar span { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.demo-body { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px){ .demo-body { grid-template-columns: 1fr; } }
.demo-cell .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.demo-cell .v { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.demo-cell .v.addr { color: var(--orange); }
.demo-cell .v.mail { color: var(--green); }
.demo-cell .meta { font-size: 12.5px; color: var(--faint); margin-top: 6px; }

/* ── download cards ──────────────────────────────────────────────────────── */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* try.html offers two ways in, not three. Without this the pair keeps the
   three-column track and sits squeezed against the left with a column of dead
   space beside it. */
.dl-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .dl-grid, .dl-grid.two { grid-template-columns: 1fr; } }
.dl-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); padding: 22px; box-shadow: var(--shadow);
  /* Rows, not flex: label, title, blurb, button and meta line up across all
     three cards even when the blurbs are different lengths. */
  display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 11px;
}
.dl-card.main { border-color: var(--orange-solid); }
.dl-net { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.dl-card.main .dl-net { color: var(--orange); }
.dl-card.test .dl-net { color: var(--green); }
.dl-card h3 { font-size: 20px; font-weight: 600; }
.dl-card p { font-size: 13.5px; color: var(--dim); }
.dl-card .btn { justify-content: center; }
.dl-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
/* "signet.whispawallet.com" is one unbreakable token ~175px wide, which sets
   the card's min-content and pushed the whole grid past a 320px screen. Below
   430px the button names the destination in words instead. */
.dl-host { display: inline; }
.dl-host-short { display: none; }
@media (max-width: 430px) {
  .dl-host { display: none; }
  .dl-host-short { display: inline; }
}

.panel-note {
  margin-top: 18px; padding: 18px 20px; font-size: 13.5px; color: var(--dim);
  border: 1px dashed var(--border-bright); border-radius: var(--radius); background: var(--bg-2);
}
.panel-note strong { color: var(--ink); font-weight: 600; }
.panel-note p + p { margin-top: 12px; }

/* ── feature cards ───────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Six cards, so step 3 → 2 → 1 rather than dropping straight to one column
   and making a tablet scroll through all six. */
@media (max-width: 860px){ .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .grid { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 22px; box-shadow: var(--shadow); }
.card .icon { font-size: 20px; display: block; margin-bottom: 12px; }
.card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.card p { font-size: 13.5px; color: var(--dim); }
.card .tag { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; }
.also { margin-top: 18px; font-size: 13.5px; color: var(--faint); }
.also a { color: var(--orange); font-weight: 600; text-decoration: none; }
.also a:hover { text-decoration: underline; }

/* ── contact cards ───────────────────────────────────────────────────────── */
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px){ .contacts { grid-template-columns: 1fr; } }
.contact-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); padding: 20px; box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.contact-card:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.contact-card .ct-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.contact-card .ct-v { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.contact-card .ct-m { font-size: 12.5px; color: var(--faint); }

/* ── steps ───────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px){ .steps { grid-template-columns: 1fr; } }
.stp { display: flex; gap: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 20px; box-shadow: var(--shadow); }
.stp .n { flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--green); background: var(--green-dim); border: 1px solid var(--border-bright); }
.stp h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.stp p { font-size: 13px; color: var(--dim); }
.stp a, .mailref a { color: var(--green); }

/* ── in-use clips ────────────────────────────────────────────────────────── */
/* Two portrait phone recordings side by side, capped so a 572x1280 clip does
   not tower over the page. width/height on the <video> gives the browser the
   aspect ratio up front, so the poster does not cause a reflow when it loads. */
.clips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 700px) { .clips { grid-template-columns: 1fr; } }
.clip { display: flex; flex-direction: column; gap: 12px; max-width: 260px; margin: 0 auto; }
.clip video {
  width: 100%; height: auto; display: block;
  background: #000;                 /* letterbox matches the recording, not the page */
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
}
.clip figcaption { font-size: 12.5px; color: var(--dim); line-height: 1.6; }
.clip figcaption strong { color: var(--ink); font-weight: 600; }

/* ── screenshots ─────────────────────────────────────────────────────────── */
/* Two by two: there are four stills, and a three-wide row would leave the
   fourth stranded on its own line (the same orphan the feature cards had). */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
@media (max-width: 700px){ .shots { grid-template-columns: 1fr; } }
.shot { display: flex; flex-direction: column; gap: 11px; max-width: 300px; margin: 0 auto; }
.shot img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.shot figcaption { font-size: 12.5px; color: var(--faint); }

/* ── privacy ─────────────────────────────────────────────────────────────── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px; }
@media (max-width: 700px){ .compare { grid-template-columns: 1fr; } }
.compare .col { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; background: var(--panel); }
.compare .col.bad { border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
.compare .col.good { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.compare .label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.compare .bad .label { color: var(--red); }
.compare .good .label { color: var(--green); }
.compare ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.compare li { font-size: 13.5px; color: var(--dim); padding-left: 24px; position: relative; }
.compare li::before { position: absolute; left: 0; }
.compare .bad li::before { content: "✕"; color: var(--red); }
.compare .good li::before { content: "✓"; color: var(--green); }
.compare li strong { color: var(--ink); font-weight: 600; }

.pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px){ .pp-grid { grid-template-columns: 1fr; } }
.pp { border-left: 2px solid var(--orange-solid); padding: 2px 0 2px 16px; }
.pp h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.pp p { font-size: 13.5px; color: var(--dim); }

.caveats { margin-top: 30px; border: 1px dashed var(--border-bright); border-radius: var(--radius); padding: 22px 24px; background: var(--bg-2); }
.caveats .ch { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.caveats .ch .t { font-weight: 600; }
.caveats .ch .badge { color: var(--faint); background: transparent; }
.caveats ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; }
@media (max-width: 700px){ .caveats ul { grid-template-columns: 1fr; } }
.caveats li { font-size: 13px; color: var(--dim); padding-left: 20px; position: relative; }
.caveats li::before { content: "—"; position: absolute; left: 0; color: var(--faint); }
.caveats li strong { color: var(--ink); font-weight: 600; }

/* ── stack / vault / pills ───────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; border-left: 2px solid var(--border); margin-left: 7px; }
.step { padding: 0 0 28px 28px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: -8px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--orange-solid); }
.step .layer { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; }
.step h4 { font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
.step p { font-size: 13.5px; color: var(--dim); }

.vault { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 700px){ .vault { grid-template-columns: 1fr; } }
.vault-item { display: flex; gap: 13px; }
.vault-item .ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--green-dim); border: 1px solid var(--border-bright); display: grid; place-items: center; font-size: 16px; }
.vault-item h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.vault-item p { font-size: 13.5px; color: var(--dim); }

.pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 700px){ .pills { grid-template-columns: 1fr; } }
.pill { border: 1px solid var(--border); border-radius: 10px; padding: 15px 17px; background: var(--panel); }
.pill .name { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill .name .b { font-family: var(--mono); font-size: 10px; padding: 1px 7px; border-radius: 4px; background: var(--orange-dim); color: var(--orange); border: 1px solid var(--border-bright); }
.pill .role { font-size: 12.5px; color: var(--dim); }

.soon { display: inline-block; margin-left: 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--border); padding: 2px 7px; border-radius: 5px; vertical-align: middle; }

/* ── verify page: commands, terminal output, fingerprint ─────────────────── */
/* Commands read as a terminal, not as body text: dark ground, light ink, and a
   copy button, so it is obvious what is meant to be run rather than read. They
   never wrap or get prettified — the block scrolls sideways instead, because a
   soft-wrapped command pasted into a shell is a broken command. */
.cmd, .out {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.8;
  border-radius: 10px; margin-top: 12px;
  overflow-x: auto; white-space: pre;
}
.cmd {
  background: #1c1916; color: #f2eee6;
  border: 1px solid #2c2723;
  padding: 16px 78px 16px 18px;   /* right pad clears the copy button */
  box-shadow: var(--shadow);
  -moz-tab-size: 2; tab-size: 2;
}
.cmd .c { color: #9c948a; }              /* comment */
.cmd .f { color: #f7b955; }              /* filename / argument worth spotting */

/* The button lives in a wrapper OUTSIDE the scrolling block, not inside it —
   inside, it scrolls away with the code the moment a long line is panned. */
.cmd-wrap { position: relative; }
.cmd-wrap .cmd { margin-top: 12px; }
.copy {
  position: absolute; top: 22px; right: 10px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  color: #d8d2c8; background: #2c2723; border: 1px solid #3d3630;
  border-radius: 7px; padding: 5px 10px; cursor: pointer;
  transition: background .15s, color .15s;
}
.copy:hover { background: #3d3630; color: #fff; }
.copy[data-done] { color: #7fd39b; border-color: #3f5c48; }

/* On a phone the block is narrower than the commands, so an overlaid button
   covers the first line however much padding the content carries. Put it under
   the block instead, where it hides nothing. */
@media (max-width: 640px) {
  .cmd { padding-right: 18px; }
  .copy { position: static; display: block; margin: 8px 0 0 auto; }
}

.out {
  background: var(--bg-2); color: var(--dim); font-size: 11.5px;
  border: 1px solid var(--border); padding: 14px 16px;
}

/* Inline code in running prose — a filename or flag, not a block to run. */
code {
  font-family: var(--mono); font-size: .88em;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px;
}
.out b { color: var(--green); font-weight: 600; }
.out i { color: var(--faint); font-style: normal; }

/* The fingerprint is the one value a reader must compare character by
   character, so it gets room to breathe and never re-flows mid-group. */
.fp {
  font-family: var(--mono); font-size: clamp(12px, 2.1vw, 15px); font-weight: 500;
  letter-spacing: .04em; line-height: 1.9; word-spacing: .22em;
  border: 1px solid var(--border-bright); border-radius: 10px;
  background: var(--panel); color: var(--ink);
  padding: 16px 18px; margin: 14px 0 0; overflow-x: auto;
}

.warnbox {
  margin-top: 18px; padding: 16px 18px; font-size: 13.5px; color: var(--dim);
  border: 1px solid var(--border-bright); border-left: 3px solid var(--red);
  border-radius: var(--radius); background: var(--panel);
}
.warnbox strong { color: var(--ink); font-weight: 600; }
.warnbox p + p { margin-top: 10px; }

/* ── donation address ────────────────────────────────────────────────────── */
.donate {
  margin-top: 18px; padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--border-bright); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
}
.dn-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* The address is the thing to read and copy, so it gets the mono treatment and
   is allowed to break rather than push the panel wide on a phone. */
.dn-addr {
  font-family: var(--mono); font-size: clamp(15px, 2.4vw, 18px); font-weight: 500;
  color: var(--ink); word-break: break-all;
}
.donate .ct-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.donate .ct-m { font-size: 12.5px; color: var(--faint); max-width: 56ch; }
.dn-copy { flex-shrink: 0; }
@media (max-width: 560px) { .dn-copy { width: 100%; justify-content: center; } }

/* ── closing + footer ────────────────────────────────────────────────────── */
.final { text-align: center; border: 1px solid var(--border-bright); border-radius: 16px; padding: 42px 26px; background: var(--panel); box-shadow: var(--shadow); }
.final h2 { font-size: clamp(24px, 3.2vw, 31px); font-weight: 600; margin-bottom: 11px; }
.final p { color: var(--dim); max-width: 46ch; margin: 0 auto 22px; }
.final .actions { justify-content: center; }

footer { padding: 32px 0 52px; color: var(--faint); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; border-top: 1px solid var(--border); }
footer a { color: var(--dim); }
footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
.disclaim { max-width: 58ch; line-height: 1.6; margin-top: 6px; }

@media (max-width: 640px) {
  .bar { padding: 10px 18px; gap: 9px; }
  /* The drawer already has "Try it", so dropping it from the bar on a phone
     loses nothing and keeps "Get the app" from being squeezed. */
  .bar .btn-try { display: none; }
  .wrap { padding-left: 18px; padding-right: 18px; }
  header.hero { padding: 36px 0 44px; }
  section { padding-top: 44px; padding-bottom: 44px; }
}

/* ── top bar: what the bar sheds, and at what width ───────────────────────────
   The bar carries a fixed set of items in a fixed width, so as the viewport
   narrows it drops the least useful ink at each step rather than letting
   anything wrap or overflow. The wallet-kind line sheds right to left, because
   the claims are in descending order of "would a stranger understand this":
   "Bitcoin-only" lands on its own, "Silent Payments" does not.
   Every breakpoint below is measured, not guessed — see the note on each. */

/* 1. ≤1080px — "· Silent Payments" goes. It is the longest of the three and
      the one the rest of the page explains at length anyway. */
.btn-try .btn-try-long { display: inline; }
@media (max-width: 1080px) { .kind .kind-long { display: none; } }

/* 2. ≤980px — "· self-custodial" goes, leaving "Bitcoin-only". */
@media (max-width: 980px) { .kind .kind-mid { display: none; } }

/* 3. ≤900px — "Try it on Signet" no longer fits beside the primary button, so
      the button reads just "Try it". */
@media (max-width: 900px) { .btn-try .btn-try-long { display: none; } }

/* 4. ≤640px — "Try it" leaves the bar entirely (see the block above); what is
      left of the kind line tightens to buy room for the primary button. */
@media (max-width: 640px) {
  .kind { font-size: 10px; letter-spacing: .04em; }
  .brand { font-size: 15.5px; gap: 8px; }
  .brand img { width: 25px; height: 25px; }
}

/* 5. ≤430px — the kind line goes entirely rather than shrinking further.
      "Bitcoin-only" is a phrase, not a badge: at the size it would need to
      survive beside the wordmark and "Get the app" it stops being readable,
      and the hero says the same thing two lines further down. */
@media (max-width: 430px) { .kind { display: none; } }

@media (max-width: 430px) {
  .bar { padding: 10px 14px; gap: 8px; }
  .bar .btn-sm { padding: 8px 12px; font-size: 13px; }
}

/* 4. ≤380px — gutters and the primary button tighten. This is what keeps the
      wordmark alive at 375px (iPhone SE/8) and 360px (common Android): at the
      previous padding the bar needed 349px and had 334 at 362px wide. */
@media (max-width: 380px) {
  .bar { padding: 10px 10px; gap: 6px; }
  .bar .btn-sm { padding: 7px 10px; font-size: 12.5px; }
}

/* 6. ≤330px — only the button arrows go. The wordmark used to be dropped at
      355px too, because the badge sat beside it all the way down and the two
      together stopped fitting. With the kind line leaving at 430 that room is
      back: re-measured with the wordmark forced on, the bar fits at 355, 340,
      330, 320 and 300px. Hiding the site's own name on a phone was a cost
      worth paying for the badge and is not worth paying for nothing. */
@media (max-width: 330px) {
  .bar .btn .arrow { display: none; }
}

/* ── the on-chain comparison figures ─────────────────────────────────────────
   Two inline SVGs showing what clustering has to work with: one reused address
   versus a Silent Payment address. Inline rather than an image so they scale,
   cost no request, and take their colours from the palette above — an exported
   PNG would drift the first time a token changes. */
.chainfig-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .chainfig-pair { grid-template-columns: 1fr; } }

.chainfig {
  margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
  padding: 16px 16px 15px;
}
.chainfig svg { display: block; width: 100%; height: auto; }
.chainfig figcaption { margin-top: 12px; font-size: 13px; color: var(--dim); }
.chainfig figcaption strong { color: var(--ink); font-weight: 600; }

.cf-head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 7px;
}
.cf-head::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.cf-head-bad { color: var(--red); }
.cf-head-bad::before { background: var(--red); }
.cf-head-good { color: var(--green); }
.cf-head-good::before { background: var(--green); }

/* SVG internals. Fills and strokes are set here, not as presentation
   attributes, so the two figures cannot fall out of step with each other. */
.cf-payer rect { fill: var(--bg-2); stroke: var(--border-bright); stroke-width: 1; }
.cf-label { font-family: var(--sans); font-size: 10px; fill: var(--dim); }
.cf-wire path { fill: none; stroke: var(--faint); stroke-width: 1.4; }
.cf-addr { font-family: var(--mono); font-size: 11px; fill: var(--ink); }
.cf-sub { font-family: var(--sans); font-size: 9px; fill: var(--faint); }
.cf-sub-bad { fill: var(--red); }
/* The single reused address is the whole problem, so it is the one thing drawn
   in the alarm colour. */
.cf-box-bad { fill: rgba(179,38,30,.07); stroke: var(--red); stroke-width: 1.4; }
.cf-box-good rect { fill: var(--panel); stroke: var(--border-bright); stroke-width: 1.2; }
.cf-sp { font-family: var(--mono); font-size: 12px; color: var(--orange); }

/* The observer: a magnifying glass, plus the line of sight it either has or
   does not. On the left it is one unbroken stroke to the reused address; on the
   right the strokes are dashed, stop short and are struck through, because
   there is no shared address for clustering to hold on to. */
.cf-see path { fill: none; stroke-width: 1.4; }
.cf-see-bad path { stroke: var(--red); }
.cf-see-good path { stroke: var(--faint); stroke-dasharray: 3 3; }
.cf-cut path { fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; }
.cf-lens circle { fill: none; stroke-width: 1.8; }
.cf-lens path { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.cf-lens-bad circle, .cf-lens-bad path { stroke: var(--red); }
.cf-lens-good circle, .cf-lens-good path { stroke: var(--faint); }
.cf-verdict { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.cf-verdict-bad { fill: var(--red); }
.cf-verdict-good { fill: var(--green); }