/* verif-hire.com/preview : Team portal sales page.
   Shell (tokens, nav, ambient, footer) mirrors security.html.
   No animation library on this page: CSS transitions + IntersectionObserver only. */

/* Metric-matched fallback for DM Sans (loaded async with display=swap), so the
   hero does not rewrap and push the demo down when the webfont arrives.
   DM Sans' optical-size axis makes text sizes about 105% of Arial's width and
   display sizes about 95%, so regular and bold get separate size-adjust values
   (measured in Chromium on this page's lede and H1). Ascent/descent are DM Sans'
   0.992 / 0.31 em divided by size-adjust. */
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans');
  font-weight: 100 549;
  size-adjust: 105%;
  ascent-override: 94.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arimo Bold'), local('Liberation Sans Bold');
  font-weight: 550 900;
  size-adjust: 95%;
  ascent-override: 104.4%;
  descent-override: 32.6%;
  line-gap-override: 0%;
}

:root {
  --bg: #06070a;
  --bg-2: #0b0d12;
  --ink: #f5f7fb;
  --ink-dim: #a7adb8;
  --ink-soft: #6b7180;
  --ink-mute: #8b919d;            /* AA on --bg for small secondary text */
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.05);
  --brand: #4dd198;
  --brand-2: #3bbf86;
  --brand-ink: #041710;
  --card: rgba(255,255,255,0.025);
  --radius: 18px;
  --sans: 'DM Sans', 'DM Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
body.modal-open { overflow: hidden; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: #7aecbb; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--brand); color: var(--brand-ink); font-weight: 600;
  padding: 8px 14px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 16px; }

.ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(77,209,152,0.1), transparent 55%),
    radial-gradient(900px 600px at 110% 20%, rgba(77,126,209,0.06), transparent 55%);
}

/* ── Nav (from security.html) ─────────────────────────── */
nav.topbar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 1240px; z-index: 50;
  background: rgba(8,10,15,0.94);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  padding: 12px 12px 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.6);
}
.logo {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-family: var(--mono); font-weight: 500; letter-spacing: -0.01em;
  font-size: 19px; text-decoration: none; color: var(--ink);
}
.logo img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(77,209,152,0.55)); }
.logo-word .tail, .wm .tail { color: var(--brand); text-shadow: 0 0 6px rgba(59,191,134,0.65), 0 0 14px rgba(59,191,134,0.32); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--ink-dim); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s;
  /* Padding gives the focus ring room; the negative margin keeps the layout unchanged. */
  padding: 6px 8px; margin: -6px -8px; border-radius: 8px; }
.nav-links a:hover { color: var(--ink); }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; min-height: 40px; border-radius: 10px;
  font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, filter .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn-brand {
  color: var(--brand-ink);
  background: linear-gradient(180deg, #6ce8b3, #3bbf86);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 10px 24px -10px rgba(77,209,152,0.5);
}
.btn-brand:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-line { color: var(--ink); border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); font-weight: 500; }
.btn-line:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
.btn-lg { padding: 13px 22px; min-height: 48px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn:focus-visible { box-shadow: var(--focus); border-radius: 12px; }

/* ── Layout ───────────────────────────────────────────── */
main { flex: 1 0 auto; position: relative; z-index: 2; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.section { padding: 112px 0; }
section[id] { scroll-margin-top: 96px; }

.kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand);
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-top: 16px; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.024em; line-height: 1.1; text-wrap: balance; }
.section-lede { margin-top: 16px; color: var(--ink-dim); font-size: 17px; line-height: 1.6; max-width: 60ch; }
.section-head.center .section-lede { margin-left: auto; margin-right: auto; }

/* Light reveal, motion-safe only; content is visible if JS never runs. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
  .js-reveal [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(12px); }
}

/* ── Hero ─────────────────────────────────────────────── */
.hero { padding: 128px 0 0; }
.hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 13px; color: var(--ink-dim); font-weight: 500;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px rgba(77,209,152,0.8); }
.eyebrow .wm { font-family: var(--mono); color: var(--ink); letter-spacing: -0.01em; }
.hero h1 {
  margin-top: 24px;
  font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 700; letter-spacing: -0.028em; line-height: 1.05;
  max-width: 13.9em; /* = 20ch of DM Sans 700; em so the fallback font wraps the same */
  text-wrap: balance;
}
.hero h1 .h1-line { display: block; color: var(--brand); }
.hero .lede {
  margin-top: 20px; max-width: 39.9em; /* = 58ch of DM Sans 400 at text sizes */
  font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.55; color: var(--ink-dim);
  text-wrap: pretty;
}
.hero-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.chips {
  list-style: none; margin-top: 24px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
  color: var(--ink-dim); font-size: 14px;
}
.chips li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.chips svg { width: 16px; height: 16px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ── Demo stage ───────────────────────────────────────── */
.demo { padding: 48px 0 0; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1400px) {
  /* The demo is the one wide element: it breaks out of the 1240px content column
     (up to 1400px) and the rail is 240px, so the scaled 1280px portal stays legible
     (k is about 0.83 at 1440 instead of 0.68). The side rail only appears at 1400px+
     so a wider window never renders a smaller demo: below that the rail sits under
     the frame as a 5-step row and the frame keeps the full column (k 0.87 to 0.92). */
  .demo .wrap.demo-grid { max-width: 1400px; }
  .demo-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
}

.stage { position: relative; }
.frame {
  position: relative;
  border-radius: 14px;
  background: #0d0f15;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 40px 80px -30px rgba(0,0,0,0.85),
    0 0 90px -20px rgba(77,209,152,0.22);
  overflow: hidden;
}
.frame-bar {
  height: 40px; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center;
  padding: 0 14px; background: #111319; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.frame-bar .dots { display: flex; gap: 7px; }
.frame-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a2d36; }
.frame-bar .url {
  justify-self: center; display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 14px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06);
  font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; letter-spacing: 0.01em;
}
.frame-bar .url svg { width: 12px; height: 12px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; }
.phone-notch { display: none; }

.viewport {
  position: relative; overflow: hidden;
  aspect-ratio: 1280 / 800;
  background: #0c0e14;
  contain: layout paint;
}
.scale-box {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 800px;
  transform-origin: 0 0;
  transform: scale(var(--k, 0.7));
}
.scale-box iframe {
  display: block; width: 100%; height: 100%; border: 0;
  background: #0c0e14;
  opacity: 0; transition: opacity .35s ease;
}
.stage[data-state="live"] .scale-box iframe { opacity: 1; }

.poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: opacity .35s ease;
}
.stage.no-poster .poster { display: none; }
.stage[data-state="live"] .poster,
.stage[data-state="live"] .placeholder { opacity: 0; transition: opacity .35s ease .1s; }

/* Portal-shaped placeholder, shown until the live demo is ready (or if the poster is missing). */
.placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: #0c0e14;
}
.ph-stripe { height: 0.4%; min-height: 2px; background: linear-gradient(90deg, #5b6bd6, #3aa7a3 45%, var(--brand-2)); }
.ph-top {
  display: flex; align-items: center; gap: 1.2%; height: 7.5%;
  padding: 0 2.2%; border-bottom: 1px solid #262a38; background: rgba(12,14,20,0.92);
}
.ph-mark { width: 2.1%; aspect-ratio: 1; border-radius: 30%; background: rgba(77,209,152,0.55); }
.ph-pill { margin-left: auto; width: 11%; height: 42%; border-radius: 999px; border: 1px solid #323748; background: #14161f; }
.ph-line { display: block; height: 10px; border-radius: 6px; background: #1d2030; }
.ph-top .ph-line.w1 { width: 14%; height: 26%; }
.ph-card {
  margin: 5% auto 0; width: 34.5%; padding: 2.4% 2.5%;
  background: #14161f; border: 1px solid #262a38; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.ph-logo { width: 42%; height: 18px; border-radius: 6px; background: #1d2030; margin-bottom: 9%; }
.ph-line.c { height: 12px; margin-bottom: 4%; }
.ph-line.w2 { width: 78%; height: 16px; }
.ph-line.w3 { width: 64%; margin-bottom: 10%; }
.ph-input { width: 100%; height: 38px; border-radius: 9px; background: #0c0e14; border: 1px solid #262a38; margin-bottom: 6%; }
.ph-btn { width: 100%; height: 40px; border-radius: 9px; background: rgba(77,209,152,0.35); margin-top: 2%; }

.stage-overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(closest-side, rgba(6,7,10,0.55), rgba(6,7,10,0.25));
}
.play-big {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px 14px 20px; border-radius: 999px;
  background: rgba(10,12,17,0.9); border: 1px solid rgba(77,209,152,0.55);
  color: var(--ink); font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.8), 0 0 0 6px rgba(77,209,152,0.08);
  transition: background-color .2s ease, border-color .2s ease;
}
.play-big:hover { background: rgba(18,22,28,0.95); border-color: var(--brand); }
.play-big svg { width: 20px; height: 20px; fill: var(--brand); }
.play-big:focus-visible { box-shadow: var(--focus); border-radius: 999px; }
.overlay-note {
  font-size: 13px; color: var(--ink-dim); background: rgba(6,7,10,0.8);
  padding: 6px 12px; border-radius: 8px;
}

.demo-controls {
  margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
}
.ctrl-buttons { display: flex; gap: 8px; }
.ctrl {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 7px 14px 7px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
  color: var(--ink); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.ctrl:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
.ctrl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ctrl .i-pause, .ctrl .i-play { fill: currentColor; stroke: none; }
.ctrl .i-play { display: none; }
.ctrl.is-paused .i-play { display: block; }
.ctrl.is-paused .i-pause { display: none; }
.ctrl:focus-visible { box-shadow: var(--focus); border-radius: 10px; }
.demo-note { font-size: 13px; color: var(--ink-mute); }

/* Chapter rail */
.chapters { list-style: none; }
.chapter {
  position: relative; width: 100%; text-align: left;
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; align-content: start;
  padding: 14px 16px 14px 20px; border-radius: 12px;
  background: transparent; border: 1px solid transparent; cursor: pointer;
  color: var(--ink-dim);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.chapter:hover { background: rgba(255,255,255,0.025); color: var(--ink); }
.chapter:focus-visible { box-shadow: var(--focus); border-radius: 12px; }
.ch-num { font-family: var(--mono); font-size: 12px; line-height: 22px; color: var(--ink-mute); letter-spacing: 0.02em; }
.ch-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ch-title { font-size: 15px; font-weight: 600; line-height: 22px; color: inherit; }
.ch-cap { font-size: 13.5px; line-height: 1.45; color: var(--ink-mute); text-wrap: pretty; }
.chapter[aria-current="step"] { background: rgba(77,209,152,0.06); border-color: rgba(77,209,152,0.18); color: var(--ink); }
.chapter[aria-current="step"] .ch-num { color: var(--brand); }
.chapter[aria-current="step"] .ch-cap { color: var(--ink-dim); }
.chapter.is-done .ch-num { color: var(--brand-2); }

.ch-bar { position: absolute; overflow: hidden; background: rgba(255,255,255,0.07); border-radius: 2px; }
.ch-fill { position: absolute; inset: 0; background: var(--brand); border-radius: inherit; will-change: auto; }
.chapter.is-done .ch-fill { background: rgba(77,209,152,0.45); }
.chapters.no-anim .ch-fill { transition: none !important; }

/* Vertical rail (next to the frame, >= 1400px) */
@media (min-width: 1400px) {
  .chapters-wrap { padding-top: 40px; }
  .chapters { display: flex; flex-direction: column; gap: 4px; }
  .ch-bar { left: 8px; top: 16px; bottom: 16px; width: 2px; }
  .ch-fill { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); transition: transform .15s linear; }
  .strip-caption { display: none; }
}
/* Horizontal row (under the frame, 900 to 1399px) */
@media (min-width: 900px) and (max-width: 1399px) {
  .chapters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .chapter { grid-template-columns: 1fr; gap: 6px; padding: 18px 12px 12px; height: 100%; }
  .ch-bar { left: 12px; right: 12px; top: 8px; height: 2px; }
  .ch-fill { transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .15s linear; }
  .ch-num { line-height: 16px; }
  .ch-cap { font-size: 13px; }
  .strip-caption { display: none; }
}
/* Fit the frame to the screen height too, so the whole demo plus Pause/Replay is
   always visible (WCAG 2.2.2) on short laptop screens like 1366x768 and 1280x800.
   Frame height = width x 0.625 + 42px bar; 210px = nav + bar + controls + air. */
@media (min-width: 900px) {
  .demo-main { width: 100%; max-width: max(640px, calc((100svh - 210px) * 1.6)); margin-inline: auto; }
}
@media (min-width: 1400px) {
  .demo-grid { grid-template-columns: auto 240px; justify-content: center; }
  .demo-main { width: min(calc(min(100vw, 1400px) - 336px), calc((100svh - 210px) * 1.6)); max-width: none; }
}
/* Short laptops (1100 to 1399px wide, up to 900px tall): height caps the frame, which
   frees the width for the side rail, so the chapter steps stay on screen too. */
@media (min-width: 1100px) and (max-width: 1399px) and (max-height: 900px) {
  .demo .wrap.demo-grid { max-width: 1400px; }
  .demo-grid { grid-template-columns: auto 240px; justify-content: center; gap: 32px; align-items: start; }
  .demo-main { width: min(calc(100vw - 336px), calc((100svh - 210px) * 1.6)); max-width: none; }
  .chapters-wrap { padding-top: 40px; }
  .chapters { display: flex; flex-direction: column; gap: 4px; }
  .chapter { grid-template-columns: 28px 1fr; gap: 12px; padding: 16px 16px 16px 20px; height: auto; }
  .ch-bar { left: 8px; right: auto; top: 16px; bottom: 16px; width: 2px; height: auto; }
  .ch-fill { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .ch-cap { font-size: 14px; }
}

/* Compact strip under the phone (< 900px) */
@media (max-width: 899px) {
  .chapters-wrap { max-width: 420px; width: 100%; margin: 0 auto; }
  .strip-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-height: 88px; }
  .strip-step { font-family: var(--mono); font-size: 12px; color: var(--brand); letter-spacing: 0.04em; text-transform: uppercase; }
  .strip-title { font-size: 17px; font-weight: 600; color: var(--ink); }
  .strip-cap { font-size: 14px; color: var(--ink-dim); line-height: 1.45; max-width: 34ch; }
  .chapters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
  .chapter { display: block; height: 32px; padding: 0; border-radius: 8px; }
  .chapter[aria-current="step"] { background: transparent; border-color: transparent; }
  .ch-bar { left: 4px; right: 4px; top: 50%; height: 4px; margin-top: -2px; }
  .ch-fill { transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .15s linear; }
  .ch-num, .ch-text { display: none; }
}

/* Mobile (< 900px): phone frame around a 390x780 portal. Driven by the media query
   (not the data-layout attribute that deferred JS sets), so the frame never jumps at load. */
@media (max-width: 899px) {
  /* The phone grows with the viewport (page gutter is 20px a side) up to about the
     portal's logical 390px width, so demo text stays near native size on phones. */
  .stage { width: clamp(280px, calc(100vw - 40px), 400px); max-width: 100%; margin: 0 auto; }
  .stage .frame {
    border-radius: 40px; padding: 10px; background: #0a0b0f;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 30px 60px -24px rgba(0,0,0,0.9), 0 0 70px -18px rgba(77,209,152,0.22);
  }
  .stage .frame-bar { display: none; }
  .stage .viewport { aspect-ratio: 390 / 780; border-radius: 0 0 30px 30px; }
  .stage .scale-box { width: 390px; height: 780px; }
  /* Status-bar strip above the portal so the notch never covers the portal header. */
  .stage .phone-notch {
    display: block; position: relative; height: 30px;
    background: #0c0e14; border-radius: 30px 30px 0 0;
  }
  .stage .phone-notch::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 76px; height: 20px; border-radius: 999px; background: #000;
  }
  .stage .ph-top { height: 8%; padding: 0 5%; }
  .stage .ph-mark { width: 8%; }
  .stage .ph-top .ph-line.w1 { width: 28%; height: 20%; }
  .stage .ph-pill { width: 26%; height: 36%; }
  .stage .ph-card { width: 88%; margin-top: 8%; padding: 8% 6%; }
  .stage .ph-input { height: 34px; }
  .stage .ph-btn { height: 36px; }
  .stage + .demo-controls { justify-content: center; flex-direction: column; }
  .stage + .demo-controls .demo-note { text-align: center; }
  /* Visual order: phone, step caption + progress, then Pause/Replay and the note.
     DOM order is unchanged, so Pause stays the first control in the region. */
  .demo-grid { display: flex; flex-direction: column; gap: 0; }
  .demo-main { display: contents; }
  .demo-grid .stage { order: 1; }
  .demo-grid .chapters-wrap { order: 2; margin-top: 20px; }
  .demo-grid .demo-controls { order: 3; margin-top: 16px; }
}

/* ── How it works ─────────────────────────────────────── */
.how { padding-top: 128px; padding-bottom: 72px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.step { padding: 32px 32px 8px 0; position: relative; }
.step + .step { padding-left: 32px; border-left: 1px solid var(--line); }
.step-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(77,209,152,0.08); border: 1px solid rgba(77,209,152,0.2);
}
.step-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step-num { display: block; margin-top: 24px; font-family: var(--mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; }
.step h3 { margin-top: 8px; font-size: 22px; letter-spacing: -0.02em; }
.step p { margin-top: 8px; color: var(--ink-dim); font-size: 16px; line-height: 1.55; max-width: 32ch; }

/* ── Features ─────────────────────────────────────────── */
.features { padding-top: 64px; }
.feature-grid {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: rgba(255,255,255,0.015);
}
.feature { padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature:nth-child(3n) { border-right: 0; }
.feature:nth-last-child(-n+3) { border-bottom: 0; }
.feature svg { width: 24px; height: 24px; fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { margin-top: 20px; font-size: 18px; letter-spacing: -0.015em; line-height: 1.3; }
.feature p { margin-top: 8px; color: var(--ink-dim); font-size: 15px; line-height: 1.6; }

/* ── Ease strip ───────────────────────────────────────── */
.ease { padding: 32px 0 0; }
.ease-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 40px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ease-line { font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; max-width: 28ch; text-wrap: balance; }
.ease-line span { color: var(--ink-dim); }
.ease-stats { list-style: none; display: flex; gap: 8px; flex-shrink: 0; }
.ease-stats li {
  font-family: var(--mono); font-size: 13px; color: var(--ink-dim);
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  white-space: nowrap;
}
.ease-stats b { color: var(--brand); font-weight: 500; margin-right: 4px; }

/* ── Pricing ──────────────────────────────────────────── */
.plan {
  max-width: 480px; margin: 0 auto; padding: 40px 32px 32px;
  border-radius: 20px; border: 1px solid rgba(77,209,152,0.3);
  background: linear-gradient(180deg, rgba(77,209,152,0.06), rgba(77,209,152,0) 40%), #0b0d12;
  box-shadow: 0 30px 70px -40px rgba(77,209,152,0.35);
}
.plan-head { text-align: center; }
.plan-name { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.plan-price { margin-top: 16px; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.plan-price .amount { font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.plan-price .per { font-size: 16px; color: var(--ink-dim); }
.plan-unit { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.unit-pill {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: rgba(77,209,152,0.12); color: var(--brand); font-size: 13px; font-weight: 600;
}
.unit-math { font-size: 12.5px; color: var(--ink-mute); }
.plan-list { list-style: none; margin: 32px 0 24px; }
.plan-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.plan-list li:first-child { border-top: 0; }
.plan-list svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plan-addon {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px;
  padding: 14px 16px; border-radius: 12px; border: 1px dashed rgba(255,255,255,0.14);
  font-size: 14px; color: var(--ink-dim); line-height: 1.5;
}
.plan-addon b { color: var(--ink); font-weight: 600; }
.addon-icon { flex-shrink: 0; width: 20px; height: 21px; display: grid; place-items: center; }
.addon-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan-fine { margin-top: 12px; text-align: center; font-size: 13px; color: var(--ink-mute); }
.ext-line { margin-top: 32px; text-align: center; color: var(--ink-dim); font-size: 15px; }
.ext-line a { font-weight: 600; text-decoration: none; margin-left: 4px; white-space: nowrap; }
.ext-line a:hover { text-decoration: underline; }

/* ── FAQ ──────────────────────────────────────────────── */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: start; }
.faq-wrap .section-head { margin-bottom: 0; position: sticky; top: 120px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.faq summary::after {
  content: ''; flex-shrink: 0; width: 12px; height: 12px;
  background:
    linear-gradient(var(--brand), var(--brand)) center / 12px 2px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center / 2px 12px no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover h3 { color: #fff; }
.faq summary:focus-visible { box-shadow: var(--focus); border-radius: 6px; }
.faq details p { padding: 0 40px 24px 0; color: var(--ink-dim); font-size: 15.5px; line-height: 1.65; max-width: 64ch; }

/* ── Final CTA ────────────────────────────────────────── */
.final { padding: 32px 0 96px; }
.final-inner {
  text-align: center; padding: 80px 32px;
  border-radius: 24px; border: 1px solid var(--line);
  background: radial-gradient(700px 260px at 50% 0%, rgba(77,209,152,0.1), transparent 70%), var(--bg-2);
}
.final h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.024em; max-width: 22ch; margin: 0 auto; text-wrap: balance; }
.final-sub { margin-top: 16px; color: var(--ink-dim); font-size: 17px; }
.final-cta { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Footer (from security.html) ──────────────────────── */
footer { position: relative; z-index: 2; background: #05070a; border-top: 1px solid var(--line); padding: 40px 0 30px; color: var(--ink-mute); font-size: 13px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer .wrap > div:last-child { display: flex; flex-wrap: wrap; gap: 8px 16px; }
footer a { color: var(--ink-dim); text-decoration: none; white-space: nowrap; }
footer a:hover { color: var(--ink); }

/* ── Lead modal ───────────────────────────────────────── */
.modal {
  margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink);
  width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px);
  overflow: visible;
}
.modal::backdrop { background: rgba(3,4,6,0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .2s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
.modal-card {
  position: relative; max-height: calc(100vh - 32px); overflow-y: auto;
  background: #0d1016; border: 1px solid rgba(255,255,255,0.1); border-radius: 18px;
  padding: 32px; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.9);
}
.modal h2 { font-size: 24px; letter-spacing: -0.02em; padding-right: 32px; }
.modal-sub { margin-top: 8px; color: var(--ink-dim); font-size: 15px; }
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--ink-dim);
}
.modal-close:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.modal-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#leadForm { margin-top: 24px; }
.f-row { margin-bottom: 16px; min-width: 0; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.f-row label { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.f-row .opt { color: var(--ink-mute); font-weight: 400; }
.f-row input, .f-row select, .f-row textarea {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px;
  background: #07090d; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
  font-size: 15px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.f-row select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.f-row select option { background: #0d1016; color: var(--ink); }
.f-row textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.f-row input::placeholder, .f-row textarea::placeholder { color: #7c828e; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(77,209,152,0.18); border-radius: 10px; }
.f-row [aria-invalid="true"] { border-color: #f07070; }
.f-err { margin-top: 6px; font-size: 13px; color: #ff9b9b; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.f-alert {
  margin-bottom: 16px; padding: 12px 14px; border-radius: 10px;
  background: rgba(240,86,86,0.08); border: 1px solid rgba(240,86,86,0.35); color: #ffc2c2; font-size: 14px;
}
.f-alert a { color: #fff; font-weight: 600; }
.modal-fine { margin-top: 16px; text-align: center; font-size: 13px; color: var(--ink-mute); }
.done { text-align: center; padding: 16px 0 8px; }
.done-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(77,209,152,0.12); border: 1px solid rgba(77,209,152,0.35); }
.done-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.done h2 { margin-top: 20px; padding-right: 0; }
.done h2:focus { outline: none; }
.done p { margin: 12px auto 24px; color: var(--ink-dim); max-width: 36ch; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav-links { gap: 20px; }
}
@media (max-width: 980px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:nth-child(3n) { border-right: 1px solid var(--line); }
  .feature:nth-child(2n) { border-right: 0; }
  .feature:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .feature:nth-last-child(-n+2) { border-bottom: 0; }
  .ease-inner { flex-direction: column; align-items: flex-start; }
  .faq-wrap { grid-template-columns: 1fr; gap: 32px; }
  .faq-wrap .section-head { position: static; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
}
@media (max-width: 760px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .section { padding: 80px 0; }
  .how { padding-top: 96px; }
  .features { padding-top: 32px; }
  .hero { padding-top: 112px; }
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .step, .step + .step { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
  .step-icon { grid-row: span 3; }
  .step-num { margin-top: 0; }
  .step h3 { margin-top: 4px; font-size: 20px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature, .feature:nth-child(3n), .feature:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px; }
  .feature:last-child { border-bottom: 0; }
  .final-inner { padding: 56px 20px; }
  .ease-inner { padding: 32px 0; }
  .modal-card { padding: 24px 20px; }
  .f-grid { grid-template-columns: 1fr; }
  .faq details p { padding-right: 0; }
}
@media (max-width: 480px) {
  nav.topbar { top: 12px; width: calc(100% - 24px); padding: 8px 8px 8px 12px; gap: 8px; }
  .logo { font-size: 16px; gap: 8px; }
  .logo img { width: 28px; height: 28px; }
  .btn-nav { padding: 8px 12px; min-height: 38px; font-size: 13px; }
  .hero { padding-top: 96px; }
  .hero .lede { font-size: 15.5px; }
  /* Two buttons side by side: the primary keeps its natural width, the secondary fills. */
  .hero-cta { width: 100%; flex-wrap: nowrap; }
  .hero-cta .btn { flex: 1 1 auto; padding-left: 14px; padding-right: 14px; }
  /* Chips as one left-aligned block, centered as a unit, so the icons line up. */
  .chips { display: grid; justify-content: center; justify-items: start; gap: 8px; }
  .plan { padding: 32px 20px 24px; }
  .plan-price .amount { font-size: 56px; }
  .ease-stats { flex-wrap: wrap; }
  .final-cta .btn { width: 100%; }
}
@media (max-width: 360px) {
  .logo-word { font-size: 15px; }
  .btn-nav { padding: 8px 10px; }
}
@media (max-width: 339px) {
  .hero-cta { flex-direction: column; }
}