/* Guide pages (/guides/*). Shares the case-study layout, plus guide-only components. Tokens come from v2.css. */
/* Case study pages */
.cs-hero{padding-top:clamp(48px,6vw,80px)}
.crumb{font-family:var(--mono);font-size:14px;color:var(--ink-2)}
.crumb a{color:var(--ink-2);text-underline-offset:3px}
@media (pointer:coarse){.crumb a{display:inline-block;padding:12px 0;margin:-12px 0}}
.cs-h1{margin-top:20px;font-size:clamp(34px,5.4vw,68px);line-height:1.06;font-weight:600;letter-spacing:-.025em;max-width:15em}
.cs-id{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.cs-id img{height:28px;width:auto}
.cs-id__d{font-size:15px;color:var(--ink-2);padding-left:28px;border-left:1px solid var(--line)}
.cs-lead{margin-top:28px;font-size:clamp(19px,1.6vw,21px);line-height:1.5;max-width:36em}
@media (max-width:699px){.cs-id__d{flex-basis:100%;order:3;padding-left:0;border-left:0}}

.cs-top{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "m" "i" "l";gap:0}
.cs-top>.cs-h1{grid-area:h}
.cs-top>.cs-id{grid-area:i}
.cs-top>.cs-lead{grid-area:l}
.cs-media{grid-area:m;margin-top:28px;min-width:0}
@media (min-width:1100px){
  .cs-top{grid-template-columns:minmax(0,1fr) minmax(0,450px);grid-template-areas:"h m" "i m" "l m";grid-template-rows:auto auto 1fr;column-gap:56px}
  .cs-top .cs-h1{font-size:clamp(40px,4vw,56px)}
  .cs-media{margin-top:26px}
}
.cs-media .figcap{margin-top:12px}
.cs-proof{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.cs-proof blockquote p{font-size:19px;line-height:1.5;font-weight:500;letter-spacing:-.01em}
.cs-proof figcaption{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:15px;color:var(--ink-2)}
.cs-proof figcaption img{height:20px;width:auto}
.cs-proof figcaption b{color:var(--ink);font-weight:600}

.cs-keys{margin-top:48px}
.cs-keys__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (min-width:900px){.cs-keys__grid{grid-template-columns:repeat(4,minmax(0,1fr))}.cs-keys__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-key{padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0;min-width:0}
.cs-key__n{font-family:var(--mono);font-weight:500;font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-.02em;color:var(--good);font-variant-numeric:tabular-nums}
.cs-key__l{margin-top:10px;font-size:15px;line-height:1.35;font-weight:600;color:var(--ink)}
.cs-key__t{margin-top:4px;font-size:14px;line-height:1.45;color:var(--ink-2)}
@media (max-width:599px){.cs-key{padding:18px 16px}.cs-key__n{font-size:24px}}
.cs-keys .note{margin-top:20px;max-width:40em}
.note{flex:0 1 220px;color:var(--blue);font-size:14px;line-height:1.5;border-left:2px solid var(--blue);padding:2px 0 2px 14px}
.note b{display:block;font-family:var(--mono);font-size:12px;font-weight:400;margin-bottom:4px}
.note p+b{margin-top:18px}

.cs-shot{margin:0}
.cs-shot__img{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px}
.cs-shot__img img{display:block;width:100%;height:auto;max-width:calc(var(--w) * 1px)}
@media (max-width:599px){.cs-shot__img img{width:calc(var(--w) * .72px);max-width:none}}
.cs-strip{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.cs-strip>*{min-width:0}
.cs-strip .figcap{margin-top:10px}

.cs-video{margin-top:56px}
.cs-vid{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.vframe__logo{position:absolute;left:24px;bottom:22px;height:22px;width:auto;opacity:.85}
html[data-palette="night-lab"] .vframe__logo{filter:invert(1)}

.cs-case{margin-top:clamp(64px,7vw,96px);background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-case__in{max-width:var(--max);margin:0 auto;padding:8px var(--gut)}
.cs-part{display:grid;grid-template-columns:160px minmax(0,640px) minmax(0,220px);gap:14px 40px;padding:clamp(40px,5vw,56px) 0;border-bottom:1px solid var(--line)}
.cs-part:last-child{border-bottom:0}
.cs-part__k{font-size:15px;line-height:1.4;font-weight:600;letter-spacing:0;color:var(--ink-2);padding-top:9px}
.cs-part__lead{font-size:clamp(26px,2.4vw,32px);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.cs-part__b>p.cs-part__lead{margin-top:0}
.cs-part__b>.cs-tbl+.cs-tbl{margin-top:40px}
.cs-part__b>p{margin-top:16px}
.cs-part .note{align-self:start}
.cs-part__wide{grid-column:1 / -1;min-width:0}
.cs-part .quote{margin-top:28px}
@media (max-width:959px){
  .cs-part{grid-template-columns:minmax(0,1fr)}
  .cs-part__k{padding-top:0}
  .cs-part .note{max-width:30em}
}

.said{margin-top:24px;display:grid;gap:18px}
.said li{border-left:3px solid var(--red);padding-left:18px;font-size:18px;line-height:1.5}
.cite{margin-top:16px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink-2)}

.cs-dl{margin-top:28px;border-top:1px solid var(--ink)}
.cs-dl>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:4px 24px;padding:14px 0;border-bottom:1px solid var(--line)}
.cs-dl dt{font-weight:600}
.cs-dl dd{color:var(--ink-2)}
@media (max-width:599px){.cs-dl>div{grid-template-columns:1fr}}

.cs-tbl{margin-top:28px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cs-tbl table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.cs-tbl--3 table{min-width:540px}
@media (max-width:599px){.cs-tbl table,.cs-tbl--3 table{min-width:0;font-size:15px}.cs-tbl th,.cs-tbl td{padding-right:10px}.cs-tbl thead th{font-size:13px}}
.cs-tbl caption{caption-side:bottom;text-align:left;padding-top:12px;font-family:var(--mono);font-size:var(--fs-meta);color:var(--ink-2)}
.cs-tbl th,.cs-tbl td{padding:12px 16px 12px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cs-tbl thead th{font-size:14px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--ink)}
.cs-tbl tbody th{font-weight:500}
.cs-tbl tbody tr:last-child>*{border-bottom-color:var(--ink)}
.cs-tbl .was{color:var(--ink-2)}
.cs-tbl .now{color:var(--good);font-weight:600}
.cs-tbl .now .tbd{font-weight:500}

.cs-fig{margin-top:clamp(16px,3vw,32px)}
.cs-fig .pd{margin-top:8px}
.cs-bars{margin-top:28px;max-width:560px}

.tl{--n:6;margin-top:40px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-top:2px solid var(--ink)}
.tl li{position:relative;padding:24px 20px 0 0}
.tl li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.tl li:last-child::before{background:var(--good)}
.tl__d{font-family:var(--mono);font-size:14px;color:var(--ink-2);margin-bottom:6px}
.tl__t{font-size:16px;font-weight:500;line-height:1.45}
@media (max-width:899px){
  .tl{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--ink);gap:26px}
  .tl li{padding:0 0 0 22px}
  .tl li::before{top:5px;left:-7px}
}

.otr{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
@media (min-width:700px){.otr--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.otr figure{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.otr blockquote p{font-size:20px;line-height:1.45;font-weight:500;letter-spacing:-.01em}
.otr figcaption{margin-top:18px;font-size:15px;color:var(--ink-2)}
.otr figcaption b{color:var(--ink);font-weight:600}
.pull blockquote .tbd{font-size:.6em}
.cs-cons{list-style:none;margin:20px 0 0;padding:0;counter-reset:c;display:grid;gap:14px}
.cs-cons li{counter-increment:c;position:relative;padding-left:40px;font-size:18px;line-height:1.5}
.cs-cons li::before{content:counter(c);position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;border-radius:50%;border:1.5px solid var(--red);color:var(--red-ink);font:500 13px/1 var(--mono)}
.cs-cons b{color:var(--ink)}
.cs-media{align-self:start}
.cs-shot.cs-media{margin-top:28px}
@media (min-width:1100px){
  .cs-shot.cs-media{margin-top:26px}
  .cs-top .cs-id__d{flex-basis:100%;order:3;padding-left:0;border-left:0}
}
/* ---------- Guide components ---------- */
.g-meta{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:15px;color:var(--ink-2)}
.g-meta img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.g-meta b{color:var(--ink);font-weight:600}
.g-meta .mono{font-family:var(--mono);font-size:13px}

/* Short answer: the 40-60 word block AI engines quote */
.g-answer{margin-top:36px;max-width:46em;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--good);border-radius:var(--r);padding:24px 28px}
.g-answer__k{font-family:var(--mono);font-size:13px;color:var(--good);text-transform:uppercase;letter-spacing:.06em}
.g-answer p{margin-top:10px;font-size:clamp(18px,1.5vw,20px);line-height:1.55}

/* On this page */
.g-toc{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;padding:0;counter-reset:t}
.g-toc li{counter-increment:t}
.g-toc a{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:14px;text-decoration:none}
.g-toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.g-toc a:hover{border-color:var(--ink)}

/* Range chart: each row is a band from --a to --b (% of axis), optional median tick at --m */
.rng{position:relative;margin-top:24px;padding-left:var(--lw,150px)}
.rng__grid{position:absolute;left:var(--lw,150px);right:0;top:0;bottom:0;display:flex;justify-content:space-between;pointer-events:none}
.rng__grid span{width:1px;background:var(--line)}
.rng__row{position:relative;height:52px}
.rng__row+.rng__row{margin-top:10px}
.rng__lab{position:absolute;left:calc(var(--lw,150px) * -1);width:calc(var(--lw,150px) - 12px);top:0;line-height:1.25;height:52px;display:flex;align-items:center;font-size:14px;color:var(--ink-2)}
.rng__bar{position:absolute;top:22px;height:24px;left:var(--a);width:calc(var(--b) - var(--a));min-width:6px;border-radius:var(--r);background:var(--blue);opacity:.9}
.rng__row--good .rng__bar{background:var(--good)}
.rng__row--bad .rng__bar{background:var(--red);opacity:.8}
.rng__row--good .rng__lab{color:var(--ink);font-weight:600}
.rng__m{position:absolute;top:18px;left:var(--m);width:2px;height:32px;background:var(--ink)}
/* value sits above its bar, starting at the band but never past 50% so it can't run off the chart */
.rng__val{position:absolute;top:0;left:min(var(--a),50%);line-height:18px;font-family:var(--mono);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rng__axis{margin-left:var(--lw,150px);margin-top:8px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
@media (max-width:599px){.rng{--lw:100px}.rng__lab{font-size:12px}.rng__axis span:nth-child(even){visibility:hidden}}

/* Myth vs reality / before vs after split */
.g-vs{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.g-vs>div{padding:22px 24px;min-width:0}
.g-vs>div+div{border-left:1px solid var(--line)}
.g-vs__k{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.g-vs__k--bad{color:var(--red-ink)}
.g-vs__k--good{color:var(--good)}
.g-vs ul{margin:12px 0 0;padding-left:18px;display:grid;gap:8px;font-size:16px;line-height:1.45}
@media (max-width:699px){.g-vs{grid-template-columns:1fr}.g-vs>div+div{border-left:0;border-top:1px solid var(--line)}}

/* Custom inline SVG diagrams: use these classes so every palette works */
.g-svg{margin-top:28px}
.g-svg svg{width:100%;height:auto;overflow:visible}
.g-svg .s-ink{stroke:var(--ink);fill:none}
.g-svg .s-ink-f{fill:var(--ink)}
.g-svg .s-line{stroke:var(--line);fill:none}
.g-svg .s-mute{fill:var(--ink-2)}
.g-svg .s-good{stroke:var(--good);fill:none}
.g-svg .s-good-f{fill:var(--good)}
.g-svg .s-tint{fill:var(--good-tint)}
.g-svg .s-red{stroke:var(--red);fill:none}
.g-svg .s-red-f{fill:var(--red)}
.g-svg .s-blue{stroke:var(--blue);fill:none}
.g-svg .s-blue-f{fill:var(--blue)}
.g-svg .s-panel{fill:var(--panel)}
.g-svg text{font-family:var(--mono);font-size:12px;fill:var(--ink)}
.g-svg text.t-sans{font-family:var(--sans);font-size:14px;font-weight:600}
.g-svg text.t-mute{fill:var(--ink-2)}

/* Sources */
.g-src{margin-top:24px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink-2);list-style:none;padding:0;display:grid;gap:6px}
.g-src a{color:var(--ink-2);text-underline-offset:3px}

/* Guides hub cards */
.g-cards{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:20px}
.g-card{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;text-decoration:none;color:var(--ink);transition:border-color .15s ease}
.g-card:hover{border-color:var(--ink)}
.g-card__n{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.g-card__t{font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.g-card__d{font-size:15px;line-height:1.5;color:var(--ink-2)}
.g-card__go{margin-top:auto;font-family:var(--mono);font-size:13px;color:var(--blue)}

/* ---------- Calculator ---------- */
.calc{margin-top:8px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:var(--r);padding:clamp(20px,3vw,32px)}
.calc fieldset{border:0;margin:0;padding:0;min-width:0}
.calc fieldset+fieldset{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.calc legend{padding:0;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.calc__grid{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px 20px;align-items:end}
.calc label{display:grid;gap:8px;font-size:15px;line-height:1.35;color:var(--ink)}
.calc input{width:100%;min-width:0;padding:10px 12px;font:500 18px/1.2 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.calc input:hover{border-color:var(--ink-2)}
.calc input:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.calc__fix{display:grid;gap:4px;font-size:14px;color:var(--ink-2)}
.calc__fix b{font:600 18px/1.2 var(--mono);color:var(--ink)}
.calc__out{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
.calc__o{padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.calc__o output{display:block;font:600 clamp(22px,2.6vw,30px)/1.1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.calc__o--bad{border-color:var(--red)}
.calc__o--bad output{color:var(--red-ink)}
.calc__o--good{border-color:var(--good)}
.calc__o--good output{color:var(--good)}
.calc__o span{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.calc__bars{margin-top:24px;display:grid;gap:10px}
.calc__bar{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:12px;font-size:14px;color:var(--ink-2)}
.calc__track{display:block;height:20px}
.calc__track i{display:block;height:100%;width:var(--w,100%);min-width:4px;border-radius:var(--r);background:var(--red);opacity:.85;transition:width .2s ease}
.calc__bar--good .calc__track i{background:var(--good)}
.calc__math{margin-top:16px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink-2)}
.calc-vid{max-width:420px}
.calc-vid video{width:100%;height:auto;display:block}
@media (max-width:599px){.calc__bar{grid-template-columns:110px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.calc__track i{transition:none}}

/* Vertical clip player */
.calc-vid .vmedia{aspect-ratio:9/16}
.calc-vid{max-width:360px}