/* ============================================================
     HPN site palette — aligned with the 2023 HPN Brand Style Guide
     (23RLAMACB004EN01_Style Guide 2023s.pdf).
     Primary "Regal blue" #0075C0 / dark #005A99 / ink #003D66, with
     light / lighter / lightest tints (#7ABEE6, #C1E0F2, #E1F4FD).
     Gold (#d4a437) is reserved for Founder / Philanthropy / Merkin
     Prize moments only. Inter is the body + heading face; JetBrains
     Mono is scoped to <code> spans on regulatory pages.
     ============================================================ */
  :root {
    /* Regal-blue palette — aligned with 2023 Heritage style guide */
    --teal-900:#003D66;   /* darkest blue — hover/active, deep section bg */
    --teal-800:#005A99;   /* dark blue — section dividers, body headings */
    --teal-700:#0075C0;   /* primary Regal blue — headlines, primary buttons, links (PMS 2935C-ish) */
    --teal-100:#C1E0F2;   /* light blue accent */
    --teal-50:#E1F4FD;    /* pale-blue band background (brand book primary bg) */
    --clay:#d4a437;       /* gold — Founder / Philanthropy / Merkin Prize only */
    --clay-dark:#a8841a;
    --sand:#f5f8fc;       /* cool off-white */
    --paper:#ffffff;
    --ink-900:#0d0d0d;    /* dark grey body text (was pure near-black) */
    --ink-700:#2a3345;
    --ink-500:#5d6778;
    --ink-300:#a0aaba;
    --ink-100:#dde3eb;
    --good:#18b677;
    --warn:#c69216;
    --cyan:#7ABEE6;       /* light blue accent (PMS 297C-ish) */
    --cyan-700:#0075C0;   /* same as primary Regal */
    --cyan-glow:rgba(0,117,192,.35);
    --shadow: 0 2px 8px rgba(5,9,15,.08), 0 12px 32px rgba(5,9,15,.12);
    --shadow-lg: 0 6px 24px rgba(5,9,15,.14), 0 24px 60px rgba(5,9,15,.2);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    /* ---- Spacing scale (2026-07-02) ----------------------------------
       One rhythm for the whole site. Component gaps and the .mt-*/.mb-*
       utilities below all reference these — change a step here and it moves
       everywhere. Two working values do most of the work:
         --space-5 (1.5rem) = a grid/block sitting under its section heading
         --space-6 (2rem)   = a larger structural break (doors, feature panels)
       Prefer a --space-N var (or an .mt-N/.mb-N utility) over a raw rem in
       new content, so spacing stays on the scale. */
    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.5rem;
    --space-6:2rem;
    --space-7:3rem;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--sand);color:var(--ink-900);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative}
  /* Mobile safety nets: keep images fluid and never allow the page itself to
     scroll horizontally. overflow-x:clip (not :hidden) so it does NOT create a
     scroll container that would break the sticky header. */
  img{max-width:100%;height:auto}
  body{overflow-x:clip}
  /* Site-wide science grid — very faint, always present */
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
    background-image:
      linear-gradient(to right, rgba(0,117,192,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0,117,192,.05) 1px, transparent 1px);
    background-size:48px 48px}
  a{color:var(--cyan-700);text-decoration:none}
  a:hover{text-decoration:underline;color:var(--cyan-700)}
  h1,h2,h3,h4{font-family:'Inter','Helvetica Neue',sans-serif;letter-spacing:-.02em;margin:0 0 .4em;color:var(--ink-900);font-weight:600}
  code,.mono{font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:.9em}
  h1{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.08;font-weight:600}
  h2{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15;font-weight:600}
  h3{font-size:1.3rem;line-height:1.25;font-weight:600}
  p{margin:0 0 1em;color:var(--ink-700)}
  .eyebrow{font-family:'Inter','Helvetica Neue',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-700)}
  .eyebrow::before{content:"// ";opacity:.55}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
  .btn{display:inline-flex;align-items:center;gap:.55rem;padding:.82rem 1.35rem;border-radius:999px;font-weight:600;border:1px solid transparent;cursor:pointer;font-size:.95rem;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background .2s ease,border-color .2s ease;text-decoration:none;letter-spacing:.005em;position:relative;isolation:isolate}
  .btn::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 -1px 0 rgba(0,0,0,.08) inset;pointer-events:none}
  .btn:hover{text-decoration:none;transform:translateY(-1.5px)}
  .btn:focus-visible{outline:3px solid var(--teal-100);outline-offset:2px}
  /* Primary button — cyan with subtle glow for tech/science feel */
  .btn-primary{background:linear-gradient(180deg,#0075C0 0%,#005A99 55%,#003D66 100%);color:#fff;box-shadow:0 1px 2px rgba(0,90,153,.3),0 6px 18px -6px rgba(0,117,192,.55),0 0 0 1px rgba(0,117,192,.15) inset;font-weight:700}
  .btn-primary:hover{color:#fff;box-shadow:0 2px 4px rgba(0,90,153,.35),0 14px 30px -6px rgba(0,117,192,.8),0 0 0 1px rgba(0,117,192,.25) inset;background:linear-gradient(180deg,#1F8FCC 0%,#0066AD 55%,#004A80 100%)}
  /* Accent button — bright safety orange */
  .btn-accent{background:linear-gradient(180deg,#f0c662 0%,var(--clay) 55%,var(--clay-dark) 100%);color:#fff;box-shadow:0 1px 2px rgba(168,132,26,.35),0 6px 18px -6px rgba(212,164,55,.6)}
  .btn-accent:hover{box-shadow:0 2px 4px rgba(168,132,26,.45),0 14px 30px -6px rgba(212,164,55,.85);background:linear-gradient(180deg,#f5d182 0%,#e0b248 55%,#95721a 100%)}
  .btn-ghost{background:#fff;color:var(--teal-800);border-color:var(--teal-100);box-shadow:0 1px 2px rgba(0,61,102,.04)}
  .btn-ghost:hover{background:var(--teal-50);border-color:var(--teal-700);box-shadow:0 2px 4px rgba(0,61,102,.08)}
  .btn-light{background:#fff;color:var(--teal-800);border-color:var(--ink-100)}
  .btn-lg{padding:1rem 1.6rem;font-size:1rem}
  .btn .arrow{display:inline-block;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
  .btn:hover .arrow{transform:translateX(3px)}

  /* ---------- Nav ---------- */
  header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--ink-100)}
  .nav{display:flex;align-items:center;gap:1rem;height:66px;white-space:nowrap}
  .brand{display:flex;align-items:center;gap:.7rem;font-weight:800;color:var(--teal-900);font-size:1.05rem;flex-shrink:0}
  .brand img.logo{height:26px;width:auto;display:block}
  footer.site .brand img.logo{height:38px;filter:brightness(0) invert(1) opacity(.95)}
  .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.1rem;flex:1;align-items:center;min-width:0}
  .nav ul a{display:block;padding:.5rem .7rem;border-radius:8px;color:var(--ink-700);font-weight:500;font-size:.9rem;white-space:nowrap;line-height:1.2}
  .nav ul a:hover{background:var(--teal-50);color:var(--teal-900);text-decoration:none}
  .nav ul a.active{color:var(--teal-900);background:var(--teal-50)}

  .menu-btn{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--teal-900)}

  /* Responsive: collapse long middle nav earlier so buttons stay on one line */
  @media(max-width:1040px){.nav ul{display:none}.menu-btn{display:block}}
  @media(max-width:640px){.brand img.logo{height:22px}}

  /* ---------- Pages (routing) ---------- */
  .page{display:none;animation:fade .25s ease}
  .page.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  /* ---------- Hero ---------- */
  .hero{background:#003D66;color:#fff;padding:56px 0 76px;position:relative;overflow:hidden;isolation:isolate}
  /* DNA helix + node-graph hero — Design C science aesthetic */
  .hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
    radial-gradient(1100px 700px at 85% 20%, rgba(0,117,192,.22), transparent 55%),
    radial-gradient(900px 700px at 12% 90%, rgba(212,164,55,.18), transparent 60%),
    linear-gradient(155deg,#003D66 0%,#005A99 60%,#0075C0 100%);
    pointer-events:none}
  /* Node-graph / molecular SVG pattern */
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.22;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%230075C0' stroke-width='.8' stroke-opacity='.7'><circle cx='60' cy='80' r='3' fill='%230075C0'/><circle cx='220' cy='60' r='3' fill='%230075C0'/><circle cx='140' cy='160' r='3' fill='%230075C0'/><circle cx='40' cy='220' r='3' fill='%230075C0'/><circle cx='260' cy='220' r='3' fill='%230075C0'/><circle cx='180' cy='280' r='3' fill='%230075C0'/><circle cx='80' cy='280' r='3' fill='%230075C0'/><line x1='60' y1='80' x2='140' y2='160'/><line x1='220' y1='60' x2='140' y2='160'/><line x1='140' y1='160' x2='40' y2='220'/><line x1='140' y1='160' x2='260' y2='220'/><line x1='40' y1='220' x2='80' y2='280'/><line x1='260' y1='220' x2='180' y2='280'/><line x1='80' y1='280' x2='180' y2='280'/><line x1='60' y1='80' x2='220' y2='60'/></g></svg>");
    background-size:360px 360px}
  /* EKG heartbeat line across the bottom of the hero */
  .hero-ekg{position:absolute;left:0;right:0;bottom:0;height:60px;z-index:-1;opacity:.45;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='60' viewBox='0 0 800 60'><path d='M0 30 L120 30 L140 30 L150 10 L160 50 L170 15 L180 30 L300 30 L320 30 L330 8 L340 52 L350 12 L360 30 L500 30 L520 30 L530 8 L540 52 L550 10 L560 30 L720 30 L740 30 L750 12 L760 48 L770 14 L780 30 L800 30' fill='none' stroke='%230075C0' stroke-width='1.8' stroke-linejoin='round'/></svg>");
    background-repeat:repeat-x;background-size:800px 60px}
  .hero .wrap{position:relative}
  .hero .eyebrow{color:#7ABEE6;display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:.4rem .85rem;border-radius:999px;backdrop-filter:blur(6px)}
  .hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 3px rgba(212,164,55,.25)}
  .hero h1{color:#fff;max-width:32ch;margin-top:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.1)}
  .hero p.lede{color:#C1E0F2;font-size:1.15rem;max-width:88ch;margin-top:.6rem;margin-bottom:0}
  .hero-search{background:#fff;border-radius:20px;padding:8px;box-shadow:0 10px 30px rgba(0,61,102,.25),0 30px 80px -20px rgba(0,61,102,.45);display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:4px;margin-top:1.8rem;max-width:980px;align-items:center;border:1px solid rgba(255,255,255,.6)}
  .hero-search label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);padding:8px 14px 0}
  .hero-search input,.hero-search select{border:0;outline:0;padding:4px 14px 14px;font-size:1rem;width:100%;background:transparent;font-family:inherit;color:var(--ink-900);font-weight:500}
  .hero-search .fld{border-right:1px solid var(--ink-100);padding:4px 0}
  .hero-search .fld:last-of-type{border-right:0}
  .hero-search button{height:52px;border-radius:12px;padding:0 24px;font-weight:700}
  @media(max-width:760px){.hero-search{grid-template-columns:1fr;gap:4px}.hero-search .fld{border-right:0;border-bottom:1px solid var(--ink-100)}.hero-search button{width:100%;margin-top:8px}}

  /* Brand swoosh — global Regal-blue arc on the home hero (brand fingerprint) */
  .hero-swoosh{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
  .hero-swoosh path{vector-effect:non-scaling-stroke}
  /* Pale-blue brand band (E1F4FD) — usable section background */
  section.band.brand-pale{background:var(--teal-50)}

  /* ---------- Audience doors ---------- */
  .doors{margin-top:var(--space-6);position:relative;z-index:5;padding-top:1.6rem;border-top:1px solid var(--ink-100)}
  .doors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:900px){.doors-grid{grid-template-columns:1fr}}
  .door{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:0 2px 6px rgba(0,61,102,.06),0 20px 50px -20px rgba(0,61,102,.22);border:1px solid rgba(0,61,102,.06);display:flex;flex-direction:column;gap:.5rem;min-height:170px;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .2s ease;position:relative;overflow:hidden;isolation:isolate}
  .door::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(212,164,55,0) 0%,rgba(212,164,55,0) 50%,rgba(212,164,55,.35) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s ease}
  .door:hover::before{opacity:1}
  .door:hover{transform:translateY(-4px);box-shadow:0 4px 10px rgba(0,61,102,.08),0 28px 60px -20px rgba(0,61,102,.35);border-color:transparent}
  .door .icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--teal-50),#fff);border:1px solid var(--teal-100);display:grid;place-items:center;color:var(--teal-800);box-shadow:0 1px 2px rgba(0,61,102,.04)}
  .door h3{margin:.2rem 0;font-size:1.2rem}
  .door p{margin:0;font-size:.95rem}
  .door .more{margin-top:auto;font-weight:600;color:var(--teal-800);display:flex;align-items:center;gap:.35rem;font-size:.92rem;padding-top:.6rem}
  .door:hover .more{color:var(--clay)}

  /* Trust strip */
  .trust{padding:28px 0 8px;background:#fff;border-top:1px solid var(--ink-100)}
  .trust .lbl{text-align:center;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500);margin-bottom:1rem}
  .trust .logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 40px;max-width:1000px;margin:0 auto}
  .trust .logos img{height:30px;width:auto;max-width:140px;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.7;transition:opacity .2s ease,filter .2s ease}
  .trust .logos img:hover{filter:grayscale(0) contrast(1);opacity:1}
  .trust .logos img.tall{height:40px}
  /* Research & Recognition variant — promoted to a full dark band with prominent heading */
  .trust.research{background:linear-gradient(135deg,var(--teal-900) 0%,var(--teal-800) 60%,var(--teal-700) 100%);border-top:0;padding:54px 0 60px;color:#fff;position:relative;overflow:hidden}
  .trust.research::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at top right,rgba(193,224,242,.10),transparent 55%),radial-gradient(ellipse at bottom left,rgba(212,164,55,.08),transparent 55%);pointer-events:none}
  .trust.research .wrap{position:relative;z-index:1;text-align:center}
  .trust.research .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-100);background:rgba(193,224,242,.08);border:1px solid rgba(193,224,242,.20);padding:.4rem .85rem;border-radius:999px;margin-bottom:1rem}
  .trust.research .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 3px rgba(212,164,55,.25)}
  .trust.research h2{color:#fff;font-family:'Inter','Helvetica Neue',sans-serif;font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 auto;max-width:24ch}
  .trust.research .lede{color:var(--teal-100);font-size:1rem;max-width:60ch;margin:.85rem auto 0;opacity:.92}
  .trust.research .marks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px;max-width:1100px;margin:2rem auto 0}
  .trust.research .mark{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.15rem;border:1px solid rgba(193,224,242,.22);border-radius:999px;background:rgba(255,255,255,.05);backdrop-filter:blur(6px);font-family:'Inter','Helvetica Neue',sans-serif;font-weight:600;font-size:.95rem;color:#fff;letter-spacing:-.005em;transition:background .2s,border-color .2s,transform .2s}
  .trust.research .mark:hover{background:rgba(255,255,255,.10);border-color:rgba(193,224,242,.45);transform:translateY(-2px)}
  .trust.research .mark .dot{width:7px;height:7px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 3px rgba(212,164,55,.22)}
  .trust.research .mark .src{font-family:'Inter','Helvetica Neue',sans-serif;font-size:.74rem;font-weight:500;color:var(--teal-100);letter-spacing:.02em;opacity:.85}
  @media(max-width:760px){.trust.research h2{font-size:1.55rem}.trust.research .marks{gap:10px}}

  /* Research strip — prominent Founder + Philanthropy CTAs */
  .research-cta{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1080px;margin:var(--space-6) auto 0}
  @media(max-width:760px){.research-cta{grid-template-columns:1fr}}
  .research-cta-card{display:flex;gap:18px;align-items:flex-start;padding:1.4rem 1.5rem;border-radius:18px;
    background:rgba(255,255,255,.06);border:1px solid rgba(193,224,242,.22);backdrop-filter:blur(8px);
    text-align:left;color:#fff;text-decoration:none;
    transition:background .25s,border-color .25s,transform .25s,box-shadow .25s}
  .research-cta-card:hover{background:rgba(255,255,255,.10);border-color:rgba(193,224,242,.45);transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
  .research-cta-icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(135deg,rgba(193,224,242,.18),rgba(212,164,55,.22));
    border:1px solid rgba(193,224,242,.30);color:#C1E0F2}
  .research-cta-body{flex:1;min-width:0}
  .research-cta-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);opacity:.95}
  .research-cta-card h3{margin:.35rem 0 .45rem;font-family:'Inter','Helvetica Neue',sans-serif;font-size:1.22rem;font-weight:700;letter-spacing:-.012em;color:#fff;line-height:1.2}
  .research-cta-card p{margin:0 0 .65rem;font-size:.92rem;line-height:1.5;color:var(--teal-100);opacity:.95}
  .research-cta-link{font-size:.88rem;font-weight:600;color:#C1E0F2;display:inline-flex;align-items:center;gap:.35rem}
  .research-cta-link .arrow{transition:transform .25s}
  .research-cta-card:hover .research-cta-link .arrow{transform:translateX(3px)}

  /* Group logo grid */
  .group-logos{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:var(--space-5)}
  @media(max-width:900px){.group-logos{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:540px){.group-logos{grid-template-columns:repeat(2,1fr)}}
  .group-tile{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);padding:20px;display:grid;place-items:center;min-height:100px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .group-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--teal-100)}
  .group-tile img{max-height:48px;max-width:100%;object-fit:contain}

  /* ---------- Sections ---------- */
  section.band{padding:52px 0;position:relative;overflow:hidden}
  /* Regular band — faint molecular hex lattice as ambient texture */
  section.band::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;z-index:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='162' viewBox='0 0 140 162'><g fill='none' stroke='%23005A99' stroke-width='1'><polygon points='70,9 122,39 122,99 70,129 18,99 18,39'/><circle cx='70' cy='69' r='4' fill='%23005A99' fill-opacity='.3'/><line x1='70' y1='9' x2='70' y2='33'/><line x1='122' y1='39' x2='101' y2='51'/><line x1='122' y1='99' x2='101' y2='87'/><line x1='70' y1='129' x2='70' y2='105'/><line x1='18' y1='99' x2='39' y2='87'/><line x1='18' y1='39' x2='39' y2='51'/></g></svg>");
    background-size:170px 200px;background-position:right 4% center;background-repeat:no-repeat;
  }
  section.band > *{position:relative;z-index:1}

  /* Alt band — DNA double-helix, stronger than the regular lattice */
  section.band.alt{
    background:var(--paper);
    position:relative;
  }
  section.band.alt::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;z-index:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='240' viewBox='0 0 120 240'><g fill='none' stroke='%23005A99' stroke-width='1.2'><path d='M30 0 Q60 30 90 60 Q60 90 30 120 Q60 150 90 180 Q60 210 30 240'/><path d='M90 0 Q60 30 30 60 Q60 90 90 120 Q60 150 30 180 Q60 210 90 240'/><line x1='34' y1='20' x2='86' y2='20'/><line x1='50' y1='40' x2='70' y2='40'/><line x1='34' y1='60' x2='86' y2='60'/><line x1='50' y1='80' x2='70' y2='80'/><line x1='34' y1='100' x2='86' y2='100'/><line x1='50' y1='120' x2='70' y2='120'/><line x1='34' y1='140' x2='86' y2='140'/><line x1='50' y1='160' x2='70' y2='160'/><line x1='34' y1='180' x2='86' y2='180'/><line x1='50' y1='200' x2='70' y2='200'/><line x1='34' y1='220' x2='86' y2='220'/></g></svg>");
    background-size:160px 320px;background-position:right 2% center;background-repeat:no-repeat;
  }

  /* Section-divider EKG line: place at top of section.band when you want a visible divider */
  section.band.has-ekg{border-top:none}
  section.band.has-ekg::after{content:"";position:absolute;left:0;right:0;top:0;height:20px;z-index:2;opacity:.5;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='20' viewBox='0 0 800 20'><path d='M0 10 L200 10 L210 10 L215 3 L220 17 L225 4 L230 10 L400 10 L410 10 L415 3 L420 17 L425 4 L430 10 L600 10 L610 10 L615 3 L620 17 L625 4 L630 10 L800 10' fill='none' stroke='%230075C0' stroke-width='1.2'/></svg>");
    background-repeat:repeat-x}
  .band.alt{background:#fff}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:var(--space-5)}
  @media(max-width:800px){.kpis{grid-template-columns:repeat(2,1fr)}}
  .kpi .num{font-family:'Inter','Helvetica Neue',sans-serif;font-weight:700;font-size:clamp(2.2rem,4vw,3rem);color:var(--cyan-700);line-height:1;letter-spacing:-.03em}
  .kpi .num::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);margin-right:.5rem;vertical-align:middle;animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.25)}}
  .kpi .lbl{color:var(--ink-500);font-size:.92rem;margin-top:.4rem}

  .three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:var(--space-5)}
  @media(max-width:900px){.three{grid-template-columns:1fr}}
  /* 4-up link grid (About quick-links). Use this class rather than an inline
     grid-template-columns — the build hoists inline styles to #page .sXXXX (ID
     specificity, loaded after this file), which would silently defeat these
     responsive breakpoints. */
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:var(--space-5)}
  @media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:540px){.grid-4{grid-template-columns:1fr}}
  .feat{padding:0}
  .feat .icon{width:38px;height:38px;border-radius:10px;background:var(--clay);color:#fff;display:grid;place-items:center;margin-bottom:.7rem}
  .feat h3{font-size:1.15rem;margin-bottom:.4rem}

  /* Map-ish panel */
  .map-panel{background:var(--teal-50);border-radius:var(--radius-lg);padding:22px;display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center;border:1px solid var(--teal-100)}
  @media(max-width:900px){.map-panel{grid-template-columns:1fr}}
  .map-svg{width:100%;height:auto;display:block;background:#fff;border-radius:var(--radius);border:1px solid var(--teal-100)}
  .map-legend{display:flex;flex-direction:column;gap:.45rem;margin-top:1rem}
  .legend-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink-700)}
  .dot{width:10px;height:10px;border-radius:50%}

  /* Testimonial */
  .quote{background:#fff;border-radius:var(--radius-lg);padding:28px;border:1px solid var(--ink-100);max-width:820px;margin:var(--space-5) auto 0}
  .quote blockquote{margin:0;font-family:'Inter','Helvetica Neue',sans-serif;font-size:1.35rem;line-height:1.45;color:var(--ink-900)}
  .quote cite{display:block;margin-top:1rem;font-style:normal;color:var(--ink-500);font-size:.92rem}

  /* News rail */
  .news{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:var(--space-5)}
  @media(max-width:900px){.news{grid-template-columns:1fr}}
  .card{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .card .cover{height:128px;background:linear-gradient(135deg,var(--teal-900),var(--clay));display:grid;place-items:center;color:#fff;font-family:'Inter','Helvetica Neue',sans-serif;font-size:1.05rem;font-weight:500;padding:18px;text-align:center;line-height:1.3;letter-spacing:-.005em}
  .card .cover.alt2{background:linear-gradient(135deg,#005A99,#0075C0)}
  .card .cover.alt3{background:linear-gradient(135deg,var(--clay-dark),var(--clay))}
  .card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:.55rem}
  .card .meta{font-size:.72rem;color:var(--ink-500);letter-spacing:.12em;text-transform:uppercase;font-weight:600}
  .card h4{margin:0;font-family:'Inter','Helvetica Neue',sans-serif;font-size:1.42rem;line-height:1.18;font-weight:700;letter-spacing:-.018em;color:var(--teal-900)}
  .card:hover h4{color:var(--teal-700)}
  @media(max-width:900px){.card h4{font-size:1.32rem}}

  /* CTA strip */
  .cta-strip{background:var(--ink-900);color:#fff;padding:36px 0;margin-top:0}
  .cta-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
  .cta-strip h2{color:#fff;margin:0;max-width:28ch}
  .cta-strip p{color:#a0aaba;margin:.4rem 0 0;max-width:40ch}

  /* Footer */
  footer.site{background:#003D66;color:#C1E0F2;padding:36px 0 22px;font-size:.92rem}
  footer.site a{color:#C1E0F2}
  footer.site h5{color:#fff;font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 1rem}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1.1fr 1fr 1fr 1fr 1.1fr;gap:28px}
  @media(max-width:1080px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
  @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
  .foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
  .foot-bot{border-top:1px solid rgba(193,224,242,.15);margin-top:2.2rem;padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#7ABEE6}

  /* ---------- Find Care page ---------- */
  .page-hero{background:linear-gradient(180deg,#E1F4FD 0%,#f5f8fc 100%);padding:28px 0 22px;border-bottom:1px solid var(--ink-100);position:relative;overflow:hidden}
  .page-hero > *{position:relative;z-index:1}
  .page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;z-index:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23005A99' stroke-width='.8'><circle cx='150' cy='150' r='60'/><circle cx='150' cy='150' r='90' stroke-dasharray='4 6'/><circle cx='150' cy='150' r='3' fill='%23005A99'/><line x1='30' y1='150' x2='270' y2='150'/><line x1='150' y1='30' x2='150' y2='270'/></g></svg>");
    background-size:280px 280px;background-position:right -40px center;background-repeat:no-repeat}
  .crumbs{color:var(--ink-500);font-size:.85rem;margin-bottom:1rem}
  .crumbs a{color:var(--ink-500)}
  .find-layout{display:grid;grid-template-columns:300px 1fr;gap:28px;padding:32px 0 64px}
  @media(max-width:900px){.find-layout{grid-template-columns:1fr}}
  .filters{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);padding:22px;position:sticky;top:92px;align-self:start}
  .filters h4{margin:0 0 1rem;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-500)}
  .filters .group{margin-bottom:1.3rem}
  .filters label.chk{display:flex;gap:.5rem;align-items:center;margin-bottom:.3rem;font-size:.94rem;color:var(--ink-700);cursor:pointer}
  .filters input[type=search]{width:100%;padding:.6rem .75rem;border-radius:8px;border:1px solid var(--ink-100);font-size:.95rem;font-family:inherit}
  .results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap;gap:.5rem}
  .result{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);padding:22px;display:grid;grid-template-columns:80px 1fr auto;gap:18px;margin-bottom:14px;align-items:center}
  @media(max-width:640px){.result{grid-template-columns:60px 1fr}.result .actions{grid-column:1/-1}}
  .avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--teal-900),var(--clay));color:#fff;display:grid;place-items:center;font-family:'Inter','Helvetica Neue',sans-serif;font-size:1.6rem;font-weight:600}
  .avatar.a2{background:linear-gradient(135deg,#005A99,#7ABEE6)}
  .avatar.a3{background:linear-gradient(135deg,var(--good),#005A99)}
  .avatar.a4{background:linear-gradient(135deg,#005A99,var(--clay))}
  .avatar.a5{background:linear-gradient(135deg,#0075C0,var(--good))}
  .result h3{margin:0;font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:700}
  .result .specialty{color:var(--ink-500);font-size:.9rem;margin:.2rem 0 .4rem}
  .result .tags{display:flex;gap:.4rem;flex-wrap:wrap}
  .tag{background:var(--teal-50);color:var(--teal-800);font-size:.75rem;padding:.2rem .5rem;border-radius:999px;border:1px solid var(--teal-100)}
  .tag.accept{background:#e7f5ec;color:var(--good);border-color:#c3e3ce}
  .actions{display:flex;flex-direction:column;gap:.4rem;align-items:stretch}

  /* ---------- Generic page hero + content ---------- */
  /* Landing-page heroes (Members, Physicians, Partners, About) — each gets a medical motif */
  .lp-hero{padding:44px 0 40px;background:linear-gradient(180deg,var(--sand),#fff);position:relative;overflow:hidden}
  .lp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;z-index:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23005A99' stroke-width='.8'><circle cx='150' cy='150' r='60'/><circle cx='150' cy='150' r='90' stroke-dasharray='4 6'/><circle cx='150' cy='150' r='120' stroke-dasharray='2 4'/><circle cx='150' cy='150' r='3' fill='%23005A99'/><line x1='30' y1='150' x2='270' y2='150'/><line x1='150' y1='30' x2='150' y2='270'/></g></svg>");
    background-size:340px 340px;background-position:right -60px top -40px;background-repeat:no-repeat}
  .lp-hero > *{position:relative;z-index:1}
  /* Members pages: stethoscope + heart-rate waveform */
  #members .lp-hero::before,#find-care .page-hero::before,#authorization .page-hero::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='260' viewBox='0 0 400 260'><g fill='none' stroke='%23005A99' stroke-width='1'><path d='M0 130 L80 130 L90 130 L100 95 L110 165 L120 100 L130 130 L180 130 L200 130 L210 90 L220 170 L230 105 L240 130 L300 130 L320 130 L330 92 L340 168 L350 102 L360 130 L400 130' stroke-width='1.6'/><circle cx='350' cy='40' r='28'/><circle cx='350' cy='40' r='14'/><circle cx='350' cy='40' r='3' fill='%23005A99'/></g></svg>");
    background-size:480px 300px;opacity:.16}
  /* Physicians pages: caduceus / helix stylized */
  #physicians .lp-hero::before,#why-hpn .page-hero::before,#portal .page-hero::before,#credentialing .page-hero::before,#clinical-resources .page-hero::before,#referrals .page-hero::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='360' viewBox='0 0 280 360'><g fill='none' stroke='%23005A99' stroke-width='1'><path d='M140 20 Q200 60 140 100 Q80 140 140 180 Q200 220 140 260 Q80 300 140 340' stroke-width='1.4'/><path d='M140 20 Q80 60 140 100 Q200 140 140 180 Q80 220 140 260 Q200 300 140 340' stroke-width='1.4'/><line x1='100' y1='60' x2='180' y2='60'/><line x1='100' y1='140' x2='180' y2='140'/><line x1='100' y1='220' x2='180' y2='220'/><line x1='100' y1='300' x2='180' y2='300'/><circle cx='140' cy='60' r='3' fill='%23005A99'/><circle cx='140' cy='140' r='3' fill='%23005A99'/><circle cx='140' cy='220' r='3' fill='%23005A99'/><circle cx='140' cy='300' r='3' fill='%23005A99'/></g></svg>");
    background-size:260px 340px;background-position:right 4% top -20px;opacity:.2}
  /* Partners pages: hex-lattice / contract-nodes */
  #partners .lp-hero::before,#employers .page-hero::before,#outcomes .page-hero::before,#case-studies .page-hero::before,#contracting .page-hero::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='276' viewBox='0 0 240 276'><g fill='none' stroke='%23005A99' stroke-width='.9'><polygon points='120,15 200,60 200,150 120,195 40,150 40,60'/><polygon points='120,60 160,82 160,128 120,150 80,128 80,82'/><polygon points='120,105 140,115 140,137 120,147 100,137 100,115' fill='%23005A99' fill-opacity='.15'/><line x1='120' y1='15' x2='120' y2='60'/><line x1='200' y1='60' x2='160' y2='82'/><line x1='200' y1='150' x2='160' y2='128'/><line x1='120' y1='195' x2='120' y2='150'/><line x1='40' y1='150' x2='80' y2='128'/><line x1='40' y1='60' x2='80' y2='82'/></g></svg>");
    background-size:280px 320px;opacity:.2}
  /* About pages: periodic-table-like grid for the federation */
  #about .lp-hero::before,#leadership .page-hero::before,#careers .page-hero::before,#community .page-hero::before,#group-detail .page-hero::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='220' viewBox='0 0 340 220'><g fill='none' stroke='%23005A99' stroke-width='.8'><rect x='10' y='10' width='50' height='50' rx='4'/><rect x='70' y='10' width='50' height='50' rx='4'/><rect x='220' y='10' width='50' height='50' rx='4'/><rect x='280' y='10' width='50' height='50' rx='4'/><rect x='10' y='70' width='50' height='50' rx='4'/><rect x='70' y='70' width='50' height='50' rx='4'/><rect x='130' y='70' width='50' height='50' rx='4'/><rect x='190' y='70' width='50' height='50' rx='4'/><rect x='250' y='70' width='50' height='50' rx='4'/><rect x='10' y='130' width='50' height='50' rx='4'/><rect x='70' y='130' width='50' height='50' rx='4'/><rect x='130' y='130' width='50' height='50' rx='4'/><rect x='190' y='130' width='50' height='50' rx='4' fill='%23005A99' fill-opacity='.12'/><rect x='250' y='130' width='50' height='50' rx='4'/></g></svg>");
    background-size:340px 220px;background-position:right 2% top 10%;opacity:.22}
  /* Newsroom pages: broadcast waves */
  #newsroom .lp-hero::before,#article .page-hero::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='300' viewBox='0 0 360 300'><g fill='none' stroke='%23005A99' stroke-width='1'><circle cx='300' cy='60' r='6' fill='%23005A99'/><path d='M280 60 Q300 40 320 60' stroke-width='1.2'/><path d='M260 60 Q300 20 340 60' stroke-width='1'/><path d='M240 60 Q300 0 360 60' stroke-width='.8' stroke-dasharray='2 4'/><line x1='0' y1='220' x2='360' y2='220' stroke-dasharray='4 4'/><line x1='0' y1='250' x2='360' y2='250' stroke-dasharray='2 6'/></g></svg>");
    background-size:360px 300px;background-position:right top;opacity:.2}
  /* Legal pages: padlock / shield motif */
  #legal .page-hero::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'><g fill='none' stroke='%23005A99' stroke-width='1'><path d='M140 40 L210 70 L210 150 Q210 200 140 240 Q70 200 70 150 L70 70 Z'/><path d='M140 90 L175 105 L175 150 Q175 180 140 200 Q105 180 105 150 L105 105 Z'/><rect x='122' y='130' width='36' height='30' rx='2'/><path d='M130 130 Q130 115 140 115 Q150 115 150 130' /></g></svg>");
    background-size:300px 300px;background-position:right 2% center;opacity:.15}
  .lp-hero h1{max-width:18ch}
  .lp-hero p.lede{font-size:1.15rem;color:var(--ink-700);max-width:60ch}
  .split{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
  @media(max-width:900px){.split{grid-template-columns:1fr}}
  .illus{background:linear-gradient(135deg,var(--teal-50),#fff);border:1px solid var(--teal-100);border-radius:var(--radius-lg);padding:30px;min-height:320px;display:grid;place-items:center}
  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:var(--space-5)}
  @media(max-width:700px){.stat-row{grid-template-columns:1fr}}
  .stat-card{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);padding:24px}
  .stat-card .num{font-family:'Inter','Helvetica Neue',sans-serif;font-size:2rem;color:var(--teal-800);font-weight:700;letter-spacing:-.02em}
  .step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:var(--space-5)}
  @media(max-width:900px){.step-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:500px){.step-grid{grid-template-columns:1fr}}
  .step{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);padding:22px;position:relative}
  .step .num{font-family:'Inter','Helvetica Neue',sans-serif;color:var(--clay);font-size:1.4rem;font-weight:700}
  .step h4{margin:.4rem 0;font-family:'Inter',sans-serif;font-size:1rem;font-weight:700}

  .form{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius-lg);padding:32px;max-width:640px}
  .form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  @media(max-width:600px){.form .row{grid-template-columns:1fr}}
  .form label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-700);margin-bottom:.3rem}
  .form input,.form select,.form textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--ink-100);border-radius:8px;font-family:inherit;font-size:.95rem;background:#fff}
  .form input:focus,.form select:focus,.form textarea:focus{border-color:var(--teal-700);outline:2px solid var(--teal-100)}

  /* Auth tracker */
  .tracker{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius-lg);padding:32px;max-width:700px}
  .tstatus{display:flex;justify-content:space-between;background:var(--teal-50);border:1px solid var(--teal-100);border-radius:var(--radius);padding:16px 18px;margin-bottom:1.5rem;align-items:center;flex-wrap:wrap;gap:.5rem}
  .tstatus .pill{background:var(--good);color:#fff;padding:.3rem .7rem;border-radius:999px;font-size:.8rem;font-weight:700}
  .tline{display:flex;gap:14px;margin-bottom:1.2rem}
  .tline .bul{width:22px;display:flex;flex-direction:column;align-items:center;flex-shrink:0}
  .tline .bul .dot{width:14px;height:14px;border-radius:50%;background:var(--good);border:3px solid var(--teal-50)}
  .tline .bul .ln{flex:1;width:2px;background:var(--teal-100);margin-top:2px}
  .tline:last-child .bul .ln{display:none}
  .tline.pending .bul .dot{background:var(--ink-100);border-color:#fff}
  .tline.pending h4, .tline.pending p{color:var(--ink-500)}
  .tline h4{margin:.1rem 0;font-family:'Inter',sans-serif;font-size:.98rem;font-weight:700}
  .tline p{margin:0;font-size:.9rem;color:var(--ink-500)}

  /* Outcomes bars */
  .outcomes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:var(--space-5)}
  @media(max-width:700px){.outcomes{grid-template-columns:1fr}}
  .outcome{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);padding:22px}
  .bar{height:10px;background:var(--ink-100);border-radius:999px;overflow:hidden;margin-top:.5rem}
  .bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--teal-900),var(--clay));border-radius:999px}

  /* group list */
  .grouplist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:var(--space-5)}
  @media(max-width:700px){.grouplist{grid-template-columns:1fr}}
  .grouplist .card2{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius);padding:18px;display:flex;gap:14px;align-items:center}
  .grouplist .sq{width:46px;height:46px;border-radius:10px;background:var(--teal-50);color:var(--teal-800);display:grid;place-items:center;font-weight:700;flex-shrink:0}

  /* Utility */
  .muted{color:var(--ink-500)}
  .hstack{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
  .vstack{display:flex;flex-direction:column;gap:var(--space-3)}
  /* Margin utilities — the number IS the spacing-scale step (mt-5 = --space-5 =
     1.5rem). Use these instead of an inline margin so gaps stay on the scale. */
  .mt-1{margin-top:var(--space-1)}   .mb-1{margin-bottom:var(--space-1)}
  .mt-2{margin-top:var(--space-2)}   .mb-2{margin-bottom:var(--space-2)}
  .mt-3{margin-top:var(--space-3)}   .mb-3{margin-bottom:var(--space-3)}
  .mt-4{margin-top:var(--space-4)}   .mb-4{margin-bottom:var(--space-4)}
  .mt-5{margin-top:var(--space-5)}   .mb-5{margin-bottom:var(--space-5)}
  .mt-6{margin-top:var(--space-6)}   .mb-6{margin-bottom:var(--space-6)}
  .pill-sm{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-800);background:var(--teal-50);padding:.3rem .6rem;border-radius:999px;border:1px solid var(--teal-100)}
  /* A .pill-sm used as a hero eyebrow sits directly above the headline; give the
     headline a scale gap so the badge isn't glued to it (the home .hero sets its
     own eyebrow spacing separately). Only fires when a pill immediately precedes
     an h1, so date/credential pills followed by prose are unaffected. */
  .pill-sm + h1{margin-top:var(--space-3)}

  /* proto banner — sticky so it stays visible while scrolling */
  .proto-banner{background:#fff;color:#c00000;text-align:center;padding:.55rem;font-size:.85rem;font-weight:700;letter-spacing:.04em;position:sticky;top:0;z-index:100;border-bottom:1px solid #ffd6d6;box-shadow:0 1px 3px rgba(192,0,0,.10)}
  .proto-banner a{color:#c00000;text-decoration:underline;font-weight:700}
  /* placeholder-link visual hint — dotted underline + small "sample" tag */
  a[href="#"]:not(.brand):not(.btn){border-bottom:1px dotted currentColor;cursor:help}
  /* M4 (2026-06-11): long email addresses / URLs wrap instead of overflowing on narrow screens */
  #sitemap li, .foot-grid li{overflow-wrap:anywhere;word-break:break-word}
  /* Scholars & Researchers list (2026-06-15) */
  #scholars .sch-list{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.5rem}
  #scholars .sch-list li{line-height:1.5;padding-left:1rem;border-left:2px solid var(--teal-100)}
  #scholars h2{margin-top:1.4rem}

  /* ============ About-page Founder + Philanthropy feature block ============ */
  .about-feature{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:var(--space-5)}
  @media(max-width:860px){.about-feature{grid-template-columns:1fr}}
  .about-feature-card{display:grid;grid-template-columns:200px 1fr;gap:0;border-radius:20px;overflow:hidden;
    background:#fff;border:1px solid var(--ink-100);text-decoration:none;color:inherit;
    box-shadow:0 1px 2px rgba(0,61,102,.04),0 14px 32px -16px rgba(0,61,102,.20);
    transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s,border-color .28s}
  .about-feature-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(0,61,102,.05),0 22px 48px -16px rgba(0,61,102,.32);border-color:var(--teal-100)}
  @media(max-width:520px){.about-feature-card{grid-template-columns:1fr}.about-feature-portrait,.about-feature-illus{height:200px}}
  .about-feature-portrait,.about-feature-illus{position:relative;background:linear-gradient(135deg,var(--teal-700),var(--teal-900));overflow:hidden;min-height:200px}
  .about-feature-portrait svg{width:100%;height:100%;display:block}
  .about-feature-illus svg{width:100%;height:100%;display:block}
  .about-feature-body{padding:1.4rem 1.6rem 1.5rem;display:flex;flex-direction:column;justify-content:center}
  .about-feature-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
  .about-feature-card h3{margin:.4rem 0 .55rem;font-family:'Inter','Helvetica Neue',sans-serif;font-size:1.32rem;font-weight:700;letter-spacing:-.012em;color:var(--teal-900);line-height:1.2}
  .about-feature-card p{margin:0 0 .8rem;font-size:.95rem;line-height:1.55;color:var(--ink-700)}
  .about-feature-link{font-size:.9rem;font-weight:600;color:var(--teal-700);display:inline-flex;align-items:center;gap:.4rem}
  .about-feature-link .arrow{transition:transform .25s}
  .about-feature-card:hover .about-feature-link .arrow{transform:translateX(3px)}

  /* ============ Founder portrait ============ */
  .founder-portrait{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .portrait-frame{position:relative;max-width:340px;width:100%;border-radius:22px;overflow:hidden;
    box-shadow:0 1px 2px rgba(0,61,102,.08),0 18px 50px -12px rgba(0,61,102,.32),0 32px 80px -28px rgba(42,122,150,.45);
    background:linear-gradient(135deg,var(--teal-700),var(--teal-900));isolation:isolate;transform:translateZ(0);transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s}
  .portrait-frame::before{content:"";position:absolute;inset:-2px;border-radius:24px;padding:2px;
    background:linear-gradient(140deg,rgba(193,224,242,.55),rgba(212,164,55,.45) 60%,rgba(193,224,242,.0));
    -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
  .portrait-frame:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(0,61,102,.08),0 22px 60px -10px rgba(0,61,102,.38),0 40px 100px -28px rgba(42,122,150,.55)}
  .portrait-frame img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;background:#005A99}
  .portrait-caption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.25rem 1rem;color:#fff;
    background:linear-gradient(180deg,rgba(0,61,102,0) 0%,rgba(0,61,102,.55) 45%,rgba(0,61,102,.92) 100%);z-index:1}
  .portrait-caption-name{font-family:'Inter','Helvetica Neue',sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:-.012em;line-height:1.2}
  .portrait-caption-title{font-size:.82rem;color:#C1E0F2;margin-top:.18rem;letter-spacing:.005em}
  @media(max-width:760px){.portrait-frame{max-width:280px}}

  /* ============ Animated philanthropy DNA-helix timeline ============ */
  .timeline-band{background:linear-gradient(180deg,#fff 0%,#f5f8fc 100%);position:relative;overflow:hidden}
  .timeline-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.15;
    background:radial-gradient(ellipse at 20% 10%,rgba(193,224,242,.6),transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(212,164,55,.4),transparent 55%)}
  .timeline-band > .wrap{position:relative}

  .timeline{position:relative;margin:3rem auto 0;max-width:1180px;padding:1rem 0 2rem}

  /* Two intertwined SVG strands — drawn vertically over the entire timeline */
  .timeline .tl-helix{position:absolute;left:50%;top:0;bottom:0;width:240px;transform:translateX(-50%);pointer-events:none;z-index:0}
  .timeline .tl-helix svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 0 14px rgba(212,164,55,.16))}
  .timeline .tl-strand{fill:none;stroke-width:2.6;stroke-linecap:round}
  .timeline .tl-strand.a{stroke:url(#strandGradA);stroke-dasharray:8000;stroke-dashoffset:8000;animation:tl-draw 3.6s cubic-bezier(.22,.61,.36,1) forwards .2s}
  .timeline .tl-strand.b{stroke:url(#strandGradB);stroke-dasharray:8000;stroke-dashoffset:8000;animation:tl-draw 3.6s cubic-bezier(.22,.61,.36,1) forwards .35s}
  .timeline .tl-rung{stroke:rgba(166,206,217,.42);stroke-width:1.1;stroke-dasharray:3 4}
  @keyframes tl-draw{to{stroke-dashoffset:0}}

  /* Each timeline item — alternating left / right */
  .tl-item{position:relative;width:50%;padding:.55rem 2.6rem;box-sizing:border-box;display:flex;align-items:center;
    opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
  .tl-item.is-visible{opacity:1;transform:translateY(0)}
  .tl-item.left{margin-right:auto;justify-content:flex-end}
  .tl-item.right{margin-left:50%;justify-content:flex-start}

  /* Card — compact, denser than before to fit ~44 items */
  .tl-card{background:#fff;border:1px solid var(--ink-100);border-radius:14px;padding:.85rem 1rem .95rem;box-shadow:0 1px 2px rgba(0,61,102,.04),0 6px 18px -10px rgba(0,61,102,.16);max-width:440px;width:100%;position:relative;transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}
  .tl-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,61,102,.05),0 14px 30px -12px rgba(0,61,102,.26);border-color:var(--teal-100)}
  .tl-card .tl-year{font-family:'Inter','Helvetica Neue',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--clay);text-transform:uppercase;margin-bottom:.3rem}
  .tl-card h3{margin:0 0 .35rem;font-family:'Inter','Helvetica Neue',sans-serif;font-size:1.02rem;font-weight:700;letter-spacing:-.008em;color:var(--teal-900);line-height:1.2}
  .tl-card p{margin:0;color:var(--ink-700);font-size:.86rem;line-height:1.45}
  .tl-card .tl-link{margin-top:.5rem;font-size:.82rem}
  .tl-card .tl-link a{color:var(--teal-700);font-weight:600;text-decoration:none}
  .tl-card .tl-link a:hover{text-decoration:underline}
  /* NOTE: .tl-card .tl-tag is defined once, in the logo-badges section below
     (display:flex; margin-top:.7rem). An earlier duplicate here was fully
     overridden by it and has been removed — edit the one below. */

  /* Featured cards — punchier */
  .tl-card.tl-card-feature{background:linear-gradient(180deg,#fff 0%,#E1F4FD 100%);border-color:var(--teal-100)}
  .tl-card.tl-card-feature .tl-year{color:var(--teal-800)}

  /* Node — sits on the centerline at the strand intersection */
  .tl-node{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 4px #fff,0 0 0 5px var(--teal-100),0 0 0 11px rgba(212,164,55,.10);transform:translate(-50%,-50%);z-index:2;
    transition:transform .3s ease,box-shadow .3s ease}
  .tl-item.left .tl-node{left:100%}
  .tl-item.right .tl-node{left:0}
  .tl-item.is-visible .tl-node{animation:tl-pulse 2.4s ease-in-out 1}
  @keyframes tl-pulse{0%{box-shadow:0 0 0 4px #fff,0 0 0 5px var(--teal-100),0 0 0 11px rgba(212,164,55,.10)}50%{box-shadow:0 0 0 4px #fff,0 0 0 5px var(--teal-100),0 0 0 18px rgba(212,164,55,0)}100%{box-shadow:0 0 0 4px #fff,0 0 0 5px var(--teal-100),0 0 0 11px rgba(212,164,55,.10)}}
  .tl-item:hover .tl-node{transform:translate(-50%,-50%) scale(1.3)}

  /* Subtle staggered slide-in from the appropriate side */
  .tl-item.left{transform:translate(-18px,22px)}
  .tl-item.right{transform:translate(18px,22px)}
  .tl-item.is-visible.left,.tl-item.is-visible.right{transform:translate(0,0)}

  /* Mobile: collapse to a single column, helix slides to left margin */
  @media(max-width:860px){
    .timeline .tl-helix{left:24px;transform:none;width:50px}
    .tl-item{width:100%;padding-left:64px;padding-right:0;justify-content:flex-start !important;margin-left:0 !important;margin-right:0 !important;transform:translate(0,22px) !important}
    .tl-item.is-visible{transform:translate(0,0) !important}
    .tl-item .tl-node{left:24px !important;right:auto !important}
    .tl-card{max-width:none}
  }
  @media(prefers-reduced-motion:reduce){
    .tl-item,.tl-item.left,.tl-item.right{opacity:1 !important;transform:none !important;transition:none}
    .timeline .tl-strand{animation:none !important;stroke-dashoffset:0 !important}
    .tl-item.is-visible .tl-node{animation:none}
  }

  /* ============ Stylized institution logo badges ============ */
  .inst-logo{display:inline-flex;align-items:center;padding:.18rem .55rem;border-radius:6px;font-family:'Inter','Helvetica Neue',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1;color:#fff;white-space:nowrap;border:1px solid transparent}
  .inst-caltech    {background:#FF6C0C;color:#fff}
  .inst-usc        {background:#990000;color:#fff}
  .inst-stanford   {background:#8C1515;color:#fff}
  .inst-ucla       {background:#2774AE;color:#FFD100;border-color:#FFD100}
  .inst-berkeley   {background:#003262;color:#FDB515;border-color:#FDB515}
  .inst-hopkins    {background:#002D72;color:#fff}
  .inst-broad      {background:#231F20;color:#fff;border-color:#E84A27}
  .inst-mit        {background:#A31F34;color:#fff}
  .inst-coh        {background:#005DA9;color:#fff}
  .inst-fastercures{background:#0079C1;color:#fff}
  .inst-brookings  {background:#003B5C;color:#fff}
  .inst-wgu        {background:#003057;color:#0072CE;border-color:#0072CE}
  .inst-csu        {background:#CE1141;color:#fff}
  .inst-mff        {background:linear-gradient(135deg,var(--teal-800),var(--teal-700));color:#fff;border-color:rgba(193,224,242,.35)}
  .inst-hmri       {background:linear-gradient(135deg,var(--teal-700),var(--teal-800));color:#fff}
  .inst-hpn        {background:var(--clay);color:#fff}
  .inst-bpc        {background:#0F4C81;color:#fff}
  .inst-rite       {background:#005DAB;color:#fff}
  .inst-fmc        {background:#003F87;color:#fff}
  .inst-humana     {background:#69BE28;color:#fff}
  .inst-nih        {background:#20558A;color:#fff}
  .inst-nci        {background:#7C2855;color:#fff}
  .inst-fuf        {background:#444;color:#fff}
  .inst-nms        {background:#013B71;color:#fff}
  .inst-pcf        {background:#003E6B;color:#fff}
  .inst-tsinghua   {background:#660874;color:#fff}
  .inst-milken     {background:#1E2A5E;color:#fff}
  .inst-xprize     {background:#000;color:#fff}
  .inst-nyam       {background:#5B2D7C;color:#fff}
  .inst-fll        {background:#FFD100;color:#000}
  .inst-cnsi       {background:#0067B1;color:#fff}
  .inst-apg        {background:#0E2A47;color:#fff}
  .inst-rmms       {background:#FFB81C;color:#0F2D5C}
  .inst-schwarzman {background:#0F2D5C;color:#fff}
  .inst-su         {background:#000;color:#fff}
  .inst-ufc        {background:#1E72B7;color:#fff}
  .inst-merkin-broad{background:#fff;color:#005A99;border-color:var(--ink-100)}
  .inst-merkin-prize{background:#fff;color:var(--ink-900);border-color:var(--ink-100)}
  .inst-alliance   {background:#0F4C81;color:#fff}
  .inst-crains     {background:#000;color:#fff}
  /* logo row spacer for feat-card style cards (Boards, Medical Research) */
  .feat-logo-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.55rem;align-items:center}
  /* IMAGE-MODE inst-logo: when the badge wraps an <img> instead of plain text,
     render as a clean white pill with the real institution logo inside. */
  .inst-logo:has(img){background:#fff;color:transparent;border:1px solid var(--ink-100);padding:0;height:26px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
  .inst-logo:has(img):hover{border-color:var(--ink-300)}
  .inst-logo img{max-height:18px;max-width:96px;width:auto;height:auto;object-fit:contain;display:block;margin:0 .55rem}
  /* Larger logo size for the Boards & Affiliations + Medical Research feat cards */
  .feat-logo-row .inst-logo:has(img){height:34px}
  .feat-logo-row .inst-logo img{max-height:24px;max-width:130px}
  /* Timeline cards: noticeably larger logo badges (~2.5x base) */
  .tl-card .tl-tag{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.7rem}
  .tl-card .tl-tag .inst-logo:has(img){height:56px;border-radius:8px}
  .tl-card .tl-tag .inst-logo img{max-height:42px;max-width:180px;margin:0 .9rem}
  /* Constrain pairs of badges (e.g., Broad + MIT) so two fit on a row */
  .tl-card .tl-tag .inst-logo:has(img):nth-child(n+2){max-width:46%}
  .tl-card .tl-tag .inst-logo:has(img):nth-child(n+2) img{max-width:140px}

  /* ============ TouchPoints landing — carousel + grid ============ */
  .tp-carousel-band{background:linear-gradient(180deg,#fff 0%,#f5f8fc 100%)}
  .tp-carousel{position:relative;overflow:hidden;padding:1rem 0;mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
  .tp-carousel-track{display:flex;gap:28px;width:max-content;animation:tp-scroll 75s linear infinite}
  .tp-carousel:hover .tp-carousel-track{animation-play-state:paused}
  @keyframes tp-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.tp-carousel-track{animation:none}}
  .tp-slide{flex-shrink:0;width:360px;background:#fff;border:1px solid var(--ink-100);border-radius:14px;padding:0;text-decoration:none;color:inherit;display:block;overflow:hidden;
    box-shadow:0 1px 2px rgba(0,61,102,.04),0 8px 22px -12px rgba(0,61,102,.18);transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}
  .tp-slide:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(0,61,102,.05),0 18px 38px -14px rgba(0,61,102,.30);border-color:var(--teal-100)}
  .tp-cover-wrap{aspect-ratio:8.5/11;width:100%;background:linear-gradient(135deg,var(--teal-50),#fff)}
  .tp-cover-wrap img{width:100%;height:100%;object-fit:cover;display:block}
  .tp-meta{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-family:'Inter','Helvetica Neue',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.04em;margin-top:.4rem}
  .tp-meta .tp-issue{color:var(--clay)}
  .tp-meta .tp-date{color:var(--ink-500)}
  .tp-headline{font-family:'Inter','Helvetica Neue',sans-serif;font-size:1.08rem;font-weight:700;line-height:1.22;color:var(--teal-900);letter-spacing:-.008em}

  .tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;margin-top:var(--space-5)}
  .tp-tile{background:#fff;border:1px solid var(--ink-100);border-radius:10px;padding:10px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.4rem;
    transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,border-color .25s}
  .tp-tile:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(0,61,102,.05),0 12px 26px -12px rgba(0,61,102,.25);border-color:var(--teal-100)}
  .tp-tile-cover{aspect-ratio:8.5/11;width:100%;border-radius:5px;overflow:hidden;background:linear-gradient(135deg,var(--teal-50),#fff);border:1px solid var(--ink-100)}
  .tp-tile-cover img{width:100%;height:100%;object-fit:cover;display:block}
  .tp-tile-num{font-family:'Inter','Helvetica Neue',sans-serif;font-size:.72rem;font-weight:700;color:var(--clay);letter-spacing:.04em;margin-top:.2rem}
  .tp-tile-date{font-size:.74rem;color:var(--ink-500);margin-top:-.1rem}

  /* Home-page TouchPoints feature block */
  .tp-home{background:linear-gradient(135deg,var(--teal-50),#fff);border-radius:14px;border:1px solid var(--teal-100);padding:1.6rem 1.8rem;display:grid;grid-template-columns:1fr auto;gap:var(--space-5);align-items:center;margin-top:var(--space-6)}
  @media(max-width:760px){.tp-home{grid-template-columns:1fr}}
  .tp-home .body h3{margin:.3rem 0 .4rem;font-size:1.3rem}
  .tp-home .preview{display:flex;gap:8px}
  .tp-home .preview img{width:74px;aspect-ratio:8.5/11;object-fit:cover;border-radius:5px;border:1px solid var(--ink-100);box-shadow:0 4px 14px -6px rgba(0,61,102,.30)}


  /* ============ Top-of-page alert/notice strip ============ */
  .alert-strip{background:#fbf3dc;border-top:1px solid #ead6a8;border-bottom:1px solid #ead6a8;padding:.8rem 0}
  .alert-strip .wrap{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
  .alert-strip .alert-label{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a6418;flex-shrink:0}
  .alert-strip .alert-label::before{content:"\26A0\FE0F";font-size:1.05rem;line-height:1}
  .alert-strip .alert-item{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink-900);font-size:.9rem;padding:.25rem .6rem;border-radius:6px;transition:background .2s ease}
  .alert-strip .alert-item:hover{background:rgba(255,255,255,.65)}
  .alert-strip .alert-item strong{color:var(--teal-900);font-weight:700}
  .alert-strip .alert-item .muted{color:var(--ink-500);font-size:.85em}
  .alert-strip .alert-item .more{color:var(--clay-dark);font-weight:700;margin-left:.25rem}


/* ============================================================
   Homemade-build supplement (appended by migration, 2026-07-01).
   Self-hosted fonts (requirement #5 — no CDN) + a few utilities the
   Markdown pages need. Drop the .woff2 files into static/fonts/ to
   activate; until then the system-font fallbacks in the rules above apply.
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter-var.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrains-mono-var.woff2') format('woff2')}

/* Content wrapper used by templates/page.html */
.section{padding:2.4rem 0 3.2rem}
.section h1{margin-top:.2rem}

/* ============================================================
   JS-rendered data tables — provider directory + urgent-care finder.
   Built by static/providers.js (6 cols) and urgent-care.js (4 cols) with
   class="table"/"cell"/"cellHead". These had NO styling, so on a phone the
   table expanded past the viewport and side-scrolled the whole page. Wrap the
   results region in a horizontal-scroll container so only the table scrolls,
   and give the cells real padding/rules.
   ============================================================ */
#pd-results,#uc-results{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1rem}
table.table{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem;background:#fff}
table.table .cellHead,table.table .cell{padding:.55rem .65rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--ink-100)}
table.table .cellHead{border-bottom:2px solid var(--teal-100);color:var(--teal-900);white-space:nowrap}
table.table tr:hover .cell{background:var(--sand)}
/* Directory/finder <select> controls: comfortable tap target (1rem avoids iOS
   zoom-on-focus) and full-width on phones so they're easy to use. */
.pd-controls select,#uc-area{font-family:inherit;font-size:1rem;padding:.5rem .6rem;border:1px solid var(--ink-100);border-radius:8px;background:#fff;max-width:100%}
@media(max-width:560px){.pd-controls select,#uc-area{display:block;width:100%;margin-top:.35rem}}
/* Data-table pager: shown by providers.js / urgent-care.js when a result set
   exceeds 10 rows. Numbered page "tabs" + Prev/Next, styled to the brand blue.
   Shared by both widgets (the .pd- prefix is historical). */
.pd-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.85rem}
.pd-pageinfo{color:var(--ink-500);font-size:.85rem}
.pd-pagenav{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.pd-page{min-width:2.2rem;padding:.42rem .62rem;border:1px solid var(--ink-100);border-radius:8px;background:#fff;color:var(--teal-800);font:inherit;font-size:.9rem;font-weight:600;line-height:1;cursor:pointer}
.pd-page:hover:not(:disabled):not(.is-active){background:var(--teal-50);border-color:var(--teal-700)}
.pd-page:focus-visible{outline:3px solid var(--teal-100);outline-offset:2px}
.pd-page:disabled{opacity:.45;cursor:default}
.pd-page.is-active{background:var(--teal-700);border-color:var(--teal-700);color:#fff;cursor:default}
.pd-ellipsis{padding:0 .2rem;color:var(--ink-500)}

/* Mobile nav: reveal the menu when JS toggles .open (see static/site.js) */
@media(max-width:1040px){.nav ul.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--ink-100);padding:.5rem 24px;gap:.2rem;box-shadow:var(--shadow)}}