/* ChirPragya.ai marketing site
   Theme: locked dark. Accent: clinical teal (single accent, used everywhere).
   Radius system: cards 16px, buttons pill, inputs 10px.
   Type: Geist Sans (display + body), Geist Mono (numbers + small labels). */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Geist'; src: url('fonts/geist-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* ---------- Tokens ---------- */
/* Light-only (YC-modern): bone white, ink-green text, deep emerald accent. */
:root {
  --bg: #f7f8f6;            /* bone white */
  --bg-raise: #ffffff;
  --bg-panel: #ffffff;
  --line: rgba(15, 50, 36, 0.11);
  --line-strong: rgba(15, 50, 36, 0.2);
  --text: #0e1f17;          /* ink green-black */
  --text-2: #48584f;
  --text-3: #79867e;
  --accent: #0b7d5c;        /* deep emerald */
  --accent-2: #16a97a;      /* gradient partner (sparing use) */
  --grad: linear-gradient(94deg, var(--accent), var(--accent-2));
  --accent-deep: #095e46;
  --accent-dim: rgba(11, 125, 92, 0.09);
  --accent-line: rgba(11, 125, 92, 0.35);
  --on-accent: #f2fff9;
  --radius-card: 16px;
  --radius-input: 10px;
  --font-sans: 'Geist', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 68px;
  /* theme-aware media framing */
  --scrim-c: 247, 248, 246;       /* rgb triplet used by scrims over imagery */
  --nav-bg: rgba(247, 248, 246, 0.85);
  --menu-bg: rgba(247, 248, 246, 0.98);
  --soft: rgba(14, 31, 23, 0.03);      /* subtle raised fill */
  --input-bg: rgba(14, 31, 23, 0.04);
  --on-media: #3e4f47;            /* secondary text over scrimmed imagery */
  --err: #b3361f;
  --err-line: #c96a55;
  /* z-scale: 10 nav, 20 mobile menu, 30 modal (unused) */
  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: var(--on-accent); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
.lede { color: var(--text-2); font-size: 1.125rem; max-width: 58ch; }

.mono { font-family: var(--font-mono); }

/* Icons: Phosphor SVGs applied as CSS masks so currentColor tints them.
   Usage: <i class="icn" style="--icn:url(assets/icons/microphone.svg)"></i> */
.icn {
  display: inline-block; width: 22px; height: 22px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icn) no-repeat center / contain;
  mask: var(--icn) no-repeat center / contain;
}

/* ---------- Buttons (pill) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; white-space: nowrap;
  transition: transform 0.25s var(--ease-out), background 0.25s, border-color 0.25s, color 0.25s;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn .icn { width: 17px; height: 17px; transition: transform 0.25s var(--ease-out); }
.btn:hover .icn { transform: translateX(3px); }
.btn-solid { background: var(--accent); color: var(--on-accent); }
.btn-solid:hover { filter: brightness(1.1); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent-line); color: var(--accent); }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--nav-h);
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; }
.brand small { color: var(--text-3); font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--text-2); font-size: 0.93rem; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-burger { display: none; padding: 8px; color: var(--text); }
.nav-burger .icn { width: 24px; height: 24px; }

/* Mobile menu */
.mobile-menu {
  display: none; position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 20;
  background: var(--menu-bg); border-bottom: 1px solid var(--line);
  padding: 18px 24px 26px; flex-direction: column; gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 12px 4px; font-size: 1.05rem; color: var(--text-2); border-bottom: 1px solid var(--line); }
.mobile-menu a:last-child { border-bottom: 0; }

/* ---------- Hero CTAs (shared by the CTA band) ---------- */
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* frosted-glass button (web glassmorphism approximation) for use over media */
.btn-glass {
  color: var(--text);
  border: 1px solid rgba(20, 60, 45, 0.25);
  background: rgba(255, 255, 252, 0.62);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 20px rgba(14, 31, 23, 0.1);
}
.btn-glass:hover { background: rgba(255, 255, 252, 0.88); border-color: var(--accent-line); }
@media (prefers-reduced-transparency: reduce) {
  .btn-glass { background: rgba(255, 255, 252, 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* word-by-word headline reveal */
.split-words .w {
  display: inline-block; opacity: 0; transform: translateY(0.6em) rotate(1.5deg);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  transition-delay: calc(var(--wi) * 0.07s + 0.1s);
}
.split-words.in .w { opacity: 1; transform: none; }

/* ---------- Manifesto ---------- */
.manifesto { padding: 140px 0 120px; }
.manifesto-line {
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.12;
  max-width: 22ch; text-wrap: balance;
}
.manifesto-sub { margin-top: 26px; color: var(--text-2); font-size: 1.1rem; max-width: 56ch; }

/* ---------- CTA band with a self-drawing emerald thread ---------- */
.cta-thread {
  background: linear-gradient(180deg, var(--bg-raise) 0%, var(--bg) 100%);
  border-top: 1px solid var(--line);
}
.cta-thread-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.9;
}
.cta-thread-path {
  stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 2px 6px rgba(11, 125, 92, 0.18));
}
.cta-thread.drawn .cta-thread-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.7s var(--ease-out);
}
.cta-thread .wrap { position: relative; z-index: 1; }

/* ---------- Live product preview (real scripted mini component) ---------- */
.demo {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: linear-gradient(165deg, var(--bg-panel), var(--bg-raise));
  box-shadow: 0 24px 70px rgba(14, 31, 23, 0.12);
  overflow: hidden;
}
.demo-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.demo-title { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-2); font-weight: 500; }
.demo-title .icn { width: 18px; height: 18px; color: var(--accent); }
.demo-live { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.08em; }
.demo-head-right { display: inline-flex; align-items: center; gap: 12px; }
.demo-sound {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--accent-line); color: var(--accent);
  font-size: 0.8rem; font-weight: 600;
  transition: background 0.2s, color 0.2s, transform 0.25s var(--ease-out);
}
.demo-sound::before {
  content: ""; width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.demo-sound:hover { background: var(--accent-dim); }
.demo-sound:active { transform: scale(0.96); }
.demo-sound[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.demo-sound[aria-pressed="true"]::before {
  border: 0; width: 9px; height: 10px;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}

.demo-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; }
.demo-col { padding: 18px; }
.demo-col + .demo-col { border-left: 1px solid var(--line); }
.demo-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }

/* waveform */
.wave { display: flex; align-items: center; gap: 3px; height: 34px; margin-bottom: 16px; }
.wave i {
  width: 3px; border-radius: 2px; background: var(--accent);
  height: 20%; opacity: 0.85;
  animation: waveMove 1.15s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.09s);
}
@keyframes waveMove { 0%, 100% { height: 14%; } 50% { height: var(--h, 80%); } }

.demo-lines { display: flex; flex-direction: column; gap: 10px; }
.demo-line {
  font-size: 0.86rem; color: var(--text-2); line-height: 1.5;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.demo-line.show { opacity: 1; transform: none; }
.demo-line .who { color: var(--accent); font-weight: 600; font-size: 0.78rem; display: block; margin-bottom: 2px; }

.note-field { margin-bottom: 14px; opacity: 0.35; transition: opacity 0.5s; }
.note-field.filled { opacity: 1; }
.note-field b { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-3); margin-bottom: 5px; }
.note-field.filled b { color: var(--text-2); }
.note-val { font-size: 0.88rem; color: var(--text); min-height: 1.3em; }
.note-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 0.78rem; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--accent-line); background: var(--accent-dim); color: var(--accent);
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.chip.show { opacity: 1; transform: none; }
.demo-foot {
  padding: 12px 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3);
}
.demo-foot .ok { color: var(--accent); }

/* ---------- Sections ---------- */
section { padding: 110px 0; position: relative; }
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head .lede { margin-top: 18px; }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: block;
}

/* Pillars: asymmetric 2-col */
.pillars { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.pillar {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 34px; background: var(--bg-raise);
  display: flex; flex-direction: column; gap: 14px; justify-content: flex-end;
  min-height: 250px; position: relative; overflow: hidden;
}
.pillar .icn { width: 28px; height: 28px; color: var(--accent); }
.pillar h3 { font-size: 1.3rem; }
.pillar p { color: var(--text-2); font-size: 0.97rem; max-width: 48ch; }
.pillar-wide { grid-row: span 2; justify-content: flex-end; min-height: 0; background:
  radial-gradient(120% 90% at 85% 0%, rgba(62, 207, 165, 0.12), transparent 60%), var(--bg-raise); }
.pillar-tall { }

/* ---------- Modules bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.cell {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--bg-panel); padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.3s, transform 0.35s var(--ease-out);
  position: relative; overflow: hidden;
}
.cell:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.cell .icn { width: 26px; height: 26px; color: var(--accent); }
.cell h3 { margin-top: 4px; }
.cell p { color: var(--text-2); font-size: 0.93rem; }
.cell-3 { grid-column: span 3; }
.cell-2 { grid-column: span 2; }
.cell-4 { grid-column: span 4; }
.cell-feature {
  background: radial-gradient(130% 110% at 0% 0%, rgba(62, 207, 165, 0.14), transparent 55%), var(--bg-panel);
}
.cell-grid-bg {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 26px 26px; background-color: var(--bg-panel);
}
.cell-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.cell-tags span {
  font-family: var(--font-mono); font-size: 0.72rem; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2);
}

/* ---------- Security ---------- */
.security-panel {
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--bg-raise), var(--bg-panel));
  padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
}
.sec-list { display: flex; flex-direction: column; }
.sec-item { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.sec-item:first-child { border-top: 0; padding-top: 0; }
.sec-item .icn { width: 22px; height: 22px; color: var(--accent); margin-top: 3px; }
.sec-item h3 { font-size: 1rem; margin-bottom: 4px; }
.sec-item p { color: var(--text-2); font-size: 0.9rem; }

/* ---------- Deploy split ---------- */
.deploy { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.deploy-card {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 38px; background: var(--bg-raise);
}
.deploy-card .icn { width: 26px; height: 26px; color: var(--accent); margin-bottom: 18px; }
.deploy-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.deploy-card p { color: var(--text-2); font-size: 0.95rem; margin-bottom: 18px; }
.deploy-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.deploy-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--text-2); }
.deploy-card li .icn { width: 16px; height: 16px; margin: 4px 0 0; color: var(--accent); }
.deploy-note {
  margin-top: 18px; border: 1px solid var(--accent-line); border-radius: var(--radius-card);
  background: var(--accent-dim); padding: 22px 28px; display: flex; gap: 14px; align-items: center;
}
.deploy-note .icn { width: 22px; height: 22px; color: var(--accent); flex: none; }
.deploy-note p { font-size: 0.93rem; color: var(--text); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; padding: 130px 0; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; left: 50%; bottom: -320px; width: 780px; height: 620px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 207, 165, 0.16), transparent 62%);
  pointer-events: none;
}
.cta-band h2 { max-width: 16ch; margin: 0 auto 18px; }
.cta-band .lede { margin: 0 auto 36px; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 56px 0 40px; }
.foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-brand p { color: var(--text-3); font-size: 0.88rem; margin-top: 12px; max-width: 34ch; }
.foot-cols { display: flex; gap: 72px; flex-wrap: wrap; }
.foot-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin-bottom: 14px; font-family: var(--font-mono); font-weight: 500; }
.foot-col a { display: block; color: var(--text-2); font-size: 0.92rem; padding: 5px 0; transition: color 0.2s; }
.foot-col a:hover { color: var(--text); }
.foot-base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-3); font-size: 0.83rem; }

/* ---------- Pricing configurator ---------- */
.pricing-hero { padding: calc(var(--nav-h) + 90px) 0 40px; }
.config-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
.config-group { margin-bottom: 34px; }
.config-group > h3 { margin-bottom: 6px; }
.config-group > p { color: var(--text-2); font-size: 0.92rem; margin-bottom: 18px; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opt {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--bg-raise); padding: 20px; text-align: left;
  display: flex; gap: 14px; align-items: flex-start; width: 100%;
  transition: border-color 0.25s, background 0.25s, transform 0.3s var(--ease-out);
}
.opt:hover { border-color: var(--line-strong); }
.opt[aria-pressed="true"], .opt[aria-checked="true"] {
  border-color: var(--accent-line); background: var(--accent-dim);
}
.opt .icn { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.opt b { display: block; font-size: 0.98rem; font-weight: 600; margin-bottom: 3px; }
.opt span { display: block; color: var(--text-2); font-size: 0.85rem; line-height: 1.45; }
.opt .tick {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line-strong); flex: none; margin-top: 2px;
  display: grid; place-items: center; transition: background 0.2s, border-color 0.2s;
}
.opt .tick .icn { width: 12px; height: 12px; color: var(--on-accent); margin: 0; opacity: 0; }
.opt[aria-pressed="true"] .tick, .opt[aria-checked="true"] .tick { background: var(--accent); border-color: var(--accent); }
.opt[aria-pressed="true"] .tick .icn, .opt[aria-checked="true"] .tick .icn { opacity: 1; }

.summary {
  position: sticky; top: calc(var(--nav-h) + 20px);
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  background: linear-gradient(175deg, var(--bg-panel), var(--bg-raise)); padding: 28px;
}
.summary h3 { margin-bottom: 4px; }
.summary > p { color: var(--text-2); font-size: 0.88rem; margin-bottom: 20px; }
.summary-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; min-height: 120px; }
.summary-item {
  display: flex; align-items: center; gap: 10px; font-size: 0.9rem;
  color: var(--text-2); padding: 8px 12px; border-radius: var(--radius-input);
  background: var(--soft); border: 1px solid var(--line);
}
.summary-item .icn { width: 15px; height: 15px; color: var(--accent); }
.summary-empty { color: var(--text-3); font-size: 0.88rem; padding: 8px 2px; }
.summary .btn { width: 100%; justify-content: center; }
.summary-foot { margin-top: 14px; color: var(--text-3); font-size: 0.8rem; text-align: center; }

/* FAQ */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-weight: 600; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icn { width: 18px; height: 18px; color: var(--text-3); transition: transform 0.3s var(--ease-out); flex: none; }
.faq details[open] summary .icn { transform: rotate(45deg); color: var(--accent); }
.faq details p { color: var(--text-2); font-size: 0.95rem; padding: 0 0 22px; max-width: 62ch; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.contact-copy .lede { margin: 20px 0 34px; }
.contact-direct {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--bg-raise); padding: 24px; display: flex; gap: 16px; align-items: center;
}
.contact-direct .icn { width: 24px; height: 24px; color: var(--accent); flex: none; }
.contact-direct b { display: block; font-size: 0.9rem; }
.contact-direct a { color: var(--accent); font-size: 0.95rem; }

.form-card {
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  background: linear-gradient(175deg, var(--bg-panel), var(--bg-raise)); padding: 36px;
}
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 7px; }
.field .hint { font-size: 0.8rem; color: var(--text-3); margin-top: 6px; }
.field .err { display: none; font-size: 0.8rem; color: var(--err); margin-top: 6px; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid textarea { border-color: var(--err-line); }
input, textarea, select {
  width: 100%; background: var(--input-bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-input);
  color: var(--text); padding: 12px 14px; font: inherit; font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(62, 207, 165, 0.15);
}
textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Manifesto emphasis ---------- */
.manifesto-line em, .vision-statement em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Advantages ledger ---------- */
.ledger-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: stretch; }
.ledger-aside { position: relative; }
.ledger-aside img {
  position: sticky; top: calc(var(--nav-h) + 24px);
  width: 100%; max-height: calc(100vh - var(--nav-h) - 48px);
  object-fit: cover; object-position: top;
  border-radius: var(--radius-card); border: 1px solid var(--line-strong);
}
.ledger { border-top: 1px solid var(--line); }
.ledger-row {
  display: grid; grid-template-columns: minmax(240px, 0.8fr) 1.5fr auto;
  gap: 16px 40px; align-items: baseline;
  padding: 36px 0; border-bottom: 1px solid var(--line);
}
.ledger-row h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; }
.ledger-row p { color: var(--text-2); font-size: 0.98rem; max-width: 48ch; }
.ledger-who {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}

/* ---------- WhatsApp section ---------- */
.wa-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.wa-grid .lede { margin-top: 18px; }
.wa-grid h2 + .lede { margin-top: 22px; }
.phone {
  max-width: 350px; width: 100%; margin: 0 auto;
  border: 1px solid var(--line-strong); border-radius: 30px;
  background: var(--bg-panel); padding: 12px;
  box-shadow: 0 22px 60px rgba(14, 31, 23, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.phone-screen { border-radius: 20px; background: var(--bg-raise); overflow: hidden; border: 1px solid var(--line); }
.phone-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.phone-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 700; font-size: 0.95rem;
}
.phone-head b { display: block; font-size: 0.92rem; line-height: 1.2; }
.phone-head small { color: var(--text-3); font-size: 0.75rem; }
.phone-body { padding: 16px 14px 20px; display: flex; flex-direction: column; gap: 9px; min-height: 300px; }
.msg-in {
  align-self: flex-start; background: var(--soft); border: 1px solid var(--line);
  color: var(--text); font-size: 0.86rem; max-width: 88%;
}
.msg-out {
  align-self: flex-end; background: var(--accent-dim); border: 1px solid var(--accent-line);
  color: var(--text); font-size: 0.86rem; max-width: 88%;
}
.msg-doc { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); }

/* ---------- Gateway (one nervous system) ---------- */
.gateway-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.gateway-copy .lede { margin-top: 18px; }
.ask {
  margin-top: 30px; border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  background: var(--bg-panel); overflow: hidden;
}
.ask-head {
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.ask-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ask-msg {
  font-size: 0.9rem; padding: 10px 14px; border-radius: 12px; max-width: 92%;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.ask-msg.show { opacity: 1; transform: none; }
.ask-user { align-self: flex-end; background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--text); }
.ask-sys { align-self: flex-start; background: var(--soft); border: 1px solid var(--line); color: var(--text-2); }
.ask-sys .ok { color: var(--accent); font-weight: 600; }

.hub-wrap { position: relative; }
.hub-svg { width: 100%; height: auto; }
.hub-svg .spoke {
  stroke: var(--line-strong); stroke-width: 1.5; fill: none;
}
.hub-svg .pulse-line {
  stroke: var(--accent); stroke-width: 1.5; fill: none;
  stroke-dasharray: 10 130;
  animation: hubFlow 3.2s linear infinite;
  animation-delay: calc(var(--fd, 0) * 0.45s);
  opacity: 0.9;
}
@keyframes hubFlow { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } }
.hub-svg .hub-core { fill: var(--accent); }
.hub-svg .hub-ring {
  fill: none; stroke: var(--accent); stroke-width: 1;
  transform-origin: 300px 230px;
  animation: hubPulse 3s var(--ease-out) infinite;
  opacity: 0;
}
.hub-svg .hub-ring.r2 { animation-delay: 1.5s; }
@keyframes hubPulse { 0% { transform: scale(0.4); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
.hub-node { }
.hub-node rect { fill: var(--bg-panel); stroke: var(--line-strong); rx: 12; }
.hub-node text { fill: var(--text-2); font-family: var(--font-sans); font-size: 13px; font-weight: 500; }
.hub-node .icn-dot { fill: var(--accent); }
.hub-label { fill: var(--text); font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; }
.hub-sub { fill: var(--text-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; }

/* ---------- Intake flow (animated journey graphic) ---------- */
.flow { position: relative; }
.flow-track {
  position: absolute; left: 4%; right: 4%; top: 30px; height: 2px;
  background: var(--line);
}
.flow-track i {
  position: absolute; inset: 0; transform-origin: left;
  background: var(--accent); transform: scaleX(0);
  transition: transform 2.6s linear;
}
.flow.play .flow-track i { transform: scaleX(1); }
.flow-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.flow-stage { padding-top: 62px; position: relative; }
.flow-dot {
  position: absolute; top: 19px; left: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--bg);
  transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.flow-stage.lit .flow-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 6px var(--accent-dim); }
.flow-stage .icn { width: 26px; height: 26px; color: var(--text-3); margin-bottom: 12px; transition: color 0.4s; }
.flow-stage.lit .icn { color: var(--accent); }
.flow-stage h3 { font-size: 1.05rem; margin-bottom: 8px; }
.flow-stage p { color: var(--text-2); font-size: 0.9rem; }
.flow-stage .flow-detail {
  margin-top: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-panel); padding: 12px 14px;
  font-size: 0.82rem; color: var(--text-2);
  opacity: 0.4; transform: translateY(6px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), border-color 0.4s;
}
.flow-stage.lit .flow-detail { opacity: 1; transform: none; border-color: var(--accent-line); }
.flow-detail b { color: var(--text); display: block; margin-bottom: 3px; font-size: 0.82rem; }

/* ---------- IPD product section ---------- */
.ipd-hero {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--line-strong);
  min-height: 460px; display: flex; align-items: flex-end;
}
.ipd-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ipd-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--scrim-c), 0.12) 0%, rgba(var(--scrim-c), 0.64) 52%, rgba(var(--scrim-c), 0.97) 100%);
}
.ipd-hero-copy { position: relative; z-index: 1; padding: 44px; max-width: 640px; }
.ipd-hero-copy h2 { margin-bottom: 14px; }
.ipd-hero-copy p { color: var(--on-media); font-size: 1.05rem; }
.ipd-feats {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 44px;
}
.ipd-feat { display: flex; gap: 14px; align-items: flex-start; }
.ipd-feat .icn { width: 22px; height: 22px; color: var(--accent); margin-top: 3px; }
.ipd-feat h3 { font-size: 0.98rem; margin-bottom: 4px; }
.ipd-feat p { color: var(--text-2); font-size: 0.88rem; }

/* ---------- Weave band (every hand in the patient's care, connected) ---------- */
.weave-band {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-strong);
  min-height: 440px;
}
.weave-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.weave-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--scrim-c), 0.04) 0%, rgba(var(--scrim-c), 0.12) 42%, rgba(var(--scrim-c), 0.74) 100%);
}
.weave-cards { position: absolute; inset: 0; }
.weave-card {
  position: absolute; bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  padding: 12px 20px; border-radius: 14px;
  background: rgba(255, 255, 252, 0.8);
  border: 1px solid rgba(20, 60, 45, 0.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #0e1f17; font-size: 0.95rem; font-weight: 500;
  box-shadow: 0 6px 20px rgba(14, 31, 23, 0.12);
  opacity: 0;
  transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
}
.weave-card .icn { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.weave-card.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Vision (any scale + the connected whole) ---------- */
.vision { overflow: hidden; }
.vision-tiers { display: grid; grid-template-columns: 1.15fr 1fr 1.25fr; gap: 24px; align-items: start; }
.vision-tier {
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  background: var(--bg-panel); padding: 26px;
}
.vision-tier:nth-child(2) { margin-top: 44px; }
.vision-tier:nth-child(3) { margin-top: 88px; border-color: var(--accent-line); }
.vision-tier .icn { width: 24px; height: 24px; color: var(--accent); margin-bottom: 14px; }
.vision-tier h3 { margin-bottom: 8px; }
.vision-tier p { color: var(--text-2); font-size: 0.92rem; }
.vision-tier small { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
/* Gentle perpetual bob on the vision cards (motion-safe only). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes paperFloat { from { transform: translateY(0); } to { transform: translateY(-4px); } }
  .vision-tier { animation: paperFloat 7s ease-in-out infinite alternate; }
  .vision-tier:nth-child(2) { animation-delay: 1.4s; }
  .vision-tier:nth-child(3) { animation-delay: 2.8s; }
}

.node-marquee { margin: 72px 0 0; position: relative; }
.node-marquee::before, .node-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none;
}
.node-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.node-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.node-track { display: flex; gap: 12px; width: max-content; animation: nodeScroll 36s linear infinite; }
.node-marquee:hover .node-track { animation-play-state: paused; }
@keyframes nodeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.node-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--soft);
  color: var(--text-2); font-size: 0.9rem; font-weight: 500; white-space: nowrap;
}
.node-chip .icn { width: 15px; height: 15px; color: var(--accent); }

.vision-copy { margin: 56px auto 0; max-width: 760px; text-align: center; }
.vision-copy p { color: var(--text-2); font-size: 1.05rem; }
.vision-copy p + p { margin-top: 14px; }
.vision-coda {
  margin: 22px auto 0; text-align: center;
  color: var(--text-2); font-size: 1.02rem; max-width: 46ch;
}
.vision-statement {
  margin: 72px auto 0; max-width: 22ch; text-align: center;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem); font-weight: 650;
  letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance;
}

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .icn { width: 16px; height: 16px; color: var(--text-3); transition: transform 0.3s var(--ease-out); }
.faq details[open] summary .icn { transform: rotate(45deg); color: var(--accent); }
.faq details p { color: var(--text-2); font-size: 0.96rem; max-width: 68ch; padding: 0 0 22px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal-in { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal .cap-media { opacity: 1; transform: none; transition: none; }
  .cap-media video, .sec-media video { opacity: 1; transition: none; }
  .split-words .w { opacity: 1; transform: none; transition: none; }
  .hub-svg .pulse-line, .hub-svg .hub-ring { animation: none; }

  .weave-cards { position: static; display: flex; flex-direction: column; gap: 10px; padding: 20px; }
  .weave-card { position: static; opacity: 1; transform: none; }
  .weave-card:nth-child(n+4) { display: none; }

  .ask-msg { opacity: 1; transform: none; transition: none; }
  .flow-track i { transition: none; }
  .flow-stage .flow-detail { opacity: 1; transform: none; transition: none; }
  .node-track { animation: none; }
  .wave i { animation: none; height: 45%; }
  .demo-line, .chip, .note-field { transition: none; }
  .btn, .cell, .opt { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav-cta .btn { display: none; }
  .security-panel { grid-template-columns: 1fr; padding: 36px; gap: 36px; }
  .config-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 768px) {
  section { padding: 76px 0; }
  .pillars { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .cell-3, .cell-2, .cell-4 { grid-column: auto; }
  .deploy { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .demo-body { grid-template-columns: 1fr; }
  .demo-col + .demo-col { border-left: 0; border-top: 1px solid var(--line); }
  .form-card { padding: 26px; }
  .manifesto { padding: 90px 0 70px; }
  .gateway-grid { grid-template-columns: 1fr; gap: 40px; }
  .ledger-row { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
  .wa-grid { grid-template-columns: 1fr; gap: 40px; }
  .flow-track { display: none; }
  .flow-stages { grid-template-columns: 1fr; gap: 30px; }
  .flow-stage { padding-top: 0; }
  .flow-dot { display: none; }
  .ipd-hero { min-height: 380px; }
  .ipd-hero-copy { padding: 26px; }
  .ipd-feats { grid-template-columns: 1fr; gap: 24px; }
  .vision-tiers { grid-template-columns: 1fr; }
  .vision-tier:nth-child(2), .vision-tier:nth-child(3) { margin-top: 0; }
  .weave-band { min-height: 320px; }
  .weave-card { white-space: normal; max-width: 90%; font-size: 0.85rem; }
}

/* ---------- Icon classes (URLs resolve relative to this stylesheet) ---------- */
.i-arrow-right { --icn: url(icons/arrow-right.svg); }
.i-arrows-clockwise { --icn: url(icons/arrows-clockwise.svg); }
.i-bed { --icn: url(icons/bed.svg); }
.i-buildings { --icn: url(icons/buildings.svg); }
.i-caret-down { --icn: url(icons/caret-down.svg); }
.i-chart-line-up { --icn: url(icons/chart-line-up.svg); }
.i-check { --icn: url(icons/check.svg); }
.i-clock-countdown { --icn: url(icons/clock-countdown.svg); }
.i-cloud { --icn: url(icons/cloud.svg); }
.i-cpu { --icn: url(icons/cpu.svg); }
.i-database { --icn: url(icons/database.svg); }
.i-device-tablet { --icn: url(icons/device-tablet.svg); }
.i-envelope-simple { --icn: url(icons/envelope-simple.svg); }
.i-file-text { --icn: url(icons/file-text.svg); }
.i-first-aid { --icn: url(icons/first-aid.svg); }
.i-globe-hemisphere-east { --icn: url(icons/globe-hemisphere-east.svg); }
.i-hard-drives { --icn: url(icons/hard-drives.svg); }
.i-heartbeat { --icn: url(icons/heartbeat.svg); }
.i-hospital { --icn: url(icons/hospital.svg); }
.i-key { --icn: url(icons/key.svg); }
.i-list { --icn: url(icons/list.svg); }
.i-lock-key { --icn: url(icons/lock-key.svg); }
.i-microphone { --icn: url(icons/microphone.svg); }
.i-minus { --icn: url(icons/minus.svg); }
.i-plugs-connected { --icn: url(icons/plugs-connected.svg); }
.i-plus { --icn: url(icons/plus.svg); }
.i-prescription { --icn: url(icons/prescription.svg); }
.i-printer { --icn: url(icons/printer.svg); }
.i-pulse { --icn: url(icons/pulse.svg); }
.i-qr-code { --icn: url(icons/qr-code.svg); }
.i-shield-check { --icn: url(icons/shield-check.svg); }
.i-stethoscope { --icn: url(icons/stethoscope.svg); }
.i-translate { --icn: url(icons/translate.svg); }
.i-users-three { --icn: url(icons/users-three.svg); }
.i-waveform { --icn: url(icons/waveform.svg); }
.i-wifi-slash { --icn: url(icons/wifi-slash.svg); }
.i-x { --icn: url(icons/x.svg); }
.i-chats-circle { --icn: url(icons/chats-circle.svg); }
.i-megaphone { --icn: url(icons/megaphone.svg); }
.i-map-trifold { --icn: url(icons/map-trifold.svg); }
.i-phone { --icn: url(icons/phone.svg); }
.i-flask { --icn: url(icons/flask.svg); }
.i-pill { --icn: url(icons/pill.svg); }
.i-monitor { --icn: url(icons/monitor.svg); }
.i-bell-ringing { --icn: url(icons/bell-ringing.svg); }
.i-drop { --icn: url(icons/drop.svg); }
.i-sun { --icn: url(icons/sun.svg); }
.i-moon { --icn: url(icons/moon.svg); }

/* ============================================================
   Scroll-driven story (merged from /experience): the illustrated,
   pinned frame-scrub sequence that opens the homepage, above the
   manifesto. The stage itself is bright illustrated media and stays
   light; the chrome around it (loader, rail, storyboard) uses the
   site tokens (light-only). Selectors are scoped under .stage /
   .storyboard / .sb-chips so the story's glass ".chip" never collides
   with the note ".chip" used elsewhere on the page.
   The engine + markup + frames are shared with experience.html.
   ============================================================ */

/* stage vs static storyboard (engine adds body.js-engine when it runs) */
.stage { display: none; }
body.js-engine .stage { display: block; }
body.js-engine .storyboard { display: none; }

.stage-scroll { position: relative; height: 800vh; }  /* ~8 viewport heights of scrub */
.stage-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}
#frameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* film grain, fixed, non-interactive, extremely subtle; only while the story is
   on screen (body.story-active) and only when the engine runs. */
.grain {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: var(--grain-uri);
  background-size: 180px 180px;
  transition: opacity 0.45s var(--ease-out);
}
body:not(.js-engine) .grain { display: none; }
body:not(.story-active) .grain { opacity: 0; }

/* copy overlays (titles) sit over the bright media, so they stay ink-on-cream */
.overlays { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.stage .scene-title {
  position: absolute;
  left: clamp(20px, 6vw, 96px);
  bottom: clamp(96px, 18vh, 200px);
  max-width: min(20ch, 82vw);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 650; line-height: 1.05; letter-spacing: -0.02em;
  color: #14261d;
  opacity: 0; transform: translateY(30px);
  will-change: opacity, transform;
}
.stage .scene-title::before {
  content: ''; position: absolute; z-index: -1;
  left: -14%; right: -30%; top: -30%; bottom: -34%;
  background: radial-gradient(70% 100% at 22% 60%, rgba(250, 247, 239, 0.82), rgba(250, 247, 239, 0.42) 46%, transparent 72%);
  filter: blur(6px);
}
.stage .scene-title .eyebrow {
  display: block;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #0b7d5c; margin-bottom: 14px;
}

/* glass chips over the bright media (hardcoded light-glass, like the weave cards) */
.chips { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.stage .chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 252, 0.72);
  border: 1px solid rgba(20, 60, 45, 0.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #14261d; font-size: 0.8rem; font-weight: 500;
  transform: translate(-50%, 8px);
  opacity: 0; will-change: opacity, transform;
  box-shadow: 0 6px 22px rgba(20, 60, 45, 0.12);
}
.stage .chip .icn { width: 14px; height: 14px; color: #0b7d5c; }
.stage .chip .soon {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: #c47b1f;
  border: 1px solid rgba(196, 123, 31, 0.4);
  padding: 2px 6px; border-radius: 999px; margin-left: 2px;
}
/* cycle-scene chips animate on a timer, so they get a CSS transition */
.stage .chip-cycle { transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
@media (max-width: 1023px) {
  .ledger-split { grid-template-columns: 1fr; }
  .ledger-aside { display: none; }
}
@media (max-width: 767px) { .stage .chip { font-size: 0.7rem; padding: 6px 11px; } }

/* progress rail (7 dots), visible only while the story is on screen */
.rail {
  position: fixed; z-index: 9;
  right: clamp(12px, 2vw, 26px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
  pointer-events: auto;
  transition: opacity 0.45s var(--ease-out);
}
body:not(.js-engine) .rail { display: none; }
body:not(.story-active) .rail { opacity: 0; pointer-events: none; }
.rail button {
  width: 10px; height: 10px; border-radius: 999px;
  border: 1px solid rgba(20, 60, 45, 0.34);
  background: transparent; cursor: pointer; padding: 0;
  transition: transform 0.3s var(--ease-out), background 0.3s, border-color 0.3s;
}
.rail button:hover { border-color: var(--accent); }
.rail button[aria-current="true"] {
  background: var(--accent); border-color: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 0 10px rgba(11, 125, 92, 0.35);
}
@media (max-width: 767px) { .rail { gap: 11px; } .rail button { width: 8px; height: 8px; } }

/* branded loader (gates scene 1; never hard-blocks, engine drops it on a 6s backstop) */
.loader {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; background: var(--bg);
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); }
.loader-bar { width: min(280px, 60vw); height: 3px; border-radius: 999px; background: rgba(20, 60, 45, 0.12); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width 0.25s linear; }
.loader-meta { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--text-3); }
.loader-pct { color: var(--accent); }

/* static storyboard (reduced-motion / no-JS / engine-failure fallback), site tokens */
.storyboard { display: block; }
.sb-scene {
  min-height: 92vh; display: flex; flex-direction: column; justify-content: center;
  padding: 60px clamp(22px, 6vw, 80px); gap: 24px;
  border-bottom: 1px solid var(--line);
}
.sb-scene img { width: 100%; max-width: 1100px; border-radius: 16px; display: block; border: 1px solid var(--line); }
.sb-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.sb-title { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 650; letter-spacing: -0.02em; max-width: 22ch; color: var(--text); }
.sb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-chips .chip {
  position: static; transform: none; opacity: 1;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-panel); border: 1px solid var(--line);
  color: var(--text); font-size: 0.82rem; font-weight: 500;
  box-shadow: none;
}
.sb-chips .chip .icn { width: 14px; height: 14px; color: var(--accent); }
.sb-chips .chip .soon {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: #c47b1f;
  border: 1px solid rgba(196, 123, 31, 0.4);
  padding: 2px 6px; border-radius: 999px; margin-left: 2px;
}

/* ============================================================
   Looping product footage below the story (small, muted, played/paused
   by a shared IntersectionObserver; reduced-motion renders the poster).
   ============================================================ */
.loop-media { display: block; width: 100%; height: 100%; object-fit: cover; }

/* IPD band: the ward loop fills the rounded hero band */
.ipd-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Security: media panel beside the security items */
.security-media {
  margin-top: 28px; position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--soft);
}
.security-media video, .security-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vision tiers: a small 16:9 thumb above each tier's icon + title */
.vision-thumb {
  position: relative; aspect-ratio: 16 / 9; margin-bottom: 18px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--soft);
}
.vision-thumb video, .vision-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ambient event-text chips on the animated bands: light-glass, cycled one at a
   time by the shared cycler in site.js (pause on hover; reduced-motion pins the
   first). Same chip language as the story overlays. */
.band-chips { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.band-chip {
  position: absolute; top: 22px; left: 22px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 252, 0.8);
  border: 1px solid rgba(20, 60, 45, 0.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #14261d; font-size: 0.8rem; font-weight: 500;
  box-shadow: 0 6px 20px rgba(20, 60, 45, 0.12);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.band-chip .icn { width: 14px; height: 14px; color: #0b7d5c; flex: none; }
.band-chip.on { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .band-chip { font-size: 0.8rem; padding: 6px 11px; white-space: normal; max-width: calc(100% - 44px); }
}

/* second media band (pharmacy + labs) inside the weave section */
.pharmlab-head { margin: 30px 0 14px; font-size: 1.1rem; }
.pharmlab-band {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-strong); min-height: 300px; background: var(--soft);
}
.pharmlab-band video, .pharmlab-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pharmlab-band .band-chip { top: auto; bottom: 22px; left: 22px; }
@media (max-width: 768px) { .pharmlab-band { min-height: 240px; } }

/* static caption chip on each vision thumb's lower edge (always visible, smaller) */
.vision-thumb-chip {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 12px;
  background: rgba(255, 255, 252, 0.85);
  border: 1px solid rgba(20, 60, 45, 0.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #14261d; font-size: 0.72rem; font-weight: 500; line-height: 1.25;
  box-shadow: 0 4px 14px rgba(20, 60, 45, 0.14);
}
.vision-thumb-chip .icn { width: 13px; height: 13px; color: #0b7d5c; flex: none; }

/* ============================================================
   BELOW-STORY REBUILD (2026-07-23): capability-first rebuild of
   the homepage below the pinned scroll story. Positioning header,
   alternating .cap-row media/text bands (purpose-built for the
   illustrated loop footage), and full-width breaks (demo, ledger,
   security) that punctuate the alternation. Cohesive cream/emerald
   language, same tokens as the rest of the site.
   ============================================================ */

/* ---- Positioning header (replaces the old manifesto) ---- */
.positioning { padding: 116px 0 24px; }
.positioning .ambient-h { max-width: 18ch; }
.ambient-lede {
  margin-top: 22px; color: var(--text-2);
  font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.5; max-width: 46ch;
}
.kinetic-line {
  margin-top: clamp(40px, 6vw, 64px);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.12;
  max-width: 20ch; text-wrap: balance;
}
.kinetic-line em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Capability rows ---- */
.caps { padding: 56px 0 110px; }
.cap-list { display: flex; flex-direction: column; gap: clamp(60px, 8.5vw, 112px); }
.cap-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 60px); align-items: center;
}
/* even rows (media right) on desktop; DOM keeps media first so mobile stacks media-first */
.cap-row--rev .cap-media { order: 2; }

.cap-media {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--soft);   /* soft cream placeholder until the loop lands */
}
.cap-media video, .cap-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Media band eases in with its row's reveal (opacity + small lift), so left and
   right rows both enter smoothly instead of popping. The poster is painted on the
   container in site.js, so it stays visible beneath while the band settles. */
.reveal .cap-media { opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.reveal.reveal-in .cap-media { opacity: 1; transform: none; }
/* The video fades over its own poster on the first 'playing' event (class set in
   site.js): no poster-to-first-frame flash. Applies to both cap rows and the
   security band's right-side media. */
.cap-media video, .sec-media video { opacity: 0; transition: opacity 0.5s var(--ease-out); }
.cap-media video.is-playing, .sec-media video.is-playing { opacity: 1; }

.cap-text { max-width: 46ch; }
.cap-text h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.cap-lead { margin-top: 16px; color: var(--text-2); font-size: 1.05rem; line-height: 1.55; }
.cap-value { margin-top: 12px; color: var(--text); font-weight: 500; font-size: 1.02rem; }
.cap-tag {
  display: inline-block; margin-top: 20px;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}

/* COMING SOON marker inside a band-chip (amber, matches story chip .soon) */
.band-chip .soon {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: #c47b1f;
  border: 1px solid rgba(196, 123, 31, 0.4);
  padding: 2px 6px; border-radius: 999px; margin-left: 4px;
}

/* ---- Full-width breaks between row groups ---- */
.cap-break { position: relative; }
.sec-head--center { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.sec-head--center .lede { margin-left: auto; margin-right: auto; }
.cap-break--ledger .sec-head { margin-bottom: 8px; }

/* Security break: full-width media + text band so it reads as a punctuation mark */
.sec-shell {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(30px, 4.5vw, 56px); align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--bg-raise), var(--bg-panel));
  padding: clamp(26px, 4vw, 48px);
}
.sec-media {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--soft);
}
.sec-media video, .sec-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sec-body .eyebrow { margin-bottom: 12px; }
.sec-body h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.sec-body .lede { margin: 14px 0 22px; font-size: 1.02rem; }

/* ---- Pricing: illustrated thumbnail on each module option card ---- */
.opt.opt--card { flex-direction: column; align-items: stretch; gap: 0; padding: 14px; }
.opt .opt-thumb {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--soft);   /* cream until the still lands */
  margin-bottom: 14px;
}
.opt .opt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opt .opt-main { display: flex; gap: 14px; align-items: flex-start; color: var(--text); font-size: 1rem; }
.opt .opt-copy { flex: 1 1 auto; min-width: 0; display: block; }

/* ---- Mobile quality pass ---- */
@media (max-width: 860px) {
  .cap-row { grid-template-columns: 1fr; gap: 22px; }
  .cap-row--rev .cap-media { order: 0; }   /* media-first stack on mobile */
  .cap-text { max-width: none; }
  .sec-shell { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .positioning { padding: 84px 0 12px; }
  .demo-head { flex-wrap: wrap; gap: 10px; }
  .demo-sound { white-space: nowrap; min-height: 40px; }
  .caps { padding: 36px 0 76px; }
  .cap-lead { font-size: 1rem; }
  .cap-value { font-size: 1rem; }
}
@media (max-width: 400px) {
  .cap-media .band-chip, .sec-media .band-chip {
    font-size: 0.8rem; padding: 6px 10px; max-width: calc(100% - 32px);
  }
}