/* ==========================================================================
   Hemodynamics Academy — with Dr. Yasser Nassef
   Separate site from intcaregroup.com (ICG is credited as supporter).
   Palette: deep navy + coral (pulse) + green (ICG link) + cyan/amber (monitor).
   ========================================================================== */
:root {
  --ink: #0E1B2C; --body: #46586E; --muted: #5A6B80; --line: #E1E9F3; --surface: #F5F8FC;
  --blue: #005CB9; --blue-700: #004A96; --blue-900: #002F5E;
  --navy: #071A33; --navy-2: #0B2547; --navy-line: #1A3A66;
  --coral: #FF5A5F; --coral-700: #C8323A; --amber: #FFB020; --cyan: #3DD6F5;
  --green: #6ED34B; --green-700: #2F7A18;
  --on-dark: #C9D8EA; --on-dark-muted: #9DB3CF;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --wrap: 1180px; --gutter: 24px; --r: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--body); background: #fff; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; display: block; }   /* height:auto keeps width/height attributes from stretching photos */
h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; line-height: 1.14; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); letter-spacing: -.035em; line-height: 1.04; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.18rem; letter-spacing: -.01em; }
h1, h2, h3 { text-wrap: balance; }   /* no one-word last lines */
p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-700); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue-700); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .ftr :focus-visible { outline-color: var(--green); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--coral-700); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 10px; }
.skip:focus { top: 0; color: #fff; }

/* --- header --------------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(7, 26, 51, .94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--navy-line); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.logo:hover { color: #fff; }
.logo .mark { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--coral), #FF8A5B); display: grid; place-items: center; flex: none; }
.logo .mark svg { width: 22px; height: 22px; }
.logo small { display: block; font-weight: 500; color: var(--on-dark-muted); font-size: .72rem; letter-spacing: .03em; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a { color: var(--on-dark); font-size: .94rem; font-weight: 550; padding: 9px 13px; border-radius: 9px; }
.menu a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.menu a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--coral); border-radius: 0; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--navy-line); background: transparent; color: #fff; place-items: center; }
.menu-btn svg { width: 22px; height: 22px; }
/* Eight links: tighten them on narrower desktops so the row still fits beside the logo. */
@media (min-width: 881px) and (max-width: 1180px) {
  .hdr .wrap { gap: 12px; }
  .menu { gap: 2px; }
  .menu a { padding: 9px 10px; font-size: .9rem; }
}
@media (min-width: 881px) and (max-width: 1040px) {
  .menu { gap: 0; }
  .menu a { padding: 8px 7px; font-size: .86rem; }
}
@media (max-width: 880px) {
  .menu-btn { display: grid; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy); border-bottom: 1px solid var(--navy-line); padding: 8px var(--gutter) 18px; box-shadow: 0 0 0 100vmax rgba(3, 10, 20, .5); }
  .menu.open { display: flex; }
  .menu a { padding: 14px 4px; border-bottom: 1px solid var(--navy-line); border-radius: 0; }
  .menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--coral); padding-left: 12px; }
}

/* --- buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 700; font-size: .96rem; text-align: center; line-height: 1.3; transition: transform .18s var(--ease), background .18s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn-coral { background: #D93C41; color: #fff; }   /* 4.5:1 with white; the brighter #FF5A5F was 3.05:1 */
.btn-coral:hover { background: #C2343A; color: #fff; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-green { background: var(--green); color: #10310A; }
.btn-green:hover { background: #86E066; color: #10310A; }
.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-700); color: #fff; }
.btn-line { color: var(--ink); border-color: #CBD7E6; background: #fff; }
.btn-line:hover { border-color: var(--blue); color: var(--blue); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- section scaffolding --------------------------------------------------- */
.sec { padding: clamp(56px, 8vw, 96px) 0; }
.sec-alt { background: #F8FAFD; }
.dark { background: var(--navy); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.kicker { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-700); margin-bottom: 12px; }
.dark .kicker { color: #FF8F92; }
.head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.head p { font-size: 1.06rem; color: var(--muted); margin: 0; }
.dark .head p { color: var(--on-dark); }
.note { display: inline-block; font-size: .8rem; font-weight: 600; color: #7A5200; background: #FFF4D6; border: 1px solid #F5D78E; border-radius: 6px; padding: 2px 8px; vertical-align: middle; }
.dark .note { color: #FFE2A6; background: rgba(255, 176, 32, .12); border-color: rgba(255, 176, 32, .4); }
.grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 700px) and (max-width: 999px) { .g5 { grid-template-columns: 1fr 1fr; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.card h3 { margin-bottom: 6px; }
.card p:last-child { margin-bottom: 0; }

/* --- page banner (inner pages) -------------------------------------------- */
.banner { position: relative; overflow: hidden; }
.banner .wrap { position: relative; z-index: 1; padding-block: clamp(52px, 7vw, 88px); }
.banner h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 18ch; }
.banner p { max-width: 62ch; font-size: 1.1rem; margin: 0; }
canvas.wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The trace never crosses text: full height, like the home hero, but faded out
   across the left so it lives only on the right of the banner. On phones the
   text fills the width, so there it drops to a strip under the text. */
.hero canvas.wave {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 42%, #000 64%);
          mask-image: linear-gradient(90deg, transparent 0, transparent 42%, #000 64%);
}
.banner canvas.wave {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 54%, #000 74%);
          mask-image: linear-gradient(90deg, transparent 0, transparent 54%, #000 74%);
}
@media (max-width: 760px) {
  .banner .wrap { padding-bottom: 150px; }
  .banner canvas.wave { top: auto; bottom: 0; height: 140px; -webkit-mask-image: none; mask-image: none; }
}
/* Banner with a picture: the image sits on the right, a navy fade keeps the
   headline side dark, and the trace runs along the bottom of the picture
   instead of across it. On phones the picture stays behind the text under a
   heavier fade. */
.banner-art { position: absolute; inset: 0; z-index: 0; }
.banner-art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
/* On wide screens the banner is much wider than the picture, so it is cropped
   top and bottom; keep the upper part when that is where the subject is. */
.banner-art--top img { object-position: right 22%; }
.banner.has-art::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--navy) 0%, rgba(7, 26, 51, 0) 28%),
              linear-gradient(90deg, var(--navy) 0%, rgba(7, 26, 51, .9) 32%, rgba(7, 26, 51, .35) 60%, rgba(7, 26, 51, 0) 100%); }
.banner.has-art canvas.wave { z-index: 1; top: auto; bottom: 0; height: 42%; }
.banner.has-art .wrap { z-index: 2; }
@media (max-width: 760px) {
  .banner.has-art::after { background: linear-gradient(180deg, rgba(7, 26, 51, .84) 0%, rgba(7, 26, 51, .68) 60%, rgba(7, 26, 51, .45) 100%); }
  .banner.has-art canvas.wave { height: 140px; }
}

/* --- home hero ------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; min-height: 380px; }
.hero-txt { padding: 34px 0; align-self: center; }
.hero h1 { max-width: 12ch; }
.hero h1 span { background: linear-gradient(90deg, var(--coral), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-txt p { font-size: 1.16rem; max-width: 46ch; }
/* The portrait is centred on the text block: his head level with the headline,
   the faded waist level with the buttons. The figure box sizes to the photo,
   so the three readings sit on the photo, not on the column. */
.hero-ph { position: relative; display: flex; align-items: center; justify-content: flex-end; padding-right: 0; }
.hero-fig { position: relative; height: 78%; aspect-ratio: 640 / 820; margin-right: 0; }
.hero-fig img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5));
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.vital { position: absolute; z-index: 2; background: rgba(7, 26, 51, .84); backdrop-filter: blur(8px); border: 1px solid #1F4775; border-radius: 14px; padding: 9px 14px; font-family: var(--mono); color: #fff; white-space: nowrap; }
.vital span { display: block; font-size: .66rem; letter-spacing: .1em; color: var(--on-dark-muted); }
.vital b { font-size: 1.5rem; line-height: 1.15; }
.v1 { left: -18%; top: 16%; } .v1 b { color: var(--green); }
.v2 { right: -12%; top: 30%; } .v2 b { color: var(--cyan); }
.v3 { left: -24%; bottom: 20%; } .v3 b { color: var(--amber); }
@media (max-width: 1080px) and (min-width: 761px) { .hero-fig { height: 70%; margin-right: 10px; } .v2 { right: -4%; } }
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-txt { padding: 40px 0 0; }
  .hero-ph { height: 320px; justify-content: center; padding-right: 0; }
  .hero canvas.wave { top: auto; bottom: 0; height: 320px; -webkit-mask-image: none; mask-image: none; }   /* behind the photo, clear of the text */
  .hero-fig { height: 92%; }
  .v1 { left: -30%; } .v2 { right: -30%; } .v3 { left: -34%; }
}

/* --- learning paths ------------------------------------------------------- */
.path { display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.path:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(7, 26, 51, .1); }
.path .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.path .ic svg { width: 22px; height: 22px; }
.path h3 { min-height: 2.3em; }   /* lists start level whether the title wraps or not */
.path p { font-size: .93rem; }
.path .lv { margin-top: auto; padding-top: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--blue); }
.path ol { margin: 0 0 4px; padding-left: 18px; font-size: .9rem; }
.path ol li { margin-bottom: 3px; }

/* --- learning tracks: each a row with its lessons as a connected journey --- */
.tracks { display: grid; gap: 14px; }
.track { display: grid; grid-template-columns: minmax(250px, 1fr) 2fr auto; gap: 24px; align-items: center; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--tc); border-radius: var(--r); padding: 20px 22px; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.track:hover { box-shadow: 0 14px 30px rgba(7, 26, 51, .09); transform: translateY(-2px); }
.track-head { display: flex; gap: 14px; align-items: flex-start; }
.track-head .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--tb); color: var(--tc); flex: none; }
.track-head .ic svg { width: 23px; height: 23px; }
.track-head h3 { margin: 0 0 2px; font-size: 1.12rem; }
.track-head .aud { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--tc); background: var(--tb); border-radius: 999px; padding: 2px 9px; margin-bottom: 6px; }
.track-head p { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.steps-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.steps-line::before { content: ""; position: absolute; top: 15px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, var(--tc), var(--tb)); }
.steps-line li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 6px; margin: 0; }
.steps-line .node { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--tc); color: var(--tc); font-weight: 800; font-size: .85rem; position: relative; z-index: 1; }
.steps-line li:first-child .node { background: var(--tc); color: #fff; }
.steps-line .st { font-size: .84rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.track-go { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 700; font-size: .88rem; color: var(--tc); border: 1.5px solid var(--tc); border-radius: 999px; padding: 9px 16px; min-height: 42px; }
.track-go:hover { background: var(--tc); color: #fff; }
.tracks-note { margin-top: 18px; font-size: .92rem; color: var(--muted); }
@media (max-width: 1000px) {
  .track { grid-template-columns: 1fr; gap: 16px; }
  .track-go { justify-self: start; }
}
@media (max-width: 600px) {
  .steps-line { grid-template-columns: 1fr; gap: 10px; padding-left: 4px; }
  .steps-line::before { top: 16px; bottom: 16px; left: 19px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--tc), var(--tb)); }
  .steps-line li { flex-direction: row; text-align: left; gap: 12px; }
}

/* --- compare page: blood-loss model and comparison tables ------------------ */
.cmp-sim { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.cmp-ctrl label { display: flex; justify-content: space-between; font-weight: 700; color: var(--ink); }
.cmp-ctrl label output { font-family: var(--mono); color: var(--coral-700); font-size: 1.2rem; }
.cmp-ctrl input[type=range] { width: 100%; accent-color: var(--coral-700); height: 32px; margin: 6px 0 0; }
.cmp-scale { display: flex; justify-content: space-between; font: 600 .74rem var(--mono); color: var(--muted); }
.cmp-hint { font-size: .88rem; color: var(--muted); margin: 8px 0 0; }
.cmp-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.cmp-panel { background: #02080F; border: 8px solid #1A2433; border-radius: 18px; padding: 14px 16px; color: #C9D8EA; }
.cmp-panel h3 { color: #fff; font-size: .95rem; letter-spacing: .04em; margin: 0 0 8px; }
.cmp-panel.flow h3 { color: var(--cyan); }
.cmp-row { display: grid; grid-template-columns: 1fr auto 60px; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #13202F; font-size: .88rem; }
.cmp-row b { font: 700 1.5rem var(--mono); color: var(--green); text-align: right; }
.cmp-panel.flow .cmp-row b { color: var(--amber); }
.cmp-row i { font-style: normal; font-size: .72rem; color: var(--on-dark-muted); }
.cmp-alarm { margin-top: 10px; border-radius: 10px; padding: 9px 12px; font-weight: 700; font-size: .86rem; background: #0E2236; color: var(--on-dark-muted); }
.cmp-alarm.on { background: rgba(255, 90, 95, .18); color: #FF9A9D; box-shadow: inset 0 0 0 1px rgba(255, 90, 95, .5); }
.cmp-verdict { margin: 16px 0 0; background: var(--navy-2); color: #DCEBF9; border-radius: 14px; padding: 14px 16px; font-size: .95rem; min-height: 54px; }
.cmp-verdict b { color: #fff; }
.cmp-src { font-size: .82rem; color: var(--muted); margin-top: 12px; }
.cmp-tbl td { font-size: .86rem; }
.cmp-tbl td.good { background: #F1FAEC; color: #1F5410; font-weight: 600; }
.cmp-tbl td.mid { background: #FFF9EC; color: #6B4200; }
.cmp-tbl td.bad { background: #FDF1F0; color: #8E1B17; }
.cmp-tbl thead th:last-child { color: var(--coral-700); }
.cmp-honest { margin-top: 26px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--blue); border-radius: var(--r); padding: 20px 22px; }
.cmp-honest h3 { margin-bottom: 8px; }
.cmp-honest p { font-size: .95rem; }
.cmp-honest p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .cmp-panels { grid-template-columns: 1fr; } }

/* --- parameter glossary --------------------------------------------------- */
.params { display: grid; gap: 12px; }
@media (min-width: 760px) { .params { grid-template-columns: 1fr 1fr; } }
.param { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.param .ab { font-family: var(--mono); font-weight: 700; font-size: .92rem; white-space: nowrap; color: var(--blue-900); background: #EAF2FB; border-radius: 10px; padding: 8px 6px; text-align: center; }
.params > .param:last-child:nth-child(odd) { grid-column: 1 / -1; }
.param h3 { font-size: 1rem; margin-bottom: 2px; }
.param p { font-size: .92rem; margin: 0; }
.param .u { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.group-title { margin: 34px 0 14px; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --- tables ----------------------------------------------------------------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.tbl th, .tbl td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--line); }
.tbl thead th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface); font-family: var(--mono); }
.tbl tbody th, .tbl thead th:first-child { text-align: left; color: var(--ink); white-space: nowrap; }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl td { font-family: var(--mono); font-weight: 700; color: var(--muted); white-space: nowrap; }
.tbl td.up { color: #9A5B00; } .tbl td.dn { color: #C62828; }
/* Evidence tables: prose cells, left-aligned and wrapping */
.tbl-ev { min-width: 760px; }
.tbl-ev td { font-family: var(--font); font-weight: 400; color: var(--body); text-align: left; white-space: normal; font-size: .9rem; }
.tbl-ev thead th { text-align: left; }
.tbl-ev td.v-ok, .tbl-ev td.v-mid, .tbl-ev td.v-no { text-align: center; font-weight: 800; font-size: 1.1rem; }
.v-ok { color: var(--green-700) !important; } .v-mid { color: #9A5B00 !important; } .v-no { color: #C62828 !important; }
.tbl-wrap + .group-title { margin-top: 30px; }

/* --- how-it-works steps --------------------------------------------------- */
.steps { counter-reset: s; display: grid; gap: 16px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--r); padding: 22px; }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--coral); color: #fff; font-weight: 800; margin-bottom: 12px; }
.step h3 { font-size: 1.05rem; }
.step p { font-size: .93rem; margin: 0; }

/* --- simulator ------------------------------------------------------------ */
.sim { display: grid; grid-template-columns: 340px 1fr; gap: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.ctrl label { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; font-weight: 600; color: var(--ink); margin: 16px 0 4px; }
.ctrl label output { font-family: var(--mono); color: var(--blue); white-space: nowrap; }
.ctrl input[type=range] { width: 100%; accent-color: var(--blue); height: 30px; margin: 0; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { border: 1px solid #CBD7E6; background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 13px; font-size: .82rem; font-weight: 600; min-height: 40px; }
.presets button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; }
.kpi span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.kpi b { display: block; font-family: var(--mono); font-size: 1.55rem; color: var(--ink); line-height: 1.2; }
.kpi i { font-style: normal; font-size: .76rem; color: var(--muted); }
.kpi.low b { color: #C62828; } .kpi.high b { color: #9A5B00; } .kpi.ok b { color: var(--green-700); }
.kpi .tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font: 700 .64rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; vertical-align: 1px; }
.kpi .tag:empty { display: none; }
.kpi.low .tag { color: #C62828; background: #FDECEA; }
.kpi.high .tag { color: #8A5100; background: #FFF6E5; }
.kpi.ok .tag { color: var(--green-700); background: #F1FAEC; }
.plot { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; height: 290px; }
.plot canvas { width: 100%; height: 100%; display: block; }
.interp { margin-top: 12px; background: var(--navy-2); color: #DCEBF9; border-radius: 14px; padding: 14px 16px; font-size: .94rem; min-height: 72px; }
.interp b { color: #fff; }
@media (max-width: 900px) { .sim { grid-template-columns: 1fr; padding: 16px; } .out { grid-template-columns: 1fr 1fr; } }

/* --- cases ---------------------------------------------------------------- */
.case-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 18px; }
.case-list button { border: 1.5px solid #CBD7E6; background: #fff; border-radius: 999px; padding: 9px 15px; font-weight: 600; font-size: .88rem; color: var(--ink); min-height: 42px; }
.case-list button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.case { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } }
.case-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.case-card h3 { font-size: 1.12rem; }
.case-meta { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--coral-700); margin-bottom: 8px; }
.vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.vitals div { background: var(--surface); border-radius: 10px; padding: 8px 10px; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.vitals b { display: block; font-size: 1.1rem; color: var(--ink); }
.vitals .flag-low b { color: #C62828; } .vitals .flag-high b { color: #9A5B00; }
.choices { display: grid; gap: 8px; margin-top: 10px; }
.choices button { text-align: left; border: 1.5px solid #CBD7E6; background: #fff; border-radius: 12px; padding: 12px 14px; font-weight: 600; color: var(--ink); min-height: 48px; }
.gate[hidden] { display: none; }
.choices.locked button { opacity: .5; cursor: not-allowed; }
.choices.locked button:hover { border-color: #CBD7E6; }
.gate { font-size: .92rem; color: var(--muted); background: var(--surface); border: 1px dashed #CBD7E6; border-radius: 12px; padding: 12px 14px; margin: 10px 0 0; }
.choices button:hover { border-color: var(--blue); }
.disclosure { grid-column: 1 / -1; font-size: .84rem; border: 1px solid #13243D; border-radius: 12px; padding: 14px 16px; margin: 0; }
.disclosure b { color: #fff; }
.byline { font-size: .84rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 26px; padding-top: 14px; }
.byline b { color: var(--ink); }
.choices button.good { border-color: var(--green-700); background: #F1FAEC; }
.choices button.meh { border-color: #9A5B00; background: #FFF6E5; }
.choices button.bad { border-color: #C62828; background: #FDECEA; }
.fb { margin-top: 12px; border-radius: 12px; padding: 13px 15px; font-size: .94rem; }
.fb[hidden] { display: none; }
.fb-good { background: #F1FAEC; border: 1px solid #BFE9AC; color: #1F5410; }
.fb-meh { background: #FFF6E5; border: 1px solid #F3D29A; color: #6B4200; }
.fb-bad { background: #FDECEA; border: 1px solid #F2C5C0; color: #8E1B17; }
.reveal-out { margin-top: 10px; font-size: .94rem; }
.teach { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: .93rem; }
.teach h4 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* --- educator / publications ---------------------------------------------- */
.bio { display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: start; }
@media (max-width: 860px) { .bio { grid-template-columns: 1fr; } .bio-photo { max-width: 320px; } }
.bio-photo { border-radius: var(--r); overflow: hidden; background: #E9DFC6; }
/* Pinned beside the long text on desktop only; on a phone it would slide over it. */
@media (min-width: 861px) { .bio-photo { position: sticky; top: 92px; } }
.bio-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
/* Teaching photos on the About page: one row of equal tiles, cropped from the top so faces stay in. */
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery figure:last-child { display: none; } }
.gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.bio ul { padding-left: 18px; }
.pubs { list-style: none; padding: 0; margin: 14px 0 0; }
.pubs li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.pubs li b { color: var(--ink); display: block; }
.pubs li span { color: var(--muted); font-size: .86rem; }

/* --- feature strip (home) ------------------------------------------------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }
.mini-monitor { position: relative; background: #02080F; border: 10px solid #1A2433; border-radius: 20px; height: 300px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.mini-monitor .traces { position: absolute; inset: 0 40% 0 0; border-right: 1px solid #13202F; }
.mini-monitor .traces canvas { position: absolute; left: 0; width: 100%; }
.mini-monitor .lbl { position: absolute; left: 10px; font: 700 11px var(--mono); letter-spacing: .06em; }
.mini-monitor .nums { position: absolute; inset: 0 0 0 60%; display: grid; grid-template-rows: repeat(4, 1fr); }
.mini-monitor .num { padding: 6px 12px; border-bottom: 1px solid #13202F; font-family: var(--mono); min-height: 0; overflow: hidden; }
.mini-monitor .num:last-child { border-bottom: 0; }
.mini-monitor .num span { display: block; line-height: 1.2; font-size: .62rem; letter-spacing: .08em; opacity: .85; }
.mini-monitor .num b { display: block; font-size: 1.35rem; line-height: 1.15; }
.mm-cap { margin: 10px 0 0; font-size: .82rem; color: var(--muted); text-align: center; }

/* --- about: logo animation ------------------------------------------------- */
.brand-anim { border-radius: var(--r); overflow: hidden; max-width: 420px; width: 100%; justify-self: center; background: #071A33; }
.brand-anim video, .brand-anim img { width: 100%; height: auto; display: block; }

/* --- footer --------------------------------------------------------------- */
.ftr { background: #050F1F; color: var(--on-dark-muted); font-size: .9rem; }
.ftr .wrap { padding-block: 40px 28px; display: grid; gap: 26px; }
@media (min-width: 800px) { .ftr .wrap { grid-template-columns: 1.4fr 1fr 1fr; } }
.ftr h4 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.ftr a { color: var(--on-dark); }
.ftr a:hover { color: var(--green); }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 4px; }
.ftr li a { display: inline-block; padding: 5px 0; }
.ftr .legal { grid-column: 1 / -1; border-top: 1px solid #13243D; padding-top: 18px; font-size: .82rem; }
.supporter { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; background: #fff; border-radius: 10px; padding: 8px 14px; }
.supporter img { height: 36px; width: auto; }

/* --- motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.6; }
  :root { --gutter: 18px; }
  .btns .btn { flex: 1 1 100%; }
  .param { grid-template-columns: 72px 1fr; padding: 14px; }
}