/* Guide visual kit v1. Loaded after guide-v1.css (or a page's inline base).
   Clamshell language: black ground, solid dark panels, one blue, Geist + Geist Mono,
   line-art MacBook profiles. No hairline dividers, no micro-labels, no gradients. */
:root{--kit-s1:#0c0d0f;--kit-s2:#131417;--kit-s3:#1a1c20;--kit-tx:#F4F5F6;--kit-dim:#a4aab2;--kit-mute:#6d727a;
  --kit-blue:#3A63D4;--kit-blue-hi:#5b80ea;--kit-blue-deep:#10193a;--kit-red:#d9625a;--kit-amber:#d6a445;--kit-r:14px;--kit-gap:14px}

/* Hero figure: line-art MacBook profile on a solid panel */
.kit-hero{margin:30px 0 10px;background:var(--kit-s1);border-radius:var(--kit-r);padding:28px 26px 24px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:26px;align-items:center}
.kit-hero svg{display:block;width:100%;height:auto;max-height:230px}
.kit-hero .kit-cap{margin:0;color:var(--kit-dim);font-size:15px;line-height:1.55}
.kit-hero .kit-cap strong{display:block;color:var(--kit-tx);font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.kit-hero.kit-solo{grid-template-columns:1fr}
.kit-hero.kit-solo svg{max-height:210px}

/* SVG strokes and fills */
.l-base{fill:none;stroke:#8d939b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-lid{fill:none;stroke:var(--kit-tx);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-on{fill:none;stroke:var(--kit-blue-hi);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-off{fill:none;stroke:var(--kit-mute);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-fan{fill:none;stroke:#c9ced6;stroke-width:3;stroke-linecap:round}
.o1{opacity:.12}.o2{opacity:.22}.o3{opacity:.36}.o4{opacity:.55}
.chip{fill:var(--kit-blue-deep)}
.wedge{fill:var(--kit-blue)}
.w1{opacity:.05}.w2{opacity:.09}.w3{opacity:.14}.w4{opacity:.22}
.t-chip{fill:#cfdcff;font-family:"Geist","-apple-system",sans-serif;font-size:18px;font-weight:600}
.l-thin{fill:none;stroke:var(--kit-mute);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 7}
.f-on{fill:var(--kit-blue-hi)}
.f-soft{fill:var(--kit-blue);opacity:.22}
.f-off{fill:var(--kit-mute)}
.f-bad{fill:var(--kit-red)}
.f-tx{fill:var(--kit-tx)}
.f-warn{fill:var(--kit-amber)}
.f-dim{fill:#2a2d33}
.l-warn{fill:none;stroke:var(--kit-amber);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-bad{fill:none;stroke:var(--kit-red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-dim{fill:none;stroke:#3a3e45;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.t-svg-lg{fill:var(--kit-tx);font-family:"Geist","-apple-system",sans-serif;font-size:18px;font-weight:600}
.t-svg{fill:var(--kit-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px}
.t-svg-on{fill:var(--kit-blue-hi);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px}
@media (prefers-reduced-motion:no-preference){
  .pulse{animation:kit-pulse 2.4s ease-in-out infinite}
  .pulse.d2{animation-delay:.4s}.pulse.d3{animation-delay:.8s}
  @keyframes kit-pulse{0%,100%{opacity:.25}50%{opacity:1}}
}

/* Answer panel: the direct answer plus key facts */
.kit-answer{background:var(--kit-blue-deep);border-radius:var(--kit-r);padding:24px;margin:26px 0 8px}
.kit-answer > p{color:var(--kit-tx);font-size:18px;line-height:1.55;margin:0;max-width:62ch}
.kit-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
@media(max-width:720px){.kit-facts{grid-template-columns:1fr 1fr}}
.kit-fact{background:rgba(0,0,0,.28);border-radius:10px;padding:14px 14px 12px}
.kit-fact b{display:block;color:var(--kit-tx);font-size:20px;font-weight:650;letter-spacing:-.02em;line-height:1.15;white-space:nowrap}
.kit-fact span{display:block;color:var(--kit-dim);font-size:13.5px;line-height:1.4;margin-top:5px}

/* Flow: a short left-to-right chain of states */
.kit-flow{display:flex;align-items:stretch;gap:10px;margin:22px 0 18px}
.kit-flow .n{flex:1 1 0;min-width:0;background:var(--kit-s2);border-radius:12px;padding:14px 16px}
.kit-flow .n b{display:block;color:var(--kit-tx);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.kit-flow .n span{display:block;color:var(--kit-dim);font-size:13.5px;font-weight:400;line-height:1.45;margin-top:4px}
.kit-flow .n.on{background:var(--kit-blue-deep)}
.kit-flow .n.on b{color:#cfdcff}
.kit-flow .n.on span{color:#aab8dc}
.kit-flow .n.bad b{color:#f0a19b}
.kit-flow .a{flex:none;align-self:center;color:var(--kit-mute);font-family:"Geist Mono",monospace;font-size:18px}

/* Timeline: a short sequence of states, stacked */
.kit-timeline{list-style:none;counter-reset:none;display:flex;flex-direction:column;gap:8px;margin:20px 0 18px;padding:0}
.kit-timeline > li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:center;background:var(--kit-s1);border-radius:12px;padding:14px 18px;margin:0}
.kit-timeline > li::before{display:none}
.kit-timeline > li.on{background:var(--kit-blue-deep)}
.kit-timeline svg{width:40px;height:40px;display:block}
.kit-timeline b{display:block;color:var(--kit-tx);font-size:16px;font-weight:600;letter-spacing:-.01em}
.kit-timeline span{display:block;color:var(--kit-dim);font-size:14.5px;line-height:1.45;margin-top:2px}
.kit-timeline li.on span{color:#aab8dc}

/* Choice grid: pick by situation */
.kit-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--kit-gap);margin:22px 0 14px}
.kit-choice{background:var(--kit-s1);border-radius:12px;padding:18px;display:flex;flex-direction:column}
.kit-choice.pick{background:var(--kit-blue-deep)}
.kit-choice h3{margin:0 0 6px !important;font-size:16px !important;color:var(--kit-tx)}
.kit-choice p{margin:0 !important;font-size:14.5px}
.kit-choice .go{display:block;margin-top:auto;padding-top:10px;color:var(--kit-tx);font-weight:600;font-size:14.5px}

/* Steps */
.kit-steps{list-style:none;counter-reset:kit;display:flex;flex-direction:column;gap:12px;margin:18px 0 16px;padding:0}
.kit-steps > li{margin:0;counter-increment:kit;position:relative;padding:16px 18px 16px 62px;background:var(--kit-s1);border-radius:12px;color:var(--kit-dim)}
.kit-steps > li::before{content:counter(kit);position:absolute;left:16px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--kit-blue);color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center}
.kit-steps > li strong{color:var(--kit-tx)}
.kit-steps > li pre{margin:10px 0 2px}

/* Callouts */
.kit-note{border-radius:12px;padding:16px 18px;margin:18px 0;background:var(--kit-s2);color:var(--kit-dim);display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.kit-note svg{width:22px;height:22px;margin-top:2px}
.kit-note p{margin:0 !important}
.kit-note strong{color:var(--kit-tx)}
.kit-note.warn{background:#1d1512}
.kit-note.warn .ic{fill:var(--kit-amber)}
.kit-note .ic{fill:var(--kit-blue-hi)}

/* Keycap */
kbd{font-family:"Geist",-apple-system,sans-serif;font-size:.86em;font-weight:600;color:var(--kit-tx);background:var(--kit-s3);border-radius:6px;padding:.1em .5em;box-shadow:inset 0 -2px 0 rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1);white-space:nowrap}

/* Verdict marks for tables */
.y,.n,.m{font-weight:700;white-space:nowrap}
.y{color:#8fb0ff}.n{color:#f0a19b}.m{color:var(--kit-amber)}

/* Scorecard: compact side-by-side verdicts */
.kit-score{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--kit-gap);margin:22px 0 14px}
.kit-score .c{background:var(--kit-s1);border-radius:12px;padding:18px}
.kit-score .c.pick{background:var(--kit-blue-deep)}
.kit-score .c h3{margin:0 0 4px !important;font-size:17px !important}
.kit-score .c .price{color:var(--kit-tx);font-size:14.5px;margin:0 0 10px}
.kit-score .c ul{gap:6px;margin:0}
.kit-score .c li{font-size:14px;padding-left:0}
.kit-score .c li::before{display:none}

/* FAQ accordion */
.kit-faq{display:flex;flex-direction:column;gap:8px;margin:16px 0 10px}
.kit-faq details{background:var(--kit-s1);border-radius:12px}
.kit-faq summary{list-style:none;cursor:pointer;padding:16px 48px 16px 18px;position:relative}
.kit-faq summary::-webkit-details-marker{display:none}
.kit-faq summary h3{margin:0 !important;font-size:16px !important;font-weight:600;color:var(--kit-tx);line-height:1.4}
.kit-faq summary::after{content:"+";position:absolute;right:18px;top:13px;color:var(--kit-dim);font-size:22px;line-height:1;transition:transform .2s var(--ease,ease)}
.kit-faq details[open] summary::after{transform:rotate(45deg);color:var(--kit-tx)}
.kit-faq summary:hover h3{color:#fff}
.kit-faq summary:hover::after{color:var(--kit-tx)}
.kit-faq details > p{padding:0 18px 16px;margin:0 !important;font-size:15.5px}

/* CTA with the clam */
.cta-card .clam{width:48px;height:auto;flex:none}

@media(max-width:560px){
  .kit-hero{grid-template-columns:1fr;padding:22px 18px 18px;margin-left:-22px;margin-right:-22px;border-radius:0}
  .kit-answer{margin-left:-22px;margin-right:-22px;border-radius:0;padding:22px}
  .kit-answer > p{font-size:16.5px}
  .kit-facts{grid-template-columns:1fr 1fr}
  .kit-fact b{font-size:17px;white-space:normal}
  .kit-flow{flex-direction:column}
  .kit-flow .a{transform:rotate(90deg);align-self:flex-start;margin-left:18px}
  .kit-steps > li{padding-left:56px}
}

/* Long identifiers wrap instead of widening the page */
main :not(pre) > code{white-space:nowrap}

/* Geist Mono is not self-hosted: use the system monospace for code everywhere */
main code,main pre code,header.page code,.kit-flow .a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Scorecards: 3 in a row or a single column, never 2+1 */
@media(max-width:720px){.kit-score{grid-auto-flow:row;grid-template-columns:1fr}}

/* CTA on phones: clam and text share a row, the button wraps below */
@media(max-width:560px){.cta-card p{flex:1 1 180px}}

/* Tables: keep command chips whole, zebra rows instead of hairlines */
.comparison th code,.comparison td code{white-space:nowrap}
@media(min-width:561px){.comparison tbody th{min-width:150px}}
.comparison th,.comparison td{border-bottom:0}
.comparison tbody tr:nth-child(even) th,.comparison tbody tr:nth-child(even) td{background:#101114}
.comparison .recommended th,.comparison .recommended td{background:#10193a}

/* Spacing after a hero */
.kit-hero + p{margin-top:28px}

/* Guide index: clickable cards say so with an underlined title; static cards stay plain */
a.guide-link.kit-choice h3{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px}
a.guide-link.kit-choice:hover h3{text-decoration-color:rgba(255,255,255,.8)}

/* Hero stacks before the illustration gets too small for its labels */
@media(max-width:760px){.kit-hero{grid-template-columns:1fr}.kit-hero svg{max-height:240px}}

/* Tables: one-line headers; fixed layout when a colgroup sets widths */
.comparison thead th{white-space:nowrap}
.comparison.fixed{table-layout:fixed}
@media(min-width:1100px){.comparison-wrap.wide{margin-left:-110px;margin-right:-110px}}

/* Phones: each table row becomes a stacked card, labelled by data-label */
@media(max-width:560px){
  .comparison-wrap{overflow:visible;background:none;margin-left:0;margin-right:0}
  .comparison{min-width:0}
  .comparison thead{display:none}
  .comparison,.comparison tbody,.comparison tr,.comparison td,.comparison tbody th{display:block;width:auto}
  .comparison tbody tr{background:var(--kit-s1);border-radius:12px;padding:14px 16px;margin-bottom:10px}
  .comparison tbody tr.recommended{background:var(--kit-blue-deep)}
  .comparison tbody tr:nth-child(even) th,.comparison tbody tr:nth-child(even) td,.comparison .recommended th,.comparison .recommended td{background:none}
  .comparison tbody th{padding:0 0 8px;font-size:16px}
  .comparison td{padding:6px 0}
  .comparison td::before{content:attr(data-label);display:block;color:var(--kit-tx);font-weight:600;font-size:13.5px;margin-bottom:1px}
  .comparison td code{white-space:normal}
}
.comparison col.c10{width:10%}.comparison col.c12{width:12%}.comparison col.c16{width:16%}.comparison col.c18{width:18%}.comparison col.c19{width:19%}.comparison col.c26{width:26%}.comparison col.c27{width:27%}