/* SolarPaybackPro — single-file CSS, no dependencies. */
:root {
  --c-primary: #f59e0b;
  --c-primary-dark: #d97706;
  --c-ink: #1f2937;
  --c-ink-soft: #4b5563;
  --c-line: #e5e7eb;
  --c-bg: #ffffff;
  --c-bg-soft: #f9fafb;
  --c-bg-warm: #fffbeb;
  --c-good: #16a34a;
  --c-warn: #d97706;
  --c-bad: #dc2626;
  --c-link: #b45309;
  --max: 1100px;
  --r: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
}

a { color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c-primary-dark); }
img, svg { max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(180%) blur(8px);
  background: rgba(255,255,255,.92);
}
.header-wrap { display: flex; align-items: center; justify-content: space-between; padding-block: .85rem; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 1.15rem; text-decoration: none; color: var(--c-ink); }
.primary-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.primary-nav a { text-decoration: none; color: var(--c-ink-soft); font-weight: 500; }
.primary-nav a:hover { color: var(--c-primary-dark); }

/* Hero */
.hero { padding: 3rem 0 2rem; background: linear-gradient(180deg, var(--c-bg-warm), var(--c-bg)); }
.home-hero { padding: 4rem 0 3rem; }
.hero h1 { font-size: clamp(1.85rem, 4vw, 2.6rem); margin: .2rem 0 .8rem; line-height: 1.15; }
.lede { font-size: 1.18rem; color: var(--c-ink-soft); margin: .25rem 0 1rem; }
.hero-actions { margin-top: 1.25rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.trust { color: var(--c-ink-soft); font-size: .92rem; margin-top: .8rem; }

.breadcrumbs { font-size: .9rem; color: var(--c-ink-soft); margin-bottom: .6rem; }
.breadcrumbs a { color: var(--c-ink-soft); }

/* Hero stats */
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-top: 1.2rem; }
.stat { background: white; border: 1px solid var(--c-line); border-radius: var(--r); padding: .9rem 1rem; box-shadow: var(--shadow-sm); }
.stat-num { display: block; font-weight: 800; font-size: 1.45rem; color: var(--c-ink); }
.stat-label { color: var(--c-ink-soft); font-size: .85rem; }

/* Buttons */
.btn { display: inline-block; padding: .75rem 1.2rem; border-radius: var(--r); font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .05s ease; font-size: 1rem; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-primary); color: #1f2937; border-color: var(--c-primary-dark); }
.btn-primary:hover { background: var(--c-primary-dark); color: white; }
.btn-secondary { background: white; color: var(--c-ink); border-color: var(--c-line); }
.btn-secondary:hover { border-color: var(--c-primary); }
.btn-tiny { padding: .35rem .7rem; font-size: .85rem; }
.btn-lg { padding: .95rem 1.5rem; font-size: 1.05rem; }

/* Sections */
.section { padding: 2.5rem 0; border-top: 1px solid var(--c-line); }
.section:first-of-type { border-top: 0; }
.bg-soft { background: var(--c-bg-soft); }
.bg-soft.section { border-top: 0; }

.three-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin: 1rem 0; }
.three-col h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.three-col p { margin: 0; color: var(--c-ink-soft); font-size: .98rem; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r); }
.data-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.data-table th, .data-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--c-line); }
.data-table thead { background: var(--c-bg-soft); }
.data-table tbody tr:nth-child(even) { background: #fafafa; }
.data-table tbody tr:hover { background: var(--c-bg-warm); }

.caption { color: var(--c-ink-soft); font-size: .9rem; margin-top: .4rem; }

/* Key-value grid */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; margin: 1rem 0; }
.kv-grid > div { display: flex; flex-direction: column; padding: .75rem; background: var(--c-bg-soft); border-radius: var(--r); border: 1px solid var(--c-line); }
.kv-k { color: var(--c-ink-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.kv-v { font-weight: 600; margin-top: .15rem; }

.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.badge.good { background: #dcfce7; color: #166534; }
.badge.ok   { background: #fef3c7; color: #92400e; }
.badge.warn { background: #fed7aa; color: #9a3412; }
.badge.bad  { background: #fee2e2; color: #991b1b; }

/* Calculator form */
.calculator { display: grid; gap: 1rem; max-width: 560px; margin: 1rem 0; padding: 1.2rem; background: var(--c-bg-soft); border-radius: var(--r); border: 1px solid var(--c-line); }
.calculator.big { max-width: 720px; }
.calculator label { display: flex; flex-direction: column; font-weight: 600; gap: .35rem; }
.calculator label small { font-weight: 400; color: var(--c-ink-soft); }
.calculator input, .calculator select { padding: .6rem .8rem; border: 1px solid var(--c-line); border-radius: var(--r); font: inherit; background: white; }
.calculator input:focus, .calculator select:focus { outline: 2px solid var(--c-primary); outline-offset: 0; }

.calculator-results { margin-top: 1.5rem; padding: 1.2rem; background: white; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--shadow-md); }
.calculator-results h3 { margin-top: 0; }
.calculator-results .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 1rem 0; }

/* CTA strip (sticky-ish at bottom of every page) */
.cta-strip { background: var(--c-primary); color: #1f2937; padding: 1.25rem 0; }
.cta-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cta-strip strong { font-size: 1.1rem; }
.cta-strip .btn { background: white; color: var(--c-ink); border-color: white; }
.cta-strip .btn:hover { background: var(--c-ink); color: white; }

/* ===== AD SLOTS ===========================================================
   CLS-safe: every slot reserves --ad-min-height so layout never shifts when
   ads load (or fail to load). The .ad-placeholder shown before AdSense is
   approved has the same dimensions as the live ad will. */
.ad-slot {
  margin: 1.25rem auto;
  max-width: var(--max);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: var(--ad-min-height, 100px);
  padding: 0 1.25rem;
  position: relative;
}
.ad-slot__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-soft);
  text-align: center;
  margin-bottom: 0.35rem;
  opacity: 0.7;
}
.ad-slot ins.adsbygoogle { width: 100%; display: block; }

/* Placeholder shown when AdSense not yet approved — same dimensions as the
   real ad, so what you see in dev matches what'll ship. */
.ad-placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #fafaf5, #fafaf5 10px, #f3efde 10px, #f3efde 20px);
  border: 1px dashed var(--c-line);
  border-radius: var(--r);
  color: var(--c-ink-soft);
}
.ad-placeholder-label { font-size: 0.78rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; opacity: 0.6; }

/* Per-format reserved heights (additive over --ad-min-height) */
.ad-slot--display-responsive { min-height: 100px; }
.ad-slot--in-content         { min-height: 280px; }
.ad-slot--multiplex          { min-height: 280px; }
.ad-slot--half-page          { min-height: 620px; }
.ad-slot--in-feed            { min-height: 100px; margin: 0; padding: 0.5rem 1rem; }

/* In-feed ad row (lives inside the by-state table) */
.in-feed-ad-row td { padding: 0; background: var(--c-bg-warm); }
.in-feed-ad-row .ad-slot { padding: 0; margin: 0; }
.in-feed-ad-row .ad-slot__label { padding: 0.4rem; margin: 0; }

/* Sidebar (sticky right rail) — desktop only ≥1280px where there's space */
.ad-slot--sidebar { display: none; }
@media (min-width: 1280px) {
  .ad-slot--sidebar {
    display: flex;
    position: fixed;
    top: 96px;
    right: max(20px, calc((100vw - var(--max)) / 2 - 320px));
    width: 300px;
    max-width: 300px;
    margin: 0;
    padding: 0;
    z-index: 5;
  }
}
.ad-slot--desktop-only { display: none; }
@media (min-width: 1024px) {
  .ad-slot--desktop-only.ad-slot--sidebar { display: flex; }
}

.ad-slot--lazy:not([data-loaded]) ins.adsbygoogle { background: transparent; }
.ad-slot--revealed { animation: ad-fade-in 200ms ease; }
@keyframes ad-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== MOBILE STICKY ANCHOR AD ============================================ */
.mobile-anchor-ad {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid var(--c-line);
  padding: 0.4rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  box-shadow: 0 -4px 12px rgba(0,0,0,.08);
}
.mobile-anchor-ad__close {
  position: absolute;
  top: 0.2rem;
  right: 0.4rem;
  background: rgba(0,0,0,0.6);
  color: white;
  border: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .mobile-anchor-ad { display: none; }
}

/* ===== COOKIE CONSENT BANNER ============================================== */
.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1f2937;
  color: white;
  padding: 1rem 0;
  z-index: 60;
  box-shadow: 0 -4px 16px rgba(0,0,0,.18);
  animation: consent-in 240ms ease;
}
@keyframes consent-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.consent-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.consent-banner__copy { font-size: 0.92rem; line-height: 1.45; flex: 1 1 320px; }
.consent-banner__copy a { color: var(--c-primary); text-decoration: underline; }
.consent-banner__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.consent-banner__actions .btn-secondary { background: transparent; color: white; border-color: rgba(255,255,255,0.4); }
.consent-banner__actions .btn-secondary:hover { background: rgba(255,255,255,0.08); }

/* ===== AFFILIATE CARD (placement-attributed) ============================== */
.affiliate-card { margin: 1rem 0; }
.affiliate-card--end-article {
  background: linear-gradient(180deg, var(--c-bg-warm), white);
  border: 1px solid var(--c-primary);
  border-radius: var(--r);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.affiliate-card--end-article .btn { font-size: 1.05rem; }
.affiliate-subtext { color: var(--c-ink-soft); font-size: 0.88rem; margin: 0.5rem 0 0; }

.btn-affiliate { position: relative; }

/* ===== ABOVE-FOLD AFFILIATE CTA BLOCK ===================================== */
.affiliate-cta-block {
  margin: 1.25rem 0;
}
.affiliate-cta-block--hero {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--c-primary);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-md);
}
.affiliate-cta-block--results {
  background: linear-gradient(135deg, var(--c-bg-warm), #fff8e1);
  border: 2px solid var(--c-primary);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
}
.affiliate-cta-headline {
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--c-ink);
  margin: 0 0 .85rem;
}
.affiliate-cta-buttons {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
}
.affiliate-cta-buttons .affiliate-card { margin: 0; }
.affiliate-cta-note {
  font-size: .85rem;
  color: var(--c-ink-soft);
  margin: .65rem 0 0;
}
.btn-outline {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn-outline:hover { border-color: var(--c-primary); background: var(--c-bg-warm); }

/* ===== ACCESSIBILITY ====================================================== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--c-primary-dark);
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { top: 0; }

/* On wide layouts, give the body bottom padding equal to anchor ad height
   so the anchor doesn't cover real content when both anchor and CTA strip
   stack at the bottom. */
@media (max-width: 768px) {
  body { padding-bottom: 60px; }
}

/* FAQ */
.faq details { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--r); margin: .5rem 0; padding: .85rem 1rem; }
.faq details summary { cursor: pointer; font-weight: 600; color: var(--c-ink); list-style: none; }
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::after { content: "＋"; float: right; color: var(--c-ink-soft); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { margin-top: .5rem; color: var(--c-ink-soft); }

/* Article prose */
.prose { max-width: 720px; }
.prose h2 { margin-top: 2rem; font-size: 1.45rem; }
.prose h3 { margin-top: 1.5rem; font-size: 1.18rem; }
.prose p, .prose ul, .prose ol { margin: .8rem 0; }
.prose pre { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--r); padding: .8rem 1rem; overflow-x: auto; font-size: .92rem; }
.prose code { background: var(--c-bg-soft); padding: .15rem .4rem; border-radius: 4px; font-size: .92em; }
.prose pre code { background: transparent; padding: 0; }

/* Post list */
.post-list { list-style: none; padding: 0; }
.post-list li { border-bottom: 1px solid var(--c-line); padding: 1rem 0; }
.post-list li:last-child { border-bottom: 0; }
.post-list h3 { margin: .2rem 0; }
.post-list .meta { color: var(--c-ink-soft); font-size: .9rem; margin: 0 0 .35rem; }
.post-list a { text-decoration: none; }

/* Footer */
.site-footer { margin-top: 3rem; padding: 2.5rem 0 1.5rem; background: #111827; color: #d1d5db; }
.site-footer a { color: #fcd34d; text-decoration: none; }
.site-footer a:hover { color: white; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; }
.footer-grid strong { color: white; display: block; margin-bottom: .5rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; line-height: 1.9; }
.fineprint { margin-top: 2rem; font-size: .85rem; color: #9ca3af; }

/* State links list (battery storage hub) */
.state-links { columns: 2; gap: 1.5rem; padding: 0; list-style: none; margin: 1rem 0; }
.state-links li { padding: .25rem 0; break-inside: avoid; }
@media (min-width: 640px) { .state-links { columns: 3; } }

/* Misc */
.text-link { color: var(--c-primary-dark); font-weight: 600; }
.meta { color: var(--c-ink-soft); font-size: .92rem; }

@media (max-width: 600px) {
  .hero { padding: 2rem 0 1.5rem; }
  .home-hero { padding: 2.5rem 0 2rem; }
  .primary-nav { gap: .75rem; font-size: .92rem; }
}