/* Self-hosted WiMouse webfonts (SIL Open Font License 1.1).
   Variable woff2, latin + latin-ext only. Replaces the render-blocking
   fonts.googleapis.com request: no third-party DNS/TLS on the critical path. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   WiMouse — Design System
   A single source of truth for tokens, primitives and components.
   Replaces the browser-compiled Tailwind CDN build and the duplicated
   `.glass` rules that previously lived in both HTML files.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Colour -------------------------------------------------------------
     One primary (blue), one accent (the lighter tint used for emphasis text),
     and a neutral gray ramp. Nothing else. Every pairing below meets WCAG AA
     against --bg (contrast noted inline). */

  --bg: #09090b;
  --bg-raised: #0f0f13;
  --surface: #141418;
  --surface-hover: #1a1a20;
  --surface-sunken: #0b0b0e;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --text: #fafafa; /* 18.9:1 */
  --text-muted: #a8a8b3; /* 8.4:1  — body copy */
  --text-subtle: #8a8a93; /* 5.9:1  — captions, footer */

  --primary: #2f62f0; /* 5.1:1 vs white — button fills */
  --primary-hover: #4c65fd; /* 4.6:1 vs white — lightens but still AA */
  --primary-active: #2452d6; /* 6.5:1 vs white */
  --accent: #9cb8ff; /* 9.6:1 vs --bg — emphasis text, icons */
  --primary-tint: rgba(76, 125, 255, 0.1);
  --primary-ring: rgba(76, 125, 255, 0.45);

  /* --- Spacing scale (4px base) ------------------------------------------- */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* --- Typography ---------------------------------------------------------
     Plus Jakarta Sans (headings) pairs a slightly geometric, higher-contrast
     voice against Inter's neutral, highly legible body text. */
  --font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.75rem, 2rem + 3.4vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.65rem + 1.6vw, 3rem);
  --fs-h3: clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-overline: 0.75rem;

  /* --- Radius -------------------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* --- Elevation ----------------------------------------------------------
     Soft, low-opacity and stacked — replaces the previous coloured glow
     shadows (0 0 15px rgba(59,130,246,.4)) which read as neon rather than
     as depth. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:
    0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg:
    0 18px 40px -14px rgba(0, 0, 0, 0.7), 0 4px 12px -4px rgba(0, 0, 0, 0.4);

  /* --- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 300ms;

  /* --- Icons --------------------------------------------------------------- */
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  /* --- Layout -------------------------------------------------------------- */
  --container: 68rem; /* 1088px */
  --container-narrow: 46rem; /* 736px */
  --nav-h: 4.5rem;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

/* Anchor targets clear the fixed nav — previously #faq and #how-it-works
   scrolled underneath it. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--space-6));
}

/* --- Typographic hierarchy ------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.028em;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}

h4 {
  font-size: var(--fs-h4);
  line-height: 1.4;
  letter-spacing: -0.012em;
}

p {
  text-wrap: pretty;
}

strong {
  color: var(--text);
  font-weight: 600;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--text-muted);
}

.caption {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-subtle);
}

.text-accent {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   3. Accessibility primitives
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-24);
}

.section--tight {
  padding-block: var(--space-16);
}

/* A single hairline divider style, replacing the mix of border-t utilities. */
.section--divided {
  border-top: 1px solid var(--line);
}

.section-head {
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-16);
  text-align: center;
}

.section-head p {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   5. Ambient background
   -------------------------------------------------------------------------- */

.grid-backdrop {
  position: fixed;
  inset: 0;
  z-index: -20;
  pointer-events: none;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Fades the grid out toward the bottom so it never competes with content. */
  -webkit-mask-image: radial-gradient(
    ellipse 100% 60% at 50% 0%,
    #000 30%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 100% 60% at 50% 0%,
    #000 30%,
    transparent 100%
  );
}

/* One restrained ambient wash. The previous design stacked a blue and a
   purple 800px blur — this keeps a single, dimmer light source. */
.glow {
  position: absolute;
  z-index: -10;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(47, 98, 240, 0.16);
  filter: blur(120px);
}

.glow--hero {
  top: -10%;
  left: 50%;
  width: min(52rem, 110vw);
  height: 28rem;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   6. Surfaces
   -------------------------------------------------------------------------- */

.surface {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn--primary {
  background-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background-color: var(--primary-hover);
  box-shadow: var(--shadow-md);
}

.btn--primary:active {
  background-color: var(--primary-active);
}

.btn--secondary {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.btn--secondary:active {
  background-color: rgba(255, 255, 255, 0.14);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-body);
}

/* Full-width buttons must be allowed to wrap. Inheriting the default
   white-space:nowrap forced the grid track wider than the viewport at 320px,
   which .cta's overflow:hidden then clipped. */
.btn--block {
  width: 100%;
  min-width: 0;
  white-space: normal;
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. Badge
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--accent);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--accent);
  flex: none;
}

/* --------------------------------------------------------------------------
   9. Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background-color: rgba(9, 9, 11, 0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

/* Border only appears once the page is scrolled, so the nav sits flush at rest. */
.nav.is-scrolled {
  border-bottom-color: var(--line);
  background-color: rgba(9, 9, 11, 0.85);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--nav-h);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: opacity var(--dur) var(--ease);
}

.nav__brand:hover {
  opacity: 0.75;
}

.nav__logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  object-fit: cover;
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.nav__link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.nav__link:hover {
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.05);
}

.nav__link[aria-current="page"] {
  color: var(--text);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- Mobile disclosure ----------------------------------------------------
   Previously every nav link was display:none below md, leaving phone users
   with no way to reach How it Works / FAQ / Privacy. */

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.nav__toggle:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--line-strong);
}

.nav__toggle-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-icon--open,
.nav__toggle[aria-expanded="false"] .nav__toggle-icon--close {
  display: none;
}

.nav__panel {
  display: none;
  padding: var(--space-2) 0 var(--space-6);
  border-top: 1px solid var(--line);
}

.nav__panel.is-open {
  display: block;
}

.nav__panel .nav__link {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-size: var(--fs-body);
}

@media (min-width: 48rem) {
  .nav__links {
    display: flex;
  }

  .nav__toggle,
  .nav__panel,
  .nav__panel.is-open {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--space-24));
  padding-bottom: var(--space-24);
  text-align: center;
}

.hero__title {
  max-width: 20ch;
  margin-inline: auto;
  margin-top: var(--space-6);
}

.hero__lead {
  max-width: 40rem;
  margin-inline: auto;
  margin-top: var(--space-6);
}

@media (min-width: 64rem) {
  .hero {
    padding-top: calc(var(--nav-h) + var(--space-32));
  }
}

/* --------------------------------------------------------------------------
   11. Download grid
   -------------------------------------------------------------------------- */

.download-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-16);
  text-align: left;
}

.download-card {
  display: flex;
  /* Top-aligned so labels share a baseline across the row even when a title
     wraps to two lines; centring made each card float independently. */
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.download-card:hover {
  background-color: var(--surface-hover);
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.download-card:active {
  transform: translateY(0);
}

.download-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--text);
  transition: background-color var(--dur) var(--ease);
}

.download-card:hover .download-card__icon {
  background-color: var(--primary-tint);
}

.download-card__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.download-card__body {
  display: block;
  min-width: 0;
}

.download-card__label {
  display: block;
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.download-card__title {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text);
}

.download-card__meta {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--text-subtle);
}

/* Aligns 5 cards to a 6-column grid so the final row centres cleanly
   instead of hanging left as it did with flex-wrap. */
@media (min-width: 40rem) {
  .download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .download-grid > :nth-child(5) {
    grid-column: span 2;
  }
}

@media (min-width: 64rem) {
  .download-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .download-grid > * {
    grid-column: span 2;
  }

  .download-grid > :nth-child(4) {
    grid-column: 2 / span 2;
  }

  .download-grid > :nth-child(5) {
    grid-column: 4 / span 2;
  }
}

/* --------------------------------------------------------------------------
   12. Feature cards
   -------------------------------------------------------------------------- */

/* Explicitly 1-up or 3-up. auto-fit orphaned the third card into its own row
   at tablet widths. */
.feature-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feature-card {
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.feature-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 64rem) {
  .feature-card {
    padding: var(--space-8);
  }
}

.feature-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  background-color: var(--primary-tint);
  border: 1px solid rgba(76, 125, 255, 0.2);
  color: var(--accent);
}

.feature-card__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.feature-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-3);
}

.feature-card p {
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   13. Steps / timeline
   -------------------------------------------------------------------------- */

.steps {
  position: relative;
  display: grid;
  gap: var(--space-8);
  padding-left: var(--space-8);
  border-left: 1px solid var(--line);
}

.step {
  position: relative;
}

.step__marker {
  position: absolute;
  top: var(--space-6);
  left: calc(-1 * var(--space-8) - 1rem - 1px);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--bg-raised);
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: 700;
}

.step--final .step__marker {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.step__marker svg {
  width: 0.875rem;
  height: 0.875rem;
}

.step__body {
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.step--final .step__body {
  border-color: rgba(76, 125, 255, 0.35);
  background-color: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.step__body h3 {
  margin-bottom: var(--space-3);
}

.step__list {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.step__list li,
.check-list li {
  position: relative;
  padding-left: var(--space-8);
  font-size: var(--fs-sm);
}

/* Tinted disc with the check drawn by an SVG mask, so the glyph always
   inherits --accent and stays centred at any font size. */
.step__list li::before,
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: var(--primary-tint);
}

.step__list li::after,
.check-list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--accent);
  -webkit-mask: var(--check-icon) center / 0.6875rem no-repeat;
  mask: var(--check-icon) center / 0.6875rem no-repeat;
}

@media (min-width: 48rem) {
  .steps {
    padding-left: var(--space-12);
  }

  .step__marker {
    left: calc(-1 * var(--space-12) - 1rem - 1px);
  }

  .step__body {
    padding: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   14. Split feature section
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--space-16);
  align-items: center;
}

.split h2 {
  margin-bottom: var(--space-6);
}

.check-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
  }
}

/* --- Decorative device mock ---------------------------------------------- */

.device-mock {
  position: relative;
  padding: var(--space-6);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--primary) 10%, var(--surface)),
    var(--surface-sunken)
  );
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Trackpad surface — fills the panel so the mock reads as a device rather
   than a few bars floating in empty space. */
.device-mock__pad {
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
}

.device-mock__lines {
  display: grid;
  gap: var(--space-3);
}

.device-mock__line {
  height: 0.625rem;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.09);
}

.device-mock__line:nth-child(1) {
  width: 72%;
}

.device-mock__line:nth-child(2) {
  width: 100%;
}

.device-mock__line:nth-child(3) {
  width: 84%;
}

.device-mock__keys {
  display: flex;
  gap: var(--space-2);
}

.device-mock__key {
  flex: 1;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}

.device-mock__key:nth-child(2) {
  flex: 2;
}

.device-mock__key--accent {
  background-color: var(--primary-tint);
  border-color: rgba(76, 125, 255, 0.35);
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq-list {
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.faq-item:hover,
.faq-item[open] {
  border-color: var(--line-strong);
}

.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
}

.faq-item__summary::-webkit-details-marker {
  display: none;
}

.faq-item__summary:focus-visible {
  outline-offset: -2px;
}

.faq-item__chevron {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--text-subtle);
  transition:
    transform var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.faq-item[open] .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-item__content {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--fs-sm);
}

.faq-item__content p + p {
  margin-top: var(--space-4);
}

.faq-item__content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* "On Mac" / "On Windows" sub-labels inside a multi-platform answer. */
.faq-platform {
  margin-top: var(--space-6) !important;
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.faq-platform + p {
  margin-top: var(--space-2) !important;
}

/* --- Answer screenshots -------------------------------------------------- */

.faq-media {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

/* If every figure was removed for a missing asset, drop the leftover margin. */
.faq-media:empty {
  display: none;
}

.faq-figure {
  margin: 0;
  min-width: 0;
}

/* <picture> is inline by default, which would leave a descender gap under the
   screenshot and break the figure's width calculation. */
.faq-figure picture {
  display: block;
}

.faq-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background-color: var(--surface-sunken);
  box-shadow: var(--shadow-md);
}

.faq-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--text-subtle);
}

@media (min-width: 56rem) {
  .faq-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   16. Call to action
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 9%, var(--surface)),
    var(--surface)
  );
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.cta p {
  max-width: 34rem;
  margin-inline: auto;
  margin-top: var(--space-4);
}

.cta__actions {
  display: grid;
  gap: var(--space-3);
  max-width: 34rem;
  margin: var(--space-12) auto 0;
}

.cta__actions > * {
  min-width: 0;
}

@media (min-width: 40rem) {
  .cta {
    padding: var(--space-24) var(--space-16);
  }

  .cta__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta__actions > :last-child {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   17. Prose (privacy policy)
   -------------------------------------------------------------------------- */

.prose {
  display: grid;
  gap: var(--space-12);
}

/* Grid items default to min-width:auto, so a long unbreakable string (the
   contact email) would otherwise stretch every section past the viewport. */
.prose > * {
  min-width: 0;
}

.prose h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-4);
}

.prose p + p,
.prose ul + p {
  margin-top: var(--space-4);
}

.prose ul {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-left: var(--space-6);
  list-style: disc;
}

.prose li::marker {
  color: var(--text-subtle);
}

/* Content page shell — offsets the fixed nav without a hero. */
.page-main {
  padding-top: calc(var(--nav-h) + var(--space-16));
  padding-bottom: var(--space-24);
}

.policy-card {
  padding: var(--space-8) var(--space-6);
}

@media (min-width: 48rem) {
  .policy-card {
    padding: var(--space-12) var(--space-12);
  }
}

.page-header {
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-12);
  border-bottom: 1px solid var(--line);
}

.page-header p {
  margin-top: var(--space-3);
}

.contact-card {
  display: flex;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-weight: 600;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.contact-card:hover {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: var(--line-strong);
}

.contact-card svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

/* --------------------------------------------------------------------------
   18. Form controls
   -------------------------------------------------------------------------- */
/* No form exists on the site today. These are defined so that any future
   input/select/textarea inherits the system rather than the browser default. */

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-subtle);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary-hover);
  box-shadow: 0 0 0 3px var(--primary-ring);
  background-color: var(--surface);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.select {
  appearance: none;
  padding-right: var(--space-12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 1rem;
}

.textarea {
  min-height: 7rem;
  resize: vertical;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.footer {
  margin-top: auto;
  padding-block: var(--space-12);
  border-top: 1px solid var(--line);
  background-color: rgba(0, 0, 0, 0.25);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-subtle);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

.footer__links a {
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}

.footer__links a:hover {
  color: var(--text);
}

@media (min-width: 48rem) {
  .footer__inner {
    flex-direction: row;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   20. Scroll reveal
   -------------------------------------------------------------------------- */
/* Scoped to .js so content stays visible when JavaScript is unavailable. */

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   21. Page shell variant

   Pages without a hero (e.g. the privacy policy) pin the footer to the bottom
   of the viewport when the content is shorter than one screen. Previously an
   inline <style> block in privacy-policy.html; moved here so the Content
   Security Policy can forbid inline styles outright.
   -------------------------------------------------------------------------- */

.body--stacked {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   22. Touch target sizing

   Lighthouse's mobile "tap targets are sized appropriately" audit wants 48x48
   CSS px; WCAG 2.5.5 asks for 44x44. The compact desktop sizing is kept — the
   floor only applies on coarse pointers, where mis-taps actually happen.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }

  .btn--lg {
    min-height: 48px;
  }

  .nav__link,
  .footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .faq-item__summary {
    min-height: 48px;
  }

  /* Defined in §24; kept with the other touch-target floors. */
  .lightbox__close {
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   23. FAQ screenshot layout stability

   No aspect-ratio is declared here on purpose. Each <img> carries its true
   intrinsic width/height, and combined with the `width:100%; height:auto`
   rule above the browser derives the correct ratio and reserves the box
   before the bytes arrive — so a late-loading screenshot cannot push the rest
   of the answer down (Cumulative Layout Shift) and nothing gets cropped.
   Forcing a fixed ratio here would cut roughly a third off these ~2.31:1
   captures, hiding the very UI they are meant to demonstrate.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   24. Screenshot zoom + lightbox

   The FAQ screenshots render around 300-500px wide inline, which is too small
   to read the UI they are demonstrating. Each is wrapped in a link to the
   full-size file — usable on its own with JavaScript disabled — which site.js
   upgrades into the modal viewer below.
   -------------------------------------------------------------------------- */

.faq-figure__zoom {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  cursor: zoom-in;
}

/* The magnifier badge sits over the corner of the shot. It is decorative: the
   link already carries an aria-label naming the action. */
.faq-figure__zoom-hint {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background-color: rgba(9, 9, 11, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.faq-figure__zoom-hint svg {
  width: 1rem;
  height: 1rem;
}

.faq-figure__zoom:hover .faq-figure__zoom-hint,
.faq-figure__zoom:focus-visible .faq-figure__zoom-hint {
  opacity: 1;
  transform: none;
}

/* Coarse pointers have no hover state to reveal the affordance, so show it. */
@media (pointer: coarse) {
  .faq-figure__zoom-hint {
    opacity: 1;
    transform: none;
  }
}

.faq-figure__zoom:hover img {
  border-color: var(--line-strong);
}

/* --- The dialog --------------------------------------------------------- */

.lightbox {
  width: min(96vw, 1400px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

/* A native <dialog> is display:none until opened; restore the layout we want
   only in the open state so the closed dialog never affects the page. */
.lightbox[open] {
  display: block;
}

.lightbox::backdrop {
  background-color: rgba(4, 4, 6, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox__inner {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
}

.lightbox__figure {
  margin: 0;
}

.lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  background-color: var(--surface-sunken);
}

.lightbox__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--text-subtle);
  text-align: center;
}

/* Deliberately inside the frame, overlaying the image corner. Sitting it
   outside the frame clipped it off-screen whenever a tall screenshot pushed
   the dialog to the full 94vh, leaving the mouse with no way to dismiss. */
.lightbox__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.lightbox__close:hover {
  background-color: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.22);
}

.lightbox__close svg {
  width: 1.125rem;
  height: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
  .faq-figure__zoom-hint {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   25. Video facade

   A real YouTube <iframe> pulls well over a megabyte of third-party script on
   page load, which would undo the work done to keep the critical path
   first-party. Instead a self-hosted poster stands in for the player and
   site.js swaps in the iframe on click, so YouTube is contacted only if the
   visitor chooses to watch.
   -------------------------------------------------------------------------- */

.video {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background-color: var(--surface-sunken);
  box-shadow: var(--shadow-lg);
  /* Reserved before the poster loads, and the box the iframe inherits, so
     neither swap can shift the page. */
  aspect-ratio: 16 / 9;
}

.video__facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.video__facade picture,
.video__facade img {
  width: 100%;
  height: 100%;
}

.video__facade img {
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.video__facade:hover img {
  transform: scale(1.02);
}

/* Darkens the poster slightly so the play button keeps contrast over any
   frame content. */
.video__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(9, 9, 11, 0.1),
    rgba(9, 9, 11, 0.45)
  );
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background-color: rgba(9, 9, 11, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  transition:
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.video__play svg {
  width: 1.75rem;
  height: 1.75rem;
  /* Optically centres the triangle inside the circle. */
  margin-left: 0.2rem;
}

.video__facade:hover .video__play,
.video__facade:focus-visible .video__play {
  background-color: var(--primary);
  border-color: var(--primary);
  transform: translate(-50%, -50%) scale(1.06);
}

/* The injected player fills the same reserved box. */
.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .video__facade img,
  .video__play {
    transition: none;
  }

  .video__facade:hover img {
    transform: none;
  }
}