/* =====================================================================================
   INHSA website (www.inhsa.org): the ONE stylesheet for every page.
   Ported from the approved design (inhsa/index.html) and the Wix embed kit's shared block
   (wix-sites/inhsa/_shared/shared-block.html v1.2), deduplicated into one file.

   CHANGING THIS FILE? Files under /assets/ are cached by browsers for a year, so after any edit
   bump the ?v= number on the <link href="/assets/site.css?v=..."> line in EVERY page
   (public/index.html, about/, register/, resources/, contact/, 404.html). Search for "site.css?v=".

   Sections: 1 tokens · 2 base · 3 type · 4 buttons · 5 common components · 6 bands · 7 header
             8 home · 9 about · 10 register · 11 resources · 12 contact · 13 footer · 14 404
             15 focus · 16 reduced motion / forced colors / print · 17 Questions? helper (17b: its live chat)
             18 choosers ("Open in Maps", "Add to calendar", "Subscribe to the INHSA calendar")
   ===================================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --forest:#1f4a3a; --forest-2:#2b6450; --pine:#173a2d; --ink:#1d2a24; --muted:#5d6b64;
  --cream:#fbf6ec; --cream-2:#f4ecdc; --sage:#ebf2ec; --mint:#e3efe8;
  --sun:#f4b740; --sun-deep:#c98f17; --sun-soft:#fdeec9;
  --berry:#d4573b; --berry-ink:#b23f25;
  --here:#1e9e57;   /* the Questions? chat's "we're here" dot (section 17) */
  --card:#fff; --line:#e7dfcd; --rule:rgba(31,74,58,.16); --line-strong:#7b8c82;
  --fs-xs:.78rem; --fs-sm:.92rem; --fs-body:1.0625rem; --fs-lede:1.2rem; --fs-h3:1.25rem;
  --fs-h2:clamp(1.85rem,1.2rem + 2.6vw,2.6rem);
  --fs-h1:clamp(2.25rem,1.2rem + 3.2vw,3.5rem);        /* home hero h1 */
  --fs-h1-page:clamp(2.1rem,1.3rem + 2.6vw,3rem);      /* h1 of the other pages (.page-head) */
  --r-sm:12px; --r:16px; --r-lg:24px;
  --tile-shadow:0 3px 0 rgba(23,58,45,.18);
  --max:1140px; --gutter:clamp(16px,4vw,24px); --sec-pad:clamp(56px,8vw,96px);
  --header-h:64px;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --text:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --link:var(--forest);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light;scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--cream);font-family:var(--text);font-size:var(--fs-body);line-height:1.6;color:var(--ink)}
main{flex:1 0 auto;display:block}
main:focus{outline:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-pad)}
.sec-first{padding-top:clamp(40px,6vw,72px)}      /* first section under the header */
.sec.follow{padding-top:0}                        /* continues the band above it (same colour) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

/* ---------- 3. Type ---------- */
h1,h2,h3{font-family:var(--display);color:var(--pine);margin:0 0 .5em;letter-spacing:-.015em;text-wrap:balance}
h1,h2{font-weight:800;line-height:1.08}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.22}
p,li{text-wrap:pretty}
.sec-head{max-width:720px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head h2{margin-bottom:.35em}
.page-head{max-width:760px}
.page-head h1{font-size:var(--fs-h1-page);margin-bottom:.35em}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;margin:0 0 .9rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-2)}
.eyebrow::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--sun);transform:rotate(8deg)}
.lede{margin:0;font-size:var(--fs-lede);color:var(--muted);max-width:60ch}
.kind{display:block;margin-bottom:2px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--berry-ink)}
.hl{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(transparent 56%,var(--sun) 56% 88%,transparent 88%);padding:0 .06em}
.ilink{color:var(--link);font-weight:700}            /* inline text link */

/* ---------- 4. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.85em 1.4em;border:2px solid transparent;border-radius:var(--r-sm);font-family:var(--text);font-weight:800;font-size:1rem;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s,background-color .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn-sun{background:var(--sun);color:var(--pine);box-shadow:0 4px 0 var(--sun-deep)}
.btn-sun:hover{box-shadow:0 6px 0 var(--sun-deep)}
.btn-sun:active{box-shadow:0 2px 0 var(--sun-deep)}
.btn-forest{background:var(--forest);color:#fff;box-shadow:0 4px 0 var(--pine)}
.btn-forest:hover{box-shadow:0 6px 0 var(--pine)}
.btn-forest:active{box-shadow:0 2px 0 var(--pine)}
.btn-line{background:transparent;color:var(--pine);border-color:var(--line-strong)}
.btn-line:hover{border-color:var(--forest);background:rgba(255,255,255,.6)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:var(--sun)}
.btn-lg{padding:1em 1.6em;font-size:1.125rem}
@media (max-width:480px){.btn-lg{padding:1em;font-size:1rem}}
.btn[disabled]{cursor:progress;opacity:.75;transform:none}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
@media (max-width:480px){.actions .btn{flex:1 1 100%}}

/* ---------- 5. Common components ---------- */
.card{padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border-radius:var(--r-sm);background:var(--mint);color:var(--forest)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chip{padding:.2em .75em;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.88rem;font-weight:700;color:var(--ink)}
.tile{display:grid;place-items:center;width:46px;height:52px;border-radius:var(--r-sm);background:#fff;color:var(--pine);font:800 1.5rem/1 var(--display);box-shadow:var(--tile-shadow)}
.tile.sun{background:var(--sun)}
/* "New" prize line (Home hero, Register): a small sun card (like .join-card) linking to the Home Prizes cards.
   .new-tag is the date chip's label (section 8) in berry; the new prize card on Home wears it too. */
.news{display:flex;margin:0 0 18px}
.lede+.news{margin:24px 0 0}
.news a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35em .6em;max-width:100%;padding:.45em .85em .45em .5em;border:2px solid var(--sun);border-radius:var(--r-sm);background:var(--sun-soft);color:var(--pine);font-size:var(--fs-sm);font-weight:700;line-height:1.35;text-decoration:none;transition:border-color .15s}
.news a:hover{border-color:var(--sun-deep)}
.news a:hover>span{text-decoration:underline;text-underline-offset:3px}
.new-tag{display:inline-block;padding:.2em .5em;border-radius:7px;background:var(--berry-ink);color:#fff;font:800 var(--fs-xs)/1.35 var(--text);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* Bee card: the forest "next bee" board (Home hero and Register) */
.board{position:relative;padding:clamp(22px,3vw,34px);border-radius:var(--r-lg);background:var(--forest);color:#fff;box-shadow:0 30px 60px -30px rgba(23,58,45,.7)}
.board .label{margin:0;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sun)}
.board .date{display:flex;align-items:center;gap:18px;margin:14px 0 20px}
.cal{flex:none;width:82px;overflow:hidden;border-radius:var(--r-sm);background:#fff;color:var(--pine);text-align:center;box-shadow:var(--tile-shadow)}
.cal span{display:block}
.cal .m{padding:4px 0;background:var(--berry-ink);color:#fff;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.cal .d{padding:6px 0 0;font:800 2.3rem/1.05 var(--display)}
.cal .y{padding-bottom:6px;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.board-title{min-width:0;margin:0;color:#fff;font-size:clamp(1.15rem,1rem + .6vw,1.4rem);line-height:1.2}
.board ul{display:grid;gap:10px;margin:0 0 24px;padding:0;list-style:none;font-size:.98rem;color:rgba(255,255,255,.88)}
.board li{position:relative;padding-left:22px}
.board li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:2px;background:var(--sun);transform:rotate(8deg)}
.board .btn{width:100%}
.floating{position:absolute}                       /* floating letter tiles = .tile + absolute position */
.f1{top:-22px;right:30px;transform:rotate(9deg)}
.f2{bottom:-24px;left:-18px;transform:rotate(-8deg)}
@media (max-width:960px){.board{max-width:560px}.f2{left:12px}}
@media (max-width:420px){.board .date{gap:14px}.board-title{font-size:1.1rem}}

/* Step cards on dark bands (Home journey, Register "what happens next") */
.stop{position:relative;display:flex;flex-direction:column;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r);background:rgba(255,255,255,.06)}
.stop .n{display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;border-radius:10px;background:var(--sun);color:var(--pine);font:800 1.05rem/1 var(--display)}
.stop h3{margin:0 0 .3em;color:#fff}
.stop .desc{margin:0;font-size:var(--fs-sm);color:rgba(255,255,255,.78)}
.stop a{color:var(--sun);font-weight:700;text-underline-offset:2px}

/* ---------- 6. Bands (full-width section backgrounds) ---------- */
.band-cream{background:var(--cream)}
.band-sage{background:var(--sage)}
.band-pine{background:var(--pine)}
.band-forest{background:var(--forest)}
.band-sage .benefits .ico{background:#fff}        /* white icon tiles directly on sage (cards keep mint) */
.on-dark{color:#fff;--link:var(--sun)}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .eyebrow{color:var(--sun)}
.on-dark .lede{color:rgba(255,255,255,.78)}
.on-dark .btn-line{color:#fff;border-color:rgba(255,255,255,.45)}
.on-dark .btn-line:hover{border-color:var(--sun);background:transparent}

/* ---------- 7. Skip link + header (sticky, one line; menu button below 961px) ---------- */
.skip{position:absolute;left:12px;top:-100px;z-index:100;padding:.7em 1em;border-radius:var(--r-sm);background:var(--pine);color:#fff;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
header.top{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid var(--line)}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  header.top{background:rgba(251,246,236,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--pine);text-decoration:none;white-space:nowrap;border-radius:10px}
.mark{flex:none;display:block;width:30px;height:34px}       /* bee hexagon mark, 100:112 like logo.svg */
.word{font:800 1.15rem/1 var(--display);letter-spacing:.02em}
.nav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav ul a:not(.btn){display:flex;align-items:center;gap:.4em;padding:.5em .7em;border-radius:10px;color:#38463f;font-size:.95rem;font-weight:700;text-decoration:none;white-space:nowrap}
.nav ul a:not(.btn):hover{background:var(--cream-2);color:var(--pine)}
.nav ul a[aria-current="page"]{background:var(--cream-2);color:var(--pine);text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:.45em}
.nav .nav-login{margin-left:6px;padding-left:8px;border-left:1px solid var(--line)}
.nav .nav-login .i{width:18px;height:18px;stroke-width:2.2}
.nav ul .btn{margin-left:10px;padding:.55em 1.1em;border-radius:10px;font-size:.95rem;white-space:nowrap;box-shadow:none}
.nav ul .btn:hover{transform:none;box-shadow:none;filter:brightness(.96)}
.menu-btn{display:none;width:44px;height:44px;place-items:center;margin-right:-10px;padding:0;background:none;border:0;border-radius:10px;color:var(--pine);cursor:pointer}
.menu-btn:hover{background:var(--cream-2)}
.menu-btn svg{width:24px;height:24px}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
/* the full nav needs about 860px (wordmark + 5 links + Member login + CTA); collapse at 960 and below.
   site.js uses the same breakpoint (DESKTOP = min-width:961px); change both together. */
@media (max-width:960px){
  :root{--header-h:60px}
  .js .menu-btn{display:grid}
  .js .main-nav{position:absolute;top:100%;left:0;right:0}
  .js .nav ul{display:none;flex-direction:column;align-items:stretch;gap:2px;padding:8px var(--gutter) 20px;background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(23,58,45,.35);max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}
  .js .nav ul.open{display:flex}
  .js .nav ul a:not(.btn){padding:.8em .7em;font-size:1rem}
  .js .nav .nav-login{margin:6px 0 0;padding:6px 0 0;border-left:0;border-top:1px solid var(--line)}
  .js .nav ul .btn{display:flex;width:100%;margin:10px 0 0;padding:.85em 1.2em;font-size:1rem}
  /* no-JS fallback: show the links, wrapped, instead of an unusable menu */
  html:not(.js) header.top{position:relative}
  html:not(.js) .nav{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  html:not(.js) .nav ul{flex-wrap:wrap}
}
@media (max-width:480px){.nav{gap:12px}}
@media (max-height:500px){header.top{position:relative}html{scroll-padding-top:12px}}

/* ---------- 8. Home ---------- */
/* Hero: copy (1.15fr) + bee card (.85fr); stacks at 960px and below */
.hero{position:relative;overflow:hidden;padding:clamp(32px,6vw,80px) 0 clamp(64px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{margin-bottom:.4em}
.intro{margin:0;max-width:36em;font-size:var(--fs-lede);color:var(--muted)}
.hero-note{display:flex;align-items:flex-start;gap:.5em;max-width:36em;margin:20px 0 0;font-size:var(--fs-sm);font-weight:700;color:var(--forest-2)}
.hero-note .i{width:18px;height:18px;margin-top:.15em;stroke-width:2.6}
.date-chip{display:none}
@media (max-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .intro{font-size:1.08rem}
  .date-chip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.3em .6em;margin:0 0 18px;padding:.45em .8em .45em .5em;border-radius:var(--r-sm);background:var(--forest);color:#fff;font-size:var(--fs-sm);font-weight:700;line-height:1.35}
  .date-chip b{padding:.2em .5em;border-radius:7px;background:var(--sun);color:var(--pine);font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
}

/* Journey trail: 4 columns, 2 at 1000px and below, 1 at 540px and below. Markup per stop is h3, when, desc, number;
   CSS order puts the number tile first, then "when". Dashed connectors only in the 4-column layout. */
.trail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.trail .n{order:-2}
.trail .when{order:-1;margin:0 0 4px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sun)}
.stop.dc{background:var(--sun);border-color:var(--sun)}
.stop.dc h3,.stop.dc .desc,.stop.dc .when{color:var(--pine)}
.stop.dc .n{background:var(--pine);color:var(--sun)}
@media (min-width:1001px){.trail .stop:not(:last-child)::after{content:"";position:absolute;top:42px;right:-21px;width:20px;border-top:2px dashed rgba(244,183,64,.6)}}
@media (max-width:1000px){.trail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.trail{grid-template-columns:minmax(0,1fr)}}

/* Prize tiers: 3 columns (stepped heights at 1001px and up), 1 column at 760px and below */
.prizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.prize{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.prize .lvl{margin:0 0 10px;font:800 var(--fs-xs)/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--berry-ink)}
.prize .big{margin:0 0 12px;font:800 clamp(2rem,1.5rem + 1.4vw,2.5rem)/1.05 var(--display);letter-spacing:-.02em;color:var(--forest);white-space:nowrap}
.prize .big small{margin-right:.15em;font:700 .42em/1 var(--text);letter-spacing:0;vertical-align:.35em}
.prize .desc{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.prize.peak{background:var(--forest);border-color:var(--forest)}
.prize.peak .lvl{color:var(--sun)}
.prize.peak .big{color:#fff}
.prize.peak .desc{color:rgba(255,255,255,.85)}
.prize.new{padding:27px;border:2px solid var(--sun);background:var(--sun-soft)}   /* the new prize: a sun card (2px border, so 1px less padding) with the New tag */
.prize.new .desc{color:#4a5550}
@media (min-width:1001px){
  .prizes{align-items:end}
  .prize:nth-child(1){min-height:230px}
  .prize:nth-child(2){min-height:268px}
  .prize:nth-child(3){min-height:306px}
}
@media (max-width:1000px){.prize{padding:24px 22px}.prize.new{padding:23px 21px}}
@media (max-width:760px){.prizes{grid-template-columns:minmax(0,1fr)}}
/* The section ends with the call to action ("Register for FREE Now!", README rule 12): an .actions row, centred under
   the cards; on phones the button is full width like every .actions button (section 4) */
.sec-cta{justify-content:center;margin-top:clamp(28px,4vw,44px)}

/* Why spell (compact) + join card: two columns, stack at 880px and below */
.why-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,64px);align-items:center}
.perks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:0;padding:0;list-style:none}
.perks li{display:flex;align-items:center;gap:14px;padding-top:16px;border-top:2px solid var(--rule)}
.perks .ico{margin:0}
.perks h3{min-width:0;margin:0;font-size:1.05rem}
.why-more{margin:28px 0 0}
.join-card{padding:clamp(22px,3vw,32px);border:2px solid var(--sun);border-radius:var(--r-lg);background:var(--sun-soft)}
.join-card h3{margin-bottom:.3em;font-size:1.5rem}
.join-card .sub{margin:0 0 14px;color:#4a5550}
.join-card ol{margin:0 0 24px;padding-left:1.3em;color:#3e4a44}
.join-card li{margin-bottom:6px;padding-left:.2em}
.join-card li::marker{font-weight:800;color:var(--forest)}
.join-card ol a{color:var(--forest);font-weight:700;text-underline-offset:2px}
@media (max-width:880px){.why-grid{grid-template-columns:minmax(0,1fr)}.join-card{max-width:560px}}
@media (max-width:540px){.perks{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ---------- 9. About ---------- */
.page-intro .page-head{margin-bottom:clamp(28px,4vw,44px)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,64px);align-items:center}
.story p{margin:0;max-width:56ch;font-size:1.125rem;color:#3e4a44}
.facts .facts-h{margin:0 0 14px;font:800 var(--fs-xs)/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--forest-2)}
.facts dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 18px;margin:0}
.facts dt{font-weight:700;color:var(--muted)}
.facts dd{margin:0;font-weight:700;overflow-wrap:break-word}
@media (max-width:880px){.intro-grid{grid-template-columns:minmax(0,1fr)}.facts{max-width:560px}}
@media (max-width:420px){.facts dl{grid-template-columns:minmax(0,1fr);gap:2px 0}.facts dt:not(:first-child){margin-top:10px}}

/* Benefits (full): 4 columns, 2 at 1000px and below, 1 at 540px and below */
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.benefits li{padding-top:20px;border-top:2px solid var(--rule)}
.benefits h3{margin-bottom:.3em}
.benefits p{margin:0;color:var(--muted)}
@media (max-width:1000px){.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.benefits{grid-template-columns:minmax(0,1fr);gap:24px}}
/* ready for the bee-day photo (see the TODO on the About page) */
.photo{margin:0 0 clamp(28px,4vw,44px);aspect-ratio:12/5;overflow:hidden;border-radius:var(--r-lg);background:var(--cream-2)}
.photo img{width:100%;height:100%;object-fit:cover}

/* Coordinator letter | sponsor card (stack at 880px and below) */
.people-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,64px);align-items:start}
.letter{padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:var(--r-lg);background:var(--card)}
.letter-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.portrait{flex:none;display:grid;place-items:center;width:64px;height:64px;overflow:hidden;border-radius:var(--r);background:var(--forest);color:var(--sun);font:800 1.5rem/1 var(--display);transform:rotate(-3deg);box-shadow:var(--tile-shadow)}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.letter h2{margin:0;font-size:1.6rem;font-weight:700;line-height:1.22}
.letter .letter-label{display:block;margin:0 0 4px;font:800 var(--fs-xs)/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--forest-2)}
.letter p{max-width:62ch;color:#3e4a44}
.letter .sig{margin:0}
.sig b{display:block;color:var(--pine)}
.sig span{font-size:var(--fs-sm);color:var(--muted)}
.sponsor h2{margin:0 0 .4em;font-size:var(--fs-h3);font-weight:700;line-height:1.22}
.sponsor p{margin:0;color:var(--muted)}
@media (max-width:880px){.people-grid{grid-template-columns:minmax(0,1fr)}.letter,.sponsor{max-width:640px}}

/* Compact CTA band: text | buttons; stacks at 760px and below */
.cta-band{padding-block:clamp(48px,6vw,72px)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(32px,5vw,56px);align-items:center}
.cta-grid h2{margin-bottom:.35em}
.cta-grid .lede{color:rgba(255,255,255,.8)}
.cta-grid .actions{margin-top:0;justify-content:flex-end}
@media (max-width:760px){.cta-grid{grid-template-columns:minmax(0,1fr)}.cta-grid .actions{justify-content:flex-start}}

/* ---------- 10. Register ---------- */
.reg-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,64px);align-items:center}
.reg-grid .page-head .lede{max-width:34em}
.reg-grid .hero-note a{color:var(--forest);text-underline-offset:2px}
@media (max-width:960px){.reg-grid{grid-template-columns:minmax(0,1fr)}}

/* How to register: numbered step cards (number | text | button). Step 1 ("lead") is the sun card that replaced the
   old Wix membership form. Button column drops under the text at 860px and below; the number moves on top at 540px. */
.rsteps{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.rstep{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,290px);gap:16px clamp(20px,3vw,40px);align-items:start;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.rstep.lead{border:2px solid var(--sun);background:var(--sun-soft)}
.rstep .n{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sun);color:var(--pine);font:800 1.25rem/1 var(--display);box-shadow:var(--tile-shadow)}
.rstep.lead .n{background:var(--forest);color:var(--sun)}
.rstep-body{min-width:0}
.rstep-body:last-child{grid-column:2/-1}              /* a step without a button uses the full width */
.rstep h3{margin:0 0 .35em;padding-top:.3em;font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem)}
.rstep p{margin:0 0 .6em;max-width:62ch;color:#3e4a44}
.rstep-body>:last-child{margin-bottom:0}
.rstep .mats{margin-top:12px}
.rstep-go{display:flex;flex-direction:column;align-items:stretch;gap:14px;align-self:center}
.rstep-go .btn{width:100%}
.rstep-go p{margin:0;text-align:center;font-weight:700;color:#3e4a44}
.rstep-go p a{color:var(--forest)}
@media (max-width:860px){.rstep{grid-template-columns:auto minmax(0,1fr)}.rstep-go{grid-column:2;align-self:start;max-width:360px}.rstep-go p{text-align:left}}
@media (max-width:540px){.rstep{grid-template-columns:minmax(0,1fr);gap:12px}.rstep-body:last-child,.rstep-go{grid-column:auto}.rstep-go{max-width:none}.rstep h3{padding-top:0}}

/* Eligibility: checklist + "when you register for the bee" card (stack at 880px and below) */
.elig-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,56px);align-items:start}
.checks{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.checks>li{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.checks .box{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-top:1px;border:2px solid var(--forest);border-radius:8px;color:var(--forest)}
.checks .box .i{width:16px;height:16px;stroke-width:3}
.checks .item{min-width:0;flex:1}
.checks b{display:block;margin-bottom:2px;font-size:1.05rem;color:var(--pine)}
.checks .desc{display:block;font-size:1rem;color:var(--muted)}
.counties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-top:12px}
.state-name{display:block;margin-bottom:6px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-2)}
.before h3{margin-bottom:.6em}
.before ul{display:grid;gap:10px;margin:0;padding:0;list-style:none;color:#3e4a44}
.before li{position:relative;padding-left:22px}
.before li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--sun);transform:rotate(8deg)}
.before a{overflow-wrap:anywhere}
@media (min-width:881px){.before{position:sticky;top:calc(var(--header-h) + 24px)}}
@media (max-width:880px){.elig-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:540px){.counties{grid-template-columns:minmax(0,1fr)}}

/* What happens next: 3 step cards (1 column at 760px and below) + contact row */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.next .more{margin:14px 0 0;font-size:var(--fs-sm)}
@media (min-width:761px){.next .stop:not(:last-child)::after{content:"";position:absolute;top:42px;right:-21px;width:20px;border-top:2px dashed rgba(244,183,64,.6)}}
@media (max-width:760px){.next{grid-template-columns:minmax(0,1fr)}}
.next-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(32px,4vw,44px);padding-top:clamp(24px,3vw,32px);border-top:1px solid rgba(255,255,255,.14)}
.next-foot p{margin:0;font-size:var(--fs-lede);font-weight:700;color:rgba(255,255,255,.9)}
.next-foot a.ilink{overflow-wrap:anywhere}
@media (max-width:480px){.next-foot .btn{flex:1 1 100%}}

/* ---------- 11. Resources ---------- */
.featured{display:flex;align-items:center;gap:20px;margin-bottom:28px;padding:22px 24px;border:2px solid var(--sun);border-radius:var(--r-lg);background:var(--sun-soft);text-decoration:none;transition:transform .15s}
.featured:hover{transform:translateY(-2px)}
.featured .ico{flex:none;width:56px;height:56px;margin:0;background:var(--sun);color:var(--pine)}
.featured .body{min-width:0;flex:1}
.featured b{display:block;font:800 clamp(1.2rem,1rem + .8vw,1.5rem)/1.2 var(--display);color:var(--pine)}
.featured .desc{display:block;color:#4a5550}
.featured .go{flex:none;display:inline-flex;align-items:center;gap:.4em;font-weight:800;color:var(--pine)}
.featured:hover .go{text-decoration:underline;text-underline-offset:3px}
.res-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,48px);margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.res-list li{border-bottom:1px solid var(--rule)}
.res{position:relative;display:block;padding:18px 40px 18px 0;border-radius:var(--r-sm);text-decoration:none}
.res b{display:block;font:700 1.12rem/1.3 var(--display);color:var(--pine)}
.res .desc{display:block;font-size:var(--fs-sm);color:var(--muted)}
.res .ext{position:absolute;top:22px;right:6px;width:18px;height:18px;color:var(--forest-2);transition:transform .15s}
.res:hover b{text-decoration:underline;text-underline-offset:3px}
.res:hover .ext{transform:translate(2px,-2px)}
@media (max-width:640px){
  .res-list{grid-template-columns:minmax(0,1fr)}
  .featured{flex-wrap:wrap;gap:14px 18px}
  .featured .go{flex-basis:100%}
}
@media (max-width:480px){.featured{padding:20px}.featured .ico{width:48px;height:48px}.featured .body{flex-basis:100%}}

/* Rules and key dates: 2x2 link cards (1 column at 640px and below) + join row */
.keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.keys>li{display:flex;min-width:0}
.key{position:relative;flex:1;min-width:0;display:block;padding:22px 56px 24px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);text-decoration:none;transition:transform .15s}
.key b{display:block;margin-bottom:4px;font:700 clamp(1.12rem,1rem + .4vw,1.3rem)/1.25 var(--display);color:var(--pine)}
.key .desc{display:block;font-size:var(--fs-sm);color:var(--muted)}
.key .go{position:absolute;top:22px;right:20px;width:22px;height:22px;color:var(--forest-2);transition:transform .15s}
a.key:hover{transform:translateY(-2px)}
a.key:hover b{text-decoration:underline;text-underline-offset:3px}
a.key:hover .go{transform:translateX(3px)}
a.key:hover .go.ext{transform:translate(2px,-2px)}
/* Key cards holding the "Open in Maps" / "Add to calendar" choosers (Our Bee, Regional Bee): links and buttons can't sit
   inside a link, so the card is a div whose title link stretches over it (::after) and the choosers sit on top
   (section 18). Same look and hover as the a.key cards. */
.key-link{color:inherit;text-decoration:none}
.key-link::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit}
.key-link:focus-visible{outline:none}
.key-link:focus-visible::after{outline:3px solid var(--forest);outline-offset:3px}
.key.has-map:hover{transform:translateY(-2px)}
.key.has-map:hover b{text-decoration:underline;text-underline-offset:3px}
.key.has-map:hover .go{transform:translateX(3px)}
.key.has-map:hover .go.ext{transform:translate(2px,-2px)}
.key.soon{padding:21px 55px 23px 23px;border:2px dashed rgba(31,74,58,.3);background:rgba(255,255,255,.45)}
.key.soon .kind{color:var(--forest-2)}
.key.soon .go{color:var(--line-strong)}
.join-row{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:28px;border-left:4px solid var(--sun)}
.join-row p{margin:0;min-width:0}
.join-row p b{display:block;margin-bottom:2px;font:800 clamp(1.25rem,1.1rem + .6vw,1.5rem)/1.2 var(--display);color:var(--pine)}
.join-row p span{color:var(--muted)}
.join-row .btn{flex:none}
@media (max-width:640px){.keys{grid-template-columns:minmax(0,1fr)}.join-row{flex-direction:column;align-items:stretch}.join-row .btn{width:100%}}
@media (max-width:480px){.key{padding:20px 48px 22px 20px}.key.soon{padding:19px 47px 21px 19px}.key .go{top:20px;right:16px}}

/* ---------- 12. Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,56px);align-items:center}
.page-head .more{margin:16px 0 0;max-width:60ch}
.c-card{padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;color:var(--ink);box-shadow:0 22px 44px -30px rgba(23,58,45,.38)}
.c-card address{font-style:normal}
.c-card dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 18px;margin:0 0 24px}
.c-card dt{font-weight:700;color:var(--muted)}
.c-card dd{margin:0;font-weight:700;overflow-wrap:break-word}
.c-card dd a{color:var(--forest-2)}
@media (max-width:880px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@media (min-width:600px) and (max-width:880px){
  .c-card{display:flex;align-items:center;justify-content:space-between;gap:20px 32px}
  .c-card address{min-width:0}
  .c-card dl{margin:0}
  .c-card .btn{flex:none}
}
@media (max-width:420px){.c-card dl{grid-template-columns:minmax(0,1fr);gap:2px 0}.c-card dt:not(:first-child){margin-top:10px}}

/* Contact form ("Send us a message"): white card, heading | fields (stacks at 880px and below) */
.form-card{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:20px clamp(28px,5vw,64px);padding:clamp(22px,3.5vw,44px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:0 22px 44px -30px rgba(23,58,45,.38)}
.form-side h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.75rem);margin-bottom:.3em}
.form-side p{margin:0 0 .6em;color:var(--muted)}
.form-side .form-alt{font-size:var(--fs-sm)}
@media (max-width:880px){.form-card{grid-template-columns:minmax(0,1fr)}}
html:not(.js) .form-intro,html:not(.js) .form-alt{display:none}
.cf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.94rem;font-weight:700;color:var(--ink)}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{width:100%;min-height:48px;padding:.65em .85em;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:400 1rem/1.4 var(--text)}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 1px var(--forest)}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--berry-ink);box-shadow:0 0 0 1px var(--berry-ink)}
.field [aria-invalid="true"]{border-color:var(--berry-ink);box-shadow:0 0 0 1px var(--berry-ink)}   /* fields the app sent back (site.js problem()) */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}   /* honeypot: hidden from people */
.cf-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.cf-foot .btn{min-width:180px}
@media (max-width:600px){.cf{grid-template-columns:minmax(0,1fr)}.cf-foot .btn{width:100%}}
.form-status{grid-column:1/-1;margin:0;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;font-weight:700}
.form-status:empty{display:none}
.form-status.ok{border-color:var(--forest-2);background:var(--mint);color:var(--pine)}
.form-status.err{border-color:var(--berry-ink);background:#fff;color:var(--berry-ink)}
.form-status.err a{color:var(--berry-ink)}
.form-status p{margin:0}
.form-status p+p{margin-top:.4em;font-weight:400;color:var(--ink)}
.form-side .nojs-note{margin:12px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--cream);color:var(--ink)}
.js .nojs-note{display:none}
html:not(.js) .cf{display:none}

/* Quick answers: 3 columns, 2 at 1000px and below, 1 at 640px and below */
.qa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.qa{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.qa h3{margin:0 0 .45em}
.qa p{margin:0 0 18px;max-width:60ch;color:var(--muted)}
.qa .ilink{margin-top:auto;align-self:flex-start}
.qa.wide{grid-column:span 2}
@media (max-width:1000px){.qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.qa{padding:24px 22px}}
@media (max-width:640px){.qa-grid{grid-template-columns:minmax(0,1fr);gap:14px}.qa.wide{grid-column:auto}}

/* ---------- 13. Footer ---------- */
.site-footer{padding:56px 0 28px;background:var(--pine);color:rgba(255,255,255,.75);font-size:var(--fs-sm)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.2fr);gap:32px 48px}
.foot-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;color:#fff;text-decoration:none;white-space:nowrap}
.foot-about p{max-width:40ch}
.foot-about b{display:block;color:#fff}
.site-footer p{margin:0 0 .6em}
.site-footer p+.foot-h{margin-top:22px}
.site-footer .foot-h{margin:0 0 12px;font:800 var(--fs-xs)/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--sun)}
.foot-links{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--sun);text-underline-offset:3px}
.site-footer p a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}
.site-footer a[href^="mailto:"]{overflow-wrap:anywhere}
.sib-card{display:block;padding:14px 16px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);background:rgba(255,255,255,.05);transition:border-color .15s}
.site-footer .sib-card:hover{border-color:var(--sun);text-decoration:none}
.sib-card b{display:block;margin-bottom:4px;font:700 1.02rem/1.3 var(--display);color:#fff;text-wrap:balance}
.sib-card span{display:inline-flex;align-items:center;gap:.35em;font-weight:700;color:var(--sun)}
.sib-card .i{width:16px;height:16px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.foot-bottom p{margin:0}
@media (max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot-about{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 14. 404 ---------- */
.nf{max-width:640px}
.nf-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:28px 0 0;padding:0;list-style:none}
.nf-links a{color:var(--forest);font-weight:700}

/* ---------- 15. Focus ---------- */
:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.on-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--sun)}
.nav ul a:not(.btn):focus-visible{background:var(--cream-2)}

/* ---------- 16. Reduced motion, forced colours, print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .btn:hover,.btn:active,.featured:hover,.res:hover .ext,a.key:hover,a.key:hover .go,a.key:hover .go.ext,
  .key.has-map:hover,.key.has-map:hover .go,.key.has-map:hover .go.ext{transform:none}
  .helper-panel,.helper-panel::backdrop,.helper-toast{animation:none}   /* the helper's slide-ins only run with no-preference (section 17) */
  .chooser-pop,.chooser-pop::backdrop{animation:none}      /* and the chooser sheet's slide-up (section 18) */
}
@media (forced-colors:active){
  .btn,.menu-btn{border:2px solid ButtonText}
  .checks .box,.stop,.stop .n,.cal,.ico,.chip,.tile,.featured,.key,.join-row,.qa,.c-card,.rstep,.rstep .n,.new-tag{border:1px solid CanvasText}
  .mark{forced-color-adjust:none}
  .hl{background:none;text-decoration:underline}
  .helper-btn,.helper-panel,.helper-alert,.helper-msg,.helper-badge,.helper-dot,.helper-toast,.helper-newpill,.helper-notice,.helper-file{border:1px solid CanvasText}
  .chooser .chooser-btn,.chooser-cancel{border:2px solid ButtonText}
  .chooser .chooser-btn::before{forced-color-adjust:none;background:ButtonText}
  .chooser-pop{border:1px solid CanvasText}
}
@media print{
  .skip,header.top,.floating,.date-chip,.featured .go,.res .ext,.key .go,.cf,.form-status,.helper-btn,.helper-panel,.helper-toast-region,.chooser-row,.chooser,.subscribe,.chooser-pop{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec,.hero{padding:14pt 0!important}
  .band-pine,.band-forest,.band-sage,.board,.stop,.prize,.c-card,.join-card,.letter,.featured,.site-footer,.sib-card,.rstep,.key,.qa{background:#fff!important;box-shadow:none!important;color:#000!important}
  .on-dark *,.board *,.prize *,.stop *,.site-footer *{color:#000!important}
  .stop,.prize,.checks>li,.join-card,.letter,.c-card,.benefits li,.res-list li,.board,.sib-card,.key,.qa,.rstep{break-inside:avoid}
  .hero-grid,.elig-grid,.why-grid,.intro-grid,.people-grid,.reg-grid,.contact-grid,.foot-grid,.cta-grid{grid-template-columns:1fr!important}
  .trail,.prizes,.benefits,.res-list,.keys,.qa-grid,.next{grid-template-columns:1fr 1fr!important}
  .prize{min-height:0!important}
  .before{position:static}
  a[href^="http"]:not(.btn):not(.key-link):not(.chooser-btn)::after{content:" (" attr(href) ")";font-size:9pt;font-weight:400;overflow-wrap:anywhere}
}

/* ---------- 17. Questions? helper (the corner button and its message panel; built by site.js section 6) ----------
   KEEP IN SYNC (look and behaviour) with the app's helper ("Questions? helper" in inhsa-app public/css/app.css).
   The button floats above the page (z-index 30) but under the sticky header and its phone menu (50) and the skip link.
   Phones (640px wide or less): a round icon button, so it covers less of the page. Phones and short screens (640px wide
   or less, or 500px tall or less; site.js decides when the panel opens): a bottom sheet, which is a
   modal <dialog> with a dimmed page behind it. Wider screens: a small panel above the button. Uses only the tokens
   in section 1. Print, forced colours and reduced motion: section 16 and the bottom of this section. */
@media screen{
  .has-helper .site-footer{padding-bottom:calc(28px + 80px + env(safe-area-inset-bottom))}   /* the last footer line scrolls clear of the button */
}
.helper-btn{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:30;
  display:inline-flex;align-items:center;gap:.5em;min-height:48px;margin:0;padding:0 1.2em 0 1em;border:0;border-radius:999px;
  background:var(--forest);color:#fff;font:800 1rem/1 var(--text);cursor:pointer;
  box-shadow:0 0 0 2px var(--cream),0 12px 28px -10px rgba(23,58,45,.6);transition:background-color .15s}   /* cream ring: stands out on the dark bands and footer */
.helper-btn:hover{background:var(--forest-2)}
.helper-btn[aria-expanded="true"]{background:var(--pine)}
.helper-btn:focus-visible{outline:3px solid var(--forest);outline-offset:3px;box-shadow:0 0 0 3px #fff}   /* forest on light bands, white on dark ones */
.helper-btn .i{width:22px;height:22px}
@media (max-width:640px){   /* phones: a round 48px button; the label stays for screen readers (as in the app) */
  .helper-btn{width:48px;height:48px;padding:0;justify-content:center}
  .helper-btn-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media (max-width:640px),(max-height:500px){.helper-tucked .helper-btn{display:none}}   /* the on-screen keyboard is up */

.helper-panel{position:fixed;inset:auto;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 60px);z-index:30;
  width:380px;max-width:calc(100vw - 32px);max-height:min(640px,80vh,calc(100vh - var(--header-h) - 96px));margin:0;padding:0;
  overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;color:var(--ink);
  box-shadow:0 28px 60px -24px rgba(23,58,45,.55)}
.helper-panel[open]{display:flex;flex-direction:column}
.helper-panel.helper-sheet{inset:auto 0 0 0;width:100%;max-width:100%;max-height:85vh;max-height:85dvh;border-width:1px 0 0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -16px 40px -20px rgba(23,58,45,.5)}
.helper-panel::backdrop{background:rgba(23,58,45,.45)}
html:has(.helper-panel.helper-sheet[open]){overflow:hidden}   /* the page behind the phone sheet doesn't scroll */
.helper-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 20px;border-bottom:1px solid var(--line);background:var(--cream)}
.helper-title{margin:0;font-size:1.3rem;line-height:1.2}
.helper-title:focus,.helper-sent-h:focus{outline:none}
.helper-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:none;color:var(--pine);cursor:pointer}
.helper-close:hover{background:var(--cream-2)}
.helper-close .i{width:22px;height:22px}
.helper-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 20px}
.helper-intro{margin:0;font-weight:700}
.helper-note{margin:6px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.helper-alert{margin:14px 0 0;padding:10px 14px;border:1px solid var(--berry-ink);border-radius:var(--r-sm);background:#fff;color:var(--berry-ink);font-size:var(--fs-sm);font-weight:700}
.helper-alert a{color:var(--berry-ink);overflow-wrap:anywhere}
.helper-form{display:grid;gap:14px;margin-top:16px}
.helper-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.helper-form .field textarea{min-height:124px}
.field-error{margin:0;font-size:var(--fs-sm);font-weight:700;color:var(--berry-ink)}
.helper-count{margin:0;font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-align:right}
.helper-send{width:100%}
.helper-fine{margin:14px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.helper-fine a{color:var(--forest);font-weight:700}
.helper-members{padding-top:12px;border-top:1px solid var(--line)}
.helper-sent-h{margin:0 0 .35em;font-size:1.3rem}
.helper-sent p{margin:0;overflow-wrap:anywhere}
.helper-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.helper-actions .btn{flex:1 1 auto}
@media (max-width:340px){.helper-names{grid-template-columns:minmax(0,1fr)}}

/* 17b. The live chat (site.js section 6): the unread count and the "we're here" dot on the button, the reply notice,
   the availability line, the chat (thread, "typing…", "Seen", the composer) and "Continue your earlier conversation?".
   KEEP IN SYNC with the app's panel. The panel keeps a fixed height while it shows the chat, so the thread scrolls on its
   own and the box to write in stays in view; if even that doesn't fit (a phone on its side, 200% zoom), the whole panel
   body scrolls. */
.helper-badge{position:absolute;top:-8px;right:-6px;min-width:24px;height:24px;padding:0 6px;border:2px solid #fff;border-radius:999px;
  background:var(--berry-ink);color:#fff;font:800 .8rem/20px var(--text);text-align:center}
.helper-dot{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:var(--here)}
.helper-toast-region:empty{display:none}
.helper-toast{position:fixed;z-index:30;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 64px);
  display:flex;align-items:center;gap:8px;width:max-content;max-width:min(440px,calc(100vw - 32px));padding:6px 6px 6px 16px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);font-weight:700;
  box-shadow:0 16px 36px -16px rgba(23,58,45,.55)}
.helper-toast p{margin:0}
.helper-toast .btn{padding:.5em 1em;box-shadow:none}
.helper-toast--float{display:none}
@media (max-width:640px){   /* phones: a banner at the top of the page content, so it never covers the page's own buttons... */
  .helper-toast{position:static;width:auto;max-width:none;margin:12px var(--gutter) 0;box-shadow:none}
  /* ...and once it is scrolled out of view, a compact copy LEFT of the round button (KEEP IN SYNC with the app's app.css) */
  .helper-toast.helper-toast--float:not([hidden]){display:flex;position:fixed;left:max(16px,env(safe-area-inset-left));right:calc(max(16px,env(safe-area-inset-right)) + 56px);
    bottom:max(16px,env(safe-area-inset-bottom));margin:0;min-height:48px;padding:4px 4px 4px 12px;gap:4px;font-size:var(--fs-sm);box-shadow:0 16px 36px -16px rgba(23,58,45,.55)}
  .helper-toast--float p{flex:1 1 auto;min-width:0}
}
.helper-link-who{margin:0 0 12px;overflow-wrap:anywhere}
.helper-link-form{display:grid;gap:14px;margin-top:4px}
.helper-link-form .helper-fine{margin:0 0 6px}
.helper-avail{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.helper-avail::before{content:"";flex:none;width:10px;height:10px;border:2px solid var(--line-strong);border-radius:50%}
.helper-avail.is-here{color:var(--forest)}
.helper-avail.is-here::before{border-color:var(--here);background:var(--here)}
.helper-notice{margin:0 0 14px;padding:10px 14px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:var(--cream);font-size:var(--fs-sm);font-weight:700}
.helper-notice a{color:var(--forest);overflow-wrap:anywhere}
.helper-panel.is-chat{height:min(720px,85vh,calc(100vh - var(--header-h) - 96px));max-height:min(720px,85vh,calc(100vh - var(--header-h) - 96px))}
.helper-panel.helper-sheet.is-chat{height:85vh;height:85dvh;max-height:85vh;max-height:85dvh}
.helper-body.is-chat{display:flex;flex-direction:column;padding:0}
.helper-chat:not([hidden]){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.helper-chat-top{flex:none;padding:10px 20px;border-bottom:1px solid var(--line)}
.helper-chat-top .helper-avail{margin:0}
.helper-who{margin:4px 0 0;font-size:var(--fs-xs);color:var(--muted);overflow-wrap:anywhere}
.helper-who:empty{display:none}
.helper-thread{flex:1 1 auto;min-height:min(170px,26vh);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;
  padding:12px 16px;background:var(--cream)}
.helper-thread:focus-visible{outline-offset:-3px}
.helper-more{flex:none;align-self:center;padding:.45em 1em;font-size:var(--fs-sm)}
.helper-msg{flex:none;max-width:88%;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.helper-msg p{margin:0}
.helper-msg--you{align-self:flex-end;border-color:#cfe2d6;background:var(--mint)}
.helper-msg--inhsa{align-self:flex-start}
.helper-msg-meta{font-size:var(--fs-xs);font-weight:800;color:var(--muted)}
.helper-msg-text{white-space:pre-wrap;overflow-wrap:anywhere}
.helper-msg.is-pending .helper-msg-text{color:var(--muted)}
.helper-msg.is-failed{border:1px dashed var(--berry-ink)}
.helper-msg.is-failed .helper-msg-meta{color:var(--berry-ink)}
/* INHSA's formatted answers and its files (site.js 6b+; = the app's .rich and .helper-file): only p, br, strong, em, ul, ol,
   li and a ever appear inside .rich. */
.helper-msg-text.rich{white-space:normal}
.helper-msg .rich p{margin:0 0 .35em}
.helper-msg .rich p:last-child,.helper-msg .rich ul:last-child,.helper-msg .rich ol:last-child{margin-bottom:0}
.helper-msg .rich ul,.helper-msg .rich ol{margin:.25em 0;padding-left:1.3em}
.helper-msg .rich li{margin:.1em 0}
.helper-msg .rich li>ul,.helper-msg .rich li>ol{margin:.1em 0}
.helper-msg .rich a{color:var(--forest);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.helper-files{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.helper-file{display:block;width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--cream);
  color:var(--pine);font:700 var(--fs-sm)/1.3 var(--text);text-align:left;overflow-wrap:anywhere;cursor:pointer}
.helper-file:hover{border-color:var(--line-strong)}
.helper-file:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.helper-newpill{flex:none;align-self:center;margin:8px 0 0;padding:6px 14px;border:0;border-radius:999px;background:var(--forest);color:#fff;
  font:800 var(--fs-sm)/1.2 var(--text);cursor:pointer}
.helper-under{flex:none;display:flex;gap:12px;padding:0 16px}
.helper-typing,.helper-seen,.helper-conn{margin:6px 0 0;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.helper-seen{margin-left:auto}
.helper-conn{flex:none;padding:0 16px}
.helper-done,.helper-after{flex:none;margin:8px 16px 0;padding:8px 12px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:#fff;font-size:var(--fs-sm)}
.helper-compose{flex:none;margin-top:8px;padding:10px 16px 0;border-top:1px solid var(--line)}
.helper-compose .helper-alert{margin:0 0 10px}
.helper-compose .field textarea{min-height:72px}
.helper-send-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.helper-keys{font-size:var(--fs-xs);color:var(--muted)}
.helper-chat-send{margin-left:auto;padding:.6em 1.6em}
.helper-chat-foot{flex:none;padding:8px 16px 14px}
.helper-foot{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.helper-chat-foot .helper-fine{margin-top:6px;font-size:var(--fs-xs)}
.helper-linkbtn{display:inline;margin:0;padding:0;border:0;background:none;color:var(--forest);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.helper-confirm{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--cream)}
.helper-confirm p{margin:0;font-weight:700}
.helper-confirm-q:focus{outline:none}
.helper-confirm .helper-actions{margin-top:12px}
.helper-gate .helper-actions{margin-top:16px}
.helper-loading p{margin:0;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .helper-toast{animation:helper-in .15s ease-out}
  .helper-panel[open]{animation:helper-in .15s ease-out}
  .helper-panel.helper-sheet[open]{animation-name:helper-up}
  .helper-panel[open]::backdrop{animation:helper-fade .15s ease-out}
}
@keyframes helper-in{from{opacity:0;transform:translateY(8px)}}
@keyframes helper-up{from{opacity:.6;transform:translateY(32px)}}
@keyframes helper-fade{from{opacity:0}}

/* ---------- 18. Choosers: "Open in Maps", "Add to calendar", "Subscribe to the INHSA calendar" ----------
   Markup: README "Dates, times and places". assets/chooser.js (a byte-identical copy of contracts/chooser.js, shared with
   inwspellingbee.com) turns each .chooser-btn link into a <button> with the same class and content, so these rules style
   both alike and nothing moves; then it opens ONE shared <dialog id="chooser-pop">: a popover under the button on wider
   screens (absolute, page coordinates set by the script, above the sticky header) or a bottom sheet on phones and short
   screens (640px wide or less, or 500px tall or less: the Questions? helper's breakpoint). Without JavaScript the buttons
   are plain links (Google Maps in a new tab, the .ics file, webcal://). The same behavior, words and class names as
   inwspellingbee.com and the app (inhsa-app public/css/chooser.css): keep them in step. Tokens from section 1 only.
   The icons are CSS masks (data: images, allowed by img-src), so the markup stays text only. */
[data-chooser="maps"]{--chooser-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.5a7 7 0 0 0-7 7c0 5.2 7 12 7 12s7-6.8 7-12a7 7 0 0 0-7-7zm0 4.4a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2z'/%3E%3C/svg%3E")}
[data-chooser="calendar"]{--chooser-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 5h13A1.5 1.5 0 0 1 20 6.5v12a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5v-12A1.5 1.5 0 0 1 5.5 5z'/%3E%3Cpath d='M4 9.5h16M8 3v4M16 3v4'/%3E%3C/svg%3E")}
[data-chooser="subscribe"]{--chooser-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 5h13A1.5 1.5 0 0 1 20 6.5v12a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5v-12A1.5 1.5 0 0 1 5.5 5z'/%3E%3Cpath d='M4 9.5h16M8 3v4M16 3v4M12 12.5v5M9.5 15h5'/%3E%3C/svg%3E")}
.chooser-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.chooser{display:inline-flex;max-width:100%;vertical-align:middle}
/* ".chooser .chooser-btn" (two classes) so a link rule of the card around it (.join-card ol a, .c-card dd a, .stop a) never
   gives the no-JavaScript link a look the button doesn't have */
.chooser .chooser-btn{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;gap:.45em;max-width:100%;min-height:44px;margin:0;padding:.45em 1.05em;
  border:2px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--pine);font:800 .92rem/1.2 var(--text);letter-spacing:0;text-transform:none;text-indent:0;
  text-align:left;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;transition:border-color .15s,background-color .15s}
.chooser .chooser-btn::before{content:"";flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--chooser-icon) center/contain no-repeat;mask:var(--chooser-icon) center/contain no-repeat}
.chooser .chooser-btn:hover,.chooser .chooser-btn[aria-expanded="true"]{border-color:var(--forest);background:var(--sage);color:var(--pine)}
/* the big Subscribe button wraps its words on a small phone (320 px) or at 400% zoom instead of cutting them off */
.chooser .chooser-btn-lg{min-height:48px;padding:.65em 1.35em;border-color:var(--forest);background:var(--forest);color:#fff;font-size:1rem;white-space:normal;text-align:center}
.chooser .chooser-btn-lg:hover,.chooser .chooser-btn-lg[aria-expanded="true"]{border-color:var(--pine);background:var(--pine);color:#fff}
/* dark bands (the Bee cards, How it works, What happens next): ghost buttons like .btn-ghost; Subscribe like .btn-sun */
.on-dark .chooser .chooser-btn{border-color:rgba(255,255,255,.45);background:transparent;color:#fff}
.on-dark .chooser .chooser-btn:hover,.on-dark .chooser .chooser-btn[aria-expanded="true"]{border-color:var(--sun);background:rgba(255,255,255,.08);color:#fff}
.on-dark .chooser .chooser-btn-lg{border-color:var(--sun);background:var(--sun);color:var(--pine)}
.on-dark .chooser .chooser-btn-lg:hover,.on-dark .chooser .chooser-btn-lg[aria-expanded="true"]{border-color:var(--sun-deep);background:var(--sun-deep);color:var(--pine)}
.stop.dc .chooser .chooser-btn{border-color:rgba(23,58,45,.45);color:var(--pine)}            /* the National Bee's sun card */
.stop.dc .chooser .chooser-btn:hover,.stop.dc .chooser .chooser-btn[aria-expanded="true"]{border-color:var(--pine);background:rgba(255,255,255,.35);color:var(--pine)}
.stop.dc :focus-visible{outline-color:var(--pine)}
/* where the choosers sit */
.board .chooser-row{margin:-6px 0 24px}
.stop .chooser-row{margin-top:16px}
.facts dd .chooser-row,.c-card dd .chooser-row{margin-top:10px}
.qa .chooser-row{margin:-4px 0 18px}
.key .chooser-row{position:relative;z-index:1}   /* above the card's stretched title link (section 11) */
.join-card li .chooser{display:flex;margin-top:8px}
.subscribe{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:clamp(32px,4vw,44px);text-align:center}
.chooser-note{max-width:46ch;margin:0;font-size:var(--fs-sm);color:var(--muted)}
.on-dark .chooser-note{color:rgba(255,255,255,.78)}
/* the dialog (built by chooser.js at the end of <body>) */
.chooser-pop{z-index:60;box-sizing:border-box;width:max-content;min-width:220px;max-width:min(360px,calc(100vw - 32px));max-height:none;margin:0;padding:12px;overflow:visible;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);font-family:var(--text);box-shadow:0 22px 48px -20px rgba(23,58,45,.5)}
.chooser-pop:not(.sheet){position:absolute;inset:auto}
.chooser-pop.placing{visibility:hidden}   /* while chooser.js measures and places it */
.chooser-pop.sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:100%;max-height:85vh;max-height:85dvh;overflow:auto;border-width:1px 0 0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:18px max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  box-shadow:0 -16px 40px -20px rgba(23,58,45,.5)}
.chooser-pop::backdrop{background:rgba(23,58,45,.45)}
html:has(.chooser-pop.sheet[open]){overflow:hidden}   /* the page behind the phone sheet doesn't scroll */
.chooser-head{padding:0 12px}
.chooser-pop .chooser-title{margin:0;font:800 1.1rem/1.25 var(--display);letter-spacing:-.01em;color:var(--pine)}
.chooser-sub{margin:2px 0 0;font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.chooser-list{display:grid;gap:2px;margin:8px 0 0;padding:0;list-style:none}
.chooser-option{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:8px 12px;border-radius:var(--r-sm);color:var(--pine);font-weight:700;text-decoration:none}
.chooser-option:hover,.chooser-option:focus-visible{background:var(--sage);color:var(--pine)}
.chooser-option:focus-visible{outline-offset:-3px}
.chooser-hint{font-size:.85rem;font-weight:600;color:var(--muted)}
.chooser-foot{margin:8px 0 0;padding:0 12px;font-size:.85rem;color:var(--muted)}
.chooser-status{margin:6px 12px 0;font-size:var(--fs-sm);font-weight:700;color:var(--forest)}
.chooser-status:empty{display:none}
.chooser-status label{display:block;margin-bottom:4px;color:var(--pine)}
.chooser-copy{width:100%;min-height:44px;padding:.5em .7em;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:400 .95rem/1.3 var(--text)}
.chooser-cancel{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:12px 0 0;padding:.7em 1.2em;border:2px solid var(--line-strong);border-radius:var(--r-sm);
  background:transparent;color:var(--pine);font:800 1rem/1.2 var(--text);cursor:pointer}
.chooser-cancel:hover{border-color:var(--forest)}
@media (prefers-reduced-motion:no-preference){
  .chooser-pop.sheet[open]{animation:chooser-up .16s ease-out}
  .chooser-pop.sheet[open]::backdrop{animation:helper-fade .16s ease-out}
}
@keyframes chooser-up{from{transform:translateY(100%)}}