/* ══════════════════════════════════════════════════════════════════════════
   InventDB SOAR — website-v39 design system
   Radically minimal marketing site. Light (default) + dark via html[data-theme].
   Mobile-first, fully responsive. Warm off-white canvas / warm dark (never black).
   Indigo (#48176a light / #b793e6 dark) is the SINGLE accent. Inter Tight display
   + Inter body. Palette inherited from the product (unified-platform-mocks-v3) so
   product screenshots sit naturally in their frames.
   The SOAR motif (S·O·A·R) is the recurring device. No glass, no neon, no clutter.
   Tokens only — never raw hex in markup. One font import. No external libraries.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ── tokens · light (DEFAULT) ───────────────────────────────────────────── */
:root,
html[data-theme="light"] {
  /* surface steps — canvas → surface → raised; inset = recessed wells */
  --bg-canvas:  #f6f4f0;          /* warm off-white — the product's canvas */
  --bg-surface: #ffffff;
  --bg-raised:  #ffffff;
  --bg-inset:   #efede7;
  --bg-ink:     #181520;          /* the one dark band (CTA / footer) in light mode */

  --line:        rgba(34, 30, 43, .08);
  --line-strong: rgba(34, 30, 43, .14);
  --card-border: transparent;     /* light cards are borderless (soft shadow) */

  /* text emphasis tiers */
  --fg:       #232029;
  --fg-muted: #5f5a6b;
  --fg-faint: #908a9b;
  --fg-on-ink:        #f3f0f8;
  --fg-on-ink-muted:  rgba(243, 240, 248, .68);
  --fg-on-ink-faint:  rgba(243, 240, 248, .42);

  /* the one accent — InventDB indigo */
  --accent:        #48176a;
  --accent-solid:  #48176a;
  --accent-hi:     #7a3fb8;       /* whisper-gradient companion (brand mark only) */
  --accent-soft:   #b9a3d3;
  --accent-tint:   rgba(72, 23, 106, .06);
  --accent-tint-2: rgba(72, 23, 106, .11);
  --accent-line:   rgba(72, 23, 106, .26);
  --accent-on-ink: #c6a4ec;       /* accent legible on the dark band */
  --on-accent:     #ffffff;

  /* functional colors ONLY (amber strictly = not-real-yet) */
  --amber: #8a6200;  --amber-bg: #f8f1dd;  --amber-line: #d9c17b;
  --green: #1d7a4b;  --green-bg: #e6f3eb;

  /* shadow levels */
  --shadow-card:    0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-frame:   0 18px 50px -20px rgba(24, 21, 32, .28), 0 4px 14px -8px rgba(24, 21, 32, .18);
  --shadow-overlay: 0 16px 48px rgba(16, 24, 40, .16);

  /* shape · type · density · shell (theme-independent) */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-pill: 999px;
  --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
  --nav-h: 60px;
  --shell-max: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* fluid type scale (mobile-first, clamp-driven) */
  --fs-meta:   12.5px;
  --fs-ui:     15px;
  --fs-lead:   clamp(1.05rem, 0.95rem + 0.6vw, 1.28rem);
  --fs-h3:     clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --fs-h2:     clamp(1.7rem, 1.3rem + 2.1vw, 2.7rem);
  --fs-h1:     clamp(2.5rem, 1.6rem + 4.6vw, 4.9rem);
  --fs-soar:   clamp(3.2rem, 1.4rem + 9vw, 8rem);
}

/* ── tokens · dark (warm gray stack — never pure black, never neon) ─────── */
html[data-theme="dark"] {
  --bg-canvas:  #161419;
  --bg-surface: #1f1c23;
  --bg-raised:  #272330;
  --bg-inset:   #211d28;
  --bg-ink:     #100e14;

  --line:        rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --card-border: rgba(255, 255, 255, .07);

  --fg:       #ece9f0;
  --fg-muted: #a59fb0;
  --fg-faint: #766f82;
  --fg-on-ink:        #ece9f0;
  --fg-on-ink-muted:  rgba(236, 233, 240, .66);
  --fg-on-ink-faint:  rgba(236, 233, 240, .40);

  --accent:        #b793e6;
  --accent-solid:  #6d2fa0;
  --accent-hi:     #b793e6;
  --accent-soft:   #57497a;
  --accent-tint:   rgba(183, 147, 230, .10);
  --accent-tint-2: rgba(183, 147, 230, .16);
  --accent-line:   rgba(183, 147, 230, .32);
  --accent-on-ink: #c6a4ec;
  --on-accent:     #ffffff;

  --amber: #e3b75e;  --amber-bg: #2c2517;  --amber-line: #6e5827;
  --green: #56bd87;  --green-bg: #1a2a21;

  --shadow-card:    none;
  --shadow-frame:   0 22px 60px -22px rgba(0, 0, 0, .7);
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, .55);
}

/* ── reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.6;
  color: var(--fg-muted); background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

h1, h2, h3, h4 {
  font-family: var(--font-display); color: var(--fg);
  margin: 0 0 .4em; letter-spacing: -.025em; line-height: 1.05; font-weight: 600;
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p  { margin: 0 0 1em; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--fg); font-weight: 600; }
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent-tint-2); color: var(--fg); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.skip-link { position: absolute; left: -9999px; z-index: 200; }
.skip-link:focus {
  left: 14px; top: 14px; background: var(--accent-solid); color: var(--on-accent);
  padding: 9px 16px; border-radius: var(--r-sm); font-weight: 600;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── layout shell ───────────────────────────────────────────────────────── */
.shell { width: 100%; max-width: var(--shell-max); margin: 0 auto; padding: 0 22px; }
.shell-narrow { max-width: 880px; }
.section { padding: clamp(56px, 5vw + 30px, 116px) 0; }
.section-sm { padding: clamp(40px, 4vw + 18px, 76px) 0; }
.section-canvas  { background: var(--bg-canvas); }
.section-surface { background: var(--bg-surface); }
html[data-theme="light"] .section-surface { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.section-ink {
  background: var(--bg-ink); color: var(--fg-on-ink);
}
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: var(--fg-on-ink); }
.section-ink p { color: var(--fg-on-ink-muted); }
.section-ink strong { color: var(--fg-on-ink); }
.section-ink a { color: var(--accent-on-ink); }

/* section header block */
.sec-head { max-width: 720px; margin: 0 0 clamp(34px, 4vw, 56px); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent); flex: none;
}
.section-ink .kicker { color: var(--accent-on-ink); }
.section-ink .kicker::before { background: var(--accent-on-ink); }
.sec-title { font-size: var(--fs-h2); margin-bottom: .5em; }
.sec-title em { font-style: italic; font-weight: 400; color: var(--accent); }
.section-ink .sec-title em { color: var(--accent-on-ink); }
.sec-sub { font-size: var(--fs-lead); color: var(--fg-muted); max-width: 60ch; line-height: 1.55; }
.center .sec-sub { margin-left: auto; margin-right: auto; }
.section-ink .sec-sub { color: var(--fg-on-ink-muted); }

/* ══ STICKY NAV ════════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg-canvas) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 14px;
  height: var(--nav-h); max-width: var(--shell-max); margin: 0 auto; padding: 0 22px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 27px; height: 27px; flex: none; border-radius: 7px; object-fit: cover; }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.brand-word .soar { color: var(--accent); font-weight: 700; }

.nav-rooms { display: none; margin: 0 auto; align-items: center; gap: 2px; }
.nav-rooms a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--r-pill); color: var(--fg-muted);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav-rooms a:hover { color: var(--fg); background: var(--accent-tint); text-decoration: none; }
.nav-rooms a.is-active { color: var(--accent); background: var(--accent-tint-2); font-weight: 600; }
.nav-rooms a .verb {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--accent); opacity: .7; letter-spacing: .04em;
}
.nav-rooms a.is-active .verb { opacity: 1; }

.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

.theme-toggle {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--fg-muted);
  transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-tint); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }

.nav-cta {
  display: none; align-items: center; gap: 7px; padding: 9px 18px;
  background: var(--accent-solid); color: var(--on-accent) !important;
  border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
  transition: opacity .15s var(--ease);
}
.nav-cta:hover { opacity: .92; text-decoration: none; }

.nav-burger {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--fg);
}
.nav-burger svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.nav-burger .x { display: none; }
body.nav-open .nav-burger .menu { display: none; }
body.nav-open .nav-burger .x { display: block; }

/* mobile drawer */
.nav-drawer {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 95;
  background: var(--bg-canvas);
  padding: 18px 22px 40px; overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
body.nav-open .nav-drawer { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.nav-drawer a {
  display: flex; align-items: center; gap: 12px; padding: 16px 8px;
  border-bottom: 1px solid var(--line); color: var(--fg);
  font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  min-height: 44px;
}
.nav-drawer a:hover { text-decoration: none; color: var(--accent); }
.nav-drawer a.is-active { color: var(--accent); }
.nav-drawer a .verb {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--accent); letter-spacing: .1em; opacity: .7;
}
/* letter via CSS content, not DOM text — keeps drawer link text clean for sitelinks */
.nav-drawer a .verb::before { content: attr(data-ico); }
.nav-drawer .drawer-cta {
  margin-top: 22px; justify-content: center; border: none;
  background: var(--accent-solid); color: var(--on-accent);
  border-radius: var(--r-pill); font-size: 17px;
}
.nav-drawer .drawer-cta:hover { color: var(--on-accent); }

/* ── Monthly Cohort offer bar (ad-landing + pricing) ─────────────────── */
.offer-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px 12px;
  flex-wrap: wrap; background: #48176a; color: var(--fg-on-ink);
  font-size: 13.5px; line-height: 1.45; text-align: center; padding: 9px 18px; text-decoration: none;
}
/* fixed brand indigo above (NOT var(--accent) — accent goes light-purple in dark mode → text vanishes);
   strong needs an explicit on-ink color to beat the global `strong{color:var(--fg)}` (dark) rule */
.offer-bar strong { color: var(--fg-on-ink); font-weight: 600; }
.offer-bar .oc {
  font: 600 12px var(--font-mono); letter-spacing: .05em; white-space: nowrap;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  border-radius: var(--r-pill); padding: 2px 10px;
}
.offer-bar:hover .oc { background: rgba(255,255,255,.26); }
/* reinforcing callout inside the pricing section */
.cohort-note {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--accent-tint-2); border: 1px solid var(--accent-line);
  border-radius: var(--r-md); padding: 14px 18px; margin: 0 0 22px;
}
.cohort-note .oc { font: 600 12px var(--font-mono); letter-spacing: .05em; flex: none;
  background: var(--accent); color: #fff; border-radius: var(--r-pill); padding: 3px 11px; }
.cohort-note p { margin: 0; font-size: 14px; color: var(--fg-muted); }
.cohort-note strong { color: var(--fg); font-weight: 600; }

/* ══ BUTTONS ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; min-height: 46px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  white-space: nowrap;
  transition: transform .14s var(--ease), opacity .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-primary { background: var(--accent-solid); color: var(--on-accent); }
.btn-primary:hover { transform: translateY(-1px); opacity: .94; color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent-line); color: var(--accent); }
.section-ink .btn-primary { background: var(--bg-surface); color: var(--accent); }
.section-ink .btn-ghost { color: var(--fg-on-ink); border-color: var(--fg-on-ink-faint); }
.section-ink .btn-ghost:hover { border-color: var(--fg-on-ink); color: var(--fg-on-ink); }
.btn-lg { padding: 16px 30px; font-size: 16px; min-height: 54px; }
.btn-sm { padding: 11px 16px; font-size: 13.5px; min-height: 44px; }
.btn-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: 600; font-size: 15px;
}
.btn-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s var(--ease); }
.btn-link:hover { text-decoration: none; }
.btn-link:hover svg { transform: translateX(3px); }
.section-ink .btn-link { color: var(--accent-on-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row, .btn-row.center { justify-content: center; }

/* ── pills & badges ─────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--bg-surface); color: var(--fg-muted);
  font-size: 13px; font-weight: 500;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.pill-mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.section-ink .pill { background: rgba(255,255,255,.05); border-color: var(--fg-on-ink-faint); color: var(--fg-on-ink-muted); }

.badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  border-radius: var(--r-pill); font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent-tint-2); color: var(--accent);
}
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-soft { background: var(--bg-inset); color: var(--fg-faint); }

/* ══ HERO ══════════════════════════════════════════════════════════════════ */
.hero { position: relative; padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); overflow: hidden; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  padding: 7px 16px 7px 12px; border-radius: var(--r-pill);
  background: var(--bg-surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--fg-muted);
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.hero h1 { margin-bottom: .35em; max-width: 16ch; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.hero-sub { font-size: var(--fs-lead); color: var(--fg-muted); max-width: 52ch; margin-bottom: 30px; line-height: 1.55; }
.hero-sub strong { color: var(--fg); }
.hero .btn-row { margin-bottom: 22px; }
.hero-meta {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-faint);
  letter-spacing: .05em; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.hero-meta .sep { color: var(--accent); opacity: .5; }

/* ══ THE SOAR MOTIF — the recurring device ════════════════════════════════ */
.soar-word {
  display: flex; gap: clamp(.06em, 2vw, .14em); flex-wrap: nowrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-soar); line-height: .9; letter-spacing: -.04em;
  color: var(--fg);
}
.soar-word .l { position: relative; color: var(--fg); }
.soar-word .l .cap { color: var(--accent); }

/* the four-verb ladder (SOAR explained) */
.soar-ladder { display: grid; gap: 14px; }
.soar-step {
  position: relative; display: grid;
  grid-template-columns: auto 1fr; gap: 16px 18px; align-items: start;
  padding: 22px; border-radius: var(--r-lg);
  background: var(--bg-surface); border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.soar-step:hover { background: var(--accent-tint); }
html[data-theme="dark"] .soar-step:hover { background: var(--bg-raised); }
.soar-letter {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--accent-tint-2);
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  color: var(--accent); letter-spacing: -.02em;
}
.soar-step .step-body { min-width: 0; }
.soar-step .step-verb {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 4px;
}
.soar-step h3 { margin-bottom: 6px; font-size: var(--fs-h3); }
.soar-step p { font-size: 14.5px; color: var(--fg-muted); margin: 0; line-height: 1.5; }
.soar-step .step-link { margin-top: 12px; }
@media (min-width: 760px) { .soar-ladder { grid-template-columns: repeat(2, 1fr); } }

/* compact SOAR rail (footer / inline marker) */
.soar-rail { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); }
.soar-rail b {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 6px; background: var(--accent-tint-2); color: var(--accent);
  font-size: 12px; font-weight: 700;
}
.soar-rail .dot-sep { color: var(--fg-faint); padding: 0 2px; }
/* On the always-dark footer band (and any dark section) the rail's var(--accent)
   is dark indigo in light theme → invisible. Use the on-ink accent + a light tile. */
.foot-brand .soar-rail b,
.section-ink .soar-rail b {
  color: var(--accent-on-ink);
  background: rgba(255, 255, 255, .08);
}

/* ══ FRAME COMPONENTS — screenshots in clean browser / device chrome ═══════ */
.frame-figure { margin: 0; }
.frame-figure figcaption {
  margin-top: 14px; font-size: 13px; color: var(--fg-faint);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.frame-figure figcaption .cap-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.section-ink .frame-figure figcaption { color: var(--fg-on-ink-faint); }

/* browser frame */
.browser-frame {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-frame);
}
.browser-bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: var(--bg-inset); border-bottom: 1px solid var(--line);
}
.browser-dots { display: flex; gap: 6px; flex: none; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); display: block; }
.browser-url {
  flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-radius: var(--r-pill); background: var(--bg-surface);
  border: 1px solid var(--line); font-family: var(--font-mono);
  font-size: 11.5px; color: var(--fg-faint); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.browser-url svg { width: 11px; height: 11px; flex: none; fill: none; stroke: var(--green); stroke-width: 2; }
.browser-frame .shot { display: block; width: 100%; height: auto; }

/* Operate — plan · runs · approvals triptych */
.op-triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.op-tri { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.op-tri .browser-frame { border-radius: var(--r-md); }
.op-tri figcaption { font-size: var(--fs-meta); color: var(--fg-muted); line-height: 1.5; }
.op-tri figcaption b { color: var(--fg); font-weight: 600; }
@media (max-width: 900px) { .op-triptych { grid-template-columns: 1fr; gap: 30px; } }

/* device (phone) frame */
.device-frame {
  width: 100%; max-width: 290px; margin: 0 auto;
  padding: 9px; border-radius: 34px;
  background: var(--bg-ink);
  box-shadow: var(--shadow-frame);
}
.device-frame .device-screen {
  border-radius: 26px; overflow: hidden; background: var(--bg-surface);
  position: relative;
}
.device-frame .device-screen::before {
  content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); z-index: 2;
}
.device-frame .shot { display: block; width: 100%; height: auto; }

/* plain bordered shot (full-bleed views) */
.plain-frame {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-frame);
}
.plain-frame .shot { display: block; width: 100%; height: auto; }

/* THEME-AWARE IMAGE SWAP — show light shot in light mode, dark in dark */
html[data-theme="light"] .shot-dark { display: none !important; }
html[data-theme="dark"]  .shot-light { display: none !important; }

/* ══ CARDS & BENTO ═════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-surface); border: 1px solid var(--card-border);
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--shadow-card);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.card-quiet { background: var(--bg-inset); box-shadow: none; border-color: transparent; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14.5px; line-height: 1.55; margin: 0; }

.bento { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(3, 1fr); } }
.bento .b-wide  { grid-column: 1 / -1; }
@media (min-width: 1000px) { .bento .b-2 { grid-column: span 2; } }

/* feature grid (no-app / no-code / no-IT proofs) */
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .feat-grid { grid-template-columns: repeat(3, 1fr); } }
.feat {
  padding: clamp(22px, 3vw, 30px); border-radius: var(--r-lg);
  background: var(--bg-surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
}
.feat .feat-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px; display: block;
}
.feat h3 { margin-bottom: 8px; font-size: var(--fs-h3); }
.feat p { font-size: 14.5px; color: var(--fg-muted); margin: 0; line-height: 1.55; }

/* split: copy + screenshot, alternating */
.split {
  display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.split-media-first .split-media { order: -1; }
  .split.wide-media { grid-template-columns: 0.85fr 1.15fr; }
}
.split-copy h2 { margin-bottom: .45em; }
.split-copy .sec-sub { margin-bottom: 24px; }
.split-list { display: grid; gap: 10px; margin: 0 0 26px; }
/* block li with an absolutely-positioned checkmark so the <strong> label and the
   trailing description text flow inline as ONE run. (A grid/flex li would split the
   bare text after </strong> into its own track, dropping the description to a new
   narrow column — the "Sleeps / when / idle" breakage.) */
.split-list li {
  position: relative; padding-left: 32px;
  font-size: 15px; color: var(--fg-muted); line-height: 1.5;
}
.split-list li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--accent-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348176a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
html[data-theme="dark"] .split-list li::before {
  background: var(--accent-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b793e6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.split-list li strong { color: var(--fg); }

/* a verb-tag for SOAR section headers on inner pages */
.verb-tag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.verb-tag .vletter {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--accent-tint-2); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.verb-tag .vrest {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint);
}
.verb-tag .vrest b { color: var(--accent); font-weight: 600; }

/* ══ PROOF / TRUST LINE ════════════════════════════════════════════════════ */
.proof-line {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--bg-inset); font-size: 14px; color: var(--fg-muted);
}
.proof-line .proof-sql {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--accent);
  background: var(--bg-surface); border-radius: var(--r-sm); padding: 3px 9px;
}
.section-ink .proof-line { background: rgba(255,255,255,.05); color: var(--fg-on-ink-muted); }
.section-ink .proof-line .proof-sql { background: rgba(255,255,255,.06); color: var(--accent-on-ink); }

/* ══ STAT / NUMBER STRIP ═══════════════════════════════════════════════════ */
.stat-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--line); }
@media (min-width: 760px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-cell { background: var(--bg-surface); padding: 26px 22px; }
.section-ink .stat-strip { background: var(--fg-on-ink-faint); }
.section-ink .stat-cell { background: var(--bg-ink); }
.stat-cell .stat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); letter-spacing: -.03em;
  color: var(--fg); line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.section-ink .stat-cell .stat-num { color: var(--fg-on-ink); }
.stat-cell .stat-num .accent { color: var(--accent); }
.section-ink .stat-cell .stat-num .accent { color: var(--accent-on-ink); }
.stat-cell .stat-lbl { font-size: 13.5px; color: var(--fg-muted); line-height: 1.45; }
.section-ink .stat-cell .stat-lbl { color: var(--fg-on-ink-muted); }

/* the KPI tiles echo (mirrors the product 'Today' numbers) */
.kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 680px) { .kpi-row { grid-template-columns: repeat(4, 1fr); } }
.kpi-tile {
  padding: 18px 20px; border-radius: var(--r-md);
  background: var(--bg-surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
}
.kpi-tile .kpi-lbl { font-size: 12px; color: var(--fg-muted); margin-bottom: 6px; }
.kpi-tile .kpi-val {
  font-family: var(--font-display); font-weight: 700; font-size: 28px;
  letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1;
}
.kpi-tile .kpi-val .unit { font-size: 14px; color: var(--fg-faint); font-weight: 500; }

/* ══ INTEGRATIONS RACK ═════════════════════════════════════════════════════ */
.integ-rack { display: flex; flex-wrap: wrap; gap: 10px; }
.integ-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px;
  border-radius: var(--r-pill); background: var(--bg-surface);
  border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--fg);
}
.integ-chip .ic { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.section-ink .integ-chip { background: rgba(255,255,255,.05); border-color: var(--fg-on-ink-faint); color: var(--fg-on-ink); }

/* ══ PRICING ═══════════════════════════════════════════════════════════════ */
.price-rowlabel {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint);
  margin: clamp(30px, 4vw, 48px) 0 16px;
}
/* "first month free" marker on the Personal tier-group labels (COHORT60 applies to Personal only) */
.rowlabel-free {
  display: inline-block; margin-left: 8px; font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--accent);
  background: var(--accent-tint-2); border: 1px solid var(--accent-line);
  border-radius: var(--r-pill); padding: 1px 9px; vertical-align: middle;
}
.price-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-grid.cols-2 { max-width: 640px; }
@media (min-width: 1040px) { .price-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } }
.tier {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 22px; border-radius: var(--r-lg);
  background: var(--bg-surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-card), 0 14px 30px -16px rgba(20, 12, 40, .28); }
.tier.is-pop { border: 1px solid var(--accent-line); box-shadow: var(--shadow-card), 0 0 0 1px var(--accent-line); }
.tier-head { display: flex; align-items: center; gap: 10px; }
.tier-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg); }
.tier-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.4rem; letter-spacing: -.03em; color: var(--fg); line-height: 1;
}
.tier-price .per { font-size: 14px; font-weight: 500; color: var(--fg-faint); letter-spacing: 0; }
.tier-list { display: grid; gap: 9px; margin-top: 2px; }
/* Absolute check + hanging indent: keeps mixed inline content (bold + text,
   e.g. "250K records · 5 GB") on one flowing line that wraps cleanly under
   the text — never under the checkmark. */
.tier-list li {
  position: relative; padding-left: 27px;
  font-size: 14px; color: var(--fg-muted); line-height: 1.5;
}
.tier-list li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 17px; height: 17px; border-radius: 6px;
  background: var(--accent-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348176a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
html[data-theme="dark"] .tier-list li::before {
  background: var(--accent-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b793e6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.tier-list li strong { color: var(--fg); }
.tier .btn { margin-top: auto; }
.price-note {
  font-size: 13.5px; color: var(--fg-faint); max-width: 70ch; margin-top: 22px; line-height: 1.6;
}

/* simple two-col table for compliance candor */
.candor { display: grid; gap: 10px; }
.candor-row {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--fg-muted);
}
.candor-row:first-child { border-top: none; }
.candor-row .mark { font-weight: 700; flex: none; margin-top: 1px; }
.candor-row .mark.yes { color: var(--green); }
.candor-row .mark.no  { color: var(--fg-faint); }
.candor-row b { color: var(--fg); }

/* ══ CTA BAND ══════════════════════════════════════════════════════════════ */
.cta-band { text-align: center; }
.cta-band .soar-rail { margin-bottom: 22px; }
.cta-band h2 { font-size: var(--fs-h2); margin-bottom: .4em; }
.cta-band p { font-size: var(--fs-lead); max-width: 54ch; margin: 0 auto 30px; }

/* ══ FOOTER ════════════════════════════════════════════════════════════════ */
.site-foot { background: var(--bg-ink); color: var(--fg-on-ink); padding: clamp(48px, 5vw, 76px) 0 32px; }
.site-foot h1, .site-foot h2, .site-foot h3, .site-foot h4 { color: var(--fg-on-ink); }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 36px; margin-bottom: 40px; }
@media (min-width: 680px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 960px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-brand .brand { color: var(--fg-on-ink); margin-bottom: 16px; }
.foot-brand .brand-word { color: var(--fg-on-ink); }
.foot-brand .brand-word .soar { color: var(--accent-on-ink); }
.foot-brand p { color: var(--fg-on-ink-muted); font-size: 14px; max-width: 38ch; line-height: 1.6; }
/* the footer band is always dark; use the on-ink accent so SOAR/Serverless stay
   legible (plain var(--accent) is dark indigo in light theme → invisible here). */
.foot-brand p strong { color: var(--accent-on-ink); font-weight: 600; }
.foot-brand .soar-rail { margin-top: 18px; }
.foot-col h4 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-on-ink-faint);
  margin-bottom: 16px;
}
.foot-col a { display: block; padding: 6px 0; color: var(--fg-on-ink-muted); font-size: 14.5px; }
.foot-col a:hover { color: var(--fg-on-ink); text-decoration: none; }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 26px; border-top: 1px solid var(--fg-on-ink-faint);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--fg-on-ink-faint);
}

/* ══ REVEAL ANIMATION — subtle, reduced-motion aware ══════════════════════ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }
.no-js .reveal { opacity: 1; transform: none; }

/* ══ RESPONSIVE NAV BREAKPOINTS ════════════════════════════════════════════ */
@media (min-width: 940px) {
  .nav-products { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
  .nav-drawer { display: none; }
}

/* keep nothing wider than the viewport at 360px */
@media (max-width: 380px) {
  .shell { padding: 0 16px; }
  .nav-inner { padding: 0 16px; gap: 8px; }
  .soar-word { font-size: clamp(2.6rem, 14vw, 3.4rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   TWO-PRODUCT LAYER — added when the site went from SOAR-only to the
   company site (InventDB) carrying TWO products: SOAR (the AI platform) and
   Serverless (the pure database). Everything below stays inside the existing
   indigo tokens — no new brand colors. Serverless gets a CALMER treatment:
   the same indigo, but quieter (mono labels, hairline frames, inset wells,
   the accent used sparingly) so the developer database reads as restrained
   next to SOAR's warmer platform story.
   ════════════════════════════════════════════════════════════════════════ */

/* ── product nav: SOAR (dropdown) · Serverless · Pricing, equal footing ──── */
/* .nav-products replaces .nav-rooms as the centered desktop nav. The SOAR
   rooms move INTO a CSS-only dropdown (hover + focus-within; no JS). */
.nav-products { display: none; margin: 0 auto; align-items: center; gap: 2px; }
.nav-products > a,
.nav-products .np-trigger {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--r-pill); color: var(--fg-muted);
  font-family: var(--font-ui); font-size: 14px; font-weight: 500; white-space: nowrap;
  background: none; border: none;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav-products > a:hover,
.nav-products .np-trigger:hover { color: var(--fg); background: var(--accent-tint); text-decoration: none; }
.nav-products > a.is-active,
.nav-products .np-item.is-active > .np-trigger { color: var(--accent); background: var(--accent-tint-2); font-weight: 600; }
/* the small mono product mark before each product label.
   The letter comes from CSS content (data-mark), NOT DOM text, so search engines
   don't fold it into the link text (else the "A" badge + "Agencies" → sitelink
   "AAgencies"). The span carries aria-hidden for the same reason. */
.nav-products .np-mark {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--accent); opacity: .7; letter-spacing: .04em;
}
.nav-products .np-mark::before { content: attr(data-mark); }
.nav-products > a.is-active .np-mark,
.nav-products .np-item.is-active .np-mark { opacity: 1; }
.nav-products .np-caret { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .15s var(--ease); }

/* the SOAR dropdown item.
   Stability rules (the hover-gap fix): the trigger sits flush against the menu
   (no visual gap), and an invisible bridge spans the small offset between them
   so the pointer never crosses dead space on its way down. JS adds `.is-open`
   for hover-intent + delayed close + click-to-toggle + Esc/outside-click; pure
   CSS :hover / :focus-within remain as a no-JS fallback. */
.np-item { position: relative; }
.np-menu {
  position: absolute; top: 100%; left: 0; z-index: 99;
  /* small visual offset done with margin so the element box still touches the
     trigger — the pointer stays inside the item the whole way down */
  margin-top: 8px;
  min-width: 232px; padding: 8px; border-radius: var(--r-lg);
  background: var(--bg-surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-overlay);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
/* transparent hover-bridge: fills the 8px gap (plus a little slack) so a quick
   diagonal mouse travel from trigger to menu never lands on dead background. */
.np-menu::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 14px;
}
/* JS-driven open is the primary path; the CSS pseudo-classes are the fallback. */
.np-item.is-open > .np-menu,
.np-item:hover .np-menu,
.np-item:focus-within .np-menu { opacity: 1; visibility: visible; transform: none; }
.np-item.is-open > .np-trigger .np-caret,
.np-item:hover .np-caret,
.np-item:focus-within .np-caret { transform: rotate(180deg); }
.np-menu a {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: var(--r-md); color: var(--fg); font-size: 14px; font-weight: 500;
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.np-menu a:hover { background: var(--accent-tint); color: var(--accent); text-decoration: none; }
.np-menu a.is-active { background: var(--accent-tint-2); color: var(--accent); }
.np-menu a .verb {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px;
  background: var(--accent-tint-2); color: var(--accent);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
/* verb letter via CSS content, not DOM text — else the S/O/A/R badge folds into
   the link text ("AAnalyze", "SStore") in Google sitelinks. Scoped to the menu so
   body .verb chips (which are not links) keep their text child. */
.np-menu a .verb::before { content: attr(data-ico); }
.np-menu .np-menu-sub { font-size: 11.5px; color: var(--fg-faint); font-weight: 400; margin-left: auto; }
.np-menu .np-sep { height: 1px; margin: 6px 4px; background: var(--line); }

/* mobile drawer product groups (drawer already styled; add the group label) */
.nav-drawer .drawer-group {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint);
  padding: 22px 8px 8px; margin: 0;
}
.nav-drawer .drawer-group:first-child { padding-top: 6px; }

/* Desktop visibility MUST be declared AFTER the base `.nav-products{display:none}`
   above (equal specificity → source order decides); the earlier @media flex rule
   in the nav block loses to that base rule, so the desktop nav vanishes without this. */
@media (min-width: 940px) { .nav-products { display: flex; } }

/* ── HOME: the two-product split (one engine, two products) ─────────────── */
/* a balanced 2-up of product intro cards used in the home hero region */
.prod-split { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
@media (min-width: 860px) { .prod-split { grid-template-columns: 1fr 1fr; } }
.prod-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 3vw, 34px); border-radius: var(--r-xl);
  background: var(--bg-surface); border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.prod-card:hover { transform: translateY(-2px); }
/* the calmer Serverless variant: inset well, hairline border, no lift shadow */
.prod-card.is-serverless {
  background: var(--bg-inset); box-shadow: none;
  border: 1px solid var(--line);
}
html[data-theme="dark"] .prod-card.is-serverless { background: var(--bg-raised); }
.prod-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.prod-card.is-serverless .prod-tag { color: var(--fg-muted); }
.prod-tag .prod-rail { display: inline-flex; gap: 2px; }
.prod-tag .prod-rail b {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 5px; background: var(--accent-tint-2); color: var(--accent);
  font-size: 10px; font-weight: 700;
}
.prod-card h3 { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem); margin: 0; letter-spacing: -.02em; }
.prod-card > p { font-size: 15px; color: var(--fg-muted); margin: 0; line-height: 1.55; }
.prod-card .prod-meta {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-faint);
  letter-spacing: .04em; display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: center;
}
.prod-card .prod-meta .sep { color: var(--accent); opacity: .5; }
.prod-card .prod-foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }

/* ── HOME: a full-width product band (SOAR block / Serverless block) ─────── */
/* a quiet eyebrow tag that names the product above each home block */
.prod-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.prod-eyebrow .prod-rail { display: inline-flex; gap: 2px; }
.prod-eyebrow .prod-rail b {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 5px; background: var(--accent-tint-2); color: var(--accent);
  font-size: 10px; font-weight: 700;
}
.prod-eyebrow.calm { color: var(--fg-muted); }
.prod-eyebrow.calm::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--fg-faint); flex: none; }
.section-ink .prod-eyebrow { color: var(--accent-on-ink); }

/* the four-verb chips (compact SOAR ladder for the home SOAR block) */
.verb-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 26px; }
@media (min-width: 560px) { .verb-row { grid-template-columns: repeat(4, 1fr); } }
.verb-chip {
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
  border-radius: var(--r-md); background: var(--bg-surface);
  border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
  color: var(--fg); transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.verb-chip:hover { background: var(--accent-tint); transform: translateY(-2px); text-decoration: none; }
html[data-theme="dark"] .verb-chip:hover { background: var(--bg-raised); }
.verb-chip .vc-letter {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--accent-tint-2); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
/* letter via CSS content, not DOM text — keeps the chip link's text just the verb */
.verb-chip .vc-letter::before { content: attr(data-ico); }
.verb-chip .vc-verb { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg); }
.verb-chip .vc-sub { font-size: 12.5px; color: var(--fg-muted); line-height: 1.4; }

/* ── SERVERLESS: a calm code/terminal panel (pure-DB proof, in tokens) ──── */
/* deliberately NOT the green serverless palette from v36 — we keep indigo,
   but render the connect/sleep story in a quiet mono terminal card. */
.term-card {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-ink); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-frame);
}
.term-card .term-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: rgba(255,255,255,.04); border-bottom: 1px solid var(--fg-on-ink-faint);
}
.term-card .term-head .term-dots { display: flex; gap: 6px; flex: none; }
.term-card .term-head .term-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--fg-on-ink-faint); display: block; }
.term-card .term-head .term-name {
  flex: 1; min-width: 0; text-align: center; font-family: var(--font-mono);
  font-size: 11.5px; color: var(--fg-on-ink-faint); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.term-card .term-body {
  padding: 18px 20px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85;
  color: var(--fg-on-ink-muted); overflow-x: auto;
}
.term-card .term-body .t  { color: var(--fg-on-ink-faint); }
.term-card .term-body .ok { color: var(--accent-on-ink); }
.term-card .term-body .zzz { color: var(--fg-on-ink-faint); font-style: italic; }
.term-card .term-body .go { color: var(--accent-on-ink); }
.term-card .term-body .kw { color: var(--accent-on-ink); }
.term-card .term-body .cm { color: var(--fg-on-ink-faint); }

/* the "four doors" connect rack — SQL · REST · MCP · SDK */
.door-rack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .door-rack { grid-template-columns: repeat(4, 1fr); } }
.door {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  border-radius: var(--r-md); background: var(--bg-inset); border: 1px solid var(--line);
}
.door .door-name { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.door .door-sub { font-size: 12.5px; color: var(--fg-muted); line-height: 1.4; }

/* a quiet endpoint line (mono, copy-ready look) */
.endpoint-line {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-radius: var(--r-md); background: var(--bg-inset); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); overflow-x: auto; white-space: nowrap;
}
.endpoint-line .ep-method {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-tint-2); padding: 2px 8px; border-radius: var(--r-sm);
}

/* the MCP "bring your own AI" callout — indigo-tinted inset, not a new color */
.mcp-note {
  border-left: 2px solid var(--accent-line); background: var(--accent-tint);
  border-radius: var(--r-sm); padding: 16px 20px; font-size: 14.5px; color: var(--fg-muted); line-height: 1.6;
}
.mcp-note strong { color: var(--fg); }
.section-ink .mcp-note { background: rgba(255,255,255,.05); border-left-color: var(--accent-on-ink); color: var(--fg-on-ink-muted); }
.section-ink .mcp-note strong { color: var(--fg-on-ink); }

/* the MCP tool-category chips (51 tools / 8 categories) */
.tool-cats { display: flex; flex-wrap: wrap; gap: 9px; }
.tool-cats .tc {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--r-pill); background: var(--bg-surface); border: 1px solid var(--line);
  font-size: 13px; color: var(--fg-muted);
}
.tool-cats .tc b { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.section-ink .tool-cats .tc { background: rgba(255,255,255,.05); border-color: var(--fg-on-ink-faint); color: var(--fg-on-ink-muted); }
.section-ink .tool-cats .tc b { color: var(--accent-on-ink); }

/* ── PRICING: two-product switcher (CSS-only jump-pills, both sections live) ─ */
/* Both product sections render on the page; the switcher is a pair of jump
   pills that scroll to each. No JS, no panel-hiding to break print/SEO.
   :target only adds a soft highlight ring to the section you jumped to. */
.price-switch {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 auto clamp(20px, 3vw, 32px);
  border-radius: var(--r-pill); background: var(--bg-inset); border: 1px solid var(--line);
}
.price-switch a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px;
  border-radius: var(--r-pill); color: var(--fg-muted);
  font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.price-switch a:hover { color: var(--fg); text-decoration: none; }
.price-switch a.is-active { background: var(--accent-solid); color: var(--on-accent); }
.price-switch a.is-active:hover { color: var(--on-accent); }
.price-switch a.calm.is-active { background: var(--accent-soft); color: var(--bg-ink); }
html[data-theme="dark"] .price-switch a.calm.is-active { background: var(--accent-soft); color: var(--fg); }
.price-switch a .ps-mark { font-family: var(--font-mono); font-size: 11px; opacity: .8; }
/* Small screens: stack the two product tabs as full-width rows in a rounded
   card (a single-row pill can't hold the full product names without clipping). */
@media (max-width: 560px) {
  .price-switch { flex-direction: column; width: min(320px, 100%); gap: 4px; border-radius: var(--r-lg); }
  .price-switch a { width: 100%; justify-content: center; padding: 11px 16px; font-size: 13.5px; }
}

/* a calmer 7-tier grid for Serverless (auto-fit, no AI column) */
.price-grid.cols-auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (min-width: 920px) { .price-grid.cols-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* per-product accent on a tier card — Serverless tiers read calmer */
.tier.is-calm { background: var(--bg-inset); box-shadow: none; border: 1px solid var(--line); }
html[data-theme="dark"] .tier.is-calm { background: var(--bg-raised); }
.tier .tier-kind {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint);
}

/* ════════════════════════════════════════════════════════════════════════
   LEGAL / ARTICLE LAYOUT — a clean, readable document surface for the
   Privacy Policy + Terms of Service. Narrow measure (~720px), comfortable
   line-height, a clear h2/h3 scale, a subtle in-page TOC, and a last-updated
   chip. Tokens only, both themes, mobile-first. Lives inside the shared
   chrome (.nav + .site-foot) — this is just the article body.
   ════════════════════════════════════════════════════════════════════════ */
.legal { padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 96px); }

/* the narrow reading column — caps the measure for comfortable line length */
.legal-doc { max-width: 720px; margin: 0 auto; }

/* document masthead */
.legal-head { margin-bottom: clamp(28px, 4vw, 44px); }
.legal-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.legal-kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); flex: none;
}
.legal-head h1 { font-size: var(--fs-h2); margin-bottom: .35em; }
.legal-head .legal-lede {
  font-size: var(--fs-lead); color: var(--fg-muted); line-height: 1.55; margin: 0;
}

/* last-updated chip (mono, quiet) — sits under the lede */
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.legal-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  border-radius: var(--r-pill); background: var(--bg-inset); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--fg-muted);
}
.legal-chip b { color: var(--fg); font-weight: 600; }
.legal-chip .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* short "the short version" callout — indigo-tinted inset, not a new color */
.legal-callout {
  border-left: 2px solid var(--accent-line); background: var(--accent-tint);
  border-radius: var(--r-sm); padding: 16px 20px; margin: 0 0 clamp(24px, 4vw, 40px);
  font-size: 14.5px; color: var(--fg-muted); line-height: 1.6;
}
.legal-callout strong { color: var(--fg); }

/* subtle in-page table of contents */
.legal-toc {
  margin: 0 0 clamp(28px, 4vw, 44px); padding: 18px 20px;
  border-radius: var(--r-lg); background: var(--bg-inset); border: 1px solid var(--line);
}
.legal-toc .toc-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 12px;
}
.legal-toc ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px 18px; grid-template-columns: 1fr;
  counter-reset: toc;
}
@media (min-width: 600px) { .legal-toc ol { grid-template-columns: 1fr 1fr; } }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 4px;
  border-radius: var(--r-sm); color: var(--fg-muted); font-size: 14px; line-height: 1.4;
  transition: color .14s var(--ease), background-color .14s var(--ease);
}
.legal-toc a::before {
  content: counter(toc); flex: none; min-width: 1.4em;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--accent);
}
.legal-toc a:hover { color: var(--accent); background: var(--accent-tint); text-decoration: none; }

/* the article body — comfortable measure, clear heading scale */
.legal-body { color: var(--fg-muted); }
.legal-body > section { padding-top: 6px; }
/* anchor offset so the sticky nav never clips a section heading on jump */
.legal-body > section[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }
.legal-body h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem);
  margin: clamp(34px, 4vw, 52px) 0 .55em; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong); line-height: 1.2;
  display: flex; align-items: baseline; gap: 12px;
}
.legal-body > section:first-child h2 { margin-top: 0; }
/* the auto-numbered section index before each h2 */
.legal-body { counter-reset: legal-sec; }
.legal-body h2::before {
  counter-increment: legal-sec; content: counter(legal-sec);
  flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--accent); opacity: .8;
}
.legal-body h3 {
  font-size: clamp(1rem, .96rem + .35vw, 1.12rem);
  margin: 26px 0 .5em; color: var(--fg); line-height: 1.3;
}
.legal-body p { font-size: 15.5px; line-height: 1.72; margin: 0 0 1em; }
.legal-body strong { color: var(--fg); font-weight: 600; }
.legal-body a { color: var(--accent); font-weight: 500; }
.legal-body code {
  font-family: var(--font-mono); font-size: .9em; color: var(--accent);
  background: var(--accent-tint); padding: 2px 6px; border-radius: var(--r-sm);
}
.legal-body ul, .legal-body ol { margin: 0 0 1.1em; padding-left: 4px; }
.legal-body ul li, .legal-body ol li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: 15.5px; line-height: 1.65; color: var(--fg-muted);
}
.legal-body ul li::before {
  content: ''; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent-line);
}
.legal-body ol { counter-reset: legal-li; }
.legal-body ol li { counter-increment: legal-li; }
.legal-body ol li::before {
  content: counter(legal-li); position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent);
}
.legal-body li strong { color: var(--fg); }

/* a small "back to top" / cross-link row that can close the document */
.legal-foot-note {
  margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--fg-faint);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}
.legal-foot-note a { color: var(--accent); font-weight: 500; }

/* ── footer legal/company sub-links (Privacy · Terms inside the Company col) ── */
.foot-col .foot-legal {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fg-on-ink-faint);
}

/* footer with the extra "Use cases" column — 5 link groups + brand. On
   mid screens the brand sits full-width over a 2-col link area; the 5-up
   row only kicks in on wide screens so columns never get cramped. */
@media (min-width: 680px) {
  .foot-grid.has-usecases { grid-template-columns: 1fr 1fr; }
  .foot-grid.has-usecases .foot-brand { grid-column: 1 / -1; }
}
@media (min-width: 860px) {
  .foot-grid.has-usecases { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .foot-grid.has-usecases .foot-brand { grid-column: auto; grid-row: span 2; }
}
@media (min-width: 1080px) {
  .foot-grid.has-usecases { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; }
  .foot-grid.has-usecases .foot-brand { grid-column: auto; grid-row: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   USE-CASES (VERTICALS) LAYER — the "Use cases" menu + the per-industry SOAR
   pages + the use-cases.html index. Maps each vertical's real business onto
   the four SOAR features (Store · Operate · Analyze · Report). Tokens only,
   both themes, mobile-first. Reuses the existing .np-* dropdown machinery for
   the new "Use cases" header dropdown (a SECOND .np-item) — only the wider
   two-column menu variant (.np-menu-wide) and a few page components are new.
   ════════════════════════════════════════════════════════════════════════ */

/* ── "Use cases" header dropdown — reuse .np-item/.np-trigger/.np-menu, just
      a wider, two-column menu so the 8 industries + "All use cases" fit. The
      JS controller (site.js) now iterates ALL .np-item nodes, so hover-intent,
      click/tap toggle, Esc + outside-click work for this dropdown too; the
      CSS :hover/:focus-within fallback already applies (those rules target
      .np-item generically, not the first one). The menu opens right-aligned
      on the wider trigger so it never spills past the viewport edge. */
.np-menu-wide {
  min-width: min(440px, calc(100vw - 32px));
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px;
}
.np-menu-wide .np-all {
  grid-column: 1 / -1; margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.np-menu-wide .np-all a { color: var(--accent); font-weight: 600; }
/* the little square letter tile that stands in for each industry's icon */
.np-menu a .uc-ico {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px;
  background: var(--accent-tint-2); color: var(--accent);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
}
/* icon letter via CSS content (data-ico), not DOM text — keeps the link's indexed
   text just the industry name (fixes the "AAgencies" Google sitelink) */
.np-menu a .uc-ico::before { content: attr(data-ico); }
/* keep the wide menu from going off-screen on mid-width viewports: anchor its
   right edge to the trigger so it expands leftward */
.np-item.uc-item .np-menu-wide { left: auto; right: 0; }
@media (max-width: 560px) {
  /* the dropdown only shows ≥940px (desktop) anyway — but guard the grid */
  .np-menu-wide { grid-template-columns: 1fr; }
}

/* ── VERTICAL PAGE HERO — a calmer hero variant for the use-case pages.
      Reuses .hero/.hero-eyebrow/.hero-sub; this just adds the audience eyebrow
      pill styling parity and a tighter measure for the longer entity H1s. */
.hero.hero-vertical h1 { max-width: 18ch; }
.hero.hero-vertical .hero-sub { max-width: 56ch; }
/* the small "industry nouns" rail under the hero sub (tenants · leases · rent…) */
.entity-rail {
  display: flex; flex-wrap: wrap; gap: 7px 8px; margin: 0 0 28px;
}
.entity-rail .ent {
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: var(--r-pill); background: var(--bg-inset); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--fg-muted);
}

/* ── PAIN → SOAR compact two-card (optional "what's painful → what SOAR does") */
.pain-pair { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .pain-pair { grid-template-columns: 1fr 1fr; } }
.pain-card {
  padding: clamp(20px, 3vw, 28px); border-radius: var(--r-lg);
  background: var(--bg-inset); border: 1px solid var(--line);
}
.pain-card.is-soar { background: var(--accent-tint); border-color: var(--accent-line); }
.pain-card .pain-lbl {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint);
  margin-bottom: 10px; display: block;
}
.pain-card.is-soar .pain-lbl { color: var(--accent); }
.pain-card p { font-size: 14.5px; color: var(--fg-muted); margin: 0; line-height: 1.55; }
.pain-card p strong { color: var(--fg); }

/* ══ THE SOAR FEATURE QUAD — the CORE of every vertical page ═══════════════
   Four soft cards (Store · Operate · Analyze · Report), each a verb-tile +
   heading + a bullet list of the real types/workflows/questions/reports for
   that industry. 1-col on mobile → 2×2 grid ≥760px. This is "how SOAR runs
   your business", instantly visible. */
.soar-quad { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .soar-quad { grid-template-columns: repeat(2, 1fr); } }
.quad-block {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 3vw, 30px); border-radius: var(--r-lg);
  background: var(--bg-surface); border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  transition: border-color .18s var(--ease);
}
html[data-theme="dark"] .quad-block { border-color: var(--card-border); }
.quad-block .quad-head { display: flex; align-items: center; gap: 12px; }
.quad-block .quad-letter {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--accent-tint-2); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em;
}
.quad-block .quad-verb {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 2px;
}
.quad-block h3 { margin: 0; font-size: var(--fs-h3); }
/* the per-block bullet list — checkmark glyph, reuses the .split-list mark idea */
.quad-list { display: grid; gap: 10px; margin: 0; }
.quad-list li {
  position: relative; padding-left: 28px;
  font-size: 14.5px; color: var(--fg-muted); line-height: 1.5;
}
.quad-list li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--accent-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348176a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
html[data-theme="dark"] .quad-list li::before {
  background: var(--accent-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b793e6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.quad-list li strong { color: var(--fg); }

/* ══ MINI BRIEF — a compact "morning brief" sample card (real numbers) ═════
   A small product-flavored card: a header line (title + a "live" dot) and a
   2-col KPI grid of the vertical's sample figures. Keeps the page tangible
   without a domain-mismatched screenshot. */
.mini-brief {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-frame); max-width: 560px;
}
.mini-brief .mb-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  background: var(--bg-inset); border-bottom: 1px solid var(--line);
}
.mini-brief .mb-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg);
  margin: 0; flex: 1; min-width: 0;
}
.mini-brief .mb-live {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.mini-brief .mb-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.mini-brief .mb-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
}
@media (min-width: 520px) { .mini-brief .mb-grid { grid-template-columns: repeat(3, 1fr); } }
.mini-brief .mb-cell { background: var(--bg-surface); padding: 16px 18px; }
.mini-brief .mb-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.02em; color: var(--fg); line-height: 1; margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.mini-brief .mb-num .accent { color: var(--accent); }
.mini-brief .mb-lbl { font-size: 12px; color: var(--fg-muted); line-height: 1.4; }
.mini-brief .mb-foot {
  padding: 11px 18px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); letter-spacing: .03em;
}

/* ── honest disclaimer line (HIPAA / trust-fund / GRC candor) ─────────────── */
.disclaimer-note {
  display: flex; gap: 12px; align-items: flex-start;
  border-left: 2px solid var(--amber-line); background: var(--amber-bg);
  border-radius: var(--r-sm); padding: 14px 18px;
  font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; max-width: 70ch;
}
.disclaimer-note strong { color: var(--fg); }
.disclaimer-note .dn-mark {
  flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--amber);
  margin-top: 1px;
}

/* ══ USE-CASES INDEX — the industry-card grid ══════════════════════════════
   Responsive cards: a letter/icon tile, the industry name, a one-line entity
   summary, and a "See how →" link. 1-col → 2-col ≥560 → 3-col ≥920. */
.industry-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
.industry-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 3vw, 28px); border-radius: var(--r-lg);
  background: var(--bg-surface); border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card); color: var(--fg);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.industry-card:hover { transform: translateY(-2px); border-color: var(--accent-line); text-decoration: none; }
.industry-card .ic-icon {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--accent-tint-2); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em;
}
/* card icon letter via CSS content (data-ico), not DOM text — same sitelink fix */
.industry-card .ic-icon::before { content: attr(data-ico); }
.industry-card .ic-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem;
  color: var(--fg); letter-spacing: -.01em; line-height: 1.2;
}
.industry-card .ic-line { font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; margin: 0; flex: 1; }
.industry-card .ic-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
  color: var(--accent); font-weight: 600; font-size: 14px;
}
.industry-card .ic-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s var(--ease); }
.industry-card:hover .ic-go svg { transform: translateX(3px); }

/* ============================================================
   Early-Access waiting list — modal (paired with waitlist.js)
   ============================================================ */
.wl-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(24, 21, 32, .52);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .18s var(--ease);
  overflow-y: auto;
}
.wl-overlay[hidden] { display: none; }
.wl-overlay.wl-open { opacity: 1; }
.wl-modal {
  position: relative; width: 100%; max-width: 460px; margin: auto;
  background: var(--bg-surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-overlay);
  padding: 34px 34px 30px;
  transform: translateY(8px) scale(.985); transition: transform .18s var(--ease);
}
.wl-open .wl-modal { transform: none; }
.wl-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--fg-faint);
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.wl-close:hover { background: var(--bg-inset); color: var(--fg); }
.wl-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.wl-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.wl-title { font-family: var(--font-display); font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 10px 0 8px; }
.wl-sub { font-size: 14.5px; color: var(--fg-muted); line-height: 1.55; margin: 0 0 20px; }
.wl-sub strong { color: var(--fg); font-weight: 600; }
.wl-plan {
  display: inline-block; margin: 0 0 18px; padding: 5px 12px;
  font-size: 12.5px; color: var(--accent); background: var(--accent-tint);
  border: 1px solid var(--accent-line); border-radius: var(--r-pill);
}
.wl-plan strong { font-weight: 600; }

#wl-form { display: block; }
.wl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wl-field { margin-bottom: 13px; text-align: left; }
.wl-field label { display: block; font-size: 12.5px; font-weight: 500; color: var(--fg-muted); margin-bottom: 6px; }
.wl-field input, .wl-field select {
  width: 100%; height: 46px; padding: 0 13px;
  font-family: var(--font-ui); font-size: 14.5px; color: var(--fg);
  background: var(--bg-canvas); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); appearance: none;
}
.wl-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23908a9b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.wl-field input:focus, .wl-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2); }
.wl-field input::placeholder { color: var(--fg-faint); }

.wl-submit { width: 100%; justify-content: center; margin-top: 8px; }
.wl-terms { font-size: 11.5px; color: var(--fg-faint); text-align: center; margin: 14px 0 0; line-height: 1.5; }
.wl-terms a { color: var(--fg-muted); text-decoration: underline; }
.wl-msg { font-size: 13px; text-align: center; margin-top: 12px; min-height: 0; }
.wl-msg.error { color: #b42318; }
.wl-msg.success { color: var(--green); }

.wl-digits { display: flex; gap: 9px; justify-content: center; margin: 8px 0 20px; }
.wl-digit {
  width: 46px; height: 56px; text-align: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--fg);
  background: var(--bg-canvas); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.wl-digit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2); }
.wl-resend { display: block; margin: 14px auto 0; background: none; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: 13px; color: var(--accent); }
.wl-resend:disabled { color: var(--fg-faint); cursor: default; }
.wl-resend:not(:disabled):hover { text-decoration: underline; }

.wl-check {
  width: 56px; height: 56px; margin: 4px auto 18px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--green-bg); color: var(--green);
}
.wl-check svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[data-step="verify"], [data-step="success"] { text-align: center; }

/* dark theme — modal sits on raised ink; inputs use the inset well */
html[data-theme="dark"] .wl-modal { background: var(--bg-raised); border-color: var(--line-strong); }
html[data-theme="dark"] .wl-field input, html[data-theme="dark"] .wl-field select, html[data-theme="dark"] .wl-digit { background: var(--bg-inset); }
html[data-theme="dark"] .wl-msg.error { color: #ff9b8f; }

@media (max-width: 520px) {
  .wl-modal { padding: 30px 20px 24px; border-radius: var(--r-lg); }
  .wl-row { grid-template-columns: 1fr; gap: 0; }
  .wl-title { font-size: 24px; }
  .wl-digit { width: 42px; height: 52px; font-size: 20px; }
}