/* votehelper visual direction: Paper — Calm editorial: warm paper, ink type, one deep-teal accent — feels like a well-made magazine page.
   Generated by ../build.py from the DIRECTIONS tokens. Components: ../base.css. */
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/onest-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/onest-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
:root{--font-body:'Onest', system-ui, sans-serif;--font-display:'Onest', system-ui, sans-serif;--h1:27px;--h1-desk:42px;--h1-w:700;--h1-track:-0.02em;--h1-track-desk:-0.03em;--q-w:650;--r-card:18px;--r-opt:12px;--r-btn:12px;--r-chip:999px;--r-panel:12px;--r-bar:999px;--r-step:50%;--bar-h:8px;--card-bw:1px;--opt-bw:1.5px;--row-gap:14px;--pct-size:16px;--quiet-style:dashed;--ease-out:cubic-bezier(.22,.61,.36,1);--dur-bar:600ms}
:root,[data-theme=light]{color-scheme:light;--bg:#F8F6F1;--surface:#FFFFFF;--surface-2:#F2EEE6;--border:#E4DED3;--ink:#1F1D1A;--ink-2:#5F594F;--ink-3:#A39C90;--link:#0B6E66;--accent:#0B6E66;--accent-text:#0A665F;--live:#0B8A7F;--live-halo:#0B8A7F26;--opt-bg:#FFFFFF;--opt-border:#8F887C;--opt-bg-hover:#F3FAF8;--opt-border-hover:#0B6E66;--ring:#8F887C;--quiet-bg:transparent;--quiet-border:#8F887C;--bar-track:#EDE8DF;--bar:#8A8378;--bar-pick:#0B6E66;--hatch-a:#8A8378;--hatch-b:#EDE8DF;--pill-bg:#DDF0EC;--pill-ink:#075049;--btn-bg:#0B6E66;--btn-ink:#FFFFFF;--btn-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 16px -8px rgba(11,110,102,.55);--chip-bg:#FFFFFF;--chip-border:#DCD5C8;--chip-icon:#0B6E66;--tag-bg:#F7E7C6;--tag-ink:#6B4A0C;--step-bg:#DDF0EC;--step-ink:#075049;--focus:#0B6E66;--shadow-card:0 1px 2px rgba(40,30,10,.04), 0 8px 24px -12px rgba(40,30,10,.12)}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#141311;--surface:#1D1C19;--surface-2:#262420;--border:#35322C;--ink:#EEEBE4;--ink-2:#ABA597;--ink-3:#6F695E;--link:#6DD0C0;--accent:#5CC4B4;--accent-text:#6DD0C0;--live:#5CC4B4;--live-halo:#5CC4B42E;--opt-bg:#1D1C19;--opt-border:#7A7468;--opt-bg-hover:#22302D;--opt-border-hover:#5CC4B4;--ring:#7A7468;--quiet-bg:transparent;--quiet-border:#7A7468;--bar-track:#302D28;--bar:#8C8679;--bar-pick:#5CC4B4;--hatch-a:#8C8679;--hatch-b:#302D28;--pill-bg:#1B3D38;--pill-ink:#9BE3D6;--btn-bg:#5CC4B4;--btn-ink:#0B1F1C;--btn-shadow:none;--chip-bg:#1D1C19;--chip-border:#3D3A33;--chip-icon:#6DD0C0;--tag-bg:#3E3218;--tag-ink:#F2D59A;--step-bg:#1B3D38;--step-ink:#9BE3D6;--focus:#6DD0C0;--shadow-card:none}}
[data-theme=dark]{color-scheme:dark;--bg:#141311;--surface:#1D1C19;--surface-2:#262420;--border:#35322C;--ink:#EEEBE4;--ink-2:#ABA597;--ink-3:#6F695E;--link:#6DD0C0;--accent:#5CC4B4;--accent-text:#6DD0C0;--live:#5CC4B4;--live-halo:#5CC4B42E;--opt-bg:#1D1C19;--opt-border:#7A7468;--opt-bg-hover:#22302D;--opt-border-hover:#5CC4B4;--ring:#7A7468;--quiet-bg:transparent;--quiet-border:#7A7468;--bar-track:#302D28;--bar:#8C8679;--bar-pick:#5CC4B4;--hatch-a:#8C8679;--hatch-b:#302D28;--pill-bg:#1B3D38;--pill-ink:#9BE3D6;--btn-bg:#5CC4B4;--btn-ink:#0B1F1C;--btn-shadow:none;--chip-bg:#1D1C19;--chip-border:#3D3A33;--chip-icon:#6DD0C0;--tag-bg:#3E3218;--tag-ink:#F2D59A;--step-bg:#1B3D38;--step-ink:#9BE3D6;--focus:#6DD0C0;--shadow-card:none}

.opt .ring{transition:border-color .15s}
.row.pick .row-top .pct{color:var(--accent-text)}
.h1{font-weight:720}

/* votehelper — shared component CSS for all 3 visual directions.
   Every visual decision is a token (CSS variable) set in <direction>/style.css.
   This file holds only structure + token wiring, so the same markup renders in any direction. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  font-feature-settings: var(--body-features, normal);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ic { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }

/* ---------- page frame ---------- */
.page { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.wide { max-width: 1088px; margin: 0 auto; padding: 0 32px; }

.hdr { height: 56px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font: var(--logo-weight, 700) 18px/1 var(--font-logo, var(--font-display)); letter-spacing: var(--logo-track, -0.01em); }
.logo svg { width: 28px; height: 28px; }
.sw { display: flex; align-items: center; font-size: 14px; }
.sw a, .sw b { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.sw b { font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sw a { color: var(--ink-2); text-decoration: none; }
.sw i { color: var(--ink-3); font-style: normal; }

.crumbs { font-size: 13px; color: var(--ink-2); margin: 8px 0 8px; }
.crumbs a { color: var(--ink-2); }
h1.h1 { font-size: var(--h1); line-height: var(--h1-lh, 1.2); font-weight: var(--h1-w, 700);
  letter-spacing: var(--h1-track, -0.015em); text-wrap: balance; }
.meta { font-size: 13px; color: var(--ink-2); margin: 8px 0 20px; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.live { display: inline-flex; align-items: center; gap: 6px; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 3px var(--live-halo); }

/* ---------- card ---------- */
.card { background: var(--surface); border: var(--card-bw) solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: var(--card-pad, 20px); }
.card-label { font: 600 12px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.card h2.q { font-size: var(--q-size, 19px); line-height: 1.3; font-weight: var(--q-w, 650); letter-spacing: var(--h1-track); margin: 0 0 14px; text-wrap: balance; }

/* ---------- vote options ---------- */
.opts { display: flex; flex-direction: column; gap: var(--opt-gap, 8px); }
.opt { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 52px; width: 100%;
  padding: 12px 16px; font: 500 16px/1.35 var(--font-body); color: var(--ink); cursor: pointer;
  background: var(--opt-bg); border: var(--opt-bw) solid var(--opt-border); border-radius: var(--r-opt);
  box-shadow: var(--opt-shadow, none); transition: background .15s, border-color .15s, transform .08s; }
.opt .ring { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--ring); background: var(--surface); }
.opt:hover { background: var(--opt-bg-hover); border-color: var(--opt-border-hover); }
.opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt.is-hover { background: var(--opt-bg-hover); border-color: var(--opt-border-hover); }
.opt.quiet { min-height: 44px; margin-top: 4px; justify-content: center; font-weight: 450; font-size: 15px; color: var(--ink-2);
  background: var(--quiet-bg); border: var(--quiet-bw, 1.5px) var(--quiet-style, dashed) var(--quiet-border); box-shadow: none; }
.opts.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.opts.grid2 .quiet { grid-column: 1 / -1; }
.fine { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.fine .ic { width: 15px; height: 15px; color: var(--ink-2); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.card-foot .fine { margin: 0; }
.more { font-size: 14px; font-weight: 600; color: var(--accent-text); text-decoration: none; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- results ---------- */
.res-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.res-head h2 { font-size: 18px; font-weight: 700; letter-spacing: var(--h1-track); }
.res-head span { font-size: 13px; color: var(--ink-2); }
.rows { display: flex; flex-direction: column; gap: var(--row-gap, 14px); }
.row-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.row .lbl { flex: 1; font-size: 15.5px; line-height: 1.35; }
.row .pct { font: var(--pct-w, 700) var(--pct-size, 16px)/1.2 var(--font-pct, var(--font-body)); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.row .cnt { font-size: 12.5px; color: var(--ink-2); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: var(--bar-h); border-radius: var(--r-bar); background: var(--bar-track); overflow: hidden; }
.bar > i { display: block; height: 100%; width: var(--w); border-radius: var(--r-bar); background: var(--bar); }
.row.pick .lbl { font-weight: 700; }
.row.pick .bar > i { background: var(--bar-pick); }
.row.hard .lbl { color: var(--ink-2); }
.row.hard .bar > i { background: repeating-linear-gradient(-45deg, var(--hatch-a) 0 3px, var(--hatch-b) 3px 6px); }
.pill { display: inline-flex; align-items: center; gap: 4px; vertical-align: 1px; margin-left: 6px; padding: 2px 8px 2px 6px;
  font: 650 12px/1.3 var(--font-body); white-space: nowrap; border-radius: 999px;
  color: var(--pill-ink); background: var(--pill-bg); border: var(--pill-bw, 0) solid var(--pill-border, transparent); }
.pill .ic { width: 12px; height: 12px; vertical-align: 0; }
.decided { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-panel); background: var(--surface-2); font-size: 14px; line-height: 1.45; color: var(--ink); }
.decided b { font-weight: 650; }

.btn { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 52px; padding: 0 20px; border-radius: var(--r-btn); cursor: pointer;
  font: 650 16.5px/1 var(--font-btn, var(--font-body)); letter-spacing: var(--btn-track, 0);
  background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow, none); }
.btn .ic { width: 18px; height: 18px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--opt-border); box-shadow: none; }
.btn-wrap { margin-top: 18px; }

.share { margin-top: 20px; }
.share-l { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: var(--r-chip);
  font-size: 14px; font-weight: 550; color: var(--ink); background: var(--chip-bg); border: 1px solid var(--chip-border); text-decoration: none; }
.chip .ic { width: 17px; height: 17px; color: var(--chip-icon); }

.sec { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.sec p { margin: 0 0 10px; }
.sec details summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; color: var(--ink);
  font-size: 14.5px; font-weight: 550; cursor: pointer; list-style: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 6px 0 12px; }
.sec details summary .ic { color: var(--ink-2); }

.panel { margin-top: 24px; padding: 18px; border-radius: var(--r-card); background: var(--surface-2); }
.panel h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; letter-spacing: var(--h1-track); }
.panel p { margin: 0 0 6px; font-size: 15px; }
.panel .small { font-size: 13px; color: var(--ink-2); }

/* ---------- facts table (topic) ---------- */
.facts { margin-top: 20px; padding: 16px 16px 12px; border-radius: var(--r-card); background: var(--surface-2); }
.facts-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.facts-h h3 { font-size: 16px; font-weight: 700; }
.tag { font: 650 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px;
  color: var(--tag-ink); background: var(--tag-bg); }
.facts table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.facts th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--ink-2); padding: 6px 0; }
.facts th:not(:first-child), .facts td:not(:first-child) { text-align: right; width: 78px; }
.facts td { padding: 8px 0; border-top: 1px solid var(--border); vertical-align: top; }
.facts td:first-child { color: var(--ink-2); padding-right: 8px; font-size: 13.5px; }
.facts td b { font-weight: 650; color: var(--ink); }
.facts .note { font-size: 12px; color: var(--ink-2); margin: 8px 0 0; }
.facts .tz { color: var(--ink); }

/* ---------- home ---------- */
.hero { display: grid; grid-template-columns: 1fr 480px; gap: 72px; align-items: start; padding: 56px 0 24px; }
.hero h1 { font-size: var(--h1-desk); line-height: 1.12; font-weight: var(--h1-w); letter-spacing: var(--h1-track-desk, -0.02em); }
.hero .sub { font-size: 18px; color: var(--ink-2); margin: 16px 0 36px; max-width: 30em; }
.steps h2 { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.step { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; font-size: 16px; }
.step .n { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-step);
  font: 700 14px/1 var(--font-display); background: var(--step-bg); color: var(--step-ink); }
.step p { margin: 4px 0 0; }
.note { font-size: 13.5px; color: var(--ink-2); margin-top: 20px; max-width: 34em; }
.list-h { font-size: 22px; font-weight: 700; margin: 48px 0 16px; letter-spacing: var(--h1-track); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lc { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 132px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-list, none);
  color: var(--ink); text-decoration: none; }
.lc .q { font: var(--q-w, 650) 17px/1.35 var(--font-display); letter-spacing: var(--h1-track); }
.lc .m { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.lc .ok { color: var(--accent-text); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.lc.start { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.lc .go { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-weight: 600; }
.foot { margin-top: 64px; background: var(--surface-2); padding: 32px 0 40px; font-size: 14px; color: var(--ink-2); }
.foot nav { display: flex; gap: 4px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.foot nav a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.foot p { margin: 4px 0; }

/* ---------- widget ---------- */
.wf { width: 340px; height: 320px; overflow: hidden; background: var(--surface); color: var(--ink); border-radius: var(--r-card);
  border: var(--card-bw) solid var(--border); box-shadow: var(--shadow-card); padding: 16px; display: flex; flex-direction: column;
  font-family: var(--font-body); }
.wf .wq { font: var(--q-w, 650) 16px/1.3 var(--font-display); letter-spacing: var(--h1-track); margin: 0 0 12px; }
.wf .opt { min-height: 44px; padding: 9px 14px; font-size: 15px; }
.wf .opt .ring { width: 18px; height: 18px; }
.wf .opt.quiet { margin-top: 2px; font-size: 14px; }
.wf .opts { gap: 7px; }
.wf .wfoot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-2); }
.wf .wfoot .wm { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font: var(--logo-weight, 700) 13px/1 var(--font-logo, var(--font-display)); text-decoration: none; }
.wf .wfoot .wm svg { width: 16px; height: 16px; }
.wf .rows { gap: 8px; }
.wf .wq.short { margin-bottom: 8px; }
.wf .row-top { margin-bottom: 4px; }
.wf .row .lbl { font-size: 14px; }
.wf .row .pct { font-size: 14.5px; }
.wf .bar { height: calc(var(--bar-h) - 2px); }
.wf .wcount { font-size: 12px; color: var(--ink-2); margin: 8px 0 8px; }
.wf .btn { min-height: 44px; font-size: 15px; }
.wf .dots { display: inline-flex; gap: 5px; }
.wf .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--bar-track); }
.wf .dots i.on { background: var(--accent); }
.wf .wfoot a.all { color: var(--accent-text); font-weight: 600; text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; gap: 3px; }

/* ---------- motion (applied by JS by adding .reveal to the results container; static in mocks) ---------- */
@keyframes vh-grow { from { width: 0; } to { width: var(--w); } }
@keyframes vh-fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.reveal .bar > i { animation: vh-grow var(--dur-bar, 600ms) var(--ease-out) both; }
.reveal .row:nth-child(2) .bar > i { animation-delay: 60ms; }
.reveal .row:nth-child(3) .bar > i { animation-delay: 120ms; }
.reveal .row:nth-child(4) .bar > i { animation-delay: 180ms; }
.reveal .row:nth-child(5) .bar > i { animation-delay: 240ms; }
.reveal .pill { animation: vh-fade 150ms ease-out 750ms both; }
.opt:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .reveal .bar > i, .reveal .pill { animation: none; }
  .opt, .opt:active { transition: none; transform: none; }
}

/* Bloom tweaks adopted with Paper (owner decision #13) */
:root{--bar-h:12px;--r-card:20px}

/* ---------- app-only (not in the mockups) ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;z-index:10}
[hidden]{display:none !important}
.sw .cur{font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px;display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
p.meta{margin:8px 0 20px}
.card .card-foot{margin-top:12px}
.peek{background:none;border:0;padding:0 0 0 8px;margin:0;font:600 14px/1.3 var(--font-body);color:var(--accent-text);cursor:pointer;min-height:44px;text-align:right}
.peek:focus-visible,.chip:focus-visible,.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.opt.dim{opacity:.55}
.opt.pressed{background:var(--opt-bg-hover);border-color:var(--opt-border-hover)}
.opt.pressed .ring{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--surface);background:var(--accent)}
.retry{background:none;border:0;padding:0;font:inherit;color:var(--link);text-decoration:underline;cursor:pointer}
.row-top .lw{flex:1;font-size:15.5px;line-height:1.35}
.state,.warn{margin:0 0 14px;font-size:14px;color:var(--ink-2)}
.warn{color:var(--ink)}
.dknote{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.peekbox{margin-top:14px;display:flex;flex-direction:column;gap:10px}
button.chip{font-family:inherit;cursor:pointer}
.panel h2{font-size:16.5px;font-weight:700;margin-bottom:6px;letter-spacing:var(--h1-track)}
.panel ul{margin:0;padding-left:18px;font-size:15px}
.card h2.q a{color:inherit;text-decoration:none}
.ctx{margin-top:28px;font-size:16px;line-height:1.6}
.ctx h2{font-size:20px;font-weight:700;letter-spacing:var(--h1-track);margin:28px 0 8px}
.ctx h2:first-child{margin-top:0}
.ctx p,.ctx ul{margin:0 0 12px}
.ctx details{border-bottom:1px solid var(--border);margin:0 0 12px}
.ctx details summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.ctx details summary::-webkit-details-marker{display:none}
.ctx details summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.ctx details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.ctx details>p{padding-top:0;margin:0 0 14px}
.ctx details summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.plist{padding-left:20px;margin:16px 0 0}
.plist li{margin:0 0 10px}
.cards{list-style:none;margin:0;padding:0}
.lc .q{color:var(--ink)}
/* home: one DOM order for mobile (intro, card, list, how) and two desktop columns */
.home{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "card" "list" "how";padding:24px 0 0}
.home .intro{grid-area:intro}.home .feat{grid-area:card}.home .all{grid-area:list}.home .how{grid-area:how}
.home h1{font-size:var(--h1);line-height:1.2;font-weight:var(--h1-w);letter-spacing:var(--h1-track);text-wrap:balance}
.home .sub{font-size:16px;color:var(--ink-2);margin:8px 0 20px}
.home .list-h{margin:40px 0 16px}
.home .how{margin-top:40px}
@media (min-width:960px){
  .home{grid-template-columns:1fr 480px;grid-template-areas:"intro card" "how card" "list list";column-gap:72px;padding-top:56px;align-items:start}
  .home .feat{grid-row:1 / span 2}
  .home h1{font-size:var(--h1-desk);line-height:1.12;letter-spacing:var(--h1-track-desk)}
  .home .sub{font-size:18px;margin:16px 0 36px;max-width:30em}
  .home .how{margin-top:0}
  .home .list-h{margin-top:48px}
}
@media (max-width:959px){ .wide{padding:0 16px} .grid3{grid-template-columns:minmax(0,1fr)} }
@media (min-width:600px) and (max-width:959px){ .grid3{grid-template-columns:repeat(2,minmax(0,1fr))} }
.page > h1.h1:first-child{margin-top:16px}
.card-foot .fine{flex:1 1 55%}
.card-foot .peek{flex:0 1 45%}
@media (max-width:400px){ .card{--card-pad:16px} .opt{padding:12px 14px;gap:10px} }
.lead-note { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-panel); background: var(--surface-2); font-size: 15px; line-height: 1.45; color: var(--ink); }
.back-home { margin-top: 28px; font-weight: 600; }
.fb { margin-top: 20px; display: grid; gap: 16px; max-width: 560px; }
.fb fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.fb legend, .fb-field { font-weight: 600; font-size: 15px; }
.fb-radio { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; }
.fb-field { display: grid; gap: 6px; }
.fb textarea, .fb input[type=email] { font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 1.5px solid var(--opt-border); border-radius: var(--r-opt); padding: 10px 12px; }
.fb textarea:focus-visible, .fb input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.fb [aria-invalid=true] { border-color: #B3261E; }
.fb-opt, .fb-note { font-weight: 400; color: var(--ink-2); font-size: 14px; }
.fb-note { margin: -8px 0 0; }
.fb-err { color: #B3261E; font-weight: 600; margin: 0; }
.feat-more { margin: 14px 0 0; font-weight: 600; font-size: 15px; }