/* =========================================================================
   SimpleHome — sh.css  ·  "Construction Intelligence" design system (v1)
   Blue / navy. Powers landing, planner wizard and results dashboard.
   ========================================================================= */
:root{
  --ink:#0B1020; --ink-2:#283248; --muted:#5B6472; --faint:#97A0AF;
  --paper:#FFFFFF; --soft:#F6F8FC; --surface:#FFFFFF; --surface-2:#F2F5FA; --line:#E7ECF3; --line-2:#DCE3ED;
  --blue:#2563EB; --blue-2:#3B82F6; --blue-3:#60A5FA; --blue-pale:#EAF1FF; --blue-ink:#1E40AF;
  --navy-1:#0A1330; --navy-2:#0E1C44; --glow:#3B82F6;
  --save:#0E9F6E; --save-pale:#E6F6EF; --amber:#F59E0B; --risk:#E0820B; --risk-pale:#FCF3E4; --danger:#DC2626;
  --c1:#2563EB; --c2:#60A5FA; --c3:#0E9F6E; --c4:#38BDF8; --c5:#F59E0B; --c6:#9AA6B6;
  --r-card:16px; --r-ctl:11px; --r-pill:999px;
  --shadow:0 1px 2px rgba(11,16,32,.04), 0 14px 34px -18px rgba(11,16,32,.18);
  --shadow-lg:0 30px 70px -28px rgba(11,16,32,.32);
  --shadow-blue:0 22px 48px -20px rgba(37,99,235,.5);
  --display:"Inter Tight","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased; scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.55; letter-spacing:-0.01em; overflow-x:hidden;}
.num{font-family:var(--mono); font-feature-settings:"tnum" 1; letter-spacing:-0.02em;}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
a{color:inherit;}
img{max-width:100%;}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600; font-size:14.5px; padding:11px 18px; border-radius:var(--r-ctl); border:1px solid transparent; cursor:pointer; transition:.16s; text-decoration:none; white-space:nowrap;}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 10px 22px -10px var(--blue);}
.btn-primary:hover{background:var(--blue-ink); transform:translateY(-1px);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--blue-2); color:var(--blue);}
.btn-light{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.18);}
.btn-light:hover{background:rgba(255,255,255,.2);}
.btn-wa{background:#25D366; color:#fff;}
.btn-lg{padding:15px 24px; font-size:15.5px; border-radius:13px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---- nav ---- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:blur(16px) saturate(170%); border-bottom:1px solid var(--line);}
.nav-in{max-width:1240px; margin:0 auto; padding:13px 28px; display:flex; align-items:center; gap:26px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand-logo{height:46px; width:auto; display:block;}
.foot .brand-logo{height:50px;}
.brand .mark{width:38px; height:38px; border-radius:11px; background:linear-gradient(140deg,var(--blue),var(--blue-2)); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -7px var(--blue); flex:none;}
.brand .mark svg{width:21px; height:21px;}
.brand .bn{display:block; font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-0.035em; line-height:1;}
.brand .bn .b2{color:var(--blue);}
.brand .tag{display:block; font-size:10.5px; color:var(--faint); font-weight:500; margin-top:3px;}
.nav-links{display:flex; gap:3px; margin-left:18px; align-items:center;}
.nav-links a{color:var(--ink-2); text-decoration:none; font-weight:500; font-size:14.5px; padding:9px 12px; border-radius:9px; transition:.15s; white-space:nowrap;}
.nav-links a:hover{background:var(--surface-2); color:var(--ink);}
.nav-links a.on{background:var(--blue-pale); color:var(--blue);}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:11px;}
.loc{display:flex; align-items:center; gap:7px; border:1px solid var(--line-2); border-radius:var(--r-ctl); padding:9px 14px; font-weight:500; font-size:14px; cursor:pointer; background:var(--surface); white-space:nowrap;}
.loc svg{width:15px; height:15px; color:var(--blue);}
.nav-toggle{display:none; margin-left:auto; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:9px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink-2); border-radius:2px; transition:.2s;}

/* ---- landing hero ---- */
.hero{display:grid; grid-template-columns:1.02fr 1fr; gap:48px; align-items:center; padding:64px 0 56px;}
.pill{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--save); background:var(--save-pale); padding:7px 14px; border-radius:var(--r-pill);}
.pill svg{width:15px; height:15px;}
h1.h1{font-family:var(--display); font-weight:800; font-size:clamp(40px,5.6vw,62px); letter-spacing:-0.045em; line-height:1; margin:22px 0 0;}
h1.h1 .g{color:var(--blue);}
.lede{color:var(--muted); font-size:17px; line-height:1.6; margin:20px 0 0; max-width:520px;}
.hero-cta{display:flex; gap:13px; margin-top:30px; flex-wrap:wrap;}
.trust{display:flex; gap:26px; margin-top:34px; flex-wrap:wrap;}
.trust .t{display:flex; align-items:center; gap:10px;}
.trust .ic{width:34px; height:34px; border-radius:9px; background:var(--blue-pale); display:flex; align-items:center; justify-content:center; flex:none;}
.trust .ic svg{width:17px; height:17px; color:var(--blue);}
.trust b{display:block; font-size:13.5px; font-weight:600;}
.trust span{font-size:12px; color:var(--faint);}
.hero-img{position:relative; align-self:stretch;}
.hero-img > img{width:100%; height:100%; min-height:460px; object-fit:cover; border-radius:24px; display:block; box-shadow:var(--shadow-lg); border:1px solid rgba(11,16,32,.06);}
.cost-card{position:absolute; z-index:2; left:20px; bottom:-30px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:22px 24px; max-width:350px;}
.cost-card .ch{font-size:13.5px; color:var(--muted);}
.cost-card .cs{font-size:12.5px; color:var(--faint); margin-top:2px;}
.cost-row{display:flex; align-items:flex-end; justify-content:space-between; margin-top:14px; gap:14px;}
.cost-val{font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-0.04em; color:var(--blue); line-height:1;}
.cost-sqft{font-family:var(--mono); font-size:13px; color:var(--ink-2); margin-top:6px;}
.spark{flex:none; width:120px;}
.spark svg{width:120px; height:54px; display:block;}
.spark .chip{display:inline-block; font-size:11px; font-weight:700; color:var(--save); background:var(--save-pale); padding:2px 8px; border-radius:var(--r-pill); margin-top:4px;}
.cost-card .cc2{position:absolute; z-index:1; right:-26px; top:-26px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:13px 16px; transform:rotate(2deg);}
.cc2 .k{font-size:11px; color:var(--faint);} .cc2 .v{font-family:var(--display); font-weight:800; font-size:17px;}

/* ---- explorer bar ---- */
.explorer{background:linear-gradient(150deg,var(--navy-1),var(--navy-2)); border-radius:20px; padding:24px 26px; box-shadow:var(--shadow-blue); margin-top:30px; position:relative; overflow:hidden;}
.explorer::after{content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; background:radial-gradient(circle,rgba(59,130,246,.4),transparent 65%);}
.explorer h3{font-family:var(--display); font-weight:700; color:#fff; font-size:18px; margin:0 0 16px; position:relative; z-index:1;}
.exp-row{display:grid; grid-template-columns:repeat(4,1fr) auto; gap:12px; position:relative; z-index:1;}
.field-dk{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:8px 14px;}
.field-dk .fk{font-size:11px; color:rgba(255,255,255,.55);}
.field-dk select, .field-dk input{width:100%; background:transparent; border:none; color:#fff; font-family:var(--body); font-weight:600; font-size:14.5px; margin-top:2px; outline:none; cursor:pointer;}
.field-dk select option{color:var(--ink);}
.popular{position:relative; z-index:1; margin-top:14px; font-size:13px; color:rgba(255,255,255,.55); display:flex; gap:9px; flex-wrap:wrap; align-items:center;}
.popular a{color:rgba(255,255,255,.85); text-decoration:none; border:1px solid rgba(255,255,255,.16); padding:4px 11px; border-radius:var(--r-pill); font-size:12.5px; cursor:pointer;}
.popular a:hover{background:rgba(255,255,255,.1);}

/* ---- stats ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px;}
.stat{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px;}
.stat .ic{width:42px;height:42px;border-radius:11px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;flex:none;}
.stat .ic svg{width:21px;height:21px;color:var(--blue);}
.stat b{font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-0.03em; display:block;}
.stat span{font-size:12.5px; color:var(--muted);}

/* ---- sections / features ---- */
.section{padding:74px 0;}
.sec-head{text-align:center; margin-bottom:42px;}
.sec-head h2{font-family:var(--display); font-weight:800; font-size:clamp(28px,3.6vw,38px); letter-spacing:-0.035em; margin:0;}
.sec-head p{color:var(--muted); font-size:16px; margin:10px 0 0;}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.feature{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:24px; transition:.18s; text-decoration:none; color:inherit; display:block;}
.feature:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2);}
.feature .ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.feature .ic svg{width:23px;height:23px;}
.feature h3{font-family:var(--display); font-weight:700; font-size:17px; margin:0 0 6px; letter-spacing:-0.02em;}
.feature p{color:var(--muted); font-size:14px; margin:0 0 14px; line-height:1.55;}
.feature .lnk{color:var(--blue); font-weight:600; font-size:14px;}
.ic-blue{background:var(--blue-pale);} .ic-blue svg{color:var(--blue);}
.ic-green{background:var(--save-pale);} .ic-green svg{color:var(--save);}
.ic-amber{background:#FEF3E2;} .ic-amber svg{color:var(--amber);}
.ic-sky{background:#E5F4FE;} .ic-sky svg{color:#0EA5E9;}
.ic-rose{background:#FCEEF1;} .ic-rose svg{color:#E11D6B;}
.ic-violet{background:#EEEAFB;} .ic-violet svg{color:#7C3AED;}

/* ---- report teaser ---- */
.report{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; background:var(--soft); border-radius:26px; padding:48px; border:1px solid var(--line);}
.report .pill{margin-bottom:16px;}
.report h2{font-family:var(--display); font-weight:800; font-size:clamp(26px,3.2vw,34px); letter-spacing:-0.035em; margin:0 0 14px; line-height:1.08;}
.report .rl{color:var(--muted); font-size:15.5px; margin:0 0 20px; line-height:1.6;}
.checks{display:flex; flex-direction:column; gap:13px; margin-bottom:26px;}
.check{display:flex; gap:11px; align-items:center; font-size:14.5px;}
.check .ck{width:22px;height:22px;border-radius:50%;background:var(--save);display:flex;align-items:center;justify-content:center;flex:none;}
.check .ck svg{width:13px;height:13px;color:#fff;}
.report-cta{display:flex; gap:12px; flex-wrap:wrap;}
.report-preview{position:relative;}
.rep-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:22px;}
.rep-card .rtag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--save);background:var(--save-pale);padding:4px 10px;border-radius:var(--r-pill);}
.rep-top{margin-top:14px;}
.rep-top .rt{font-size:12px;color:var(--faint);}
.rep-top .rv{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-0.03em;color:var(--blue);}
.rep-top .rl2{font-size:11.5px;color:var(--faint);}
.rep-body{display:grid;grid-template-columns:1fr 130px;gap:20px;margin-top:18px;align-items:center;}
.breakdown{display:flex;flex-direction:column;gap:9px;}
.bd-row{display:grid;grid-template-columns:14px 1fr auto auto;gap:9px;align-items:center;font-size:12.5px;}
.bd-row .sw{width:9px;height:9px;border-radius:2px;}
.bd-row .bp{color:var(--faint);} .bd-row .ba{font-family:var(--mono);color:var(--ink-2);}
.rep-donut{position:relative;width:130px;height:130px;}
.rep-donut svg{width:130px;height:130px;transform:rotate(-90deg);}
.rep-donut .dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.rep-donut .dc b{font-family:var(--display);font-weight:800;font-size:14px;}
.rep-donut .dc span{font-size:9px;color:var(--faint);}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line); background:var(--soft);}
.foot-in{max-width:1240px; margin:0 auto; padding:44px 28px 30px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px;}
.foot-col h4{font-family:var(--display); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin:0 0 12px;}
.foot-col a{display:block; color:var(--ink-2); text-decoration:none; font-size:14px; margin-bottom:9px;}
.foot-col a:hover{color:var(--blue);}
.foot-col p{color:var(--muted); font-size:13.5px; line-height:1.55; max-width:260px; margin:10px 0 0;}
.foot-bottom{border-top:1px solid var(--line); text-align:center; padding:18px; color:var(--faint); font-size:12.5px;}
.sh-toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px); background:var(--ink); color:#fff; font-size:13.5px; font-weight:500; padding:11px 18px; border-radius:var(--r-pill); box-shadow:var(--shadow); z-index:200; opacity:0; transition:.22s; pointer-events:none; max-width:90vw; text-align:center;}
.sh-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* =========================================================================
   PLANNER WIZARD
   ========================================================================= */
.wz{max-width:1140px; margin:0 auto; padding:30px 28px 70px;}
.wz-progress{display:flex; align-items:center; gap:0; margin:8px 0 30px;}
.wz-progress .pstep{display:flex; align-items:center; flex:1;}
.wz-progress .pstep:last-child{flex:none;}
.wz-progress .pd{width:30px; height:30px; border-radius:50%; background:var(--surface); border:2px solid var(--line-2); color:var(--faint); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; transition:.2s;}
.wz-progress .pl{flex:1; height:2px; background:var(--line-2); margin:0 8px; transition:.3s;}
.wz-progress .pstep.done .pd{background:var(--blue); border-color:var(--blue); color:#fff;}
.wz-progress .pstep.active .pd{background:#fff; border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 4px var(--blue-pale);}
.wz-progress .pstep.done .pl{background:var(--blue);}
.wz-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:30px; align-items:start;}
.wz-main{background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:38px; min-height:420px;}
.wz-step-no{font-size:13px; font-weight:600; color:var(--blue); text-transform:uppercase; letter-spacing:.05em;}
.wz-q{font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,32px); letter-spacing:-0.035em; margin:8px 0 6px; line-height:1.1;}
.wz-help{color:var(--muted); font-size:15px; margin:0 0 26px;}
.wz-nav{display:flex; justify-content:space-between; gap:12px; margin-top:34px;}
.field{margin-bottom:20px;}
.field > label{display:block; font-weight:600; font-size:14px; margin-bottom:9px;}
.field .hint{font-size:12.5px; color:var(--faint); margin-top:8px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.sel, .inp{width:100%; padding:13px 14px; border:1.5px solid var(--line-2); border-radius:var(--r-ctl); font-family:var(--body); font-size:15px; background:var(--surface); color:var(--ink); outline:none; transition:.15s;}
.sel:focus, .inp:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-pale);}
.range{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:var(--r-pill); outline:none; margin:6px 0 4px;
  background:linear-gradient(90deg,var(--blue) 0 var(--pct,50%), var(--line-2) var(--pct,50%) 100%);}
.range::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:none; box-shadow:0 2px 8px rgba(37,99,235,.4), 0 0 0 5px rgba(37,99,235,.18); cursor:pointer;}
.range::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#fff; border:none; box-shadow:0 2px 8px rgba(37,99,235,.4); cursor:pointer;}
.range-scale{display:flex; justify-content:space-between; font-size:11.5px; color:var(--faint); font-family:var(--mono);}
.big-num{font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-0.03em; text-align:center; margin-bottom:6px;}
.big-num span{color:var(--blue);}
.big-num-in{font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-0.03em; color:var(--blue); width:5.2em; text-align:right; border:none; border-bottom:2px solid var(--line-2); background:transparent; outline:none; padding:0 4px;}
.big-num-in:focus{border-bottom-color:var(--blue);}
.big-num-in::-webkit-outer-spin-button,.big-num-in::-webkit-inner-spin-button{opacity:.4;}
.big-num-u{font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-0.03em; color:var(--ink);}
.seg{display:grid; gap:10px;}
.seg-2{grid-template-columns:1fr 1fr;}
.seg-flow{display:flex; flex-wrap:wrap; gap:10px;}
.seg-btn{background:var(--surface); border:1.5px solid var(--line-2); border-radius:12px; padding:14px 16px; font:inherit; font-weight:600; font-size:14.5px; cursor:pointer; text-align:left; transition:.15s; color:var(--ink-2);}
.seg-btn:hover{border-color:var(--blue-2);}
.seg-btn.on{border-color:var(--blue); background:var(--blue-pale); color:var(--blue-ink); box-shadow:0 0 0 3px rgba(37,99,235,.08);}
.seg-btn .sb-t{display:block; font-family:var(--display);}
.seg-btn .sb-d{display:block; font-weight:500; font-size:12px; color:var(--muted); margin-top:2px;}
.seg-btn.on .sb-d{color:var(--blue);}
.chip-row{display:flex; flex-wrap:wrap; gap:9px;}
.chip-btn{background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:var(--r-pill); padding:8px 16px; font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; transition:.15s;}
.chip-btn.on{border-color:var(--blue); background:var(--blue-pale); color:var(--blue-ink);}

/* wizard live rail */
.wz-rail{position:sticky; top:88px; background:linear-gradient(150deg,var(--navy-1),var(--navy-2)); color:#fff; border-radius:20px; padding:26px; box-shadow:var(--shadow-blue); overflow:hidden;}
.wz-rail::after{content:""; position:absolute; right:-50px; top:-50px; width:200px; height:200px; background:radial-gradient(circle,rgba(59,130,246,.4),transparent 65%);}
.wz-rail .rk{font-size:12.5px; color:rgba(255,255,255,.6); position:relative; z-index:1;}
.wz-rail .rv{font-family:var(--display); font-weight:800; font-size:40px; letter-spacing:-0.04em; line-height:1; margin:6px 0 4px; position:relative; z-index:1;}
.wz-rail .rs{font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.7); position:relative; z-index:1;}
.wz-rail .rform{height:6px; border-radius:var(--r-pill); background:rgba(255,255,255,.14); margin:18px 0 6px; overflow:hidden; position:relative; z-index:1;}
.wz-rail .rform i{display:block; height:100%; background:linear-gradient(90deg,var(--blue-2),#93c5fd); border-radius:var(--r-pill); transition:.4s;}
.wz-rail .rforml{font-size:11.5px; color:rgba(255,255,255,.55); position:relative; z-index:1;}
.wz-rail .rmini{position:relative; z-index:1; margin-top:20px; display:flex; flex-direction:column; gap:11px;}
.wz-rail .rmini .rrow{display:flex; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.8); border-top:1px solid rgba(255,255,255,.1); padding-top:11px;}
.wz-rail .rmini .rrow b{font-family:var(--mono); font-weight:600; color:#fff;}

/* =========================================================================
   RESULTS DASHBOARD
   ========================================================================= */
.dash{max-width:1180px; margin:0 auto; padding:34px 28px 90px;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--blue); background:var(--blue-pale); padding:6px 13px; border-radius:var(--r-pill);}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--save);box-shadow:0 0 0 3px var(--save-pale);}
.dash h1{font-family:var(--display); font-weight:800; font-size:clamp(28px,4.2vw,42px); letter-spacing:-0.04em; margin:16px 0 6px; line-height:1.04;}
.dash .sub{color:var(--muted); font-size:15px; max-width:600px;}
.grid{display:grid; gap:18px; margin-top:18px;}
.g-2{grid-template-columns:1fr 1fr;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow); padding:24px;}
.card-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.card-h h3{font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-0.02em; margin:0;}
.card-h .meta{font-size:12px; color:var(--faint);}
.hero-d{margin-top:28px; border-radius:22px; padding:34px 36px; color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(120% 160% at 85% -20%, rgba(59,130,246,.55), transparent 55%), linear-gradient(150deg,var(--navy-1),var(--navy-2)); box-shadow:var(--shadow-blue);}
.hero-d::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px); mask:linear-gradient(180deg,#000,transparent 70%);}
.hero-d .htop{display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; margin-bottom:22px;}
.hero-d .htag{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#cfe0ff; background:rgba(99,140,255,.16); border:1px solid rgba(120,160,255,.25); padding:6px 13px; border-radius:var(--r-pill);}
.hero-d .htag .dot{width:6px;height:6px;border-radius:50%; background:#5eead4; box-shadow:0 0 0 3px rgba(94,234,212,.25);}
.hero-d .hid{font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.5);}
.hero-d .hmain{position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.hero-d .lbl{font-size:13px; color:rgba(255,255,255,.6);}
.hero-d .tval{font-family:var(--display); font-weight:800; font-size:clamp(42px,6.8vw,66px); letter-spacing:-0.045em; line-height:.98; margin:6px 0 0;}
.bandb{min-width:280px; flex:1; max-width:380px;}
.bandb .bar{height:8px; border-radius:var(--r-pill); background:rgba(255,255,255,.12); position:relative; overflow:hidden;}
.bandb .fill{position:absolute; top:0; bottom:0; left:16%; right:22%; background:linear-gradient(90deg,var(--blue-2),#93c5fd); border-radius:var(--r-pill);}
.bandb .mk{position:absolute; top:-3px; height:14px; width:2px; background:#fff; left:50%; border-radius:2px;}
.bandb .cap{display:flex; justify-content:space-between; font-size:11.5px; color:rgba(255,255,255,.6); margin-top:8px;}
.hstats{position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,1fr); gap:1px; margin:26px 0 0; background:rgba(255,255,255,.09); border-radius:14px; overflow:hidden;}
.hstat{background:rgba(255,255,255,.03); padding:14px 16px;}
.hstat .k{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.5);}
.hstat .v{font-family:var(--display); font-weight:700; font-size:17px; margin-top:5px; letter-spacing:-0.02em;}
.dactions{position:relative; z-index:1; display:flex; gap:9px; margin-top:24px; flex-wrap:wrap;}
.btn-white{background:#fff; color:var(--ink);} .btn-white:hover{transform:translateY(-1px);}
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:11px;}
.tier{position:relative; text-align:left; background:var(--surface); border:1.5px solid var(--line-2); border-radius:13px; padding:15px; cursor:pointer; transition:.16s; font:inherit;}
.tier:hover{border-color:var(--blue-2); transform:translateY(-2px);}
.tier.on{border-color:var(--blue); background:var(--blue-pale); box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.tier .tn{display:block; font-family:var(--display); font-weight:700; font-size:14px;}
.tier .tv{display:block; font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-0.03em; margin-top:4px; white-space:nowrap;}
.tier .tr{display:block; font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap;}
.tier .flag{position:absolute; top:-9px; right:11px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:var(--blue); padding:3px 9px; border-radius:var(--r-pill);}
.donut-row{display:flex; gap:24px; align-items:center; flex-wrap:wrap;}
.donut-host{position:relative; width:176px; height:176px; flex:none;}
.donut-host svg{width:176px; height:176px; transform:rotate(-90deg);}
.donut-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.donut-c b{font-family:var(--display); font-weight:800; font-size:28px; letter-spacing:-0.03em;}
.donut-c span{font-size:11.5px; color:var(--muted);}
.legend{flex:1; min-width:170px; display:flex; flex-direction:column; gap:10px; padding:0; margin:0;}
.legend li{display:flex; align-items:center; gap:10px; font-size:13.5px; list-style:none;}
.legend .sw{width:10px; height:10px; border-radius:3px; flex:none;}
.legend .lv{margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--muted);}
.mats{display:grid; grid-template-columns:repeat(5,1fr); gap:11px;}
.mat{background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:15px;}
.mat .ic{width:34px; height:34px; border-radius:9px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:11px;}
.mat .ic svg{width:18px; height:18px; color:var(--blue);}
.mat .mn{font-size:12px; color:var(--muted);}
.mat .mv{font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-0.03em; margin-top:2px;}
.mat .mu{font-size:11px; color:var(--faint);}
.mat .mbar{height:4px; background:var(--line); border-radius:9px; margin-top:11px; overflow:hidden;}
.mat .mbar i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--blue-3)); border-radius:9px;}
.journey{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; position:relative;}
.jline{position:absolute; top:13px; left:0; right:0; height:2px; background:var(--line-2);}
.jline i{display:block; height:100%; width:40%; background:linear-gradient(90deg,var(--blue),var(--save)); border-radius:2px;}
.jstep{position:relative; text-align:center; padding-top:36px; cursor:pointer; border-radius:11px; padding-bottom:8px; transition:background .15s;}
.jstep:hover{background:var(--surface-2);}
.jstep:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.jstep.sel{background:var(--blue-pale);}
.jdetail{display:none; gap:18px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}
.jdetail.show{display:flex;}
.jd-img{flex:none; width:190px; height:125px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; position:relative;}
.jd-img img{width:100%; height:100%; object-fit:cover; display:block;}
.jd-ph{display:none; position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--faint); font-size:11.5px; border:1px dashed var(--line-2); border-radius:12px;}
.jd-img.noimg .jd-ph{display:flex;}
.jd-img svg{width:26px; height:26px;}
.jd-body{flex:1; min-width:0;}
.jd-h{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-bottom:7px;}
.jd-h b{font-family:var(--display); font-weight:700; font-size:16px;}
.jd-h span{font-family:var(--mono); font-size:12.5px; color:var(--muted);}
.jd-body p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.6;}
.jdot{position:absolute; top:5px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; background:#fff; border:2.5px solid var(--line-2); z-index:1;}
.jstep.done .jdot{background:var(--blue); border-color:var(--blue);}
.jstep.active .jdot{background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-pale);}
.jstep .jn{display:block; font-weight:600; font-size:12.5px;}
.jstep .jm{display:block; font-size:11px; color:var(--faint);}
.jstep .jc{display:block; font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:2px; white-space:nowrap;}
.area-host svg{width:100%; height:auto; display:block;}
.area-x{display:flex; justify-content:space-between; font-size:11px; color:var(--faint); margin-top:6px; font-family:var(--mono);}
.inf-cap{display:flex; gap:12px; margin-top:14px;}
.inf-cap > div{flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:11px 13px;}
.inf-cap span{font-size:11.5px; color:var(--muted);}
.inf-cap b{display:block; font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-0.03em; margin-top:2px;}
.flags{display:flex; flex-direction:column; gap:13px;}
.flag{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.5;}
.flag .fi{flex:none; width:27px; height:27px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;}
.fi.warn{background:var(--risk-pale); color:var(--risk);}
.fi.good{background:var(--save-pale); color:var(--save);}
.flag b{font-weight:600;}
.gauge-row{display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
.gauge{position:relative; width:166px; height:100px; flex:none;}
.gauge svg{width:166px; height:100px;}
.gauge .gv{position:absolute; bottom:0; left:0; right:0; text-align:center;}
.gauge .gv b{font-family:var(--display); font-weight:800; font-size:32px; letter-spacing:-0.03em;}
.gauge .gv span{display:block; font-size:11px; color:var(--muted); margin-top:-3px;}
.emi-block{flex:1; min-width:200px;}
.emi-block .el{font-size:12.5px; color:var(--muted);}
.emi-block .ev{font-family:var(--display); font-weight:800; font-size:32px; letter-spacing:-0.03em;}
.emi-block .em{font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:7px;}
.emi-block .elink{display:inline-block; margin-top:11px; color:var(--blue); font-weight:600; font-size:13px; text-decoration:none;}
.dash-foot{text-align:center; color:var(--faint); font-size:12.5px; margin-top:34px;}
.dash-foot b{color:var(--muted); font-weight:600;}

.reveal{opacity:0; transform:translateY(14px); animation:rise .6s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes rise{to{opacity:1; transform:none;}}
.dash.instant .reveal{opacity:1; transform:none; animation:none;}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:980px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav.is-open .nav-links{display:flex; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:2px; padding:12px 18px 16px; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow); margin:0;}
  .nav.is-open .nav-links a{padding:12px;}
  .hero{grid-template-columns:1fr; gap:30px; padding:40px 0 10px;}
  .exp-row{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .features{grid-template-columns:1fr 1fr;}
  .report{grid-template-columns:1fr; padding:32px;}
  .g-2{grid-template-columns:1fr;}
  .hero-d{padding:26px 20px;}
  .hstats{grid-template-columns:repeat(3,1fr);}
  .mats{grid-template-columns:repeat(2,1fr);}
  .tiers{grid-template-columns:repeat(2,1fr);}
  .journey{grid-template-columns:repeat(3,1fr); gap:20px 8px;} .jline{display:none;}
  .jdetail{flex-direction:column;} .jd-img{width:100%;}
  .wz-grid{grid-template-columns:1fr;}
  .wz-rail{position:static;}
  .foot-in{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .features{grid-template-columns:1fr;}
  .exp-row{grid-template-columns:1fr;}
  .cost-card .cc2{display:none;}
  .hero-img > img{min-height:300px;}
  .cost-card{left:12px; right:12px; max-width:none; bottom:-22px; padding:18px 20px;}
  .hstats{grid-template-columns:repeat(2,1fr);}
  .hero-d .tval{font-size:44px;}
  .wz-main{padding:24px 20px;}
  .row2{grid-template-columns:1fr;}
  .foot-in{grid-template-columns:1fr;}
  .wz{padding:20px 16px 60px;}
  .wz-progress .pd{width:24px; height:24px; font-size:11px;}
  .wz-progress .pl{margin:0 4px;}
  .wz-q{font-size:24px;}
}

/* ===== Full report document: BOQ / schedules / specifications ===== */
.report-sec{ margin-top:18px; }
.boq-wrap{ overflow-x:auto; }
.boq{ width:100%; border-collapse:collapse; font-size:13px; }
.boq th{ text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); padding:8px 10px; border-bottom:2px solid var(--line-2); white-space:nowrap; }
.boq td{ padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.boq .boq-q, .boq .boq-r, .boq .boq-amt{ text-align:right; white-space:nowrap; }
.boq .boq-u{ color:var(--muted); white-space:nowrap; }
.boq .boq-n{ width:26px; color:var(--faint); }
.boq tr.boq-sec td{ background:var(--surface-2); font-weight:700; color:var(--ink); border-top:1px solid var(--line-2); }
.boq tr.boq-sec .boq-tie{ font-weight:500; font-size:11.5px; color:var(--muted); text-align:right; text-transform:none; letter-spacing:0; }
.boq tr.boq-item td.boq-d{ color:var(--ink-2); padding-left:14px; }
.boq tfoot td{ padding:9px 10px; font-weight:600; border-bottom:1px solid var(--line); }
.boq tfoot .boq-sub td{ border-top:2px solid var(--line-2); }
.boq tfoot .boq-total td{ font-size:14.5px; font-weight:800; color:var(--blue-ink); background:var(--blue-pale); }
.boq tfoot .boq-add td{ color:var(--muted); font-weight:500; }
.boq tfoot .boq-add em{ color:var(--faint); font-style:normal; }
.boq tfoot .boq-grand td{ font-weight:800; border-top:1px solid var(--line-2); }
.boq-note{ font-size:11.5px; color:var(--faint); margin:12px 2px 0; line-height:1.5; }
.spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; }
.spec-b h4{ font-family:var(--display); font-weight:700; font-size:13.5px; margin:0 0 7px; color:var(--ink); }
.spec-b p{ margin:0; font-size:13px; color:var(--ink-2); line-height:1.55; }
.spec-b ul{ margin:0; padding-left:17px; font-size:13px; color:var(--ink-2); }
.spec-b li{ margin:3px 0; }
@media (max-width:640px){ .spec-grid{ grid-template-columns:1fr; } .boq{ font-size:12px; } }

/* print-only cover, TOC + executive summary (hidden on screen) */
.report-cover, .report-toc, .report-summary{ display:none; }
.report-summary .rep-h{ font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-0.03em; margin:0 0 14px; }
.report-summary .rep-sh{ font-family:var(--display); font-weight:700; font-size:15px; margin:22px 0 9px; }
.kv{ width:100%; border-collapse:collapse; font-size:13.5px; }
.kv td{ padding:9px 10px; border-bottom:1px solid var(--line); }
.kv td:first-child{ color:var(--muted); }
.kv td:last-child{ text-align:right; font-weight:700; }
.kv tr:first-child td{ font-size:16px; color:var(--blue-ink); }
.report-summary .kv-on td{ background:var(--blue-pale); }
.rep-notes{ margin:0; padding-left:18px; font-size:13px; color:var(--ink-2); }
.rep-notes li{ margin:6px 0; }
.rep-p{ font-size:13.5px; color:var(--ink-2); margin:0; line-height:1.6; }
.report-cover{ position:relative; }
.report-cover .rc-top{ display:flex; align-items:center; justify-content:space-between; }
.report-cover .rc-top img{ height:46px; }
.report-cover .rc-site{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.report-cover .rc-mid{ margin-top:34mm; }
.report-cover .rc-tag{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); background:var(--blue-pale); padding:6px 13px; border-radius:var(--r-pill); }
.report-cover h1{ font-family:var(--display); font-weight:800; font-size:40px; letter-spacing:-0.03em; margin:16px 0 6px; }
.report-cover .rc-cfg{ font-size:15px; color:var(--muted); }
.report-cover .rc-amt{ font-size:54px; font-weight:800; letter-spacing:-0.04em; color:var(--blue-ink); margin-top:26px; }
.report-cover .rc-rate{ font-size:16px; color:var(--muted); }
.report-cover .rc-foot{ position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 14px; font-family:var(--mono); font-size:9.5px; color:var(--faint); border-top:1px solid var(--line-2); padding-top:10px; }
.report-toc h2{ font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-0.03em; margin:0 0 16px; }
.report-toc ol{ margin:0; padding-left:22px; font-size:15px; line-height:2; color:var(--ink-2); }
.report-toc .toc-note{ margin-top:22px; font-size:12.5px; color:var(--faint); }

@media print{
  @page{ margin:13mm 11mm; }
  /* force colours/backgrounds to print even if the user leaves "Background graphics" off */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .dash{ padding:0 !important; }
  .nav, .dactions, .foot, .elink, .jdetail{ display:none !important; }
  /* interactive-only hints make no sense on paper */
  .card-h .meta{ display:none !important; }
  .hero-d{ box-shadow:none !important; border:1px solid #d6deea; padding:24px 26px; }
  .card{ box-shadow:none !important; border:1px solid #e2e8f2; break-inside:avoid; padding:18px 20px; }
  .dash-foot{ margin-top:14px; }

  /* In print, the colourful interactive dashboard is replaced by a clean
     text + table executive summary, so the whole PDF reads as one simple
     professional document. Hide the on-screen dashboard chrome. */
  .print-head,
  .dash > .reveal:not(.card),     /* intro heading block (cover already titles it) */
  .hero-d,                        /* dark hero card */
  .dash > .card:not(.report-sec), /* tier comparison, journey, readiness cards */
  .dash > .grid{ display:none !important; }   /* budget+material, inflation+risk grids */

  /* full report document — cover, TOC, summary and paginated sections */
  .report-cover, .report-toc{ display:block !important; min-height:252mm; break-after:page; }
  .report-summary{ display:block !important; break-after:page; }
  .kv tr, .rep-notes li{ break-inside:avoid; }
  .report-cover{ padding-bottom:14mm; }
  .break-before{ break-before:page; }
  /* long tables must be allowed to flow across pages, with the header repeated */
  .report-sec.card{ break-inside:auto !important; }
  .boq thead{ display:table-header-group; }
  .boq tr, .spec-b{ break-inside:avoid; }
  .boq td, .boq th{ padding:6px 8px; }
  .boq-note{ break-inside:avoid; }
}
/* print-only branded header, hidden on screen */
.print-head{ display:none; align-items:center; gap:12px; margin-bottom:18px; padding-bottom:13px; border-bottom:2px solid var(--line-2); }
.print-head img{ height:42px; width:auto; }
.print-head .ph-t{ font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-0.02em; line-height:1.1; }
.print-head .ph-s{ font-family:var(--mono); font-size:11px; color:var(--muted); }

/* ---- custom select dropdown (desktop) ---- */
.cs-panel{position:fixed; z-index:200; min-width:200px; background:#fff; border:1px solid var(--line-2); border-radius:13px; box-shadow:var(--shadow-lg); padding:6px; display:none; flex-direction:column; max-height:300px; overflow:hidden;}
.cs-panel.open{display:flex; animation:csIn .15s cubic-bezier(.22,1,.36,1);}
@keyframes csIn{from{opacity:0; transform:translateY(-7px);} to{opacity:1; transform:none;}}
.cs-search{padding:2px 2px 8px;}
.cs-search-in{width:100%; font-family:var(--body); font-size:14px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line-2); border-radius:9px; padding:9px 12px; outline:none;}
.cs-search-in:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-pale);}
.cs-list{overflow-y:auto; -webkit-overflow-scrolling:touch;}
.cs-list::-webkit-scrollbar{width:8px;}
.cs-list::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:8px;}
.cs-opt{padding:9px 12px; border-radius:9px; font-size:14px; color:var(--ink-2); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .1s;}
.cs-opt:hover{background:var(--surface-2); color:var(--ink);}
.cs-opt.sel{color:var(--blue); font-weight:600; background:var(--blue-pale);}
.cs-empty{padding:14px; text-align:center; color:var(--faint); font-size:13px;}

/* =========================================================================
   CONTENT PAGES — India guide + state pages (legacy markup, new-design skin)
   Scoped under body.content so it never touches landing / planner / dashboard.
   ========================================================================= */
.content .page{max-width:1080px; margin:0 auto; padding:0 24px 70px;}
/* legacy chrome we drop in the new design */
.content .topbar, .content .theme-toggle, .content #langSelect, .content .snav-soon,
.content .footer, .content noscript{display:none !important;}

/* hero */
.content .hero-shell{padding:38px 0 6px;}
.content .hero-main{display:grid; grid-template-columns:1.2fr .85fr; gap:34px; align-items:center;}
.content .crumbs{font-size:12.5px; color:var(--faint); margin-bottom:14px;}
.content .crumbs a{color:var(--muted); text-decoration:none;} .content .crumbs a:hover{color:var(--blue);}
.content .tag-chip-main{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--blue); background:var(--blue-pale); padding:6px 13px; border-radius:var(--r-pill); margin-bottom:14px;}
.content .tag-dot{width:6px; height:6px; border-radius:50%; background:var(--save); box-shadow:0 0 0 3px var(--save-pale);}
.content .hero-h1{font-family:var(--display); font-weight:800; font-size:clamp(30px,4.4vw,46px); letter-spacing:-0.04em; line-height:1.05; margin:0 0 14px;}
.content .hero-copy > p{color:var(--muted); font-size:15.5px; line-height:1.62; margin:0 0 12px; max-width:600px;}
.content .hero-copy p strong{color:var(--ink-2);}
.content .hero-mini-note{font-size:13px; color:var(--faint);}
.content .hero-mini-note a{color:var(--blue); text-decoration:none;}
.content .hero-list{display:flex; flex-wrap:wrap; gap:9px; margin:16px 0;}
.content .hero-pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); padding:7px 12px; border-radius:var(--r-pill);}
.content .hero-pill svg{color:var(--blue);}

/* sample card in hero side */
.content .hero-side{display:flex;}
.content .calc-preview{width:100%; background:linear-gradient(150deg,var(--navy-1),var(--navy-2)); border-radius:18px; padding:20px; box-shadow:var(--shadow-blue); color:#fff; position:relative; overflow:hidden;}
.content .calc-preview::after{content:""; position:absolute; right:-50px; top:-50px; width:200px; height:200px; background:radial-gradient(circle,rgba(59,130,246,.4),transparent 65%);}
.content .cp-header, .content .cp-body{position:relative; z-index:1;}
.content .cp-house-svg{width:100%; height:auto; max-height:108px;}
.content .cp-body{margin-top:8px;}
.content .cp-sample-tag{display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.6); margin-bottom:4px;}
.content .cp-cost{font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-0.03em;}
.content .cp-meta{font-size:12.5px; color:rgba(255,255,255,.6); margin-top:2px;}
.content .cp-bars{margin-top:14px; display:flex; flex-direction:column; gap:9px;}
.content .cp-bar-row{display:flex; align-items:center; gap:10px;}
.content .cp-bar-label{font-size:12px; color:rgba(255,255,255,.75); width:64px; flex:none;}
.content .cp-track{flex:1; height:6px; background:rgba(255,255,255,.14); border-radius:var(--r-pill); overflow:hidden;}
.content .cp-fill{height:100%; background:linear-gradient(90deg,var(--blue-2),var(--blue-3)); border-radius:var(--r-pill);}
.content .cp-bar-pct{font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.7); width:34px; text-align:right;}

/* explorer add-ons (reuses .explorer/.exp-row/.field-dk) */
.content .explorer{margin:26px 0 0;}

/* info sections + cards */
.content .info-section{margin:34px 0 0;}
.content .info-heading{font-family:var(--display); font-weight:800; font-size:clamp(22px,2.6vw,28px); letter-spacing:-0.03em; margin-bottom:14px;}
.content .info-section > p{color:var(--muted); font-size:15px; line-height:1.65; margin:0 0 8px; max-width:780px;}
.content .info-section p strong{color:var(--ink-2);}
.content .info-section a{color:var(--blue); text-decoration:none;}
.content .info-footer-note{margin-top:16px; font-size:12.5px; color:var(--faint);}
.content .card{margin-top:18px;}
.content .card h2{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-0.03em; margin:0 0 6px; display:flex; align-items:center; gap:9px;}
.content .section-title{font-family:var(--display); font-weight:700; font-size:16px; margin:16px 0 0;}
.content .muted{color:var(--muted);}
.content .icon{font-style:normal;}
.content ul{color:var(--muted); font-size:15px; line-height:1.7;}
.content ul strong{color:var(--ink-2);}

/* tables */
.content table{width:100%; border-collapse:collapse; margin-top:12px; font-size:14px;}
.content th, .content td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
.content thead th{font-family:var(--display); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); background:var(--surface-2);}
.content tbody tr:last-child td{border-bottom:none;}
.content .note{font-size:12.5px; color:var(--faint); margin-top:10px;}

/* article bits (guide page) */
.content .quick-box{margin-top:14px; padding:14px 16px; border-radius:14px; background:var(--blue-pale); border:1px solid var(--line-2); color:var(--ink-2); font-size:14px; line-height:1.65;}
.content .quick-box .note{margin-top:6px;}
.content .link-row{margin-top:14px; display:flex; flex-wrap:wrap; gap:9px;}
.content .link-chip{padding:7px 13px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--surface); font-size:13px; color:var(--ink-2); text-decoration:none;}
.content .link-chip:hover{border-color:var(--blue-2); color:var(--blue);}
.content .article-cta{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:var(--r-pill); background:var(--blue); color:#fff !important; font-weight:600; text-decoration:none; box-shadow:0 10px 22px -10px var(--blue); margin-top:10px;}
.content .article-cta:hover{background:var(--blue-ink);}

/* features row */
.content .features-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0 0;}
.content .feat{display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:16px; box-shadow:var(--shadow);}
.content .feat-icon{width:38px; height:38px; border-radius:10px; background:var(--blue-pale); color:var(--blue); display:flex; align-items:center; justify-content:center; flex:none;}
.content .feat-text strong{display:block; font-size:14px; font-weight:600;}
.content .feat-text span{font-size:12.5px; color:var(--muted);}

/* accordion / FAQ */
.content .accordion-grid{display:grid; gap:10px; margin-top:16px;}
.content .accordion-grid details{background:var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden; box-shadow:var(--shadow);}
.content .accordion-grid summary{display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; padding:15px 18px; font-weight:600; font-size:14.5px; list-style:none;}
.content .accordion-grid summary::-webkit-details-marker{display:none;}
.content .summary-label{display:flex; align-items:center; gap:9px;}
.content .summary-chevron{color:var(--faint); transition:.2s; font-size:18px;}
.content .accordion-grid details[open] .summary-chevron{transform:rotate(90deg);}
.content .details-body{padding:0 18px 16px; color:var(--muted); font-size:14px; line-height:1.65;}
.content .details-body a{color:var(--blue); text-decoration:none;}
.content .details-body ul{margin:6px 0 0; padding-left:18px;}
.content .faq-item-title{font-weight:600; color:var(--ink-2); margin-top:8px;}
.content .faq-item-body{color:var(--muted); margin-top:2px;}

/* state-pages grid */
.content .state-pages{margin:34px 0 0;}
.content .sp-header h2{font-family:var(--display); font-weight:800; font-size:clamp(22px,2.6vw,28px); letter-spacing:-0.03em; margin:0 0 4px;}
.content .sp-header p{color:var(--muted); font-size:14.5px; margin:0 0 16px;}
.content .sp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.content .sp-card{display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"icon name arrow" "icon sub arrow"; column-gap:11px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:13px 15px; text-decoration:none; color:var(--ink); transition:.16s; box-shadow:var(--shadow);}
.content .sp-card:hover{border-color:var(--blue-2); transform:translateY(-2px);}
.content .sp-icon{grid-area:icon; width:34px; height:34px; border-radius:9px; background:var(--blue-pale); color:var(--blue); display:flex; align-items:center; justify-content:center; flex:none;}
.content .sp-name{grid-area:name; align-self:end; font-weight:600; font-size:14px;}
.content .sp-sub{grid-area:sub; align-self:start; font-size:11.5px; color:var(--faint);}
.content .sp-arrow{grid-area:arrow; color:var(--faint); display:flex;}

/* ---- tool calculators ---- */
.content .tool-wrap{max-width:1080px; margin:26px auto 0; padding:0 24px;}
.content #toolApp{margin-top:6px;}
.content .tool-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:start;}
.content .tool-form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow); padding:20px; display:grid; gap:14px;}
.content .tf{display:flex; flex-direction:column; gap:6px;}
.content .tf label{font-size:12.5px; font-weight:600; color:var(--ink-2);}
.content .tf-in{width:100%; font-family:var(--body); font-size:15px; font-weight:500; color:var(--ink); background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--r-ctl); padding:11px 13px; outline:none; transition:.15s;}
.content .tf-in:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-pale);}
.content select.tf-in{cursor:pointer; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat;}
.content .tool-result{background:linear-gradient(155deg,var(--navy-1),var(--navy-2)); border-radius:var(--r-card); box-shadow:var(--shadow-blue); color:#fff; padding:24px; position:relative; overflow:hidden;}
.content .tool-result::after{content:""; position:absolute; right:-60px; top:-60px; width:230px; height:230px; background:radial-gradient(circle,rgba(59,130,246,.4),transparent 65%);}
.content .tr-primary{position:relative; z-index:1; display:flex; flex-direction:column; gap:3px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.12);}
.content .tr-label{font-size:12.5px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.05em; font-weight:600;}
.content .tr-primary b{font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-0.03em; line-height:1;}
.content .tr-sub{font-family:var(--mono); font-size:12.5px; color:rgba(255,255,255,.65);}
.content .tr-rows{list-style:none; margin:16px 0 0; padding:0; position:relative; z-index:1; display:flex; flex-direction:column; gap:11px;}
.content .tr-rows li{display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:13.5px; color:rgba(255,255,255,.7);}
.content .tr-rows b{font-family:var(--mono); font-weight:600; color:#fff; text-align:right;}
.content .tr-note{position:relative; z-index:1; margin:16px 0 18px; font-size:12px; line-height:1.55; color:rgba(255,255,255,.55);}
.content .tool-result .btn{position:relative; z-index:1; width:100%; justify-content:center;}

/* ---- tools hub cards ---- */
.content .tool-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px;}
.content .tool-card{display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow); padding:20px; text-decoration:none; color:var(--ink); transition:.16s;}
.content .tool-card:hover{transform:translateY(-3px); border-color:var(--blue-2);}
.content .tool-card .tc-ic{width:44px; height:44px; border-radius:12px; background:var(--blue-pale); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.content .tool-card h3{font-family:var(--display); font-weight:700; font-size:16.5px; margin:0 0 5px; letter-spacing:-0.02em;}
.content .tool-card p{margin:0 0 12px; font-size:13.5px; color:var(--muted); line-height:1.5;}
.content .tool-card .tc-lnk{color:var(--blue); font-weight:600; font-size:13.5px;}

@media (max-width:880px){
  .content .hero-main{grid-template-columns:1fr; gap:24px;}
  .content .hero-side{order:-1;}
  .content .features-row{grid-template-columns:1fr 1fr;}
  .content .sp-grid{grid-template-columns:1fr 1fr;}
  .content .tool-grid{grid-template-columns:1fr;}
  .content .tool-cards{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .content .features-row{grid-template-columns:1fr;}
  .content .sp-grid{grid-template-columns:1fr;}
  .content .tool-cards{grid-template-columns:1fr;}
}