/* Approval Rating v1 · own design system (SPEC Design). Fonts self-hosted, OFL (see fonts/OFL-*.txt). */
@font-face { font-family: "Syne"; src: url("fonts/syne-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-var-latin.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/dm-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #0E1024; --ink2: #33384F; --mute: #62677F; --line: #E2E4EF; --wash: #F4F5FB; --paper: #FFFFFF;
  --co: #2337E6; --co-d: #1828B8; --co-l: #A9B2F7; --co-w: #EEF0FD; --hi: #FFE14D; --hi-l: #FFF3B0;
  --ok: #0F7A52; --ok-w: #E5F5EE; --bad: #C2301F; --bad-w: #FCEBE8;
  --disp: "Syne", "Arial Black", system-ui, sans-serif; --text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "DM Mono", ui-monospace, Consolas, monospace;
  --r: 18px; --r-s: 10px; --shadow: 0 1px 2px rgba(14,16,36,.06), 0 18px 40px -18px rgba(14,16,36,.28);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--text); color: var(--ink); background: var(--paper); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--co); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--co-d); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--co); outline-offset: 2px; border-radius: 4px; }
b, strong { font-weight: 650; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.small { font-size: 14.5px; color: var(--mute); }
.mono { font-family: var(--mono); }
.eyebrow { font: 600 13px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--co); margin: 0 0 14px; }
.eyebrow a { color: inherit; text-decoration: none; }
.hl { background: linear-gradient(176deg, transparent 54%, var(--hi) 54%, var(--hi) 90%, transparent 90%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl--soft { background: linear-gradient(176deg, transparent 50%, var(--hi-l) 50%, var(--hi-l) 92%, transparent 92%); }
.h1, .h2, .h3, h1, h2, h3 { font-family: var(--disp); letter-spacing: -.02em; line-height: 1.04; margin: 0 0 .5em; }
.h1 { font-size: clamp(38px, 5.2vw, 68px); font-weight: 800; }
.h2 { font-size: clamp(30px, 3.8vw, 50px); font-weight: 800; }
.h2--sm { font-size: clamp(24px, 2.6vw, 34px); }
.h3, h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink2); max-width: 46em; }
.arrow { font-weight: 650; text-decoration: none; }
.arrow::after { content: " \2192"; transition: margin .15s; }
.arrow:hover::after { margin-left: 4px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 650 15.5px/1 var(--text); padding: 13px 20px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform .12s, background .12s, box-shadow .12s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--go { background: var(--co); color: #fff; }
.btn--go:hover { background: var(--co-d); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--danger { background: var(--bad); color: #fff; }
.btn--danger:hover { color: #fff; background: #9d2316; }
.btn--hi { background: var(--hi); color: var(--ink); border-color: var(--hi); }
.btn--hi:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--big { padding: 17px 28px; font-size: 17px; }
.btn--wide { width: 100%; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--bad); text-decoration: underline; cursor: pointer; }
.linkbtn--add { color: var(--co); font-weight: 650; text-decoration: none; }
.linkbtn--add:hover { text-decoration: underline; }

/* top bar: ink, like the results board on the home page */
.top { position: sticky; top: 0; z-index: 30; background: var(--ink); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.top__in { max-width: 1280px; margin: 0 auto; padding: 0 28px; height: 68px; display: flex; align-items: center; gap: 28px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.mark:hover { color: #fff; }
.mark__box { width: 36px; height: 36px; flex: none; }
.mark__box rect { fill: var(--co); }
.mark__box path { fill: none; stroke: var(--hi); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mark__box--rev rect { fill: var(--hi); }
.mark__box--rev path { stroke: var(--ink); }
.mark__word { font: 800 15px/.98 var(--disp); letter-spacing: -.01em; text-transform: uppercase; }
.top__nav { display: flex; gap: 2px; margin-left: auto; align-self: stretch; }
.top__nav a { display: flex; align-items: center; color: #c8cbe0; text-decoration: none; font-weight: 550; font-size: 15px; padding: 0 14px; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.top__nav a:hover { color: #fff; }
.top__nav a[aria-current] { color: #fff; border-bottom-color: var(--hi); }
.top__act { display: flex; align-items: center; gap: 12px; }
.top__act .btn { padding: 10px 16px; }

/* phone tab bar */
.tabs { display: none; }

/* home stage: the working example ballot is the hero (full width, ink) */
.hero > *, .split > *, .counter > *, .mgr > *, .maker > *, .votewrap > *, .pricewide > *, .twin > *, .stage__foot > * { min-width: 0; }
.stage { background: var(--ink); color: #fff; overflow-x: clip; }
.stage__in { max-width: 1280px; margin: 0 auto; padding: 48px 28px 72px; }
.stage__kick { display: flex; align-items: center; gap: 10px; font: 400 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #a8acc8; margin: 0 0 22px; }
.stage__dot { width: 9px; height: 9px; border-radius: 2px; background: var(--hi); flex: none; }
.stage__h { font-family: var(--disp); font-weight: 800; font-size: clamp(36px, 5.1vw, 80px); line-height: 1.07; letter-spacing: -.04em; margin: 0 0 36px; }
.stage__h .hl { background: var(--hi); color: var(--ink); padding: 0 .12em .04em; border-radius: 3px; }
.live { background: #fff; color: var(--ink); border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.6); }
.live__top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: end; padding: 26px 32px 22px; border-bottom: 2px solid var(--ink); }
.live__tag { font: 400 12.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin: 0 0 8px; }
.live__q { font: 700 clamp(22px, 2.2vw, 30px)/1.12 var(--disp); letter-spacing: -.015em; margin: 0 0 8px; }
.live__try { font-size: 15px; color: var(--ink2); margin: 0; }
.live__now { border-left: 1px solid var(--line); padding-left: 28px; }
.live__lead { font: 700 clamp(19px, 1.7vw, 23px)/1.2 var(--disp); margin: 0 0 6px; }
.live__meta { font: 400 13px/1.4 var(--mono); color: var(--mute); margin: 0; }
.live__rows { list-style: none; margin: 0; padding: 0 32px; }
.live__row { display: grid; grid-template-columns: minmax(200px, 270px) 1fr 64px 76px 128px; align-items: center; column-gap: 22px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.live__pick { display: flex; align-items: center; gap: 14px; cursor: pointer; font-weight: 600; font-size: 17.5px; min-width: 0; position: relative; }
.live__box { position: absolute; left: 0; top: 0; opacity: 0; width: 30px; height: 30px; margin: 0; }
.live__tick { width: 30px; height: 30px; flex: none; border: 2px solid var(--ink); border-radius: 4px; position: relative; background: #fff; transition: background .12s; }
.live__box:checked + .live__tick { background: var(--co); border-color: var(--co); }
.live__box:checked + .live__tick::after { content: ""; position: absolute; left: 9px; top: 3px; width: 8px; height: 15px; border: solid var(--hi); border-width: 0 4px 4px 0; transform: rotate(42deg); }
.live__box:focus-visible + .live__tick { outline: 3px solid var(--co); outline-offset: 3px; }
.live__pick:hover .live__tick { border-color: var(--co); }
.live__track svg { width: 100%; height: 22px; overflow: visible; }
.live__bg { fill: var(--wash); }
.live__fill { fill: var(--co-l); }
.is-clear .live__fill { fill: var(--co); }
.live__bar { stroke: var(--ink); stroke-width: 2px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.live__pct { font: 700 26px/1 var(--disp); text-align: right; letter-spacing: -.02em; }
.live__n { font: 400 13px/1 var(--mono); color: var(--mute); }
.live__flag { font: 600 12px/1 var(--text); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.is-clear .live__flag { color: var(--co); }
.live__key { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--mute); margin: 0; padding: 14px 32px 18px; }
.live__keyline { display: inline-block; width: 18px; border-top: 2px dashed var(--ink); }
.stage__foot { display: grid; grid-template-columns: 1.3fr auto 1fr; gap: 40px; align-items: center; margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.16); }
.stage__lede { font-size: 18px; color: #c8cbe0; margin: 0; max-width: 34em; }
.stage__lede em { font-style: normal; color: #fff; font-weight: 650; }
.stage__go { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.arrow--rev { color: #fff; }
.arrow--rev:hover { color: var(--hi); }
.stage__price { border-left: 3px solid var(--hi); padding-left: 20px; }
.stage__price p { margin: 0; font-size: 14.5px; color: #c8cbe0; }
.stage__price b { color: #fff; }
.stage__price .stage__amt { font: 800 40px/1 var(--disp); color: #fff; letter-spacing: -.03em; margin: 0 0 8px; }
.stage__amt small { font: 400 14px var(--mono); color: #a8acc8; letter-spacing: 0; margin-left: 4px; }

/* ballot card (demo + paper) */
.ballot { background: #fff; border: 2px solid var(--ink); border-radius: var(--r); padding: 20px 22px 16px; }
.ballot__kicker { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin: 0 0 10px; }
.ballot__q { font: 700 19px/1.15 var(--disp); margin: 0 0 14px; }
.ballot__opts { list-style: none; margin: 0 0 10px; padding: 0; }
.ballot__opts li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--line); font-weight: 550; }
.tick { width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 7px; flex: none; position: relative; }
.on .tick { background: var(--co); border-color: var(--co); }
.on .tick::after { content: ""; position: absolute; left: 7px; top: 2px; width: 7px; height: 13px; border: solid var(--hi); border-width: 0 3.5px 3.5px 0; transform: rotate(42deg); }
.ballot__hint { font-size: 13px; color: var(--mute); margin: 0; }

/* results board */
.board { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px 24px 18px; }
.board .eyebrow { margin-bottom: 8px; }
.board__say { font: 700 clamp(19px, 1.8vw, 24px)/1.18 var(--disp); margin: 0 0 6px; letter-spacing: -.01em; }
.board__meta { font: 400 13px/1.4 var(--mono); color: var(--mute); margin: 0 0 16px; }
.board__rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name num" "track track" "flag flag"; column-gap: 12px; padding: 10px 0 8px; border-top: 1px solid var(--line); }
.row__name { grid-area: name; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.row__num { grid-area: num; font-family: var(--mono); font-size: 14px; color: var(--mute); white-space: nowrap; text-align: right; }
.row__num b { font-weight: 400; color: var(--ink); font-size: 16px; }
.row__track { grid-area: track; margin-top: 6px; }
.row__track svg { width: 100%; height: 14px; overflow: visible; }
.row__bg { fill: var(--co-w); }
.row__fill { fill: var(--co-l); }
.row--clear .row__fill { fill: var(--co); }
.row__bar { stroke: var(--ink); stroke-width: 2px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.row__flag { grid-area: flag; font-size: 12px; color: var(--mute); margin-top: 3px; }
.row--clear .row__flag { color: var(--co); font-weight: 600; }
.tag { font: 600 11px/1 var(--text); font-style: normal; text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: 999px; vertical-align: 2px; }
.tag--all { background: var(--hi); color: var(--ink); }
.board__key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--mute); margin: 12px 0 0; }
.key--line { display: inline-block; width: 18px; border-top: 2px dashed var(--ink); }
.board--empty { padding: 32px 24px; background: var(--wash); border-style: dashed; }

/* bands */
.band { padding: 104px 0; }
.band--why { background: var(--wash); }
.split { display: grid; grid-template-columns: .9fr 1.4fr; gap: 56px; align-items: start; }
.split__text p { color: var(--ink2); font-size: 18px; }
.split__vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vs__label { font: 700 15px/1.2 var(--disp); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.vs__label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--co-l); }
.vs--win .vs__label::before { background: var(--co); box-shadow: 0 0 0 4px var(--hi); }
.vs .board { padding: 18px 18px 12px; }
.vs .board__key { display: none; }
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; border-top: 2px solid var(--ink); }
.steps li { padding: 28px 28px 0 0; position: relative; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.steps__n { display: block; font: 800 64px/1 var(--disp); color: var(--co); letter-spacing: -.04em; margin-bottom: 18px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink2); margin: 0; font-size: 16px; }
.band--uses { background: var(--ink); color: #fff; padding: 72px 0; }
.band--uses .h2 { color: #fff; }
.uses { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.uses li { font: 600 17px/1 var(--text); padding: 14px 20px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.28); }
.uses li:nth-child(3n+1) { background: var(--hi); color: var(--ink); border-color: var(--hi); }
.bento { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; margin-top: 36px; }
.bento article { border: 1px solid var(--line); border-radius: var(--r); padding: 28px; background: #fff; }
.bento article p { color: var(--ink2); margin: 0; font-size: 16px; }
.bento__big { grid-row: span 2; background: var(--co) !important; color: #fff; border-color: var(--co) !important; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; position: relative; overflow: hidden; }
.bento__big::before { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 40px; border: 18px solid rgba(255,225,77,.9); transform: rotate(12deg); }
.bento__big h3 { font-size: 34px; color: #fff; }
.bento__big p { color: #e3e6ff !important; max-width: 28em; margin-bottom: 18px !important; }
.bento__big .arrow { color: var(--hi); }
.band--price { background: linear-gradient(180deg, var(--co-w), #fff); }
.pricewide { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; margin-bottom: 40px; }
.pricewide p { color: var(--ink2); font-size: 18px; }
.note { background: var(--hi-l); border-left: 4px solid var(--hi); padding: 12px 16px; border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 15.5px !important; color: var(--ink) !important; }
.note--big { font-size: 16.5px !important; max-width: 52em; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.plans__p { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.plans__p dt { font: 700 18px/1.2 var(--disp); }
.plans__p dd { margin: 0; color: var(--ink2); font-size: 15px; }
.plans__amt { font: 800 46px/1.1 var(--disp) !important; color: var(--ink) !important; margin: 10px 0 8px !important; letter-spacing: -.03em; }
.plans__amt small { font: 500 15px var(--text); color: var(--mute); letter-spacing: 0; }
.plans__p--pass { border: 2px solid var(--co); box-shadow: var(--shadow); }
.band--honest { background: var(--wash); padding: 80px 0; }
.honest ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.honest li { color: var(--ink2); font-size: 16px; padding-top: 16px; border-top: 2px solid var(--ink); }
.honest li b { display: block; color: var(--ink); font-family: var(--disp); font-size: 18px; margin-bottom: 6px; }

/* inner pages */
.pagehead { padding: 72px 0 40px; }
.pagehead--count, .pagehead--price { background: linear-gradient(180deg, var(--co-w), #fff); }
.pagehead--desk, .pagehead--new { border-bottom: 1px solid var(--line); margin-bottom: 36px; padding-bottom: 32px; }
.prose { padding-bottom: 80px; font-size: 18px; }
.prose h2 { font-size: 28px; margin-top: 52px; }
.prose li { margin-bottom: 10px; }
.prose p, .prose li { color: var(--ink2); }
.prose b { color: var(--ink); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0 12px; }
.duo .h3 { font-size: 17px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; margin: 16px 0; }
.tbl th, .tbl td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font: 600 12.5px/1.2 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); border-bottom: 2px solid var(--ink); }
.tbl caption { text-align: left; font: 700 22px var(--disp); margin-bottom: 8px; }
.tblwrap { overflow-x: auto; }
.tbl--compare { margin: 56px 0; }
.tbl--compare td { font-family: var(--mono); font-size: 15px; }
.tiers { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; max-width: 920px; }
.tier { border: 1px solid var(--line); border-radius: 24px; padding: 32px; background: #fff; }
.tier--pass { background: var(--ink); color: #fff; border-color: var(--ink); position: relative; overflow: hidden; }
.tier--pass::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 48px; background: var(--co); transform: rotate(18deg); opacity: .9; }
.tier > * { position: relative; z-index: 1; }
.tier__name { font-size: 22px; }
.tier__amt { font: 800 58px/1 var(--disp); letter-spacing: -.04em; margin: 8px 0 4px; }
.tier__amt small { font: 500 16px var(--text); letter-spacing: 0; opacity: .75; }
.tier__alt { margin: 0 0 8px; font-weight: 600; color: var(--hi); }
.tier__for { color: var(--mute); }
.tier--pass .tier__for { color: #c8cbe0; }
.tier ul { padding-left: 20px; margin: 18px 0 0; }
.tier li { margin-bottom: 8px; }
.tier__state { background: var(--hi); color: var(--ink); display: inline-block; padding: 7px 12px; border-radius: 999px; font-weight: 650; font-size: 14px; margin: 16px 0 0; }
.faq { max-width: 780px; margin-bottom: 48px; }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq summary { font-weight: 650; cursor: pointer; font-size: 18px; }
.faq p { color: var(--ink2); margin: 10px 0 0; }

/* forms */
.fld { display: block; margin: 0 0 18px; }
.fld > span { display: block; font-weight: 600; font-size: 15px; margin-bottom: 7px; }
input[type=text], input:not([type]), input[inputmode], select, textarea { width: 100%; font: 400 17px/1.4 var(--text); color: var(--ink); background: #fff; border: 1.5px solid #C9CCDD; border-radius: 12px; padding: 12px 14px; }
textarea { resize: vertical; min-height: 150px; }
input:focus, select:focus, textarea:focus { border-color: var(--co); outline: 3px solid var(--co-w); }
[aria-invalid=true] { border-color: var(--bad) !important; background: var(--bad-w) !important; }
.bad { color: var(--bad); display: block; margin-top: 6px; font-size: 14px; font-weight: 550; }
.flash { padding: 13px 16px; border-radius: 12px; margin: 0 0 20px; font-weight: 550; }
.flash--ok { background: var(--ok-w); color: var(--ok); }
.flash--err { background: var(--bad-w); color: var(--bad); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; cursor: pointer; }
.check input, .pick input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--co); flex: none; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; margin-bottom: 20px; }
.panel--soft { background: var(--wash); border-color: var(--wash); }
.panel--danger summary { color: var(--bad); font-weight: 650; cursor: pointer; }
.panel--danger form { margin-top: 14px; }
.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 80px; }
.inline { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.inline .fld { margin: 0; flex: 1 1 220px; }
.fld--short { max-width: 200px; }
.passline { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink2); background: var(--hi-l); border-radius: 12px; padding: 12px 14px; margin: 16px 0; }
.passline svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.passline b { color: var(--ink); }

/* quick count */
.counter { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 16px; padding-bottom: 96px; align-items: start; }
.sheet { background: #fff; border: 2px solid var(--ink); border-radius: 24px; padding: 28px; }
.sheet__top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sheet__rows { width: 100%; border-collapse: collapse; }
.sheet__rows th { text-align: left; font: 600 12.5px var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); padding: 0 0 8px; }
.sheet__rows td { padding: 4px 0; }
.sheet__rows td + td, .sheet__rows th + th { width: 30%; padding-left: 10px; }
.sheet__rows td + td input { font-family: var(--mono); }
.bad-row input { border-color: var(--bad); }
.sheet__go { margin: 20px 0 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.counter__out .board { margin-bottom: 20px; }
.aside { border-top: 2px solid var(--ink); padding-top: 20px; }

/* desk */
.deskhead { background: var(--ink); color: #fff; padding: 48px 0 40px; margin-bottom: 36px; }
.deskhead .eyebrow { color: var(--hi); }
.deskhead__in { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.h1--desk { font-size: clamp(30px, 3.8vw, 50px); color: #fff; margin-bottom: 10px; overflow-wrap: anywhere; }
.deskhead__q { color: #d5d8ec; font-size: 19px; margin: 0 0 10px; }
.deskhead__meta { color: #b8bcd6; margin: 0; font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.deskhead .btn--ghost { color: #fff; border-color: #fff; }
.deskhead .btn--ghost:hover { background: #fff; color: var(--ink); }
.deskhead__acts { display: flex; gap: 10px; }
.state { font: 600 12px/1 var(--text); text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px; border-radius: 999px; }
.state--open { background: var(--ok-w); color: var(--ok); }
.state--shut { background: #E6E7EE; color: var(--ink2); }
.keybox { border: 2px dashed var(--co); background: var(--co-w); border-radius: var(--r); padding: 22px; margin-bottom: 28px; }
.keybox p { margin: 0 0 10px; }
.keybox__row, .share__row { display: flex; gap: 10px; }
.keybox__row input, .share__row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 14.5px; }
.empty { text-align: center; padding: 56px 20px; border: 2px dashed var(--line); border-radius: 24px; margin-bottom: 24px; }
.blist { list-style: none; padding: 0; margin: 0 0 24px; border-top: 2px solid var(--ink); }
.blist__i a { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "s t" "s m"; column-gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); align-items: center; }
.blist__i a:hover { background: var(--wash); }
.blist__i .state { grid-area: s; }
.blist__t { grid-area: t; font: 700 21px/1.2 var(--disp); }
.blist__m { grid-area: m; color: var(--mute); font-size: 14.5px; }
.deskset { margin: 32px 0 80px; border-top: 1px solid var(--line); padding-top: 16px; }
.deskset summary { cursor: pointer; font-weight: 650; margin-bottom: 16px; }
.danger { color: var(--bad); }
.mgr { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; padding-bottom: 80px; align-items: start; }
.mgr__main > * + * { margin-top: 28px; }
.share { border: 2px solid var(--ink); border-radius: var(--r); padding: 22px; }
.share p { margin: 0 0 8px; }
.codes { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.codesheet { background: var(--hi-l); border-radius: 14px; padding: 16px; margin: 12px 0 16px; }
.codesheet__list { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0; }
.codesheet__list li { border: 1.5px dashed var(--ink2); margin: -0.75px; padding: 12px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.codesheet__t { font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.codesheet__c { font-size: 22px; letter-spacing: .06em; }
.codesheet__u { font-size: 11px; color: var(--mute); overflow-wrap: anywhere; }
.tbl--votes td { font-size: 15px; }
.plain { list-style: none; padding: 0; margin: 0 0 8px; }
.plain li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.check--none { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* ballot maker */
.maker { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; padding-bottom: 96px; align-items: start; }
.step { border: 0; border-top: 2px solid var(--ink); margin: 0 0 30px; padding: 22px 0 0; }
.step legend { font: 700 22px/1 var(--disp); padding: 0 12px 0 0; display: flex; align-items: center; gap: 12px; }
.step__n { width: 34px; height: 34px; border-radius: 10px; background: var(--co); color: var(--hi); display: inline-grid; place-items: center; font-size: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choose { margin: 4px 0 18px; }
.choose__q { font-weight: 600; font-size: 15px; margin: 0 0 8px; }
.pick { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 10px; cursor: pointer; font-size: 15.5px; color: var(--ink2); }
.pick b { color: var(--ink); display: block; }
.pick:has(input:checked) { border-color: var(--co); background: var(--co-w); }
.maker__side { position: sticky; top: 96px; }
.limits { border: 2px solid var(--ink); border-radius: var(--r); padding: 22px; }
.limits ul { list-style: none; padding: 0; margin: 0; }
.limits li { padding: 8px 0; border-top: 1px solid var(--line); }
.limits b { font-family: var(--mono); font-weight: 400; font-size: 18px; }

/* voting */
.votepage { background: var(--wash); }
.votewrap { max-width: 1120px; margin: 0 auto; padding: 48px 28px 96px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; }
.vcard { background: #fff; border-radius: 28px; padding: 36px; box-shadow: var(--shadow); border-top: 8px solid var(--co); }
.vcard__k { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--mute); margin: 0 0 16px; }
.vcard__t { font: 800 clamp(30px, 3.6vw, 46px)/1.02 var(--disp); letter-spacing: -.03em; margin: 0 0 10px; overflow-wrap: anywhere; }
.vcard__q { font-size: 19px; color: var(--ink2); margin: 0 0 22px; }
.vform__how { font-size: 16px; margin: 0 0 14px; }
.tiles { border: 0; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid var(--line); border-radius: 16px; cursor: pointer; font-weight: 600; font-size: 17.5px; background: #fff; transition: border-color .12s, background .12s; position: relative; }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile__box { width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 8px; flex: none; position: relative; background: #fff; }
.tile__t { overflow-wrap: anywhere; min-width: 0; }
.tile:hover { border-color: var(--co-l); }
.tile:has(input:checked) { border-color: var(--co); background: var(--co-w); }
.tile:has(input:checked) .tile__box { background: var(--co); border-color: var(--co); }
.tile:has(input:checked) .tile__box::after { content: ""; position: absolute; left: 8px; top: 2px; width: 8px; height: 15px; border: solid var(--hi); border-width: 0 4px 4px 0; transform: rotate(42deg); }
.tile:has(input:focus-visible) { outline: 3px solid var(--co); outline-offset: 2px; }
.tile--none { font-weight: 500; color: var(--ink2); border-style: dashed; }
.fld--code input { font-size: 22px; letter-spacing: .08em; text-transform: uppercase; }
.vcard__closed { font: 700 22px var(--disp); }
.vres { position: sticky; top: 96px; }
.vres__fine { margin-top: 18px; }

/* print pages */
.printwrap { padding-top: 28px; padding-bottom: 80px; }
.paperset { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.paper { border: 1.5px dashed var(--ink2); margin: -0.75px; padding: 22px; background: #fff; }
.paper__k { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); margin: 0 0 6px; }
.paper__t { font: 800 22px/1.1 var(--disp); margin: 0 0 6px; }
.paper__q { margin: 0 0 6px; }
.paper__how { font-size: 14px; margin: 0 0 8px; }
.paper__opts { list-style: none; padding: 0; margin: 0; }
.paper__opts li { display: flex; gap: 10px; align-items: center; padding: 5px 0; }
.box { width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 4px; flex: none; }
.tallysheet { max-width: 860px; }
.tbl--tally td { height: 46px; }
.tbl--tally td:nth-child(2) { width: 60%; border-left: 1px solid var(--line); }
.tbl--tally td:nth-child(3) { width: 14%; border-left: 1px solid var(--line); }
.tbl__sum th, .tbl__sum td { border-top: 2px solid var(--ink); font-weight: 700; }

/* footer */
.foot { background: var(--ink); color: #c8cbe0; }
.foot__in { max-width: 1200px; margin: 0 auto; padding: 72px 28px 48px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; }
.foot__say { font: 800 30px/1.05 var(--disp); color: #fff; margin: 18px 0 12px; letter-spacing: -.02em; max-width: 14em; }
.foot__small { font-size: 15px; max-width: 34em; }
.foot__small b { color: #fff; }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foot__cols h2 { font: 600 12.5px var(--text); text-transform: uppercase; letter-spacing: .12em; color: var(--hi); margin: 0 0 14px; }
.foot__cols a { display: block; color: #fff; text-decoration: none; padding: 5px 0; }
.foot__cols a:hover { color: var(--hi); }
.foot__base { max-width: 1200px; margin: 0 auto; padding: 22px 28px 30px; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.foot__base p { margin: 0; }
.foot__base a { color: var(--hi); }

/* tablet */
@media (max-width: 1080px) {
  .live__row { grid-template-columns: minmax(170px, 220px) 1fr 56px 70px; }
  .live__flag { display: none; }
  .stage__foot { grid-template-columns: 1fr 1fr; }
  .stage__lede { grid-column: span 2; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__big { grid-row: auto; grid-column: span 2; min-height: 240px; }
  .pricewide { grid-template-columns: 1fr; gap: 28px; }
  .mgr, .maker, .counter, .votewrap { grid-template-columns: 1fr; }
  .maker__side, .vres { position: static; }
  .top__nav a { padding: 0 9px; font-size: 15px; }
}
@media (max-width: 900px) {
  .top__nav { display: none; }
  .live__top { grid-template-columns: 1fr; gap: 16px; }
  .live__now { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  .top__act { margin-left: auto; }
}

/* phone */
@media (max-width: 760px) {
  body { font-size: 16.5px; padding-bottom: 78px; }
  .wrap { padding: 0 20px; }
  .top__in { height: 60px; padding: 0 20px; }
  .top__act .btn { padding: 9px 14px; font-size: 14px; }
  .mark__box { width: 32px; height: 32px; }
  .tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 11px/1 var(--text); color: var(--mute); text-decoration: none; padding: 6px 0; border-radius: 12px; }
  .tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tabs a[aria-current] { color: var(--co); }
  .tabs__go svg { background: var(--ink); color: var(--hi); border-radius: 6px; width: 40px; height: 32px; padding: 5px 10px; margin-top: -2px; }
  .tabs__go { color: var(--ink) !important; }
  .stage__in { padding: 32px 14px 48px; }
  .stage__kick { font-size: 11.5px; margin-bottom: 16px; padding: 0 6px; }
  .stage__h { font-size: clamp(32px, 10.2vw, 48px); margin-bottom: 26px; padding: 0 6px; }
  .live__top { padding: 20px 18px 16px; }
  .live__rows { padding: 0 18px; }
  .live__row { grid-template-columns: 1fr auto; grid-template-areas: "pick pct" "track track" "n flag"; row-gap: 8px; column-gap: 12px; padding: 14px 0 12px; }
  .live__pick { grid-area: pick; font-size: 16.5px; }
  .live__pct { grid-area: pct; font-size: 22px; }
  .live__track { grid-area: track; }
  .live__track svg { height: 14px; }
  .live__n { grid-area: n; }
  .live__flag { grid-area: flag; display: block; text-align: right; font-size: 11px; }
  .live__key { padding: 12px 18px 16px; font-size: 12.5px; }
  .stage__foot { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; padding: 26px 6px 0; }
  .stage__lede { grid-column: auto; font-size: 16.5px; }
  .stage__go { align-items: stretch; }
  .stage__go .btn { width: 100%; }
  .band { padding: 64px 0; }
  .split__vs { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; border-top: 0; margin-top: 24px; }
  .steps li, .steps li + li { padding: 22px 0; border-left: 0; border-top: 2px solid var(--ink); display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; }
  .steps__n { font-size: 44px; grid-row: span 2; margin: 0; }
  .uses li { font-size: 15px; padding: 11px 15px; }
  .bento { grid-template-columns: 1fr; }
  .bento__big { grid-column: auto; }
  .plans, .tiers, .twin, .duo, .honest ul, .grid2, .sheet__top { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: 1fr; padding-top: 48px; }
  .pagehead { padding: 44px 0 28px; }
  .sheet, .vcard { padding: 22px; border-radius: 20px; }
  .votewrap { padding: 20px 14px 56px; gap: 20px; }
  .keybox__row, .share__row { flex-direction: column; }
  .deskhead { padding: 32px 0 28px; }
  .paperset { grid-template-columns: 1fr; }
  .tbl { font-size: 15px; }
  .tbl th, .tbl td { padding: 9px 6px; }
}

@media print {
  .top, .tabs, .foot, .noprint, .skip, .btn, .flash, .passline, .keybox, .deskhead__acts, .mgr__side, .inline { display: none !important; }
  body { padding: 0; font-size: 12pt; }
  .paperset { grid-template-columns: 1fr 1fr; }
  .paper, .codesheet__list li { break-inside: avoid; }
  .deskhead { background: none; color: var(--ink); padding: 0; }
  .h1--desk { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* v1.1.0 · AdEngine banner (adengine.us). One labelled slot between the main content and the footer, on the public pages only
   (the controllers opt in). The label, the reserved height and the spacing are all on the <ins>, so when tag.js (or ae-size.js)
   hides a slot it cannot fill, the label and the space go with it and the page closes up exactly as before. 110px = 16px label
   + 4px gap + 90px banner; 270px on phones (300x250). Pages end with their own bottom padding and the footer has no top margin,
   so the slot keeps 64px below itself (and 48px above, for pages that end on a button); the home page ends on the grey band, so
   there it keeps 64px above too. Label: the site's mono face in --mute on white (5.7:1). display stays in this file and is never
   !important: tag.js hides a slot with style.display='none'. */
.ae-slot { padding: 0 28px; }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 48px auto 64px; text-align: center; text-decoration: none; }
.home .ae-slot ins.adengine { margin-top: 64px; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 400 11px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; } }
@media (max-width: 760px) { .ae-slot { padding: 0 20px; } .ae-slot ins.adengine { margin: 40px auto 48px; } .home .ae-slot ins.adengine { margin-top: 48px; } }
@media print { .ae-slot { display: none; } }