/* WattHourLab: fresh green-energy look. White space, leaf greens, sun accent. System fonts only; theme colours come from site.json via theme.css. */
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--bg);font:17px/1.7 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3{line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:750}
h2{font-size:1.35rem;margin-top:2.4rem;padding-left:.7rem;border-left:4px solid var(--ac)}
a{color:var(--ac2);text-underline-offset:3px} a:hover{color:var(--ac)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
main.wrap{max-width:780px;padding-bottom:3rem}
main.wide{max-width:1080px}
.site-header{background:rgba(255,255,255,.95);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:750;font-size:1.25rem}
.logo b{color:var(--ac)} .logo .tl{display:block;font-weight:400;font-size:.74rem;color:var(--mut)}
.nav a{color:var(--ink);text-decoration:none;margin-left:6px;padding:6px 12px;border-radius:999px;font-size:.93rem}
.nav a:hover{background:var(--soft);color:var(--ac2)}
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--soft) 0%,#fff 60%);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero p.lead{font-size:1.12rem;color:var(--mut);max-width:38em}
.hero svg{width:100%;height:auto}
@media(max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero svg{max-width:280px}}
.btn{display:inline-block;background:var(--ac);color:#fff;text-decoration:none;padding:11px 20px;border-radius:999px;font-weight:650;margin:6px 8px 0 0}
.btn:hover{background:var(--ac2);color:#fff} .btn.alt{background:#fff;color:var(--ac2);border:1.5px solid var(--ac)}
.pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin:18px 0 0}
.pills li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.85rem;color:var(--mut)}
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.cards li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;box-shadow:0 1px 2px rgba(22,48,43,.04);transition:box-shadow .2s}
.cards li:hover{box-shadow:0 6px 20px rgba(31,138,76,.12)}
.cards a{font-weight:650;text-decoration:none;color:var(--ink)} .cards a:hover{color:var(--ac2)}
.cards p{margin:.4rem 0 0;font-size:.92rem;color:var(--mut)}
.tag{display:inline-block;font-size:.72rem;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--ac2);background:var(--soft);border-radius:6px;padding:2px 8px;margin-bottom:6px}
.tag.planned{color:#8a5a00;background:#fff4dc}
.note{background:var(--soft);border-left:4px solid var(--ac);border-radius:0 12px 12px 0;padding:12px 16px;font-size:.95rem}
.meta{color:var(--mut);font-size:.88rem}
.crumbs{font-size:.85rem;color:var(--mut);margin-top:22px} .crumbs a{color:var(--mut)}
.tbl{overflow-x:auto;margin:1rem 0;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--soft);font-weight:650} tr:last-child td{border-bottom:0}
code{background:var(--soft);padding:1px 5px;border-radius:5px;font-size:.9em}
.todo{color:#9a3412;background:#fff1e6;padding:0 4px;border-radius:4px}
.aff{display:inline-block;border:1px dashed var(--sun);background:#fffaf0;color:#7a5200;border-radius:8px;padding:2px 8px;font-size:.82rem}
blockquote{margin:1rem 0;padding:.4rem 1rem;border-left:3px solid var(--line);color:var(--mut)}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:2rem 0}
.trust div{padding:16px;border-radius:14px;background:var(--soft)}
.trust strong{display:block;color:var(--ac2)}
footer{margin-top:3rem;background:var(--ink);color:#d7e6dd;font-size:.9rem}
footer .wrap{padding-top:28px;padding-bottom:28px}
footer a{color:#fff;margin-right:14px}
footer .wave{display:block;width:100%;height:40px;background:var(--bg)}

/* Homepage: more breathing room, fewer elements */
.home{padding-top:1rem;padding-bottom:4rem}
.home h2{margin-top:4rem}
.trustline{text-align:center;color:var(--mut);font-size:.95rem;margin:2.5rem auto 0;max-width:46em}
.intro{max-width:44em;margin:3.5rem auto 0;font-size:1.15rem;text-align:center}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.cards.three li{padding:26px}
.all{margin-top:2rem;text-align:center}
.scene{margin:5rem 0 0;border-radius:24px;overflow:hidden;line-height:0}
.scene svg{width:100%;height:220px;display:block}
.logo img{height:44px;width:auto;flex:none}
.hero img.hero-logo{width:100%;max-width:420px;height:auto;justify-self:center}
@media(max-width:760px){.hero img.hero-logo{max-width:280px}}

/* logo v2: original raster icon + wordmark */
.logo img.wordmark{height:26px;width:auto;display:block;margin-bottom:2px}
picture.hero-logo{justify-self:center;width:100%;max-width:420px} picture.hero-logo img{max-width:100%;height:auto}
@media(max-width:760px){picture.hero-logo{max-width:280px}}

.aff-note{font-size:.8rem;color:#6b7280;margin:.25rem 0 1rem;background:none;border:0;padding:0}
.aff-note a{color:inherit;text-decoration:underline}
.aff{display:none}