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

    /* ── TOKENS — RSV site: warm teal + terracotta ── */
    :root {
      --paper:      #f8f7f5;
      --bg:         #f8f7f5;
      --ink:        #1a1c1b;   /* deep warm black                                 */
      --ink-2:      #2e3b38;   /* mid warm teal-gray                             */
      --ink-3:      #6e8480;   /* muted teal-gray                                */
      --rule-soft:    rgba(26,28,27,0.16);
      --rule-faint:   rgba(26,28,27,0.09);
      --rule-section: rgba(26,28,27,0.80);

      --accent:      #2e7a73;   /* warm teal — health, trust, calm               */
      --accent-soft: rgba(46,122,115,0.12);
      --accent-2:    #c46d2e;   /* terracotta — warmth, urgency, matches illustrations */
      --accent-2-soft: rgba(196,109,46,0.14);

      /* RSV activity severity palette */
      --s0: #c8c0bc;   /* none      — warm gray                          */
      --s1: #88b0aa;   /* very low  — pale teal                          */
      --s2: #3e9e94;   /* low       — teal                               */
      --s3: #c9a227;   /* moderate  — amber                              */
      --s4: #c86820;   /* high      — orange                             */
      --s5: #a01828;   /* very high — deep 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; }

    .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;
      color: var(--ink);
    }
    .mast-date {
      font-family: var(--sans);
      font-style: italic;
      font-size: 14px;
      color: var(--ink-2);
      flex: 1;
      text-align: center;
    }
    .mast-nav { display: flex; gap: 24px; }
    .mast-btn {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-2);
      transition: color 0.15s;
    }
    .mast-btn:hover { color: var(--accent); }

    /* ── HERO — full viewport width ── */
    .hero {
      position: relative;
      min-height: 480px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    /* Illustration: fills the right 58% of the viewport */
    .hero-illustration {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 58%;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    /* Fade left edge smoothly into page background */
    .hero-illustration::before {
      content: '';
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 45%;
      background: linear-gradient(to right, var(--paper) 0%, transparent 100%);
      z-index: 2;
    }
    /* Crossfade layers — both absolutely positioned within illustration container */
    .hero-img {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      height: auto;
      display: block;
      transition: opacity 1.8s ease-in-out;
      opacity: 0;
    }
    .hero-img--active { opacity: 1; }

    /* Content: centered like the shell, text constrained to left */
    .hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 880px;
      margin: 0 auto;
      padding: 72px 36px 64px;
    }
    .hero-eyebrow,
    .hero-q,
    .answer,
    .qualifier,
    .loc-line,
    .hero-loc-bar,
    .hero-severity-bar {
      max-width: 420px;
    }
    .hero-eyebrow {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--accent-2);
      margin-bottom: 16px;
      min-height: 14px;
      transition: opacity 0.5s ease;
    }
    .hero-eyebrow.fading { opacity: 0; }
    .hero-q {
      font-family: var(--serif);
      font-size: clamp(32px, 4.5vw, 52px);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .answer {
      font-family: var(--serif);
      font-size: clamp(64px, 10vw, 108px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.02em;
      margin: 8px 0 16px;
    }
    .answer.yes  { color: var(--s4); }
    .answer.no   { color: var(--accent); }
    .answer.loading { color: var(--ink-3); }
    .dot { animation: blink 1.2s infinite; }
    .dot:nth-child(2) { animation-delay: 0.2s; }
    .dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes blink { 0%,80%,100%{opacity:0.2} 40%{opacity:1} }

    .qualifier {
      font-family: var(--sans);
      font-size: 16px;
      color: var(--ink-2);
      margin-bottom: 6px;
    }
    .qualifier.loading { color: var(--ink-3); min-height: 20px; }

    .loc-line {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--ink-3);
      margin-bottom: 14px;
    }
    .hero-loc-bar { margin-bottom: 20px; }
    .hero-loc-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .hero-loc-input {
      background: transparent;
      border: none;
      border-bottom: 1.5px solid var(--rule-soft);
      font-family: var(--sans);
      font-size: 14px;
      color: var(--ink-2);
      padding: 4px 24px 5px 0;
      width: 220px;
      outline: none;
      transition: border-color 0.15s, color 0.15s;
    }
    .hero-loc-input::placeholder { color: var(--ink-3); }
    .hero-loc-input:focus {
      border-bottom-color: var(--accent);
      color: var(--ink);
    }
    .hero-loc-input:focus + .hero-loc-pencil { opacity: 0; pointer-events: none; }
    .hero-loc-input:disabled { color: var(--ink-3); font-style: italic; }
    .hero-loc-pencil {
      position: absolute;
      right: 2px;
      bottom: 6px;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      font-size: 13px;
      color: var(--ink-3);
      line-height: 1;
      transition: opacity 0.15s, color 0.15s;
    }
    .hero-loc-pencil:hover { color: var(--accent); }
    .hero-loc-error {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--accent-2);
      margin-top: 4px;
      min-height: 16px;
    }
    .hero-severity-bar { margin-top: 4px; }

    /* Mobile: stack vertically, hide illustration */
    @media (max-width: 600px) {
      .hero { min-height: auto; }
      .hero-illustration { display: none; }
      .hero-content { padding: 48px 24px 40px; }
      .hero-eyebrow, .hero-q, .answer, .qualifier,
      .loc-line, .hero-loc-bar, .hero-severity-bar { max-width: 100%; }
    }

    /* ── ACTIVITY METER ── */
    .hbid {
      border-top: 1.5px solid var(--rule-soft);
      padding: 36px 0 28px;
    }
    .hbid-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 18px;
    }
    .hbid-eyebrow {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .hbid-severity {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 700;
    }
    .hbid-meter {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
    }
    .hbid-meter-seg {
      flex: 1;
      height: 8px;
      border-radius: 2px;
      background: var(--rule-faint);
      transition: background 0.4s;
    }
    .hbid-meter-seg.active-1 { background: var(--s1); }
    .hbid-meter-seg.active-2 { background: var(--s2); }
    .hbid-meter-seg.active-3 { background: var(--s3); }
    .hbid-meter-seg.active-4 { background: var(--s4); }
    .hbid-meter-seg.active-5 { background: var(--s5); }

    .hbid-sentence {
      font-size: 17px;
      color: var(--ink-2);
      margin-bottom: 10px;
      line-height: 1.5;
    }
    .hbid-decision {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 16px;
    }
    .hbid-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
    .hbid-tag {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      background: var(--accent-soft);
      color: var(--accent);
    }
    .hbid-tag.warn { background: var(--accent-2-soft); color: var(--accent-2); }

    /* ── REGION LIST ── */
    .region-summary {
      font-size: 16px;
      color: var(--ink-2);
      margin-bottom: 14px;
    }
    .region-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 8px;
      margin-bottom: 20px;
    }
    .region-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid var(--rule-faint);
      border-radius: 6px;
      background: white;
    }
    .region-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .region-name { font-family: var(--sans); font-size: 13px; color: var(--ink); }
    .region-label { font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-left: auto; }
    .region-note {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--ink-3);
    }

    /* ── AFFILIATE RECS ── */
    .hbid-recs {
      border-top: 1px solid var(--rule-faint);
      padding-top: 20px;
      margin-top: 20px;
    }
    .hbid-recs-label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 14px;
    }
    .hbid-recs-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 10px;
    }
    .rec-card {
      border: 1px solid var(--rule-soft);
      border-radius: 8px;
      padding: 14px;
      background: white;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .rec-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .rec-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 4px;
    }
    .rec-title {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 6px;
      line-height: 1.35;
    }
    .rec-link {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--accent);
      font-weight: 600;
      display: inline-block;
    }
    .rec-link:hover { text-decoration: underline; }
    .hbid-recs-disclosure {
      font-family: var(--sans);
      font-size: 11px;
      color: var(--ink-3);
    }

    /* ── SECTIONS ── */
    .section {
      border-top: 1.5px solid var(--rule-soft);
      padding: 40px 0 28px;
    }
    .section-head {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 20px;
      display: flex;
      align-items: baseline;
      gap: 14px;
    }
    .section-num {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      padding: 3px 8px;
      border: 1.5px solid var(--accent);
      border-radius: 3px;
      flex-shrink: 0;
    }
    .section-sub {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 400;
      color: var(--ink-3);
    }

    /* ── RISK GROUPS ── */
    .risk-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
      margin-bottom: 20px;
    }
    .risk-card {
      border: 1.5px solid var(--rule-soft);
      border-radius: 8px;
      padding: 18px 20px;
      background: white;
    }
    .risk-card.high { border-color: var(--accent-2); background: var(--accent-2-soft); }
    .risk-icon { font-size: 22px; margin-bottom: 8px; }
    .risk-title {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px;
    }
    .risk-body {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.45;
    }

    /* ── IMMUNIZATION SECTION ── */
    .immuno-split {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      align-items: start;
    }
    .immuno-illustration {
      width: clamp(100px, 15vw, 160px);
      align-self: center;
    }
    .immuno-illustration img {
      width: 100%;
      height: auto;
      display: block;
      mix-blend-mode: multiply;
      border-radius: 4px;
      opacity: 0.9;
    }
    .immuno-cards { display: flex; flex-direction: column; gap: 14px; }
    .immuno-card {
      border: 1.5px solid var(--rule-soft);
      border-radius: 8px;
      padding: 16px 20px;
      background: white;
      position: relative;
    }
    .immuno-card.primary { border-color: var(--accent); }
    .immuno-badge {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 6px;
    }
    .immuno-card.secondary .immuno-badge { color: var(--accent-2); }
    .immuno-title {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .immuno-body {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.5;
    }
    .immuno-timing {
      display: inline-block;
      margin-top: 8px;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      background: var(--accent-soft);
      padding: 3px 10px;
      border-radius: 20px;
    }
    .immuno-card.secondary .immuno-timing { color: var(--accent-2); background: var(--accent-2-soft); }

    /* ── SYMPTOMS / TRIAGE ── */
    .symptom-split {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: start;
      margin-bottom: 24px;
    }
    .symptom-illustration {
      width: clamp(80px, 12vw, 130px);
    }
    .symptom-illustration img {
      width: 100%;
      height: auto;
      display: block;
      mix-blend-mode: multiply;
      opacity: 0.88;
    }
    .triage-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .triage-row {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 12px;
      align-items: start;
      padding: 12px 16px;
      border-radius: 8px;
      border: 1px solid var(--rule-faint);
      background: white;
    }
    .triage-row.urgent { border-color: var(--s4); background: rgba(200,104,32,0.04); }
    .triage-row.emergency { border-color: var(--s5); background: rgba(160,24,40,0.05); }
    .triage-icon { font-size: 16px; padding-top: 1px; }
    .triage-title {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 2px;
    }
    .triage-body {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--ink-2);
      line-height: 1.45;
    }

    /* ── HOME CARE / AFFILIATE ── */
    .actions {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }
    .action {
      border: 1px solid var(--rule-soft);
      border-radius: 8px;
      padding: 16px 18px;
      background: white;
    }
    .action-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 6px;
    }
    .action-title {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 10px;
      line-height: 1.4;
    }
    .action-links { display: flex; flex-direction: column; gap: 5px; }
    .action-link {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--accent);
      font-weight: 600;
      transition: color 0.15s;
    }
    .action-link:hover { color: var(--accent-2); }

    /* ── HOME CARE ILLUSTRATION ── */
    .homecare-split {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: start;
    }
    .homecare-illustration {
      width: clamp(80px, 12vw, 130px);
    }
    .homecare-illustration img {
      width: 100%;
      height: auto;
      display: block;
      mix-blend-mode: multiply;
      opacity: 0.9;
    }

    /* ── AD SLOT ── */
    .ad-slot {
      border-top: 1px solid var(--rule-faint);
      border-bottom: 1px solid var(--rule-faint);
      padding: 20px 0;
      margin: 16px 0;
      text-align: center;
    }
    .ad-slot-label {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 6px;
    }
    .ad-unit {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--ink-3);
      padding: 18px 0;
      background: var(--rule-faint);
      border-radius: 4px;
    }

    /* ── ALERT / EMAIL CAPTURE ── */
    .coming-soon {
      border-top: 1.5px solid var(--rule-soft);
      padding: 40px 0;
    }
    .cs-inner {
      max-width: 520px;
    }
    .cs-eyebrow {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .cs-badge {
      background: var(--accent-soft);
      color: var(--accent);
      padding: 2px 8px;
      border-radius: 20px;
      font-size: 10px;
    }
    .cs-title {
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 12px;
    }
    .cs-body {
      font-size: 15px;
      color: var(--ink-2);
      margin-bottom: 20px;
      line-height: 1.55;
    }
    .cs-form {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .cs-input {
      font-family: var(--sans);
      font-size: 14px;
      padding: 10px 14px;
      border: 1.5px solid var(--rule-soft);
      border-radius: 6px;
      background: white;
      color: var(--ink);
      flex: 1;
      min-width: 200px;
      outline: none;
    }
    .cs-input:focus { border-color: var(--accent); }
    .cs-btn {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 700;
      padding: 10px 20px;
      background: var(--accent);
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s;
    }
    .cs-btn:hover { background: #256860; }
    .cs-btn:disabled { opacity: 0.5; cursor: default; }
    .cs-note {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 10px;
    }
    .cs-success {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 600;
      color: var(--accent);
      padding: 10px 0;
    }

    /* ── DOCTOR CTA ── */
    .doctor-cta {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 20px 24px;
      border: 1.5px solid var(--accent);
      border-radius: 10px;
      background: var(--accent-soft);
      margin-top: 24px;
    }
    .doctor-cta-illustration {
      width: 80px;
      flex-shrink: 0;
    }
    .doctor-cta-illustration img {
      width: 100%;
      height: auto;
      display: block;
      mix-blend-mode: multiply;
    }
    .doctor-cta-text {
      font-family: var(--sans);
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.5;
    }
    .doctor-cta-text strong { color: var(--ink); }

    /* ── FOOTER ── */
    footer {
      border-top: 1.5px solid var(--rule-soft);
      padding: 28px 0 40px;
      margin-top: 20px;
    }
    .ft-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 14px;
    }
    .ft-nav a {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--ink-2);
    }
    .ft-nav a:hover { color: var(--accent); }
    .ft-also {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--ink-3);
      margin-bottom: 12px;
    }
    .ft-also a { border-bottom: 1px solid var(--rule-faint); }
    .ft-also a:hover { color: var(--accent); }
    .ft-meta {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--ink-3);
      line-height: 1.6;
    }

    /* ── PROSE PAGES ── */
    .page { padding: 40px 0; }
    .page-eyebrow {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 10px;
    }
    .page h1 {
      font-family: var(--serif);
      font-size: clamp(26px, 4vw, 38px);
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }
    .page-meta {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--ink-3);
      margin-bottom: 32px;
      border-bottom: 1px solid var(--rule-faint);
      padding-bottom: 20px;
    }
    .page h2 {
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 700;
      color: var(--ink);
      margin: 32px 0 12px;
    }
    .page h3 {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      margin: 20px 0 8px;
    }
    .page p {
      font-size: 16px;
      line-height: 1.65;
      color: var(--ink-2);
      margin-bottom: 16px;
    }
    .page ul, .page ol {
      margin: 0 0 16px 24px;
    }
    .page li {
      font-size: 16px;
      line-height: 1.65;
      color: var(--ink-2);
      margin-bottom: 6px;
    }
    .page .callout {
      border-left: 3px solid var(--accent);
      padding: 14px 18px;
      background: var(--accent-soft);
      border-radius: 0 6px 6px 0;
      margin: 20px 0;
    }
    .page .callout p { margin: 0; font-size: 15px; }
    .page .warning {
      border-left: 3px solid var(--s4);
      padding: 14px 18px;
      background: rgba(200,104,32,0.06);
      border-radius: 0 6px 6px 0;
      margin: 20px 0;
    }
    .page .warning p { margin: 0; font-size: 15px; }

    /* ── GUIDES INDEX ── */
    .guides-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-top: 24px;
    }
    .guide-card {
      border: 1px solid var(--rule-soft);
      border-radius: 8px;
      padding: 20px 22px;
      background: white;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .guide-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .guide-cat {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 6px;
    }
    .guide-title {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px;
      line-height: 1.3;
    }
    .guide-blurb {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.5;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 620px) {
      .shell { padding: 0 20px; }
      .hero {
        grid-template-columns: 1fr;
        padding: 40px 0 28px;
      }
      .hero-illustration { display: none; }
      .immuno-split { grid-template-columns: 1fr; }
      .immuno-illustration { display: none; }
      .symptom-split { grid-template-columns: 1fr; }
      .symptom-illustration { display: none; }
      .homecare-split { grid-template-columns: 1fr; }
      .homecare-illustration { display: none; }
      .doctor-cta { flex-direction: column; }
      .mast-date { display: none; }
      .hbid-meter-seg { height: 6px; }
    }