*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --white:      #ffffff;
  --bg:         #F8F8FC;
  --text:       #0E0E1A;
  --muted:      #6B6B7D;
  --border:     #E8E8EE;
  --primary:    #0E0E1A;
  --accent:     #4338CA;
  --accent-dark:#3730A3;
  --accent-bg:  #EEF2FF;
  --accent-soft:#E0E7FF;
  --teal:       #2AC8C8;
  --teal-soft:  #D6F4F4;
  --violet:     #7C6AE8;
  --canvas:     #F8F8FC;
  --hairline:   #E8E8EE;
  --ink2:       #1E1E2E;
  --red:        #F43F5E;
  --sans:       'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius:     14px;
  --radius-lg:  20px;
  /* Single source of truth for the sticky nav height. Used both by the
     nav itself and by `scroll-margin-top` on anchor targets so an
     in-page jump (e.g. clicking "Product" → #how-it-works) lands with
     the section heading fully visible *below* the nav, instead of
     getting clipped by the 68px sticky bar that overlays the top of
     the viewport. Bump this and the offset updates everywhere. */
  --nav-h:      68px;
}
html, body { background: var(--white); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
/* Mobile scroll “jitter” fix.
   100vh is unstable on iOS/Chrome mobile because the browser UI (address bar)
   changes the visual viewport height while scrolling, which makes layouts that
   depend on vh reflow and appear to “move”.
   Use dynamic viewport units when available, with safe fallbacks. */
body { min-height: 100vh; }
@supports (height: 100dvh) { body { min-height: 100dvh; } }
@supports (-webkit-touch-callout: none) { body { min-height: -webkit-fill-available; } }

/* ── NAV ── */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: var(--nav-h); background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 100;
}

/* Anchor-scroll offset for the nav links (Demo, Product, Use cases, FAQ).
   Without this, a click on "Product" lands at the literal top of
   #how-it-works, but the 68px sticky nav overlays that top and chops
   the section heading in half (QA caught this in the new h2/h3 layout).
   `scroll-margin-top` is the modern, JS-free way to tell the browser
   "stop the anchor jump this far below the viewport top" — works with
   native fragment links and `scrollIntoView` alike.

   Offset == --nav-h exactly (no extra). An earlier version added +16px
   "breathing room", but every target section already has its own
   padding-top (40–80px) before its heading, so the +16 was redundant
   AND harmful: the gap between the nav bottom and the section top
   exposed 16px of whatever section sat above in the DOM, and for #faq
   that's `.section-stats` (dark indigo background) — which read as a
   black bar bleeding into FAQ on anchor jumps. Flush-to-nav lets the
   target section's own top padding provide the breathing room. */
#demo, #how-it-works, #use-cases, #faq, #cta {
  scroll-margin-top: var(--nav-h);
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-text { font-family: var(--sans); font-size: 1.2rem; font-weight: 700; color: var(--text); letter-spacing: -0.03em; }
.nav-logo-text .dot { color: var(--teal); }
.nav-logo-text .io { color: var(--text); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link { font-size: .875rem; font-weight: 500; color: var(--text); text-decoration: none; transition: color .15s; }
.nav-link:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn-signin { background: none; border: none; font-family: var(--sans); font-size: .875rem; font-weight: 600; color: var(--text); cursor: pointer; padding: 8px 14px; border-radius: 999px; transition: background .15s; }
.btn-signin:hover { background: var(--bg); }
.btn-demo {
  background: var(--primary); color: #fff; border: none; border-radius: 999px;
  font-family: var(--sans); font-size: .875rem; font-weight: 600; cursor: pointer;
  padding: 10px 20px; transition: background .15s;
}
.btn-demo:hover { background: var(--ink2); }

@media (max-width: 900px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
}

/* ── HERO ── */
.hero {
  display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start;
  max-width: 1200px; margin: 0 auto; padding: 80px 48px 64px;
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 20px; }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: var(--accent-bg); border-radius: 999px;
  font-size: .75rem; font-weight: 600; color: var(--accent);
  margin-bottom: 28px; letter-spacing: .02em;
}
.hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.hero-title {
  font-family: var(--sans); font-size: 3.5rem; font-weight: 700; line-height: 1.05;
  color: var(--text); margin-bottom: 24px; letter-spacing: -.04em;
}
.hero-title .dim { color: var(--muted); }
.hero-title .accent { color: var(--accent); }
.hero-sub { font-size: 1.1rem; color: var(--muted); line-height: 1.6; margin-bottom: 36px; max-width: 580px; }
.hero-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn-primary {
  display: inline-block; font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  padding: 14px 28px; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff; border: none;
  box-shadow: 0 8px 24px rgba(67,56,202,0.28); transition: background .15s, box-shadow .15s; text-decoration: none;
}
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 8px 32px rgba(67,56,202,0.38); }
.btn-outline {
  display: inline-block; font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  padding: 13px 24px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text); border: 1.5px solid var(--hairline);
  transition: border-color .15s; text-decoration: none;
}
.btn-outline:hover { border-color: #bbb; }
.hero-note { font-size: .8rem; color: var(--muted); margin-left: 4px; }
.hero-note strong { color: var(--text); }

/* FORM CARD */
.form-card {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 36px 32px;
  box-shadow: 0 12px 32px rgba(14,14,26,0.08), 0 4px 8px rgba(14,14,26,0.04);
}
.form-tabs { display: flex; gap: 4px; margin-bottom: 28px; background: var(--bg); border-radius: var(--radius); padding: 4px; }
.form-tab {
  flex: 1; font-family: var(--sans); font-size: .82rem; font-weight: 600;
  padding: 8px 16px; cursor: pointer; border: none; background: transparent;
  color: var(--muted); border-radius: 10px; transition: background .15s, color .15s;
}
.form-tab.active { background: var(--white); color: var(--text); box-shadow: 0 1px 4px rgba(14,14,26,0.1); }
.form-section { display: none; }
.form-section.active { display: block; }
.form-title { font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.form-subtitle { font-size: .8rem; color: var(--muted); margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: .75rem; font-weight: 600; color: var(--text); letter-spacing: .01em; }
.field input {
  font-family: var(--sans); font-size: .9rem; border: 1px solid var(--border);
  background: var(--white); padding: 10px 12px; color: var(--text);
  border-radius: var(--radius); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,56,202,.12); }
.field input.has-error { border-color: var(--red); background: #FFF5F6; }
.field input.has-error:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(244,63,94,.15); }
.field-error {
  font-size: .72rem;
  color: var(--red);
  margin-top: 4px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.field-error::before { content: '!'; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; font-size: .65rem; line-height: 1; margin-top: 1px; }
/* Safari-only nudge under the Turnstile widget. ITP makes Cloudflare's
   widget either render a beat slower or escalate to an interactive
   checkbox more often than on Chrome/Firefox; this short note tells the
   user that the delay / extra click is expected so they don't think the
   form is broken and refresh mid-challenge. Toggled via JS — see
   _showSafariTsHint() in public/js/team.js. */
.ts-safari-hint { font-size: .72rem; color: var(--muted); margin: 8px 2px 0; line-height: 1.45; }
.btn {
  display: inline-block; font-family: var(--sans); font-size: .875rem; font-weight: 600;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s; text-decoration: none;
  border: 1.5px solid transparent;
}
.btn-solid { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 4px 12px rgba(67,56,202,.25); }
.btn-solid:disabled { opacity: .65; cursor: not-allowed; }
.btn-ghost { background: transparent; color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.3); font-size: .8rem; padding: 7px 14px; border-radius: 999px; }
.btn-ghost:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.form-msg { font-size: .8rem; margin-top: 10px; min-height: 18px; }
.form-msg.error { color: var(--red); }
.form-msg.success { color: #059669; }

/* "Check your email" panel — replaces the form after a successful register
   so the confirmation can't be missed (visually distinct from the green
   password-rule checkmarks above the submit button). Indigo card styling
   echoes the brand accent rather than reusing the muted .form-msg.success
   green that QA flagged as too easy to overlook. */
.form-section.verify-pending {
  text-align: center;
  padding: 8px 4px 0;
}
.verify-pending .verify-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(67,56,202,.08);
  color: var(--accent);
  margin-bottom: 18px;
}
.verify-pending .verify-title {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.verify-pending .verify-sub {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.verify-pending .verify-email {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(67,56,202,.06);
  border: 1px solid rgba(67,56,202,.18);
  border-radius: 10px;
  padding: 8px 14px;
  margin: 0 auto 18px;
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
}
.verify-pending .verify-actions {
  font-size: .82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.verify-pending .btn-link-resend {
  font: inherit;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.verify-pending .btn-link-resend:hover { text-decoration: underline; }
.verify-pending .btn-link-resend:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }
.verify-pending .verify-existing {
  text-align: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
}
.form-note { font-size: .75rem; color: var(--muted); margin-top: 14px; line-height: 1.6; }
.form-note a { color: var(--accent); text-decoration: none; }
.form-note a:hover { text-decoration: underline; }

/* Forgot-password actions stack vertically with breathing room so the
   "Resend email" and "Back to sign in" links can't be mis-clicked
   (QA flagged them as too close on a single line). */
.forgot-actions { display: flex; flex-direction: column; gap: 10px; }
.forgot-resend-row { padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }

/* "Remember me" checkbox row sits between password field and Sign in button. */
.remember-row { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 10px; cursor: pointer; user-select: none; width: fit-content; max-width: 100%; }
.remember-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.remember-row span { font-size: .8rem; color: var(--muted); }
.remember-row:hover span { color: var(--text); }

/* Two-column row used for first / last name. Stacks on narrow viewports. */
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1 1 0; min-width: 0; }
@media (max-width: 420px) { .field-row { flex-direction: column; gap: 0; } }

/* Live password-policy indicators below the password input on signup.
   Each <li> is grey by default and turns green when the rule is satisfied
   (toggled by JS via the .ok class). Compact so the form doesn't grow. */
.pw-hints { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.pw-hints li { font-size: .72rem; color: var(--muted); position: relative; padding-left: 14px; line-height: 1.5; }
.pw-hints li::before { content: '○'; position: absolute; left: 0; top: 0; font-size: .7rem; color: #cbd5e1; }
.pw-hints li.ok { color: #047857; }
.pw-hints li.ok::before { content: '✓'; color: #10b981; font-weight: 700; }

/* Password toggle */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { flex: 1; padding-right: 36px !important; }
.pw-toggle { position: absolute; right: 8px; background: none; border: none; cursor: pointer; padding: 4px; color: var(--muted); display: flex; align-items: center; }
.pw-toggle:hover { color: var(--text); }
.pw-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; }

/* ── PROBLEM SECTION ── */
.section-problem { padding: 100px 48px; max-width: 1200px; margin: 0 auto; }
.section-eyebrow { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
/* `.section-headline` ships as both <div> (legacy) and <h2> (new) — the
   latter brings a UA-default `margin-top: ~0.83em` that visually pushes
   each section header down by ~40px on desktop. We pin `margin-top: 0`
   so the migration to <h2> is a pure semantic upgrade and the design
   stays byte-identical. Same rationale applies to `.hiw-title` /
   `.usecase-title` / `.cta-title` further below. */
.section-headline {
  font-family: var(--sans); font-weight: 700; font-size: 3.25rem;
  color: var(--text); letter-spacing: -.05em; line-height: 1.05;
  margin: 0 0 20px;
}
.section-headline .dim { color: var(--muted); }
.section-body { font-size: 1.1rem; color: var(--muted); line-height: 1.65; max-width: 680px; }
@media (max-width: 640px) { .section-problem { padding: 60px 20px; } .section-headline { font-size: 2.2rem; } }

/* ── HOW IT WORKS ── */
.section-hiw { padding: 20px 48px 100px; max-width: 1200px; margin: 0 auto; }
.section-hiw-head { margin-bottom: 48px; }
.hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hiw-card {
  padding: 28px; background: var(--white); border-radius: 24px;
  border: 1px solid var(--hairline);
}
/* Step number chip ("01", "02", "03"). Earlier rendered at .75rem in
   Outfit, where macOS sub-pixel smoothing made the digits read as if
   they had serif terminals — particularly the "0" picked up faint
   curls top/bottom and looked typographically older than the rest of
   the page. Bumping the size, switching to tabular figures so the two
   digits stay aligned across cards, and adding a hint of tracking gives
   the numbers a clean spec-sheet feel that reads as a deliberate label
   rather than an artifact. */
.hiw-num {
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  margin-bottom: 18px;
}
.hiw-title { font-family: var(--sans); font-weight: 700; font-size: 1.25rem; color: var(--text); letter-spacing: -.03em; margin: 0 0 10px; }
.hiw-body { font-size: .875rem; color: var(--muted); line-height: 1.65; }
@media (max-width: 820px) { .hiw-grid { grid-template-columns: 1fr; } .section-hiw { padding: 20px 20px 60px; } }

/* ── USE CASES ── */
.section-usecases { padding: 80px 48px; background: var(--canvas); }
.section-usecases-inner { max-width: 1200px; margin: 0 auto; }
.usecases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.usecase-card {
  padding: 28px; background: var(--white); border-radius: 20px;
  border: 1px solid var(--hairline); display: flex; gap: 20px; align-items: flex-start;
}
.usecase-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--sans); font-weight: 700; font-size: 1.25rem;
}
.usecase-title { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; color: var(--text); letter-spacing: -.02em; margin: 0 0 10px; }
.usecase-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.usecase-tag {
  font-size: .75rem; font-weight: 500; padding: 5px 12px; border-radius: 999px;
  background: var(--canvas); color: var(--text); border: 1px solid var(--hairline);
}
@media (max-width: 820px) { .usecases-grid { grid-template-columns: 1fr; } .section-usecases { padding: 60px 20px; } }

/* ── STATS ── */
.section-stats { padding: 100px 48px; background: var(--primary); color: #fff; }
.section-stats-inner { max-width: 1200px; margin: 0 auto; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
.stat-item { border-left: 2px solid var(--teal); padding-left: 24px; }
.stat-num { font-family: var(--sans); font-weight: 700; font-size: 4rem; color: #fff; letter-spacing: -.04em; line-height: 1; margin-bottom: 10px; }
.stat-label { font-size: .9375rem; color: #fff; font-weight: 500; margin-bottom: 4px; }
.stat-sub { font-size: .8125rem; color: rgba(255,255,255,.5); }
/* Mid-width tablets: keep two columns so the grid never collapses to a
   single tower of six stats on iPad-Air-ish widths. The desktop grid
   uses 3 columns (lays out as 3×2 at six tiles); below 1024px we drop
   to 2 columns (3×2 → 2×3). True mobile (≤820px) goes single column —
   six tall tiles read better than two crammed columns at phone width. */
@media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px)  { .stats-grid { grid-template-columns: 1fr; } .section-stats { padding: 60px 20px; } .stat-num { font-size: 3rem; } }

/* Sourcing/disclaimer footnote under the stats grid. Sits muted at the
   bottom of the dark indigo band so a B2B buyer can read at a glance
   that the numbers aren't pulled out of thin air, without competing
   visually with the headline figures. Max-width keeps it inside the
   grid alignment instead of stretching across the whole 1200px band. */
.stats-footnote {
  margin-top: 56px;
  max-width: 720px;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .005em;
}
@media (max-width: 820px) {
  .stats-footnote { margin-top: 32px; font-size: .75rem; }
}

/* ── CTA BAND ── */
.section-cta { padding: 40px 48px 100px; }
.cta-card {
  max-width: 1200px; margin: 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  border-radius: 32px; padding: 72px 64px; color: #fff; text-align: center;
}
.cta-title { font-family: var(--sans); font-weight: 700; font-size: 3rem; letter-spacing: -.05em; line-height: 1.1; margin: 0 0 16px; }
.cta-sub { font-size: 1.1rem; color: rgba(255,255,255,.8); margin-bottom: 36px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.btn-cta-white {
  padding: 16px 28px; background: #fff; color: var(--accent); border: none;
  border-radius: 999px; font-family: var(--sans); font-size: .9375rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.btn-cta-white:hover { opacity: .9; }
.btn-cta-ghost {
  padding: 15px 24px; background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s;
}
.btn-cta-ghost:hover { border-color: rgba(255,255,255,.7); }
@media (max-width: 640px) { .section-cta { padding: 20px 20px 60px; } .cta-card { padding: 48px 28px; border-radius: 20px; } .cta-title { font-size: 2rem; } }

/* ── FAQ ── */
.section-faq { padding: 40px 48px 100px; max-width: 1200px; margin: 0 auto; }
.section-faq-inner { max-width: 760px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 18px 22px; transition: border-color .15s;
}
.faq-item:hover { border-color: var(--accent-soft); }
.faq-item[open] { border-color: var(--accent-soft); }
.faq-item summary {
  font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--text);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--muted);
  flex-shrink: 0; line-height: 1;
}
.faq-item[open] summary::after { content: '−'; color: var(--accent); }
.faq-body {
  font-size: .9375rem; color: var(--muted); line-height: 1.7; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--hairline);
}
.faq-body a { color: var(--accent); text-decoration: none; font-weight: 500; }
.faq-body a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .section-faq { padding: 20px 20px 60px; }
  .faq-item { padding: 16px 18px; }
  .faq-item summary { font-size: .9375rem; }
  .faq-body { font-size: .875rem; }
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--hairline); background: var(--canvas);
  padding: 56px 48px 28px;
  font-size: .8125rem; color: var(--muted);
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline);
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-brand { gap: 14px; }
.footer-logo {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  color: var(--text); letter-spacing: -.03em;
}
.footer-logo .dot { color: var(--teal); }
.footer-social { display: flex; align-items: center; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.footer-social-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 500; color: var(--muted);
  text-decoration: none; transition: color .15s;
}
.footer-social-link svg { flex-shrink: 0; transition: color .15s; }
.footer-social-link:hover { color: var(--accent); }
.footer-heading {
  font-size: .72rem; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.footer-col a { color: var(--muted); text-decoration: none; transition: color .15s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.footer-bottom a { color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--text); }
@media (max-width: 820px) {
  footer { padding: 40px 20px 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ── SPINNER ── */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(67,56,202,.25); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── CONTACT MODAL (Support / Send feedback) ── */
.contact-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: flex-start; justify-content: center;
  padding: 56px 20px 20px;
  overflow-y: auto;
}
.contact-modal.open { display: flex; }
.contact-modal-backdrop {
  position: fixed; inset: 0; background: rgba(14, 14, 26, .55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.contact-modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 520px;
  background: var(--white); border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(14,14,26,.32), 0 4px 12px rgba(14,14,26,.12);
  animation: contactModalIn .18s ease-out;
}
@keyframes contactModalIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-modal-accent {
  height: 4px; background: linear-gradient(90deg, var(--accent), var(--teal));
}
.contact-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--muted);
  width: 32px; height: 32px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.contact-modal-close:hover { background: var(--bg); color: var(--text); }
.contact-modal-body { padding: 28px 32px 28px; }
.contact-modal-eyebrow {
  margin: 0 0 6px; font-size: .72rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .1em;
}
.contact-modal-title {
  margin: 0 0 6px; font-family: var(--sans); font-size: 1.4rem; font-weight: 700;
  color: var(--text); letter-spacing: -.02em; line-height: 1.25;
}
.contact-modal-sub {
  margin: 0 0 22px; font-size: .875rem; color: var(--muted); line-height: 1.55;
}
.contact-field-row { display: flex; gap: 10px; }
.contact-field-row .contact-field { flex: 1 1 0; min-width: 0; }
.contact-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.contact-field label {
  font-size: .75rem; font-weight: 600; color: var(--text); letter-spacing: .01em;
}
.contact-field .contact-optional { font-weight: 400; color: var(--muted); }
.contact-field input,
.contact-field textarea {
  font-family: var(--sans); font-size: .9rem; color: var(--text); background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; outline: none; resize: vertical;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.contact-field textarea { min-height: 110px; line-height: 1.55; }
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67,56,202,.12);
}
/* Honeypot — visually hidden but still in the DOM so bots that scan all
   inputs fill it. Avoids `display:none` (some bots skip those) by clipping
   off-screen instead. Real users never see or tab into it. */
.contact-honeypot {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.contact-msg { font-size: .8rem; min-height: 18px; margin: 6px 0 4px; }
.contact-msg.error { color: var(--red); }
.contact-msg.success { color: #047857; }
.contact-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px;
}
.contact-btn-ghost {
  font-family: var(--sans); font-size: .875rem; font-weight: 600;
  background: none; color: var(--muted); border: 1px solid var(--hairline);
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.contact-btn-ghost:hover { border-color: #bbb; color: var(--text); }
.contact-btn-primary {
  font-family: var(--sans); font-size: .875rem; font-weight: 600;
  background: var(--accent); color: #fff; border: none;
  padding: 10px 22px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(67,56,202,.25);
  transition: background .15s, box-shadow .15s;
}
.contact-btn-primary:hover:not(:disabled) {
  background: var(--accent-dark); box-shadow: 0 8px 24px rgba(67,56,202,.32);
}
.contact-btn-primary:disabled { opacity: .65; cursor: not-allowed; box-shadow: none; }
.contact-success-view { text-align: center; padding: 8px 0 4px; }
.contact-success-icon {
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700; margin: 0 auto 14px;
}
.contact-success-title {
  font-family: var(--sans); font-size: 1.1rem; font-weight: 700;
  color: var(--text); margin-bottom: 6px;
}
.contact-success-sub {
  font-size: .875rem; color: var(--muted); line-height: 1.55;
  margin: 0 auto 20px; max-width: 360px;
}
.contact-success-sub span { color: var(--accent); font-weight: 600; }
@media (max-width: 480px) {
  .contact-modal { padding: 20px 12px; }
  .contact-modal-body { padding: 24px 22px; }
  .contact-field-row { flex-direction: column; gap: 0; }
  .contact-actions { flex-direction: column-reverse; }
  .contact-btn-ghost, .contact-btn-primary { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LANDING POLISH — small visual upgrades to match modern SaaS landings
   (Clearcue was the direct reference point). Every effect is additive;
   nothing here changes an existing class, so removing any block below is
   a zero-risk revert.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Pulse on the hero eyebrow dot ──
   The "Built for tech teams…" eyebrow already has a small teal dot next
   to it; animating it into a low-amplitude pulse reads as "live product,
   active company" without needing any real-time data. Keyframes fade a
   faint outer ring from 0 → 8px while the dot itself stays static. */
@keyframes hero-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(42, 200, 200, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(42, 200, 200, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(42, 200, 200, 0);   }
}
.hero-eyebrow-dot { animation: hero-dot-pulse 2.2s ease-out infinite; }

/* ── Hover lift on the product cards ──
   Same pattern the dashboard ws-card has — animates only transform +
   shadow + border-color (no layout props) so neighbouring cards in the
   grid don't reflow. Capped at 2px so grid alignment stays intact. */
.hiw-card,
.usecase-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hiw-card:hover,
.usecase-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(14,14,26,.06);
  border-color: var(--accent-soft);
}

/* ── Reveal-on-scroll ──
   IntersectionObserver in team.js toggles .reveal-in on elements with
   .reveal once they enter the viewport. We stagger grid children via
   nth-child transition-delay so a 3-card row doesn't all slide up at
   once — it cascades by 90ms. Initial state must NOT ship if JS is
   disabled (old browsers, no-JS readers) or the user would see a
   permanently faded-out page. The no-js fallback below re-enables the
   visibility just in case. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.reveal-in {
  opacity: 1;
  transform: translateY(0);
}
.hiw-card.reveal:nth-child(2)    { transition-delay: 90ms;  }
.hiw-card.reveal:nth-child(3)    { transition-delay: 180ms; }
.usecase-card.reveal:nth-child(2){ transition-delay: 60ms;  }
.usecase-card.reveal:nth-child(3){ transition-delay: 120ms; }
.usecase-card.reveal:nth-child(4){ transition-delay: 180ms; }
/* Six stat tiles cascade in 70ms steps so the last one lands inside
   ~400ms — long enough to feel like a sequence, short enough that the
   reader reaches stat #6 before they've finished reading stat #1. The
   earlier 120ms-per-step pacing was tuned for three tiles; reusing it
   for six made the bottom row arrive a full 600ms after the top, which
   read as "the page is still loading" rather than "the page is alive". */
.stat-item.reveal:nth-child(2)   { transition-delay:  70ms; }
.stat-item.reveal:nth-child(3)   { transition-delay: 140ms; }
.stat-item.reveal:nth-child(4)   { transition-delay: 210ms; }
.stat-item.reveal:nth-child(5)   { transition-delay: 280ms; }
.stat-item.reveal:nth-child(6)   { transition-delay: 350ms; }

/* ── Gradient wash behind the hero text ──
   Soft radial bloom in accent colour, anchored top-left of .hero-left.
   Same trick as the /dashboard greeting; sits behind the text at 8%
   alpha so it warms the page without competing with the headline.
   overflow:hidden on .hero-left isn't needed — the wash is clipped by
   the hero's own grid column. */
.hero-left {
  position: relative;
  /* Prevent horizontal "wiggle" on mobile: the decorative ::before wash is
     absolutely positioned with a negative left offset, which can extend the
     scrollable overflow box on narrow viewports and allow sideways panning.
     Clipping here keeps the wash purely visual without affecting layout. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  .hero-left { overflow-x: hidden; }
}
.hero-left::before {
  content: '';
  position: absolute;
  top: -60px; left: -100px;
  width: 620px; height: 320px;
  background: radial-gradient(closest-side, rgba(67, 56, 202, .08) 0%, rgba(67, 56, 202, 0) 75%);
  pointer-events: none;
  z-index: 0;
}
.hero-left > * { position: relative; z-index: 1; }

/* ── Nav refinement on scroll ──
   The nav is already sticky + backdrop-blurred at rest. team.js adds
   .scrolled once the user passes 20px, which bumps background opacity
   and adds a soft shadow — the common "page is no longer at rest" cue
   every modern SaaS landing ships. Keeps the same height, same layout. */
nav { transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; }
nav.scrolled {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 4px 16px rgba(14,14,26,.05);
  border-bottom-color: transparent;
}

/* ── tabular-nums on the big stat numbers ──
   Future-proofs the count-up animation: each tick of "4 → 4.1 → 4.2"
   paints at the same column width. Not noticeable on static numbers
   but saves a wobble the very first time someone re-renders them. */
.stat-num { font-variant-numeric: tabular-nums; }

/* Reduced-motion: users who opt out get the end state immediately,
   with no pulse, lift, slide, or count-up animation. */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow-dot { animation: none; }
  .hiw-card, .usecase-card { transition: none; }
  .hiw-card:hover, .usecase-card:hover { transform: none; }
  .reveal, .reveal.reveal-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  nav { transition: none; }
  /* Demo-section reduced-motion rules live alongside the demo CSS at the
     bottom of the file so the whole component (including its motion
     contract) is one self-contained block. */
}

/* ════════════════════════════════════════════════════════════════════════════
   LIVE CHAT DEMO — purely additive section that sits between `.section-
   problem` and `.section-hiw` in the markup. Renders a scripted refund
   role-play inside a fake chat card with an animated resistance meter
   in the header. The product *is* a chat, and this is the only place
   on the page where visitors see it before signing up. The component
   was originally shipped alongside several other landing upgrades; the
   rest were rolled back in favour of starting small with just the
   highest-leverage piece (the live demo).
   ══════════════════════════════════════════════════════════════════════ */

/* ── LIVE CHAT DEMO ──
   Two-row card: a fixed header (scenario tag + animated resistance bar)
   and a vertical thread of message bubbles. Bot messages anchor left
   with an avatar; user messages anchor right and skip the avatar. The
   `.msg-conceded` variant wraps the final bot message in a teal accent
   so the "I give up" moment reads visually before the outcome strip
   confirms it in copy.

   The resistance bar is pure CSS: starts at 75% width and transitions
   to 12% the moment .demo-card gets .reveal-in. The numeric value uses
   the existing data-count-to system (see team.js — the selector was
   widened from .stat-num[...] to [data-count-to] precisely to support
   this without forking the count-up code path). */
.section-demo {
  padding: 20px 48px 100px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 820px) { .section-demo { padding: 0 20px 60px; } }

/* Cross-link to the consumer FixAI game: same chat mechanic, public scenarios. */
.fixai-public-strip {
  margin: 32px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  max-width: 680px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}
.fixai-public-strip a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.fixai-public-strip a:hover { text-decoration: underline; }

.demo-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(14,14,26,.06), 0 2px 4px rgba(14,14,26,.03);
  overflow: hidden;
  margin-top: 8px;
}
.demo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #FAFAFF, #F4F2FE);
  border-bottom: 1px solid var(--hairline);
}
.demo-scenario { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.demo-scenario-tag {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
}
.demo-scenario-title {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-resistance {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.demo-resistance-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.demo-resistance-track {
  position: relative;
  width: 140px;
  height: 6px;
  border-radius: 999px;
  background: rgba(67,56,202,.1);
  overflow: hidden;
}
.demo-resistance-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 75%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  transition: width 1.6s cubic-bezier(.33, 1, .68, 1) 200ms,
              background-color .8s ease 1s;
}
.demo-card.reveal-in .demo-resistance-fill {
  width: 12%;
  background: linear-gradient(90deg, var(--teal), #1FA2A2);
}
.demo-resistance-value {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  min-width: 28px;
  text-align: right;
  letter-spacing: -.02em;
  transition: color .8s ease 1s;
}
.demo-card.reveal-in .demo-resistance-value { color: var(--teal); }
@media (max-width: 640px) {
  .demo-card-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 18px; }
  .demo-resistance { justify-content: space-between; }
  .demo-resistance-track { flex: 1; width: auto; }
}

/* Role-casting strip between the head and the chat thread. Mirrors the
   "AI on the left, trainee on the right" layout of the chat below so a
   visitor's eye lands on the casting first and reads the conversation
   pre-framed. Pill on each side carries the brand colour for that role
   (indigo for AI, teal for the trainee) so the colour cues continue
   into the chat (the trainee's bubble is indigo because the user-side
   bubble in chat shares the brand-accent fill — a quirk we don't fix
   in CSS, we explain it in copy here). */
.demo-cast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  font-size: .8125rem;
  color: var(--muted);
}
.demo-cast-role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  min-width: 0;
}
.demo-cast-role-user { flex-direction: row-reverse; }
.demo-cast-text {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-cast-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(67, 56, 202, .1);
  color: var(--accent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.demo-cast-pill-user {
  background: rgba(42, 200, 200, .14);
  color: #1FA2A2;
}
.demo-cast-vs {
  color: var(--muted);
  font-size: 1rem;
  flex-shrink: 0;
  opacity: .6;
}
@media (max-width: 540px) {
  .demo-cast {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 18px;
  }
  .demo-cast-role { justify-content: flex-start; }
  .demo-cast-role-user { flex-direction: row; justify-content: flex-end; }
  .demo-cast-vs { display: none; }
}

.demo-thread {
  padding: 24px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 78%;
}
.msg-bot { align-self: flex-start; }
.msg-user { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.msg-bubble {
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 16px;
  letter-spacing: -.005em;
}
.msg-bot .msg-bubble {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 6px;
}
.msg-user .msg-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.msg-conceded .msg-bubble {
  background: rgba(42, 200, 200, .12);
  color: var(--text);
  border: 1px solid rgba(42, 200, 200, .35);
}
/* Stagger the chat bubbles so the conversation reads as if it's playing
   out, not appearing all at once. Outcome strip lands last. */
.demo-thread .msg.reveal:nth-child(1) { transition-delay:  100ms; }
.demo-thread .msg.reveal:nth-child(2) { transition-delay:  350ms; }
.demo-thread .msg.reveal:nth-child(3) { transition-delay:  650ms; }
.demo-thread .msg.reveal:nth-child(4) { transition-delay:  950ms; }
.demo-thread .msg.reveal:nth-child(5) { transition-delay: 1250ms; }
.demo-outcome.reveal { transition-delay: 1500ms; }

.demo-outcome {
  margin: 8px 24px 24px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(42,200,200,.1), rgba(67,56,202,.06));
  border: 1px solid rgba(42,200,200,.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  color: var(--text);
}
.demo-outcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.demo-outcome-text strong { color: var(--text); font-weight: 700; }
@media (max-width: 640px) {
  .demo-thread { padding: 18px 16px 4px; }
  .msg { max-width: 92%; }
  .msg-bubble { font-size: .875rem; padding: 10px 14px; }
  .demo-outcome { margin: 4px 16px 18px; font-size: .825rem; }
}

/* ── REDUCED-MOTION (live chat demo) ── */
@media (prefers-reduced-motion: reduce) {
  /* Resistance bar / value snap to terminal state, no easing. */
  .demo-resistance-fill {
    transition: none;
    width: 12%;
    background: linear-gradient(90deg, var(--teal), #1FA2A2);
  }
  .demo-resistance-value { transition: none; color: var(--teal); }
}

/* ── GOOGLE SSO ── */
.google-sso-wrap { margin-bottom: 4px; }
.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: var(--ash, #9ca3af);
  font-size: 12px;
  font-weight: 500;
}
.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline, #e5e7eb);
}
/* Google renders an iframe button — constrain width to form card */
#google-btn-register > div,
#google-btn-login > div { width: 100% !important; }