:root{
/* PALETTE — Blueprint + Cream (default) */
--bp:#13386b; /* blueprint deep */
--bp-2:#1f5191; /* blueprint mid */
--bp-3:#2f6db5; /* blueprint light */
--ink:#0d1f36;
--ink-2:#3a4a63;
--ink-3:#6b7a91;
--paper:#f6efd9; /* cream */
--paper-2:#efe7cc; /* cream darker */
--paper-3:#fbf6e7; /* cream lighter */
--line:rgba(19,56,107,.22);
--line-2:rgba(19,56,107,.10);
--accent:#c8541f; /* rust — only used sparingly */
--ok:#2c7a4e;
--warn:#a05a00;
/* TYPE */
--f-display:'Archivo', system-ui, sans-serif;
--f-body:'Manrope', system-ui, sans-serif;
--f-mono:'JetBrains Mono', ui-monospace, monospace;
/* RHYTHM */
--r-1:6px;
--r-2:10px;
--r-3:16px;
--shadow-1:0 1px 0 rgba(13,31,54,.04), 0 1px 2px rgba(13,31,54,.06);
--shadow-2:0 1px 0 rgba(13,31,54,.04), 0 8px 24px rgba(13,31,54,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
font-family:var(--f-body);font-size:15px;line-height:1.55;
-webkit-font-smoothing:antialiased}
/* Soft warm wash — replaces the blueprint grid */
body{
background:
radial-gradient(1200px 600px at 85% -10%, rgba(19,56,107,.04), transparent 60%),
var(--paper);
}
a{color:var(--bp-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);margin:0;
letter-spacing:-.01em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(22px,2.4vw,30px);line-height:1.12}
h3{font-size:18px;line-height:1.2}
h4{font-size:14px;line-height:1.2;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)}
p{margin:0 0 10px 0;color:var(--ink-2);text-wrap:pretty}
small{color:var(--ink-3)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;
letter-spacing:.18em;color:var(--accent)}
/* ──────────────────── TOP BAR ──────────────────── */
.nav{position:sticky;top:0;z-index:20;
background:var(--paper-3);
border-bottom:1px solid var(--line);
backdrop-filter:saturate(140%) blur(6px);
-webkit-backdrop-filter:saturate(140%) blur(6px);}
.nav-in{max-width:1280px;margin:0 auto;padding:14px 24px;
display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);
font-weight:800;letter-spacing:-.01em;color:var(--ink);font-size:18px}
.brand-mark{width:28px;height:28px;border-radius:7px;background:var(--bp);
color:var(--paper);display:grid;place-items:center;font-family:var(--f-mono);
font-weight:600;font-size:12px;letter-spacing:-.04em;position:relative;overflow:hidden}
.brand-mark::before{content:'CMP';transform:translateY(.5px);z-index:1}
.brand-mark::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:4px;
background:var(--accent)}
.nav-links{display:flex;gap:4px;color:var(--ink-2);font-weight:500;font-size:14px;align-items:center}
.nav-links a, .nav-links span{padding:6px 10px;border-radius:6px;color:var(--ink-2);text-decoration:none;cursor:default;transition:background .12s,color .12s}
.nav-links a:hover, .nav-links span:hover{color:var(--ink);background:var(--paper-2);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--bp);background:var(--paper-2);font-weight:600}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:13px}
/* ──────────────────── AD SLOTS ──────────────────── */
.ad{
border:1.5px dashed var(--line);
background:
repeating-linear-gradient(135deg, rgba(19,56,107,.04) 0 6px, transparent 6px 14px),
var(--paper-3);
border-radius:var(--r-2);
color:var(--ink-3);
font-family:var(--f-mono);font-size:11px;
display:flex;align-items:center;justify-content:center;gap:10px;
text-transform:uppercase;letter-spacing:.16em;
user-select:none}
.ad b{font-weight:500;color:var(--bp-2)}
.ad-banner{height:100px;margin:18px 0 6px}
.ad-sidebar{height:280px;margin-bottom:18px}
.ad-inline{height:120px;margin:18px 0}
.ad-results{height:90px;margin-top:14px}
.ad-leaderboard{height:90px;margin:24px 0 8px}
/* ──────────────────── HERO ──────────────────── */
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.hero{padding:24px 0 8px;display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:end}
.hero h1{margin-bottom:14px}
.hero p{font-size:17px;max-width:60ch}
.hero-meta{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}
.hero-meta div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.hero-meta div .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.hero-meta .star{color:var(--accent);font-size:14px;line-height:1}
/* Tiny roof diagram */
.roof-diag{height:170px;position:relative;border:1px solid var(--line);
background:var(--paper-3);border-radius:var(--r-3);padding:16px;
background-image:
linear-gradient(var(--line-2) 1px, transparent 1px),
linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
background-size:16px 16px}
.roof-diag svg{width:100%;height:100%;display:block}
.roof-tag{position:absolute;font-family:var(--f-mono);font-size:10px;
color:var(--bp-2);background:var(--paper-3);padding:1px 6px;border-radius:3px;
border:1px solid var(--line)}
/* ──────────────────── MAIN GRID ──────────────────── */
.work{display:grid;grid-template-columns:1fr 320px;gap:36px;
padding:8px 0 36px;align-items:start}
.work.stacked{grid-template-columns:1fr 320px}
.calc-area{display:grid;gap:24px}
/* In side-by-side, inputs and results sit beside each other */
.calc-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:start}
.calc-grid.stacked{grid-template-columns:1fr}
.sidebar{display:flex;flex-direction:column;gap:18px;position:sticky;top:80px}
/* ──────────────────── CARDS ──────────────────── */
.card{background:var(--paper-3);border:1px solid var(--line);
border-radius:var(--r-3);padding:22px 22px;box-shadow:var(--shadow-1)}
.card-head{display:flex;align-items:center;justify-content:space-between;
gap:12px;margin-bottom:14px;padding-bottom:14px;
border-bottom:1px dashed var(--line)}
.card-head h3{display:flex;align-items:center;gap:10px}
.card-head .step{font-family:var(--f-mono);font-size:11px;color:var(--bp);
background:var(--paper-2);border:1px solid var(--line);
padding:2px 7px;border-radius:5px}
/* ──────────────────── FORM CONTROLS ──────────────────── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:600;letter-spacing:.04em;
color:var(--ink-2);text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline}
.field label .hint{font-weight:500;font-family:var(--f-mono);
text-transform:none;letter-spacing:0;color:var(--ink-3);font-size:11px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.input, .select{appearance:none;-webkit-appearance:none;
width:100%;height:42px;padding:0 14px;border:1px solid var(--line);
background:#fff;color:var(--ink);font:inherit;font-family:var(--f-mono);
border-radius:var(--r-2);outline:none;transition:border-color .12s, box-shadow .12s}
.input:focus, .select:focus{border-color:var(--bp);box-shadow:0 0 0 3px rgba(19,56,107,.12)}
.input-suffix{position:relative}
.input-suffix .input{padding-right:38px}
.input-suffix span{position:absolute;right:12px;top:50%;transform:translateY(-50%);
color:var(--ink-3);font-family:var(--f-mono);font-size:13px;pointer-events:none}
.select{padding-right:32px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;
cursor:default}
/* Segmented buttons */
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r-2);
overflow:hidden;background:#fff}
.seg button{appearance:none;flex:1;border:0;background:transparent;
padding:11px 8px;font:inherit;font-family:var(--f-body);font-weight:500;font-size:13px;
color:var(--ink-2);cursor:default;border-right:1px solid var(--line);
transition:background .12s, color .12s}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--bp);color:var(--paper-3)}
.seg button:hover:not([aria-pressed="true"]){background:var(--paper-2);color:var(--ink)}
.seg.compact button{padding:9px 6px;font-size:12px}
/* Range slider */
.range-wrap{display:flex;align-items:center;gap:14px}
.range-wrap input[type=range]{flex:1;-webkit-appearance:none;appearance:none;
height:4px;background:var(--line);border-radius:999px;outline:none}
.range-wrap input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;width:18px;height:18px;
border-radius:50%;background:var(--bp);box-shadow:0 1px 3px rgba(13,31,54,.3);
cursor:default;border:3px solid var(--paper-3)}
.range-wrap input[type=range]::-moz-range-thumb{
width:18px;height:18px;border-radius:50%;background:var(--bp);
box-shadow:0 1px 3px rgba(13,31,54,.3);border:3px solid var(--paper-3)}
.range-wrap .v{font-family:var(--f-mono);min-width:50px;text-align:right;
background:var(--paper-2);padding:6px 10px;border-radius:var(--r-1);
border:1px solid var(--line);font-weight:600;color:var(--bp);font-size:13px}
/* Pitch picker */
.pitch-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pitch-pick button{appearance:none;border:1px solid var(--line);background:#fff;
border-radius:var(--r-2);padding:10px 6px;cursor:default;
display:flex;flex-direction:column;align-items:center;gap:6px;
transition:border-color .12s, background .12s;font:inherit}
.pitch-pick button .pitch-glyph{width:34px;height:18px;color:var(--ink-3)}
.pitch-pick button .pitch-lbl{font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--ink-2)}
.pitch-pick button:hover{border-color:var(--bp-3)}
.pitch-pick button[aria-pressed="true"]{border-color:var(--bp);background:var(--paper-2);
box-shadow:0 0 0 2px rgba(19,56,107,.10)}
.pitch-pick button[aria-pressed="true"] .pitch-glyph,
.pitch-pick button[aria-pressed="true"] .pitch-lbl{color:var(--bp)}
/* Material cards */
.mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mat-card{appearance:none;border:1px solid var(--line);background:#fff;border-radius:var(--r-2);
padding:12px;text-align:left;cursor:default;display:flex;flex-direction:column;gap:4px;
font:inherit;transition:border-color .12s, background .12s}
.mat-card .name{font-weight:600;color:var(--ink);font-size:14px}
.mat-card .desc{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.mat-card .price{font-family:var(--f-mono);font-size:12px;color:var(--bp);margin-top:6px;font-weight:600}
.mat-card:hover{border-color:var(--bp-3)}
.mat-card[aria-pressed="true"]{border-color:var(--bp);background:var(--paper-2);
box-shadow:0 0 0 2px rgba(19,56,107,.10)}
/* Roof shape cards */
.roof-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.roof-card{align-items:center;text-align:center;padding:14px 8px 12px;gap:6px}
.roof-card .roof-svg{width:64px;height:38px;color:var(--ink-3);transition:color .12s}
.roof-card .roof-svg svg{width:100%;height:100%;display:block}
.roof-card[aria-pressed="true"] .roof-svg{color:var(--bp)}
.roof-card .desc{font-size:11px}
/* Toggle row */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:10px 0;border-top:1px dashed var(--line)}
.toggle-row:first-child{border-top:0;padding-top:0}
.toggle-row .lbl{font-size:13px;font-weight:500;color:var(--ink)}
.toggle-row .sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.switch{position:relative;width:40px;height:22px;background:var(--line);
border-radius:999px;border:0;cursor:default;transition:background .15s;padding:0;flex-shrink:0}
.switch[data-on="1"]{background:var(--bp)}
.switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch[data-on="1"] i{transform:translateX(18px)}
/* ──────────────────── RESULTS ──────────────────── */
.results .head-bar{padding:18px 22px;background:var(--bp);color:var(--paper-3);
border-radius:var(--r-3) var(--r-3) 0 0;margin:-22px -22px 18px}
.results .head-bar .eyebrow{color:var(--paper-2);opacity:.85}
.results .head-bar h3{color:var(--paper-3);margin-top:4px;font-size:20px;font-weight:700}
.results .head-bar .meta-tags{display:flex;gap:14px;margin-top:10px;font-family:var(--f-mono);
font-size:11px;opacity:.85;flex-wrap:wrap}
.results .head-bar .meta-tags span::before{content:'· ';opacity:.5;margin-right:2px}
.results .head-bar .meta-tags span:first-child::before{content:''}
.total-block{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;
padding:8px 0 14px;border-bottom:1px dashed var(--line);margin-bottom:14px}
.total-block .total-lbl{font-size:12px;font-weight:600;color:var(--ink-2);
text-transform:uppercase;letter-spacing:.04em}
.total-block .total-val{font-family:var(--f-display);font-size:38px;font-weight:800;
color:var(--bp);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.total-block .total-range{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);text-align:right}
.total-block .per-sq{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
/* Result rows — Report style */
.line-section{margin-top:14px}
.line-section h4{margin-bottom:8px;color:var(--bp);font-family:var(--f-display);
font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.line-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;
padding:5px 0;font-size:13px;align-items:baseline}
.line-row .nm{color:var(--ink)}
.line-row .qty{font-family:var(--f-mono);color:var(--ink-3);font-size:12px;text-align:right}
.line-row .amt{font-family:var(--f-mono);color:var(--ink);font-weight:600;text-align:right;min-width:70px}
.line-sub{display:flex;justify-content:space-between;padding-top:6px;
margin-top:6px;border-top:1px solid var(--line-2);font-family:var(--f-mono);
font-size:12px;color:var(--ink-2)}
.line-sub b{color:var(--ink);font-weight:600}
/* Receipt style alt */
.results.style-receipt .card{background:#fff}
.results.style-receipt .head-bar{background:transparent;color:var(--ink);
border-bottom:1px dashed var(--line);border-radius:0;padding:0 0 14px;margin:0 0 14px}
.results.style-receipt .head-bar h3{color:var(--ink)}
.results.style-receipt .head-bar .eyebrow{color:var(--bp-2)}
.results.style-receipt .head-bar .meta-tags{color:var(--ink-3);opacity:1}
.results.style-receipt .total-block .total-val{color:var(--ink)}
.results.style-receipt .line-row{padding:4px 0;border-bottom:1px dotted var(--line-2)}
.results.style-receipt .line-section h4{color:var(--ink-2)}
/* Dashboard style alt */
.results.style-dashboard .head-bar{background:transparent;color:var(--ink);
border-radius:0;padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.results.style-dashboard .head-bar h3{color:var(--ink)}
.results.style-dashboard .head-bar .eyebrow{color:var(--bp-2)}
.results.style-dashboard .head-bar .meta-tags{color:var(--ink-3);opacity:1}
.results.style-dashboard .stat-row{display:grid;grid-template-columns:repeat(3,1fr);
gap:10px;margin-bottom:18px}
.results.style-dashboard .stat{background:var(--paper-2);border-radius:var(--r-2);
padding:12px;border:1px solid var(--line)}
.results.style-dashboard .stat .l{font-size:10.5px;color:var(--ink-3);
text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.results.style-dashboard .stat .v{font-family:var(--f-mono);font-size:18px;
color:var(--bp);font-weight:600;margin-top:4px}
/* Breakdown bar */
.bar-wrap{margin:18px 0 8px}
.bar-wrap .bar-lbl{display:flex;justify-content:space-between;font-size:12px;
color:var(--ink-3);font-family:var(--f-mono);margin-bottom:6px}
.bar{height:10px;border-radius:999px;background:var(--paper-2);overflow:hidden;
display:flex;border:1px solid var(--line)}
.bar > i{display:block;height:100%}
.bar-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;
font-size:12px}
.bar-legend div{display:flex;align-items:center;gap:7px}
.bar-legend i{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.results .actions{display:flex;gap:8px;margin-top:18px;padding-top:14px;
border-top:1px dashed var(--line)}
/* Sources & methodology note */
.src-note{margin-top:18px;padding:14px 16px;background:var(--paper-2);
border:1px solid var(--line);border-radius:var(--r-2)}
.src-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.src-badge{font-family:var(--f-mono);font-size:10px;font-weight:600;
letter-spacing:.10em;background:var(--bp);color:var(--paper-3);
padding:3px 7px;border-radius:4px}
.src-summary{font-size:12.5px;color:var(--ink-2);flex:1;min-width:180px}
.src-summary b{color:var(--ink)}
.src-toggle{appearance:none;background:transparent;border:0;
font:inherit;font-family:var(--f-mono);font-size:11px;font-weight:600;
letter-spacing:.04em;color:var(--accent);cursor:default;padding:2px 0}
.src-toggle:hover{text-decoration:underline}
.src-detail{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.src-list{margin:0;padding-left:18px;font-size:12px;color:var(--ink-2);line-height:1.6}
.src-list li{margin-bottom:2px}
.src-list b{color:var(--ink);font-weight:600}
.src-stale{color:var(--accent);font-weight:600;font-family:var(--f-mono);font-size:11px}
.btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);
padding:10px 14px;border-radius:var(--r-2);font:inherit;font-weight:600;
font-size:13px;cursor:default;display:inline-flex;align-items:center;gap:6px;
transition:background .12s, border-color .12s}
.btn:hover{background:var(--paper-2)}
.btn.primary{background:var(--bp);color:var(--paper-3);border-color:var(--bp)}
.btn.primary:hover{background:var(--ink)}
/* ──────────────────── INFO SECTIONS ──────────────────── */
.info-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:24px;
overflow-x:auto;scrollbar-width:none}
.info-tabs::-webkit-scrollbar{display:none}
.info-tabs button{appearance:none;border:0;background:transparent;
padding:14px 18px;font:inherit;font-weight:600;font-size:14px;
color:var(--ink-3);cursor:default;border-bottom:2px solid transparent;
margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:8px;
transition:color .12s, border-color .12s}
.info-tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--accent)}
.info-tabs button:hover{color:var(--ink)}
.info-tabs button .n{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
background:var(--paper-2);padding:1px 6px;border-radius:4px;font-weight:500}
.info-tabs button[aria-selected="true"] .n{background:var(--bp);color:var(--paper-3)}
.info-panel{background:var(--paper-3);border:1px solid var(--line);
border-radius:var(--r-3);padding:28px;min-height:340px}
/* Steps list */
.steps{display:grid;gap:18px}
.step-row{display:grid;grid-template-columns:42px 1fr;gap:18px;align-items:start;
padding-bottom:18px;border-bottom:1px dashed var(--line)}
.step-row:last-child{border-bottom:0;padding-bottom:0}
.step-row .num{width:36px;height:36px;border-radius:50%;background:var(--paper-2);
border:1px solid var(--line);display:grid;place-items:center;
font-family:var(--f-mono);font-weight:700;color:var(--accent);font-size:14px}
.step-row h4{font-family:var(--f-display);font-size:15px;color:var(--ink);
text-transform:none;letter-spacing:0;margin-bottom:4px;font-weight:700}
.step-row p{margin:0;font-size:14px}
/* Tips list */
.tips{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.tip{padding:16px;border:1px solid var(--line);border-radius:var(--r-2);
background:var(--paper-2);display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.tip .sigil{width:22px;height:22px;border-radius:5px;background:var(--bp);
color:var(--paper-3);font-family:var(--f-mono);font-weight:700;font-size:11px;
display:grid;place-items:center}
.tip.warn .sigil{background:var(--accent)}
.tip h4{font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);margin-bottom:4px}
.tip p{font-size:13px;margin:0}
/* Tables */
table.ref{width:100%;border-collapse:collapse;font-size:13px;
border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
table.ref th, table.ref td{padding:10px 14px;text-align:left;
border-bottom:1px solid var(--line-2);font-family:var(--f-mono)}
table.ref th{background:var(--paper-2);color:var(--bp);font-weight:600;
font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--f-body)}
table.ref th:not(:first-child), table.ref td:not(:first-child){text-align:right}
table.ref tr:last-child td{border-bottom:0}
.table-cap{font-size:12px;color:var(--ink-3);margin-top:10px;font-style:italic}
/* Tools checklist */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tool{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);
background:#fff;border-radius:var(--r-2);font-size:13px}
.tool .ck{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--line);
flex-shrink:0;background:#fff}
.tool.on .ck{background:var(--bp);border-color:var(--bp);
background-image:url("data:image/svg+xml;utf8,");
background-position:center;background-repeat:no-repeat}
.tool.on{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line)}
.tool .grp{font-family:var(--f-mono);font-size:10px;color:var(--ink-3);margin-left:auto;
text-transform:uppercase;letter-spacing:.05em}
/* Video */
.video{aspect-ratio:16/9;border-radius:var(--r-2);overflow:hidden;
border:1px solid var(--line);background:var(--bp);position:relative;
background-image:
repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 8px, transparent 8px 18px);
display:grid;place-items:center;cursor:default}
.video::after{content:'';position:absolute;width:64px;height:64px;border-radius:50%;
background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.5);
backdrop-filter:blur(4px)}
.video svg{width:24px;height:24px;color:#fff;z-index:1}
.video-caption{margin-top:10px;font-size:13px;color:var(--ink-3);font-family:var(--f-mono)}
/* ──────────────────── FOOTER ──────────────────── */
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.related-card{padding:16px;border:1px solid var(--line);background:var(--paper-3);
border-radius:var(--r-2);font-size:13px}
.related-card .eyebrow{font-size:10px;margin-bottom:6px}
.related-card h4{font-family:var(--f-display);font-size:15px;text-transform:none;
letter-spacing:0;color:var(--ink);margin-bottom:6px}
.related-card p{font-size:12px;margin:0;color:var(--ink-3)}
footer{margin-top:48px;padding:36px 0 28px;border-top:1px solid var(--line);
color:var(--ink-3);font-size:12px}
footer .container{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .brand{font-size:14px;color:var(--ink-2)}
/* ──────────────────── FONT PAIRINGS ──────────────────── */
body[data-fontpair="utility"]{--f-display:'Bebas Neue',sans-serif;--f-body:'Source Sans 3',sans-serif;--f-mono:'JetBrains Mono',monospace}
body[data-fontpair="utility"] h1,
body[data-fontpair="utility"] h2{letter-spacing:.01em;font-weight:400}
body[data-fontpair="utility"] h1{font-size:clamp(36px,4.4vw,56px)}
body[data-fontpair="editorial"]{--f-display:'DM Serif Display',serif;--f-body:'DM Sans',sans-serif;--f-mono:'JetBrains Mono',monospace}
body[data-fontpair="editorial"] h1{font-weight:400;letter-spacing:-.025em}
/* ──────────────────── PALETTE VARIANTS ──────────────────── */
body[data-palette="concrete"]{
--bp:#2b3440;--bp-2:#475569;--bp-3:#64748b;
--ink:#0f172a;--ink-2:#334155;--ink-3:#64748b;
--paper:#ececea;--paper-2:#dcdcd7;--paper-3:#f4f4f1;
--line:rgba(15,23,42,.20);--line-2:rgba(15,23,42,.08);
--accent:#c8541f}
body[data-palette="safety"]{
--bp:#1f2937;--bp-2:#374151;--bp-3:#4b5563;
--ink:#0b1220;--ink-2:#1f2937;--ink-3:#6b7280;
--paper:#f2efe7;--paper-2:#e6e2d4;--paper-3:#fbf8ef;
--line:rgba(11,18,32,.18);--line-2:rgba(11,18,32,.08);
--accent:#f06400}
body[data-palette="safety"] .results .head-bar{background:var(--accent);color:#fff}
body[data-palette="safety"] .results .head-bar h3{color:#fff}
body[data-palette="safety"] .total-block .total-val{color:var(--accent)}
body[data-palette="safety"] .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
body[data-palette="safety"] .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
body[data-palette="forest"]{
--bp:#1f3a2e;--bp-2:#2b5942;--bp-3:#3f7d5d;
--ink:#0d1f17;--ink-2:#2b3a30;--ink-3:#5a6b60;
--paper:#efeadb;--paper-2:#e2dbc4;--paper-3:#f7f3e6;
--line:rgba(13,31,23,.18);--line-2:rgba(13,31,23,.07);
--accent:#a05a00}
/* ──────────────────── AD DENSITY ──────────────────── */
body[data-addensity="low"] .ad-sidebar,
body[data-addensity="low"] .ad-inline,
body[data-addensity="low"] .ad-results,
body[data-addensity="low"] .ad-leaderboard{display:none}
body[data-addensity="medium"] .ad-inline,
body[data-addensity="medium"] .ad-leaderboard{display:none}
/* high — all visible */
/* Responsive */
@media (max-width: 1080px){
.hero{grid-template-columns:1fr}
.roof-diag{height:140px}
.work{grid-template-columns:1fr}
.sidebar{position:static;flex-direction:row;flex-wrap:wrap}
.sidebar > *{flex:1;min-width:240px}
.calc-grid{grid-template-columns:1fr}
.tools{grid-template-columns:repeat(2,1fr)}
.tips{grid-template-columns:1fr}
.related{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
.container, .nav-in{padding:0 16px}
.nav-links{display:none}
.mat-grid{grid-template-columns:1fr}
.field-row, .field-row-3{grid-template-columns:1fr}
.pitch-pick{grid-template-columns:repeat(3,1fr)}
.tools{grid-template-columns:1fr}
.related{grid-template-columns:1fr}
}