/* ============================================================
   Qwery marketing site - qweryhealth.com
   Built on the Qwery Design System (Claude Design, synced with
   qwery-webapp@0.1.0). Tokens below are verbatim from tokens/.
   Warm, calm, credible. No pure black, no hospital blue, no red.
   ============================================================ */

/* ---------------- Design-system tokens ---------------- */

:root {
  /* Canvas & surfaces (warm paper) */
  --paper: #FAF6EF;
  --surface: #FFFFFF;
  --surface-warm: #FFFDF9;
  --surface-sunken: #F1EBE0;

  /* Ink - warm, soft (never #000) */
  --ink-900: #23201B;
  --ink-700: #4C463D;
  --ink-500: #6B6458;
  --ink-400: #8C8475;
  --line: #E7DFD2;
  --line-strong: #D8CEBE;

  /* Primary - calm spruce teal */
  --primary: #0E6B5E;
  --primary-strong: #0A5046;
  --primary-soft: #DCECE8;
  --primary-softer: #ECF4F1;
  --on-primary: #FFFFFF;

  /* Attention - warm honey amber (never red) */
  --attention: #C9870B;
  --attention-strong: #8A5A02;
  --attention-soft: #FBEFD3;
  --attention-ink: #6B4A10;

  /* Positive - calm green, used sparingly */
  --positive: #3C8A5B;
  --positive-soft: #E2F0E5;
  --positive-ink: #245A38;

  /* Focus */
  --focus-ring: #2E8E80;

  /* Type families */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --font-logo: "Nunito", "Hanken Grotesk", Arial, sans-serif;

  /* Type scale */
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-md: 19px;
  --text-lg: 22px;
  --text-xl: 27px;
  --text-2xl: 33px;
  --text-3xl: 40px;

  --lh-tight: 1.18;
  --lh-snug: 1.4;
  --lh-body: 1.6;
  --lh-chat: 1.58;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-tight: -0.01em;
  --ls-wide: 0.04em;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows - soft, warm-tinted, low */
  --shadow-xs: 0 1px 2px rgba(58, 47, 30, 0.06);
  --shadow-sm: 0 2px 6px rgba(58, 47, 30, 0.07);
  --shadow-md: 0 6px 18px rgba(58, 47, 30, 0.09);
  --shadow-lg: 0 14px 34px rgba(58, 47, 30, 0.12);

  /* Motion - calm settle, no bounce */
  --ease-calm: cubic-bezier(0.32, 0.72, 0.26, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* Layout */
  --content-max: 1160px;
  --reading-max: 760px;
  --gutter: 22px;
  --tap-min: 44px;
  --section-gap: clamp(56px, 8vw, 104px);

  /* Marketing display sizes (site-only additions) */
  --m-display: clamp(2.35rem, 4.6vw, 3.6rem);
  --m-title: clamp(1.7rem, 3vw, 2.25rem);

  /* Warm title colors (from the DS display proposal) */
  --title-espresso: #3A2A1C;
  --title-cream: #FAF6EF;
  --title-honey: #F6DFAE;
  --title-mint: #A9E2C6;
}

/* ---------------- Base ---------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-strong); }
button { font: inherit; cursor: pointer; }
strong { font-weight: var(--fw-semibold); }

::selection { background: var(--primary-soft); color: var(--primary-strong); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 142, 128, 0.35);
  border-radius: var(--radius-xs);
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { scroll-margin-top: calc(84px - var(--section-gap)); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Scroll-reveal - scoped to .js so the page is fully visible without
   JavaScript; disabled under reduced motion */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease-calm), transform 0.55s var(--ease-calm);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .sync-art * { transition-delay: 0ms !important; animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 11px 22px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: var(--fw-semibold) var(--text-base)/1.2 var(--font-sans);
  white-space: nowrap;
  transition: background var(--dur) var(--ease-calm),
              border-color var(--dur) var(--ease-calm),
              transform var(--dur-fast) var(--ease-calm),
              box-shadow var(--dur) var(--ease-calm);
}
.btn:active { transform: scale(0.985); }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-strong); color: var(--on-primary); box-shadow: var(--shadow-md); }

.btn-quiet {
  background: var(--surface);
  color: var(--primary-strong);
  border-color: var(--line-strong);
}
.btn-quiet:hover { border-color: var(--primary); color: var(--primary-strong); }

.btn-on-dark {
  background: var(--paper);
  color: var(--primary-strong);
}
.btn-on-dark:hover { background: var(--surface); color: var(--primary-strong); }

/* ---------------- Header ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 246, 239, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-logo svg { height: 36px; width: auto; }
.nav-logo { display: inline-flex; align-items: center; border-radius: var(--radius-xs); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font: var(--fw-medium) var(--text-sm)/1 var(--font-sans);
}
.nav-links a {
  color: var(--ink-700);
  padding: 6px 2px;
  border-radius: var(--radius-xs);
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 2px; right: 100%; bottom: 0;
  height: 2px;
  background: var(--primary);
  border-radius: var(--radius-pill);
  transition: right var(--dur) var(--ease-calm);
}
.nav-links a:hover { color: var(--primary-strong); }
.nav-links a:hover::after { right: 2px; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 9px 18px; font-size: var(--text-sm); }

.nav-toggle {
  display: none;
  width: var(--tap-min);
  height: var(--tap-min);
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-700);
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 10px var(--gutter) 18px;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  padding: 12px 4px;
  color: var(--ink-700);
  font: var(--fw-medium) var(--text-base)/1.3 var(--font-sans);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-of-type { border-bottom: none; }

/* Floating section dock - shown on small viewports only (720px block) */
.mobile-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: none;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
.mobile-dock a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 54px;
  padding: 7px 8px 6px;
  border-radius: 999px;
  color: var(--ink-500);
  text-decoration: none;
  font: var(--fw-medium) 10.5px/1 var(--font-sans);
  letter-spacing: 0.01em;
}
.mobile-dock a svg { width: 20px; height: 20px; }
.mobile-dock a.active { color: var(--primary-strong); background: var(--primary-softer); }

/* ---------------- Hero ---------------- */

.hero { padding: clamp(44px, 7vw, 84px) 0 clamp(36px, 5vw, 64px); position: relative; overflow: clip; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font: var(--fw-semibold) var(--text-xs)/1 var(--font-sans);
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--primary);
}

.hero h1 {
  font: var(--fw-semibold) var(--m-display)/var(--lh-tight) var(--font-sans);
  letter-spacing: var(--ls-tight);
  color: var(--title-espresso);
  margin-bottom: 18px;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--primary-strong); }

.hero-voice {
  font: var(--fw-regular) clamp(1.15rem, 1.7vw, 1.3rem)/1.55 var(--font-serif);
  color: var(--ink-700);
  max-width: 34em;
  margin-bottom: 28px;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 26px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font: var(--fw-medium) var(--text-sm)/1.4 var(--font-sans);
  color: var(--ink-500);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--primary); flex: none; }

/* soft glow behind the demo - the one decorative liberty */
.hero-demo-wrap { position: relative; }
.hero-demo-wrap::before {
  content: "";
  position: absolute;
  inset: -8% -6%;
  background: radial-gradient(closest-side, rgba(220, 236, 232, 0.9), rgba(220, 236, 232, 0) 72%);
  z-index: 0;
  pointer-events: none;
}

/* ---------------- Chat demo (mirrors the app) ---------------- */

.demo {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  height: 800px;
  margin-left: auto;
  margin-right: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.demo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--line);
}
.demo-head svg { width: 26px; height: 26px; }
.demo-head .t { font: var(--fw-semibold) var(--text-base)/1 var(--font-logo); color: var(--primary-strong); }
.demo-titles { display: flex; flex-direction: column; gap: 3px; }
.demo-titles .ctx { font: var(--fw-medium) 11px/1 var(--font-sans); color: var(--ink-500); }
.demo-head .labs-chip { margin-left: auto; margin-bottom: 0; }
.demo-restart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-500);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.demo-head .demo-restart svg { width: 14px; height: 14px; }
.demo-restart:hover { color: var(--primary-strong); border-color: var(--primary); }
.demo-chip {
  margin-left: auto;
  font: var(--fw-medium) var(--text-xs)/1 var(--font-sans);
  color: var(--ink-500);
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
}

.demo-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
}

.msg { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.msg-row { display: flex; align-items: flex-end; gap: 10px; max-width: 100%; }
.msg.assistant .msg-row { flex-direction: row; }
.msg.user { align-items: flex-end; }
.msg.user .msg-row { flex-direction: row-reverse; }

.avatar {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--radius-md);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar svg { width: 36px; height: 36px; }

.bubble {
  max-width: 84%;
  text-wrap: pretty;
}
.msg.assistant .bubble {
  padding: 14px 16px;
  background: var(--surface);
  color: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
  font: var(--fw-regular) var(--text-base)/var(--lh-chat) var(--font-serif);
}
.msg.user .bubble {
  padding: 12px 15px;
  background: var(--primary-soft);
  color: #143A35;
  border-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xs);
  font: var(--fw-medium) var(--text-sm)/var(--lh-chat) var(--font-sans);
}

.bubble .value-chip {
  display: inline-flex;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  font: var(--fw-medium) var(--text-sm)/1.3 var(--font-mono);
}
.bubble .value-chip b { color: var(--attention-strong); font-weight: var(--fw-semibold); }
.bubble .value-chip .ref { font: var(--fw-regular) var(--text-xs)/1.2 var(--font-sans); color: var(--ink-500); }

.bubble .value-chip { margin-right: 6px; }
.bubble .after { display: block; margin-top: 10px; }

.bubble .mini-chart { margin-top: 10px; display: block; }
.bubble .mini-chart svg { width: 100%; height: auto; }

.bubble .prep-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* in-chat lab-report status card (mirrors the app's build_lab_report card) */
.report-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 11px 12px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.rc-icon {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-xs);
  background: var(--primary-softer);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.rc-icon svg { width: 18px; height: 18px; }
.rc-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-meta b { font: var(--fw-semibold) var(--text-xs)/1.3 var(--font-sans); color: var(--ink-900); }
.rc-meta span { font: var(--fw-regular) 11.5px/1.3 var(--font-sans); color: var(--ink-500); }
.rc-ready {
  margin-left: auto;
  flex: none;
  font: var(--fw-semibold) 11px/1 var(--font-sans);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--positive-soft);
  color: var(--positive-ink);
}

.msg .chrome {
  font: var(--fw-regular) var(--text-xs)/var(--lh-snug) var(--font-sans);
  color: var(--ink-500);
  max-width: 84%;
  padding-left: 42px;
  text-wrap: pretty;
}

.typing {
  display: inline-flex;
  gap: 5px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xs);
}
.typing span {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-400);
  animation: qpulse 1.1s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes qpulse {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.demo-suggest {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 16px 12px;
  flex: none;
  min-height: 164px;
}
.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-900);
  font: var(--fw-medium) var(--text-sm)/1.35 var(--font-sans);
  transition: border-color var(--dur) var(--ease-calm),
              transform var(--dur-fast) var(--ease-calm),
              box-shadow var(--dur) var(--ease-calm);
}
.choice:hover { border-color: var(--primary); box-shadow: var(--shadow-xs); transform: translateY(-1px); }
.choice:active { transform: scale(0.99); }
.choice .chev { color: var(--ink-400); font-weight: var(--fw-regular); }
.choice.cta {
  background: var(--primary-softer);
  border-color: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: var(--fw-semibold);
}
.choice.cta:hover { border-color: var(--primary); color: var(--primary-strong); }
.choice.cta .chev { color: var(--primary); }

.demo-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.demo-composer input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: var(--fw-regular) var(--text-sm)/1 var(--font-sans);
  color: var(--ink-900);
}
.demo-composer input::placeholder { color: var(--ink-400); }
.demo-composer input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(46, 142, 128, 0.2); }
.demo-send {
  width: 46px; height: 46px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease-calm), transform var(--dur-fast) var(--ease-calm);
}
.demo-send:hover { background: var(--primary-strong); }
.demo-send:active { transform: scale(0.96); }
.demo-send svg { width: 20px; height: 20px; color: #fff; }

.demo-note {
  text-align: center;
  font: var(--fw-regular) var(--text-xs)/1.4 var(--font-sans);
  color: var(--ink-500);
  padding: 0 16px 14px;
}

/* ---------------- Credibility strip ---------------- */

.cred {
  border-block: 1px solid var(--line);
  background: var(--primary-softer);
  padding: 32px 0;
}
.cred p {
  text-align: center;
  font: var(--fw-regular) var(--text-sm)/1.6 var(--font-sans);
  color: var(--ink-500);
  max-width: 56em;
  margin-inline: auto;
}
.cred strong { color: var(--ink-700); font-weight: var(--fw-semibold); }

/* ---------------- Section scaffolding ---------------- */

.section { padding: var(--section-gap) 0 0; }

.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
#founders .section-head { max-width: 1100px; }
#why .section-head { max-width: none; }
#why .section-title { white-space: nowrap; }
#features .section-head { max-width: none; }
#in-action .section-head { max-width: none; }
#privacy .section-head { max-width: none; }

#in-action .section-title { white-space: nowrap; }
.tour .section-head {
  grid-column: 1 / -1;
  margin-bottom: 16px;
  max-width: none;
}
.kicker {
  font: var(--fw-semibold) var(--text-xs)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--primary);
  margin-bottom: 12px;
}
.section-title {
  font: var(--fw-semibold) var(--m-title)/1.22 var(--font-sans);
  letter-spacing: var(--ls-tight);
  color: var(--title-espresso);
  text-wrap: balance;
  margin-bottom: 12px;
}
.section-lead {
  font: var(--fw-regular) var(--text-md)/var(--lh-body) var(--font-sans);
  color: var(--ink-700);
  text-wrap: pretty;
}

/* ---------------- Problem ---------------- */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.problem-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  box-shadow: var(--shadow-xs);
}
.problem-card .icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--primary-softer);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.problem-card .icon svg { width: 22px; height: 22px; }
.problem-card h3 {
  font: var(--fw-semibold) var(--text-lg)/var(--lh-snug) var(--font-sans);
  color: var(--ink-900);
  margin-bottom: 8px;
}
.problem-card p { font-size: var(--text-sm); color: var(--ink-700); }

.problem-bridge {
  margin-top: clamp(30px, 4vw, 44px);
  padding: 26px clamp(22px, 4vw, 40px);
  background: var(--primary-softer);
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-lg);
  font: var(--fw-regular) clamp(1.15rem, 1.8vw, 1.35rem)/1.55 var(--font-serif);
  color: var(--primary-strong);
  text-wrap: pretty;
}

/* ---------------- How it works ---------------- */

.tour-scroll {
  position: relative;
  background: var(--paper);
}

.tour-sticky {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 12px clamp(24px, 4vw, 56px);
  align-items: start;
  padding-block: 8px 20px;
  box-sizing: border-box;
  background: var(--paper);
}

.tour-steps { display: flex; flex-direction: column; gap: 4px; }
.tour-step {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  padding: 14px 20px 12px;
  border: none;
  border-left: 3px solid var(--line);
  transition: border-color var(--dur-slow) var(--ease-calm), background var(--dur-slow) var(--ease-calm), opacity var(--dur-slow) var(--ease-calm);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  opacity: 0.55;
  cursor: pointer;
}
.tour-step:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.tour-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.tour-step-top .n { margin-bottom: 0; }
.tour-step .labs-chip { margin-bottom: 0; flex: none; }
.tour-step .n {
  font: var(--fw-semibold) var(--text-xs)/1 var(--font-sans);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-500);
  display: block;
  margin-bottom: 6px;
}
.tour-step h3 {
  font: var(--fw-semibold) var(--text-xl)/var(--lh-snug) var(--font-sans);
  color: var(--ink-900);
  margin-bottom: 6px;
}
.tour-step p { font-size: var(--text-sm); color: var(--ink-700); }
.tour-step p + p { margin-top: 8px; }
.tour-step.active {
  opacity: 1;
  border-left-color: var(--primary);
  background: var(--surface-warm);
}
.tour-step.active .n { color: var(--primary); }

/* the stage - an app-frame that morphs through three states */
.tour-stage-wrap { position: relative; }
.tour-stage {
  position: relative;
  width: min(480px, 100%);
  margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-height: 560px;
}
.stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--line);
}
.stage-head svg { width: 24px; height: 24px; }
.stage-head .t { font: var(--fw-semibold) var(--text-sm)/1 var(--font-logo); color: var(--primary-strong); }
.stage-head .crumb {
  margin-left: auto;
  font: var(--fw-medium) var(--text-xs)/1 var(--font-sans);
  color: var(--ink-500);
  transition: opacity var(--dur-slow) var(--ease-calm);
}
.stage-head .stage-interact-chip {
  display: none;
  margin: 0 0 0 auto;
}
.tour[data-stage="2"] .stage-head .crumb { display: none; }
.tour[data-stage="2"] .stage-head .stage-interact-chip { display: inline-flex; }

.stage-layer {
  position: absolute;
  inset: 51px 0 0;
  padding: 18px 16px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-calm), transform 0.5s var(--ease-calm);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.tour[data-stage="1"] .stage-layer.l1,
.tour[data-stage="2"] .stage-layer.l2,
.tour[data-stage="3"] .stage-layer.l3 {
  opacity: 1;
  transform: none;
}

/* stage 1 - connect sources */
.source-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.45s var(--ease-calm), transform 0.45s var(--ease-calm);
}
.tour[data-stage="1"] .source-row { opacity: 1; transform: none; }
.tour[data-stage="1"] .source-row:nth-child(1) { transition-delay: 0.05s; }
.tour[data-stage="1"] .source-row:nth-child(2) { transition-delay: 0.16s; }
.tour[data-stage="1"] .source-row:nth-child(3) { transition-delay: 0.27s; }
.tour[data-stage="1"] .source-row:nth-child(4) { transition-delay: 0.38s; }
.tour[data-stage="1"] .source-row:nth-child(5) { transition-delay: 0.49s; }

.source-row .icon {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--primary-softer);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.source-row .icon svg { width: 20px; height: 20px; }
.source-row .meta { min-width: 0; }
.source-row .meta b { display: block; font: var(--fw-semibold) var(--text-sm)/1.3 var(--font-sans); color: var(--ink-900); }
.source-row .meta span { font: var(--fw-regular) var(--text-xs)/1.3 var(--font-sans); color: var(--ink-500); }

.pill {
  margin-left: auto;
  flex: none;
  font: var(--fw-semibold) var(--text-xs)/1 var(--font-sans);
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-500);
  position: relative;
  transition: background var(--dur-slow) var(--ease-calm), color var(--dur-slow) var(--ease-calm);
}
.pill::before { content: "Linking…"; }
.tour[data-stage="1"] .source-row.done .pill,
.tour[data-stage="2"] .pill, .tour[data-stage="3"] .pill {
  background: var(--positive-soft);
  color: var(--positive-ink);
}
.tour[data-stage="1"] .source-row.done .pill::before,
.tour[data-stage="2"] .pill::before, .tour[data-stage="3"] .pill::before { content: "Connected"; }

/* stage 2 - one record */
.profiles {
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-calm) 0.05s, transform 0.45s var(--ease-calm) 0.05s;
}
.tour[data-stage="2"] .profiles { opacity: 1; transform: none; }
.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font: var(--fw-medium) var(--text-xs)/1 var(--font-sans);
  color: var(--ink-700);
}
.stage-layer.l2 .profile-chip {
  appearance: none;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}
.stage-layer.l2 .profile-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.profile-chip.selected { background: var(--primary-soft); border-color: transparent; color: var(--primary-strong); }
.profile-chip .pfp {
  width: 22px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--fw-semibold) 10px/1 var(--font-sans);
}

.timeline { display: flex; flex-direction: column; gap: 8px; }
.tl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease-calm), transform 0.45s var(--ease-calm);
}
.tour[data-stage="2"] .tl-row { opacity: 1; transform: none; }
.tour[data-stage="2"] .tl-row:nth-child(2) { transition-delay: 0.12s; }
.tour[data-stage="2"] .tl-row:nth-child(3) { transition-delay: 0.22s; }
.tour[data-stage="2"] .tl-row:nth-child(4) { transition-delay: 0.32s; }
.tour[data-stage="2"] .tl-row:nth-child(5) { transition-delay: 0.42s; }

.tl-row .date {
  flex: none;
  font: var(--fw-medium) 11px/1.2 var(--font-mono);
  color: var(--ink-500);
  width: 58px;
}
.tl-row .what b { display: block; font: var(--fw-semibold) var(--text-sm)/1.3 var(--font-sans); color: var(--ink-900); }
.tl-row .what span { font: var(--fw-regular) var(--text-xs)/1.3 var(--font-sans); color: var(--ink-500); }
.tl-row .tag {
  margin-left: auto;
  flex: none;
  font: var(--fw-semibold) 11px/1 var(--font-sans);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}
.tag.lab { background: var(--primary-softer); color: var(--primary-strong); }
.tag.visit { background: var(--surface-sunken); color: var(--ink-700); }
.tag.med { background: var(--positive-soft); color: var(--positive-ink); }
.tag.attn { background: var(--attention-soft); color: var(--attention-ink); }

/* stage 3 - ask */
.stage-layer.l3 { gap: 14px; }
.stage-layer.l3 .msg { opacity: 0; transform: translateY(10px); transition: opacity 0.45s var(--ease-calm), transform 0.45s var(--ease-calm); }
.tour[data-stage="3"] .stage-layer.l3 .msg { opacity: 1; transform: none; }
.tour[data-stage="3"] .stage-layer.l3 .msg:nth-child(2) { transition-delay: 0.25s; }
.tour[data-stage="3"] .stage-layer.l3 .msg:nth-child(3) { transition-delay: 0.5s; }

/* ---------------- Features (bento) ---------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.bento-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dur) var(--ease-calm), box-shadow var(--dur) var(--ease-calm);
}
.bento-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bento-card h3 {
  font: var(--fw-semibold) var(--text-lg)/var(--lh-snug) var(--font-sans);
  color: var(--ink-900);
}
.bento-card p { font-size: var(--text-sm); color: var(--ink-700); }
.bento-card .art { margin-top: auto; padding-top: 14px; }

.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }

/* ---------------- See Qwery in action ---------------- */

.action-block {
  max-width: none;
  margin-top: clamp(12px, 2vw, 20px);
}
.action-block + .action-block {
  margin-top: clamp(48px, 7vw, 88px);
}
.action-block h3 {
  font: var(--fw-semibold) var(--m-title)/1.22 var(--font-sans);
  letter-spacing: var(--ls-tight);
  color: var(--title-espresso);
  margin-bottom: 12px;
}
.action-block .action-lead {
  font: var(--fw-medium) var(--text-lg)/var(--lh-snug) var(--font-sans);
  color: var(--ink-900);
  margin-bottom: 10px;
}
.action-block > p {
  font: var(--fw-regular) var(--text-md)/var(--lh-body) var(--font-sans);
  color: var(--ink-700);
  margin-bottom: 22px;
  text-wrap: pretty;
}
.action-tile {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 16px 16px 14px;
}

.recs-toolbar,
.labs-toolbar,
.rpt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px -4px 12px;
  padding: 4px;
  border-radius: 10px;
  cursor: pointer;
}
.recs-toolbar:hover,
.labs-toolbar:hover,
.rpt-toolbar:hover { background: var(--surface-sunken); }
.recs-toolbar:focus-visible,
.labs-toolbar:focus-visible,
.rpt-toolbar:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.recs-toolbar .labs-chip,
.labs-toolbar .labs-chip,
.rpt-toolbar .labs-chip { margin-bottom: 0; pointer-events: none; }
.recs-toggle-all,
.labs-toggle-all,
.rpt-toggle-all {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -6px -4px -6px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-400);
  pointer-events: none;
}
.recs-toggle-all svg,
.labs-toggle-all svg,
.rpt-toggle-all svg { width: 18px; height: 18px; }
.recs-toolbar:not(.is-open) .chev-open,
.labs-toolbar:not(.is-open) .chev-open,
.rpt-toolbar:not(.is-open) .chev-open { display: none; }
.recs-toolbar.is-open .chev-shut,
.labs-toolbar.is-open .chev-shut,
.rpt-toolbar.is-open .chev-shut { display: none; }

.recs-sec { margin-bottom: 18px; }
.recs-sec:last-child { margin-bottom: 0; }
.recs-sec:not(.is-open) .recs-card { display: none; }
.recs-sec:not(.is-open) .chev-open { display: none; }
.recs-sec.is-open .chev-shut { display: none; }
.recs-sec-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 4px 9px;
  cursor: pointer;
  border-radius: 8px;
}
.recs-sec-head:hover { background: var(--surface-sunken); }
.recs-sec-chev {
  color: var(--ink-400);
  display: inline-flex;
  flex: none;
}
.recs-sec-chev svg { width: 14px; height: 14px; }
.recs-sec-ico {
  color: var(--ink-400);
  display: inline-flex;
}
.recs-sec-ico svg { width: 16px; height: 16px; }
.recs-sec-title {
  font: var(--fw-semibold) 12px/1 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.recs-sec-n {
  font: var(--fw-medium) 12px/1 var(--font-mono);
  color: var(--ink-400);
}
.recs-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.recs-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 118px 112px 16px;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.recs-row:last-child { border-bottom: none; }
.recs-row:hover { background: var(--surface-warm); }
.recs-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recs-ico svg { width: 17px; height: 17px; }
.recs-main { min-width: 0; }
.recs-main b {
  display: block;
  font: var(--fw-medium) 15px/1.3 var(--font-sans);
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recs-main span {
  display: block;
  font: var(--fw-regular) 12.5px/1.35 var(--font-sans);
  color: var(--ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recs-viz { display: inline-flex; justify-content: flex-start; min-height: 16px; }
.recs-right {
  min-width: 0;
  text-align: right;
}
.recs-right strong {
  display: block;
  font: var(--fw-medium) 13px/1.25 var(--font-mono);
  color: var(--ink-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recs-right span {
  display: block;
  font: var(--fw-regular) 11.5px/1.3 var(--font-sans);
  color: var(--ink-400);
}
.recs-chev {
  color: var(--ink-400);
  display: inline-flex;
}
.recs-chev svg { width: 15px; height: 15px; }

.lab-chip-soft {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--primary-softer);
  border: 1px solid var(--primary-soft);
  font: var(--fw-semibold) 12px/1 var(--font-sans);
  color: var(--ink-700);
}
.src-note {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 16px;
}
.src-note-label {
  font: var(--fw-semibold) 10px/1 var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 10px;
}
.src-note-body {
  font: var(--fw-regular) 14.5px/1.55 var(--font-sans);
  color: var(--ink-800, var(--ink-700));
  white-space: pre-wrap;
  text-wrap: pretty;
}
.src-summary {
  padding: 12px 0 4px;
}
.src-summary .src-kicker { margin-bottom: 10px; display: block; }

.labs-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  margin-bottom: 12px;
  border-radius: var(--radius-pill);
  background: var(--primary-softer);
  color: var(--primary-strong);
  font: var(--fw-semibold) 11px/1 var(--font-sans);
  letter-spacing: 0.02em;
}

.labs-legend,
.labs-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 72px 120px minmax(88px, 132px) 100px;
  gap: 16px;
  align-items: center;
}
.labs-legend {
  padding: 2px 18px 9px;
}
.labs-legend span {
  font: var(--fw-semibold) 10px/1 var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.labs-legend .c { text-align: center; }

.labs-group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin-bottom: 16px;
}
.labs-group:last-child { margin-bottom: 0; }
.labs-group.is-attn { border-color: #EAD9AE; }

.labs-group-head {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 13px 16px 13px 18px;
  background: var(--surface-sunken);
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  color: inherit;
}
.labs-group.is-attn .labs-group-head {
  background: #FBF1DC;
  border-bottom-color: #EAD9AE;
}
.labs-group:not(.is-open) .labs-group-head { border-bottom: none; }
.labs-group:not(.is-open) .labs-group-body { display: none; }
.labs-group:not(.is-open) .chev-open { display: none; }
.labs-group.is-open .chev-shut { display: none; }

.labs-chev {
  color: var(--ink-400);
  display: inline-flex;
  flex: none;
}
.labs-group.is-attn .labs-chev { color: var(--attention-strong); }
.labs-chev svg { width: 18px; height: 18px; }

.labs-group-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--positive-soft);
  color: var(--positive-ink);
}
.labs-group-icon svg { width: 17px; height: 17px; }
.labs-group.is-attn .labs-group-icon {
  background: var(--attention-soft);
  color: var(--attention-ink);
}

.labs-group-title {
  font: var(--fw-semibold) 16.5px/1.2 var(--font-sans);
  color: var(--ink-900);
}
.labs-group-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.labs-count {
  font: var(--fw-medium) 13px/1 var(--font-sans);
  color: var(--ink-500);
}
.labs-group.is-attn .labs-count { color: var(--attention-strong); }

.labs-ask {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--on-primary);
  font: var(--fw-semibold) 13px/1 var(--font-sans);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.labs-ask svg { width: 15px; height: 15px; }
.labs-ask:hover { background: var(--primary-strong); }

.labs-row {
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.labs-row:hover { filter: brightness(0.985); }
.labs-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.labs-row:last-child { border-bottom: none; }
.labs-row.is-attn { background: #FCF7EA; }

.labs-marker {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}
.labs-marker .dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--positive);
  flex: none;
  margin-top: 6px;
}
.labs-row.is-attn .labs-marker .dot { background: var(--attention); }
.labs-marker b {
  display: block;
  font: var(--fw-semibold) 15.5px/1.25 var(--font-sans);
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.labs-marker span {
  display: block;
  font: var(--fw-regular) 12.5px/1.3 var(--font-sans);
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.labs-marker .span {
  font-size: 12px;
  color: var(--ink-400);
}

.labs-spark {
  display: flex;
  justify-content: center;
  align-items: center;
}
.labs-spark svg { display: block; overflow: visible; }

.labs-latest {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1;
}
.labs-latest strong {
  font: var(--fw-medium) 15.5px/1.1 var(--font-mono);
  color: var(--ink-900);
  white-space: nowrap;
}
.labs-row.is-attn .labs-latest strong { color: var(--attention-strong); }
.labs-latest small {
  font: var(--fw-regular) 11px var(--font-sans);
  color: var(--ink-400);
  margin-left: 4px;
}
.labs-latest span {
  font: var(--fw-regular) 11.5px var(--font-mono);
  color: var(--ink-400);
}

.labs-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 7px;
  position: relative;
  border-radius: 99px;
  background: var(--surface-sunken);
}
.labs-bar .band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: var(--primary-soft);
}
.labs-bar.is-out .band { background: rgba(14, 107, 94, 0.14); }
.labs-bar .pip {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 99px;
  background: var(--primary);
  border: 2px solid var(--surface);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-xs);
}
.labs-bar.is-out .pip { background: var(--attention); }

.labs-date {
  font: var(--fw-regular) 13px/1.3 var(--font-sans);
  color: var(--ink-500);
  white-space: nowrap;
}

.lab-modal[hidden] { display: none; }
.lab-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.lab-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35, 32, 27, 0.42);
}
.lab-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1.5px solid var(--primary);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}
.lab-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-700);
  cursor: pointer;
  z-index: 2;
}
.lab-modal-close svg { width: 16px; height: 16px; }
.lab-modal-close:hover { background: var(--line); }
.lab-modal-body {
  padding: 22px 24px 24px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lab-detail-top {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: stretch;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.lab-detail-left {
  flex: 1 1 360px;
  min-width: 300px;
}
.lab-detail-id {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.lab-detail-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.lab-detail-icon.is-out {
  background: var(--attention-soft);
  color: var(--attention-strong);
}
.lab-detail-icon svg { width: 24px; height: 24px; }
.lab-detail-id h3 {
  font: var(--fw-semibold) 23px/1.15 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 7px;
}
.lab-detail-clinical {
  font: var(--fw-regular) 14px/1.4 var(--font-sans);
  color: var(--ink-500);
  margin-bottom: 8px;
}
.lab-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-700);
  font: var(--fw-semibold) 12px/1 var(--font-sans);
}
.lab-chip svg { width: 13px; height: 13px; }
.lab-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font: var(--fw-semibold) 13px/1 var(--font-sans);
  white-space: nowrap;
}
.lab-status .dot { width: 7px; height: 7px; border-radius: 99px; }
.lab-status.is-out { background: var(--attention-soft); color: var(--attention-ink); }
.lab-status.is-out .dot { background: var(--attention); }
.lab-status.is-in { background: var(--positive-soft); color: var(--positive-ink); }
.lab-status.is-in .dot { background: var(--positive); }
.lab-detail-collected {
  font: var(--fw-medium) 13px/1.3 var(--font-sans);
  color: var(--ink-500);
  margin-bottom: 6px;
}
.lab-detail-desc {
  font: var(--fw-regular) 14px/1.5 var(--font-sans);
  color: var(--ink-500);
}

.lab-detail-metric {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}
.lab-detail-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: var(--fw-semibold) 40px/1 var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.lab-detail-value.is-out { color: var(--attention-strong); }
.lab-detail-value small {
  font: var(--fw-medium) 17px var(--font-mono);
  color: var(--ink-400);
}
.lab-detail-barwrap {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
  padding-bottom: 4px;
}
.lab-detail-barwrap .labs-bar {
  height: 8px;
  width: 100%;
  margin-bottom: 6px;
}
.lab-detail-range {
  display: flex;
  justify-content: space-between;
  font: var(--fw-regular) 12px/1 var(--font-sans);
  color: var(--ink-500);
}

.lab-detail-chart {
  flex: 1 1 340px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lab-detail-chart svg { width: 100%; height: auto; display: block; }

.lab-detail-panes {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.lab-detail-panes .lab-tl {
  flex: 1 1 300px;
  min-width: 260px;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
.lab-tl {
  position: relative;
  padding: 4px 0 2px 22px;
}
.lab-tl::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 12px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}
.lab-tl-item {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 7px 10px 7px 14px;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.lab-tl-item::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 13px;
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--surface);
  border: 2px solid var(--primary);
}
.lab-tl-item.is-focus { background: var(--primary-softer); }
.lab-tl-item.is-focus::before { background: var(--primary); }
.lab-tl-item.is-out::before { border-color: var(--attention); }
.lab-tl-item.is-focus.is-out::before { background: var(--attention); }
.lab-tl-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.lab-tl-date {
  font: var(--fw-medium) 12.5px/1 var(--font-mono);
  color: var(--ink-500);
  flex: none;
}
.lab-tl-name {
  font: var(--fw-medium) 14px/1.35 var(--font-sans);
  color: var(--ink-900);
}
.lab-tl-sub {
  display: block;
  font: var(--fw-regular) 12.5px/1.4 var(--font-sans);
  color: var(--ink-500);
  margin-top: 2px;
}

.lab-prov {
  flex: 1 1 380px;
  min-width: 300px;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  height: fit-content;
  max-height: 100%;
}
.lab-prov-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  font: var(--fw-semibold) 12px/1 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.lab-prov-head svg { width: 15px; height: 15px; color: var(--primary); flex: none; }
.lab-prov-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  color: inherit;
}
.lab-prov-row + .lab-prov-row { border-top: 1px solid var(--line); }
.lab-prov-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-sunken);
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.lab-prov-ico svg { width: 18px; height: 18px; }
.lab-prov-row.is-link {
  margin: 0 -8px;
  padding: 11px 8px;
  border-radius: 12px;
  cursor: pointer;
}
.lab-prov-row.is-link:hover { background: var(--primary-softer); }
.lab-prov-row.is-link .lab-prov-ico {
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.lab-prov-title {
  font: var(--fw-medium) 14.5px/1.35 var(--font-sans);
  color: var(--ink-900);
}
.lab-prov-sub {
  font: var(--fw-regular) 13px/1.4 var(--font-sans);
  color: var(--ink-500);
  margin-top: 2px;
}
.lab-prov-row.is-link .lab-prov-sub {
  font: var(--fw-semibold) 12.5px/1.4 var(--font-sans);
  color: var(--primary-strong);
}

.lab-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  flex: none;
}
.lab-detail-ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--on-primary);
  font: var(--fw-semibold) var(--text-base)/1 var(--font-sans);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.lab-detail-ask:hover { background: var(--primary-strong); }
.lab-detail-ask svg { width: 18px; height: 18px; }

.lab-tl-item:hover:not(.is-focus) { background: var(--surface-sunken); }

/* ---------------- Source report modal (mirrors the app facsimile) ---------------- */

.src-modal[hidden],
.ask-modal[hidden] { display: none; }
.src-modal,
.ask-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.src-modal-backdrop,
.ask-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35, 32, 27, 0.46);
}
.src-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(984px, 100%);
  max-height: 88%;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.src-modal-head,
.ask-modal-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}
.src-modal-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-sunken);
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.src-modal-mark svg { width: 19px; height: 19px; }
.src-modal-titles,
.ask-modal-titles { min-width: 0; flex: 1; }
.src-modal-titles > div:first-child,
.ask-modal-titles > div:first-child {
  font: var(--fw-semibold) 16px/1.2 var(--font-sans);
  color: var(--ink-900);
}
.src-modal-titles > div:last-child,
.ask-modal-titles > div:last-child {
  font: var(--fw-regular) 13px/1.35 var(--font-sans);
  color: var(--ink-500);
  margin-top: 1px;
}
.src-modal-close,
.ask-modal-close {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-500);
  border-radius: 10px;
  cursor: pointer;
}
.src-modal-close svg,
.ask-modal-close svg { width: 18px; height: 18px; }
.src-modal-close:hover,
.ask-modal-close:hover { background: var(--surface-sunken); }
.src-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 22px;
}
.src-facsimile {
  max-width: 840px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 30px 32px;
  width: 100%;
}
.src-letterhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink-900);
}
.src-org {
  font: var(--fw-semibold) 19px/1.25 var(--font-serif);
  color: var(--ink-900);
}
.src-final {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--positive-soft);
  color: var(--positive-ink);
  font: var(--fw-semibold) 12px/1 var(--font-sans);
  flex: none;
}
.src-final svg { width: 13px; height: 13px; }
.src-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
  padding: 16px 0;
}
.src-meta-item { min-width: 0; }
.src-kicker {
  font: var(--fw-semibold) 10px/1 var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.src-meta-item .src-kicker { margin-bottom: 3px; }
.src-meta-val {
  font: var(--fw-regular) 13.5px/1.35 var(--font-sans);
  color: var(--ink-900);
  overflow-wrap: anywhere;
}
.src-table-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0 8px;
}
.src-table-title {
  font: var(--fw-semibold) 15.5px/1.3 var(--font-sans);
  color: var(--ink-900);
  min-width: 0;
}
.src-table-count {
  font: var(--fw-regular) 13px/1.35 var(--font-sans);
  color: var(--ink-500);
  flex: none;
}
.src-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 70px 150px 76px;
  gap: 0 10px;
  align-items: baseline;
}
.src-cols {
  padding: 7px 0;
}
.src-cols span {
  font: var(--fw-semibold) 10px/1 var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.src-row {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.src-row.is-flag { background: #FCF7EA; }
.src-row.is-anchor { box-shadow: inset 3px 0 0 var(--primary); }
.src-name {
  font: var(--fw-medium) 14px/1.35 var(--font-sans);
  color: var(--ink-900);
  overflow-wrap: anywhere;
}
.src-val {
  font: var(--fw-regular) 13.5px/1.35 var(--font-mono);
  color: var(--ink-900);
  overflow-wrap: anywhere;
}
.src-row.is-flag .src-val { font-weight: var(--fw-semibold); color: var(--attention-strong); }
.src-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--fw-semibold) 13px/1.35 var(--font-sans);
  color: var(--attention-ink);
}
.src-flag .dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--attention);
  flex: none;
}
.src-flag-none {
  font: var(--fw-regular) 13px/1.35 var(--font-sans);
  color: var(--ink-400);
}
.src-range,
.src-unit {
  font: var(--fw-regular) 13px/1.35 var(--font-mono);
  color: var(--ink-700);
}
.src-legend {
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 12px;
  font: var(--fw-regular) 11.5px/1.5 var(--font-sans);
  color: var(--ink-500);
}
.src-fhir {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 12px;
}
.src-fhir-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-900);
  flex: none;
}
.src-fhir-toggle .src-kicker { color: var(--ink-400); }
.src-fhir-toggle svg {
  width: 18px;
  height: 18px;
  color: var(--ink-500);
  flex: none;
  transition: transform var(--dur) var(--ease-calm);
}
.src-fhir.is-open .src-fhir-toggle svg { transform: rotate(180deg); }
.src-fhir-json {
  display: none;
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-warm);
  font: var(--fw-regular) 12px/1.5 var(--font-mono);
  color: var(--ink-700);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.src-fhir.is-open .src-fhir-json {
  display: block;
}

/* ---------------- Ask-about chat modal ---------------- */

.ask-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ask-modal-head .avatar { width: 36px; height: 36px; }
.ask-modal-head .avatar svg { width: 36px; height: 36px; }
.ask-modal-head .demo-chip { margin-left: 0; }
.ask-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
}
.ask-modal-composer {
  display: flex;
  gap: 8px;
  padding: 10px 14px 8px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}
.ask-modal-composer input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  font: var(--fw-regular) var(--text-sm)/1 var(--font-sans);
  color: var(--ink-900);
}
.ask-modal-composer input::placeholder { color: var(--ink-400); }
.ask-modal-composer input:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px rgba(46, 142, 128, 0.2);
}
.ask-modal-note {
  font: var(--fw-regular) 12px/1.4 var(--font-sans);
  color: var(--ink-400);
  padding: 0 16px 12px;
  background: var(--surface);
}
.bubble .value-chip.is-ok b { color: var(--primary-strong); }
.ask-modal .msg.assistant .bubble { max-width: 92%; }
.ask-modal .msg.user .bubble { max-width: 88%; }

body.lab-modal-open { overflow: hidden; }

/* trend chart card - the line draws itself on reveal */
.trend-chart svg { width: 100%; height: auto; }
.js .trend-chart .line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .bento-card.is-in .trend-chart .line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease-calm) 0.25s;
}
.trend-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--fw-medium) var(--text-xs)/1.3 var(--font-sans);
  color: var(--ink-500);
  margin-top: 8px;
  flex-wrap: wrap;
}
.pill-attn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--attention-soft);
  color: var(--attention-ink);
  font: var(--fw-semibold) var(--text-xs)/1 var(--font-sans);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}
.pill-attn .dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--attention); }

/* family card */
.family-art { display: flex; flex-direction: column; gap: 8px; }
.family-art .profile-chip { align-self: flex-start; padding: 8px 14px 8px 9px; }
.family-art .profile-chip.add {
  padding: 8px 14px;
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--ink-500);
  background: transparent;
}

/* appointment prep card */
.prep-list { display: flex; flex-direction: column; gap: 8px; }
.prep-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: var(--fw-regular) var(--text-xs)/1.45 var(--font-serif);
  color: var(--ink-700);
}
.prep-item svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--positive); }

/* connector card */
.connector-art {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.connector-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--fw-semibold) var(--text-xs)/1.2 var(--font-sans);
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.connector-node svg { width: 18px; height: 18px; }
.connector-flow {
  flex: 1;
  min-width: 24px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--primary-soft) 0 8px, transparent 8px 14px);
  position: relative;
  overflow: visible;
}
.connector-flow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  transform: translateY(-50%);
  animation: flow 2.6s var(--ease-calm) infinite;
}
@keyframes flow {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}
.connector-badge {
  font: var(--fw-medium) var(--text-xs)/1.3 var(--font-sans);
  color: var(--positive-ink);
  background: var(--positive-soft);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  align-self: flex-start;
}

/* ---------------- Privacy (deep spruce band) ---------------- */

.privacy {
  margin-top: var(--section-gap);
  background: var(--primary-strong);
  padding: var(--section-gap) 0;
}
.privacy .kicker { color: var(--title-mint); }
.privacy .section-title { color: var(--title-cream); }
.privacy .section-head { max-width: none; }
.privacy .section-lead { color: rgba(250, 246, 239, 0.78); }

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.privacy-card {
  background: rgba(250, 246, 239, 0.07);
  border: 1px solid rgba(250, 246, 239, 0.16);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
}
.privacy-card svg { width: 24px; height: 24px; color: var(--title-mint); margin-bottom: 14px; }
.privacy-card h3 {
  font: var(--fw-semibold) var(--text-base)/var(--lh-snug) var(--font-sans);
  color: var(--title-cream);
  margin-bottom: 6px;
}
.privacy-card p { font-size: var(--text-sm); color: rgba(250, 246, 239, 0.75); }

.privacy-foot {
  margin-top: 26px;
  font: var(--fw-regular) var(--text-sm)/1.6 var(--font-sans);
  color: rgba(250, 246, 239, 0.62);
  max-width: 62em;
}

/* ---------------- Partners ---------------- */

.partners-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.partners-title-row .section-title {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.partners-title-row .btn { flex: none; }

/* ---------------- Founders ---------------- */

.founder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: flex-start;
  max-width: 900px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.founder:first-of-type { border-top: none; padding-top: 0; }

.founder-avatar {
  width: 96px; height: 96px; flex: none;
  object-fit: cover;
  border: 3px solid var(--surface);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--fw-semibold) var(--text-lg)/1 var(--font-sans);
  box-shadow: var(--shadow-sm);
}

.founder-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.founder-name h3 { font: var(--fw-semibold) var(--text-lg)/1.3 var(--font-sans); color: var(--ink-900); }
.founder-name a { display: inline-flex; border-radius: var(--radius-xs); }
.founder-name svg { width: 18px; height: 18px; color: var(--primary); }
.founder-name a:hover svg { color: var(--primary-strong); }

.founder-meta {
  font: var(--fw-medium) var(--text-xs)/1.4 var(--font-sans);
  color: var(--ink-500);
  margin: 3px 0 12px;
}
.founder p { font-size: var(--text-sm); color: var(--ink-700); margin-bottom: 10px; text-wrap: pretty; }
.founder p:last-child { margin-bottom: 0; }
.founder .conviction {
  font: var(--fw-regular) var(--text-base)/1.55 var(--font-serif);
  color: var(--primary-strong);
}

/* ---------------- Waitlist ---------------- */

.waitlist { padding-bottom: clamp(64px, 9vw, 120px); }
.waitlist-card {
  margin-inline: auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-xl);
  padding: clamp(22px, 3vw, 32px) clamp(22px, 5vw, 56px);
  box-shadow: var(--shadow-md);
}
.waitlist-card .mark { width: 36px; height: 36px; flex: none; }
.waitlist-card h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: var(--fw-semibold) var(--m-title)/1.2 var(--font-sans);
  letter-spacing: var(--ls-tight);
  color: var(--title-espresso);
  margin-bottom: 10px;
  text-wrap: balance;
}
.waitlist-card > p {
  color: var(--ink-700);
  max-width: 46em;
  margin: 0 auto 16px;
  font-size: var(--text-base);
}

.waitlist-cta {
  display: flex;
  justify-content: center;
  /* Matches the gap above the button; the status line used to supply it. */
  margin-bottom: 16px;
}

.waitlist-note {
  margin-top: 6px;
  font: var(--fw-regular) var(--text-xs)/1.5 var(--font-sans);
  color: var(--ink-500);
}
.waitlist-note a { font-weight: var(--fw-medium); }

/* ---------------- Footer ---------------- */

footer {
  background: var(--primary-strong);
  color: rgba(250, 246, 239, 0.78);
  padding: clamp(40px, 5vw, 64px) 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(250, 246, 239, 0.16);
}
.footer-brand svg { height: 40px; width: auto; margin-bottom: 14px; }
.footer-brand p { font: var(--fw-regular) var(--text-sm)/1.6 var(--font-sans); max-width: 34em; }

.footer-links {
  display: flex;
  gap: clamp(28px, 3.5vw, 48px);
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.footer-col { min-width: 0; }
.footer-col h4 {
  font: var(--fw-semibold) var(--text-xs)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--title-mint);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  color: rgba(250, 246, 239, 0.78);
  font: var(--fw-regular) var(--text-sm)/1.5 var(--font-sans);
  padding: 4px 0;
}
.footer-col a:hover { color: var(--title-cream); }

.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  font: var(--fw-regular) var(--text-xs)/1.5 var(--font-sans);
  color: rgba(250, 246, 239, 0.55);
}

/* ---------------- Lab report mock ---------------- */

.rpt-mock:not(.is-open) .rpt-expand { display: none; }
.rpt-header { margin-bottom: 0; }
.rpt-mock.is-open .rpt-header { margin-bottom: 20px; }
.rpt-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.rpt-logo {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  overflow: hidden;
  display: inline-flex;
  flex: none;
}
.rpt-logo svg { width: 52px; height: 52px; display: block; }
.rpt-title {
  flex: 1;
  min-width: 0;
  font: var(--fw-bold) 1.45rem/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--primary-strong);
}
.rpt-subrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 0 66px;
}
.rpt-subtitle {
  font: var(--fw-regular) 0.95rem/1.35 var(--font-sans);
  color: var(--ink-500);
}
.rpt-attr {
  font: var(--fw-regular) 0.85rem/1.35 var(--font-sans);
  color: var(--ink-500);
  margin-top: 2px;
}
.rpt-dot { padding: 0 8px; }
.rpt-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: none;
}
.rpt-meta-fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  font: var(--fw-regular) 0.9rem/1.35 var(--font-sans);
  color: var(--ink-500);
}
.rpt-meta-fields strong { color: var(--ink-900); font-weight: var(--fw-semibold); }
.rpt-sep { padding: 0 10px; color: var(--ink-400); }
.rpt-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font: var(--fw-medium) 0.85rem/1 var(--font-sans);
  color: var(--primary-strong);
}
.rpt-print svg { width: 18px; height: 18px; }
.rpt-print:hover { background: var(--primary-soft); border-color: var(--primary); }
.rpt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}
.rpt-card > h2 {
  font: var(--fw-semibold) 1.1rem/1.3 var(--font-sans);
  color: var(--ink-900);
  margin: 0 0 12px;
}
.rpt-card > p,
.rpt-card .rpt-footnote { margin: 0; }
.rpt-h-ico { display: flex; align-items: center; gap: 10px; }
.rpt-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rpt-ico-bg, var(--primary-soft));
  color: var(--rpt-ico-fg, var(--primary));
  flex: none;
}
.rpt-ico svg { width: 1em; height: 1em; }
.rpt-ico-xs { width: 28px; height: 28px; font-size: 14px; }
.rpt-ico-sm { width: 36px; height: 36px; font-size: 18px; }
.rpt-ico-md { width: 44px; height: 44px; font-size: 22px; }
.rpt-ico-lg { width: 48px; height: 48px; font-size: 26px; }
.rpt-summary-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  margin-bottom: 16px;
}
.rpt-summary-row > .rpt-card { margin-bottom: 0; }
.rpt-imp { border-left: 4px solid var(--line); }
.rpt-imp.imp-mixed { border-left-color: var(--attention); }
.rpt-imp-body { text-align: center; }
.rpt-imp-body p {
  margin: 0;
  font: var(--fw-regular) 0.92rem/1.45 var(--font-sans);
  color: var(--ink-500);
}
.rpt-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font: var(--fw-semibold) 0.9rem/1 var(--font-sans);
  margin: 8px 0;
}
.rpt-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: currentColor;
}
.rpt-pill.imp-mixed { background: var(--attention-soft); color: var(--attention-ink); }
.rpt-kfs,
.rpt-discs { display: flex; gap: 12px; }
.rpt-kf,
.rpt-disc {
  flex: 1 1 0;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  font: var(--fw-regular) 0.9rem/1.45 var(--font-sans);
  color: var(--ink-900);
}
.rpt-kf { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.rpt-disc { display: flex; align-items: flex-start; gap: 10px; }
.rpt-link { cursor: pointer; border-width: 2px; }
.rpt-kf.rpt-link:hover,
.rpt-disc.rpt-link:hover { border-color: var(--primary); }
.rpt-abns { display: flex; flex-direction: column; gap: 12px; }
.rpt-abn {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 220px 148px;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.rpt-abn.rpt-link {
  border-width: 2px;
  border-left-width: 4px;
  cursor: pointer;
}
.rpt-abn.rpt-link:hover {
  border-top-color: var(--primary);
  border-right-color: var(--primary);
  border-bottom-color: var(--primary);
}
.rpt-abn-ico {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 12px;
}
.rpt-abn-body { min-width: 0; padding: 16px; }
.rpt-abn-body h3 {
  font: var(--fw-semibold) 1.05rem/1.3 var(--font-sans);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rpt-ab-label {
  font: var(--fw-semibold) 0.8rem/1.3 var(--font-sans);
  color: var(--ink-500);
  margin-top: 10px;
}
.rpt-ab-label:first-of-type { margin-top: 0; }
.rpt-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--fw-semibold) 0.75rem/1 var(--font-sans);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--attention-soft);
  color: var(--attention-ink);
}
.rpt-flag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--attention);
}
.rpt-abn-chart { padding: 16px 0; min-width: 0; }
.rpt-chart-label {
  font: var(--fw-semibold) 0.8rem/1.3 var(--font-sans);
  color: var(--ink-500);
  margin-bottom: 4px;
}
.rpt-chart svg { display: block; width: 100%; height: 100px; }
.rpt-chart .axis { font: 9px/1 var(--font-sans); fill: var(--ink-500); }
.rpt-abn-sig {
  padding: 16px 16px 16px 0;
  font: var(--fw-regular) 0.88rem/1.4 var(--font-sans);
  color: var(--ink-700);
  border-left: 1px solid var(--line);
  margin: 16px 0;
  padding-left: 12px;
}
.rpt-sig-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--fw-semibold) 0.8rem/1 var(--font-sans);
  color: var(--ink-500);
  margin-bottom: 6px;
  white-space: nowrap;
}
.rpt-footnote {
  color: var(--ink-500);
  font: var(--fw-regular) 0.88rem/1.4 var(--font-sans);
  margin: 0 0 16px !important;
}
.rpt-cat h4 {
  font: var(--fw-semibold) 1rem/1.3 var(--font-sans);
  margin: 20px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rpt-cat:first-of-type h4 { margin-top: 0; }
.rpt-table-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: auto;
  max-width: 100%;
  margin-bottom: 8px;
}
.rpt-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font: var(--fw-regular) 0.84rem/1.35 var(--font-sans);
}
.rpt-table th,
.rpt-table td {
  text-align: left;
  padding: 7px 5px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.rpt-table th {
  background: var(--surface-warm);
  font: var(--fw-semibold) 0.8rem/1.25 var(--font-sans);
  color: var(--ink-500);
}
.rpt-table td:nth-child(2) {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
}
.rpt-table tr.is-abn td {
  font-weight: var(--fw-semibold);
  color: var(--attention-strong);
  background: #FCF7EA;
}
.rpt-table tr.rpt-link { cursor: pointer; }
.rpt-table tr.is-abn.rpt-link td:first-child { box-shadow: inset 3px 0 0 var(--attention); }
.rpt-table tr.rpt-link:hover td { background: var(--primary-soft); }
.rpt-table tr.is-abn.rpt-link:hover td { background: #FBF1DC; }
.rpt-foot {
  background: var(--primary-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 8px;
  font: var(--fw-regular) 0.85rem/1.45 var(--font-sans);
  color: var(--ink-500);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.rpt-foot p { margin: 0 0 8px; }
.rpt-foot p:last-child { margin: 0; }
.rpt-modal[hidden] { display: none; }
.rpt-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.rpt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35, 32, 27, 0.45);
}
.rpt-modal-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: 90vh;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rpt-modal-header {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px 6px;
  flex: none;
}
.rpt-modal-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-900);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.rpt-modal-close:hover { background: var(--primary-soft); }
.rpt-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px 24px;
}
.rpt-modal-body .rpt-card:last-child { margin-bottom: 0; }
.rpt-modal-body .rpt-link { cursor: default; border-width: 1px; }
.rpt-modal-body .rpt-abn.rpt-link { border-left-width: 4px; }
.rpt-modal-body .rpt-table tr.rpt-link { cursor: default; }
.rpt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- Responsive ---------------- */

/* ---------------- Why: portals sync into one record ---------------- */

.sync-art {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(70px, 120px) minmax(0, 1fr);
  align-items: stretch;
  max-width: 1040px;
  margin: 44px auto 0;
}
.sync-portals,
.sync-flows {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.sync-win {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0.55;
}
.sync-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 26px;
  padding: 0 10px;
  background: var(--surface-sunken);
}
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.sync-name { font: var(--fw-medium) 12px/1.2 var(--font-sans); color: var(--ink-500); margin-left: 4px; }
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font: var(--fw-semibold) 10.5px/1 var(--font-sans);
  color: var(--positive-ink);
  background: var(--positive-soft);
  border-radius: var(--radius-pill);
  padding: 4px 7px;
}
.sync-frag {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font: var(--fw-regular) 12px/1.4 var(--font-mono);
  color: var(--ink-500);
}
.sync-cell { display: flex; align-items: center; padding: 0 8px; }
.sync-flow {
  width: 100%;
  height: 2px;
  opacity: 0.3;
  background-image: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 12px);
}
.sync-record {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.sync-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--line);
}
.sync-head .t { font: var(--fw-semibold) 14px/1 var(--font-sans); color: var(--primary-strong); }
.sync-pill {
  margin-left: auto;
  font: var(--fw-medium) 11px/1 var(--font-sans);
  color: var(--primary-strong);
  background: var(--primary-softer);
  border-radius: var(--radius-pill);
  padding: 5px 9px;
}
.sync-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--surface-sunken);
}
.sync-row svg { flex: none; }
.sync-row .lbl { font: var(--fw-medium) 14px/1.2 var(--font-sans); color: var(--ink-900); }
.sync-flag {
  font: var(--fw-medium) 10.5px/1 var(--font-sans);
  color: var(--attention-ink);
  background: var(--attention-soft);
  border-radius: var(--radius-pill);
  padding: 4px 7px;
}
.sync-count { margin-left: auto; font: var(--fw-regular) 13px/1.2 var(--font-mono); color: var(--ink-500); }
.sync-foot { padding: 12px 16px 14px; }
.sync-voice {
  font: var(--fw-regular) 15px/1.55 var(--font-serif);
  color: var(--ink-900);
  background: var(--primary-softer);
  border-radius: var(--radius-md);
  padding: 11px 13px;
}
.sync-chrome {
  margin-top: 8px;
  font: var(--fw-regular) 11.5px/1.4 var(--font-sans);
  color: var(--ink-400);
}

/* Starts on scroll via the shared reveal observer, then cycles forever:
   each element plays in over the first 8% of a 9s loop (staggered by its
   --sd delay), holds settled through 92%, and gently rewinds so the next
   pass restarts clean. Base styles above are the settled end state (what
   no-JS and reduced-motion visitors see); the :not(.is-in) states only
   hold before the observer fires. */
.js .sync-art:not(.is-in) .sync-win { opacity: 1; }
.js .sync-art:not(.is-in) .sync-badge,
.js .sync-art:not(.is-in) .sync-chrome { opacity: 0; }
.js .sync-art:not(.is-in) .sync-row,
.js .sync-art:not(.is-in) .sync-voice { opacity: 0; transform: translateY(6px); }
.sync-art.is-in .sync-win { animation: sync-win-cycle 9s var(--ease-calm) var(--sd, 0ms) infinite both; }
.sync-art.is-in .sync-badge { animation: sync-fade-cycle 9s var(--ease-calm) var(--sd, 0ms) infinite both; }
.sync-art.is-in .sync-row { animation: sync-rise-cycle 9s var(--ease-calm) var(--sd, 0ms) infinite both; }
.sync-art.is-in .sync-voice { animation: sync-rise-cycle 9s var(--ease-calm) 2600ms infinite both; }
.sync-art.is-in .sync-chrome { animation: sync-fade-cycle 9s var(--ease-calm) 3000ms infinite both; }
.sync-art.is-in .sync-flow {
  animation:
    sync-march 0.9s linear infinite,
    sync-pulse 9s var(--ease-calm) var(--sd, 0ms) infinite both;
}
@keyframes sync-win-cycle {
  0% { opacity: 1; }
  8%, 92% { opacity: 0.55; }
  100% { opacity: 1; }
}
@keyframes sync-fade-cycle {
  0% { opacity: 0; }
  8%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes sync-rise-cycle {
  0% { opacity: 0; transform: translateY(6px); }
  8%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(6px); }
}
@keyframes sync-march { to { background-position: 24px 0; } }
@keyframes sync-pulse {
  0% { opacity: 0.3; }
  3% { opacity: 1; }
  10%, 100% { opacity: 0.3; }
}

@media (max-width: 980px) {
  .sync-art { grid-template-columns: minmax(200px, 230px) 52px minmax(0, 1fr); }

  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .demo { margin-inline: auto; height: 640px; }
  .demo-scroll { height: auto; }
  #why .section-title { white-space: normal; }
  #in-action .section-title { white-space: normal; }

  .tour-sticky {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px 18px;
    align-content: start;
    align-items: start;
  }
  .tour-sticky .section-head { margin-bottom: 8px; }
  .tour-steps { flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .tour-step { flex: 1 0 210px; width: auto; border-left: none; border-top: 3px solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 12px 14px; }
  .tour-step.active { border-left-color: transparent; border-top-color: var(--primary); }
  .tour-step p { display: none; }

  .problem-grid { grid-template-columns: minmax(0, 1fr); }
  .col-7, .col-6, .col-5 { grid-column: span 12; }
  .privacy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .labs-legend span:nth-child(5),
  .labs-date { display: none; }
  .labs-legend,
  .labs-row {
    grid-template-columns: minmax(0, 1.35fr) 64px 110px minmax(72px, 1fr);
  }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-links { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .nav-links, .nav-cta .btn-quiet { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-dock { display: flex; }
  /* keep page content clear of the fixed dock */
  body { padding-bottom: 84px; }

  .sync-art { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
  .sync-flows { display: none; }
  .sync-portals { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 10px; }
  .sync-dot { display: none; }
  .sync-bar { height: auto; min-height: 26px; padding: 5px 10px; }
  .sync-name { margin-left: 0; line-height: 1.25; }

  .hero { padding-top: 28px; }
  .hero h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
  .hero-actions .btn { width: 100%; }

  .privacy-grid { grid-template-columns: minmax(0, 1fr); }
  .waitlist-cta .btn { width: 100%; }
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder-avatar { width: 80px; height: 80px; }

  .labs-legend,
  .labs-row {
    grid-template-columns: minmax(0, 1fr) 108px;
  }
  .labs-legend span:nth-child(2),
  .labs-legend span:nth-child(4),
  .labs-legend span:nth-child(5),
  .labs-spark,
  .labs-bar,
  .labs-date { display: none; }
  .labs-group-meta { flex-wrap: wrap; justify-content: flex-end; }
  .labs-group-title { font-size: 15px; }
  .lab-modal,
  .src-modal,
  .ask-modal,
  .rpt-modal { padding: 12px; }
  .rpt-summary-row { grid-template-columns: 1fr; }
  .rpt-subrow { margin-left: 0; flex-direction: column; }
  .rpt-meta { align-items: flex-start; }
  .rpt-meta-fields { justify-content: flex-start; }
  .rpt-kfs,
  .rpt-discs { flex-direction: column; }
  .rpt-abn {
    grid-template-columns: 72px 1fr;
  }
  .rpt-abn-body,
  .rpt-abn-chart,
  .rpt-abn-sig {
    grid-column: 1 / -1;
  }
  .rpt-abn-chart { padding: 0 16px 16px; }
  .rpt-abn-sig {
    margin: 0 16px 16px;
    padding: 12px 0 0;
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .rpt-title { font-size: 1.15rem; }
  .lab-detail-value { font-size: 32px; }
  .src-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .src-facsimile { padding: 20px 16px; }
  .recs-row {
    grid-template-columns: 34px minmax(0, 1fr) 90px;
  }
  .recs-viz,
  .recs-chev { display: none; }
}

/* ---------------- Care Hub, focus area, and Care Timeline mocks ---------------- */

.hub-bar { margin-bottom: 12px; }
.hub-bar .labs-chip { margin-bottom: 0; }
.hub-head,
.fa-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hub-title {
  font: var(--fw-semibold) var(--text-lg)/1.2 var(--font-sans);
  color: var(--title-espresso);
}
.hub-sub {
  margin-top: 4px;
  font: var(--fw-regular) var(--text-sm)/1.4 var(--font-sans);
  color: var(--ink-500);
}
.hub-connect {
  flex: none;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--primary-strong);
  font: var(--fw-semibold) 13px/1 var(--font-sans);
}
.hub-visit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.hub-visit-item { display: flex; flex-direction: column; gap: 3px; }
.hub-visit-item .k,
.hub-also .k,
.fa-chats .k {
  font: var(--fw-semibold) 11px/1.2 var(--font-sans);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-500);
}
.hub-visit-item b { font: var(--fw-semibold) var(--text-sm)/1.2 var(--font-sans); color: var(--ink-900); }
.hub-prep { margin-left: auto; }

.hub-sec {
  margin: 18px 2px 10px;
  font: var(--fw-semibold) var(--text-sm)/1.2 var(--font-sans);
  color: var(--ink-700);
}
.hub-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.hub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hub-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.hub-card.is-attn { border-left: 3px solid var(--attention); }
.hub-card-title { font: var(--fw-semibold) var(--text-md)/1.25 var(--font-sans); color: var(--ink-900); }
.hub-new { margin-top: 4px; font: var(--fw-regular) var(--text-xs)/1.4 var(--font-sans); color: var(--ink-500); }
.hub-new .attn,
.ctl-meta .attn { color: var(--attention-ink); font-weight: var(--fw-semibold); }

.hub-results { list-style: none; margin: 12px 0 0; padding: 0; }
.hub-results li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.hub-results .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  align-self: center;
}
.hub-results .dot.attn { background: var(--attention); }
.hub-results .nm { font: var(--fw-medium) var(--text-sm)/1.3 var(--font-sans); color: var(--ink-900); }
.hub-results .val { font: var(--fw-medium) 13px/1.3 var(--font-mono); color: var(--ink-900); text-align: right; }
.hub-results .val small { font-size: 11px; color: var(--ink-500); }
.hub-results .obs { grid-column: 2 / -1; font: var(--fw-regular) 12.5px/1.35 var(--font-sans); color: var(--ink-500); }

.hub-also,
.fa-chats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--primary-softer);
  border-radius: var(--radius-sm);
  font: var(--fw-regular) 13px/1.45 var(--font-sans);
  color: var(--ink-700);
}

.hub-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}
.hub-team { font: var(--fw-regular) 12.5px/1.3 var(--font-sans); color: var(--ink-500); }
.hub-actions { display: inline-flex; align-items: center; gap: 12px; }

.hub-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--primary-strong);
  font: var(--fw-semibold) 13px/1 var(--font-sans);
  cursor: pointer;
}
.hub-btn svg { width: 15px; height: 15px; }
.hub-btn:hover { background: var(--primary-softer); }
.hub-btn:focus-visible,
.ctl-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hub-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--primary);
  font: var(--fw-semibold) 13px/1 var(--font-sans);
  text-decoration: none;
}
.hub-link svg { width: 14px; height: 14px; }
.hub-link:hover { text-decoration: underline; }

.hub-suggest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
}
.hub-suggest-name { display: flex; flex-direction: column; gap: 3px; }
.hub-suggest-name b { font: var(--fw-semibold) var(--text-sm)/1.3 var(--font-sans); color: var(--ink-900); }
.hub-suggest-name span { font: var(--fw-regular) 12.5px/1.35 var(--font-sans); color: var(--ink-500); }
.hub-suggest.is-followed { border-style: solid; border-color: var(--primary-soft); background: var(--primary-softer); }
.hub-follow[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

.hub-tl { display: flex; gap: 8px; overflow-x: auto; }
.hub-tl-item {
  flex: 1 0 150px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: var(--fw-regular) 13px/1.3 var(--font-sans);
  color: var(--ink-700);
}
.hub-tl-item b { font: var(--fw-medium) 11px/1.2 var(--font-mono); color: var(--ink-500); }

/* Focus-area summary, above the results */
.fa-summary {
  padding: 16px;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.fa-summary-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fa-kicker {
  font: var(--fw-semibold) 12px/1.2 var(--font-sans);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--primary);
}
.fa-updated { font: var(--fw-regular) 12px/1.2 var(--font-sans); color: var(--ink-500); }
.fa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.fa-grid p { font: var(--fw-regular) 15px/1.55 var(--font-serif); color: var(--ink-700); }
.fa-grid .fa-h { margin-bottom: 3px; font: var(--fw-semibold) 13px/1.3 var(--font-sans); color: var(--ink-900); }
.fa-summary-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.labs-mock .hub-sec { margin-top: 18px; }

/* Care Timeline */
.ctl-lane { list-style: none; margin: 0; padding: 0; position: relative; }
.ctl-lane::before {
  content: "";
  position: absolute;
  left: 79px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line-strong);
}
.ctl-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 34px;
  padding: 6px 0;
}
.ctl-item::before {
  content: "";
  position: absolute;
  left: 74px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--primary);
}
.ctl-item.is-between::before { width: 8px; height: 8px; left: 76px; top: 20px; border-color: var(--ink-400); }
.ctl-item.is-next::before { border-style: dashed; }
.ctl-date {
  padding-top: 15px;
  font: var(--fw-medium) 11px/1.25 var(--font-mono);
  color: var(--ink-500);
  text-align: right;
}
.ctl-body {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.ctl-item.is-between .ctl-body { background: transparent; border-style: dashed; }
.ctl-item.is-next .ctl-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ctl-item.is-next .ctl-body > div,
.ctl-item.is-next .ctl-title { flex: 1 1 auto; }
.ctl-title { display: block; font: var(--fw-semibold) var(--text-sm)/1.3 var(--font-sans); color: var(--ink-900); }
.ctl-meta { display: block; margin-top: 3px; font: var(--fw-regular) 12.5px/1.35 var(--font-sans); color: var(--ink-500); }
.ctl-item.is-next .ctl-meta { flex-basis: 100%; order: 1; margin-top: -4px; }
.ctl-item.is-next .hub-btn { order: 2; }
.ctl-here {
  position: relative;
  margin: 6px 0 6px 98px;
  font: var(--fw-semibold) 11px/1 var(--font-sans);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--primary);
}
.ctl-here::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--primary);
}
.ctl-takeaways { margin: 8px 0 0; padding-left: 18px; font: var(--fw-regular) 13.5px/1.5 var(--font-sans); color: var(--ink-700); }
.ctl-takeaways .cite {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font: var(--fw-medium) 11px/1.4 var(--font-sans);
  color: var(--ink-500);
}
.ctl-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}
.ctl-toggle > svg { flex: none; width: 18px; height: 18px; color: var(--ink-500); transition: transform var(--dur) var(--ease-calm); }
.ctl-item.is-open .ctl-toggle > svg { transform: rotate(90deg); }
.ctl-detail { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ctl-item.is-open .ctl-detail { display: block; }
.ctl-detail .fa-kicker { margin-bottom: 10px; }
.ctl-tags { margin: 12px 0; }
.ctl-tags .tag { display: inline-block; font: var(--fw-semibold) 11px/1 var(--font-sans); padding: 5px 10px; border-radius: var(--radius-pill); }

@media (max-width: 720px) {
  .hub-cards,
  .fa-grid { grid-template-columns: minmax(0, 1fr); }
  .hub-head .hub-connect,
  .fa-head .hub-connect { display: none; }
  .hub-prep { margin-left: 0; }
  .hub-suggest { flex-direction: column; align-items: flex-start; }
  .ctl-lane::before { left: 7px; }
  .ctl-item { grid-template-columns: minmax(0, 1fr); padding-left: 26px; }
  .ctl-item::before { left: 2px; }
  .ctl-item.is-between::before { left: 4px; }
  .ctl-date { padding: 10px 0 6px; text-align: left; }
  .ctl-item::before { top: 12px; }
  .ctl-here { margin-left: 26px; }
  .ctl-here::before { left: -22px; }
}

/* ---------------- Focus page mocks (tour stage 2, focus area, add sheet) ----------------
   Laid out after the app's focus page (carehub.css): green uppercase
   section heads, dated bullets, a tinted Worth raising box, result cards
   with an amber border when outside the typical range. */

/* Tour stage 2: the focus page in brief */
.fp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease-calm) 0.12s, transform 0.45s var(--ease-calm) 0.12s;
}
.tour[data-stage="2"] .fp { opacity: 1; transform: none; }
.fp-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-switch span {
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-700);
  font: var(--fw-medium) 12px/1 var(--font-sans);
}
.fp-switch span.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.fp-head b { display: block; font: 600 21px/1.15 var(--font-serif); color: var(--ink-900); }
.fp-head span { display: block; margin-top: 3px; font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-700); }
.fp-panel {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.fp-kicker { margin: 0; font: 600 15px/1.2 var(--font-serif); color: var(--ink-900); }
.fp-meta { margin: 2px 0 8px; font: 400 11px/1.3 var(--font-sans); color: var(--ink-400); }
.fp-h {
  margin: 8px 0 3px;
  font: 600 10px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-strong);
}
.fp-li { margin: 0; font: 400 12.5px/1.45 var(--font-sans); color: var(--ink-900); }
.fp-date { margin-left: 4px; font: 500 11px/1 var(--font-sans); color: var(--ink-500); white-space: nowrap; }
.fp-raise {
  margin-top: 9px;
  padding: 2px 10px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: var(--radius-sm);
  background: var(--primary-softer);
}
.fp-raise .fp-li { font-weight: 500; }
.fp-results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.fp-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-width: 0;
}
.fp-card.is-out { border-color: var(--attention); }
.fp-card b { font: 600 12.5px/1.2 var(--font-sans); color: var(--ink-900); }
.fp-val { font: 500 17px/1 var(--font-mono); color: var(--ink-900); }
.fp-val small { font-size: 11px; color: var(--ink-500); }
.fp-pill {
  align-self: flex-start;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--positive-soft);
  color: var(--positive-ink);
  font: 600 10px/1.2 var(--font-sans);
}
.fp-card.is-out .fp-pill { background: var(--attention-soft); color: var(--attention-ink); }

/* See Qwery in action: focus area */
.fam { padding: 14px 18px 16px; }
.fam-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.fam-bar .labs-chip { margin: 0 0 0 auto; }
.fam-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: var(--fw-medium) 13px/1 var(--font-sans);
  color: var(--primary);
}
.fam-back svg { width: 14px; height: 14px; }
.fam-switcher { display: flex; flex-wrap: wrap; gap: 6px; }
.fam-switcher button {
  appearance: none;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-700);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
}
.fam-switcher button.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.fam-switcher button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fam-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 14px;
}
.fam-titlebar > div { min-width: 0; }
.fam-title { margin: 0; font: 600 26px/1.15 var(--font-serif); color: var(--ink-900); }
.fam-desc { margin: 6px 0 0; font: 400 15px/1.45 var(--font-sans); color: var(--ink-700); }
.fam-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font: var(--fw-medium) 13px/1 var(--font-sans);
  color: var(--primary);
}
.fam-quiet svg { width: 15px; height: 15px; }
.fam-panel {
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.fam-panel::after { content: ""; display: block; clear: both; }
.fam-panel-title { margin: 0 0 4px; font: 600 18px/1.2 var(--font-serif); color: var(--ink-900); }
.fam-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 14px;
  font: 400 12px/1.3 var(--font-sans);
  color: var(--ink-400);
}
.fam-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-strong);
}
.fam-h svg { width: 15px; height: 15px; }
.fam-block { margin: 0 0 12px; }
.fam-block ul, .fam-raise ul {
  margin: 0;
  padding-left: 18px;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--ink-900);
}
.fam-block li + li, .fam-raise li + li { margin-top: 3px; }
.fam-raise {
  display: flow-root;
  margin: 0 0 12px;
  padding: 10px 14px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: var(--radius-md);
  background: var(--primary-softer);
}
.fam-raise ul { font-weight: 500; }
.fam-date { margin-left: 6px; font: 500 12px/1.3 var(--font-sans); color: var(--ink-500); white-space: nowrap; }
.fam-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font: 600 10.5px/1 var(--font-sans);
  vertical-align: 1px;
}
.fam-chat {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: var(--fw-medium) 12.5px/1.3 var(--font-sans);
  cursor: pointer;
}
.fam-chat svg { width: 13px; height: 13px; }
.fam-chat:hover { text-decoration: underline; }
.fam-med { display: block; font-weight: 600; }
.fam-med-line { display: block; color: var(--ink-700); }
.fam-none { margin: 0; font: 400 13.5px/1.4 var(--font-sans); color: var(--ink-500); }
.fam-learn {
  float: right;
  width: min(34%, 280px);
  margin: 0 0 12px 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-warm);
}
.fam-learn-title { margin: 0 0 8px; font: 600 16px/1.2 var(--font-serif); color: var(--ink-900); }
.fam-learn a {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font: var(--fw-medium) 13px/1.3 var(--font-sans);
  color: var(--primary);
  text-decoration: none;
}
.fam-learn a:hover { text-decoration: underline; }
.fam-learn a svg { width: 14px; height: 14px; flex: none; }
.fam-learn .fam-h { margin-top: 10px; }
.fam-learn p:not(.fam-h):not(.fam-learn-title) { margin: 8px 0 0; font: 400 13px/1.45 var(--font-sans); color: var(--ink-700); }
.fam-results {
  clear: both;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-warm);
}
.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fam-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  padding: 12px 12px 10px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.fam-card:hover { border-color: var(--primary); }
.fam-card.is-out { border-color: var(--attention); }
.fam-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fam-card-when { font: 600 12px/1.3 var(--font-sans); color: var(--ink-700); }
.fam-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.fam-card-top b { font: 600 14.5px/1.3 var(--font-sans); color: var(--ink-900); margin-right: auto; }
.fam-pill {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--positive-soft);
  color: var(--positive-ink);
  font: 600 10.5px/1.2 var(--font-sans);
}
.fam-card.is-out .fam-pill { background: var(--attention-soft); color: var(--attention-ink); }
.fam-card-val { font: 500 21px/1 var(--font-mono); color: var(--ink-900); }
.fam-card-val small { font-size: 12px; color: var(--ink-500); }
.fam-card .labs-spark svg { width: 100%; max-width: 160px; height: 26px; }
.fam-card-sub { display: flex; flex-direction: column; gap: 2px; font: 400 11.5px/1.3 var(--font-sans); color: var(--ink-500); }
.fam-days-title { margin: 14px 0 6px; font: 600 13px/1.2 var(--font-sans); color: var(--ink-900); }
.fam-days { list-style: none; margin: 0; padding: 0; }
.fam-days li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 7px 0 7px 22px;
  border-top: 1px solid var(--line);
  font: 400 13px/1.35 var(--font-sans);
  color: var(--ink-700);
}
.fam-dot {
  position: absolute;
  left: 4px;
  top: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}
.fam-dot.is-latest { background: var(--primary); }
.fam-dot.is-out { box-shadow: 0 0 0 3px var(--attention-soft); }
.fam-day-date { font-weight: 600; color: var(--ink-900); }
.fam-day-count small { color: var(--attention-strong); font-size: 12px; }
.fam-day-open { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--primary); font-weight: 500; }
.fam-day-open svg { width: 13px; height: 13px; }
.fam-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 2px; }
.fam-ask, .afa-add {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  font: var(--fw-semibold) 13px/1 var(--font-sans);
  cursor: pointer;
}
.fam-ask svg { width: 15px; height: 15px; }
.fam-ask:hover, .afa-add:hover { background: var(--primary-strong); }
.fam-team { margin-left: auto; font: 400 12.5px/1.3 var(--font-sans); color: var(--ink-400); }
.fam-deferral { margin: 12px 0 0; font: 400 11.5px/1.35 var(--font-sans); color: var(--ink-400); }

/* See Qwery in action: Add a focus area sheet */
.afa .fam-bar { margin-bottom: 10px; }
.afa-sheet {
  max-width: 560px;
  margin-inline: auto;
  padding: 18px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.afa-title { margin: 0 0 4px; font: 600 20px/1.2 var(--font-serif); color: var(--ink-900); }
.afa-sub { margin: 0 0 12px; font: 400 14px/1.45 var(--font-sans); color: var(--ink-700); }
.afa-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-500);
}
.afa-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-softer); }
.afa-search svg { width: 15px; height: 15px; flex: none; }
.afa-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 14px/1.3 var(--font-sans);
  color: var(--ink-900);
}
.afa-rows h4 {
  margin: 14px 0 4px;
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-strong);
}
.afa-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.afa-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.afa-row-body strong { font: 600 14px/1.3 var(--font-sans); color: var(--ink-900); }
.afa-row-body span { font: 400 12.5px/1.35 var(--font-sans); color: var(--ink-500); }
.afa-icon {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 31px;
  flex: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
}
.afa-icon svg { width: 15px; height: 15px; }
.afa-add { flex: none; }
.afa-following {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 0 4px;
  font: var(--fw-semibold) 13px/1 var(--font-sans);
  color: var(--positive-ink);
}
.afa-following svg { width: 14px; height: 14px; }
.afa-empty { margin: 14px 0 4px; font: 400 13.5px/1.4 var(--font-sans); color: var(--ink-500); }
.afa-note {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--positive-soft);
  color: var(--positive-ink);
  font: var(--fw-medium) 13px/1.4 var(--font-sans);
}
.afa-proposal { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 4px; }
.afa-proposal p { margin: 0; font: 400 14px/1.45 var(--font-sans); color: var(--ink-900); }
.afa-k {
  display: block;
  margin-bottom: 2px;
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-strong);
}
.afa-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.afa-quiet {
  appearance: none;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--primary);
  font: var(--fw-semibold) 13px/1 var(--font-sans);
  cursor: pointer;
}
.afa-quiet:hover { background: var(--primary-softer); }

@media (max-width: 720px) {
  .fam { padding: 12px 12px 14px; }
  .fam-panel { padding: 14px 12px 12px; border-radius: var(--radius-lg); }
  .fam-learn { float: none; width: auto; margin: 0 0 12px; }
  .fam-bar .labs-chip { margin-left: 0; }
  .fam-team { margin-left: 0; }
  .fam-day-open { margin-left: 0; }
  .afa-sheet { padding: 14px 12px 12px; }
}

/* Hero as one newspaper column: the chat demo floats right and the copy,
   including the focus-areas continuation, wraps around it and then runs
   full width beneath it. Narrow screens stack the opening, the demo, then
   the rest. */
.hero-flow { display: flow-root; }
.hero-flow .hero-demo-wrap {
  float: right;
  width: min(400px, 40%);
  margin: 0 0 28px clamp(28px, 3.5vw, 48px);
}
.hero-flow .hero-voice { max-width: none; margin-bottom: 20px; }
.hero-flow > h1 { margin-top: 18px; }
.hero-h2 {
  margin: 34px 0 14px;
  font: var(--fw-semibold) clamp(1.4rem, 2vw, 1.7rem)/1.2 var(--font-sans);
  letter-spacing: var(--ls-tight);
  color: var(--title-espresso);
  text-wrap: pretty;
}
.hero-flow .hero-actions { margin-top: 30px; }
@media (max-width: 980px) {
  .hero-flow { display: flex; flex-direction: column; }
  .hero-flow > * { order: 1; }
  .hero-flow > .eyebrow { align-self: flex-start; }
  .hero-flow .hero-demo-wrap { order: 2; float: none; width: 100%; margin: 8px 0 12px; }
  .hero-flow > .hero-late { order: 3; }
}

/* Partner call to action: a tinted sibling of the waitlist card */
.partner-card {
  margin: clamp(20px, 3vw, 28px) auto 0;
  text-align: center;
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--radius-xl);
  padding: clamp(22px, 3vw, 32px) clamp(22px, 5vw, 56px);
  scroll-margin-top: 104px;
}
.partner-pill {
  display: inline-flex;
  padding: 4px 10px;
  margin-bottom: 10px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font: var(--fw-semibold) 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.partner-card h2 {
  font: var(--fw-semibold) var(--m-title)/1.2 var(--font-sans);
  letter-spacing: var(--ls-tight);
  color: var(--title-espresso);
  margin-bottom: 10px;
  text-wrap: balance;
}
.partner-card > p:not(.waitlist-note) {
  color: var(--ink-700);
  max-width: 46em;
  margin: 0 auto 16px;
  font-size: var(--text-base);
  text-wrap: pretty;
}
.partner-card .waitlist-note { color: var(--ink-700); }
.partner-card .waitlist-note strong { font-weight: var(--fw-semibold); color: var(--primary-strong); user-select: all; }
@media (max-width: 720px) {
  .partner-card .waitlist-cta .btn { width: 100%; }
}