/* =============================================================================
   Digital Memory — marketing site stylesheet
   =============================================================================

   Plain CSS. No framework, no build step, no preprocessor, no @import, and no
   request to any third-party host — no web fonts, no icon CDN, no analytics.
   The site holds itself to the same standard as the extension it sells: a page
   that advertises "your data never leaves your computer" while calling out to
   three CDNs would refute itself in the network tab.

   Tokens are lifted from src/styles/tokens.css so the site and the product are
   the same object. Two deliberate deviations from the app:

     1. Body type is 1.0625rem/1.7, not the UI's 0.875rem. Marketing copy is
        read at arm's length and at length; an interface scale becomes tiring.
     2. The violet brand gradient from the extension icon
        (scripts/generate-icons.mjs) is used for emphasis. The app UI is blue
        only, but the icon is violet→magenta→blue, and on a landing page the
        mark is the thing people recognise.

   Contents
     01  Tokens
     02  Reset and base
     03  Layout primitives
     04  Buttons
     05  Header and navigation
     06  Hero
     07  Proof strip
     08  Feature grid
     09  Screenshot gallery
     10  Steps
     11  Privacy
     12  Tables
     13  Shortcuts
     14  FAQ
     15  Closing CTA
     16  Footer
     17  Policy page
     18  Motion
     19  Print
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01  Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --canvas: #070d16;
  --canvas-accent: #0b1420;
  --surface: #101b2a;
  --surface-raised: #172436;
  --surface-sunken: #0b1420;
  --glass: rgb(16 27 42 / 0.72);

  /* Lines */
  --border: rgb(110 170 245 / 0.16);
  --border-strong: rgb(110 170 245 / 0.32);

  /* Type */
  --text: #eef4fc;
  --text-muted: #a9bcd2;
  --text-subtle: #7f94ac;

  /* Accents */
  --accent: #2489f5;
  --accent-hover: #106ce0;
  --accent-soft: rgb(36 137 245 / 0.16);
  --success: #34d399;
  --warning: #f5b544;
  --violet: #8253ff;
  --magenta: #c15dff;
  --sky: #5eb8ff;

  /* Depth — cool-tinted, because a neutral shadow on blue-grey reads as dirt */
  --shadow-sm: 0 1px 2px rgb(2 7 14 / 0.6);
  --shadow-md: 0 12px 32px -12px rgb(2 7 14 / 0.8);
  --shadow-lg: 0 32px 80px -28px rgb(2 7 14 / 0.9);
  --shadow-glow: 0 0 0 1px rgb(36 137 245 / 0.22), 0 16px 44px -18px rgb(36 137 245 / 0.42);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--violet) 0%, var(--magenta) 55%, var(--sky) 100%);
  --gradient-surface: linear-gradient(155deg, rgb(36 137 245 / 0.09) 0%, transparent 60%);
  --edge: linear-gradient(
    90deg,
    transparent,
    rgb(77 166 255 / 0.55) 22%,
    rgb(77 166 255 / 0.55) 78%,
    transparent
  );

  /* Fonts — the OS UI stack. Nothing to download, nothing to block render. */
  --font-display: "Segoe UI Variable Display", ui-sans-serif, -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Segoe UI Variable Text", ui-sans-serif, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.42, 0.5, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* Metrics */
  --measure: 40rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --shell: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-gap: clamp(3.5rem, 9vw, 7rem);
  --header-h: 4rem;
}

/* -----------------------------------------------------------------------------
   02  Reset and base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header height plus air, so anchors never land under the bar. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-muted);
  background-color: var(--canvas);
  /* Wide, faint washes: depth without a single saturated pixel. */
  background-image:
    radial-gradient(120rem 46rem at 12% -12%, rgb(130 83 255 / 0.14), transparent 60%),
    radial-gradient(96rem 42rem at 92% 2%, rgb(36 137 245 / 0.16), transparent 62%),
    radial-gradient(80rem 40rem at 50% 100%, rgb(193 93 255 / 0.06), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* One long token — a URL, a chrome:// path — must never widen the document. */
  overflow-wrap: break-word;
}

/* A phone in portrait cannot afford a fixed background repaint on every scroll. */
@media (max-width: 48em) {
  body {
    background-attachment: scroll;
  }
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 6.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 650;
}

h2 {
  font-size: clamp(1.75rem, 4.4vw, 2.75rem);
  letter-spacing: -0.03em;
  font-weight: 640;
}

h3 {
  font-size: 1.125rem;
  font-weight: 620;
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1rem;
  max-width: var(--measure);
}

p:last-child {
  margin-bottom: 0;
}

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

a {
  color: var(--accent);
  text-decoration-color: rgb(36 137 245 / 0.4);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

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

code {
  padding: 0.125em 0.375em;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: #b6dcff;
}

hr {
  height: 1px;
  border: 0;
  margin: var(--section-gap) 0;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

/* Screen-reader-only, but still focusable and still read aloud. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   03  Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-gap);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* Alternating band, to give a long page a rhythm without hard edges. */
.section--band {
  background:
    linear-gradient(180deg, transparent, rgb(11 20 32 / 0.72) 12%, rgb(11 20 32 / 0.72) 88%, transparent);
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.section__head p {
  font-size: 1.125rem;
  max-width: 44rem;
  margin-bottom: 0;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head--center p {
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b6dcff;
  max-width: none;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999px;
  background: var(--success);
}

.eyebrow--plain::before {
  display: none;
}

.lede {
  font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
  line-height: 1.6;
  max-width: 38rem;
}

/* The shared panel: bordered glass with a lit top edge. */
.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-md);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--edge);
}

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for the rare engine that ignores background-clip: text. */
  -webkit-text-fill-color: transparent;
}

/* -----------------------------------------------------------------------------
   04  Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 2.75rem min-height: a tap target, everywhere, without a media query. */
  min-height: 2.875rem;
  padding: 0.6875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 620;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 160ms var(--ease-out-soft),
    background-color 160ms var(--ease-out-soft),
    border-color 160ms var(--ease-out-soft),
    box-shadow 160ms var(--ease-out-soft);
}

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

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

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--ghost {
  border-color: var(--border-strong);
  background: rgb(16 27 42 / 0.6);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--accent);
  background: var(--surface-raised);
}

.btn--lg {
  min-height: 3.25rem;
  padding: 0.875rem 1.75rem;
  font-size: 1.0625rem;
  border-radius: 0.875rem;
}

.btn svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 0;
}

/* On the narrowest screens a wrapped row of half-width buttons looks accidental;
   full-width stacked reads as deliberate. */
@media (max-width: 26em) {
  .btn-row .btn {
    width: 100%;
  }
}

.btn-note {
  margin: 0.875rem 0 0;
  font-size: 0.875rem;
  color: var(--text-subtle);
}

/* -----------------------------------------------------------------------------
   05  Header and navigation
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgb(7 13 22 / 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: border-color 200ms var(--ease-out-soft), background-color 200ms var(--ease-out-soft);
}

/* Set by site.js once the page has scrolled: the bar earns its line only when
   there is content behind it. */
.header[data-scrolled="true"] {
  border-bottom-color: var(--border);
  background: rgb(7 13 22 / 0.9);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
}

.brand svg,
.brand img {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/*
 * The panel ships with the `hidden` attribute so the mobile overlay cannot flash
 * open in the moment before the deferred script runs. Wherever the overlay is
 * not in use — desktop, or no JavaScript at all — these rules put it back, so
 * the navigation never depends on script to exist.
 */
@media (min-width: 56.0625em) {
  .nav[hidden] {
    display: flex;
  }
}

/*
 * The install button is in the markup twice: once inside the panel, for mobile,
 * and once beside it, for desktop. Each breakpoint shows exactly one — otherwise
 * the header carries two identical calls to action.
 */
.nav > .btn {
  display: none;
}

.nav a {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 520;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 140ms var(--ease-out-soft), background-color 140ms var(--ease-out-soft);
}

.nav a:hover {
  color: var(--text);
  background: rgb(36 137 245 / 0.12);
}

.header .btn {
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

/* The disclosure button is hidden until the links no longer fit. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0.625rem;
  background: rgb(16 27 42 / 0.6);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

@media (max-width: 56em) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Off-canvas panel rather than a squeezed row: nine links at 15px do not fit
     a 360px bar, and shrinking them below 15px fails the tap-target rule. */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 1rem var(--gutter) 1.5rem;
    border-bottom: 1px solid var(--border);
    background: rgb(7 13 22 / 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg);
  }

  .nav[hidden] {
    display: none;
  }

  .nav a {
    min-height: 2.875rem;
    display: flex;
    align-items: center;
    padding-inline: 0.75rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  .nav > .btn {
    display: inline-flex;
    margin-top: 0.875rem;
    min-height: 2.875rem;
  }

  /* The header CTA is duplicated inside the panel, so it goes here. */
  .header > .shell > .btn {
    display: none;
  }

  /*
   * No-JS fallback. The off-canvas panel is opened by script, so without script
   * it becomes a plain stacked list inside the header — the page grows a taller
   * bar instead of losing its navigation. The toggle, which would do nothing,
   * is removed.
   */
  .no-js .nav {
    position: static;
    inset: auto;
    max-height: none;
    padding: 0.5rem 0 0.75rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: 0;
  }

  .no-js .header__inner {
    flex-wrap: wrap;
  }

  .no-js .nav {
    flex-basis: 100%;
  }

  .no-js .nav-toggle {
    display: none;
  }

  /* Without script nothing ever removes the attribute, so the panel is shown
     as a plain stacked list instead. */
  .no-js .nav[hidden] {
    display: flex;
  }
}

/* -----------------------------------------------------------------------------
   06  Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 62em) {
  .hero__grid {
    /* 5:6 — the copy column stays inside a comfortable measure while the
       screenshot gets the room it needs to stay legible. */
    grid-template-columns: 5fr 6fr;
  }
}

.hero h1 {
  margin-bottom: 1.25rem;
}

.hero .lede {
  margin-bottom: 0;
}

.hero__list {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  max-width: 34rem;
}

.hero__list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1rem;
}

.hero__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5625rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.hero__list li::after {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 0.875rem;
  width: 0.375rem;
  height: 0.1875rem;
  border-left: 1.5px solid var(--success);
  border-bottom: 1.5px solid var(--success);
  transform: rotate(-45deg);
}

/* The screenshot frame — angled glass, straightened on small screens where a
   tilt costs legibility it cannot repay. */
.hero__shot {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 0.5rem;
  box-shadow: var(--shadow-lg);
}

.hero__shot img {
  border-radius: calc(var(--radius-lg) - 0.5rem);
}

.hero__shot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgb(130 83 255 / 0.5), transparent 45%, rgb(36 137 245 / 0.45));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   07  Proof strip
   -------------------------------------------------------------------------- */
.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52em) {
  .proof {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.proof li {
  padding: clamp(0.875rem, 3vw, 1.25rem);
}

.proof dt {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 5.5vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 650;
  color: var(--text);
}

.proof dd {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-subtle);
}

/* -----------------------------------------------------------------------------
   08  Feature grid
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  padding: clamp(1.25rem, 3vw, 1.625rem);
}

.card h3 {
  margin-bottom: 0.375rem;
}

.card p {
  margin: 0;
  font-size: 0.9875rem;
  max-width: none;
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  background: linear-gradient(150deg, rgb(36 137 245 / 0.22), rgb(130 83 255 / 0.12));
  color: #bcdcff;
}

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

.card--wide {
  grid-column: 1 / -1;
}

/* -----------------------------------------------------------------------------
   09  Screenshot gallery
   -------------------------------------------------------------------------- */
.shots {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 60em) {
  .shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shots figure:first-child {
    grid-column: 1 / -1;
  }
}

.shots figure {
  margin: 0;
}

.shots img {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  box-shadow: var(--shadow-md);
}

.shots figcaption {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: var(--text-subtle);
}

.shots figcaption b {
  display: block;
  font-size: 1rem;
  font-weight: 620;
  color: var(--text);
}

/* -----------------------------------------------------------------------------
   10  Steps
   -------------------------------------------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  padding: clamp(1.25rem, 3vw, 1.625rem);
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.875rem;
  border-radius: 999px;
  background: var(--gradient-brand);
  font-family: var(--font-display);
  font-weight: 650;
  color: #fff;
}

.steps h3 {
  margin-bottom: 0.375rem;
}

.steps p {
  margin: 0;
  font-size: 0.9875rem;
  max-width: none;
}

/* -----------------------------------------------------------------------------
   11  Privacy
   -------------------------------------------------------------------------- */
.verdict {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.verdict__kicker {
  margin: 0 0 0.375rem;
  font-size: 0.75rem
;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.verdict__answer {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 10vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 650;
  color: var(--text);
}

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.625rem;
}

.checklist li {
  position: relative;
  padding-left: 1.875rem;
  font-size: 1rem;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 999px;
  background: rgb(52 211 153 / 0.16);
  box-shadow: inset 0 0 0 1px rgb(52 211 153 / 0.4);
}

.checklist li::after {
  content: "";
  position: absolute;
  left: 0.34375rem;
  top: 0.875rem;
  width: 0.4375rem;
  height: 0.21875rem;
  border-left: 1.5px solid var(--success);
  border-bottom: 1.5px solid var(--success);
  transform: rotate(-45deg);
}

.checklist--cross li::before {
  background: rgb(248 113 113 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.35);
}

.checklist--cross li::after {
  left: 0.4375rem;
  top: 0.8125rem;
  width: 0.3125rem;
  height: 0.3125rem;
  border: 0;
  border-top: 1.5px solid #f87171;
  border-right: 1.5px solid #f87171;
  transform: rotate(45deg);
}

.note {
  margin: 1.5rem 0 0;
  padding: clamp(1rem, 3vw, 1.25rem);
  border: 1px solid var(--border);
  border-left: 2px solid var(--warning);
  border-radius: 0.75rem;
  background: var(--surface-sunken);
}

.note__title {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warning);
}

.note p {
  margin: 0;
  max-width: none;
  font-size: 0.9875rem;
}

/* -----------------------------------------------------------------------------
   12  Tables
   -------------------------------------------------------------------------- */
/*
 * A table cannot be made to reflow honestly at 320px, so it scrolls inside its
 * own box. tabindex="0" in the markup makes that scroll reachable by keyboard.
 */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-md);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

caption {
  padding: 0.875rem 1.125rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--text-subtle);
  border-bottom: 1px solid var(--border);
}

th,
td {
  padding: 0.8125rem 1.125rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

thead th {
  position: sticky;
  top: 0;
  background: var(--surface-raised);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody th {
  font-weight: 620;
  color: var(--text);
  white-space: nowrap;
}

td code {
  white-space: nowrap;
}

.yes {
  color: var(--success);
  font-weight: 620;
}

.no {
  color: #f87171;
  font-weight: 620;
}

/* -----------------------------------------------------------------------------
   13  Shortcuts
   -------------------------------------------------------------------------- */
.shortcuts {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.shortcuts li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: rgb(11 20 32 / 0.6);
  font-size: 0.9375rem;
}

.keys {
  display: inline-flex;
  flex: none;
  gap: 0.25rem;
}

kbd {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.1875rem 0.4375rem;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 0.375rem;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 620;
  text-align: center;
  color: var(--text);
}

/* -----------------------------------------------------------------------------
   14  FAQ
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 0.625rem;
  max-width: 52rem;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image: var(--gradient-surface);
  overflow: hidden;
}

.faq details[open] {
  border-color: var(--border-strong);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.875rem 1.25rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -0.015em;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

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

/* The marker is drawn, not typed: a glyph would inherit the font's own metrics
   and never sit true against a two-line question. */
.faq summary::after {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-left: auto;
  border-right: 2px solid var(--text-subtle);
  border-bottom: 2px solid var(--text-subtle);
  transform: rotate(45deg) translateY(-0.125rem);
  transition: transform 200ms var(--ease-out-soft);
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-0.125rem);
}

.faq summary:hover {
  background: rgb(36 137 245 / 0.08);
}

.faq__body {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.faq__body p {
  font-size: 1rem;
  max-width: 44rem;
}

/* -----------------------------------------------------------------------------
   15  Closing CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 4rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(48rem 24rem at 20% 0%, rgb(130 83 255 / 0.26), transparent 62%),
    radial-gradient(40rem 22rem at 88% 100%, rgb(36 137 245 / 0.26), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.cta h2 {
  margin-bottom: 0.75rem;
}

.cta p {
  margin-inline: auto;
}

.cta .btn-row {
  justify-content: center;
}

.cta .btn-note {
  text-align: center;
}

/* -----------------------------------------------------------------------------
   16  Footer
   -------------------------------------------------------------------------- */
.footer {
  margin-top: var(--section-gap);
  padding-block: clamp(2.5rem, 6vw, 3.5rem) 2rem;
  border-top: 1px solid var(--border);
  background: rgb(7 13 22 / 0.6);
  font-size: 0.9375rem;
}

.footer__grid {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  margin-bottom: 2.5rem;
}

@media (min-width: 48em) {
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

.footer h2 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.875rem;
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.125rem;
}

.footer ul a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--text-muted);
  text-decoration: none;
}

.footer ul a:hover {
  color: var(--accent);
}

.footer__blurb {
  max-width: 26rem;
  font-size: 0.9375rem;
  color: var(--text-subtle);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-subtle);
}

.footer__bottom p {
  margin: 0;
  max-width: none;
}

/* -----------------------------------------------------------------------------
   17  Policy page
   -----------------------------------------------------------------------------
   Used only by privacy-policy.html, but kept here rather than in a <style> block
   so both pages share one cached stylesheet and one set of tokens.
   -------------------------------------------------------------------------- */
.policy {
  max-width: 58rem;
}

.policy__stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-subtle);
}

.policy__stamp b {
  font-weight: 620;
  color: var(--text-muted);
}

.toc {
  margin: 0 0 clamp(2.25rem, 5vw, 3.25rem);
  padding: clamp(1.125rem, 3.5vw, 1.375rem) clamp(1.125rem, 3.5vw, 1.5rem)
    clamp(1.25rem, 3.5vw, 1.5rem);
}

.toc h2 {
  margin: 0 0 0.875rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.toc ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.125rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
}

/* Flex with a min-height, not padding: thirteen links that each need a 44px tap
   area, guaranteed regardless of how the label wraps. */
.toc a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.3125rem 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 0.375rem;
  transition: color 140ms var(--ease-out-soft);
}

.toc a::before {
  content: counter(toc) ".";
  flex: none;
  width: 1.625rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
}

.toc a:hover,
.toc a:focus-visible {
  color: var(--accent);
}

/* A pointer does not need 44px, so the list tightens up on desktop. */
@media (hover: hover) and (pointer: fine) {
  .toc a {
    min-height: 0;
  }
}

.policy__body {
  counter-reset: section;
}

.policy__body section {
  counter-increment: section;
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.policy__body h2 {
  font-size: clamp(1.375rem, 3.2vw, 1.625rem);
  line-height: 1.25;
  margin-bottom: 0.875rem;
}

/* The numeral is structure, so it takes structural blue, not the full accent. */
.policy__body h2::before {
  content: counter(section) ".";
  display: inline-block;
  min-width: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 620;
  letter-spacing: 0;
  vertical-align: 0.28em;
  color: rgb(77 166 255 / 0.72);
}

/* Quiet rule under each heading — constantly present, easy to ignore. */
.policy__rule {
  height: 1px;
  margin: 0 0 1.125rem;
  background: linear-gradient(90deg, var(--border-strong), var(--border) 40%, transparent);
}

.policy__body ul {
  max-width: var(--measure);
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.policy__body ul li {
  position: relative;
  padding-left: 1.375rem;
  margin-bottom: 0.5rem;
}

.policy__body ul li::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.6875rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: rgb(77 166 255 / 0.6);
}

.policy__body ul:last-child,
.policy__body p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   18  Motion — the hero only, and once.
   -----------------------------------------------------------------------------
   Nothing loops, drifts, pulses or animates on scroll. Two reasons: a page that
   fidgets while being read is tiring, and an entrance animation below the fold
   plays to an empty viewport — cost without effect. On a phone that is almost
   the whole document, so the whole document is exempt.
   -------------------------------------------------------------------------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.875rem) scale(0.99);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.rise {
  animation: rise 460ms var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

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

  .rise {
    animation: fade-in 1ms both;
  }

  .btn,
  .faq summary::after,
  .nav a,
  .header {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   19  Print — the privacy policy is the page people actually print.
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #111;
    font-size: 11pt;
  }

  .header,
  .nav,
  .nav-toggle,
  .btn,
  .cta,
  .shots {
    display: none !important;
  }

  .panel,
  .verdict,
  .table-scroll,
  .faq details {
    background: #fff !important;
    border-color: #ccc;
    box-shadow: none;
  }

  h1,
  h2,
  h3,
  strong,
  .verdict__answer,
  .proof dt {
    color: #000;
  }

  .gradient-text {
    -webkit-text-fill-color: #000;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .rise {
    animation: none;
  }

  .faq__body {
    display: block !important;
  }
}