/* zoomtech.digital: "does it run on my setup" reference. Claude design, 24 Sep 2026. Palette: cobalt (Venelin). */
:root{
  --paper:#F2F5FA;      /* cool paper, not cream */
  --sheet:#FFFFFF;
  --ink:#0E1A2B;        /* navy ink */
  --ink-2:#46526A;      /* secondary text, AA on paper */
  --line:#D5DDEA;
  --accent:#1D4EDB;     /* cobalt, the one accent */
  --accent-soft:#E3EAFD;
  --accent-ink:#15389F;
  --f-disp:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-text:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --gut:clamp(18px, 5vw, 48px);
  --max:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--f-text);font-feature-settings:"tnum" 0}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* masthead */
.mast{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gut);max-width:var(--max);margin:0 auto}
.brand{font:700 22px/1 var(--f-disp);letter-spacing:-.02em;text-decoration:none;font-variation-settings:"wdth" 88}
.brand span{color:var(--ink-2);font-weight:500}
.nav{display:flex;gap:22px;font-size:15px}
.nav a{text-decoration:none;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.menu-btn{display:none;font:500 15px var(--f-text);background:none;border:1.5px solid var(--ink);border-radius:999px;padding:8px 16px;color:var(--ink)}
@media (max-width:720px){.nav{display:none}.menu-btn{display:block}}

/* hero: the fill-in sentence */
.ask{padding:28px 0 8px}
.ask h1{font:700 clamp(40px, 11vw, 88px)/.98 var(--f-disp);letter-spacing:-.022em;margin:0 0 22px;max-width:14ch;font-variation-settings:"wdth" 92,"opsz" 96}
.sentence{font:500 clamp(22px, 5.6vw, 34px)/1.5 var(--f-disp);letter-spacing:-.01em;margin:0;max-width:26ch}
.pick{position:relative;display:inline-block}
.pick select{appearance:none;-webkit-appearance:none;font:inherit;color:var(--accent);background:var(--accent-soft);border:0;border-bottom:3px solid var(--accent);border-radius:10px 10px 0 0;padding:0 34px 0 12px;margin:2px 0;cursor:pointer;max-width:100%}
.pick::after{content:"";position:absolute;right:13px;top:50%;width:9px;height:9px;border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.answer{margin:26px 0 0;font-size:17px;color:var(--ink-2)}
.answer b{font:700 44px/1 var(--f-disp);color:var(--ink);letter-spacing:-.03em;margin-right:8px;font-variant-numeric:tabular-nums;vertical-align:-4px}

/* the pinout: six sockets */
.pins{display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:5px;max-width:280px}
.pin{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);line-height:1}
.pin i{display:block;width:100%;height:18px;border-radius:5px;border:1.5px solid var(--line);background:transparent}
.pin.on i{background:var(--accent);border-color:var(--accent)}
.pin.on{color:var(--ink)}
.pin.off{opacity:.55}

/* roster */
.family{padding:40px 0 8px}
.family h2{font:700 30px/1.1 var(--f-disp);letter-spacing:-.025em;margin:0 0 6px;font-variation-settings:"wdth" 85}
.family > p{margin:0 0 18px;color:var(--ink-2);max-width:60ch}
.list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.tool{display:grid;grid-template-columns:1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.tool[hidden]{display:none}
.tool-name{font:700 24px/1.1 var(--f-disp);letter-spacing:-.02em;text-decoration:none}
.tool-name:hover{color:var(--accent)}
.tool-by{display:block;margin-top:3px;font-size:15px;color:var(--ink-2)}
.tool-code{font-size:15px;color:var(--ink-2)}
.tool-code strong{color:var(--ink);font-weight:600}
.carried{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:5px 12px;text-decoration:none;justify-self:start}
.carried::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
@media (min-width:860px){
  .tool{grid-template-columns:300px 280px 1fr 200px;align-items:center;gap:28px}
  .tool .carried{justify-self:end}
}
.empty{padding:28px 0;font-size:18px}
.empty button{font:600 16px var(--f-text);color:var(--accent);background:none;border:0;border-bottom:2px solid var(--accent);padding:0;cursor:pointer}

/* sponsored: a real creative, framed white */
.promo{margin:36px 0 8px}
.promo small{display:block;font-size:13px;color:var(--ink-2);margin:0 0 8px}
.promo a{display:block;background:var(--sheet);padding:10px;border-radius:14px;border:1px solid var(--line)}
.promo img{border-radius:8px;width:100%;height:auto}

/* tool page */
.crumbs{font-size:15px;color:var(--ink-2);padding-top:8px}
.crumbs a{color:var(--ink-2)}
.t-head{padding:18px 0 10px}
.t-head h1{font:800 clamp(48px, 14vw, 120px)/.92 var(--f-disp);letter-spacing:-.03em;margin:0;font-variation-settings:"wdth" 88,"opsz" 96;overflow-wrap:anywhere}
.t-head p{font-size:20px;line-height:1.5;max-width:34ch;margin:16px 0 0}
.bigpins{background:var(--sheet);border:1px solid var(--line);border-radius:18px;padding:22px;margin:26px 0}
.bigpins h2,.block h2{font:700 22px/1.2 var(--f-disp);letter-spacing:-.02em;margin:0 0 16px}
.bigpins .pins{max-width:none;gap:8px}
.bigpins .pin{font-size:13.5px;gap:8px}
.bigpins .pin i{height:46px;border-radius:10px;border-width:2px}
.block{padding:14px 0 22px;border-top:1px solid var(--line)}
.block p{margin:0;max-width:60ch}
.alts{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.alts a{display:flex;justify-content:space-between;gap:16px;align-items:center;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.alts a span:first-child{font:700 20px/1.2 var(--f-disp);letter-spacing:-.015em}
.alts a:hover span:first-child{color:var(--accent)}
.proof{font-size:15px;color:var(--ink-2)}

footer{margin-top:56px;padding:28px var(--gut) 48px;border-top:1.5px solid var(--ink);font-size:14px;color:var(--ink-2);max-width:var(--max);margin-left:auto;margin-right:auto}
footer p{max-width:62ch;margin:0 0 8px}
footer .risk{background:var(--accent-soft);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:16px 18px;margin:0 0 16px}
footer .risk h2{font:700 17px/1.2 var(--f-disp);letter-spacing:-.02em;color:var(--ink);margin:0 0 8px;font-variation-settings:"wdth" 88}
footer .risk p{color:var(--ink);margin:0;max-width:62ch}
footer nav{display:flex;flex-wrap:wrap;gap:10px 18px;margin:16px 0 10px}
footer nav a{color:var(--ink-2);text-decoration:none}
footer nav a:hover{color:var(--accent)}
footer small{display:block;font-size:13px}

@media (prefers-reduced-motion:no-preference){
  .answer b{transition:color .2s}
  .answer b.bump{color:var(--accent)}
}

/* phone menu: the button opens the nav as a full-width list (1 Oct 2026) */
@media (max-width:720px){.mast{flex-wrap:wrap}
.nav.open{display:flex;flex-direction:column;gap:0;width:100%;order:3;border-top:1px solid var(--line);margin-top:6px}
.nav.open a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
.menu-btn:focus-visible,.nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}}