/* tokens.css — shared design tokens + primitives for sendbitcoin.gift v2.
   Source of truth: v2/hero.html (webtaste reference). One shared stylesheet. */

/* A `hidden` attribute must actually hide. The UA stylesheet's [hidden]{display:none}
   loses to any author `display` rule — .btn{display:inline-block} is enough — and the
   element then shows as if the attribute were absent. Cheap global guard. */
[hidden]{display:none !important}

/* Visually hidden, still announced. Needed for the radio-group legends, which give
   the group an accessible name without adding a line the design does not want. */
.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}

/* A <fieldset> exists for the radio groups' semantics, not for its default chrome. */
fieldset.radio-fieldset{border:0;padding:0;margin:0;min-width:0}

:root{
  --orange:#FF8000;
  --orange-hover:#E67300;
  --orange-deep:#CC6200;
  --orange-ink:#B05700;
  --orange-bright:#FFA040;
  --orange-soft:#FDF1E0;
  --gold:#F2C14E;
  --ink:#1A1611;
  --ink-soft:#5C554B;
  --paper:#FFFDF9;
  --cream:#FAF5EC;
  --line:#EAE1D3;
  --warm-red:#B3452B;
  --success:#2E7D4F;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Public Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --maxw:1120px;
  --radius:18px;
  --shadow:0 20px 50px -24px rgba(26,22,17,.28);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  /* Was --gold (#F2C14E), 1.65:1 on --paper — below the 3:1 non-text floor
     (WCAG 1.4.11), and the only focus signal on these elements. --orange-ink
     gives 4.91:1 on --paper and 4.59:1 on --cream. */
  outline:2px solid var(--orange-ink);outline-offset:3px;border-radius:4px;
}
body.menu-open{overflow:hidden}

.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(40px,5.2vw,62px)}
h2{font-size:clamp(28px,3.2vw,40px)}
h3{font-size:clamp(20px,2vw,24px)}
.eyebrow{
  font-family:var(--mono);font-size:13px;font-weight:500;
  color:var(--orange-ink);letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:20px;
}
.lede{font-size:19px;color:var(--ink-soft)}
.hint{font-size:14px;color:var(--ink-soft)}
.hint.err{color:var(--warm-red)}
.mono{font-family:var(--mono);font-size:14px}
.mono.break{word-break:break-all}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:15px;
  padding:12px 26px;border-radius:999px;cursor:pointer;border:0;
  transition:background .15s,transform .15s,color .15s;
  min-height:48px;line-height:1.4;text-align:center;
}
.btn-primary{background:var(--orange);color:var(--ink)}
.btn-primary:hover{background:var(--orange-hover);transform:translateY(-1px)}
/* Ghost button: the boundary must itself clear WCAG 2.1 SC 1.4.11 (UI components need 3:1),
   so the outline uses --orange-deep, not the --line divider tone. --line is 1.28:1 on --paper
   and --orange is 2.48:1 — both invisible as a control boundary; --orange-deep is 3.89:1 on
   --paper, 3.64:1 on --cream and 3.54:1 on --orange-soft (its own hover fill). The hover label
   stays --ink (16.14:1 on --orange-soft) because --orange-deep text is only 3.89:1. */
.btn-ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--orange-deep)}
.btn-ghost:hover{background:var(--orange-soft);box-shadow:inset 0 0 0 2px var(--orange-deep);color:var(--ink)}
.btn-lg{font-size:17px;padding:16px 36px}
.btn-sm{font-size:14px;padding:9px 16px;min-height:36px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.link-secondary{
  font-weight:600;font-size:15px;color:var(--ink);
  border-bottom:2px solid var(--orange);padding-bottom:2px;
  transition:color .15s,border-color .15s;
}
.link-secondary:hover{color:var(--orange-deep);border-bottom-color:var(--orange-deep)}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
}
.logo{
  font-family:var(--serif);font-weight:700;font-size:20px;
  display:flex;align-items:center;gap:10px;letter-spacing:-.01em;
}
.logo-mark{
  width:28px;height:28px;border-radius:8px;
  background:var(--orange);
  display:grid;place-items:center;flex:none;
}
.logo-mark svg{width:16px;height:16px}
nav.main-nav{display:flex;align-items:center;gap:28px}
nav.main-nav a.nav-link{
  font-size:15px;font-weight:500;color:var(--ink-soft);
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:color .15s;
}
nav.main-nav a.nav-link:hover{color:var(--ink);border-bottom-color:var(--orange)}
nav.main-nav a.nav-link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--orange)}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-toggle svg{width:26px;height:26px}

/* mobile overlay menu */
.mobile-menu{
  position:fixed;inset:0;z-index:90;background:var(--cream);
  display:flex;flex-direction:column;padding:24px 28px;
  transform:translateX(100%);transition:transform .25s ease;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu .mm-top{display:flex;align-items:center;justify-content:space-between}
.mobile-menu nav{display:flex;flex-direction:column;gap:8px;margin-top:40px}
.mobile-menu nav a{
  font-family:var(--serif);font-size:28px;font-weight:600;padding:14px 0;
  border-bottom:1px solid var(--line);
}
.mobile-menu .btn{margin-top:28px;align-self:flex-start}
.menu-close{background:none;border:0;cursor:pointer;padding:8px}
.menu-close svg{width:28px;height:28px}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:14px;color:var(--ink-soft);padding:20px 0 0}
.breadcrumb a{color:var(--ink-soft);border-bottom:1px solid transparent}
.breadcrumb a:hover{color:var(--orange-deep);border-bottom-color:var(--orange-deep)}
.breadcrumb .sep{margin:0 8px;color:var(--line)}

/* ---------- Forms ---------- */
/* Control boundaries use --orange-deep, not --line: --line (#EAE1D3) is 1.28:1 on --paper and
   1.19:1 on --cream, below the 3:1 WCAG 2.1 SC 1.4.11 (non-text contrast) floor for the visual
   information that identifies a component. --orange-deep is 3.89:1 on --paper, 3.64:1 on --cream
   and 3.54:1 on --orange-soft. Do not put --line back on a control boundary. */
.field{margin-bottom:24px}
label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.field-help{font-size:14px;color:var(--ink-soft);margin:-4px 0 10px}
input[type="text"],input[type="number"],input[type="password"],input[type="email"],textarea,select{
  width:100%;font-family:var(--sans);font-size:17px;color:var(--ink);
  background:var(--cream);border:2px solid var(--orange-deep);border-radius:12px;
  padding:14px 16px;transition:border-color .15s;
}
input:focus,textarea:focus,select:focus{border-color:var(--orange-ink);outline:none}
/* Keep the keyboard ring visible after the focus reset above. */
input:focus-visible{outline:2px solid var(--orange-ink);outline-offset:3px}
/* Same keyboard ring as inputs — a border recolour alone was the only state
   signal here, and inconsistent with the input treatment above. */
textarea:focus-visible,select:focus-visible{border-color:var(--orange-ink);outline:2px solid var(--orange-ink);outline-offset:3px}
textarea{resize:vertical;min-height:96px}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-row label{
  display:flex;align-items:center;gap:6px;font-weight:500;font-size:15px;
  padding:10px 16px;border-radius:999px;border:2px solid var(--orange-deep);cursor:pointer;margin:0;
  transition:border-color .15s,background .15s;
}
/* Checked state must not rest on the 2px border alone: --orange-soft is ~1.1:1
   from --paper, so the fill read as invisible. Fill with --orange-ink instead —
   the same active-state pattern .net-toggle button.on already uses — with a
   --paper label (4.91:1) and a paper accent dot so the native radio stays
   visible inside its own dark fill. */
.radio-row label:has(input:checked){
  border-color:var(--orange-ink);background:var(--orange-ink);color:var(--paper);
}
.radio-row label:has(input:checked) input{accent-color:var(--paper)}
.radio-row input{width:auto;accent-color:var(--orange-ink)}
.checkbox-label{font-weight:500;font-size:15px;cursor:pointer}
.checkbox-label input{width:18px;height:18px;accent-color:var(--orange-ink);margin-right:10px;vertical-align:-3px}
.custom-dur-wrap{margin-top:12px}
.custom-dur-wrap .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.net-toggle{display:inline-flex;gap:6px;border:2px solid var(--orange-deep);border-radius:999px;padding:4px}
.net-toggle button{
  background:none;border:0;font-family:var(--sans);font-weight:600;font-size:14px;
  padding:8px 18px;border-radius:999px;cursor:pointer;color:var(--ink-soft);
}
.net-toggle button.on{background:var(--orange-ink);color:var(--paper)}

/* ---------- Callouts ---------- */
.callout{
  border-radius:var(--radius);padding:20px 22px;margin:20px 0;
  background:var(--cream);border:1px solid var(--line);
}
.callout.warn{background:var(--orange-soft);border-color:var(--orange-bright)}
.callout p{font-size:15px;color:var(--ink-soft)}
.callout.warn p{color:var(--ink)}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--orange);color:var(--ink);
  text-align:center;padding:72px 28px;
}
.cta-band h2{color:var(--ink);margin-bottom:12px}
.cta-band .lede{color:rgba(26,22,17,.8);max-width:44ch;margin:0 auto 28px}
.cta-band .btn-primary{background:var(--paper);color:var(--ink)}
.cta-band .btn-primary:hover{background:var(--cream);transform:translateY(-1px)}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:var(--cream);padding:64px 28px 48px}
footer.site a{color:var(--cream)}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:grid;gap:40px}
.footer-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
.footer-brand .logo{color:var(--cream)}
.footer-tag{color:rgba(250,245,236,.68);font-size:14.5px;max-width:34ch;margin-top:14px}
.footer-col h4{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,245,236,.55);margin-bottom:14px}
.footer-col a{display:block;font-size:15px;padding:6px 0;color:rgba(250,245,236,.85)}
.footer-col a:hover{color:var(--orange-bright)}
.footer-legal{border-top:1px solid rgba(250,245,236,.15);padding-top:24px;font-size:13.5px;color:rgba(250,245,236,.55);display:flex;justify-content:center;text-align:center;gap:8px 24px;flex-wrap:wrap}

/* ---------- Scroll reveal (gated behind .js so no-JS users see content) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Support FAB + modal (Lightning donation rail) ---------- */
/* Ink on orange, not white: #FFF on #FF8000 is 2.5:1 and fails AA; the design
   system's --ink gets ~8.3:1 and matches the CTA band. */
.support-fab{position:fixed;right:24px;bottom:24px;z-index:900;display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;border:0;border-radius:999px;cursor:pointer;font-family:var(--sans);font-size:15px;
  font-weight:600;letter-spacing:.005em;color:var(--ink);
  background:linear-gradient(135deg,var(--orange),var(--orange-hover));
  box-shadow:0 10px 26px -10px rgba(255,128,0,.7);transition:transform .18s ease,box-shadow .18s ease}
.support-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(255,128,0,.85)}
.support-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.support-fab-icon{flex:none}
.support-backdrop{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(26,22,17,.62)}
/* `hidden` must win — the display:flex above would otherwise defeat it. */
.support-backdrop[hidden]{display:none}
body.support-open{overflow:hidden}
.support-panel{position:relative;width:min(100%,430px);max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:30px 28px 26px;text-align:center}
.support-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--ink-soft);border-radius:50%}
.support-x:hover{color:var(--ink);background:var(--cream)}
.support-x:focus-visible{outline:3px solid var(--orange-deep);outline-offset:2px}
.support-title{font-family:var(--serif);font-size:26px;margin:0 0 10px}
.support-lede{color:var(--ink-soft);font-size:15px;margin:0 0 12px}
.support-ask{font-family:var(--serif);font-size:18px;color:var(--ink);margin:0 0 20px}
.support-qr{display:flex;justify-content:center;margin:0 0 16px}
.support-qr canvas{display:block;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px}
.support-offer-block{text-align:left;margin:0 0 14px}
.support-label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px}
.support-offer{display:block;max-height:72px;overflow-y:auto;padding:10px 12px;background:var(--cream);
  border:1px solid var(--line);border-radius:10px;font-size:11.5px;line-height:1.5;word-break:break-all;color:var(--ink-soft)}
.support-note{font-size:13px;text-align:left}

@media (max-width:768px){
  .support-fab{right:16px;bottom:16px;padding:11px 16px;font-size:14px}
  .support-panel{padding:26px 20px 22px}
  .support-title{font-size:23px}
}
/* Must never land on a printed gift card. */
@media print{
  .support-fab,.support-backdrop{display:none !important}
}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  nav.main-nav .nav-link{display:none}
  .menu-toggle{display:block}
  .footer-top{grid-template-columns:1fr}
  .btn-lg{width:100%}
}
@media (min-width:769px){
  .mobile-menu{display:none}
}

/* ---------- Single-purpose utilities ----------
   These exist because the CSP is `style-src 'self'` with NO 'unsafe-inline': a
   style="" attribute is DROPPED by the browser rather than sanitised, so anything
   that used to be inline had to become a class or it silently vanished. Each name
   states the property it sets, and each class carries exactly the value the inline
   style carried.

   They are deliberately NOT !important. An inline style outranked every stylesheet
   rule; a class does not, so a page rule that sets the same property now wins. That
   is the point: page styles should beat a utility, and before this change they
   could not. */
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-20 { margin-top: 20px; }
.mt-56 { margin-top: 56px; }
.mt-64 { margin-top: 64px; }
.mb-12 { margin-bottom: 12px; }
.w-full { width: 100%; }
.text-center { text-align: center; }
/* "(optional)" beside a label: quieter than the label text itself. */
.optional-note { color: var(--ink-soft); font-weight: 400; }