/* =================================================================
   Digital Snowstorm — Enterprise SEO ROI Calculator
   Bespoke components layered on top of /css/home.css tokens.
   3-step wizard, segmented model toggle, verdict gauge, gated
   business case, CAC/scenario bars, time chart, print styles.
   ================================================================= */

.calc{max-width:60rem;margin-inline:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:clamp(1.25rem,4vw,2.5rem);}
.btn-block{width:100%;}

/* ---- Page layout: let the hero glow fade into the body (no hard light/dark
   line) and tighten the vertical spacing between modules down the page. ---- */
.page-hero{overflow:visible;padding-bottom:clamp(1.25rem,3vw,2.25rem);}
/* The tool flow keeps its own tight single-column rhythm (home.css now makes
   pt-tight a no-op site-wide), so re-assert the compact top+bottom here. */
.section.pt-tight{padding-block:clamp(1.5rem,2.5vw,2.5rem);}
/* The forecasting-tool link sits symmetrically between the calculator and the
   next section: its top gap matches the next section's (pt-tight) top padding,
   and the calculator section's own bottom padding is removed. */
.section.pt-tight.calc-sec{padding-bottom:0;}
.tool-jump{text-align:center;margin-top:clamp(1.5rem,2.5vw,2.5rem);}

/* ---- Step header (pips + progress bar) ---- */
.calc-steps{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:var(--s5);flex-wrap:wrap;}
.pip{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .85rem .4rem .5rem;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03);color:var(--muted);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:color var(--dur),border-color var(--dur),background var(--dur);}
.pip .n{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:var(--fs-xs);font-weight:700;}
.pip.on{color:var(--ink);border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.08);}
.pip.on .n{background:var(--grad);color:#0A0A12;}
.pip.done{color:var(--ink);}
.pip.done .n{background:rgba(91,231,176,.18);color:var(--green);}
.calc-track{height:4px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:var(--s6);}
.calc-track #calc-bar{display:block;height:100%;width:0;background:var(--grad);transition:width var(--dur) var(--ease);}

/* ---- Steps ---- */
.calc-step{display:none;}
.calc-step.active{display:block;animation:cstep .3s var(--ease);}
@keyframes cstep{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.calc-step h2{font-size:1.4rem;margin-bottom:.25rem;}
.calc-step .step-sub{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--s5);}

/* ---- Segmented model toggle ---- */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.35rem;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;margin-bottom:var(--s5);}
.seg button{padding:.7rem 1rem;border:none;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:color var(--dur),background var(--dur);}
.seg button.on{background:var(--surface-2);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.05);}

/* Compact in-grid sub-toggle (B2B revenue type) */
.subseg-field{display:grid;gap:.4rem;align-content:start;}
.subseg-label{font-size:var(--fs-sm);font-weight:600;color:var(--ink);}
.seg.subseg{margin-bottom:0;}

/* ---- Input grid + captions + "use average" ---- */
.in-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);}
@media (max-width:620px){.in-grid{grid-template-columns:1fr;}}
.in-grid .full{grid-column:1/-1;}
.cap{font-size:var(--fs-xs);color:var(--faint);line-height:1.4;}
.cap .use{background:none;border:none;padding:0;margin-left:.35rem;color:var(--accent);font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.cap .use:hover{color:#CBD4FF;}
.in-money{position:relative;}
.in-money::before{content:"$";position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none;font-size:var(--fs-base);}
.in-money input{padding-left:1.7rem;}

/* Make [hidden] win over .field{display:grid} etc. so model-specific
   fields actually hide when not relevant to the selected business model. */
.calc [hidden]{display:none!important;}

/* ---- Number-field steppers (themed vertical control, no native spinners) ---- */
input[type="number"]{-moz-appearance:textfield;appearance:textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.stepper{position:relative;}
.stepper input[type="number"]{width:100%;padding-right:2.9rem;}
.step-btns{position:absolute;top:.4rem;right:.4rem;bottom:.4rem;width:1.9rem;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;}
.step-btn{flex:1;display:grid;place-items:center;width:100%;padding:0;border:0;background:var(--surface-2);color:var(--muted);cursor:pointer;transition:background var(--dur),color var(--dur);}
.step-btn:first-child{border-bottom:1px solid var(--line-2);}
.step-btn:hover{background:rgba(var(--accent-rgb),.2);color:var(--ink);}
.step-btn:active{background:rgba(var(--accent-rgb),.32);}
.step-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ---- Editable range readout (type the value or drag the slider) ---- */
.range-top{align-items:center;}
.range-num{width:auto;max-width:8rem;text-align:right;padding:.32rem .6rem;font:inherit;font-weight:700;font-size:var(--fs-lg);color:var(--cyan);background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;transition:border-color var(--dur),box-shadow var(--dur),color var(--dur);}
.range-num:hover{border-color:rgba(var(--accent-rgb),.45);}
.range-num:focus{outline:none;border-color:var(--blue);color:var(--ink);box-shadow:0 0 0 3px rgba(var(--focus-rgb),.25);}

/* ---- "Where do these numbers come from?" guide ---- */
.guide{margin-top:var(--s5);border:1px solid var(--line);border-radius:14px;background:var(--bg-2);overflow:hidden;}
.guide>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:.95rem 1.1rem;font-size:var(--fs-sm);font-weight:600;color:var(--ink);transition:background var(--dur);}
.guide>summary::-webkit-details-marker{display:none;}
.guide>summary:hover{background:rgba(255,255,255,.02);}
.guide-ico{width:18px;height:18px;flex:none;color:var(--accent);}
.guide-chev{margin-left:auto;width:16px;height:16px;flex:none;color:var(--muted);transition:transform var(--dur),color var(--dur);}
.guide:hover .guide-chev,.guide[open] .guide-chev{color:var(--accent);}
.guide[open] .guide-chev{transform:rotate(180deg);}
.guide-body{padding:.35rem .85rem .85rem;}
.guide-sec{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:var(--s5);}
.guide-sec+.guide-sec{margin-top:var(--s4);}
.guide-h{display:flex;align-items:center;gap:.55rem;font-size:.98rem;margin-bottom:.7rem;}
.guide-badge{flex:none;font-size:.62rem;font-weight:700;letter-spacing:.06em;padding:.22rem .45rem;border-radius:6px;background:var(--surface-2);color:var(--muted);}
.guide-badge.gsc{background:rgba(var(--accent-rgb),.16);color:var(--accent-2);}
.guide-badge.ga{background:rgba(var(--cyan-rgb),.16);color:var(--cyan);}
.guide-steps{margin:0;padding-left:1.25rem;color:var(--muted);font-size:var(--fs-sm);}
.guide-steps li{margin-block:.4rem;line-height:1.55;}
.guide-steps li::marker{color:var(--blue);font-weight:700;}
.guide-steps strong{color:var(--ink);font-weight:600;}
.guide-steps a{color:var(--accent);}

/* ---- Search Console regex builder ---- */
.rxb{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line);display:grid;gap:var(--s5);}
.rxb-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}
.rxb-row{display:grid;gap:.45rem;}
.rxb-row>label{font-size:var(--fs-xs);font-weight:600;color:var(--ink);}
.rxb-row>label span{color:var(--faint);font-weight:400;}
.rxb-row textarea{width:100%;padding:.55rem .7rem;font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:10px;resize:vertical;min-height:2.6rem;line-height:1.45;}
.rxb-row textarea::placeholder{color:var(--faint);}
.rxb-row textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(var(--focus-rgb),.25);}
.rxb-out{display:flex;align-items:center;gap:.5rem;background:rgba(var(--accent-rgb),.05);border:1px solid var(--line-2);border-radius:10px;padding:.4rem .4rem .4rem .6rem;}
.rxb-tag{flex:none;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.28rem .5rem;border-radius:6px;background:rgba(var(--accent-rgb),.16);color:var(--accent-2);}
.rxb-out code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-xs);color:var(--cyan);white-space:nowrap;overflow-x:auto;}
.rxb-out code.empty{color:var(--faint);font-style:italic;}
.rxb-copy{flex:none;padding:.35rem .7rem;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2);color:var(--muted);font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:color var(--dur),border-color var(--dur),background var(--dur);}
.rxb-copy:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.12);}
.rxb-copy.ok{color:var(--green);border-color:rgba(91,231,176,.5);background:rgba(91,231,176,.12);}
/* Mobile: drop the generated-regex output onto its own full-width line so it
   scrolls instead of being cramped/clipped beside the tag + Copy button. */
@media (max-width:560px){
  .guide-sec{padding:var(--s4);}
  .rxb-row textarea{max-width:100%;}
  .rxb-out{flex-wrap:wrap;}
  .rxb-out code{order:2;flex-basis:100%;width:100%;}
  .rxb-copy{margin-left:auto;}
}

.adv{margin-top:var(--s2);border:1px solid var(--line);border-radius:12px;background:var(--bg-2);overflow:hidden;}
.adv>summary{list-style:none;cursor:pointer;padding:.8rem 1rem;font-size:var(--fs-sm);font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:space-between;}
.adv>summary::-webkit-details-marker{display:none;}
.adv>summary::after{content:"+";color:var(--accent);font-weight:700;font-size:1.2rem;}
.adv[open]>summary::after{content:"-";}
.adv .adv-body{padding:0 1rem 1rem;}

/* ---- Wizard nav ---- */
.calc-nav{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s6);}
.calc-nav .spacer{margin-left:auto;}
/* Mobile: keep each nav button's label + arrow glyph on a single line (don't let
   the "<"/">" break onto its own row), and trim padding so Back + Next still fit. */
@media (max-width:560px){.calc-nav .btn{white-space:nowrap;padding-inline:1.1rem;}}

/* ---- Verdict card + gauge ---- */
.verdict{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:center;border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:var(--s5) var(--s6);margin-bottom:var(--s5);background:linear-gradient(180deg,var(--surface),var(--bg-2));}
@media (max-width:560px){.verdict{grid-template-columns:1fr;text-align:center;justify-items:center;}}
.verdict .gauge{width:180px;flex:none;}
.verdict .gauge svg{width:100%;height:auto;}
.verdict .v-tag{display:inline-block;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.3rem .7rem;border-radius:999px;margin-bottom:.5rem;}
.verdict h3{font-size:1.6rem;margin-bottom:.35rem;}
.verdict p{color:var(--muted);margin:0;font-size:var(--fs-base);}
.verdict.keep{border-color:rgba(91,231,176,.4);}
.verdict.keep .v-tag{background:rgba(91,231,176,.15);color:var(--green);}
.verdict.fix{border-color:rgba(255,212,121,.4);}
.verdict.fix .v-tag{background:rgba(255,212,121,.15);color:#FFD479;}
.verdict.replace{border-color:rgba(255,142,142,.4);}
.verdict.replace .v-tag{background:rgba(255,142,142,.15);color:#FF8E8E;}

/* hero result + secondary range line */
.result-range{font-size:var(--fs-xs);color:var(--faint);margin-top:.5rem;}

/* ---- Gate ---- */
.gate{border:1px dashed var(--line-2);border-radius:var(--radius-lg);padding:var(--s6);text-align:center;background:rgba(var(--accent-rgb),.04);margin-top:var(--s5);}
.gate .lock{width:44px;height:44px;margin:0 auto var(--s4);border-radius:12px;display:grid;place-items:center;color:#0A0A12;background:var(--grad);}
.gate .lock svg{width:22px;height:22px;}
.gate h3{font-size:1.3rem;margin-bottom:.4rem;}
.gate p{color:var(--muted);max-width:34rem;margin:0 auto var(--s5);font-size:var(--fs-sm);}
.gate-form{display:grid;gap:var(--s4);max-width:30rem;margin:0 auto;text-align:left;}
.gate-form .gf-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
@media (max-width:520px){.gate-form .gf-row{grid-template-columns:1fr;}}
/* Custom dropdown (matches the site's nav menus; replaces native <select>) */
.dd{position:relative;}
.dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.8rem 1rem;font:inherit;font-size:var(--fs-base);color:var(--ink);background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;cursor:pointer;text-align:left;transition:border-color var(--dur),box-shadow var(--dur);}
.dd-btn:hover{border-color:rgba(var(--accent-rgb),.45);}
.dd-btn[aria-expanded="true"]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(var(--focus-rgb),.25);}
.dd-btn .dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-btn .dd-val.placeholder{color:var(--faint);}
.dd-btn svg{width:16px;height:16px;flex:none;color:var(--muted);transition:transform var(--dur),color var(--dur);}
.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--accent);}
.dd-list{position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:30;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:.4rem;list-style:none;margin:0;max-height:15rem;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--dur),transform var(--dur),visibility var(--dur);}
.dd.open .dd-list{opacity:1;visibility:visible;transform:none;}
.dd-list li{padding:.62rem .8rem;border-radius:10px;color:var(--muted);font-size:var(--fs-sm);font-weight:500;cursor:pointer;}
.dd-list li:hover,.dd-list li.active{background:var(--surface-2);color:var(--ink);}
.dd-list li[aria-selected="true"]{color:var(--ink);font-weight:600;}

/* ---- Gated full business case ---- */
.full-head{display:flex;align-items:center;gap:.6rem;margin:var(--s7) 0 var(--s5);}
.full-head h3{font-size:1.3rem;}
.full-head::after{content:"";flex:1;height:1px;background:var(--line);}

.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);}
@media (max-width:760px){.metric-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:420px){.metric-grid{grid-template-columns:1fr;}}
.metric{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:var(--s5);}
.metric .ml{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);min-height:2.4em;line-height:1.3;}
.metric .mv{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:.35rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.metric .mn{font-size:var(--fs-xs);color:var(--faint);margin-top:.35rem;line-height:1.35;}

.split-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s5);}
@media (max-width:760px){.split-cards{grid-template-columns:1fr;}}
.panel-card{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:var(--s5) var(--s6);}
.panel-card h4{font-size:1.05rem;margin-bottom:var(--s4);}
.panel-card.wide{grid-column:1/-1;}

/* bars (CAC compare + scenario) */
.bar{margin-bottom:var(--s4);}
.bar:last-child{margin-bottom:0;}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);font-size:var(--fs-sm);color:var(--muted);margin-bottom:.4rem;}
.bar-top b{color:var(--ink);font-weight:700;}
.bar-top b.good{color:var(--green);}
.bar-track{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.bar-track i{display:block;height:100%;border-radius:999px;background:rgba(162,166,186,.5);transition:width var(--dur) var(--ease);}
.bar-track i.grad{background:var(--grad);}

/* rationale list */
.reasons{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;}
.reasons li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:var(--fs-sm);color:var(--muted);margin:0;}
/* Plain <strong> in the assumption/verdict notes should read like the surrounding copy,
   not stand out as bold white. Inline-coloured strongs (e.g. the reachability verdict,
   which carries meaning through its hue) keep their styling via the [style] exclusion. */
.reasons li strong:not([style]){font-weight:inherit;color:inherit;}
.reasons li::before{content:"";width:20px;height:20px;flex:none;margin-top:1px;border-radius:50%;}
.reasons li.ok::before{background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;}
.reasons li.no::before{background:#FF8E8E;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat;}

/* recommendation callout */
.rec{border:1px solid var(--line-2);border-left-width:4px;border-radius:14px;padding:var(--s5) var(--s6);margin-top:var(--s5);background:var(--bg-2);}
.rec .rl{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;}
.rec h4{font-size:1.15rem;margin:.3rem 0 .4rem;}
.rec p{color:var(--muted);margin:0 0 var(--s5);}
.rec.keep{border-left-color:var(--green);} .rec.keep .rl{color:var(--green);}
.rec.fix{border-left-color:#FFD479;} .rec.fix .rl{color:#FFD479;}
.rec.replace{border-left-color:#FF8E8E;} .rec.replace .rl{color:#FF8E8E;}
.rec .btn-row{margin-top:0;}

/* show the math */
.math{margin-top:var(--s5);border:1px solid var(--line);border-radius:12px;background:var(--bg-2);overflow:hidden;}
.math>summary{list-style:none;cursor:pointer;padding:.85rem 1.1rem;font-size:var(--fs-sm);font-weight:600;color:var(--accent);}
.math>summary::-webkit-details-marker{display:none;}
.math ol{margin:0;padding:0 1.4rem 1rem 2.2rem;color:var(--muted);font-size:var(--fs-sm);}
.math li{margin-block:.4rem;}
.math li::marker{color:var(--blue);}

.cite{font-size:var(--fs-xs);color:var(--faint);margin-top:var(--s2);}
#o-chart .chart{display:block;width:100%;height:auto;}

/* verdict explainer cards */
.kfr{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);}
@media (max-width:760px){.kfr{grid-template-columns:1fr;}}
.kfr .k{background:var(--surface);border:1px solid var(--line);border-top-width:3px;border-radius:var(--radius-lg);padding:var(--s6);}
.kfr .k h3{font-size:1.2rem;margin-bottom:.4rem;}
.kfr .k p{color:var(--muted);font-size:var(--fs-sm);margin:0;}
.kfr .keep{border-top-color:var(--green);} .kfr .fix{border-top-color:#FFD479;} .kfr .replace{border-top-color:#FF8E8E;}
.kfr .k .t{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;}
.kfr .keep .t{color:var(--green);} .kfr .fix .t{color:#FFD479;} .kfr .replace .t{color:#FF8E8E;}

/* ===================================================================
   Long-form SEO content (educational sections below the calculator)
   =================================================================== */
.prose-lead{color:var(--muted);font-size:var(--fs-base);line-height:1.7;max-width:48rem;margin:0 auto var(--s6);}
.csec.center .prose-lead{text-align:center;}

.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:var(--s4);}
.cgrid.two{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));}
.cgrid.three{grid-template-columns:repeat(3,1fr);}
@media (max-width:820px){.cgrid.three{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cgrid.three{grid-template-columns:1fr;}}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:var(--s5) var(--s6);}
.ccard .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--accent);background:rgba(var(--accent-rgb),.12);margin-bottom:.7rem;}
.ccard .ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ccard h3{font-size:1.02rem;margin-bottom:.35rem;}
.ccard p{color:var(--muted);font-size:var(--fs-sm);line-height:1.6;margin:0;}
.ccard.warn{border-left:3px solid #FFD479;}
.ccard .src{display:block;margin-top:.55rem;font-size:var(--fs-xs);color:var(--faint);}
.ccard .more{display:inline-block;margin-top:.7rem;font-size:var(--fs-sm);font-weight:600;color:var(--accent);}

.deflist{display:grid;grid-template-columns:max-content 1fr;align-items:start;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);}
.deflist dt,.deflist dd{margin:0;padding:var(--s4) var(--s5);border-top:1px solid var(--line);font-size:var(--fs-sm);}
.deflist dt{font-weight:600;color:var(--ink);white-space:nowrap;padding-right:var(--s4);}
.deflist dd{color:var(--muted);line-height:1.55;padding-left:var(--s4);}
.deflist dt:first-of-type,.deflist dd:first-of-type{border-top:0;}
@media (max-width:620px){
  .deflist{grid-template-columns:1fr;}
  .deflist dt{white-space:normal;padding-bottom:.1rem;padding-left:var(--s5);}
  .deflist dd{border-top:0;padding-top:.1rem;padding-left:var(--s5);}
  .deflist dt:first-of-type{border-top:0;}
}

.worked{background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line-2);border-radius:16px;padding:clamp(1.25rem,3vw,2rem);}
.worked .formula{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-sm);color:var(--cyan);background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:.7rem .9rem;overflow-x:auto;margin:.6rem 0 var(--s5);}
.worked ol{margin:0;padding-left:1.3rem;color:var(--muted);font-size:var(--fs-sm);}
.worked ol li{margin-block:.5rem;line-height:1.55;}
.worked ol li::marker{color:var(--blue);font-weight:700;}
.worked strong{color:var(--ink);font-weight:600;}
.worked .punch{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm);}
.worked .punch b{display:block;font-size:1.7rem;font-weight:700;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.2rem;}

/* How-to vertical timeline with scroll-reveal */
.timeline{position:relative;max-width:46rem;margin:0 auto;padding:var(--s4) 0;}
.timeline::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;background:var(--line-2);}
.tl-fill{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:0;background:var(--grad);transition:height .55s var(--ease);}
.tl-item{position:relative;display:grid;grid-template-columns:1fr 3.6rem 1fr;align-items:center;column-gap:var(--s5);height:7rem;}
.tl-node{grid-column:2;grid-row:1;justify-self:center;width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.3rem;color:#0A0A12;background:var(--grad);position:relative;z-index:2;opacity:.25;transform:scale(.7);transition:opacity .45s var(--ease),transform .45s var(--ease);box-shadow:0 0 0 6px var(--bg);}
.tl-item.in .tl-node{opacity:1;transform:scale(1);}
.tl-content{grid-row:1;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.tl-item.in .tl-content{opacity:1;transform:none;}
.tl-item:nth-of-type(odd) .tl-content{grid-column:3;text-align:left;}
.tl-item:nth-of-type(even) .tl-content{grid-column:1;text-align:right;}
.tl-content h3{font-size:1.3rem;margin-bottom:.35rem;}
.tl-content p{color:var(--muted);font-size:1.05rem;line-height:1.55;margin:0;}
@media (max-width:640px){
  /* Match the audits .phases look on mobile: 40px nodes top-aligned with the
     heading, natural spacing. (Desktop keeps the centered timeline.) */
  .timeline{max-width:54rem;}
  .timeline::before,.tl-fill{left:20px;}
  .tl-item{grid-template-columns:40px 1fr;column-gap:var(--s5);height:auto;min-height:0;align-items:start;padding-bottom:var(--s6);}
  .tl-item:last-of-type{padding-bottom:0;}
  .tl-node{grid-column:1;width:40px;height:40px;font-size:1rem;}
  .tl-item .tl-content{grid-column:2!important;text-align:left!important;padding-top:.2rem;}
  .tl-content h3{font-size:1.18rem;}
  .tl-content p{font-size:var(--fs-base);line-height:1.55;}
}

.csec .note{margin:var(--s6) auto 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.7;max-width:48rem;}
.csec.center .note{text-align:center;}
.csec.center .cgrid,.csec.center .metric-grid{text-align:left;}

/* ============================================================
   Print: a clean, branded business-case PDF (light + accents)
   ============================================================ */
@media print{
  @page{margin:0.6in;}
  /* Let the brand colours, gauge, chart, bars and icons actually print */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}

  /* Print-preview performance: the shared theme paints several layers that are
     ruinously slow to rasterise at print DPI — and a position:fixed layer is
     re-composited on EVERY printed page, so a long forecast multiplies the cost.
     Drop the full-page mix-blend "warmth" veil and strip all blur / backdrop /
     blend / animation so the preview renders in a beat instead of a minute. */
  html::after,.snow,.orb{display:none!important;}
  *{filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;mix-blend-mode:normal!important;animation:none!important;}

  .hdr,.ft,.cal-overlay,.snow,.orb,.calc-steps,.calc-track,.calc-nav,.gate,.seg,.guide,.csec,.tool-jump,.pno,
  .nav-toggle,.skip-link,.page-hero,.section.cta-section,#o-print,#o-cta,.rec .btn-row,.crumbs{display:none!important;}

  body{background:#fff!important;color:#1d2433!important;font-size:11pt;}
  body::before{display:none!important;}
  .section{padding-block:0!important;}
  .calc{border:none!important;padding:0!important;background:#fff!important;}
  .calc-step{display:none!important;}
  .calc-step[data-step="3"]{display:block!important;animation:none!important;}
  .calc-step[data-step="3"]>h2{font-size:21pt;color:#0B1220!important;margin-bottom:.15rem;}
  .calc-step[data-step="3"]>.step-sub{color:#5a6172!important;margin-bottom:.4in!important;}
  #o-gate{display:none!important;}
  #o-full{display:block!important;}

  /* Cards: white with a hairline border, no shadows */
  .verdict,.result-card,.metric,.panel-card,.rec,.math{background:#fff!important;border:1px solid #d7dbe3!important;box-shadow:none!important;border-radius:12px!important;}
  .full-head{margin:18pt 0 10pt!important;}
  .full-head h3{color:#0B1220!important;}
  .full-head::after{background:#d7dbe3!important;}
  .panel-card h4{color:#0B1220!important;}

  /* Verdict block */
  .verdict h3{color:#0B1220!important;}
  .verdict p,.rec p{color:#3a4150!important;}
  .verdict .gauge svg text{fill:#0B1220!important;}   /* gauge labels legible on white */
  .chart text{fill:#3a4150!important;}                /* chart data labels legible on white paper */
  .v-tag,.rl{color:#0B1220!important;}                /* readable on the light tint */

  /* Headline + metric numbers (gradients can't print -> solid brand/ink) */
  .result-label,.result-range{color:#5a6172!important;}
  .result-big{-webkit-text-fill-color:#2f63e0!important;color:#2f63e0!important;background:none!important;}
  .metric .mv{-webkit-text-fill-color:#0B1220!important;color:#0B1220!important;background:none!important;}
  .metric .ml{color:#5a6172!important;}
  .metric .mn,.cite,.form-note{color:#6b7280!important;}

  /* Result rows: tidy ledger style */
  .result-row{display:flex!important;justify-content:space-between!important;gap:1.25rem;align-items:baseline;padding:.4rem 0!important;border-bottom:1px solid #eceef2!important;}
  .result-card .result-row:last-child,.panel-card .result-row:last-child{border-bottom:0!important;}
  .result-row>span:first-child{color:#3a4150!important;}
  .result-row .val{color:#0B1220!important;font-weight:700;}

  /* CAC / scenario bars keep their fills */
  .bar-top{color:#3a4150!important;}
  .bar-top b{color:#0B1220!important;}
  .bar-track{background:#eef1f6!important;}

  /* "How the verdict was scored": print-safe check / cross marks */
  .reasons li{color:#3a4150!important;}
  .reasons li::before{-webkit-mask:none!important;mask:none!important;background:none!important;width:1.1em!important;height:auto!important;border-radius:0!important;margin-top:0!important;font-weight:800;text-align:center;}
  .reasons li.ok::before{content:"\2713";color:#15935f!important;}
  .reasons li.no::before{content:"\2717";color:#cf3b34!important;}

  /* Layout: 2x2 metrics, stacked panels, keep each whole */
  .metric-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10pt!important;}
  .split-cards{display:block!important;}
  .metric,.panel-card,.verdict,.result-card,.rec,.full-head{break-inside:avoid;page-break-inside:avoid;}
  .panel-card,.result-card,.rec{margin-bottom:12pt!important;}
  .chart{max-width:100%!important;height:auto!important;}

  /* "Show the math" expanded inline (no forced blank page); may break naturally */
  .panel-card:has(.math){break-inside:auto!important;}
  .math{break-inside:auto;margin-top:12pt!important;border:none!important;background:none!important;}
  .math>summary{display:none!important;}
  .math::before{content:"How the Numbers Were Calculated";display:block;font-weight:700;font-size:12pt;color:#0B1220;margin:0 0 .45rem;}
  .math ol{display:block!important;color:#3a4150!important;padding:0 0 0 1.4rem;}
  .math li::marker{color:#2f63e0!important;}
  .math li{margin-block:.3rem;}

  a[href]::after{content:"";}
}

/* Light theme overrides (variable palette lives in home.css) */
html:is([data-theme="light"],[data-theme="evening"]) .pip{background:rgba(17,24,52,.03);}
html:is([data-theme="light"],[data-theme="evening"]) .seg button.on{box-shadow:0 1px 0 rgba(17,24,52,.04);}
html:is([data-theme="light"],[data-theme="evening"]) .guide>summary:hover{background:rgba(17,24,52,.03);}
html:is([data-theme="light"],[data-theme="evening"]) .pip.on .n,html:is([data-theme="light"],[data-theme="evening"]) .gate .lock,html:is([data-theme="light"],[data-theme="evening"]) .tl-node{color:#fff;}