/* GoNoGo Weather — shared styles */
:root{
  --bg:#0b1220;
  --bg2:#111c31;
  --card:#16233c;
  --card2:#1c2c49;
  --line:#26385c;
  --text:#eaf1ff;
  --muted:#9fb0cc;
  --brand:#3ba7ff;
  --brand2:#2b7fd4;
  --go:#28c76f;
  --maybe:#ffb020;
  --nogo:#ff5470;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --maxw:960px;
  --bg-primary:#07111f; --bg-secondary:#0b1729; --surface:#101f36; --surface-hover:#142743;
  --border:rgba(95,145,210,.25); --border-strong:rgba(92,180,255,.50);
  --text-primary:#f3f7ff; --text-secondary:#aebbd0; --text-muted:#8190a8;
  --accent-blue:#42a9f5;
  --status-go:#2fd184; --status-maybe:#f2b53f; --status-nogo:#ff5264;
  --status-go-dim:rgba(47,209,132,.16); --status-maybe-dim:rgba(242,181,63,.16); --status-nogo-dim:rgba(255,82,100,.16);
  --status-go-ink:#7ef0b6; --status-maybe-ink:#ffd487; --status-nogo-ink:#ff9aa8;
  --go:var(--status-go); --maybe:var(--status-maybe); --nogo:var(--status-nogo);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#0b1220 0%,#0d1526 100%) fixed;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,18,32,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--text)}
.brand .dot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--go),var(--brand));font-size:15px}
.brand:hover{text-decoration:none}
.brand .go{color:var(--go)}
.brand .no{color:var(--nogo)}
nav.main a{color:var(--muted);margin-left:18px;font-weight:600;font-size:15px}
nav.main a:hover{color:var(--text);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:22px;cursor:pointer}

/* Hero */
.hero{padding:46px 0 26px;text-align:center}
.hero h1{font-size:34px;line-height:1.15;margin:0 0 12px;font-weight:850;letter-spacing:-.5px}
.hero p.lead{font-size:18px;color:var(--muted);max-width:640px;margin:0 auto 22px}
.badge{display:inline-block;background:var(--card);border:1px solid var(--line);color:var(--muted);
  padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:18px}

/* Activity cards */
.activity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:26px 0}
.activity-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;transition:transform .15s ease,border-color .15s ease;box-shadow:var(--shadow)}
.activity-card:hover{transform:translateY(-3px);border-color:var(--brand);text-decoration:none}
.activity-card .emoji{font-size:34px}
.activity-card h3{margin:12px 0 6px;font-size:20px;color:var(--text)}
.activity-card p{margin:0;color:var(--muted);font-size:16px}
.activity-card.soon{opacity:.6}
.activity-card.soon:hover{transform:none;border-color:var(--line)}
.pill-soon{display:inline-block;font-size:11px;font-weight:700;background:var(--bg2);border:1px solid var(--line);
  color:var(--muted);border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle}

/* Sections */
section.block{padding:26px 0}
h2{font-size:25px;margin:0 0 14px;font-weight:800;letter-spacing:-.3px}
h2.sub,h3.sub{font-size:19px;margin:22px 0 8px}
p{color:#d7e2f5}
.muted{color:var(--muted)}

/* Widget */
.widget{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin:8px 0 6px}
.loc-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.loc-bar input{flex:1;min-width:180px;background:var(--bg2);border:1px solid var(--line);color:var(--text);
  padding:12px 14px;border-radius:11px;font-size:15px;outline:none}
.loc-bar input:focus{border-color:var(--brand)}
.btn{background:var(--brand);color:#fff;border:0;padding:12px 16px;border-radius:11px;font-weight:700;
  font-size:15px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--brand2)}
.btn.ghost{background:var(--bg2);border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--brand)}
.loc-hint{font-size:13px;color:var(--muted);margin:2px 2px 0}
.search-results{list-style:none;margin:6px 0 0;padding:0}
.search-results li{padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-top:6px;
  cursor:pointer;background:var(--bg2)}
.search-results li:hover{border-color:var(--brand)}
.loc-bar.ac-wrap{position:relative}
.loc-bar.ac-wrap .search-results{position:absolute;left:0;right:0;top:100%;z-index:30;margin:4px 0 0;
  background:var(--bg2);border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.35);max-height:300px;overflow:auto}
.loc-bar.ac-wrap .search-results:empty{display:none}
.loc-bar.ac-wrap .search-results li{margin-top:0;border-radius:0;border-left:0;border-right:0;border-top:0}

/* SEO location pages: breadcrumbs, hub cards, location links */
.breadcrumb{margin:14px 0 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:13px;color:var(--muted)}
.breadcrumb li{display:flex;align-items:center;gap:6px}
.breadcrumb li:not(:last-child)::after{content:"›";color:var(--muted);opacity:.6}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb li[aria-current]{color:var(--text);font-weight:600}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:8px}
.hub-card{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg2);text-decoration:none;color:var(--text);transition:border-color .15s}
.hub-card:hover{border-color:var(--brand)}
.hub-card h3{margin:0 0 4px;font-size:17px}
.hub-card p{margin:0;font-size:13px;color:var(--muted)}
.loc-links{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.loc-links li{margin:0}
.loc-links a{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg2);color:var(--text);text-decoration:none;font-size:14px}
.loc-links a:hover{border-color:var(--brand)}

/* Verdict */
.verdict{border-radius:var(--radius);padding:22px;margin-top:14px;text-align:center;border:1px solid var(--line)}
.verdict.go{background:linear-gradient(135deg,rgba(40,199,111,.18),rgba(40,199,111,.05));border-color:rgba(40,199,111,.5)}
.verdict.maybe{background:linear-gradient(135deg,rgba(255,176,32,.16),rgba(255,176,32,.04));border-color:rgba(255,176,32,.5)}
.verdict.nogo{background:linear-gradient(135deg,rgba(255,84,112,.16),rgba(255,84,112,.04));border-color:rgba(255,84,112,.5)}
.verdict .label{font-size:40px;font-weight:900;letter-spacing:-1px;margin:0}
.verdict.go .label{color:var(--go)}
.verdict.maybe .label{color:var(--maybe)}
.verdict.nogo .label{color:var(--nogo)}
.verdict .loc{font-size:15px;color:var(--muted);margin:2px 0 10px}
.verdict .why{font-size:16px;color:var(--text);margin:6px auto 0;max-width:520px}
.score-ring{font-size:13px;color:var(--muted);margin-top:8px}

/* Best window callout */
.window-callout{background:var(--card2);border:1px dashed var(--line);border-radius:12px;padding:14px 16px;margin-top:14px;text-align:center}
.window-callout b{color:var(--go)}
.window-callout .star{color:var(--maybe);font-size:16px;margin-right:2px}
.window-now{text-align:center;color:var(--go);font-weight:700;margin-top:6px;font-size:15px}

/* Route mode */
.mode-tabs{display:flex;gap:8px;margin-bottom:12px}
.mode-tab{flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--muted);padding:10px;
  border-radius:11px;font-weight:700;font-size:14px;cursor:pointer}
.mode-tab.active{background:linear-gradient(180deg,#22406e,#182a49);color:var(--text);border-color:var(--brand)}
.sel{background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:11px;font-size:15px}
.spd{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.spd input{width:60px;background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:10px;border-radius:10px;font-size:15px}
.pane.hidden{display:none!important}
.day .dname{white-space:nowrap}

/* Photo heroes */
.hero-photo{background-size:cover;background-position:center}
.hero-photo .sun,.hero-photo .cloud,.hero-photo .hero-art{display:none}
.hero-photo::before,.hero-photo::after{display:none}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,14,26,.78) 0%,rgba(8,14,26,.42) 48%,rgba(8,14,26,.05) 100%),
    linear-gradient(180deg,rgba(8,14,26,.15) 0%,rgba(8,14,26,.5) 62%,#0a1220 100%)}

/* Gear product photos */
.gear-img{display:block;width:100%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:10px;background:#eef1f6}

/* QA pass: verdict label auto-fits longer wording (NOT RECOMMENDED); GO green / NO-GO red kept via .verdict.<cls> */
.verdict .label{font-size:clamp(24px,6.5vw,40px);line-height:1.08;word-break:break-word}
.disclaimer{font-size:12px;color:var(--muted);margin-top:10px;max-width:520px;margin-left:auto;margin-right:auto}
.daily-note{font-size:13px;color:var(--muted);margin:2px 0 10px}

/* Language picker */
.lang-select{min-height:44px;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:9px;
  padding:6px 8px;font-size:13px;font-weight:600;margin-left:14px;cursor:pointer;max-width:140px}
.lang-select:focus{border-color:var(--brand);outline:none}
@media(max-width:640px){.lang-select{margin-left:auto;margin-right:10px;font-size:12px;padding:5px 6px}}

/* ================= REDESIGN PASS ================= */
/* Centralized status tokens — GO green / MAYBE orange / NO-GO red (one source of truth) */
/* Typography: cleaner, less cartoonish */
body{letter-spacing:.1px}
h1,.hero h1{font-weight:750;letter-spacing:-.5px}
h2{font-weight:720;letter-spacing:-.3px}
.brand{font-weight:700;letter-spacing:-.2px}
.prose{max-width:720px}
.prose p{margin:0 0 14px}

/* Hero: lighter, localized readability gradient so the photo stays vibrant */
.hero-scrim{background:
  linear-gradient(90deg,rgba(8,14,26,.60) 0%,rgba(8,14,26,.22) 44%,rgba(8,14,26,0) 80%),
  linear-gradient(180deg,rgba(8,14,26,0) 42%,rgba(8,14,26,.32) 80%,#0a1220 100%)}
.hero{padding:64px 0 46px}
.hero-sub{font-size:17px;color:#dbe6fb;font-weight:600;margin:0;text-shadow:0 1px 10px rgba(6,12,24,.5)}

/* Verdict: restrained, typography-led */
.verdict{background:linear-gradient(180deg,#16233c,#131d31);border-width:1px}
.verdict.go{border-color:rgba(47,191,113,.45)}
.verdict.maybe{border-color:rgba(246,167,35,.45)}
.verdict.nogo{border-color:rgba(240,72,88,.45)}
.verdict .label{font-weight:800}

/* Hourly: continuous timeline, no native scrollbar */
.hourly{scrollbar-width:none;-ms-overflow-style:none;gap:2px;padding:10px 2px 2px}
.hourly::-webkit-scrollbar{display:none;height:0;width:0}
.hour{background:transparent;border:0;width:60px;padding:8px 4px}
.hour .bar{height:5px;border-radius:4px;margin-top:8px;opacity:.95}

/* 7-day: compact card row */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:4px}
.wday{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 6px 10px;text-align:center}
.wd-name{font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.3px}
.wd-ic{font-size:22px;margin:7px 0 5px}
.wd-temp{font-weight:700;font-size:15px}
.wd-temp span{color:var(--muted);font-weight:500;margin-left:5px}
.wd-gust{font-size:11px;color:var(--muted);margin:5px 0 9px}
.wday .tag{display:inline-block;padding:3px 8px;font-size:11px}
@media(max-width:760px){.week-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:460px){.week-grid{grid-template-columns:repeat(3,1fr)}}

/* Gear: exactly 4 across on desktop (no lonely orphan card) */
.gear-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.gear-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gear-grid{grid-template-columns:1fr}}
.gear{padding:12px}
.gear-img{height:160px}

/* Light section — visual relief from the all-navy rhythm */
.section-light{background:#eef2f8;color:#1b2942;border-top:1px solid #dbe3f0;border-bottom:1px solid #dbe3f0}
.section-light h2,.section-light h3,.section-light h4{color:#12203a}
.section-light h2::after{background:linear-gradient(90deg,var(--go),var(--brand))}
.section-light p,.section-light li{color:#3a4863}
.section-light .gear{background:#fff;border-color:#e2e8f4;box-shadow:0 6px 18px rgba(20,40,80,.06)}
.section-light .gear p{color:#5a6a86}
.section-light .gear a.buy{background:#f1f5fc;border-color:#dbe3f2;color:#12203a}
.section-light .gear a.buy:hover{border-color:var(--brand)}
.section-light .aff-note{color:#6b7794}

/* Status text colours stay semantic on any background */
.tag.go,.verdict.go .label{color:var(--status-go)}
.tag.maybe,.verdict.maybe .label{color:var(--status-maybe)}
.tag.nogo,.verdict.nogo .label{color:var(--status-nogo)}

/* Ad slots: deliberate, not broken boxes */
.ad-slot{opacity:1;background:transparent;border:1px dashed var(--line);color:var(--muted);
  font-size:11px;letter-spacing:.5px;text-transform:uppercase;padding:14px;border-radius:12px}
.section-light .ad-slot{border-color:#d3ddec;color:#8996ac}

/* Hourly strip */
.hourly{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;margin-top:6px;-webkit-overflow-scrolling:touch}
.hour{flex:0 0 auto;width:70px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:10px 6px;text-align:center}
.hour .t{font-size:12px;color:var(--muted)}
.hour .ic{font-size:20px;margin:3px 0}
.hour .deg{font-size:14px;font-weight:700}
.hour .bar{height:6px;border-radius:4px;margin-top:7px}
.bar.go{background:var(--go)}
.bar.maybe{background:var(--maybe)}
.bar.nogo{background:var(--nogo)}

/* Daily */
.daily{display:grid;gap:8px;margin-top:8px}
.day{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:12px;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.day .dname{font-weight:700}
.day .dmeta{font-size:13px;color:var(--muted)}
.tag{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px}
.tag.go{background:rgba(40,199,111,.16);color:var(--go)}
.tag.maybe{background:rgba(255,176,32,.16);color:var(--maybe)}
.tag.nogo{background:rgba(255,84,112,.16);color:var(--nogo)}

/* Metric chips */
.metrics{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.metric{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 14px;min-width:96px}
.metric .k{font-size:12px;color:var(--muted)}
.metric .v{font-size:18px;font-weight:800}

/* Gear / affiliate */
.gear-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:10px}
.gear{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.gear .emoji{font-size:26px}
.gear h3{margin:8px 0 4px;font-size:16px}
.gear p{font-size:16px;color:var(--muted);margin:0 0 10px}
.gear a.buy{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;background:var(--bg2);border:1px solid var(--line);
  padding:8px 12px;border-radius:9px;color:var(--text)}
.gear a.buy:hover{border-color:var(--brand);text-decoration:none}
.aff-note{font-size:12px;color:var(--muted);margin-top:10px;font-style:italic}

/* FAQ */
details.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2px 16px;margin-top:10px}
details.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;color:var(--muted);font-size:20px}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:0 0 14px;color:#d7e2f5}

/* Ad slot */
.ad-slot{background:repeating-linear-gradient(45deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 10px,transparent 10px,transparent 20px);
  border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--muted);
  font-size:13px;margin:22px 0}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:30px 0;color:var(--muted);font-size:14px}
.site-footer .cols{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}
.site-footer a{color:var(--muted);display:block;margin:6px 0}
.site-footer a:hover{color:var(--text)}
.site-footer .footer-heading{color:var(--text);margin:0 0 8px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.copyright{margin-top:22px;font-size:13px;border-top:1px solid var(--line);padding-top:16px}

/* Content pages */
.prose{max-width:760px}
.prose p,.prose li{color:#d7e2f5}
.prose h2{margin-top:30px}
.prose ul{padding-left:20px}
.prose table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.prose th{background:var(--bg2)}

/* CWV: reserve the JS-rendered widget mounts at their TYPICAL rendered height so the live
   dashboard / verdict swaps in without pushing the page (fixes the #wx-out CLS ~0.298).
   Mobile-first: the homepage renders a stacked dashboard + 9 activity cards — tallest on
   narrow phones (cards 1-up), shorter once the card grid goes 2-up at 560px and the dashboard
   goes 2-column at 900px / cards 3-up at 920px. Reserves err slightly generous: a too-small
   reserve would shift the page (bad), a slightly-large one only leaves a little slack (no shift).
   #gng-weather also holds the pre-JS empty space AND stays >= (search bar + #wx-out reserve),
   so the moment JS injects the widget nothing below moves. */
#gng-weather{min-height:1580px;display:block}
#wx-out{min-height:1500px;display:block}
/* Top-level activity pages (motorcycle.html, cycling.html, ...) do NOT auto-run: the verdict
   renders only after the visitor searches / taps "use my location", so its growth is a
   user-initiated shift (excluded from CLS). Keep a compact reserve for good UX (as before). */
#gng-app{min-height:520px;display:block}
/* SEO city pages carry data-lat/data-lon on #gng-app and AUTO-RUN the verdict on load, so
   reserve the taller verdict height there (verdict banner + metrics + hourly + 7-day) to
   avoid a load-time shift. Sized generously; validate with post-deploy RUM. */
#gng-app[data-lat]{min-height:1280px}
@media(min-width:560px){
  #gng-weather{min-height:1180px}
  #wx-out{min-height:1100px}
  #gng-app{min-height:460px}
  #gng-app[data-lat]{min-height:1000px}
}
@media(min-width:900px){
  #gng-app{min-height:440px}
  #gng-app[data-lat]{min-height:880px}
}
@media(min-width:920px){
  #gng-weather{min-height:810px}
  #wx-out{min-height:740px}
}
/* Loading + error + intro states inherit the reserved height so they fill the SAME box as the
   result (never shorter): switching loading -> verdict -> error never changes the box height. */
.status-msg{padding:14px;color:var(--muted);text-align:center;min-height:inherit;
  display:flex;align-items:center;justify-content:center}
.hidden{display:none!important}

@media(max-width:640px){
  body{--mobile-glass:linear-gradient(155deg,rgba(5,21,38,.30),rgba(5,19,34,.44) 52%,rgba(5,19,34,.68));--mobile-glass-edge:rgba(150,194,222,.37)}
  .hero h1{font-size:27px}
  nav.main{position:absolute;top:60px;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--line);
    flex-direction:column;padding:10px 18px;display:none}
  nav.main.open{display:flex}
  nav.main a{margin:8px 0}
  .nav-toggle{display:block}
  .verdict .label{font-size:32px}
}

/* ===================== Enhanced visuals ===================== */
body{
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(59,167,255,.18), transparent 60%),
    radial-gradient(900px 520px at 8% -6%, rgba(120,90,180,.16), transparent 58%),
    linear-gradient(180deg,#0a1120 0%,#0b1526 55%,#0a1220 100%);
  background-attachment:fixed;
}
/* faint starfield */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 15% 22%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 68% 14%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.2px 1.2px at 42% 30%, rgba(255,255,255,.30), transparent),
    radial-gradient(1.5px 1.5px at 85% 26%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.2px 1.2px at 30% 10%, rgba(255,255,255,.25), transparent);
  background-repeat:no-repeat;
}

/* Header polish */
.site-header{background:rgba(9,15,27,.72);border-bottom:1px solid rgba(80,110,160,.28)}
.brand .dot{box-shadow:0 4px 14px rgba(40,199,111,.4)}

/* Hero as a dusk sky scene */
.hero{position:relative;overflow:hidden;padding:72px 0 52px;isolation:isolate}
.hero .container{position:relative;z-index:3}
.hero-sky{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(180deg,#0a1324 0%,#152a54 34%,#31417a 56%,#7a4f83 78%,#d0834f 100%)}
.hero-sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(180deg,rgba(10,18,32,0) 0%,rgba(10,18,32,.55) 55%,#0a1220 96%)}
.hero-sky::before{content:"";position:absolute;left:-10%;top:-30%;width:60%;height:80%;
  background:radial-gradient(closest-side,rgba(120,90,180,.22),transparent);filter:blur(20px)}
.sun{position:absolute;right:16%;top:50%;width:120px;height:120px;border-radius:50%;z-index:1;
  background:radial-gradient(circle,#ffe9bf 0%,#ffcf85 46%,rgba(255,180,95,.25) 70%,transparent 74%);
  box-shadow:0 0 130px 46px rgba(255,190,120,.35)}
.cloud{position:absolute;height:24px;width:120px;background:rgba(255,255,255,.16);border-radius:26px;
  filter:blur(3px);z-index:2;animation:drift linear infinite}
.cloud::before{content:"";position:absolute;top:-14px;left:24px;width:50px;height:50px;background:inherit;border-radius:50%}
.cloud::after{content:"";position:absolute;top:-8px;left:62px;width:34px;height:34px;background:inherit;border-radius:50%}
.c1{top:18%;animation-duration:70s}
.c2{top:33%;transform:scale(.75);opacity:.8;animation-duration:95s;animation-delay:-30s}
.c3{top:9%;transform:scale(1.25);opacity:.6;animation-duration:120s;animation-delay:-60s}
@keyframes drift{from{transform:translateX(-160px)}to{transform:translateX(112vw)}}
.hero-art{position:absolute;right:5%;bottom:9%;width:236px;max-width:40%;z-index:2;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero h1{text-shadow:0 2px 18px rgba(6,12,24,.5)}
.hero p.lead{color:#e6eefc;text-shadow:0 1px 10px rgba(6,12,24,.45)}
.badge{background:rgba(12,20,36,.55);border-color:rgba(120,150,200,.4);color:#dbe6fb;backdrop-filter:blur(4px)}
@media(prefers-reduced-motion:reduce){.cloud,.hero-art{animation:none}}

/* Activity cards upgrade */
.activity-grid{gap:18px}
.activity-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#1b2a49,#141f36);
  border-color:rgba(90,120,175,.28)}
.activity-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--go),var(--brand))}
.activity-card .emoji{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;
  border-radius:16px;background:radial-gradient(circle at 32% 28%,#23477a,#14213b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.25);font-size:30px}
.activity-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 0 1px var(--brand)}
.activity-card.soon::before{background:linear-gradient(90deg,#3a4a6a,#2a3654)}

/* Buttons */
.btn{background:linear-gradient(180deg,#4bb2ff,#2b7fd4);box-shadow:0 6px 16px rgba(43,127,212,.35)}
.btn:hover{background:linear-gradient(180deg,#5cbaff,#2f89e0)}
.btn.ghost{background:rgba(255,255,255,.04)}

/* Headings accent */
h2{position:relative}
section.block .container>h2:first-child::after,.prose h2::after{content:"";display:block;width:52px;height:3px;margin-top:8px;
  border-radius:3px;background:linear-gradient(90deg,var(--go),var(--brand))}

/* Widget + verdict polish */
.widget{background:linear-gradient(180deg,#16233c,#131e34);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.verdict{box-shadow:0 10px 30px rgba(0,0,0,.3)}
.verdict.go{box-shadow:0 12px 34px rgba(40,199,111,.18)}
.verdict .label{text-shadow:0 2px 14px rgba(0,0,0,.35)}

/* Ad slot subtler */
.ad-slot{opacity:.85}

/* Gear cards image feel */
.gear{background:linear-gradient(180deg,#1a2843,#141f36)}
.gear .emoji{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:14px;
  background:radial-gradient(circle at 32% 28%,#23477a,#14213b);font-size:26px}

@media(max-width:640px){
  .hero{padding:52px 0 40px}
  .hero-art{display:none}
  .sun{right:10%;top:44%;width:88px;height:88px}
}

/* ===================== General weather view ===================== */
/* Activity tab bar (Weather is the landing tab; the rest link to activity pages) */
.wx-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 14px}
.wx-tab{flex:1 1 auto;text-align:center;background:var(--bg2);border:1px solid var(--line);color:var(--muted);
  padding:11px 12px;border-radius:12px;font-weight:700;font-size:14.5px;white-space:nowrap}
.wx-tab:hover{border-color:var(--brand);color:var(--text);text-decoration:none}
.wx-tab.active{background:linear-gradient(180deg,#22406e,#182a49);color:var(--text);border-color:var(--brand)}

.wx-widget{margin-top:0}
/* Current conditions card */
.wx-cur{background:linear-gradient(180deg,#1a2c4d,#131f36);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin-top:14px;box-shadow:0 12px 34px rgba(0,0,0,.32)}
.wx-cur-main{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wx-cur-ic{font-size:46px;line-height:1}
.wx-cur-t{font-size:52px;font-weight:800;line-height:1}
.wx-cur-t span{font-size:22px;color:var(--muted);font-weight:600;margin-left:2px}
.wx-cur-meta{margin-left:auto;text-align:right}
.wx-cur-loc{font-weight:700;font-size:16px}
.wx-cur-desc{font-size:14px;color:var(--muted);margin-top:2px}
.wx-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.wx-chip{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:9px 13px;min-width:112px}
.wx-chip .ck{font-size:12px;color:var(--muted)}
.wx-chip .cv{font-size:16px;font-weight:800;margin-top:2px}
.wx-chip.uv-low{border-color:rgba(40,199,111,.5)}
.wx-chip.uv-mod{border-color:rgba(255,176,32,.5)}
.wx-chip.uv-high{border-color:rgba(255,138,60,.6)}
.wx-chip.uv-vhigh{border-color:rgba(255,84,112,.6)}
.wx-chip.uv-extreme{border-color:rgba(178,102,255,.7)}

/* Range tabs (Today / 7 days / 14 days / Month) */
.wx-range-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px}
.range-btn{background:var(--bg2);border:1px solid var(--line);color:var(--muted);padding:9px 15px;
  border-radius:999px;font-weight:700;font-size:14px;cursor:pointer}
.range-btn:hover{border-color:var(--brand);color:var(--text)}
.range-btn.active{background:linear-gradient(180deg,#4bb2ff,#2b7fd4);color:#fff;border-color:transparent;
  box-shadow:0 6px 16px rgba(43,127,212,.35)}
.wx-range-body{margin-top:10px}

/* Day-card grid: adapts to 7 / 14 / 16 cards */
.wx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:6px}
.wd-dl{display:block;font-size:11px;color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0;margin-top:2px}
.wd-rain{font-size:11.5px;color:var(--muted);margin-top:5px}
.wd-wind{font-size:11.5px;color:var(--muted);margin-top:2px}
.wd-uv{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;margin-top:7px;
  background:var(--bg2);border:1px solid var(--line);color:var(--muted)}
.wd-uv.uv-low{color:var(--go);border-color:rgba(40,199,111,.5)}
.wd-uv.uv-mod{color:var(--maybe);border-color:rgba(255,176,32,.5)}
.wd-uv.uv-high{color:#ff8a3c;border-color:rgba(255,138,60,.6)}
.wd-uv.uv-vhigh{color:var(--nogo);border-color:rgba(255,84,112,.6)}
.wd-uv.uv-extreme{color:#b266ff;border-color:rgba(178,102,255,.7)}

/* Today hourly + sun row */
.wx-hourly{margin-top:4px}
.wxhour{flex:0 0 auto;width:66px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:10px 5px;text-align:center}
.wxhour .t{font-size:11.5px;color:var(--muted)}
.wxhour .ic{font-size:19px;margin:3px 0}
.wxhour .deg{font-size:15px;font-weight:800}
.wxhour .hr-rain{font-size:11px;color:#7fc4ff;margin-top:4px}
.wxhour .hr-wind{font-size:11px;color:var(--muted);margin-top:1px}
.wx-sun{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--muted);
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-top:6px}

/* Typical-for-time-of-year (climatology) block */
.wx-typical{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.wx-typical h4{margin:0 0 4px;font-size:15px}
.wx-typical .muted{font-size:12.5px;margin:0 0 10px}
.wxday-typ{background:repeating-linear-gradient(135deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 7px,transparent 7px,transparent 14px);
  border-style:dashed;opacity:.92}
.wd-typ-tag{display:inline-block;font-size:10px;font-weight:800;color:var(--muted);margin-top:7px;
  border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.wx-loading{color:var(--muted);font-size:13px;padding:10px 2px}

/* Inline GO / NO-GO verdict words in body copy — make them stand out (bold + larger) */
span[style*="var(--go)"],span[style*="var(--nogo)"]{font-weight:900;font-size:1.16em;letter-spacing:.4px}
.hero p span[style*="var(--go)"],.hero p span[style*="var(--nogo)"]{font-size:1.22em}

/* ================================================================
   VISUAL REFINEMENT PASS (2026-08) — CSS-led, consolidates tokens,
   wires photographic heroes, tightens layout/rhythm. No JS touched.
   ================================================================ */
/* ---- Global layout: 1200 main, 900 long-form, tidy padding ---- */
.container{max-width:1200px;padding:0 24px}
.prose{max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:480px){.container{padding:0 16px}}

/* ---- Navigation: compact, grouped, understated active state ---- */
.site-header .container{justify-content:flex-start;height:60px;min-height:60px;flex-wrap:nowrap}
.brand{margin-right:8px}
nav.main{margin-left:0}
nav.main a{position:relative;padding:6px 0;transition:color .16s ease}
nav.main a[aria-current]{color:var(--text-primary)}
nav.main a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:999px;
  background:linear-gradient(90deg,var(--go),var(--brand));opacity:.9}
.lang-select{margin-left:auto;background:var(--surface);border-color:var(--border);color:var(--text-secondary);transition:border-color .16s ease}
.lang-select:hover{border-color:var(--border-strong)}
/* CWV: fixed 44x44 box + right-pinned in EVERY state so the JS-injected language <select>
   (inserted just before the toggle at load) can never push the toggle sideways.
   Before JS the toggle already sits at the right edge (margin-left:auto); after the select
   is inserted, both carry margin-left:auto so the toggle stays glued to the right edge and
   does not move — this removes the header/nav-toggle layout shift (field CLS ~1.0). */
.nav-toggle{min-width:44px;min-height:44px;width:44px;height:44px;padding:0;flex:none;line-height:1;display:none}
@media(max-width:640px){.nav-toggle{display:flex;align-items:center;justify-content:center;margin-left:auto}}

/* ================= Photographic hero system ================= */
.hero-main,.hero-activity{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;
  text-align:center;padding:0;background:var(--bg-primary)}
.hero-main{min-height:460px}
.hero-activity{min-height:284px}
.hero-main>.container,.hero-activity>.container{position:relative;z-index:3;padding-top:40px;padding-bottom:44px}

.hero-photo{position:absolute;inset:0;z-index:0;background-color:var(--bg-primary)}
.hero-media{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.hero-media img{width:100%;height:100%;display:block;object-fit:cover}
.hero-photo::before,.hero-photo::after{display:none!important}
/* Readability overlay + smooth fade into page bg (tuned per spec) */
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(4,12,25,.12) 0%, rgba(4,12,25,.22) 40%, rgba(4,12,25,.50) 74%, var(--bg-primary) 100%)}

/* Per-page images + desktop background-positions (see report for rationale) */
.is-home .hero-media img{object-position:50% 42%}
.is-moto .hero-media img{object-position:50% 58%}
.is-cycling .hero-media img{object-position:50% 55%}
.is-drone .hero-media img{object-position:50% 40%}
/* New activities — Codex-generated 1600x900 heroes (subject right-of-centre, open sky left) */
.is-hiking .hero-media img,.is-running .hero-media img,.is-fishing .hero-media img,
.is-kitesurf .hero-media img,.is-sailing .hero-media img,.is-golf .hero-media img{object-position:60% 50%}

/* Hero typography */
.hero-main h1{font-size:clamp(2.2rem,3vw,3.4rem);line-height:1.08;max-width:1050px;margin:0 auto 12px;
  text-shadow:0 2px 20px rgba(4,10,20,.72),0 1px 3px rgba(4,10,20,.55)}
.hero-main p.lead{max-width:850px;margin:0 auto;font-size:clamp(1rem,1.4vw,1.18rem);color:#eaf1ff;
  text-shadow:0 1px 12px rgba(4,10,20,.6)}
.hero-main .badge{text-shadow:none}
.hero-activity h1{font-size:clamp(1.9rem,2.6vw,2.7rem);line-height:1.1;margin:0 0 8px;
  text-shadow:0 2px 18px rgba(4,10,20,.72),0 1px 3px rgba(4,10,20,.5)}
.hero-activity .hero-sub{font-size:clamp(1rem,1.4vw,1.15rem);text-shadow:0 1px 12px rgba(4,10,20,.6)}

/* Text-only heroes (How it works / About) — narrower, topography texture near header */
.hero-text{position:relative;overflow:hidden;padding:44px 0 8px;background:var(--bg-primary)}
.hero-text::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('/assets/weather-topography.svg');background-size:900px auto;background-repeat:no-repeat;
  background-position:center top;opacity:.18}
.hero-text>.container{position:relative;z-index:1}
.hero-text h1{max-width:900px;margin:0 auto 10px}
.hero-text p.lead{max-width:760px;margin:0 auto}

/* ================= Activity selector (homepage tabs) ================= */
.wx-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 14px}
.wx-tab{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:44px;background:var(--surface);
  border:1px solid var(--border);color:var(--text-secondary)}
.wx-tab svg{width:19px;height:19px;flex:none;opacity:.8}
.wx-tab:hover{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text-primary)}
.wx-tab:hover svg{opacity:1}
.wx-tab.active{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text-primary)}
.wx-tab.active svg{opacity:1}
@media(max-width:640px){.wx-tabs{grid-template-columns:1fr 1fr;gap:8px}}

/* ================= Route selector → segmented control ================= */
.mode-tabs{gap:5px;padding:5px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:14px}
.mode-tab{min-height:44px;background:transparent;border:1px solid transparent;color:var(--text-muted);
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.mode-tab:hover{color:var(--text-primary)}
.mode-tab.active{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text-primary)}
.mode-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.mode-tab .mt-ic{flex:none;opacity:.85}
.mode-tab.active .mt-ic{opacity:1}

/* ================= Search / location component ================= */
.widget{background:linear-gradient(180deg,rgba(18,35,61,.98),rgba(13,28,49,.98));border:1px solid var(--border);
  border-radius:18px;box-shadow:0 14px 35px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)}
.loc-bar input{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);
  padding:15px 16px;border-radius:12px;transition:border-color .16s ease,box-shadow .16s ease}
.loc-bar input::placeholder{color:var(--text-muted)}
.loc-bar input:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px rgba(66,169,245,.16)}
.sel,.spd input{background:var(--bg-secondary);border-color:var(--border)}
/* CHECK — restrained primary CTA */
.btn{min-height:44px;background:linear-gradient(180deg,#116da9,#084f83);box-shadow:0 6px 16px rgba(8,79,131,.28);
  transition:filter .16s ease,box-shadow .16s ease}
.btn:hover{background:linear-gradient(180deg,#1478b8,#0a5b94);filter:brightness(1.03)}
.btn:active{filter:brightness(.95)}
/* Use my location — secondary, darker navy */
.btn.ghost{background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);box-shadow:none}
.btn.ghost:hover{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text-primary);filter:none}

/* ================= Long-form pages: tables, dividers, hierarchy ================= */
.prose h2{border-top:1px solid var(--border);margin-top:32px;padding-top:22px}
.prose>h2:first-child{border-top:0;margin-top:8px;padding-top:0}
section.block .container>h2:first-child::after,.prose h2::after{width:64px;height:4px;border-radius:999px;margin-top:10px}

.prose table{border-collapse:separate;border-spacing:0;width:100%;margin:16px 0;font-size:14.5px;
  border:1px solid var(--border);border-radius:12px;overflow:hidden}
.prose th,.prose td{border:0;border-bottom:1px solid var(--border);padding:11px 14px;text-align:left;vertical-align:top}
.prose tr:first-child th,.prose thead th{background:var(--bg-secondary);color:var(--text-primary);font-weight:700;
  font-size:13px;letter-spacing:.2px}
.prose td:first-child,.prose th:first-child{font-weight:700;color:var(--text-primary)}
.prose tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.prose tr:last-child td{border-bottom:0}
.section-light .prose table{border-color:#dbe3f0}
.section-light .prose th,.section-light .prose td{border-bottom-color:#dbe3f0}
.section-light .prose tr:first-child th{background:#e4ebf5}
.section-light .prose tr:nth-child(even) td{background:rgba(20,40,80,.03)}

/* Verdict-band status pills (methodology) — colour + word, never colour alone */
.vpill{display:inline-block;font-weight:800;font-size:12.5px;letter-spacing:.4px;padding:4px 12px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap}
.vpill.go{background:var(--status-go-dim);color:var(--status-go);border-color:rgba(47,209,132,.42)}
.vpill.maybe{background:var(--status-maybe-dim);color:var(--status-maybe);border-color:rgba(242,181,63,.42)}
.vpill.nogo{background:var(--status-nogo-dim);color:var(--status-nogo);border-color:rgba(255,82,100,.42)}

/* ================= Ad placeholders — quiet "reserved space" ================= */
.ad-slot{background:repeating-linear-gradient(45deg,rgba(255,255,255,.015),rgba(255,255,255,.015) 10px,transparent 10px,transparent 20px);
  border:1px dashed rgba(95,145,210,.18);border-radius:12px;color:var(--text-muted);opacity:.7;
  font-size:10.5px;letter-spacing:1px;text-transform:uppercase;padding:14px;text-align:center;margin:22px 0}
.section-light .ad-slot{border-color:rgba(120,140,170,.3);color:#9aa6ba}

/* ================= Micro-interactions ================= */
.activity-card,.range-btn,.hub-card,.loc-links a,.wx-tab,.mode-tab,nav.main a,.lang-select,.loc-bar input,.btn{
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ================= Mobile rhythm + hero positions ================= */
@media(max-width:640px){
  .hero-main{min-height:440px}
  .hero-activity{min-height:252px}
  .hero-main>.container,.hero-activity>.container{padding-top:28px;padding-bottom:30px}
  .hero-main h1{font-size:1.72rem;line-height:1.14}
  .hero-activity h1{font-size:1.6rem}
  .hero-main p.lead{margin-top:10px;font-size:1rem}
  .is-home{background-position:50% 50%}
  .is-moto{background-position:30% center}
  .is-cycling{background-position:32% center}
  .is-drone{background-position:20% 42%}
  section.block{padding:22px 0}
  .wx-tabs{margin:16px 0 10px}
  .ad-slot{margin:16px 0}
  .prose table{font-size:12.5px}
  .prose th,.prose td{padding:8px 9px;overflow-wrap:anywhere}
}
@media(max-width:390px){
  .prose table{font-size:12px}
  .prose th,.prose td{padding:7px 7px}
}

/* ================================================================
   HOMEPAGE PRODUCT REDESIGN (2026-08) — live weather hero,
   compact hourly, "What are you planning?" verdict cards, skeleton.
   Mobile-first; WEATHER → ACTIVITY → DECISION.
   ================================================================ */

/* Compact photo hero so the live weather product appears fast (protects LCP/CLS) */
.hero-main.hero-compact{min-height:210px}
.hero-main.hero-compact>.container{padding-top:26px;padding-bottom:26px}
.hero-compact h1{margin-bottom:8px}
.hero-compact p.lead{margin-top:2px}
@media(max-width:640px){.hero-main.hero-compact{min-height:172px}}

/* ---- Live weather hero card (the visual star) ---- */
.wx-hero{position:relative}
.wx-hero .wx-cur-main{align-items:center}
.wx-hero .wx-cur-t{font-size:clamp(46px,13vw,64px);font-weight:850;letter-spacing:-2px}
.wx-hero .wx-cur-ic{font-size:clamp(40px,10vw,52px)}
.wx-hero .wx-cur-ic svg{display:block;width:1em;height:1em;overflow:visible}
.wx-cur-loc{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.wx-cur-loc svg{width:15px;height:15px;flex:none;opacity:.85;color:var(--accent-blue)}
.wx-cur-fl{font-size:13.5px;color:var(--text-secondary);margin-top:3px}
.wx-hl{white-space:nowrap}
.wx-hl .hi{color:#ff9d6b;font-weight:700}
.wx-hl .lo{color:#7fc4ff;font-weight:700}
/* Metrics row: Rain / Wind / UV — always a tidy 3-up */
.wx-hero .wx-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wx-chip .ck{display:flex;align-items:center;gap:5px}
.wx-chip .ck svg{width:14px;height:14px;flex:none;opacity:.85;color:var(--accent-blue)}
/* Condition mapping is wired (JS adds cond-*) — ready to swap to per-condition art later;
   for now just a subtle tint over the existing card, never a broken image request. */
.wx-hero.cond-clear{background:linear-gradient(180deg,#1c2f52,#131f38)}
.wx-hero.cond-cloud{background:linear-gradient(180deg,#18263f,#131d31)}
.wx-hero.cond-rain{background:linear-gradient(180deg,#152740,#111c30)}
.wx-hero.cond-storm{background:linear-gradient(180deg,#1a2438,#11192b)}
.wx-hero.cond-snow{background:linear-gradient(180deg,#1a2740,#141f36)}

/* Section sub-headings inside the widget */
.wx-sub-h{font-size:16px;font-weight:750;letter-spacing:-.2px;margin:18px 2px 6px}

/* ---- "What are you planning?" activity verdict cards (product controls) ---- */
.act-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:6px}
.wx-card-placeholder{height:830px;margin-top:6px;border-radius:14px;background:
  linear-gradient(180deg,rgba(22,35,60,.72),rgba(19,30,52,.72));border:1px solid var(--border)}
@media(min-width:560px){.act-grid{grid-template-columns:1fr 1fr}}
@media(min-width:560px){.wx-card-placeholder{height:455px}}
@media(min-width:920px){.act-grid{grid-template-columns:1fr 1fr 1fr}}
@media(min-width:920px){.wx-card-placeholder{height:268px}}
.act-card{display:flex;align-items:center;gap:12px;min-height:84px;padding:12px 14px;
  background:linear-gradient(180deg,#16233c,#131e34);border:1px solid var(--border);border-radius:14px;
  color:var(--text-primary);text-decoration:none}
.act-card:hover{border-color:var(--border-strong);background:var(--surface-hover);text-decoration:none}
.act-card:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}
.act-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:13px;background:var(--bg-secondary);border:1px solid var(--border);color:var(--accent-blue)}
.act-ic svg{width:28px;height:28px}
.act-body{flex:1;min-width:0;display:flex;flex-direction:column}
.act-name{font-weight:750;font-size:15.5px;line-height:1.2}
.act-factor{font-size:12px;color:var(--text-muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-verdict{flex:none;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12.5px;
  letter-spacing:.4px;padding:6px 12px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.act-verdict .av-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.act-verdict.go{color:var(--status-go);background:var(--status-go-dim);border-color:rgba(47,209,132,.42)}
.act-verdict.maybe{color:var(--status-maybe);background:var(--status-maybe-dim);border-color:rgba(242,181,63,.42)}
.act-verdict.nogo{color:var(--status-nogo);background:var(--status-nogo-dim);border-color:rgba(255,82,100,.42)}
.act-chevron{flex:none;color:var(--text-muted);font-size:20px;font-weight:700;padding:0 8px}

/* ---- Loading skeleton (fills the reserved #wx-out box → no layout shift on load or swap) ---- */
.wx-skel{min-height:inherit;padding:6px 0}
.wx-skel .sk{background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.10),rgba(255,255,255,.045));
  background-size:200% 100%;border-radius:12px;animation:sk-shimmer 1.3s ease-in-out infinite}
@keyframes sk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-hero{height:210px;margin-bottom:14px}
.sk-row{display:flex;gap:8px;overflow:hidden;margin-bottom:16px}
.sk-hour{flex:0 0 auto;width:66px;height:96px}
.sk-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.sk-grid{grid-template-columns:1fr 1fr}}
@media(min-width:920px){.sk-grid{grid-template-columns:1fr 1fr 1fr}}
.sk-card{height:84px}
.sk-msg{color:var(--text-muted);text-align:center;font-size:13px;margin-top:18px}
@media(prefers-reduced-motion:reduce){.wx-skel .sk{animation:none}}

/* Keep crawlable below-fold content in the HTML while avoiding its style/layout cost
   during the first viewport. Browsers without content-visibility ignore this block. */
@supports(content-visibility:auto){
  main>.block,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 560px}
  .hero-home .wx-tabs{content-visibility:auto;contain-intrinsic-size:auto 80px}
  .hero-home-intro{content-visibility:auto;contain-intrinsic-size:auto 180px}
}

/* Metric icon + hourly emoji coexistence: keep hourly strip short in height on mobile */
@media(max-width:480px){
  .wx-hero .wx-chips{gap:6px}
  .wx-chip{padding:8px 9px;min-width:0}
  .wx-chip .cv{font-size:14.5px}
}

/* ================================================================
   RESPONSIVE DASHBOARD UPGRADE (2026-08)
   Desktop = a purpose-built 2-column live dashboard (NOT the mobile
   hero enlarged); mobile = the stacked WEATHER → ACTIVITY → DECISION
   hierarchy. Wider app container; long-form prose stays readable.
   ================================================================ */

/* Wider product container so 1280 / 1440 / 1600 / 1920 use their width;
   responsive gutters; long-form prose stays a comfortable ~900px line length. */
.container{max-width:1440px}
@media(min-width:1680px){.container{max-width:1520px}}
.prose{max-width:900px}

/* Slim the marketing band so the LIVE dashboard is the visual hero.
   The H1 stays in the DOM (SEO) but is no longer a giant visual title. */
.hero-main.hero-compact{min-height:148px}
.hero-main.hero-compact>.container{padding-top:22px;padding-bottom:20px}
.hero-compact h1{font-size:clamp(1.35rem,2.1vw,1.8rem);line-height:1.14;max-width:820px;margin:0 auto 6px;font-weight:750}
.hero-compact p.lead{font-size:clamp(.95rem,1.15vw,1.06rem);max-width:660px;margin:0 auto}
@media(max-width:640px){
  .hero-main.hero-compact{min-height:116px}
  .hero-compact h1{font-size:1.18rem}
  .hero-compact p.lead{font-size:.95rem}
}

/* ---- Live weather dashboard surface ---- */
.wx-dash{display:grid;grid-template-columns:1fr;gap:18px;border:1px solid var(--border);border-radius:18px;
  --wx-accent:var(--maybe);
  padding:20px;margin-top:14px;box-shadow:0 12px 34px rgba(0,0,0,.32)}
.wx-dash-left{display:flex;flex-direction:column;gap:6px;min-width:0}
.wx-dash-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.wx-dash-now{display:flex;align-items:center;gap:14px}
.wx-dash .wx-cur-ic{font-size:clamp(40px,9vw,58px);line-height:1}
.wx-dash .wx-cur-ic svg{display:block;width:1em;height:1em;overflow:visible}
.wx-dash .wx-cur-t{font-size:clamp(46px,12vw,72px);font-weight:850;letter-spacing:-2px;line-height:1}
.wx-dash .wx-cur-t span{font-size:.36em;color:var(--text-secondary);font-weight:600;margin-left:2px}
.wx-dash .wx-cur-loc{display:flex;align-items:center;gap:6px;justify-content:flex-start;font-weight:700;font-size:16px}
.wx-dash .wx-cur-loc svg{width:16px;height:16px;flex:none;opacity:.85;color:var(--accent-blue)}
.wx-dash .wx-cur-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-dash .wx-cur-desc{font-size:15px;color:var(--text-secondary)}
.wx-dash .wx-cur-fl{font-size:14px;color:var(--text-secondary)}
.wx-dash .wx-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:0}
.wx-hourly-wrap{min-width:0}
.wx-strip-h{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.wx-dash .wx-hourly{margin-top:0}
/* The seg control swaps Hourly/7d/14d/month here, in the dashboard's right column. Flex gap already
   spaces it from the metrics row, and min-width:0 lets the day-grids wrap instead of overflowing. */
.wx-dash-right .wx-range-body{margin-top:0;min-width:0}
.wx-dash-right .wx-range-body .week-grid,
.wx-dash-right .wx-range-body .wx-grid{margin-top:0}
.wx-dash-right .wx-typical{margin-top:14px}

/* Desktop: real 2-column dashboard — LEFT ~38% current · RIGHT ~62% metrics + hourly.
   Divider between columns; both min-width:0 so the hourly strip can scroll (hidden bar)
   without forcing the grid wider. */
@media(min-width:900px){
  .wx-dash{grid-template-columns:minmax(0,0.38fr) minmax(0,0.62fr);gap:0;padding:26px 30px;align-items:stretch}
  .wx-dash-left{border-right:1px solid var(--border);padding-right:30px;justify-content:center}
  .wx-dash-right{padding-left:30px;justify-content:center}
}
@media(min-width:900px) and (max-width:1099px){
  .wx-dash{grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr);padding:22px 24px}
  .wx-dash-left{padding-right:24px}
  .wx-dash-right{padding-left:24px}
}

/* Sun row sits full-width beneath the dashboard */
.wx-dash + .wx-sun{margin-top:10px}

/* Activity verdict grid: 3×3 on wide screens (clean for 9 items). Cap card width so a very
   wide container doesn't stretch cards into sparse bars; keep them compact and scannable. */
@media(min-width:1200px){
  .act-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}

/* ---- Header nav responsiveness ----
   11 nav items (9 activities + How it works + About) don't fit inline below ~1200px.
   Use the hamburger up to 1024px (phones → tablet-landscape → small laptops); tighten
   spacing on mid widths; expose the full horizontal desktop nav only when there's room. */
@media(max-width:1024px){
  nav.main{position:absolute;top:60px;left:0;right:0;background:var(--bg-secondary);
    border-bottom:1px solid var(--border);flex-direction:column;padding:10px 18px;display:none;z-index:60}
  nav.main.open{display:flex}
  nav.main a{margin:8px 0}
  .nav-toggle{display:flex;align-items:center;justify-content:center;margin-left:auto}
}
@media(min-width:1025px) and (max-width:1280px){
  nav.main a{margin-left:13px;font-size:14px}
}

/* ================================================================
   HOMEPAGE CINEMATIC GLASS HERO (2026-08)
   The live dashboard now reads as a frosted-glass surface floating
   OVER the sky photo (data > photo). Scoped to the homepage
   (.hero-home / .wx-dash) so activity heroes are untouched.
   ================================================================ */

/* The photographic hero region wraps the intro + tabs + live dashboard,
   sharing ONE sky photo behind them. */
.hero-home{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-primary)}
.hero-home>.container{position:relative;z-index:2;display:flex;flex-direction:column;padding-top:30px;padding-bottom:20px}
.hero-home #gng-weather{order:1}.hero-home .wx-tabs{order:2}.hero-home-intro{order:3}
@media(max-width:640px){.hero-home>.container{padding-top:18px;padding-bottom:14px}}

/* Sky photo: a fixed-height band at the top of the section (reserves space →
   no CLS). It reuses the preloaded is-home asset — no new image download. */
.hero-home-photo{position:absolute;left:0;right:0;top:0;bottom:auto;
  height:clamp(560px,70vh,760px);z-index:0}
/* Light-touch readability scrim so the reactive sky stays the hero — vibrant at the
   top, only a gentle darkening where the glass dashboard sits, then a smooth fade
   into the page bg so the lower cards / sun row transition onto solid navy. */
.hero-home-photo .hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(4,11,24,.10) 0%, rgba(4,11,24,.16) 34%, rgba(4,11,24,.40) 78%, var(--bg-primary) 100%)}

/* Compact photographic intro — marketing H1 stays semantic, not a giant visual title.
   text-align:center is scoped to the intro so it never leaks into the dashboard. */
.hero-home-intro{padding:34px 0 14px;text-align:center}
.hero-home-intro .badge{margin-bottom:10px}
.hero-home-intro h1{font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1.14;max-width:820px;margin:0 auto 8px;
  font-weight:800;color:#f3f7ff;text-shadow:0 2px 18px rgba(4,10,20,.72),0 1px 3px rgba(4,10,20,.55)}
.hero-home-intro p.lead{font-size:clamp(.98rem,1.2vw,1.1rem);max-width:680px;margin:0 auto;color:#eaf1ff;
  text-shadow:0 1px 12px rgba(4,10,20,.6)}
.hero-home .wx-tabs{margin-top:16px}

/* ---- Frosted-glass live dashboard over the sky ---- */
.wx-dash.wx-hero{
  background:linear-gradient(180deg,rgba(9,18,34,.40),rgba(7,15,29,.46));
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border-color:rgba(150,190,240,.34);
  box-shadow:0 24px 60px rgba(2,8,20,.5),inset 0 1px 0 rgba(255,255,255,.14)}
/* Per-condition tint kept translucent so the blurred sky still reads through.
   (These beat the opaque cond-* rules above on specificity + order. If the photo
   fails to load, the .hero-home-photo bg-color + these tints still look intentional.) */
.wx-dash.wx-hero.cond-clear{background:linear-gradient(180deg,rgba(20,42,80,.36),rgba(11,24,48,.46))}
.wx-dash.wx-hero.cond-cloud{background:linear-gradient(180deg,rgba(20,34,58,.38),rgba(11,22,40,.48))}
.wx-dash.wx-hero.cond-rain{background:linear-gradient(180deg,rgba(16,32,54,.38),rgba(10,20,36,.48))}
.wx-dash.wx-hero.cond-storm{background:linear-gradient(180deg,rgba(18,28,46,.40),rgba(10,18,32,.50))}
.wx-dash.wx-hero.cond-snow{background:linear-gradient(180deg,rgba(22,36,60,.36),rgba(12,22,40,.46))}
/* Keep the current-conditions text crisp over glass + photo (AA-ish contrast). */
.wx-dash-left .wx-cur-loc,.wx-dash-left .wx-cur-desc,.wx-dash-left .wx-cur-fl,.wx-dash-left .wx-cur-t{
  text-shadow:0 1px 10px rgba(3,9,20,.6)}
.wx-dash-right .wx-strip-h{color:var(--text-secondary)}

/* Fallback for browsers without backdrop-filter → solid high-contrast panel. */
@supports not ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  .wx-dash.wx-hero,
  .wx-dash.wx-hero.cond-clear,.wx-dash.wx-hero.cond-cloud,.wx-dash.wx-hero.cond-rain,
  .wx-dash.wx-hero.cond-storm,.wx-dash.wx-hero.cond-snow{background:rgba(9,17,32,.94)}
}

/* Mobile GPUs pay a disproportionate compositing cost for many simultaneous
   backdrop filters. Use the established opaque-glass fallback there; the same
   borders, gradients and hierarchy remain, with substantially steadier input. */
@media(max-width:640px){
  .site-header,.wx-dash.wx-hero,.wx-range-seg,.widget,.verdict,.window-callout,
  .metric,.wday,.day,.hour,.wxhour,.wx-chip,.wx-sun,.act-card,details.faq{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* Mobile: shorter cropped photo behind just the intro + tabs; the dashboard falls
   back to a darker near-solid panel so data stays legible on small screens. */
@media(max-width:640px){
  .hero-home-photo{height:clamp(340px,52vh,460px)}
  .hero-home-intro{padding:22px 0 10px}
  .hero-home-photo .hero-scrim{background:linear-gradient(180deg,
    rgba(4,11,24,.16) 0%, rgba(4,11,24,.34) 58%, var(--bg-primary) 100%)}
  .wx-dash.wx-hero,
  .wx-dash.wx-hero.cond-clear,.wx-dash.wx-hero.cond-cloud,.wx-dash.wx-hero.cond-rain,
  .wx-dash.wx-hero.cond-storm,.wx-dash.wx-hero.cond-snow{background:linear-gradient(180deg,rgba(9,17,32,.91),rgba(7,14,27,.94))}
}

/* ================================================================
   WEATHER-REACTIVE HERO SKY (2026-08, retinted 2026-08-31)
   JS (applyHeroSky) sets one sky-* class on .hero-home-photo from the
   LIVE current weather code (+ day/night). The preloaded sunset PHOTO
   (.is-home url) now stays the background for EVERY condition — the
   weather is expressed as a low-opacity translucent TINT wash on the
   ::after layer (never an opaque gradient that replaces the photo).
   The ::after is globally display:none on .hero-photo, so each tint
   rule re-enables it with display:block!important (its higher
   specificity + !important beats that reset). z-index:0 keeps the
   wash ABOVE the photo but BELOW the .hero-fx particles + .hero-scrim
   (both z-index:1) and the glass dashboard (z-index:2). .sky-clear day
   gets NO tint — the golden photo shows as-is. Opacities capped ~.34
   so the photo always clearly reads through, on cloudy days too.
   ================================================================ */
.hero-home-photo.sky-clear-night::after,
.hero-home-photo.sky-partly::after,
.hero-home-photo.sky-partly-night::after,
.hero-home-photo.sky-overcast::after,
.hero-home-photo.sky-cloudy::after,
.hero-home-photo.sky-rain::after,
.hero-home-photo.sky-storm::after,
.hero-home-photo.sky-snow::after,
.hero-home-photo.sky-fog::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;display:block!important}
/* Clear night → cool deep-blue darkening (photo still reads at night) */
.hero-home-photo.sky-clear-night::after{background:rgba(9,18,44,.30)}
/* Partly cloudy day → barely-there cool wash */
.hero-home-photo.sky-partly::after{background:rgba(122,150,190,.14)}
/* Partly cloudy night → deeper blue */
.hero-home-photo.sky-partly-night::after{background:rgba(12,22,48,.30)}
/* Overcast / generic cloudy → faint desaturating grey */
.hero-home-photo.sky-overcast::after,
.hero-home-photo.sky-cloudy::after{background:rgba(96,104,118,.24)}
/* Rain → faint blue-grey */
.hero-home-photo.sky-rain::after{background:rgba(42,72,104,.26)}
/* Storm → slightly darker steel */
.hero-home-photo.sky-storm::after{background:rgba(18,26,44,.34)}
/* Snow → faint cool white/blue */
.hero-home-photo.sky-snow::after{background:rgba(200,220,242,.22)}
/* Fog → faint desaturating grey */
.hero-home-photo.sky-fog::after{background:rgba(150,158,170,.28)}

/* ================================================================
   ANIMATED HERO WEATHER EFFECTS (2026-08)
   JS (setHeroFx) injects .hero-fx INSIDE .hero-home-photo and sets an
   fx-* mode class matching the live sky-* condition. Because .hero-fx
   lives in .hero-home-photo (z-index:0) it always renders BEHIND the
   .container (z-index:2) glass dashboard — particles fall "in the sky"
   and the frosted glass simply blurs them; temp/metrics stay readable.
   Snow/rain/storm = capped <canvas> particles (JS). Clouds / fog /
   lightning = pure CSS (transform+opacity only, GPU-friendly).
   ================================================================ */
.hero-fx{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;opacity:.9}
.hero-fx.fx-snow .hero-fx-canvas,
.hero-fx.fx-rain .hero-fx-canvas,
.hero-fx.fx-storm .hero-fx-canvas{display:block}

/* ---- Drifting clouds (overcast = 3 denser, partly = 2 lighter) ---- */
.hero-fx-clouds{position:absolute;inset:0;display:none}
.hero-fx.fx-clouds .hero-fx-clouds,
.hero-fx.fx-clouds-few .hero-fx-clouds{display:block}
.hero-fx-clouds span{position:absolute;display:block;width:clamp(180px,32vw,340px);height:clamp(70px,12vw,120px);
  background:radial-gradient(60% 60% at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 72%);
  filter:blur(6px);opacity:.55;will-change:transform;
  animation:heroCloudDrift linear infinite}
.hero-fx-clouds span:nth-child(1){top:8%;animation-duration:70s;transform:translateX(-40vw)}
.hero-fx-clouds span:nth-child(2){top:26%;width:clamp(140px,24vw,260px);height:clamp(56px,9vw,96px);
  opacity:.42;animation-duration:96s;animation-delay:-30s;transform:translateX(-40vw)}
.hero-fx-clouds span:nth-child(3){top:16%;animation-duration:82s;animation-delay:-55s;transform:translateX(-40vw)}
.hero-fx.fx-clouds-few .hero-fx-clouds span:nth-child(3){display:none}
.hero-fx.fx-clouds-few .hero-fx-clouds span{opacity:.4}
@keyframes heroCloudDrift{from{transform:translateX(-40vw)}to{transform:translateX(140vw)}}

/* ---- Drifting fog bands ---- */
.hero-fx-fog{position:absolute;inset:0;display:none}
.hero-fx.fx-fog .hero-fx-fog{display:block}
.hero-fx-fog span{position:absolute;left:-30%;right:-30%;height:38%;
  background:linear-gradient(90deg,rgba(226,231,238,0),rgba(226,231,238,.34) 30%,rgba(226,231,238,.34) 70%,rgba(226,231,238,0));
  filter:blur(10px);opacity:.6;will-change:transform;animation:heroFogDrift linear infinite alternate}
.hero-fx-fog span:nth-child(1){top:18%;animation-duration:34s}
.hero-fx-fog span:nth-child(2){top:46%;height:30%;opacity:.42;animation-duration:46s;animation-delay:-16s}
@keyframes heroFogDrift{from{transform:translateX(-8%)}to{transform:translateX(8%)}}

/* ---- Storm lightning: brief, low-opacity full-hero flash (~11s cycle) ---- */
.hero-fx-flash{position:absolute;inset:0;background:#eaf1ff;opacity:0}
.hero-fx.fx-storm .hero-fx-flash{animation:heroLightning 11s ease-out infinite}
@keyframes heroLightning{
  0%,100%{opacity:0}
  1.2%{opacity:.22}2.2%{opacity:.05}3.2%{opacity:.16}4.4%{opacity:0}
}

/* Respect reduced-motion → no animation of any kind (static gradient sky remains). */
@media(prefers-reduced-motion:reduce){
  .hero-fx-canvas{display:none!important}
  .hero-fx-clouds,.hero-fx-fog{display:none!important}
  .hero-fx-flash{animation:none!important;opacity:0!important}
}
/* Mobile: shorter hero — keep clouds subtle (canvas particle counts are capped in JS). */
@media(max-width:640px){
  .hero-fx-clouds span{opacity:.4}
  .hero-fx-fog span{opacity:.5}
}

/* "Approximate — tap to set your location" affordance next to the place name (IP fallback only). */
.wx-approx-btn{align-self:flex-start;margin-top:3px;display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;line-height:1.25;color:#dce7fb;cursor:pointer;
  background:rgba(255,255,255,.10);border:1px solid rgba(150,190,240,.34);border-radius:999px;
  padding:3px 10px;text-shadow:0 1px 8px rgba(3,9,20,.55);
  transition:background-color .16s ease,border-color .16s ease}
.wx-approx-btn::before{content:"≈";font-weight:800;opacity:.9}
.wx-approx-btn:hover{background:rgba(255,255,255,.17);border-color:rgba(150,190,240,.52)}
.wx-approx-btn:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}

/* Demoted marketing intro: kept in the DOM (SEO) but small + below the live weather + chooser. */
.hero-home-intro.is-demoted{padding:16px 0 6px;border-top:1px solid var(--border);margin-top:16px}
.hero-home-intro.is-demoted h1{font-size:clamp(1rem,1.4vw,1.28rem);font-weight:700;margin:0 auto 6px;
  color:var(--text-primary);text-shadow:none}
.hero-home-intro.is-demoted p.lead{font-size:clamp(.92rem,1.1vw,1.02rem);color:var(--text-secondary);text-shadow:none}
@media(max-width:640px){
  .hero-home-intro.is-demoted{padding:14px 0 4px}
  .hero-home-intro.is-demoted h1{font-size:1rem}
}

/* ================================================================
   FORECAST-RANGE SEGMENTED CONTROL (2026-08)
   Small 7d · 14d · month pill group, top-right of the .wx-dash box
   (above the UV metric). Drives the outlook body below via the
   shared .range-btn wiring. .wx-dash-right is a flex column, so
   align-self:flex-end pins it to the right edge.
   ================================================================ */
.wx-range-seg{align-self:flex-end;display:inline-flex;gap:2px;padding:3px;margin-bottom:2px;
  border-radius:999px;background:rgba(9,17,32,.42);border:1px solid var(--border);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wx-range-seg .range-btn{min-height:44px;padding:5px 12px;font-size:12.5px;font-weight:700;border:0;border-radius:999px;
  background:transparent;color:var(--text-secondary);cursor:pointer;white-space:nowrap;box-shadow:none}
.wx-range-seg .range-btn:hover{color:var(--text-primary);border-color:transparent}
.wx-range-seg .range-btn.active{background:linear-gradient(180deg,#52b8ff,#278fe1);color:#fff;
  box-shadow:0 4px 12px rgba(39,143,225,.32)}
@media(max-width:640px){
  .wx-range-seg{align-self:flex-start}
  .wx-range-seg .range-btn{padding:5px 10px;font-size:12px}
}

/* Sun row: size + colour the new inline sunrise/sunset/UV SVGs consistently. */
.wx-sun span{display:inline-flex;align-items:center;gap:5px}
.wx-sun{--wx-accent:var(--maybe)}
.wx-sun svg{width:15px;height:15px;flex:none;opacity:.9;color:var(--accent-blue);overflow:visible}

/* Weather-condition and compact metric SVGs reserve a stable box at every dashboard size. */
.wxhour .ic{display:flex;align-items:center;justify-content:center;height:24px;margin:3px 0;--wx-accent:var(--maybe)}
.wxhour .ic svg{display:block;width:22px;height:22px;overflow:visible}
.wxhour .hr-rain,.wxhour .hr-wind{display:flex;align-items:center;justify-content:center;gap:3px}
.wxhour .hr-rain svg,.wxhour .hr-wind svg{width:11px;height:11px;flex:none;overflow:visible}

/* ================================================================
   TRANSLUCENT CONTENT PANELS (2026-08)
   Owner: the content read as a heavy solid dark fill and hid the
   background art. Make the main panels glass (backdrop-blur) on
   EVERY page so the body's sky/gradient art shows through, while
   keeping AA-ish text contrast. A @supports fallback gives near-
   solid panels where backdrop-filter is unsupported. Placed last so
   it wins on equal specificity; status/hover variants are respected.
   ================================================================ */
.widget,.verdict,.window-callout,.metric,.wday,.day,.hour,.wxhour,.wx-chip,.wx-sun,.act-card,details.faq{
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}
.widget{background:linear-gradient(180deg,rgba(18,35,61,.62),rgba(13,28,49,.62));border-color:rgba(120,160,220,.30)}
.verdict{background:linear-gradient(180deg,rgba(22,35,60,.60),rgba(19,29,49,.64))}
.verdict.go{background:linear-gradient(135deg,rgba(47,209,132,.22),rgba(19,29,49,.58))}
.verdict.maybe{background:linear-gradient(135deg,rgba(242,181,63,.20),rgba(19,29,49,.58))}
.verdict.nogo{background:linear-gradient(135deg,rgba(255,82,100,.20),rgba(19,29,49,.58))}
.window-callout{background:rgba(28,44,73,.55)}
.metric,.wday,.day,.hour,.wxhour,.wx-chip{background:rgba(16,31,54,.55)}
.wx-sun{background:rgba(16,31,54,.50)}
.act-card{background:linear-gradient(180deg,rgba(22,35,60,.58),rgba(19,30,52,.62))}
details.faq{background:rgba(22,35,60,.52)}
@supports not ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  .widget{background:linear-gradient(180deg,rgba(18,35,61,.96),rgba(13,28,49,.96))}
  .verdict,.window-callout,.metric,.wday,.day,.hour,.wxhour,.wx-chip,.wx-sun,.act-card,details.faq{
    background:rgba(14,26,46,.95)}
  .verdict.go{background:rgba(20,40,34,.95)}
  .verdict.maybe{background:rgba(40,34,20,.95)}
  .verdict.nogo{background:rgba(40,22,28,.95)}
}

/* ================================================================
   VISUAL POLISH PASS (2026-08-30) — premium glanceable weather
   (Windy / Surfline / Tomorrow.io cues). Sky-layering is fixed above
   (lighter scrim + glass); this block raises the VERDICT to the boldest
   element, gives every card consistent depth/hover/focus, and tightens
   the type + spacing rhythm. Appended last → wins on equal specificity.
   No JS, tokens, thresholds, i18n or CLS reserves touched.
   ================================================================ */

/* ---- Bright, AA-friendly status text tints for colored pills over glass ---- */
/* ---- Verdict pills on the "What are you planning?" cards: the boldest,
   most-designed, glanceable element (Surfline-style). Consistent GO/MAYBE/
   NO-GO palette, stronger fill + border, a vivid status dot. ---- */
.act-verdict{font-size:13px;font-weight:850;letter-spacing:.5px;padding:7px 13px;
  border-width:1px;box-shadow:0 3px 12px rgba(2,8,20,.30);gap:7px}
.act-verdict .av-dot{width:9px;height:9px;box-shadow:0 0 8px currentColor}
.act-verdict.go{background:rgba(47,209,132,.24);border-color:rgba(47,209,132,.62);color:var(--status-go-ink)}
.act-verdict.maybe{background:rgba(242,181,63,.24);border-color:rgba(242,181,63,.62);color:var(--status-maybe-ink)}
.act-verdict.nogo{background:rgba(255,82,100,.24);border-color:rgba(255,82,100,.62);color:var(--status-nogo-ink)}
/* Keep the dot the vivid, saturated status colour even though the word is a lighter tint. */
.act-verdict.go .av-dot{background:var(--status-go)}
.act-verdict.maybe .av-dot{background:var(--status-maybe)}
.act-verdict.nogo .av-dot{background:var(--status-nogo)}

/* ---- Activity-page verdict banner: bigger, bolder headline verdict ---- */
.verdict .label{font-weight:850;letter-spacing:-.5px}
.verdict.go .label,.verdict.maybe .label,.verdict.nogo .label{text-shadow:0 2px 16px rgba(0,0,0,.4)}

/* ---- Consistent card depth: refined translucent cards (hairline border,
   soft shadow, consistent radius) so nothing reads as a flat dark box. ---- */
.wx-chip,.wxhour,.wxday,.wday,.act-card,.window-callout{
  box-shadow:0 6px 18px rgba(2,8,20,.22),inset 0 1px 0 rgba(255,255,255,.05)}
.wx-chip,.wxhour{border-radius:13px}
.wxday,.wday{border-radius:13px}
.act-card{border-radius:15px;box-shadow:0 8px 22px rgba(2,8,20,.26),inset 0 1px 0 rgba(255,255,255,.05)}

/* Slightly firmer cell fill so labels stay legible on the lighter glass / bright skies. */
.wx-chip,.wxhour,.wxday,.wday{background:rgba(15,29,51,.62)}

/* ---- Hover lift + focus-visible for interactive surfaces ---- */
.act-card{transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
.act-card:hover{transform:translateY(-2px);border-color:var(--border-strong);
  box-shadow:0 14px 32px rgba(2,8,20,.34),inset 0 1px 0 rgba(255,255,255,.06)}
.wx-tab:hover{transform:translateY(-1px)}
.act-card:focus-visible,.wx-tab:focus-visible,.range-btn:focus-visible,.wx-range-seg .range-btn:focus-visible,
.wx-approx-btn:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.act-card:hover,.wx-tab:hover{transform:none}}

/* ---- Consent and consistent keyboard focus ---- */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid #69c6ff!important;outline-offset:3px!important;box-shadow:0 0 0 2px #07111f!important
}
.wx-approx-btn{min-height:44px;padding:10px 14px}
.wx-range-seg .range-btn{min-width:44px}
.consent-panel{position:fixed;z-index:10000;left:16px;right:16px;bottom:16px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;max-width:920px;margin:auto;padding:18px;background:#101c2d;color:#f7fbff;
  border:1px solid #49627f;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.48);contain:layout paint style}
.consent-copy{max-width:650px}.consent-copy h2{margin:0 0 6px;font-size:20px}.consent-copy p{margin:0 0 5px;font-size:16px;line-height:1.45}
.consent-copy a{color:#8bd3ff}.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:250px}
.consent-actions button,.cookie-settings{min-width:44px;min-height:44px;border:1px solid #6e88a6;border-radius:9px;
  background:#1d314b;color:#fff;font:inherit;font-weight:700;cursor:pointer;padding:10px 16px}
.consent-actions button:hover,.cookie-settings:hover{background:#294767}
.cookie-settings{position:fixed;z-index:9999;right:12px;bottom:12px;min-height:44px;padding:8px 12px;font-size:13px}
@media(max-width:640px){.consent-panel{align-items:stretch;flex-direction:column;gap:14px}.consent-actions{min-width:0;width:100%}}
@media(max-width:380px){.consent-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.consent-panel,.cookie-settings{scroll-behavior:auto;transition:none!important}}

/* ---- Hourly / day colour cells: keep the verdict palette bright + glanceable ---- */
.hour .bar,.wxhour .bar{height:6px;border-radius:5px;box-shadow:0 1px 4px rgba(2,8,20,.3)}
.bar.go{background:var(--status-go)}
.bar.maybe{background:var(--status-maybe)}
.bar.nogo{background:var(--status-nogo)}
.tag.go{background:var(--status-go-dim);color:var(--status-go-ink)}
.tag.maybe{background:var(--status-maybe-dim);color:var(--status-maybe-ink)}
.tag.nogo{background:var(--status-nogo-dim);color:var(--status-nogo-ink)}

/* ---- Type + spacing rhythm: confident temperature, clear labels, calm scale ---- */
.wx-dash .wx-cur-t{letter-spacing:-2.5px}
.wx-dash .wx-cur-loc{letter-spacing:.1px}
.wx-strip-h{color:var(--text-secondary)}
/* "What are you planning?" sits over the sky (not glass) → bright + shadow for legibility. */
.wx-sub-h{margin-top:20px;color:var(--text-primary);text-shadow:0 1px 12px rgba(3,9,20,.6)}
.wx-chip .cv{letter-spacing:-.2px}
/* Slightly stronger text-shadow on the current-conditions text so it stays AA-ish
   over the now-lighter glass (which lets the sky through). */
.wx-dash-left .wx-cur-loc,.wx-dash-left .wx-cur-desc,.wx-dash-left .wx-cur-fl,.wx-dash-left .wx-cur-t{
  text-shadow:0 1px 12px rgba(3,9,20,.72)}

/* Fallback: where backdrop-filter is unsupported the cells stay near-solid (readable). */
@supports not ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  .wx-chip,.wxhour,.wxday,.wday{background:rgba(14,26,46,.95)}
}
/* Mobile website refinement — isolated from the desktop layout.
   Keep existing forecast reserves, scoring, consent and reduced-motion behavior. */
@media(max-width:640px){
  .site-header .container{gap:8px}
  .site-header .brand{gap:7px;font-size:14px;white-space:nowrap;line-height:1.2;min-width:0}
  .site-header .brand .dot{width:25px;height:25px;flex:none;border-radius:8px}
  .site-header .lang-select{width:76px;min-width:0;max-width:26vw;margin-left:auto;margin-right:0;min-height:44px;font-size:12px;padding:6px 4px}
  .site-header .nav-toggle{margin-left:0;width:44px;height:44px;min-width:44px}
  .hero-home>.container{padding-top:12px}
  /* A swipeable route bar exposes every activity without a tall wall of buttons. */
  .hero-home .wx-tabs{order:0;display:flex;content-visibility:visible;contain-intrinsic-size:none;flex-wrap:nowrap;overflow-x:auto;gap:7px;padding:2px 2px 10px;margin:0 0 6px;scroll-snap-type:x proximity;scroll-padding-inline:2px;scrollbar-width:thin;scrollbar-color:#4b7894 transparent}
  .hero-home .wx-tab{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 12px;font-size:14px;border-radius:14px;scroll-snap-align:start;background:#09253bdd;color:#d8eafa}
  .hero-home .wx-tab.active{background:linear-gradient(145deg,#14648b,#0a3f65);border-color:#59bce4;color:#fff;box-shadow:inset 0 1px #c9f3ff38}
  .hero-home .wx-tab svg{width:20px;height:20px;flex:none}
  .hero-home-photo{height:clamp(800px,115svh,980px)}
  .hero-home-photo .hero-media img{object-position:54% 36%}
  .hero-home-photo .hero-scrim{background:linear-gradient(180deg,#0412211a 0%,#04122130 65%,var(--bg-primary) 100%)}
  .hero-home .loc-bar{gap:8px;align-items:stretch;margin-bottom:12px}
  .hero-home .loc-bar input{flex:1 1 9rem;min-width:0;min-height:48px;font-size:16px;padding:10px 12px;border-radius:14px;background:#081b30eb}
  .hero-home .loc-bar>.btn{flex:0 1 auto;min-height:48px;padding:10px 11px;font-size:14px;white-space:normal;border-radius:14px;background:#0a2940e8}
  .wx-dash.wx-hero,.wx-dash.wx-hero.cond-clear,.wx-dash.wx-hero.cond-cloud,
  .wx-dash.wx-hero.cond-rain,.wx-dash.wx-hero.cond-storm,.wx-dash.wx-hero.cond-snow{
    padding:20px 16px 16px;gap:20px;border-radius:24px;border-color:#6096b25e;
    /* Reveal the existing sky without adding costly backdrop blur on phones.
       Keep the lower forecast area darker for small labels and numeric values. */
    background:var(--mobile-glass);
    box-shadow:inset 0 1px #d3f1ff38,0 12px 28px #0005
  }
  .wx-dash-left{gap:8px}
  .wx-dash .wx-cur-loc{font-size:16px;line-height:1.35}
  .wx-dash .wx-cur-loc span{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
  .wx-dash-now{gap:16px;margin:3px 0}
  .wx-dash .wx-cur-t{font-size:4rem;font-weight:700;letter-spacing:-2px}
  .wx-dash .wx-cur-ic{font-size:3rem}
  .wx-dash .wx-cur-desc,.wx-dash .wx-cur-fl{font-size:16px;line-height:1.4;color:#f3f7ff;text-shadow:0 1px 3px #031020,0 2px 12px #031020}
  .wx-dash .wx-cur-fl .wx-hl{display:inline-block;margin-left:5px}
  .wx-dash-right{gap:14px}
  .wx-range-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:100%;align-self:stretch;border-radius:16px;padding:4px;background:#041629d9}
  .wx-range-seg .range-btn{min-width:0;min-height:44px;padding:8px 3px;font-size:14px;border-radius:12px;color:#d7e7f4;white-space:normal}
  .wx-range-seg .range-btn.active{background:linear-gradient(145deg,#17648d,#0c446d);color:#fff;box-shadow:inset 0 1px #b9ebff4a,0 2px 6px #0004}
  .wx-dash .wx-chips{gap:7px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .wx-dash .wx-chip{padding:10px 8px;min-width:0;border-radius:14px;background:#102a419c}
  .wx-chip .ck{font-size:12px;line-height:1.3;flex-wrap:wrap;gap:4px;color:#bdd6e8}
  .wx-chip .cv{font-size:16px;line-height:1.3;overflow-wrap:anywhere;color:#f5fbff}
  .wxhour{width:72px;min-height:124px;padding:10px 6px;border-radius:15px;background:#0d2439cf}
  .wxhour .t,.wxhour .hr-rain,.wxhour .hr-wind{font-size:12px}
  .wxhour .deg{font-size:17px}.wxhour .ic{font-size:22px;margin:5px 0}
  .wx-sun{gap:8px 12px;justify-content:flex-start;padding:12px;border-radius:14px;line-height:1.4}
  .act-card{padding:12px;gap:10px;border-radius:18px}
  .act-ic{width:40px;height:40px;border-radius:12px}
  .act-name{font-size:16px}.act-factor{white-space:normal;line-height:1.35;overflow:visible;text-overflow:clip;color:#b9cfe0}
  .act-verdict{font-size:12px;padding:7px 9px;letter-spacing:.15px}
  .hero-activity{min-height:230px}
  .hero-activity>.container{padding-top:30px;padding-bottom:30px}
  .hero-activity h1{font-size:1.9rem;line-height:1.1}
  .hero-activity .hero-sub{font-size:16px;line-height:1.5}
  .widget{padding:16px;border-radius:22px}
  .widget .loc-bar input{min-width:0;flex-basis:10rem;min-height:48px;font-size:16px}
  .widget .btn{min-height:44px;white-space:normal}
  .metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .metric{min-width:0;padding:12px;border-radius:14px}.metric .v{font-size:18px;overflow-wrap:anywhere}
  .verdict{padding:20px 14px;border-radius:18px}.verdict .label{font-size:2.2rem}
  .verdict .why,.window-callout{font-size:16px;line-height:1.5}
  .hero-home-intro p.lead,.hero-home-intro.is-demoted p.lead{font-size:16px;line-height:1.5}
  /* Shared glass across activity, city and localized forecast pages. Reuse
     each activity's existing responsive photo; text-only routes stay text-only. */
  .hero-activity{overflow:visible;isolation:auto;background:transparent;z-index:0}
  .hero-activity .hero-photo{bottom:auto;height:clamp(800px,115svh,980px);pointer-events:none}
  .hero-activity .is-cycling .hero-media img{object-position:24% 55%}
  .hero-activity .hero-scrim{background:linear-gradient(180deg,rgba(4,18,33,.32),rgba(4,18,33,.24) 60%,var(--bg-primary))}
  .hero-activity+.block{position:relative;z-index:1;background:transparent}
  .widget{background:var(--mobile-glass);border-color:var(--mobile-glass-edge);box-shadow:inset 0 1px #d3f1ff38,0 12px 28px #0005}
  #gng-result{background:var(--mobile-glass);border:1px solid var(--mobile-glass-edge);border-radius:22px;padding:14px;margin-top:12px}
  #gng-app .verdict{background:linear-gradient(155deg,#06182a30,#06182a70);box-shadow:inset 0 1px #d3f1ff21}
  #gng-app .verdict.go{background:linear-gradient(135deg,#2fd18424,#06182a65)}
  #gng-app .verdict.maybe{background:linear-gradient(135deg,#f2b53f24,#06182a65)}
  #gng-app .verdict.nogo{background:linear-gradient(135deg,#ff526424,#06182a65)}
  #gng-app .verdict .loc,#gng-app .score-ring,#gng-app .loc-hint,#gng-app .daily-note,#gng-app .status-msg{color:#e0edfa;text-shadow:0 1px 4px #031020}
  #gng-app .verdict .why{color:#f3f7ff;text-shadow:0 1px 4px #031020}
  #gng-app .verdict .loc svg{width:20px;height:20px;display:inline-block;vertical-align:-4px;margin-right:5px}
  #gng-app .hour .ic svg{width:24px;height:24px}
  #gng-app .wd-ic svg{width:28px;height:28px}
  #gng-app .window-callout,#gng-app .metric,#gng-app .hour,#gng-app .wday,#gng-app .day,
  .wxday,.wx-sun,.act-card{background:rgba(8,28,46,.68);border-color:var(--mobile-glass-edge)}
  .wxday.wxday-typ{background:repeating-linear-gradient(135deg,#ffffff08,#ffffff08 7px,transparent 7px,transparent 14px),rgba(8,28,46,.68)}
  #gng-app .metric .k,#gng-app .hour .t,#gng-app .wd-gust,#gng-app .day .dmeta{color:#c7daea}
}
@media(max-width:350px){
  .site-header .container{gap:5px}.site-header .brand{font-size:13px;gap:5px}
  .site-header .lang-select{width:68px}
  .hero-home .loc-bar>.btn{flex-basis:100%}.hero-home .loc-bar input{flex-basis:100%}
  .act-card{flex-wrap:wrap}.act-verdict{margin-left:50px}
}
@media(max-width:640px) and (prefers-contrast:more){
  .wx-dash.wx-hero,.wx-dash.wx-hero[class*="cond-"]{background:#051829;border-color:#aad5ef;box-shadow:none}
  .wx-chip .ck,.wx-dash .wx-cur-desc,.wx-dash .wx-cur-fl,.act-factor{color:#f3faff}
  .widget,#gng-result,#gng-app .verdict,#gng-app .verdict.go,#gng-app .verdict.maybe,#gng-app .verdict.nogo,
  #gng-app .window-callout,#gng-app .metric,#gng-app .hour,#gng-app .wday,#gng-app .day,
  .wxday,.wxday.wxday-typ,.wx-sun,.act-card{background:#051829;box-shadow:none}
}
@media(max-width:640px) and (prefers-reduced-transparency:reduce){
  .wx-dash.wx-hero,.wx-dash.wx-hero[class*="cond-"]{background:#051829}
  .widget,#gng-result,#gng-app .verdict,#gng-app .verdict.go,#gng-app .verdict.maybe,#gng-app .verdict.nogo,
  #gng-app .window-callout,#gng-app .metric,#gng-app .hour,#gng-app .wday,#gng-app .day,
  .wxday,.wxday.wxday-typ,.wx-sun,.act-card{background:#051829}
}
/* Shared weather artwork. Intrinsic tiers; no inherited outline strokes or animation. */
svg.gng-weather-art{display:inline-block;vertical-align:middle;flex-shrink:0;fill:none;stroke:none;overflow:visible;filter:none;animation:none}
.wx-dash .wx-cur-ic svg.gng-weather-art{width:80px;height:80px}
#gng-app .wd-ic svg.gng-weather-art,.wxday .wd-ic svg.gng-weather-art{width:64px;height:64px;max-width:100%}
#gng-app .hour .ic svg.gng-weather-art,.wx-hour .ic svg.gng-weather-art,.hour .ic svg.gng-weather-art{width:36px;height:36px}
.wd-rain svg.gng-weather-art,.wd-wind svg.gng-weather-art,.wd-gust svg.gng-weather-art,.dmeta svg.gng-weather-art,#gng-app .verdict .loc svg.gng-weather-art{width:18px;height:18px}
@media(max-width:430px){#gng-app .wd-ic svg.gng-weather-art,.wxday .wd-ic svg.gng-weather-art{width:56px;height:56px}}