/* ============ FONTS ============
   Self-hosted so the page makes no third-party requests. Latin subset only;
   the tick and arrow glyphs fall back to the system font, as they always have.
   Instrument Sans/Serif and IBM Plex Mono are all SIL OFL 1.1 — see fonts/LICENCE.md */
@font-face{
  font-family:'Instrument Sans';
  src:url('/fonts/instrument-sans-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('/fonts/instrument-serif-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

/* ============ PALETTE ============
   Light is the base. Dark is redefined twice: once for people whose system asks
   for it (unless they've explicitly chosen light here), once for the toggle. */
:root{
  --paper:#f2eee3;
  --ink:#1a1a18;
  --ink-soft:#6b6557;
  --rule:#d6d0bf;
  --rule-strong:#1a1a18;
  --highlight:#f2dd3e;
  --box-bg:#ffffff;
  --hover:rgba(242,221,62,.25);
  --bar-track:rgba(26,26,24,.08);
  --danger:#a32b25;
  --focus:#1a1a18;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#191712;
    --ink:#f0ece1;
    --ink-soft:#aaa392;
    --rule:#3a372c;
    --rule-strong:#f0ece1;
    --highlight:#f2dd3e;
    --box-bg:#0e0d09;
    --hover:rgba(242,221,62,.14);
    --bar-track:rgba(240,236,225,.13);
    --danger:#ff8f88;
    --focus:#f2dd3e;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#191712;
  --ink:#f0ece1;
  --ink-soft:#aaa392;
  --rule:#3a372c;
  --rule-strong:#f0ece1;
  --highlight:#f2dd3e;
  --box-bg:#0e0d09;
  --hover:rgba(242,221,62,.14);
  --bar-track:rgba(240,236,225,.13);
  --danger:#ff8f88;
  --focus:#f2dd3e;
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  font-family:'Instrument Sans',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:740px;margin:0 auto;padding:0 28px}

/* Visible focus on every interactive element. */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Visually hidden, still announced and still focusable. */
.vh{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ============ TOP BAR ============ */
.topbar{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:26px 0 18px;
}
.topbar-end{display:flex;align-items:baseline;gap:18px}
.wordmark{font-family:'Instrument Serif',serif;font-size:22px;letter-spacing:.01em}
.wordmark mark{background:var(--highlight);color:#1a1a18;padding:1px 5px}
.soon{
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
}
.themetoggle{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);background:transparent;
  border:1px solid var(--rule);padding:5px 9px;cursor:pointer;
  transition:color .12s,border-color .12s;
}
.themetoggle:hover{color:var(--ink);border-color:var(--ink)}
.themetoggle-icon{
  width:11px;height:11px;border-radius:50%;
  border:1.5px solid currentColor;
  background:linear-gradient(to right,currentColor 0 50%,transparent 50% 100%);
}
.rule{border-top:2px solid var(--rule-strong)}

/* ============ HERO ============ */
.hero{display:flex;gap:48px;align-items:flex-start;padding:56px 0 60px}
h1{
  font-weight:700;
  font-size:clamp(36px,6vw,52px);
  line-height:1.04;
  letter-spacing:-0.025em;
  flex:1 1 55%;
  max-width:440px;
}
.lede{flex:1 1 40%;font-size:16.5px;line-height:1.62;color:var(--ink);padding-top:10px}
@media (max-width:640px){
  .hero{flex-direction:column;gap:24px;padding:42px 0 44px}
  h1{max-width:none}
  .lede{padding-top:0}
}

/* ============ POLL ============ */
.pollset{border:0;padding:0;margin:0;min-width:0}
.pollhead{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  width:100%;padding:22px 0 14px;
}
.pollhead h2{font-weight:700;font-size:20px;letter-spacing:-0.01em}
.chooseone{
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
}
@media (max-width:520px){
  .pollhead{flex-direction:column;align-items:flex-start;gap:6px}
}

.tools{list-style:none}
.tool{border-top:1px solid var(--rule)}
.tool:first-child{border-top:none}
.toolrow{
  display:flex;align-items:center;gap:16px;
  padding:15px 12px;cursor:pointer;
  transition:background .12s;
}
.toolrow:hover{background:var(--hover)}
.toolrow:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}

.toolrow input[type=radio]{
  appearance:none;-webkit-appearance:none;
  width:19px;height:19px;flex-shrink:0;margin:0;
  border:1.5px solid var(--ink);background:var(--box-bg);
  display:grid;place-content:center;cursor:pointer;
}
/* A chosen row is yellow in both themes, so the tick is fixed rather than tokenised. */
.toolrow input[type=radio]:checked{background:#1a1a18;border-color:#1a1a18}
.toolrow input[type=radio]:checked::after{
  content:"";width:4px;height:8px;
  border:solid #f2eee3;border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.tool .name{font-weight:600;font-size:15.5px}
.tool .price{
  margin-left:auto;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);
  white-space:nowrap;
}
.tool .price .pricetag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.tool .go{font-size:17px;font-weight:600;width:0;overflow:hidden;transition:width .15s}

.tool:has(input:checked){background:var(--highlight)}
.tool:has(input:checked) .name,
.tool:has(input:checked) .price,
.tool:has(input:checked) .go,
.tool:has(input:checked) input[type=text]{color:#1a1a18}
.tool:has(input:checked) .go{width:22px}
.tool:has(input:checked) .toolrow:hover{background:transparent}

.other-row input[type=text]{
  font-family:'Instrument Sans',sans-serif;font-size:15.5px;font-weight:500;
  border:none;background:transparent;outline:none;flex:1;min-width:0;
  color:var(--ink);padding:2px 0;
}
.other-row input[type=text]:focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;
}
.other-row input[type=text]::placeholder{color:var(--ink-soft);font-weight:400;opacity:1}
.tool:has(input:checked) input[type=text]::placeholder{color:#5a5340}

/* ============ CURRENCY ============ */
.pricenote{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding:16px 12px 0;
}
.curr{border:0;padding:0;margin:0;min-width:0}
.currset{display:inline-flex;border:1px solid var(--rule)}
.currset input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.currset label{
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:11px;letter-spacing:.12em;
  padding:6px 11px;cursor:pointer;color:var(--ink-soft);
  border-left:1px solid var(--rule);
  transition:background .12s,color .12s;
}
.currset label:first-of-type{border-left:none}
.currset input:hover + label{color:var(--ink)}
.currset input:checked + label{background:var(--ink);color:var(--paper)}
.currset input:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}
.pricecaption{font-size:12px;color:var(--ink-soft);line-height:1.55;flex:1 1 240px}

/* ============ EMAIL / SUBMIT ============ */
/* grid-template-rows animates to the content's natural height, so nothing clips
   on a narrow screen the way a fixed max-height did. */
.followup{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .35s ease,opacity .35s ease;
}
.followup > .followup-inner{overflow:hidden;min-height:0}
.followup.open{grid-template-rows:1fr;opacity:1}
.followup-inner > *:first-child{padding-top:30px}
.wantline{font-size:15.5px;margin-bottom:18px}
.emailrow{display:flex;gap:0;flex-wrap:wrap;border-bottom:1.5px solid var(--ink)}
.emailrow input{
  flex:1;min-width:200px;
  font-family:'Instrument Sans',sans-serif;font-size:16px;
  background:transparent;border:none;outline:none;color:var(--ink);
  padding:14px 2px;
}
.emailrow input::placeholder{color:var(--ink-soft);opacity:1}
.emailrow input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.emailrow.invalid{border-bottom-color:var(--danger)}
button.logvote{
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);
  border:none;padding:16px 26px;cursor:pointer;
  transition:opacity .12s;
}
button.logvote:hover{opacity:.85}
button.logvote:disabled{opacity:.5;cursor:wait}
.formerror{font-size:13px;color:var(--danger);margin-top:12px;line-height:1.5;font-weight:500}
.formerror:empty{display:none}
.privacy{font-size:12.5px;color:var(--ink-soft);margin-top:12px;line-height:1.6}

/* ============ NOTED STATE ============ */
.logged{display:none;padding:34px 0 8px}
.logged .stamped{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);
  padding:12px 20px;margin-bottom:16px;
}
.logged p{font-size:15px;color:var(--ink);line-height:1.6}

/* ============ TALLY ============ */
.tally{padding:38px 0 8px}
.tally-title{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
  border-top:2px solid var(--rule-strong);
  padding:14px 0 10px;
}
.t-line{
  display:flex;align-items:center;gap:12px;
  padding:9px 2px;border-top:1px solid var(--rule);
  font-size:14.5px;
}
.t-line:first-of-type{border-top:none}
.t-line .k{font-weight:600}
.t-line .bar{flex:1;height:8px;background:var(--bar-track);position:relative}
.t-line .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--highlight);display:block}
.t-line .n{font-family:'IBM Plex Mono',monospace;font-size:12px;min-width:28px;text-align:right}

/* ============ FOOTER ============ */
.footwrap{margin-top:64px}
.foot{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:18px 0 40px;
  font-size:12.5px;color:var(--ink-soft);line-height:1.6;
}
.foot a{color:var(--ink-soft)}
.foot .rulefull{width:100%}