/* Bloom Marketing Site - Theme tokens */
:root {
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-inverse: #1a1f2b;
  --fg: #1a1f2b;
  --fg-muted: #62686f;
  --fg-subtle: #6b7280;
  --border: #e8e9ec;
  --border-strong: #d0d3d8;
  --accent: #b5ff00;
  --accent-soft: #c8f55a;
  --accent-fg: #1a1f2b;
  --accent-ink: #4a780a;
  --navy: #2a4157;
  --navy-deep: #273b4a;
  --c-purple: #8B5CF6;
  --c-coral: #E5634D;
  --c-orange: #F5A623;
  --shadow-sm: 0 1px 2px rgba(17, 69, 95, 0.06);
  --shadow-md: 0 4px 16px rgba(17, 69, 95, 0.09);
  --shadow-lg: 0 12px 48px rgba(17, 69, 95, 0.12);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  /* "Noto Sans Armenian" sits after Inter on purpose: font fallback is
     per-glyph, so Armenian codepoints (which Inter lacks entirely) pick it up
     while everything else still renders in Inter. */
  --font-display: "Inter", "Noto Sans Armenian", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: "Inter", "Noto Sans Armenian", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "B612 Mono", ui-monospace, monospace;
}

[data-theme="dark"] {
  --bg: #0e1218;
  --bg-alt: #141923;
  --bg-card: #181e2a;
  --bg-elevated: #1d2433;
  --bg-inverse: #090c11;
  --fg: #f3f4f6;
  --fg-muted: #a4abb8;
  --fg-subtle: #6b7382;
  --border: #242b3a;
  --border-strong: #313a4d;
  --accent: #b5ff00;
  --accent-soft: #c8f55a;
  --accent-fg: #0e1218;
  --accent-ink: var(--accent);
  --navy: #2a4157;
  --navy-deep: #1f3140;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}
/* global guard against horizontal overflow (decorative blobs, wide grids, carousels).
   overflow-x: clip keeps the sticky nav working, unlike overflow-x: hidden.
   touch-action on body is the iOS-Safari belt-and-braces: WebKit lets a finger pan
   the page sideways when ANY element (incl. pseudo-elements/shadows, which overflow
   scanners can't see) pokes past the viewport, even with overflow-x clipped. pan-y
   pinch-zoom = vertical scroll + zoom stay native, page-level horizontal pan is
   impossible. Nested horizontal scrollers are unaffected (touch-action chains stop
   at the nearest scroll container). */
html { overflow-x: clip; }
body { overflow-x: clip; touch-action: pan-y pinch-zoom; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}

h1 { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.1; letter-spacing: -0.03em; }
h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -0.015em; }

p { margin: 0; color: var(--fg-muted); }

/* ============ Layout ============ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 96px 0;
  border-top: 1px solid var(--border);
}
.section:first-of-type { border-top: 0; }
.section-tight { padding: 64px 0; }

/* ============ Nav ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-family: var(--font-display);
}
.brand-mark {
  width: 22px;
  height: 25px;
  color: var(--accent);
  flex-shrink: 0;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-word {
  width: 92px;
  height: 23px;
  color: var(--fg);
}
.brand-word svg { width: 100%; height: 100%; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--bg-alt); color: var(--fg); }
.nav-link.active { color: var(--fg); background: var(--bg-alt); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-user-menu-wrap { margin-left: 2px; }
.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 220px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.nav-user-trigger:hover,
.nav-user-trigger.is-open {
  background: var(--bg-alt);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: var(--shadow-sm);
}
.nav-user-trigger-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.nav-user-trigger-chevron {
  flex-shrink: 0;
  color: var(--fg-muted);
  transition: transform .15s ease;
}
.nav-user-trigger.is-open .nav-user-trigger-chevron { transform: rotate(180deg); }
.nav-user-avatar {
  width: 32px;
  height: 32px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 36%, var(--bg-alt)), var(--bg-alt));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
}
.nav-user-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.nav-user-menu {
  min-width: 240px;
  padding: 8px;
  right: 0;
}
.nav-user-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 10px;
}
.nav-user-menu-head .nav-user-avatar {
  width: 40px;
  height: 40px;
}
.nav-user-menu-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-user-menu-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-menu-email {
  font-size: 12px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}
.nav-user-menu-item {
  justify-content: space-between;
}
.nav-user-menu-item .arrow { opacity: 0.72; }
.nav-user-menu-item--danger {
  color: #c0392b;
}
[data-theme="dark"] .nav-user-menu-item--danger { color: #ff8a80; }
.nav-user-menu-item--danger:hover { background: color-mix(in srgb, #c0392b 8%, var(--bg-alt)); }
.nav-user-mobile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.nav-user-mobile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.nav-user-mobile-card .nav-user-avatar {
  width: 44px;
  height: 44px;
}
.nav-user-mobile-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-user-mobile-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.nav-user-mobile-email {
  font-size: 13px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-mobile-logout { color: var(--fg-muted); }
.auth-boot {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--fg-muted);
}
.auth-boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 500;
}
.auth-boot-toast {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated, var(--bg-alt));
  border: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--fg-muted);
  transition: background .15s, color .15s;
  font-size: 14px;
  font-weight: 500;
}
.icon-btn:hover { background: var(--bg-alt); color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; }

/* ============ Mobile navigation (burger + full-screen menu) ============ */
.nav-mobile-actions { display: none; align-items: center; gap: 2px; }
.nav-theme-m { flex-shrink: 0; }
.nav-burger {
  display: flex;
  position: relative;
  width: 42px; height: 42px;
  color: var(--fg); border-radius: var(--radius-md);
  z-index: 60; flex-shrink: 0;
}
.nav-burger span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  border-radius: 2px; background: currentColor;
  transition: top .2s ease, transform .2s ease, opacity .12s ease;
}
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 20px; }
.nav-burger span:nth-child(3) { top: 25px; }
.nav-burger.is-open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
  background: var(--bg); z-index: 45;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .26s ease, transform .26s ease, visibility .26s;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.nav-mobile-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-mobile-inner {
  display: flex; flex-direction: column; min-height: 100%;
  padding: 22px 20px calc(28px + env(safe-area-inset-bottom));
}
.nav-mobile-links { display: flex; flex-direction: column; }
.nav-mobile-link {
  position: relative;
  padding: 17px 4px;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--fg); border-bottom: 1px solid var(--border);
}
.nav-mobile-link.active { padding-left: 18px; }
.nav-mobile-link.active::before {
  content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.nav-mobile-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.nav-mobile-ctas .btn { width: 100%; justify-content: center; }
.nav-mobile-foot {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; margin-top: auto; padding-top: 32px;
}
.nav-mobile-langs-label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--fg-subtle);
}
.nav-mobile-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.nav-mobile-lang {
  padding: 7px 11px; border-radius: var(--radius-md);
  font-size: 12px; font-weight: 600; color: var(--fg-muted);
  border: 1px solid var(--border); transition: background .15s, color .15s;
}
.nav-mobile-lang.active { color: var(--fg); background: var(--bg-alt); border-color: transparent; }
.nav-mobile-theme { border: 1px solid var(--border); flex-shrink: 0; }

body.menu-locked { overflow: hidden; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-text);
  letter-spacing: -0.005em;
  transition: transform .12s, background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s ease, background .15s;
}
.btn-primary:hover {
  background: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px color-mix(in oklch, var(--accent) 60%, transparent);
}
.btn-primary:active { transform: translateY(0) scale(0.97); box-shadow: 0 4px 10px -6px color-mix(in oklch, var(--accent) 50%, transparent); }
.btn-secondary {
  background: var(--fg);
  color: var(--bg);
}
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-alt); }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn-block { width: 100%; padding: 14px 18px; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(2px); }

.btn:disabled,
.btn[disabled] {
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn:disabled .arrow,
.btn[disabled] .arrow,
.btn[aria-disabled="true"] .arrow { transform: none; }
.btn[aria-disabled="true"]:hover .arrow { transform: none; }

.btn-primary:disabled,
.btn-primary[disabled],
.btn-primary[aria-disabled="true"] {
  background: var(--bg-alt);
  color: var(--fg-subtle);
  border: 1px solid var(--border);
}
[data-theme="dark"] .btn-primary:disabled,
[data-theme="dark"] .btn-primary[disabled],
[data-theme="dark"] .btn-primary[aria-disabled="true"] {
  background: var(--bg-elevated);
  color: var(--fg-subtle);
  border-color: var(--border-strong);
}

.btn-secondary:disabled,
.btn-secondary[disabled],
.btn-secondary[aria-disabled="true"] {
  background: var(--bg-alt);
  color: var(--fg-subtle);
  border: 1px solid var(--border);
}
[data-theme="dark"] .btn-secondary:disabled,
[data-theme="dark"] .btn-secondary[disabled],
[data-theme="dark"] .btn-secondary[aria-disabled="true"] {
  background: var(--bg-elevated);
  color: var(--fg-subtle);
  border-color: var(--border-strong);
}

.btn-ghost:disabled,
.btn-ghost[disabled],
.btn-ghost[aria-disabled="true"] {
  background: transparent;
  color: var(--fg-subtle);
  border-color: var(--border);
  opacity: 0.72;
}

/* ============ Hero ============ */
.hero {
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  margin-bottom: 24px;
}
.hero-eyebrow .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-fg);
}
.hero-eyebrow .dot svg { width: 10px; height: 10px; }

.hero h1 {
  margin-bottom: 20px;
}
.hero h1 .accent-mark {
  display: inline-block;
  width: 0.65em;
  height: 0.7em;
  vertical-align: -0.05em;
  color: var(--accent);
}
.hero-sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 520px;
  margin-bottom: 32px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-trust-num {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.hero-trust-label {
  font-size: 12px;
  color: var(--fg-subtle);
}

/* Hero visual: floating product mockups */
.hero-visual {
  position: relative;
  height: 540px;
}

.mock-window {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}

.mock-desktop {
  width: 580px;
  top: 30px;
  right: -60px;
  z-index: 1;
}
.mock-desktop-body {
  padding: 16px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  background: var(--bg-card);
}
.mock-sidebar {
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}
.mock-sidebar-item {
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mock-sidebar-item.active {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
.mock-sidebar-item .icon {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.6;
}
.mock-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 360px;
}
.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mock-h {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.mock-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  background: var(--bg-alt);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.mock-pill.success { background: color-mix(in oklab, var(--accent) 25%, transparent); color: var(--fg); border-color: transparent; }

.mock-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mock-stat {
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mock-stat-label { font-size: 9px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.mock-stat-val { font-size: 18px; font-weight: 600; color: var(--fg); letter-spacing: -0.02em; }
.mock-stat-bar {
  height: 3px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.mock-stat-bar > i { display: block; height: 100%; background: var(--accent); }

.mock-chart {
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  padding: 14px;
  height: 160px;
  position: relative;
  overflow: hidden;
}
.mock-chart svg { width: 100%; height: 100%; }

.mock-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.mock-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--accent));
  flex-shrink: 0;
}
.mock-list-name { color: var(--fg); font-weight: 500; flex: 1; }
.mock-list-meta { color: var(--fg-subtle); }

/* phone mockup */
.mock-phone {
  width: 230px;
  height: 460px;
  position: absolute;
  left: -30px;
  bottom: 0;
  background: var(--bg-card);
  border-radius: 32px;
  border: 8px solid var(--fg);
  box-shadow: var(--shadow-lg);
  z-index: 2;
  overflow: hidden;
}
.mock-phone-screen {
  background: var(--bg-card);
  height: 100%;
  padding: 28px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mock-phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-muted);
}
.mock-phone-title { font-size: 18px; font-weight: 600; color: var(--fg); letter-spacing: -0.02em; }
.mock-ring {
  width: 100%;
  aspect-ratio: 1;
  max-height: 130px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0deg 240deg, var(--bg-alt) 240deg 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mock-ring::before {
  content: "";
  position: absolute;
  inset: 12px;
  background: var(--bg-card);
  border-radius: 50%;
}
.mock-ring-text {
  position: relative;
  text-align: center;
}
.mock-ring-num { font-size: 26px; font-weight: 700; color: var(--fg); letter-spacing: -0.03em; }
.mock-ring-lab { font-size: 10px; color: var(--fg-subtle); }

.mock-meal {
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mock-meal-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--accent) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.mock-meal-info { flex: 1; }
.mock-meal-name { font-size: 12px; font-weight: 600; color: var(--fg); }
.mock-meal-kcal { font-size: 10px; color: var(--fg-subtle); }

.float-tag {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  z-index: 3;
  font-weight: 500;
  color: var(--fg);
}
.float-tag .badge {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-fg);
  font-size: 12px;
}
.float-tag-1 { top: 20px; left: -12px; }
.float-tag-2 { bottom: 100px; right: -10px; }

/* ============ Audience tabs ============ */
.aud-tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-alt);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  gap: 4px;
  margin-bottom: 40px;
}
.aud-tab {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
  transition: all .2s;
}
.aud-tab.active {
  background: var(--fg);
  color: var(--bg);
}
/* pricing hero: horizontal padding comes from .container; keep only the top offset.
   The copy area holds a stable height so toggling Personal/Professional doesn't jump. */
.pricing-hero-head { padding-top: 72px; }
.pricing-hero-head .pricing-hero-copy {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 150px; /* reserves space so switching Personal/Professional never jumps */
}

/* ============ Section headers ============ */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  margin-bottom: 16px;
}
.section-title { max-width: 720px; margin-bottom: 16px; }
.section-sub {
  font-size: 18px;
  color: var(--fg-muted);
  max-width: 680px;
  margin-bottom: 56px;
}

/* ============ Feature grid ============ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .2s, transform .2s;
}
.feature-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card.accent .feature-icon { background: var(--accent); color: var(--accent-fg); }
.feature-card h3 { margin-bottom: 0; }
.feature-card p { font-size: 14px; line-height: 1.55; }

/* ============ Big stat strip ============ */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}
.stat-strip-item {
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid var(--border);
}
.stat-strip-item:last-child { border-right: 0; }
.stat-strip-item--lead {
  background: rgba(181,255,0,0.18);
  border-right-color: rgba(181,255,0,0.35);
}
.stat-strip-item--lead .stat-num { color: var(--accent-ink); }
.stat-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--fg);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-num .unit { font-size: 28px; color: var(--fg-muted); margin-left: 2px; }
.stat-label { font-size: 13px; color: var(--fg-muted); }

/* ============ Workflow / Two-col ============ */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.two-col.reverse > :first-child { order: 2; }

.workflow-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 32px;
}
.workflow-step {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all .2s;
  cursor: pointer;
}
.workflow-step.active {
  border-color: var(--border);
  background: var(--bg-card);
}
.workflow-step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-subtle);
  flex-shrink: 0;
  padding-top: 2px;
}
.workflow-step h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--fg);
}
.workflow-step p {
  font-size: 14px;
  line-height: 1.5;
}

/* visual for workflow */
.workflow-visual {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  aspect-ratio: 1.05/1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* clinic dashboard mock — shrink the oversized numbers on small phones so nothing clips */
@media (max-width: 480px) {
  .clinic-mini .cm-ret-num span:nth-child(1) { font-size: 26px !important; }
  .clinic-mini .cm-ret-num span:nth-child(2) { font-size: 56px !important; }
  .clinic-mini .cm-ret-num span:nth-child(3) { font-size: 26px !important; }
  .clinic-mini .cm-stat-num { font-size: 30px !important; }
}

/* ============ Quote / testimonial ============ */
.quote-card {
  padding: 48px;
  background: var(--bg-alt);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
}
.quote-card blockquote {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 24px;
  font-weight: 400;
}
.quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.quote-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--accent));
}
.quote-author-info { font-size: 14px; }
.quote-author-name { font-weight: 600; color: var(--fg); }
.quote-author-role { color: var(--fg-muted); font-size: 13px; }

/* ============ CTA banner ============ */
.cta-banner {
  background: var(--bg-inverse);
  color: var(--bg);
  border-radius: var(--radius-xl);
  padding: 72px 64px;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .cta-banner { color: var(--fg); }
.cta-banner h2 { color: inherit; max-width: 600px; margin-bottom: 16px; }
.cta-banner p { color: color-mix(in oklab, currentColor 70%, transparent); max-width: 520px; margin-bottom: 32px; font-size: 17px; }
.cta-banner .btn-primary { color: var(--accent-fg); }
/* Ghost buttons live on this dark panel, where the default .btn-ghost:hover
   fill (--bg-alt, near-white) lands under white label text and erases it — the
   button reads as a blank white pill. Derive both states from currentColor so
   the label stays readable and the rule holds in either theme, without the
   per-call-site inline colour overrides this used to need. */
.cta-banner .btn-ghost {
  color: inherit;
  border-color: color-mix(in oklab, currentColor 30%, transparent);
}
.cta-banner .btn-ghost:hover {
  background: color-mix(in oklab, currentColor 14%, transparent);
  border-color: color-mix(in oklab, currentColor 50%, transparent);
}

/* Desktop consumer CTA: a QR plus store badges instead of a button, because a
   store link on a desktop is a dead end — the app installs on the phone. The
   badges get the dark treatment; StoreBadge otherwise paints itself --fg, which
   on this panel is near-invisible. */
.cta-install {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cta-install-qr {
  border-radius: var(--radius-md);
  background: #fff;
  padding: 7px;
  flex-shrink: 0;
}
.cta-install-side { display: flex; flex-direction: column; gap: 10px; }
.cta-install-scan {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, currentColor 62%, transparent);
}
@media (max-width: 620px) {
  .cta-install { gap: 14px; }
}
.cta-shape {
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.9;
  right: -120px;
  top: -120px;
}
.cta-shape::after {
  content: "";
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  background: var(--bg-inverse);
}

/* ============ Footer ============ */
.footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-tagline {
  font-size: 14px;
  color: var(--fg-muted);
  margin-top: 16px;
  max-width: 280px;
  line-height: 1.5;
}
.footer-col h5 {
  font-size: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--fg-muted); transition: color .15s; }
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 13px;
  color: var(--fg-subtle);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom-left { display: flex; flex-direction: column; gap: 4px; }
.footer-legal-line { font-size: 12px; color: var(--fg-subtle); opacity: .8; }
.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--fg);
  font-weight: 500;
  transition: color .15s;
}
.footer-contact:hover { color: var(--accent-strong, var(--accent)); }
.footer-contact svg { width: 16px; height: 16px; }
.footer-socials { margin-top: 18px; }
.footer-socials-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-subtle);
  margin-bottom: 10px;
}
.footer-socials-row { display: flex; gap: 10px; }
.footer-socials-row a {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  transition: all .18s;
  background: var(--bg-card);
}
.footer-socials-row a:hover {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.footer-socials-row svg { width: 16px; height: 16px; }

/* ============ Real-app phone hero ============ */
.hero-phones {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-phone {
  position: absolute;
  border-radius: 38px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.35), 0 0 0 8px #111, 0 0 0 9px rgba(255,255,255,0.06);
  aspect-ratio: 9 / 19.5;
  height: 92%;
  max-height: 620px;
}
.hero-phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-phone-notch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 22px;
  background: #000;
  border-radius: 16px;
  z-index: 2;
}
.hero-phone-front {
  z-index: 3;
  transform: translateX(8%) rotate(2.5deg);
}
.hero-phone-back {
  z-index: 1;
  transform: translateX(-32%) rotate(-6deg) scale(0.86);
  opacity: 0.92;
  filter: blur(0.2px);
}
@media (max-width: 900px) {
  .hero-phone { max-height: 480px; }
  .hero-phone-back { display: none; }
  .hero-phone-front { transform: rotate(0deg); }
}

/* ============ Awards / Regalia ============ */
.awards-section { padding-top: 48px; padding-bottom: 48px; }
.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.award-card {
  position: relative;
  padding: 28px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: transform .2s, border-color .2s;
}
.award-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto auto;
  width: 140px; height: 140px;
  background: radial-gradient(circle at top right, color-mix(in oklch, var(--accent) 25%, transparent), transparent 65%);
  pointer-events: none;
}
.award-card:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--accent) 35%, var(--border)); }
.award-medal {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-fg);
  margin-bottom: 8px;
}
.award-medal svg { width: 22px; height: 22px; }
.award-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-subtle);
}
.award-card h3 { font-size: 19px; line-height: 1.25; margin: 0; font-weight: 600; }
.award-card p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
  .awards-grid { grid-template-columns: 1fr; }
}

/* ============ Contact section ============ */
.contact-section {
  background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--accent) 6%, var(--bg)));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.contact-intro h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; margin: 16px 0 16px; }
.contact-direct {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg);
  transition: all .18s;
}
.contact-direct:hover { border-color: color-mix(in oklch, var(--accent) 50%, var(--border)); transform: translateY(-1px); }
.contact-direct-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-direct-icon svg { width: 18px; height: 18px; }
.contact-direct-label { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-subtle); }
.contact-direct-email { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }

.contact-card {
  padding: 32px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 24px 48px -32px rgba(0,0,0,0.18);
}
.contact-roles { display: flex; flex-direction: column; gap: 8px; }
.contact-roles-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-subtle);
}
.contact-role-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-role-pill {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.contact-role-pill:hover { color: var(--fg); border-color: color-mix(in oklch, var(--fg) 25%, var(--border)); }
.contact-role-pill.active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fg-muted); font-weight: 500; }
.contact-card input,
.contact-card textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  resize: vertical;
}
.contact-card input:focus,
.contact-card textarea:focus {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--fg) 12%, transparent);
}
.contact-consent { font-size: 12px; color: var(--fg-subtle); line-height: 1.5; margin: 0; }
.contact-card .btn { align-self: flex-start; }

.contact-success { align-items: flex-start; min-height: 360px; justify-content: center; }
.contact-success-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--accent-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-success-icon svg { width: 28px; height: 28px; }
.contact-success h3 { font-size: 24px; margin: 0; }
.contact-success p { color: var(--fg-muted); margin: 0; line-height: 1.6; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-row { grid-template-columns: 1fr; }
}

/* ============ Pricing ============ */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  margin: 16px auto 56px;
}
.pricing-toggle button {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
}
.pricing-toggle button.active {
  background: var(--fg);
  color: var(--bg);
}
.save-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}
.price-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.featured {
  background: var(--bg-inverse);
  color: var(--bg);
  border-color: transparent;
}
[data-theme="dark"] .price-card.featured {
  background: linear-gradient(165deg, color-mix(in oklch, var(--accent) 8%, var(--bg-elevated)) 0%, var(--bg-card) 68%);
  color: var(--fg);
  border: 1.5px solid color-mix(in oklch, var(--accent) 42%, var(--border));
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.7), 0 0 70px -30px color-mix(in oklch, var(--accent) 38%, transparent);
}
.price-card.featured h3 { color: inherit; }
.price-card.featured p { color: color-mix(in oklab, currentColor 65%, transparent); }
.price-card.featured .price-num { color: inherit; }
.price-card.featured .feat-list li { color: color-mix(in oklab, currentColor 80%, transparent); }

.price-tag {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.price-card .plan-name { font-size: 14px; color: var(--fg-muted); margin-bottom: 8px; font-weight: 500; }
.price-card.featured .plan-name { color: color-mix(in oklab, currentColor 70%, transparent); }
.price-card h3 { font-size: 24px; margin-bottom: 12px; font-weight: 600; }
.price-card .plan-desc { font-size: 14px; line-height: 1.5; margin-bottom: 24px; }
.price-num {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-family: var(--font-display);
  color: var(--fg);
}
.price-num .unit { font-size: 18px; color: var(--fg-muted); margin-left: 4px; font-weight: 500; }
.price-period { font-size: 13px; color: var(--fg-subtle); margin-top: 4px; margin-bottom: 24px; }
.price-card.featured .price-period { color: color-mix(in oklab, currentColor 65%, transparent); }
.feat-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--fg);
  line-height: 1.45;
}
.feat-list svg {
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 2px;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: 50%;
  padding: 2px;
}

/* compare table */
.compare {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-card);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.compare-table th, .compare-table td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.compare-table thead th {
  background: var(--bg-alt);
  font-weight: 600;
  color: var(--fg);
  font-size: 14px;
}
.compare-table thead th .col-price { font-size: 13px; color: var(--fg-muted); font-weight: 500; margin-top: 2px; }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-section-row td {
  background: var(--bg-alt);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
  padding: 12px 24px;
}
.compare-table tbody td:first-child {
  color: var(--fg);
  font-weight: 500;
  width: 40%;
}
.compare-table tbody td:not(:first-child) {
  color: var(--fg-muted);
  text-align: center;
}
.check-yes { color: var(--fg); }
.check-yes svg {
  width: 18px; height: 18px;
  display: inline-block;
  vertical-align: middle;
}
.check-no { color: var(--fg-subtle); opacity: 0.5; font-size: 18px; }

.compare-table th:nth-child(3) {
  background: var(--bg-inverse);
  color: var(--bg);
}
[data-theme="dark"] .compare-table th:nth-child(3) {
  background: var(--fg);
  color: var(--bg);
}

/* duo compare table: highlight the doctors column (2nd), not the 3rd */
.compare-table--duo th:nth-child(3) { background: transparent; color: inherit; }
.compare-table--duo th:nth-child(2) { background: var(--bg-inverse); color: var(--bg); }
[data-theme="dark"] .compare-table--duo th:nth-child(2) { background: var(--fg); color: var(--bg); }
.compare-table--duo th:nth-child(2),
.compare-table--duo td:nth-child(2),
.compare-table--duo th:nth-child(3),
.compare-table--duo td:nth-child(3) { width: 24%; }

/* ============ Single B2C plan — hero ============ */
.price-hero {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
}
.price-hero-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  animation: price-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes price-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.price-hero-left {
  padding: 40px 38px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}
.price-hero-card .price-tag {
  position: static;
  align-self: flex-start;
  margin-bottom: 32px;
}
/* shimmer sweep on the trial pill */
.price-tag--shimmer { position: relative; overflow: hidden; }
.price-hero-card .price-tag--shimmer { position: relative; overflow: hidden; top: auto; right: auto; }
.price-tag--shimmer::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: skewX(-18deg);
  animation: tag-shimmer 3.6s ease-in-out infinite;
}
@keyframes tag-shimmer {
  0%, 100% { left: -60%; }
  55%, 100% { left: 130%; }
}
.price-hero-card .plan-name { margin-bottom: 18px; font-size: 13px; letter-spacing: 0.02em; }
.price-hero-amount { margin-bottom: 24px; }
.price-hero-amount .price-num { font-size: 58px; }
.price-hero-amount .price-period { margin: 6px 0 0; }
.price-hero-cta { margin: 0 0 12px; }
.price-hero-install { display: flex; gap: 16px; align-items: center; margin: 0 0 14px; }
.price-hero-qr { flex: none; width: 104px; height: 104px; padding: 8px; background: #fff; border-radius: 12px; }
.price-hero-install-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.price-hero-scan { font-size: 12.5px; color: color-mix(in oklab, currentColor 58%, transparent); }
.price-hero-badges { flex-direction: column; gap: 8px; margin: 0; }
.price-hero-badges .store-badge { padding: 8px 14px; }
.price-hero-badges .store-ic svg { width: 20px; height: 20px; }
.price-hero-badges .store-txt { font-size: 13px; }
.price-hero-fine {
  font-size: 12.5px;
  text-align: center;
  color: color-mix(in oklab, currentColor 58%, transparent);
}
.price-hero-proof {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.price-hero-proof .php-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.price-hero-proof .php-label {
  font-size: 12.5px;
  line-height: 1.35;
  color: color-mix(in oklab, currentColor 62%, transparent);
}
.price-hero-right {
  padding: 40px 38px;
  display: flex;
  flex-direction: column;
}
.price-hero-incl {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}
.price-hero-incl .phi-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 7px 14px 7px 11px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 38%, transparent);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.price-hero-incl .phi-badge svg {
  width: 16px; height: 16px;
  color: var(--accent);
}
[data-theme="dark"] .price-card.featured .price-hero-incl .phi-badge,
.price-card.featured .price-hero-incl .phi-badge {
  /* card is dark in light-mode / light in dark-mode — keep lime readable on both */
  color: var(--accent);
}
.price-hero-incl .phi-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, currentColor 52%, transparent);
  padding-left: 2px;
}
.price-hero-feats { margin: 0; gap: 15px; }
.price-hero-feats li {
  font-size: 15px;
  opacity: 0;
  animation: feat-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes feat-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* visible, refined checkmarks on featured/dark cards (was green-on-green = blank dots) */
.price-card.featured .feat-list svg {
  color: var(--accent-fg);
  background: var(--accent);
  width: 19px; height: 19px;
  padding: 3px;
}

/* reassurance chips below the card */
.price-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  margin: 30px auto 0;
}
.price-reassure .pr-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--fg-muted);
}
.price-reassure .pr-item svg {
  width: 17px; height: 17px;
  flex-shrink: 0;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: 50%;
  padding: 3px;
}

/* ============ B2B duo grid ============ */
.pricing-grid--duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
  .price-hero-card { grid-template-columns: 1fr; }
  .price-hero-left { border-right: none; border-bottom: 1px solid color-mix(in oklab, currentColor 12%, transparent); }
}

/* ============ Auth ============ */
.auth-page {
  min-height: calc(100vh - 68px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-side {
  background: var(--bg-inverse);
  color: var(--bg);
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .auth-side { color: var(--fg); }
.auth-side h2 { color: inherit; font-size: 36px; }
.auth-side p { color: color-mix(in oklab, currentColor 70%, transparent); margin-top: 16px; max-width: 380px; }
.auth-side-quote {
  position: relative;
  z-index: 2;
}
.auth-shape {
  position: absolute;
  bottom: -160px;
  right: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.9;
}
.auth-shape::after {
  content: "";
  position: absolute;
  inset: 80px;
  border-radius: 50%;
  background: var(--bg-inverse);
}
.auth-side-mark {
  width: 32px;
  height: 32px;
  color: var(--accent);
  position: relative;
  z-index: 2;
}
.auth-side ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; }
.auth-side li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: color-mix(in oklab, currentColor 85%, transparent); }
.auth-side li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }

.auth-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
  min-width: 0;
}
.auth-form {
  width: 100%;
  max-width: 400px;
  min-width: 0;
}
.auth-form form {
  width: 100%;
  margin: 0;
}
.auth-form h1 { font-size: 36px; margin-bottom: 8px; }
.auth-form .auth-sub { color: var(--fg-muted); font-size: 15px; margin-bottom: 32px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field label { font-size: 13px; font-weight: 500; color: var(--fg); }
.field input, .field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border .15s, box-shadow .15s;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  cursor: pointer;
  text-overflow: ellipsis;
}
.field input:focus,
.field select:focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--fg) 10%, transparent);
}

/* Auth select — matches Bloom app (front-react Radix Select) */
.auth-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.auth-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 12px 0 16px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  background: #ffffff;
  color: #333333;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, background-color .15s;
}
.auth-select__trigger:hover:not(:disabled) {
  border-color: #b2b7be;
}
.auth-select__trigger:focus-visible,
.auth-select__trigger.is-open {
  border-color: #c8f55a;
  box-shadow: none;
}
.auth-select__trigger.is-disabled {
  cursor: not-allowed;
  opacity: .5;
  border-color: #e8e8e8;
  background: #fafafa;
}
.auth-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-select__value.is-placeholder {
  color: #626262;
}
.auth-select__chevron {
  flex-shrink: 0;
  color: #626262;
  transition: transform .15s;
}
.auth-select__trigger.is-open .auth-select__chevron {
  transform: rotate(180deg);
}
.auth-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  background: #ffffff;
  color: #333333;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  animation: authSelectIn .15s ease;
}
@keyframes authSelectIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-select__item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px 6px 32px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  cursor: default;
  outline: none;
}
.auth-select__item.is-highlighted,
.auth-select__item:hover {
  background: #fbfbfb;
}
.auth-select__check {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #333333;
}
.auth-select__item-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field .auth-select__trigger.field-focus-flash {
  border-color: #c8f55a !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, #c8f55a 35%, transparent) !important;
  animation: fieldFocusFlash 1.2s ease;
}
[data-theme="dark"] .auth-select__trigger {
  border-color: #2c3236;
  background: #050e12;
  color: #ffffff;
}
[data-theme="dark"] .auth-select__trigger:hover:not(:disabled) {
  border-color: #505d6d;
}
[data-theme="dark"] .auth-select__trigger:focus-visible,
[data-theme="dark"] .auth-select__trigger.is-open {
  border-color: #88bd07;
}
[data-theme="dark"] .auth-select__trigger.is-disabled {
  border-color: #2c3236;
  background: #08131c;
}
[data-theme="dark"] .auth-select__value.is-placeholder {
  color: #9d9aaf;
}
[data-theme="dark"] .auth-select__chevron {
  color: #9d9aaf;
}
[data-theme="dark"] .auth-select__menu {
  border-color: #2c3236;
  background: #050e12;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .auth-select__item.is-highlighted,
[data-theme="dark"] .auth-select__item:hover {
  background: #0d1f2c;
}
[data-theme="dark"] .auth-select__check {
  color: #ffffff;
}
[data-theme="dark"] .field .auth-select__trigger.field-focus-flash {
  border-color: #88bd07 !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, #88bd07 35%, transparent) !important;
}
.field input.is-invalid {
  border-color: #c0392b;
}
.field input.is-invalid:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px color-mix(in oklab, #c0392b 12%, transparent);
}
[data-theme="dark"] .field input.is-invalid {
  border-color: #ff8a80;
}
[data-theme="dark"] .field input.is-invalid:focus {
  border-color: #ff8a80;
  box-shadow: 0 0 0 3px color-mix(in oklab, #ff8a80 15%, transparent);
}
.auth-field-error {
  color: #c0392b;
  font-size: 12px;
  margin: 0;
  line-height: 1.4;
}
[data-theme="dark"] .auth-field-error { color: #ff8a80; }

.field input.field-focus-flash,
.field select.field-focus-flash,
.otp-row input.field-focus-flash,
.auth-tos input.field-focus-flash {
  border-color: var(--fg) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent) !important;
  animation: fieldFocusFlash 1.2s ease;
}
@keyframes fieldFocusFlash {
  0% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); }
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  min-width: 0;
}
.field-row .field { margin-bottom: 0; }

.role-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.role-pick {
  border: 1px solid var(--border-strong);
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  transition: all .15s;
}
.role-pick:hover { border-color: var(--fg); }
.role-pick.active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.role-pick svg { width: 22px; height: 22px; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  font-size: 12px;
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.otp-row { display: flex; gap: 8px; margin-bottom: 16px; }
.otp-row input {
  width: 100%;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  outline: none;
}
.otp-row input:focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--fg) 10%, transparent);
}

.auth-error {
  color: #c0392b;
  font-size: 14px;
  margin: -8px 0 16px;
  line-height: 1.4;
}
[data-theme="dark"] .auth-error { color: #ff8a80; }

.auth-foot { font-size: 14px; color: var(--fg-muted); margin-top: 24px; text-align: center; }
.auth-foot a { color: var(--fg); font-weight: 500; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

.auth-tos {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  cursor: pointer;
  user-select: none;
}
.auth-tos input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.auth-tos-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-subtle);
}
.auth-tos-text a {
  color: var(--fg);
  font-weight: 500;
  text-decoration: none;
}
.auth-tos-text a:hover { text-decoration: underline; }

/* ============ Misc utilities ============ */
.muted { color: var(--fg-muted); }
.center { text-align: center; }
.row { display: flex; gap: 12px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* lang/theme menus */
.menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 160px;
  z-index: 60;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--fg);
  width: 100%;
  text-align: left;
}
.menu-item:hover { background: var(--bg-alt); }
.menu-item.active { background: var(--bg-alt); font-weight: 600; }
.menu-item .check { margin-left: auto; opacity: 0; }
.menu-item.active .check { opacity: 1; }

.menu-wrapper { position: relative; }

/* ============ For-audience page hero ============ */
/* Personalized banner shown to a clinician who arrived via a patient's invite
   link (?ref=doctor-invite). Warm accent-tinted bar above the B2B hero. */
.doc-invited-banner {
  background: color-mix(in oklch, var(--accent) 14%, var(--bg));
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 35%, var(--border));
}
.doc-invited-inner {
  display: flex; align-items: center; gap: 14px;
  padding-top: 14px; padding-bottom: 14px;
}
.doc-invited-ic {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  display: inline-flex; align-items: center; justify-content: center;
}
.doc-invited-ic svg { width: 14px; height: 14px; }
.doc-invited-text { flex: 1; margin: 0; font-size: 15px; font-weight: 500; color: var(--fg); line-height: 1.4; }
.doc-invited-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: var(--fg); color: var(--bg);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.doc-invited-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.doc-invited-cta svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .doc-invited-inner { flex-wrap: wrap; gap: 12px; }
  .doc-invited-text { flex-basis: 100%; }
}

.aud-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
  padding-top: 72px;
  padding-bottom: 64px;
}
.aud-hero h1 { font-size: clamp(36px, 4vw, 56px); margin-bottom: 20px; }
.aud-hero .hero-sub { font-size: 18px; }
.aud-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 20px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.aud-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.benefit {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.benefit-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-fg);
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 10px 14px;
  align-self: flex-start;
  margin-bottom: 16px;
  white-space: nowrap;
}
.benefit h4 { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--fg); line-height: 1.3; }
.benefit p { font-size: 14px; line-height: 1.55; color: var(--fg-muted); margin: 0; }

/* ROI calculator */
.roi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: none;
  overflow: hidden;
  width: 100%;
}
.roi-slider-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 48px;
  background: var(--bg-card);
}
.roi-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--fg-subtle);
  margin-bottom: 10px;
}
.roi-count {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  margin-bottom: 24px;
}
.roi-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--roi-pct), var(--border) var(--roi-pct), var(--border) 100%);
  outline: none;
  cursor: pointer;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: grab;
  transition: transform 0.12s ease;
}
.roi-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.roi-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: grab;
}
.roi-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
}
.roi-hint {
  font-size: 13px;
  color: var(--fg-subtle);
  margin: 18px 0 0;
  line-height: 1.4;
}
.roi-results-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 44px 48px;
  background: var(--navy);
}
.roi-hero {}
.roi-primary-num {
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.roi-primary-num .roi-unit { font-size: 0.42em; margin-left: 4px; }
.roi-primary-label {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  margin-top: 10px;
}
.roi-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.roi-stat-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.roi-stat-num .roi-unit { font-size: 0.5em; margin-left: 2px; color: rgba(255,255,255,0.55); }
.roi-stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  line-height: 1.35;
}
.benefit-grid--secondary {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
}
@media (max-width: 760px) {
  .roi { grid-template-columns: 1fr; }
  .roi-slider-section, .roi-results-panel { padding: 28px 24px; }
  .benefit-grid--secondary { grid-template-columns: 1fr; }
}

/* About page traction */
.traction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.traction-card {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}
.traction-card .num {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  font-family: var(--font-display);
}
.traction-card .num .unit { font-size: 28px; color: var(--fg-muted); margin-left: 2px; }
.traction-card .label { font-size: 14px; color: var(--fg-muted); margin-top: 8px; }
.traction-card .meta { font-size: 13px; color: var(--fg-subtle); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ============ Ops custom callout ============ */
.ops-custom-callout {
  grid-column: 1 / -1;
  background: var(--navy);
  border-radius: var(--radius-xl);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.ops-custom-callout-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 580px;
}
.ops-custom-callout-text p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  margin: 0;
}
.ops-custom-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: var(--accent);
  padding: 4px 12px;
  border-radius: 999px;
  align-self: flex-start;
}
.ops-custom-callout .btn-primary {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============ Clinic partner ticker ============ */
.clinic-ticker-wrap {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  overflow: hidden;
  gap: 0;
}
.clinic-ticker-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  white-space: nowrap;
  padding: 0 32px 0 var(--container-pad, 32px);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  margin-right: 32px;
}
.clinic-ticker-track {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
}
.clinic-ticker-inner {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: clinic-scroll 36s linear infinite;
}
.clinic-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 36px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-muted);
  white-space: nowrap;
}
.clinic-ticker-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg-subtle);
  flex-shrink: 0;
}
.clinic-ticker-city {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-subtle);
  opacity: 0.7;
  margin-left: 4px;
}
@keyframes clinic-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.clinic-ticker-wrap:hover .clinic-ticker-inner { animation-play-state: paused; }

/* Pilot section */
.pilot-section {
  background: var(--navy);
  padding: 96px 0 104px;
}
.pilot-eyebrow {
  color: var(--accent);
  margin-bottom: 20px;
}
.pilot-h {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 640px;
  line-height: 1.1;
  margin: 0;
}
.pilot-h-accent {
}
.pilot-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.pilot-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pilot-card-step {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.pilot-card-h {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.pilot-card-p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  margin: 0;
  flex: 1;
}
.pilot-card-note {
  margin-top: 8px;
  padding: 12px 16px;
  background: rgba(181,255,0,0.07);
  border-left: 2px solid var(--accent);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.6);
}

/* ============ Investors · Two Markets ============ */
.mkt-section {
  background: var(--navy);
  padding: 96px 0;
}
.mkt-eyebrow { color: var(--accent); margin-bottom: 18px; }
.mkt-h {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 780px;
  line-height: 1.08;
  margin: 0;
}
.mkt-sub {
  color: rgba(255,255,255,0.55);
  font-size: 17px;
  line-height: 1.55;
  max-width: 640px;
  margin: 18px 0 0;
}
.mkt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.mkt-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 34px 32px 30px;
  display: flex;
  flex-direction: column;
}
.mkt-card--hot {
  border-color: rgba(181,255,0,0.5);
  background: rgba(181,255,0,0.05);
}
.mkt-card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.mkt-card-tam {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.mkt-card-n {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 70px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}
.mkt-card-l {
  font-size: 16px;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  margin-top: 12px;
}
.mkt-card-meta {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
  margin-top: 12px;
  flex: 1;
}
.mkt-card-chip {
  align-self: flex-start;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-fg);
  background: var(--accent);
  padding: 6px 13px;
  border-radius: 999px;
}
/* ============ Investors · Why Bloom ============ */
.why-section { padding: 96px 0; }
.why-eyebrow { color: var(--fg-subtle); margin-bottom: 18px; }
.why-h {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fg);
  max-width: 700px;
  line-height: 1.08;
  margin: 0 0 48px;
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.why-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
}
.why-card--hot {
  border-color: rgba(100,160,0,0.45);
  box-shadow: 0 0 0 4px rgba(181,255,0,0.08);
}
.why-card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark, #6a9e00);
  margin-bottom: 16px;
}
.why-card-h {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.12;
  margin: 0;
}
.why-card-p {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.62;
  margin: 14px 0 26px;
}
.why-card-list {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.why-card-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--fg);
  font-weight: 500;
  line-height: 1.4;
}
.why-card-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(181,255,0,0.18);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.why-flywheel {
  margin-top: 24px;
  background: var(--navy);
  border-radius: 16px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.why-flywheel-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
  flex-shrink: 0;
}
.why-flywheel-p {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}

/* ============ Investors · Team ============ */
.team-section {
  background: var(--bg-alt);
  padding: 96px 0;
  border-top: 1px solid var(--border);
}
.team-eyebrow { color: var(--fg-subtle); margin-bottom: 18px; }
.team-h {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1.08;
  margin: 0;
}
.team-sub {
  color: var(--fg-muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 620px;
  margin: 18px 0 0;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
}
.team-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}
.team-li-link {
  color: var(--fg-subtle);
  transition: color 0.15s;
  flex-shrink: 0;
  margin-top: 4px;
}
.team-li-link:hover { color: var(--accent-dark, #6a9e00); }
.team-card-badge {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark, #6a9e00);
  margin-bottom: 6px;
}
.team-card-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.team-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 16px;
}
.team-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fg);
  background: rgba(181,255,0,0.16);
  border: 1px solid rgba(181,255,0,0.4);
  padding: 4px 10px;
  border-radius: 999px;
}
.team-card-bio {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.6;
  margin: auto 0 0;
}
.team-note {
  margin-top: 24px;
  background: var(--navy);
  border-radius: 16px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.team-note-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
  flex-shrink: 0;
}
.team-note-p {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  flex: 1;
  min-width: 240px;
}

/* ============ Investors · The raise ============ */
.raise-section {
  background: var(--bg-inverse);
  padding: 96px 0 104px;
}
.raise-eyebrow { color: var(--accent); margin-bottom: 18px; }
.raise-h {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.08;
  margin: 0;
}
.raise-sub {
  color: rgba(255,255,255,0.55);
  font-size: 17px;
  line-height: 1.55;
  max-width: 600px;
  margin: 16px 0 0;
}
.raise-board {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  margin-top: 44px;
}
.raise-board-left,
.raise-board-right {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 30px 32px;
}
/* — live status — */
.raise-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.raise-live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 var(--accent);
  animation: raise-pulse 2.2s ease-out infinite;
}
@keyframes raise-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 70%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.raise-live-txt {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.raise-live-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin: 8px 0 0;
}
/* — allocation bar — */
.raise-alloc { margin-top: 28px; }
.raise-alloc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.raise-alloc-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.raise-alloc-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.raise-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.raise-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 55%, transparent), var(--accent));
  animation: raise-bar-grow 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
@keyframes raise-bar-grow { to { width: 13%; } }
.raise-alloc-note {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
  margin: 14px 0 0;
}
/* — gated terms — */
.raise-board-right {
  display: flex;
  flex-direction: column;
}
.raise-terms-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 6px;
}
.raise-term {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.raise-term-l {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}
.raise-term-v {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.raise-redact {
  filter: blur(6px);
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
  color: var(--accent);
}
.raise-terms-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin-top: 22px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.raise-terms-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in oklch, var(--accent) 30%, transparent);
}
.raise-terms-note {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
  margin: 14px 0 0;
}
.raise-use-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 56px 0 20px;
}
.raise-use-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.raise-use-card {
  border-top: 2px solid var(--accent);
  padding-top: 20px;
}
.raise-use-n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 12px;
}
.raise-use-h {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 8px;
}
.raise-use-p {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0;
}
.raise-cta {
  position: relative;
  overflow: hidden;
  margin-top: 64px;
  background: var(--navy);
  border-radius: var(--radius-xl);
  padding: 56px;
}
.raise-cta-shape {
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.9;
  right: -110px; top: -110px;
}
.raise-cta-shape::after {
  content: "";
  position: absolute;
  inset: 56px;
  border-radius: 50%;
  background: var(--navy);
}
.raise-cta-inner { position: relative; z-index: 2; max-width: 560px; }
.raise-cta-h {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 14px;
}
.raise-cta-p {
  font-size: 17px;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  margin: 0 0 30px;
  max-width: 480px;
}
.raise-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ For doctors · Tool sprawl (before / after) ============ */
.sprawl-section { background: var(--bg-inverse); padding: 96px 0; }
.sprawl-eyebrow { color: var(--accent); margin-bottom: 18px; }
.sprawl-h {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.08;
  margin: 0;
  max-width: 760px;
}
.sprawl-sub {
  color: rgba(255,255,255,0.55);
  font-size: 17px;
  line-height: 1.55;
  max-width: 680px;
  margin: 18px 0 0;
}
.sprawl-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 48px;
}
.sprawl-before, .sprawl-after { display: flex; flex-direction: column; }
.sprawl-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sprawl-panel-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.sprawl-panel-label--hot { color: var(--accent); }
.sprawl-panel-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
}
.sprawl-panel-tag--muted { color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.sprawl-panel-tag--hot {
  color: var(--accent-fg);
  background: var(--accent);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 11px;
}
.sprawl-chips {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
  align-content: flex-start;
}
.sprawl-chip {
  --rot: 0deg;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 14px;
  transform: rotate(var(--rot));
  transition: transform 0.18s;
}
.sprawl-chip-n { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.82); }
.sprawl-chip-p {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.38);
}
/* subtle disorder — the pile never looks neat */
.sprawl-chip:nth-child(3n+1) { --rot: -2deg; }
.sprawl-chip:nth-child(3n+2) { --rot: 1.5deg; }
.sprawl-chip:nth-child(4n)   { --rot: -1deg; }
.sprawl-chip:nth-child(5n)   { --rot: 2.5deg; }
.sprawl-chips:hover .sprawl-chip { transform: rotate(0deg); }
.sprawl-chip--more {
  --rot: 0deg;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-style: dashed;
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.42);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
/* chips tumble into the container when scrolled into view */
@keyframes chipDrop {
  0%   { opacity: 0; transform: translateY(-44px) rotate(calc(var(--rot) - 7deg)); }
  70%  { opacity: 1; transform: translateY(4px) rotate(calc(var(--rot) + 1deg)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--rot)); }
}
.sprawl-chips.is-in .sprawl-chip {
  animation: chipDrop 0.46s cubic-bezier(0.2, 0.75, 0.3, 1) backwards;
}
.sprawl-chips.is-in .sprawl-chip:nth-child(1) { animation-delay: 0.02s; }
.sprawl-chips.is-in .sprawl-chip:nth-child(2) { animation-delay: 0.08s; }
.sprawl-chips.is-in .sprawl-chip:nth-child(3) { animation-delay: 0.14s; }
.sprawl-chips.is-in .sprawl-chip:nth-child(4) { animation-delay: 0.20s; }
.sprawl-chips.is-in .sprawl-chip:nth-child(5) { animation-delay: 0.26s; }
.sprawl-chips.is-in .sprawl-chip:nth-child(6) { animation-delay: 0.32s; }
.sprawl-chips.is-in .sprawl-chip:nth-child(7) { animation-delay: 0.38s; }
.sprawl-chips.is-in .sprawl-chip:nth-child(8) { animation-delay: 0.44s; }
.sprawl-chips.is-in .sprawl-chip:nth-child(9) { animation-delay: 0.50s; }
@media (prefers-reduced-motion: reduce) {
  .sprawl-chips.is-in .sprawl-chip { animation: none; }
}
.sprawl-arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
}
.sprawl-arrow svg { width: 22px; height: 22px; }
.sprawl-card {
  position: relative;
  overflow: hidden;
  background: rgba(181,255,0,0.07);
  border: 1.5px solid rgba(181,255,0,0.55);
  border-radius: 20px;
  padding: 26px 26px 28px;
  flex: 1;
  box-shadow: 0 0 0 4px rgba(181,255,0,0.07), 0 24px 60px -32px rgba(181,255,0,0.22);
}
.sprawl-card-glow {
  position: absolute;
  z-index: 0;
  width: 340px; height: 340px;
  right: -100px; top: -110px;
  background: radial-gradient(circle, rgba(181,255,0,0.15), transparent 70%);
  pointer-events: none;
  transform-origin: 70% 30%;
  animation: sprawlBreathe 7s ease-in-out infinite;
}
@keyframes sprawlBreathe {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50% { opacity: 0.95; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .sprawl-card-glow { animation: none; opacity: 0.7; }
}
.sprawl-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(181,255,0,0.22);
}
.sprawl-card-mark { color: var(--accent); font-size: 18px; line-height: 1; }
.sprawl-card-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #fff;
}
.sprawl-card-dot { color: rgba(255,255,255,0.3); }
.sprawl-card-subt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.5);
}
.sprawl-card-h {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 18px;
}
.sprawl-card-list { position: relative; z-index: 1; }
.sprawl-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.sprawl-card-list li {
  position: relative;
  padding-left: 28px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.9);
  line-height: 1.45;
}
.sprawl-card-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.sprawl-foot { font-size: 13px; line-height: 1.55; margin: 16px 0 0; min-height: 40px; }
.sprawl-foot--pain { color: rgba(255,255,255,0.45); }
.sprawl-foot--gain { color: rgba(181,255,0,0.85); }

/* ============ For doctors · How it works ============ */
.flow-sub {
  color: var(--fg-muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 640px;
  margin: 14px 0 0;
}
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.flow-step {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
}
/* connector arrows between steps */
.flow-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -13px;
  top: 44px;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--border-strong);
  z-index: 2;
}
.flow-step--hot {
  border-color: rgba(100,160,0,0.45);
  box-shadow: 0 0 0 4px rgba(181,255,0,0.08);
}
.flow-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.flow-step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark, #6a9e00);
}
.flow-step-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--navy);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-step-icon svg { width: 20px; height: 20px; }
.flow-step--hot .flow-step-icon { background: var(--accent); color: var(--accent-fg); }
.flow-step-h {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 8px;
}
.flow-step-p {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 0;
}

/* responsive */
@media (max-width: 960px) {
  .hero-grid, .two-col, .auth-page, .aud-hero { grid-template-columns: 1fr; gap: 32px; }
  .aud-hero { padding-top: 44px; padding-bottom: 40px; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-side { padding: 48px 32px; }
  .auth-shape { display: none; }
  .auth-side > div:last-child { margin-top: 28px; }
  .raise-cta-shape { display: none; }
  .auth-form-wrap { padding: 48px 32px; }
  .feature-grid, .pricing-grid, .traction-grid, .mkt-grid, .why-grid { grid-template-columns: 1fr; }
  .team-grid, .raise-board, .raise-use-grid { grid-template-columns: 1fr; }
  .pilot-steps { grid-template-columns: 1fr; margin-top: 32px; }
  /* clinic ticker: stack the label above so the scrolling names get full width */
  .clinic-ticker-wrap { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 0; }
  .clinic-ticker-label { border-right: none; margin-right: 0; padding: 0 20px; }
  .clinic-ticker-track { width: 100%; flex: none; }
  /* touch has no hover — show credential logos in full colour by default */
  .c-partner-logo { opacity: 1; filter: none; }
  .raise-cta { padding: 40px 28px; }
  .sprawl-grid { grid-template-columns: 1fr; gap: 16px; }
  .sprawl-arrow { transform: rotate(90deg); margin: 2px 0; }
  .flow-steps { grid-template-columns: repeat(2, 1fr); }
  .flow-step:not(:last-child)::after { display: none; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .stat-strip-item { border-right: 0; min-width: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; margin-bottom: 40px; }
  .footer-grid > :first-child { grid-column: 1 / -1; margin-bottom: 4px; }
  .footer-tagline { max-width: none; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-mobile-actions { display: flex; }
  .nav-mobile { display: block; }
  .hero { padding: 48px 0; }
  .hero-visual { display: none; }
  .section { padding: 64px 0; }
  .cta-banner { padding: 44px 28px; }
  .cta-shape { display: none; }
  .workflow-visual { padding: 18px; aspect-ratio: auto; min-height: 320px; }
  .container { padding-left: 20px; padding-right: 20px; }
  .compare-table th, .compare-table td { padding: 12px 14px; font-size: 13px; }
  .quote-card { padding: 32px; }
  .quote-card blockquote { font-size: 22px; }
}

/* ====================================================================
   B2C CONSUMER LANDING
   ==================================================================== */
.consumer h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }
.c-head { max-width: 760px; }
.c-head.center { margin: 0 auto; text-align: center; }
.c-lead { font-size: 18px; line-height: 1.6; color: var(--fg-muted); margin-top: 16px; }
.c-lead.on-dark { color: rgba(255,255,255,0.72); }

/* phones */
.cphone {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.45), 0 0 0 9px #0d0d0f, 0 0 0 10px rgba(255,255,255,0.06);
}
.cphone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cphone-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 22px; background: #000; border-radius: 16px; z-index: 2;
}

/* hero */
.c-hero { padding: 72px 0 64px; overflow: hidden; }
.c-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.c-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 18%, var(--bg));
  border: 1px solid color-mix(in oklch, var(--accent) 45%, var(--border));
  font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 22px;
}
.c-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 30%, transparent); }
.c-badge-soon { background: color-mix(in oklch, var(--c-purple) 14%, var(--bg)); border-color: color-mix(in oklch, var(--c-purple) 40%, var(--border)); }
.c-badge-soon .c-badge-dot { background: var(--c-purple); box-shadow: 0 0 0 4px color-mix(in oklch, var(--c-purple) 30%, transparent); }
.c-hero-h { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 20px; }
.c-hero-sub { font-size: 20px; line-height: 1.5; color: var(--fg-muted); max-width: 520px; margin-bottom: 32px; }
/* trial offer — the emotional call-to-action leading into the store badges */
.c-hero-offer { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; margin: 0 0 14px; }
.c-hero-offer-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: color-mix(in oklch, var(--accent) 22%, transparent); color: var(--accent-ink); }
.c-hero-offer-ic svg { width: 15px; height: 15px; }
.c-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* hero store badges = primary action. Visitor's platform is the lime one. */
.hero-stores { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stores .store-badge { padding: 12px 20px; border-radius: 14px; }
.hero-stores .store-ic svg { width: 26px; height: 26px; }
.hero-stores .store-txt { font-size: 15px; }
.hero-stores .store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hero-stores .store-badge.dark:hover { box-shadow: 0 10px 24px -8px color-mix(in oklch, var(--accent) 60%, transparent); }

.c-hero-subrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }

/* desktop-only "scan to install on your phone" — compact chip that reveals a QR */
.hero-qr { position: relative; display: inline-flex; }
.hero-qr-trigger { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--fg-muted); transition: color .15s; }
.hero-qr-trigger:hover { color: var(--fg); }
.hero-qr-ic { width: 16px; height: 16px; flex-shrink: 0; }
.hero-qr-pop {
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: hero-qr-rise .28s cubic-bezier(0.16, 1, 0.3, 1);
}
/* keep translateX(-50%) through the whole animation so the popover never
   snaps sideways when the entrance finishes (that was the "jump") */
@keyframes hero-qr-rise {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.hero-qr-code { width: 156px; height: 156px; background: #fff; border-radius: 10px; padding: 10px; }
.hero-qr-code svg { width: 100%; height: 100%; display: block; }
.hero-qr-label { font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; }
.c-hero-nocc { font-size: 13px; color: var(--fg-subtle); margin: 0; }
.c-hero-seehow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--fg-muted); transition: color .15s; }
.c-hero-seehow:hover { color: var(--fg); }
.c-hero-seehow svg { width: 14px; height: 14px; transition: transform .15s; }
.c-hero-seehow:hover svg { transform: translateX(3px); }
.c-hero-trust { display: flex; gap: 36px; margin-top: 44px; }
.c-hero-trust > div { display: flex; flex-direction: column; gap: 2px; }
.c-trust-n { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.c-trust-l { font-size: 13px; color: var(--fg-subtle); }

.c-hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
.c-blob {
  position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklch, var(--accent) 65%, transparent), color-mix(in oklch, var(--accent) 10%, transparent) 70%);
  filter: blur(8px); z-index: 0;
}
.c-hero-phone { width: 280px; height: 580px; position: relative; z-index: 1; }
.c-chip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 12px 14px; box-shadow: var(--shadow-lg); font-size: 13px;
}
.c-chip-emoji { font-size: 22px; }
.c-chip-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; }
.c-chip-ic svg { width: 16px; height: 16px; }
.c-chip-t { font-weight: 700; color: var(--fg); }
.c-chip-s { font-size: 11px; color: var(--fg-subtle); }
.c-chip-1 { top: 30px; right: 2px; z-index: 4; }
.c-chip-2 { bottom: 90px; right: -16px; }

/* ===== Hero phone showcase (live product loop, exact Figma SVG screens) ===== */
.pho { position: relative; width: max-content; margin: 0 auto; }
.pho-frame {
  position: relative; z-index: 1;
  width: 300px; height: 640px;
  background: #0a0c10;
  border-radius: 46px; overflow: hidden;
  box-shadow: 0 0 0 10px #0a0c10, 0 0 0 11px rgba(255,255,255,0.08),
              0 48px 100px -36px rgba(20,30,45,0.45), 0 0 70px -30px rgba(181,255,0,0.12);
}
/* real app screenshots — stacked, cross-faded by GSAP */
.pho-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block; will-change: opacity, transform;
}
.pho-s-voice { z-index: 2; }
.pho-s-proc { z-index: 3; }
/* real screen recording of the app */
.pho-video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 10px); height: calc(100% - 10px);
  border-radius: 40px;
  object-fit: cover; object-position: center top; display: block;
}
.pho-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; background: #0a0c10; border-radius: 14px; z-index: 6; }
.pho-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 2px; color: #1a1f2b; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pho-sysic { display: flex; align-items: center; gap: 6px; color: #1a1f2b; }
.pho-sysic svg { fill: currentColor; }
.pho-batt { width: 22px; height: 11px; border: 1px solid rgba(26,31,43,0.45); border-radius: 3px; padding: 1.5px; position: relative; }
.pho-batt::after { content: ''; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px; background: rgba(26,31,43,0.45); border-radius: 0 1px 1px 0; }
.pho-batt-fill { display: block; width: 62%; height: 100%; background: #1a1f2b; border-radius: 1.5px; }

.pho-appbar { display: flex; justify-content: space-between; align-items: center; padding: 4px 18px 8px; }
.pho-brand { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: #1a1f2b; display: flex; align-items: center; gap: 5px; }
.pho-brand-star { color: #97d700; font-size: 15px; }
.pho-bell { position: relative; color: #1a1f2b; display: flex; }
.pho-bell-dot { position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: 50%; background: #ff5a4d; border: 1.5px solid #fff; }

.pho-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4px 12px; }
.pho-home { width: 100%; display: flex; align-items: center; justify-content: center; }
.pho-eb-host { width: 100%; }
.pho-eb-host svg { width: 100%; height: auto; display: block; }

.pho-tabs { display: flex; justify-content: space-between; align-items: center; padding: 8px 26px 14px; border-top: 1px solid #eef0f2; background: #fff; }
.pho-tab { color: #aab2bd; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pho-tab i { font-style: normal; font-size: 8.5px; font-weight: 600; }
.pho-tab.on { color: #1a1f2b; }
.pho-fab { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #1a1f2b; display: flex; align-items: center; justify-content: center; box-shadow: 0 7px 18px rgba(181,255,0,0.45); margin-top: -8px; }

/* full-screen modal scenes — the exact Figma SVGs (gray bg blends with letterbox) */
.pho-modal { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; background: #F0F1F3; }
.pho-m-proc { z-index: 21; }

/* floating feature cues (pop above the mock) */
.pho-cue { position: absolute; z-index: 30; will-change: transform, opacity; }
.pho-cue-float { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #eef0f2; border-radius: 14px; padding: 8px 13px 8px 9px; box-shadow: 0 16px 36px -14px rgba(20,30,45,0.30); animation: pho-cue-float 3.2s ease-in-out infinite; }
@keyframes pho-cue-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.pho-cue-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pho-cue-ic--lime { background: color-mix(in oklch, var(--accent) 24%, #fff); color: #3f6d00; }
.pho-cue-ic--dark { background: #1a1f2b; color: #fff; }
.pho-cue-star { color: var(--accent); font-size: 16px; line-height: 1; filter: drop-shadow(0 0 4px rgba(181,255,0,0.55)); }
.pho-cue-t { font-size: 12.5px; font-weight: 700; color: #1a1f2b; letter-spacing: -0.01em; line-height: 1.15; }
.pho-cue-s { font-size: 11px; color: #7a828d; margin-top: 2px; white-space: nowrap; }
.pho-cue-macro  { top: 15%; left: -58px; }
.pho-cue-voice  { top: 45%; right: -76px; }
.pho-cue-ai     { bottom: 12%; left: -52px; }
.pho-cue-adjust { top: 38%; right: -68px; }
.pho-cue-day    { bottom: 12%; left: -52px; }
.pho-cue-voice .pho-cue-float  { animation-delay: 0.7s; }
.pho-cue-ai .pho-cue-float     { animation-delay: 1.4s; }
.pho-cue-adjust .pho-cue-float { animation-delay: 0.7s; }
.pho-cue-day .pho-cue-float    { animation-delay: 1.4s; }

@media (max-width: 560px) {
  .pho-frame { width: 270px; height: 576px; }
  .pho-cue-macro { left: -24px; } .pho-cue-voice { right: -28px; } .pho-cue-ai { left: -20px; } .pho-cue-adjust { right: -24px; } .pho-cue-day { left: -20px; }
  .container.pricing-hero-head .pricing-hero-copy { min-height: 262px; }
}
/* proof bar */
.c-store-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.c-store-badges.center-badges { justify-content: center; margin: 28px 0; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 12px; background: var(--fg); color: var(--bg);
  transition: transform .15s, opacity .15s;
}
.store-badge:hover { transform: translateY(-2px); }
.store-badge.dark { background: var(--accent); color: var(--accent-fg); }
.store-ic svg { width: 28px; height: 28px; }
.store-txt { font-size: 14px; font-weight: 600; }

/* alt section bg */
.c-alt { background: var(--bg-alt); }

/* feature grid */
.c-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.c-feat {
  padding: 28px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.c-feat h3 { font-size: 19px; margin: 0; transition: color .28s ease; }
.c-feat p { font-size: 14px; line-height: 1.55; color: var(--fg-muted); margin: 0; transition: color .28s ease; }
.c-feat-ic { width: 48px; height: 48px; border-radius: 14px; background: color-mix(in oklch, var(--accent) 22%, var(--bg-alt)); color: var(--fg); display: flex; align-items: center; justify-content: center; transition: background .28s ease, color .28s ease; }
.c-feat-ic svg { width: 24px; height: 24px; }

/* AI card — темная по умолчанию (light mode) */
.c-feat.accent { background: var(--fg); border-color: transparent; }
.c-feat.accent h3 { color: var(--bg); }
.c-feat.accent p { color: rgba(255,255,255,0.65); }
.c-feat.accent .c-feat-ic { background: var(--accent); color: var(--accent-fg); }

/* Когда наводим на НЕ-AI карточку — AI становится светлой (light mode) */
.c-feature-grid:has(.c-feat:not(.accent):hover) .c-feat.accent {
  background: var(--bg-card); border-color: var(--border);
}
.c-feature-grid:has(.c-feat:not(.accent):hover) .c-feat.accent h3 { color: var(--fg); }
.c-feature-grid:has(.c-feat:not(.accent):hover) .c-feat.accent p { color: var(--fg-muted); }
.c-feature-grid:has(.c-feat:not(.accent):hover) .c-feat.accent .c-feat-ic { background: color-mix(in oklch, var(--accent) 22%, var(--bg-alt)); color: var(--fg); }

/* hover → тёмный для всех карточек (light mode) */
.c-feat:hover { background: var(--fg); border-color: transparent; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
.c-feat:hover h3 { color: var(--bg); }
.c-feat:hover p { color: rgba(255,255,255,0.65); }
.c-feat:hover .c-feat-ic { background: var(--accent); color: var(--accent-fg); }

/* Dark mode — переопределяем (в тёмной теме --fg = белый, нельзя использовать как тёмный фон) */
[data-theme="dark"] .c-feat.accent {
  background: var(--bg-elevated); border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent);
}
[data-theme="dark"] .c-feat.accent h3 { color: var(--fg); }
[data-theme="dark"] .c-feat.accent p { color: var(--fg-muted); }
[data-theme="dark"] .c-feat.accent .c-feat-ic { background: var(--accent); color: var(--accent-fg); }

[data-theme="dark"] .c-feature-grid:has(.c-feat:not(.accent):hover) .c-feat.accent {
  background: var(--bg-card); border-color: var(--border); box-shadow: none;
}
[data-theme="dark"] .c-feature-grid:has(.c-feat:not(.accent):hover) .c-feat.accent h3 { color: var(--fg); }
[data-theme="dark"] .c-feature-grid:has(.c-feat:not(.accent):hover) .c-feat.accent p { color: var(--fg-muted); }

[data-theme="dark"] .c-feat:hover {
  background: var(--bg-elevated); border-color: var(--border-strong);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
[data-theme="dark"] .c-feat:hover h3 { color: var(--fg); }
[data-theme="dark"] .c-feat:hover p { color: var(--fg-muted); }
[data-theme="dark"] .c-feat:hover .c-feat-ic { background: var(--accent); color: var(--accent-fg); }

/* AI sparkle animation — появление/исчезновение без вращения */
@keyframes ai-twinkle {
  0%        { opacity: 0;   transform: scale(0.3); }
  20%, 50%  { opacity: 1;   transform: scale(1);   }
  80%, 100% { opacity: 0;   transform: scale(0.3); }
}
.c-ai-anim path { transform-box: fill-box; transform-origin: center; }
.c-ai-anim .c-ai-s1 { animation: ai-twinkle 2.8s ease-in-out infinite 0.0s; }
.c-ai-anim .c-ai-s2 { animation: ai-twinkle 2.8s ease-in-out infinite 0.7s; }
.c-ai-anim .c-ai-s3 { animation: ai-twinkle 2.8s ease-in-out infinite 1.4s; }
.c-ai-anim .c-ai-s4 { animation: ai-twinkle 2.8s ease-in-out infinite 2.0s; }
.c-ai-anim .c-ai-s5 { animation: ai-twinkle 2.8s ease-in-out infinite 0.4s; }

/* split sections */
.c-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.c-split.reverse > .c-split-copy { order: 2; }
.c-split-visual { display: flex; justify-content: center; }
.c-split-phone { width: 260px; height: 540px; }
.c-check-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.c-check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--fg); line-height: 1.45; }
.c-check-list--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.c-check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.c-check svg { width: 13px; height: 13px; }

/* AI chat card */
.c-chatcard { width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 22px; box-shadow: var(--shadow-lg); }
.c-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.c-chat-ava { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; }
.c-chat-ava svg { width: 20px; height: 20px; }
.c-chat-name { font-weight: 700; color: var(--fg); }
.c-chat-st { font-size: 12px; color: var(--fg-subtle); }
.c-bubble { padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.45; margin-bottom: 10px; max-width: 86%; }
.c-bubble.user { background: var(--bg-alt); color: var(--fg); margin-left: auto; border-bottom-right-radius: 5px; }
.c-bubble.bot { background: var(--accent); color: var(--accent-fg); border-bottom-left-radius: 5px; font-weight: 500; }
.c-chat-input { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--border); color: var(--fg-subtle); font-size: 14px; }
.c-chat-send { width: 30px; height: 30px; border-radius: 50%; background: var(--fg); color: var(--bg); display: flex; align-items: center; justify-content: center; }
.c-chat-send svg { width: 14px; height: 14px; }

/* Animated conversation. Fixed-height window (card never resizes), and
   column-reverse pins the thread to the bottom like a real messenger: the
   newest bubble stays put at the bottom while older ones drift up under the
   fade — so nothing jumps as the conversation grows. */
.c-chat-body { display: flex; flex-direction: column; }
.c-chat-msgs {
  display: flex; flex-direction: column-reverse; gap: 10px;
  height: 250px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
}
.c-chat-msgs .c-bubble { margin-bottom: 0; }
.c-bubble-in { animation: c-bubble-in .38s cubic-bezier(0.22, 1, 0.36, 1) both; }
.c-bubble.user.c-bubble-in { transform-origin: bottom right; }
.c-bubble.bot.c-bubble-in { transform-origin: bottom left; }
@keyframes c-bubble-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.c-bubble-typing { display: inline-flex; align-items: center; gap: 5px; width: auto; padding: 14px 16px; }
.c-bubble-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fg); animation: c-typing 1.1s infinite ease-in-out; }
.c-bubble-typing span:nth-child(2) { animation-delay: .15s; }
.c-bubble-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes c-typing { 0%, 65%, 100% { opacity: .35; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-4px); } }

/* Live input: the question is typed here with a blinking caret before it's sent. */
.c-chat-input-text { flex: 1; min-width: 0; display: inline-flex; align-items: center; overflow: hidden; white-space: nowrap; }
.c-chat-ph { color: var(--fg-subtle); }
/* normal left-to-right typing; the caret trails the text on the right */
.c-chat-input.is-active .c-chat-input-text { justify-content: flex-start; color: var(--fg); }
.c-chat-input.is-active { border-color: var(--border-strong); }
.c-chat-caret { flex-shrink: 0; display: inline-block; width: 1.5px; height: 15px; margin-left: 2px; background: var(--accent); animation: c-caret 1.05s step-end infinite; }
@keyframes c-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.c-chat-send { transition: background .2s ease, color .2s ease; }
.c-chat-input.is-active .c-chat-send { background: var(--accent); color: var(--accent-fg); }

@media (prefers-reduced-motion: reduce) {
  .c-bubble-in { animation: none; }
  .c-bubble-typing span { animation: none; }
  .c-chat-caret { animation: none; }
}

/* insights card */
/* analytics section layout */
.c-analytics-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.c-analytics-mocks { display: flex; flex-direction: column; gap: 10px; max-width: 88%; }
.c-figma-card { width: 100%; height: auto; display: block; border-radius: 20px; }
/* dark mode: these are light app-screenshot PNGs (no dark export). Frame them on an
   elevated surface so they read as intentional screenshots rather than raw white blocks. */
[data-theme="dark"] .c-figma-card {
  padding: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px -26px rgba(0,0,0,0.8);
}
.c-analytics-copy { display: flex; flex-direction: column; justify-content: center; }
.c-analytics-h { font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 12px 0 16px; }
.c-analytics-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.c-analytics-features li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--fg-muted); }
.c-af-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* weight card */
.c-insightcard { background: linear-gradient(180deg, #fff 0%, #f9f9f9 100%); border: 1px solid #e8e8e8; border-radius: 24px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
.c-wcard { padding: 22px 22px 14px; }
.c-wcard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.c-wcard-title { font-size: 26px; font-weight: 800; color: var(--fg); letter-spacing: -0.02em; }
.c-wcard-badge { display: flex; align-items: center; gap: 8px; background: #333; border-radius: 999px; padding: 6px 7px 6px 14px; }
.c-wcard-badge-val { display: flex; align-items: flex-end; gap: 1px; }
.c-wcard-badge-val-num { font-size: 20px; font-weight: 700; color: white; line-height: 1; letter-spacing: -0.02em; }
.c-wcard-badge-val-unit { font-size: 12px; font-weight: 500; color: white; opacity: 0.5; line-height: 16px; }
.c-wcard-badge-ic { width: 26px; height: 26px; border-radius: 50%; background: #a3e635; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.c-wcard-chart-wrap { width: 100%; }
.c-wcard-svg { width: 100%; height: auto; display: block; }

/* body comp row */
.c-bodycomp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-bodycomp-card { position: relative; background: linear-gradient(180deg, #fff 0%, #f9f9f9 100%); border: 1px solid #e8e8e8; border-radius: 24px; padding: 20px 20px 0; box-shadow: 0 2px 16px rgba(0,0,0,0.06); overflow: hidden; min-height: 185px; }
.c-bodycomp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.c-bodycomp-title { font-size: 24px; font-weight: 800; color: var(--fg); letter-spacing: -0.02em; }
.c-bodycomp-badge { display: flex; align-items: center; gap: 5px; background: #333; border-radius: 999px; padding: 4px 5px 4px 11px; }
.c-bodycomp-badge span:first-child { font-size: 13px; font-weight: 600; color: white; letter-spacing: -0.01em; }
.c-bodycomp-ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.c-bodycomp-ic--green { background: #a3e635; }
.c-bodycomp-ic--red { background: #ef4444; }
.c-bodycomp-val { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); line-height: 1; margin-bottom: 5px; }
.c-bodycomp-sub { font-size: 13px; color: var(--fg-subtle); }
.c-bodycomp-arc { position: absolute; bottom: -28px; right: -28px; width: 160px; height: 160px; }

/* old stats kept for compatibility */
.c-ins-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.c-ins-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: color-mix(in oklch, var(--c-purple) 16%, transparent); color: var(--c-purple); }
.c-ins-chart { width: 100%; height: 100px; }
.c-ins-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.c-ins-n { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.c-ins-l { font-size: 12px; color: var(--fg-subtle); }

/* clinical band */
.c-clinical { background: var(--bg-inverse); color: #fff; padding: 88px 0; }
.c-clinical h2 { color: #fff; }
.section-eyebrow.on-dark { color: var(--accent); }
.c-clin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.c-clin-card { padding: 26px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
.c-clin-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.c-clin-ic svg { width: 22px; height: 22px; }
.c-clin-card h4 { font-size: 17px; margin: 0 0 8px; color: #fff; }
.c-clin-card p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.66); margin: 0; }
/* awards */
.c-awards-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.12); }
.c-award { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 240px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); transition: background 0.2s, border-color 0.2s; text-decoration: none; }
.c-award:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.c-award-logo { width: 56px; height: 56px; border-radius: 12px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 8px; overflow: hidden; }
.c-award-logo--light { background: rgba(255,255,255,0.92); }
.c-award-logo--dark { background: #1a1a2e; }
.c-award-logo--transparent { background: transparent; }
.c-award-logo--f6s { background: #fff; padding: 6px; overflow: hidden; border-radius: 12px; }
.c-award-logo--f6s img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.c-award-logo img { width: 100%; height: 100%; object-fit: contain; }
.c-award-k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 3px; }
.c-award-h { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 6px; }
.c-award-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: rgba(255,255,255,0.45); transition: color 0.15s; }
.c-award-link svg { width: 11px; height: 11px; }
.c-award:hover .c-award-link { color: var(--accent); }

/* partners strip */
.c-partners { padding: 28px 0; border-bottom: 1px solid var(--border); }
.c-partners-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-subtle); text-align: center; margin-bottom: 20px; }

/* Marquee of the credential logos. Auto-advance is a plain CSS transform
   animation on the track (GPU-composited — smooth by construction, no JS
   driving it frame-by-frame, no rounding jitter). Logos are rendered twice
   (JSX) and the animation loops at -50% for a seamless cycle.

   IMPORTANT — this wrapper is deliberately NOT a user-scrollable container.
   It used to be `overflow-x: auto` (finger-draggable), but a full-width
   horizontal scroll surface with `-webkit-overflow-scrolling: touch` is a
   notorious iOS Safari cause of the whole page rubber-banding sideways —
   `overscroll-behavior-x: contain` does not fully stop it on WebKit. Since it
   was the only horizontal-scroll surface on the site, removing user-scroll
   removes that entire class of "layout drags left/right" bug at the source.
   `overflow: clip` still hides the off-screen half of the track; the CSS
   auto-advance is untouched; `touch-action: pan-y` guarantees a finger on the
   strip only ever scrolls the page vertically, never pans horizontally. */
.c-partners-marquee {
  overflow: clip;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  transform: translateZ(0); /* own compositing layer for the animated track */
}
.c-partners-track {
  display: flex; align-items: center; width: max-content;
  animation: c-partners-scroll 25s linear infinite;
  will-change: transform;
}
.c-partners-marquee.is-paused .c-partners-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  /* Real mouse/trackpad only — touch devices can report a lingering :hover
     after a tap, which would otherwise leave the animation paused for good. */
  .c-partners-marquee:hover .c-partners-track { animation-play-state: paused; }
}
@keyframes c-partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .c-partners-track { animation: none; }
}
.c-partner-logo {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  margin: 0 26px; opacity: 0.9; filter: none;
  transition: opacity 0.2s;
}
.c-partner-logo:hover { opacity: 1; }
.c-partner-logo img { height: 32px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.c-partner-logo .cpl-dark { display: none; }

/* Dark mode: clean bright white monochrome marks — no band, no chips (the way
   Stripe / Linear / Vercel present a logo wall on a dark page). The two tile
   logos (opaque blue / dark tile) swap to a pre-baked transparent silhouette so
   they invert to white cleanly instead of becoming solid blobs. */
[data-theme="dark"] .c-partner-logo { opacity: 0.85; filter: brightness(0) invert(1); }
[data-theme="dark"] .c-partner-logo:hover { opacity: 1; }
[data-theme="dark"] .c-partner-logo.has-dark .cpl-light { display: none; }
[data-theme="dark"] .c-partner-logo.has-dark .cpl-dark { display: block; }

/* glucose card */
.c-glucard { width: 100%; max-width: 460px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 22px; box-shadow: var(--shadow-lg); }
.c-glu-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--fg); font-size: 14px; margin-bottom: 12px; }
.c-glu-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-coral); box-shadow: 0 0 0 4px color-mix(in oklch, var(--c-coral) 25%, transparent); }
.c-glu-chart { width: 100%; height: 150px; }
.c-glu-meals { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.c-glu-meal { font-size: 12px; color: var(--fg-muted); display: flex; flex-direction: column; gap: 2px; background: var(--bg-alt); padding: 8px 12px; border-radius: 10px; }
.c-glu-spike { color: var(--c-coral); font-weight: 700; font-size: 11px; }
.c-glu-flat { color: #1f9d55; font-weight: 700; font-size: 11px; }
.c-glu-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--fg-muted); padding: 12px 14px; background: color-mix(in oklch, var(--accent) 12%, var(--bg-alt)); border-radius: 12px; }
.c-glu-val { margin-left: auto; font-size: 15px; font-weight: 700; color: #1f9d55; }

/* CGM waitlist: the "Join the waitlist" trigger morphs in place into an email
   field, then — once joined — into an optional one-tap device question. No
   modal, no page navigation; every state shares the same soft slide-in so the
   section never jumps. */
@keyframes cgm-wl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cgm-wl-form, .cgm-wl-followup, .cgm-wl-done {
  margin-top: 28px;
  animation: cgm-wl-in .32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cgm-wl-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cgm-wl-form input[type="email"] {
  flex: 1 1 220px; min-width: 0; padding: 13px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--fg);
  font-size: 15px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s;
}
.cgm-wl-form input[type="email"]::placeholder { color: var(--fg-subtle); }
.cgm-wl-form input[type="email"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent); }
.cgm-wl-form input[aria-invalid="true"] { border-color: #e5484d; }
.cgm-wl-form button[type="submit"] {
  flex-shrink: 0; padding: 13px 24px; border-radius: var(--radius-pill);
  background: var(--fg); color: var(--bg); font-weight: 600; font-size: 15px; font-family: inherit;
  min-width: 118px; display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
.cgm-wl-form button[type="submit"]:not(:disabled):hover { opacity: .85; }
.cgm-wl-form button[type="submit"]:disabled { opacity: .7; cursor: default; }
.cgm-wl-error { flex-basis: 100%; margin: 0; font-size: 13px; color: #e5484d; }

.cgm-wl-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--bg) 35%, transparent);
  border-top-color: var(--bg);
  animation: cgm-wl-spin .6s linear infinite;
}
@keyframes cgm-wl-spin { to { transform: rotate(360deg); } }

.cgm-wl-success { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-weight: 600; color: var(--fg); }
.cgm-wl-followup-q { margin: 0 0 12px; font-size: 14px; color: var(--fg-muted); }
.cgm-wl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cgm-wl-chip {
  padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--bg-card); color: var(--fg); font-size: 14px; font-weight: 500; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.cgm-wl-chip:hover { border-color: var(--accent); background: var(--bg-alt); }
.cgm-wl-chip.ghost { border-style: dashed; color: var(--fg-subtle); }

/* Visible "already joined" pill — a bare text line here read as "the CTA
   disappeared", so the state gets the accent treatment */
.cgm-wl-done {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--fg);
  padding: 12px 20px; border-radius: 100px;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .cgm-wl-form, .cgm-wl-followup, .cgm-wl-done { animation: none; }
  .cgm-wl-spinner { animation-duration: 1.4s; }
}

/* bridge */
/* Bridge section */
.c-bridge-section { background: transparent; }
.c-bridge {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 56px 60px;
  background: var(--bg-inverse);
  border-radius: 32px;
  position: relative; overflow: hidden;
}
/* decorative accent glow top-right — removed */
.c-bridge::before { content: none; }
/* decorative dot grid bottom-left */
.c-bridge::after {
  content: '';
  position: absolute; bottom: -2px; left: 40px;
  width: 180px; height: 120px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}
.c-bridge-copy .section-eyebrow { color: var(--accent); opacity: 1; margin-bottom: 16px; display: block; }
.c-bridge-copy h2 { color: #fff; margin: 0 0 16px; }
.c-bridge-copy .c-lead { color: rgba(255,255,255,0.55); margin: 0; }
.c-bridge-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 32px;
  padding: 14px 26px; border-radius: 100px;
  background: #fff; color: #1a1f2b;
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: none; cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.c-bridge-btn:hover { background: var(--accent); color: var(--accent-fg); transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in oklch, var(--accent) 35%, transparent); }
.c-bridge-btn svg { width: 16px; height: 16px; }

/* Doctor-invite flow — lives on the always-dark bridge card, so everything is
   styled light-on-dark regardless of the site theme. Shares the cgm-wl-in
   entrance keyframe so the block never jumps as it morphs between states. */
.doc-invite { margin-top: 32px; animation: cgm-wl-in .32s cubic-bezier(0.22, 1, 0.36, 1) both; }
.doc-invite-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.doc-invite-form input[type="email"] {
  flex: 1 1 240px; min-width: 0; padding: 14px 18px; border-radius: 100px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 15px; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.doc-invite-form input[type="email"]::placeholder { color: rgba(255,255,255,0.4); }
.doc-invite-form input[type="email"]:focus {
  border-color: var(--accent); background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent);
}
.doc-invite-form input[aria-invalid="true"] { border-color: #ff6b6b; }
.doc-invite-form button[type="submit"] {
  flex-shrink: 0; padding: 14px 26px; border-radius: 100px;
  background: var(--accent); color: var(--accent-fg);
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; border: none;
  min-width: 132px; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease, opacity .15s;
}
.doc-invite-form button[type="submit"]:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in oklch, var(--accent) 35%, transparent); }
.doc-invite-form button[type="submit"]:disabled { opacity: .7; cursor: default; }
.doc-invite-form .cgm-wl-spinner { border-color: color-mix(in oklch, var(--accent-fg) 30%, transparent); border-top-color: var(--accent-fg); }
.doc-invite-error { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; color: #ff8f8f; }

.doc-invite-share { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.doc-invite-share-label { font-size: 13px; color: rgba(255,255,255,0.45); }
.doc-invite-share-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.doc-invite-share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 100px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-size: 13px; font-weight: 500; font-family: inherit; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.doc-invite-share-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
.doc-invite-share-btn svg { width: 15px; height: 15px; }

.doc-invite-success { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 4px; color: #fff; font-weight: 500; line-height: 1.5; }
.doc-invite-success .c-check { flex-shrink: 0; margin-top: 2px; }
.doc-invite-success strong { font-weight: 700; }
.doc-invite-again {
  margin-top: 16px; background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(255,255,255,0.6); font-size: 13px; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.doc-invite-again:hover { color: #fff; }
.c-check.c-check--sm { width: 18px; height: 18px; }

/* Bright "now get the app" step shown after an invite is sent — the patient's
   own conversion (whoever just invited a doctor most likely isn't logging yet).
   Lime-tinted panel so it stands out on the dark bridge card. */
.doc-get {
  margin: 18px 0 4px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding: 16px 18px; border-radius: 18px;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent);
}
.doc-get-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc-get-h { color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; }
.doc-get-sub { color: rgba(255,255,255,0.6); font-size: 13px; line-height: 1.45; }
.doc-get-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 100px;
  background: var(--accent); color: var(--accent-fg);
  font-size: 15px; font-weight: 700; font-family: inherit; text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.doc-get-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in oklch, var(--accent) 40%, transparent); }
.doc-get-btn svg { width: 15px; height: 15px; }
@media (max-width: 480px) {
  .doc-get { flex-direction: column; align-items: stretch; }
  .doc-get-btn { justify-content: center; }
}

/* Flow steps — redesigned */
.c-bridge-flow { display: flex; flex-direction: column; gap: 0; position: relative; }
.c-flow-item { display: flex; gap: 16px; position: relative; }
.c-flow-item:not(:last-child) { padding-bottom: 8px; }
/* connecting line between steps */
.c-flow-connector {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 0 0 8px;
  flex-shrink: 0; width: 40px;
}
.c-flow-connector-line { flex: 1; width: 1px; background: rgba(255,255,255,0.12); min-height: 20px; }
.c-flow-step-body { padding: 16px 18px; border-radius: 18px; flex: 1; margin-bottom: 8px; transition: background .2s; }
.c-flow-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.45); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 16px;
}
.c-flow-step-body { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); }
.c-flow-step-body.active {
  background: var(--accent); border-color: transparent;
  box-shadow: 0 0 40px color-mix(in oklch, var(--accent) 45%, transparent), 0 4px 16px rgba(0,0,0,0.2);
}
.c-flow-label { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.9); margin: 0 0 3px; display: flex; align-items: center; gap: 10px; }
.c-flow-step-body.active .c-flow-label { color: var(--accent-fg); }
.c-flow-sublabel { font-size: 12px; color: rgba(255,255,255,0.4); margin: 0; }
.c-flow-step-body.active .c-flow-sublabel { color: rgba(0,0,0,0.55); }
.c-flow-ic { font-size: 16px; }
.c-flow-tag {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; background: rgba(0,0,0,0.15); color: rgba(0,0,0,0.6);
}
.c-flow-ic svg { width: 16px; height: 16px; vertical-align: middle; }

/* consumer pricing teaser */
.c-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.c-price-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin-left: auto; margin-right: auto; }
.c-price-trial { font-size: 12px; font-weight: 500; color: var(--accent-dark, var(--accent)); background: color-mix(in oklch, var(--accent) 12%, transparent); border-radius: 6px; padding: 4px 10px; display: inline-block; margin-top: 10px; margin-bottom: 2px; }
.c-price-card { position: relative; padding: 30px; border-radius: 22px; border: 1px solid var(--border); background: var(--bg-card); display: flex; flex-direction: column; }
.c-price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 30%, transparent), var(--shadow-md); }
.c-price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-fg); font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.c-price-name { font-size: 15px; font-weight: 600; color: var(--fg-muted); margin-bottom: 10px; }
.c-price-amt { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--fg); line-height: 1; }
.c-price-per { font-size: 15px; font-weight: 500; color: var(--fg-subtle); margin-left: 4px; }
.c-price-feats { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.c-price-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--fg); line-height: 1.4; }
.c-price-feats svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-fg); background: var(--accent); border-radius: 50%; padding: 2px; }
.c-see-all { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--fg); }
.c-see-all:hover { gap: 12px; }
.c-see-all svg { width: 16px; height: 16px; }

/* pricing teaser */
.c-pricing-teaser { background: var(--bg-subtle, var(--bg-card)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.c-pt-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 16px 0; }
.c-pt-h { font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 12px 0 16px; }
.c-pt-sub { font-size: 17px; color: var(--fg-muted); line-height: 1.5; margin-bottom: 32px; max-width: 380px; }
.c-pt-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.c-pt-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.c-pt-trust-item { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--fg); }
.c-pt-trust-icon { flex-shrink: 0; width: 22px; height: 22px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.c-pt-trust-icon svg { width: 12px; height: 12px; color: var(--accent-fg); }

/* testimonials */
.c-tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.c-tst { padding: 28px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border); display: flex; flex-direction: column; }
.c-tst-stars { color: var(--accent-ink); letter-spacing: 2px; font-size: 14px; margin-bottom: 14px; filter: drop-shadow(0 0 1px rgba(0,0,0,0.2)); }
.c-tst-q { font-size: 17px; line-height: 1.5; color: var(--fg); flex: 1; margin: 0 0 20px; letter-spacing: -0.01em; }
.c-tst-author { display: flex; align-items: center; gap: 12px; }
.c-tst-ava { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--accent)); }
.c-tst-n { font-weight: 600; color: var(--fg); font-size: 14px; }
.c-tst-r { font-size: 13px; color: var(--fg-subtle); }

/* final cta */
.c-cta { position: relative; overflow: hidden; text-align: center; padding: 80px 40px; border-radius: 32px; background: var(--bg-inverse); color: #fff; }
.c-cta h2 { color: #fff; max-width: 640px; margin: 0 auto 16px; }
.c-cta p { color: rgba(255,255,255,0.7); max-width: 480px; margin: 0 auto; font-size: 18px; }
.c-cta-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklch, var(--accent) 50%, transparent), transparent 68%); top: -240px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.c-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }
.c-cta-ghost { border-color: rgba(255,255,255,0.25); color: #fff; }
.c-cta-ghost:hover { background: rgba(255,255,255,0.08); }
.c-cta-install { position: relative; z-index: 2; margin-top: 32px; }
.c-cta-qr { width: 132px; height: 132px; margin: 0 auto; padding: 10px; background: #fff; border-radius: 16px; }
.c-cta-qr img { display: block; width: 100%; height: 100%; }
.c-cta .c-cta-qr-label { color: rgba(255,255,255,0.6); font-size: 14px; max-width: none; margin: 14px 0 0; }
.c-cta-install .c-store-badges.center-badges { margin: 20px 0 0; }
.c-cta-secondary { margin-top: 28px; }

@media (max-width: 960px) {
  .pricing-hero-head { padding-top: 48px; }
  .pricing-hero-head .pricing-hero-copy { min-height: 200px; }
  .c-hero-grid, .c-split, .c-bridge, .c-analytics-layout { grid-template-columns: 1fr; gap: 36px; }
  .c-analytics-mocks { max-width: 420px; margin: 0 auto; order: 2; width: 100%; }
  .c-analytics-copy { order: 1; }
  .c-bridge { padding: 36px 28px; }
  .c-bridge::after { display: none; }
  .c-split.reverse > .c-split-copy { order: 0; }
  .c-feature-grid, .c-clin-grid, .c-price-grid, .c-tst-grid { grid-template-columns: 1fr; }
  .c-pt-inner { grid-template-columns: 1fr; gap: 36px; }
  .c-pt-sub { max-width: 100%; }
  .c-hero-visual { min-height: 0; }
  /* stacked layout: drop the device + chip, center the live card */
  .c-hero-visual .c-hero-phone, .c-hero-visual .c-chip-1 { display: none; }
  .ec { position: relative; top: auto; left: auto; transform: none; margin: 0 auto; width: 100%; max-width: 360px; }
  .c-hero-trust { gap: 24px; flex-wrap: wrap; }
  .hero-qr { display: none; }
  .c-flow-arrow { transform: rotate(90deg); }
}

/* ============ Partners page ============ */
.partners-hero { align-items: stretch; }
.partners-hero-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.partners-hero .hero-sub { max-width: 480px; }
.partners-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
}
.partners-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-muted);
}
.partners-hero-meta svg {
  width: 15px; height: 15px;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
}
/* direct e-mail escape hatch next to the meta ticks: plain link, not a tick */
.partners-hero-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: color .18s, border-color .18s;
}
.partners-hero-mail:hover { color: var(--fg); border-color: var(--fg); }
.partners-hero-mail svg {
  width: 15px; height: 15px;
  color: var(--fg-muted);
  background: none;
  border-radius: 0;
  padding: 0;
}
.partners-hero-mail:hover svg { color: var(--fg); }

.partners-open-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; flex-shrink: 0; }
.partners-open-ctas .btn svg { width: 16px; height: 16px; }

/* ---- partner lead modal (PartnerModal, page-partners.jsx) ----
   Reuses .lead-overlay / .lead-card / .lead-field plumbing; adds a dark header
   that names the track (same mono numbering as the partner list) so the person
   sees where their message lands. */
.pm-card { padding: 0; overflow: hidden; max-width: 580px; }
.pm-head {
  position: relative;
  padding: 22px 64px 22px 28px;
  background: var(--bg-inverse);
  color: #fff;
  border-bottom: 1px solid color-mix(in oklch, #fff 8%, transparent);
}
.pm-head::after {
  /* soft lime bloom in the corner, echoing the research block */
  content: ''; position: absolute; right: -60px; top: -80px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--accent) 34%, transparent), transparent 70%);
  pointer-events: none;
}
.pm-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--accent); margin-bottom: 10px;
}
.pm-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 24%, transparent);
}
.pm-track { display: flex; align-items: center; gap: 12px; position: relative; }
.pm-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--accent-fg); background: var(--accent);
  padding: 3px 8px; border-radius: 6px; line-height: 1.3;
}
.pm-tag { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.pm-x { top: 18px; right: 18px; background: transparent; border-color: color-mix(in oklch, #fff 18%, transparent); color: color-mix(in oklch, #fff 70%, transparent); }
.pm-x:hover { background: color-mix(in oklch, #fff 10%, transparent); color: #fff; }
.pm-body { padding: 26px 28px 28px; }
.pm-h { font-size: 22px; padding-right: 0; }
.pm-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pm-submit { min-width: 160px; justify-content: center; }
.pm-mail { font-size: 13px; color: var(--fg-muted); text-decoration: none; }
.pm-mail b { font-weight: 600; color: var(--fg); border-bottom: 1px solid var(--border-strong); }
.pm-mail:hover b { border-color: var(--fg); }
@media (max-width: 560px) {
  .pm-head { padding: 18px 60px 18px 20px; }
  .pm-body { padding: 20px; }
  .pm-tag { font-size: 18px; }
  .pm-actions { flex-direction: column; align-items: stretch; }
  .pm-submit { width: 100%; }
  .pm-mail { text-align: center; }
}
/* dark theme: header keeps its own inverse ground; body follows the card */
[data-theme="dark"] .pm-head { background: #090c11; }

/* ---- partner network orbit visual ---- */
.partners-orbit-card { padding: 22px 22px 18px; aspect-ratio: auto; min-height: 500px; }
.po { height: 100%; display: flex; flex-direction: column; min-height: 440px; }
.po-head { display: flex; justify-content: space-between; align-items: center; }
.po-head-label, .po-head-live {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
}
.po-head-live { display: inline-flex; align-items: center; gap: 6px; }
.po-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: po-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes po-dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.po-stage { position: relative; flex: 1; margin: 6px 0; }

/* orbit rings — Bloom is the sun, partners the planets (rotation driven by GSAP) */
.po-orbit {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px dashed color-mix(in oklch, var(--fg) 13%, transparent);
  will-change: transform;
}
.po-orbit--inner { width: 172px; height: 172px; margin: -86px 0 0 -86px; }
.po-orbit--outer { width: 392px; height: 392px; margin: -196px 0 0 -196px; opacity: 0.9; }

/* a planet = arm (placed on the ring via translate) → rev (cancels orbit spin so text stays upright) → chip */
.po-planet {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
}
/* desktop: inner = 3 (r86 · 0/120/240°), outer = 4 (r196 · 45/135/225/315° — interleaved, never radially aligned at rest) */
.po-orbit--inner .po-planet:nth-child(1) { transform: translate(0, -86px); }
.po-orbit--inner .po-planet:nth-child(2) { transform: translate(74px, 43px); }
.po-orbit--inner .po-planet:nth-child(3) { transform: translate(-74px, 43px); }
.po-orbit--outer .po-planet:nth-child(1) { transform: translate(139px, -139px); }
.po-orbit--outer .po-planet:nth-child(2) { transform: translate(139px, 139px); }
.po-orbit--outer .po-planet:nth-child(3) { transform: translate(-139px, 139px); }
.po-orbit--outer .po-planet:nth-child(4) { transform: translate(-139px, -139px); }

.po-planet-rev {
  position: absolute; top: 0; left: 0;
  will-change: transform;
}
.po-chip {
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.po-chip-ic {
  width: 22px; height: 22px; border-radius: 7px;
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.po-chip-ic svg { width: 13px; height: 13px; color: var(--fg); }
.po-chip-l { font-size: 11.5px; font-weight: 600; color: var(--fg); }

.po-hub-glow {
  position: absolute; left: 50%; top: 50%;
  width: 130px; height: 130px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 50%, transparent) 0%, transparent 68%);
  z-index: 1; pointer-events: none; opacity: 0.5;
}

.po-hub {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  z-index: 3;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--bg-inverse);
  color: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  box-shadow: 0 0 0 9px color-mix(in oklch, var(--accent) 7%, transparent),
              0 14px 38px color-mix(in oklch, var(--accent) 26%, transparent);
}
/* Dark theme: a light hub + full-strength lime glow flared badly at the centre
   of the dark card — keep the hub a dark elevated disc with a lime edge and
   dial every glow layer down (the halo/glow backgrounds get their own weaker
   dark variants below, since GSAP animates their opacity inline). */
[data-theme="dark"] .po-hub {
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid color-mix(in oklch, var(--accent) 38%, transparent);
  box-shadow: 0 0 0 7px color-mix(in oklch, var(--accent) 6%, transparent),
              0 12px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .po-hub-glow {
  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 26%, transparent) 0%, transparent 62%);
}
[data-theme="dark"] .po-hub::after {
  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 22%, transparent) 0%, transparent 62%);
}
.po-hub .brand-mark { color: var(--accent); }
.po-hub-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 12px;
  letter-spacing: -0.01em;
}

.po-foot {
  display: flex; justify-content: space-between; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.po-foot span {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.partners-list { border-top: 1px solid var(--border); }
.partner-item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 48px;
  padding: 52px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.partner-num {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 700;
  color: var(--fg-subtle);
  line-height: 1.1;
  padding-top: 6px;
  transition: color 0.25s;
}
.partner-item:hover .partner-num { color: var(--accent); }
.partner-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin-bottom: 12px;
}
.partner-h {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  line-height: 1.2;
}
.partner-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-muted);
  max-width: 560px;
  margin: 0 0 22px;
}
.partner-who { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.partner-who-chip {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--fg-subtle);
}
.partner-offer { display: flex; flex-wrap: wrap; gap: 6px; }
.partner-offer-chip {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  color: var(--fg);
  font-weight: 500;
}
.partner-cta-col {
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  flex-shrink: 0;
}

.partners-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 52px 56px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.partners-open-h {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.partners-open-p { font-size: 15px; color: var(--fg-muted); margin: 0; }

/* ---- Research & data band — elevated dark panel set apart from the 7 ways ---- */
.partners-data {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 60px 60px;
  border-radius: var(--radius-xl);
  background: var(--bg-inverse);
  border: 1px solid color-mix(in oklch, var(--accent) 20%, transparent);
}
/* dot-matrix that fades in from the right — "real-world data points" */
.partners-data-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in oklch, var(--accent) 80%, transparent) 1px, transparent 1.4px);
  background-size: 24px 24px;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 100%);
          mask-image: linear-gradient(105deg, transparent 30%, #000 100%);
}
.partners-data-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 92% 8%, color-mix(in oklch, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(70% 90% at 105% 110%, color-mix(in oklch, var(--navy) 70%, transparent), transparent 55%);
  opacity: 0.55;
}
.partners-data-main { position: relative; z-index: 1; }
.partners-data-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--accent); margin-bottom: 18px;
}
.partners-data-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 24%, transparent);
}
.partners-data-h {
  font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.18;
  margin: 0 0 18px; color: #fff; max-width: 22ch; text-wrap: balance;
}
.partners-data-p {
  font-size: 15.5px; line-height: 1.72; margin: 0 0 16px; max-width: 60ch;
  color: rgba(255, 255, 255, 0.72);
}
.partners-data-lead {
  font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: -0.012em;
  margin: 0 0 28px; color: #fff;
}
.partners-data-lead span { color: var(--accent); }
.partners-data-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.partners-data-chip {
  font-size: 12px; padding: 5px 13px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
}
.partners-data-aside { position: relative; z-index: 1; }
.partners-data-aside-label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.11em; color: rgba(255, 255, 255, 0.45); margin-bottom: 6px;
}
.partners-data-who { list-style: none; margin: 0; padding: 0; }
.partners-data-who li {
  font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.88);
  padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; gap: 11px;
}
.partners-data-who li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

@media (max-width: 760px) {
  .partners-data { grid-template-columns: 1fr; gap: 30px; padding: 40px 26px; }
  .partners-data-h { font-size: 25px; max-width: none; }
  .partners-data-grid { -webkit-mask-image: linear-gradient(150deg, transparent 35%, #000 100%); mask-image: linear-gradient(150deg, transparent 35%, #000 100%); }
}

@media (max-width: 760px) {
  .partners-hero { grid-template-columns: 1fr; gap: 28px; }
  .partners-hero-text { align-items: flex-start; }
  .partners-orbit-card { min-height: 0; }
  .po { min-height: 0; }
  .partner-item { grid-template-columns: 52px 1fr; gap: 20px; padding: 36px 0; }
  .partner-num { font-size: 28px; }
  .partner-cta-col { grid-column: 1 / -1; padding-top: 0; }
  .partners-open { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
}

/* Gentle life for the static mobile partner cluster (below). Chips breathe a few
   px out of sync so the cluster feels alive without spinning; the hub keeps a
   soft pulsing halo. The global reduced-motion guard neutralises all of it. */
@keyframes po-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes po-hub-halo { 0%, 100% { transform: scale(0.9); opacity: 0.4; } 50% { transform: scale(1.16); opacity: 0.78; } }

/* Mobile + motion: the real thing — TWO spinning dashed orbits with labelled
   chips riding them. Chips are compact so both rings of full partner names fit
   a phone card; exact radii and ring sizes are derived from the stage width by
   GSAP (page-partners.jsx). The inner ring stacks above the outer and below the
   hub, so crossing chips layer like planets passing in front of/behind each
   other instead of clashing. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .po-stage { min-height: 252px; }
  .po-orbit--inner { width: 110px; height: 110px; margin: -55px 0 0 -55px; z-index: 2; }
  .po-orbit--outer { width: 178px; height: 178px; margin: -89px 0 0 -89px; }
  .po-chip { padding: 4px 9px 4px 4px; gap: 5px; }
  .po-chip-l { font-size: 10.5px; }
  .po-chip-ic { width: 20px; height: 20px; border-radius: 6px; }
  .po-chip-ic svg { width: 12px; height: 12px; }
  /* pre-JS placement roughly on the mobile rings (GSAP takes over on tick 1) */
  .po-orbit--inner .po-planet:nth-child(1) { transform: translate(0, -55px); }
  .po-orbit--inner .po-planet:nth-child(2) { transform: translate(48px, 28px); }
  .po-orbit--inner .po-planet:nth-child(3) { transform: translate(-48px, 28px); }
  .po-orbit--outer .po-planet:nth-child(1) { transform: translate(63px, -63px); }
  .po-orbit--outer .po-planet:nth-child(2) { transform: translate(63px, 63px); }
  .po-orbit--outer .po-planet:nth-child(3) { transform: translate(-63px, 63px); }
  .po-orbit--outer .po-planet:nth-child(4) { transform: translate(-63px, -63px); }
  /* the desktop glow element is replaced by a tighter breathing halo on the hub */
  .po-hub-glow { display: none; }
  .po-hub::after {
    content: ""; position: absolute; inset: -12px; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, color-mix(in oklch, var(--accent) 45%, transparent) 0%, transparent 70%);
    animation: po-hub-halo 3.8s ease-in-out infinite;
  }
}

/* Mobile + reduced-motion: no spin — a static readable cluster: one chip group
   above, the hub in the middle (dashed ring pseudo), the second group below.

   ⚠ REGRESSION GUARD: the desktop rules position .po-hub with `left: 50%;
   top: 50%; transform: translate(-50%,-50%)`. Any override here MUST reset all
   THREE (left/top/transform), not just `position` — `relative` honours left/top
   offsets that `static` ignored. Missing left/top once shoved the hub half off
   the card and let iOS Safari pan the whole page sideways. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .po-stage {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; margin: 24px 0 14px; min-height: 0;
  }
  .po-hub-glow { display: none; }
  /* partners around Bloom: outer group — hub — inner group */
  .po-orbit--outer { order: -1; }
  .po-hub { order: 0; }
  .po-orbit--inner { order: 1; }
  .po-hub {
    position: relative; left: auto; top: auto; transform: none;
    width: 66px; height: 66px; margin: 2px 0;
  }
  /* dashed orbit ring centred on the hub, passing behind both chip groups */
  .po-hub::before {
    content: ""; position: absolute; inset: -82px; z-index: -1;
    border: 1px dashed var(--border); border-radius: 50%;
    pointer-events: none;
  }
  /* soft breathing halo */
  .po-hub::after {
    content: ""; position: absolute; inset: -12px; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, color-mix(in oklch, var(--accent) 45%, transparent) 0%, transparent 70%);
    animation: po-hub-halo 3.8s ease-in-out infinite;
  }
  .po-orbit {
    position: static; width: auto !important; height: auto !important; margin: 0 !important;
    border: none; opacity: 1;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    max-width: 272px; /* forces the 4 outer chips into a balanced 2×2 */
  }
  .po-planet, .po-planet-rev { position: static; transform: none !important; width: auto; height: auto; }
  .po-chip {
    position: static; left: auto; top: auto; width: auto; height: auto; transform: none;
    padding: 6px 12px 6px 6px;
    animation: po-bob 3.4s ease-in-out infinite; will-change: transform;
  }
  /* stagger the bob so chips drift independently (negative delays = already mid-cycle on load) */
  .po-orbit--inner .po-planet:nth-child(1) .po-chip { animation-delay: -0.2s; }
  .po-orbit--inner .po-planet:nth-child(2) .po-chip { animation-delay: -1.1s; }
  .po-orbit--inner .po-planet:nth-child(3) .po-chip { animation-delay: -2.0s; }
  .po-orbit--outer .po-planet:nth-child(1) .po-chip { animation-delay: -0.7s; }
  .po-orbit--outer .po-planet:nth-child(2) .po-chip { animation-delay: -1.6s; }
  .po-orbit--outer .po-planet:nth-child(3) .po-chip { animation-delay: -2.6s; }
  .po-orbit--outer .po-planet:nth-child(4) .po-chip { animation-delay: -3.1s; }
  .po-chip-l { font-size: 12px; }
  .po-chip-ic { width: 24px; height: 24px; }
  .po-chip-ic svg { width: 14px; height: 14px; }
}
/* Smallest phones: slimmer card padding gives both layouts more stage width */
@media (max-width: 380px) {
  .partners-orbit-card { padding: 20px 13px 14px; }
}
/* ...and the static cluster tightens its chips to keep the outer group 2×2
   (at 320px the stage is ~254px wide; the widest default chip pair is ~243px) */
@media (max-width: 380px) and (prefers-reduced-motion: reduce) {
  .po-chip { padding: 5px 10px 5px 5px; }
  .po-chip-l { font-size: 11.5px; }
  .po-chip-ic { width: 22px; height: 22px; }
  .po-hub::before { inset: -72px; }
}

/* ============ Accessibility ============ */
/* Visible keyboard focus on every interactive element (zero-specificity so
   existing form focus styles still win, and mouse focus stays untouched) */
:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Honour the OS "reduce motion" setting across the whole site */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ Legal pages (Terms / Privacy) ============ */
.legal-wrap { max-width: 760px; padding-top: 64px; padding-bottom: 96px; }
.legal-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-subtle); }
.legal-title { font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.02em; margin: 10px 0 6px; }
.legal-updated { font-size: 14px; color: var(--fg-muted); margin: 0 0 28px; }
.legal-body { font-size: 15.5px; line-height: 1.7; color: var(--fg-muted); }
.legal-body h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); margin: 36px 0 10px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 16px; padding-left: 20px; }
.legal-body li { margin-bottom: 7px; }
.legal-body strong { color: var(--fg); font-weight: 600; }
.legal-callout { background: color-mix(in oklch, var(--accent) 12%, transparent); border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent); border-radius: var(--radius-md); padding: 16px 20px; font-size: 15px; line-height: 1.6; color: var(--fg); margin: 0 0 28px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.legal-table th, .legal-table td { text-align: left; padding: 9px 12px; border: 1px solid var(--border); vertical-align: top; }
.legal-table th { background: var(--bg-alt); font-weight: 600; color: var(--fg); }
.legal-entity { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--fg-subtle); font-family: var(--font-mono); line-height: 1.6; }

/* ============ Cookie consent ============ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex; justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.cookie-banner-inner {
  pointer-events: auto;
  width: 100%; max-width: 560px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
  animation: cookie-rise .45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cookie-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cookie-banner-main { display: flex; flex-direction: column; gap: 16px; }
.cookie-banner-title { font-size: 15px; font-weight: 700; color: var(--fg); margin: 0 0 4px; letter-spacing: -0.01em; }
.cookie-banner-p { font-size: 13.5px; line-height: 1.55; color: var(--fg-muted); margin: 0; }
.cookie-banner-p a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cookie-banner-actions .btn { padding: 9px 16px; font-size: 13.5px; }
.cookie-banner-actions--prefs { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border); }

.cookie-prefs { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-cat-name { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.cookie-cat-p { font-size: 12.5px; line-height: 1.5; color: var(--fg-subtle); margin: 5px 0 0; }

.cookie-toggle {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px; border-radius: var(--radius-pill);
  background: var(--border);
  transition: background .18s ease;
}
.cookie-toggle.is-on { background: var(--accent); }
.cookie-toggle.is-locked { opacity: 0.55; cursor: default; }
.cookie-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform .18s ease;
}
.cookie-toggle.is-on .cookie-toggle-knob { transform: translateX(16px); }

@media (max-width: 560px) {
  .cookie-banner { padding: 0; }
  .cookie-banner-inner {
    max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1; justify-content: center; }
}

/* ============ Android app-install banner ============ */
/* Full-width bar at the very top of the page (like Revolut / Apple's native
   Smart App Banner): in normal flow, so it pushes the site down and simply
   scrolls away — the sticky nav then pins to the top. Fully theme-aware. */
.app-banner {
  position: relative; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  animation: app-banner-drop .4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes app-banner-drop { from { transform: translateY(-100%); } to { transform: none; } }
.app-banner-x {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-subtle);
}
.app-banner-x:hover { background: var(--bg-alt); color: var(--fg); }
.app-banner-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: #14181f; color: var(--accent); /* app-icon look, stable across themes */
  display: inline-flex; align-items: center; justify-content: center;
}
.app-banner-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.app-banner-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--fg); line-height: 1.2; }
.app-banner-sub { font-size: 12px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-banner-cta {
  flex-shrink: 0; display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-fg);
  font-weight: 600; font-size: 14px;
}
.app-banner-cta:active { transform: scale(0.97); }

/* Very narrow phones (~320px): the audience tab switcher is nowrap and would
   spill a few px past the viewport; tighten the tabs so it fits cleanly. */
@media (max-width: 380px) {
  .aud-tabs { max-width: 100%; gap: 3px; padding: 3px; }
  .aud-tab { padding: 9px 13px; font-size: 13px; }
}

/* ── Lead capture modal (clinic quote / pilot) ───────────────────── */
.lead-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(12, 15, 22, 0.55);
  backdrop-filter: blur(3px);
  animation: lead-fade 0.18s ease-out;
  overflow-y: auto;
}
@keyframes lead-fade { from { opacity: 0; } to { opacity: 1; } }
.lead-card {
  position: relative;
  width: 100%; max-width: 560px;
  margin: auto;
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  animation: lead-rise 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lead-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lead-x {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--bg); color: var(--fg-muted); cursor: pointer;
  transition: color .15s, background .15s;
}
.lead-x:hover { color: var(--fg); background: var(--bg-alt); }
.lead-h { margin: 0 0 6px; font-size: 24px; padding-right: 40px; }
.lead-sub { margin: 0 0 22px; color: var(--fg-muted); font-size: 15px; }
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.lead-field > span { font-size: 13px; font-weight: 500; color: var(--fg); }
.lead-field > span i { font-style: normal; font-weight: 400; color: var(--fg-subtle); }
.lead-field input, .lead-field select, .lead-field textarea {
  width: 100%; padding: 11px 13px;
  font: inherit; font-size: 15px;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .15s;
}
.lead-field textarea { resize: vertical; min-height: 76px; }
.lead-field input:focus, .lead-field select:focus, .lead-field textarea:focus {
  outline: none; border-color: var(--accent);
}
.lead-field input[aria-invalid="true"] { border-color: #e2564a; }
.lead-err { font-style: normal; font-size: 12.5px; color: #e2564a; }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lead-senderr {
  margin: 4px 0 0; padding: 10px 12px;
  font-size: 13.5px; color: #b1382d;
  background: color-mix(in oklab, #e2564a 10%, transparent);
  border: 1px solid color-mix(in oklab, #e2564a 30%, transparent);
  border-radius: 10px;
}
.lead-consent { margin: 14px 0 16px; font-size: 12.5px; color: var(--fg-subtle); }
.lead-submit { width: 100%; justify-content: center; }
.lead-done { text-align: center; padding: 14px 0 6px; }
.lead-done-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 16px;
  border-radius: 50%; background: var(--accent); color: var(--accent-fg);
}
.lead-done-ic svg { width: 26px; height: 26px; }
.lead-done h3 { margin: 0 0 8px; font-size: 22px; }
.lead-done p { margin: 0 0 22px; color: var(--fg-muted); font-size: 15px; }
@media (max-width: 640px) {
  .lead-overlay { padding: 12px; }
  .lead-card { padding: 24px 20px; border-radius: 18px; }
  .lead-row { grid-template-columns: 1fr; gap: 0; }
  .lead-h { font-size: 21px; }
}

/* ── Pricing · plans ────────────────────────────────────────────────────────
   Three audiences buy on different terms and now sit on separate tabs, so each
   block is shaped for its own decision instead of one grid serving all three. */

/* Personal: the free week is the offer we actually lead with, so it gets a card
   of its own rather than hiding behind a monthly/annual toggle. */
.b2c-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 18px;
}
.b2c-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
}
.b2c-card--trial {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 18px 44px -26px color-mix(in oklch, var(--accent) 70%, transparent);
}
/* Shadows stay here rather than in the GSAP tween: the trial card's accent ring
   is part of its box-shadow, and animating the property would drop the ring.
   GSAP owns transform and opacity, CSS owns depth — neither fights the other. */
.b2c-card { transition: box-shadow .32s ease, border-color .32s ease; }
.b2c-card:hover { box-shadow: 0 22px 50px -30px rgba(0,0,0,0.45); border-color: color-mix(in oklch, var(--accent) 50%, var(--border)); }
.b2c-card--trial:hover {
  box-shadow: 0 0 0 1px var(--accent), 0 26px 56px -28px color-mix(in oklch, var(--accent) 85%, transparent);
  border-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .b2c-card { transition: none; }
}
/* Always rendered, badge or not, so every card's name and price start on the
   same baseline across the row. */
.b2c-badge-row { display: flex; align-items: center; min-height: 24px; margin-bottom: 14px; }
.b2c-badge {
  align-self: flex-start;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.b2c-badge--save { background: var(--bg-alt); color: var(--accent-ink); }
.b2c-name { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 10px; }
.b2c-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 10px; }
.b2c-price-num {
  color: var(--fg);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.b2c-price-unit { font-size: 14px; color: var(--fg-muted); }
.b2c-desc { font-size: 14px; line-height: 1.55; color: var(--fg-muted); margin-bottom: 22px; }
.b2c-desc em { display: block; font-style: normal; color: var(--accent-ink); margin-top: 4px; }
.b2c-card .btn { margin-top: auto; }
.b2c-same { text-align: center; font-size: 13px; color: var(--fg-subtle); margin-bottom: 48px; }

/* A bordered panel rather than a list floating in whitespace: it gives the
   section an edge to sit against, and echoes the fact/clinic-app panels used on
   the doctors and clinics tabs so all three read as one page. */
.b2c-incl {
  max-width: 1000px;
  margin: 0 auto 44px;
  padding: 40px 48px 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-alt);
}
.b2c-incl-head { text-align: center; margin-bottom: 34px; }
.b2c-incl-h {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.b2c-incl-h svg { width: 17px; height: 17px; color: var(--accent-ink); }
/* Stacked under the heading instead of beside it — side by side, the mono caps
   and the heading read as two headings arguing over which one leads. */
.b2c-incl-sub {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.b2c-feats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 52px;
  margin: 0;
}
.b2c-feats li { align-items: flex-start; }

.b2c-install {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-content: center;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  margin-bottom: 32px;
}

/* A real switch, not a link that says "see annual prices". The explanatory line
   is gone — the prices underneath change as it flips, which reads better than a
   sentence. Held to the width of its own content and centred over the cards: it
   is a note beside the prices, not a banner across the page. Monthly is the
   default view, so the first number a doctor sees is the one they pay without
   committing to a year. */
.billing-bar {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto 36px;
  padding: 10px 14px 10px 10px;
  border: 1px solid color-mix(in oklch, var(--accent) 42%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--accent) 6%, var(--bg-card));
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.billing-wrap { display: flex; justify-content: center; }
.billing-bar:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 10px 26px -18px color-mix(in oklch, var(--accent) 90%, transparent);
}
.billing-bar:active { transform: translateY(0); }
.billing-bar:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 30%, transparent); }
.billing-bar.is-annual { background: color-mix(in oklch, var(--accent) 13%, var(--bg-card)); border-color: var(--accent); }

.billing-pct {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent-fg);
  background: var(--accent);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
}
.billing-lead { color: var(--fg); font-size: 14.5px; font-weight: 600; white-space: nowrap; }

/* The knob travels, the track fills. Cheap to build and the one part of a
   pricing page that is genuinely nice to press. */
.billing-toggle {
  flex-shrink: 0;
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--fg) 18%, transparent);
  transition: background .24s ease;
}
.billing-toggle i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  transition: transform .26s cubic-bezier(.34,1.56,.64,1);
}
.billing-bar:hover .billing-toggle { background: color-mix(in oklab, var(--fg) 26%, transparent); }
.billing-bar.is-annual .billing-toggle { background: var(--accent); }
.billing-bar.is-annual .billing-toggle i { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) {
  .billing-bar, .billing-toggle, .billing-toggle i { transition: none; }
}

.pro-cta-row { display: flex; justify-content: center; margin-bottom: 56px; }

.ladder-head { text-align: center; margin-bottom: 32px; }
.ladder-h { color: var(--fg); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.ladder-sub { font-size: 15px; color: var(--fg-muted); max-width: 52ch; margin: 0 auto; }

/* Five rungs, each a step taller than the last — the price ladder made literal
   rather than five equal boxes pretending to be alternatives. */
.ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 40px;
  list-style: none;
}
.rung {
  --lift: calc(var(--i) * 9px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: calc(20px + var(--lift)) 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rung:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.rung.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 14px 34px -20px color-mix(in oklch, var(--accent) 70%, transparent);
}
.rung-name { color: var(--fg); font-size: 15px; font-weight: 600; }
.rung-cap { font-size: 12px; color: var(--fg-muted); min-height: 2.6em; }
.rung-price { color: var(--fg); font-size: 26px; font-weight: 600; letter-spacing: -0.03em; margin-top: 2px; }
.rung-price i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--fg-muted); margin-left: 2px; }
.rung-over { font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); }
/* The per-patient line runs to two lines at "€2.50" and one at "€2", and the row
   is bottom-aligned — so flipping to annual shrank the tallest card and pulled
   everything below it up the page. Two lines are reserved so the height is the
   same in both states. Not on the free card: "forever" never wraps. */
.rung:not(.rung--free) .rung-over { min-height: 3.1em; }
/* Free is the way in, and it was the palest card on the row — bordered and
   tinted so the eye finds it, without the lime ring that would make it compete
   with the plan the slider has selected. */
.rung--free {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--border));
  background: color-mix(in oklch, var(--accent) 7%, var(--bg-card));
}
.rung--free .rung-price { color: var(--accent-ink); }
.rung--free .rung-over {
  color: var(--accent-ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pro-shared {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 32px;
  padding: 26px 0 0;
  border-top: 1px solid var(--border);
  margin-bottom: 64px;
}

.pro-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 64px;
}
.fact {
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  padding: 26px 28px;
}
.fact h4 { color: var(--fg); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.fact p { font-size: 14px; line-height: 1.6; color: var(--fg-muted); }

.clinic-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.clinic-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.clinic-card .plan-name { font-size: 13px; color: var(--fg-muted); margin-bottom: 8px; }
.clinic-card h3 { color: var(--fg); font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.clinic-card .plan-desc { font-size: 14px; line-height: 1.55; color: var(--fg-muted); margin-bottom: 22px; }
.clinic-price { color: var(--fg); font-size: 40px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.clinic-price i { font-style: normal; font-size: 15px; font-weight: 400; color: var(--fg-muted); margin-right: 6px; }
.clinic-price .unit { font-size: 15px; font-weight: 400; color: var(--fg-muted); }
.clinic-price--word { font-size: 34px; }
.clinic-meta { font-size: 12px; color: var(--fg-subtle); font-family: var(--font-mono); margin-top: 10px; }
.clinic-card .feat-list { margin-top: 22px; }
/* Sits between the spec list and the button: the ceiling above it prompts the
   question, so the answer belongs here rather than on a sales call. */
/* Deliberately not a filled box. As a tinted panel it sat directly above the
   lime button — two stacked slabs with a hairline between them, which read as
   glued rather than as two separate things. A quiet line of text with a rule
   above it separates cleanly and does not compete with the button. */
.clinic-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: auto 0 0;
  padding: 18px 0 22px;
  border-top: 1px solid var(--border);
}

.clinic-card .btn { margin-top: 0; }
.clinic-card--custom .btn { margin-top: auto; }
.clinic-card--custom { background: var(--bg-alt); }

/* The headline number under the price: "up to 100 active patients" is what the
   €1 900 actually buys, so it reads as a statement, not a footnote. */
.clinic-headline {
  display: block;
  color: var(--fg);
  font-size: 15px;
  font-weight: 600;
  margin-top: 12px;
}
.clinic-card--base { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.clinic-card .clinic-meta { margin-top: 6px; }

/* Clinics can buy the patient app themselves — a pricing fact of its own, not a
   line of small print at the bottom of a card. */
.clinic-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding: 26px 30px;
  border-radius: var(--radius-xl);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.clinic-app-copy h4 { color: var(--fg); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.clinic-app-copy p { font-size: 14px; line-height: 1.6; color: var(--fg-muted); max-width: 68ch; }
.clinic-app-badge {
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent-fg);
  background: var(--accent);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
}

.cmp-sub {
  text-align: center;
  font-size: 15px;
  color: var(--fg-muted);
  max-width: 62ch;
  margin: 0 auto 44px;
}

@media (max-width: 1000px) {
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .b2c-plans { grid-template-columns: 1fr; }
  .b2c-feats { grid-template-columns: 1fr; }
  .rung { --lift: 0px; }
  .pro-shared { grid-template-columns: 1fr 1fr; }
  .pro-facts, .clinic-row { grid-template-columns: 1fr; }
  .clinic-app { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 620px) {
  .b2c-incl { padding: 30px 22px 32px; }
  .b2c-incl-h { font-size: 19px; }
  .billing-bar { gap: 10px; padding: 9px 12px 9px 9px; }
  .billing-lead { font-size: 13.5px; white-space: normal; text-align: left; }
  .ladder { grid-template-columns: 1fr; }
  .rung-cap { min-height: 0; }
  .pro-shared { grid-template-columns: 1fr; }
}