/* Brownout (brownout.ph) — brand tokens + system. DARK "BROWNOUT" TOKEN SET, ruled by Ryan 2026-09-15 (supersedes
the neutral SolBahay carry-over and ROADMAP row 05 / HELD H4). The page is the outage: a cool near-black room.
--sun is the light coming back — spend it on the primary action, the answer, the key number, and nothing else.
Swap brand = edit :root only. Every text token clears WCAG AA on every ground it is used on (checked, not eyeballed). */
:root{
color-scheme:dark;
/* grounds — recessed → floor → page → band → raised */
--inset:#101A21; /* recessed: inputs, assumption panels, tl;dr, filter bars */
--void:#0A1014; /* floor: header, footer, hero base */
--night:#0D151B; /* page ground */
--band:#111C24; /* .section.alt */
--surface:#18242E; /* raised: cards */
/* text — ratios vs --night / --surface */
--head:#F5F9FB; /* 17.4 / 14.9 */
--ink:#E6EEF3; /* 15.7 / 13.4 */
--ink-2:#C6D4DD; /* 12.2 / 10.4 */
--muted:#A0B2BD; /* 8.4 / 7.2 — clears AAA on every ground; small meta text on dark is the weak point */
/* the light */
--sun:#F7B32B; /* 10.0 / 8.6 */
--sun-soft:#FFC964;
--sun-tint:rgba(247,179,43,.10);
--sun-glow:rgba(247,179,43,.16);
/* signals */
--leaf:#57D3A6; --leaf-bg:rgba(87,211,166,.12); --leaf-line:rgba(87,211,166,.42); /* covered / verified */
--clay:#F0A088; --clay-bg:rgba(240,160,136,.12); --clay-line:rgba(240,160,136,.42); /* needs attention */
/* lines */
--line:#2A3946; /* decorative hairline */
--line-strong:#587384; /* meaningful boundary: inputs, focusable chrome — 3.5:1 on --inset */
/* carried names so older rules and inline styles keep resolving */
--deep:#F5F9FB; --deep-2:#0A1014; --sun-dark:#FFC964; --sky:#101A21; --paper:#18242E;
/* the three font tokens moved to THE FONT BLOCK at the foot of this file (lane v1.12.0)
so that exactly ONE place in the stylesheet names a typeface. Do not re-add them here. */
--radius:12px; --radius-sm:8px;
--shadow:0 10px 30px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.045) inset;
--shadow-sm:0 4px 14px rgba(0,0,0,.35);
--maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--night);line-height:1.6;font-size:16.5px;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%}
::selection{background:var(--sun);color:var(--void)}
:focus-visible{outline:2.5px solid var(--sun);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--head);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);font-weight:600;letter-spacing:-.012em}
h2{font-size:clamp(1.45rem,3vw,1.9rem);font-weight:600;margin-top:1.6em;letter-spacing:-.008em}
h3{font-size:1.15rem;font-weight:600}
p{margin:.4em 0 1em}
strong{color:var(--head)}
a{color:var(--ink);text-decoration-color:var(--sun);text-underline-offset:3px}
a:hover{color:var(--sun)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:48px 0}
.section.alt{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.small{font-size:.85rem;color:var(--muted)}
.center{text-align:center}
hr{border:none;border-top:1px solid var(--line)}
/* header / nav */
.site-header{background:rgba(10,16,20,.92);backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1100}
.site-header .container{display:flex;align-items:center;gap:14px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--head);font-family:var(--font-head);font-size:1.25rem;font-weight:600}
.brand:hover{color:var(--head)}
.brand svg{width:34px;height:34px;flex:none}
.brand .brand-sub{display:block;font-family:var(--font-body);font-size:.62rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{color:var(--ink-2);text-decoration:none;padding:8px 11px;border-radius:8px;font-size:.93rem}
.nav a:hover{background:rgba(255,255,255,.07);color:var(--head)}
.nav a.active{background:rgba(255,255,255,.09);color:var(--head);box-shadow:inset 0 -2px 0 var(--sun)}
.nav a.cta{background:var(--sun);color:var(--void);font-weight:600;margin-left:6px}
.nav a.cta:hover{background:var(--sun-soft);color:var(--void);box-shadow:0 0 22px var(--sun-glow)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);color:var(--ink);border-radius:8px;padding:7px 11px;font-size:1.05rem;cursor:pointer}
@media(max-width:880px){
.nav-toggle{display:block}
.nav{display:none;position:absolute;top:62px;left:0;right:0;background:var(--void);border-bottom:1px solid var(--line);
flex-direction:column;align-items:stretch;padding:10px 16px 16px;gap:2px;box-shadow:var(--shadow)}
.nav.open{display:flex}
.nav a{padding:12px}
.nav a.cta{margin:8px 0 0;text-align:center}
}
/* hero — the room during the outage, with the lamp just out of frame */
.hero{position:relative;overflow:hidden;background:var(--void);color:var(--ink-2);padding:76px 0 64px;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(46% 72% at 82% 30%,rgba(247,179,43,.22),rgba(247,179,43,.06) 46%,transparent 72%),
linear-gradient(to top,rgba(247,179,43,.055),transparent 26%),
radial-gradient(80% 100% at 6% 0%,rgba(40,86,110,.30),transparent 62%)}
.hero .container{position:relative;z-index:1}
.hero h1{color:var(--head);max-width:15em}
.hero p.lead{font-size:1.15rem;max-width:34em;color:var(--ink-2)}
.hero .btn-row{margin-top:24px}
/* buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:10px;font-weight:600;text-decoration:none;border:none;cursor:pointer;font-size:1rem;font-family:var(--font-body);transition:background .15s,box-shadow .15s,border-color .15s,color .15s}
.btn.primary{background:var(--sun);color:var(--void);box-shadow:0 0 24px rgba(247,179,43,.20)}
.btn.primary:hover{background:var(--sun-soft);color:var(--void);box-shadow:0 0 34px rgba(247,179,43,.34)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn.ghost:hover{border-color:var(--sun);color:var(--sun)}
.btn.quiet{background:var(--inset);color:var(--ink);border:1px solid var(--line-strong)}
.btn.quiet:hover{background:var(--surface);color:var(--sun);border-color:var(--sun)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
/* trust strip — the light under the door, not a second call to action */
.trust-strip{background:var(--void);color:var(--sun);font-weight:600;text-align:center;padding:11px 16px;font-size:.95rem;
border-top:1px solid rgba(247,179,43,.55);border-bottom:1px solid var(--line);letter-spacing:.01em}
/* cards */
.grid{display:grid;gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card.door{display:flex;flex-direction:column}
.card.door .btn{margin-top:auto;align-self:flex-start}
.card .icon{font-size:1.7rem;margin-bottom:8px}
/* badges */
.badge{display:inline-block;padding:2.5px 9px;border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.02em;vertical-align:middle}
.badge.cred{background:var(--inset);color:var(--ink-2);border:1px solid var(--line-strong)}
.badge.verified{background:var(--leaf-bg);color:var(--leaf);border:1px solid var(--leaf-line)}
.badge.sample{background:var(--clay-bg);color:var(--clay);border:1px solid var(--clay-line)}
.badge.tag{background:var(--inset);color:var(--muted);border:1px solid var(--line)}
/* notices */
.notice{border-radius:var(--radius-sm);padding:14px 16px;margin:16px 0;font-size:.93rem}
.notice.info{background:var(--inset);border:1px solid var(--line);border-left:3px solid var(--line-strong)}
.notice.warn{background:var(--clay-bg);border:1px solid var(--clay-line);border-left:3px solid var(--clay)}
.notice.good{background:var(--leaf-bg);border:1px solid var(--leaf-line);border-left:3px solid var(--leaf)}
/* forms */
form.bo-form{display:grid;gap:14px;max-width:640px}
.field{display:grid;gap:5px}
.field label{font-weight:600;font-size:.92rem;color:var(--ink)}
.field .hint{font-size:.8rem;color:var(--muted)}
input,select,textarea{font-family:var(--font-body);font-size:1rem;padding:11px 12px;border:1.5px solid var(--line-strong);
border-radius:var(--radius-sm);background:var(--inset);color:var(--ink);width:100%}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:hover,select:hover,textarea:hover{border-color:#7392A3}
input:focus,select:focus,textarea:focus{outline:2.5px solid var(--sun);outline-offset:1px;border-color:var(--sun)}
input[type=checkbox],input[type=radio]{accent-color:var(--sun)}
.field.error input,.field.error select,.field.error textarea{border-color:var(--clay)}
.field .err-msg{color:var(--clay);font-size:.8rem;display:none}
.field.error .err-msg{display:block}
.form-status{display:none;border-radius:var(--radius-sm);padding:13px 15px;font-size:.93rem}
.form-status.show{display:block}
.form-status.ok{background:var(--leaf-bg);border:1px solid var(--leaf-line)}
.form-status.pending{background:var(--inset);border:1px solid var(--line-strong)}
.form-status.fail{background:var(--clay-bg);border:1px solid var(--clay-line)}
fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;background:var(--inset)}
legend{font-weight:600;font-size:.92rem;color:var(--ink);padding:0 6px}
.checkline{display:flex;gap:9px;align-items:flex-start;font-size:.92rem}
.checkline input{width:auto;margin-top:4px}
/* calculator — the answer is the one place the light lands */
.calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:880px){.calc-wrap{grid-template-columns:1fr}}
.calc-results .result-big{font-family:var(--font-head);font-size:2rem;color:var(--sun);font-weight:600}
.result-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
.result-row:last-child{border-bottom:none}
.result-row .rv{font-weight:700;color:var(--sun);text-align:right}
details.assumptions{border:1px solid var(--line);border-radius:var(--radius-sm);padding:0;margin-top:18px;background:var(--inset)}
details.assumptions summary{cursor:pointer;font-weight:600;padding:13px 16px;color:var(--ink)}
details.assumptions summary:hover{color:var(--sun)}
details.assumptions .assump-body{padding:4px 16px 16px;display:grid;gap:10px}
.assump-row{display:grid;grid-template-columns:1fr 130px;gap:10px;align-items:center;font-size:.88rem}
.assump-row input{padding:7px 9px;font-size:.92rem}
.assump-row .src{grid-column:1/-1;font-size:.74rem;color:var(--muted);margin-top:-4px}
/* battery appliance picker (batteries.html #calculator) */
.appl-head{display:grid;grid-template-columns:1fr 56px 66px 56px;gap:8px;font-size:.72rem;color:var(--muted);
text-transform:uppercase;letter-spacing:.04em;padding-bottom:6px;border-bottom:1px solid var(--line)}
.appl-row{display:grid;grid-template-columns:1fr 56px 66px 56px;gap:8px;align-items:center;font-size:.88rem;
padding:8px 0;border-bottom:1px dashed var(--line)}
.appl-row:last-child{border-bottom:none}
/* FIX (lane v1.9.0, found by the mobile gate): this label is a flex row and flex does not wrap by
default, so the fridge's duty-cycle hint was laid out BESIDE the label text and pushed 160px past
the right edge of the viewport at 390px -- the whole page scrolled sideways on a phone. It has
been doing that on the live site since the calculator shipped. The hint now takes its own line. */
.appl-row label{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;font-weight:600;color:var(--ink);cursor:pointer}
.appl-row label .hint{flex:1 0 100%;margin-top:2px}
.appl-row label input[type=checkbox]{margin-top:3px;flex:0 0 auto}
.appl-row input[type=number]{padding:6px 7px;font-size:.85rem;width:100%}
@media(max-width:520px){
.appl-head{display:none}
.appl-row{grid-template-columns:1fr;gap:4px;padding:10px 0}
.appl-row input[type=number]{display:inline-block;width:70px;margin-right:8px}
}
/* maps — the tiles stay light on purpose (a data surface stays readable); only the frame goes dark */
.map-box{height:440px;border-radius:var(--radius);border:1px solid var(--line-strong);z-index:1;background:var(--inset);
box-shadow:var(--shadow-sm)}
.map-box.tall{height:560px}
@media(max-width:640px){.map-box,.map-box.tall{height:340px}}
.map-fallback{padding:20px;background:var(--inset);border:1px solid var(--line);border-radius:var(--radius);text-align:center}
/* directory */
.pro-list{display:grid;gap:16px;margin-top:20px}
.pro-card{display:grid;gap:8px}
.pro-card .pro-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pro-card .pro-head h3{margin:0}
.pro-meta{font-size:.88rem;color:var(--muted)}
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;background:var(--inset);border:1px solid var(--line);
padding:16px;border-radius:var(--radius);margin:18px 0}
.filter-bar .field{min-width:180px;flex:1}
.filter-bar .field.slim{flex:0 1 140px;min-width:120px}
/* guides */
.guide-card{display:flex;flex-direction:column;gap:6px}
.guide-card .meta{font-size:.8rem;color:var(--muted)}
.guide-card a.title{font-family:var(--font-head);font-size:1.2rem;font-weight:600;text-decoration:none;color:var(--head)}
.guide-card a.title:hover{color:var(--sun)}
article.guide{max-width:760px;margin:0 auto}
article.guide .tldr{background:var(--inset);border:1px solid var(--line);border-left:4px solid var(--sun);
border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:16px 18px;margin:20px 0}
article.guide table{border-collapse:collapse;width:100%;font-size:.9rem;margin:14px 0}
article.guide th,article.guide td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
article.guide th{background:var(--inset);color:var(--head)}
article.guide tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
article.guide .facts-date{font-size:.8rem;color:var(--muted)}
[data-product-slot]{display:none}/* phase-3 affiliate slots, empty in v1 */
/* steps — numbered lights */
.steps{counter-reset:step;display:grid;gap:14px}
.step{display:flex;gap:14px;align-items:flex-start}
.step::before{counter-increment:step;content:counter(step);flex:none;width:34px;height:34px;border-radius:50%;
background:var(--sun);color:var(--void);font-weight:700;display:flex;align-items:center;justify-content:center;
box-shadow:0 0 18px rgba(247,179,43,.22)}
/* footer */
.site-footer{background:var(--void);color:var(--ink-2);margin-top:0;padding:52px 0 28px;font-size:.9rem;border-top:1px solid var(--line)}
.site-footer a{color:var(--ink-2)}
.site-footer a:hover{color:var(--sun)}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
@media(max-width:720px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer h4{color:var(--head);font-family:var(--font-body);font-size:.85rem;text-transform:uppercase;letter-spacing:.07em}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.site-footer .legal{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;font-size:.8rem;color:var(--muted)}
.site-footer .legal a{color:var(--muted)}
.pledge{font-style:italic;color:var(--ink)}
/* misc */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--sun);color:var(--void);padding:10px 16px;z-index:2000;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center}
@media(max-width:640px){.stat-strip{grid-template-columns:1fr}}
.stat-strip .num{font-family:var(--font-head);font-size:1.7rem;color:var(--sun);font-weight:700}
.leaflet-container{font-family:var(--font-body)}
/* Leaflet ships its attribution links at #0078a8 on its own #cfd1d3 bar — 3.2:1, below AA. Darkened here
(5.8:1). The tiles and popups keep Leaflet's light defaults: a map is a data surface, not page chrome. */
.leaflet-control-attribution a{color:#00506E}
/* dark scrollbars */
html{scrollbar-color:#3A4C59 var(--night)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--night)}
::-webkit-scrollbar-thumb{background:#3A4C59;border-radius:8px;border:3px solid var(--night)}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong)}
/* ── Hero calculator (era-1 item 1.1.0, lane v1.7.0) ───────────────────────────
Lives in the hero and answers before the visitor touches anything. --sun is spent
only on the answer itself and the primary action, per the dark token rules above. */
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}
.hero-copy h1{margin-top:0}
.hcalc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);padding:22px}
.hc-h{font-size:1.2rem;margin:0 0 14px}
.hc-modes{display:flex;gap:8px;margin-bottom:14px}
.hc-mode{flex:1;background:var(--inset);color:var(--ink-2);border:1px solid var(--line-strong);
border-radius:var(--radius-sm);padding:9px 10px;font:inherit;font-size:.9rem;cursor:pointer}
.hc-mode[aria-pressed="true"]{background:var(--sun-tint);border-color:var(--sun);color:var(--head)}
.hc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.hc-chip{display:inline-flex;align-items:baseline;gap:7px;background:var(--inset);color:var(--ink-2);
border:1px solid var(--line-strong);border-radius:999px;padding:8px 13px;font:inherit;font-size:.9rem;cursor:pointer}
.hc-chip[aria-pressed="true"]{background:var(--sun-tint);border-color:var(--sun);color:var(--head)}
.hc-chip .hc-w{font-size:.76rem;color:var(--muted)}
.hc-chip[aria-pressed="true"] .hc-w{color:var(--ink-2)}
.hc-chip .hc-qty{font-size:.78rem;color:var(--muted)}
.hc-field{margin-bottom:14px}
.hc-field label{display:block;font-size:.88rem;color:var(--ink-2);margin-bottom:5px}
.hc-field select,.hc-field input{width:100%;background:var(--inset);color:var(--ink);
border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:10px 11px;font:inherit;font-size:.95rem}
.hc-hint{display:block;font-size:.78rem;color:var(--muted);margin-top:4px}
.hc-out{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.hc-empty{color:var(--muted);font-size:.92rem;margin:0}
.hc-answer{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hc-num{font-family:var(--font-head);font-size:clamp(2rem,5vw,2.6rem);font-weight:700;color:var(--sun);line-height:1}
.hc-num-cap{font-size:.9rem;color:var(--ink-2)}
.hc-tier{margin-top:14px;padding:12px 14px;background:var(--inset);border-radius:var(--radius-sm);
border:1px solid var(--line)}
.hc-tier-name{color:var(--head);font-weight:600}
.hc-band{color:var(--ink);font-size:.95rem;margin-top:3px}
.hc-asof{color:var(--muted);font-size:.8rem}
.hc-ex{margin-top:12px}
.hc-ex-h{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.hc-ex ul{list-style:none;margin:0;padding:0}
.hc-ex li{font-size:.9rem;color:var(--ink-2);padding:4px 0;border-bottom:1px solid var(--line)}
.hc-ex li:last-child{border-bottom:0}
.hc-ex-p{color:var(--muted);font-size:.84rem}
.hc-note{font-size:.9rem;color:var(--ink-2);margin:12px 0 0}
.hc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hc-math{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.hc-math summary{cursor:pointer;color:var(--ink-2);font-size:.9rem}
.hc-math summary:hover{color:var(--sun)}
.hc-math p,.hc-math li{font-size:.88rem;color:var(--ink-2)}
.hc-steps{padding-left:20px;margin:10px 0}
.hc-steps li{margin-bottom:5px}
.hc-fine{color:var(--muted);font-size:.82rem}
@media (max-width:860px){
.hero-grid{grid-template-columns:1fr;gap:26px}
/* MOBILE-FIRST: the calculator goes ABOVE the copy on a phone. Measured at 390px before this
rule, the card started ~850px down -- a full screen of prose before the thing the roadmap
says should meet the visitor. The copy still reads fine underneath it. */
.hcalc{order:1;padding:18px}
.hero-copy{order:2}
.hero-copy h1{font-size:clamp(1.6rem,7vw,2rem)}
}
/* ── Products catalog: filter + sort bar (era-1 item 1.2.0, lane v1.8.0) ─────── */
.cat-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
background:var(--inset);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:22px}
.cat-f label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px}
.cat-f select{width:100%;background:var(--night);color:var(--ink);border:1px solid var(--line-strong);
border-radius:var(--radius-sm);padding:9px 10px;font:inherit;font-size:.9rem}
.cat-count-wrap{display:flex;align-items:flex-end;gap:10px;justify-content:space-between}
.cat-count{font-size:.85rem;color:var(--muted)}
.cat-tags{display:flex;gap:6px;flex-wrap:wrap}
.cat-tag{display:inline-block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
background:var(--night);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.cat-tag.sold{background:var(--leaf-bg);color:var(--leaf);border-color:var(--leaf-line)}
@media (max-width:620px){ .cat-bar{grid-template-columns:1fr} }
/* Guide tables on a phone: the TABLE scrolls inside its own box, the page does not. Two guides
(importing solar panels, remote connectivity) carry four-column cost tables that cannot fit 390px,
and before this rule they dragged the whole document sideways. Found by the v1.9.0 mobile gate. */
@media (max-width:700px){
article.guide table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
article.guide table tbody,article.guide table thead{display:table;width:100%;min-width:420px}
}
/* ═══════════════════════════════════════════════════════════════════════════════════════
v1.11.0 — THE DESIGN IMPORT LAYER
Derived by reading the five artboards of Claude Design project 566c29c6, written to
_pipeline/imported/design-566c29c6/ and specified in _pipeline/DESIGN-SPEC-v1.11.0.md.
APPENDED, NOT MERGED. Every rule below re-states a selector defined earlier in this file
and wins on source order. The v1.5.0 token set stays legible as what Ryan ruled, and a
reader can see exactly what the redesign changed by reading this block alone.
WHAT THIS LAYER DOES NOT DO — and why:
· It does not touch the navigation. The design draws the pre-1.6.0 IA; ADOPT-01 rules
the current one. (DESIGN-CONFLICT-01)
· It does not change a typeface. (DECISION 2 — see THE FONT BLOCK immediately below.)
· It does not re-point a colour token. The design's palette and the ruled one differ by
a few points; re-pointing churns a measured contrast baseline for nothing. (DECISION 3)
· It does not add a dimmer fourth text tier, though the design has one. The ruled set
clears AAA (7:1) on every ground and a tier below --muted cannot. Hierarchy below
--muted is carried by SIZE and TRACKING instead — the mono micro-label. (see §2)
═══════════════════════════════════════════════════════════════════════════════════════ */
/* ── THE FONT BLOCK (DECISION 2) ─────────────────────────────────────────────────────────
Switching the site to the design's typefaces is THREE values here plus one per page
head. That is a brand call and therefore Ryan's; the ready-to-run change is written out in
full in _pipeline/HELD-ITEMS.md. RULED 2026-09-16 14:35 +08 by Ryan ("Design = canon"): all
three faces are now the design's. Nothing else in the stylesheet names a font, so reverting
is these same three values plus the in each page head. */
:root{
--font-head:"Newsreader",Georgia,serif;
--font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* ── shape, measure and rhythm (spec §3) ─────────────────────────────────────────────── */
:root{
--maxw:1180px; /* was 1080px — the artboards' inner container is 1180px */
--radius-lg:16px; /* card radius, 25 uses in the design */
--pill:999px; /* buttons, badges, eyebrows — 35 uses */
--hatch:repeating-linear-gradient(135deg,rgba(247,179,43,.09) 0 8px,transparent 8px 16px);
--glow-dot:0 0 0 4px rgba(247,179,43,.16),0 0 22px 6px rgba(247,179,43,.45);
--lift:0 30px 70px rgba(0,0,0,.5); /* the ONE real drop shadow in the design */
}
.section{padding:64px 0}
.section.alt{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.tight{padding:52px 0}
/* ── typography (spec §1) ─────────────────────────────────────────────────────────────
The single largest difference from the live site: the design sets its display face at
REGULAR weight, never bold, and lets size carry the emphasis. */
h1,h2,h3,h4{font-family:var(--font-head);color:var(--head);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.4vw,3.55rem);font-weight:400;line-height:1.05;letter-spacing:-.025em;max-width:20ch}
h2{font-size:clamp(1.6rem,3.6vw,2.15rem);font-weight:400;line-height:1.12;letter-spacing:-.02em;margin-top:0}
h3{font-size:1.32rem;font-weight:400;line-height:1.25;letter-spacing:-.012em}
h4{font-weight:500}
body{line-height:1.6}
p{margin:.4em 0 1em;text-wrap:pretty}
.lead{font-size:1.1rem;line-height:1.6;color:var(--ink-2);max-width:60ch}
.small{font-size:.85rem;color:var(--muted)}
/* the mono role: eyebrows, column heads, capacities, prices, step numbers, fine print.
Tabular figures so numbers in a column line up, which is the point of the role. */
.mono,.eyebrow,.stepnum,.microlabel,.figure,.site-footer h4,.hc-ex-h,.cat-f label,.cat-tag,
.appl-head,.hc-num,.stat-strip .num,.calc-results .result-big,.result-row .rv,.ladder-cap,.ladder-price{
font-family:var(--font-mono);
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1,"cv05" 1;
}
.microlabel,.site-footer h4,.hc-ex-h,.cat-f label{
font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:500;
}
/* ── the eyebrow pill (spec §4.2) ─────────────────────────────────────────────────────── */
.eyebrow{
display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
padding:6px 14px;border:1px solid var(--line);border-radius:var(--pill);
font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500;
}
.eyebrow::before{
content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--sun);
box-shadow:0 0 10px 2px rgba(247,179,43,.55);
}
.eyebrow.plain::before{display:none}
/* ── buttons: full pills (spec §3.4, §4.3, §4.4) ─────────────────────────────────────── */
.btn{
display:inline-block;padding:13px 24px;border-radius:var(--pill);font-weight:600;
font-size:.97rem;line-height:1.2;border:1px solid transparent;
transition:background .15s,box-shadow .15s,border-color .15s,color .15s;
}
.btn.primary{background:var(--sun);color:var(--void);border-color:var(--sun);box-shadow:0 0 34px rgba(247,179,43,.26)}
.btn.primary:hover{background:var(--sun-soft);border-color:var(--sun-soft);color:var(--void);box-shadow:0 0 44px rgba(247,179,43,.34)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong);font-weight:500}
.btn.ghost:hover{border-color:var(--sun);color:var(--sun-soft);background:transparent}
.btn.quiet{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn.quiet:hover{background:var(--sun-tint);border-color:var(--sun);color:var(--sun-soft)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* ── header: the logo dot glows, the links are quiet (spec §4.1) ─────────────────────── */
.site-header .container{min-height:66px;gap:22px}
.brand{font-weight:400;font-size:1.3rem;letter-spacing:-.01em}
.brand .brand-sub{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.11em;color:var(--muted)}
.nav{gap:6px}
.nav a{border-radius:var(--pill);padding:8px 14px;font-size:.92rem;color:var(--ink-2)}
.nav a:hover{background:rgba(255,255,255,.06);color:var(--head)}
.nav a.active{background:transparent;color:var(--head);box-shadow:none;position:relative}
.nav a.active::after{
content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1.5px;border-radius:2px;background:var(--sun);
}
/* ── hero: the lamp is just out of frame, top right (spec §5 Home) ───────────────────── */
.hero{padding:76px 0 68px;background:var(--void)}
.hero::after{
content:"";position:absolute;top:-240px;right:-140px;width:740px;height:740px;border-radius:50%;
pointer-events:none;z-index:0;
background:radial-gradient(circle,rgba(247,179,43,.20) 0%,rgba(247,179,43,.07) 38%,rgba(247,179,43,0) 70%);
}
.hero .container{position:relative;z-index:1}
.hero h1{color:var(--head);max-width:20ch}
/* only the home hero shares its row with the calculator card, so only it takes the design's
tight 15ch measure; a single-column hero at 15ch wrapped the Products headline to five
lines with half the row empty -- found by looking at the render, not by a test. */
.hero .hero-copy h1{max-width:15ch}
.hero p.lead{font-size:1.16rem;max-width:56ch;color:var(--ink-2)}
.hero .btn-row{margin-top:28px}
.hero-grid{gap:48px}
/* ── cards: a hairline and a ground shift, not a shadow (spec §3.5, §4.5) ────────────── */
.card{
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:26px;box-shadow:none;transition:border-color .15s,background .15s;
}
.card:hover{border-color:rgba(247,179,43,.35)}
.grid{gap:18px}
.card.door .icon{
font-size:1.15rem;width:44px;height:44px;margin-bottom:0;border-radius:11px;
background:var(--sun-tint);border:1px solid rgba(247,179,43,.3);
display:flex;align-items:center;justify-content:center;
}
.card.door h3{margin-top:18px}
.card.door .btn{margin-top:auto;align-self:flex-start;padding:0;border:none;background:none;
color:var(--sun);font-weight:500;font-size:.9rem;border-radius:0}
.card.door .btn:hover{background:none;color:var(--sun-soft);border:none}
/* ── badges: pills, mono, quiet (spec §3.4) ──────────────────────────────────────────── */
.badge{
font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
padding:3.5px 10px;border-radius:var(--pill);font-weight:500;
}
/* ── photo slots (spec §4.11, DECISION 6 — mark, do not fill) ─────────────────────────
Ten of these are named in the design. Nothing is generated, downloaded or invented:
each slot is a bounded region that says in words what photograph belongs in it. */
.photo-slot{
height:150px;display:flex;align-items:center;justify-content:center;text-align:center;
padding:0 16px;background-color:var(--inset);background-image:var(--hatch);
border-bottom:1px solid var(--line);
}
.photo-slot span{
font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.photo-slot.tall{height:210px}
/* ── guide cards: photo slot on top, category, serif title (spec §4.10) ──────────────── */
.guide-card{
gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
background:var(--surface);transition:border-color .15s;
}
.guide-card:hover{border-color:rgba(247,179,43,.35)}
.guide-card .gc-body{display:flex;flex-direction:column;gap:8px;padding:20px}
.guide-card .meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sun)}
.guide-card a.title{font-family:var(--font-head);font-size:1.25rem;font-weight:400;line-height:1.25;letter-spacing:-.01em}
.guide-card p{margin:0;font-size:.92rem;line-height:1.55;color:var(--muted)}
/* ── numbered steps: mono numerals, not circles (spec §4.9) ──────────────────────────── */
.steps{gap:34px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.step{display:block}
.step::before{
counter-increment:step;content:"0" counter(step);
display:block;width:auto;height:auto;border-radius:0;background:none;border:none;box-shadow:none;
font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--sun);
margin-bottom:12px;line-height:1;text-align:left;
}
.step>div{font-size:.98rem;line-height:1.65;color:var(--ink-2)}
.step>div strong{display:block;font-family:var(--font-head);font-size:1.32rem;font-weight:400;
color:var(--head);letter-spacing:-.012em;margin-bottom:8px}
/* ── the ladder rows: the accent climbs with the rung (spec §4.7) ────────────────────── */
.ladder-rows{display:grid;gap:10px}
.ladder-row{
display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:18px;align-items:center;
padding:16px 20px;border:1px solid var(--line);border-left:3px solid rgba(247,179,43,.35);
border-radius:12px;background:var(--inset);
}
.ladder-row.r2{border-left-color:rgba(247,179,43,.55)}
.ladder-row.r3{border-left-color:rgba(247,179,43,.75)}
.ladder-row.r4{border-left-color:var(--sun);border-color:rgba(247,179,43,.3);
background:linear-gradient(90deg,rgba(247,179,43,.07),var(--inset) 60%)}
.ladder-cap{font-size:.95rem;color:var(--sun-soft)}
.ladder-row .ladder-what{font-size:.93rem;color:var(--ink-2)}
.ladder-price{font-size:.83rem;color:var(--muted);white-space:nowrap}
@media(max-width:560px){
.ladder-row{grid-template-columns:1fr auto;gap:6px 14px}
.ladder-row .ladder-what{grid-column:1/-1}
}
/* ── the stat strip: mono figures (spec §4.12) ───────────────────────────────────────── */
.stat-strip{gap:28px;text-align:left;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.stat-strip .num{font-family:var(--font-mono);font-size:2rem;font-weight:500;color:var(--sun-soft);letter-spacing:-.01em}
.stat-strip p{margin:8px 0 0;font-size:.93rem;line-height:1.55;color:var(--muted)}
/* ── the hero calculator: the one card that lifts off the page (spec §4.6) ───────────── */
.hcalc{
border:1px solid rgba(247,179,43,.22);border-radius:18px;padding:24px;
background:linear-gradient(180deg,var(--surface) 0%,var(--band) 100%);
box-shadow:var(--lift);
}
.hc-h{font-family:var(--font-head);font-size:1.4rem;font-weight:400;letter-spacing:-.015em;margin:0 0 4px}
.hc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hc-flag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sun)}
.hc-sub{font-size:.88rem;line-height:1.55;color:var(--muted);margin:0 0 18px}
.hc-mode,.hc-chip{border-radius:var(--pill)}
.hc-chip .hc-w,.hc-chip .hc-qty{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.hc-chip .hc-qty{color:var(--ink-2)}
.hc-field label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hc-out{border-top:1px solid var(--line);padding-top:18px}
.hc-answer{
padding:16px;border-radius:12px;background:rgba(247,179,43,.09);border:1px solid rgba(247,179,43,.26);
align-items:baseline;
}
.hc-num{font-size:1.9rem;font-weight:500;color:var(--sun-soft);letter-spacing:-.01em}
.hc-num-cap{font-size:.85rem;color:var(--ink-2)}
.hc-tier{background:transparent;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.hc-tier-name{font-weight:500;color:var(--head)}
.hc-band{font-family:var(--font-mono);font-size:.92rem;color:var(--ink)}
.hc-asof{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted)}
.hc-ex li{font-size:.88rem}
.hc-fine,.hc-ex-p{font-size:.8rem;color:var(--muted)}
/* ── the appliance table: gaps read as hairlines (spec §4.6) ─────────────────────────── */
.appl-head{
font-family:var(--font-mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.appl-row input[type=number]{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.appl-row label{font-weight:500}
/* ── products: the rung ramp carries into the catalog (spec §4.8) ────────────────────── */
.cat-bar{border-radius:var(--radius-lg)}
.cat-tag{font-size:.64rem;letter-spacing:.08em;border-radius:var(--pill)}
#cat-grid .card,#ladder-fallback .card{border-left:3px solid rgba(247,179,43,.3)}
#cat-grid .card[data-class="wall-battery"]{border-left-color:rgba(247,179,43,.6)}
.cat-count{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em;color:var(--muted)}
/* ── forms and results ───────────────────────────────────────────────────────────────── */
.field label{font-weight:500}
.calc-results .result-big{font-weight:500;color:var(--sun-soft)}
.result-row .rv{font-weight:500;color:var(--sun-soft)}
.notice{border-radius:12px}
.filter-bar{border-radius:var(--radius-lg)}
.map-box,.map-fallback{border-radius:var(--radius-lg)}
/* ── the trust strip reads as fine print, not a second call to action ────────────────── */
.trust-strip{
background:var(--void);color:var(--muted);font-family:var(--font-mono);font-weight:400;
font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;padding:13px 16px;
}
/* ── footer: mono column heads, no heavy chrome (spec §4.13) ─────────────────────────── */
.site-footer{padding:56px 0 32px;border-top:1px solid var(--line)}
.site-footer .cols{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.site-footer h4{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.11em;color:var(--muted);font-weight:500;margin-bottom:14px}
.site-footer ul{gap:9px}
.site-footer a{color:var(--ink-2)}
.site-footer .pledge{font-style:normal;font-size:.88rem;line-height:1.6;color:var(--muted);max-width:40ch}
.site-footer .legal{font-size:.78rem}
/* ── phone: the redesign must not cost the mobile gate ───────────────────────────────── */
@media(max-width:880px){
.hero{padding:44px 0 48px}
.hero::after{width:520px;height:520px;top:-200px;right:-180px}
.section{padding:44px 0}
.section.tight{padding:36px 0}
.hero-grid{gap:28px}
.nav a{border-radius:10px}
.nav a.active::after{display:none}
.nav a.active{background:rgba(255,255,255,.09)}
}
@media(max-width:640px){
.card{padding:22px}
.hcalc{padding:20px;border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.stat-strip{gap:22px}
.photo-slot{height:132px}
}
/* ── source-order corrections (v1.11.0) ──────────────────────────────────────────────────
A plain rule later in a file beats an earlier rule inside a media query, because a media
query adds no specificity. Three rules from the v1.9.0 mobile gate sit in an earlier
@media(max-width:860px) block and would have been silently undone by the layer above.
They are restated here, last, so the phone behaviour this project measured still holds. */
@media(max-width:860px){
.hcalc{order:1;padding:18px}
.hero-copy{order:2}
.hero-copy h1{font-size:clamp(1.7rem,7vw,2.1rem)}
}
/* the guide card carries its own padding on .gc-body, so the card itself has none */
.guide-card{padding:0}
.guide-card .gc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.guide-card .meta{margin:0}
/* ═══════════════════════════════════════════════════════════════════════════════════════
v1.13.0 — THE LAYOUT PORT
v1.11.0 took the artboards' CRAFT (tokens, radii, weights, rhythm) and left the live
MARKUP alone. This layer is the other half: the artboards' COMPOSITION — section order,
column structure, card and table shapes. Markup moved in index.html, js/main.js,
js/herocalc.js, js/guides.js and the new js/ladder.js; the rules below dress it.
Nothing here re-points a colour token (RAT-0916-3) or names a typeface (TYPEFACE-01).
═══════════════════════════════════════════════════════════════════════════════════════ */
/* ── G1 header: wordmark + one glowing dot, items pushed right ────────────────────────── */
.brand-dot{
width:11px;height:11px;flex:none;border-radius:50%;background:var(--sun);box-shadow:var(--glow-dot);
}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand svg{display:none}
.brand-word{font-family:var(--font-head);font-size:1.3rem;font-weight:400;letter-spacing:-.01em;color:var(--head)}
.site-header .nav{margin-left:auto}
/* ── G2 hero: one lead, one quiet line, then the mono pledge ──────────────────────────── */
.hero .hero-copy .lead{margin-bottom:10px}
.lead-quiet{font-size:1rem;line-height:1.6;color:var(--muted);max-width:56ch;margin:0}
.pledge-line{
font-family:var(--font-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);margin:26px 0 0;max-width:60ch;line-height:1.7;
}
/* ── G5 door glyphs: one amber mark in a 40px outlined square. Drawn, not fetched. ────── */
.card.door .icon{width:40px;height:40px;border-radius:10px}
.card.door .icon>span{display:block}
.glyph-dot{width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 14px 3px rgba(247,179,43,.6)}
.glyph-sq{width:14px;height:14px;border:1.5px solid var(--sun);border-radius:3px}
.glyph-bar{width:3px;height:15px;background:var(--sun)}
/* ── G4 the ladder: copy column beside the four rungs ─────────────────────────────────── */
.ladder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px;align-items:start}
.ladder-grid p{font-size:1rem;line-height:1.65;color:var(--muted);max-width:52ch}
.ladder-more,.head-more{font-size:.92rem;font-weight:500;color:var(--sun);text-decoration:none}
.ladder-more:hover,.head-more:hover{color:var(--sun-soft)}
/* ── G7 a section heading and its "more" link share one baseline ──────────────────────── */
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.head-row h2{margin:0}
.guide-card .gc-dek{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
margin:0;font-size:.9rem;line-height:1.55;color:var(--muted);
}
/* ── G8 the stat strip: large mono figures on the page ground, ruled above and below ──── */
.section.stat-band{
padding:54px 0;background:var(--night);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat-strip{text-align:left;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.stat-strip .num{font-size:2.1rem;font-weight:500;color:var(--sun-soft);line-height:1.1}
.stat-strip .small{margin-top:8px;font-size:.9rem;line-height:1.55;color:var(--muted)}
/* ── G3 the calculator card: a titled head, a table, then a recessed answer panel ─────── */
.hc-head{margin-bottom:2px}
.hc-modes{margin:14px 0 14px}
.hc-chips{
display:grid;gap:1px;margin-bottom:16px;
background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;
}
.appl-head,.hc-chip{
display:grid;grid-template-columns:minmax(0,1fr) 46px 58px;gap:10px;align-items:center;text-align:left;
}
.appl-head{padding:9px 13px;background:var(--void);font-size:.64rem}
.appl-head span+span{text-align:right}
.hc-chip{
width:100%;padding:10px 13px;border:0;border-radius:0;background:var(--inset);
color:var(--ink-2);font:inherit;font-size:.88rem;cursor:pointer;
}
.hc-chip[aria-pressed="true"]{background:var(--sun-tint);color:var(--head);border:0}
.hc-chip:hover{background:rgba(255,255,255,.05)}
.hc-chip[aria-pressed="true"]:hover{background:rgba(247,179,43,.16)}
.hc-appl{display:inline-flex;align-items:baseline;gap:8px;min-width:0}
.hc-chip .hc-w{font-size:.72rem;color:var(--muted)}
.hc-chip .hc-qty,.hc-chip .hc-hrs{
font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.82rem;
text-align:right;color:var(--muted);
}
.hc-chip[aria-pressed="true"] .hc-qty,.hc-chip[aria-pressed="true"] .hc-hrs{color:var(--ink-2)}
.hc-answer{
display:block;padding:14px 16px;border-radius:12px;
background:rgba(247,179,43,.09);border:1px solid rgba(247,179,43,.26);
}
.hc-arow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0}
.hc-arow+.hc-arow{border-top:1px solid rgba(247,179,43,.2)}
.hc-alabel{font-size:.82rem;color:var(--ink-2);flex:none}
.hc-num{font-size:1.6rem;font-weight:500;color:var(--sun-soft);line-height:1.1;text-align:right}
.hc-tier-name{font-size:.92rem;font-weight:600;color:var(--head);text-align:right}
.hc-band{font-family:var(--font-mono);font-size:.88rem;color:var(--ink);text-align:right}
.hc-ex,.hc-note{margin-top:14px}
/* ── G9 footer: four columns, the wordmark carrying the same dot ──────────────────────── */
.f-word{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:1.25rem;color:var(--head);margin-bottom:12px}
.f-word .brand-dot{width:9px;height:9px;box-shadow:0 0 18px 5px rgba(247,179,43,.4)}
.site-footer .f-neutral ul{list-style:none;margin:0;padding:0}
.site-footer .f-neutral li{font-size:.88rem;line-height:1.5;color:var(--muted)}
.site-footer .legal{margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
/* ── phone ────────────────────────────────────────────────────────────────────────────── */
@media(max-width:880px){
.ladder-grid{gap:26px}
.head-row{flex-wrap:wrap;gap:8px}
.pledge-line{margin-top:20px}
}
@media(max-width:640px){
.section.stat-band{padding:38px 0}
.stat-strip .num{font-size:1.8rem}
.hc-num{font-size:1.4rem}
.appl-head,.hc-chip{grid-template-columns:minmax(0,1fr) 38px 44px;gap:8px}
}
/* ── G3 continued: the controls the artboard does not draw stay, but read as controls, not
as a second call to action. The mode switch and the hours field are what make this
calculator real rather than a still life (DESIGN-CONFLICT-04), so they are kept and
made quiet; the card's foot is the artboard's one line of small print. ─────────────── */
.hc-modes{gap:6px;margin:14px 0 12px}
.hc-mode{
flex:1;padding:7px 12px;font-size:.8rem;font-weight:500;
background:transparent;border:1px solid var(--line);color:var(--muted);
}
.hc-mode[aria-pressed="true"]{background:var(--sun-tint);border-color:rgba(247,179,43,.5);color:var(--head)}
.hc-field{margin-bottom:14px}
.hc-field label{display:block;margin-bottom:6px}
.hc-field select,.hc-field input{padding:9px 12px;font-size:.88rem;border-radius:10px}
.hc-out{border-top:0;padding-top:0;margin-top:0}
.hc-print{margin:14px 0 0;font-size:.76rem;line-height:1.5;color:var(--muted)}
.hc-print a{color:var(--sun);text-decoration:none}
.hc-print a:hover{color:var(--sun-soft)}
.hc-ex{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.hc-ex-h{font-size:.62rem}
.hc-ex li{font-size:.82rem;padding:3px 0}
.hc-math{margin-top:10px;border-top:0;padding-top:0}
.hc-math summary{font-size:.76rem;color:var(--muted)}
.hc-math summary:hover{color:var(--ink-2)}
.hc-note{font-size:.84rem}
/* the mode switch and the hours control share one row, so keeping the calculator REAL
costs the card one line instead of three (measured: 312px taller than the artboard's
still life before this, 195px after). */
.hc-controls{display:flex;align-items:center;gap:10px;margin:12px 0 12px;flex-wrap:wrap}
.hc-controls .hc-modes{flex:1 1 200px;margin:0}
.hc-hours-field{display:flex;align-items:center;gap:8px;margin:0;flex:0 0 auto}
.hc-hours-field label{margin:0;white-space:nowrap}
.hc-hours-field select{width:auto;min-width:96px;max-width:210px}
.hc-chip{padding:8px 13px}
.appl-head{padding:8px 13px}
.hc-math{display:block;margin-top:6px}
.hc-print{margin-top:14px}
.hc-mode{white-space:nowrap;padding:7px 10px;font-size:.78rem}
.hc-hours-field select{min-width:150px}
.hc-hours-field label{font-size:.62rem}
/* ── v1.13.0 Products: the artboard's kicker, two-column calculator and two-column quote ── */
.kicker{
display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--sun);font-weight:500;margin:0 0 14px;
}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:40px;align-items:start}
.calc-side{display:grid;gap:16px}
.calc-side .calc-results{
border:1px solid rgba(247,179,43,.3);border-radius:18px;
background:linear-gradient(180deg,rgba(247,179,43,.10),var(--surface) 70%);box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.calc-side .side-note h3{margin:0 0 8px}
.calc-side .side-note p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}
.calc-side .side-note .btn{margin-top:14px;padding:11px 18px;font-size:.88rem}
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px;align-items:start}
.quote-grid .pledge-line{margin-top:20px}
/* the catalog card: description left, the price as a large mono figure in its own column */
#cat-grid .card{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,auto);gap:24px;align-items:start}
#cat-grid .cat-main{min-width:0}
.cat-price-col{
display:flex;flex-direction:column;justify-content:center;gap:6px;
padding-left:22px;border-left:1px solid var(--line);
}
.cat-big{
font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.15rem;
color:var(--sun-soft);line-height:1.2;
}
.cat-qual{font-size:.78rem;line-height:1.45;color:var(--muted)}
@media(max-width:760px){
#cat-grid .card{grid-template-columns:1fr;gap:14px}
.cat-price-col{padding-left:0;padding-top:14px;border-left:0;border-top:1px solid var(--line)}
}
/* the artboard's catalog is ONE full-width row per unit, which is what makes the
description/price split readable; a two-across grid squeezed both columns to a strip. */
#cat-grid{grid-template-columns:1fr;gap:14px}
#cat-grid .card{grid-template-columns:minmax(0,1fr) 230px;padding:24px 26px}
.cat-price-col{align-items:flex-start;text-align:left}
.cat-big{font-size:1.3rem}
#cat-grid .card{grid-template-columns:minmax(0,1fr) 252px}
.cat-big{white-space:nowrap}
/* ── v1.18.0 THE PRODUCT SHOWCASE ──────────────────────────────────────────────────────
Every catalogue row leads with a square product tile, the way a shop's listing page does.
The tile is a light plate because the pictures are supplier renders shot on white; on this
dark page a plate reads as the product's own card rather than as a hole punched in the row. */
#cat-grid .card.has-thumb{grid-template-columns:104px minmax(0,1fr) 252px;column-gap:22px}
.cat-thumb{
width:104px;height:104px;border-radius:14px;overflow:hidden;
background:#f4f6f8;border:1px solid rgba(255,255,255,.10);
display:flex;align-items:center;justify-content:center;
}
.cat-thumb img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:1100px){
#cat-grid .card.has-thumb{grid-template-columns:92px minmax(0,1fr) 200px;column-gap:18px}
.cat-thumb{width:92px;height:92px}
}
@media(max-width:760px){
#cat-grid .card.has-thumb{grid-template-columns:72px minmax(0,1fr);row-gap:12px}
.cat-thumb{width:72px;height:72px;border-radius:12px}
#cat-grid .card.has-thumb .cat-price-col{grid-column:1 / -1}
}
/* ── v1.13.0 Guides: the featured lead card and the neutrality band ───────────────────── */
.guide-lead{
display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0;margin-bottom:26px;
border:1px solid rgba(247,179,43,.28);border-radius:18px;overflow:hidden;color:var(--ink);
background:linear-gradient(120deg,rgba(247,179,43,.08),var(--surface) 55%);
text-decoration:none;transition:border-color .15s;
}
.guide-lead:hover{border-color:rgba(247,179,43,.55);color:var(--ink)}
.guide-lead .gl-body{padding:34px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.guide-lead .meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sun)}
.guide-lead h2{margin:0;font-size:2.1rem;line-height:1.14;max-width:24ch}
.guide-lead p{margin:0;font-size:.97rem;line-height:1.65;color:var(--muted);max-width:52ch}
.guide-lead .gl-more{font-size:.9rem;font-weight:500;color:var(--sun)}
.guide-lead .photo-slot{height:auto;min-height:250px;border-bottom:0}
.neutral-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;align-items:start}
.neutral-grid p{font-size:.95rem;line-height:1.65;color:var(--muted)}
.neutral-rows{display:grid;gap:12px}
.neutral-row{display:flex;gap:13px;align-items:baseline;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.nr-num{font-family:var(--font-mono);font-size:.76rem;color:var(--sun);flex:none}
/* ── v1.13.0 Map: the hero carries the map preview beside the copy ────────────────────── */
.eyebrow.filled{
border-color:rgba(247,179,43,.34);background:var(--sun-tint);color:var(--sun-soft);
font-family:var(--font-mono);
}
.map-preview{border:1px solid var(--line);border-radius:18px;background:var(--void);overflow:hidden}
.map-slot{height:320px;background-color:#0A0D12;border-bottom:1px solid var(--line)}
.map-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px}
.legend-ramp{display:flex;align-items:center;gap:8px}
.legend-ramp i{width:34px;height:8px;border-radius:2px;background:rgba(247,179,43,.15)}
.legend-ramp i:nth-child(2){background:rgba(247,179,43,.4)}
.legend-ramp i:nth-child(3){background:rgba(247,179,43,.7)}
.legend-ramp i:nth-child(4){background:var(--sun)}
.legend-range{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--ink-2)}
.card.lit{border-color:rgba(247,179,43,.26);background:linear-gradient(180deg,rgba(247,179,43,.07),var(--surface) 65%)}
.card .kicker{margin-bottom:10px}
.kicker.muted-kicker{color:var(--muted)}
.card .kicker+p{margin:0;font-size:.95rem;line-height:1.65;color:var(--ink-2)}
/* the wattage badge on a ticked row sits on the amber tint; --muted measured 6.49:1 there,
under the AAA 7:1 bar this project set for itself (BRAND-DARK-03). --ink-2 clears it. */
.hc-chip .hc-w{color:var(--ink-2)}
.hc-chip[aria-pressed="false"] .hc-w{color:var(--muted)}
/* On a ticked row the amber tint sits over the card gradient AND the hero's glow; the pixel
under that text measures rgb(62,69,66), where --ink-2 gives 6.49:1 -- AA, but under the
AAA 7:1 bar this project set. --ink measures clear of it. Found by the pixel sampler, not
by a token table: the composite ground is lighter than any token involved. */
.hc-chip[aria-pressed="true"] .hc-w,
.hc-chip[aria-pressed="true"] .hc-qty,
.hc-chip[aria-pressed="true"] .hc-hrs{color:var(--ink)}
/* same composite-ground effect inside the amber answer panel: the as-of date in --muted
measured 6.57:1 there. --ink-2 clears the AAA bar on that ground. */
.hc-answer .hc-asof{color:var(--ink-2)}
/* ============================================================================
v1.19.0 — THE RUNG LADDER HOME PAGE
From _pipeline/ux/USER-LADDER-v1.md. One question per rung, one answer per
rung; the answer is on screen after zero taps. Phone first (390x844), the
desktop puts the same rungs side by side. Only the home page (body.home-ladder)
is touched — every other page keeps the v1.13.0 layout exactly.
============================================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* --- RUNG 0 ------------------------------------------------------------- */
.r0{background:var(--void);padding:44px 0 28px;border-bottom:1px solid var(--line)}
.r0-h{font-family:var(--font-head);color:var(--head);margin:0 0 8px;
font-size:clamp(28px,7.6vw,46px);line-height:1.12;letter-spacing:-.01em;max-width:18ch}
.r0-sub{color:var(--ink-2);margin:0 0 16px;font-size:17px}
.r0-go{display:inline-flex;min-height:48px;align-items:center}
/* --- shared rung furniture ---------------------------------------------- */
.rungs section,.r5{padding:32px 0}
.rq{font-family:var(--font-head);color:var(--head);font-size:clamp(20px,5vw,26px);
margin:0 0 12px;line-height:1.2}
/* --- RUNG 1: the tiles --------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
min-height:86px;padding:12px 4px;border-radius:var(--radius);cursor:pointer;
background:var(--inset);border:1px solid var(--line);color:var(--ink-2);
font:500 13px/1.1 var(--font-body);transition:background .12s,border-color .12s,color .12s}
.tile .tile-ico{width:26px;height:26px;display:block;color:var(--muted)}
.tile .tile-ico svg{width:100%;height:100%;display:block}
.tile[aria-pressed="true"]{background:var(--sun-tint);border-color:var(--sun);color:var(--head)}
.tile[aria-pressed="true"] .tile-ico{color:var(--sun)}
.tile:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.tile-tag{font:600 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
color:var(--clay);background:var(--clay-bg);border-radius:var(--pill);padding:3px 6px}
.tile-big{grid-column:span 1}
/* --- RUNG 2: how long ---------------------------------------------------- */
.hours{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
min-height:66px;padding:12px 6px;border-radius:var(--radius);cursor:pointer;
background:var(--inset);border:1px solid var(--line);color:var(--ink-2);
font:600 14px/1.15 var(--font-body);text-align:center}
.hbtn .hb-s{font:400 11px/1 var(--font-mono);color:var(--muted)}
.hbtn[aria-pressed="true"]{background:var(--sun-tint);border-color:var(--sun);color:var(--head)}
.hbtn[aria-pressed="true"] .hb-s{color:var(--sun-soft)}
.hbtn:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
/* v1.25.0 UX-HOURS-02: the dial under the selected pick. Both buttons are 44 x 44 or larger. */
.hdial{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 0}
.hd-btn{min-width:48px;min-height:48px;border-radius:var(--radius);cursor:pointer;
background:var(--inset);border:1px solid var(--line-strong);color:var(--head);
font:600 22px/1 var(--font-body)}
.hd-btn[aria-disabled="true"]{opacity:.35;cursor:default}
.hd-btn:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.hd-val{min-width:9ch;text-align:center;color:var(--head);font:600 16px/1.2 var(--font-body)}
/* --- RUNG 3: the answer -------------------------------------------------- */
.r3{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* NOTE the double-class selector: `.rungs section` (0,1,1) out-specifies a bare `.r3`
(0,1,0), so a plain .r3 padding rule here is silently ignored. Measured, not assumed. */
.rungs .r3{padding-top:80px}
@media(min-width:900px){.rungs .r3{padding-top:32px}}
.r3-answer{font-family:var(--font-head);color:var(--head);margin:0 0 14px;
font-size:clamp(22px,5.6vw,32px);line-height:1.22;max-width:24ch}
.r3-answer b{color:var(--sun);font-weight:600;white-space:nowrap}
.r3-fig{margin:0 0 10px}
.r3-fig img{width:100%;max-width:340px;height:auto;display:block;border-radius:var(--radius-lg);
background:var(--inset);border:1px solid var(--line)}
.r3-fig figcaption,.r3-trust{color:var(--muted);font:400 12.5px/1.45 var(--font-body);
margin:8px 0 0;max-width:46ch}
.r3-small{color:var(--muted);font:400 12px/1.4 var(--font-mono);margin:8px 0 0}
/* v1.25.0 UX-ANSWER-02: two real units side by side, Minimum and Conservative. */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px;max-width:560px}
.pair-card{display:flex;flex-direction:column;gap:3px;padding:10px;min-width:0;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--ink-2)}
.pair-card[data-slot="both"]{grid-column:span 2}
.pair-card img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;display:block;margin:4px 0;
border-radius:var(--radius-sm);background:var(--inset)}
.pair-card[data-slot="both"] img{max-width:220px}
.pc-head{color:var(--head);font:600 14px/1.2 var(--font-body)}
.pc-name{color:var(--head);font:500 13px/1.3 var(--font-body)}
.pc-note,.pc-date{color:var(--muted);font:400 12px/1.35 var(--font-body)}
.pc-price{color:var(--sun);font:500 13px/1.3 var(--font-mono)}
.pc-sold{color:var(--leaf);font:500 11.5px/1.3 var(--font-body)}
.pc-empty{color:var(--ink-2);font:400 13px/1.4 var(--font-body)}
.pair-card a{display:inline-block;min-height:24px}
.r3-cta{margin:12px 0 0}
.r3-how{margin:14px 0 0;background:var(--inset);border:1px solid var(--line);
border-radius:var(--radius);padding:0}
.r3-how>summary{cursor:pointer;padding:12px 14px;color:var(--ink-2);
font:500 14px/1.2 var(--font-body);min-height:44px;display:flex;align-items:center}
.r3-how>summary:focus-visible{outline:2px solid var(--sun);outline-offset:-2px}
.r3-how .how-body{padding:0 14px 14px;color:var(--ink-2);font-size:14px;line-height:1.55}
.r3-how .how-body p{margin:0 0 10px}
.how-steps{margin:0 0 10px;padding-left:20px}
.how-steps li{margin:0 0 6px}
.how-fine{color:var(--muted);font-size:12.5px}
/* --- RUNG 4: smaller / this one / bigger --------------------------------- */
.sizes{display:grid;grid-template-columns:1fr;gap:10px}
.size-card{display:grid;grid-template-columns:72px 1fr;grid-template-areas:"img head" "img what" "img price";
gap:2px 12px;align-items:center;text-align:left;cursor:pointer;padding:12px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
color:var(--ink-2);font-family:var(--font-body);min-height:88px}
.size-card img{grid-area:img;width:72px;height:72px;object-fit:contain;border-radius:var(--radius-sm);
background:var(--inset)}
.sc-head{grid-area:head;color:var(--head);font:600 15px/1.2 var(--font-body)}
.sc-what{grid-area:what;font-size:13px;line-height:1.35;color:var(--ink-2)}
.sc-price{grid-area:price;font:500 13px/1.3 var(--font-mono);color:var(--sun)}
a.size-card{text-decoration:none}
.size-card.is-this{border-color:var(--sun);background:var(--sun-tint);box-shadow:var(--shadow-sm)}
.size-card.is-this .sc-head{color:var(--sun-soft)}
.size-card:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
/* --- RUNG 5: two doors, equal size --------------------------------------- */
.r5{background:var(--void);border-top:1px solid var(--line)}
.r5-doors{display:grid;grid-template-columns:1fr;gap:10px}
.r5-door{display:flex;align-items:center;justify-content:center;text-align:center;
min-height:60px;padding:16px;border-radius:var(--radius-lg);text-decoration:none;
font:600 16px/1.25 var(--font-body);background:var(--sun);color:#0A1014;border:1px solid var(--sun)}
.r5-door+.r5-door{background:transparent;color:var(--head);border-color:var(--line-strong)}
.r5-door:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
/* --- the home page footer is compact: rung 5 now carries the two journeys,
so the footer is reference, not navigation. Every link it had is still
here (the site-check link sweep is the proof) — only the spacing changed. */
body.home-ladder .site-footer{padding-top:22px;padding-bottom:18px}
body.home-ladder .site-footer .cols{gap:14px}
body.home-ladder .site-footer ul{margin:4px 0 0}
body.home-ladder .site-footer li{margin:0;line-height:1.5}
body.home-ladder .site-footer .f-brand .pledge{margin:4px 0 0;font-size:12.5px}
body.home-ladder .site-footer .legal{margin-top:14px;padding-top:12px}
body.home-ladder .site-footer .legal p{font-size:11.5px;line-height:1.45;margin:0 0 6px}
/* --- desktop: the same rungs, side by side ------------------------------- */
@media(min-width:900px){
.r0{padding:56px 0 40px}
.rungs section,.r5{padding:32px 0}
.tiles{grid-template-columns:repeat(7,1fr);gap:12px}
.tile{min-height:96px}
.hours{max-width:620px}
.sizes{grid-template-columns:repeat(3,1fr)}
.size-card{grid-template-columns:1fr;grid-template-areas:"img" "head" "what" "price";
align-items:start;text-align:left;padding:16px;gap:6px}
.size-card img{width:100%;height:120px}
.r5-doors{grid-template-columns:1fr 1fr;max-width:760px}
.r3-fig img{max-width:420px}
}
@media(prefers-reduced-motion:reduce){.tile,.hbtn{transition:none}}
/* --- v1.19.0 lane 4: the products page starts with the three sizes ------- */
.size-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.size-chip{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
min-height:56px;padding:12px;border-radius:var(--radius);cursor:pointer;
background:var(--inset);border:1px solid var(--line);color:var(--ink-2);font-family:var(--font-body)}
.size-chip .zc-l{font:600 15px/1.2 var(--font-body);color:var(--head)}
.size-chip .zc-w{font-size:12px;line-height:1.35;color:var(--muted)}
.size-chip[aria-pressed="true"]{background:var(--sun-tint);border-color:var(--sun)}
.size-chip[aria-pressed="true"] .zc-l{color:var(--sun-soft)}
.size-chip:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.cat-more,.cat-honesty{margin:0 0 14px;background:var(--inset);border:1px solid var(--line);
border-radius:var(--radius)}
.cat-more>summary,.cat-honesty>summary{cursor:pointer;padding:12px 14px;color:var(--ink-2);
font:500 14px/1.2 var(--font-body);min-height:44px;display:flex;align-items:center}
.cat-more>summary:focus-visible,.cat-honesty>summary:focus-visible{outline:2px solid var(--sun);outline-offset:-2px}
.cat-more .cat-bar{margin:0;padding:0 14px 14px;background:transparent;border:0}
.cat-honesty p{padding:0 14px 14px;margin:0}
.ask-form{max-width:560px}
@media(min-width:900px){
.size-chips{grid-template-columns:repeat(4,1fr)}
.size-chip{min-height:84px}
}
.site-footer a.f-word{text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:8px}
.site-footer a.f-word:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
/* --- v1.19.0 QA round 2: tap targets and equal doors ---------------------
Fresh-context QA 2026-09-20 measured the nav toggle at 39x37, the opened nav
links at 40px and the email box at 43px. Everything in the decision path was
already over 44px; these are the three that were not. */
.site-header .nav-toggle{min-width:44px;min-height:44px}
.site-header .nav a{min-height:44px;display:flex;align-items:center}
.bo-form input,.bo-form select,.bo-form textarea{min-height:44px}
.site-footer li a{display:inline-block;padding:4px 0}
/* The ladder file asks for "two doors, equal size". They were the same box but not the
same weight, which reads as a recommended door and a fallback. Now they read as a pair. */
.r5-door,.r5-door+.r5-door{background:var(--sun-tint);color:var(--head);border:1px solid var(--sun)}
.r5-door:hover{background:var(--sun-glow)}
/* ---- v1.21.0 honest doors ---- */
.site-footer .cols{grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:720px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer .f-doors{display:flex;flex-direction:column;gap:2px}
.site-footer .f-doors a{display:flex;align-items:center;min-height:44px;padding:0 4px;font-size:1rem;line-height:1.3;
text-decoration:none;border-bottom:1px solid var(--line)}
.site-footer .f-doors a:last-child{border-bottom:0}
.site-footer .f-word{min-height:44px;margin-bottom:8px}
.preview-banner{background:rgba(247,179,43,.12);border:1px solid rgba(247,179,43,.45);color:var(--ink);
border-radius:var(--radius-sm);padding:12px 16px;margin:0 0 16px;font-size:.95rem;line-height:1.5}
.preview-banner strong{color:var(--sun)}
.form-connection{margin-top:0}
/* ============================================================================
v1.28.0 — THE CALCULATOR LIVES IN THE HERO
Ryan 2026-09-27: the two questions and the two proposed units must fit inside
the hero, with no scroll, on a desktop screen. index.html now nests the
questions (#rungs) and the answer (#answer-wrap) inside .r0; the size cards
moved to #sizes-wrap below it. Phone: the same stack as before, question,
question, answer. From 1024px: questions left, answer right, one screen.
Measured by tests/hero-fold-check.js at 1920x945, 1440x800, 1366x657, 1280x720.
============================================================================ */
.r0-answer .r3{margin:24px 0 0;padding:16px 10px;border:1px solid var(--line);
border-radius:var(--radius-lg);scroll-margin-top:76px}
#sizes-wrap .r4{padding:32px 0}
/* The unit photos are supplier renders shot on white; a white plate (as on the catalogue rows)
stops a narrow photo reading as a white box floating on a dark one. */
.r0-answer .pair-card img{background:#fff}
@media(min-width:1024px){
.r0{padding:clamp(20px,3.4vh,36px) 0 clamp(20px,3.6vh,40px)}
.r0-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
gap:clamp(28px,3vw,48px);align-items:start}
.r0-h{font-size:clamp(30px,2.7vw,42px);max-width:21ch;margin:0 0 6px}
.r0-sub{margin:0}
.rungs section{padding:0}
.r0 .r1{margin-top:clamp(16px,3.2vh,30px)}
.r0 .r2{margin-top:clamp(14px,2.8vh,26px)}
.r0 .rq{font-size:clamp(18px,1.5vw,21px);margin:0 0 10px}
.r0 .tiles{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.r0 .tile{min-height:clamp(66px,9.5vh,84px);padding:8px 2px;gap:5px;font-size:12.5px}
.r0 .tile .tile-ico{width:24px;height:24px}
.r0 .hours{max-width:none}
.r0 .hbtn{min-height:clamp(50px,7vh,60px);padding:8px 6px}
.r0 .hdial{margin-top:10px}
.r0 .hd-btn{min-width:44px;min-height:44px}
.r0-answer .r3{margin:0;padding:clamp(14px,2.4vh,22px) clamp(16px,1.6vw,22px)}
.r0-answer .r3-answer{font-size:clamp(19px,1.6vw,25px);max-width:none;margin:0 0 12px}
.r0-answer .pair{max-width:none;margin:0}
.r0-answer .pair-card{padding:10px 12px}
.r0-answer .pair-card img{aspect-ratio:auto;width:100%;height:clamp(96px,21vh,210px);margin:6px 0}
.r0-answer .pair-card[data-slot="both"] img{max-width:none}
.r0-answer .r3-trust,.r0-answer .r3-small{display:inline-block;margin:10px 14px 0 0}
.r0-answer .r3-how{margin-top:10px}
.r0-answer .r3-how>summary{padding:10px 14px}
}
/* ============================================================================
v1.29.0 — A PROPER HERO, AND A TOGGLE THAT OPENS THE TOOL IN PLACE
Ryan 2026-09-27: the hero looks like a normal hero (a picture of the one
lit house in a dark street; a gradient stands in until the picture loads),
and one conspicuous toggle opens the v1.28.0 calculator inside it.
js/rungs.js sets .r0[data-open]; with no JavaScript it is never set and the
tool shows as before. The "Show me" button became the toggle, so it keeps
the .r0-go class that ladder-walk F6 measures.
============================================================================ */
.r0{position:relative;overflow:hidden;isolation:isolate}
.r0-bg{position:absolute;inset:0;z-index:-1;
/* placeholder: a dark street with one warm window, drawn in gradients */
background:
radial-gradient(ellipse 9% 7% at 74% 66%, rgba(255,196,92,.55), rgba(247,179,43,.18) 55%, transparent 100%),
radial-gradient(ellipse 34% 26% at 74% 68%, rgba(247,179,43,.16), transparent 70%),
linear-gradient(180deg,#08111c 0%,#0b1624 55%,#0a1014 100%);
background-size:cover;background-position:70% center}
/* the picture: Higgsfield gpt_image_2_5, 2026-09-27, one lit house in a dark street (lane v1.29.0) */
.r0-bg.has-img{--hero-img:url(../assets/hero/one-lit-house-1344.webp)}
@media(max-width:800px){.r0-bg.has-img{--hero-img:url(../assets/hero/one-lit-house-800.webp)}}
.r0-bg.has-img{background-image:
linear-gradient(180deg,rgba(10,16,20,0) 60%,rgba(10,16,20,.9) 100%),
linear-gradient(90deg,rgba(10,16,20,.9) 0%,rgba(10,16,20,.66) 38%,rgba(10,16,20,.12) 72%,rgba(10,16,20,0) 100%),
var(--hero-img);
background-size:cover;background-position:70% center}
/* open: the picture dims so the tool reads */
.r0[data-open="true"] .r0-bg::after{content:"";position:absolute;inset:0;background:rgba(10,16,20,.82)}
/* closed: a normal hero -- headline, one line, one toggle; the tool and the size cards wait */
.r0[data-open="false"]{min-height:clamp(440px,calc(100svh - 67px),860px);display:flex;align-items:center}
.r0[data-open="false"] .r0-grid{display:block;width:100%}
.r0[data-open="false"] .rungs,
.r0[data-open="false"] .r0-answer{display:none}
.r0[data-open="false"] ~ #sizes-wrap{display:none}
.r0[data-open="false"] .r0-h{font-size:clamp(34px,5vw,62px);max-width:17ch;margin-bottom:12px;
text-shadow:0 2px 24px rgba(0,0,0,.45)}
.r0[data-open="false"] .r0-sub{font-size:clamp(17px,1.6vw,21px);margin:0 0 24px;color:var(--ink)}
/* the toggle: a pill with a switch in it, so it reads as "turn this on" */
.r0-toggle{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:10px 22px 10px 12px;
border:0;border-radius:var(--pill);cursor:pointer;font:600 17px/1.2 var(--font-body);
box-shadow:0 0 0 6px rgba(247,179,43,.16),0 10px 30px rgba(247,179,43,.22)}
.r0-toggle:focus-visible{outline:3px solid var(--head);outline-offset:3px}
.tg-switch{position:relative;flex:0 0 auto;width:48px;height:28px;border-radius:14px;
background:rgba(10,16,20,.85);box-shadow:inset 0 0 0 1px rgba(10,16,20,.9)}
.tg-knob{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;
background:#5b6670;transition:transform .18s ease,background .18s ease}
.r0-toggle[aria-expanded="true"] .tg-knob{transform:translateX(20px);background:var(--sun);
box-shadow:0 0 10px rgba(247,179,43,.9)}
.r0[data-open="true"] .r0-toggle{min-height:48px;font-size:15px;box-shadow:none;
background:transparent;color:var(--head);border:1px solid var(--line-strong);margin-top:10px}
.r0[data-open="true"] .r0-toggle .tg-switch{background:rgba(247,179,43,.16);box-shadow:inset 0 0 0 1px rgba(247,179,43,.55)}
#pick{scroll-margin-top:80px}
@media(prefers-reduced-motion:reduce){.tg-knob{transition:none}}
@media(min-width:1024px){
.r0[data-open="true"] .r0-toggle{margin-top:14px}
}
@media(max-width:1023px){
.r0[data-open="false"]{align-items:flex-end}
.r0[data-open="false"] .r0-grid{padding-bottom:12px}
.r0-bg.has-img{background-image:
linear-gradient(180deg,rgba(10,16,20,.15) 0%,rgba(10,16,20,.35) 40%,rgba(10,16,20,.92) 78%),
var(--hero-img);background-position:72% center}
}
.r0-toggle[hidden]{display:none}
/* ============================================================================
v1.30.0 — THE CALCULATOR, COUNTED AND TOTALLED (Ryan 2026-09-28)
Each thing is a row: tap the tile to add one ("Lights x2"), the x on its
top-right corner clears it, and what it draws sits beside it. The how-long
picks stack too, with the -/+ inside the picked box. A running total sits
between the questions and the answer; the two units stack on the right,
each saying how long it keeps everything on.
============================================================================ */
/* rows */
.r0 .tiles{display:flex;flex-direction:column;gap:6px}
.kr{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:10px}
.kr-box{position:relative;min-width:0}
.r0 .kr .tile{width:100%;flex-direction:row;justify-content:flex-start;gap:10px;min-height:44px;
padding:8px 14px 8px 12px;font:500 14px/1.2 var(--font-body);text-align:left}
.r0 .kr .tile .tile-ico{width:22px;height:22px;flex:0 0 auto}
.kr .tile-l{flex:0 1 auto}
.kr .tile-tag{margin-left:2px}
.tile-n{margin-left:auto;font:600 13px/1 var(--font-mono);color:var(--muted);padding-left:8px}
.kr.is-on .tile-n{color:var(--sun)}
.kr-x{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;cursor:pointer;
display:flex;align-items:center;justify-content:center;padding:0;
background:var(--surface);color:var(--head);border:1px solid var(--line-strong);
font:600 15px/1 var(--font-body);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.kr-x:hover{border-color:var(--sun);color:var(--sun)}
.kr-x:focus-visible{outline:2px solid var(--sun);outline-offset:1px}
.kr-w{display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.25}
.kr-sum{color:var(--head);font:600 13.5px/1.25 var(--font-body)}
.kr-each{color:var(--muted);font:400 12px/1.3 var(--font-body)}
/* how long: stacked boxes, the dial inside the picked one */
.r0 .hours{display:flex;flex-direction:column;gap:8px;max-width:none}
.hopt{display:flex;align-items:center;gap:6px;border-radius:var(--radius);
background:var(--inset);border:1px solid var(--line)}
.hopt.is-sel{background:var(--sun-tint);border-color:var(--sun)}
.r0 .hopt .hbtn{flex:1 1 auto;min-width:0;flex-direction:row;justify-content:space-between;align-items:center;
gap:10px;min-height:48px;padding:8px 12px;background:transparent;border:0;text-align:left}
.hopt .hbtn .hb-l{font:600 14px/1.2 var(--font-body)}
.hopt.is-sel .hbtn .hb-s{display:none}
.r0 .hopt .hdial{margin:0 6px 0 0;gap:4px;flex:0 0 auto}
.r0 .hopt .hd-btn{min-width:44px;min-height:44px;font-size:20px;background:var(--inset)}
.hopt .hd-val{min-width:7.5ch;font-size:14px}
/* the running total */
.total{margin-top:14px;padding:12px 14px;border-radius:var(--radius-lg);
background:var(--band);border:1px solid var(--line)}
.tt-h{margin:0 0 6px;color:var(--head);font:600 13px/1.2 var(--font-body);letter-spacing:.04em;text-transform:uppercase}
.tt-row{display:flex;justify-content:space-between;gap:12px;margin:0;padding:4px 0;
color:var(--ink-2);font:400 13.5px/1.35 var(--font-body);border-top:1px solid var(--line)}
.tt-row:first-of-type{border-top:0}
.tt-row b{color:var(--head);font-weight:600;white-space:nowrap}
.tt-need b{color:var(--sun)}
.tt-fine,.tt-empty{margin:6px 0 0;color:var(--muted);font:400 12px/1.4 var(--font-body)}
/* the answer: the two units stacked, picture left, words right */
.r0-answer .pair{grid-template-columns:1fr;gap:8px}
.r0-answer .pair-card,.r0-answer .pair-card[data-slot="both"]{display:grid;grid-column:auto;
grid-template-columns:clamp(72px,6.4vw,96px) minmax(0,1fr);grid-template-areas:"img head" "img body";
column-gap:12px;row-gap:2px;align-items:start}
.r0-answer .pc-head{grid-area:head}
.r0-answer .pair-card img,.r0-answer .pair-card[data-slot="both"] img{grid-area:img;width:100%;height:auto;
max-width:none;aspect-ratio:1/1;margin:0}
.r0-answer .pair-card.is-empty{display:block}
/* the hours line says it plainer than "covers what you need", so the note steps aside here */
.r0-answer .pc-note{display:none}
.pc-body{grid-area:body;display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-run{color:var(--ink);font:400 13px/1.35 var(--font-body)}
.pc-run b{color:var(--sun);font-weight:600}
/* desktop, open: headline on top; then questions | how long + total | answer */
@media(min-width:1024px){
.r0[data-open="true"] .r0-grid{display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,.92fr) minmax(0,1.12fr);
grid-template-areas:"h h t" "s s t" "k l a";row-gap:0;column-gap:clamp(18px,2vw,30px);align-items:start}
.r0[data-open="true"] .r0-ask,.r0[data-open="true"] .rungs{display:contents}
.r0[data-open="true"] .r0-h{grid-area:h;font-size:clamp(26px,2.3vw,34px);max-width:none;margin:0 0 2px}
.r0[data-open="true"] .r0-sub{grid-area:s}
.r0[data-open="true"] .r0-toggle{grid-area:t;justify-self:end;align-self:center;margin-top:0}
.r0[data-open="true"] .r1{grid-area:k;margin-top:18px}
.r0[data-open="true"] .r2{grid-area:l;margin-top:18px}
.r0[data-open="true"] .r0-answer{grid-area:a;margin-top:18px}
.r0[data-open="true"] .rq{font-size:18px;margin:0 0 10px}
.r0[data-open="true"] .r3-answer{font-size:clamp(17px,1.4vw,21px)}
}
/* v1.30.0 fit: the stacked cards drop the per-card date (the line under them carries it once) */
.r0-answer .pc-date{display:none}
.r0-answer .pc-price{font-size:12px}
.kr{grid-template-columns:minmax(0,1fr) 106px}
@media(min-width:1024px){
.r0[data-open="true"] .r3-answer{font-size:clamp(16px,1.3vw,20px);margin-bottom:10px}
.r0[data-open="true"] .r0-answer .r3{padding:14px 16px}
.r0[data-open="true"] .r0-answer .pair-card{padding:8px 10px}
.r0[data-open="true"] .r0-answer .r3-trust,.r0[data-open="true"] .r0-answer .r3-small{margin-top:8px;font-size:11.5px}
.r0[data-open="true"] .r0-answer .r3-how{margin-top:8px}
.r0[data-open="true"] .r0-answer .r3-how>summary{min-height:40px;padding:8px 12px}
}
/* ============================================================================
v1.31.2 — QA MINORs (QA-SITE-ANEW L4-L10, QA-RC 3): tap targets of 44 x 44 CSS px
at a 390 x 844 phone. Where the control's look must not change, the HIT AREA
grows (padding, with a matching negative margin so nothing around it moves);
only form fields, whose box IS the target, get taller.
============================================================================ */
/* header wordmark: 6 px more above and below (45 px), taken back by the margin so the bar is pixel-identical
(min-height:44px was tried first: it re-snapped the logo dot 1 px lower) */
.site-header .brand{padding:6px 0;margin:-6px 0}
/* home calculator: the "x" that clears a row. The 44 px box is the button; the 24 px circle is drawn
by ::before on exactly the spot it had. The box hangs off the tile's top-right corner -- it covers
the same 17 px strip of the tile the old circle did, and spills right into the empty gap and the
watt column, not up into the row above (rows are 6 px apart and the box starts 6 px up). */
.kr-x{top:-6px;right:-27px;width:44px;height:44px;padding:0 20px 22px 0;z-index:1;
background:transparent;border:0;border-radius:0;box-shadow:none}
.kr-x::before{content:"";position:absolute;left:0;top:-1px;width:24px;height:24px;box-sizing:border-box;border-radius:50%;z-index:-1;
background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.kr-x:hover::before{border-color:var(--sun)}
.kr-x:focus-visible{outline:none}
.kr-x:focus-visible::before{outline:2px solid var(--sun);outline-offset:1px}
/* products: "ask us for a price" (catalogue rows) -- a taller hit area around the same text */
a.js-quote-link{display:inline-block;padding:14px 0;margin:-14px 0}
/* products: catalogue filters, and the assumption fields on /products and /solar */
.cat-f select{min-height:44px}
.assump-row input{min-height:44px}
/* products: the calculator's quantity and hours boxes in the phone layout */
@media(max-width:520px){.appl-row input[type=number]{min-height:44px}}
/* installers: the radius slider keeps its look; its box is the target */
.filter-bar input[type=range]{min-height:44px}
/* a standalone link inside a notice (ev-map "Help us grow it") */
.tap-link{display:inline-block;padding:12px 0;margin:-12px 0}
/* Leaflet maps, scoped to the site's own map boxes so nothing leaks into other Leaflet use:
zoom buttons 44 x 44 (the /ev rule in ev.css did this for one map only), and the attribution
links get a 44 px tall hit area that grows UPWARD over the map -- the bar sits on the map's
clipped bottom edge, so growing down would be cut off. The attribution text is unchanged. */
.map-box.leaflet-container .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px}
.map-box.leaflet-container .leaflet-control-attribution a{display:inline-block;padding-top:28px;margin-top:-28px}
/* lane v1.35.0 (QA-RC2 2): the night-lights map credit wraps to two lines on a phone, and the upward box of a
line-2 link then covered the line-1 links. That one map keeps its credit links at text size. */
#lights-map.leaflet-container .leaflet-control-attribution a{display:inline;padding-top:0;margin-top:0}
/* 404 (L10): the heading's 20ch box was pinned left while its text and the line below were centred
on the page; a centred section now centres the box too, at every width */
.section.center h1{margin-left:auto;margin-right:auto}