/* ZIVA Design System — extracted from index.html (homepage = source of truth).
   Visual normalization only: tokens, typography, spacing, nav/footer, buttons, cards.
   Never changes copy or imagery. Inline-sized headings keep their size (:not([style*=font-size])). */

:root{
  /* mint retired — mapped to brand purple */
  --mint:var(--z-violet, #7C5CFC); --mint-light:var(--z-lav, #F0ECFF); --mint-deep:var(--z-violet-deep, #3E2C9E); --mint-bright:var(--z-violet-on-dark, #9B85FF);
  --z-violet-on-dark:#9B85FF;
  /* palette */
  --z-navy:#0B1F3B; --z-ink:#0B1F3B; --z-muted:#5C6B7E; --z-off:#F7F8FA;
  --z-panel:#FFFFFF; --z-line:#E3E7EC; --z-violet:#7C5CFC; --z-lav:#F0ECFF;
  --z-violet-soft:rgba(124,92,252,.12);
  /* type */
  --z-head:'Inter',sans-serif; --z-body:'Assistant',sans-serif;
  --z-h1:clamp(44px,5.1vw,70px); --z-h2:clamp(34px,3.6vw,57px);
  --z-h3:clamp(20px,1.7vw,28px); --z-body-size:17px; --z-small:15px;
  /* rhythm */
  --z-gut:clamp(26px,4.6vw,76px); --z-max:1280px;
  --z-sec:clamp(78px,9vh,132px); --z-sec-tight:clamp(64px,7.5vh,114px);
  /* shape */
  --z-r-lg:24px; --z-r:18px; --z-r-sm:12px;
  --z-shadow:0 24px 60px rgba(11,31,59,.12); --z-shadow-soft:0 14px 34px rgba(11,31,59,.07);
  /* ---- brand token unification:every page's local names resolve to one palette ---- */
  --navy:var(--z-navy, #0B1F3B); --navy-light:#EDF2F8; --navy-border:#B9C6D6;
  --white:#FFFFFF; --off-white:#F7F9FC; --warm-gray:#EFF2F6;
  --border:var(--z-line, #E3E7EC); --line:var(--z-line, #E3E7EC);
  --text-primary:var(--z-navy, #0B1F3B); --text-secondary:var(--z-muted, #5C6B7E); --text-muted:var(--z-subtle, #8A97A6);
  --ink:var(--z-navy, #0B1F3B); --muted:var(--z-muted, #5C6B7E); --panel:#FFFFFF;
  --purple:var(--z-violet, #7C5CFC); --purple-light:var(--z-lav, #F0ECFF); --purple-deep:var(--z-violet-deep, #3E2C9E);
  --violet:var(--z-violet, #7C5CFC); --lav:var(--z-lav, #F0ECFF);
  /* accent aliases used across solution pages -> brand purple */
  --acc:var(--z-violet, #7C5CFC); --acc-bright:var(--z-violet-on-dark, #9B85FF); --acc-deep:var(--z-violet-deep, #3E2C9E); --acc-light:var(--z-lav, #F0ECFF);
  --acc-glow:rgba(124,92,252,.10);
  --gold:var(--z-violet, #7C5CFC); --gold-bright:var(--z-violet-on-dark, #9B85FF); --gold-light:var(--z-lav, #F0ECFF);
}

/* ---------- base typography ---------- */
body{font-family:var(--z-body);-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2,h3,h4,.z-display{font-family:var(--z-head)!important;font-weight:700!important}
h1,.z-display{letter-spacing:-.03em!important;line-height:1.05!important}
h2{letter-spacing:-.025em!important;line-height:1.1!important}
h3,h4{letter-spacing:-.015em!important;line-height:1.25!important}
h1:not([style*="font-size"]){font-size:var(--z-h1)}
h2:not([style*="font-size"]){font-size:var(--z-h2);margin-bottom:24px}
h3:not([style*="font-size"]){font-size:var(--z-h3)}
h1 em,h2 em,h3 em,.z-display em,em{font-style:normal!important}

/* ---------- heading color rule: line 1 navy, line 2 purple ---------- */
h1,h2,h3,.sec-h,.hero-h,.h1,.z-display{color:var(--z-navy)}
h1[style*="color:#000"],h2[style*="color:#000"],h3[style*="color:#000"],
h1[style*="color:#111"],h2[style*="color:#111"],h3[style*="color:#111"],
h1[style*="color:#1a1a1a"],h2[style*="color:#1a1a1a"],h3[style*="color:#1a1a1a"],
h1[style*="color:black"],h2[style*="color:black"],h3[style*="color:black"]{color:var(--z-navy)!important}
h1 em,h2 em,h3 em,.sec-h em,.hero-h em,.h1 em,.z-display em{color:var(--z-violet)!important}
/* on navy/dark bands the copy stays light — use the lighter brand tint for line 2 */
.dark h1,.dark h2,.dark h3,.sw-navy h1,.sw-navy h2,.sw-navy h3,
.cta h2,.cta h1,.navy-band h2{color:#fff}
.dark h1 em,.dark h2 em,.dark h3 em,.sw-navy h1 em,.sw-navy h2 em,.sw-navy h3 em,
.cta h2 em,.cta h1 em,.navy-band h2 em{color:var(--z-violet-on-dark)!important}
/* headings written with an inline white color sit on dark bands too */
h1[style*="#fff"] em,h2[style*="#fff"] em,h3[style*="#fff"] em,
h1[style*="#FFF"] em,h2[style*="#FFF"] em,h3[style*="#FFF"] em,
h1[style*="white"] em,h2[style*="white"] em,h3[style*="white"] em{color:var(--z-violet-on-dark)!important}

/* ---------- dark brand sections: one navy ---------- */
.sw-navy,.dark,.cta-navy,.navy-band{background-color:var(--z-navy)}

/* ---------- imagery: one treatment ---------- */
figure img,.photo img,.shot img{border-radius:var(--z-r)}

/* ---------- radii: one scale ---------- */
.card,.metric-tile,.sci-card,.quote-card,.who-card,.out-card,.cta-card,.stat-item,.grid4,.loop,.faq-wrap,.isa-bubble{border-radius:var(--z-r)!important}
.panel,.cta,.eco,.insight-panel{border-radius:var(--z-r-lg)!important}
.pill,.chip{border-radius:var(--z-r-pill, 999px) !important}
p:not([style*="font-size"]){font-size:var(--z-body-size);line-height:1.8;color:var(--z-muted)}
blockquote{font-family:var(--z-body)!important;font-style:normal!important}
a{text-decoration:none}
p > a:not([style*="color"]),li > a:not([class]):not([style*="color"]){color:var(--z-violet)}
p > a:not([style*="color"]):hover,li > a:not([class]):not([style*="color"]):hover{color:var(--z-navy)}

/* ---------- eyebrows / labels ---------- */
.eyebrow{font-family:var(--z-body);font-weight:600}

/* ---------- navigation ---------- */
.nav,.navbar{min-height:72px;padding-left:var(--z-gut)!important;padding-right:var(--z-gut)!important;align-items:center!important}
.nav .brand img,.navbar .brand img,.nav img[src*="ziva-logo"],.navbar img[src*="ziva-logo"]{height:30px!important;width:auto!important;display:block}
.navlinks,.nav-links{display:flex;align-items:center;gap:clamp(20px,2vw,32px)!important;font-family:var(--z-body);font-size:17px!important;font-weight:600!important}
.navlinks a,.nav-links a{color:var(--z-muted);transition:.2s}
.navlinks a:hover,.nav-links a:hover{color:var(--z-navy)}

/* ---------- buttons ---------- */
.btn,.btn-navy,.btn-mint,.btn-provider,.btn-provider-outline,.btn-purple,.btn-outline{
  font-family:var(--z-body)!important;font-weight:600!important;border-radius:var(--z-r-pill, 999px) !important;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  letter-spacing:0;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;text-decoration:none}
.btn,.btn-mint,.btn-provider,.btn-purple{font-size:17px!important;padding:15px 28px!important}
.btn-navy,.btn-outline,.btn-provider-outline{font-size:17px!important;padding:12px 24px!important}
.nav .btn-navy,.navbar .btn-navy,.nav .btn,.navbar .btn{font-size:17px!important;padding:11px 22px!important}
.btn:hover,.btn-navy:hover,.btn-mint:hover,.btn-provider:hover,.btn-purple:hover{transform:translateY(-1px);box-shadow:var(--z-shadow-soft)}

/* ---------- CTA buttons: brand purple everywhere ---------- */
.btn,.btn.primary,.btn-navy,.btn-mint,.btn-provider,.btn-purple,.btn-cta,.cta-btn,.btn-primary,
button.primary,a.btn,.btn-solid{
  background:var(--z-violet)!important;color:#fff!important;border:1px solid var(--z-violet)!important}
.btn:hover,.btn.primary:hover,.btn-navy:hover,.btn-mint:hover,.btn-provider:hover,.btn-purple:hover,.btn-cta:hover,.cta-btn:hover,.btn-primary:hover,button.primary:hover,a.btn:hover,.btn-solid:hover{
  background:var(--z-violet-hover, #6B4BE8)!important;border-color:var(--z-violet-hover, #6B4BE8)!important;color:#fff!important;box-shadow:0 10px 26px rgba(124,92,252,.28)!important}
.btn svg,.btn.primary svg,.btn-navy svg,.btn-mint svg,.btn-provider svg,.btn-purple svg{fill:#fff!important}
/* purple-filled links written with inline mint styles */
a[style*="background:var(--mint)"],a[style*="background: var(--mint)"]{background:var(--z-violet)!important;color:#fff!important}
a[style*="background:var(--mint)"] svg,a[style*="background: var(--mint)"] svg{fill:#fff!important}
/* Individuals hero: large purple CTA */
.btn-mint-lg{background:var(--z-violet)!important;color:#fff!important;border:1px solid var(--z-violet)!important}
.btn-mint-lg:hover{background:var(--z-violet-hover, #6B4BE8)!important;border-color:var(--z-violet-hover, #6B4BE8)!important;color:#fff!important}
.btn-mint-lg svg{fill:#fff!important}
/* secondary / ghost buttons on light surfaces: purple outline */
.btn.secondary,.btn-secondary,.btn-outline,.btn-ghost{
  background:transparent!important;color:var(--z-violet)!important;border:1px solid var(--z-violet)!important}
.btn.secondary:hover,.btn-secondary:hover,.btn-outline:hover,.btn-ghost:hover{
  background:var(--z-violet)!important;color:#fff!important;border-color:var(--z-violet)!important}
/* outline buttons on navy surfaces stay white for legibility */
.btn-provider-outline,.btn-outline-white,.dark .btn-outline,.cta .btn-outline{border-color:rgba(255,255,255,.35)!important;color:rgba(255,255,255,.85)!important;background:transparent!important}
.btn-provider-outline:hover,.btn-outline-white:hover,.dark .btn-outline:hover,.cta .btn-outline:hover{border-color:#fff!important;color:#fff!important;background:transparent!important}

/* ---------- section rhythm + page grid ---------- */
.sec{padding:var(--z-sec) var(--z-gut)!important;max-width:calc(var(--z-max) + 2 * var(--z-gut))!important;margin:0 auto}
.sec-sm{padding:var(--z-sec-tight) var(--z-gut)!important;max-width:calc(var(--z-max) + 2 * var(--z-gut))!important;margin:0 auto}
.section:not([style*="padding"]){padding:var(--z-sec) 0}
.section-tight:not([style*="padding"]){padding:var(--z-sec-tight) 0}

/* ---------- cards / containers ---------- */
.card,.metric-tile,.sci-card,.quote-card,.step,.who-card,.out-card,.cta-card,.stat-item,.isa-bubble{border-radius:var(--z-r)}
.panel,.cta,.eco,.insight-panel{border-radius:var(--z-r-lg)}

/* ---------- footer ---------- */
footer{font-family:var(--z-body)}
footer,.footer{color:var(--z-muted)}
.footer-links{display:flex;gap:clamp(16px,1.6vw,24px);align-items:center}
.footer-links a,footer a:not([class]):not([style*="color"]){font-size:15px!important;color:var(--z-muted)}
footer p,footer span,footer li,footer div{font-size:15px!important}
footer .foot-h,footer h4,footer h5,footer strong{font-size:15px!important}
.footer-links a:hover,footer a:not([class]):not([style*="color"]):hover{color:var(--z-navy)}

/* ---------- eyebrows: no dash rules ---------- */
.eyebrow::before,.eyebrow::after,.eyebrow-c::before,.eyebrow-c::after,
.eyebrow-light::before,.eyebrow-light::after{content:none!important;display:none!important}

/* ---------- accent legibility on dark surfaces ---------- */
.eyebrow-light,.isa-label,.sw-navy .eyebrow,.provider-section .eyebrow,.hero .eyebrow-light,.cta-section .eyebrow{color:var(--z-violet-on-dark)!important}
.isa-label::before{background:var(--z-violet-on-dark)!important}
.provider-section [style*="color:var(--mint)"],.sw-navy [style*="color:var(--mint)"],.hero [style*="color:var(--mint)"],.cta-section [style*="color:var(--mint)"],.dark [style*="color:var(--mint)"]{color:var(--z-violet-on-dark)!important}
.provider-section svg text[fill="var(--mint)"],.hero svg text[fill="var(--mint)"]{fill:var(--z-violet-on-dark)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  :root{--z-gut:22px}
  .navlinks,.nav-links{display:none}
  .sec,.sec-sm{padding-left:22px!important;padding-right:22px!important}
}

/* ---------- no rule/dash marks before eyebrow labels ---------- */
[class*="eyebrow"]::before,[class*="eyebrow"]::after{content:none!important;display:none!important}
span[style*="height:1.5px"][style*="display:block"]:empty,span[style*="height:1.5px"][style*="display:block"]{display:none!important}

/* ---------- background surface normalization: white / off-white / navy only ---------- */
:root{--warm-gray:#F7F9FC!important;--navy-light:#F7F9FC!important;--mint-light:#F7F9FC!important;--green-light:#F7F9FC!important;--red-light:#F7F9FC!important;--amber-light:#F7F9FC!important;--blue-light:#F7F9FC!important;--soft:#F7F9FC!important;--panel:#FFFFFF!important;--off-white:#F7F9FC!important;--white:#FFFFFF!important;
  --navy:#0B1F3B!important;--purple-light:#F0ECFF!important;--lav:#F0ECFF!important}

/* ---------- standardized vertical section rhythm: 80px desktop ---------- */
@media(min-width:1001px){
  section.section,section.section-tight,section.sec,section.sec-alt,section.cta-section,
  section.provider-section,section.cta-footer,section.ii-sec,section.rt-sec,section.hw2,
  section.trust-sec,section.slider-sec,section.contviz,section.off,section.navy,section.dark,
  section:not([class]),section.hero,header.hero,.hero{
    padding-top:80px!important;padding-bottom:80px!important}
  section.hero,header.hero,.hero,body>section:first-of-type:not([class]),body>main>section:first-of-type:not([class]){padding-top:0!important;padding-bottom:0!important}
}

/* ---------- hero fits viewport: first screen readable without scrolling ---------- */
@media(min-width:1001px){
  body>section:first-of-type:not([class]),body>main>section:first-of-type:not([class]),section.hero,header.hero,.hero{min-height:calc(100vh - 76px)!important;max-height:none}
  /* heroes built as .hero > .hero-inner are plain blocks: centre their content in that full-height band */
  section.hero:has(> .hero-inner){display:flex;flex-direction:column;justify-content:center;padding-top:40px!important;padding-bottom:40px!important}
}

/* ---------- keep a phrase on one line (e.g. "See what matters." in hero headlines) ---------- */
.nowrap{white-space:nowrap!important}
@media(max-width:860px){
  /* headlines with a no-wrap phrase drop their fixed desktop box and scale so the phrase fits the phone */
  body h1:has(.nowrap){width:auto!important;height:auto!important;font-size:min(44px,9vw)!important}
  /* home hero: stack copy under the photo instead of squeezing two columns */
  body .hero-grid{grid-template-columns:1fr!important}
}

/* ---------- purple fills: text and icons are always white, like the primary button ---------- */
/* light-violet fills (selected toggles, small action chips) take the primary purple so white text stays readable */
:is([style*="background:var(--gold-bright)"],[style*="background: var(--gold-bright)"],[style*="background:var(--acc-bright)"],[style*="background: var(--acc-bright)"],.lv-btn.a){
  background:var(--z-violet)!important;border-color:var(--z-violet)!important}
:is([style*="background:var(--mint)"],[style*="background: var(--mint)"],[style*="background:var(--purple)"],[style*="background: var(--purple)"],
  [style*="background:var(--gold-bright)"],[style*="background: var(--gold-bright)"],[style*="background:var(--acc-bright)"],[style*="background: var(--acc-bright)"],
  [style*="background:var(--acc)"],[style*="background: var(--acc)"],[style*="background:#7C5CFC"],[style*="background:#7c5cfc"],[style*="background:var(--z-violet)"],[style*="background: var(--z-violet)"],
  .lv-btn.a,.cta-mint,.btn-provider,.btn-mint,.btn-mint-lg){color:#fff!important}
:is([style*="background:var(--mint)"],[style*="background:var(--purple)"],.btn-provider,.btn-mint,.btn-mint-lg) svg:not([fill="none"]){fill:#fff!important}
:is([style*="background:var(--mint)"],[style*="background:var(--purple)"],.btn-provider,.btn-mint,.btn-mint-lg) svg[stroke]:not([stroke="none"]){stroke:#fff!important}

/* ---------- FAQ accordions: when open, the divider moves below the answer ---------- */
:is(.faq-wrap,.sw-alt) details[open]>summary,details[open]:has(>.faq-body)>summary{border-bottom:none}
:is(.faq-wrap,.sw-alt) details[open]>summary+div,details[open]>.faq-body{border-bottom:0.5px solid var(--border)}
:is(.faq-wrap,.sw-alt) details[open]:last-child>summary+div,details[open]:last-child>.faq-body{border-bottom:none}

/* ---------- uniform typography scale (source: Platform Page) ---------- */
:root{--z-font-body:'Assistant',sans-serif;--z-font-display:'Inter',sans-serif}
body{font-family:var(--z-font-body)!important;line-height:1.6}
h1,.hero-h,.hero-h1{font-family:var(--z-font-display)!important;font-size:54px!important;font-weight:600!important;line-height:1.06!important;letter-spacing:-2px!important}
h2,.sec-h,.h2{font-family:var(--z-font-display)!important;font-size:34px!important;font-weight:600!important;line-height:1.1!important;letter-spacing:-0.8px!important}
h3,.h3{font-family:var(--z-font-display)!important;font-size:20px!important;font-weight:600!important;line-height:1.3!important;letter-spacing:-0.3px!important}
h4,h5,h6{font-family:var(--z-font-display)!important;font-size:16px!important;font-weight:600!important;line-height:1.4!important;letter-spacing:-0.1px!important}
h1 em,h2 em,h3 em,.hero-h em,.sec-h em{font-style:normal!important}
.hero-sub{font-family:var(--z-font-body)!important;font-size:16px!important;font-weight:400!important;line-height:1.85!important}
p,.sec-sub{font-family:var(--z-font-body)!important;font-size:18px!important;font-weight:400!important;line-height:1.75!important}
[class*="eyebrow"]{font-family:var(--z-font-body)!important;font-size:14px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:0.09em!important}
.btn,.btn-lg,.btn-navy,.btn-mint,.btn-primary,.btn-outline,.btn-secondary,.btn-ghost,.btn-provider,.btn-provider-outline,.btn-purple,.btn-cta,.cta-btn,button.primary,a.btn{font-family:var(--z-font-body)!important;font-size:17px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:0!important;text-align:center}
.nav a,.nav-links a,.navlinks a{font-family:var(--z-font-body)!important;font-size:17px!important;font-weight:500!important}
p.rt-insight{font-family:var(--z-font-display)!important;font-size:20px!important;font-weight:600!important;line-height:1.35!important;letter-spacing:-.2px!important;color:var(--z-navy)!important}
p.rt-sub{font-family:var(--z-font-body)!important;font-size:14px!important;line-height:1.85!important}
@media(max-width:1000px){
  h1,.hero-h,.hero-h1{font-size:38px!important;letter-spacing:-1.2px!important}
  h2,.sec-h,.h2{font-size:27px!important;letter-spacing:-0.6px!important}
  h3,.h3{font-size:18px!important}
}

/* Keep small uppercase pills/badges and pill buttons on one line (after font-size increase) */
span[style*="text-transform:uppercase"][style*="letter-spacing"],
div[style*="border-radius:100px"] > span[style*="text-transform:uppercase"],
.pill,.cat-pill,.kt-pill,.kt-ev,.chip,.rf-tag,
a[style*="border-radius:100px"],button[style*="border-radius:100px"],
.btn-mint,.btn-outline,.btn-navy,.btn-provider,.btn-provider-outline,.submit-btn,.cta-card-btn{white-space:nowrap}
@media(max-width:520px){a[style*="border-radius:100px"],button[style*="border-radius:100px"],.btn-mint,.btn-outline,.btn-provider,.btn-provider-outline,.cta-card-btn{white-space:normal;text-align:center}}
/* Phone layout helpers for sections built desktop-first: add the class to the element in the page HTML.
   m-stack: one column · m-2col: two columns · m-wrap: let a row wrap · m-fit: drop a fixed desktop width/height and let text wrap */
@media(max-width:640px){.m-stack{grid-template-columns:minmax(0,1fr)!important}.m-2col{grid-template-columns:repeat(2,minmax(0,1fr))!important}.m-wrap{flex-wrap:wrap!important}.m-fit{width:auto!important;height:auto!important;max-width:100%!important;min-width:0!important;white-space:normal!important}}
/* More phone helpers: m-only shows an element only on phones, m-hide hides it there; m-col stacks a
   flex row; m-gut gives a block the standard page side margin; an odd last item in m-2col spans both columns. */
.m-only{display:none}
@media(max-width:640px){.m-only{display:block!important}.m-hide{display:none!important}.m-col{flex-direction:column!important;align-items:stretch!important}.m-gut{padding-left:var(--z-gut, 26px)!important;padding-right:var(--z-gut, 26px)!important}.m-2col>:last-child:nth-child(odd){grid-column:1/-1}}
/* One-column grids on phones: cards may shrink to the screen instead of growing to their widest content (keeps 320px screens from scrolling sideways). */
@media(max-width:640px){.grid-2>*,.feature-strip>*,.ib-two>*,.consumer-grid>*,.ib-demo-body>*,[style*="grid-template-columns"]>*,.metric-row>*,.kt-pgrid>*,.timeline-row>*{min-width:0}.m-wrap>*{max-width:100%}.pill{white-space:normal}}

/* "Too much data → Ziva → One clear understanding" (Providers, Patients, Platform): when the section stacks
   (1000px and below) the desktop flow lines are hidden, so animated down arrows lead into and out of the hub */
@media(max-width:1000px){.zx-cap-a::after,.zx-cap-b::before{content:"";display:block;position:relative;z-index:1;width:14px;height:56px;margin:14px auto;background:radial-gradient(circle,var(--z-violet, #7C5CFC) 0 3px,transparent 3.5px) 50% 0/8px 8px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='56' viewBox='0 0 14 56'%3E%3Cline x1='7' y1='0' x2='7' y2='52' stroke='%237C5CFC' stroke-width='2' stroke-opacity='.55'/%3E%3Cpath d='M2 46l5 7 5-7' fill='none' stroke='%237C5CFC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 56px no-repeat;animation:zxDrop 1.8s ease-in-out infinite}}
@media(max-width:1000px){.zx-cap-a::after{margin-bottom:-38px}.zx-cap-b::before{margin-top:-70px}}
@keyframes zxDrop{0%{background-position:50% 0,center}100%{background-position:50% 80%,center}}
@media(prefers-reduced-motion:reduce){.zx-cap-a::after,.zx-cap-b::before{animation:none;background-position:50% -20px,center}}
/* Integration orbit (Home, Platform) on phones: smaller tiles and labels so neighbours don't overlap. */
@media(max-width:640px){.eco2-node{width:84px!important;gap:6px!important}.eco2-tile{width:64px!important;height:44px!important;border-radius:12px!important}.eco2-lab{font-size:12px!important;min-height:2.4em!important}.eco2-logo{max-width:52px!important;max-height:18px!important}.eco2-logo-sm{max-width:20px!important;max-height:20px!important}.eco2-logo-wide{max-width:48px!important;max-height:14px!important}.eco2-tile svg{width:20px!important;height:20px!important}}
@media(max-width:360px){.eco2-node{width:72px!important;gap:4px!important}.eco2-tile{width:54px!important;height:38px!important;border-radius:10px!important}.eco2-lab{font-size:11px!important}.eco2-logo{max-width:44px!important;max-height:15px!important}.eco2-logo-sm{max-width:17px!important;max-height:17px!important}.eco2-logo-wide{max-width:40px!important;max-height:12px!important}.eco2-tile svg{width:17px!important;height:17px!important}}
/* Story cards (Patients, Solutions): header, the two halves and the before/after table stack on phones. */
@media(max-width:640px){.zs-head{flex-direction:column;align-items:flex-start!important;padding:1.25rem!important}.zs-left{border-right:0!important;border-bottom:0.5px solid var(--border);padding:1.5rem 1.25rem!important}.zs-right{padding:1.5rem 1.25rem!important}.zs-ba{grid-template-columns:1fr 1fr!important;column-gap:12px!important}.zs-ba>:first-child{grid-column:1/-1}.zs-ba>:first-child:empty{display:none}}
/* Phones: navy closing bands and article cards keep the page gutter, article numbers sit above the question; side-by-side correlation diagrams stack. */
@media(max-width:640px){.cta-section,.isabella-section{padding-left:var(--z-gut,26px)!important;padding-right:var(--z-gut,26px)!important}.article-card{padding:1.75rem 1.25rem!important}.article-num{position:static!important;display:block;line-height:1!important;margin:0 0 .6rem!important}.zc-corr>*{border-right:0!important;border-left:0!important;border-bottom:0.5px solid var(--border)}.zc-corr>:last-child{border-bottom:0}}
.m-zoom-wrap{display:contents}
/* Phones: charts tagged m-zoom keep a readable size (--mw, set per chart) and scroll sideways in their m-zoom-wrap. */
@media(max-width:640px){.m-zoom-wrap{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}svg.m-zoom{width:var(--mw)!important;min-width:var(--mw)!important;max-width:none!important;height:auto!important}.m-zoom-wrap::after{content:"Swipe to see the full chart →";display:block;position:sticky;left:0;width:max-content;margin:6px 0 4px;font-size:12px;color:var(--z-muted,#5C6B7E)}}
/* Phones: step-flow diagrams (Gut health, Migraine) shown as a numbered list instead of a wide SVG. */
.zf-steps{list-style:none;margin:0;padding:0;counter-reset:zf}
.zf-steps li{position:relative;counter-increment:zf;padding:0 0 14px 38px;font-size:14px;line-height:1.45;color:var(--z-muted,#5C6B7E)}
.zf-steps li::before{content:counter(zf);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--z-lav,#F0ECFF);color:var(--z-violet-deep,#3E2C9E)}
.zf-steps li:not(:last-child)::after{content:"";position:absolute;left:12.5px;top:30px;bottom:4px;border-left:1px dashed var(--line,#E3E7EC)}
.zf-steps b{display:block;font-size:15px;font-weight:600;color:var(--z-navy,#0B1F3B)}
.zf-steps span,.zf-steps em{display:block;font-style:normal}
.zf-steps em{margin-top:2px;color:var(--z-ink-soft,#3E4C5E)}
.zf-steps li.zf-note{counter-increment:none;padding-left:0;margin-top:4px;font-size:13px}
.zf-steps li.zf-note::before{content:none}
.zf-steps li:has(+ .zf-note)::after{content:none}
/* Phones: stat tiles (m-tile) get tighter padding and their big numbers (m-num) drop to 30px so they fit two to a row; guide stat bars likewise. */
@media(max-width:640px){.m-tile{padding:1.25rem .875rem!important}.m-num{font-size:30px!important;letter-spacing:-.5px!important}.stat-item{padding:1.25rem .75rem!important}.m-num-lg{font-size:36px!important}}
/* Hero photos: a tiny blurred, washed-out copy (.hero-lqip, inlined in the page) shows at once; the photo (.hero-fade) fades in over it once loaded.
   Without scripting or with reduced motion the photo simply appears. */
.hero-lqip{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;filter:blur(8px) saturate(.85) brightness(1.06);opacity:.7;transform:scale(1.08);transition:opacity 0s .4s}
:has(> .hero-fade.is-loaded) > .hero-lqip,:has(> .hero-fade.is-loaded) > div > .hero-lqip{opacity:0}
.hero-fade:not([style*="position:absolute"]){position:relative}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.hero-fade{opacity:0;transition:opacity .35s ease}.hero-fade.is-loaded{opacity:1}}