/* /pricing/ultra-pro/kalshi-setup (2026-10-16, Mary). Tokens only, so the light/dark toggle moves everything.
   Light UI screenshots (when Jay captures them) sit in .ks-fig frames: a 1px --line-2 hairline is under 3:1 against
   --bg in dark, so the frame also carries a 2px --brand top edge. Don't "fix" it back to the hairline. */
.ks-hero{padding-bottom:28px}
/* .page-hero is dark in both themes, so the hero reads the --d* tokens (lede 8.80:1, the date line 5.34:1) */
.ks-lede{max-width:44em;margin-top:18px;font-size:18px;line-height:1.6;color:var(--dink-2)}
.ks-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px;padding:0}
.ks-facts li{list-style:none;padding:16px 18px;border-radius:var(--r);background:var(--dark-2);border:1px solid var(--dline-2)}
.ks-facts b{display:block;font:800 28px/1 var(--cond);text-transform:uppercase;color:var(--dink)}
.ks-facts span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--dink-2)}
.ks-checked{margin-top:14px;font-size:13px;color:var(--dink-3)}

.ks-in{display:grid;gap:22px}
.ks-head .h2{margin-top:6px}
.ks-sub,.ks-p{max-width:46em;font-size:16px;line-height:1.6;color:var(--ink-2)}
.ks-copy{display:grid;gap:12px;max-width:52em;font-size:16px;line-height:1.6;color:var(--ink-2)}
.ks-dates{display:grid;gap:6px;padding:0}
.ks-dates li{list-style:none;padding-left:16px;position:relative}
.ks-dates li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.ks-dates b{color:var(--ink);margin-right:6px}
.ks-note{font-size:13px;color:var(--ink-3)}

/* the exchange board (a diagram, not a Kalshi screen) */
.ks-fig{margin:0;padding:22px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line-2);border-top:2px solid var(--brand)}
.ks-fig figcaption{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.ks-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0}
.ks-ex{list-style:none;position:relative;display:flex;flex-direction:column;gap:6px;min-height:150px;padding:16px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2)}
.ks-ex-n{font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ks-ex b{font:800 20px/1.05 var(--cond);text-transform:uppercase;color:var(--ink)}
.ks-ex-what{font-size:13px;line-height:1.45;color:var(--ink-2)}
.ks-ex.is-agents{border:2px solid var(--brand);background:var(--brand-soft);box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--brand)}
.ks-ex.is-agents .ks-ex-n{color:var(--brand-ink)}
.ks-ex.is-from{border:2px dashed var(--warn)}
.ks-ex-faces{display:flex;margin-top:auto;padding-top:6px}
.ks-ex-faces img{width:28px;height:28px;margin-right:-6px;border-radius:50%;background:var(--paper);border:2px solid var(--paper)}
.ks-ex-tag{align-self:flex-start;padding:5px 9px;border-radius:999px;background:var(--brand);color:var(--on-brand);font:700 12px/1 var(--sans)}
.ks-ex-tag--from{margin-top:auto;background:var(--warn-soft);color:var(--warn-ink)}
.ks-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:16px}
.ks-chip{display:grid;gap:3px;padding:10px 14px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2);font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ks-chip b{font:800 17px/1.1 var(--cond);letter-spacing:0;color:var(--ink)}
.ks-chip--from{border:2px dashed var(--warn)}
.ks-chip--to{border:2px solid var(--brand)}
.ks-arrow{width:64px;height:20px;fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.ks-tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line-2);background:var(--paper)}
.ks-tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.ks-tbl caption{padding:12px 16px;text-align:left;font-weight:700;color:var(--ink)}
.ks-tbl th,.ks-tbl td{padding:12px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:top;color:var(--ink-2)}
.ks-tbl thead th{font:700 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ks-tbl tbody th{font:800 22px/1 var(--cond);color:var(--ink)}
.ks-tbl td b{color:var(--ink)}
.ks-tbl code{font-size:12px;word-break:break-word;color:var(--ink-2)}
.ks-tbl tr.is-agents{background:var(--brand-soft)}
.ks-tbl tr.is-agents th{color:var(--brand-ink)}

.ks-two{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}
.ks-case{padding:22px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line-2);border-top:3px solid var(--loss)}
.ks-case p{font-size:15px;line-height:1.55;color:var(--ink-2)}
.ks-case p+p{margin-top:8px}
.ks-case-k{font:700 12px/1 var(--sans)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--loss-ink)!important}
.ks-case-t{font:800 24px/1.1 var(--cond)!important;text-transform:uppercase;color:var(--ink)!important}
.ks-err code{display:inline-block;padding:6px 10px;border-radius:var(--r-sm);background:var(--loss-soft);color:var(--loss-ink);font-size:14px}

.ks-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;counter-reset:none}
.ks-step{list-style:none;display:flex;gap:14px;padding:18px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2)}
.ks-step-n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--on-brand);font:800 17px/1 var(--cond)}
.ks-step h3{font:700 16px/1.3 var(--sans);color:var(--ink)}
.ks-step p{margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

.ks-keep{display:grid;gap:10px;padding:0;max-width:52em}
.ks-keep li{list-style:none;padding:14px 16px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2);font-size:15px;line-height:1.55;color:var(--ink-2)}
.ks-keep b{color:var(--ink)}
.ks-agents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0}
.ks-agents li{list-style:none}
.ks-agents a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2);text-decoration:none;color:var(--ink)}
.ks-agents a:hover{border-color:var(--brand)}
.ks-agents a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ks-agents img{border-radius:50%}
.ks-agents b{display:block;font:700 15px/1.2 var(--sans)}
.ks-agents small{display:block;font-size:13px;color:var(--ink-3)}

.ks-wait{max-width:760px;padding:28px;border-radius:var(--r-lg);background:var(--paper);border:2px solid var(--brand)}
.ks-wait-k{font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink)}
.ks-wait .h2{margin-top:8px}
.ks-wait>p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.ks-wait b{color:var(--ink)}
.ks-ctl{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ks-fine{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.up-faq .faq{margin-top:14px}
.ks-src ul{display:grid;gap:8px;margin-top:12px;padding:0}
.ks-src li{list-style:none;font-size:14px;line-height:1.5;color:var(--ink-2)}

@media (max-width:960px){.ks-board{grid-template-columns:1fr 1fr}.ks-two{grid-template-columns:1fr}.ks-agents{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ks-facts,.ks-steps,.ks-agents{grid-template-columns:1fr}.ks-fig{padding:14px}.ks-wait{padding:20px}
  /* the series codes are reference, not reading: on a phone they wrap into noise, and Sources names them */
  .ks-tbl th:nth-child(3),.ks-tbl td:nth-child(3){display:none}}
@media (max-width:420px){.ks-board{grid-template-columns:1fr}.ks-ex{min-height:0}}

/* v3 (2026-10-16): the API key, Vercel and test sections */
.ks-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
.ks-steps--one{grid-template-columns:1fr}
.ks-step code,.ks-sub code,.ks-keep code{font-size:.92em;padding:1px 5px;border-radius:5px;background:var(--chip);color:var(--ink)}
.ks-fig--side{position:sticky;top:calc(var(--hd-h) + 16px)}
.ks-perms{display:grid;gap:8px;margin-top:12px;padding:0}
.ks-perm{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2)}
.ks-perm b{display:block;font:700 15px/1.2 var(--sans);color:var(--ink)}
.ks-perm small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.ks-perm em{margin-left:auto;font:700 12px/1 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.ks-sw{flex:none;position:relative;width:34px;height:20px;border-radius:999px;background:var(--line-2)}
.ks-sw i{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--paper)}
.ks-perm.is-on{border:2px solid var(--brand);background:var(--brand-soft)}
.ks-perm.is-on .ks-sw{background:var(--brand)}
.ks-perm.is-on .ks-sw i{left:17px}
.ks-perm.is-on em{color:var(--brand-ink)}
.ks-perm.is-off{border:2px dashed var(--warn)}
.ks-perm.is-off em{color:var(--warn-ink)}
.ks-warn b{color:var(--warn-ink)}
@media (max-width:960px){.ks-split{grid-template-columns:1fr}.ks-fig--side{position:static}}

/* v4 (2026-10-16): one drawing under every step. Drawings, never screenshots; every caption says so.
   The ring is the only thing that says "click here": 3px --brand, 3:1+ on --paper in both themes (5.25:1 light, 3.58:1 dark). */
.ks-step--pic{flex-direction:column;gap:14px;padding:20px}
.ks-step-h{display:flex;gap:14px}
.ks-step--pic h3{font:700 18px/1.3 var(--sans)}
.ks-step--pic p{font-size:15.5px;line-height:1.6}
.ks-fig--step{padding:16px;background:var(--surface-2);border-top:2px solid var(--brand)}
.ks-fig--narrow{max-width:640px}
.ks-shot{position:relative;max-width:620px;margin:0 auto;font:500 14px/1.3 var(--sans);color:var(--ink)}
.ks-win{border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2);overflow:visible}
.ks-url{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--chip);border-radius:var(--r) var(--r) 0 0}
.ks-url span{width:9px;height:9px;border-radius:50%;background:var(--line-3)}
.ks-url b{flex:1;padding:5px 10px;border-radius:999px;background:var(--paper);font:600 12.5px/1 var(--sans);color:var(--ink-2)}
.ks-bar{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ks-logo{font:800 16px/1 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.ks-nav{display:flex;gap:10px;flex:1}
.ks-nav i,.ks-blur i,.ks-menu li>i{display:block;height:10px;border-radius:999px;background:var(--line-2)}
.ks-nav i{width:46px}
.ks-bar-r{display:flex;align-items:center;gap:12px;margin-left:auto}
.ks-pill{display:block;width:72px;height:26px;border-radius:999px;background:var(--brand-soft)}
.ks-avatar{display:block;width:30px;height:30px;border-radius:50%;background:var(--line-3)}
.ks-avatar.is-open{outline:2px solid var(--brand);outline-offset:2px}
.ks-blur{display:grid;gap:10px;padding:16px 14px}
.ks-blur i{width:70%}
.ks-blur i+i{width:50%}
.ks-blur i+i+i{width:60%}
.ks-blur--rows{padding:10px 0}
.ks-blur--inline{display:inline-block;padding:0;flex:1}
.ks-blur--inline i{width:60%;margin:0 12px}
.ks-menu{position:relative;width:min(260px,80%);margin:0 14px 16px auto;padding:8px 0;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}
.ks-menu li{list-style:none;display:flex;align-items:center;min-height:36px;padding:0 14px}
.ks-menu li>i{width:55%}
.ks-menu li.is-hit{padding:6px 14px}
.ks-menu li.is-hit b{display:block;padding:7px 10px;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--ink);font:700 14px/1.2 var(--sans)}
.ks-win--page{padding:16px 16px 18px}
.ks-pg-t{font:800 20px/1.1 var(--cond);text-transform:uppercase;color:var(--ink)}
.ks-sec{margin-top:10px;padding:14px;border-radius:var(--r);border:1px solid var(--line-2)}
.ks-sec-t{font:700 15px/1.2 var(--sans);color:var(--ink)}
.ks-sec-s{margin-top:3px;font-size:12.5px;color:var(--ink-3)}
.ks-btn{display:inline-block;padding:9px 14px;border-radius:999px;background:var(--brand);color:var(--on-brand);font:700 13.5px/1 var(--sans)}
.ks-btn--ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.ks-btn--danger{background:var(--loss);color:var(--paper)}
.ks-row{display:flex;align-items:center;gap:10px;padding:10px 0 2px}
.ks-row>b{font:700 14px/1.2 var(--sans)}
.ks-dlg{max-width:460px;margin:0 auto;padding:18px 22px 22px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}
.ks-dlg-t{font:700 16px/1.2 var(--sans);color:var(--ink);margin-bottom:12px}
.ks-fld{display:grid;gap:5px;margin-top:10px;font:600 12.5px/1 var(--sans);color:var(--ink-3)}
.ks-inp{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--paper);font:500 14px/1.2 var(--sans);color:var(--ink-2)}
.ks-inp b{font-weight:700;color:var(--ink)}
.ks-inp--sel small{margin-left:auto;font-size:12px;color:var(--ink-3)}
.ks-inp--copy small,.ks-inp--file small{margin-left:auto;padding:4px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font:700 11.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.05em}
.ks-inp--copy b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;letter-spacing:.02em;color:var(--ink-3)}
.ks-dlg-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.ks-dlg-note{margin-top:12px;font-size:12.5px;color:var(--ink-3)}
.ks-ring{position:relative;display:inline-block;border-radius:var(--r);box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--brand)}
.ks-url .ks-ring{flex:1;border-radius:999px}
.ks-url .ks-ring>b{display:block}
.ks-fld>.ks-ring{display:block}
.ks-ring>.ks-inp,.ks-ring>.ks-perms{position:relative}
.ks-callout{position:absolute;top:-15px;right:-15px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--on-brand);font:800 15px/1 var(--cond);font-style:normal;box-shadow:0 0 0 3px var(--paper)}
.ks-perms{margin-top:0}
/* phones: a grid child's min-content width (the Key ID string, the inline-block rings) must not widen the page */
.ks-in>*,.ks-steps>li,.ks-step>div,.ks-shot,.ks-win,.ks-dlg{min-width:0}
.ks-steps--one{grid-template-columns:minmax(0,1fr)}
.ks-ring{max-width:100%}
.ks-inp{min-width:0;overflow:hidden}
.ks-inp b,.ks-inp--copy b{overflow-wrap:anywhere;min-width:0}
.ks-url .ks-ring>b{overflow-wrap:anywhere}
.ks-bar{min-width:0}
.ks-nav{min-width:0;overflow:hidden}
.ks-bar-r{flex:none}
@media (max-width:560px){.ks-pill{width:40px}.ks-nav i{width:28px}.ks-win,.ks-dlg{overflow:hidden;padding-top:4px}.ks-win{padding-top:0}.ks-url{padding:14px 12px 10px}.ks-fig--step{padding:12px}}

/* ===== v5 (2026-10-16): the sticky parts bar
   Named .ks-parts, not .ks-sub: .ks-sub is already this page's section subtitle (max-width:46em), which shrank the
   bar to exactly 736px. Measured, not guessed., the answer box and the step ticks =====
   The bar is the page's own scroll position, 4 parts. The ticks are what the reader has finished, 9 clicks.
   Two meters, two places, each labelled, so neither has to mean both.
   This stylesheet loads on one page, so the bare html rule is scoped by where it ships (btchub.css does the same). */
:root{--ks-parts-h:54px}
html{scroll-padding-top:calc(var(--hd-h) + var(--ks-parts-h) + 16px)}
.ks-hero-ans{max-width:44em;margin-top:18px;padding:14px 16px;border-radius:var(--r);
  background:rgba(240,246,252,.06);border:1px solid var(--dline-2);border-left:3px solid var(--accent-d);
  font-size:15.5px;line-height:1.55;color:var(--dink-2)}
.ks-hero-ans b{color:var(--dink)}

.ks-parts-sentinel{height:1px;margin-bottom:-1px}
.ks-parts{position:sticky;top:var(--hd-h);z-index:calc(var(--z-hd) - 1);background:var(--paper);
  border-bottom:1px solid var(--line-2);transition:box-shadow .2s}
.ks-parts.is-stuck{box-shadow:var(--shadow-lg)}
.ks-parts-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--ks-parts-h)}
.ks-parts-list{display:flex;gap:2px;margin:0;padding:0;list-style:none;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.ks-parts-list::-webkit-scrollbar{display:none}
.ks-parts-list a{display:flex;align-items:center;gap:8px;height:var(--ks-parts-h);padding:3px 12px 0;
  border-bottom:3px solid transparent;font:600 14.5px/1 var(--sans);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.ks-parts-list i{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;flex:none;
  background:var(--chip);color:var(--ink-3);font:800 12px/1 var(--cond);font-style:normal}
.ks-parts-list a:hover{color:var(--ink)}
.ks-parts-list a[aria-current="location"]{color:var(--ink);border-bottom-color:var(--brand)}
.ks-parts-list a[aria-current="location"] i{background:var(--brand);color:var(--on-brand)}
.ks-parts a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ks-parts-step{flex:none;font:600 13px/1 var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.ks-parts{transition:none}}
/* phones keep the words and scroll sideways: four bare numbers tell the reader nothing */
@media (max-width:620px){.ks-parts-step{display:none}.ks-parts-list a{padding:3px 10px 0;font-size:14px}
  .ks-parts-in{gap:0}.ks-parts-list{scroll-snap-type:x proximity}.ks-parts-list li{scroll-snap-align:start}}

.ks-ans{max-width:52em;padding:18px 20px;border-radius:var(--r);background:var(--brand-soft);
  border:1px solid var(--line-2);border-left:4px solid var(--brand)}
.ks-ans-q{font:800 19px/1.2 var(--cond);text-transform:uppercase;color:var(--brand-ink)}
.ks-ans p+p{margin-top:10px}
.ks-ans p:not(.ks-ans-q){font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.ks-ans b{color:var(--ink)}

.ks-tally{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:12px 16px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-2)}
.ks-tally b{font:800 17px/1 var(--cond);color:var(--ink);font-variant-numeric:tabular-nums}
.ks-tally span{font-size:13.5px;color:var(--ink-3)}
.ks-reset{margin-left:auto;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink-2);font:600 13px/1 var(--sans);cursor:pointer}
.ks-reset:hover{border-color:var(--brand);color:var(--brand-ink)}
.ks-reset:focus-visible,.ks-tick:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.ks-tick{flex:none;margin-left:auto;align-self:flex-start;width:34px;height:34px;padding:0;cursor:pointer;
  border-radius:50%;border:2px solid var(--line-3);background:var(--paper);display:grid;place-items:center}
.ks-tick i{width:13px;height:8px;border:solid var(--line-3);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translate(1px,-2px)}
.ks-tick:hover{border-color:var(--brand)}
.ks-tick:hover i{border-color:var(--brand)}
.ks-tick[aria-pressed="true"]{border-color:var(--gain);background:var(--gain)}
.ks-tick[aria-pressed="true"] i{border-color:var(--on-brand)}
:root[data-theme="dark"] .ks-tick[aria-pressed="true"] i,
:root[data-theme="dark"] .ks-step--pic.is-done .ks-step-n{color:var(--dark);border-color:var(--dark)}
.ks-step--pic.is-done{border-color:var(--gain)}
.ks-step--pic.is-done .ks-step-n{background:var(--gain);color:var(--on-brand)}
.ks-step--pic.is-done>.ks-fig{opacity:.55}
@media (prefers-reduced-motion:no-preference){.ks-step--pic,.ks-tick,.ks-fig--step{transition:opacity .2s,border-color .2s,background-color .2s}}

/* v5.1: the Exchange indexes drawing (part 3). Rows of cash, one of them the agents' own. */
.ks-exlist{display:grid;gap:8px;margin:12px 0 14px;padding:0}
.ks-exrow{list-style:none;display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--paper)}
.ks-exrow b{flex:none;font:800 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.ks-exrow span{font:600 14px/1.25 var(--sans);color:var(--ink)}
.ks-exrow em{margin-left:auto;flex:none;width:72px}
.ks-exrow.is-agents{border:2px solid var(--brand);background:var(--brand-soft)}
.ks-exrow.is-agents b{color:var(--brand-ink)}
@media (max-width:560px){.ks-exrow{flex-wrap:wrap;gap:4px 10px}.ks-exrow em{margin-left:0;width:56px}}

/* ===== v6 (2026-10-16): the stepper
   Jay: "multiple steps and u can click on and then it changes based on the steps instead of scrolling down".
   assets/pages/kalshi-setup.js adds .ks-js to <html>. Everything below is scoped to it, so with JS off every
   panel and every step stays open and the page is the whole guide, which is also what a crawler reads.
   The [hidden] rules matter: a display rule beats the hidden attribute, so each one needs its own override. */
.ks-js .ks-panel{display:none}
.ks-js .ks-panel.is-on{display:block}
.ks-js .ks-panel:focus{outline:none}
.ks-js .ks-steps>.ks-step{display:none}
.ks-js .ks-steps>.ks-step.is-on{display:flex}

/* the numbered rail: click a number, that click is the one on screen */
.ks-rail{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.ks-rail[hidden]{display:none}
.ks-rail button{width:38px;height:38px;padding:0;cursor:pointer;border-radius:50%;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);
  font:800 16px/1 var(--cond);font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s}
.ks-rail button:hover{border-color:var(--brand);color:var(--brand-ink)}
.ks-rail button.is-done{border-color:var(--gain);color:var(--gain)}
.ks-rail button[aria-current="step"]{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}
.ks-rail button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* one step on screen, so give it the room: words on the left, the picture on the right */
@media (min-width:900px){
  .ks-js .ks-steps>.ks-step.is-on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:26px;align-items:start;padding:26px}
  .ks-js .ks-step--pic.is-on .ks-step-h{align-self:start}
}
.ks-js .ks-step--pic.is-on{border-color:var(--line-3)}
.ks-js .ks-step--pic.is-on h3{font:800 21px/1.25 var(--sans)}
.ks-js .ks-step--pic.is-on>.ks-step-h>div>p{font-size:16.5px;line-height:1.62}
.ks-js .ks-step--pic.is-on .ks-step-n{width:40px;height:40px;font-size:21px}
.ks-js .ks-step--pic.is-on.is-done>.ks-fig{opacity:1}

/* back, where you are, next */
.ks-wiz-nav{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2)}
.ks-wiz-nav[hidden]{display:none}
.ks-wiz-n{margin:0 auto;font:700 14px/1 var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ks-wiz-b{padding:13px 20px;border-radius:999px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink);font:700 15px/1 var(--sans)}
.ks-wiz-b[hidden]{display:none}
.ks-wiz-b:hover{border-color:var(--brand);color:var(--brand-ink)}
.ks-wiz-b.is-go{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}
/* --brand-ink is a dark blue in light mode and a LIGHT blue in dark mode, so it cannot be a button
   background under white text: measured 2.15:1 in dark. --brand-d is the site's own .btn-brand:hover
   token and measures 6.19:1 there. */
.ks-wiz-b.is-go:hover{background:var(--brand-d);border-color:var(--brand-d);color:var(--on-brand)}
.ks-wiz-b:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ks-more{margin-top:16px;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
@media (max-width:560px){
  .ks-wiz-nav{gap:8px;flex-wrap:wrap}
  .ks-wiz-b{padding:12px 15px;font-size:14px}
  .ks-wiz-n{order:-1;width:100%;margin:0 0 4px;text-align:center}
  .ks-rail{gap:6px}
  .ks-rail button{width:34px;height:34px;font-size:15px}
}
/* In the stepper the tick is a second way to say what Next already says, and it orphaned itself at the right edge
   of the words column. Pressing Next marks the step; the rail dot turns green. Keep the button in the HTML so a
   no-JS reader can still tick a step off on paper, so to speak, and hide it once the stepper is running. */
.ks-js .ks-tick{display:none}

/* ===== v7 (2026-10-16): Jay's list after using the stepper
   "don't let it transform so i can just keep clicking on next"  -> the step box holds the tallest step's height
     (set inline by the script) and Next never scrolls, so Back and Next stay put under the cursor.
   "all 9 can fit in 1 row on mobile"                            -> the rail is a grid, not flex-wrap.
   "i see sub nav now.. i need you to make that better"          -> a done part turns its number green, and each
     part ends with cards into the next ones. */
.ks-js .ks-steps{align-content:start}

/* The rail: however many steps there are, one row. At 390px nine 38px circles plus 8px gaps came to 406px against
   358px of room, so they wrapped. Grid columns share what is there instead, and aspect-ratio keeps them circles. */
.ks-rail{display:grid;grid-auto-flow:column;grid-auto-columns:38px;justify-content:start;
  gap:8px;margin:0 0 18px;padding:0;list-style:none}
.ks-rail[hidden]{display:none}
.ks-rail li{min-width:0}
.ks-rail button{width:100%;height:auto;aspect-ratio:1}
@media (max-width:620px){
  .ks-rail{grid-auto-columns:minmax(0,1fr);gap:6px}
  .ks-rail button{max-width:46px;font-size:15px}
}

/* A part whose steps are all finished says so in the sub nav. */
.ks-parts-list a.is-done i{background:var(--gain);color:var(--on-brand);border-color:var(--gain)}
:root[data-theme="dark"] .ks-parts-list a.is-done i{color:var(--dark)}
.ks-parts-list a[aria-current="location"] i{background:var(--brand);color:var(--on-brand)}

/* Where to go after a part. Plain links, so they work before the script does. */
.ks-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
  margin:26px 0 0;padding:0;list-style:none}
.ks-cards li{min-width:0}
.ks-cards a{display:block;height:100%;padding:16px 18px;border-radius:var(--r);text-decoration:none;
  background:var(--paper);border:1px solid var(--line-2)}
.ks-cards a:hover{border-color:var(--brand)}
.ks-cards a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ks-cards b{display:block;font:800 16px/1.3 var(--sans);color:var(--ink)}
.ks-cards small{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.ks-cards em{display:block;margin-bottom:6px;font:700 11.5px/1 var(--cond);letter-spacing:.08em;
  text-transform:uppercase;font-style:normal;color:var(--brand-ink)}

/* Which exchange does this trade on. Buttons, never a form: the page still collects nothing. */
.ks-pick{margin-top:26px;padding:20px;border-radius:var(--r-lg);background:var(--surface-2);
  border:1px solid var(--line-2);border-top:2px solid var(--brand)}
.ks-pick-q{font:800 18px/1.3 var(--sans);color:var(--ink)}
.ks-pick-s{margin-top:4px;font-size:14px;color:var(--ink-3)}
.ks-pick-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.ks-pick-row button{padding:9px 14px;border-radius:999px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink);font:600 14px/1 var(--sans)}
.ks-pick-row button:hover{border-color:var(--brand);color:var(--brand-ink)}
.ks-pick-row button[aria-pressed="true"]{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}
.ks-pick-row button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ks-pick-out{margin-top:16px;padding:14px 16px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--line-2);font-size:15px;line-height:1.6;color:var(--ink-2)}
/* Row 2 already carries the agents tint, so a picked row needs more than the same tint to stand apart. */
.ks-tbl tr.is-pick{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.ks-tbl tr.is-pick th{color:var(--brand-ink)}
.ks-tbl tr.is-pick td{color:var(--ink)}

/* Both directions, side by side. */
.ks-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:20px}
.ks-way{padding:18px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2)}
.ks-way h3{font:800 17px/1.3 var(--sans);color:var(--ink)}
.ks-way p{margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
/* The chip pair is 64px of arrow plus two chips; in a card that narrow it broke across lines with the arrow
   stranded between them. Stack it and turn the arrow down instead. */
.ks-way .ks-strip{margin-top:14px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px}
.ks-way .ks-arrow{width:24px;height:20px;transform:rotate(90deg);margin-left:22px}
.ks-way .ks-chip{width:100%}
@media (max-width:560px){
  .ks-pick{padding:16px}
  .ks-pick-row button{padding:8px 12px;font-size:13.5px}
}

/* ===== v8 (2026-10-16): Kalshi's real screens, captured on our own account.
   Balances and key numbers are covered in the image files themselves with a solid fill, never with CSS or a blur.
   Tall screens (the menu, the key window) are capped so one step never pushes Back and Next off the screen; the
   stepper holds every step box at its tallest step, so this cap is what keeps the whole wizard compact. */
.ks-real{display:block;width:auto;height:auto;max-width:100%;max-height:480px;margin:0 auto;
  border-radius:10px;border:1px solid var(--line-2);background:var(--dark)}
@media (max-width:560px){.ks-real{max-height:440px}}

/* ===== v9 (2026-10-16): Next where the eye is. Jay: "let's make the next button on the top on the right of the 1-3
   cuz on the bottom is hard to see cuz the space is so big", then picked Mary's B on laptops, D on phones.
   Laptops: the 1-9 row and Back / Step n of 9 / Next share one row, held under the parts bar while the step is on
   screen. Phones: the 1-9 row stays where it is and the buttons become a pill fixed to the bottom of the screen, in
   thumb reach, shown only while its wizard is on screen. Measured before shipping: Next on screen without scrolling
   on 9 of 9 steps, laptop and phone, and it never moves. */
.ks-ctrl{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}
.ks-ctrl .ks-rail{margin:0}
.ks-ctrl .ks-wiz-nav{margin:0;padding:0;border:0;flex:none;gap:10px}
.ks-ctrl .ks-wiz-n{margin:0 6px}
@media (min-width:621px){
  .ks-js .ks-ctrl{position:sticky;top:calc(var(--hd-h) + var(--ks-parts-h));z-index:calc(var(--z-hd) - 2);
    background:var(--paper);padding:10px 0;border-bottom:1px solid var(--line-2)}
}
@media (max-width:620px){
  .ks-ctrl{display:block}
  .ks-ctrl .ks-wiz-nav{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);
    z-index:calc(var(--z-hd) + 1);width:min(520px, calc(100% - 24px));flex-wrap:nowrap;justify-content:space-between;
    padding:6px;background:var(--paper);border:2px solid var(--brand);border-radius:999px;box-shadow:var(--shadow-lg);
    transition:opacity .2s, transform .2s}
  .ks-ctrl .ks-wiz-n{display:none}
  .ks-ctrl .ks-wiz-b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
  .ks-ctrl .ks-wiz-nav.is-away{opacity:0;pointer-events:none;transform:translate(-50%, 12px)}
  .ks-js .ks-wiz{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){.ks-ctrl .ks-wiz-nav{transition:none}}

/* ---- v11 (2026-10-16): one button to start. Jay: "i just want a button to click to get started and then step by step
   guidance". The hero keeps the headline, one sentence and Get started; the tiles and the answer block left it. ---- */
.ks-lede--go{margin-top:16px}
.ks-start{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ks-start-b{min-width:220px;font-size:17px}
.ks-head--tight .ks-sub{margin-top:8px}
.ks-why{max-width:52em;margin-top:12px;padding:0 18px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.ks-why summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;font:600 15.5px/1.35 var(--sans);color:var(--ink)}
.ks-why summary::-webkit-details-marker{display:none}
.ks-why summary::after{content:"+";flex:none;font:400 22px/1 var(--sans);color:var(--ink-3)}
.ks-why[open] summary::after{content:"\2212"}
.ks-why p{padding:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.ks-why p+p{margin-top:-6px}
.ks-why b{color:var(--ink)}
.ks-short{max-width:52em;margin-bottom:28px;padding:18px 20px;border-radius:var(--r);background:var(--brand-soft);border:1px solid var(--line-2)}
.ks-short-k{font:800 15px/1.2 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink)}
.ks-short .ks-answer{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
@media (max-width:620px){.ks-start-b{width:100%}}

/* ===== v12 (2026-10-16): Create your API key, with a Learn panel under every click.
   Jay: "talk about what it is a bit with cool coloring and graphics and learning widgets ... keep it big and just stuff it
   with info". Measured before: steps 1, 2, 5 and 8 filled 29%, 29%, 42% and 41% of the 642px step box on a laptop.
   Laptop: the words and the Learn panel on the left, the picture on the right (measured against putting the panel on the
   right: that made the box 904px and left steps 2, 5 and 8 at 42-44%; this keeps it at 794px). Phone: words, picture, panel.
   Tones are tokens with dark twins: brand (--brand-ink on --brand-soft), gain (--gain on --gain-soft), warn
   (--warn-ink on --warn-soft). Quiz answers keep a reserved line, so tapping one never changes the box height. ===== */
@media (min-width:900px){
  .ks-js .ks-steps>.ks-step--pic.is-on{grid-template-areas:"h fig" "learn fig";grid-template-rows:auto 1fr;row-gap:20px}
  .ks-js .ks-step--pic.is-on>.ks-step-h{grid-area:h}
  .ks-js .ks-step--pic.is-on>.ks-fig{grid-area:fig;align-self:start}
  .ks-js .ks-step--pic.is-on>.ks-learn{grid-area:learn;align-self:start;margin-top:0}
}
.ks-js .ks-steps>.ks-step--pic.is-on{flex-direction:column}
.ks-learn{--t:var(--brand-ink);--ts:var(--brand-soft);margin-top:4px;padding:16px 18px 18px;border-radius:var(--r);
  background:var(--ts);border:1px solid var(--line-2);border-top:3px solid var(--t)}
.ks-learn[data-tone="gain"]{--t:var(--gain);--ts:var(--gain-soft)}
.ks-learn[data-tone="warn"]{--t:var(--warn-ink);--ts:var(--warn-soft)}
.ks-learn-k{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--t)}
.ks-learn-i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--paper);border:1px solid var(--line-2)}
.ks-learn-i svg{width:16px;height:16px;fill:none;stroke:var(--t);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ks-learn-t{margin-top:10px;font:800 21px/1.15 var(--cond);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.ks-learn>p:not(.ks-learn-k):not(.ks-learn-t){margin-top:8px;font-size:15px;line-height:1.58;color:var(--ink-2)}
.ks-learn b{color:var(--ink)}
.ks-learn .ks-learn-s{font-size:13.5px!important;color:var(--ink-3)!important}

/* step 1: how an order travels */
.ks-flow{display:flex;align-items:stretch;gap:4px;margin:14px 0 0;padding:0;list-style:none}
.ks-flow li{flex:1 1 0;min-width:0;padding:10px 9px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line-2)}
.ks-flow li b{display:block;font:700 13.5px/1.2 var(--sans);color:var(--ink)}
.ks-flow li span{display:block;margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--ink-3)}
.ks-flow li.is-ok{border:2px solid var(--gain)}
.ks-flow li.is-ok b{color:var(--gain)}
.ks-flow-a{flex:none;width:18px;align-self:center;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.ks-flow{flex-direction:column}.ks-flow-a{transform:rotate(90deg);margin:0 auto}}

/* small comparison tables */
.ks-vs{width:100%;margin-top:14px;border-collapse:separate;border-spacing:0;font-size:13.5px;line-height:1.35;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.ks-vs th,.ks-vs td{padding:8px 10px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.ks-vs thead th{border-top:0;font:700 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ks-vs thead th em{display:inline-block;margin-left:4px;padding:2px 6px;border-radius:999px;font-style:normal;letter-spacing:0;
  text-transform:none;background:var(--gain-soft);color:var(--gain)}
.ks-vs tbody th{font-weight:700;color:var(--ink-2);white-space:nowrap}
.ks-vs td{color:var(--ink)}
.ks-vs td:last-child{background:var(--ts)}

/* step 2: the path */
.ks-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px!important}
.ks-path span{padding:7px 11px;border-radius:999px;background:var(--paper);border:1px solid var(--line-2);font:700 13.5px/1 var(--sans);color:var(--ink)}
.ks-path span.is-end{border:2px solid var(--brand);color:var(--brand-ink)}
.ks-path i{font-style:normal;color:var(--ink-3)}
.ks-tips{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.ks-tips li{padding:10px 12px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line-2);font-size:14px;line-height:1.5;color:var(--ink-2)}
.ks-tips b{display:block;font:700 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--t);margin-bottom:3px}

/* quick checks and the key-type picker */
.ks-quiz-q{margin-top:10px!important;font-weight:600;color:var(--ink)!important}
.ks-quiz-o{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.ks-quiz-o button{width:100%;min-height:44px;padding:10px 14px;text-align:left;cursor:pointer;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:600 15px/1.3 var(--sans)}
.ks-quiz-o button:hover{border-color:var(--t)}
.ks-quiz-o button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ks-quiz-o button.is-right{border:2px solid var(--gain);background:var(--gain-soft)}
.ks-quiz-o button.is-wrong{border:2px solid var(--drop);background:var(--drop-soft)}
.ks-quiz-out{min-height:3.2em;margin-top:10px!important;font-size:14px!important;line-height:1.5!important;color:var(--ink-3)!important}
.ks-quiz-out.is-right{color:var(--gain)!important;font-weight:600}
.ks-quiz-out.is-wrong{color:var(--drop)!important;font-weight:600}

/* step 4: the location clock */
.ks-time{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0 0;padding:0;list-style:none;
  border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line-2)}
.ks-time li{padding:10px;background:var(--paper)}
.ks-time li+li{border-left:1px solid var(--line-2)}
.ks-time b{display:block;font:800 15px/1.1 var(--cond);text-transform:uppercase;color:var(--gain)}
.ks-time .is-mid b{color:var(--ink)}
.ks-time .is-end b{color:var(--drop)}
.ks-time span{display:block;margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--ink-3)}

/* step 7: the permission mixer */
.ks-mix-p{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.ks-mix-p button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 13px;cursor:pointer;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:600 14.5px/1.2 var(--sans)}
.ks-mix-p button::before{content:"";flex:none;width:16px;height:16px;border-radius:4px;border:2px solid var(--ink-3);background:var(--paper)}
.ks-mix-p button[aria-pressed="true"]{border-color:var(--brand)}
.ks-mix-p button[aria-pressed="true"]::before{border-color:var(--brand);background:var(--brand);
  box-shadow:inset 0 0 0 2px var(--paper)}
.ks-mix-p button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ks-mix-c{display:grid;gap:6px;margin:12px 0 0;padding:12px;list-style:none;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line-2)}
.ks-mix-c li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.35;color:var(--ink-3)}
.ks-mix-c li i{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--line-3)}
.ks-mix-c li.is-on{color:var(--ink);font-weight:600}
.ks-mix-c li.is-on i{border-color:var(--gain);background:var(--gain)}
.ks-mix-c li.is-risk{color:var(--drop)}
.ks-mix-c li.is-risk i{border-color:var(--drop);background:var(--drop)}
.ks-mix-v{min-height:3.2em;margin-top:10px;font-size:14.5px;line-height:1.5;font-weight:700}
.ks-mix-v.is-right{color:var(--gain)}
.ks-mix-v.is-wrong{color:var(--drop)}

/* step 9: the two halves and the three headers */
.ks-halves{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ks-half{padding:12px;border-radius:var(--r-sm);background:var(--paper);border:2px solid var(--brand)}
.ks-half.is-secret{border-color:var(--drop)}
.ks-half b{display:block;font:800 16px/1.1 var(--cond);text-transform:uppercase;color:var(--brand-ink)}
.ks-half.is-secret b{color:var(--drop)}
.ks-half span{display:block;margin-top:5px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ks-hdrs{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.ks-hdrs li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.ks-hdrs code{padding:3px 7px;border-radius:6px;background:var(--paper);border:1px solid var(--line-2);color:var(--ink);font-size:12.5px}
@media (max-width:560px){.ks-halves{grid-template-columns:1fr}}

/* the 1-9 row, bigger, with a word under each number on wide screens */
.ks-rail li{display:flex;flex-direction:column;align-items:center;gap:5px}
.ks-rail small{display:none}
@media (min-width:1100px){
  /* the rail is a grid (v7): wider columns make room for the word, the circle stays 44px */
  .ks-ctrl .ks-rail{grid-auto-columns:62px;gap:2px}
  .ks-rail button{width:44px;height:44px;font-size:19px}
  .ks-rail small{display:block;width:60px;text-align:center;font:600 11.5px/1.1 var(--sans);color:var(--ink-3);white-space:nowrap}
  .ks-rail li:has(button[aria-current="step"]) small{color:var(--brand-ink);font-weight:700}
}

/* Bot stopped trading? (2026-10-16): the one button to Kalshi's Advance shard settings, always visible under the parts */
.ks-cash-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 6px}
.ks-cash-steps{display:grid;gap:12px;margin:14px 0 0;padding:0;max-width:52em;counter-reset:ks-cash}
.ks-cash-steps>li{list-style:none;counter-increment:ks-cash;position:relative;padding:14px 16px 14px 56px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2);font-size:15px;line-height:1.55;color:var(--ink-2)}
.ks-cash-steps>li::before{content:counter(ks-cash);position:absolute;left:16px;top:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font:700 14px/1 var(--sans)}
.ks-cash-steps>li>p{margin:0}
.ks-cash-steps b{color:var(--ink)}
.ks-cash-steps .ks-fig{margin:12px 0 0}
@media (max-width:560px){.ks-cash-steps>li{padding:12px 12px 12px 48px}.ks-cash-steps>li::before{left:12px;width:26px;height:26px;font-size:13px}.ks-cash-steps .ks-fig{margin-left:-36px}}

/* the hero link to the fix (2026-10-16): a plain link under the two buttons, to #cash-check */
.ks-start .ks-hero-fix{flex-basis:100%;width:100%;display:inline-block;margin-top:6px;font:600 15px/1.4 var(--sans);color:var(--dlink);text-decoration:underline;text-underline-offset:3px}
.ks-start .ks-hero-fix:hover,.ks-start .ks-hero-fix:focus-visible{color:#fff}

/* 2026-10-17 (Ross): the balance table's phone crop sits in a <picture> */
.ks-fig picture{display:block}

/* First, add money (2026-10-17): the deposit box opens Part 3 */
.ks-deposit{margin-bottom:18px}
.ks-ans .ks-src{font-size:13px;line-height:1.5;color:var(--ink-2)}
.ks-dep-figs{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin:14px 0 6px}
.ks-dep-figs .ks-fig{margin:0}
@media (max-width:760px){.ks-dep-figs{grid-template-columns:1fr}}

/* Referral QR card (2026-10-17): right of the hero on wide screens; phones get the button, since a phone can't scan itself */
.ks-ref{display:none}
@media (min-width:1100px){
  .ks-hero .wrap{position:relative}
  .ks-hero .ks-h1,.ks-hero .ks-lede,.ks-hero .ks-start,.ks-hero .ks-checked{max-width:min(44em,calc(100% - 300px))}
  .ks-ref{display:block;position:absolute;top:0;right:var(--gutter,24px);width:252px;padding:16px 18px 14px;border-radius:var(--r);
    background:#fff;color:#0b1020;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.28)}
  .ks-ref-tag{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef1f8;font:700 11px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#3a4256}
  .ks-ref-h{margin-top:8px;font:800 16px/1.25 var(--sans);color:#0b1020}
  .ks-ref-qr{display:block;width:168px;height:168px;margin:12px auto 10px}
  .ks-ref-offer{font:400 13px/1.45 var(--sans);color:#2a3142}
  .ks-ref-offer b{color:#0b1020}
  .ks-ref-go{display:inline-block;margin-top:8px;font:700 14px/1.4 var(--sans);color:#1d4ed8;text-decoration:underline;text-underline-offset:3px}
  .ks-ref-fine{margin-top:6px;font:400 12px/1.4 var(--sans);color:#4a5163}
}

/* ===== Mary, panel 2026-10-17. Last in the file on purpose: these override earlier blocks at equal specificity. ===== */
/* Line check: headings balance, short copy avoids a lone last word. The source joins the last two words of each step
   title and of the short Learn labels with &nbsp;; this is the backstop for everything else. */
.ks h2,.ks h3,.ks summary,.ks-learn-t,.ks-ans-q,.ks-cards b,.ks-wait-k,.ks-pick-q,.ks-ref-h{text-wrap:balance}
.ks figcaption,.ks-sub,.ks-cards small,.ks-step p,.ks-learn p,.ks-keep li,.ks-cash-steps li>p,.ks-ex-what,.ks-flow span,
.ks-time span,.ks-half span,.ks-tally span,.ks-ref-offer,.ks-quiz-q,.ks-ans p,.ks-way p{text-wrap:pretty}
/* H1 on phones: "for automated trading." is one phrase and must fit one line. 378px at 40px Barlow 800 against 358px
   of room at 390, so the size follows the column: 36.5px at 390, 29.4px at 320. */
@media (max-width:620px){.ks-h1{font-size:min(40px,calc((100vw - 32px) / 9.8))}.ks-h1 em{text-wrap:balance}}

/* Parts bar on phones: four short labels in one row, nothing behind a hidden scroll. The long label stays for
   screen readers. */
.ks-parts-list a{position:relative}
.ks-parts-list .ks-tab-s{display:none}
@media (max-width:620px){
  .ks-parts-list{flex:1 1 auto;justify-content:space-between;overflow-x:visible}
  .ks-parts-list a{gap:6px;padding:3px 6px 0}
  .ks-parts-list .ks-tab-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ks-parts-list .ks-tab-s{display:inline}
}

/* Tap targets: 44px for every control on this page. */
.ks-wiz-b,.ks-ctrl .ks-wiz-b,.ks-pick-row button{min-height:44px}
.ks-start .ks-hero-fix{display:inline-flex;align-items:center;min-height:44px;margin-top:0}
/* The 1-9 row on phones stays one row (Jay, v7), so the circle stays 31px and its hit area grows into the gaps. */
@media (max-width:620px){.ks-rail button{position:relative}.ks-rail button::after{content:"";position:absolute;inset:-7px -3px}}

/* A button edge on --paper needs 3:1: --line-2 is 1.43:1 light, 1.55:1 dark; --line-3 is 3.52:1 and 5.13:1. */
.ks-wiz-b,.ks-rail button,.ks-pick-row button,.ks-reset,.ks-quiz-o button,.ks-mix-p button{border-color:var(--line-3)}

/* Desktop stepper: Back and Next hold one width through steps 1 to 8 ("Back" 79px to "Back a step" 128px moved
   Back 49px under the cursor). Only the part change at the end widens Next. */
@media (min-width:621px){.ks-ctrl .ks-wiz-b{min-width:130px}}

/* Phones: Next is a fixed pill, so holding the box at the tallest step buys nothing and left up to 698px of blank
   page under a short step (step 5: 823px of content in a 1521px box). The script should also skip the height there. */
@media (max-width:620px){.ks-js .ks-steps[data-ks-box]{min-height:0!important}}

/* Phones: the screenshots get the card's full width. */
@media (max-width:560px){
  .ks-js .ks-step--pic.is-on{padding:16px 12px}
  .ks-fig--step{padding:8px}
  .ks-step--pic>.ks-fig--step{margin-inline:-4px}
  .ks-dep-figs{margin-inline:-12px}
}
/* The two top-bar strips (1590x122, 1444x122): crop to the end that holds the ring instead of shrinking the whole bar.
   Kalshi's 13px labels render at 13.6px at every width (were 9px at 1440, 7.9px at 1100, 4.4px at 390). */
.ks-real[data-crop]{width:100%;height:64px;max-height:none;object-fit:cover}
.ks-real[data-crop="left"]{object-position:left center}
.ks-real[data-crop="right"]{object-position:right center}
@media (max-width:360px){.ks-parts-list a{gap:4px;padding:3px 4px 0}}
/* An eyebrow that wraps on a phone needs line height: at 1 the two lines touch (hero, 390). */
.ks .eyebrow{line-height:1.35}
/* The deposit screens: two up, each 352px wide, printed Kalshi's 17px labels at 7.1px even on a laptop. One column,
   600px wide, and no height cap (it is not in the stepper, so it does not set any box height). */
.ks-dep-figs{grid-template-columns:minmax(0,600px)}
.ks-dep-figs .ks-real{max-height:none}
/* Part 4's H2: "Kalshi's written approval" keeps one line on phones (Jay's line rule; the build and the test need the
   phrase verbatim, so no &nbsp;). 323px at 30px against 314px of room at 390, so the size follows the box. */
@media (max-width:620px){.ks-wait .h2 em{white-space:nowrap}.ks-wait .h2{font-size:min(30px,calc((100vw - 76px) / 11))}}
/* 320: a step's words column and the Ed25519/RSA table ran past the screen (body overflow-x:hidden hid the scroll and
   cut the text). The long address in step A needs a column that may shrink and a word that may break. */
.ks-step-h>div{min-width:0;overflow-wrap:anywhere}
@media (max-width:360px){.ks-vs tbody th{white-space:normal}.ks-vs th,.ks-vs td{padding:8px 7px}}

/* ===== Ross, panel merge 2026-10-17: the "What we tested" table (#checked) and Part 4's list. New selectors only. ===== */
.ks-tbl--checked tbody th{font:600 14px/1.5 var(--sans);color:var(--ink)}
.ks-tbl--checked tr.ks-tbl-g th{padding:16px 16px 8px;font:700 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-2)}
.ks-wait .h3{margin-top:22px}
.ks-wait .ks-keep{margin-top:10px}

/* Step 7 options (2026-10-17): each choice sits above its own Kalshi screen; the step runs full width on a laptop */
.ks-step--opts>.ks-fig{padding:16px}
.ks-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.ks-opt{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2)}
.ks-opt--rec{border:2px solid var(--brand)}
.ks-opt-tag{align-self:flex-start;padding:2px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);
  font:700 11.5px/1.6 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ks-opt--rec .ks-opt-tag{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.ks-opt-h{font:800 19px/1.2 var(--sans);color:var(--ink)}
.ks-step--pic .ks-opt-p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.ks-opt .ks-real{margin-top:auto;width:100%;max-height:none;border-radius:calc(var(--r) - 2px)}
@media (min-width:900px){
  .ks-js .ks-steps>.ks-step--opts.is-on{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"h h" "fig fig" "learn learn";grid-template-rows:auto auto auto}
  .ks-js .ks-step--opts.is-on>.ks-step-h>div>p{max-width:62em}
}
@media (max-width:700px){.ks-opts{grid-template-columns:1fr}}