/* Kilovolt Search. Drawing-set layout from the Claude Design handoff (HANDOFF.md). */

@font-face{font-family:"Sofia Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/sofia-sans-400-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans Condensed";font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/sofia-sans-condensed-600-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"B612 Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/b612-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"B612 Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/b612-mono-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F8F9FB;--ink:#161B23;--muted:#484D56;--ink-hover:#2A313B;--paper-hover:#ECEFF1;
  --red:#CC2823;--red-ink:#F87A5E;--glint:#FFF7ED;
  --sans:"Sofia Sans",system-ui,sans-serif;--cond:"Sofia Sans Condensed",sans-serif;--mono:"B612 Mono",monospace;
  --mg:clamp(6px,1vw,14px);--gut:clamp(14px,3vw,56px);--spine:clamp(44px,6vw,96px);--bub:clamp(40px,3.4vw,52px);
  --line:1.5px solid var(--ink);--hair:1px solid var(--ink);
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--paper)}
body{color:var(--ink);font-family:var(--sans)}
a{color:var(--ink)}
:where(a):hover{color:var(--red)}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px;position:relative;z-index:3}
p,h1,h2,h3{margin:0}

/* Sheet frame */
.page{min-height:100vh;padding:var(--mg)}
.sheet{border:var(--line)}
.zones{display:none}

/* Top bar */
.bar{display:flex;flex-wrap:wrap;align-items:center;border-bottom:var(--line)}
.wm{flex:1 0 auto;display:flex;align-items:center;min-height:56px;padding:0 var(--gut);font-family:var(--cond);font-weight:800;font-size:clamp(19px,1.5vw,22px);letter-spacing:.1em;text-decoration:none;color:var(--ink)}
.nav{order:2;flex:1 1 100%;display:flex;flex-wrap:wrap;border-top:var(--hair)}
.nav a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 clamp(8px,1.4vw,20px);font-weight:600;font-size:15px;text-decoration:none;color:var(--ink)}
.nav a+a{border-left:var(--hair)}
.nav a:hover{text-decoration:underline}
.nav span{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--muted)}
.book{order:1;display:flex;align-items:center;min-height:44px;margin:0 clamp(10px,2vw,28px) 0 0;padding:0 16px;border:var(--line);font-weight:600;font-size:15px;text-decoration:none;color:var(--ink)}

/* Hero (sheet E-601) */
.hero{min-height:calc(100vh - 2*var(--mg) - 105.5px);min-height:calc(100svh - 2*var(--mg) - 105.5px);display:flex;flex-direction:column}
.hgrid{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr)}
.htext{display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,4.2vw,72px) var(--gut) clamp(22px,3vw,48px)}
.eyebrow{font-family:var(--mono);font-size:clamp(11.5px,.85vw,13px);letter-spacing:.02em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
h1{margin-top:clamp(12px,1.4vw,22px);font-family:var(--cond);font-weight:700;font-size:clamp(34px,4.5vw,70px);line-height:1;letter-spacing:-.005em;max-width:14em;text-wrap:balance}
.lede{margin-top:clamp(16px,1.8vw,28px);font-size:clamp(16px,1.2vw,19px);line-height:1.5;max-width:35em;color:var(--muted);text-wrap:pretty}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.2vw,34px);max-width:600px}
.tag{margin-top:14px;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted)}
.dcol{display:flex;flex-direction:column;border-top:var(--line);padding:clamp(10px,2vw,40px) var(--gut)}
.dhead{display:flex;align-items:center;gap:10px;min-height:44px}
.dnum,.snum{flex:none;width:28px;height:28px;border:var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:700}
.dtitle{display:flex;flex-direction:column;line-height:1.2}
.dtitle b{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.06em;border-bottom:var(--line);padding-bottom:2px}
.dtitle span{font-family:var(--mono);font-size:10px;padding-top:3px;color:var(--muted)}
.mo{margin-left:auto;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 0 0 12px;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.04em;color:var(--ink)}
.mo-sq{width:11px;height:11px;border:var(--line)}
.mo-w{min-width:calc(3ch + .15em);text-align:left;font-weight:700}
.mo-on,.m .mo-off{display:none}
.m .mo-on{display:inline}
.m .mo-sq{background:var(--ink)}
.dg{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:132px;padding:8px 0}
.dg svg{display:block;width:100%;height:auto;overflow:visible}
.dg-h{max-width:520px}
.dg-v{max-height:calc(100vh - 300px);max-height:calc(100svh - 300px)}
.dg .dg-v{display:none}
.tb{display:flex;border-top:var(--line)}
.tb>div{flex:0 0 auto;padding:7px 16px;border-left:var(--line)}
.tb>div:first-child{flex:1 1 auto;padding:7px var(--gut);border-left:0}
.tb small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.tb b{display:block;font-family:var(--cond);font-weight:700;font-size:16px}
.tb>div:first-child b{letter-spacing:.06em}
.tb>div:nth-child(2) b{letter-spacing:.04em}

/* One-line diagram. Still state = fully drawn and energized; motion layers on top. */
.dw,.en,.gl{fill:none}
.dw{stroke:var(--ink);stroke-width:1.5}
.en{stroke:var(--red);stroke-width:2.5}
.gl{display:none;stroke:var(--glint);stroke-width:1.3}
.gl path{stroke-dasharray:.045 2;stroke-dashoffset:.045}
.lb{fill:var(--ink);font-family:var(--mono)}
.dg-h .lb{font-size:10px}
.dg-v .lb{font-size:11px}
.cv{display:none;fill:var(--paper)}
.cv rect{transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0)}
.m:not(.done) .dw path,.m:not(.done) .en path{stroke-dasharray:1;animation:kv-draw var(--u) linear var(--s) backwards}
.m:not(.done) .cv{display:inline}
.m:not(.done) .cv rect{animation:kv-type var(--u) steps(var(--n),jump-start) var(--s) backwards}
.m.mjs .gl{display:inline}
.m.mjs .gl path{animation:kv-glint 3.8s linear var(--gd) infinite}
.m.mjs.g0 .gl path{animation-delay:0s}
.m.mjs .kv-p .gl path{animation-play-state:paused}
@keyframes kv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes kv-type{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes kv-glint{0%{stroke-dashoffset:.045}70%,100%{stroke-dashoffset:-1}}

/* Sections, spine and bubbles (sheets E-602 to E-606) */
.sec{display:grid;grid-template-columns:var(--spine) minmax(0,1fr);border-top:var(--line)}
.spn{position:relative}
.spn::before,.fill{content:"";position:absolute;top:-1.5px;bottom:0}
.spn::before{left:calc(50% - .75px);width:1.5px;background:var(--ink)}
.fill{left:calc(50% - 1.25px);width:2.5px;background:var(--red);transform-origin:50% 0}
.sec:last-child .spn::before,.sec:last-child .fill{bottom:auto;height:29.5px}
.bub{position:absolute;top:calc(28px - var(--bub)/2);left:calc(50% - var(--bub)/2);width:var(--bub);height:var(--bub);border:var(--line);border-radius:50%;background:var(--paper);display:grid;grid-template-rows:1fr 1fr;font-family:var(--mono);font-size:clamp(9px,.7vw,11px);line-height:1}
.bub::after{content:"";position:absolute;inset:-1.5px;border:1.5px solid var(--red);border-radius:50%}
.m.mjs .bub:not(.on)::after{opacity:0}
.m.mjs.ready .bub::after{transition:opacity .3s}
.bub>span{display:flex;justify-content:center}
.bub>span:first-child{align-items:flex-end;padding-bottom:2px;border-bottom:var(--hair);font-weight:700}
.bub>span:last-child{align-items:flex-start;padding-top:3px}
.tk{position:relative}
.tk::after{content:"";position:absolute;inset:-1px;background:var(--paper);transform-origin:100% 50%;transform:scaleX(0)}
.m.mjs .tk:not(.shown):not(.ticked)::after{transform:none}
.m.mjs .tk.ticked:not(.shown)::after{animation:kv-tick 225ms steps(5,end) 120ms backwards}
@keyframes kv-tick{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.sbody{min-width:0;padding:0 var(--gut) clamp(44px,5.5vw,96px) 0}
.slab{display:flex;align-items:center;min-height:56px;margin-bottom:clamp(8px,1.6vw,24px)}
.slab p{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
h2{font-family:var(--cond);font-weight:700;font-size:clamp(30px,3.4vw,54px);line-height:1.02;max-width:15em;text-wrap:balance}
.body{margin-top:clamp(16px,1.8vw,24px);font-size:clamp(16px,1.15vw,18px);line-height:1.55;max-width:36em;color:var(--muted);text-wrap:pretty}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}
.box{border:var(--line)}
.box h3{padding:10px 14px;background:var(--ink);color:var(--paper);font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.03em}
.box ol,.steps,.cl{list-style:none;margin:0;padding:0}
.box li{display:grid;grid-template-columns:44px minmax(0,1fr)}
.box li+li{border-top:var(--hair)}
.box li>span:first-child{padding:15px 0 0 14px;border-right:var(--hair);font-family:var(--mono);font-size:12px;color:var(--muted)}
.box li>span:last-child{padding:12px 14px;font-size:clamp(16px,1.1vw,17px);line-height:1.5}
.callout{padding:clamp(16px,2vw,24px);border:var(--line);font-family:var(--cond);font-weight:600;font-size:clamp(21px,1.8vw,28px);line-height:1.18;text-wrap:pretty}
.stack{display:flex;flex-direction:column;gap:20px}
.note{font-family:var(--mono);font-size:13px;line-height:1.65;max-width:44em}
.one{display:flex;max-width:360px}
.w920{max-width:920px}
.w920 .body{max-width:40em}
.how{margin:clamp(36px,4.4vw,60px) 0 clamp(18px,2vw,26px);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.steps{display:grid;grid-template-columns:minmax(0,1fr)}
.steps li{position:relative;display:flex;gap:14px;padding-bottom:22px}
.steps li:last-child{padding-bottom:0}
.seg{position:absolute;left:13.25px;top:28px;bottom:0;width:1.5px;background:var(--ink)}
.snum{position:relative;background:var(--paper)}
.steps p{padding-top:2px;font-size:16px;line-height:1.5;color:var(--muted)}
.steps strong{display:block;margin-bottom:4px;font-family:var(--cond);font-weight:700;font-size:19px;color:var(--ink)}
.close{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;margin-top:clamp(36px,4.4vw,60px)}
.close .note{flex:1 1 320px}
.close .one{flex:0 1 360px}
.cand{gap:clamp(28px,4vw,72px)}
.cand h2{max-width:12em}
.cl{border-top:var(--line)}
.cl li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:14px 0;border-bottom:var(--hair);font-size:clamp(16px,1.2vw,18px);line-height:1.5}
.cl li>span:first-child{padding-top:4px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.cg{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5px;margin-top:clamp(24px,3vw,36px);background:var(--ink);border:var(--line)}
.cg a{display:flex;align-items:center;min-height:64px;padding:12px 16px;background:var(--paper);font-family:var(--cond);font-weight:700;font-size:clamp(20px,1.7vw,26px);text-decoration:none;color:var(--ink);overflow-wrap:anywhere}
.cg a:hover{text-decoration:underline}
.cg.sm{max-width:600px;margin-top:clamp(22px,2.6vw,32px)}
.cg.sm a{min-height:56px;padding:10px 16px;font-size:clamp(19px,1.5vw,22px)}
.fg{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.fg img{display:block;width:100%;max-width:clamp(220px,24vw,340px);height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border:var(--line)}
.fg h2{max-width:none}
.li{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-weight:600;font-size:17px;color:var(--ink);text-underline-offset:4px}
.ctc{padding:clamp(4px,1vw,12px) var(--gut) clamp(48px,6vw,104px) 0}
.ctc h2{min-height:48px;display:flex;align-items:center;font-size:clamp(40px,6vw,96px);line-height:1;max-width:none}
.ctc .body{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(16px,1.3vw,20px);line-height:1.5;max-width:34em}
.ctc .ctas{margin-top:clamp(22px,2.6vw,36px)}

/* Footer */
.foot{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5px;background:var(--ink);border-top:var(--line)}
.foot div{padding:14px clamp(14px,1.6vw,24px);background:var(--paper)}
.f1{font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.03em}
.f2{font-size:15px;font-weight:600;line-height:1.4}
.f3{font-size:12.5px;line-height:1.55;color:var(--muted)}
.f4{font-family:var(--mono);font-size:12px;line-height:1.5}

/* Breaker buttons: an open knife switch that closes on hover, keyboard focus and press */
.btn{flex:1 1 236px;display:flex;align-items:center;gap:14px;min-height:54px;padding:0 20px 0 16px;border:var(--line);background:transparent;color:var(--ink);text-decoration:none;font-size:17px;font-weight:600;line-height:1.2;--hot:var(--red);transition:transform 160ms var(--ease-out)}
.btn-p{--hot:var(--red-ink);background:var(--ink);color:var(--paper)}
.btn:active{transform:scale(.97)}
.btn-p:active{background:var(--ink-hover)}
.btn-s:active{background:var(--paper-hover)}
.sw{flex:none;overflow:visible;fill:none;stroke-width:1.6}
.sw .src{stroke:var(--hot)}
.sw .piv{fill:var(--hot)}
.sw .bl,.sw .cn,.sw .ld{stroke:currentColor;transition:stroke 180ms ease}
.sw .bl{stroke-width:1.8;transform-origin:9px 10px;transition:transform 180ms var(--ease-out),stroke 180ms ease}
.sw .cn{stroke-width:1.3}
.btn:focus-visible .bl,.btn:active .bl{transform:rotate(30deg)}
.btn:focus-visible :is(.bl,.cn,.ld),.btn:active :is(.bl,.cn,.ld){stroke:var(--hot)}
html:not(.m) .btn,html:not(.m) .sw *{transition-duration:0s}
@media (hover:hover) and (pointer:fine){
  .btn:hover .bl{transform:rotate(30deg)}
  .btn:hover :is(.bl,.cn,.ld){stroke:var(--hot)}
  .btn-p:hover{background:var(--ink-hover)}
  .btn-s:hover{background:var(--paper-hover)}
  .book:hover{background:var(--ink);color:var(--paper)}
}
.book:active{background:var(--ink);color:var(--paper)}

/* 404 (sheet E-404) */
.s404{min-height:calc(100vh - 2*var(--mg));min-height:calc(100svh - 2*var(--mg));display:flex;flex-direction:column}
.m404{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,6vw,96px) var(--gut)}
.open{display:block;width:100%;max-width:420px;height:auto;margin-bottom:clamp(24px,3vw,40px);overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.5}
.m404 .eyebrow{font-size:12px;line-height:normal}
.m404 h1{margin-top:clamp(12px,1.4vw,20px);font-size:clamp(36px,5vw,76px)}
.m404 .lede{margin-top:clamp(16px,1.8vw,26px);font-size:clamp(16px,1.25vw,19px);line-height:1.55;max-width:34em;text-wrap:wrap}
.m404 .lede a{font-weight:600;text-underline-offset:3px}
.m404 .one{margin-top:clamp(22px,2.6vw,36px);max-width:340px}
.m404 .btn{flex:1 1 auto}

/* Narrowest phones: the three nav links need tighter padding to fit 320px without sideways scroll */
@media (max-width:359px){
  .nav a{gap:4px;padding:0 3px}
}

/* Desktop layout at 980px and wider */
@media (min-width:980px){
  .zones{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));height:22px;border-bottom:var(--hair);font-family:var(--mono);font-size:10px;color:var(--muted)}
  .zones span{display:flex;align-items:center;justify-content:center}
  .zones span+span{border-left:var(--hair)}
  .nav{order:1;flex:0 0 auto;align-self:stretch;border-top:0}
  .book{order:2}
  .hero{min-height:calc(100vh - 2*var(--mg) - 82.5px);min-height:calc(100svh - 2*var(--mg) - 82.5px)}
  .hgrid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
  .dcol{flex-direction:column-reverse;border-top:0;border-left:var(--line)}
  .dg .dg-h{display:none}
  .dg .dg-v{display:block}
  .two{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
  .steps li{flex-direction:column;padding-bottom:0}
  .seg{left:28px;top:13.25px;right:-24px;bottom:auto;width:auto;height:1.5px}
  .cg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fg{grid-template-columns:clamp(220px,24vw,340px) minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,2.6fr) minmax(0,.9fr)}
}