*, *::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); }

    /* ── HERO ── */
    .hero {
      padding: 78px 0 68px;
      text-align: center;
      border-bottom: 1px solid var(--rule-section);
    }
    .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: 22px 24px 20px;
      border: 1px solid var(--rule-section, rgba(0,0,0,0.08));
      border-left: 6px solid var(--s1);
      border-radius: 4px;
      background: #fff;
    }
    .hbid[hidden] { display: none; }
    .hbid.lvl0 { border-left-color: var(--s2); }
    .hbid.lvl1 { border-left-color: var(--s3); }
    .hbid.lvl2 { border-left-color: var(--s4); }
    .hbid.lvl3 { border-left-color: var(--s5); }
    .hbid.lvl4 { border-left-color: var(--s5); background: #fff7f6; }

    .hbid-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 10px;
    }
    .hbid-eyebrow {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .hbid-severity {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 22px;
      color: var(--ink);
    }
    .hbid.lvl2 .hbid-severity { color: var(--s4); }
    .hbid.lvl3 .hbid-severity,
    .hbid.lvl4 .hbid-severity { color: var(--s5); }

    .hbid-sentence {
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.5;
      color: var(--ink-2);
      margin: 0 0 12px;
    }
    .hbid-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .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.04);
      border-radius: 3px;
      padding: 4px 8px;
    }

    /* Decision authority line */
    .hbid-decision {
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.45;
      color: var(--ink);
      margin: 0 0 14px;
    }
    .hbid.lvl2 .hbid-decision { color: var(--s4); }
    .hbid.lvl3 .hbid-decision,
    .hbid.lvl4 .hbid-decision { color: var(--s5); }

    /* Affiliate product recs — compact inline treatment */
    .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);
    }

    /* ── 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;
    }
    .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;
    }

    /* ── 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;
    }

    /* ── 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; }

    /* ── REGIONAL MAP (Leaflet + CartoDB Positron tiles) ── */
    .map-wrap {
      position: relative;
      border: 1px solid var(--rule-soft);
      background: var(--paper);
      border-radius: 2px;
      overflow: hidden;
    }
    .map-leaflet {
      width: 100%;
      height: 460px;
      background: var(--paper);
    }
    /* Nudge tile contrast up so state lines, roads, and labels read cleanly */
    .map-leaflet .leaflet-tile-pane { filter: saturate(1.08) contrast(1.14) brightness(0.96); }
    .map-leaflet .leaflet-control-attribution {
      font-family: 'Inter', sans-serif;
      font-size: 9px;
      background: rgba(248,249,246,0.92);
      color: var(--ink-3);
      padding: 2px 6px;
    }
    .map-leaflet .leaflet-control-attribution a { color: var(--ink-2); }
    .map-leaflet .leaflet-control-zoom a {
      background: var(--paper);
      color: var(--ink-2);
      border: 1px solid var(--rule-soft);
      font-family: 'Inter', sans-serif;
      font-weight: 600;
    }
    .map-leaflet .leaflet-control-zoom a:hover { background: #fff; color: var(--ink); }

    /* User pin — divIcon */
    .user-pin { position: relative; }
    .user-pin-dot {
      position: absolute; left: -8px; top: -8px;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: var(--pin-color, var(--ink-3));
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
    }
    .user-pin-ring {
      position: absolute; left: -19px; top: -19px;
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 2px solid var(--pin-color, var(--ink-3));
      opacity: 0.4;
      animation: user-pulse 2.6s ease-in-out infinite;
    }
    @keyframes user-pulse {
      0%, 100% { opacity: 0.4; transform: scale(1); }
      50%      { opacity: 0.15; transform: scale(1.25); }
    }
    .user-pin-label {
      position: absolute; left: 16px; top: -14px;
      white-space: nowrap;
      pointer-events: none;
      padding: 4px 9px 5px;
      background: rgba(255,255,255,0.92);
      border: 1px solid var(--rule-soft);
      border-radius: 2px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .user-pin-label strong {
      display: block;
      font-family: 'Source Serif 4', Georgia, serif;
      font-weight: 700;
      font-size: 14px;
      color: var(--ink);
      line-height: 1.1;
    }
    .user-pin-label span {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--pin-color, var(--ink-3));
      margin-top: 2px;
    }
    /* If user pin is near right edge, flip label to the left side */
    .user-pin.flip .user-pin-label { left: auto; right: 16px; text-align: right; }

    /* City markers */
    .city-marker { position: relative; }
    .city-dot {
      position: absolute; left: -3.5px; top: -3.5px;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--ink);
      opacity: 0.85;
      box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
    }
    .city-label {
      position: absolute; left: 9px; top: -8px;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--ink);
      opacity: 1;
      white-space: nowrap;
      text-shadow:
        -1px -1px 0 #fff,  1px -1px 0 #fff,
        -1px  1px 0 #fff,  1px  1px 0 #fff,
         0   -1px 0 #fff,  0    1px 0 #fff,
        -1px  0   0 #fff,  1px  0   0 #fff,
         0 0 4px rgba(255,255,255,0.9);
      pointer-events: none;
    }

    /* Fallback state */
    .map-unavailable {
      height: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
    }
    .map-unavailable-title {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .map-unavailable-sub {
      font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      font-size: 14px;
      color: var(--ink-3);
      max-width: 360px;
    }

    .map-meta {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: end;
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid var(--rule-faint);
    }
    .map-note {
      font-family: var(--serif);
      font-style: italic;
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.5;
      max-width: 500px;
    }

    .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 a { color: var(--ink-2); border-bottom: 1px solid var(--rule-soft); }
    .ft-meta a:hover { color: var(--ink); }

    /* ── 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); }

    /* ── 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; }

    /* ── 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; }
    }