/* ============================================================================
   Rofterm — Landing page styles
   Design tokens mirror the Rofterm app brand (see README.md for the full
   palette to hand to a logo designer).
   ========================================================================== */

:root {
  /* Brand — Blue (primary) */
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;   /* PRIMARY */
  --brand-700: #1d4ed8;
  --brand-900: #1e3a8a;

  /* Accent — Teal (compliance) */
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;    /* SECONDARY */

  /* Tertiary accents (status palette from the app) */
  --violet:  #7c3aed;
  --emerald: #059669;
  --amber:   #d97706;
  --rose:    #e11d48;

  /* Ink / neutral — Slate */
  --ink-950: #020617;
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --surface: #f8fafc;
  --white:   #ffffff;

  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 12px 30px -12px rgba(15,23,42,.18);
  --shadow-lg: 0 30px 60px -24px rgba(37,99,235,.35);
  --maxw: 1280px;

  /* How far the hero dashboard screenshot spills below the hero into the
     section beneath it — the hero pulls down by this much, and the stats
     section reserves the same space up top so its card clears the overhang.
     The screenshot is ~2.07:1, so half its rendered height ≈ 0.23 × its width;
     tracking the viewport width keeps the spill at exactly half the image
     (top half over the dark hero, bottom half over the white section) at any
     size, capped once the screenshot hits its max-width. */
  --shot-overhang: min(calc(23vw + 8px), 390px);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-sans);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--ink-700);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); line-height: 1.12; letter-spacing: -.02em; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.container.narrow { max-width: 820px; }

.sr-only, .skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto;
  background: var(--brand-600); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 200;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--brand-600); color: #fff; box-shadow: 0 8px 20px -8px rgba(37,99,235,.6); }
.btn-primary:hover { background: var(--brand-700); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(37,99,235,.7); }
.btn-outline { background: #fff; color: var(--ink-900); border-color: var(--ink-200); }
.btn-outline:hover { border-color: var(--brand-600); color: var(--brand-700); transform: translateY(-2px); }
.btn-outline-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { color: var(--brand-700); }

/* ── Reading-progress bar ──────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
  background: linear-gradient(90deg, var(--brand-500), var(--teal-400));
  z-index: 120; pointer-events: none;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent; transition: border-color .25s, background .25s, box-shadow .25s;
}
/* Default = transparent over the dark hero → light text. */
.site-header .brand-name { color: #fff; }
.site-header .nav-links a { color: rgba(255,255,255,.78); }
.site-header .nav-links a:hover { color: #fff; }
.site-header .btn-ghost { color: rgba(255,255,255,.9); }
.site-header .nav-toggle span { background: #fff; }

/* Scrolled = solid light bar → dark text. */
.site-header.scrolled { background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--ink-200); box-shadow: var(--shadow-sm); }
.site-header.scrolled .brand-name { color: var(--ink-900); }
.site-header.scrolled .nav-links a { color: var(--ink-600); }
.site-header.scrolled .nav-links a:hover { color: var(--brand-700); }
.site-header.scrolled .btn-ghost { color: var(--ink-700); }
.site-header.scrolled .nav-toggle span { background: var(--ink-800); }
.nav { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
/* Header brand logo — light variant over the dark hero, dark variant when the
   header turns solid on scroll. Both share the same slot so there's no shift. */
.brand-logo { display: block; height: 30px; width: auto; }
.site-header .brand-logo-dark { display: none; }
.site-header.scrolled .brand-logo-light { display: none; }
.site-header.scrolled .brand-logo-dark { display: block; }
.brand-mark { display: grid; place-items: center; filter: drop-shadow(0 6px 12px rgba(37,99,235,.35)); }
.brand-name { font-family: var(--font-display); font-size: 20px; color: var(--ink-900); letter-spacing: -.02em; }
.nav-links { display: flex; gap: 26px; margin-inline: auto; }
.nav-links a { position: relative; font-weight: 500; font-size: 15px; color: var(--ink-600); transition: color .15s; }
.nav-links a:hover { color: var(--brand-700); }
/* Active section indicator (scrollspy) — small underline under the current link */
.nav-links a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: currentColor; opacity: .8;
}
.site-header .nav-links a.is-current { color: #fff; }
.site-header.scrolled .nav-links a.is-current { color: var(--brand-700); }

/* Solid = forced light bar for inner pages (legal, etc.) that have no dark hero.
   Mirrors .scrolled but is applied statically in markup; the scroll JS only
   toggles .scrolled, so this never gets removed at scroll position 0. */
.site-header.solid { background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--ink-200); box-shadow: var(--shadow-sm); }
.site-header.solid .brand-name { color: var(--ink-900); }
.site-header.solid .nav-links a { color: var(--ink-600); }
.site-header.solid .nav-links a:hover { color: var(--brand-700); }
.site-header.solid .nav-links a.is-current { color: var(--brand-700); }
.site-header.solid .btn-ghost { color: var(--ink-700); }
.site-header.solid .nav-toggle span { background: var(--ink-800); }
.site-header.solid .brand-logo-light { display: none; }
.site-header.solid .brand-logo-dark { display: block; }
.nav-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink-800); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { display: flex; flex-direction: column; gap: 4px; padding: 12px 24px 22px; background: #fff; border-bottom: 1px solid var(--ink-200); box-shadow: var(--shadow-sm); }
/* The HTML `hidden` attribute must win over the display:flex above, otherwise
   the menu can never close (a class selector outranks the UA [hidden] rule). */
.mobile-menu[hidden] { display: none; }
@media (min-width: 961px) { .mobile-menu { display: none !important; } }
.mobile-menu a { padding: 12px 8px; font-weight: 600; color: var(--ink-700); border-radius: 8px; }
.mobile-menu a:hover { background: var(--brand-50); color: var(--brand-700); }
.mobile-menu .btn { margin-top: 8px; }

/* ── Hero (dark, centered) ─────────────────────────────────────────────────── */
.hero {
  position: relative; z-index: 1; overflow: visible; text-align: center;
  /* Pull up under the sticky transparent header so the gradient runs edge-to-edge.
     No bottom padding: the screenshot's negative margin defines where the hero
     ends, so the dark gradient finishes around the middle of the screenshot. */
  margin-top: -72px; padding: 128px 0 0;
  background:
    radial-gradient(1100px 620px at 50% -10%, #1c3168 0%, transparent 60%),
    radial-gradient(900px 520px at 85% 0%, rgba(13,148,136,.18), transparent 55%),
    linear-gradient(180deg,
      #0b1733 0%,
      #0a1020 46%,
      #0f1830 60%,
      #1b2742 72%,
      #34425d 82%,
      #5b6b86 89%,
      #93a1b8 94%,
      #ccd5e1 98%,
      var(--surface) 100%);
}
.hero-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(620px 360px at 50% 2%, rgba(59,130,246,.30), transparent 62%);
}
.hero-grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 0%, #000 28%, transparent 76%);
          mask-image: radial-gradient(72% 62% at 50% 0%, #000 28%, transparent 76%);
}
.hero-center { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px;
  color: rgba(255,255,255,.92); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); padding: 7px 16px; border-radius: 999px; backdrop-filter: blur(6px);
  margin-bottom: 26px; letter-spacing: -.005em;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-400); box-shadow: 0 0 0 4px rgba(45,212,191,.22); }

/* Display headline — confident, tightly tracked, intentionally broken to two
   lines via the <br>; text-wrap:balance keeps it even if the break is removed. */
.hero h1 {
  font-size: clamp(38px, 5.4vw, 66px);
  font-weight: 800;
  margin: 0 auto;
  color: #fff;
  max-width: 18ch;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* Accent phrase: gradient ink + a soft hand-drawn underline that sits below the
   baseline, so it reads as a deliberate flourish rather than gradient-filled text. */
.grad {
  position: relative; white-space: nowrap;
  background: linear-gradient(96deg, #7cb6ff 0%, #4f9dff 42%, #2dd4bf 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: -.14em; height: .1em;
  border-radius: 999px; background: linear-gradient(90deg, var(--brand-400), var(--teal-400));
  opacity: .55; transform: scaleX(0); transform-origin: left center;
  animation: underline-draw .9s .35s cubic-bezier(.2,.7,.2,1) forwards;
}
@media (max-width: 560px) { .hero h1 br { display: none; } }
.lede { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: rgba(226,232,240,.8); margin: 24px auto 0; max-width: 600px; }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }
.hero-note { margin-top: 20px; font-size: 13px; color: rgba(226,232,240,.55); }

.works-with { margin-top: 46px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.works-with > span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(226,232,240,.5); font-weight: 600; }
.ww-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ww-badges span { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); padding: 7px 14px; border-radius: 10px; }

/* Hero product preview — spans the seam: top half over the dark hero, bottom
   half spilling down into the section below via the negative bottom margin. */
.hero-preview { position: relative; z-index: 2; width: 100%; max-width: min(1600px, 96vw); margin: 56px auto calc(-1 * var(--shot-overhang)); padding-inline: 24px;
  /* 3D scene for the screenshot's unfold-on-scroll animation */
  perspective: 2200px; perspective-origin: 50% 22%; }
.mock-card { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); box-shadow: 0 40px 90px -34px rgba(2,6,23,.75); padding: 22px; }
.mock-title { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.mock-title.sm { font-size: 13px; }

/* Framed dashboard screenshot — starts tilted back 90° on its bottom hinge and
   stands upright to face the viewer once it scrolls into view (reveal adds .in). */
.hero-shot { position: relative; z-index: 2; background: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px -34px rgba(2,6,23,.8);
  transform-origin: 50% 100%; transform: rotateX(var(--shot-rot, 0deg)); will-change: transform; }
.hero-shot-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: linear-gradient(180deg, #f8fafc, #f1f5f9); border-bottom: 1px solid var(--ink-200); }
.hero-shot-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-300); }
.hero-shot img { display: block; width: 100%; height: auto; }
/* Graceful state before dashboard.png is supplied */
.hero-shot.is-empty { aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, #f8fafc, #f8fafc 14px, #f1f5f9 14px, #f1f5f9 28px); }

.mock-float { position: absolute; padding: 14px 16px; }
.mock-coverage { top: -34px; right: -6px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 132px; }
.ring { --p: 86; position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--teal-500) calc(var(--p)*1%), var(--ink-200) 0); }
.ring::before { content: ""; position: absolute; inset: 8px; background: #fff; border-radius: 50%; }
.ring span { position: relative; font-family: var(--font-display); font-weight: 800; color: var(--ink-900); }
.mock-alert { bottom: -20px; left: -8px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.mock-alert .check { width: 30px; height: 30px; border-radius: 50%; background: var(--emerald); color: #fff; display: grid; place-items: center; font-weight: 800; }
.mock-alert strong { display: block; font-size: 13px; color: var(--ink-900); }
.mock-alert small { color: var(--ink-500); font-size: 11px; }

.float-mid  { animation: float 5.5s ease-in-out infinite; }
.float-fast { animation: float 4.5s ease-in-out infinite; }

/* ── Stats ───────────────────────────────────────────────────────────────── */
/* Reserve room up top so the overhanging screenshot clears the stat card. */
.stats { position: relative; z-index: 0; padding: calc(var(--shot-overhang) + 56px) 0 8px; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  padding: 40px 16px; box-shadow: var(--shadow);
}
.stat { text-align: center; color: var(--ink-500); padding: 6px 20px; }
.stat:not(:first-child) { border-left: 1px solid var(--ink-200); }
.stat-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px,3vw,44px); color: var(--ink-900); letter-spacing: -.02em; }
.stat-num .stat-unit { font-size: .5em; color: var(--brand-600); }
.stat p { font-size: 13px; margin-top: 8px; color: var(--ink-500); }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding: 88px 0; }
.section-tint { background: linear-gradient(180deg, #fff, var(--surface)); }
.section-head { max-width: 760px; margin: 0 0 48px; text-align: left; }
.kicker { font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-600); }
.kicker.light { color: var(--teal-400); }
.section-head h2 { font-size: clamp(26px, 3.4vw, 40px); margin-top: 12px; }
.section-sub { color: var(--ink-500); font-size: 17px; margin-top: 14px; }
.section-sub.light { color: var(--ink-300); }

/* Platform showcase — expandable list (left) + swapping visual (right) */
.platform { display: grid; grid-template-columns: 1fr 1.04fr; gap: 52px; align-items: center; }

.platform-list { display: flex; flex-direction: column; }
.pf-item {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; font-family: inherit;
  padding: 20px 22px; border-radius: 14px;
  transition: background .25s ease;
}
.pf-item + .pf-item::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: var(--ink-200);
}
.pf-item.is-active::before, .pf-item.is-active + .pf-item::before { opacity: 0; }
.pf-item.is-active { background: var(--brand-50); }
.pf-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; }
.c-blue { color: var(--brand-600); } .c-teal { color: var(--teal-600); } .c-rose { color: var(--rose); }
.c-amber { color: var(--amber); } .c-emerald { color: var(--emerald); } .c-violet { color: var(--violet); }
.pf-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink-900); letter-spacing: -.01em; transition: color .2s; }
.pf-item:not(.is-active):hover .pf-title { color: var(--brand-700); }
.pf-desc {
  display: block; overflow: hidden; max-height: 0; opacity: 0; color: var(--ink-500); font-size: 15px;
  transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease;
}
.pf-item.is-active .pf-desc { max-height: 160px; opacity: 1; margin-top: 10px; }

/* Visual stage */
.platform-visual {
  position: relative; min-height: 440px; border-radius: var(--radius-lg);
  border: 1px solid var(--ink-200); box-shadow: var(--shadow); overflow: hidden;
  background:
    radial-gradient(120% 120% at 82% 4%, rgba(45,212,191,.16), transparent 46%),
    radial-gradient(120% 120% at 12% 100%, rgba(59,130,246,.16), transparent 50%),
    linear-gradient(180deg, #fff, var(--surface));
}
.pf-panel {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 36px;
  opacity: 0; transform: translateY(12px) scale(.985); pointer-events: none;
  transition: opacity .4s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.pf-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }

.pf-card { width: 100%; max-width: 372px; background: #fff; border: 1px solid var(--ink-200); border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(2,6,23,.38); padding: 22px; }
.pfc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pfc-title { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.pfc-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-200); }
.pfc-pill.ok { background: #ecfdf5; color: var(--emerald); border-color: #a7f3d0; }
.pfc-pill.crit { background: #fff1f2; color: var(--rose); border-color: #fecdd3; }

/* Panel 1 — risk table */
.pf-table { display: grid; }
.pf-tr { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 11px 4px; font-size: 14px; color: var(--ink-700); border-top: 1px solid var(--ink-100); }
.pf-tr.pf-th { border-top: 0; color: var(--ink-400); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding-bottom: 6px; }
.pf-tr i { font-style: normal; color: var(--ink-500); font-size: 13px; min-width: 56px; text-align: right; }
.sev { font-family: var(--font-display); font-weight: 800; font-size: 13px; padding: 2px 9px; border-radius: 6px; text-align: center; }
.sev-hi { background: #fff1f2; color: var(--rose); } .sev-md { background: #fffbeb; color: var(--amber); } .sev-lo { background: #ecfdf5; color: var(--emerald); }

/* Panel 2 — controls */
.pf-controls { list-style: none; display: grid; }
.pf-controls li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--ink-700); padding: 12px 2px; border-top: 1px solid var(--ink-100); }
.pf-controls li:first-child { border-top: 0; }
.pf-controls .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pf-controls .dot.ok { background: var(--emerald); } .pf-controls .dot.warn { background: var(--amber); }
.pf-controls em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; }
.pf-controls em.ok { color: var(--emerald); } .pf-controls em.warn { color: var(--amber); }

/* Panel 3 — incident */
.pf-incident-sum { font-size: 14px; color: var(--ink-700); margin-bottom: 16px; }
.pf-timeline { display: grid; gap: 11px; margin-bottom: 14px; }
.pf-timeline .tl { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--ink-600); }
.pf-timeline .tl i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); flex: none; }
.pf-linked { font-size: 12px; color: var(--ink-500); background: var(--surface); border: 1px solid var(--ink-200); border-radius: 8px; padding: 9px 11px; }

/* Panel 4 — evidence files */
.pf-files { list-style: none; display: grid; gap: 10px; }
.pf-files li { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--ink-200); border-radius: 10px; }
.pf-files .fi { width: 34px; height: 34px; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); display: grid; place-items: center; flex: none; }
.pf-files strong { display: block; font-size: 13px; color: var(--ink-900); }
.pf-files small { color: var(--emerald); font-size: 11px; }

/* Panel 5 — coverage */
.pf-cov { display: grid; gap: 18px; }
.pf-cov .row { display: grid; grid-template-columns: 92px 1fr 42px; gap: 12px; align-items: center; font-size: 13px; }
.pf-cov .row span { color: var(--ink-700); font-weight: 600; }
.pf-cov .row b { text-align: right; font-family: var(--font-display); color: var(--ink-900); }
.pf-cov .bar { height: 8px; background: var(--ink-100); border-radius: 999px; overflow: hidden; }
.pf-cov .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal-500), var(--brand-500)); }

/* Panel 6 — report */
.pf-report { display: flex; flex-direction: column; gap: 12px; }
.pf-rep-tag { align-self: flex-start; font-size: 11px; font-weight: 700; color: #fff; background: var(--brand-600); padding: 4px 11px; border-radius: 999px; }
.pf-rep-line { height: 9px; border-radius: 6px; background: var(--ink-200); }
.pf-rep-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 4px 0; }
.pf-rep-kpis span { height: 42px; border-radius: 8px; background: linear-gradient(160deg, var(--brand-50), var(--brand-100)); border: 1px solid var(--brand-200); }
.pf-rep-chart { display: flex; align-items: flex-end; gap: 8px; height: 72px; margin-top: 4px; }
.pf-rep-chart i { flex: 1; height: var(--h); background: linear-gradient(var(--brand-400), var(--brand-600)); border-radius: 5px 5px 2px 2px; }

/* How it works — visual-on-top cards */
.hiw-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; list-style: none; }
.hiw-card { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.hiw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-200); }

.hiw-visual { height: 168px; display: grid; place-items: center; padding: 22px; border-bottom: 1px solid var(--ink-100); }
.hiw-visual.v1 { background: linear-gradient(160deg, #eff6ff, #f8fafc); }
.hiw-visual.v2 { background: linear-gradient(160deg, #f0fdfa, #f8fafc); }
.hiw-visual.v3 { background: linear-gradient(160deg, #f5f3ff, #f8fafc); }

.hiw-body { padding: 24px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.hiw-body h3 { font-size: 19px; margin-bottom: 8px; }
.hiw-body p { color: var(--ink-500); font-size: 15px; }
.hiw-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--brand-600); }
.hiw-tag i { font-style: normal; transition: transform .2s; }
.hiw-card:hover .hiw-tag i { transform: translateX(4px); }

/* Visual 1 — sources merging into one register */
.hiw-visual.v1 { gap: 0; }
.hiw-srcs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hiw-srcs span { font-size: 11px; font-weight: 600; color: var(--ink-600); background: #fff; border: 1px solid var(--ink-200); border-radius: 7px; padding: 4px 9px; }
.hiw-merge { display: flex; gap: 5px; height: 16px; margin: 8px 0; }
.hiw-merge span { width: 2px; background: linear-gradient(var(--brand-400), transparent); }
.hiw-one { font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--teal-500)); border-radius: 8px; padding: 8px 14px; box-shadow: 0 8px 18px -8px rgba(37,99,235,.6); }

/* Visual 2 — live monitor */
.hiw-mon { width: 100%; max-width: 220px; background: #fff; border: 1px solid var(--ink-200); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 14px; }
.hiw-mon-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 12px; font-weight: 700; color: var(--ink-700); }
.hiw-mon-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--emerald); background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: 2px 8px; }
.hiw-mon-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.hiw-mon-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.hiw-mon-bars i { flex: 1; height: var(--h); background: linear-gradient(var(--teal-400), var(--brand-500)); border-radius: 4px 4px 2px 2px; }

/* Visual 3 — board pack document */
.hiw-doc { width: 100%; max-width: 188px; background: #fff; border: 1px solid var(--ink-200); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.hiw-doc-tag { align-self: flex-start; font-size: 10px; font-weight: 700; color: #fff; background: var(--violet); padding: 3px 9px; border-radius: 999px; }
.hiw-doc-line { height: 8px; border-radius: 5px; background: var(--ink-200); }
.hiw-doc-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 3px 0; }
.hiw-doc-kpis span { height: 30px; border-radius: 6px; background: linear-gradient(160deg, #f5f3ff, #ede9fe); border: 1px solid #ddd6fe; }

/* Split sections */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.reverse .split-copy { order: 2; }
.split h2 { font-size: clamp(24px,3vw,36px); margin-top: 12px; }
.check-list { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; font-weight: 500; color: var(--ink-700); }
.check-list.light li { color: var(--ink-200); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 6px; background: var(--teal-500); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

/* Coverage card */
.cov-card { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; display: grid; gap: 18px; }
.cov-row { display: grid; grid-template-columns: 120px 1fr 44px; gap: 14px; align-items: center; font-size: 14px; }
.cov-row span { color: var(--ink-700); font-weight: 600; }
.cov-row span em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-600); background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 5px; padding: 1px 5px; margin-left: 6px; }
.cov-row b { text-align: right; font-family: var(--font-display); color: var(--ink-900); }
.cov-bar { height: 10px; background: var(--ink-100); border-radius: 999px; overflow: hidden; }
.cov-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--teal-500), var(--brand-500)); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.cov-bar.in i { width: var(--w); }

/* Dark reporting section */
.section-dark { background: radial-gradient(900px 500px at 80% 0%, #16306b, var(--ink-950)); color: var(--ink-200); }
.section-dark h2 { color: #fff; }
.doc-stack { position: relative; height: 360px; }
.doc { position: absolute; border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); }
.doc.d1 { inset: 0 60px 0 0; padding: 28px; display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.doc.d2 { inset: 18px 30px 18px 30px; opacity: .55; z-index: 2; background: #eef2ff; }
.doc.d3 { inset: 36px 0 36px 60px; opacity: .3; z-index: 1; background: #dbeafe; }
.doc-tag { align-self: flex-start; font-size: 11px; font-weight: 700; color: #fff; background: var(--brand-600); padding: 4px 10px; border-radius: 999px; }
.doc-line { height: 9px; border-radius: 6px; background: var(--ink-200); }
.doc-line.w90 { width: 90%; } .doc-line.w80 { width: 80%; } .doc-line.w70 { width: 70%; } .doc-line.w60 { width: 60%; }
.doc-mini-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 6px 0; }
.doc-mini-kpis span { height: 42px; border-radius: 8px; background: linear-gradient(160deg, var(--brand-50), var(--brand-100)); border: 1px solid var(--brand-200); }

/* Trust */
.trust-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.trust { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 28px; border-left: 3px solid var(--brand-600); transition: transform .2s, box-shadow .2s, border-color .2s; }
.trust:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-left-color: var(--teal-500); }
.trust h3 { font-size: 18px; margin-bottom: 8px; }
.trust p { color: var(--ink-500); font-size: 15px; }

/* ── Built for the CRO's reality ─────────────────────────────────────────── */
.cro-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.cro-card { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 28px; border-top: 3px solid var(--brand-600); transition: transform .2s, box-shadow .2s, border-color .2s; }
.cro-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-top-color: var(--teal-500); }
.cro-step { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--brand-600); }
.cro-card h3 { font-size: 19px; margin: 10px 0 8px; }
.cro-card p { color: var(--ink-500); font-size: 15px; }

/* ── Before / after comparison ───────────────────────────────────────────── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.compare-col { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 28px 28px 30px; }
.compare-after { border-color: var(--brand-200); box-shadow: 0 18px 40px -24px rgba(37,99,235,.5); }
.compare-tag { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
.compare-before .compare-tag { color: var(--ink-500); background: #f1f5f9; }
.compare-after .compare-tag { color: var(--brand-700); background: var(--brand-50); }
.compare-col ul { list-style: none; display: grid; gap: 14px; }
.compare-col li { position: relative; padding-left: 30px; color: #334155; font-size: 15.5px; line-height: 1.5; }
.compare-col li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.compare-before li::before { content: "\2715"; color: #94a3b8; background: #f1f5f9; }
.compare-after li::before { content: "\2713"; color: #fff; background: var(--brand-600); }
@media (max-width: 900px) { .cro-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* Industries — Stripe-style expanding carousel */
.industries-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.industries-intro { max-width: 720px; }
.industries-intro h2 { font-size: clamp(26px, 3.4vw, 40px); margin-top: 12px; }
.industries-nav { display: flex; gap: 10px; flex: none; }
.ind-arrow {
  width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--ink-200); background: var(--white); color: var(--ink-700);
  display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.ind-arrow svg { width: 20px; height: 20px; }
.ind-arrow:hover { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.ind-arrow:active { transform: translateY(1px); }

.industries-track {
  position: relative; display: flex; gap: 14px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px;
}
.industries-track::-webkit-scrollbar { display: none; }

.ind-card {
  position: relative; flex: 0 0 auto; width: 96px;
  height: clamp(360px, 42vw, 520px);
  border: 0; padding: 0; cursor: pointer; overflow: hidden;
  border-radius: var(--radius-lg); color: #fff; text-align: left;
  box-shadow: var(--shadow);
  background-color: var(--brand-700);
  background-size: cover; background-position: center;
  transition: width .55s cubic-bezier(.2,.7,.2,1);
}
.ind-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,0) 38%, rgba(2,6,23,.78) 100%);
}
.ind-card.is-active { width: min(58%, 700px); cursor: default; }

/* Vertical label shown while the card is collapsed */
.ind-spine {
  position: absolute; left: 0; bottom: 22px; z-index: 2;
  writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center;
  width: 96px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .01em; white-space: nowrap;
  opacity: 1; transition: opacity .25s ease;
}
.ind-card.is-active .ind-spine { opacity: 0; pointer-events: none; }

/* Expanded body — shown only on the active card */
.ind-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
  padding: 30px 32px 32px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease .12s, transform .35s ease .12s;
}
.ind-card.is-active .ind-body { opacity: 1; transform: none; }
.ind-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.01em; }
.ind-copy { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.86); max-width: 46ch; }

/* Per-industry artwork (gradient + line-art baked into each SVG) */
.ind-1 { background-image: url('industries/financial.svg'); }
.ind-2 { background-image: url('industries/insurance.svg'); }
.ind-3 { background-image: url('industries/healthcare.svg'); }
.ind-4 { background-image: url('industries/technology.svg'); }
.ind-5 { background-image: url('industries/energy.svg'); }
.ind-6 { background-image: url('industries/government.svg'); }
.ind-7 { background-image: url('industries/manufacturing.svg'); }
.ind-8 { background-image: url('industries/retail.svg'); }

/* FAQ — two-column: intro (left) + accordion (right) */
.faq-wrap { display: grid; grid-template-columns: .82fr 1.18fr; gap: 60px; align-items: start; }
.faq-pill { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100); padding: 7px 16px; border-radius: 999px; }
.faq-intro h2 { font-size: clamp(30px, 3.4vw, 44px); margin-top: 20px; }
.faq-intro > p { color: var(--ink-500); font-size: 17px; margin-top: 16px; max-width: 420px; }
.faq-cta { margin-top: 28px; }
.faq-cta span { transition: transform .2s; }
.faq-cta:hover span { transform: translateX(4px); }

.faq { counter-reset: faq; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: 0 30px; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq details { position: relative; border-top: 1px solid var(--ink-200); }
.faq details:first-child { border-top: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 24px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq-q { counter-increment: faq; flex: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-900); letter-spacing: -.01em; line-height: 1.35; }
.faq-q::before { content: counter(faq) ". "; color: var(--ink-400); }
.faq-ic { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ink-100); transition: background .25s; }
.faq-ic::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-600); border-bottom: 2px solid var(--ink-600); transform: translate(-50%, -70%) rotate(45deg); transition: transform .25s, border-color .25s; }
.faq summary:hover .faq-ic { background: var(--brand-100); }
.faq details[open] .faq-ic { background: var(--brand-600); }
.faq details[open] .faq-ic::before { border-color: #fff; transform: translate(-50%, -30%) rotate(225deg); }
.faq p { margin: -2px 0 26px; padding-right: 56px; color: var(--ink-500); font-size: 15px; line-height: 1.7; }
/* soft glow beneath the open answer */
.faq details[open]::after { content: ""; position: absolute; left: -30px; right: -30px; bottom: -26px; height: 72px; background: radial-gradient(58% 100% at 50% 100%, rgba(45,212,191,.16), transparent 72%); pointer-events: none; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; padding: 92px 0; background: radial-gradient(760px 380px at 50% -12%, rgba(45,212,191,.30), transparent 60%), linear-gradient(135deg, var(--brand-700), var(--brand-600)); }
/* Vertical stripe texture */
.cta-texture { position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 66px); }
/* Faded dotted "map" field rising from the bottom */
.cta-map { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.4px, transparent 1.7px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(78% 130% at 50% 128%, #000 28%, transparent 72%);
          mask-image: radial-gradient(78% 130% at 50% 128%, #000 28%, transparent 72%); }

.cta-inner { position: relative; z-index: 1; text-align: center; color: #fff; max-width: 680px; margin-inline: auto; }
.cta-badge { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--brand-700); background: #fff; padding: 8px 18px; border-radius: 999px; box-shadow: 0 8px 20px -10px rgba(2,6,23,.5); margin-bottom: 22px; }
.cta-inner h2 { color: #fff; font-size: clamp(28px,3.6vw,44px); letter-spacing: -.02em; }
.cta-inner > p { color: rgba(255,255,255,.85); font-size: 17px; margin: 14px auto 0; max-width: 540px; }
.cta-btn { display: inline-flex; align-items: center; gap: 14px; margin-top: 32px; background: var(--ink-900); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 9px 9px 9px 26px; border-radius: 999px; box-shadow: 0 12px 28px -12px rgba(2,6,23,.7); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.cta-btn:hover { background: #000; transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(2,6,23,.8); }
.cta-btn i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ink-900); font-style: normal; font-size: 18px; transition: transform .2s ease; }
.cta-btn:hover i { transform: translateX(3px); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink-950); color: var(--ink-400); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
.site-footer .brand-name { color: #fff; }
.footer-tag { margin-top: 14px; font-size: 14px; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social-link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--ink-300); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: color .2s, background .2s, border-color .2s, transform .2s; }
.footer-social-link:hover { color: #fff; background: var(--brand-600); border-color: var(--brand-600); transform: translateY(-2px); }
.footer-col h4 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.footer-col a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink-400); transition: color .15s; }
.footer-col a:hover { color: var(--teal-400); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--ink-800); font-size: 13px; flex-wrap: wrap; }

/* ── Scroll reveal animations ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes underline-draw { to { transform: scaleX(1); } }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero { padding: 128px 0 0; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 28px 0; padding: 32px 12px; }
  .stat:not(:first-child) { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--ink-200); }
  .platform { grid-template-columns: 1fr; gap: 28px; }
  .platform-visual { min-height: 380px; }
  .faq-wrap { grid-template-columns: 1fr; gap: 32px; }
  .hiw-grid { grid-template-columns: 1fr 1fr; }
  .split, .split.reverse .split-copy { grid-template-columns: 1fr; order: 0; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .industries-head { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 600px) {
  .section { padding: 64px 0; }
  /* On small screens, drop the expand/collapse and let every card show its
     body in a swipeable, snap-aligned carousel. */
  .industries-track { gap: 12px; scroll-snap-type: x mandatory; }
  .ind-card, .ind-card.is-active { width: min(82%, 360px); scroll-snap-align: start; }
  .ind-spine { display: none; }
  .ind-body { opacity: 1; transform: none; }
  .ind-card .ind-copy { color: rgba(255,255,255,.86); }
  .hero { padding: 116px 0 0; }
  .hiw-grid, .stats-grid, .footer-grid { grid-template-columns: 1fr; }
  .faq { padding: 0 20px; }
  .stat:nth-child(even) { border-left: 0; }
  .hero-actions .btn { flex: 1; }
  .mock-coverage { display: none; }
  .footer-base { flex-direction: column; }
}

/* ── Request-a-demo modal ──────────────────────────────────────────────────── */
.demo-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  inset: 0; margin: auto; /* center both axes within the viewport */
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: #fff; color: var(--ink-700);
  box-shadow: 0 40px 90px -30px rgba(2,6,23,.55);
  overflow: hidden; /* clip the scroll area to the rounded corners */
}
.demo-modal::backdrop { background: rgba(8,15,32,.55); backdrop-filter: blur(4px); }
/* Entrance */
.demo-modal[open] { animation: demo-pop .28s cubic-bezier(.2,.7,.2,1); }
@keyframes demo-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.demo-form {
  position: relative; display: flex; flex-direction: column;
  max-height: calc(100vh - 48px); overflow-y: auto; padding: 34px 32px 28px;
  scrollbar-gutter: stable; /* reserve track space so content doesn't jump */
  scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; /* Firefox */
}
/* WebKit/Blink — thin, rounded, only-on-hover-feel scrollbar */
.demo-form::-webkit-scrollbar { width: 8px; }
.demo-form::-webkit-scrollbar-track { background: transparent; }
.demo-form::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 999px; border: 2px solid #fff; }
.demo-form::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
.demo-close {
  position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--ink-100); color: var(--ink-600); font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .15s, color .15s;
}
.demo-close:hover { background: var(--ink-200); color: var(--ink-900); }

.demo-head { margin-bottom: 22px; padding-right: 28px; }
.demo-kicker { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-600); }
.demo-head h2 { font-size: clamp(22px, 3vw, 28px); margin-top: 10px; }
.demo-head p { color: var(--ink-500); font-size: 15px; margin-top: 10px; }

.demo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-field { display: flex; flex-direction: column; gap: 7px; }
.demo-field-full { grid-column: 1 / -1; }
.demo-field span { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.demo-field span i { color: var(--rose); font-style: normal; }
.demo-field span em { color: var(--ink-400); font-style: normal; font-weight: 500; }
.demo-field input, .demo-field select, .demo-field textarea {
  font-family: inherit; font-size: 15px; color: var(--ink-900);
  padding: 11px 13px; border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s; width: 100%;
}
.demo-field textarea { resize: vertical; min-height: 76px; }
.demo-field input:focus, .demo-field select:focus, .demo-field textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
/* Honeypot — visually removed but still reachable for bots. */
.demo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.demo-foot { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.demo-foot .btn-primary { width: 100%; }
.demo-status { font-size: 14px; color: var(--ink-500); min-height: 0; }
.demo-status:empty { display: none; }
.demo-status.is-error { color: var(--rose); font-weight: 600; }
.demo-fineprint { font-size: 12px; color: var(--ink-400); text-align: center; }

.demo-success { text-align: center; padding: 18px 8px 8px; }
.demo-success-ic { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--emerald); color: #fff; display: grid; place-items: center; font-size: 28px; font-weight: 800; }
.demo-success h3 { font-size: 22px; outline: none; }
.demo-success p { color: var(--ink-500); font-size: 15px; margin: 10px auto 22px; max-width: 360px; }

@media (max-width: 520px) {
  .demo-fields { grid-template-columns: 1fr; }
  .demo-form { padding: 30px 22px 24px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-shot { transform: none; }
}

/* ── Legal / policy pages (privacy, terms, dpa) ──────────────────────────── */
.legal-hero { padding: 128px 0 28px; background: linear-gradient(180deg, var(--ink-950), var(--ink-900)); color: #fff; }
.legal-hero .eyebrow { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-400); }
.legal-hero h1 { color: #fff; font-size: clamp(30px, 5vw, 46px); margin-top: 12px; }
.legal-hero .legal-meta { margin-top: 16px; color: var(--ink-300); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legal-hero .legal-meta strong { color: #fff; font-weight: 600; }

.legal-body { padding: 52px 0 88px; }
.legal-wrap { display: grid; grid-template-columns: 232px 1fr; gap: 48px; align-items: start; }

/* Sticky table of contents */
.legal-toc { position: sticky; top: 96px; font-size: 14px; }
.legal-toc h2 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 12px; }
.legal-toc a { display: block; padding: 6px 0; color: var(--ink-500); border-left: 2px solid transparent; padding-left: 12px; margin-left: -14px; transition: color .15s, border-color .15s; }
.legal-toc a:hover { color: var(--brand-700); }
.legal-toc a.is-current { color: var(--brand-700); border-left-color: var(--brand-600); font-weight: 600; }

/* Prose */
.legal-prose { max-width: 720px; color: var(--ink-700); }
.legal-prose .lead { font-size: 18px; color: var(--ink-600); margin-bottom: 28px; }
.legal-prose section { scroll-margin-top: 92px; padding-top: 8px; }
.legal-prose section + section { margin-top: 14px; }
.legal-prose h2 { font-size: 23px; margin: 30px 0 14px; padding-top: 14px; border-top: 1px solid var(--ink-200); }
.legal-prose section:first-of-type h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-prose h3 { font-size: 17px; margin: 22px 0 8px; color: var(--ink-800); }
.legal-prose p { margin: 0 0 14px; }
.legal-prose ul, .legal-prose ol { margin: 0 0 16px; padding-left: 22px; }
.legal-prose li { margin-bottom: 8px; }
.legal-prose a:not(.btn) { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose strong { color: var(--ink-900); }
.legal-prose table { width: 100%; border-collapse: collapse; margin: 6px 0 22px; font-size: 14.5px; }
.legal-prose th, .legal-prose td { text-align: left; vertical-align: top; padding: 11px 14px; border: 1px solid var(--ink-200); }
.legal-prose th { background: var(--ink-100); font-family: var(--font-display); color: var(--ink-900); font-size: 13px; }
.legal-prose td:first-child { font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.legal-note { margin-top: 8px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--ink-700); font-size: 14.5px; }
.legal-note strong { color: var(--brand-700); }

@media (max-width: 900px) {
  .legal-wrap { grid-template-columns: 1fr; gap: 8px; }
  .legal-toc { position: static; margin-bottom: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--ink-200); }
  .legal-toc a { display: inline-block; border-left: 0; padding: 4px 12px 4px 0; margin-left: 0; }
}