/* TrollingMotorBatteries.com — outfitter theme
   Layout: wide forest-green hero with contour lines, canvas-colored body, content column + sticky sidebar on articles */
:root {
  --forest: #023b18;      /* logo green */
  --forest-2: #0e4a26;
  --olive: #5d6b2f;
  --olive-soft: #e3e6cf;
  --gold: #dcb631;        /* logo gold */
  --gold-dark: #b8931c;
  --tan: #c8b48a;
  --tan-soft: #efe7d6;
  --canvas: #f4f2ea;
  --paper: #ffffff;
  --bark: #3d3226;
  --ink: #1d2617;
  --muted: #5c6450;
  --line: #d9d6c6;
  --lake: #285c6b;
  --ok: #2f7a3e;
  --warn: #a8501a;
  --radius: 8px;
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-data: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 17px/1.65 var(--font-body); }
img { max-width: 100%; height: auto; }
a { color: var(--lake); text-underline-offset: 2px; }
a:hover { color: var(--forest); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--forest); padding: 8px 14px; z-index: 100; font-weight: 600; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 20px; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; color: var(--forest); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(36px, 5.5vw, 58px); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; }
h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; }
h3 { font-size: 22px; font-weight: 700; }
.eyebrow { font: 600 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 17px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  background: var(--forest); color: #fff; border: 2px solid var(--forest); border-radius: 6px; padding: 13px 22px; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--forest-2); color: #fff; }
.btn-gold, .btn-buy { background: var(--gold); border-color: var(--gold); color: var(--forest); }
.btn-gold:hover, .btn-buy:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--forest); }
.btn-buy::after { content: "→"; font-size: 18px; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-line { background: transparent; color: var(--forest); }
.btn-line:hover { background: var(--olive-soft); color: var(--forest); }
.btn-small { padding: 9px 14px; font-size: 15px; }

/* Top bar + header */
.topbar { background: var(--forest); color: #d9e0cf; font-size: 13.5px; }
.topbar-in { display: flex; justify-content: space-between; gap: 16px; padding-block: 7px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 500; }
.topbar a:hover { color: var(--gold); }
.topbar-links { display: flex; gap: 18px; }
.site-header { background: var(--paper); border-bottom: 4px solid var(--gold); position: sticky; top: 0; z-index: 40; }
.header-in { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
.brand { display: block; flex: 0 1 300px; min-width: 0; }
.brand img { display: block; width: 100%; max-width: 300px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a { font: 700 17px/1 var(--font-display); letter-spacing: .05em; white-space: nowrap; text-transform: uppercase; color: var(--forest); text-decoration: none; padding: 10px 12px; border-radius: 5px; }
.site-nav a:hover { background: var(--olive-soft); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold); border-radius: 0; }
.nav-account { display: none; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 26px; height: 3px; background: var(--forest); border-radius: 2px; position: relative; content: ""; }
.nav-toggle .bars::before { position: absolute; top: -8px; }
.nav-toggle .bars::after { position: absolute; top: 8px; }
@media (max-width: 1100px) {
  .topbar-in > span:first-child { display: none; }
  .topbar-in { justify-content: flex-end; }
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); flex-direction: column; align-items: stretch; padding: 8px 20px 16px; border-bottom: 4px solid var(--gold); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 6px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-account { display: block; }
  .brand { flex-basis: 240px; }
}

.flashes { padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.flash { padding: 12px 16px; border-radius: var(--radius); background: var(--olive-soft); border-left: 5px solid var(--olive); }
.flash-error { background: #f7e3d8; border-color: var(--warn); }
.flash-success { background: #e1efdf; border-color: var(--ok); }

/* Hero */
.hero { background-color: var(--forest); color: #e9eddf; position: relative; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.4'%3E%3Cpath d='M-20 60 C80 20 160 100 260 60 S440 10 620 70'/%3E%3Cpath d='M-20 95 C90 55 170 135 270 95 S450 45 620 105'/%3E%3Cpath d='M-20 130 C100 90 180 170 280 130 S460 80 620 140'/%3E%3Cpath d='M-20 170 C110 130 190 205 290 168 S470 120 620 178'/%3E%3Cpath d='M-20 210 C120 175 200 245 300 205 S480 160 620 215'/%3E%3Cpath d='M-20 250 C130 215 210 285 310 245 S490 200 620 255'/%3E%3Cellipse cx='470' cy='60' rx='40' ry='16'/%3E%3Cellipse cx='470' cy='60' rx='70' ry='30'/%3E%3C/g%3E%3C/svg%3E"); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 56px 64px; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .eyebrow { color: var(--gold); }
.hero p.lede { font-size: 19px; max-width: 54ch; margin: 18px 0 26px; color: #d6dccb; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-card { background: var(--paper); color: var(--ink); border-radius: 10px; padding: 22px; box-shadow: 0 18px 40px rgba(0,0,0,.25); border-top: 6px solid var(--gold); }
.hero-card h2 { font-size: 24px; text-transform: uppercase; }
@media (max-width: 860px) { .hero-in { grid-template-columns: minmax(0, 1fr); padding-block: 40px 48px; } }

/* Quick estimator in hero */
.quick { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick label { display: block; font: 600 12px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.quick select, .quick input { width: 100%; }
.quick-out { display: flex; align-items: baseline; gap: 10px; background: var(--tan-soft); border-radius: 6px; padding: 12px 14px; }
.quick-out strong { font: 800 42px/1 var(--font-display); color: var(--forest); font-variant-numeric: tabular-nums; }
.quick-out span { color: var(--muted); font-size: 15px; }

/* Sections */
.section { padding-block: 56px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.section-head p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.band-tan { background: var(--tan-soft); border-block: 1px solid #e3d8c0; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card h3 a { color: var(--forest); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; }
.card p { margin: 0; color: var(--muted); }
.card .meta { font-size: 14px; color: var(--muted); margin-top: auto; }
.tag { align-self: flex-start; font: 700 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--forest); background: var(--olive-soft); padding: 6px 9px; border-radius: 4px; }
.card.feature { border-top: 5px solid var(--gold); }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pillar { display: flex; flex-direction: column; gap: 8px; }
.pillar .num { font: 800 46px/1 var(--font-display); color: var(--olive); }
.pillar p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .pillars { grid-template-columns: minmax(0, 1fr); } }

.chem-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.chem-strip > div { padding: 22px; }
.chem-strip > div + div { border-left: 1px solid var(--line); }
.chem-strip dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0 0; }
.chem-strip dt { color: var(--muted); }
.chem-strip dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .chem-strip { grid-template-columns: minmax(0, 1fr); } .chem-strip > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Article */
.article-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.article-head .wrap { padding-block: 36px 28px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.article-head h1 { font-size: clamp(34px, 5vw, 52px); max-width: 22ch; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 15px; color: var(--muted); }
.disclosure-line { margin-top: 14px; font-size: 14px; color: var(--muted); background: var(--tan-soft); padding: 8px 12px; border-radius: 6px; display: inline-block; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding-block: 36px 64px; }
@media (max-width: 960px) { .article-layout { grid-template-columns: minmax(0, 1fr); } .sidebar { order: 2; } }
.prose { max-width: 72ch; min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose h2 { margin-top: 1.8em; padding-top: .4em; border-top: 3px solid var(--forest); scroll-margin-top: 110px; }
.prose h3 { margin-top: 1.4em; }
.prose .lead { font-size: 20px; color: var(--bark); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose ul.picks { list-style: none; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.prose ul.picks li { padding: 12px 16px; margin: 0; }
.prose ul.picks li + li { border-top: 1px solid var(--line); }
.note-box { background: var(--olive-soft); border-left: 5px solid var(--olive); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.prose th { background: var(--forest); color: #fff; font: 700 15px/1.2 var(--font-display); letter-spacing: .05em; text-transform: uppercase; text-align: left; padding: 11px 10px; vertical-align: bottom; }
.prose td { padding: 10px 10px; border-top: 1px solid var(--line); }
.prose td:first-child { font-weight: 600; }
/* Wide comparison tables (8+ columns): tighter type so they fit the column on laptops */
.prose table:has(th:nth-child(8)) { font-size: 14px; }
.prose table:has(th:nth-child(8)) th { font-size: 13px; letter-spacing: .03em; padding: 9px 7px; }
.prose table:has(th:nth-child(8)) td { padding: 8px 7px; }.prose tr:nth-child(even) td { background: #fafaf5; }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.proscons > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.proscons h3 { font-size: 18px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; }
.proscons > div:first-child h3 { color: var(--ok); }
.proscons > div:last-child h3 { color: var(--warn); }
.proscons ul { margin: 0; }
@media (max-width: 560px) { .proscons { grid-template-columns: minmax(0, 1fr); } }
.calc-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--forest); color: #dfe5d4; border-radius: var(--radius); padding: 20px 22px; border-left: 8px solid var(--gold); }
.calc-cta strong { display: block; font: 700 23px/1.15 var(--font-display); color: #fff; text-transform: uppercase; }
.calc-cta .btn { background: var(--gold); border-color: var(--gold); color: var(--forest); }
.video { margin-inline: 0; }
.video-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--forest); cursor: pointer; }
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.video-play:hover img { transform: scale(1.03); }
.video-icon { position: absolute; left: 50%; top: 50%; width: 74px; height: 52px; margin: -26px 0 0 -37px; border-radius: 12px; background: var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.video-icon::after { content: ""; position: absolute; left: 30px; top: 15px; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--forest); }
.video-play:hover .video-icon { background: #fff; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.video figcaption { font-size: 14.5px; color: var(--muted); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .video-play img { transition: none; } }
.sources { font-size: 14.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.ad-slot { margin-block: 28px; text-align: center; }
.ad-label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

.sidebar { display: flex; flex-direction: column; gap: 20px; }
.side-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.side-box h2 { font-size: 19px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.toc { position: sticky; top: 110px; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: 15px; }
.toc li + li { margin-top: 6px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--lake); text-decoration: underline; }

/* Forms */
.form-page { max-width: 460px; margin: 0 auto; padding-block: 48px 72px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 26px; }
.panel h1 { font-size: 36px; margin-bottom: 6px; }
.panel > p:first-of-type { color: var(--muted); margin-top: 0; }
form .field { display: flex; flex-direction: column; gap: 5px; margin-top: 16px; }
form label { font-weight: 600; font-size: 15px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  font: 16px/1.4 var(--font-body); color: var(--ink); background: #fff; border: 1px solid #c4c2b0; border-radius: 6px; padding: 10px 12px; width: 100%; }
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--olive); }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 15px; }
.check input { margin-top: 4px; }
.form-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.form-foot { margin-top: 18px; font-size: 15px; color: var(--muted); }
.hp { position: absolute; left: -5000px; }
.error-list { background: #f7e3d8; border-left: 5px solid var(--warn); padding: 10px 14px; border-radius: 0 6px 6px 0; margin-top: 14px; }
.error-list p { margin: 0; }

/* Account */
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding-block: 36px 64px; }
@media (max-width: 820px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }
.setups { list-style: none; padding: 0; margin: 12px 0 0; }
.setups li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.setups small { color: var(--muted); display: block; }
.linklike { background: none; border: 0; color: var(--warn); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* Footer */
.site-footer { background: var(--forest); color: #cdd5c2; margin-top: 0; position: relative; }
.treeline { height: 46px; background-color: var(--canvas); background-repeat: repeat-x; background-position: bottom; background-size: 220px 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='46' viewBox='0 0 220 46'%3E%3Cpath fill='%23023b18' d='M0 46 L0 40 L10 40 L18 22 L14 22 L22 8 L30 22 L26 22 L34 40 L46 40 L52 30 L49 30 L56 18 L63 30 L60 30 L66 40 L84 40 L94 16 L89 16 L100 0 L111 16 L106 16 L116 40 L132 40 L139 28 L136 28 L144 14 L152 28 L149 28 L156 40 L170 40 L178 24 L174 24 L183 10 L192 24 L188 24 L196 40 L220 40 L220 46 Z'/%3E%3C/svg%3E"); }
.footer-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding-block: 28px 24px; }
.footer-brand p { margin: 12px 0 0; max-width: 34ch; font-size: 15px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-cols h2 { font-size: 16px; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.footer-cols a { display: block; color: #fff; text-decoration: none; font-size: 15px; padding: 3px 0; }
.footer-cols a:hover { color: var(--gold); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.14); padding-block: 16px 24px; font-size: 13.5px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-legal p { margin: 0; }
@media (max-width: 820px) { .footer-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; background: var(--bark); color: #f3ede0; border-radius: 10px; padding: 14px 16px; display: flex; gap: 14px; align-items: center; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.cookie p { margin: 0; font-size: 14.5px; }
.cookie a { color: var(--gold); }
.cookie .btn { background: var(--gold); border-color: var(--gold); color: var(--forest); }

/* Calculator page */
.calc-page { padding-block: 32px 64px; }
.calc-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .calc-grid { grid-template-columns: minmax(0, 1fr); } }
.calc-inputs { display: flex; flex-direction: column; gap: 16px; }
.calc-inputs .field { margin: 0; }
.calc-inputs label, .k { font: 600 12.5px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hint { font-size: 13.5px; color: var(--muted); margin: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #c4c2b0; border-radius: 6px; overflow: hidden; }
.seg button { font: 600 15px var(--font-body); padding: 10px 6px; border: 0; background: #fff; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--forest); color: #fff; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.slider-val { font-weight: 700; font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: var(--olive); }
.calc-results { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.big .num { font: 800 68px/1 var(--font-display); color: var(--forest); font-variant-numeric: tabular-nums; }
.big .unit { font: 700 26px var(--font-display); color: var(--muted); margin-left: 4px; text-transform: uppercase; }
.big .sub { display: block; font-size: 14px; color: var(--muted); }
.gauge { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.gauge-track { position: relative; height: 18px; background: var(--tan-soft); border-radius: 4px; overflow: hidden; }
.gauge-fill { position: absolute; inset: 0 auto 0 0; background: var(--olive); transition: width .25s ease; }
.gauge-target { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--gold-dark); }
.gauge-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.verdict { font-weight: 600; margin: 0; }
.verdict.ok { color: var(--ok); } .verdict.short { color: var(--warn); }
.panel h2 { font-size: 24px; margin-bottom: 12px; }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 96px; gap: 10px; align-items: center; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.bar-row .lbl { color: var(--muted); }
.bar-row .val { text-align: right; font-weight: 600; }
.bar-row .val small { color: var(--muted); font-weight: 400; }
.bar-pair { display: flex; flex-direction: column; gap: 3px; }
.bar { height: 11px; border-radius: 3px; background: var(--olive); transition: width .25s ease; }
.bar.alt { background: var(--tan); height: 6px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--olive); }
.legend span.alt::before { background: var(--tan); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 500px) { .compare { grid-template-columns: 1fr; } }
.chem { border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.chem.sel { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.chem .pack { font: 700 26px/1.15 var(--font-display); color: var(--forest); }
.chem .pack small { font-size: 15px; color: var(--muted); font-family: var(--font-body); font-weight: 400; }
.chem dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 4px 0 0; font-size: 14.5px; }
.chem dt { color: var(--muted); } .chem dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.note { background: var(--olive-soft); border-radius: 8px; padding: 12px 14px; font-size: 14.5px; margin: 14px 0 0; }
.save-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.save-row input { flex: 1 1 200px; width: auto; }
.method ul { margin: 6px 0 0; padding-left: 18px; font-size: 15px; color: var(--muted); }
.method li + li { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .gauge-fill, .bar { transition: none; } }

.page-404 { text-align: center; padding-block: 80px; }
.page-404 p { color: var(--muted); }


/* Homepage: pick by voltage */
.section-tight { padding-block: 44px 8px; }
.volt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .volt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .volt-tiles { grid-template-columns: minmax(0, 1fr); } }
.volt-tile { display: flex; flex-direction: column; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--gold); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--ink); min-width: 0; }
.volt-tile:hover { border-color: var(--forest); border-left-color: var(--gold); box-shadow: 0 6px 18px rgba(2,59,24,.08); color: var(--ink); }
.volt-tile .v { font: 800 40px/1 var(--font-display); color: var(--forest); }
.volt-tile .t { font: 700 20px/1.15 var(--font-display); color: var(--forest); text-transform: uppercase; letter-spacing: .03em; }
.volt-tile .d { font-size: 15px; color: var(--muted); }
.volt-tile.alt { border-left-color: var(--olive); }
.volt-tile.alt .v { color: var(--olive); }

/* Homepage: electric-only lake band */
.lake-band { background: var(--lake); color: #e3eef0; }
.lake-band .eyebrow { color: var(--gold); }
.lake-band h2 { color: #fff; }
.lake-band p { max-width: 62ch; margin: 10px 0 0; }
.lake-band-in { display: grid; grid-template-columns: minmax(0, 1.6fr) auto; gap: 28px; align-items: center; }
.lake-band-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .lake-band-in { grid-template-columns: minmax(0, 1fr); } }

.next-step { margin: 12px 0 0; font-weight: 600; }

/* Electric-only lake finder */
.lakes-lede { max-width: 70ch; margin: 14px 0 0; font-size: 18px; color: var(--bark); }
.lakes-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; font-weight: 600; }
.lakes-page { padding-block: 28px 64px; display: flex; flex-direction: column; gap: 22px; }
.lake-tools { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px 18px; align-items: end; padding: 18px 20px; }
.lake-tools .field { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.lake-tools label, .lake-tools .k { font: 600 12.5px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.seg3 { grid-template-columns: repeat(3, 1fr); }
.seg3 button { padding-inline: 4px; font-size: 14.5px; }
.lake-count { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--muted); }
@media (max-width: 860px) { .lake-tools { grid-template-columns: minmax(0, 1fr); } }
.lake-map { height: 440px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--olive-soft); z-index: 0; }
@media (max-width: 600px) { .lake-map { height: 320px; } }
.lake-key { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--muted); }
.lake-key .badge { margin-right: 6px; }
.lake-state { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.lake-state-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-top: 3px solid var(--forest); padding-top: 10px; }
.lake-state-head a { font-weight: 600; }
.lake-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
@media (max-width: 420px) { .lake-grid { grid-template-columns: minmax(0, 1fr); } }
.lake { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-margin-top: 110px; }
.lake.hl { border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(220,182,49,.35); }
.lake-head h3 { font-size: 23px; }
.lake-loc { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.lake-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-block; font: 700 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; white-space: nowrap; }
.badge-elec { background: var(--lake); color: #fff; }
.badge-gas-ok { background: #e1efdf; color: var(--ok); }
.badge-gas-no { background: #f7e3d8; color: var(--warn); }
.badge-gas-ask { background: var(--tan-soft); color: var(--bark); }
.lake-rule { margin: 0; font-weight: 600; }
.lake-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 15px; }
.lake-facts dt { color: var(--muted); white-space: nowrap; }
.lake-facts dd { margin: 0; overflow-wrap: anywhere; }
.lake-quote summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--lake); }
.lake-quote blockquote { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid var(--tan); background: #fafaf5; font-size: 14.5px; font-style: italic; color: var(--bark); }
.lake-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); }
.lake-foot a { overflow-wrap: anywhere; }
.lake-none { font-weight: 600; }
.lake-cta { margin-top: 10px; }
.lake-fine { max-width: 72ch; }
.lake-fine h2 { font-size: 26px; margin-top: 12px; }
.lake-fine p { color: var(--bark); }
.state-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.state-chips a { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; text-decoration: none; font-weight: 600; font-size: 15px; }
.state-chips a span { color: var(--muted); font-weight: 400; margin-left: 4px; }
.state-chips a:hover { border-color: var(--forest); }
.leaflet-popup-content { font: 14.5px/1.45 var(--font-body); }