/* =========================================================================
   Supace — Landingpage
   Design: premium editorial-tech. Fraunces (display serif) for headlines +
   Inter (body/UI) — the pairing every "AI interview copilot" competitor
   skips, since the whole category defaults to grotesk-only. Navy + teal
   stay the brand anchor; a genuine near-black hero/footer register (à la
   Linear/Vercel) replaces the flat light-SaaS look, while the working
   surfaces (features, dashboard) stay light per the brand's "not the dark
   app 1:1" rule.
   ========================================================================= */

:root {
  /* Brand — derived from the Supace logo gradient (navy → teal) */
  --navy: #12285c;
  --navy-2: #0a2050;
  --navy-ink: #0b1220;
  --teal: #189fbb;
  --teal-deep: #0e7c8f;
  --teal-bright: #4fd6e6;
  --gold: #c8a35a; /* premium accent — used sparingly (recommended tags, comparison wins) */

  /* Neutrals */
  --bg: #faf9f6;
  --surface: #ffffff;
  --surface-alt: #f4f2ec;
  --ink: #10141f;
  --ink-soft: #454b58;
  --muted: #767c88;
  --border: #e7e4dc;
  --border-strong: #d8d4c8;

  /* Dark register (hero / final CTA / footer) */
  --footer-bg: #0a0e1a;
  --footer-text: #b9bfcc;
  --footer-heading: #f3f4f7;
  --footer-border: #1c2333;
  --dark-surface: #0d1526;
  --dark-surface-2: #111b30;
  --dark-border: rgba(148, 168, 210, 0.16);

  /* Typo — Fraunces (display serif, optical-size aware) for headings,
     Inter for everything read at UI sizes, JetBrains Mono for labels/data. */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Layout */
  --container: 1180px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05);
  --shadow-md: 0 12px 32px -12px rgba(11, 18, 32, 0.18);
  --shadow-lg: 0 24px 64px -20px rgba(11, 18, 32, 0.28);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink-soft);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

::selection { background: var(--teal); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 640px) { .container { padding-inline: 2rem; } }

section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--teal-deep);
  font-weight: 600;
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 150, 172, 0.18);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- Editorial section head ----------
   The page used to open every section the same way: centred eyebrow, centred
   h2, centred lead. Five times over, that reads as a template rather than a
   designed page. This is the replacement — a left-aligned masthead with a
   section numeral and a rule running to the edge, borrowed from print. */
.sec-head {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
}
@media (min-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
}
.sec-head-num {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.sec-head-num b {
  color: var(--ink);
  font-weight: 700;
}
.sec-head h2 {
  font-size: clamp(2.05rem, 3.9vw, 3.05rem);
  line-height: 1.08;
  max-width: 18ch;
}
.sec-head-lead {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 42ch;
}
@media (min-width: 900px) {
  .sec-head-lead { padding-bottom: 0.35rem; }
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1, h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 540;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
h2 { font-size: clamp(1.9rem, 3.4vw, 2.65rem); }
h3 { font-size: 1.2rem; }

/* Prices, numerals in tables and stat figures should never wobble as digits
   change — line up the columns. */
.price-amount, .step-num, .sec-head-num, .stat-figure { font-variant-numeric: tabular-nums; }

.section-head p { color: var(--muted); font-size: 1.05rem; margin-top: 0.85rem; }

.text-balance { text-wrap: balance; }

/* ---------- Scroll reveal (main.js toggles .is-visible via IntersectionObserver) ----------
   Deliberately an animation, not a transition. A transition needs the browser
   to have painted the opacity:0 start state before the class flips; when an
   element is laid out and revealed in the same frame (fast scroll, page jump)
   that paint never happens, the transition never starts, and the element stays
   invisible for good. An animation with fill-mode:forwards always runs and
   always holds its end state. */
.reveal { opacity: 0; }
.reveal.is-visible { animation: reveal-in 0.7s var(--ease-spring) forwards; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.reveal-group .reveal:nth-child(2) { animation-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { animation-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { animation-delay: 0.24s; }
.reveal-group .reveal:nth-child(5) { animation-delay: 0.32s; }
.reveal-group .reveal:nth-child(6) { animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  /* The global reduced-motion rule already kills the animation, so opacity
     must be forced on here or the content would never appear at all. */
  .reveal { opacity: 1; }
  .reveal.is-visible { animation: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.96rem;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(18, 39, 90, 0.55);
}
.btn-primary:hover { box-shadow: 0 14px 30px -8px rgba(18, 39, 90, 0.6); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover { border-color: var(--navy); background: var(--surface); }

.btn-light {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.35);
}
.btn-light:hover { transform: translateY(-1px); }

.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.88rem; }
.btn-block { width: 100%; }

.btn-icon {
  width: 18px; height: 18px; flex-shrink: 0;
}

.cta-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.logo-mark { width: 37px; height: 37px; flex-shrink: 0; object-fit: contain; image-rendering: -webkit-optimize-contrast; }
.logo-word { line-height: 1; }
.logo--light .logo-word { color: #fff; }

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--navy-ink);
  color: #eef0f4;
  font-size: 0.86rem;
  position: relative;
}
.announce .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: 0.6rem;
  text-align: center;
}
.announce strong { color: var(--teal-bright); font-weight: 600; }
.announce-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #cfd3dc;
  opacity: 0.8;
}
.announce-close:hover { background: rgba(255,255,255,0.1); opacity: 1; }
.announce-close svg { width: 13px; height: 13px; }
.announce[hidden] { display: none; }

/* ---------- Header ----------
   One consistent light chrome on every page — no colour switch on scroll,
   no per-page variants. Only the hairline + shadow appear once you leave
   the top, so the header settles quietly instead of announcing itself. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(11,18,32,0.02), 0 8px 24px -20px rgba(11,18,32,0.3);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 70px;
}
.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav-links a { position: relative; padding-block: 0.3rem; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--navy);
  transition: right 0.22s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-actions .btn-primary { display: none; }
.nav-login {
  display: none;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0.35rem 0.2rem;
  transition: color 0.15s var(--ease);
}
.nav-login:hover { color: var(--ink); }

.menu-toggle {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
}
.menu-toggle:hover { background: var(--surface-alt); }
.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  position: fixed;
  inset: 70px 0 0 0;
  background: var(--bg);
  z-index: 90;
  padding: 1.5rem;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-nav a {
  display: block;
  padding: 1rem 0.25rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.mobile-nav-cta {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-login { display: inline-flex; }
  .header-actions .btn-primary { display: inline-flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* ---------- Hero — light, editorial, elegant ----------
   The page is one continuous light surface from top to bottom; no colour
   switch anywhere. Depth comes from type scale, generous space and one
   very soft warm halo — not from a dark canvas. The only dark element is
   the product mockup itself, which is dark because the actual app is. */
.hero {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3.5rem, 8vw, 6.5rem);
  overflow: clip;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  top: -280px;
  left: 50%;
  width: 1280px;
  max-width: 150vw;
  height: 720px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(20, 150, 172, 0.10), rgba(20, 150, 172, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(3rem, 6vw, 4rem);
  align-items: center;
}
.hero-copy { max-width: 640px; }
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 3.9rem);
  margin-bottom: 1.2rem;
}
.hero-claim {
  font-family: var(--font-display);
  font-style: italic;
  font-optical-sizing: auto;
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--teal-deep);
  margin-bottom: 1.1rem;
}
.hero-sub {
  font-size: clamp(1.04rem, 1.6vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 2.25rem;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.5rem;
  margin-bottom: 1rem;
}
.hero-cta-group { display: flex; flex-direction: column; gap: 0.5rem; }

.trust-row {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 500;
}
.trust-item svg { width: 16px; height: 16px; color: var(--teal-deep); flex-shrink: 0; }

/* ---------- Hero visual: video call + invisible overlay ----------
   The category's default hero shot is a cropped screenshot of the overlay
   alone. Showing the call it sits on top of — and labelling that it's
   hidden from screen share — visualises the actual differentiator instead
   of just claiming it. */
.hero-visual { position: relative; }
.call-frame {
  position: relative;
  max-width: 500px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--dark-surface-2) 0%, #0a1120 100%);
  border: 1px solid rgba(11, 18, 32, 0.08);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.1rem 8.5rem;
  transition: transform 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-spring);
}
/* Pointing at the visual lifts the frame and floats the Supace panel a little
   further off it — the overlay separating from the call is exactly what the
   product does, so the motion says something rather than just moving. */
.hero-visual:hover .call-frame {
  transform: translateY(-6px);
  box-shadow: 0 40px 80px -28px rgba(11, 18, 32, 0.38);
}
.hero-visual:hover .overlay-card {
  transform: translateY(-8px) scale(1.012);
  box-shadow: 0 30px 56px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(79,214,230,0.18);
}
.hero-visual:hover .overlay-live i { box-shadow: 0 0 0 5px rgba(79,230,200,0.16); }
@media (prefers-reduced-motion: reduce) {
  .call-frame, .overlay-card { transition: none; }
  .hero-visual:hover .call-frame,
  .hero-visual:hover .overlay-card { transform: none; }
}

.call-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
.call-dots { display: flex; gap: 5px; flex-shrink: 0; }
.call-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.call-dots span:first-child { background: #ff5f57; }
.call-dots span:nth-child(2) { background: #febc2e; }
.call-dots span:nth-child(3) { background: #28c840; }
.call-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 0.76rem; color: #838ca0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.call-timer {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 0.68rem; color: #e35b5b;
  display: flex; align-items: center; gap: 0.35rem;
}
.call-timer::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e35b5b; }

.call-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }

/* Video tiles: a lit backdrop plus a head-and-shoulders silhouette, so the
   frame reads as an actual call rather than two empty boxes. */
.call-tile {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    radial-gradient(70% 60% at 50% 22%, rgba(255,255,255,0.09), transparent 62%),
    linear-gradient(165deg, #24314f 0%, #131c30 100%);
}
.call-tile.is-you {
  background:
    radial-gradient(70% 60% at 50% 22%, rgba(79, 214, 230, 0.14), transparent 62%),
    linear-gradient(165deg, #1c2c48 0%, #101827 100%);
}
/* head */
.call-tile::before {
  content: "";
  position: absolute; left: 50%; top: 26%;
  width: 23%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255,255,255,0.3), rgba(255,255,255,0.11));
}
/* shoulders */
.call-tile::after {
  content: "";
  position: absolute; left: 50%; bottom: -14%;
  width: 58%; aspect-ratio: 1.5; transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.07));
}
/* Top-left, not bottom — the overlay sits along the bottom edge and would
   otherwise cover the labels. */
.call-name {
  position: absolute; left: 0.45rem; top: 0.45rem; z-index: 2;
  font-size: 0.62rem; letter-spacing: 0.01em; color: #dfe5f0;
  background: rgba(8, 13, 24, 0.5);
  backdrop-filter: blur(6px);
  padding: 0.14rem 0.45rem; border-radius: 5px;
}

/* Small call controls — the detail that makes it read as software */
.call-toolbar {
  display: flex; justify-content: center; gap: 0.4rem;
  margin-top: 0.75rem;
}
.call-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.call-btn.is-end { background: rgba(227, 91, 91, 0.85); border-color: transparent; }

/* ---------- The floating Supace overlay ----------
   Deliberately see-through: the real app dims to a teleprompter so the call
   stays visible behind it, so the mockup shows the call through the glass
   rather than a solid panel sitting on top of it. */
.overlay-card {
  position: absolute;
  left: 1.1rem; right: 1.1rem; bottom: 1.1rem;
  border-radius: 13px;
  background:
    linear-gradient(165deg, rgba(17, 27, 48, 0.66), rgba(9, 14, 26, 0.78));
  border: 1px solid rgba(140, 220, 235, 0.28);
  box-shadow:
    0 22px 50px -16px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  padding: 0.8rem 0.95rem 0.85rem;
  transition: transform 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-spring);
}
.overlay-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.overlay-head .overlay-hidden { margin-left: auto; }
.overlay-live {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  color: #7de6da;
}
.overlay-live i {
  width: 6px; height: 6px; border-radius: 50%; background: #4fe6c8;
  box-shadow: 0 0 0 3px rgba(79,230,200,0.2);
  animation: pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .overlay-live i { animation: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.overlay-hidden {
  display: flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.02em;
  color: #8891a5;
}
.overlay-hidden svg { width: 12px; height: 12px; }
.overlay-q {
  color: #eef1f7; font-size: 0.85rem; font-style: italic; line-height: 1.45;
  margin-bottom: 0.6rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

/* =========================================================================
   Hero overlay — looping "live session" simulation
   -------------------------------------------------------------------------
   Every element shares the SAME 13s duration and infinite count, and encodes
   its own moment as a percentage of that cycle. Staggering is done with
   animation-delay: since the periods are identical, a delay is a permanent
   phase offset rather than a drift, so the whole sequence stays in step
   forever without a single line of JavaScript.

   Sequence: listening → question transcribes word by word → thinking →
   key points land one by one → hold → reset.

   Nothing here uses display/height, only opacity and transform, so the panel
   never changes size and the layout never jumps.
   ========================================================================= */
.overlay-q i {
  display: inline-block;
  opacity: 0;
  animation: q-word 13s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.13s);
}
@keyframes q-word {
  0%, 4%    { opacity: 0; filter: blur(4px); }
  8%, 88%   { opacity: 1; filter: blur(0); }
  94%, 100% { opacity: 0; filter: blur(4px); }
}

/* caret that trails the transcription, then disappears */
.overlay-caret {
  display: inline-block;
  width: 2px; height: 0.95em;
  vertical-align: -0.12em;
  background: var(--teal-bright);
  margin-left: 2px;
  opacity: 0;
  animation: caret-show 13s steps(1) infinite, caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-show { 0%, 3% { opacity: 0; } 4%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes caret-blink { 0%, 50% { visibility: visible; } 51%, 100% { visibility: hidden; } }

/* "thinking" dots between the question landing and the answer arriving */
.overlay-think {
  position: absolute; left: 0.95rem; bottom: 0.85rem;
  display: flex; align-items: center; gap: 5px;
  opacity: 0;
  animation: think-show 13s var(--ease) infinite;
}
.overlay-think i {
  width: 5px; height: 5px; border-radius: 50%; background: #4fd6e6;
  animation: think-dot 1.1s ease-in-out infinite;
}
.overlay-think i:nth-child(2) { animation-delay: 0.15s; }
.overlay-think i:nth-child(3) { animation-delay: 0.3s; }
@keyframes think-show { 0%, 21% { opacity: 0; } 23%, 29% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes think-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.overlay-tag {
  opacity: 0;
  animation: tag-in 13s var(--ease) infinite;
}
@keyframes tag-in {
  0%, 29%   { opacity: 0; transform: scale(0.94); }
  33%, 88%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; }
}

.overlay-a li {
  opacity: 0;
  animation: point-in 13s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.18s);
}
@keyframes point-in {
  0%, 31%   { opacity: 0; transform: translateY(7px); }
  36%, 88%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; }
}

/* The global reduced-motion rule collapses animations to ~0s, which would
   freeze every element above on its final keyframe — opacity 0. So the
   motion has to be removed here explicitly, not just shortened. */
@media (prefers-reduced-motion: reduce) {
  .overlay-q i, .overlay-tag, .overlay-a li, .overlay-think, .overlay-caret {
    animation: none !important;
    opacity: 1;
    filter: none;
    transform: none;
  }
  .overlay-caret, .overlay-think { display: none; }
}

/* Live audio bars — the small motion that says "it's listening right now" */
.overlay-wave { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.overlay-wave i {
  width: 2px; border-radius: 1px; background: #4fd6e6; opacity: 0.85;
  animation: wave 1.15s ease-in-out infinite;
}
.overlay-wave i:nth-child(1) { height: 40%; animation-delay: 0s; }
.overlay-wave i:nth-child(2) { height: 85%; animation-delay: .12s; }
.overlay-wave i:nth-child(3) { height: 55%; animation-delay: .24s; }
.overlay-wave i:nth-child(4) { height: 100%; animation-delay: .36s; }
.overlay-wave i:nth-child(5) { height: 45%; animation-delay: .48s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .overlay-wave i { animation: none; } }
.overlay-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  color: #0a0e1a; background: linear-gradient(135deg, #4fd6e6, #7fe6a8);
  padding: 0.16rem 0.5rem; border-radius: 5px; letter-spacing: 0.03em;
  margin-bottom: 0.55rem;
}
.overlay-a ul { display: flex; flex-direction: column; gap: 0.32rem; }
.overlay-a li {
  display: flex; gap: 0.5rem; color: #d6dbe8; font-size: 0.8rem; line-height: 1.38;
}
.overlay-a li::before {
  content: ""; width: 4px; height: 4px; margin-top: 0.5em; border-radius: 50%;
  background: #4fd6e6; flex-shrink: 0;
}

.mockup-caption {
  text-align: center;
  font-size: 0.78rem;
  color: #838ca0;
  margin-top: 1.6rem;
}

@media (min-width: 960px) {
  .hero .container { grid-template-columns: 1.05fr 0.95fr; }
  .hero-copy { max-width: none; }
}

/* ---------- Steps — editorial sequence, not cards ----------
   Three identical bordered boxes said "template". Oversized serif numerals
   separated by hairlines read as a designed sequence, and the number is the
   thing your eye lands on rather than another rounded rectangle. */
.steps { display: grid; }
.step {
  display: grid;
  gap: 0.6rem 2.5rem;
  align-items: start;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 800px) {
  .step { grid-template-columns: 7rem minmax(0, 17rem) minmax(0, 1fr); align-items: baseline; }
}
.step-num {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--border-strong);
  transition: color 0.35s var(--ease);
}
.step:hover .step-num { color: var(--teal-deep); }
.step h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); letter-spacing: -0.015em; }
.step p { color: var(--muted); font-size: 0.98rem; line-height: 1.65; max-width: 46ch; }

/* ---------- Platform compatibility ---------- */
.platform-band {
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.platform-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2.25rem;
}
.platform-head .sec-head-num,
.pricing-head .sec-head-num,
.section-head.center .sec-head-num { margin-bottom: 1rem; }
/* Inside the light "why" band the head is left-aligned again */
.section-head .sec-head-num { margin-bottom: 1rem; }
.platform-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
}
/* Names set plainly — the four identical placeholder glyphs that used to sit
   in these chips read as unfinished, and we have no licence to show the real
   marks anyway. */
.platform-chip {
  display: flex;
  align-items: center;
  padding: 0.7rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
}
.platform-chip:last-child { color: var(--muted); font-weight: 500; font-style: italic; }
.platform-note {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 56ch;
  margin: 1.75rem auto 0;
}

/* ---------- Statement band ----------
   The page's one memorable moment. Every competitor's homepage is wall-to-wall
   feature grids with nothing that stops you; this is deliberately a pause —
   one oversized sentence, nothing else competing with it. */
.statement {
  padding-block: clamp(4.5rem, 10vw, 8rem);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
/* The measure belongs on the text, not the wrapper: `ch` on the wrapper
   resolves against the inherited 1rem body font, which produced a column
   barely wider than one display word. */
.statement-inner { max-width: 46rem; }
/* Scoped to its own class, not `.statement p` — that also matched the byline
   below and, being more specific, overrode it into 3.5rem display serif. */
.statement-text {
  max-width: 20ch;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.statement em {
  font-style: italic;
  color: var(--teal-deep);
}
.statement-by {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.statement-by::before {
  content: "";
  width: 2.5rem; height: 1px;
  background: var(--border-strong);
  flex-shrink: 0;
}

/* ---------- Feature showcase — the one that carries the pitch ----------
   Twelve equally-weighted cards told the visitor nothing about what matters.
   The discreet overlay is the reason people buy, so it gets a panel of its
   own with the product visual; everything else drops to a compact grid. */
.showcase {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  .showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.showcase-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 1.1rem;
}
.showcase h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 540;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
  max-width: 16ch;
}
.showcase > div > p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; max-width: 44ch; }
.showcase-points {
  display: flex; flex-direction: column;
  margin-top: 1.75rem;
}
.showcase-points li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding-block: 0.8rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--ink);
}
.showcase-points li:last-child { border-bottom: 1px solid var(--border); }
.showcase-points svg { width: 17px; height: 17px; color: var(--teal-deep); flex-shrink: 0; margin-top: 0.18em; }

/* The "what the interviewer sees" split, shown as two stacked panes */
.split-demo { display: grid; gap: 0.9rem; }
.split-pane {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
}
.split-label {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.split-label .dot { display: inline-flex; align-items: center; gap: 0.4rem; }
.split-label .dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong);
}
.split-pane.is-you .split-label { color: var(--teal-deep); }
.split-pane.is-you .split-label .dot::before { background: var(--teal); }
.split-body {
  position: relative;
  padding: 1rem 1.1rem;
  background: linear-gradient(160deg, #16213a, #0d1526);
}
/* The lower pane also carries the floating panel, so it needs room for the
   call tiles to stay visible underneath rather than being covered by it. */
.split-pane.is-you .split-body { padding-bottom: 6.5rem; }
.split-faces { display: flex; gap: 0.6rem; }
/* Same silhouette treatment as the hero tiles so both visuals read as the
   same product, not two different illustrations. */
.split-face {
  position: relative;
  flex: 1 1 0;
  height: 92px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    radial-gradient(70% 60% at 50% 22%, rgba(255,255,255,0.09), transparent 62%),
    linear-gradient(165deg, #24314f 0%, #131c30 100%);
}
.split-face::before {
  content: "";
  position: absolute; left: 50%; top: 24%;
  width: 26%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0.1));
}
.split-face::after {
  content: "";
  position: absolute; left: 50%; bottom: -16%;
  width: 62%; aspect-ratio: 1.5; transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06));
}
.split-face span {
  position: absolute; left: 0.4rem; top: 0.4rem; z-index: 2;
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.05em;
  color: #dfe5f0; background: rgba(8, 13, 24, 0.5);
  padding: 0.1rem 0.35rem; border-radius: 4px;
}

.split-overlay {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0.9rem;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(17, 27, 48, 0.62), rgba(9, 14, 26, 0.76));
  border: 1px solid rgba(140, 220, 235, 0.28);
  box-shadow:
    0 16px 34px -12px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.15);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  padding: 0.7rem 0.85rem;
}
.split-overlay .k {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.06em; color: #0a0e1a;
  background: linear-gradient(135deg, #4fd6e6, #7fe6a8);
  padding: 0.12rem 0.4rem; border-radius: 4px;
}
.split-overlay p { margin-top: 0.5rem; font-size: 0.78rem; line-height: 1.45; color: #d6dbe8; }

/* ---------- Features ---------- */
.feature-grid {
  display: grid;
  gap: 1.25rem;
}
.feature-card {
  position: relative;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.feature-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(18,39,90,0.06), rgba(20,150,172,0.1));
  color: var(--navy);
  margin-bottom: 1.1rem;
  transition: color 0.25s var(--ease);
}
.feature-card:hover .feature-icon { color: var(--teal-deep); }
.feature-icon svg { width: 20px; height: 20px; }
.feature-card h3 { font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
.feature-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }

.feature-grid { gap: 1.25rem; }
@media (min-width: 700px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Why Supace ----------
   A quiet tonal band rather than a dark inversion — the page never jumps
   colour. Separation comes from the alt surface + a hairline frame. */
.why-section {
  position: relative;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4rem);
}
.why-grid {
  display: grid;
  gap: 2rem 2.5rem;
}
.why-item { display: flex; gap: 1rem; }
.why-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--teal-deep);
}
.why-icon svg { width: 20px; height: 20px; }
.why-item h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.why-item p { font-size: 0.92rem; color: var(--muted); }

@media (min-width: 700px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Pricing ---------- */
.pricing-head { text-align: center; max-width: 620px; margin: 0 auto 2rem; }

.pricing-toggle {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.toggle-group {
  display: inline-flex;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.toggle-btn {
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.toggle-btn[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* The toggle now sits directly above the cards; the free-credits banner that
   used to fill this gap said the same thing as the promise block below. */
.pricing-toggle { margin-bottom: 2.5rem; }

.pricing-grid {
  display: grid;
  gap: 1.5rem;
}
/* The class rule above sets display:grid, which would override the UA
   [hidden]{display:none}. This makes the plan-toggle's hidden attribute work. */
.pricing-grid[hidden] { display: none; }
@media (min-width: 800px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

.price-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  position: relative;
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.price-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.price-card.is-recommended {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
}
.price-card.is-recommended:hover { border-color: var(--navy); box-shadow: var(--shadow-lg); }
.recommended-tag {
  position: absolute;
  top: -13px;
  left: 1.75rem;
  background: var(--navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.price-card h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 0.05rem;
  margin: 0.75rem 0 0.35rem;
}
.price-amount .price-currency { font-size: 1.55rem; font-weight: 700; color: var(--ink); }
.price-amount .price-num { font-size: 2.3rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.price-amount .price-period { font-size: 1rem; font-weight: 600; color: var(--muted); margin-left: 0.2rem; }
.price-amount .price-eur { font-size: 0.92rem; font-weight: 600; color: var(--muted); margin-left: 0.5rem; align-self: center; }
.price-amount .price-save {
  margin-left: auto;
  align-self: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--teal-deep);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.price-meta .price-permonth { font-weight: 700; color: var(--ink); }
.price-meta {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price-meta .price-credits { font-weight: 700; color: var(--ink); }
.price-features { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.75rem; flex-grow: 1; }
.price-features li { display: flex; gap: 0.55rem; font-size: 0.9rem; color: var(--ink-soft); }
.price-features li svg { width: 17px; height: 17px; color: var(--teal-deep); flex-shrink: 0; margin-top: 0.1em; }

.pricing-fineprint {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 560px;
  margin: 2.25rem auto 0;
}

/* ---------- Pricing promise ----------
   The category leader shows no price anywhere on its site — you have to
   create an account to find out what it costs, and its billing complaints
   follow from exactly that. Saying the opposite out loud is the cheapest
   differentiator available to us. */
.promise {
  max-width: 820px;
  margin: 2.75rem auto 0;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-md);
  display: grid;
  gap: 1.25rem 2rem;
}
@media (min-width: 760px) { .promise { grid-template-columns: repeat(3, 1fr); } }
.promise-item { display: flex; gap: 0.7rem; align-items: flex-start; }
.promise-item svg {
  width: 17px; height: 17px; flex-shrink: 0;
  margin-top: 0.15em; color: var(--teal-deep);
}
.promise-item b { display: block; font-size: 0.92rem; font-weight: 650; color: var(--ink); margin-bottom: 0.12rem; }
.promise-item span { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }

/* ---------- Pricing: "what every plan includes" ----------
   Replaces the old competitor comparison table — naming rivals on our own
   pricing page advertised them for free. This says what you get instead. */
.plan-includes {
  max-width: 820px;
  margin: 3rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.plan-includes h3 {
  text-align: center;
  font-size: 1.15rem;
  margin-bottom: 1.75rem;
}
.includes-grid {
  display: grid;
  gap: 1.25rem 2rem;
}
@media (min-width: 640px) { .includes-grid { grid-template-columns: repeat(2, 1fr); } }
.includes-item { display: flex; gap: 0.7rem; align-items: flex-start; }
.includes-item svg {
  width: 17px; height: 17px; flex-shrink: 0;
  margin-top: 0.18em; color: var(--teal-deep);
}
.includes-item b { display: block; font-size: 0.94rem; font-weight: 650; color: var(--ink); }
.includes-item span { font-size: 0.88rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin-inline: auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0.25rem;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  position: relative;
  transition: transform 0.25s var(--ease), background 0.2s var(--ease);
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--ink-soft);
  transition: transform 0.25s var(--ease);
}
.faq-icon::before { width: 10px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 10px; }
.faq-item[open] .faq-icon { background: var(--navy); border-color: var(--navy); }
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { background: #fff; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }

.faq-item p {
  padding: 0 1.9rem 1.5rem 0.25rem;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 66ch;
}

/* ---------- Final CTA ----------
   Closing note, not a billboard: centred type on the plain page surface,
   framed by hairlines above and below. */
.final-cta {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.final-cta h2 { margin-bottom: 0.9rem; }
.final-cta p { color: var(--muted); margin-bottom: 2rem; }
.final-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}
.footer-grid {
  display: grid;
  gap: 2.75rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--footer-border);
}
.footer-brand p { margin-top: 1rem; max-width: 30ch; font-size: 0.9rem; }
.footer-brand .footer-claim {
  margin-top: 0.95rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--footer-heading);
  letter-spacing: -0.01em;
}
.footer-brand .footer-claim + p { margin-top: 0.35rem; font-size: 0.85rem; }
.footer-support {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--footer-heading);
  font-weight: 600;
}
.footer-support svg { width: 16px; height: 16px; color: var(--teal-bright); }

.footer-col h4 {
  color: var(--footer-heading);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  margin-bottom: 1.1rem;
  font-weight: 600;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a { font-size: 0.92rem; transition: color 0.15s var(--ease); }
.footer-col a:hover { color: #fff; }

.download-buttons { display: flex; flex-direction: column; gap: 0.75rem; }
.download-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--footer-border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--footer-heading);
  position: relative;
}
.download-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.download-btn .os-sub { display: block; font-size: 0.72rem; font-weight: 400; color: var(--footer-text); }

.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: #7c8399;
}
.footer-bottom .disclaimer { max-width: 60ch; }

@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ---------- Legal / document pages ----------
   A narrow reading column with the same chrome as every other page — these
   used to be bare centred boxes with no header or footer, which made them
   feel like a different site. */
.legal { padding-block: clamp(3rem, 7vw, 5rem) clamp(3.5rem, 8vw, 6rem); }
.legal-inner { max-width: 720px; }
.legal h1 {
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  margin-top: 0.4rem;
  margin-bottom: 1.1rem;
}
.legal-lead {
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 62ch;
}

/* "Still being written" notice — honest, not a dead end */
.legal-notice {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: 2.5rem;
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-md);
}
.legal-notice-ic {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(20, 150, 172, 0.1);
  color: var(--teal-deep);
}
.legal-notice-ic svg { width: 19px; height: 19px; }
.legal-notice h2 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.legal-notice p { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.6; }
.legal-notice p + p { margin-top: 0.6rem; }

.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.legal-contact { font-size: 0.9rem; color: var(--muted); margin-top: 1.5rem; }
.legal-contact a { color: var(--teal-deep); font-weight: 600; }
.legal-contact a:hover { text-decoration: underline; }

/* =========================================================================
   Download / install page (download.html)
   ========================================================================= */
.section-alt { background: var(--surface-alt); }
.btn-lg { padding: 0.95rem 1.7rem; font-size: 1rem; }

/* ---- Hero ---- */
.dl-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.dl-hero h1 {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 560;
  letter-spacing: -0.01em; color: var(--ink); margin-top: 0.5rem;
}
.dl-lead { max-width: 620px; font-size: 1.08rem; color: var(--ink-soft); line-height: 1.6; margin-top: 1rem; }
.dl-cta { margin-top: 2rem; }
.dl-cta .btn { display: inline-flex; align-items: center; gap: 0.6rem; }
.dl-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-top: 0.9rem; letter-spacing: 0.01em; }
.dl-win {
  margin-top: 1.75rem; padding: 0.85rem 1.1rem; max-width: 620px;
  font-size: 0.9rem; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.dl-win b { color: var(--ink); }
.dl-win a { color: var(--teal-deep); font-weight: 600; }
.dl-win a:hover { text-decoration: underline; }

/* ---- Steps ---- */
.dl-steps { list-style: none; display: flex; flex-direction: column; gap: 1rem; max-width: 780px; }
.dl-step {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.4rem 1.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.dl-step-hi { border-color: var(--navy); box-shadow: var(--shadow-md); }
.dl-num {
  flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700;
  color: #fff; background: var(--navy);
}
.dl-step h3 { font-size: 1.05rem; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.dl-step h3 em { font-style: normal; color: var(--teal-deep); }
.dl-step p { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.6; margin-top: 0.4rem; }
.dl-step p b { color: var(--ink); font-weight: 650; }

/* ---- Inline details + code ---- */
.dl-details { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
.dl-details summary {
  cursor: pointer; list-style: none; font-size: 0.88rem; font-weight: 650; color: var(--teal-deep);
}
.dl-details summary::-webkit-details-marker { display: none; }
.dl-details summary::before { content: "＋ "; font-weight: 400; }
.dl-details[open] summary::before { content: "－ "; }
.dl-details summary:hover { text-decoration: underline; }
.dl-code {
  display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0;
  padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  background: var(--navy-ink); color: #e8edf6;
}
.dl-code code { font-family: var(--font-mono); font-size: 0.85rem; flex: 1 1 auto; overflow-x: auto; }
.dl-copy {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #cdd7ea;
  padding: 0.32rem 0.6rem; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.22); background: transparent;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.dl-copy:hover { background: rgba(255,255,255,0.12); color: #fff; }
.dl-fineprint { font-size: 0.83rem; color: var(--muted); line-height: 1.55; }
.dl-center { text-align: center; margin-top: 1.75rem; }

/* ---- "Why the warning" note ---- */
.dl-note {
  display: flex; gap: 1.1rem; align-items: flex-start; max-width: 780px; margin-inline: auto;
  padding: 1.5rem 1.6rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.dl-note-ic {
  flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 11px; background: rgba(20,150,172,0.1); color: var(--teal-deep);
}
.dl-note-ic svg { width: 20px; height: 20px; }
.dl-note h3 { font-size: 1.05rem; font-weight: 650; color: var(--ink); margin-bottom: 0.5rem; }
.dl-note p { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.6; }
.dl-note p + p { margin-top: 0.7rem; }
.dl-note b { color: var(--ink); font-weight: 650; }

/* ---- Permissions ---- */
.dl-perms .feature-card h3 { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.dl-opt {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-alt); border: 1px solid var(--border);
  padding: 0.15rem 0.45rem; border-radius: 999px;
}
.dl-perms .feature-card p b { color: var(--ink); font-weight: 650; }

.dl-foot-cta { text-align: center; margin-top: 2.5rem; }

/* FAQ answers on this page may contain inline code */
.faq-item p code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--surface-alt); border: 1px solid var(--border);
  padding: 0.1rem 0.35rem; border-radius: 5px; color: var(--ink);
}

@media (max-width: 560px) {
  .dl-step { padding: 1.15rem 1.1rem; gap: 0.85rem; }
  .dl-note { padding: 1.2rem 1.1rem; }
}

/* Download page — OS buttons (macOS active, Windows provisional until a build ships) */
.dl-buttons { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.dl-os { display: inline-flex; align-items: center; gap: 0.75rem; text-align: left; }
.dl-os > span { display: flex; flex-direction: column; line-height: 1.25; }
.dl-os small { font-size: 0.72rem; font-weight: 500; opacity: 0.75; letter-spacing: 0; }
.dl-os.is-soon { opacity: 0.72; }
.dl-os.is-soon:hover { opacity: 1; }
.dl-osnote {
  max-width: 620px; margin-top: 1.1rem; padding: 0.8rem 1.05rem;
  font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--teal); border-radius: var(--radius-sm);
}

/* =========================================================================
   404 page
   ========================================================================= */
.nf { padding-block: clamp(4rem, 10vw, 8rem); }
.nf-code {
  font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.18em; color: var(--teal-deep);
}
.nf h1 {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 560;
  letter-spacing: -0.01em; color: var(--ink); margin-top: 0.7rem;
}
.nf-lead { max-width: 560px; font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6; margin-top: 1rem; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.nf-links { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--border); max-width: 560px; }
.nf-links-title {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.nf-links ul { list-style: none; margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; }
.nf-links a { color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; }
.nf-links a:hover { color: var(--navy); text-decoration: underline; }
.nf-support { font-size: 0.88rem; color: var(--muted); margin-top: 1.5rem; }
.nf-support a { color: var(--teal-deep); font-weight: 600; }
.nf-support a:hover { text-decoration: underline; }