/* Living Wage Hawaiʻi · round 6 site · one shared stylesheet for index.html and story.html
   Brand v5: Libre Franklin only; brand colors only (see BRIEF.md). Chart slots bring their own id-scoped CSS. */
:root{--spruce:#12403F;--coral:#FFB3A7;--mint:#CDEFE0;--ink:#0A2928;--paper:#F5F8F8;--white:#FFFFFF;--sea:#E6F3F1;
--s75:#4C6C6A;--s50:#859A99;--s25:#C0CBCB;--ct:#FFD9D3;--mt:#E6F7EF;--gut:16px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Libre Franklin',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;font-size:17px;line-height:1.45}
img{display:block;max-width:100%;height:auto}
a{color:var(--spruce)}
button,input{font-family:inherit}
svg text{font-family:'Libre Franklin',system-ui,sans-serif}
:focus-visible{outline:3px solid var(--spruce);outline-offset:3px;border-radius:4px}
.s-dark :focus-visible{outline-color:var(--mint)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--coral);color:var(--spruce);font-weight:700;padding:12px 16px;border-radius:8px}
.skip:focus{top:8px}
.s-in{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.s-in.narrow{max-width:760px}
@media (min-width:800px){:root{--gut:40px}}

/* ---------- shared type ---------- */
.kick{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--spruce);margin:0 0 12px}
.s-dark .kick{color:var(--mint)}
.s-hl{font-weight:900;font-size:clamp(30px,7.6vw,56px);line-height:1.04;letter-spacing:-.02em;margin:0 0 12px;color:var(--spruce);max-width:16em;text-wrap:balance}
.s-dark .s-hl{color:#fff}
.mk{background:var(--coral);color:#12403F;padding:.04em .18em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.s-dark em.co{font-style:normal;color:var(--coral)}
.line{font-size:18px;line-height:1.4;margin:0 0 20px;max-width:32em}
.s-dark .line{color:#fff}
.s-big{font-weight:900;font-size:clamp(76px,22vw,140px);line-height:.9;letter-spacing:-.04em;color:var(--spruce);font-variant-numeric:tabular-nums}
.s-dark .s-big{color:#fff}
.s-bigsub{font-weight:600;font-size:17px;line-height:1.3;margin:6px 0 0}

/* one-line source + "Sources +" toggle (same pattern as the chart slots) */
.s-src1{font-size:13px;line-height:1.45;color:var(--s75);margin:20px 0 0;padding-top:12px;border-top:1.5px solid var(--s25)}
.s-dark .s-src1{color:var(--s25);border-top-color:rgba(205,239,224,.3)}
details.s-src{margin-top:8px;font-size:13px;line-height:1.5;color:var(--ink)}
details.s-src summary{cursor:pointer;font-weight:700;color:var(--spruce);font-size:14px;list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
details.s-src summary::-webkit-details-marker{display:none}
details.s-src summary::after{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border:2px solid currentColor;border-radius:50%;font-size:15px;line-height:1}
details.s-src[open] summary::after{content:"\2212"}
details.s-src p{margin:0 0 4px;max-width:60em}
.s-dark details.s-src,.s-dark details.s-src summary{color:var(--mint)}
.s-dark details.s-src p{color:#fff}

/* ---------- buttons + forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:17px;background:var(--coral);color:var(--spruce);border:0;border-radius:999px;padding:0 24px;min-height:52px;cursor:pointer;text-decoration:none;line-height:1.1}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--spruce)}
.s-dark .btn.ghost{color:var(--mint);box-shadow:inset 0 0 0 2px var(--mint)}
.btn.sm{min-height:44px;font-size:15px;padding:0 18px}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#fff;text-underline-offset:4px}

/* ---------- top menu (not sticky: no pinned bars) ---------- */
.top{background:var(--spruce);color:#fff;position:relative;z-index:5}
.top .s-in{display:flex;align-items:center;gap:6px;height:64px;max-width:1240px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:16px;line-height:1.05;min-height:44px;margin-right:auto;min-width:0}
.brand svg{width:38px;height:38px;flex:none}
.top nav{display:flex;align-items:center;gap:2px}
.top nav a{color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:0 10px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px;white-space:nowrap}
.top nav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--mint);border-radius:0}
.top nav a:hover{background:rgba(205,239,224,.12)}
.top nav .home{display:none}
.top .btn{margin-left:6px;flex:none}
@media (min-width:640px){.top nav .home{display:inline-flex}}
@media (max-width:440px){.brand .nm{display:none}}
@media (min-width:800px){.top nav a{font-size:16px;padding:0 14px}}

/* ---------- story page header (short, no photo) ---------- */
.phead{background:var(--sea);color:var(--spruce);padding:40px 0 44px}
.phead h1{font-weight:900;font-size:clamp(42px,11vw,96px);line-height:.95;letter-spacing:-.03em;margin:0 0 14px;max-width:11em}
.phead p{margin:0;font-size:18px;color:var(--ink);font-weight:600}
.phead .toc{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.phead .toc a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--spruce);color:var(--spruce);text-decoration:none;font-weight:600;font-size:15px}
.phead .toc a:hover{background:var(--mt)}

/* ---------- section shells ---------- */
.part{position:relative;padding:48px 0}
.part.sea{background:var(--sea)}
.part.white{background:var(--white)}
.part.paper{background:var(--paper)}
.part.spruce{background:var(--spruce);color:#fff}
.part.slot{padding:0}            /* chart slots carry their own padding */
@media (min-width:900px){.part{padding:72px 0}.part.slot{padding:0}}

/* ---------- gap placeholder (home) ---------- */
.ph-card{border:2px dashed var(--s50);border-radius:20px;background:var(--mt);padding:28px 22px;display:grid;gap:10px;justify-items:start}
.ph-card .tag{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--s75)}
.ph-card b{font-weight:900;font-size:clamp(24px,6vw,36px);line-height:1.08;color:var(--spruce);letter-spacing:-.015em}
.ph-card p{margin:0;color:var(--s75);font-weight:600}
.ph-card .bar{width:100%;height:28px;border-radius:8px;background:linear-gradient(90deg,var(--s25) 0 60%,var(--ct) 60% 100%);margin-top:6px}

/* ---------- half (W2: hillside 44% + one house split) ---------- */
#half .art svg{display:block;width:100%;height:auto}
#half .art .wide{display:none}
#half .win{fill:#0A2928}
#half .lit .win{fill:#FFB3A7}
#half .short .win{fill:#0A2928;stroke:#859A99;stroke-width:.6}
#half .stat{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 20px;margin:4px 0 8px}
#half .stat .s-bigsub{max-width:13em;padding-bottom:10px}
#half .key{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--mint);margin:8px 0 0}
#half .key i{flex:none;width:14px;height:18px;border-radius:3px;background:var(--ink);box-shadow:inset 0 0 0 1.5px var(--s50)}
#half .fam{margin-top:44px}
#half .fam .s-hl{font-size:clamp(28px,6.8vw,46px)}
#half .split{position:relative;overflow:hidden;height:min(58svh,520px);min-height:340px;background:var(--s75);border-radius:16px}
#half .split img{position:absolute;width:150%;max-width:none;height:auto;left:-50%;bottom:-4%}
#half .split .shd{position:absolute;left:0;top:0;bottom:0;width:50%;background:rgba(18,64,63,.88);display:flex;align-items:flex-end}
#half .split .lab{padding:16px 14px 20px;color:#fff}
#half .split .lab b{display:block;font-weight:900;font-size:clamp(44px,12vw,80px);line-height:.95;letter-spacing:-.03em}
#half .split .lab span{display:block;font-weight:600;font-size:16px;line-height:1.25;margin-top:6px;max-width:9em}
#half .split .div{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff}
#half .split .oth{position:absolute;right:10px;bottom:18px;background:#fff;color:var(--ink);font-weight:700;font-size:14px;padding:8px 12px;border-radius:12px;max-width:44%;line-height:1.2}
#half .split .oth b{display:block;font-size:22px;font-weight:900;color:var(--spruce)}
@media (min-width:760px){#half .art .tall{display:none}#half .art .wide{display:block}}
@media (min-width:900px){
  #half .txt{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:end}
  #half .txt .s-hl{grid-row:1/3;margin:0;max-width:13em}
  #half .stat{flex-direction:column;align-items:flex-start;gap:0;margin:0}
  #half .stat .s-bigsub{padding-bottom:0}
  #half .key{margin-top:14px}
  #half .art{margin-top:32px}
  #half .fam{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;margin-top:72px}
  #half .split .lab{padding:26px}#half .split .lab span,#half .split .oth{font-size:17px}
}
@media (prefers-reduced-motion:no-preference){
  /* lights go out, one by one, in the homes that fall short */
  #half .short .win{transition:fill .45s ease-out;transition-delay:calc(var(--i,0) * 80ms + .2s)}
  #half .art.pre .short .win{fill:#FFB3A7}
}

/* ---------- neighbors (W2 photo opener + slippers) ---------- */
.opener{position:relative;height:62svh;min-height:380px;max-height:760px;display:flex;align-items:flex-end;background:var(--ink);color:#fff;overflow:hidden}
.opener>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.opener::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,41,40,.92) 0%,rgba(10,41,40,.55) 40%,rgba(10,41,40,0) 72%)}
.opener .s-in{position:relative;z-index:1;width:100%;padding-bottom:32px}
.opener h2{font-weight:900;font-size:clamp(36px,9.6vw,88px);line-height:.98;letter-spacing:-.03em;margin:0;max-width:11em;text-wrap:balance}
#neighbors .door{--g:16px;--pw:min(60px,calc((100vw - 2*var(--gut) - 4*var(--g)) / 5))}
#neighbors .hd{margin:0 0 32px}
#neighbors .hd .s-bigsub{font-size:19px;margin-top:10px}
#neighbors .slips{display:flex;gap:var(--g);align-items:flex-start}
#neighbors .row{display:flex;gap:var(--g);align-items:flex-end}
#neighbors .sl{flex:none;width:var(--pw);height:auto;display:block;overflow:visible}
#neighbors .sl{--sf:var(--spruce);--sk:var(--spruce);--st:var(--mint)}
#neighbors .sl.o{--sf:#fff;--sk:var(--s75);--st:var(--s75)}
#neighbors .lb{margin:14px 0 0;padding-top:10px;border-top:3px solid var(--spruce);font-size:15px;font-weight:700;line-height:1.25;color:var(--ink)}
#neighbors .g2 .lb{border-top-color:var(--s50);width:var(--pw)}
#neighbors .g2 .lb span{display:inline-block;white-space:nowrap}
@media (min-width:760px){
  #neighbors .door{--g:32px;--pw:100px}
  #neighbors .hd{display:flex;align-items:baseline;gap:28px;margin-bottom:48px}
  #neighbors .hd .s-bigsub{font-size:22px;margin:0}
  #neighbors .lb{font-size:18px;margin-top:20px}
}
@media (min-width:1100px){#neighbors .door{--g:56px;--pw:132px}}
@media (prefers-reduced-motion:no-preference){
  #neighbors .sl{transition:opacity .5s var(--ease),translate .5s var(--ease);transition-delay:calc(var(--i) * 90ms)}
  #neighbors .door.pre .sl{opacity:0;translate:0 14px}
}

/* ---------- fallback charts (used until a design-r6/charts file is picked) ---------- */
.fb{max-width:760px;margin:0 auto;padding:40px var(--gut) 32px}
.fb .h{font-weight:900;color:var(--spruce);font-size:clamp(30px,7.4vw,48px);line-height:1.06;letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance}
.fb .d{font-size:18px;line-height:1.4;margin:0 0 24px}
.fb .lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px;font-weight:600}
.fb .lab b{font-weight:900;font-size:22px;color:var(--spruce)}
.fb .lab small{display:block;font-weight:500;color:var(--s75);font-size:15px}
.fb .track{height:30px;border-radius:6px;background:var(--mt);overflow:hidden}
.fb .fill{height:100%;border-radius:6px;background:var(--s75);transform-origin:left center}
.fb .fill.k{background:var(--spruce)}
.fb .rows{display:grid;gap:16px}
@media (prefers-reduced-motion:no-preference){
  .fb .grow{transition:transform .9s var(--ease)}
  .fb.pre .grow{transform:scaleX(0)}
  .fb .growup{transition:transform .8s var(--ease);transform-origin:center bottom}
  .fb.pre .growup{transform:scaleY(0)}
}
/* short: staircase from $10.10 (2021) to $18 (2028), $30 line */
#fb-short .stairs{position:relative;height:300px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;align-items:end;border-bottom:2px solid var(--spruce);margin-top:44px}
#fb-short .st{position:relative;background:var(--spruce);border-radius:4px 4px 0 0}
#fb-short .st span{position:absolute;left:0;right:0;top:-24px;text-align:center;font-weight:800;font-size:15px;color:var(--spruce)}
#fb-short .st.last{display:flex;flex-direction:column;justify-content:flex-start}
#fb-short .gap{position:absolute;left:0;right:0;bottom:100%;background:var(--coral);border-radius:4px 4px 0 0;display:grid;place-items:center;font-weight:900;color:var(--spruce);font-size:clamp(16px,4.4vw,22px);text-align:center;line-height:1.05}
#fb-short .st.last span{top:auto;bottom:8px;color:#fff;font-size:17px}
#fb-short .lw{position:absolute;left:0;right:0;border-top:3px solid var(--spruce)}
#fb-short .lw b{position:absolute;left:0;top:-28px;font-weight:800;font-size:15px;color:var(--spruce);background:var(--sea);padding-right:8px}
#fb-short .yrs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:6px;font-size:13px;font-weight:600;color:var(--s75);text-align:center}
/* raises: two bars since 2021 */
#fb-raises .pct{font-weight:900;font-size:clamp(40px,11vw,64px);line-height:1;color:var(--spruce);letter-spacing:-.03em}
#fb-raises .rows{gap:22px}
#fb-raises .track{height:44px}
/* leaving */
#fb-leaving .tot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 18px;margin-bottom:22px}
#fb-leaving .tot .s-bigsub{padding-bottom:8px;max-width:12em}
#fb-leaving .yrsbars{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;height:170px;border-bottom:2px solid var(--spruce)}
#fb-leaving .yb{background:var(--s75);border-radius:4px 4px 0 0;position:relative}
#fb-leaving .yb span{position:absolute;left:-6px;right:-6px;top:-22px;text-align:center;font-size:13px;font-weight:700;color:var(--spruce)}
#fb-leaving .yl{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;font-size:12px;font-weight:600;color:var(--s75);text-align:center;margin-top:6px}
/* raise calculator */
#fb-raise .q{font-weight:700;color:var(--spruce);margin:0 0 8px}
#fb-raise .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
#fb-raise .chips{flex-wrap:nowrap}#fb-raise .chips button{flex:1 1 0;min-width:0;min-height:48px;border-radius:999px;border:2px solid var(--spruce);background:#fff;color:var(--spruce);font-weight:800;font-size:18px;cursor:pointer;padding:0 6px}
#fb-raise .chips button[aria-pressed=true]{background:var(--spruce);color:#fff}
#fb-raise .gain{margin-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
#fb-raise .gain b{font-weight:900;font-size:clamp(44px,12vw,72px);line-height:1;color:var(--spruce);letter-spacing:-.03em}
#fb-raise .gain span{font-weight:600}
#fb-raise .fill{transition:transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){#fb-raise .fill{transition:none}}

/* ---------- bill (W2 road, W1 date chip) ---------- */
#bill .grid{display:grid;gap:28px}
.chip{display:inline-flex;align-items:center;gap:12px;background:var(--mt);border-radius:18px;padding:12px 18px 12px 12px;margin:4px 0 18px}
.chip .d{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:var(--spruce);color:#fff;line-height:1}
.chip .d small{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--mint)}
.chip .d b{font-size:24px;font-weight:900}
.chip>span{font-weight:700;color:var(--spruce);font-size:16px;line-height:1.3}
.chip>span em{display:block;font-style:normal;font-weight:500;color:var(--ink);font-size:15px}
.road{list-style:none;margin:0;padding:0;position:relative}
.road::before{content:"";position:absolute;left:14px;top:18px;bottom:18px;width:3px;background:var(--s25)}
.road li{position:relative;padding:8px 0 12px 50px}
.road li::before{content:"";position:absolute;left:4px;top:10px;width:23px;height:23px;border-radius:50%;background:#fff;border:3px solid var(--s50)}
.road li.now::before{background:var(--spruce);border-color:var(--spruce)}
.road li b{display:block;font-size:19px;font-weight:800;color:var(--spruce)}
.road li span{display:block;font-size:16px;line-height:1.35;margin-top:2px}
#bill .ph{display:none;margin:0}
#bill .ph img{border-radius:24px;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){#bill .grid{grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}#bill .ph{display:block;height:560px}}

/* ---------- join (W1 words, W2 dark photo look) ---------- */
.join{position:relative;color:#fff;background:var(--ink);overflow:hidden}
.join>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.join::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,41,40,.97) 0%,rgba(10,41,40,.88) 52%,rgba(10,41,40,.3) 82%,rgba(10,41,40,.12) 100%)}
.join .s-in{position:relative;z-index:1;padding-top:30vh;padding-bottom:56px}
.join h2{font-weight:900;font-size:clamp(38px,10.4vw,88px);line-height:.96;letter-spacing:-.03em;margin:0 0 14px;max-width:10.5em;text-wrap:balance}
.join h2 em{font-style:normal;color:var(--coral)}
.join .line{font-size:19px}
.signup{display:grid;gap:12px;max-width:520px}
.signup label{font-weight:700;font-size:15px;color:var(--mint)}
.signup label small{font-weight:500;color:#fff}
.signup .f{display:grid;gap:6px}
.signup input{width:100%;height:54px;border-radius:999px;border:2px solid transparent;background:#fff;color:var(--ink);font-size:17px;padding:0 20px}
.signup input:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-color:var(--spruce)}
.signup .btn{justify-self:start;min-width:180px}
.signup .fine{font-size:13px;line-height:1.5;color:var(--s25);margin:0}
.signup .fine a{color:var(--mint);display:inline-block;padding:10px 0;margin:-10px 0}
.signup .err{color:var(--coral);font-weight:700;font-size:15px;margin:0;min-height:0}
.join .done{display:none;max-width:520px}
.join .done b{display:block;font-size:26px;font-weight:900;margin-bottom:6px}
.join.ok form{display:none}.join.ok .done{display:block}
.join .more{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media (min-width:900px){.join .s-in{padding-top:180px;padding-bottom:80px}.join::after{background:linear-gradient(90deg,rgba(10,41,40,.95) 0%,rgba(10,41,40,.86) 46%,rgba(10,41,40,.2) 80%)}}

/* ---------- "That was the short version" (W3) ---------- */
.facts-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--spruce);color:#fff;text-decoration:none;border-radius:24px;padding:26px 22px;margin:10px 0 28px}
.facts-cta b{font-weight:900;font-size:clamp(28px,7.4vw,44px);line-height:1;letter-spacing:-.025em}
.facts-cta small{display:block;font-weight:500;font-size:16px;color:var(--mint);margin-top:8px}
.facts-cta i{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--coral);color:var(--spruce);font-style:normal;font-weight:900;font-size:26px;transition:transform .2s}
.facts-cta:hover i{transform:translateX(4px)}
.facts-cta:focus-visible{outline-color:var(--spruce)}
.qlinks{list-style:none;margin:0;padding:0}
.qlinks a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;border-bottom:1.5px solid var(--s25);color:var(--ink);text-decoration:none;font-weight:600;font-size:18px;line-height:1.3}
.qlinks a::after{content:"→";font-weight:900;color:var(--spruce)}
.qlinks a:hover{color:var(--spruce)}
.h3k{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--spruce);margin:8px 0 4px}

/* ---------- common questions (story page) ---------- */
.qa{display:grid;gap:14px;margin-top:8px}
.qa article{background:var(--paper);border-radius:18px;padding:20px 20px 16px}
.qa h3{font-weight:900;font-size:21px;line-height:1.15;color:var(--spruce);margin:0 0 8px;letter-spacing:-.01em}
.qa p{margin:0;font-size:17px;line-height:1.42}
.qa .s{font-size:13px;color:var(--s75);margin-top:10px}
@media (min-width:860px){.qa{grid-template-columns:1fr 1fr;gap:18px}}

/* ---------- footer (W2) ---------- */
footer{background:var(--spruce);color:#fff;padding:44px 0 36px}
footer .grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}
footer .fb2{grid-column:1 / -1;display:flex;align-items:center;gap:14px}
footer .fb2 svg{width:60px;height:60px;flex:none}
footer .fb2 b{display:block;font-size:20px;font-weight:900}
footer .fb2 span{display:block;color:var(--mint);font-weight:600}
footer .about{grid-column:1 / -1;margin:0;font-size:15px;line-height:1.5;max-width:36em}
footer .about a{color:var(--mint)}
footer h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin:0 0 4px}
footer ul{list-style:none;margin:0;padding:0}
footer li a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font-weight:600;font-size:15px}
footer li a:hover{text-decoration:underline}
footer .small{font-size:13px;line-height:1.5;color:var(--s25);margin:24px 0 0;border-top:1px solid rgba(205,239,224,.2);padding-top:18px}
footer .small a{color:var(--s25)}
@media (min-width:860px){footer .grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px 40px}footer .fb2{grid-column:1}footer .about{grid-column:1;grid-row:2}}
/* hero, from design-r6/hero/hero.html, every rule scoped to #hero */
#hero{position:relative;min-height:min(calc(100svh - 64px),690px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--spruce)}
#hero picture{position:absolute;left:0;right:0;top:0;height:var(--ph,56%)}
#hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
#hero .shade{position:absolute;left:0;right:0;top:0;height:var(--ph,56%);background:linear-gradient(180deg,rgba(18,64,63,.3) 0%,rgba(18,64,63,0) 16%,rgba(18,64,63,0) var(--clear,52%),rgba(18,64,63,.78) calc(var(--clear,52%) + 26%),#12403F 100%)}
#hero .hin{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:110px var(--gut) 16px}
#hero h1{font-weight:900;font-size:clamp(46px,13.4vw,120px);line-height:.92;letter-spacing:-.035em;margin:0 0 16px;max-width:9.5em;text-wrap:balance;text-shadow:0 1px 18px rgba(10,41,40,.35)}
#hero h1 .sw{display:inline-block;background:var(--coral);color:var(--spruce);padding:0 .1em .04em;margin-left:-.04em;border-radius:.08em;transform:rotate(-1.2deg);text-shadow:none}
#hero :focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:6px}
#hero .gap{max-width:30rem;margin:0 0 14px}
#hero .gap .ends{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:8px}
#hero .gap .ends div{display:flex;flex-direction:column}
#hero .gap .ends .r{text-align:right;align-items:flex-end}
#hero .gap b{font-weight:900;font-size:clamp(34px,10vw,56px);line-height:.95;letter-spacing:-.03em}
#hero .gap b.lw{color:var(--coral)}
#hero .gap .ends span{font-weight:600;font-size:15px;line-height:1.25;color:#fff;margin-top:4px}
#hero .gap .meter{display:flex;height:30px;border-radius:999px;overflow:hidden;background:var(--coral)}
#hero .gap .meter .have{flex:0 0 60%;background:#fff}
#hero .gap .meter i{font-style:normal}
#hero .gap .meter .short{flex:1;display:flex;align-items:center;justify-content:center;color:var(--spruce);font-weight:800;font-size:15px;white-space:nowrap}
@media (max-width:359px){#hero .gap .meter .xs-hide{display:none}#hero .gap .ends span{font-size:13px}}
#hero .gap .yr{margin:7px 0 0;font-size:14px;line-height:1.4;color:var(--mint);font-weight:600}
#hero .gap .yr button{all:unset;cursor:pointer;color:#fff;text-decoration:underline;text-underline-offset:3px;padding:6px 0;margin:-6px 0}
#hero .gap .hsrc{display:none;margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--mint)}
#hero .gap .hsrc.open{display:block}
#hero .sign{max-width:30rem}
#hero .gap .yr button{padding:13px 0;margin:-13px 0}  /* 44px tap area, same look */
#hero .gap .hsrc p{margin:0 0 6px}
#hero .gap .hsrc .mh{font-weight:800;color:#fff;margin:10px 0 6px}
#hero .meas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px}
#hero .meas div{border:1.5px solid rgba(205,239,224,.35);border-radius:10px;padding:8px 8px 7px}
#hero .meas div.on{border-color:var(--coral)}
#hero .meas dt{font-weight:900;font-size:20px;line-height:1.05;color:#fff;letter-spacing:-.01em}
#hero .meas .on dt{color:var(--coral)}
#hero .meas dd{margin:3px 0 0;font-size:12px;line-height:1.25;color:var(--mint)}
@media (min-width:900px){
  /* desktop: photo across the top, words in a spruce band along the bottom (Nate, round 7) */
  #hero{min-height:min(calc(100vh - 64px),860px)}
  #hero picture,#hero .shade{left:0;right:0;top:0;bottom:auto;height:var(--dph,62%)}
  #hero picture img{object-position:var(--dpos,50% 50%)}
  #hero .shade{background:linear-gradient(180deg,rgba(18,64,63,.28) 0%,rgba(18,64,63,0) 14%,rgba(18,64,63,0) 62%,rgba(18,64,63,.85) 90%,#12403F 100%)}
  #hero .hin{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(32px,5vw,96px);align-items:end;max-width:1320px;margin:0 auto;padding:0 clamp(32px,5vw,88px) 56px}
  #hero h1{grid-column:1;grid-row:1/3;align-self:end;font-size:clamp(64px,6.6vw,108px);max-width:7.2em;margin:0}
  #hero .gap{grid-column:2;grid-row:1;margin:0 0 18px;max-width:32rem}
  #hero .sign{grid-column:2;grid-row:2;max-width:32rem}
  #hero .gap .ends span{font-size:16px}
}


/* ---------- round 12: sign-up rows (hero + mid-page), shared pill ---------- */
.sign .ask{display:block;font-weight:800;font-size:17px;line-height:1.2;color:#fff;margin:0 0 8px}
.pill{display:flex;gap:6px;background:#fff;border-radius:999px;padding:5px}
.pill input{flex:1;min-width:0;min-height:48px;border:0;border-radius:999px;background:transparent;padding:0 16px;font:400 17px 'Libre Franklin',sans-serif;color:var(--ink)}
.pill input:focus{outline:3px solid var(--coral);outline-offset:4px}
.pill input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--coral)}
.pill button{min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--coral);color:var(--spruce);font:800 18px/1 'Libre Franklin',sans-serif;cursor:pointer;flex:none}
.pill button:hover{box-shadow:0 0 0 4px rgba(255,179,167,.35)}
.sign .who{margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--mint);font-weight:500}
.sign .err,.ty .err{color:var(--coral);font-weight:700;font-size:15px;margin:6px 0 0}
.sign .err:empty,.ty .err:empty,.signup .err:empty{display:none}
.signup input[aria-invalid=true]{border-color:var(--coral)}
[hidden]{display:none!important}

/* mid-page sign-up (D11): one compact row, not sticky */
.part.midj{padding:28px 0 26px}
.midj .sign{max-width:520px}
@media (min-width:900px){.part.midj{padding:40px 0}.midj .s-in{display:flex;justify-content:center}.midj .sign{flex:1}}

/* thank-you, two steps (D12). Always sits on a dark band (hero, mid-page, join). */
.ty{max-width:520px;color:#fff}
.ty .ty-h{font-weight:900;font-size:24px;line-height:1.1;margin:0 0 4px;letter-spacing:-.01em}
.ty .ty-h:focus{outline:none}
.ty .ty-l{margin:0 0 10px;font-size:16px;color:var(--mint);font-weight:600}
.ty .ty-note{margin:0 0 12px;font-size:15px;line-height:1.4;color:#fff;background:rgba(255,179,167,.18);border-radius:10px;padding:10px 12px}.ty .ty-note a{color:#fff}
.ty .ty-row{display:grid;grid-template-columns:minmax(0,1fr) 7.5em;gap:8px}
.ty .ty-row.names{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:8px}
.ty .f{display:grid;gap:4px}
.ty label{font-weight:700;font-size:14px;color:var(--mint)}
.ty input{width:100%;height:50px;border-radius:999px;border:2px solid transparent;background:#fff;color:var(--ink);font:400 17px 'Libre Franklin',sans-serif;padding:0 16px}
.ty input[aria-invalid=true]{border-color:var(--coral)}
.ty input:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.ty .fine{font-size:12.5px;line-height:1.45;color:var(--s25);margin:10px 0 0}
.ty .fine a{color:var(--mint);display:inline-block;padding:10px 0;margin:-10px 0}
.ty .ty-btns{display:flex;align-items:center;gap:18px;margin-top:12px}
.ty .ty-btns .btn{min-height:48px;min-width:120px}
.ty button.tlink{background:none;border:0;cursor:pointer;font-size:16px;padding:0 4px;text-decoration:underline}
.ty .ty-msg{margin:6px 0 12px;padding:12px 14px;border-radius:14px;background:rgba(205,239,224,.12);border-left:4px solid var(--coral);font-weight:700;font-size:17px;line-height:1.35}
.ty .ty-share{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.ty .ty-share .btn{flex:1 1 auto;min-width:0}
.ty a.tlink{color:#fff}

/* small-business voice (D13), hidden until a real quote exists */
.voice{margin:0;background:var(--mt);border-radius:20px;padding:22px 22px 18px}
.voice blockquote{margin:0}
.voice blockquote p{margin:0;font-weight:800;font-size:clamp(22px,5.4vw,30px);line-height:1.2;color:var(--spruce)}
.voice figcaption{margin-top:10px;font-weight:600;color:var(--s75);font-size:15px}

/* header Join link (home); the story page keeps its coral Join button */
.top nav .jn{font-weight:800;box-shadow:inset 0 0 0 2px var(--coral);border-radius:999px;margin-left:4px;padding:0 14px}
.top nav .jn:hover{background:rgba(255,179,167,.15)}
.top .s-in:has(>.btn) nav .jn{display:none}
@media (max-width:359px){.top nav a{padding:0 7px}.top nav .jn{padding:0 10px}}

/* footer */
footer .small .upd{display:inline-block;margin-top:6px;color:#fff;font-weight:600}

/* ---------- round 12: shorten (D1). Less padding, tighter openers, side-by-side on desktop ---------- */
.part{padding:36px 0}
@media (min-width:900px){.part{padding:56px 0}.part.slot{padding:0}.part.midj{padding:40px 0}}
.opener{height:44svh;min-height:300px;max-height:560px}
.opener .s-in{padding-bottom:24px}
#neighbors .hd{margin:0 0 22px}
#neighbors .lb{margin-top:10px}
#half .art{margin-top:6px}
.join .s-in{padding-top:22vh;padding-bottom:40px}
.join .line{font-size:17px;margin-bottom:16px}
.join .more{margin-top:16px}
.road li{padding:5px 0 8px 50px}
.chip{margin:0 0 12px}
#bill .s-hl{margin-bottom:8px}
#bill .line{margin-bottom:14px}
.facts-cta{padding:20px 20px;margin:6px 0 16px}
.qlinks a{min-height:48px;padding:8px 0;font-size:17px}
footer{padding:32px 0 26px}
footer .grid{gap:12px 16px}
footer .small{margin-top:16px;padding-top:14px}
@media (max-width:859px){
  footer .grid{grid-template-columns:1fr 1fr}
  footer .grid>div:last-child{grid-column:1 / -1}
  footer .grid>div:last-child ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
}
@media (min-width:900px){
  .join .s-in{padding-top:120px;padding-bottom:64px}
  #bill .ph{height:460px}
  /* "short version": CTA and the question list side by side */
  #more .s-in.narrow{max-width:1120px;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:start}
  #more .s-hl{grid-column:1 / -1}
  #more .facts-cta{grid-column:1;grid-row:2 / 4;margin:0}
  #more .h3k{grid-column:2;margin-top:0}
  #more .qlinks{grid-column:2}
}
.ty .btn.ghost{color:var(--mint);box-shadow:inset 0 0 0 2px var(--mint);background:transparent}
/* phone hero: photo band has a fixed height, so a longer form or open Sources grows the hero downward instead of sliding text over the photo */
@media (max-width:899px){
  #hero picture,#hero .shade{height:var(--php,400px)}
  #hero .hin{padding-top:200px}
}

/* homepage "What you can do" (act3) */
#act3{padding:44px 0}
#act3 .kick{margin:0 0 8px}
#act3 .s-hl{margin:0 0 20px;color:var(--spruce)}
.a3-cards{list-style:none;padding:0;margin:0;display:grid;gap:12px}
@media (min-width:860px){.a3-cards{grid-template-columns:repeat(3,1fr);gap:18px}}
.a3{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:start;background:var(--white);border-radius:18px;padding:18px 18px 18px 20px;text-decoration:none;color:var(--ink);height:100%;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .15s}
.a3:hover,.a3:focus-visible{box-shadow:inset 0 0 0 2px var(--spruce)}
.a3 b{grid-column:1;font-weight:900;font-size:21px;line-height:1.15;color:var(--spruce)}
.a3 span{grid-column:1;font-size:16px;line-height:1.45}
.a3 i{grid-column:2;grid-row:1/span 2;align-self:center;font-style:normal;font-weight:900;font-size:22px;color:var(--spruce);background:var(--coral);width:44px;height:44px;border-radius:50%;display:grid;place-items:center}