/* ===========================================================================
   Just Blood — site theme + layout, built ON the Aravir web-ui-kit.
   Load order: kit.css FIRST, then this file. No Bootstrap, no imports.

   Structure:
     1. Fonts (local Noto, all Indian scripts)
     2. Kit token OVERRIDES (:root = light, dark via the kit's data-theme pattern)
     3. Site-specific layout (.jb-*) — token-driven only, no raw hex below the
        token blocks, no hover-lift anywhere.
   =========================================================================== */

/* ── 1. Noto Sans (local) — all Indian scripts ── */
@font-face { font-family: 'Noto Sans'; src: url('../vendor/noto-sans/NotoSans.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Devanagari'; src: url('../vendor/noto-sans/NotoSansDevanagari.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Telugu'; src: url('../vendor/noto-sans/NotoSansTelugu.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Tamil'; src: url('../vendor/noto-sans/NotoSansTamil.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Kannada'; src: url('../vendor/noto-sans/NotoSansKannada.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Malayalam'; src: url('../vendor/noto-sans/NotoSansMalayalam.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Bengali'; src: url('../vendor/noto-sans/NotoSansBengali.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Gujarati'; src: url('../vendor/noto-sans/NotoSansGujarati.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Gurmukhi'; src: url('../vendor/noto-sans/NotoSansGurmukhi.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Oriya'; src: url('../vendor/noto-sans/NotoSansOriya.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('../vendor/noto-sans/NotoSansArabic.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

/* ── 2. Kit token OVERRIDES — Just Blood brand red (from the legacy style.css
       ramp: #DC2626 / #B91C1C / #EF4444 / #FEE2E2 / #FEF2F2). LIGHT values. ── */
:root{
  --brand:#DC2626; --brand-600:#B91C1C; --brand-500:#EF4444; --brand-300:#FCA5A5;
  --brand-soft:#FEE2E2; --brand-mist:#FEF2F2;
  --on-brand:#ffffff;

  --bg:#FDFBFA; --surface:#ffffff; --surface-2:#FBF7F6;
  --ink:#1F2937; --ink-2:#374151; --muted:#6B7280;
  --line:#ECE7E5; --line-2:#F4F0EE;

  --ok:#059669;   --ok-bg:#E7F6EF;   --ok-line:#BBE5D2;
  --bad:#DC2626;  --bad-bg:#FEE2E2;  --bad-line:#FCA5A5;
  --warn:#B45309; --warn-bg:#FEF3C7; --warn-line:#F3D788;
  --info:#2563EB; --info-bg:#DBEAFE; --info-line:#BBD4F8;

  --ring:#FCA5A5;
  --shadow-sm:0 1px 2px rgba(127,29,29,.06);
  --shadow:0 2px 8px rgba(127,29,29,.07),0 10px 30px rgba(127,29,29,.06);
  --shadow-lg:0 18px 48px rgba(127,29,29,.18);

  --font:'Noto Sans','Noto Sans Devanagari','Noto Sans Telugu','Noto Sans Tamil',
         'Noto Sans Kannada','Noto Sans Malayalam','Noto Sans Bengali','Noto Sans Gujarati',
         'Noto Sans Gurmukhi','Noto Sans Oriya','Noto Sans Arabic','Segoe UI',system-ui,sans-serif;

  /* site-only tokens (all .jb-* rules below draw from these + the kit set) */
  --jb-hero-a:#5F0D0D; --jb-hero-b:#991B1B; --jb-hero-c:#DC2626; --jb-hero-d:#F0564B;
  --jb-footer-ink:rgba(255,255,255,.85);
  --jb-footer-ink-dim:rgba(255,255,255,.55); --jb-footer-line:rgba(255,255,255,.12);
  --jb-footer-chip:rgba(255,255,255,.1);
  --jb-whatsapp:#25D366; --jb-facebook:#1877F2; --jb-x:#111111;
}

/* dark theme — same two-way guard pattern as kit.css */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#EF4444; --brand-600:#F87171; --brand-500:#F87171; --brand-300:#7F1D1D;
    --brand-soft:#331113; --brand-mist:#2A0F11;
    --on-brand:#ffffff;

    --bg:#141015; --surface:#1E181A; --surface-2:#271F21;
    --ink:#F3E9E8; --ink-2:#D9CBC9; --muted:#A08F8D;
    --line:#382C2E; --line-2:#2B2224;

    --ok:#5ED49A;   --ok-bg:#122A1E;   --ok-line:#1F4D36;
    --bad:#F8867A;  --bad-bg:#331113;  --bad-line:#5F1F22;
    --warn:#EBC26B; --warn-bg:#2E230F; --warn-line:#5C481C;
    --info:#82B4F4; --info-bg:#122133; --info-line:#1F3C5C;

    --ring:#F87171;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 3px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.4);
    --shadow-lg:0 20px 60px rgba(0,0,0,.55);

    --jb-footer-bg:#1A0D0E;
  }
}
:root[data-theme="dark"]{
  --brand:#EF4444; --brand-600:#F87171; --brand-500:#F87171; --brand-300:#7F1D1D;
  --brand-soft:#331113; --brand-mist:#2A0F11;
  --on-brand:#ffffff;

  --bg:#141015; --surface:#1E181A; --surface-2:#271F21;
  --ink:#F3E9E8; --ink-2:#D9CBC9; --muted:#A08F8D;
  --line:#382C2E; --line-2:#2B2224;

  --ok:#5ED49A;   --ok-bg:#122A1E;   --ok-line:#1F4D36;
  --bad:#F8867A;  --bad-bg:#331113;  --bad-line:#5F1F22;
  --warn:#EBC26B; --warn-bg:#2E230F; --warn-line:#5C481C;
  --info:#82B4F4; --info-bg:#122133; --info-line:#1F3C5C;

  --ring:#F87171;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 3px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);

  --jb-footer-bg:#1A0D0E;
}

/* ===========================================================================
   3. Site layout — .jb-* classes, token-driven, both themes. NO hover-lift.
   =========================================================================== */

/* ── Skip link (accessibility, kept from the legacy build) ── */
.jb-skip-link{position:absolute;top:-100%;left:16px;background:var(--brand);color:var(--on-brand);
  padding:8px 16px;border-radius:0 0 8px 8px;z-index:10000;font-weight:600;text-decoration:none;
  transition:top .2s}
.jb-skip-link:focus{top:0}

/* ── Header refinements on the kit .site-header ── */
.site-header .brand img{height:34px;width:auto}
.site-header .brand span{color:var(--brand)}
.jb-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:none;border:1.5px solid transparent;border-radius:10px;color:var(--ink-2);cursor:pointer}
.jb-icon-btn:hover{background:var(--surface-2);color:var(--brand)}
.jb-icon-btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.jb-icon-btn .icon{width:20px;height:20px}
/* dark-mode toggle icon swap (html[data-theme] drives it) */
.jb-theme-sun{display:none}
:root[data-theme="dark"] .jb-theme-sun{display:inline-block}
:root[data-theme="dark"] .jb-theme-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .jb-theme-sun{display:inline-block}
  :root:not([data-theme="light"]) .jb-theme-moon{display:none}
  :root[data-theme="light"] .jb-theme-sun{display:none}
}
[hidden]{display:none !important}
.jb-user-trigger{background:none;border:0;cursor:pointer;font-family:inherit;gap:.4em}

/* ── Sections / page scaffolding ── */
.jb-section{padding:64px 0}
.jb-section--tight{padding-top:28px}
.jb-section--alt{background:var(--surface-2)}
.jb-section__title{font-size:2rem;font-weight:800;text-align:center;margin:0 0 6px}
.jb-section__title::after{content:'';display:block;width:56px;height:4px;margin:14px auto 0;
  border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--brand-500),var(--brand-300))}
.jb-section__subtitle{text-align:center;color:var(--muted);max-width:600px;margin:0 auto 42px;
  font-size:1.05rem}

.jb-page-header{background:var(--surface-2);border-bottom:1px solid var(--line);padding:28px 0}
.jb-page-header h1{display:flex;align-items:center;gap:.4em;font-size:1.8rem;font-weight:800;margin:0 0 4px}
.jb-page-header h1 .icon{color:var(--brand)}
.jb-page-header .breadcrumb{margin:4px 0 0}
.jb-page-header__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}

/* generic layout utilities used across pages */
.jb-grid{display:grid;gap:16px}
.jb-grid--2{grid-template-columns:repeat(2,1fr)}
.jb-grid--3{grid-template-columns:repeat(3,1fr)}
.jb-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.jb-grid--3,.jb-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.jb-grid--2,.jb-grid--3{grid-template-columns:1fr}
  .jb-grid--4{grid-template-columns:repeat(2,1fr)}}
.jb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.jb-row--between{justify-content:space-between}
.jb-center{text-align:center}
.jb-mt{margin-top:16px}.jb-mt-lg{margin-top:28px}
.jb-muted{color:var(--muted)}
.jb-small{font-size:var(--fs-sm)}

/* ── Hero ── */
.jb-hero{position:relative;overflow:hidden;color:var(--on-brand);padding:80px 0 64px;
  background:radial-gradient(1000px 620px at 84% -22%,rgba(255,255,255,.16),transparent 60%),
    linear-gradient(135deg,var(--jb-hero-a) 0%,var(--jb-hero-b) 32%,var(--jb-hero-c) 72%,var(--jb-hero-d) 100%)}
.jb-hero::before{content:'';position:absolute;top:-50%;right:-20%;width:80%;height:200%;
  background:radial-gradient(ellipse,rgba(255,255,255,.08) 0%,transparent 70%);pointer-events:none}
.jb-hero__inner{display:grid;grid-template-columns:3fr 2fr;gap:32px;align-items:center}
.jb-hero h1{font-size:3.2rem;font-weight:800;color:var(--on-brand);margin:0 0 20px;line-height:1.15}
.jb-hero h1 span{display:inline-block;background:rgba(255,255,255,.16);padding:0 .3em;
  border-radius:.2em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.jb-hero p{font-size:1.2rem;opacity:.92;max-width:540px;line-height:1.7}
.jb-hero__art{display:flex;align-items:center;justify-content:center;opacity:.16}
.jb-hero__art .icon{width:230px;height:230px}
@media(max-width:900px){.jb-hero__inner{grid-template-columns:1fr}.jb-hero__art{display:none}}

.jb-hero-search{background:rgba(255,255,255,.12);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);padding:20px;margin-top:28px}
.jb-hero-search .field{margin-bottom:0}
.jb-hero-search .field__label{color:var(--on-brand)}
.jb-hero-search__grid{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
@media(max-width:700px){.jb-hero-search__grid{grid-template-columns:1fr 1fr}
  .jb-hero-search__grid > :last-child{grid-column:1 / -1}}
.jb-btn-inverse{background:var(--surface);color:var(--brand)}
.jb-btn-inverse:hover{background:var(--surface-2);color:var(--brand-600)}

/* ── Stats strip ── */
.jb-stats{background:var(--surface);padding:44px 0;border-bottom:1px solid var(--line)}
.jb-stat{text-align:center;padding:12px}
.jb-stat__number{font-size:2.5rem;font-weight:800;color:var(--brand);line-height:1;margin-bottom:4px}
.jb-stat__label{color:var(--muted);font-size:.9rem;font-weight:500}
@media(max-width:768px){.jb-stat__number{font-size:1.8rem}}

/* ── How-it-works steps ── */
.jb-step{text-align:center;padding:20px 14px}
.jb-step__number{width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-600));color:var(--on-brand);
  font-weight:800;font-size:1.5rem;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;box-shadow:0 10px 22px -8px var(--ring),0 0 0 6px var(--brand-mist)}
.jb-step h3{font-size:1.1rem;font-weight:700;margin:0 0 6px}
.jb-step p{color:var(--muted);font-size:.93rem;margin:0}

/* ── Feature card (Why Donate etc.) — builds on kit .card ── */
.jb-feature-icon{width:56px;height:56px;border-radius:var(--radius);background:var(--brand-mist);
  color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.jb-feature-icon .icon{width:26px;height:26px}

/* ── Blood group badge ── */
.jb-blood-badge{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:var(--radius-sm);background:var(--brand);color:var(--on-brand);
  font-weight:800;font-size:1rem;flex:none}
.jb-blood-badge--sm{width:36px;height:36px;font-size:.8rem}
.jb-blood-badge--lg{width:64px;height:64px;font-size:1.25rem;border-radius:var(--radius)}

/* urgency pulse — critical urgency badges blink gently (kit .badge supplies colour) */
.jb-urgency--critical{animation:jb-pulse 2s infinite}
@keyframes jb-pulse{0%,100%{opacity:1}50%{opacity:.65}}
@media(prefers-reduced-motion:reduce){.jb-urgency--critical{animation:none}}

/* ── Request card grid ── */
.jb-request-card{display:flex;gap:14px;height:100%;color:inherit}
.jb-request-card h3{font-size:1rem;font-weight:700;margin:0}
.jb-request-card__info{flex:1;min-width:0}
.jb-request-card__meta{color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;
  gap:4px 12px;margin-top:4px}
.jb-request-card__meta .icon{color:var(--brand)}
a.jb-request-card:hover{text-decoration:none}

/* ── Donor card ── */
.jb-donor-card{display:flex;align-items:center;gap:14px}
.jb-donor-avatar{width:52px;height:52px;border-radius:50%;background:var(--brand-mist);
  color:var(--brand);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.2rem;flex:none}

/* ── Blood group chips (interactive filter — kit .chip--btn restyled) ── */
.jb-blood-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.jb-blood-chip{min-width:52px;min-height:44px;justify-content:center;font-weight:700}

/* ── Contact / detail page ── */
.jb-contact-card{border-left:4px solid var(--brand)}
.jb-detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.jb-detail-grid{grid-template-columns:1fr}}
.jb-kv{margin-bottom:14px}
.jb-kv__label{display:flex;align-items:center;gap:.35em;color:var(--muted);font-weight:700;
  font-size:.8rem;margin-bottom:2px}
.jb-divider{border:0;border-top:1px solid var(--line-2);margin:16px 0}
.jb-share-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;color:#fff;border:0;cursor:pointer}
.jb-share-btn:hover{filter:brightness(1.1);text-decoration:none}
.jb-share-btn--whatsapp{background:var(--jb-whatsapp)}
.jb-share-btn--facebook{background:var(--jb-facebook)}
.jb-share-btn--x{background:var(--jb-x)}
.jb-share-btn--copy{background:var(--muted)}
.jb-btn-whatsapp{border-color:var(--jb-whatsapp);color:var(--jb-whatsapp)}
.jb-btn-whatsapp:hover{background:var(--jb-whatsapp);border-color:var(--jb-whatsapp);color:#fff}

/* JS-driven pagination buttons share the kit pagination link style */
.pagination button{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;border:1.5px solid var(--line);border-radius:8px;
  color:var(--ink-2);font-weight:600;font-size:var(--fs-sm);background:var(--surface);
  font-family:inherit;cursor:pointer}
.pagination button:hover{border-color:var(--brand-300);background:var(--brand-mist)}
.pagination button:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

.jb-ok-icon{width:44px;height:44px;color:var(--ok)}

/* ── Loading block ── */
.jb-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:44px;gap:14px;color:var(--muted)}

/* ── App download CTA ── */
.jb-cta{background:linear-gradient(135deg,var(--jb-hero-b),var(--jb-hero-a));color:var(--on-brand);
  padding:64px 0;text-align:center;position:relative;overflow:hidden}
.jb-cta h2{color:var(--on-brand);font-size:2.2rem;font-weight:800;margin:0 0 14px}
.jb-cta p{opacity:.92;max-width:500px;margin:0 auto 28px;font-size:1.1rem}
.jb-cta__stores{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.jb-btn-store{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);color:var(--on-brand);padding:10px 22px;
  border-radius:var(--radius);font-weight:600;text-align:left;text-decoration:none;
  transition:background .2s ease}
.jb-btn-store:hover{background:rgba(255,255,255,.26);color:var(--on-brand);text-decoration:none}
.jb-btn-store .icon{width:26px;height:26px}
.jb-btn-store small{display:block;font-size:.7rem;opacity:.8;font-weight:500}
@media(max-width:768px){.jb-cta h2{font-size:1.6rem}}

/* ── Footer ── */
.jb-footer{background:var(--jb-footer-bg);color:var(--jb-footer-ink);padding:56px 0 0;margin-top:0}
.jb-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 2fr;gap:28px}
@media(max-width:900px){.jb-footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.jb-footer__grid{grid-template-columns:1fr}}
.jb-footer h2{color:#fff;font-weight:700;font-size:1.05rem;margin:0 0 16px;
  display:flex;align-items:center;gap:8px}
.jb-footer h2 img{height:28px;width:auto}
.jb-footer p{font-size:.93rem}
.jb-footer__disclaimer{font-size:.85rem;opacity:.65}
.jb-footer__links{list-style:none;padding:0;margin:0}
.jb-footer__links li{margin-bottom:9px}
.jb-footer__links a{display:inline-flex;align-items:center;gap:.4em;
  color:var(--jb-footer-ink);font-size:.93rem}
.jb-footer__links a:hover{color:#fff}
.jb-footer__stores{display:flex;gap:10px;flex-wrap:wrap}
.jb-footer__stores .jb-btn-store{background:var(--jb-footer-chip);border:0;
  font-size:.82rem;padding:7px 13px}
.jb-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:12px;border-top:1px solid var(--jb-footer-line);padding:22px 0;margin-top:40px;
  font-size:.85rem;color:var(--jb-footer-ink-dim)}
.jb-footer__social{display:flex;gap:10px}
.jb-footer__social a{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:var(--jb-footer-chip);color:#fff;
  transition:background .2s ease}
.jb-footer__social a:hover{background:var(--brand)}
.jb-footer a:focus-visible,.jb-footer__social a:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ── Print ── */
@media print{
  .jb-hero,.jb-cta,.jb-stats,.btn,.site-header,.jb-footer,.toast-container{display:none !important}
  body{font-size:12pt;color:#000}
  .card{border:1px solid var(--line);box-shadow:none;break-inside:avoid}
  a[href]::after{content:" (" attr(href) ")";font-size:.8em;color:var(--muted)}
  .jb-blood-badge{border:2px solid var(--brand)}
}

/* Public website refresh — shared components and emergency-first home. */
:root{--wrap:1200px;--radius:14px;--radius-lg:22px;--jb-footer-bg:#202b2b;--jb-art-bg:#f7ece6;--jb-art-line:#e7d1c8;--jb-art-ink:#863a32}
:root[data-theme="dark"]{--jb-art-bg:#302024;--jb-art-line:#5e3a40;--jb-art-ink:#f5b9b0}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--jb-art-bg:#302024;--jb-art-line:#5e3a40;--jb-art-ink:#f5b9b0}}
.site-header__inner{min-height:82px}
.site-header .brand{gap:9px;white-space:nowrap}
.site-header .brand span{color:var(--ink);font-size:22px;letter-spacing:-1px}
.nav__link{font-size:13px;padding:9px 10px}
.btn{min-height:44px}
.field__input{min-height:48px}
.jb-page-header{padding:40px 0}
.jb-page-header h1{font-size:clamp(1.7rem,3vw,2.5rem)}
.jb-section__title::after{display:none}
.jb-footer-contact{color:var(--jb-footer-ink)}
.jb-eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:700;color:var(--brand);display:flex;align-items:center;gap:9px;line-height:1.5}
.jb-status-dot{height:7px;width:7px;background:var(--ok);border-radius:50%}
.jb-home-hero{padding:66px 0 60px;background:var(--bg)}
.jb-home-hero__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:76px;align-items:center}
.jb-home-hero h1{font-size:clamp(2.6rem,4.2vw,4rem);letter-spacing:-2.6px;line-height:1.12;margin:22px 0;color:var(--ink);font-weight:800}
.jb-home-hero h1 span{color:var(--brand)}
.jb-home-hero__copy>p{max-width:460px;color:var(--muted);font-size:17px;line-height:1.8}
.jb-home-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.jb-hero-note{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;margin-top:25px}
.jb-hero-note .icon{color:var(--brand)}
.jb-finder{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.jb-finder__illustration{height:200px;position:relative;overflow:hidden;background:var(--jb-art-bg);display:flex;align-items:center;justify-content:center}
.jb-orbit{position:absolute;border:1px solid var(--jb-art-line);border-radius:50%;width:240px;height:240px}
.jb-orbit--two{width:370px;height:370px}
.jb-drop{width:95px;height:95px;display:grid;place-items:center;background:var(--brand);border-radius:50%;box-shadow:0 0 0 14px var(--jb-art-line)}
.jb-drop .icon{width:53px;height:53px;color:var(--on-brand)}
.jb-orbit-label{position:absolute;font-size:16px;font-weight:800;color:var(--jb-art-ink);background:var(--surface);border:1px solid var(--jb-art-line);border-radius:12px;padding:8px 13px}
.jb-orbit-label--a{left:15%;top:26px}.jb-orbit-label--b{right:14%;top:51px}.jb-orbit-label--c{left:22%;bottom:36px}
.jb-connection{position:absolute;bottom:12px;font-size:11px;color:var(--jb-art-ink)}
.jb-finder__body{padding:27px 30px}
.jb-finder h2{font-size:22px;margin:9px 0 8px;letter-spacing:-.7px}
.jb-finder p{font-size:13px;color:var(--muted);margin:0 0 20px}
.jb-finder__form{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px}
.jb-finder__form .field{margin:0;min-width:0}
.jb-finder__form .field__input{width:100%}
.jb-finder__form>.btn{grid-column:1/-1;width:100%}
.jb-finder__bank{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;margin-top:17px;color:var(--muted)}
.jb-home .jb-stats{padding:24px 0 12px;border-top:1px solid var(--line)}
.jb-home .jb-stat{border-right:1px solid var(--line)}
.jb-home .jb-stat:last-child{border:0}
.jb-home .jb-stat__number{color:var(--ink);font-size:29px;margin-bottom:8px}
.jb-stats-status{text-align:center;font-size:11px;color:var(--muted);margin:10px 0 0}
.jb-home .jb-section{padding:64px 0}
.jb-section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
.jb-section-heading h2,.jb-compat-layout h2{font-size:clamp(1.6rem,2.7vw,2rem);letter-spacing:-1px;margin:10px 0}
.jb-section-heading p{margin:0;color:var(--muted)}
.jb-home .jb-request-card{padding:23px;box-shadow:none}
.jb-home .jb-blood-badge{background:var(--brand-mist);color:var(--brand);border:1px solid var(--bad-line)}
.jb-home-step{padding:25px 27px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.jb-home-step>span{display:block;font-size:10px;letter-spacing:1.5px;color:var(--muted);margin-bottom:23px;font-weight:700}
.jb-home-step h3{font-size:18px;margin:17px 0 10px}
.jb-home-step p{font-size:14px;color:var(--muted);margin-bottom:22px}
.jb-home-step>a{font-size:13px;font-weight:700}
.jb-compat-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;align-items:center}
.jb-compat-panel{border:1px solid var(--line);padding:25px;border-radius:18px;background:var(--surface)}
.jb-compat-panel .jb-blood-chips{gap:7px}
.jb-compat-panel .jb-blood-chip{min-width:46px;flex:1}
.jb-compat-panel .card{box-shadow:none;padding:16px}
.jb-compat-panel .card__title{font-size:14px}
.jb-donor-cta{background:var(--brand-mist);border-top:1px solid var(--line);padding:50px 0}
.jb-donor-cta>.wrap{display:flex;align-items:center;justify-content:space-between;gap:25px}
.jb-donor-cta h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:13px 0;letter-spacing:-1px}
.jb-donor-cta p{color:var(--muted);margin:0}
/* Scroll reveal is retired: content ships visible, no animation. */
.jb-fade-in{opacity:1;transform:none}
/* Kit tabs use overflow-x:auto — hide the stray desktop scrollbar. */
.tabs{scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
/* CMS static pages (/page/{slug}) — readable long-form typography. */
.jb-static-page{line-height:1.8}
.jb-static-page h2{font-size:1.35rem;font-weight:800;margin:28px 0 10px;letter-spacing:-.4px}
.jb-static-page h3{font-size:1.1rem;font-weight:700;margin:22px 0 8px}
.jb-static-page h2:first-child,.jb-static-page h3:first-child{margin-top:0}
.jb-static-page p{margin:0 0 14px;line-height:1.8;color:var(--ink-2)}
.jb-static-page ul,.jb-static-page ol{margin:0 0 16px;padding-left:24px}
.jb-static-page li{margin-bottom:8px;line-height:1.7;color:var(--ink-2)}
.jb-static-page a{color:var(--brand);font-weight:600}
.jb-static-page a:hover{color:var(--brand-600)}
.jb-static-page strong{color:var(--ink)}
@media(max-width:1100px){.jb-home-hero__grid{gap:35px}.nav__actions{gap:4px}.nav__link{padding:8px 6px;font-size:12px}}
@media(min-width:861px) and (max-width:1000px){.site-header .brand span{font-size:18px}.nav__actions .btn{font-size:12px;padding:10px}.site-header__inner{gap:8px}}
@media(max-width:860px){.jb-home-hero__grid{grid-template-columns:1fr;gap:32px}.jb-home-hero{padding:36px 0}.jb-home-hero h1{letter-spacing:-1.6px}.jb-home-hero__copy>p{max-width:600px}.jb-finder{max-width:600px;width:100%}.jb-finder__illustration{height:150px}.jb-compat-layout{grid-template-columns:1fr;gap:24px}.jb-home .jb-grid--3{grid-template-columns:1fr}.jb-home .jb-stat:nth-child(2){border:0}.jb-section-heading{align-items:flex-start}.jb-home .jb-section{padding:40px 0}}
@media(max-width:560px){.jb-section-heading,.jb-donor-cta>.wrap{flex-direction:column;align-items:flex-start}.jb-finder__body{padding:23px 20px}.jb-finder__form{grid-template-columns:1fr}.jb-home-hero h1{font-size:37px}.jb-hero-note{font-size:11px}.jb-compat-panel{padding:18px}.jb-home .jb-stat__label{font-size:12px}.jb-home-actions>.btn{flex:1;font-size:13px;padding:13px 10px}.jb-donor-cta .btn{width:100%}.jb-blood-chips{display:grid;grid-template-columns:repeat(4,1fr)}}