/* RAAS Is Key — rebuilt stylesheet (Phase 1: match of live site) */
/* ---------- fonts ---------- */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('../assets/fonts/roboto-300.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('../assets/fonts/roboto-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('../assets/fonts/roboto-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 600; src: url('../assets/fonts/roboto-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('../assets/fonts/roboto-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('../assets/fonts/poppins-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('../assets/fonts/poppins-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('../assets/fonts/poppins-700.woff2') format('woff2'); font-display: swap; }
/* ---------- reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Roboto', Arial, sans-serif; font-weight: 400; color: #ffffff; background: #ffffff; }
img { display: block; max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
sup { font-size: 62%; line-height: 0; vertical-align: super; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: #6C0A04; padding: 8px 16px; z-index: 200; }
.skip-link:focus { left: 0; }
/* ---------- header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #E2360C; height: 56px; display: flex; align-items: center; }
.header-inner { width: 100%; max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 10px; }
.brand { background: #6C0A04; border-radius: 8px; padding: 9px 14px; display: inline-flex; align-items: center; }
.brand img { width: 138px; height: auto; }
.site-nav { margin: 0 auto; }
.site-nav ul { list-style: none; display: flex; gap: 44px; align-items: center; }
.site-nav a { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: #000000; letter-spacing: normal; }
.site-nav a.is-active { color: #ffffff; font-weight: 700; }
.site-nav a:hover { color: #ffffff; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; margin-right: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 3px; background: #fff; margin: 5px auto; border-radius: 2px; transition: transform .2s; }
.header-spacer { height: 56px; }
@media (max-width: 993px) {
.site-nav { display: none; position: fixed; top: 56px; left: 0; right: 0; background: #E2360C; margin: 0; padding: 10px 0 24px; }
.site-nav.is-open { display: block; }
.site-nav ul { flex-direction: column; gap: 0; }
.site-nav li { width: 100%; text-align: center; }
.site-nav a { display: block; padding: 14px 20px; font-size: 15px; }
.nav-toggle { display: block; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
/* ---------- hero ---------- */
.hero img { width: 100%; height: auto; }
.hero-mobile { display: none; }
@media (max-width: 767px) {
.hero-desktop.has-mobile { display: none; }
.hero-mobile { display: block; }
}
/* ---------- shared layout ---------- */
.container { max-width: 1220px; margin: 0 auto; padding: 0 40px; }
.wide { max-width: 1400px; }
@media (max-width: 767px) { .container { padding: 0 20px; } }
/* gradient / textured section bands */
.band { background-color: #C33307; background-repeat: no-repeat; background-size: cover; background-position: center top; }
.band-maroon-orange { background-image: linear-gradient(to bottom, rgba(108,10,4,1) 0%, rgba(226,54,12,0.55) 38%, rgba(255,104,21,0.35) 100%), url('../assets/background-lowpoly.jpg'); }
.band-darkred { background-image: linear-gradient(to bottom, rgba(60,4,2,0.92) 0%, rgba(108,10,4,0.82) 45%, rgba(153,1,0,0.6) 100%), url('../assets/background-lowpoly.jpg'); }
.band-red-orange { background-image: linear-gradient(to bottom left, rgba(108,10,4,0.8) 0%, rgba(226,54,12,0.6) 45%, rgba(255,104,21,0.5) 100%), url('../assets/background-lowpoly.jpg'); }
.band-solid-red { background-image: linear-gradient(to bottom, rgba(226,52,1,0.94) 0%, rgba(226,67,7,0.94) 100%), url('../assets/background-lowpoly.jpg'); }
.section-pad { padding: 56px 0 64px; }
@media (max-width: 767px) { .section-pad { padding: 40px 0 48px; } }
.section-title { font-size: 30px; line-height: 1.25; font-weight: 700; color: #ffffff; }
.section-title.centered { text-align: center; }
.section-sub { font-size: 20px; font-weight: 600; margin-top: 26px; }
@media (max-width: 767px) {
.section-title { font-size: 24px; text-align: center; }
.section-sub { font-size: 17px; text-align: center; }
}
/* Round-2 S2 (all 6 pages): desktop
tags leak into mobile and force bad rags. Hide layout
breaks at ≤767px in headings / column labels / captions / short body copy. NOT touched:
drug lists (.modality-body), contact lines, advise-list, references, factor label/desc, or
summary bullet separators — those breaks are semantic and stay on mobile. Intra-bullet rags
are class="dt-only". */
@media (max-width: 767px) {
.section-title br, .stat-caption br, .stat-card h6 br,
.modality-desc br, .morbidity-card h3 br, .glass-card > p br, .info-card p br,
br.dt-only { display: none; }
/* FIX 1a: bind "septic shock" on mobile only, so desktop's natural break is unchanged */
.m-nowrap { white-space: nowrap; }
}
/* white pill band */
.pill-band { background: #ffffff; border-radius: 16px; padding: 18px 30px; text-align: center; margin: 34px 0 0; }
.pill-band p { color: #E2360C; font-size: 22px; line-height: 1.3; font-weight: 600; }
@media (max-width: 767px) { .pill-band p { font-size: 17px; } }
/* ---------- page 1: cascade cards ---------- */
.card-trio { display: flex; gap: 28px; justify-content: center; margin: 34px auto 0; max-width: 1110px; }
.info-card { flex: 1 1 0; max-width: 333px; border: 1px solid rgba(255,255,255,0.75); border-radius: 12px; padding: 40px 24px; text-align: center; }
.info-card img { width: 220px; height: 220px; margin: 0 auto 22px; border-radius: 14px; }
.info-card h4 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.info-card p { font-size: 15px; line-height: 1.45; font-weight: 400; }
@media (max-width: 767px) {
.card-trio { flex-direction: column; align-items: center; }
.info-card { width: 100%; max-width: 420px; }
.info-card img { width: 180px; height: 180px; }
}
/* ---------- page 1: RAAS pathway columns ---------- */
.pathway-grid { display: flex; gap: 26px; justify-content: center; margin-top: 30px; }
.pathway-col { flex: 1 1 0; max-width: 579px; display: flex; flex-direction: column; }
.pathway-col > h4 { font-size: 19px; font-weight: 700; text-align: center; min-height: 92px; }
.pathway-panel { border: 1px solid rgba(255,255,255,0.75); border-radius: 14px; padding: 24px 26px; flex: 1 1 auto; background-repeat: no-repeat; background-position: center 40px; background-size: 300px auto; padding-top: 360px; }
.pathway-panel--normal { background-image: url('../assets/ko-asset-23.png'); }
.pathway-panel--dysfunction { background-image: url('../assets/ko-asset-24.png'); }
.bullet-list { list-style: none; }
.bullet-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.4; margin-bottom: 16px; font-weight: 400; }
.bullet-list li:last-child { margin-bottom: 0; }
.bullet-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; }
.sq-orange::before { background: #FF6600; }
.sq-red::before { background: #E24307; }
.sq-amber::before { background: #F6921E; }
.sq-grey::before { background: #7F7F7F; }
.sq-tan::before { background: #A9895A; }
.sq-silver::before { background: #C2C6C8; }
.sq-pale::before { background: #E0DFDF; }
.sq-black::before { background: #1A1A1A; }
.summary-box { border-radius: 12px; text-align: center; padding: 16px 22px; margin-top: 22px; }
.summary-box--orange { background: #E23401; }
.summary-box--grey { background: #7F7F7F; }
.summary-box h6 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.summary-box p { font-size: 14px; line-height: 1.5; font-weight: 400; }
@media (max-width: 767px) {
.pathway-grid { flex-direction: column; align-items: center; }
.pathway-col { max-width: 470px; width: 100%; }
.pathway-col > h4 { min-height: 0; margin-bottom: 14px; }
}
/* ---------- page 2: factor cards + figure ---------- */
.factor-layout { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; margin-top: 38px; position: relative; }
.factor-card { border: 1px solid rgba(255,255,255,0.7); border-radius: 14px; padding: 28px 26px; width: 348px; flex: 0 0 auto; }
.factor-card h3 { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 22px; }
.factor-card p { font-size: 15px; line-height: 1.45; font-weight: 400; margin-bottom: 18px; }
.factor-card p:last-child { margin-bottom: 0; }
.factor-card--maroon { background: rgba(76,6,2,0.85); }
.factor-card--red { background: linear-gradient(to bottom, rgba(178,26,2,0.95), rgba(226,54,12,0.9)); }
.factor-figure { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.factor-figure img { max-width: 420px; width: 100%; }
@media (max-width: 767px) {
.factor-layout { flex-direction: column; align-items: center; }
.factor-card { width: 100%; max-width: 420px; }
.factor-figure { order: 3; }
}
/* ---------- page 2: shock pie ---------- */
.shock-layout { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-top: 40px; }
.glass-card { border: 1px solid rgba(255,255,255,0.65); border-radius: 14px; background: rgba(108,10,4,0.30); padding: 28px 26px; width: 348px; flex: 0 0 auto; }
.glass-card h3 { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 14px; }
.glass-card > p { font-size: 14px; line-height: 1.45; text-align: center; font-weight: 400; margin-bottom: 22px; }
.legend { list-style: none; }
.legend li { position: relative; padding-left: 30px; font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.legend li:last-child { margin-bottom: 0; }
.legend li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; }
.shock-figure { flex: 1 1 auto; display: flex; justify-content: center; }
.shock-figure img { max-width: 520px; width: 100%; }
@media (max-width: 767px) {
.shock-layout { flex-direction: column; align-items: center; }
.glass-card { width: 100%; max-width: 420px; }
}
/* ---------- page 3: modality cards ---------- */
.modality-intro { font-size: 18px; font-weight: 700; text-align: center; margin-top: 26px; }
.modality-cards { display: flex; gap: 26px; justify-content: center; margin-top: 34px; }
.modality-card { flex: 1 1 0; max-width: 300px; border: 1px solid rgba(255,255,255,0.65); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: rgba(140,27,4,0.35); }
.modality-head { color: #1a1a1a; text-align: center; padding: 26px 18px 40px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 50% 100%, 0 calc(100% - 26px)); }
.modality-head h3 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.modality-head p { font-size: 15px; line-height: 1.4; }
.modality-head--cream { background: #FBEDE4; }
.modality-head--sand { background: #FAE3C6; }
.modality-head--peach { background: #F6B48C; }
.modality-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 30px 18px 34px; }
.modality-body p { font-size: 16px; font-weight: 700; text-align: center; line-height: 1.5; }
@media (max-width: 767px) {
.modality-cards { flex-direction: column; align-items: center; }
.modality-card { width: 100%; max-width: 420px; }
}
/* ---------- page 3 / vaso 2: stat cards ---------- */
.stat-cards { display: flex; gap: 28px; justify-content: center; margin-top: 36px; }
.stat-card { flex: 1 1 0; max-width: 520px; border: 1px solid rgba(255,255,255,0.65); border-radius: 14px; background: rgba(108,10,4,0.45); text-align: center; padding: 34px 30px 30px; }
.stat-card img { margin: 0 auto 24px; }
.stat-card h6 { font-size: 16px; font-weight: 700; line-height: 1.45; }
.stat-card .stat-big { font-size: 64px; font-weight: 700; line-height: 1; }
.stat-card .stat-big sup { font-size: 45%; }
.stat-card .stat-caption { font-size: 15px; font-weight: 400; line-height: 1.45; margin-top: 10px; }
@media (max-width: 767px) {
.stat-cards { flex-direction: column; align-items: center; }
.stat-card { width: 100%; max-width: 420px; }
}
/* vaso identifying: morbidity card */
.morbidity-card { border: 1px solid rgba(255,255,255,0.65); border-radius: 14px; background: rgba(108,10,4,0.45); margin-top: 30px; padding: 34px 40px 38px; text-align: center; }
.morbidity-card h3 { font-size: 24px; font-weight: 700; line-height: 1.35; margin-bottom: 20px; }
.dot-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 34px; }
.dot-list li { font-size: 15px; font-weight: 400; line-height: 1.9; }
.dot-list li::before { content: ""; display: inline-block; margin-right: 9px; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: #ffffff; } /* inline marker hugs the (centered) text so a wrapping bullet's dot stays next to it, matching live + single-line siblings; vertical-align centers it on the line (C10/C14) */
/* ---------- fine print / references ---------- */
.fine-print { background: #FAFAFA; color: #666666; padding: 26px 0 30px; }
.fine-print p { font-size: 11.5px; line-height: 1.55; margin-bottom: 10px; }
.fine-print p:last-child { margin-bottom: 0; }
.fine-print i { font-style: italic; }
.fn-row { position: relative; padding-left: 10px; }
.fn-row .fn-mark { position: absolute; left: 0; top: 0; }
/* ---------- footer ---------- */
.site-footer { background: #000000; color: #ffffff; font-size: 12px; line-height: 18px; }
.footer-inner { max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 60px; }
@media (max-width: 767px) { .footer-inner { flex-direction: column; gap: 0; padding: 0 12px; } }
/* ============================================================
ORIGINAL-SITE CORRECTIONS — vasoplegia (round 1) + septic-shock (round 2)
Every value is from live computed styles. Rules are SHARED (unscoped) where
live septic and live vaso are identical, and SCOPED (body.vaso* / body.septic*)
where the two sections genuinely differ. new-site has its own stylesheet copy
and is never affected. Page hooks: body.{vaso,septic}-{home,identifying,multimodal}.
============================================================ */
/* ---------- SHARED / PROMOTED (live septic == live vaso) ---------- */
/* Logo — pill is baked into the PNG; drop the CSS pill, show at native 180px
(vaso 3.1 + septic group B). Each page keeps its own img: vaso=orange, septic=maroon. */
.brand { background: none; padding: 0; }
.brand img { width: 180px; }
/* Icon cards — darker maroon fill (vaso 4 + septic group A) */
.info-card { background: rgba(108,10,4,0.6); border: 1px solid #E9E9E9; border-radius: 10px; }
/* Bullet / pathway boxes — translucent so the section shows through (vaso 9,25 + septic group A/C) */
.pathway-panel { background-color: rgba(108,10,4,0.8); border: 1px solid #CCCCCC; border-radius: 20px; }
/* Summary bars — matched treatment + exact live fills (vaso 16 + septic group C) */
.summary-box { border-radius: 16px; border: 1px solid #CCCCCC; display: flex; flex-direction: column; justify-content: center; }
.summary-box--orange { background: #E2360C; }
.summary-box--grey { background: #808080; }
/* White pills — live radius/border (both) */
.pill-band { border-radius: 20px; border: 1px solid #CCCCCC; }
/* Icon-card horizontal padding differs: septic 16 / vaso 24 (vertical 40 shared, in base) */
body[class^="septic"] .info-card { padding: 40px 16px; }
/* Summary bars are equal-height on live (S24/V16): both 118px */
.summary-box { min-height: 118px; }
/* Factor cards — fills/border/radius + 30px heading (vaso 10 + septic group A).
Heading COLOR differs by section (scoped below): vaso black, septic white(default). */
.factor-card { border: 1px solid #CCCCCC; border-radius: 20px; }
.factor-card--maroon { background: rgba(108,10,4,0.8); }
.factor-card--red { background: rgba(153,1,0,0.6); }
.factor-card h3 { font-size: 30px; }
/* Torso fills its cell edge-to-edge (vaso 18 + septic 5) */
.factor-figure { align-self: stretch; }
.factor-figure img { max-width: 100%; width: 100%; height: 100%; object-fit: contain; }
/* Stat cards — shared fill + radius; border/padding are per-section below */
.stat-card { background: rgba(108,10,4,0.4); border-radius: 20px; }
/* Headlines left-aligned on both sections, both breakpoints
(vaso 21,22,26,32 + septic 8,10,11,12,14,16,17) */
.section-title,
.section-title.centered { text-align: left; }
/* Modality intro — left on desktop (vaso + septic 8), center on mobile */
.modality-intro { text-align: left; }
/* Footnote symbols hang in a narrow gutter, text column beside (vaso 12,35 + septic 9) */
.fn-row { position: relative; padding-left: 13px; }
.fn-row .fn-mark { position: absolute; left: 0; top: 0; width: 10px; text-align: right; }
/* References / abbreviations block narrower on live (vaso 14 + septic references) */
.fine-print { padding: 12px 0; }
.fine-print .container { padding: 0 60px; }
.fine-print p { font-size: 12px; line-height: 15px; margin-bottom: 20px; }
/* ---------- SHARED per-PAGE backgrounds (identical septic & vaso for that page-type) ---------- */
/* identifying §1 (factors) — texture, no dark overlay (vaso 6-family + septic global rule 2) */
body.vaso-identifying .band-maroon-orange,
body.septic-identifying .band-maroon-orange { background: url('../assets/background-lowpoly.jpg') center/cover no-repeat; }
/* identifying §2 (stats / shock-categories) — light gradient (vaso 17 + septic 15 "very dark") */
body.vaso-identifying .band-darkred,
body.septic-identifying .band-darkred { background: linear-gradient(to bottom left, #6C0A04, #FF6815); }
/* multimodal §1 (modality) — texture */
body.vaso-multimodal .band-red-orange,
body.septic-multimodal .band-red-orange { background: url('../assets/background-lowpoly.jpg') center/cover no-repeat; }
/* multimodal §2 (stats / no-improvement) — solid orange-red */
body.vaso-multimodal .band-solid-red,
body.septic-multimodal .band-solid-red { background: #E2360C; }
/* ---------- VASO-SPECIFIC (genuinely differs from septic) ---------- */
/* Comment 3: nav bar maroon + light links (septic keeps its orange #E2360C bar) */
body.vaso .site-header { background: #6C0A04; }
/* vaso header is 57px on live desktop / 62px mobile (septic differs at 53/62) */
body.vaso .site-header, body.vaso .header-spacer { height: 57px; }
body.vaso .site-nav a { font-family: 'Roboto', Arial, sans-serif; color: #FF8D71; font-weight: 400; }
body.vaso .site-nav a.is-active,
body.vaso .site-nav a:hover { color: #ffffff; font-weight: 700; }
/* ---- Per-site type SCALE (live-measured; sizes/line-heights differ septic vs vaso) ---- */
/* vaso */
body.vaso .section-title { font-size: 38px; line-height: 1.2; }
body.vaso .clinical-study { font-size: 28px; }
body.vaso .pill-band p { font-size: 20px; }
body.vaso .summary-box h6 { font-size: 17px; }
body.vaso .info-card p, body.vaso .bullet-list li { line-height: 1.3; }
/* septic (all septic-* pages) */
body[class^="septic"] .section-title { font-size: 32px; line-height: 1.35; }
body[class^="septic"] .section-sub { font-size: 24px; line-height: 1.35; }
body[class^="septic"] .info-card h4 { font-size: 24px; line-height: 1.35; }
body[class^="septic"] .info-card p, body[class^="septic"] .bullet-list li { font-size: 16px; line-height: 24px; }
body[class^="septic"] .pill-band p { font-size: 24px; line-height: 1.25; }
body[class^="septic"] .summary-box h6 { font-size: 18px; line-height: 1.25; }
/* Comment 8: single-kidney vaso wheels; septic keeps ko-asset (two kidneys) */
body.vaso .pathway-panel--normal { background-image: url('../assets/vaso-moa-color.svg'); }
body.vaso .pathway-panel--dysfunction { background-image: url('../assets/vaso-moa-grey.svg'); }
/* Comment 10: factor heading black on vaso (septic renders white via base default) */
body.vaso .factor-card h3 { color: #000000; }
/* Comment 7: pathway column labels bottom-aligned (live vaso; NOT flagged for septic) */
body.vaso .pathway-col > h4 { display: flex; align-items: flex-end; justify-content: center; text-align: center; }
/* NOTE: vaso-home §1/§2 band backgrounds + row structure are defined in the
dedicated "VASO HOME" block at the end of this file (measured live, split rows). */
/* Identifying stat cards + headline/morbidity sizes (vaso 11,27) */
body.vaso-identifying .stat-card { border: 1px solid #CCCCCC; padding: 32px 16px; }
body.vaso-identifying .section-title { font-size: 38px; }
body.vaso-identifying .morbidity-card h3 { font-size: 28px; }
/* Multimodal stat cards (vaso 34) — white border on live vaso */
body.vaso-multimodal .stat-card { border: 1px solid #FFFFFF; padding: 20px; }
/* ---------- SEPTIC-SPECIFIC ---------- */
/* ===== SEPTIC HOME — live row structure (merged sections split into live's separate rows) ===== */
body.septic-home .container { max-width: 1320px; padding: 0; }
body.septic-home .sh-cards { background: url('../assets/background-lowpoly.jpg') center bottom / cover no-repeat; padding: 30px 60px 45px; }
body.septic-home .sh-cards .section-sub { margin-top: 17px; }
body.septic-home .card-trio { margin-top: 33px; gap: 30px; }
body.septic-home .info-card img { margin-bottom: 12px; border-radius: 0; }
body.septic-home .sh-pill1 { background: #FF6818; padding: 10px 60px 30px; }
body.septic-home .sh-s2head { background: linear-gradient(to bottom, #6C0A04, #E2360C); padding: 30px 60px 16px; }
body.septic-home .sh-grid { background: linear-gradient(to bottom, #E2360C, #6C0A04); padding: 20px 128px 30px; margin-top: -10px; }
/* septic header is 53px on live (vaso differs at 57 — do NOT promote) */
body[class^="septic"] .site-header { height: 53px; }
body[class^="septic"] .header-spacer { height: 53px; }
body.septic-home .sh-pill2 { background: linear-gradient(to bottom, #6C0A04, #E2360C); padding: 8px 60px 30px; }
/* septic-home pills: no top margin (band padding handles rhythm), live padding 18/60/8+12mb */
body.septic-home .pill-band { margin: 0; padding: 18px 60px 20px; }
/* septic-home pathway boxes: wheel reserved above bullets (live spacer≈452), boxes pinned equal at live 764 */
body.septic-home .pathway-grid { margin-top: 16px; }
body.septic-home .pathway-col > h4 { min-height: 90px; margin-bottom: 25px; font-size: 24px; font-weight: 600; line-height: 30px; display: flex; align-items: flex-end; justify-content: center; text-align: center; }
body.septic-home .pathway-panel { padding: 452px 50px 20px 30px; min-height: 764px; }
/* septic-home bullets: live spaces them ~36px apart (start-to-start 84/60) */
body.septic-home .bullet-list li { margin-bottom: 36px; }
body.septic-home .bullet-list li:last-child { margin-bottom: 0; }
/* septic-home summary bars: live body 16/20, boxes pinned equal at live 118 (S24), content top-aligned */
body.septic-home .summary-box { justify-content: flex-start; }
body.septic-home .summary-box p { font-size: 16px; line-height: 20px; }
body.septic-home .summary-box h6 { margin-bottom: 2px; }
/* septic-home headline inset: live headlines are indented 16px inside the band gutter */
body.septic-home .sh-cards .section-title,
body.septic-home .sh-cards .section-sub { padding-left: 16px; padding-right: 16px; }
body.septic-home .sh-s2head .section-title { padding-left: 16px; }
@media (max-width: 767px) {
body.septic-home .sh-cards { background: url('../assets/background-lowpoly-mobile.jpg') center top / cover no-repeat; padding: 42px 16px 16px; }
body.septic-home .sh-pill1 { padding: 10px 20px 30px; }
body.septic-home .sh-s2head { padding: 30px 12px 16px; }
/* FIX 2: padding-top holds the 16px above the grid so .pathway-grid's margin-top no longer
collapses OUT of the section (that escaped margin was the white body-bg line on mobile) */
body.septic-home .sh-grid { padding: 16px 16px 20px; margin-top: 0; }
body.septic-home .pathway-grid { margin-top: 0; }
body.septic-home .sh-pill2 { padding: 36px 12px 40px; }
/* mobile type scale (live: headline 24, sub 22/500, pill 18) */
body[class^="septic"] .section-title { font-size: 24px; }
body.septic-home .sh-cards .section-sub { font-size: 22px; font-weight: 500; }
body.septic-home .pill-band p { font-size: 18px; }
/* mobile cards: live image 240, card padding 30 vertical, body wraps ~296 wide */
body.septic-home .info-card { padding: 30px 20px; }
body.septic-home .info-card img { width: 240px; height: 240px; margin-bottom: 16px; }
/* mobile pathway headings: natural height, 22px, top-aligned (not desktop's pinned bottom-align) */
body.septic-home .pathway-col > h4 { min-height: 0; display: block; font-size: 22px; line-height: 27.5px; margin-bottom: 22px; }
/* mobile bullets sit 12px apart (desktop is 36) */
body.septic-home .bullet-list li { margin-bottom: 12px; }
/* s2head headline has NO left inset on mobile (cards keeps 16) */
body.septic-home .sh-s2head .section-title { padding-left: 0; }
/* pill2 uses a narrow 12px pill gutter on mobile (pill1 keeps 60 — live differs per pill) */
body.septic-home .sh-pill2 .pill-band { padding: 18px 12px 20px; }
/* fine-print refs sit in a 12px gutter on mobile (live x12) */
body.septic-home .fine-print .container { padding: 0 12px; }
/* mobile pathway panels stack -> size to content (no equal-height pin); live pad 32/30 + wheel spacer */
/* FIX 3: match live. Live's card (same koAsset23 bg, size 300px, pos 50% 40px) puts the first
bullet 397px below the card top -> wheel-bottom-to-bullet gap 57px. padding-top 396 = gap 56px
(local was 452 -> 112px). Tablet 768 keeps 452 because live also shows ~113px there (two-column). */
body.septic-home .pathway-panel { padding: 396px 30px 16px 30px; min-height: 0; }
/* footnote hanging indent is defined at all widths below (search "hanging footnote") */
/* mobile septic header is 62px on live */
body[class^="septic"] .site-header,
body[class^="septic"] .header-spacer { height: 62px; }
}
/* Multimodal stat cards — 1px #CCC border on live septic (group A / global rule 2) */
body.septic-multimodal .stat-card { border: 1px solid #CCCCCC; padding: 20px; }
/* ---------- MOBILE ---------- */
@media (max-width: 767px) {
/* Headlines stay left on mobile (both sections) */
.section-title,
.section-title.centered { text-align: left; }
/* Modality intro centers on mobile (both) */
.modality-intro { text-align: center; }
/* Modality boxes render stacked instead of collapsing (vaso 31 + septic 19) — PROMOTED */
.modality-card { flex: 0 0 auto; }
/* Torso before the factor boxes on mobile (vaso 20 + septic 13) — PROMOTED */
.factor-figure { order: -1; }
/* Pie chart before the legend cards on mobile (septic 15; septic-only element) */
.shock-figure { order: -1; }
/* References block edge-tight on mobile (both) */
.fine-print .container { padding: 0 12px; }
/* Stat cards tighter on mobile */
body.vaso-identifying .stat-card { padding: 24px 12px; }
body.vaso-multimodal .stat-card,
body.septic-multimodal .stat-card { padding: 20px 12px; }
/* Vaso headline sizes on mobile (live per page) */
body.vaso .section-title { font-size: 24px; }
body.vaso-identifying .section-title { font-size: 28px; }
body.vaso-multimodal .section-title { font-size: 26px; }
body.vaso .clinical-study { font-size: 24px; }
body.vaso-identifying .morbidity-card h3 { font-size: 24px; }
/* Vaso morbidity bullets one per line (vaso 29; vaso-only element) */
body.vaso .dot-list { flex-direction: column; align-items: center; }
/* Vaso morbidity headline break hidden on mobile (vaso 30) */
body.vaso .dt-br { display: none; }
/* Home §1 mobile backgrounds (differ) — vaso-home handled in its own block below */
body.septic-home .band-maroon-orange { background: url('../assets/background-lowpoly-mobile.jpg') center/cover no-repeat; }
/* Identifying §1 mobile uses the 3-boxes texture on both */
body.vaso-identifying .band-maroon-orange,
body.septic-identifying .band-maroon-orange { background: url('../assets/p1-s1-3-boxes.jpg') center/cover no-repeat; }
/* Tighter mobile side gutters (12px) — vaso 24,27,33 + septic factor/modality sections */
body.vaso-identifying .band-maroon-orange .container,
body.septic-identifying .band-maroon-orange .container,
body.vaso-multimodal .band-red-orange .container,
body.septic-multimodal .band-red-orange .container { padding-left: 12px; padding-right: 12px; }
}
/* Comment 36 (vaso): mobile expanded nav — maroon panel + light links; septic keeps its scheme */
@media (max-width: 993px) {
body.vaso .site-nav { background: #6C0A04; border-top: 1px solid #EAEAEA; }
}
/* ============================================================
===== SEPTIC IDENTIFYING — live row structure (measured live) =====
Torso + pie rendered the LIVE way: as background images spanning the
factor/shock layout region, with the translucent cards overlaid on top
(desktop). On mobile the torso/pie are in-flow ![]()
between the subhead
and the cards (shared .factor-figure/.shock-figure order:-1). All scoped
to body.septic-identifying so vaso + septic-home are untouched. Placed
last so it wins over the shared per-page bg rules above.
============================================================ */
/* content column = full width minus 60px band gutters (live col w1320 @1440) */
body.septic-identifying .container { max-width: 1320px; padding: 0; }
/* Bands: live puts the 60px heading top-space in a wrapper; we fold it into the
band's padding-top (avoids the heading margin-top collapsing through the band).
Net = live: bg from band top, content 60px in. factors 60/60/60, categories 60/60/30 */
body.septic-identifying .band-maroon-orange { padding: 60px 60px 60px; background-position: 50% 0%; }
body.septic-identifying .band-darkred { padding: 60px 60px 30px; }
/* Headlines: 36 bottom, left-aligned (shared); top space is the band padding above */
body.septic-identifying .section-title { margin: 0 0 36px; }
/* ---- Patient-factors: torso is the BACKGROUND of the layout, cards overlaid ---- */
body.septic-identifying .factor-layout {
margin: 0; gap: 0; justify-content: space-between; align-items: flex-start;
min-height: 642px;
background: url('../assets/organ-illustration.png') center / contain no-repeat;
}
body.septic-identifying .factor-figure { display: none; } /* desktop: torso is the bg */
body.septic-identifying .factor-card { width: 421px; }
body.septic-identifying .factor-card h3 { margin-bottom: 14px; } /* live 14 */
body.septic-identifying .factor-card--maroon { padding: 32px 40px 32px 32px; } /* live left box */
body.septic-identifying .factor-card--red { padding: 32px; } /* live right box */
/* factor body: live 16/lh24, bold labels 18/lh27, 20 mar-bottom, left */
body.septic-identifying .factor-card p { font-size: 16px; line-height: 24px; margin-bottom: 20px; }
body.septic-identifying .factor-card p strong { font-size: 18px; line-height: 27px; }
/* callout pill: live pad 18/20/8 + 12px text-bottom-margin = 20 below; mar-top 10; 24/600 lh32.4 */
body.septic-identifying .pill-band { margin: 10px 0 0; padding: 18px 20px 20px; }
body.septic-identifying .pill-band p { line-height: 1.35; }
/* ---- Categories: pie is the BACKGROUND of the layout, glass cards overlaid ---- */
/* live cards fill the 423px pie region (padded out with empty spacers on live);
stretch ours to match so the maroon card fill reaches the same depth. */
body.septic-identifying .shock-layout {
margin: 0; gap: 0; justify-content: space-between; align-items: stretch;
min-height: 423px;
background: url('../assets/pie-chart.png') center / auto no-repeat;
}
body.septic-identifying .shock-figure { display: none; }
body.septic-identifying .glass-card {
width: 421px; background: rgba(108,10,4,0.4); border: 1px solid #CCCCCC; border-radius: 20px; padding: 32px 16px;
}
body.septic-identifying .glass-card h3 { font-size: 22px; font-weight: 500; line-height: 27.5px; }
body.septic-identifying .glass-card > p { font-size: 16px; line-height: 20px; margin-bottom: 20px; }
/* legend sits ~60px below the description (live has an empty spacer p), 60px item pitch.
live square sits ~40px in (after a gutter), text ~62px in. */
body.septic-identifying .legend { margin-top: 60px; }
body.septic-identifying .legend li { font-size: 20px; font-weight: 600; line-height: 25px; padding-left: 62px; margin-bottom: 35px; }
body.septic-identifying .legend li::before { left: 40px; top: 4px; }
/* fine-print: live 72px side gutter (12 band + 60 inner), near-full width */
body.septic-identifying .fine-print .container { max-width: 1440px; padding: 0 72px; }
/* live keeps a 20px bottom margin on the LAST references paragraph (both viewports) */
body.septic-identifying .fine-print p:last-child { margin-bottom: 20px; }
@media (max-width: 767px) {
/* live band gutters: factors 12, categories 16; top-space folded into padding-top */
body.septic-identifying .band-maroon-orange { padding: 30px 12px 40px; }
body.septic-identifying .band-darkred { padding: 60px 16px 50px; }
body.septic-identifying .band-maroon-orange .container,
body.septic-identifying .band-darkred .container,
body.septic-identifying .container { max-width: 100%; padding: 0; }
/* headings: live mobile factors 28/lh32.2, categories 32/lh43.2; mar factors 26 / cats 36 */
body.septic-identifying .band-maroon-orange .section-title { font-size: 28px; line-height: 32.2px; margin: 0 0 26px; }
body.septic-identifying .band-darkred .section-title { font-size: 32px; line-height: 43.2px; margin: 0 0 36px; }
/* torso/pie become in-flow images before the cards (order -1 via shared); drop the bg */
body.septic-identifying .factor-layout,
body.septic-identifying .shock-layout { background: none; min-height: 0; }
body.septic-identifying .factor-figure { display: block; margin-bottom: 0; }
body.septic-identifying .shock-figure { display: block; margin-bottom: 16px; }
body.septic-identifying .factor-figure img,
body.septic-identifying .shock-figure img { width: 100%; height: auto; max-width: 100%; }
/* cards full-width; live mobile paddings + stacking margins */
body.septic-identifying .factor-card { width: 100%; max-width: 100%; }
body.septic-identifying .factor-card--maroon { padding: 32px 20px; margin-bottom: 32px; }
body.septic-identifying .factor-card--red { padding: 16px 16px 24px; margin-bottom: 16px; }
/* glass cards: live mobile per-card paddings + heights (Distributive 292, Non-distr 302).
live cards are taller because live's legend text wraps 2 lines; we pin the height so the
maroon fill reaches live's depth (footer/fine-print stay aligned below). */
body.septic-identifying .glass-card { width: 100%; max-width: 100%; margin-bottom: 16px; }
body.septic-identifying .shock-layout .glass-card:first-of-type { padding: 32px 16px 32px 16px; min-height: 292px; } /* FIX 3: was 8px right (asymmetric) -> centered text ran right of center; now L/R both 16, matching Non-distributive */
body.septic-identifying .shock-layout .glass-card:last-of-type { padding: 32px 16px 16px 16px; min-height: 302px; }
/* pill: live mobile 18/600 lh24.3, pad 18/20/18 */
body.septic-identifying .pill-band { padding: 18px 20px 18px; }
body.septic-identifying .pill-band p { font-size: 18px; line-height: 24.3px; }
/* legend: live mobile 16/400 lh20, ~42px pitch, first item ~175 from card top */
body.septic-identifying .legend { margin-top: 40px; }
body.septic-identifying .legend li { font-size: 16px; font-weight: 400; line-height: 20px; padding-left: 40px; margin-bottom: 22px; }
body.septic-identifying .legend li::before { left: 16px; top: 3px; }
/* fine-print edge-tight on mobile */
body.septic-identifying .fine-print .container { max-width: 100%; padding: 0 12px; }
}
/* ============================================================
===== SEPTIC MULTIMODAL — live row structure (measured live) =====
Rows split to match live: modality (texture) / clinical-study stat band
(solid #E2360C: heading + two stat cards) / no-improvement band
(gradient #E2360C->#6C0A04 + white pill) / fine-print. Desktop modality =
CSS cards with Rectangle PNG notched headers; mobile = three stacked flat
SVGs (adrenergic/vasopressin/raas.svg, native 320x400/409/400 = live).
All scoped body.septic-multimodal; placed last so it wins.
============================================================ */
/* HubSpot renders at 75% across this page (base is 62%) */
body.septic-multimodal sup { font-size: 75%; }
/* ---- MODALITY band (texture, content column 1000, gutters 220) ---- */
body.septic-multimodal .band-red-orange { padding: 62px 0 100px; }
body.septic-multimodal .mm-modality .container { max-width: 1000px; padding: 0; }
body.septic-multimodal .mm-modality .section-title { font-size: 32px; line-height: 43.2px; font-weight: 700; margin: 0 0 37px; }
body.septic-multimodal .modality-intro { font-size: 24px; font-weight: 600; line-height: 32.4px; text-align: left; margin: 0 0 21px; }
/* modality cards: single box, maroon fill + Rectangle PNG notched header at top */
body.septic-multimodal .modality-cards { gap: 22px; margin: 0; justify-content: center; align-items: stretch; }
body.septic-multimodal .modality-card {
flex: 1 1 0; max-width: none; display: flex; flex-direction: column;
border: 1px solid #CCCCCC; border-radius: 10px; overflow: hidden; padding: 32px;
background-repeat: no-repeat; background-position: 50% 0%; background-size: 320px auto;
}
body.septic-multimodal .modality-card:nth-of-type(1) { background-color: rgba(108,10,4,0.5); background-image: url('../assets/rectangle-2.png'); }
body.septic-multimodal .modality-card:nth-of-type(2) { background-color: rgba(108,10,4,0.4); background-image: url('../assets/rectangle-3.png'); }
body.septic-multimodal .modality-card:nth-of-type(3) { background-color: rgba(108,10,4,0.4); background-image: url('../assets/rectangle-4.png'); }
body.septic-multimodal .modality-head { background: none; clip-path: none; color: #000000; text-align: center; padding: 0; min-height: 162px; }
body.septic-multimodal .modality-head h3 { font-size: 28px; font-weight: 700; line-height: 37.8px; color: #000000; margin-bottom: 11px; }
body.septic-multimodal .modality-head .modality-desc { font-size: 16px; font-weight: 400; line-height: 18.4px; color: #000000; }
body.septic-multimodal .modality-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0; }
body.septic-multimodal .modality-body p { font-size: 16px; font-weight: 700; line-height: 24px; text-align: center; color: #ffffff; }
body.septic-multimodal .modality-svgs { display: none; }
/* ---- CLINICAL-STUDY STAT band (solid #E2360C; heading + cards) ---- */
body.septic-multimodal .mm-stats { padding: 42px 0 30px; }
body.septic-multimodal .mm-stats .container { max-width: 1200px; padding: 0; }
body.septic-multimodal .mm-stats .section-title { font-size: 28px; font-weight: 500; line-height: 37.8px; text-align: left; margin: 0; }
body.septic-multimodal .stat-cards { max-width: 1040px; margin: 32px auto 0; gap: 54px; }
body.septic-multimodal .stat-card {
flex: 1 1 0; max-width: none; min-height: 233px; border: 1px solid #CCCCCC; border-radius: 20px;
background-color: rgba(108,10,4,0.4); padding: 20px; text-align: center;
background-repeat: no-repeat; background-position: 50% 0%; background-size: 150px auto;
}
body.septic-multimodal .stat-card:nth-of-type(1) { background-image: url('../assets/stat-53-percent.png'); }
body.septic-multimodal .stat-card:nth-of-type(2) { background-image: url('../assets/stat-49-percent.png'); }
body.septic-multimodal .stat-card h6 { font-size: 18px; font-weight: 600; line-height: 24.3px; color: #ffffff; margin: 135px 0 0; }
/* ---- NO-IMPROVEMENT band (gradient + white pill) ---- */
body.septic-multimodal .mm-noimprove { background: linear-gradient(to bottom, #E2360C, #6C0A04); padding: 20px 60px 50px; }
body.septic-multimodal .mm-noimprove .container { max-width: 1320px; padding: 0; }
body.septic-multimodal .mm-noimprove .pill-band { margin: 0; min-height: 105px; padding: 18px 136px 8px; border: 1px solid #FFFFFF; border-radius: 20px; }
body.septic-multimodal .mm-noimprove .pill-band p { font-size: 24px; font-weight: 600; line-height: 32.4px; color: #E2360C; }
/* ---- FINE PRINT (live: 60px band gutter, 13px paragraph indent) ---- */
body.septic-multimodal .fine-print .container { max-width: 1440px; padding: 0 60px; }
body.septic-multimodal .fine-print p { padding-left: 13px; line-height: 14px; margin-bottom: 6px; }
/* hanging footnote (all widths): .fn-text lands on the content edge (= container padding + the
.fine-print p padding-left, same as RAAS=/References); the symbol hangs left into the padding
with a 4px gap. margin-left -12 cancels the 8px symbol cell + its 4px right margin, so the text
edge equals RAAS=/References at every width. Wrapped lines align under the text (flex text cell). */
body.septic-multimodal .fn-row { display: flex; margin-left: -12px; }
body.septic-multimodal .fn-row .fn-mark { position: static; top: auto; flex: 0 0 8px; width: 8px; text-align: right; margin-right: 4px; }
body.septic-multimodal .fn-row .fn-text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767px) {
/* MODALITY mobile: hide CSS cards, show stacked flat SVGs */
body.septic-multimodal .band-red-orange { padding: 32px 0 60px; }
body.septic-multimodal .mm-modality .container { max-width: 100%; padding: 0 12px; }
/* live wraps the heading naturally on mobile (no forced break) */
body.septic-multimodal .mm-br { display: none; }
body.septic-multimodal .mm-modality .section-title { font-size: 26px; line-height: 35.1px; margin: 0 0 26px; padding-left: 12px; }
/* live intro column ~311px (x32 gutters) -> wraps to 6 lines */
body.septic-multimodal .modality-intro { font-size: 20px; font-weight: 600; line-height: 25px; text-align: center; margin: 0 0 24px; padding: 0 20px; }
body.septic-multimodal .modality-cards { display: none; }
body.septic-multimodal .modality-svgs { display: block; }
body.septic-multimodal .modality-svgs img { width: 320px; max-width: 100%; height: auto; margin: 0 auto 36px; }
body.septic-multimodal .modality-svgs img:last-child { margin-bottom: 0; }
/* STAT mobile: heading centered 20/600 (~317 col); cards 255 wide (60px gutters) */
body.septic-multimodal .mm-stats { padding: 41px 0 0; }
body.septic-multimodal .mm-stats .container { max-width: 100%; padding: 0 12px; }
body.septic-multimodal .mm-stats .section-title { font-size: 20px; line-height: 27px; font-weight: 600; text-align: center; margin: 0; padding: 0 17px; }
body.septic-multimodal .stat-cards { max-width: 255px; margin: 12px auto 0; gap: 20px; }
body.septic-multimodal .stat-card { padding: 20px 12px; }
body.septic-multimodal .stat-card:nth-of-type(1) { min-height: 235px; }
body.septic-multimodal .stat-card:nth-of-type(2) { min-height: 257px; }
/* NO-IMPROVE mobile (pill wraps naturally to 3 lines; live pill h113) */
body.septic-multimodal .mm-noimprove { padding: 30px 16px 50px; }
body.septic-multimodal .mm-noimprove .container { padding: 0; }
body.septic-multimodal .mm-noimprove .pill-band { min-height: 113px; padding: 18px 16px 8px; }
body.septic-multimodal .mm-noimprove .pill-band p { font-size: 18px; line-height: 24.3px; }
/* FINE PRINT mobile: 12px gutter, 7px paragraph indent; live packs paragraphs tight */
body.septic-multimodal .fine-print .container { max-width: 100%; padding: 0 12px; }
body.septic-multimodal .fine-print p { padding-left: 7px; margin-bottom: 4px; }
}
/* ============================================================
===== VASO HOME — live row structure (measured live) =====
Live vaso home is 8 rows: header / hero / §1 MERGED (headline+sub+cards+
"Early aggressive" pill, continuous low-poly texture — vaso does NOT split
this the way septic does) / §2 headline / §2 pathway-grid / §2 pill /
fine-print / footer. §2 is split into 3 rows (headline/grid/pill), each with
its own gradient. All scoped body.vaso-home; placed last so it wins over the
shared per-page rules above. Every value is from live computed styles.
============================================================ */
/* content column = full width minus band gutters (live col w1320 @1440) */
body.vaso-home .container { max-width: 1320px; padding: 0; }
body.vaso-home .pill-band { margin: 0; }
/* ---- §1 MERGED (cards + Early-aggressive pill), low-poly texture both viewports ---- */
body.vaso-home .vh-cards { background: url('../assets/background-lowpoly-mobile.jpg') center top / cover no-repeat; padding: 46px 60px 40px; } /* C3: top-anchor (live 50% 0%) -> more dark red at top-left */
body.vaso-home .vh-cards .section-title { margin: 0; padding-left: 16px; }
body.vaso-home .vh-cards .section-sub { margin-top: 26px; padding: 0 16px; }
body.vaso-home .card-trio { margin: 37px auto 0; max-width: 1059px; gap: 30px; }
body.vaso-home .info-card img { width: 220px; height: 220px; border-radius: 0; margin-bottom: 12px; }
body.vaso-home .info-card p { font-size: 16px; line-height: 21.6px; }
/* Early-aggressive callout: transparent wrapper on desktop (pill on texture),
full-bleed gradient band on mobile (live splits it out on narrow screens) */
body.vaso-home .vh-early { margin-top: 65px; }
/* ---- §2 headline row (gradient #6C0A04 -> #E2360C) ---- */
body.vaso-home .vh-s2head { background: linear-gradient(to bottom, #6C0A04, #E2360C); padding: 30px 60px 16px; }
body.vaso-home .vh-s2head .section-title { margin: 0; padding-left: 8px; }
/* ---- §2 pathway-grid row (solid #E2360C base + gradient overlay #E2360C -> #6C0A04, 128px gutter) ---- */
body.vaso-home .vh-grid { background: linear-gradient(to bottom, #E2360C, #6C0A04); padding: 20px 128px 30px; }
body.vaso-home .pathway-grid { margin-top: 0; gap: 26px; }
body.vaso-home .pathway-col > h4 { font-size: 20px; font-weight: 600; line-height: 25px; letter-spacing: -0.2px; min-height: 73px; margin-bottom: 15px; }
body.vaso-home .pathway-panel { padding: 393px 30px 10px; min-height: 664px; background-size: 300px auto; background-position: 50% 40px; }
body.vaso-home .bullet-list li { font-size: 16px; line-height: 20.8px; margin-bottom: 18px; }
body.vaso-home .bullet-list li:last-child { margin-bottom: 0; }
/* summary bars: live pad 8/4, pinned equal at live 118 (V16) */
body.vaso-home .summary-box { margin-top: 20px; padding: 8px 4px; }
body.vaso-home .summary-box p { font-size: 16px; line-height: 24px; }
/* desktop-only headline line breaks (live authors hard breaks; mobile wraps naturally) */
body.vaso-home br.d-br { display: inline; }
@media (max-width: 767px) { body.vaso-home br.d-br { display: none; } }
/* ---- §2 pill row (gradient #6C0A04 -> #E2360C) ---- */
body.vaso-home .vh-pill2 { background: linear-gradient(to bottom, #6C0A04, #E2360C); padding: 20px 60px 30px; }
/* ---- fine-print: live desktop lh 13.8, keeps 20px margin on last refs paragraph ---- */
body.vaso-home .fine-print p { line-height: 13.8px; }
body.vaso-home .fine-print p:last-child { margin-bottom: 20px; }
body.vaso-home .fine-print .container { max-width: 1440px; padding: 0 61px; } /* match identifying: base body.vaso-home .container (1320/pad0) let refs run to edges below 1320px */
@media (max-width: 767px) {
/* §1 MERGED — full-width texture band; cards 327 (24px gutters), headline 16px inset, sub centered */
body.vaso-home .vh-cards { padding: 42px 0 0; }
body.vaso-home .vh-cards .section-title { padding-left: 16px; }
/* live constrains the sub to a narrow (~250px) centered column -> wraps to 4 lines */
/* C6: max-width keeps the live 4-line wrap (self-hosted Roboto is narrower than live's; at live's 327px it wraps to 3, so the column is capped to reproduce live's 4 lines) */
body.vaso-home .vh-cards .section-sub { margin: 25px auto 0; padding: 0; max-width: 250px; font-size: 22px; line-height: 26.4px; font-weight: 600; text-align: center; }
body.vaso-home .card-trio { margin-top: 39px; gap: 31px; }
body.vaso-home .info-card { width: 100%; max-width: 327px; min-height: 424px; padding: 30px 8px; }
body.vaso-home .info-card img { margin-bottom: 16px; }
/* Early-aggressive pill becomes its own full-bleed gradient band on mobile (live) */
body.vaso-home .vh-early { margin-top: 25px; background: linear-gradient(to bottom, #FF6818, #E2360C); padding: 10px 20px 30px; }
body.vaso-home .vh-early .pill-band { border-radius: 20px; padding: 18px 60px 8px; }
body.vaso-home .pill-band p { font-size: 18px; line-height: 22.5px; }
/* §2 headline row (live pad-top ~60 to headline) */
body.vaso-home .vh-s2head { padding: 60px 16px 16px; }
body.vaso-home .vh-s2head .section-title { padding-left: 0; text-align: left; }
/* §2 grid row — 12px gutters, panels/summaries size to content (no equal-height pin) */
body.vaso-home .vh-grid { background: linear-gradient(to bottom, #E2360C, #6C0A04); padding: 17px 12px 28px; }
body.vaso-home .pathway-grid { gap: 40px; }
body.vaso-home .pathway-col { max-width: 351px; width: 100%; }
body.vaso-home .pathway-col > h4 { display: block; text-align: center; font-size: 22px; line-height: 27.5px; letter-spacing: -0.22px; min-height: 0; margin-bottom: 26px; }
/* panels pinned to live mobile heights (normal 678 / dysfunction 812); bullets spread like live */
body.vaso-home .pathway-panel { padding: 393px 30px 10px; min-height: 0; }
body.vaso-home .pathway-panel--normal { min-height: 678px; }
body.vaso-home .pathway-panel--dysfunction { min-height: 812px; }
body.vaso-home .bullet-list li { margin-bottom: 30px; }
/* summary bars: live mobile pad 8/6/16, pinned to live heights (orange 142 / grey 162) */
body.vaso-home .summary-box { padding: 8px 6px 16px; }
body.vaso-home .summary-box--orange { min-height: 142px; }
body.vaso-home .summary-box--grey { min-height: 162px; }
body.vaso-home .summary-box p { line-height: 20px; }
body.vaso-home .summary-box h6 { font-size: 16px; line-height: 20px; }
/* §2 pill row */
body.vaso-home .vh-pill2 { padding: 8px 12px 40px; }
body.vaso-home .vh-pill2 .pill-band { border-radius: 16px; padding: 18px 12px 0; }
/* fine-print edge-tight on mobile (12px); live mobile refs lh 15px */
body.vaso-home .fine-print .container { max-width: 100%; padding: 0 12px; }
body.vaso-home .fine-print p { line-height: 15px; }
}
/* vaso mobile header/nav height = 62 (live) */
@media (max-width: 767px) {
body.vaso .site-header, body.vaso .header-spacer { height: 62px; }
}
@media (max-width: 993px) {
body.vaso .site-nav { top: 57px; }
}
@media (max-width: 767px) {
body.vaso .site-nav { top: 62px; }
}
/* ============================================================
===== VASO IDENTIFYING — live row structure (measured live) =====
Live vaso identifying = header / hero / FACTORS band (torso as full-band bg +
Disease/Medication cards overlaid + "In cases where" pill) / STATS band
("Vasoplegia is a major" heading + ~25%/50% stat cards + morbidity card) /
FINE-PRINT / footer. Same torso-full-band model as septic-identifying.
MEASURED-LIVE deviations from the earlier assumptions:
- Factor-card headings are WHITE on live (computed rgb(255,255,255) + visual),
NOT black. Live wins over the "black" checklist note.
- Fine-print is a #FF6815->#6C0A04 gradient with black text on DESKTOP,
white bg with black text on MOBILE (genuine vaso difference vs septic's
light #FAFAFA fine-print).
- Stat number graphics are the card BACKGROUND images (the bundled PNGs
carry number + labels; live's text nodes are empty spacers). Caption is
pushed below the number via margin-top.
All scoped body.vaso-identifying; placed last so it wins. Values from live.
============================================================ */
/* content column = full width minus 60px band gutters (live col w1320 @1440) */
body.vaso-identifying .container { max-width: 1320px; padding: 0; }
/* Bands: fold the 60px heading top-space into padding-top (avoids margin collapse).
factors 60/60/60, stats 60/60/30 */
body.vaso-identifying .band-maroon-orange { padding: 60px 60px 60px; background-position: 50% 0%; }
body.vaso-identifying .band-darkred { padding: 60px 60px 30px; }
/* Headlines: 38/lh45.6 left (shared), 36 bottom */
body.vaso-identifying .section-title { margin: 0 0 36px; }
/* ---- FACTORS: torso is the BACKGROUND of the layout, cards overlaid ---- */
body.vaso-identifying .factor-layout {
margin: 0; gap: 0; justify-content: space-between; align-items: flex-start;
min-height: 425px;
background: url('../assets/organ-illustration.png') center / contain no-repeat;
}
body.vaso-identifying .factor-figure { display: none; } /* desktop: torso is the bg */
body.vaso-identifying .factor-card { width: 421px; }
body.vaso-identifying .factor-card h3 { color: #ffffff; margin-bottom: 16px; } /* live: WHITE (measured), not black */
body.vaso-identifying .factor-card--maroon { padding: 32px 40px 10px 32px; min-height: 425px; } /* live left box; C1: spans full torso height (425) */
body.vaso-identifying .factor-card--red { padding: 32px 32px 20px 32px; } /* live right box */
body.vaso-identifying .factor-card p { font-size: 16px; line-height: 20.8px; margin-bottom: 20px; }
body.vaso-identifying .factor-card p strong { font-size: 18px; line-height: 24.3px; }
/* callout pill: live pad 24/20/8 + 16px text-bottom-margin = 24 below; mar-top 10; 20/600 lh24 #E2360C */
body.vaso-identifying .pill-band { margin: 10px 0 0; padding: 24px 20px 24px; }
body.vaso-identifying .pill-band p { line-height: 24px; }
/* ---- STATS: heading + two stat cards (number = card bg) + morbidity ---- */
body.vaso-identifying .stat-cards { max-width: 1320px; margin: 0 auto; gap: 28px; }
body.vaso-identifying .stat-card {
flex: 1 1 0; max-width: none; min-height: 249px; text-align: center; padding: 32px 16px;
background-repeat: no-repeat; background-size: 250px auto;
}
body.vaso-identifying .stat-card:nth-of-type(1) { background-image: url('../assets/stat-25-percent.png'); background-position: 50% 14px; }
body.vaso-identifying .stat-card:nth-of-type(2) { background-image: url('../assets/stat-50-percent.png'); background-position: 50% 0; min-height: 253px; }
body.vaso-identifying .stat-caption { font-size: 16px; line-height: 20px; font-weight: 400; }
body.vaso-identifying .stat-card:nth-of-type(1) .stat-caption { margin-top: 124px; }
body.vaso-identifying .stat-card:nth-of-type(2) .stat-caption { margin-top: 127px; }
/* morbidity card: live pad 36/60, rad 20, border #CCC; heading 28/lh33.6 mb16 */
body.vaso-identifying .morbidity-card { background: rgba(108,10,4,0.4); border: 1px solid #CCCCCC; border-radius: 20px; padding: 36px 60px; margin-top: 16px; }
body.vaso-identifying .morbidity-card h3 { font-size: 28px; line-height: 33.6px; margin-bottom: 16px; }
body.vaso-identifying .dot-list li { font-size: 16px; line-height: 28px; }
/* ---- FINE-PRINT: light bg, BLACK text (live renders white/#FAFAFA both viewports;
the computed "gradient" layer is behind and not visible). refs keep 20px last-margin. ---- */
body.vaso-identifying .fine-print { color: #000000; }
body.vaso-identifying .fine-print .container { max-width: 1440px; padding: 0 61px; } /* live col w1318 x61 */
body.vaso-identifying .fine-print p:last-child { margin-bottom: 20px; }
@media (max-width: 767px) {
/* band gutters: factors 12, stats 16; top-space folded into padding-top */
body.vaso-identifying .band-maroon-orange { padding: 30px 12px 40px; }
body.vaso-identifying .band-darkred { padding: 40px 16px 50px; }
body.vaso-identifying .band-maroon-orange .container,
body.vaso-identifying .band-darkred .container,
body.vaso-identifying .container { max-width: 100%; padding: 0; }
/* headings: factors 28/lh33.6 (16px BOTH sides -> text col 319 = live, wraps to 6 lines;
min-height pins the torso start to live even if my Roboto wraps 1 line short), left (V26) */
body.vaso-identifying .band-maroon-orange .section-title { font-size: 28px; line-height: 33.6px; margin: 0 0 26px; padding: 0 16px; }
/* stats heading: 28/lh33.6, no inset (band gutter 16), left (V27) */
body.vaso-identifying .band-darkred .section-title { font-size: 28px; line-height: 33.6px; margin: 0 0 24px; }
/* torso becomes in-flow img before the cards (order -1 via shared); drop the bg */
body.vaso-identifying .factor-layout { background: none; min-height: 0; }
body.vaso-identifying .factor-figure { display: block; }
body.vaso-identifying .factor-figure img { width: 100%; height: auto; max-width: 100%; }
/* cards full-width; live mobile paddings + stacking margins; min-heights pinned to live
(Disease 447 / Medication 288) so the maroon fill + downstream layout match live depth */
body.vaso-identifying .factor-card { width: 100%; max-width: 100%; }
body.vaso-identifying .factor-card--maroon { padding: 32px 20px; margin-bottom: 32px; min-height: 447px; }
body.vaso-identifying .factor-card--red { padding: 16px 16px 24px; margin-bottom: 16px; min-height: 288px; }
/* pill: live 18/lh21.6, pad 18/20/6 + h-mar 16 = 22 below; pinned to live 128 */
body.vaso-identifying .pill-band { padding: 18px 20px 6px; min-height: 128px; }
body.vaso-identifying .pill-band p { font-size: 18px; line-height: 21.6px; }
/* stat cards: card1 250px bg pad 32/8/4/16 min221; card2 200px bg pad16 min201; gap 20 */
body.vaso-identifying .stat-cards { max-width: 100%; gap: 20px; }
body.vaso-identifying .stat-card:nth-of-type(1) { background-size: 250px auto; background-position: 50% 12px; padding: 32px 8px 4px 16px; min-height: 221px; }
body.vaso-identifying .stat-card:nth-of-type(1) .stat-caption { margin-top: 125px; }
body.vaso-identifying .stat-card:nth-of-type(2) { background-size: 200px auto; background-position: 50% 0; padding: 16px; min-height: 201px; }
body.vaso-identifying .stat-card:nth-of-type(2) .stat-caption { margin-top: 107px; }
/* morbidity: pad 32/12, heading 24/lh28.8 mb16; dt-br hidden (shared) -> natural wrap (V30) */
body.vaso-identifying .morbidity-card { padding: 32px 12px; margin-top: 20px; }
body.vaso-identifying .morbidity-card h3 { font-size: 24px; line-height: 28.8px; }
/* dot-list one-per-line via shared body.vaso .dot-list column (V29) */
/* fine-print mobile: light bg (base #FAFAFA), black text, 12px gutter */
body.vaso-identifying .fine-print .container { max-width: 100%; padding: 0 12px; }
}
/* ============================================================
===== VASO MULTIMODAL — live row structure (measured live) =====
Rows split to match live: modality (texture) / clinical-study stat band
(SOLID #E2360C: heading + two stat cards) / no-improvement band
(SOLID #E2360C + white pill — VASO keeps solid red, NOT septic's gradient)
/ fine-print (black text). Desktop modality = CSS cards with Rectangle PNG
notched headers (fills/PNGs/text-colors verified = live, same as septic);
mobile = three stacked flat SVGs (adrenergic/vasopressin/raas.svg = live).
All scoped body.vaso-multimodal; placed last so it wins.
============================================================ */
/* HubSpot renders at 75% across this page (base is 62%) */
body.vaso-multimodal sup { font-size: 75%; }
/* ---- MODALITY band (texture, content column 1000, gutters 220) ---- */
body.vaso-multimodal .band-red-orange { padding: 60px 0 100px; }
body.vaso-multimodal .mm-modality .container { max-width: 1000px; padding: 0; }
/* "Optimizing" headline: 38/700 white LEFT (V32), lh45.6 (=1.2 via body.vaso) */
body.vaso-multimodal .mm-modality .section-title { line-height: 45.6px; margin: 0 0 38px; }
/* intro "When adrenergic…": 20/600 white LEFT on desktop */
body.vaso-multimodal .modality-intro { font-size: 20px; font-weight: 600; line-height: 24px; text-align: left; margin: 0 0 28px; }
/* modality cards: single box, maroon fill + Rectangle PNG notched header at top */
body.vaso-multimodal .modality-cards { gap: 22px; margin: 0; justify-content: center; align-items: stretch; }
body.vaso-multimodal .modality-card {
flex: 1 1 0; max-width: none; min-height: 347px; display: flex; flex-direction: column;
border: 1px solid #CCCCCC; border-radius: 10px; overflow: hidden; padding: 32px;
background-repeat: no-repeat; background-position: 50% 0%; background-size: 320px auto;
}
body.vaso-multimodal .modality-card:nth-of-type(1) { background-color: rgba(108,10,4,0.5); background-image: url('../assets/rectangle-2.png'); }
body.vaso-multimodal .modality-card:nth-of-type(2) { background-color: rgba(108,10,4,0.4); background-image: url('../assets/rectangle-3.png'); }
body.vaso-multimodal .modality-card:nth-of-type(3) { background-color: rgba(108,10,4,0.4); background-image: url('../assets/rectangle-4.png'); }
body.vaso-multimodal .modality-head { background: none; clip-path: none; color: #000000; text-align: center; padding: 0; min-height: 162px; }
body.vaso-multimodal .modality-head h3 { font-size: 28px; font-weight: 700; line-height: 37.8px; color: #000000; margin-bottom: 11px; }
body.vaso-multimodal .modality-head .modality-desc { font-size: 16px; font-weight: 400; line-height: 18.4px; color: #000000; }
body.vaso-multimodal .modality-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0; }
body.vaso-multimodal .modality-body p { font-size: 16px; font-weight: 700; line-height: 21.6px; text-align: center; color: #ffffff; }
body.vaso-multimodal .modality-svgs { display: none; }
/* ---- CLINICAL-STUDY STAT band (solid #E2360C; heading + cards) ---- */
body.vaso-multimodal .mm-stats { padding: 40px 0 30px; }
body.vaso-multimodal .mm-stats .container { max-width: 1200px; padding: 0; }
/* .clinical-study gives 28px (body.vaso); scope fw/lh/margin (heading text starts x120) */
body.vaso-multimodal .mm-stats .section-title { font-weight: 600; line-height: 33.6px; margin: 0; }
body.vaso-multimodal .stat-cards { max-width: 1040px; margin: 37px auto 0; gap: 54px; }
body.vaso-multimodal .stat-card {
flex: 1 1 0; max-width: none; min-height: 239px; border: 1px solid #FFFFFF; border-radius: 20px;
background-color: rgba(108,10,4,0.4); padding: 20px; text-align: center;
background-repeat: no-repeat; background-position: 50% 0%; background-size: 150px auto;
}
body.vaso-multimodal .stat-card:nth-of-type(1) { background-image: url('../assets/stat-53-percent.png'); }
body.vaso-multimodal .stat-card:nth-of-type(2) { background-image: url('../assets/stat-49-percent.png'); }
body.vaso-multimodal .stat-card h6 { font-size: 16px; font-weight: 600; line-height: 19.2px; color: #ffffff; margin: 142px 0 0; }
/* ---- NO-IMPROVEMENT band (SOLID #E2360C + white pill — vaso, not septic gradient) ---- */
body.vaso-multimodal .mm-noimprove { background: #E2360C; padding: 20px 60px 30px; }
body.vaso-multimodal .mm-noimprove .container { max-width: 1320px; padding: 0; }
body.vaso-multimodal .mm-noimprove .pill-band { margin: 0; min-height: 92px; padding: 18px 136px 8px; border: 1px solid #FFFFFF; border-radius: 20px; }
body.vaso-multimodal .mm-noimprove .pill-band p { font-size: 20px; font-weight: 600; line-height: 24px; color: #E2360C; }
/* ---- FINE PRINT (live: black text, 60px band gutter, 13px paragraph indent) ---- */
body.vaso-multimodal .fine-print { color: #000000; }
body.vaso-multimodal .fine-print .container { max-width: 1440px; padding: 0 60px; }
body.vaso-multimodal .fine-print p { padding-left: 13px; line-height: 14px; margin-bottom: 6px; }
body.vaso-multimodal .fine-print p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
/* MODALITY mobile: hide CSS cards, show stacked flat SVGs */
body.vaso-multimodal .band-red-orange { padding: 30px 0 60px; }
body.vaso-multimodal .mm-modality .container { max-width: 100%; padding: 0 12px; }
body.vaso-multimodal .mm-br { display: none; }
/* "Optimizing" 26/700 LEFT x24 (V32/V33) */
body.vaso-multimodal .mm-modality .section-title { line-height: 31.2px; margin: 0 0 31px; padding-left: 12px; }
/* intro 20/600 CENTER, ~271 col -> 6-line wrap = live */
body.vaso-multimodal .modality-intro { font-size: 20px; font-weight: 600; line-height: 25px; text-align: center; margin: 0 0 29px; padding: 0 20px; }
body.vaso-multimodal .modality-cards { display: none; }
body.vaso-multimodal .modality-svgs { display: block; }
body.vaso-multimodal .modality-svgs img { width: 320px; max-width: 100%; height: auto; margin: 0 auto 36px; }
body.vaso-multimodal .modality-svgs img:last-child { margin-bottom: 0; }
/* STAT mobile: heading LEFT 24/600 (x28); cards 255 wide (60px gutters) */
body.vaso-multimodal .mm-stats { padding: 40px 0 0; }
body.vaso-multimodal .mm-stats .container { max-width: 100%; padding: 0 12px; }
/* live heading wraps 5 lines (h143); my narrower Roboto wraps 4 -> pin min-height so
the band height + card start position match live (text-wrap is the font floor) */
/* C11: min-height removed (was 143px); padding keeps the live 5-line wrap (self-hosted Roboto needs the narrower text column to wrap to 5 like live's font at 319px) */
body.vaso-multimodal .mm-stats .section-title { font-size: 24px; font-weight: 600; line-height: 28.8px; text-align: left; margin: 0; padding: 0 60px 0 16px; }
body.vaso-multimodal .stat-cards { max-width: 255px; margin: 25px auto 0; gap: 20px; }
body.vaso-multimodal .stat-card { padding: 20px 12px; }
body.vaso-multimodal .stat-card:nth-of-type(1) { min-height: 239px; }
body.vaso-multimodal .stat-card:nth-of-type(2) { min-height: 256px; }
/* NO-IMPROVE mobile (pill wraps to 3 lines; live pill h109) */
body.vaso-multimodal .mm-noimprove { padding: 20px 16px 20px; }
body.vaso-multimodal .mm-noimprove .container { padding: 0; }
body.vaso-multimodal .mm-noimprove .pill-band { min-height: 109px; padding: 18px 16px 8px; }
body.vaso-multimodal .mm-noimprove .pill-band p { font-size: 18px; line-height: 21.6px; }
/* FINE PRINT mobile: 12px gutter, 7px paragraph indent; live packs paragraphs tight */
body.vaso-multimodal .fine-print .container { max-width: 100%; padding: 0 12px; }
body.vaso-multimodal .fine-print p { padding-left: 7px; margin-bottom: 6px; }
/* footnote rows need a wider gutter than plain paragraphs so the * / dagger hang
cleanly (live: fn text x21, plain text x19); mark must fit inside the gutter */
body.vaso-multimodal .fine-print .fn-row { padding-left: 9px; }
body.vaso-multimodal .fine-print .fn-row .fn-mark { width: 8px; }
}