*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    /* ── TOKENS ── */
    :root {
      --paper:      #f2f5f8;   /* cool off-white — fresh, not sterile      */
      --ink:        #1a1a1a;
      --ink-2:      #3c4045;   /* cool mid-gray                            */
      --ink-3:      #7a7d81;   /* cool muted gray                          */
      --rule-soft:    rgba(26,26,26,0.18);
      --rule-faint:   rgba(26,26,26,0.10);
      --rule-section: rgba(26,26,26,0.32);  /* stronger — for major section breaks */

      --accent:      #1d4a6e;   /* deep cerulean — primary, trust           */
      --accent-soft: rgba(29,74,110,0.14);
      --accent-2:    #d97060;   /* warm coral — secondary, human pop        */
      --accent-2-soft: rgba(217,112,96,0.14);

      /* Bright weather-app severity — clean traffic-light, not earth tones.
         These sit in the weather.com / Apple Weather register, not almanac. */
      --s1: #a8b0b5;   /* very low  — cool neutral gray           */
      --s2: #3fa066;   /* low       — emerald green               */
      --s3: #e8c02a;   /* medium    — sunny yellow                */
      --s4: #ef7f3a;   /* high      — clean coral orange          */
      --s5: #e03a3a;   /* very high — cherry red                  */

      --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
      --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    }

    html, body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body { min-height: 100vh; overflow-x: hidden; }
    a { color: inherit; text-decoration: none; }
    .tnum { font-variant-numeric: tabular-nums; }

    /* ── LAYOUT ── */
    .shell { max-width: 880px; margin: 0 auto; padding: 0 36px; }

    /* ── MASTHEAD ── */
    .masthead {
      border-bottom: 2px solid var(--accent);
      padding: 28px 0 18px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 24px;
      flex-wrap: wrap;
    }
    .mast-brand {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .mast-date {
      font-family: var(--serif);
      font-style: italic;
      font-size: 14px;
      color: var(--ink-2);
    }
    .mast-nav { display: flex; gap: 18px; }
    .mast-btn {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-2);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
    }
    .mast-btn:hover { color: var(--accent); }

    /* ── TREE / GRASS SCENE — sits flush below hero, above hbid ── */
    .tree-scene {
      width: 100%;
      overflow: hidden;
      line-height: 0;
      margin-bottom: 32px;
    }
    .tree-scene svg {
      width: 100%;
      height: auto;
      display: block;
      opacity: 0.72;
    }

    /* ── HERO ── */
    .hero {
      padding: 78px 0 56px;
      text-align: center;
      position: relative;
      /* border removed — tree scene serves as the visual separator */
    }

    /* Pollen float layer — full-width transparent overlay behind hero content */
    .hero-art {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      user-select: none;
      z-index: 0;
    }
    .hero-art svg { width: 100%; height: 100%; display: block; }

    /* Pollen float animation */
    @keyframes pollenFloat {
      0%   { opacity: 0; transform: translateY(0) translateX(0); }
      10%  { opacity: 0.60; }
      78%  { opacity: 0.38; }
      100% { opacity: 0; transform: translateY(-320px) translateX(var(--pdrift, 0px)); }
    }
    .pollen-dot {
      animation: pollenFloat var(--pdur, 7s) var(--pdelay, 0s) infinite ease-in-out;
      transform-origin: center center;
    }

    /* Keep hero text above the pollen layer */
    .hero-q, .answer, .qualifier, .loc-line { position: relative; z-index: 1; }
    .hero-q {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent-2);
      margin-bottom: 28px;
    }
    .answer {
      font-family: var(--serif);
      font-weight: 700;
      font-size: clamp(96px, 16vw, 180px);
      line-height: 0.95;
      letter-spacing: -0.035em;
      color: var(--ink);
      margin-bottom: 22px;
      transition: opacity 0.45s ease, color 0.45s ease;
      min-height: 0.95em;
    }
    .answer-period { color: var(--accent); }

    /* Thinking dots — three typographic dots that pulse in sequence */
    .answer.loading {
      color: var(--ink-3);
      letter-spacing: 0.08em;
      font-weight: 400;
    }
    .answer.loading .dot {
      display: inline-block;
      opacity: 0.28;
      animation: think 1.4s ease-in-out infinite;
    }
    .answer.loading .dot:nth-child(2) { animation-delay: 0.18s; }
    .answer.loading .dot:nth-child(3) { animation-delay: 0.36s; }
    @keyframes think {
      0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
      30%           { opacity: 0.9;  transform: translateY(-0.06em); }
    }

    .qualifier {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(19px, 2.4vw, 26px);
      font-weight: 400;
      color: var(--ink-2);
      max-width: 620px;
      margin: 0 auto;
      line-height: 1.4;
      min-height: 1.4em;
      transition: color 0.4s ease, opacity 0.3s ease;
    }
    .qualifier.loading { color: var(--ink-3); }
    .qualifier.swap { opacity: 0; }

    .loc-line {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-top: 22px;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .loc-line.show { opacity: 1; }

    /* ── HOW BAD IS IT TODAY? ── */
    .hbid {
      margin: 16px 0 0;
      padding: 36px 40px 48px;
      border-bottom: 1px solid var(--rule-section);
      background: transparent;
      transition: background 0.4s;
    }
    /* Keep hbid in layout even when hidden — prevents CLS when it appears */
    #hbid[hidden] {
      display: block !important;
      opacity: 0;
      pointer-events: none;
      min-height: 120px;
    }
    #hbid { transition: opacity 0.35s ease, background 0.4s; }
    .hbid.lvl0 { background: rgba(168,184,160,0.10); }
    .hbid.lvl1 { background: rgba(90,158,72,0.09); }
    .hbid.lvl2 { background: rgba(212,168,32,0.10); }
    .hbid.lvl3 { background: rgba(200,104,32,0.12); }
    .hbid.lvl4 { background: rgba(184,48,32,0.10); }

    .hbid-head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 16px;
    }
    .hbid-eyebrow {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .hbid-severity {
      font-family: var(--sans);
      font-weight: 700;
      font-size: 32px;
      line-height: 1;
      color: var(--ink);
    }
    .hbid.lvl0 .hbid-severity { color: var(--ink-2); }
    .hbid.lvl1 .hbid-severity { color: var(--s3); }
    .hbid.lvl2 .hbid-severity { color: var(--s4); }
    .hbid.lvl3 .hbid-severity { color: var(--s5); }
    .hbid.lvl4 .hbid-severity { color: var(--s5); }

    .hbid-sentence {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.5;
      color: var(--ink);
      font-weight: 600;
      margin: 0 0 10px;
      max-width: 620px;
    }
    .hbid-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px;
    }
    .hbid-tag {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      background: rgba(0,0,0,0.06);
      border-radius: 3px;
      padding: 4px 8px;
    }

    /* Decision authority line */
    .hbid-decision {
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink-2);
      margin: 0 0 14px;
      max-width: 620px;
    }

    /* Affiliate product recs — compact inline treatment */
    .hbid-recs[hidden] { display: none !important; }
    .hbid-recs {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--rule-soft);
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px 0;
    }
    .hbid-recs-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-right: 10px;
      white-space: nowrap;
    }
    .hbid-recs-row {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 4px;
    }
    .hbid-rec {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-2);
      text-decoration: none;
      padding: 5px 13px;
      border: 1px solid var(--rule-section);
      border-radius: 20px;
      background: rgba(0,0,0,0.03);
      transition: color 0.15s, border-color 0.15s, background 0.15s;
      white-space: nowrap;
    }
    .hbid-rec:hover {
      color: var(--accent);
      border-color: var(--accent);
      background: var(--accent-soft);
      opacity: 1;
    }
    /* hide desc and cta — not needed in compact mode */
    .hbid-rec-title { display: none; }
    .hbid-rec-desc  { display: none; }
    .hbid-rec-cta   { display: none; }
    .hbid-recs-disclosure {
      width: 100%;
      margin-top: 5px;
      font-family: var(--sans);
      font-size: 10px;
      color: var(--ink-3);
    }

    .hbid-med-bridge {
      margin-top: 16px;
      font-family: var(--sans);
      font-size: 12px;
      color: var(--ink-2);
      line-height: 1.5;
    }
    .hbid-med-bridge a {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* ── WINDOWS WIDGET ── */
    .windows {
      padding: 36px 40px 32px;
      border-bottom: 1px solid var(--rule-section);
      max-width: 620px;
      margin: 0 auto;
    }
    #windows[hidden] { display: none !important; }

    .windows-eyebrow {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 14px;
    }
    .windows-main {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 14px;
    }
    .windows-icon {
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      transition: background 0.35s;
    }
    .windows.go   .windows-icon { background: rgba(63,160,102,0.10); }
    .windows.wait .windows-icon { background: rgba(232,192,42,0.12); }
    .windows.no   .windows-icon { background: rgba(224,58,58,0.08); }

    .windows-verdict {
      font-family: var(--sans);
      font-weight: 700;
      font-size: 22px;
      line-height: 1.2;
      margin-bottom: 4px;
      transition: color 0.35s;
    }
    .windows.go   .windows-verdict { color: var(--s2); }
    .windows.wait .windows-verdict { color: var(--s3); }
    .windows.no   .windows-verdict { color: var(--s5); }

    .windows-sentence {
      font-family: var(--serif);
      font-size: 16px;
      color: var(--ink-2);
      line-height: 1.5;
    }
    .windows-signals {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
    }
    .win-sig {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 500;
      padding: 5px 12px 5px 8px;
      border-radius: 20px;
      border: 1px solid var(--rule-soft);
      background: var(--paper);
      color: var(--ink-2);
    }
    .win-sig-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .win-sig-dot.good    { background: var(--s2); }
    .win-sig-dot.ok      { background: var(--s3); }
    .win-sig-dot.bad     { background: var(--s5); }
    .win-sig-dot.neutral { background: var(--s1); }

    .win-nudge {
      width: 100%;
      font-family: var(--serif);
      font-style: italic;
      font-size: 14px;
      color: var(--ink-3);
      margin-top: 4px;
    }
    .win-fc-strip {
      display: flex;
      gap: 6px;
      margin-top: 16px;
      width: 100%;
    }
    .win-fc-day {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 8px 4px;
      border-radius: 8px;
      border: 1px solid var(--rule-faint);
      background: rgba(255,255,255,0.5);
    }
    .win-fc-today {
      border-color: var(--rule-soft);
      background: white;
    }
    .win-fc-name {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .win-fc-today .win-fc-name { color: var(--ink-2); }
    .win-fc-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    .win-fc-lbl {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      color: var(--ink-3);
      text-align: center;
    }

    /* ── SECTIONS ── */
    .section {
      padding: 60px 0;
      border-bottom: 1px solid var(--rule-section);
    }
    .section-head {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 32px;
      display: flex;
      align-items: baseline;
      gap: 16px;
    }
    .section-num {
      color: var(--accent);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      min-width: 18px;
    }
    .section-sub {
      margin-left: auto;
      font-family: var(--serif);
      font-style: italic;
      font-size: 13px;
      letter-spacing: 0;
      text-transform: none;
      color: var(--ink-3);
      font-weight: 400;
    }

    /* ── FORECAST ── */
    .forecast {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-bottom: 24px;
      min-height: 180px; /* reserve space to prevent CLS while JS populates */
    }
    .fc-day {
      display: flex;
      flex-direction: column;
      gap: 10px;
      text-align: center;
    }
    .fc-label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .fc-day.today .fc-label { color: var(--accent); font-weight: 700; }
    .fc-bar-wrap {
      width: 100%;
      height: 170px;
      display: flex;
      flex-direction: column-reverse;
      background: var(--rule-faint);
    }
    .fc-bar {
      width: 100%;
      background: var(--ink-3);
      transition: height 0.9s cubic-bezier(0.22,1,0.36,1), background 0.4s ease;
    }
    .fc-bar.s1 { background: var(--s1); }
    .fc-bar.s2 { background: var(--s2); }
    .fc-bar.s3 { background: var(--s3); }
    .fc-bar.s4 { background: var(--s4); }
    .fc-bar.s5 { background: var(--s5); }
    .fc-val {
      font-family: var(--sans);
      font-variant-numeric: tabular-nums;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-2);
    }
    .fc-val small {
      font-weight: 500;
      color: var(--ink-3);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      display: block;
      margin-top: 2px;
    }
    .fc-day.worst .fc-val { color: var(--ink); }
    .fc-note {
      font-family: var(--serif);
      font-style: italic;
      font-size: 16px;
      color: var(--ink-2);
      line-height: 1.5;
      max-width: 560px;
    }

    /* Color scale legend — sits below the fc-note */
    .fc-legend {
      display: flex;
      gap: 16px;
      margin-top: 18px;
      flex-wrap: wrap;
      align-items: center;
    }
    .fc-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--sans);
      font-size: 11px;
      color: var(--ink-2);
    }
    .fc-leg-sw {
      display: inline-block;
      width: 16px;
      height: 10px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .fc-leg-sw.s1 { background: var(--s1); }
    .fc-leg-sw.s2 { background: var(--s2); }
    .fc-leg-sw.s3 { background: var(--s3); }
    .fc-leg-sw.s4 { background: var(--s4); }
    .fc-leg-sw.s5 { background: var(--s5); }

    /* ── DRIVERS TABLE ── */
    .drivers {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--serif);
    }
    .drivers th {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      text-align: left;
      padding: 0 0 14px;
      border-bottom: 1px solid var(--ink);
    }
    .drivers th.r { text-align: right; }
    .drivers td {
      padding: 24px 0;
      border-bottom: 1px solid var(--rule-soft);
      vertical-align: middle;
    }
    .drivers td.r { text-align: right; vertical-align: middle; }
    .drivers tr:last-child td { border-bottom: none; }

    .drv-head { display: flex; align-items: center; gap: 18px; }
    .drv-ill {
      width: 42px; height: 42px;
      flex-shrink: 0;
      color: var(--ink-2);
    }
    .drv-text { min-width: 0; }
    .drv-name {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 19px;
      color: var(--ink);
      margin-bottom: 3px;
    }
    .drv-desc {
      font-family: var(--serif);
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.5;
      max-width: 380px;
    }

    .drv-idx-cell { padding-right: 24px; }
    .drv-idx-num {
      font-family: var(--serif);
      font-variant-numeric: tabular-nums;
      font-size: 26px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
    }
    .drv-idx-max {
      font-family: var(--sans);
      font-variant-numeric: tabular-nums;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-3);
      margin-left: 2px;
    }
    .drv-scale {
      display: inline-flex;
      gap: 3px;
      margin-top: 8px;
    }
    .drv-pip {
      width: 16px;
      height: 4px;
      background: var(--rule-soft);
    }
    .drv-pip.on.s1 { background: var(--s1); }
    .drv-pip.on.s2 { background: var(--s2); }
    .drv-pip.on.s3 { background: var(--s3); }
    .drv-pip.on.s4 { background: var(--s4); }
    .drv-pip.on.s5 { background: var(--s5); }

    .drv-lbl {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .drv-lbl.s1 { color: var(--s1); }
    .drv-lbl.s2 { color: var(--s2); }
    .drv-lbl.s3 { color: var(--s3); }
    .drv-lbl.s4 { color: var(--s4); }
    .drv-lbl.s5 { color: var(--s5); }
    .drv-trd {
      font-family: var(--sans);
      font-size: 18px;
      color: var(--ink-3);
      font-weight: 500;
    }

    /* Scope note — pollen-only disclaimer */
    .section-scope-note {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--ink-3);
      font-style: italic;
      margin-bottom: 20px;
    }

    /* ── MY TRIGGERS — personalisation filter ── */
    .trigger-filters {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .trigger-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .trigger-btn {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 12px;
      border: 1px solid var(--rule-soft);
      border-radius: 20px;
      background: transparent;
      color: var(--ink-3);
      cursor: pointer;
      transition: all 0.15s;
    }
    .trigger-btn:hover { border-color: var(--accent); color: var(--accent); }
    .trigger-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
    /* Highlight matched rows, dim others */
    .drivers tbody tr.trigger-match td { background: rgba(29,74,110,0.05); }
    .drivers tbody tr.trigger-match .drv-name { color: var(--accent); }
    .drivers tbody tr.trigger-dim { opacity: 0.35; }

    /* Species strip — active species pills below the drivers table */
    .species-strip {
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .species-strip.hidden { display: none; }
    .species-strip-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      white-space: nowrap;
      margin-right: 2px;
    }
    .species-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--ink-2);
      background: rgba(0,0,0,0.055);
      border-radius: 3px;
      padding: 4px 9px 4px 7px;
    }
    .species-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .species-dot.s1 { background: var(--s1); }
    .species-dot.s2 { background: var(--s2); }
    .species-dot.s3 { background: var(--s3); }
    .species-dot.s4 { background: var(--s4); }
    .species-dot.s5 { background: var(--s5); }

    /* ── NEIGHBOR LIST ── */
    .neighbor-list {
      margin-bottom: 32px;
      max-width: 560px;
    }
    .nbr-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid var(--rule-soft);
    }
    .nbr-row:first-child { border-top: 1px solid var(--rule-soft); }
    .nbr-name {
      font-family: var(--serif);
      font-size: 16px;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 9px;
    }
    .nbr-you .nbr-name { font-weight: 700; }
    .nbr-state {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .nbr-you-tag {
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      background: rgba(29,74,110,0.08);
      padding: 2px 7px;
      border-radius: 2px;
    }
    .nbr-reading {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-shrink: 0;
    }
    .nbr-reading.nbr-loading { opacity: 0.3; }
    .nbr-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .nbr-dot-empty { background: rgba(0,0,0,0.12); }
    .nbr-num {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      min-width: 14px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .nbr-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--ink-3);
      min-width: 64px;
    }
    .nbr-unavail {
      font-family: var(--serif);
      font-style: italic;
      font-size: 15px;
      color: var(--ink-3);
      padding: 24px 0;
    }

    .map-meta {
      margin-top: 4px;
    }

    .map-override {
      display: flex;
      gap: 0;
      align-items: stretch;
      flex-wrap: nowrap;
      min-width: 280px;
    }
    .map-override-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 8px;
      display: block;
    }
    .map-override-input {
      flex: 1;
      font-family: var(--serif);
      font-size: 15px;
      padding: 9px 12px;
      background: var(--paper);
      border: 1px solid var(--ink);
      border-right: none;
      color: var(--ink);
      outline: none;
      min-width: 0;
      border-radius: 0;
      -webkit-appearance: none;
    }
    .map-override-input::placeholder { color: var(--ink-3); }
    .map-override-input:focus { background: #fff; }
    .map-override-btn {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: var(--ink);
      color: var(--paper);
      border: 1px solid var(--ink);
      padding: 0 16px;
      cursor: pointer;
      white-space: nowrap;
    }
    .map-override-btn:hover { opacity: 0.82; }
    .map-override-error {
      font-family: var(--serif);
      font-style: italic;
      font-size: 13px;
      color: var(--s5);
      margin-top: 8px;
      min-height: 1em;
    }

    @media (max-width: 640px) {
      .map-meta { grid-template-columns: 1fr; }
      .map-override { min-width: 0; }
    }

    /* ── SEASON CHART (Gantt) ── */
    .season-chart {
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      padding-bottom: 4px;
    }
    .sc-row {
      display: grid;
      grid-template-columns: 56px 1fr;
      align-items: center;
      gap: 16px;
      height: 22px;
      position: relative;
    }
    .sc-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-3);
      text-align: right;
    }
    .sc-track {
      position: relative;
      height: 100%;
      background: var(--rule-faint);
    }
    .sc-bar {
      position: absolute;
      top: 0; bottom: 0;
      opacity: 0.95;
    }
    .sc-months {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 16px;
      margin-top: 10px;
    }
    .sc-months-inner {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .sc-today {
      position: absolute;
      top: 0; bottom: 28px;
      left: 56px;
      width: 0;
      border-left: 1px dashed var(--ink);
      pointer-events: none;
    }
    .sc-today-mark {
      position: absolute;
      top: -14px;
      left: -4px;
      width: 9px; height: 9px;
      background: var(--ink);
      border-radius: 50%;
    }
    .sc-today-txt {
      position: absolute;
      top: -26px;
      left: 8px;
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
      white-space: nowrap;
    }

    .sc-notes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 36px;
      padding-top: 26px;
      border-top: 1px solid var(--rule-faint);
    }
    .sc-note-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      display: block;
      margin-bottom: 6px;
    }
    .sc-note-val {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 19px;
      font-variant-numeric: tabular-nums;
      color: var(--ink);
    }
    .sc-note-val-sub {
      font-family: var(--serif);
      font-size: 13px;
      color: var(--ink-2);
      font-style: italic;
      margin-top: 2px;
    }

    /* ── ACTIONS ── */
    .actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px 56px;
    }
    .action {
      padding-top: 18px;
      border-top: 1px solid var(--rule-soft);
    }
    .action-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 8px;
    }
    .action-title {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 19px;
      color: var(--accent);
      margin-bottom: 8px;
      line-height: 1.25;
    }
    .action-body {
      font-family: var(--serif);
      font-size: 14.5px;
      color: var(--ink-2);
      line-height: 1.6;
    }
    .action-links {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
    }
    .action-link {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);
      border-bottom: 1px solid var(--accent);
      padding-bottom: 2px;
    }
    .action-link:hover { opacity: 0.7; }

    /* ── CONTENT ── */
    .content h3 {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 22px;
      margin: 34px 0 10px;
      color: var(--ink);
    }
    .content h3:first-of-type { margin-top: 0; }
    .content p {
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.7;
      color: var(--ink-2);
      margin-bottom: 12px;
      max-width: 640px;
    }
    .content ul { list-style: none; margin-bottom: 16px; max-width: 640px; }
    .content li {
      font-family: var(--serif);
      font-size: 15.5px;
      line-height: 1.7;
      color: var(--ink-2);
      padding-left: 22px;
      position: relative;
      margin-bottom: 4px;
    }
    .content li::before {
      content: '·';
      position: absolute;
      left: 8px;
      color: var(--ink-3);
      font-weight: 700;
    }
    .pullq {
      border-left: 2px solid var(--accent);
      padding: 8px 0 8px 22px;
      margin: 26px 0;
      font-family: var(--serif);
      font-style: italic;
      font-size: 19px;
      line-height: 1.5;
      color: var(--ink-2);
      max-width: 620px;
    }

    /* ── ADS ── */
    .ad-slot {
      padding: 22px 0;
      text-align: center;
      border-top: 1px solid var(--rule-faint);
      border-bottom: 1px solid var(--rule-faint);
    }
    .ad-slot-label {
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 10px;
    }
    .ad-unit {
      display: inline-block;
      border: 1px dashed var(--rule-soft);
      padding: 28px 24px;
      min-width: 320px;
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    /* In-content medium rectangle — wider than a leaderboard, taller than a banner */
    .ad-unit.ad-in-content {
      min-width: 336px;
      min-height: 280px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* ── FOOTER ── */
    footer {
      border-top: 2px solid var(--accent);
      margin-top: 40px;
      padding: 44px 0 72px;
    }
    .ft-big {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(26px, 4.5vw, 44px);
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--ink-3);
      max-width: 560px;
      margin-bottom: 36px;
    }
    .ft-share { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
    .sh-btn {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: none;
      border: 1px solid var(--ink);
      padding: 10px 16px;
      color: var(--ink);
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .sh-btn:hover {
      background: var(--accent-2);
      border-color: var(--accent-2);
      color: #fff;
    }
    .ft-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 24px;
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--rule-soft);
    }
    .ft-nav a {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-2);
      transition: color 0.15s ease;
    }
    .ft-nav a:hover { color: var(--accent); }
    .ft-meta {
      font-family: var(--sans);
      font-size: 11.5px;
      line-height: 1.9;
      color: var(--ink-3);
      max-width: 680px;
    }
    .ft-meta strong { color: rgba(245,166,35,0.90); }
    .ft-meta a { color: var(--ink-2); border-bottom: 1px solid var(--rule-soft); }
    .ft-meta a:hover { color: var(--ink); }
    .ft-also {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--ink-3);
      margin-bottom: 10px;
    }
    .ft-also a { color: var(--ink-2); border-bottom: 1px solid var(--rule-soft); text-decoration: none; }
    .ft-also a:hover { color: var(--accent); }

    /* ── Simple content pages (about, contact, privacy, terms, guides) ── */
    .page {
      padding: 56px 0 72px;
      max-width: 680px;
      margin: 0 auto;
    }
    .page-eyebrow {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--accent-2);
      margin-bottom: 14px;
    }
    .page h1 {
      font-family: var(--serif);
      font-size: clamp(34px, 5vw, 52px);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 16px;
    }
    .page-lede {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(18px, 2.2vw, 22px);
      line-height: 1.5;
      color: var(--ink-2);
      margin-bottom: 36px;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--rule-section);
    }
    .page h2 {
      font-family: var(--serif);
      font-size: clamp(22px, 2.6vw, 28px);
      font-weight: 700;
      color: var(--ink);
      margin-top: 44px;
      margin-bottom: 14px;
      line-height: 1.2;
    }
    .page h2:first-of-type { margin-top: 0; }
    .page h3 {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 19px;
      color: var(--accent);
      margin-top: 28px;
      margin-bottom: 8px;
    }
    .page p {
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.75;
      color: var(--ink-2);
      margin-bottom: 14px;
    }
    .page a {
      color: var(--accent);
      border-bottom: 1px solid var(--accent);
      padding-bottom: 1px;
    }
    .page a:hover { opacity: 0.72; }
    .page ul, .page ol {
      margin-bottom: 16px;
      padding-left: 22px;
    }
    .page li {
      font-family: var(--serif);
      font-size: 16px;
      line-height: 1.7;
      color: var(--ink-2);
      margin-bottom: 6px;
    }
    .page .meta-date {
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-top: -10px;
      margin-bottom: 32px;
    }

    /* H3 with leading botanical icon (used in guide articles) */
    .page h3.guide-h3 {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--accent);
    }
    .page h3.guide-h3 svg {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      color: var(--ink-2);
      opacity: 0.82;
    }

    /* Product/drug comparison components (guide articles) — .product-head
       and .drug-head share styles; use whichever reads best semantically. */
    .drug-head,
    .product-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 36px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
    .drug-head svg,
    .product-head svg {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      color: var(--accent);
    }
    .drug-head h3,
    .product-head h3 {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 22px;
      color: var(--ink);
      margin: 0;
      line-height: 1.2;
      flex: 1;
      min-width: 200px;
    }
    .drug-head h3 small,
    .product-head h3 small {
      display: block;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-top: 3px;
    }
    .drug-shop,
    .product-shop {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);
      border-bottom: 1px solid var(--accent);
      padding-bottom: 2px;
      white-space: nowrap;
    }
    .drug-shop:hover,
    .product-shop:hover { opacity: 0.72; }

    .drug-facts,
    .product-facts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px 24px;
      padding: 16px 22px;
      margin: 12px 0 20px;
      background: rgba(29,74,110,0.04);
      border-left: 2px solid var(--accent);
    }
    .drug-fact-label,
    .product-fact-label {
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 4px;
    }
    .drug-fact-val,
    .product-fact-val {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 14.5px;
      color: var(--ink);
      line-height: 1.3;
    }
    @media (max-width: 560px) {
      .drug-facts,
      .product-facts { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
    }

    .compare-table {
      width: 100%;
      border-collapse: collapse;
      margin: 32px 0;
      font-family: var(--serif);
    }
    .compare-table th,
    .compare-table td {
      text-align: left;
      padding: 12px 14px;
      border-bottom: 1px solid var(--rule-soft);
      font-size: 14.5px;
      line-height: 1.45;
      vertical-align: top;
    }
    .compare-table thead th {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      border-bottom: 2px solid var(--accent);
      padding-bottom: 10px;
    }
    .compare-table th:first-child,
    .compare-table td:first-child {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      white-space: nowrap;
      width: 110px;
    }
    .compare-table td strong { color: var(--ink); }
    .compare-wrap { overflow-x: auto; margin: 0 -12px; padding: 0 12px; }
    @media (max-width: 640px) {
      .compare-table { font-size: 13px; min-width: 520px; }
      .compare-table th, .compare-table td { padding: 9px 10px; }
      .compare-table th:first-child,
      .compare-table td:first-child { width: 80px; }
    }

    /* UPI scale — horizontal 0-5 severity legend */
    .upi-scale {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 2px;
      margin: 32px 0;
    }
    .upi-level {
      padding: 18px 10px 16px;
      text-align: center;
      color: #fff;
    }
    .upi-level.l0 { background: #dfe2df; color: var(--ink-2); }
    .upi-level.l1 { background: var(--s1); }
    .upi-level.l2 { background: var(--s2); }
    .upi-level.l3 { background: var(--s3); color: #1a1a1a; }
    .upi-level.l4 { background: var(--s4); }
    .upi-level.l5 { background: var(--s5); }
    .upi-num {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 26px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .upi-word {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-top: 6px;
      opacity: 0.92;
    }
    @media (max-width: 560px) {
      .upi-scale { gap: 1px; }
      .upi-level { padding: 14px 4px 12px; }
      .upi-num { font-size: 20px; }
      .upi-word { font-size: 8.5px; letter-spacing: 0.08em; }
    }

    /* Inline pollen-grain icon used in thresholds table */
    .pollen-icon {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--ink-2);
    }
    .pollen-icon svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      opacity: 0.82;
    }
    .pollen-icon span {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
    }

    /* Warning callout for "what to avoid" etc. */
    .warn-callout {
      margin: 24px 0;
      padding: 18px 22px;
      border-left: 3px solid var(--accent-2);
      background: var(--accent-2-soft);
    }
    .warn-callout strong { color: var(--accent-2); }
    .warn-callout p { margin-bottom: 6px; font-size: 15px; }
    .warn-callout p:last-child { margin-bottom: 0; }

    /* Stat callout block — 3 numbers with labels, full-bleed between paragraphs */
    .stat-block {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin: 36px 0;
      padding: 28px 30px;
      border-top: 1px solid var(--rule-section);
      border-bottom: 1px solid var(--rule-section);
      background: rgba(29,74,110,0.035);
    }
    .stat-num {
      font-family: var(--serif);
      font-weight: 700;
      font-size: clamp(30px, 4.2vw, 44px);
      color: var(--accent);
      font-variant-numeric: tabular-nums;
      line-height: 1;
      letter-spacing: -0.015em;
    }
    .stat-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-top: 10px;
      line-height: 1.45;
    }
    .stat-source {
      grid-column: 1 / -1;
      font-family: var(--serif);
      font-style: italic;
      font-size: 13px;
      color: var(--ink-3);
      margin-top: 4px;
      padding-top: 14px;
      border-top: 1px solid var(--rule-faint);
    }
    @media (max-width: 560px) {
      .stat-block { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
      .stat-block > div:not(.stat-source) { padding-bottom: 18px; border-bottom: 1px solid var(--rule-soft); }
      .stat-block > div:nth-last-child(2) { border-bottom: none; padding-bottom: 0; }
    }

    /* Contact form */
    .contact-form {
      display: grid;
      gap: 16px;
      max-width: 500px;
      margin-top: 24px;
    }
    .contact-form label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 4px;
      display: block;
    }
    .contact-form input,
    .contact-form textarea {
      width: 100%;
      font-family: var(--serif);
      font-size: 16px;
      padding: 11px 14px;
      background: #fff;
      border: 1px solid var(--ink);
      color: var(--ink);
      border-radius: 0;
      outline: none;
      -webkit-appearance: none;
    }
    .contact-form textarea { min-height: 140px; resize: vertical; }
    .contact-form button {
      justify-self: start;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: var(--accent);
      color: #fff;
      border: 1px solid var(--accent);
      padding: 12px 22px;
      cursor: pointer;
    }
    .contact-form button:hover { background: var(--accent-2); border-color: var(--accent-2); }

    /* ── MEDICATION TIMING WIDGET ── */
    .mt-headline {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 16px;
      line-height: 1.35;
      max-width: 580px;
    }

    /* Chart wrapper — arc zone stacked above bars */
    .mt-chart-wrap { position: relative; }
    .mt-arc-zone {
      height: 54px;
      position: relative;
      margin-bottom: 4px;
    }
    .mt-arc-zone svg {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .mt-track {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }
    .mt-pollen-track { height: 32px; }

    .mt-seg { height: 100%; border-radius: 4px; }
    .mt-seg.mt-peak {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* Pollen level colors — matches forecast bar scale exactly */
    .mt-seg.p0 { background: rgba(0,0,0,0.07); }
    .mt-seg.p1 { background: var(--s1); }
    .mt-seg.p2 { background: var(--s2); }
    .mt-seg.p3 { background: var(--s3); }
    .mt-seg.p4 { background: var(--s4); }
    .mt-seg.p5 { background: var(--s5); }

    /* Protection states — all green */
    .mt-seg.m-none   { background: rgba(0,0,0,0.05); }
    .mt-seg.m-build  { background: rgba(46,94,46,0.22); }
    .mt-seg.m-active { background: rgba(46,94,46,0.55); }
    .mt-seg.m-full   { background: var(--accent); opacity: 0.75; }

    /* Day labels */
    .mt-spacer { /* empty grid cell — fills col 1 */ }
    .mt-day-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      margin-top: 8px;
    }
    .mt-day-name {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--ink-3);
      text-align: center;
    }
    .mt-day-name.today { color: var(--ink); }
    .mt-day-name.peak  { color: var(--s4); font-weight: 800; }

    /* Legend — sits beneath the chart with a clear gap */
    .mt-legend {
      display: flex;
      gap: 20px;
      margin-top: 24px;
      flex-wrap: wrap;
      align-items: center;
    }
    .mt-legend-item {
      display: flex;
      align-items: center;
      gap: 7px;
      font-family: var(--sans);
      font-size: 11px;
      color: var(--ink-2);
    }
    .mt-legend-swatch {
      width: 18px;
      height: 9px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .mt-swatch-pollen  { background: var(--s3); }
    .mt-swatch-build   { background: rgba(46,94,46,0.28); }
    .mt-swatch-full    { background: var(--accent); opacity: 0.75; }

    /* Action copy — separated from chart block by a rule */
    .mt-action {
      margin-top: 32px;
      padding-top: 28px;
      border-top: 1px solid var(--rule-soft);
      font-family: var(--sans);
      font-size: 14px;
      color: var(--ink);
      line-height: 1.7;
      max-width: 600px;
    }
    .mt-action strong { color: var(--accent); }
    .mt-action.urgent strong { color: var(--s4); }

    .mt-note {
      margin-top: 16px;
      font-family: var(--sans);
      font-size: 11px;
      color: var(--ink-3);
      line-height: 1.65;
      max-width: 600px;
    }
    .mt-note a { color: var(--ink-3); text-decoration: underline; }
    .mt-note a:hover { color: var(--ink); }

    /* ── MODAL ── */
    .modal-ov {
      display: none; position: fixed; inset: 0;
      background: rgba(26,26,26,0.72); z-index: 600;
      justify-content: center; align-items: flex-start;
      padding: 48px 20px; overflow-y: auto;
    }
    .modal-ov.on { display: flex; }
    .modal {
      background: var(--paper); color: var(--ink);
      max-width: 560px; width: 100%;
      padding: 40px 36px 44px;
      position: relative;
      border: 1px solid var(--ink);
    }
    .modal-x {
      position: absolute; top: 12px; right: 16px;
      background: none; border: none;
      font-size: 22px; cursor: pointer; color: var(--ink-2);
    }
    .modal-x:hover { color: var(--ink); }
    .modal h1 { font-family: var(--serif); font-size: 28px; font-weight: 700; margin-bottom: 4px; }
    .modal-date { font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }
    .modal h2 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin-top: 22px; margin-bottom: 6px; }
    .modal p, .modal li { font-family: var(--serif); font-size: 14px; line-height: 1.65; color: var(--ink-2); margin-bottom: 6px; }
    .modal ul { padding-left: 18px; }

    /* ── NATIONAL POLLEN MAP ── */
    .natmap {
      width: 100%;
      margin-bottom: 16px;
      min-height: 320px;
      position: relative;
    }
    .natmap svg { display: block; width: 100%; height: auto; }
    .nm-state {
      fill: rgba(26,32,24,0.07);
      stroke: var(--paper);
      stroke-width: 0.7;
      cursor: default;
      transition: opacity 0.12s;
    }
    .nm-state:hover { opacity: 0.72; }
    .nm-state.s1 { fill: var(--s1); }
    .nm-state.s2 { fill: var(--s2); }
    .nm-state.s3 { fill: var(--s3); }
    .nm-state.s4 { fill: var(--s4); }
    .nm-state.s5 { fill: var(--s5); }
    .nm-state.nm-has-page:not(.nm-user) {
      stroke: var(--accent-2, var(--accent));
      stroke-width: 1.4;
      cursor: pointer;
    }
    .nm-state.nm-user {
      stroke: var(--ink);
      stroke-width: 2.5;
      stroke-linejoin: round;
    }
    .nm-tooltip {
      position: fixed;
      pointer-events: none;
      background: var(--ink);
      color: var(--paper);
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      padding: 5px 11px;
      border-radius: 2px;
      z-index: 200;
      display: flex;
      gap: 8px;
      align-items: center;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    }
    .nm-tooltip[hidden] { display: none; }
    .nm-tip-level { color: rgba(243,245,240,0.58); font-weight: 400; }
    .nm-tip-guide { color: var(--accent); font-size: 10px; font-weight: 500; }
    .nm-co-divider { stroke: rgba(26,32,24,0.18); stroke-width: 1; stroke-dasharray: 3 3; }
    .nm-co-line { fill: none; stroke: rgba(26,32,24,0.22); stroke-width: 0.75; stroke-dasharray: 3 2; }
    .nm-co-box {
      fill: rgba(26,32,24,0.07);
      stroke: rgba(26,32,24,0.20);
      stroke-width: 0.75;
      cursor: default;
      transition: opacity 0.12s;
    }
    .nm-co-box:hover { opacity: 0.72; }
    .nm-co-box.s1 { fill: var(--s1); stroke: transparent; }
    .nm-co-box.s2 { fill: var(--s2); stroke: transparent; }
    .nm-co-box.s3 { fill: var(--s3); stroke: transparent; }
    .nm-co-box.s4 { fill: var(--s4); stroke: transparent; }
    .nm-co-box.s5 { fill: var(--s5); stroke: transparent; }
    .nm-co-box.nm-user { stroke: var(--ink); stroke-width: 1.5; }
    .nm-co-box.nm-has-page:not(.nm-user) { stroke: var(--accent); stroke-width: 1.2; cursor: pointer; }
    .nm-co-text {
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 600;
      fill: var(--ink);
      text-anchor: middle;
      pointer-events: none;
      letter-spacing: 0.02em;
    }
    .nm-co-text.nm-user { font-weight: 700; }
    .natmap-meta {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .natmap-legend {
      display: flex;
      gap: 14px;
      align-items: center;
      flex-wrap: wrap;
    }
    .nm-leg {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      color: var(--ink-3);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .nm-leg::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 1px;
      flex-shrink: 0;
    }
    .nm-leg-0::before { background: rgba(26,32,24,0.07); border: 1px solid rgba(26,32,24,0.15); }
    .nm-leg-1::before { background: var(--s1); }
    .nm-leg-2::before { background: var(--s2); }
    .nm-leg-3::before { background: var(--s3); }
    .nm-leg-4::before { background: var(--s4); }
    .nm-leg-5::before { background: var(--s5); }
    .natmap-note {
      font-family: var(--sans);
      font-size: 11px;
      color: var(--ink-3);
      line-height: 1.55;
      flex: 1;
      max-width: 360px;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 680px) {
      .shell { padding: 0 22px; }
      .section { padding: 44px 0; }
      .hero { padding: 56px 0 48px; }
      .masthead { padding: 22px 0 16px; }
      .mast-date { order: 3; flex-basis: 100%; }

      .sc-notes { grid-template-columns: 1fr; gap: 22px; }
      .actions { grid-template-columns: 1fr; gap: 28px; }
      .forecast { gap: 5px; }
      .fc-bar-wrap { height: 130px; }
      .drv-desc { display: none; }
      .drv-ill { width: 32px; height: 32px; }
      .drv-head { gap: 12px; }
      .drivers td { padding: 18px 0; }
      .drv-idx-cell { padding-right: 12px; }
      .sc-row { grid-template-columns: 44px 1fr; gap: 10px; }
      .sc-today { left: 44px; }
      .sc-months { grid-template-columns: 44px 1fr; gap: 10px; }
    }
    @media (max-width: 420px) {
      .sc-months-inner span:nth-child(even) { opacity: 0.45; }
    }

/* Ad slots hidden until AdSense is connected */
.ad-slot { display: none !important; }