/* Solar Bill guides: the blog index, articles and the questions hub. Loads after site.css. */
ol,ul{margin:0}

/* index + hub header */
.bhead{padding:clamp(56px,8vw,104px) 0 clamp(28px,4vw,48px)}
.bhead .eyebrow{display:block;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);font-weight:600;color:var(--fg3);margin-bottom:10px}
.bhead h1{font-size:clamp(2.6rem,1.6rem + 3.8vw,4.4rem);font-weight:600;letter-spacing:-.032em;line-height:1.04;text-wrap:balance;max-width:14em}
.bhead p{margin-top:20px;font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.45;color:var(--fg2);max-width:38em;text-wrap:pretty}
.bhead .search{margin-top:28px;max-width:560px}
.bhead input[type=search]{width:100%;min-height:48px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg);font-size:1rem}

/* index: topic groups and post cards */
.topic{padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.topic h2{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.topic > p{margin-top:6px;color:var(--fg2)}
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px;margin-top:22px}
.card{display:flex;flex-direction:column;height:100%;padding:22px 22px 20px;border-radius:18px;background:var(--alt);color:var(--fg);transition:transform .2s ease}
.card:hover{text-decoration:none;transform:translateY(-2px)}
.card .k{font-size:.78rem;font-weight:600;color:var(--warm);letter-spacing:.02em;text-transform:uppercase}
.card h3{margin-top:8px;font-size:1.18rem;font-weight:600;letter-spacing:-.018em;line-height:1.25}
.card p{margin-top:8px;color:var(--fg2);font-size:.95rem;line-height:1.45;flex:1}
.card .m{margin-top:14px;font-size:.8rem;color:var(--fg3)}
.blog-end{padding-bottom:clamp(64px,8vw,104px)}

/* article */
.post{width:100%;max-width:760px;margin:0 auto;padding:clamp(40px,6vw,80px) max(22px,env(safe-area-inset-left)) clamp(64px,8vw,104px)}
.crumbs{font-size:.84rem;color:var(--fg3);display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--fg2)}
.crumbs span[aria-hidden]{color:var(--fg3)}
.post h1{margin-top:18px;font-size:clamp(2.2rem,1.5rem + 2.8vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.07;text-wrap:balance}
.post .dek{margin-top:18px;font-size:1.22rem;line-height:1.5;color:var(--fg2);text-wrap:pretty}
.post .meta{margin-top:16px;font-size:.88rem;color:var(--fg3)}
.answer{margin-top:32px;padding:22px 24px;border-radius:18px;background:var(--alt);border-left:4px solid var(--warm)}
.answer b.l{display:block;font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--fg3);margin-bottom:6px}
.answer p{color:var(--fg);line-height:1.55}
.answer ul{margin-top:10px;padding-left:1.2em;color:var(--fg)}
.answer li + li{margin-top:4px}
.post .toc{margin-top:36px;padding:18px 0;border-block:1px solid var(--line);font-size:.94rem}
.post .toc b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--fg3);margin-bottom:8px}
.post .toc ol{padding-left:1.3em;columns:2 16em;column-gap:36px}
.post .toc li{padding:2px 0;break-inside:avoid}
.prose h2{margin-top:52px;font-size:1.65rem;font-weight:600;letter-spacing:-.022em;line-height:1.2;scroll-margin-top:72px}
.prose h3{margin-top:30px;font-size:1.18rem;font-weight:600;letter-spacing:-.015em;scroll-margin-top:72px}
.prose p,.prose ul,.prose ol{margin-top:14px;color:var(--fg2);line-height:1.65}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:6px}
.prose b,.prose strong{color:var(--fg);font-weight:600}
.prose code{font-family:var(--code);font-size:.86em;padding:1px 5px;border-radius:5px;background:var(--alt);color:var(--fg)}
.prose pre{margin-top:16px;padding:16px 18px;border-radius:14px;background:var(--alt);overflow-x:auto;font-family:var(--code);font-size:.86rem;line-height:1.6;color:var(--fg)}
.prose pre code{padding:0;background:none}
.prose .scroll{overflow-x:auto;margin-top:16px}
.prose table{width:100%;border-collapse:collapse;font-size:.93rem}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--line);color:var(--fg2)}
.prose th{color:var(--fg);font-weight:600;font-size:.84rem}
.prose td.n,.prose th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.prose tr.t td{color:var(--fg);font-weight:600}
.prose blockquote{margin:18px 0 0;padding:4px 0 4px 18px;border-left:3px solid var(--line);color:var(--fg2)}
.prose .callout{margin-top:22px;padding:18px 20px;border-radius:16px;background:var(--alt);color:var(--fg2);line-height:1.55}
.prose .callout b:first-child{color:var(--fg)}
.prose .src{font-size:.86rem;color:var(--fg3)}

/* FAQ (same look as the homepage) */
.faq{margin-top:22px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 0;font-size:1.08rem;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:1.5px solid var(--fg2);border-bottom:1.5px solid var(--fg2);transform:translateY(-3px) rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq .a{padding:0 36px 22px 0;color:var(--fg2);line-height:1.6;display:flex;flex-direction:column;gap:10px}
.faq .a .go{font-size:.92rem}

/* call to action and related posts */
.cta{margin-top:56px;padding:28px;border-radius:20px;background:var(--alt);text-align:center}
.cta h2{margin:0;font-size:1.45rem;font-weight:600;letter-spacing:-.02em}
.cta p{margin:8px auto 0;color:var(--fg2);max-width:30em}
.cta .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 26px;margin-top:20px}
.related{margin-top:56px}
.related h2{font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
.related ul{list-style:none;padding:0;margin-top:12px;border-top:1px solid var(--line)}
.related li{border-bottom:1px solid var(--line)}
.related a{display:block;padding:14px 0;color:var(--fg);font-weight:500}
.related a span{display:block;font-weight:400;font-size:.9rem;color:var(--fg2);margin-top:2px}
.disclaimer{margin-top:40px;font-size:.84rem;line-height:1.5;color:var(--fg3)}

/* questions hub */
.qnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.qnav a{padding:7px 14px;border-radius:980px;background:var(--alt);color:var(--fg);font-size:.88rem}
.qnav a:hover{text-decoration:none;background:var(--line)}
.qgroup{padding-block:clamp(28px,4vw,44px);scroll-margin-top:64px}
.qgroup h2{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.qempty{margin-top:24px;color:var(--fg2)}

/* site-wide links at the end of every guide */
.explore{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:28px 32px}
.explore h2{font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--fg3)}
.explore h2 a{color:inherit}
.explore ul{list-style:none;padding:0;margin-top:10px}
.explore li + li{margin-top:7px}
.explore li a{font-size:.92rem;line-height:1.35}