/* Locate Desk marketing site.

   Two themes off one set of tokens. The page has always had genuinely dark
   bands (the board, the packet, the CTA) sitting between light ones, and that
   alternation is what gives it rhythm. So dark mode does not just invert:
   the light bands go dark, and the already-dark bands go darker still, which
   keeps the same reading rhythm instead of flattening the page into one slab.

   Surfaces are named by role, never by color, so nothing below has to know
   which theme is on:

     --s-base    the page
     --s-alt     the alternating band
     --s-card    cards raised off either of those
     --s-inv     the inverted product bands (board, packet, CTA)
     --s-panel   a device surface inside an inverted band
     --paper-*   the damage-claim packet, which stays paper in both themes
                 because it is meant to read as something you printed
*/

@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/barlow-400.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/barlow-500.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("./fonts/barlow-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("./fonts/barlow-condensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("./fonts/barlow-condensed-700.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("./fonts/jetbrains-mono-400.woff2") format("woff2")}

/* ── Tokens: light ───────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  --s-base:#FFFFFF;
  --s-alt:#F5F3EE;
  --s-card:#FFFFFF;
  --s-card-h:#FCFBF8;
  --s-inv:#14161A;
  --s-foot:#0F1114;
  --s-panel:#1B1E23;
  --s-panel2:#22262C;
  --hero-top:#FBFAF7;
  --nav-bg:rgba(255,255,255,.94);

  --t:#191C21;
  --mu:#5C636D;
  --dim:#858C96;
  --line:#E3E0D8;
  --line2:#CFCBC1;

  /* Text and rules on inverted surfaces. Light in both themes by definition. */
  --t-inv:#EDEAE4;
  --t-inv-mu:#B4BAC2;
  --t-inv-dim:#8B9199;
  --pline:#2E333B;
  --pline2:#3A414B;

  --paper:#FBFAF7;
  --paper-alt:#F5F3EE;
  --paper-t:#191C21;
  --paper-mu:#5C636D;
  --paper-line:#CFCBC1;

  /* APWA uniform color code, identical values to src/lib/model.js */
  --elec:#E0392B; --gas:#F2C230; --comm:#E8792B; --water:#2E6FD9;
  --sewer:#3E9B54; --recl:#8A55C4; --surv:#E86BA0;

  /* --accent fills and rules; --accent-tx is the same orange pulled dark
     enough to clear 4.5:1 as actual text on the page background. */
  --accent:#D8620F;
  --accent-tx:#B0490B;
  --btn-bg:#B84F08;
  --btn-bg-h:#963F05;
  --btn-tx:#FFFFFF;
  --ghost-h-bg:#14161A;
  --ghost-h-tx:#FFFFFF;
  --flag-bg:#14161A;
  --flag-tx:#F2C230;
  --gold:#F2C230;

  --cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  --pad:clamp(16px,4vw,32px);
}

/* ── Tokens: dark ────────────────────────────────────────────────────────────
   Declared twice on purpose. The attribute rule is what the toggle drives and
   it has to be able to force light back on a machine set to dark, so it cannot
   live inside the media query. The media query is the no-JS path. */
:root[data-theme="dark"]{
  color-scheme:dark;

  --s-base:#15181C;
  --s-alt:#1B1E23;
  --s-card:#20242A;
  --s-card-h:#252A31;
  --s-inv:#0D0F12;
  --s-foot:#090A0C;
  --s-panel:#1F242A;
  --s-panel2:#262B32;
  --hero-top:#191D22;
  --nav-bg:rgba(21,24,28,.92);

  --t:#EDEAE4;
  --mu:#A5ACB5;
  --dim:#7E858F;
  --line:#2A2F36;
  --line2:#3A414B;

  --pline:#333941;
  --pline2:#434B56;

  --paper:#E9E5DC;
  --paper-alt:#DCD7CC;
  --paper-t:#14161A;
  --paper-mu:#4A5058;
  --paper-line:#BCB7AC;

  --accent:#E8792B;
  --accent-tx:#F0924A;
  --btn-bg:#E8792B;
  --btn-bg-h:#F28E45;
  --btn-tx:#14161A;
  --ghost-h-bg:#EDEAE4;
  --ghost-h-tx:#14161A;
  --flag-bg:#E8792B;
  --flag-tx:#14161A;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --s-base:#15181C;
    --s-alt:#1B1E23;
    --s-card:#20242A;
    --s-card-h:#252A31;
    --s-inv:#0D0F12;
    --s-foot:#090A0C;
    --s-panel:#1F242A;
    --s-panel2:#262B32;
    --hero-top:#191D22;
    --nav-bg:rgba(21,24,28,.92);

    --t:#EDEAE4;
    --mu:#A5ACB5;
    --dim:#7E858F;
    --line:#2A2F36;
    --line2:#3A414B;

    --pline:#333941;
    --pline2:#434B56;

    --paper:#E9E5DC;
    --paper-alt:#DCD7CC;
    --paper-t:#14161A;
    --paper-mu:#4A5058;
    --paper-line:#BCB7AC;

    --accent:#E8792B;
    --accent-tx:#F0924A;
    --btn-bg:#E8792B;
    --btn-bg-h:#F28E45;
    --btn-tx:#14161A;
    --ghost-h-bg:#EDEAE4;
    --ghost-h-tx:#14161A;
    --flag-bg:#E8792B;
    --flag-tx:#14161A;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--s-base);color:var(--t);font-family:var(--body);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}

img{max-width:100%;display:block}
a{color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--s-inv);color:#fff;padding:10px 16px}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:var(--pad)}
.wrap.narrow{max-width:860px}

/* ── Headings ────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:-.005em;line-height:.98;margin:0}
h1{font-size:clamp(38px,6.2vw,74px)}
h2{font-size:clamp(28px,4vw,46px)}
h3{font-size:clamp(19px,1.6vw,23px);letter-spacing:.005em}
h4{font-size:14px;letter-spacing:.14em;font-weight:600}
h1 em,h2 em{font-style:normal;color:var(--accent-tx)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.eyebrow{font-family:var(--cond);text-transform:uppercase;letter-spacing:.22em;
  font-size:12.5px;font-weight:700;color:var(--accent-tx);margin:0 0 12px}
.eyebrow.gold{color:var(--gold)}

/* ── APWA rule (the seven marking colors as a hairline) ──────────────────── */
.apwa-rule{display:flex;height:4px}
.apwa-rule i{flex:1}
.apwa-rule i:nth-child(1){background:var(--elec)}
.apwa-rule i:nth-child(2){background:var(--gas)}
.apwa-rule i:nth-child(3){background:var(--comm)}
.apwa-rule i:nth-child(4){background:var(--water)}
.apwa-rule i:nth-child(5){background:var(--sewer)}
.apwa-rule i:nth-child(6){background:var(--recl)}
.apwa-rule i:nth-child(7){background:var(--surv)}
.apwa-rule.flat{height:3px;margin-top:22px}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.11em;font-weight:700;
  font-size:15px;padding:13px 24px;border:2px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--btn-bg);color:var(--btn-tx);border-color:var(--btn-bg)}
.btn-accent:hover{background:var(--btn-bg-h);border-color:var(--btn-bg-h)}
.btn-ghost{background:transparent;color:var(--t);border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--ghost-h-bg);background:var(--ghost-h-bg);color:var(--ghost-h-tx)}
.btn-ghost.light{color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost.light:hover{background:#fff;color:#14161A;border-color:#fff}
.btn-sm{font-size:13.5px;padding:9px 17px}
.btn-lg{font-size:17px;padding:16px 30px}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s}
.nav.stuck{border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(0,0,0,.06)}
.nav-in{display:flex;align-items:center;gap:14px;min-height:66px}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand-mark{display:flex;gap:2.5px;height:22px;align-items:stretch}
.brand-mark i{width:4px;border-radius:1px}
.brand-mark i:nth-child(1){background:var(--elec)}
.brand-mark i:nth-child(2){background:var(--gas)}
.brand-mark i:nth-child(3){background:var(--comm)}
.brand-mark i:nth-child(4){background:var(--water)}
.brand-mark i:nth-child(5){background:var(--sewer);width:2.5px}
.brand-txt{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:24px;line-height:1}

.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-links a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;font-size:14px;color:var(--mu);text-decoration:none}
.nav-links a:hover{color:var(--t)}
.nav-links a.btn{color:var(--btn-tx)}

/* The theme toggle sits at top left, immediately after the wordmark, so it is
   the first control on the bar and never moves when the nav collapses. */
.theme-btn{flex:none;margin-left:2px}
.theme-btn,.nav-toggle{background:none;border:1px solid var(--line2);border-radius:2px;
  color:var(--t);cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;width:38px;height:38px;transition:border-color .15s,background .15s}
.theme-btn:hover,.nav-toggle:hover{border-color:var(--t)}
/* No display here: `.theme-btn svg` would outrank `.ico-moon` on specificity and
   both icons would show at once. Visibility belongs to the icon rules alone. */
.theme-btn svg{width:18px;height:18px}
.ico-sun{display:block}
.ico-moon{display:none}
:root[data-theme="dark"] .ico-sun{display:none}
:root[data-theme="dark"] .ico-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ico-sun{display:none}
  :root:not([data-theme="light"]) .ico-moon{display:block}
}
.nav-toggle{display:none}
.bars{display:block;width:18px}
.bars i{display:block;height:2px;background:var(--t);margin:4px 0}

@media (max-width:980px){
  .nav-toggle{display:flex;margin-left:auto}
  .nav-links{position:absolute;left:0;right:0;top:100%;background:var(--s-base);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:8px var(--pad) 18px;display:none;margin-left:0}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links a.nav-cta{border:2px solid var(--btn-bg);margin-top:14px;justify-content:center}
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.sec{padding:clamp(64px,8vw,116px) 0}
.sec.sand{background:var(--s-alt)}
.sec.dark{background:var(--s-inv);color:var(--t-inv)}
.sec.dark h2,.sec.dark h3{color:#F4F1EA}
.sec.dark .sec-sub,.sec.dark p{color:var(--t-inv-mu)}
.sec.dark em{color:var(--gold);font-style:normal}

.sec-head{max-width:760px;margin-bottom:clamp(34px,4vw,56px)}
.sec-sub{color:var(--mu);font-size:clamp(17px,1.5vw,19.5px);margin-top:16px}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,96px);
  background:
    radial-gradient(1000px 460px at 88% -8%,rgba(46,111,217,.10),transparent 62%),
    linear-gradient(180deg,var(--hero-top) 0%,var(--s-base) 55%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,64px);align-items:center}
.hero h1{margin-bottom:22px;text-wrap:balance}
.lede{font-size:clamp(17.5px,1.7vw,20px);color:var(--mu);max-width:56ch}
.lede-strong{color:var(--t);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 26px}
.hero-proof{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;
  font-size:14.5px;color:var(--mu)}
.hero-proof li{position:relative;padding-left:18px}
.hero-proof li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  background:var(--sewer)}

/* minmax(0,1fr), not 1fr: a bare 1fr track floors at the item's min-content, and
   the board's min-content is wider than a phone. That silently widens the whole
   document and clips the hero copy off the right edge. */
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-board{order:2}
}

/* ── The board (a device surface, dark in both themes) ───────────────────── */
.board{background:var(--s-panel);border:1px solid var(--pline);border-radius:3px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.55),0 2px 0 0 rgba(255,255,255,.02) inset;
  padding:16px;color:var(--t-inv);font-size:15px}
.board-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px solid var(--pline);padding-bottom:10px;margin-bottom:12px}
.board-title{font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em;
  font-weight:700;font-size:26px;line-height:1}
.board-clock{color:var(--t-inv-dim);font-size:12.5px}

.board-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--pline);
  border:1px solid var(--pline);margin-bottom:12px}
.cnt{background:var(--s-panel2);padding:10px 12px;border-top:2px solid transparent}
.cnt b{display:block;font-size:26px;line-height:1;font-weight:600}
.cnt span{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;color:var(--t-inv-dim);display:block;margin-top:3px}
.cnt.lapsed b{color:var(--elec)} .cnt.lapsed{border-top-color:var(--elec)}
.cnt.crit b{color:var(--gold)}
.cnt.warn b{color:var(--comm)}
.cnt.ok b{color:var(--sewer)}

.rows{display:flex;flex-direction:column;gap:1px;background:var(--pline);border:1px solid var(--pline)}
.row{background:var(--s-panel);display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:11px 13px;border-left:4px solid var(--pline)}
.row.ok{border-left-color:var(--sewer)}
.row.warn{border-left-color:var(--comm)}
.row.crit{border-left-color:var(--gold)}
.row.lapsed{border-left-color:var(--elec);
  background:repeating-linear-gradient(45deg,rgba(224,57,43,.14) 0 9px,transparent 9px 18px),var(--s-panel)}
.row-l{display:flex;gap:12px;align-items:center;min-width:0}
.days{width:52px;flex:none;text-align:center;border-right:1px solid var(--pline);padding-right:10px}
.days b{display:block;font-size:24px;line-height:1;font-weight:600}
.days span{font-family:var(--cond);text-transform:uppercase;font-size:9.5px;
  letter-spacing:.1em;color:var(--t-inv-dim)}
.days.ok b{color:var(--t-inv)}
.days.warn b{color:var(--comm)}
.days.crit b{color:var(--gold)}
.days.lapsed b{color:var(--elec)}
.job{font-weight:600;font-size:14.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:11px;color:var(--t-inv-dim)}
.addr{font-size:12px;color:var(--t-inv-dim);margin-top:1px}
.row-r{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.verdict{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;
  font-size:11px;color:var(--t-inv-dim);max-width:190px}
.verdict.ok{color:var(--sewer)}
.verdict.hold{color:var(--comm)}
.verdict.bad{color:var(--elec)}

.strip{display:flex;gap:3px;justify-content:flex-end}
.mk{width:12px;height:24px;border:1.5px solid var(--c);display:inline-block;flex:none}
.mk.clear{background:var(--c)}
.mk.held{background:repeating-linear-gradient(45deg,var(--c) 0 3px,transparent 3px 6px)}
.mk.none{background:transparent;opacity:.45}
.strip.big .mk{width:18px;height:40px;border-width:2px}

.board-foot{font-size:12.5px;color:var(--t-inv-dim);margin:12px 0 0;line-height:1.5}

/* ── Trust strip ─────────────────────────────────────────────────────────── */
.strip-trust{background:var(--s-inv);color:var(--t-inv-mu);padding:15px 0}
.strip-in{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:12.5px;font-weight:600;text-align:center}

/* ── Stats ───────────────────────────────────────────────────────────────── */
/* Three items: one across or three across, never two and an orphan. */
.stats{display:grid;grid-template-columns:minmax(0,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:800px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat{background:var(--s-card);padding:clamp(22px,2.6vw,34px);border-top:3px solid var(--elec)}
.stat b{display:block;font-family:var(--cond);font-weight:700;font-size:clamp(34px,4vw,50px);
  line-height:1;margin-bottom:12px}
.stat span{color:var(--mu);font-size:16px;display:block}
.stat:nth-child(2){border-top-color:var(--gas)}
.stat:nth-child(3){border-top-color:var(--water)}

/* ── Cards ───────────────────────────────────────────────────────────────── */
/* Six cards, so pin three across rather than letting auto-fit land on four and
   leave a dead cell in the second row. */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media (min-width:620px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--s-card);padding:clamp(22px,2.4vw,30px);transition:background .15s}
.card:hover{background:var(--s-card-h)}
.card-n{display:block;font-size:12.5px;color:var(--accent-tx);letter-spacing:.1em;margin-bottom:12px}
.card h3{margin-bottom:10px}
.card p{color:var(--mu);font-size:15.5px}

/* ── Legend (inverted band) ──────────────────────────────────────────────── */
.legend{display:grid;grid-template-columns:minmax(0,1fr);
  gap:1px;background:var(--pline);border:1px solid var(--pline)}
@media (min-width:560px){.legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.legend{grid-template-columns:repeat(4,minmax(0,1fr))}}
.leg{background:var(--s-panel);padding:clamp(20px,2.2vw,28px)}
.leg .strip{justify-content:flex-start;margin-bottom:18px}
.leg h3{font-size:19px;margin-bottom:8px}
.leg p{font-size:15px;margin:0}
.hazard{height:40px;width:60px;margin-bottom:18px;border:2px solid var(--elec);
  background:repeating-linear-gradient(45deg,rgba(224,57,43,.5) 0 9px,transparent 9px 18px)}

.apwa-key{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:12.5px;font-weight:600;color:var(--t-inv-dim)}
.apwa-key span{display:flex;align-items:center;gap:8px}
.apwa-key i{width:11px;height:18px;background:var(--c);display:inline-block}

/* ── Feature list ────────────────────────────────────────────────────────── */
/* Four items. 2×2 reads better than three and an orphan. */
.feats{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,48px)}
@media (min-width:820px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.feat{border-top:3px solid var(--t);padding-top:20px}
.feat h3{display:flex;gap:12px;align-items:baseline;margin-bottom:12px}
.feat h3 span{color:var(--accent-tx);font-size:13px;letter-spacing:.1em}
.feat p{color:var(--mu);font-size:16px}
.feat em{font-style:italic;color:var(--t)}

/* ── Split sections ──────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,4.5vw,68px);align-items:center}
.split.rev .split-copy{order:2}
.split-copy h2{margin-bottom:20px}
.split-copy p{color:var(--mu);font-size:16.5px}
.split-copy .btn{margin-top:8px}
.pull{border-left:3px solid var(--accent);padding-left:18px;font-size:18px !important;
  color:var(--t) !important;font-weight:500;margin-top:22px}
@media (max-width:900px){
  .split,.split.rev{grid-template-columns:minmax(0,1fr)}
  .split.rev .split-copy{order:0}
}

/* ── State rules panel ───────────────────────────────────────────────────── */
.panel{background:var(--s-panel);border:1px solid var(--pline);padding:18px;color:var(--t-inv);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.5)}
.panel-head{font-size:11.5px;letter-spacing:.2em;color:var(--t-inv-dim);
  border-bottom:2px solid var(--pline);padding-bottom:10px;margin-bottom:14px}
.rule-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--pline);padding-top:12px}
.rule-row:first-of-type{border-top:0;padding-top:0}
.st{font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;font-size:19px;flex:1;min-width:90px}
.nums{font-size:12.5px;color:var(--t-inv-dim)}
.chip{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:11px;font-weight:700;padding:4px 9px;border:1.5px solid currentColor}
.chip.ok{color:var(--sewer)}
.chip.bad{color:var(--elec);
  background:repeating-linear-gradient(45deg,rgba(224,57,43,.14) 0 7px,transparent 7px 14px)}
.rule-meta{font-family:var(--mono);font-size:11.5px;color:var(--t-inv-dim);margin:7px 0 16px;line-height:1.5}
.rule-meta:last-child{margin-bottom:0}

/* ── Packet doc (stays paper in both themes, dimmed in dark so it does not
      burn a hole in the page) ────────────────────────────────────────────── */
.doc{background:var(--paper);color:var(--paper-t);border:1px solid var(--paper-line);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.6)}
.doc-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:2px solid var(--paper-t);font-size:12px;letter-spacing:.16em}
.doc-head .dim{color:var(--paper-mu);letter-spacing:.08em}
.doc-list{list-style:none;margin:0;padding:6px 18px 14px}
.doc-list li{display:flex;gap:14px;align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--paper-line);font-size:14.5px;color:var(--paper-t)}
.doc-list li:last-child{border-bottom:0}
.doc-list .t{color:var(--paper-mu);font-size:11.5px;flex:none;width:82px}
.doc-foot{padding:11px 18px;border-top:1px solid var(--paper-line);background:var(--paper-alt);
  font-size:11px;letter-spacing:.12em;color:var(--paper-mu);text-transform:uppercase}

/* ── Table ───────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;min-width:480px;border-collapse:collapse;font-size:16.5px}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
.tbl th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:13px;color:var(--mu);border-bottom:2px solid var(--t)}
.tbl td:last-child,.tbl th:last-child{text-align:right;white-space:nowrap}
.tbl tr.sub td{font-weight:600;background:var(--s-alt)}
.tbl tfoot .hi td{background:var(--s-inv);color:#F4F1EA;font-weight:600;
  border-bottom:0;font-size:17.5px}
.tbl-note{margin-top:14px;font-size:14.5px;color:var(--mu);max-width:70ch}

.kickers{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3vw,40px);margin-top:clamp(40px,4vw,60px)}
@media (min-width:800px){.kickers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kick{border-top:3px solid var(--accent);padding-top:18px}
.kick h3{margin-bottom:9px}
.kick p{color:var(--mu);font-size:15.5px}

/* ── Tiers ───────────────────────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2vw,26px);align-items:start}
@media (min-width:900px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tier{background:var(--s-card);border:1px solid var(--line);padding:clamp(24px,2.6vw,32px);
  position:relative}
.tier.best{border:2px solid var(--flag-bg);box-shadow:0 24px 50px -30px rgba(0,0,0,.45);
  padding-top:36px}
.tier-flag{position:absolute;top:0;left:0;background:var(--flag-bg);color:var(--flag-tx);
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;font-weight:700;padding:6px 13px}
.tier h3{font-size:26px;margin-bottom:6px}
.tier-for{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:12.5px;color:var(--accent-tx);font-weight:600;margin-bottom:18px}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.tier li{position:relative;padding-left:22px;font-size:15.5px;color:var(--mu)}
.tier li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  background:var(--sewer)}
.tier.best li::before{background:var(--accent)}
.tier-note{margin-top:clamp(28px,3vw,40px);font-size:17px;color:var(--mu);
  border-left:3px solid var(--sewer);padding-left:18px}
.tier-note strong{color:var(--t)}

/* ── Limits ──────────────────────────────────────────────────────────────── */
.limits{display:grid;grid-template-columns:minmax(0,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:820px){.limits{grid-template-columns:repeat(2,minmax(0,1fr))}}
.limit{background:var(--s-card);padding:clamp(22px,2.4vw,30px);border-left:3px solid var(--gas)}
.limit h3{margin-bottom:10px}
.limit p{color:var(--mu);font-size:15.5px}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line2)}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.02em;
  font-weight:700;font-size:clamp(18px,1.8vw,22px);line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  margin-top:-9px;border-right:2.5px solid var(--accent-tx);border-bottom:2.5px solid var(--accent-tx);
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-4px}
.faq details p{padding:0 0 22px;color:var(--mu);font-size:16.5px;max-width:74ch}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.cta{background:var(--s-inv);color:var(--t-inv);padding:clamp(64px,8vw,110px) 0;
  background-image:
    radial-gradient(760px 320px at 12% 0%,rgba(242,194,48,.08),transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 14px,transparent 14px 28px)}
.cta-in{max-width:760px}
.cta h2{color:#F4F1EA;margin-bottom:18px}
.cta p{color:var(--t-inv-mu);font-size:17.5px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 22px}
.cta-fine{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:12.5px;color:var(--t-inv-dim) !important}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot{background:var(--s-foot);color:var(--t-inv-mu);padding:clamp(48px,5vw,72px) 0 26px;font-size:15px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);
  gap:clamp(30px,4vw,60px)}
.foot-brand .brand-txt{color:#F4F1EA;display:block;margin-top:12px}
.foot-brand p{margin-top:10px;color:var(--t-inv-dim);max-width:34ch;font-size:14.5px}
.foot-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px}
.foot-links h4{color:var(--t-inv-dim);margin-bottom:14px}
.foot-links a,.foot-links span{display:block;text-decoration:none;color:var(--t-inv-mu);
  padding:5px 0;font-size:15px}
.foot-links a:hover{color:#fff}
.foot-legal{margin-top:clamp(36px,4vw,56px)}
.foot-legal p{color:var(--t-inv-dim);font-size:13px;line-height:1.6;max-width:92ch}
@media (max-width:760px){.foot-in{grid-template-columns:minmax(0,1fr)}}

/* ── Reveal ──────────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:active{transform:none}
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */
@media (max-width:560px){
  body{font-size:16px}
  .row{flex-direction:column;align-items:stretch;gap:10px}
  .row-r{align-items:flex-start;text-align:left}
  .strip{justify-content:flex-start}
  .verdict{max-width:none}
  .board-counts{grid-template-columns:repeat(2,1fr)}
  .hero-cta .btn,.cta-actions .btn{width:100%}
}

/* ── Print (always on paper, whatever the screen theme) ──────────────────── */
@media print{
  .nav,.hero-cta,.cta-actions,.nav-toggle,.theme-btn,.apwa-rule{display:none}
  body{font-size:12pt;background:#fff !important;color:#000 !important}
  .sec.dark,.cta,.foot,.strip-trust{background:#fff !important;color:#000 !important}
  .sec.dark h2,.sec.dark h3,.cta h2,.foot-brand .brand-txt{color:#000 !important}
  .sec.dark p,.cta p,.foot-legal p{color:#333 !important}
  .reveal{opacity:1;transform:none}
}