/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


  :root{
    /* ---- brand marks: these match the logo SVG exactly ---- */
    --teal-brand:#22b8d8;
    --green-brand:#7ed957;

    /* ---- functional colours: brand hues darkened to clear WCAG AA on white ---- */
    --navy:#0d1f4c;
    --navy-deep:#0a1738;
    --teal:#10809f;          /* 4.6:1 on white */
    --teal-bright:#22b8d8;
    --green:#457d1b;         /* 5.0:1 on white */
    --ink:#1a2540;
    --slate:#5a6784;
    --faint:#66738d;         /* 4.8:1 on white, was #8592aa at 3.1:1 */

    /* ---- gradients ---- */
    --grad-a:#10809f;        /* white text sits on this ramp: every stop clears 4.5:1 */
    --grad-b:#437f22;
    --grad-text-a:#1795b8;   /* large display text only: clears 3:1 */
    --grad-text-b:#559f2e;

    --line:rgba(13,31,76,.10);
    --glass:rgba(247,250,254,.72);
    --glass-solid:#f6f9fd;
    --nav-solid:#ffffff;
    --btn-solid:#f5f9fc;
    --glass-border:rgba(13,31,76,.08);
    --shadow:0 14px 40px -18px rgba(13,31,76,.16);

    /* surfaces, tokenised so the theme can swap them */
    --page:#ffffff;
    --nav-bg:rgba(255,255,255,.75);
    --nav-border:rgba(13,31,76,.08);
    --nav-shadow:0 10px 30px -14px rgba(13,31,76,.2);
    --btn-bg:rgba(247,250,254,.9);
    --btn-border:rgba(13,31,76,.12);
    --problem-tint:rgba(13,31,76,.03);
    --blob-op:.10;
    --band-a:#12234f;
    --band-b:#0d1b3e;
    --kicker:#0f7d97;

    /* live product screens */
    --scr-frame:#e9edf4;
    --scr-panel:#ffffff;
    --scr-line:#e5e9f1;
    --scr-ink:#16203a;
    --scr-mute:#55607a;
    --scr-faint:#687388;
    --scr-rail:#1e2a4d;
    --scr-chrome:#f4f6fa;
    --scr-tint:#f7f9fc;
    --sir-r:#a5322b; --sir-r-bg:rgba(194,65,58,.09);
    --sir-i:#8a6012; --sir-i-bg:rgba(240,170,40,.14);
    --sir-s:#446c19; --sir-s-bg:rgba(132,195,65,.14);
    --sir-r-bar:#d9534d; --sir-i-bar:#eaa72c; --sir-s-bar:#7cb342;

    /* solid chips that always carry white text, so they stay fixed across themes */
    --pill-r:#a5322b; --pill-i:#8a6012; --pill-s:#446c19;
  }

  [data-theme="dark"]{
    --navy:#e8edf7;              /* headings invert to near-white */
    --navy-deep:#070d1e;
    --teal:#3cc2e4;
    --teal-brand:#4fd2f0;
    --teal-bright:#4fd2f0;
    --green:#9bd955;
    --green-brand:#9bd955;
    --grad-text-a:#4fd2f0;
    --grad-text-b:#9bd955;
    --ink:#c7d0e2;
    --slate:#94a1bd;
    --line:rgba(255,255,255,.10);
    --glass:rgba(24,34,60,.62);
    --glass-solid:#141d34;
    --nav-solid:#111a30;
    --btn-solid:#1a2236;
    --glass-border:rgba(255,255,255,.09);
    --shadow:0 18px 46px -20px rgba(0,0,0,.6);

    --page:#0b1226;
    --nav-bg:rgba(17,26,48,.78);
    --nav-border:rgba(255,255,255,.10);
    --nav-shadow:0 12px 34px -16px rgba(0,0,0,.7);
    --btn-bg:rgba(255,255,255,.06);
    --btn-border:rgba(255,255,255,.14);
    --faint:#8290ab;
    --problem-tint:rgba(255,255,255,.02);
    --blob-op:.16;
    --band-a:#1b2846;
    --band-b:#111c38;
    --kicker:#4fd2f0;

    --scr-frame:#0f1830;
    --scr-panel:#151f39;
    --scr-line:rgba(255,255,255,.09);
    --scr-ink:#dbe3f2;
    --scr-mute:#a3aec6;
    --scr-faint:#8a97b1;
    --scr-rail:#0a1123;
    --scr-chrome:#111a31;
    --scr-tint:#18233e;
    --sir-r:#ef8b84; --sir-r-bg:rgba(217,83,77,.16);
    --sir-i:#e6b451; --sir-i-bg:rgba(234,167,44,.16);
    --sir-s:#a7d472; --sir-s-bg:rgba(124,179,66,.18);
    --sir-r-bar:#d9534d; --sir-i-bar:#eaa72c; --sir-s-bar:#7cb342;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-padding-top:96px}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

  /* keyboard focus, visible on every surface */
  :focus-visible{outline:2px solid var(--teal-brand);outline-offset:3px;border-radius:6px}

  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--page);color:var(--navy);
    padding:12px 18px;border-radius:0 0 12px 0;font-weight:600;text-decoration:none;border:1px solid var(--line)}
  .skip:focus{left:0}
  body{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:var(--ink);
    background:var(--page);
    transition:background .35s ease,color .35s ease;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* solid white background with a whisper of tint top-right so the glass still reads */
  .bg-field{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--page);transition:background .35s ease}
  .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--blob-op)}
  .blob.b1{width:460px;height:460px;background:radial-gradient(circle,#22b8d6,transparent 70%);top:-160px;right:-120px}
  .blob.b2{width:420px;height:420px;background:radial-gradient(circle,#84c341,transparent 70%);bottom:8%;left:-160px}

  .wrap{max-width:1160px;margin:0 auto;padding:0 26px}
  section{position:relative;padding:96px 0}

  /* ---------- glass primitives ---------- */
  .glass{
    background:var(--glass);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border:1px solid var(--glass-border);
    border-radius:22px;
    box-shadow:var(--shadow);
  }

  /* ---------- nav ---------- */
  header{position:fixed;top:14px;left:0;right:0;z-index:50}
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 22px;border-radius:18px;
    background:var(--nav-bg);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--nav-border);
    box-shadow:var(--nav-shadow);
    transition:background .35s ease,border-color .35s ease;
  }
  .brand{display:flex;align-items:center;gap:9px;text-decoration:none}
  .theme-btn{
    width:38px;height:38px;flex:none;border-radius:11px;cursor:pointer;
    background:var(--btn-bg);border:1px solid var(--btn-border);
    display:grid;place-items:center;transition:background .25s,transform .2s;margin-left:6px;
  }
  .theme-btn:hover{transform:translateY(-2px)}
  .theme-btn svg{width:17px;height:17px;stroke:var(--navy);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .theme-btn .moon{display:none}
  [data-theme="dark"] .theme-btn .moon{display:block}
  [data-theme="dark"] .theme-btn .sun{display:none}
  .brand-mark{height:22px;width:auto;display:block}
  .brand-text{font-weight:800;font-size:1.22rem;color:var(--navy);letter-spacing:-.02em;line-height:1}
  @media(max-width:520px){.brand-text{font-size:1.05rem}.brand-mark{height:19px}}
  .footer-brand{display:inline-flex;align-items:center;gap:11px;margin-bottom:6px;text-decoration:none}
  .footer-mark{height:30px;width:auto;display:block}
  .footer-brand .t{font-weight:800;font-size:1.5rem;color:var(--navy);letter-spacing:-.02em}
  .footer-tag{font-size:.8rem;letter-spacing:.05em;color:var(--slate);margin:0 0 16px}
  /* the links live in the drawer at every width: one place to navigate, no split system */
  .nav-links{display:none;gap:20px;align-items:center}
  .nav-links a{text-decoration:none;color:var(--slate);font-weight:500;font-size:.92rem;transition:color .2s;white-space:nowrap}
  .nav-links a:hover{color:var(--navy)}
  /* the drawer CTA belongs to the open drawer only, never the bar */
  .drawer-cta{display:none}
  .nav-cta{
    background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
    color:#fff;padding:9px 18px;border-radius:12px;font-weight:600;font-size:.9rem;
    text-decoration:none;box-shadow:0 8px 20px -6px rgba(16,128,159,.5);transition:transform .2s,box-shadow .2s;
    margin-left:auto; /* holds the brand left and groups the CTA, toggle and burger right */
  }
  .nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(16,128,159,.6)}
  /* inline primary links, desktop only. The burger still opens the full 8-section menu. */
  .nav-primary{display:none}
  @media(min-width:901px){
    /* brand sits left, links centre in the free space, actions group right */
    .nav-primary{display:flex;align-items:center;gap:30px;margin-left:auto;margin-right:auto}
    .nav-primary a{text-decoration:none;color:var(--slate);font-weight:500;font-size:.92rem;
      white-space:nowrap;transition:color .2s}
    .nav-primary a:hover{color:var(--navy)}
    .nav-cta{margin-left:0}
  }
  .burger{display:flex;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;order:4}
  .burger span{width:22px;height:2px;background:var(--navy);border-radius:2px}
  .theme-btn{order:3}
  .nav{gap:10px}
  .nav.open{flex-wrap:wrap}
  .nav.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    width:100%;order:5;margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
  }
  .nav.open .nav-links a{padding:11px 4px;font-size:1rem;border-bottom:1px solid var(--line)}
  .nav.open .nav-links a:last-of-type{border-bottom:none}
  .nav.open .nav-links::after{content:none}
  .nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0}
  .nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media(min-width:701px){
    /* wide drawer: lay the links out in columns rather than one thin ladder */
    .nav.open .nav-links{
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 18px;
    }
    .nav.open .nav-links a{border-bottom:none;padding:10px 10px;border-radius:9px}
    .nav.open .nav-links a:hover{background:var(--btn-bg);color:var(--navy)}
    /* the bar already carries the CTA at this width, so the drawer must not repeat it */
    .nav.open .drawer-cta{display:none}
  }
  @media(max-width:700px){
    /* on phones the CTA drops into the drawer so the bar keeps breathing room */
    .nav > .nav-cta{display:none}
    .theme-btn{margin-left:auto}
    /* a real CTA at the foot of the open drawer, full width, easy thumb target */
    .nav.open .drawer-cta{
      display:block;order:6;width:100%;margin-top:12px;text-align:center;
      background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;
      padding:14px 18px;border-radius:12px;font-weight:600;font-size:1rem;text-decoration:none;
    }
  }
  @media(max-width:400px){
    .nav{padding:11px 16px}
    .theme-btn{width:34px;height:34px}
    .brand{gap:7px}
  }
  .burger span{transition:transform .25s,opacity .2s}

  /* ---------- hero ---------- */
  .hero{padding:150px 0 96px;text-align:center}
  .eyebrow{
    display:inline-flex;align-items:center;gap:11px;
    padding:9px 18px;border-radius:22px;font-size:.8rem;font-weight:600;letter-spacing:.02em;
    color:var(--navy);margin-bottom:42px;text-align:left;
    background:var(--btn-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--btn-border);
  }
  .eyebrow-t{line-height:1.35;text-align:center}
  .eyebrow-t b{display:block;font-weight:600}
  .eyebrow-t span{display:block;font-weight:500;color:var(--slate);letter-spacing:.04em}
  .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--green-brand);box-shadow:0 0 0 4px rgba(126,217,87,.25)}
  .hero h1{font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.08;letter-spacing:-.03em;font-weight:800;color:var(--navy);max-width:15ch;margin:0 auto 28px}
  .hero h1 .grad{background:linear-gradient(120deg,var(--grad-text-a),var(--grad-text-b));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero p.lead{font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.7;color:var(--slate);max-width:54ch;margin:0 auto 44px}
  .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .btn-primary{
    background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;
    padding:15px 30px;border-radius:14px;font-weight:600;font-size:1rem;text-decoration:none;
    box-shadow:0 14px 34px -10px rgba(16,128,159,.55);transition:transform .2s,box-shadow .2s;
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(16,128,159,.65)}
  .btn-ghost{
    padding:15px 30px;border-radius:14px;font-weight:600;font-size:1rem;text-decoration:none;color:var(--navy);
    background:var(--btn-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--btn-border);transition:transform .2s;
  }
  .btn-ghost:hover{transform:translateY(-3px)}

  /* floating alert card in hero */
  .hero-visual{margin-top:64px;display:flex;justify-content:center}
  .alert-card{width:100%;max-width:440px;padding:26px;text-align:left}
  @keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
  /* staggered reveal of the alert body: drugs settle in one by one, suggestion lands last.
     Held hidden until the card scrolls into view (.play), so the cascade plays where it's seen. */
  @keyframes drugIn{to{opacity:1;transform:none}}
  @keyframes drugGlow{0%,100%{box-shadow:0 0 0 0 rgba(126,217,87,0)}40%{box-shadow:0 0 0 3px rgba(126,217,87,.45)}}
  .js .alert-card{opacity:0}
  .js .alert-card.play{animation:rise .9s ease both}
  .js .alert-card .drug,.js .alert-card .suggest{opacity:0;transform:translateY(10px)}
  .js .alert-card.play .drug{animation:drugIn .5s cubic-bezier(.22,1,.36,1) forwards}
  .js .alert-card.play .drug:nth-child(4){animation-delay:.5s}
  .js .alert-card.play .drug:nth-child(5){animation-delay:.66s}
  .js .alert-card.play .drug:nth-child(6){animation-delay:.82s}
  .js .alert-card.play .drug:nth-child(7){animation-delay:.98s}
  .js .alert-card.play .drug.hi{animation:drugIn .5s cubic-bezier(.22,1,.36,1) .82s forwards, drugGlow 1.7s ease 1.4s}
  .js .alert-card.play .suggest{animation:drugIn .55s cubic-bezier(.22,1,.36,1) forwards;animation-delay:1.25s}
  .alert-card .tag{font-size:.72rem;letter-spacing:.12em;font-weight:700;color:var(--slate);text-transform:uppercase}
  .alert-card h3{font-size:1.25rem;font-style:italic;color:var(--navy);margin:6px 0 2px}
  .alert-card .sub{font-size:.85rem;color:var(--slate);margin-bottom:16px}
  .drug{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:12px;margin-bottom:9px;font-weight:600;font-size:.95rem}
  .drug.r{background:var(--sir-r-bg);color:var(--sir-r)}
  .drug.i{background:var(--sir-i-bg);color:var(--sir-i)}
  .drug.s{background:var(--sir-s-bg);color:var(--sir-s)}
  .pill{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:.78rem;font-weight:700}
  .pill.r{background:var(--pill-r)}.pill.i{background:var(--pill-i)}.pill.s{background:var(--pill-s)}
  .suggest{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem;color:var(--slate)}
  .suggest b{color:var(--green)}

  /* ---------- section headings ---------- */
  .kicker{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kicker);margin-bottom:14px}
  h2.sec{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.1;letter-spacing:-.025em;font-weight:800;color:var(--navy);max-width:20ch}
  .sec-lead{font-size:1.08rem;color:var(--slate);max-width:62ch;margin-top:16px}

  /* ---------- problem ---------- */
  .problem{background:linear-gradient(180deg,transparent,var(--problem-tint))}
  .problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:20px}
  .bignum{font-size:clamp(4rem,11vw,8.5rem);font-weight:900;line-height:.9;letter-spacing:-.04em;
    background:linear-gradient(120deg,var(--navy),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
  .stat-card{padding:30px}
  .stat-card p{color:var(--slate);margin-top:10px}
  .stat-card .src{font-size:.8rem;color:var(--faint);margin-top:16px}
  .stat-col{display:flex;flex-direction:column}
  .stat-note{margin-top:26px;max-width:none}
  .problem .pivot{font-weight:700;color:var(--navy);font-size:1.15rem;max-width:none}
  @media(max-width:820px){.problem-grid{grid-template-columns:1fr;gap:24px}}

  /* ---------- feature grid ---------- */
  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}
  .group-label{font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin:48px 0 4px;display:flex;align-items:center;gap:14px}
  .group-label:first-of-type{margin-top:40px}
  .group-label::after{content:"";flex:1;height:1px;background:var(--line)}
  .group-label.edge{color:var(--teal)}
  .feat{padding:28px;position:relative}
  .feat .num{display:block;font-size:.8rem;font-weight:700;letter-spacing:.14em;color:var(--teal);margin-bottom:12px}
  .feat::before{content:"";position:absolute;top:28px;right:28px;width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal-brand),var(--green-brand));opacity:.7}
  .feat h3{font-size:1.12rem;color:var(--navy);margin-bottom:8px;letter-spacing:-.01em}
  .feat p{font-size:.95rem;color:var(--slate)}
  .feat-grid.four{grid-template-columns:repeat(2,1fr)}
  @media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.feat-grid,.feat-grid.four{grid-template-columns:1fr}}

  /* ---------- capabilities columns ---------- */
  .cap-wrap{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .cap{padding:30px}
  .cap h4{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kicker);margin-bottom:18px}
  .cap ul{list-style:none;display:flex;flex-direction:column;gap:13px}
  .cap li{display:flex;gap:11px;font-size:.95rem;color:var(--ink)}
  .cap li .tick{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--teal);margin-top:1px;
    display:grid;place-items:center}
  .cap li .tick::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-brand)}
  .cap li b{font-weight:600;color:var(--navy)}
  /* label-led items: name on top, detail lighter beneath */
  .cap li .ci{display:flex;flex-direction:column;gap:1px}
  .cap li .cl{font-weight:650;color:var(--navy);line-height:1.25}
  .cap li .cd{font-size:.84rem;color:var(--slate);line-height:1.38}
  .cap ul{gap:14px}
  @media(max-width:820px){.cap-wrap{grid-template-columns:1fr}}

  /* ---------- dark glass band ---------- */
  .band{
    position:relative;border-radius:32px;overflow:hidden;margin:0 auto;padding:66px 50px;
    background:linear-gradient(140deg,var(--band-a),var(--band-b));
    box-shadow:0 40px 90px -30px rgba(13,27,62,.6);
  }
  .band::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;
    background:radial-gradient(circle,rgba(34,184,214,.35),transparent 70%);top:-120px;right:-80px;filter:blur(30px)}
  .band::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;
    background:radial-gradient(circle,rgba(132,195,65,.28),transparent 70%);bottom:-140px;left:-60px;filter:blur(30px)}
  .band .kicker{color:var(--teal-bright)}
  .band h2{color:#fff}
  @media(max-width:820px){.band{padding:48px 26px}}

  /* ---------- live product screens ---------- */
  .screen-wrap{margin:52px auto 0;max-width:1080px}
  .screen{
    border-radius:16px;overflow:hidden;background:var(--scr-frame);
    border:1px solid var(--glass-border);
    box-shadow:0 40px 80px -34px rgba(13,27,62,.5),0 2px 8px -3px rgba(13,27,62,.12);
  }
  .chrome{display:flex;align-items:center;gap:14px;padding:11px 16px;background:var(--scr-chrome);border-bottom:1px solid var(--scr-line)}
  .dots{display:flex;gap:6px}
  .dots i{width:10px;height:10px;border-radius:50%;background:var(--scr-line);display:block}
  .chrome .path{font-size:12px;color:var(--scr-mute);font-weight:500}
  .chrome .path b{color:var(--scr-ink);font-weight:600}
  .chrome .scr-pill{margin-left:auto;font-size:9.6px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--scr-mute);border:1px solid var(--scr-line);padding:4px 9px;border-radius:999px}
  .scr-body{display:flex;min-height:100px}
  .mini-rail{width:46px;flex:none;background:var(--scr-rail);display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 0}
  .mini-rail i{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.16);display:block}
  .mini-rail i.on{background:var(--teal-bright);opacity:.9}
  .scr-main{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
  .panel{background:var(--scr-panel);border:1px solid var(--scr-line);border-radius:11px;padding:14px 16px}
  .panel > .ph{display:flex;align-items:center;gap:9px;margin-bottom:11px}
  .panel .ph h5{font-size:13px;font-weight:700;color:var(--scr-ink);letter-spacing:-.01em}
  .panel .ph .side{margin-left:auto;font-size:10.6px;font-weight:600;color:var(--teal)}

  /* patient banner */
  .pt-row{display:flex;align-items:center;gap:14px}
  .pt-av{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;
    background:linear-gradient(135deg,var(--grad-a),var(--grad-b))}
  .pt-nm{font-size:16px;font-weight:750;color:var(--scr-ink);letter-spacing:-.02em;line-height:1.15}
  .pt-meta{font-size:11px;color:var(--scr-mute);margin-top:2px;font-weight:500}
  .pt-chips{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .pt-chips span{font-size:10.2px;font-weight:600;padding:4px 9px;border-radius:6px;background:var(--scr-tint);
    color:var(--scr-mute);border:1px solid var(--scr-line)}
  .pt-chips span.warn{background:var(--sir-r-bg);color:var(--sir-r);border-color:transparent}

  /* medications */
  .med{width:100%;border-collapse:collapse}
  .med th{text-align:left;font-size:9.4px;letter-spacing:.09em;text-transform:uppercase;color:var(--scr-faint);
    font-weight:700;padding:0 0 8px}
  .med td{padding:9px 0;border-top:1px solid var(--scr-line);font-size:11.6px;vertical-align:middle;color:var(--scr-mute)}
  .med .d1{font-weight:650;font-size:12.4px;color:var(--scr-ink)}
  .med .d2{font-size:10.4px;color:var(--scr-mute);margin-top:1px}
  .med tr.flag td{background:var(--sir-i-bg)}
  .med .swap{color:var(--sir-i);font-weight:800;margin-right:4px}
  .mtag{display:inline-block;font-size:9.8px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}
  .mtag.ok{background:var(--sir-s-bg);color:var(--sir-s)}
  .mtag.sw{background:var(--sir-i-bg);color:var(--sir-i)}
  .med-note{margin-top:11px;padding-top:10px;border-top:1px dashed var(--scr-line);font-size:10.8px;color:var(--scr-mute);font-weight:500}
  .med-note b{color:var(--scr-ink);font-weight:650}

  /* two-up */
  .scr-two{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;align-items:start}
  .scr-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start;margin-top:12px}
  @media(max-width:900px){.scr-three{grid-template-columns:1fr}}

  /* investigations */
  .lab{border-top:1px solid var(--scr-line);padding:9px 0}
  .lab:first-of-type{border-top:none;padding-top:0}
  .lab .l1{display:flex;align-items:baseline;gap:8px}
  .lab .ln{font-size:11.8px;font-weight:650;color:var(--scr-ink)}
  .lab .ld{margin-left:auto;font-size:9.8px;color:var(--scr-faint);font-weight:600}
  .lab .lo{font-size:10.6px;color:var(--scr-mute);font-style:italic;margin-top:1px}
  .sirs{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
  .sirs span{font-size:9.8px;font-weight:600;padding:3px 7px;border-radius:5px;display:inline-flex;align-items:center;gap:4px}
  .sirs span em{font-style:normal;font-weight:800;font-size:8.6px;width:13px;height:13px;border-radius:3px;color:#fff;
    display:grid;place-items:center}
  .sirs .r{background:var(--sir-r-bg);color:var(--sir-r)} .sirs .r em{background:var(--sir-r-bar)}
  .sirs .i{background:var(--sir-i-bg);color:var(--sir-i)} .sirs .i em{background:var(--sir-i-bar)}
  .sirs .s{background:var(--sir-s-bg);color:var(--sir-s)} .sirs .s em{background:var(--sir-s-bar)}
  .rflag{font-size:9px;font-weight:800;letter-spacing:.03em;background:var(--sir-r-bg);color:var(--sir-r);
    padding:2px 6px;border-radius:4px;font-style:normal;margin-left:6px;white-space:nowrap}

  /* procedures + billing */
  .prow{display:flex;gap:9px;padding:8px 0;border-top:1px solid var(--scr-line)}
  .prow:first-of-type{border-top:none;padding-top:0}
  .prow .pd{width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:5px;flex:none}
  .prow .p1{font-size:11.6px;font-weight:650;color:var(--scr-ink)}
  .prow .p2{font-size:10.4px;color:var(--scr-mute);font-weight:500}
  .brow{display:flex;align-items:center;justify-content:space-between;padding:7px 0;
    border-top:1px solid var(--scr-line);font-size:11.4px;color:var(--scr-mute);font-weight:500}
  .brow:first-of-type{border-top:none;padding-top:0}
  .brow b{color:var(--scr-ink);font-weight:650;font-size:11.8px}
  .rolebox{display:flex;align-items:flex-start;gap:7px;margin-top:10px;padding-top:9px;
    border-top:1px dashed var(--scr-line)}
  .rolebox .lock{flex:none;width:11px;height:13px;margin-top:2px;border:1.4px solid var(--scr-faint);
    border-radius:2px;position:relative}
  .rolebox .lock::before{content:"";position:absolute;left:2px;right:2px;top:-4px;height:5px;
    border:1.4px solid var(--scr-faint);border-bottom:none;border-radius:3px 3px 0 0}
  .rolebox .rx{font-size:10.2px;line-height:1.45;color:var(--scr-faint);font-weight:500}

  /* vitals */
  .vits{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .vits div{background:var(--scr-tint);border:1px solid var(--scr-line);border-radius:8px;padding:8px 9px}
  .vits .k{font-size:8.8px;letter-spacing:.08em;text-transform:uppercase;color:var(--scr-faint);font-weight:700}
  .vits .n{font-size:14px;font-weight:750;color:var(--scr-ink);letter-spacing:-.02em;margin-top:2px}
  .vits .n span{font-size:9.4px;font-weight:600;color:var(--scr-mute);margin-left:1px}

  /* clinical note */
  .cnote{font-size:11.4px;line-height:1.6;color:var(--scr-mute)}
  .sg{margin-top:8px;font-size:9.6px;line-height:1.4;color:var(--scr-faint);font-weight:600;letter-spacing:.01em}

  /* antibiogram */
  .selrow{display:flex;gap:10px;flex-wrap:wrap}
  .sel{flex:1;min-width:180px;display:flex;flex-direction:column}
  .sel .sl{font-size:9.6px;letter-spacing:.08em;text-transform:uppercase;color:var(--scr-faint);font-weight:700;margin-bottom:5px}
  .sel .sv{
    width:100%;appearance:none;-webkit-appearance:none;
    background:var(--scr-tint);border:1px solid var(--scr-line);border-radius:8px;
    padding:9px 30px 9px 11px;font-size:12px;font-weight:600;color:var(--scr-ink);
    font-family:inherit;line-height:1.35;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--scr-faint) 50%),linear-gradient(135deg,var(--scr-faint) 50%,transparent 50%);
    background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
    transition:border-color .2s;
  }
  .sel .sv:hover{border-color:var(--teal)}
  .sel .sv option{background:var(--scr-panel);color:var(--scr-ink);font-style:normal}
  #sel-org{font-style:italic}
  .legend{margin-left:auto;display:flex;gap:10px;align-items:center}
  .legend span{font-size:9.8px;font-weight:600;color:var(--scr-mute);display:inline-flex;align-items:center;gap:4px}
  .legend i{width:9px;height:9px;border-radius:2px;display:block}
  .bar-row{padding:9px 0;border-top:1px solid var(--scr-line)}
  .bar-row:first-of-type{border-top:none}
  .bar-top{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
  .bar-top .bn{font-size:11.6px;font-weight:650;color:var(--scr-ink)}
  .bar-top .bi{margin-left:auto;font-size:9.8px;color:var(--scr-faint);font-weight:600}
  .bar{height:9px;border-radius:5px;overflow:hidden;display:flex;background:var(--scr-line)}
  .bar b{display:block;height:100%;transition:width .7s cubic-bezier(.22,1,.36,1)}
  @keyframes selPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,184,214,0)}45%{box-shadow:0 0 0 4px rgba(34,184,214,.30)}}
  .sel .sv.hint-pulse{animation:selPulse 1.5s ease 3}
  .bar .s{background:var(--sir-s-bar)} .bar .i{background:var(--sir-i-bar)} .bar .r{background:var(--sir-r-bar)}
  .bar-fig{display:flex;gap:12px;margin-top:5px;font-size:9.8px;font-weight:600}
  .bar-fig .fs{color:var(--sir-s)} .bar-fig .fi{color:var(--sir-i)} .bar-fig .fr{color:var(--sir-r)}
  .rank{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:7px;font-size:11.4px;
    width:100%;border:1px solid transparent;background:none;cursor:pointer;text-align:left;font-family:inherit;
    transition:background .18s,border-color .18s}
  .rank:hover{background:var(--scr-tint)}
  .rank.on{background:var(--sir-s-bg);border-color:transparent}
  .rank .rn{font-size:9.8px;font-weight:700;color:var(--scr-faint);width:16px}
  .rank .ro{font-style:italic;color:var(--scr-ink);font-weight:550}
  .rank .rc{margin-left:auto;font-size:10px;font-weight:700;color:var(--scr-mute);background:var(--scr-tint);
    border:1px solid var(--scr-line);padding:2px 7px;border-radius:5px}
  .scr-foot{font-size:10.2px;color:var(--scr-faint);margin-top:9px;line-height:1.5}
  .abg-ctx{font-size:10.8px;line-height:1.5;color:var(--scr-mute);background:var(--scr-tint);
    border-left:2px solid var(--teal);border-radius:0 6px 6px 0;padding:8px 10px;margin-bottom:12px}
  .abg-ctx b{color:var(--scr-ink);font-weight:700}

  .screen-cap{margin-top:16px;font-size:.86rem;color:var(--slate);text-align:center;max-width:70ch;margin-left:auto;margin-right:auto}
  .screen-cap b{color:var(--navy);font-weight:600}

  @media(max-width:900px){
    .scr-two{grid-template-columns:1fr}
    .mini-rail{display:none}
    .pt-chips{display:none}
    .med thead th:nth-child(2),.med td:nth-child(2){display:none}
  }
  @media(max-width:640px){
    .screen-wrap{margin-top:34px}
    .scr-main{padding:12px;gap:12px}
    /* the record is tall on a phone, so hand each panel clear separation */
    .scr-main > .panel,.scr-two > .panel,.scr-three > .panel{
      border:1px solid var(--scr-line);border-radius:12px;padding:12px;background:var(--scr-panel)}
    .scr-two,.scr-three{display:flex;flex-direction:column;gap:12px;margin-top:0;align-items:stretch}
    .scr-two > div[style]{width:100%}
    .scr-two > div[style]{gap:12px !important}
    .med thead th:nth-child(4),.med td:nth-child(4){display:none}
    .med thead th:nth-child(2),.med td:nth-child(2){display:none}
    .vits{grid-template-columns:repeat(3,1fr)}
    .chrome .path{display:none}
    .mini-rail{display:none}
    .pt-row{flex-wrap:wrap;gap:10px}
    .pt-chips{width:100%}
    .scr-pill{font-size:9px}
  }

  /* ---------- audience routing ---------- */
  .doors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
  .door{padding:28px;display:flex;flex-direction:column}
  .door h4{color:var(--navy);font-size:1.05rem;margin-bottom:8px;letter-spacing:-.01em}
  .door p{font-size:.92rem;color:var(--slate);flex:1}
  .door a{
    margin-top:18px;align-self:flex-start;text-decoration:none;font-weight:600;font-size:.9rem;color:var(--teal);
    display:inline-flex;align-items:center;gap:7px;transition:gap .2s
  }
  .door a::after{content:"\2192";font-size:1rem}

  /* ---- surveillance roadmap ---- */
  .stages{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
  .stage{padding:26px;display:flex;flex-direction:column}
  .stage-tag{
    align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    padding:5px 10px;border-radius:999px;margin-bottom:14px
  }
  .stage-tag.now{background:var(--sir-s-bg);color:var(--sir-s)}
  .stage-tag.next{background:var(--sir-i-bg);color:var(--sir-i)}
  .stage-tag.later{background:rgba(16,128,159,.12);color:var(--teal)}
  .stage h4{color:var(--navy);font-size:1.05rem;margin-bottom:12px;letter-spacing:-.01em;line-height:1.3}
  .stage ul{list-style:none;display:flex;flex-direction:column;gap:9px}
  .stage li{font-size:.9rem;color:var(--slate);line-height:1.5;padding-left:16px;position:relative}
  .stage li::before{
    content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;
    background:var(--teal);opacity:.55
  }
  .stage-note{
    max-width:76ch;margin:26px auto 0;text-align:center;font-size:.92rem;
    color:var(--faint);line-height:1.6
  }
  @media (max-width:900px){ .stages{grid-template-columns:1fr} }
  .faq-list{max-width:800px;margin:34px auto 0;display:flex;flex-direction:column;gap:12px}
  .faq-item{padding:0 26px;overflow:hidden}
  .faq-item summary{
    list-style:none;cursor:pointer;padding:22px 0;
    display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
    font-size:1.05rem;font-weight:650;color:var(--navy);letter-spacing:-.01em;line-height:1.35;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{
    content:"";flex:0 0 12px;width:12px;height:12px;margin-top:7px;
    border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
    transform:rotate(45deg);transition:transform .25s ease
  }
  .faq-item[open] summary::after{transform:rotate(-135deg)}
  .faq-item summary:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:6px}
  .faq-a{padding:0 0 24px;color:var(--slate);font-size:.98rem;line-height:1.6;max-width:68ch}
  .faq-a a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
  @media (max-width:560px){
    .faq-item{padding:0 20px}
    .faq-item summary{font-size:.98rem;padding:18px 0}
  }
  .door a:hover{gap:12px}
  @media(max-width:900px){.doors{grid-template-columns:1fr}}

  /* ---------- traction ---------- */
  .trac-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
  .trac{padding:28px;display:flex;flex-direction:column}
  .trac h4{color:var(--navy);font-size:1.05rem;margin-bottom:8px;display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
  .trac h4 .d{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
  .trac p{font-size:.92rem;color:var(--slate)}
  .trac-compact{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
  .trac-mini{padding:16px 18px}
  .trac-mini h4{color:var(--navy);font-size:.92rem;margin:0;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
  .trac-mini h4 .d{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}
  .trac-mini p{font-size:.83rem;color:var(--slate);margin-top:5px}
  @media(max-width:820px){.trac-featured{grid-template-columns:1fr}.trac-compact{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.trac-compact{grid-template-columns:1fr}}

  /* ---------- team ---------- */
  .team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:44px}
  .member{padding:26px;flex:0 1 calc(33.333% - 14px);min-width:0}
  .member .av{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.1rem;margin-bottom:16px;background:linear-gradient(135deg,var(--grad-a),var(--grad-b))}
  .member h4{color:var(--navy);font-size:1.08rem}
  .member .role{color:var(--kicker);font-weight:600;font-size:.85rem;margin-bottom:10px}
  .member p{font-size:.9rem;color:var(--slate)}
  @media(max-width:900px){.member{flex:0 1 100%}}

  /* ---------- funders / vision ---------- */
  .vision-band{text-align:center;padding:74px 40px}
  .vision-band h2{font-size:clamp(1.7rem,3.6vw,2.6rem);color:#fff;max-width:24ch;margin:14px auto 0;line-height:1.15}
  .vision-band p{color:#c3ccdf;max-width:56ch;margin:22px auto 0}

  /* ---------- contact ---------- */
  .contact-card{padding:52px;text-align:center;max-width:760px;margin:0 auto}
  .contact-card h2{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--navy);letter-spacing:-.02em}
  .contact-card p{color:var(--slate);margin:14px auto 30px;max-width:50ch}
  .contact-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
  .contact-row a{text-decoration:none;font-weight:600;color:var(--navy);padding:14px 24px;border-radius:14px;
    background:var(--btn-bg);border:1px solid var(--btn-border);transition:transform .2s,background .35s ease}
  .contact-row a:hover{transform:translateY(-3px)}
  .contact-row a.primary{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;border:none;box-shadow:0 12px 30px -8px rgba(16,128,159,.5)}
  .contact-direct{font-size:.9rem;color:var(--slate);margin:22px auto 0}
  .contact-direct a{color:var(--slate);text-decoration:none;border-bottom:1px solid var(--line)}
  .contact-direct a:hover{color:var(--navy)}

  /* ---------- contact form (mailto) ---------- */
  .contact-form{max-width:560px;margin:4px auto 0;text-align:left}
  .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .cf-field{display:flex;flex-direction:column;gap:6px}
  .cf-field.cf-full{margin-bottom:18px}
  .cf-field > span{font-size:.82rem;font-weight:600;color:var(--navy)}
  .cf-field > span em{font-style:normal;font-weight:500;color:var(--faint)}
  .cf-field input,.cf-field select,.cf-field textarea{
    font-family:inherit;font-size:.95rem;color:var(--ink);width:100%;
    background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:11px;
    padding:12px 14px;transition:border-color .2s}
  .cf-field textarea{resize:vertical;min-height:76px}
  .cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:var(--teal)}
  .cf-submit{border:none;cursor:pointer;width:100%;display:block;text-align:center;margin-top:2px}
  .cf-hint{font-size:.82rem;color:var(--faint);margin:12px 0 0;text-align:center}
  .cf-hint.cf-ok{color:var(--green);font-weight:600}
  .cf-hint.cf-err{color:var(--sir-r);font-weight:600}
  @media(max-width:560px){.cf-row{grid-template-columns:1fr}}

  /* ---------- footer ---------- */
  footer{padding:48px 0 40px;text-align:center;border-top:1px solid var(--line);margin-top:30px}
  footer .brand{justify-content:center;margin-bottom:14px}
  footer p{color:var(--slate);font-size:.88rem}
  footer .fine{color:var(--faint);font-size:.8rem;margin-top:8px;max-width:60ch;margin-left:auto;margin-right:auto}
  .social-row{display:flex;justify-content:center;gap:14px;margin:6px 0 18px}
  .social-row a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--slate);
    transition:transform .2s,color .2s}
  .social-row a:hover{transform:translateY(-2px);color:var(--navy)}
  .social-row svg{width:18px;height:18px;fill:currentColor}

  /* reveal on scroll. Hidden only when JS is confirmed alive, so a script failure
     can never leave the page blank. */
  .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .js .reveal.in{opacity:1;transform:none}

  @media (prefers-reduced-motion:reduce){
    .js .reveal,.js .reveal.in{opacity:1;transform:none;transition:none}
    .alert-card{animation:none;opacity:1 !important}
    .alert-card .drug,.alert-card .suggest{opacity:1 !important;transform:none !important;animation:none !important}
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
      transition-duration:.01ms !important;scroll-behavior:auto !important}
  }

  /* ---- low-power safeguard: touch devices and WebViews without backdrop-filter get
     opaque surfaces and no heavy blur, so scrolling stays smooth on budget Android ---- */
  #rec-meds,#rec-labs,#rec-note,#rec-pay,#m-meds,#m-labs,#m-note,#m-diag,#m-vitals,#m-proc,#m-pay{scroll-margin-top:96px}
  /* ---- desktop vs mobile record swap ---- */
  .rec-mobile{display:none}
  @media(max-width:640px){
    .rec-desktop{display:none}
    .rec-mobile{display:block}
  }
  /* mobile record: full-width cards, clinical picture first, the rest on tap */
  .mrec{flex-direction:column;padding:12px;gap:10px}
  .mrec .panel{width:100%}
  .mrec-top{border:1px solid var(--scr-line);border-radius:12px;padding:13px;background:var(--scr-panel)}
  .mrec-item{border:1px solid var(--scr-line);border-radius:12px;background:var(--scr-panel);overflow:hidden}
  .mrec-head{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:14px 13px;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;
  }
  .mrec-t{display:flex;flex-direction:column;gap:2px;font-size:13.5px;font-weight:700;color:var(--scr-ink)}
  .mrec-t em{font-style:normal;font-size:11px;font-weight:500;color:var(--scr-faint)}
  .mrec-x{position:relative;width:16px;height:16px;flex:none}
  .mrec-x::before,.mrec-x::after{content:"";position:absolute;background:var(--scr-mute);border-radius:2px;transition:transform .25s,opacity .25s}
  .mrec-x::before{top:7px;left:1px;width:14px;height:2px}
  .mrec-x::after{left:7px;top:1px;width:2px;height:14px}
  .mrec-item.open .mrec-x::after{transform:rotate(90deg);opacity:0}
  /* collapse wrapper: a real 0-height clip, not a grid-fraction that leaves a sliver */
  .mrec-body{overflow:hidden}
  .mrec-body > .panel{min-height:0;border-top:1px solid var(--scr-line);border-radius:0;padding:13px;margin:0}
  .js .mrec-body{max-height:0;transition:max-height .3s ease}
  .js .mrec-body > .panel{border-top-color:transparent}
  .js .mrec-item.open .mrec-body{max-height:1200px}
  .js .mrec-item.open .mrec-body > .panel{border-top-color:var(--scr-line)}
  /* no-JS: rows already open, hide the +/- affordance */
  html:not(.js) .mrec-x{display:none}
  @media (prefers-reduced-motion:reduce){.mrec-body{transition:none}}

  /* ---- patient record intro strip ---- */
  .record-intro{
    display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;
    margin-bottom:16px;padding:20px 22px;border-radius:16px;
    background:var(--problem-tint);border:1px solid var(--line);
  }
  .record-intro .ri-lead h3{font-size:1.18rem;letter-spacing:-.02em;color:var(--navy);margin-bottom:7px;line-height:1.2}
  .record-intro .ri-lead p{font-size:.95rem;color:var(--slate);line-height:1.5}
  .ri-jump{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ri-chip{
    display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:11px;
    background:var(--scr-panel,#fff);border:1px solid var(--line);cursor:pointer;
    font-size:.78rem;color:var(--slate);line-height:1.3;transition:border-color .2s,transform .2s;
  }
  .ri-chip b{font-size:.86rem;color:var(--teal);font-weight:700}
  .ri-chip:hover{border-color:var(--teal);transform:translateY(-2px)}
  [data-theme="dark"] .ri-chip{background:rgba(255,255,255,.04)}

  @media(max-width:760px){
    .record-intro{grid-template-columns:1fr;gap:16px;padding:16px}
  }

  @media (pointer:coarse){
    .bg-field .blob{display:none}
    .glass,.nav,.eyebrow,.btn-ghost,.contact-row a,.theme-btn{backdrop-filter:none;-webkit-backdrop-filter:none}
    .glass{background:var(--glass-solid)}
    .nav{background:var(--nav-solid)}
    .eyebrow,.btn-ghost,.contact-row a,.theme-btn{background:var(--btn-solid)}
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .glass{background:var(--glass-solid)}
    .nav{background:var(--nav-solid)}
    .eyebrow,.btn-ghost,.contact-row a,.theme-btn{background:var(--btn-solid)}
  }
  .center{text-align:center;margin:0 auto}
  .center h2.sec,.center .sec-lead{margin-left:auto;margin-right:auto}

  /* ---------- pill tab groups (capabilities, roadmap) — littlebird-style ---------- */
  .tabgroup{margin-top:34px}
  .tab-pills{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:15px;
    background:var(--btn-bg);border:1px solid var(--btn-border);max-width:100%}
  .tab-pill{appearance:none;-webkit-appearance:none;border:none;cursor:pointer;font-family:inherit;
    padding:10px 18px;border-radius:11px;font-size:.9rem;font-weight:600;color:var(--slate);
    background:none;transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap}
  .tab-pill:hover{color:var(--navy)}
  .tab-pill[aria-selected="true"]{color:#fff;
    background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
    box-shadow:0 8px 18px -8px rgba(16,128,159,.5)}
  .tab-panels{margin-top:24px}
  .tab-panel[hidden]{display:none}
  .tab-panel .cap,.tab-panel .stage{max-width:none}
  /* under JS the selected pill names the panel, so the in-card heading/tag is redundant */
  .js .tabgroup .cap h4,.js .tabgroup .stage-tag{display:none}
  @media(min-width:640px){
    .tab-panel .cap ul{display:grid;grid-template-columns:1fr 1fr;gap:15px 34px}
  }
  @media (prefers-reduced-motion:no-preference){
    .tab-panel:not([hidden]){animation:tabIn .35s ease both}
  }
  @keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media(max-width:600px){
    .tab-pills{width:100%}
    .tab-pill{flex:1 1 auto;text-align:center;padding:10px 10px;font-size:.8rem}
  }