/* ============================================================
   Handoff Wizard MD — Campaign Funnel Landing Pages
   Design system + page styles
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* surfaces */
  --bg:           oklch(0.985 0.005 75);
  --bg-elev:      oklch(0.975 0.005 75);
  --card:         oklch(0.995 0.003 75);
  --border:       oklch(0.91 0.006 75);
  --border-strong: oklch(0.82 0.01 75);
  --ink:          oklch(0.20 0.02 260);
  --ink-2:        oklch(0.42 0.015 260);
  --ink-3:        oklch(0.58 0.01 260);
  --critical:     oklch(0.55 0.20 25);

  /* viewer chrome (dark) */
  --chrome-bg:        oklch(0.18 0.015 260);
  --chrome-bg-elev:   oklch(0.24 0.02 260);
  --chrome-border:    oklch(0.32 0.02 260);
  --chrome-ink:       oklch(0.96 0.005 75);
  --chrome-ink-2:     oklch(0.70 0.01 260);

  /* avatar accents */
  --staff:        oklch(0.60 0.15 50);
  --staff-2:      oklch(0.94 0.04 60);
  --staff-fg:     oklch(0.30 0.10 45);
  --director:     oklch(0.42 0.14 250);
  --director-2:   oklch(0.94 0.03 250);
  --director-fg:  oklch(0.25 0.10 250);
  --doctor:       oklch(0.48 0.09 185);
  --doctor-2:     oklch(0.94 0.025 185);
  --doctor-fg:    oklch(0.28 0.08 185);
  /* Family / Advocate — warm rose; conveys "personal stakeholder" rather
     than "clinical authority". Used for sectors 7, 8, 10, 11. */
  --family:       oklch(0.52 0.16 8);
  --family-2:     oklch(0.94 0.03 8);
  --family-fg:    oklch(0.32 0.13 8);

  /* type */
  --font:         "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono:         "Geist Mono", ui-monospace, monospace;

  --radius:       10px;
  --radius-sm:    6px;
  --radius-lg:    14px;
}

/* avatar-scoped variables — set on .page[data-avatar=…] root */
.page[data-avatar="A"] { --accent: var(--staff);    --accent-soft: var(--staff-2);    --accent-fg: var(--staff-fg); }
.page[data-avatar="B"] { --accent: var(--director); --accent-soft: var(--director-2); --accent-fg: var(--director-fg); }
.page[data-avatar="C"] { --accent: var(--doctor);   --accent-soft: var(--doctor-2);   --accent-fg: var(--doctor-fg); }
.page[data-avatar="F"] { --accent: var(--family);   --accent-soft: var(--family-2);   --accent-fg: var(--family-fg); }

/* Campaign HQ inherits the same avatar accent system */
.hq[data-avatar="A"] { --accent: var(--staff);    --accent-soft: var(--staff-2);    --accent-fg: var(--staff-fg); }
.hq[data-avatar="B"] { --accent: var(--director); --accent-soft: var(--director-2); --accent-fg: var(--director-fg); }
.hq[data-avatar="C"] { --accent: var(--doctor);   --accent-soft: var(--doctor-2);   --accent-fg: var(--doctor-fg); }
.hq[data-avatar="F"] { --accent: var(--family);   --accent-soft: var(--family-2);   --accent-fg: var(--family-fg); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* ============================================================
   Design viewer chrome (the strip at the top, NOT part of the landing page)
   ============================================================ */

.viewer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--chrome-bg);
}

.viewer-chrome {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--chrome-bg);
  color: var(--chrome-ink);
  border-bottom: 1px solid var(--chrome-border);
  padding: 10px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}

.viewer-chrome .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 13px;
  letter-spacing: -0.005em;
}
.viewer-chrome .brand-mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: linear-gradient(135deg, var(--staff) 0%, var(--director) 60%, var(--doctor) 100%);
  position: relative;
}
.viewer-chrome .brand-mark::after {
  content: ""; position: absolute; inset: 4px;
  border-radius: 2px; background: var(--chrome-bg);
}
.viewer-chrome .brand small {
  color: var(--chrome-ink-2);
  font-weight: 400;
  font-size: 12px;
  margin-left: 6px;
}

.viewer-chrome .nav {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  min-width: 0;
}

.viewer-chrome select,
.viewer-chrome .seg {
  font: inherit;
  color: var(--chrome-ink);
  background: var(--chrome-bg-elev);
  border: 1px solid var(--chrome-border);
  border-radius: 7px;
  padding: 6px 10px;
  height: 30px;
  outline: none;
}
.viewer-chrome select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23a0a8b8'><path d='M3 4.5l3 3 3-3'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
  background-size: 12px;
  padding-right: 26px;
  min-width: 180px;
}
.viewer-chrome select:focus { border-color: var(--chrome-ink-2); }

.viewer-chrome .seg {
  display: inline-flex; padding: 3px; gap: 2px;
  height: 30px;
}
.viewer-chrome .seg button {
  font: inherit; color: var(--chrome-ink-2);
  background: transparent; border: 0;
  padding: 0 10px; border-radius: 5px;
  height: 22px; line-height: 22px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
}
.viewer-chrome .seg button[aria-pressed="true"] {
  background: var(--chrome-ink);
  color: var(--chrome-bg);
  font-weight: 500;
}
.viewer-chrome .seg .swatch {
  width: 8px; height: 8px; border-radius: 999px;
  background: currentColor; opacity: 0.7;
}

.viewer-chrome .count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--chrome-ink-2);
}
.viewer-chrome .count strong { color: var(--chrome-ink); }

.viewer-chrome .iconbtn {
  background: var(--chrome-bg-elev);
  border: 1px solid var(--chrome-border);
  color: var(--chrome-ink-2);
  width: 30px; height: 30px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.viewer-chrome .iconbtn:hover { color: var(--chrome-ink); }

/* a sliver of metadata below the chrome */
.viewer-meta {
  background: var(--chrome-bg-elev);
  border-bottom: 1px solid var(--chrome-border);
  color: var(--chrome-ink-2);
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 6px 18px;
  display: flex; gap: 18px; align-items: center;
  letter-spacing: 0.01em;
}
.viewer-meta .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--chrome-ink-2); }
.viewer-meta .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--chrome-bg);
  border: 1px solid var(--chrome-border);
}
.viewer-meta .pill .sw { width: 8px; height: 8px; border-radius: 999px; background: var(--accent, var(--chrome-ink-2)); }

/* The page itself sits inside this — a real-world device shell with no nav */
.viewer-stage {
  flex: 1;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* ============================================================
   Landing page — the real-world output
   ============================================================ */

.page {
  --page-pad-x: clamp(20px, 4vw, 56px);
  --max-w: 1240px;
  background: var(--bg);
  color: var(--ink);
  min-height: 100%;
  overflow-x: hidden;
}

.page-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 18px var(--page-pad-x) 80px;
}

/* brand mark — small, unobtrusive, not navigation */
.brandbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 4px;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.brandbar .brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.brandbar .brand-mark {
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--accent);
  position: relative;
}
.brandbar .brand-mark::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 2px; background: var(--bg);
}
.brandbar .compliance {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 8px;
}
.brandbar .compliance::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.65 0.13 145);
}

/* HERO — above the fold */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  /* default grid align-items is stretch — left column matches right column height
     so the CTA gets pushed down (via margin-top: auto on .form-card) to align
     with the bottom of the EHR + chat preview on the right. */
}
@media (max-width: 920px) { .hero { grid-template-columns: minmax(0, 1fr); } }

.hero-text { display: flex; flex-direction: column; gap: 18px; }

/* push the form down so its CTA aligns with the bottom of the right column.
   The form-card itself grows to fill the available vertical space; its
   internal layout pushes the action group (CTA + foot) to the bottom while
   the fields stack distributes through the available middle space. */
.hero-text .form-card {
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: space-evenly;  /* distribute rows across the available height */
}

.form-action {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 4px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-fg);
  align-self: flex-start;
}
.eyebrow .marker {
  display: inline-block; width: 18px; height: 1.5px;
  background: var(--accent);
}

.headline {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.headline .accent { color: var(--accent); }

.sub {
  font-size: clamp(15.5px, 1.45vw, 18px);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* form card */
.form-card {
  background: var(--card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 1.8vw, 24px);
  box-shadow: 0 1px 0 oklch(0.99 0.005 75 / 0.9), 0 14px 38px oklch(0.20 0.02 260 / 0.07);
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.form-card .offer {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 4px 8px;
  align-self: flex-start;
  text-transform: uppercase;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-size: 12px; color: var(--ink-2);
  font-weight: 500;
}
.field input {
  font: inherit; font-size: 14.5px;
  color: var(--ink);
  border: 1px solid var(--border);
  background: oklch(0.99 0.003 75);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  -webkit-appearance: none;
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.15);
}
.field.error input { border-color: var(--critical); }
.field .err {
  font-size: 11.5px; color: var(--critical);
  font-family: var(--mono);
}
.field select {
  font: inherit; font-size: 14.5px;
  color: var(--ink);
  border: 1px solid var(--border);
  background: oklch(0.99 0.003 75);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.15);
}
.field select:disabled { opacity: 0.55; cursor: not-allowed; }

.home-hero-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  padding: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 14px 38px oklch(0.20 0.02 260 / 0.07);
}
.home-hero-form .cta {
  align-self: stretch;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  padding: 18px 22px;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: 0 4px 14px oklch(from var(--accent) l c h / 0.28);
}
.home-hero-form .cta:hover {
  box-shadow: 0 6px 18px oklch(from var(--accent) l c h / 0.36);
}
.home-hero-form .cta .arrow { font-size: 1.1em; }

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

/* Homepage hero — punchier headline than landing pages (it's the CTA hook).
   Headline goes huge to match the visual weight of the right-column animation
   stack (EHR panel + chat panel ≈ 700px). Hero-text uses space-between so
   eyebrow/h1/sub sit at top, form pins to bottom — left column fills the
   same vertical extent as the right. */
[data-screen-label="MD HOMEPAGE"] .hero-text {
  justify-content: space-between;
  gap: 24px;
}
/* Re-tone all primary ink to CTA navy on the MD homepage so headings,
   section titles, and body copy visually tie back to the Start my campaign
   button. Landing pages keep the original near-black ink. */
[data-screen-label="MD HOMEPAGE"] {
  --ink: #0F1830;
}
[data-screen-label="MD HOMEPAGE"] .hero-text .headline {
  font-size: clamp(34px, 7.5vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 650;
  color: #0F1830;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Stacked layout (mobile + small tablet) — drop the space-between
   distribution so eyebrow/h1/sub/form bunch naturally without 200px gaps,
   and tone the headline down so a 360px viewport doesn't get a 48px word
   that needs to wrap per character. */
@media (max-width: 920px) {
  [data-screen-label="MD HOMEPAGE"] .hero-text {
    justify-content: flex-start;
    gap: 18px;
  }
  [data-screen-label="MD HOMEPAGE"] .hero-text .headline {
    font-size: clamp(30px, 9vw, 56px);
    line-height: 1.05;
  }
  [data-screen-label="MD HOMEPAGE"] .hero-text .sub {
    font-size: clamp(15px, 4.2vw, 18px);
  }
  [data-screen-label="MD HOMEPAGE"] .home-hero-form { padding: 16px; }
  [data-screen-label="MD HOMEPAGE"] .home-hero-form .cta {
    font-size: 16px;
    padding: 16px 18px;
  }
}

/* Phone — keep above-the-fold viable on 360x640. Tighter page padding,
   tighter brandbar gap, slightly smaller form copy. */
@media (max-width: 480px) {
  [data-screen-label="MD HOMEPAGE"] .page-inner { padding-left: 16px; padding-right: 16px; }
  [data-screen-label="MD HOMEPAGE"] .hero-text .headline {
    font-size: clamp(28px, 10vw, 44px);
  }
  [data-screen-label="MD HOMEPAGE"] .hero-eyebrow { font-size: 10.5px; margin-bottom: 10px; }
  [data-screen-label="MD HOMEPAGE"] .home-hero-form { padding: 14px; gap: 12px; }
  [data-screen-label="MD HOMEPAGE"] .home-hero-form .field input { font-size: 16px; }
  [data-screen-label="MD HOMEPAGE"] .home-hero-form .cta {
    font-size: 15.5px;
    padding: 14px 16px;
  }
  [data-screen-label="MD HOMEPAGE"] .home-hero-form .form-foot { font-size: 11px; }
  [data-screen-label="MD HOMEPAGE"] .home-hero-form-success { padding: 20px 16px; }
}
[data-screen-label="MD HOMEPAGE"] .hero-text .sub {
  font-size: clamp(16px, 1.55vw, 19px);
}
[data-screen-label="MD HOMEPAGE"] .home-hero-form {
  margin-top: 0;
}
.home-hero-form .form-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-2);
  font-family: var(--mono);
}
.home-hero-form .form-foot .lock { display: inline-flex; }
.home-hero-form-success {
  text-align: left;
  padding: 24px 20px;
}
.home-hero-form-success .success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.home-hero-form-success h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
}
.home-hero-form-success p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.cta {
  font: inherit; font-size: 15px; font-weight: 500;
  color: white;
  background: var(--accent);
  border: 0;
  padding: 13px 18px;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
  transition: transform 0.12s, filter 0.12s;
}
.cta:hover { filter: brightness(1.05); }
.cta:active { transform: translateY(1px); }
.cta:disabled { opacity: 0.6; cursor: not-allowed; }
.cta .arrow { transition: transform 0.2s; }
.cta:hover .arrow { transform: translateX(3px); }

.form-foot {
  font-size: 11.5px; color: var(--ink-3);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 2px;
  text-align: center;
}
.form-foot .lock {
  width: 12px; height: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.7;
}

/* hero preview (right column) — peek at the mechanism */
.hero-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hero-preview {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 16px;
  box-shadow: 0 12px 40px oklch(0.20 0.02 260 / 0.06);
  flex: 1 1 0;
  min-height: 320px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hero-preview .preview-header {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hero-preview .preview-header .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.65 0.13 145);
  display: inline-block; margin-right: 6px;
}

/* MECHANISM section (below the fold + hero preview) */
.mech-section {
  margin-top: clamp(56px, 8vw, 96px);
}

.section-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.section-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.section-title .accent { color: var(--accent); }

/* chat mechanism layout */
.mech-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 18px;
}
@media (max-width: 820px) { .mech-chat { grid-template-columns: 1fr; } }

.ehr-panel, .chat-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  background: var(--bg-elev);
}
.panel-header .title { color: var(--ink-2); font-weight: 500; }
.panel-header .tag {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ehr-body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  padding: 14px 14px 18px;
  color: var(--ink-2);
  flex: 1;
  max-height: 360px;
  overflow: hidden;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
}
.ehr-line {
  padding: 6px 0;
  border-bottom: 1px dashed oklch(0.92 0.005 75);
}
.ehr-line:last-child { border-bottom: 0; }
.ehr-body::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--card));
  pointer-events: none;
}

.chat-body {
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 260px;
}

.chat-q {
  align-self: flex-end;
  max-width: 90%;
  background: oklch(0.96 0.005 75);
  border: 1px solid var(--border);
  border-radius: 12px 12px 4px 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ink);
}

.chat-a {
  align-self: flex-start;
  max-width: 100%;
  background: oklch(from var(--accent) l c h / 0.06);
  border: 1px solid oklch(from var(--accent) l c h / 0.18);
  border-radius: 12px 12px 12px 4px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
}
.chat-a .who {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent-fg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.chat-a .who::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
  display: inline-block;
}

.citations {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.citation {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border: 1px solid oklch(from var(--accent) l c h / 0.25);
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.citation::before {
  content: ""; width: 10px; height: 10px; border-radius: 2px;
  background: oklch(from var(--accent) l c h / 0.4);
  display: inline-block;
}

/* stat mechanism */
.mech-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
}
@media (max-width: 820px) { .mech-stat { grid-template-columns: 1fr; } }
.mech-stat .stat-num {
  font-size: clamp(72px, 11vw, 144px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--accent);
  font-feature-settings: "tnum";
}
.mech-stat .stat-label {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.35;
  color: var(--ink);
  margin-top: 14px;
  font-weight: 500;
  text-wrap: balance;
}
.mech-stat .stat-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 12px;
}
.mech-stat .stat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 10px;
  margin-top: 18px;
  align-self: flex-start;
}

/* diagram mechanism */
.mech-diagram {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.5vw, 32px);
}
.mech-diagram .caption {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.diagram-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  align-items: stretch;
  position: relative;
}
.diag-node {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.diag-node .label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.diag-node .sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.45;
}
.diag-node .num {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent-fg);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.diag-node + .diag-node::before {
  content: "→";
  position: absolute;
  left: -14px; top: 50%; transform: translate(-50%, -50%);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 16px;
}
@media (max-width: 720px) {
  .diag-node + .diag-node::before {
    content: "↓"; left: 50%; top: -14px; transform: translate(-50%, -50%);
  }
}

/* FAQ */
.faq-section { margin-top: clamp(48px, 6vw, 72px); }
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) { .faq-list { grid-template-columns: 1fr; } }
.faq {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.faq summary {
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 18px;
  color: var(--accent);
  transition: transform 0.2s;
}
.faq[open] summary::after { content: "−"; }
.faq .ans {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 10px;
}

/* footer */
.page-foot {
  margin-top: clamp(64px, 8vw, 96px);
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.page-foot .left { display: flex; align-items: center; gap: 10px; }
.page-foot .legal { color: var(--ink-3); }
.page-foot .seal {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elev);
}
.page-foot .seal .sw { width: 7px; height: 7px; border-radius: 999px; background: oklch(0.65 0.13 145); }

/* ============================================================
   EHR + Chat (hero animated demo)
   ============================================================ */

.ehr-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 0;
  min-height: 0;
  position: relative; /* cursor sprite positions against this wrapper now */
}

/* ─── EHR records mock ─── */
.ehrx {
  background: var(--card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 38px oklch(0.20 0.02 260 / 0.07);
  font-size: 13px;
  flex: 1 1 50%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}

.ehrx-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(180deg, oklch(0.97 0.005 260), oklch(0.95 0.008 260));
  border-bottom: 1px solid var(--border);
}
.ehrx-banner-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ehrx-bed {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 30px;
  background: oklch(0.20 0.02 260);
  color: white;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ehrx-id { display: flex; flex-direction: column; min-width: 0; }
.ehrx-name {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.ehrx-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  display: flex; gap: 6px; align-items: center;
  letter-spacing: 0.04em;
}
.ehrx-meta .dot { color: oklch(0.75 0.005 260); }
.ehrx-meta .allergy { color: var(--ink-2); }

.ehrx-banner-r { display: flex; gap: 6px; }
.ehrx-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink-2);
}
.ehrx-chip.status { color: oklch(0.45 0.13 145); border-color: oklch(0.85 0.07 145); background: oklch(0.97 0.03 145); }
.ehrx-chip.code   { color: var(--critical); border-color: oklch(0.88 0.07 25); background: oklch(0.98 0.02 25); }

.ehrx-tabs {
  display: flex; align-items: stretch;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  position: relative;
}
.ehrx-tab {
  font: inherit;
  background: transparent; border: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  position: relative;
  letter-spacing: 0.01em;
}
.ehrx-tab.active {
  color: var(--ink);
}
.ehrx-tab.active::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px;
  height: 2px; background: var(--accent);
  border-radius: 2px 2px 0 0;
}
.ehrx-tabs-right { margin-left: auto; display: flex; gap: 8px; align-items: center; padding-right: 4px; }
.ehrx-filter {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
}

.ehrx-source-head {
  padding: 8px 14px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ehrx-rows-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.ehrx-rows {
  padding: 4px 0 4px;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: opacity 0.25s, transform 0.25s;
}
.ehrx-rows[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.ehrx-rows::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--card));
  pointer-events: none;
}

.ehrx-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 7px 12px 7px 10px;
  border-bottom: 1px dashed oklch(0.92 0.005 75);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-2);
  transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.ehrx-row:last-child { border-bottom: 0; }
.ehrx-row-i {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
  text-align: center;
  width: fit-content;
}
.ehrx-row-body {
  white-space: pre-wrap; word-break: break-word;
}
.ehrx-row.active,
.ehrx-row.flash {
  background: oklch(from var(--accent) l c h / 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
  border-bottom-color: oklch(from var(--accent) l c h / 0.2);
  color: var(--ink);
}
.ehrx-row.active .ehrx-row-i,
.ehrx-row.flash .ehrx-row-i {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.ehrx-row.flash {
  animation: rowflash 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes rowflash {
  0%   { background: oklch(from var(--accent) l c h / 0.30); }
  100% { background: oklch(from var(--accent) l c h / 0.12); }
}

/* EHR detail overlay — appears when a citation chip is clicked. */
.ehrx-detail {
  position: absolute;
  inset: 0;
  background: var(--card);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.28s, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ehrx-detail.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ehrx-detail-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ehrx-detail-num {
  font-weight: 600;
  color: var(--accent-fg);
}
.ehrx-detail-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  background: var(--accent-soft);
  color: var(--accent-fg);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid oklch(from var(--accent) l c h / 0.22);
}
.ehrx-detail-head {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ehrx-detail-body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  flex: 1 1 auto;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding-right: 4px;
}
.ehrx-detail-body::-webkit-scrollbar { width: 6px; }
.ehrx-detail-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}
.ehrx-detail-foot {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 5px 10px 5px 4px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid oklch(from var(--accent) l c h / 0.25);
  color: var(--accent-fg);
  font-family: var(--mono);
  font-size: 11px;
}

.ehrx-breadcrumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ehrx-breadcrumb strong { color: var(--accent-fg); }
.ehrx-back-icon { color: var(--accent); }

/* ─── Chat box ─── */
.chatx {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 14px 38px oklch(0.20 0.02 260 / 0.07);
  flex: 1 1 50%;
  min-height: 240px;
}

.chatx-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.chatx-logo {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12.5px;
  min-width: 0;
}
.chatx-logo-brand { font-weight: 600; flex-shrink: 0; }
.chatx-logo-sep   { color: var(--ink-3); }
.chatx-logo-patient {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.chatx-logo-mark {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--accent);
  position: relative;
}
.chatx-logo-mark::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 1px; background: var(--card);
}
.chatx-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chatx-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.65 0.13 145);
}
.chatx.phase-thinking .chatx-dot {
  background: oklch(0.65 0.13 80);
  animation: pulse 1.4s infinite;
}
.chatx.phase-streaming .chatx-dot {
  background: var(--accent);
  animation: pulse 1.2s infinite;
}

.chatx-body {
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* anchor messages to the bottom so they hug the input bar even when the
     chat panel is stretched to fill a tall hero column */
  justify-content: flex-end;
}

.chatx-q {
  align-self: flex-end;
  max-width: 90%;
  background: oklch(0.96 0.005 75);
  border: 1.5px solid var(--border-strong);
  border-radius: 12px 12px 4px 12px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  animation: bubblein 0.25s ease both;
}

.chatx-a {
  align-self: flex-start;
  max-width: 100%;
  background: oklch(from var(--accent) l c h / 0.07);
  border: 1.5px solid oklch(from var(--accent) l c h / 0.30);
  border-radius: 12px 12px 12px 4px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  animation: bubblein 0.3s ease both;
}
.chatx-a.thinking {
  padding: 14px 16px;
}

.chatx-dots {
  display: inline-flex; gap: 4px; align-items: center;
}
.chatx-dots span {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
  opacity: 0.4;
  animation: thinkdot 1s infinite ease-in-out;
}
.chatx-dots span:nth-child(2) { animation-delay: 0.15s; }
.chatx-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinkdot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chatx-lead { margin-bottom: 8px; }

.chatx-points {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.chatx-point {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  padding: 4px 6px 4px 4px;
  border-radius: 6px;
  margin: 0 -6px 0 -4px;
  transition: background-color 0.25s;
}
.chatx-point.hot {
  background: oklch(from var(--accent) l c h / 0.10);
}
.chatx-bullet {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: oklch(from var(--accent) l c h / 0.15);
  color: var(--accent-fg);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}
.chatx-point.hot .chatx-bullet {
  background: var(--accent);
  color: white;
}
.chatx-pt-text { display: inline; }

.chatx-cite {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border: 1px solid oklch(from var(--accent) l c h / 0.22);
  border-radius: 999px;
  padding: 1px 7px 1px 4px;
  margin-left: 5px;
  vertical-align: 2px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.chatx-cite.popin {
  animation: citepop 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.chatx-cite.on {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px oklch(from var(--accent) l c h / 0.30);
}

@keyframes citepop {
  0%   { opacity: 0; transform: translateY(2px) scale(0.7); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* streaming caret — sits at the streaming edge while a section is being
   produced, blinks softly. */
.stream-caret {
  display: inline-block;
  width: 0.5ch;
  margin-left: 1px;
  color: var(--accent);
  font-weight: 600;
  transform: translateY(0);
  animation: caretblink 1s steps(1, end) infinite;
  vertical-align: baseline;
}
@keyframes caretblink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.chatx-cite-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 9.5px;
  font-weight: 600;
}

.chatx-outro {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* input bar — now wraps a pasted-context block (when present) on top of the
   input row, and uses a fake field (div) instead of a real input so we can
   render a blinking caret at the end of the typed text. */
.chatx-input {
  position: relative;
  display: flex; flex-direction: column;
  padding: 10px 10px 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  gap: 8px;
}

.chatx-input-row {
  display: flex; align-items: flex-end; gap: 8px;
  min-width: 0;
}

/* The fake field renders as a block of wrappable text so the message can
   grow across multiple lines like a real chat composer. The send button on
   the right column aligns to the bottom (flex-end on the row) so it stays
   pinned to the last line when the field grows. */
.chatx-field {
  flex: 1; min-width: 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 6px 0;
  line-height: 1.45;
  word-break: break-word;
  white-space: normal;
  cursor: text;
  background: transparent;
  border: 0; outline: 0;
  max-height: 6.5em; /* ~4 lines before scrolling, like ChatGPT */
  overflow-y: auto;
}
.chatx-field-text { display: inline; white-space: normal; }
.chatx-field-placeholder { color: var(--ink-3); }

/* Fake caret that we toggle via the `on` modifier. The blinking animation
   only runs while `.on` is applied so the caret is fully hidden (no flash,
   no ghost) whenever the input is not "focused". */
.chatx-field-caret {
  display: inline-block;
  width: 0;
  margin-left: 1px;
  color: var(--accent);
  font-weight: 400;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
}
.chatx-field-caret.on {
  opacity: 1;
  width: 0.5ch;
  animation: caretblink 1s steps(1, end) infinite;
}

.chatx-send {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
  flex-shrink: 0;
}
.chatx-send.hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 4px 14px oklch(from var(--accent) l c h / 0.32);
}
.chatx-send.pressed { transform: scale(0.92); }

/* Pasted-context block (above the input row, after a paste action) */
.chatx-pasted {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  animation: pastein 0.28s ease both;
  min-width: 0;
}
.chatx-pasted-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border: 1px solid oklch(from var(--accent) l c h / 0.22);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.chatx-pasted-text {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
@keyframes pastein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Follow-up user bubble — same look as the first Q bubble, plus an inline
   quote block containing the pasted note text. */
.chatx-q-followup {
  margin-top: 4px;
}
.chatx-q-quote {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  background: oklch(from var(--accent) l c h / 0.06);
  border-radius: 0 6px 6px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.45;
  white-space: pre-wrap;
  display: flex; flex-direction: column; gap: 4px;
}
.chatx-q-quote-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-fg);
}

/* EHR text selection — highlights the Plan paragraph when the cursor "selects" it */
.ehrx-selection {
  border-radius: 3px;
  padding: 0 2px;
  transition: background-color 0.28s ease, color 0.28s ease;
}
.ehrx-selection.on {
  background: oklch(from var(--accent) l c h / 0.30);
  color: var(--ink);
  box-shadow: 0 0 0 1px oklch(from var(--accent) l c h / 0.35);
}

/* Copy chip — flashes near the selection after the "copy" action */
.copy-chip {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent);
  color: white;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 18px oklch(from var(--accent) l c h / 0.35);
  opacity: 0;
  animation: copychipin 0.65s ease both;
  z-index: 7;
}
.copy-chip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--accent);
}
@keyframes copychipin {
  0%   { opacity: 0; transform: translate(-50%, -90%) scale(0.85); }
  20%  { opacity: 1; transform: translate(-50%, -110%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

/* Glass overlay covering the entire right column with the brand line.
   `state-` is one of: off | in | text | out. */
.ehr-chat-overlay {
  position: absolute;
  inset: 0;
  /* fully opaque at peak — the background card colour matches the surrounding
     hero column so the overlay reads as a clean slate, not a faded panel. */
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 8;
  border-radius: var(--radius-lg);
}
.ehr-chat-overlay.state-in,
.ehr-chat-overlay.state-text { opacity: 1; }
.ehr-chat-overlay.state-out  { opacity: 0; }

.ehr-chat-overlay-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  padding: 0 16px;
}
.ehr-chat-overlay-text .line {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s cubic-bezier(0.4, 0.0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0.0, 0.2, 1);
}
/* The accent ("To Understanding.") fades in after the lead line for drama */
.ehr-chat-overlay-text .line-2 {
  transition-delay: 1.05s;
}
.ehr-chat-overlay.state-text .ehr-chat-overlay-text .line {
  opacity: 1;
  transform: translateY(0);
}
.ehr-chat-overlay-text .accent { color: var(--accent); }

/* Mouse cursor sprite — positioned dynamically via inline style (left/top
   from JS measurement). Visible from typing through the post-stream
   interaction phase; never hidden mid-cycle. */
.chatx-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  transition: left 0.55s cubic-bezier(0.4, 0.2, 0.2, 1.1),
              top  0.55s cubic-bezier(0.4, 0.2, 0.2, 1.1),
              transform 0.12s ease,
              opacity 0.2s;
  transform-origin: 30% 25%;
}
.chatx-cursor.pressed { transform: scale(0.85); }

/* a small ripple ring on click */
.chatx-click-ring {
  position: absolute;
  left: 2px; top: 2px;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  opacity: 0.7;
  animation: clickring 0.55s ease-out forwards;
  pointer-events: none;
}
@keyframes clickring {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes bubblein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Campaign HQ — post-opt-in
   ============================================================ */

.hq {
  --page-pad-x: clamp(20px, 4vw, 56px);
  background: var(--bg);
  color: var(--ink);
  min-height: 100%;
  padding: 28px var(--page-pad-x) 80px;
}
.hq-inner {
  max-width: 980px;
  margin: 0 auto;
}
.hq .brandbar { margin-bottom: 28px; }

.hq-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hq-status .check {
  width: 14px; height: 14px;
  border-radius: 999px; background: var(--accent);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}

.hq-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 16px 0 12px;
  text-wrap: balance;
}
.hq-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 64ch;
}
.hq-sub .facility { color: var(--accent-fg); font-weight: 500; }

.hq-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.8vw, 32px);
  margin-bottom: 18px;
}

.progress-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap; gap: 12px;
}
.progress-row .label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.progress-row .count {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.progress-row .count .total {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 18px;
}

.progress-bar {
  height: 12px;
  background: oklch(0.94 0.005 75);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, oklch(from var(--accent) calc(l - 0.05) c h), var(--accent));
  border-radius: 999px;
  transform-origin: left center;
  animation: fillgrow 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes fillgrow {
  from { transform: scaleX(0.01); }
  to   { transform: scaleX(var(--progress, 0.5)); }
}
.progress-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 10px;
  display: flex; justify-content: space-between;
}

/* recent signers */
.signers-card .head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.signers-card h3 {
  font-size: 16px; font-weight: 600;
  margin: 0; letter-spacing: -0.01em;
}
.signers-card .head .live {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.signers-card .head .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.65 0.13 145);
  box-shadow: 0 0 0 0 oklch(0.65 0.13 145 / 0.7);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.65 0.13 145 / 0.7); }
  70%  { box-shadow: 0 0 0 8px oklch(0.65 0.13 145 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.65 0.13 145 / 0); }
}

.signers-list { display: flex; flex-direction: column; }
.signer {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.signer:last-child { border-bottom: 0; }
.signer .avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}
.signer .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.signer .who .name { font-size: 14px; font-weight: 500; }
.signer .who .role { font-size: 12px; color: var(--ink-3); }
.signer .when {
  font-family: var(--mono);
  font-size: 11.5px; color: var(--ink-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.signer.you {
  position: relative;
}
.signer.you::after {
  content: "you";
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 6px;
  margin-left: 6px;
  position: absolute;
  left: 168px;
  top: 50%; transform: translateY(-50%);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* share row */
.share-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--bg-elev);
  margin-top: 14px;
}
.share-row .lbl { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; }
.share-row code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.share-row .copy {
  font: inherit; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--ink);
  padding: 7px 12px; border-radius: 7px;
  cursor: pointer;
}
.share-row .copy:hover { border-color: var(--accent); color: var(--accent-fg); }

/* milestones */
.milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
@media (max-width: 720px) { .milestones { grid-template-columns: 1fr; } }
.milestone {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg);
}
.milestone .ms-n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.milestone .ms-h { font-weight: 500; font-size: 14px; }
.milestone .ms-d { font-size: 12.5px; color: var(--ink-3); }
.milestone.reached { border-color: var(--accent); background: var(--accent-soft); }
.milestone.reached .ms-h { color: var(--accent-fg); }
.milestone.reached .ms-n { color: var(--accent-fg); }

/* hq footer actions */
.hq-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 24px;
}
.linkbtn {
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--ink-2);
  background: transparent; border: 1px solid var(--border);
  padding: 9px 14px; border-radius: 8px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--ink); border-color: var(--border-strong); }

/* ============================================================
   Utility / responsive
   ============================================================ */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* tighter density mode (tweak) */
.page.dense .headline { font-size: clamp(28px, 3.8vw, 46px); }
.page.dense .sub { font-size: clamp(14.5px, 1.3vw, 16.5px); }
.page.dense .hero { gap: clamp(20px, 3vw, 40px); }
.page.dense .form-card { padding: 14px 16px; }
.page.dense .field input { padding: 8px 10px; font-size: 13.5px; }
.page.dense .cta { padding: 11px 16px; font-size: 14px; }
.page.dense .mech-section { margin-top: clamp(36px, 6vw, 68px); }

/* serif headline tweak */
.page.font-editorial .headline {
  font-family: "Geist", ui-serif, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.page.font-editorial .eyebrow,
.page.font-editorial .section-eyebrow { font-family: var(--mono); }

/* monumental headline tweak */
.page.font-monument .headline {
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.035em;
  font-size: clamp(34px, 5vw, 64px);
}

/* prevents the stage from jumping when content swaps */
.viewer-stage > * { width: 100%; min-height: 100%; }

/* ============================================================
   HOMEPAGE + supporting-page additions (Phase 1 build out)
   ============================================================ */

/* CTA buttons (used on hero CTAs + cta-strip) */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--ink-1, #0F1830);
  color: var(--bone-100, #FAF8F2);
  padding: 0.85em 1.4em;
  border: 1px solid var(--ink-1, #0F1830);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 0.15s ease, background 0.15s ease;
  cursor: pointer;
}
.cta:hover { opacity: 0.88; }
.cta .arrow { font-size: 1.2em; line-height: 0; }
.cta-secondary {
  background: transparent;
  color: var(--ink-1, #0F1830);
}
.cta-secondary:hover {
  background: var(--ink-1, #0F1830);
  color: var(--bone-100, #FAF8F2);
  opacity: 1;
}

/* Hero CTA row */
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* Section sub-headline (under .section-title, above grid) */
.section-sub {
  max-width: 720px;
  margin: 0.75rem 0 2.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: 0.72;
}

/* Sector picker grid (homepage) */
.sectors-section {
  padding: 5rem 0 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.sector-card {
  background: var(--bone-100, #FAF8F2);
  border: 1px solid rgba(26, 43, 76, 0.12);
  border-radius: 4px;
  padding: 1.5rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.sector-card:hover {
  border-color: rgba(26, 43, 76, 0.28);
  transform: translateY(-1px);
}
.sector-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(26, 43, 76, 0.08);
}
.sector-idx {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  opacity: 0.5;
}
.sector-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.sector-voters {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.voter-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  margin: 0 -0.75rem;
  text-decoration: none;
  color: inherit;
  font-size: 0.95rem;
  border-radius: 2px;
  transition: background 0.12s ease;
}
.voter-link:hover { background: rgba(26, 43, 76, 0.04); }
.voter-arrow {
  margin-left: auto;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  opacity: 0.4;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.voter-link:hover .voter-arrow {
  opacity: 1;
  transform: translateX(2px);
}
.voter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-1, #0F1830);
  flex-shrink: 0;
}
.voter-link[data-accent="orange"] .voter-dot { background: var(--staff, #F5A623); }
.voter-link[data-accent="blue"]   .voter-dot { background: var(--director, #243C6A); }
.voter-link[data-accent="teal"]   .voter-dot { background: var(--doctor, #5DA89C); }
.voter-link[data-accent="rose"]   .voter-dot { background: var(--family, #C77B7B); }

/* Why-now section */
.whynow-section {
  padding: 5rem 0 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.whynow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0 2rem;
}
.whynow-stat {
  background: var(--bone-100, #FAF8F2);
  border: 1px solid rgba(26, 43, 76, 0.10);
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
}
.whynow-stat .num {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  color: var(--green, #96C3A1);
}
.whynow-stat p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.78;
}
.whynow-stat .src {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.45;
}
.whynow-tag {
  max-width: 900px;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
  border-left: 4px solid var(--orange, #F5A623);
  padding-left: 1.25rem;
}

/* CTA strip */
.cta-strip {
  padding: 4rem 0;
}
.cta-strip-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--bone-100, #FAF8F2);
  border: 1px solid rgba(26, 43, 76, 0.12);
  border-radius: 4px;
  padding: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Prose blocks (long-form body copy on Investor + Security + Pricing pages) */
.prose {
  max-width: 720px;
  font-size: 1.02rem;
  line-height: 1.65;
}
.prose p { margin: 0 0 1em; }
.prose ul.bullet-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 1em;
}
.prose ul.bullet-list li { margin-bottom: 0.5em; }
.prose strong { font-weight: 700; }
.prose a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Pricing table */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.pricing-table th,
.pricing-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(26, 43, 76, 0.10);
}
.pricing-table th {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.6;
}
.pricing-table tbody tr:hover { background: rgba(26, 43, 76, 0.03); }

/* Mobile */
@media (max-width: 640px) {
  .sectors-section,
  .whynow-section { padding: 3rem 1rem 2rem; }
  .cta-strip-inner { padding: 1.75rem; flex-direction: column; align-items: flex-start; }
  .whynow-stat .num { font-size: 2rem; }
}

/* ============================================================
   Coverage strip (homepage replacement for sector picker grid)
   Static breadth-of-coverage list — NO clickthrough to landing pages
   (landing pages are paid-ad targets, not homepage nav).
   ============================================================ */
.coverage-section {
  padding: 5rem 0 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.coverage-grid {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
}
.coverage-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: var(--bone-100, #FAF8F2);
  border: 1px solid rgba(26, 43, 76, 0.10);
  border-radius: 3px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.coverage-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green, #96C3A1);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .coverage-section { padding: 3rem 1rem 2rem; }
}

/* Hero min-height — ensures right-column animation has room to breathe even
   when the left column doesn't contain a tall form (like the homepage +
   investor page, which use CTAs instead). 700px matches landing-page heroes
   (form-driven heroes settle around 671px) so EHR + chat panel proportions
   stay identical across all heroes. */
.hero {
  min-height: 700px;
  /* Critical: hero must always contain its children. position: relative gives
     any descendant with `position: absolute` (overlay, cursor sprite, glass
     fade) a containing block scoped to the hero. Without this the overlay
     anchored to .ehr-chat can compute against a higher ancestor on certain
     reflows and visually leak into the mech-section below. */
  position: relative;
  isolation: isolate;
}
.hero-side {
  /* Clip the absolute-positioned overlay + cursor sprite so they cannot
     paint past the right column's bounds, even if .ehr-chat collapses on
     a strange viewport. */
  overflow: hidden;
  border-radius: var(--radius-lg);
}
@media (max-width: 920px) {
  .hero {
    min-height: 0;
  }
  /* When stacked, give the animation panel a concrete height so flex:1 1 0
     children inside .ehr-chat don't collapse to 0 and let their content
     overflow vertically into the section below. */
  .hero-side {
    min-height: 520px;
    height: 520px;
  }
}
@media (max-width: 480px) {
  .hero-side {
    min-height: 440px;
    height: 440px;
  }
}

/* Text-only hero (homepage, investor) — push CTAs to the bottom of the left
   column so content fills the cell height the same way the form-card does
   on landing pages. Without this the text + CTAs sit at top with a ~240px
   gap below them, making the column look broken next to the full-height
   right side. */
.hero-text .cta-row {
  margin-top: auto;
  padding-top: 8px;
}