/* Layout: a light, calm page; only the product itself (phones, app mock-ups, the film) is dark, so it stands out. Content is set in rows and tables like a ward board. */
:root {
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --ink: #0E1A33;
  --muted: #55627A;
  --line: #DCE2EB;
  --brand: #1F4FB4;
  --brand-ink: #FFFFFF;
  --signal: #E8811A;
  --signal-ink: #A85609;
  --night: #0A1222;
  --night-2: #111C31;
  --night-ink: #E9EEF6;
  --night-muted: #9AA8C0;
  --night-line: #22304A;
  --ok: #1F7A4F;
  --ok-bg: #E3F2EA;
  --warn: #9A6200;
  --warn-bg: #FBF0D9;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 76px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:root { color-scheme: light; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1180px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
section { padding-block: clamp(64px, 9vw, 120px); }
section + section { border-top: 1px solid var(--line); }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: clamp(42px, 5.8vw, 76px); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }
.label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--muted); }
.intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.intro p { color: var(--muted); max-width: 54ch; }
.intro:has(> :only-child) { grid-template-columns: 1fr; }
.intro:has(> :only-child) h2 { max-width: 24ch; }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 8px; font: 600 15.5px var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.1); }
.btn.line { border-color: currentColor; color: inherit; }
.btn.line:hover { color: var(--signal); }
.btn.text { padding-inline: 4px; color: inherit; opacity: .85; }
.btn.text:hover { opacity: 1; color: var(--signal); }

/* nav sits at the top of the light page */
nav.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); color: var(--ink); border-bottom: 1px solid var(--line); }
nav.top .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.brand img { width: 28px; height: 28px; border-radius: 6px; }
.brand span b { font-weight: 500; color: var(--muted); margin-left: 4px; }
.navlinks { display: flex; gap: 26px; font-size: 15px; }
.navlinks a { text-decoration: none; color: var(--muted); }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--ink); }
.navlinks a[aria-current="page"] { font-weight: 600; }
nav.top .btn { padding: 9px 16px; font-size: 14.5px; }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.mobile-menu { display: none; }
@media (max-width: 960px) {
  nav.top .wrap { gap: 12px; }
  .navlinks { display: none; }
  .mobile-menu { display: block; margin-left: auto; }
  .mobile-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font: 600 14px var(--sans); color: var(--ink); }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu[open] summary { border-color: var(--brand); color: var(--brand); }
  .mobile-links { position: absolute; top: calc(100% + 6px); left: 20px; right: 20px; max-height: calc(100dvh - 100px); overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 20px 40px -16px rgba(14,26,51,.22); display: grid; gap: 2px; }
  .mobile-links a { display: block; padding: 11px 14px; border-radius: 8px; color: var(--ink); font-weight: 500; font-size: 15px; text-decoration: none; }
  .mobile-links a:hover, .mobile-links a[aria-current="page"] { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); color: var(--brand); }
}
@media (max-width: 640px) {
  .nav-cta .btn.line { display: none; }
  nav.top .wrap { gap: 8px; padding-inline: 16px; }
  .brand { gap: 7px; font-size: 18px; }
  .brand img { width: 24px; height: 24px; }
  nav.top .btn { padding: 8px 13px; font-size: 13.5px; }
  .mobile-links { left: 16px; right: 16px; }
}

/* hero */
.hero { background: linear-gradient(180deg, var(--surface), var(--bg)); color: var(--ink); padding-block: clamp(56px, 8vw, 104px) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-copy { display: grid; gap: 28px; justify-items: start; min-width: 0; }
.hero-copy h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.hero .label { color: var(--brand); }
.hero-sub { font-size: clamp(18px, 1.9vw, 21px); color: var(--muted); max-width: 36ch; }
.hero-sub strong { color: var(--ink); font-weight: 500; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { font-size: 14px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.hero-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3FCB82; box-shadow: 0 0 0 4px rgba(63,203,130,.15); flex: none; }
.live { margin: 0; position: relative; display: grid; justify-items: center; min-width: 0; justify-self: end; padding-left: clamp(0px, 9vw, 120px); }
.phone { position: relative; width: min(320px, 100%); padding: 34px 10px 26px; border-radius: 46px; background: #04070D; border: 1px solid #1F2633; box-shadow: 0 40px 80px -36px rgba(14,26,51,.45), inset 0 0 0 1px rgba(255,255,255,.04); }
/* status bar and home indicator keep the app screen clear of the rounded corners */
.phone::before { content: "9:41"; position: absolute; top: 11px; left: 30px; font: 600 12px var(--sans); color: #E8EAF0; letter-spacing: .01em; }
.phone::after { content: ""; position: absolute; bottom: 10px; left: 50%; width: 34%; height: 4px; border-radius: 2px; background: rgba(232,234,240,.55); transform: translateX(-50%); }
.phone img { display: block; width: 100%; height: auto; border-radius: 10px; }
.explain { position: absolute; left: 0; bottom: 96px; width: 270px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; box-shadow: 0 20px 40px -20px rgba(14,26,51,.3); }
.explain .who { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--signal-ink); }
.explain .who span { color: var(--muted); }
.explain p { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.live figcaption { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; max-width: 300px; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .live { justify-self: center; padding-left: 0; } .explain { position: static; width: min(300px, 78vw); margin-top: 16px; } }
.hero-path { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font: 500 13px var(--mono); color: var(--ink); }
.hero-path li { display: flex; align-items: center; }
.hero-path li + li::before { content: "→"; color: var(--muted); margin-inline: 8px; }
.hero-path a { text-decoration: none; padding: 2px 6px; border-radius: 5px; transition: background .15s, color .15s; }
.hero-path a:hover { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); }


.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--line); }
.stats div { padding: 24px 20px 28px 0; display: grid; gap: 4px; min-width: 0; }
.stats div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.stats b { font-size: clamp(30px, 3.4vw, 42px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stats span { font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } .stats div:nth-child(3) { padding-left: 0; border-left: 0; } .stats div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* why now */
.why .cols { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.why-text { display: grid; gap: 16px; }
.why .cols p { color: var(--muted); font-size: 18px; }
.why .cols strong { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .why .cols { grid-template-columns: 1fr; } }

/* care team: a duty roster */
.roster-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.roster-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.roster-head strong { color: var(--ink); font-weight: 600; }
.roster-head .on { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--ok); }
.roster-head .on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
table.roster { width: 100%; border-collapse: collapse; font-size: 15px; }
.roster th { text-align: left; font: 500 12px var(--mono); color: var(--muted); padding: 12px 22px; background: color-mix(in srgb, var(--bg) 60%, var(--surface)); border-bottom: 1px solid var(--line); }
.roster td { padding: 16px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
.roster tr:last-child td { border-bottom: 0; }
.roster tr.group td { padding: 10px 22px; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.roster td.role { width: 22%; font-weight: 650; font-size: 16.5px; letter-spacing: -0.01em; }
.roster td.does { color: var(--muted); }
.roster td.when { width: 13%; font: 13px var(--mono); color: var(--ink); white-space: nowrap; }
.roster td.gives { width: 22%; }
.roster tr.you td { background: color-mix(in srgb, var(--signal) 8%, var(--surface)); }
.roster tr.you td.role::after { content: "human"; margin-left: 8px; font: 500 11px var(--mono); color: var(--signal-ink); vertical-align: 2px; }
@media (max-width: 820px) {
  .roster thead { display: none; }
  .roster tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .roster tr:last-child { border-bottom: 0; }
  .roster td { padding: 0; border: 0; width: auto !important; }
  .roster td.does, .roster td.gives { grid-column: 1 / -1; }
  .roster td.when { grid-column: 2; grid-row: 1; justify-self: end; color: var(--muted); }
  .roster td.gives::before { content: "Reaches you: "; color: var(--muted); }
  .roster tr.group { display: block; padding: 0; }
  .roster tr.group td { display: block; padding: 10px 18px; }
}

/* product phones */
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.phones figure { margin: 0; display: grid; gap: 18px; justify-items: center; min-width: 0; }
.phones .phone { width: min(280px, 100%); border-color: var(--line); background: #04070D; }
.phones figcaption { font-size: 15.5px; color: var(--muted); max-width: 300px; }
.phones figcaption b { display: block; color: var(--ink); font-weight: 650; font-size: 18px; margin-bottom: 4px; letter-spacing: -0.01em; }
@media (max-width: 860px) { .phones { grid-template-columns: 1fr; } }

/* one night timeline */
.night { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.night .intro-col { position: sticky; top: 100px; display: grid; gap: 16px; }
.night .intro-col p { color: var(--muted); }
.timeline { display: grid; }
.tl { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding-block: 18px; border-top: 1px solid var(--line); }
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl time { font: 500 15px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.tl .who { display: block; font-weight: 650; margin-bottom: 2px; }
.tl p { color: var(--muted); }
.tl.human { background: color-mix(in srgb, var(--signal) 8%, transparent); margin-inline: -12px; padding-inline: 12px; border-radius: 6px; }
.tl.human time, .tl.human .who { color: var(--ink); }
.tl .result { margin-top: 6px; color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .night { grid-template-columns: 1fr; } .night .intro-col { position: static; } }

/* patient journey */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); counter-reset: stop; }
.path li { counter-increment: stop; padding: 0 16px 0 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.path .marker { position: relative; height: 22px; }
.path .marker::before { content: ""; position: absolute; top: 10px; left: 0; right: -16px; height: 2px; background: var(--line); }
.path li:last-child .marker::before { right: 0; }
.path .marker::after { content: counter(stop, decimal-leading-zero); position: absolute; top: 0; left: 0; padding: 2px 7px; border-radius: 4px; background: var(--ink); color: var(--bg); font: 500 11px/18px var(--mono); }
.path li.icu .marker::after { background: var(--signal); color: #1a1004; }
.path .stop { font-weight: 650; font-size: 19px; letter-spacing: -0.01em; }
.path p { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 1080px) {
  .path { grid-template-columns: 1fr; gap: 0; }
  .path li { grid-template-columns: 52px 1fr; gap: 4px 16px; padding: 0 0 22px; }
  .path .marker { grid-row: span 2; height: auto; }
  .path .marker::before { top: 24px; bottom: -22px; left: 16px; right: auto; width: 2px; height: auto; }
  .path li:last-child .marker::before { display: none; }
}

/* outcomes */
.per { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.per div { padding: 22px 20px 0 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.per div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.per b { font-size: clamp(44px, 5.6vw, 72px); font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--brand); }
.per span { color: var(--muted); font-size: 15.5px; max-width: 22ch; }
.source { margin-top: 28px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 760px) { .per { grid-template-columns: 1fr 1fr; gap: 28px 0; } .per div:nth-child(3) { padding-left: 0; border-left: 0; } }

/* audiences */
.aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.aud-col { padding: 26px clamp(16px, 2.4vw, 32px) 0 0; display: grid; gap: 14px; align-content: start; justify-items: start; min-width: 0; }
.aud-col + .aud-col { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--line); }
.aud-col .lede { font-size: 18px; color: var(--ink); }
.aud-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--muted); font-size: 15.5px; }
.aud-col li { position: relative; padding-left: 18px; }
.aud-col li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 2px; background: var(--signal); }
.aud-col li b { color: var(--ink); font-weight: 600; }
.aud-col .btn { margin-top: 8px; }
@media (max-width: 960px) { .aud { grid-template-columns: 1fr; } .aud-col, .aud-col + .aud-col { padding: 26px 0 30px; border-left: 0; } .aud-col + .aud-col { border-top: 1px solid var(--line); } }
.connects { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 48px; font-size: 14.5px; }
.connects .label { margin-right: 8px; }
.connects .chip { padding: 5px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }

/* getting started */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.steps li::before { content: "Step " counter(step); font: 500 12.5px var(--mono); color: var(--brand); }
.steps p { color: var(--muted); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* privacy, on the dark ground */
.privacy { background: var(--surface); color: var(--ink); }
.privacy .grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.privacy .label { color: var(--brand); }
.privacy h2 { margin-top: 14px; }
.notlist { margin-top: 24px; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.4; color: var(--muted); letter-spacing: -0.01em; }
.notlist b { color: var(--ink); font-weight: 600; }
.facts { display: grid; border-top: 1px solid var(--line); }
.fact { padding-block: 18px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.fact b { font-weight: 600; }
.fact span { color: var(--muted); font-size: 15.5px; }
@media (max-width: 860px) { .privacy .grid { grid-template-columns: 1fr; } }

/* research */
.research { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.research .side { display: grid; gap: 44px; align-content: start; }
.research h3 { font: 500 12.5px var(--mono); color: var(--muted); margin-bottom: 4px; letter-spacing: 0.02em; }
.pub { display: grid; gap: 4px; padding-block: 16px; border-top: 1px solid var(--line); text-decoration: none; min-width: 0; }
a.pub:hover .ttl { color: var(--brand); }
.pub .venue { font: 12.5px var(--mono); color: var(--brand); }
.pub .ttl { font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; }
.pub .auth { font-size: 14px; color: var(--muted); }
@media (max-width: 860px) { .research { grid-template-columns: 1fr; } }

/* award photographs and recognition */
.awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.award { min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.award > img { display: block; width: 100%; height: 360px; object-fit: contain; background: var(--night); }
.award-copy { padding: 24px; display: grid; gap: 12px; }
.award-copy h3 { font-size: clamp(23px, 2.5vw, 30px); }
.award-copy p { color: var(--muted); }
.award-copy .award-issuer { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) { .awards { grid-template-columns: 1fr; } .award > img { height: 320px; } }

/* backers */
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.logos figure { margin: 0; display: grid; gap: 10px; font-size: 14.5px; color: var(--muted); }
.logos .tile { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; aspect-ratio: 16 / 10; max-width: 100%; display: flex; align-items: center; justify-content: center; padding: 14px 18px; overflow: hidden; }
.logos .tile img { width: 100%; height: 100%; object-fit: contain; }
.logos .tile.word { flex-direction: column; color: #191919; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; gap: 6px; align-content: center; text-align: center; }
.logos .tile.word small { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #C15F3C; }
@media (max-width: 760px) { .logos { grid-template-columns: 1fr 1fr; } }

/* closing */
.cta { background: var(--brand); color: var(--brand-ink); }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.cta h2 { max-width: 16ch; }
.cta p { margin-top: 18px; max-width: 46ch; opacity: .85; font-size: 18px; }
.cta .acts { display: flex; gap: 12px; flex-wrap: wrap; }
.cta .btn.invert { background: var(--brand-ink); color: var(--brand); }
@media (max-width: 860px) { .cta .wrap { grid-template-columns: 1fr; } }
.demo-form { background: var(--surface); color: var(--ink); border-radius: 14px; padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; }
.demo-form .wide { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; font: 16px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.demo-form .actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.demo-form .btn.invert { background: var(--brand); color: var(--brand-ink); }
.demo-form button:disabled { opacity: .6; cursor: progress; }
.form-status { font-size: 14.5px; color: var(--muted); }
.form-status.is-ok { color: var(--ok); font-weight: 500; }
.form-status.is-err { color: var(--signal-ink); font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .demo-form { grid-template-columns: 1fr; } }
.note { margin-top: 20px; font-size: 14px; color: var(--muted); max-width: 70ch; }

footer { padding-block: 36px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

/* icons */
.ico { width: 22px; height: 22px; flex: none; }
.acc { --a: var(--brand); }

/* heartbeat line under the hero */
.ecg { display: block; width: 100%; height: 40px; margin-top: clamp(32px, 4.5vw, 52px); margin-bottom: 4px; }
.ecg path { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ecg .base { stroke: var(--line); }
.ecg .trace { stroke: var(--signal); stroke-dasharray: 160 2400; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .ecg .trace { animation: trace 3.2s linear infinite; } @keyframes trace { from { stroke-dashoffset: 160; } to { stroke-dashoffset: -2240; } } }
@media (prefers-reduced-motion: reduce) { .ecg .trace { stroke-dasharray: none; opacity: .6; } }
.ecg + .stats { margin-top: 0; }

/* ward map: one doctor, four units */
.wardmap { margin: 0; background: var(--night); color: var(--night-ink); border-radius: 16px; padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 14px; min-width: 0; }
.wm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font: 500 13px var(--mono); color: var(--night-muted); }
.wm-head span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--night-ink); }
.wm-head .ico { width: 18px; height: 18px; color: var(--signal); }
.wm-live { display: inline-flex; align-items: center; gap: 8px; color: #3FCB82; }
.wm-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(63,203,130,.15); }
.unit { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; }
.unit > span { font-size: 14px; color: var(--night-muted); }
.unit .beds { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.b { display: block; aspect-ratio: 1; border-radius: 5px; background: #1B2740; border: 1px solid #26365A; position: relative; }
.b::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--dot, #3FCB82); }
.b.s { --dot: #3FCB82; } .b.e { --dot: #F2B544; } .b.st { --dot: #F07A6E; } .b.r { --dot: #6F97F2; }
.b.r { border-color: #6F97F2; box-shadow: 0 0 0 3px rgba(111,151,242,.25); }
@media (prefers-reduced-motion: no-preference) { .b.r { animation: beat 1.6s ease-in-out infinite; } @keyframes beat { 50% { box-shadow: 0 0 0 6px rgba(111,151,242,.08); } } }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--night-muted); padding-top: 6px; border-top: 1px solid var(--night-line); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .b { width: 14px; }
@media (max-width: 860px) { .why .cols { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .unit { grid-template-columns: 1fr; gap: 6px; } .unit .beds { gap: 4px; } }

/* roster icons */
.roster td.role { white-space: nowrap; }
.ri { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); margin-right: 12px; vertical-align: middle; }
.ri .ico { width: 19px; height: 19px; }
.roster tr.you .ri { background: color-mix(in srgb, var(--signal) 16%, var(--surface)); color: var(--signal-ink); }
@media (max-width: 820px) { .roster td.role { white-space: normal; } }

/* phone beside the night timeline */
.phone.small { width: min(240px, 70vw); margin-top: 12px; border-color: var(--line); }
@media (max-width: 860px) { .phone.small { display: none; } }

/* journey icons */
.ji { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.path li.icu .ji { background: var(--signal); border-color: var(--signal); color: #1a1004; }
@media (max-width: 1080px) { .ji { grid-row: 2; grid-column: 2; display: none; } }

/* audience icons */
.aico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); }

/* connection diagram */
.flow { margin: 56px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 0.9fr) 56px minmax(0, 1fr); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 3vw, 36px); }
.flow-col ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.flow-col li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); font-size: 15px; }
.flow-col li .ico { width: 18px; height: 18px; color: var(--brand); }
.flow-arrow { height: 2px; background: var(--line); position: relative; margin-inline: 8px; }
.flow-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--muted); }
.flow-core { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 26px 18px; border-radius: 14px; background: var(--night); color: var(--night-ink); }
.flow-core b { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.flow-core > span:last-child { font-size: 13.5px; color: var(--night-muted); }
.core-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--brand); color: #fff; }
@media (max-width: 960px) { .flow { grid-template-columns: 1fr; gap: 0; } .flow-arrow { width: 2px; height: 32px; margin: 8px auto; } .flow-arrow::after { right: -5px; top: auto; bottom: -4px; border-left-color: transparent; border-top-color: var(--muted); } }

/* getting started icons */
.sico { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); }

/* privacy diagram */
.vault { margin: 32px 0 0; display: grid; gap: 14px; }
.vault-box { border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 14px; padding: 16px; display: grid; gap: 12px; background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.vault-box .label { color: var(--brand); }
.vault-row { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; align-items: center; }
.vault-row span { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13.5px; padding: 12px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.vault-row span .ico { color: var(--muted); }
.vault-row span.hl { border-color: var(--signal); }
.vault-row span.hl .ico { color: var(--signal-ink); }
.vault-row i { height: 2px; background: color-mix(in srgb, var(--brand) 45%, transparent); }
.vault-out { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); padding-left: 16px; }
.vault-out .cut { width: 40px; height: 2px; background: repeating-linear-gradient(90deg, #C2362B 0 6px, transparent 6px 10px); position: relative; }
.vault-out .cut::after { content: "×"; position: absolute; left: 12px; top: -12px; color: #C2362B; font-size: 18px; font-weight: 700; }
.vault-out b { margin-left: auto; color: #C2362B; font: 500 12.5px var(--mono); }

/* trust: seals, regulatory set apart */
.trust-group + .trust-group { margin-top: 48px; }
.trust-group > .label { margin-bottom: 16px; }
.seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.seal-card, .reg-card { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-width: 0; }
.seal-card h3, .reg-card h3 { font-size: 17px; }
.seal-card p, .reg-card p { font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 8px; }
.seal { position: relative; width: 76px; height: 86px; display: grid; align-content: center; justify-items: center; text-align: center; color: #fff; clip-path: polygon(50% 0, 100% 14%, 100% 64%, 50% 100%, 0 64%, 0 14%); padding: 6px 4px 16px; }
.seal.sec { background: linear-gradient(160deg, #2B5FD0, #173F98); }
.seal.priv { background: linear-gradient(160deg, #1D8C8C, #0F5E6A); }
.seal.reg-ok { background: linear-gradient(160deg, #23935E, #146B42); }
.seal.reg-pend { background: linear-gradient(160deg, #C98A1C, #94620C); }
.s-top { font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.s-big { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; line-height: 1.1; }
.s-ck { position: absolute; bottom: 14px; width: 14px; height: 14px; opacity: .9; }
.status { display: inline-block; margin-top: 6px; font: 500 11.5px var(--mono); padding: 3px 8px; border-radius: 4px; }
.status.ok { background: var(--ok-bg); color: var(--ok); }
.status.pending { background: var(--warn-bg); color: var(--warn); }
.trust-link { margin-top: 24px; }
.regulatory { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 32px); }
.reg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reg-card { background: var(--bg); grid-template-columns: 96px 1fr; }
.reg-card .seal { width: 96px; height: 108px; }
.reg-card .s-big { font-size: 18px; }
@media (max-width: 1000px) { .seals { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .seals, .reg { grid-template-columns: 1fr; } }

/* sub-page header */
.page-hero { padding-block: clamp(44px, 6vw, 72px) clamp(36px, 4.5vw, 52px); }
.page-hero .wrap { display: grid; gap: 18px; justify-items: start; }
.page-hero h1 { font-size: clamp(40px, 5.4vw, 68px); max-width: 18ch; }
.page-hero .hero-sub { max-width: 60ch; }
#roster.agents-sec { padding-top: clamp(44px, 5vw, 68px); }

/* placeholders the team will replace */
.placeholder { position: relative; border: 1.5px dashed color-mix(in srgb, var(--muted) 60%, transparent) !important; }
.ph-tag { font: 500 11.5px var(--mono); color: var(--signal); }

/* film */
.proof { padding-block: clamp(56px, 7vw, 96px); }
.film { margin: 0; border-radius: 18px; overflow: hidden; }
.film-frame { aspect-ratio: 16 / 9; max-width: 100%; display: grid; place-items: center; align-content: center; gap: 14px; background: radial-gradient(120% 90% at 30% 20%, #16264A, var(--night)); color: var(--night-ink); }
.play { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--signal); color: #1a1004; }
.play .ico { width: 34px; height: 34px; }
.film-title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 650; letter-spacing: -0.02em; }

/* agent tabs */
.agents { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.tabs { display: grid; align-content: start; gap: 4px; padding: 14px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, var(--surface)); }
.tab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 600 15.5px var(--sans); text-align: left; cursor: pointer; }
.tab .ico { width: 20px; height: 20px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 0 0 1px var(--line); }
.tab[aria-selected="true"] .ico { color: var(--brand); }
.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 48px); padding: clamp(24px, 3.4vw, 44px); align-items: center; min-height: 560px; }
.panel-text { display: grid; gap: 14px; align-content: start; }
.panel-text h3 { font-size: clamp(26px, 2.6vw, 34px); }
.panel-text .lede { font-size: 18px; color: var(--ink); }
.panel-text ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--muted); }
.panel-text li { position: relative; padding-left: 18px; }
.panel-text li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 2px; background: var(--signal); }
.reach { display: grid; gap: 4px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; }
.panel-visual { display: grid; justify-items: center; min-width: 0; }
.mock-phone { width: min(260px, 100%); border-color: var(--line); }
.more { margin-top: 24px; }
@media (max-width: 960px) {
  .agents { grid-template-columns: minmax(0, 1fr); }
  .tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .panel { grid-template-columns: 1fr; min-height: 0; }
}

/* product mocks drawn in the app's own style */
.screen { width: min(420px, 100%); background: #15171C; color: #E8EAF0; border: 1px solid #262A33; border-radius: 18px; padding: 20px; display: grid; gap: 12px; font-size: 14.5px; line-height: 1.5; box-shadow: 0 30px 60px -30px rgba(10,18,34,.5); }
.scr-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; padding-bottom: 10px; border-bottom: 1px solid #262A33; }
.scr-k { font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8C93A3; }
.screen ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.screen sup { color: #8FB0F5; font-weight: 600; }
.chip { font: 600 11.5px var(--mono); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.chip.crit { background: #3A1C1E; color: #F07A6E; } .chip.warn { background: #33280F; color: #F2B544; } .chip.ok { background: #143024; color: #63C795; }
.cites { display: grid; gap: 6px; font-size: 12.5px; color: #A9B0BF; }
.cites b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #22304D; color: #8FB0F5; margin-right: 6px; font-size: 11px; }
.scr-acts { display: flex; gap: 8px; } .scr-acts span { padding: 7px 14px; border-radius: 8px; border: 1px solid #333846; font-weight: 600; font-size: 13.5px; } .scr-acts .go { background: #2F5FD0; border-color: #2F5FD0; }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ladder li { display: grid; grid-template-columns: 52px 1fr; gap: 2px 12px; padding: 12px 0 12px 16px; border-left: 2px solid #2A2F3A; position: relative; }
.ladder li::before { content: ""; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: #15171C; border: 2px solid #4A5163; }
.ladder li.done::before { background: #4A5163; } .ladder li.now::before { background: #F29A3D; border-color: #F29A3D; box-shadow: 0 0 0 4px rgba(242,154,61,.2); }
.ladder time { grid-row: span 2; font: 500 13px var(--mono); color: #8C93A3; }
.ladder span { color: #A9B0BF; font-size: 13.5px; }
.ladder li.now b { color: #F29A3D; }
.langs { font-weight: 500; font-size: 12.5px; color: #8C93A3; } .langs b { color: #E8EAF0; }
.brief { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; padding-block: 8px; border-top: 1px solid #22252D; }
.brief p { color: #A9B0BF; font-size: 13.5px; }
.wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.wave i { flex: 1; background: #F29A3D; border-radius: 2px; opacity: .8; }
.screen p b { color: #8FB0F5; margin-right: 6px; }
.scr-note { font: 500 12px var(--mono); color: #F2B544; }

/* journey in three groups */
.j3 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 0.8fr); gap: 16px; }
.jcol { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 16px; align-content: start; }
.jcol.main { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.stops { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stops li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-weight: 600; font-size: 15px; transition: border-color .15s, color .15s; }
.stops a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.stops li:has(a):hover { border-color: var(--brand); color: var(--brand); }
.stops .ico { width: 20px; height: 20px; color: var(--brand); }
.caps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--muted); font-size: 15.5px; }
.caps li { position: relative; padding-left: 18px; }
.caps li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 2px; background: var(--signal); }
@media (max-width: 960px) { .j3 { grid-template-columns: 1fr; } }

/* privacy + trust strip */
.strip-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.strip-grid h2 { margin-bottom: 16px; }
.strip-grid > div > p { color: var(--muted); font-size: 18px; max-width: 46ch; }
.strip-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.strip-seals { display: grid; gap: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 32px); }
.strip-seals .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.seal.mini { width: 64px; height: 72px; padding: 4px 3px 12px; }
.seal.mini .s-top { font-size: 8px; }
.seal.mini .s-big { font-size: 12.5px; }
@media (max-width: 860px) { .strip-grid { grid-template-columns: 1fr; } }

/* research teaser under backers */
.teaser { margin-top: 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 24px; align-items: center; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; }
.teaser .go { color: var(--brand); font-weight: 600; white-space: nowrap; }
.teaser:hover { border-color: var(--brand); }
@media (max-width: 760px) { .teaser { grid-template-columns: 1fr; } }

/* closing band on sub-pages */
.cta-band .wrap { align-items: center; }

/* agent explorer: groups, where each agent works, who approves */
.tab-group { margin: 12px 14px 4px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tab-group:first-child { margin-top: 2px; }
.works { display: grid; gap: 8px; margin-top: 6px; }
.wchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wchips span { font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); color: var(--brand); }
.approve { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--signal-ink); font-weight: 500; }
.approve .ico { width: 18px; height: 18px; }
.agents.grouped .panel { min-height: 620px; }
.you-row { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 16px 20px; border-radius: 14px; background: color-mix(in srgb, var(--signal) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--line)); }
.you-row .ico { width: 26px; height: 26px; color: var(--signal-ink); }
.you-row div { display: grid; gap: 2px; }
.you-row span { color: var(--muted); font-size: 15px; }
@media (max-width: 960px) { .tab-group { display: none; } .agents.grouped .panel { min-height: 0; } }

/* screens for the remaining agents */
.checks { list-style: none; padding: 0 !important; }
.checks li { position: relative; padding-left: 26px; }
.checks li::before { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.checks li.ok::before { content: "✓"; background: #143024; color: #63C795; }
.checks li.warn::before { content: "!"; background: #33280F; color: #F2B544; }
.checks li.warn { color: #F2D08A; }
.extract { display: grid; gap: 2px; padding-block: 6px; border-top: 1px solid #22252D; }
.you-said { font-style: italic; color: #C9CEDA; padding: 10px 12px; border-radius: 10px; background: #1D2028; }
.rule { display: grid; gap: 6px; padding: 12px; border-radius: 10px; border: 1px solid #2F5FD0; background: rgba(47,95,208,.1); }
.screen p.q { justify-self: end; max-width: 85%; padding: 8px 12px; border-radius: 12px 12px 2px 12px; background: #2F5FD0; color: #fff; }
.screen p.a { max-width: 90%; padding: 10px 12px; border-radius: 12px 12px 12px 2px; background: #1D2028; display: grid; gap: 4px; }
.src { font: 500 11.5px var(--mono); color: #8C93A3; }
.lnk { color: #8FB0F5; font-weight: 600; }
.qtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qtiles div { padding: 12px; border-radius: 10px; background: #1D2028; display: grid; gap: 2px; }
.qtiles b { font-size: 22px; font-weight: 650; color: #fff; }
.qtiles span { font-size: 12.5px; color: #A9B0BF; }
.bars { display: grid; gap: 8px; }
.bars span { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; font-size: 13px; color: #A9B0BF; }
.bars i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #2F5FD0, #6F97F2); }
.screen .chip:not(.crit):not(.warn):not(.ok) { background: #22252D; color: #A9B0BF; }

/* A 4-teammate personable AI care team roster, followed by the selected colleague's handover. */
.staff-team { grid-template-columns: minmax(0, 1fr); }
.team-roster-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, var(--surface)); scroll-margin-top: 12px; }
.team-roster-heading > span:last-child { color: var(--muted); font-size: 14px; }
.staff-team .tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: unset; gap: 16px; padding: 20px; border-right: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 65%, var(--surface)); overflow: visible; }
.staff-team .tab {
  --role-color: var(--brand);
  --role-bg: color-mix(in srgb, var(--brand) 10%, var(--surface));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  line-height: 1.4;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.staff-team .tab[data-persona="nurse"] { --role-color: #1F7A4F; --role-bg: #E3F2EA; }
.staff-team .tab[data-persona="fellow"] { --role-color: #1F4FB4; --role-bg: #E6EEF9; }
.staff-team .tab[data-persona="charge"] { --role-color: #C4650A; --role-bg: #FDF0E1; }
.staff-team .tab[data-persona="scribe"] { --role-color: #5B3EA8; --role-bg: #EFEBF9; }
.staff-team .tab:hover { border-color: var(--role-color); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(14,26,51,.18); }
.staff-team .tab[aria-selected="true"] {
  border-color: var(--role-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--role-color) 22%, transparent), 0 14px 28px -18px rgba(14,26,51,.25);
  background: var(--surface);
}
.persona-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.persona-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--role-bg); color: var(--role-color); flex: none; }
.persona-avatar .ico { width: 20px; height: 20px; color: var(--role-color); }
.persona-station { font: 500 10.5px var(--mono); padding: 3px 8px; border-radius: 999px; background: var(--role-bg); color: var(--role-color); white-space: nowrap; }
.staff-team .tab strong { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); display: block; }
.persona-voice { font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.42; font-style: italic; }
.persona-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 6px; width: 100%; }
.persona-tags span { font: 500 11px var(--mono); padding: 3px 7px; border-radius: 5px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.staff-team .tab[aria-selected="true"] .persona-tags span { border-color: color-mix(in srgb, var(--role-color) 35%, var(--line)); }

.staff-team .panel { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: start; gap: 28px clamp(28px, 4vw, 48px); min-height: 0; padding: clamp(24px, 3.6vw, 40px); scroll-margin-top: 12px; }
.staff-team .panel-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.staff-team .panel-heading .label { color: var(--brand); }
.back-to-team { color: var(--muted); font-size: 13px; text-underline-offset: 4px; padding-block: 4px; }
.back-to-team:hover { color: var(--brand); }
.staff-team .panel-text { gap: 16px; min-width: 0; }
.persona-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.persona-title-row h3 { font-size: clamp(26px, 3vw, 36px); }
.persona-quote {
  margin: 0;
  padding: 14px 16px;
  border-left: 3.5px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--brand) 5%, var(--bg));
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}
.role-pillars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.role-pillars li {
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
  display: grid;
  gap: 3px;
}
.role-pillars li::before { display: none; }
.role-pillars li strong { color: var(--ink); font-size: 15px; font-weight: 650; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.role-pillars li strong small { font: 500 11px var(--mono); color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); padding: 2px 7px; border-radius: 999px; }
.role-pillars li p { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 0; }
.panel-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.role-handover { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 2px 0 0; padding-block: 18px; border-block: 1px solid var(--line); }
.role-handover > div { display: grid; gap: 4px; }
.role-handover dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.staff-team .works { margin-top: 0; }
.staff-team .approve { align-items: flex-start; padding: 14px 16px; border-radius: 10px; background: color-mix(in srgb, var(--signal) 8%, var(--surface)); }
.staff-team .approve .ico { flex: none; margin-top: 3px; }
.staff-team .panel-visual { align-self: start; gap: 14px; width: 100%; min-width: 0; }
.visual-stack { display: grid; gap: 12px; width: 100%; justify-items: stretch; }
.shot-switcher-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.shot-pill {
  font: 600 12px var(--mono);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.shot-pill:hover {
  border-color: var(--brand);
  color: var(--ink);
}
.shot-pill.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 6px 14px -6px rgba(31, 79, 180, 0.55);
}
.shot-zoom-hint {
  margin-left: auto;
  font: 500 11px var(--mono);
  color: var(--muted);
}
.app-shot[hidden] { display: none !important; }
.example-label { text-align: center; font-size: 11px; line-height: 1.6; }
@media (max-width: 1020px) {
  .staff-team .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: unset; gap: 12px; }
  .staff-team .panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .team-roster-heading { padding: 14px 16px; }
  .staff-team .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
  .staff-team .tab { padding: 12px; gap: 6px; }
  .staff-team .panel { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
  .role-handover { grid-template-columns: 1fr; }
  .staff-team .panel-heading { gap: 4px; }
  .staff-team .panel-visual { margin-top: 4px; }
  .shot-zoom-hint { display: none; }
}

/* Show the handoffs between the familiar staff roles. */
.role-colleagues { display: grid; gap: 8px; }
.staff-team .role-colleagues h4 { margin: 0; }
.colleague-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.colleague-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.colleague-links a:hover, .care-cycle-steps a:hover { color: var(--signal-ink); }
.care-cycle { margin-top: 48px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.care-cycle-intro { display: grid; gap: 12px; padding: clamp(24px, 3vw, 36px); }
.care-cycle-intro .label { color: var(--brand); }
.care-cycle-intro h3 { font-size: clamp(25px, 3vw, 34px); }
.care-cycle-intro > p:last-child { max-width: 70ch; color: var(--muted); }
.care-cycle-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.care-cycle-steps > li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; min-width: 0; }
.care-cycle-steps > li + li { border-left: 1px solid var(--line); }
.care-step-number { font: 500 12px var(--mono); color: var(--brand); }
.care-cycle-steps h4 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.care-cycle-steps p { font-size: 15px; color: var(--muted); }
.care-cycle-steps > li > a, .care-cycle-steps > li > div { margin-top: auto; }
.care-cycle-steps > li > div { display: grid; }
.care-cycle-steps a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; color: var(--brand); text-underline-offset: 4px; }
.care-cycle-close { display: flex; gap: 12px; align-items: flex-start; padding: 20px 24px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 4%, var(--surface)); color: var(--muted); font-size: 15px; }
.care-cycle-close strong { color: var(--ink); }
.care-cycle-close .ico { width: 20px; height: 20px; flex: none; color: var(--brand); margin-top: 2px; }
@media (max-width: 900px) {
  .care-cycle-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .care-cycle-steps > li:nth-child(3) { border-left: 0; }
  .care-cycle-steps > li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 540px) {
  .care-cycle-steps { grid-template-columns: minmax(0, 1fr); }
  .care-cycle-steps > li + li { border-left: 0; border-top: 1px solid var(--line); }
  .care-cycle-steps > li { gap: 8px; }
  .care-cycle-close { padding: 20px 24px; }
}

/* Three films, with an obvious distinction between watchable and upcoming videos. */
.hero-cta .ico { width: 20px; height: 20px; flex: none; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.video-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.video-ready { border-color: var(--brand); box-shadow: 0 12px 32px -24px var(--brand); }
.video-poster { position: relative; display: grid; place-items: center; align-content: center; gap: 12px; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.video-placeholder { background: color-mix(in srgb, var(--brand) 6%, var(--bg)); color: var(--brand); border-bottom: 1px solid var(--line); }
.video-placeholder > span { font: 500 12px var(--mono); }
.video-illustration { width: 110px; height: 74px; opacity: .8; }
.video-hospital { color: var(--signal-ink); background: color-mix(in srgb, var(--signal) 6%, var(--bg)); }
.video-player { min-height: 200px; background: var(--night); }
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 14px; padding: 24px; }
.video-status { font: 500 11px var(--mono); color: var(--muted); }
.video-status.is-ready { display: inline-flex; align-items: center; gap: 7px; color: var(--ok); }
.video-status.is-ready::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.video-copy h3 { font-size: 23px; }
.video-copy > p { font-size: 15px; color: var(--muted); }
.video-copy .video-availability { margin-top: auto; padding-top: 8px; font-size: 13px; }
.video-cta { font-size: 14px; font-weight: 600; color: var(--brand); text-decoration: none; }
.video-cta:hover { color: var(--signal-ink); text-decoration: underline; }
@media (max-width: 1020px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .video-walkthrough { grid-column: 1 / -1; }
  .video-copy { padding: 20px; }
  .video-copy h3 { font-size: 21px; }
}
@media (max-width: 680px) {
  .video-grid { grid-template-columns: minmax(0, 1fr); }
  .video-ready { order: -1; }
  .video-upcoming .video-poster { aspect-ratio: 3 / 1; }
  .video-upcoming .video-illustration { width: 76px; height: 50px; }
  .video-upcoming .video-placeholder { gap: 4px; }
}

/* High-impact product browser frames (.app-shot) & hero dual-device showcase */
.app-shot {
  margin: 0;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #0B0E14;
  border: 1px solid #232A38;
  box-shadow: 0 24px 48px -22px rgba(10, 18, 34, 0.45);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.app-shot[data-lightbox-src] { cursor: zoom-in; }
.app-shot[data-lightbox-src]:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 28px 56px -20px rgba(31, 79, 180, 0.35);
}
.app-shot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #141923;
  border-bottom: 1px solid #232A38;
  font: 500 11px var(--mono);
  color: #9AA8C0;
}
.app-shot-bar .dots { display: inline-flex; gap: 5px; flex: none; }
.app-shot-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: #333D52; display: inline-block; }
.app-shot-bar .dots i:nth-child(1) { background: #E05A52; }
.app-shot-bar .dots i:nth-child(2) { background: #E6A93B; }
.app-shot-bar .dots i:nth-child(3) { background: #3FCB82; }
.app-shot-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #C9D3E3;
}
.app-shot-badge {
  font: 600 10.5px var(--mono);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
  background: rgba(47, 95, 208, 0.22);
  color: #93B4FF;
  border: 1px solid rgba(111, 151, 242, 0.35);
}
.app-shot-badge.crit { background: rgba(240, 122, 110, 0.18); color: #F7988F; border-color: rgba(240, 122, 110, 0.4); }
.app-shot-badge.nurse, .app-shot-badge.ok { background: rgba(63, 203, 130, 0.16); color: #6CE0A3; border-color: rgba(63, 203, 130, 0.35); }
.app-shot-badge.fellow { background: rgba(74, 133, 246, 0.2); color: #9BBCFF; border-color: rgba(74, 133, 246, 0.4); }
.app-shot-badge.charge { background: rgba(242, 154, 61, 0.2); color: #F7BC77; border-color: rgba(242, 154, 61, 0.4); }
.app-shot-badge.scribe { background: rgba(154, 117, 240, 0.2); color: #C8B2FA; border-color: rgba(154, 117, 240, 0.4); }
.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
.app-shot-cap {
  padding: 10px 14px;
  background: #10151F;
  border-top: 1px solid #202736;
  color: #B8C4D9;
  font-size: 13px;
  line-height: 1.45;
}
.app-shot-cap b { color: #FFFFFF; font-weight: 600; }
.app-shot-cap code {
  font: 500 11.5px var(--mono);
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #E8EEF9;
}

/* Hero dual-device clinical showcase */
.hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.16fr); gap: clamp(28px, 4vw, 52px); align-items: start; }
.live.live-showcase {
  padding-left: 0;
  justify-self: stretch;
  display: grid;
  gap: 14px;
}
.hero-stage {
  position: relative;
  width: 100%;
  padding-right: clamp(44px, 6.5vw, 76px);
  padding-bottom: 10px;
}
.hero-board {
  width: 100%;
  box-shadow: 0 34px 68px -28px rgba(10, 18, 34, 0.55);
}
.hero-phone {
  position: absolute;
  right: 0;
  bottom: 4px;
  width: min(148px, 27%);
  padding: 15px 5px 12px;
  border-radius: 22px;
  z-index: 2;
  box-shadow: 0 28px 60px -18px rgba(6, 12, 24, 0.78), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.hero-phone::before { top: 5px; left: 14px; font-size: 8.5px; }
.hero-phone::after { bottom: 5px; height: 2.5px; }
.live.live-showcase .explain {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  z-index: 3;
  border-left-width: 4px;
}
.live.live-showcase figcaption {
  max-width: none;
  margin-top: 2px;
}
.live.live-showcase figcaption a {
  color: var(--brand);
  font-weight: 500;
  text-underline-offset: 3px;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stage { padding-right: 44px; }
  .live.live-showcase .explain { margin-top: 0; }
}
@media (max-width: 640px) {
  .hero-stage { padding-right: 0; padding-bottom: 0; display: grid; gap: 12px; }
  .hero-phone { display: none; }
}

/* Desktop gallery on care-team.html */
.desktop-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 44px;
}
@media (max-width: 960px) {
  .desktop-gallery { grid-template-columns: 1fr; }
}

/* Animated Product Walkthrough Player in #videos */
.video-walkthrough {
  border-color: var(--brand);
  box-shadow: 0 18px 42px -24px rgba(31, 79, 180, 0.45);
}
.walkthrough-player {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: #090D16;
  border-bottom: 1px solid #1E2638;
  user-select: none;
}
.wt-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  z-index: 5;
}
.wt-progress-bar {
  height: 100%;
  width: 16.66%;
  background: linear-gradient(90deg, #3FCB82, #6F97F2, #F29A3D);
  transition: width 0.35s ease;
}
.wt-topbar {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.wt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(10, 15, 26, 0.84);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #F0F4FA;
  font: 600 10.5px var(--mono);
  letter-spacing: 0.03em;
}
.wt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3FCB82;
  box-shadow: 0 0 0 3px rgba(63, 203, 130, 0.25);
}
.wt-controls {
  display: inline-flex;
  gap: 6px;
  pointer-events: auto;
}
.wt-btn {
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 15, 26, 0.84);
  backdrop-filter: blur(8px);
  color: #F0F4FA;
  font: 600 11px var(--mono);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.wt-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
}
.wt-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.wt-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.wt-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.wt-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform-origin: center top;
}
@media (prefers-reduced-motion: no-preference) {
  .walkthrough-player:not(.is-paused) .wt-slide.is-active img {
    animation: wt-kenburns 4.6s ease-out forwards;
  }
  @keyframes wt-kenburns {
    from { transform: scale(1) translateY(0); }
    to { transform: scale(1.045) translateY(-1.5%); }
  }
}
.wt-hud-pill {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(10, 15, 26, 0.86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  max-width: calc(100% - 16px);
  pointer-events: none;
}
.wt-role-pill {
  font: 600 10px var(--mono);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--brand);
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: none;
}
.wt-hud-pill strong {
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cta-points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.92);
}
.cta-points li {
  position: relative;
  padding-left: 24px;
}
.cta-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: #6CE0A3;
}
.cta code {
  font: 500 14px var(--mono);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
}
.wt-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
.wt-gif-link {
  font: 500 11px var(--mono);
  color: var(--brand);
  text-decoration: none;
}
.wt-gif-link:hover { text-decoration: underline; }
.wt-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.wt-step {
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: 500 11.5px var(--mono);
  cursor: pointer;
  transition: all 0.15s ease;
}
.wt-step:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.wt-step.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
}
.wt-cta-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* Full-screen lightbox modal for walkthrough & high-res product screenshots */
.wt-modal {
  width: min(1240px, 95vw);
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  border: 1px solid #2A3448;
  border-radius: 18px;
  background: #0B0F19;
  color: #F0F4FA;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.78);
  overflow: hidden;
}
.wt-modal::backdrop {
  background: rgba(6, 10, 18, 0.82);
  backdrop-filter: blur(6px);
}
.wt-modal-inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: 92dvh;
}
.wt-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #121826;
  border-bottom: 1px solid #232C3F;
}
.wt-modal-title {
  font: 600 13px var(--mono);
  color: #D4DEEE;
}
.wt-modal-close {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #313D56;
  background: #1B2336;
  color: #FFFFFF;
  font: 600 12.5px var(--sans);
  cursor: pointer;
}
.wt-modal-close:hover { background: #2F5FD0; border-color: #2F5FD0; }
.wt-modal-stage {
  position: relative;
  background: #070A10;
  display: grid;
  place-items: center;
  overflow: auto;
  max-height: 72dvh;
}
.wt-modal-stage img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72dvh;
  object-fit: contain;
}
.wt-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 14px 18px;
  background: #121826;
  border-top: 1px solid #232C3F;
}
.wt-modal-caption {
  font-size: 14.5px;
  color: #C9D4E8;
  max-width: 75ch;
}
.wt-modal-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ==========================================================================
   Sully.ai (/products) & Avon Health Design Upgrades
   1. Architectural Stats (+ hairlines) & Clinical Benchmark Strip
   2. Orbital AI Medical Team Hub (.team-orbit-stage)
   3. End-to-End Medical Employee 3-Hairline Rows (.sully-rows)
   4. Avon "Watch It Run" 4-Step Execution Trace (.watch-trace)
   5. Floating Clinical Signal Pills (.stage-signals)
   6. Interactive ICU Demo Scenario Picker (.scenario-picker)
   ========================================================================== */

/* 1. Architectural Stats (+ corner markers) & Benchmark Strip */
.stats.stats-arch > div {
  position: relative;
}
.stats.stats-arch > div + div::before {
  content: "+";
  position: absolute;
  top: -9px;
  left: -5px;
  font: 600 13px var(--mono);
  color: var(--brand);
  background: var(--surface);
  line-height: 1;
  padding: 0 2px;
}
@media (max-width: 760px) {
  .stats.stats-arch > div + div::before {
    display: none;
  }
}

.benchmark-strip {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: 24px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 12px 30px -22px rgba(14, 26, 51, 0.18);
}
.bench-col {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.bench-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.bench-head .label {
  color: var(--brand);
}
.bench-head strong {
  font-size: 15px;
  color: var(--ink);
}
.bench-bars {
  display: grid;
  gap: 8px;
}
.bench-row {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.bench-name {
  font: 600 12.5px var(--sans);
  color: var(--muted);
}
.bench-row.is-presense .bench-name {
  color: var(--ink);
}
.bench-track {
  min-height: 28px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.bench-fill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: linear-gradient(90deg, var(--brand) 0%, #2F6CE0 100%);
  color: #FFFFFF;
  font: 600 11.5px var(--mono);
  white-space: nowrap;
  border-radius: 7px;
}
.bench-fill.is-muted {
  background: #D9E1EE;
  color: #46536B;
}
.bench-trust {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.bench-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.bench-chips span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  font: 500 12px var(--sans);
  color: var(--ink);
}
.bench-chips .ico {
  width: 15px;
  height: 15px;
  color: var(--brand);
  flex: none;
}
@media (max-width: 960px) {
  .benchmark-strip { grid-template-columns: 1fr; }
  .bench-trust { padding-left: 0; padding-top: 16px; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .benchmark-strip { padding: 16px; gap: 16px; }
  .bench-row { grid-template-columns: 1fr; gap: 5px; }
  .bench-track { height: auto; }
  .bench-fill {
    white-space: normal;
    line-height: 1.35;
    padding: 6px 10px;
  }
  .bench-row.is-presense .bench-fill {
    width: 100% !important;
  }
  .bench-fill.is-muted {
    width: auto !important;
    max-width: 100%;
  }
  .bench-chips { grid-template-columns: 1fr; }
}

/* 2. Sully /products-Inspired Orbital AI Medical Team Stage */
.team-orbit-stage {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 28px 24px 22px;
  border-radius: 18px;
  border: 1px solid #C5D6EC;
  background: radial-gradient(110% 110% at 50% 100%, #BFD3EE 0%, #DCE8F7 52%, #EEF4FB 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 16px 36px -24px rgba(20, 48, 98, 0.25);
  display: grid;
  gap: 22px;
  justify-items: center;
}
.page-hero .team-orbit-stage {
  margin-top: 28px;
  margin-bottom: 0;
}
.orbit-arcs {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.orbit-nodes {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 920px;
  align-items: end;
}
.orbit-node {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.2s ease;
  min-width: 0;
}
/* Semi-circular arc elevation: inner 2 nodes sit higher than outer 2 nodes */
.orbit-node:nth-child(2),
.orbit-node:nth-child(3) {
  transform: translateY(-14px);
}
.orbit-node:hover {
  transform: translateY(-4px);
}
.orbit-node:nth-child(2):hover,
.orbit-node:nth-child(3):hover {
  transform: translateY(-18px);
}
.orbit-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.42), 0 12px 24px -10px rgba(16, 36, 74, 0.25);
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}
.orbit-circle .ico {
  width: 26px;
  height: 26px;
  color: #121826;
}
.orbit-circle.nurse .ico { color: #1F7A4F; }
.orbit-circle.fellow .ico { color: #1F4FB4; }
.orbit-circle.charge .ico { color: #C4650A; }
.orbit-circle.scribe .ico { color: #5B3EA8; }

.orbit-node.is-active .orbit-circle {
  border-color: var(--brand);
  box-shadow: 0 0 0 7px rgba(31, 79, 180, 0.22), 0 14px 28px -8px rgba(31, 79, 180, 0.4);
  transform: scale(1.06);
}
.orbit-node strong {
  font-size: 15px;
  font-weight: 650;
  color: #0E1A33;
  letter-spacing: -0.01em;
}
.orbit-node small {
  font: 500 11.5px var(--mono);
  color: #3B4F73;
  background: rgba(255, 255, 255, 0.72);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.orbit-node.is-active small {
  background: var(--brand);
  color: #FFFFFF;
  border-color: var(--brand);
}
.orbit-core {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: #1B365D;
  color: #FFFFFF;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.38), 0 14px 32px -10px rgba(14, 28, 58, 0.55);
  max-width: 100%;
}
.orbit-core-orb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  display: grid;
  place-items: center;
  flex: none;
}
.orbit-core-orb img {
  width: 24px;
  height: 24px;
}
.orbit-core-copy {
  display: grid;
  gap: 1px;
  text-align: left;
  min-width: 0;
}
.orbit-core-copy strong {
  font-size: 13.5px;
  font-weight: 650;
  color: #FFFFFF;
}
.orbit-core-copy span {
  font: 400 11px var(--mono);
  color: #C4D6F2;
}
@media (max-width: 760px) {
  .orbit-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .orbit-node:nth-child(2), .orbit-node:nth-child(3) { transform: none; }
}
@media (max-width: 640px) {
  .orbit-core {
    border-radius: 16px;
    padding: 10px 12px;
  }
  .orbit-core-copy strong { font-size: 12.5px; line-height: 1.35; }
  .orbit-core-copy span { font-size: 10.5px; line-height: 1.35; }
}

/* 3. Sully /products-Inspired 3-Hairline Capability Rows (.sully-rows) */
.sully-lead {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--muted);
}
.sully-rows {
  list-style: none;
  margin: 4px 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.sully-rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.sully-rows li::before {
  display: none !important;
}
.sully-rows .ico {
  width: 20px;
  height: 20px;
  color: var(--brand);
  flex: none;
}
.sully-rows span {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.sully-rows small {
  font: 500 11px var(--mono);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--brand);
  white-space: nowrap;
  flex: none;
}
@media (max-width: 560px) {
  .sully-rows li { flex-wrap: wrap; gap: 6px 10px; }
  .sully-rows small { margin-left: 32px; }
}

/* 4. Avon Health-Inspired "Watch It Run" 4-Step Execution Trace (.watch-trace) */
.watch-trace {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.watch-trace .label {
  font-size: 10.5px;
  color: var(--muted);
}
.watch-trace ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.watch-trace li {
  position: relative;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  font: 500 12px var(--sans);
  color: var(--ink);
  line-height: 1.35;
  display: flex;
  align-items: center;
}
.watch-trace li::before {
  display: none !important;
}
.watch-trace li.is-human {
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  color: var(--ok);
  font-weight: 650;
}

/* 5. Sully /products-Inspired Floating Clinical Signal Pills (.stage-signals) */
.stage-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #EEF3FA 0%, #D9E6F7 100%);
  border: 1px solid #C8D8EE;
}
.sig-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(14, 26, 51, 0.1);
  box-shadow: 0 4px 10px -4px rgba(14, 26, 51, 0.14);
  font: 600 11.5px var(--mono);
  color: #121826;
}
.sig-pill.crit { color: #B42318; border-color: rgba(180, 35, 24, 0.25); }
.sig-pill.warn { color: #B54708; border-color: rgba(181, 71, 8, 0.25); }
.sig-pill.ok { color: #166534; border-color: rgba(22, 101, 52, 0.25); }
.sig-pill.fellow { color: #1D4ED8; border-color: rgba(29, 78, 216, 0.25); }

/* 6. Avon Health-Inspired Interactive ICU Scenario Picker in #contact */
.scenario-picker {
  margin: 18px 0;
  display: grid;
  gap: 10px;
}
.scenario-label {
  font: 500 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.8);
}
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.scenario-card {
  appearance: none;
  text-align: left;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  cursor: pointer;
  display: grid;
  gap: 3px;
  transition: all 0.16s ease;
}
.scenario-card:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}
.scenario-card.is-selected {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.35);
}
.scenario-card strong {
  font-size: 13.5px;
  font-weight: 650;
  color: inherit;
}
.scenario-card span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}
.scenario-card.is-selected span {
  color: var(--muted);
}
@media (max-width: 560px) {
  .scenario-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. Customizable EMR / Universal EHR Layer / Plain-English Agent Studio (#emr-flex)
   ========================================================================== */
.emr-flex-sec {
  padding-block: clamp(56px, 7vw, 88px);
}
.emr-flex-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.emr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 14px 32px -24px rgba(14, 26, 51, 0.16);
  min-width: 0;
}
.emr-card-highlight,
.emr-card.is-highlight {
  border-color: var(--brand);
  background: linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 100%);
  box-shadow: 0 18px 40px -22px rgba(31, 79, 180, 0.28);
}
.emr-card-tag,
.emr-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.emr-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand);
  flex: none;
}
.emr-card-tag .ico,
.emr-icon .ico {
  width: 21px;
  height: 21px;
  color: var(--brand);
}
.emr-card-badge,
.emr-mode {
  font: 600 11px var(--mono);
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
}
.emr-card.is-highlight .emr-mode,
.emr-card-badge.accent {
  background: var(--brand);
  color: #FFFFFF;
  border-color: var(--brand);
}
.emr-card h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.emr-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.emr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.emr-tags span {
  font: 500 11.5px var(--mono);
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
}
.emr-card-list {
  list-style: none;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.emr-card-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
}
.emr-card-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ok);
  font-weight: 700;
}
.agent-prompt-demo {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: #0F172A;
  border: 1px solid #1E293B;
  color: #E2E8F0;
  display: grid;
  gap: 6px;
}
.agent-prompt-demo > .label,
.prompt-demo-head {
  font: 600 10.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6CE0A3;
}
.agent-prompt-demo > code {
  font: 400 12px var(--mono);
  color: #F8FAFC;
  line-height: 1.45;
  display: block;
}
.prompt-demo-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  gap: 4px;
}
.prompt-demo-item code {
  font: 400 11.5px var(--mono);
  color: #F8FAFC;
  line-height: 1.4;
}
.prompt-demo-item small {
  font: 600 10.5px var(--mono);
  color: #6CE0A3;
}
@media (max-width: 980px) {
  .emr-flex-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. PreSense 3-Pillar Hospital Command Map (.team-command-map) & 8 Role Colors
   ========================================================================== */
.staff-team .tab[data-persona="triage"]     { --role-color: #B42318; --role-bg: #FEE4E2; }
.staff-team .tab[data-persona="nurse"]      { --role-color: #1F7A4F; --role-bg: #E3F2EA; }
.staff-team .tab[data-persona="fellow"]     { --role-color: #1F4FB4; --role-bg: #E6EEF9; }
.staff-team .tab[data-persona="pharmacist"] { --role-color: #0E7490; --role-bg: #E0F2FE; }
.staff-team .tab[data-persona="charge"]     { --role-color: #C4650A; --role-bg: #FDF0E1; }
.staff-team .tab[data-persona="theatre"]    { --role-color: #0F766E; --role-bg: #CCFBF1; }
.staff-team .tab[data-persona="scribe"]     { --role-color: #5B3EA8; --role-bg: #EFEBF9; }
.staff-team .tab[data-persona="coder"]      { --role-color: #9A3412; --role-bg: #FFEDD5; }

.orbit-circle.triage .ico     { color: #B42318; }
.orbit-circle.nurse .ico      { color: #1F7A4F; }
.orbit-circle.fellow .ico     { color: #1F4FB4; }
.orbit-circle.pharmacist .ico { color: #0E7490; }
.orbit-circle.charge .ico     { color: #C4650A; }
.orbit-circle.theatre .ico    { color: #0F766E; }
.orbit-circle.scribe .ico     { color: #5B3EA8; }
.orbit-circle.coder .ico      { color: #9A3412; }

.team-command-map {
  position: relative;
  margin-bottom: 24px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  border: 1px solid #C5D6EC;
  background: linear-gradient(180deg, #EEF4FB 0%, #DCE8F7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 16px 36px -24px rgba(20, 48, 98, 0.22);
  display: grid;
  gap: 18px;
  justify-items: center;
}
.page-hero .team-command-map {
  margin-top: 16px;
  margin-bottom: 0;
  width: 100%;
}
.cmd-pillars {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 0.85fr;
  gap: 14px;
  width: 100%;
}
.cmd-pillar {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  padding: 12px 10px 14px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.cmd-pillar-head {
  font: 600 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2B4270;
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(43, 66, 112, 0.12);
}
.cmd-pillar-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  align-items: start;
  justify-items: center;
  gap: 6px;
}
/* Override arc elevation inside structured 3-pillar command map */
.cmd-pillar-nodes .orbit-node,
.cmd-pillar-nodes .orbit-node:nth-child(2),
.cmd-pillar-nodes .orbit-node:nth-child(3) {
  transform: none;
  padding: 4px;
  width: 100%;
}
.cmd-pillar-nodes .orbit-node:hover {
  transform: translateY(-3px);
}
.cmd-pillar-nodes .orbit-circle {
  width: 52px;
  height: 52px;
}
.cmd-pillar-nodes .orbit-circle .ico {
  width: 22px;
  height: 22px;
}
.cmd-pillar-nodes .orbit-node strong {
  font-size: 13px;
  text-align: center;
  line-height: 1.25;
}
.cmd-pillar-nodes .orbit-node small {
  font-size: 10.5px;
  text-align: center;
  line-height: 1.25;
}
.staff-team .tabs.tabs-8 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: unset;
  gap: 12px;
}
.staff-team .tabs.tabs-8 .tab {
  padding: 14px 15px;
  gap: 7px;
}
.staff-team .tabs.tabs-8 .tab strong {
  font-size: 16px;
}
.staff-team .tabs.tabs-8 .persona-voice {
  font-size: 12.5px;
}
@media (max-width: 1020px) {
  .cmd-pillars { grid-template-columns: 1fr; gap: 10px; }
  .staff-team .tabs.tabs-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: unset;
  }
}
@media (max-width: 640px) {
  .team-command-map { padding: 14px 12px; gap: 12px; }
  .cmd-pillar { padding: 10px 8px; gap: 8px; }
  .cmd-pillar-nodes {
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 4px;
  }
  .cmd-pillar-nodes .orbit-circle {
    width: 42px;
    height: 42px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.42), 0 8px 16px -6px rgba(16, 36, 74, 0.22);
  }
  .cmd-pillar-nodes .orbit-circle .ico {
    width: 18px;
    height: 18px;
  }
  .cmd-pillar-nodes .orbit-node strong {
    font-size: 11.5px;
  }
  .cmd-pillar-nodes .orbit-node small {
    font-size: 9.5px;
    padding: 2px 5px;
  }
  .staff-team .tabs.tabs-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
  }
  .staff-team .tabs.tabs-8 .tab {
    padding: 11px 10px;
    gap: 6px;
  }
  .staff-team .tabs.tabs-8 .persona-top {
    gap: 4px;
  }
  .staff-team .tabs.tabs-8 .persona-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .staff-team .tabs.tabs-8 .persona-avatar .ico {
    width: 17px;
    height: 17px;
  }
  .staff-team .tabs.tabs-8 .persona-station {
    font-size: 9.5px;
    padding: 2px 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .staff-team .tabs.tabs-8 .tab strong {
    font-size: 14px;
  }
  .staff-team .tabs.tabs-8 .persona-voice {
    display: none;
  }
}

/* ==========================================================================
   9. Sully.ai Minimalist Architecture Redesign
      - Compact section headers (.intro-compact)
      - Side-by-side vertical role accordion + live visual (.sully-split)
      - Architectural 1px hairline 3-col EMR & Agent Studio (.emr-arch-grid)
      - Architectural 1px hairline 3-col Patient Journey (.sully-journey-grid)
      - Balanced 2-up video showcase (.video-grid-2) & compact scenario pills
   ========================================================================== */

.intro.intro-compact {
  margin-bottom: clamp(28px, 3.8vw, 44px);
}
.intro.intro-compact .label {
  color: var(--brand);
  margin-bottom: 8px;
  display: block;
}

/* Side-by-side vertical role accordion + live screen (.sully-split) */
.agents.staff-team.sully-split {
  display: grid;
  grid-template-columns: minmax(320px, 0.68fr) minmax(0, 1.32fr);
  align-items: stretch;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 20px 50px -28px rgba(14, 26, 51, 0.16);
}

.staff-team.sully-split .tabs.tabs-sully {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface);
}

.staff-team.sully-split .tabs.tabs-sully .tab {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 13px 20px;
  height: auto;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  transform: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.staff-team.sully-split .tabs.tabs-sully .tab:last-child {
  border-bottom: 0;
}
.staff-team.sully-split .tabs.tabs-sully .tab:hover {
  background: color-mix(in srgb, var(--role-color) 4%, var(--surface));
  transform: none;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--role-color) 45%, transparent);
}
.staff-team.sully-split .tabs.tabs-sully .tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--role-color) 6%, var(--surface));
  box-shadow: inset 3.5px 0 0 var(--role-color);
  padding-block: 16px;
}

.sully-tab-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.sully-tab-head .persona-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.sully-tab-head .persona-avatar .ico {
  width: 17px;
  height: 17px;
}
.sully-tab-head strong {
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.012em;
  flex: 1;
  min-width: 0;
}
.sully-tab-head .persona-station {
  font-size: 10.5px;
  padding: 2px 8px;
  opacity: 0.85;
}
.staff-team.sully-split .tabs.tabs-sully .tab[aria-selected="true"] .sully-tab-head .persona-station {
  opacity: 1;
}

.sully-tab-body {
  display: none;
  padding-top: 8px;
  padding-left: 44px;
  gap: 8px;
}
.staff-team.sully-split .tabs.tabs-sully .tab[aria-selected="true"] .sully-tab-body {
  display: grid;
}
.sully-tab-body .persona-voice {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}
.sully-tab-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sully-tab-tags span {
  font: 500 11px var(--mono);
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--role-color) 28%, var(--line));
  color: var(--ink);
}

.sully-stage {
  background: radial-gradient(120% 120% at 50% 0%, #EEF4FB 0%, #F6F8FB 100%);
  padding: clamp(20px, 2.8vw, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.sully-stage .panel {
  display: block;
  width: 100%;
  padding: 0;
  min-height: 0;
}
.sully-stage .panel-visual {
  display: grid;
  gap: 14px;
  width: 100%;
}
.panel-inline-cta {
  margin-left: auto;
  font: 600 13px var(--sans);
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.panel-inline-cta:hover {
  color: var(--signal-ink);
  text-decoration: underline;
}

.panel-mobile-head {
  display: none;
}

@media (max-width: 960px) {
  .agents.staff-team.sully-split {
    grid-template-columns: 1fr;
  }
  .staff-team.sully-split .tabs.tabs-sully {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 12px;
    background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  }
  .staff-team.sully-split .tabs.tabs-sully .tab {
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    gap: 0;
  }
  .staff-team.sully-split .tabs.tabs-sully .tab + .tab {
    border-top: 1px solid var(--line);
  }
  .staff-team.sully-split .tabs.tabs-sully .tab[aria-selected="true"] {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 6px 14px -8px rgba(31, 79, 180, 0.45);
    padding-block: 9px;
  }
  .staff-team.sully-split .tabs.tabs-sully .tab[aria-selected="true"]::before {
    display: none;
  }
  .staff-team.sully-split .tabs.tabs-sully .tab[aria-selected="true"] strong {
    color: #fff;
  }
  .staff-team.sully-split .tabs.tabs-sully .tab[aria-selected="true"] .persona-avatar {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
  }
  .sully-tab-head {
    gap: 8px;
  }
  .sully-tab-head .persona-avatar {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex: none;
  }
  .sully-tab-head strong {
    font-size: 13px;
    line-height: 1.2;
  }
  .sully-tab-head .persona-station {
    display: none !important;
  }
  .sully-tab-body {
    display: none !important;
  }
  .panel-mobile-head {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  }
  .panel-mobile-head strong {
    font-size: 15px;
    font-weight: 650;
    color: var(--ink);
    line-height: 1.3;
  }
  .panel-mobile-head p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--muted);
  }
}
@media (max-width: 640px) {
  .staff-team.sully-split .tabs.tabs-sully {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
    gap: 6px;
  }
  .staff-team.sully-split .tabs.tabs-sully .tab {
    padding: 8px 10px;
  }
  .sully-stage {
    padding: 14px 12px;
  }
  .shot-switcher-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .shot-switcher-bar .shot-pill {
    width: 100%;
    justify-content: center;
    padding: 7px 8px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .panel-inline-cta {
    grid-column: 1 / -1;
    margin-left: 0;
    width: 100%;
    padding-top: 2px;
    text-align: right;
  }
}

/* Architectural 1px Hairline 3-Column EMR & Agent Studio (.emr-arch-grid) */
.emr-arch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.emr-arch-cell {
  position: relative;
  padding: clamp(26px, 3.2vw, 38px) clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.emr-arch-cell + .emr-arch-cell {
  border-left: 1px solid var(--line);
}
.emr-arch-cell.is-highlight {
  background: linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 100%);
}
.emr-arch-cell h3 {
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
}
.emr-arch-cell p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.emr-prompt-pill {
  margin-top: auto;
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0F172A;
  color: #F8FAFC;
  font: 400 12px/1.45 var(--mono);
  border: 1px solid #1E293B;
}
@media (max-width: 900px) {
  .emr-arch-grid {
    grid-template-columns: 1fr;
  }
  .emr-arch-cell + .emr-arch-cell {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Architectural 1px Hairline 3-Column Patient Journey (.sully-journey-grid) */
.sully-journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.sj-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sj-col + .sj-col {
  border-left: 1px solid var(--line);
}
.sj-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
}
.sj-head span {
  font: 600 12px var(--mono);
  color: var(--brand);
}
.sj-head h3 {
  font-size: 18px;
  font-weight: 650;
}
.sj-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}
.sj-list li + li {
  border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.sj-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.14s ease, color 0.14s ease;
}
.sj-list a:hover {
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  color: var(--brand);
}
.sj-list .ico {
  width: 19px;
  height: 19px;
  color: var(--brand);
  flex: none;
}
.sj-list span {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.sj-list small {
  font: 500 11px var(--mono);
  color: var(--muted);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .sully-journey-grid {
    grid-template-columns: 1fr;
  }
  .sj-col + .sj-col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Balanced 2-up video grid (.video-grid-2) */
.video-grid.video-grid-2 {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 24px;
}
@media (max-width: 960px) {
  .video-grid.video-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Compact 1-line scenario pills in #contact */
.scenario-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.scenario-pills .scenario-card {
  padding: 10px 12px;
  font: 600 13px var(--sans);
  border-radius: 10px;
}
@media (max-width: 560px) {
  .scenario-pills {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   10. Ascenix.co Design Upgrades
       - Two-tone contrast headlines (.ogrey)
       - Zero-friction Hero Pledge pill (.hero-pledge)
       - Mid-page 1-line Quick Email Demo Bar (.seeit-bar / .qform)
       - 3-Step Live Agent Mini-Trace (.agent-mini-trace)
       - Inflow -> PreSense Core -> Outflow Stream Diagram (.inflow-stream)
   ========================================================================== */

/* 1. Two-tone contrast headlines (.ogrey) */
h1 .ogrey,
h2 .ogrey,
h3 .ogrey,
strong .ogrey {
  color: #687792;
  font-weight: 500;
}

/* 2. Zero-friction Hero Pledge pill (.hero-pledge) */
.hero-pledge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px -10px rgba(14, 26, 51, 0.12);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}
.hero-pledge-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3FCB82;
  box-shadow: 0 0 0 4px rgba(63, 203, 130, 0.18);
  flex: none;
}
.hero-pledge b {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 640px) {
  .hero-pledge {
    border-radius: 12px;
    padding: 10px 12px;
  }
}

/* 3. Mid-page 1-line Quick Email Demo Bar (.seeit-bar) */
.seeit-bar {
  margin-top: 20px;
  padding: 16px 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  box-shadow: 0 12px 30px -22px rgba(14, 26, 51, 0.14);
}
.seeit-copy {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  flex: 1;
  min-width: 0;
}
.seeit-copy strong {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.seeit-copy > span {
  font-size: 14.5px;
  color: var(--muted);
}
.seeit-copy code {
  font: 500 12.5px var(--mono);
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
}
.qform {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 420px;
  min-width: 0;
}
.qform input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: 15px var(--sans);
}
.qform input[type="email"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  background: var(--surface);
}
.qform .btn {
  padding: 10px 18px;
  font-size: 14.5px;
  border-radius: 9px;
}
@media (max-width: 820px) {
  .seeit-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .qform {
    flex: 1 1 auto;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .qform {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 4. Ascenix Glenn-AI Inspired 3-Step Live Agent Mini-Trace (.agent-mini-trace) */
.agent-mini-trace {
  margin-top: auto;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: #0F172A;
  border: 1px solid #1E293B;
  display: grid;
  gap: 9px;
}
.amt-prompt {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: #F8FAFC;
  font: 400 12px/1.42 var(--mono);
}
.amt-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.amt-sources span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #CBD5E1;
  font: 500 10.5px var(--mono);
}
.amt-sources i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6CE0A3;
}
.amt-output {
  font: 600 11.5px/1.35 var(--mono);
  color: #6CE0A3;
  padding-top: 2px;
}

/* 5. Ascenix-Inspired Inflow -> PreSense Core -> Outflow Stream (.inflow-stream) */
.inflow-stream {
  margin-bottom: 24px;
  padding: clamp(18px, 2.5vw, 28px);
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, #FFFFFF 0%, #F4F8FE 50%, #FFFFFF 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  overflow: hidden;
}
.inflow-col {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.inflow-col-label {
  font: 600 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.inflow-lanes {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.inflow-lane {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.inflow-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(14, 26, 51, 0.04);
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--ink);
}
.inflow-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}
.inflow-chip.crit i { background: #E05A52; }
.inflow-chip.warn i { background: #E8811A; }
.inflow-chip.ok i { background: #1F7A4F; }
.inflow-chip.fellow i { background: #1F4FB4; }
.inflow-chip b {
  font-weight: 600;
}
.inflow-chip small {
  font: 500 11px var(--mono);
  color: var(--muted);
}
.inflow-chip em {
  font: 600 10.5px var(--mono);
  font-style: normal;
  padding: 2px 6px;
  border-radius: 4px;
  background: #FEE4E2;
  color: #B42318;
}
.inflow-chip.warn em {
  background: #FEF0C7;
  color: #B54708;
}

.inflow-hub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #0F1C36;
  color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(31, 79, 180, 0.12), 0 16px 32px -12px rgba(14, 26, 51, 0.45);
}
.inflow-hub-orb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FFFFFF;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
}
.inflow-hub-orb img {
  width: 28px;
  height: 28px;
}
.inflow-hub-copy {
  display: grid;
  gap: 2px;
}
.inflow-hub strong {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.inflow-hub small {
  font: 500 10.5px var(--mono);
  color: #93B4FF;
  white-space: nowrap;
}

.inflow-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.inflow-outcomes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  min-width: 0;
}
.inflow-outcomes .ico {
  width: 19px;
  height: 19px;
  color: var(--brand);
  flex: none;
}
.inflow-outcomes div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.inflow-outcomes b {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.25;
}
.inflow-outcomes small {
  font: 500 10.5px var(--mono);
  color: var(--muted);
  line-height: 1.25;
}

@media (max-width: 980px) {
  .inflow-stream {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .inflow-hub {
    flex-direction: row;
    justify-content: center;
    text-align: left;
    gap: 12px;
    padding: 12px 16px;
  }
  .inflow-hub-orb {
    margin-bottom: 0;
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 560px) {
  .inflow-outcomes {
    grid-template-columns: 1fr;
  }
}

/* 6. Demo Perks Checklist in #contact + Mobile Polish for Walkthrough & Command Map */
.demo-perks {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 8px;
}
.demo-perks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 500;
}
.demo-perks .ico {
  width: 16px;
  height: 16px;
  color: #6CE0A3;
  flex: none;
  margin-top: 2px;
}

@media (max-width: 560px) {
  /* Uncover screenshot inside walkthrough player on 375px screens */
  .wt-topbar {
    top: 8px;
    left: 8px;
    right: 8px;
    gap: 6px;
  }
  .wt-badge {
    padding: 4px 8px;
    font-size: 10px;
  }
  .wt-btn {
    padding: 4px 8px;
    font-size: 10.5px;
  }
  .wt-hud {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  .wt-hud-pill {
    padding: 6px 9px;
    gap: 6px;
    font-size: 11px;
  }
  .wt-hud-tag {
    font-size: 9px;
    padding: 2px 5px;
  }
  .wt-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
    gap: 6px;
  }
  .wt-step {
    padding: 8px 10px;
  }
  /* Make care-team.html command map nodes clean horizontal rows on mobile */
  .cmd-pillar-nodes {
    grid-template-columns: 1fr !important;
  }
  .cmd-pillar-nodes .orbit-node {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    padding: 9px 12px;
  }
}