/* ===========================================================================
   Pixelsitter — pixelsitter.com

   "Ink & Signal", the design system documented in the app's README, ported to
   plain CSS. Two rules carry the identity and both are load-bearing here:

   1. The neutrals sit on hue 285 — a cool, faintly violet ink, not grey.
   2. The accent is the diff colour. Magenta is what pixel-diff engines paint
      changed pixels, so the brand colour and the "something changed" colour are
      the same colour. It appears in exactly four places on this page: primary
      buttons, focus rings, the Changed badge, and the seam in the comparison
      slider. Nowhere else. If it's magenta, it's the thing you're here for.

   Hex values are the ones published in the README so the marketing site and the
   app can't drift apart.
   ========================================================================== */

:root {
  --radius: 0.5rem;

  --background: #fafafc;
  --card: #ffffff;
  --popover: #ffffff;
  --muted: #f1f1f5;
  --secondary: #eff0f4;
  --accent: #eeeef4;
  --border: #dfdfe4;
  --input: #dbdce2;
  --muted-foreground: #63646e;
  --foreground: #161620;

  --primary: #ba0087;
  --primary-fill: #ba0087;
  --primary-foreground: #fffcfe;
  --primary-soft: rgb(186 0 135 / 0.10);

  --ok: #007942;
  --ok-soft: rgb(0 121 66 / 0.10);
  --warn: #a06700;
  --warn-soft: rgb(160 103 0 / 0.12);

  --ring: var(--primary);
  --shadow: 0 1px 2px rgb(22 22 32 / 0.04), 0 1px 3px rgb(22 22 32 / 0.05);
  --shadow-lg: 0 1px 2px rgb(22 22 32 / 0.05), 0 12px 32px -12px rgb(22 22 32 / 0.16);

  --font-display: 'Archivo', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Light mode needs a slightly cooler chrome tint than dark does. */
  --chrome: #f6f6f9;
}

/* Light mode is a genuine second design rather than an inversion: the whole
   magenta and signal ramp is re-tuned, not flipped. */
.dark {
  --background: #0f0f15;
  --card: #181820;
  --popover: #1e1e26;
  --muted: #222229;
  --secondary: #24242b;
  --accent: #272730;
  --border: #2e2e37;
  --input: #34343e;
  --muted-foreground: #9d9daa;
  --foreground: #f4f4f7;

  --primary: #e052ac;
  --primary-fill: #c81d93;
  --primary-soft: rgb(224 82 172 / 0.16);

  --ok: #52cd86;
  --ok-soft: rgb(82 205 134 / 0.14);
  --warn: #f2b54a;
  --warn-soft: rgb(242 181 74 / 0.14);

  --shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 48px -16px rgb(0 0 0 / 0.6);

  --chrome: #1c1c24;
}

/* ---------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--primary-soft); }

/* Numbers are data. Line them up. Prose never goes in the mono. */
.tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 60; background: var(--card); border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius); padding: 0.6rem 1rem;
  font-size: 0.875rem; font-weight: 500;
}
.skip:focus { transform: translate(-50%, 0); }

.shell {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.shell-narrow { max-width: 46rem; }

/* ---------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; white-space: nowrap;
  height: 2.25rem; padding: 0 0.95rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem; font-weight: 500; line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-lg { height: 2.875rem; padding: 0 1.4rem; font-size: 0.9375rem; font-weight: 600; }
.btn-block { width: 100%; }

.btn-primary { background: var(--primary-fill); color: var(--primary-foreground); }
.btn-primary:hover { background: color-mix(in oklab, var(--primary-fill) 88%, black); }

.btn-outline { border-color: var(--input); background: transparent; color: var(--foreground); }
.btn-outline:hover { background: var(--accent); }

.btn-ghost { background: transparent; color: var(--muted-foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--foreground); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
  background: transparent; color: var(--muted-foreground); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--accent); color: var(--foreground); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }
.icon-btn .i-sun { display: none; }
.dark .icon-btn .i-sun { display: block; }
.dark .icon-btn .i-moon { display: none; }

/* ---------------------------------------------------------------------------
   Signal badges — one shape for every status in the product.
   -------------------------------------------------------------------------- */

.signal {
  display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0;
  border-radius: 999px; padding: 0.125rem 0.625rem;
  font-size: 0.75rem; font-weight: 500; line-height: 1.5;
  background: var(--tone-soft); color: var(--tone);
}
.signal::before {
  content: ''; width: 0.375rem; height: 0.375rem;
  border-radius: 999px; background: currentColor;
}
.signal-changed { --tone: var(--primary); --tone-soft: var(--primary-soft); }
.signal-ok { --tone: var(--ok); --tone-soft: var(--ok-soft); }

/* ---------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(8px);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 4rem;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: -0.015em;
}
.wordmark svg { width: 0.95em; height: 0.95em; flex-shrink: 0; }

.topnav { display: flex; gap: 1.75rem; font-size: 0.875rem; font-weight: 500; }
.topnav a { color: var(--muted-foreground); transition: color 0.15s ease; }
.topnav a:hover { color: var(--foreground); }

.topbar-actions { display: flex; align-items: center; gap: 0.5rem; }

@media (max-width: 62rem) { .topnav { display: none; } }
@media (max-width: 30rem) { .hide-sm { display: none; } }

/* ---------------------------------------------------------------------------
   Section furniture
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

.hero { padding: 5.5rem 0 5rem; }
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.35rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.032em;
}

.lede {
  max-width: 40rem; margin-top: 1.5rem;
  font-size: 1.0625rem; line-height: 1.68; color: var(--muted-foreground);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.fineprint {
  margin-top: 1rem; font-size: 0.8125rem; color: var(--muted-foreground);
}
.centred { text-align: center; margin-top: 2.5rem; }

.band { border-top: 1px solid var(--border); padding: 5.5rem 0; }
.band h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.4rem);
  font-weight: 600; line-height: 1.12; letter-spacing: -0.025em;
}
.section-lede {
  max-width: 38rem; margin-top: 1.125rem;
  font-size: 1rem; line-height: 1.7; color: var(--muted-foreground);
}

/* ---------------------------------------------------------------------------
   The comparison viewer — the one thing on this page worth remembering.
   -------------------------------------------------------------------------- */

.viewer {
  --pos: 62%;
  margin: 3.5rem 0 0;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.viewer-bar {
  display: flex; align-items: center; gap: 0.875rem;
  height: 2.75rem; padding: 0 0.875rem;
  border-bottom: 1px solid var(--border);
  background: var(--chrome);
}
.dots { display: flex; gap: 0.3125rem; }
.dots i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--border); }
.viewer-bar .url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.75rem; color: var(--muted-foreground);
}
.viewer-meta { display: flex; align-items: center; gap: 0.75rem; }
.viewer-meta .tabular { font-size: 0.6875rem; color: var(--muted-foreground); }

.stage {
  position: relative; aspect-ratio: 1440 / 900;
  background: var(--muted); cursor: ew-resize; touch-action: pan-y;
  overflow: hidden;
}
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.layer-top { clip-path: inset(0 0 0 var(--pos)); }
.layer-diff { opacity: 0; transition: opacity 0.2s ease; }

.seam {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--primary);
  pointer-events: none;
}
/* The handle sits on top of a screenshot rather than on the page, so it can't
   borrow the page's surface colour — it's the seam colour, ringed in white. */
.seam::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 1.625rem; height: 1.625rem; transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--primary); border: 2.5px solid var(--primary-foreground);
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.28);
}

/* Diff mode: one image, no seam. */
.viewer.is-diff .layer-top,
.viewer.is-diff .seam { opacity: 0; }
.viewer.is-diff .layer-diff { opacity: 1; }
.viewer.is-diff .stage { cursor: default; }

.drag-hint {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  padding: 0.3rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 88%, transparent);
  backdrop-filter: blur(4px);
  font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground);
  transition: opacity 0.3s ease;
}
.viewer.is-touched .drag-hint { opacity: 0; }

/* The Changed badge is withheld until the visitor has revealed enough of the
   new capture to see it for themselves. Finding it is the pitch. */
[data-reveal-badge] { opacity: 0; transition: opacity 0.35s ease; }
.viewer.is-revealed [data-reveal-badge] { opacity: 1; }

.viewer-controls {
  padding: 1rem 1.125rem 1.125rem;
  border-top: 1px solid var(--border);
}
.modes { display: flex; gap: 0.375rem; margin-bottom: 0.875rem; }
.mode {
  border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
  background: transparent; color: var(--muted-foreground);
  padding: 0.3rem 0.7rem; font: inherit; font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.mode:hover { background: var(--accent); color: var(--foreground); }
.mode.is-on { background: var(--secondary); color: var(--foreground); }

/* The slider control, matching the app's. */
input[type='range'] {
  width: 100%; height: 0.375rem; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: var(--border); border-radius: 999px; cursor: ew-resize;
}
input[type='range']::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 1rem; height: 1rem; border-radius: 999px;
  background: var(--primary); border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--primary);
}
input[type='range']::-moz-range-thumb {
  width: 1rem; height: 1rem; border-radius: 999px;
  background: var(--primary); border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--primary);
}

.ends {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground);
}

.viewer-caption {
  max-width: 42rem; margin-top: 1.125rem;
  font-size: 0.8125rem; line-height: 1.6; color: var(--muted-foreground);
}

/* On a phone the chrome has room for the badge or the dimensions, not both. */
@media (max-width: 34rem) {
  .viewer-bar { gap: 0.5rem; padding: 0 0.625rem; }
  .viewer-meta > .tabular { display: none; }
  .viewer-bar .signal { padding: 0.125rem 0.5rem; }
  .seam::after { width: 1.25rem; height: 1.25rem; border-width: 2px; }
  .ends .when { display: none; }
}

/* ---------------------------------------------------------------------------
   The gap
   -------------------------------------------------------------------------- */

.vignettes {
  display: grid; gap: 1px; margin-top: 3rem;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
}
.vignettes li { background: var(--background); padding: 1.75rem; }
.vignettes h3 { font-size: 0.9375rem; font-weight: 600; }
.vignettes p {
  margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.65;
  color: var(--muted-foreground);
}
@media (min-width: 52rem) { .vignettes { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.steps { margin-top: 3rem; }
.step { padding: 2.25rem 0; border-top: 1px solid var(--border); }
.step:first-child { border-top: none; padding-top: 0.5rem; }

.step-art {
  width: 7rem; height: 7rem; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  background: var(--card);
  overflow: hidden;
}
/* The compositions are drawn on a 200-unit square with breathing room; at this
   size that room is wasted, so the artwork is scaled into the tile. */
.step-art svg { transform: scale(1.22); }
.step-n { font-size: 0.75rem; color: var(--muted-foreground); }
.step-text h3 { margin-top: 0.375rem; font-size: 1.125rem; font-weight: 600; }
.step-text p {
  margin-top: 0.625rem; max-width: 44rem;
  font-size: 0.9375rem; line-height: 1.7; color: var(--muted-foreground);
}

@media (min-width: 46rem) {
  .step { display: grid; grid-template-columns: 6.5rem 1fr; gap: 2.25rem; align-items: start; }
}
@media (max-width: 46rem) {
  .step-art { margin-bottom: 1.25rem; width: 5.5rem; height: 5.5rem; }
}

/* Single-column plans don't need the reserved rows that keep four cards level. */
@media (max-width: 44rem) {
  .plan-tag, .plan-note { min-height: 0; }
  .plan-note:empty, .plan-note { margin-top: 0.125rem; }
}

/* ---------------------------------------------------------------------------
   The report — the app's own run screen, rebuilt from its own tokens.
   -------------------------------------------------------------------------- */

.app-frame {
  margin-top: 3rem; padding: 1.25rem;
  display: grid; gap: 1rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  background: var(--background);
  box-shadow: var(--shadow-lg);
}

.app-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 1rem;
  padding: 0.25rem 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.app-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.app-title h3 { font-size: 1.0625rem; font-weight: 600; }
.app-sub { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted-foreground); }

.app-card {
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  background: var(--card); padding: 1.125rem;
}
.app-card-title { font-size: 0.9375rem; font-weight: 600; }
.app-card-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 0.875rem;
}

.tiles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: 0.875rem;
  background: var(--border);
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
}
.tile { background: var(--card); padding: 0.875rem; }
.tile p { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.tile .is-changed { color: var(--primary); }
.tile span { display: block; margin-top: 0.125rem; font-size: 0.6875rem; color: var(--muted-foreground); }
/* Five tiles in a two-column grid leave a hole; the last one takes the row. */
.tile:last-child { grid-column: span 2; }
@media (min-width: 40rem) {
  .tiles { grid-template-columns: repeat(5, 1fr); }
  .tile:last-child { grid-column: auto; }
}

.app-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.app-outline, .app-ghost {
  border-radius: calc(var(--radius) - 2px);
  padding: 0.3rem 0.7rem; font-size: 0.8125rem; font-weight: 500;
  color: var(--muted-foreground);
}
.app-outline { border: 1px solid var(--input); color: var(--foreground); }

.app-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem; }
.app-tabs span {
  border-radius: calc(var(--radius) - 2px); padding: 0.25rem 0.6rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground);
}
.app-tabs .is-on { background: var(--secondary); color: var(--foreground); }

/* Cropped to the part of the page that actually moved — the top of a diff is,
   by design, the part where nothing happened. */
.app-thumb {
  margin-top: 0.875rem; height: 14rem; overflow: hidden;
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  background: var(--muted);
}
.app-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; }

.app-rows { padding: 0.25rem 0.375rem; }
.app-row {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.75rem 0.75rem;
  border-top: 1px solid var(--border);
}
.app-row:first-child { border-top: none; }
.app-row-name { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 500; }
.app-row-meta { font-size: 0.75rem; color: var(--muted-foreground); }

.strip {
  display: grid; gap: 1px; margin-top: 2rem;
  background: var(--border);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.strip li {
  background: var(--background); padding: 0.875rem 0.25rem;
  font-size: 0.8125rem; color: var(--muted-foreground);
}
@media (min-width: 40rem) { .strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .strip { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.interval {
  display: inline-flex; gap: 0.25rem; margin: 2.5rem 0 2rem;
  padding: 0.25rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card);
}
.interval button {
  border: none; border-radius: 999px; background: transparent;
  padding: 0.4rem 1rem; font: inherit; font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.interval button:hover { color: var(--foreground); }
.interval .is-on { background: var(--secondary); color: var(--foreground); }
.interval .save { color: var(--primary); }

.plans { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .plans { grid-template-columns: repeat(4, 1fr); } }

.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  background: var(--card); box-shadow: var(--shadow);
}
.plan.is-featured { border-color: color-mix(in oklab, var(--primary) 60%, transparent); }
.plan-flag {
  position: absolute; top: -0.6875rem; left: 1.5rem;
  border-radius: 999px; padding: 0.125rem 0.625rem;
  background: var(--primary-fill); color: var(--primary-foreground);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em;
}
.plan h3 { font-size: 1rem; font-weight: 600; }
.plan-tag {
  min-height: 2.5rem; margin-top: 0.25rem;
  font-size: 0.8125rem; line-height: 1.45; color: var(--muted-foreground);
}
.plan-price { display: flex; align-items: baseline; gap: 0.3rem; margin-top: 1rem; }
.plan-price .tabular { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.03em; }
.plan-price .per { font-size: 0.8125rem; color: var(--muted-foreground); }
.plan-note { min-height: 1.25rem; margin-top: 0.25rem; font-size: 0.6875rem; color: var(--muted-foreground); }
.plan .btn { margin-top: 1.25rem; }

.plan-features { margin-top: 1.5rem; display: grid; gap: 0.5rem; }
.plan-features li {
  position: relative; padding-left: 1.375rem;
  font-size: 0.8125rem; line-height: 1.5;
}
.plan-features li::before {
  content: ''; position: absolute; left: 0; top: 0.3rem;
  width: 0.875rem; height: 0.875rem;
  background: currentColor; color: var(--muted-foreground); opacity: 0.75;
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}
:root {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { margin-top: 2.5rem; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.125rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex-shrink: 0; width: 0.75rem; height: 0.75rem;
  background: currentColor; opacity: 0.5;
  transition: transform 0.2s ease;
  -webkit-mask: var(--plus) center / contain no-repeat;
  mask: var(--plus) center / contain no-repeat;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p {
  padding: 0 0 1.375rem; max-width: 40rem;
  font-size: 0.9375rem; line-height: 1.7; color: var(--muted-foreground);
}
:root {
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Close and footer
   -------------------------------------------------------------------------- */

.close {
  border-top: 1px solid var(--border);
  padding: 6rem 0; text-align: center;
}
.close h2 {
  font-size: clamp(1.875rem, 4.4vw, 2.75rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.03em;
}
.close p {
  max-width: 34rem; margin: 1.125rem auto 0;
  font-size: 1rem; line-height: 1.7; color: var(--muted-foreground);
}
.close .hero-cta { justify-content: center; }

.foot { border-top: 1px solid var(--border); padding: 2.5rem 0; }
.foot-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.8125rem; }
.foot-nav a { color: var(--muted-foreground); transition: color 0.15s ease; }
.foot-nav a:hover { color: var(--foreground); }
.foot-note { width: 100%; font-size: 0.75rem; color: var(--muted-foreground); }

/* ---------------------------------------------------------------------------
   Scroll reveal — one gesture, applied once per section, and gone entirely for
   anyone who has asked for less motion.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-anim] {
    opacity: 0; transform: translateY(0.75rem);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .js [data-anim].is-in { opacity: 1; transform: none; }
}

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