/* ==========================================================================
   ProofFlick, site styles
   Dark shell, light islands. Built on the signed-off brand pack (26 July 2026):
   BRAND.md, START-SCREEN.md, tokens/proofflick.css.

   The site is dark; the app is light. That is deliberate, the light app UI
   sits on the dark page as the focal point rather than blending into it, so
   every surface that represents the product (the proof panel, screenshot
   frames) is a scoped light island via .on-light.

   Rules taken as law:
   - Editorial, restrained, flat. No surface gradients, no shadows, no gloss.
   - Two surfaces (ink + paper), one accent, one signal green.
   - On ink, #ec0b7c is 4.62:1, good for text. On paper it is not; the light
     islands drop to #d10570 / #c4085f.
   - Green means "proofed / done". Never decoration.
   - Never track out lowercase Geist.
   - Instrument Serif italic is a single accent, not a second brand face.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts, self-hosted, latin subset, no third-party requests
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Geist-Variable-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/GeistMono-Variable-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/InstrumentSerif-Italic-latin.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Tokens, dark shell
   Alphas are set by measured contrast against #0a0a0c, not by eye:
   .62 = 7.1:1, .50 = 4.9:1. Both clear AA for normal text. Do not lighten.
   -------------------------------------------------------------------------- */

:root {
  --ink: #0a0a0c;
  --ink-raised: #141417;
  --ink-band: #0e0e11;
  --text: #f4f4f5;
  --accent: #ec0b7c;        /* fills, borders, marks, display-size text */

  /* #ec0b7c is 4.62:1 on pure ink. That is AA, but with almost no headroom, and the
     atmosphere lifts the surface behind it. Small accent text uses a lighter
     step of the same hue, which is the tinting BRAND.md allows rather than a
     new colour. Measured against the brightest rendered point of the violet
     atmosphere, this clears AA with room; #ec0b7c would not. */
  --accent-text: #ff3d9c;

  /* Filled pink surfaces are #d10570 with white, whatever the scope. On the
     accent #ec0b7c, white is 4.28:1 (fails) and ink is 4.90:1 (passes, but
     reads flat on a dark page). #d10570 with white is 5.29:1 and carries more
     energy. The fill still sits at 3.7:1 against the page, so its edge reads. */
  --accent-fill: #d10570;
  --accent-fill-hover: #b8045f;   /* white on this is 6.5:1 */
  --on-fill: #ffffff;

  --green: #35d29a;         /* proofed / done. 10.2:1 on ink */

  --muted: rgba(244, 244, 245, .62);
  /* .60, not .50: the aurora raises the surface behind this text, and at .50 the
     12px mono metadata is the first thing to fall under AA. The hierarchy step
     is smaller than it would be on a flat background, that is the cost of the
     atmosphere, paid here rather than in legibility. */
  --faint: rgba(244, 244, 245, .6);
  --hairline: rgba(255, 255, 255, .1);
  --hairline-strong: rgba(255, 255, 255, .36);
  --accent-wash: rgba(236, 11, 124, .12);

  --font: 'Geist', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --font-accent: 'Instrument Serif', Georgia, serif;

  --radius-control: 8px;
  --radius-card: 14px;
  --radius-panel: 18px;
  --container: 1140px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-y: clamp(72px, 9vw, 132px);

  color-scheme: dark;
}

/* Light island: anything that represents the app itself.
   The app defaults to light, so these surfaces must be light, and inside them
   the paper contrast rules apply: #ec0b7c drops to #d10570 / #c4085f, and the
   signal green drops to #0a7a52 because #0f9d6a is only 3.3:1 on paper. */
.on-light {
  --ink: #ffffff;
  --ink-raised: #f6f4f1;
  --ink-band: #f6f4f1;
  --text: #1c1c21;
  --accent: #d10570;
  --accent-text: #c4085f;
  --green: #0a7a52;
  --muted: rgba(28, 28, 33, .68);
  --faint: rgba(28, 28, 33, .62);
  --hairline: rgba(10, 10, 12, .09);
  --hairline-strong: rgba(10, 10, 12, .16);

  color-scheme: light;
  background: var(--ink);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -.011em;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 1.5rem + 3.5vw, 4rem);
  letter-spacing: -.038em;
}

h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.7rem);
  letter-spacing: -.033em;
}

h3 {
  font-size: 1.15rem;
  letter-spacing: -.018em;
}

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

/* On the bare page the atmosphere can lift the surface to rgb(74,25,99) at its
   worst, where #ff3d9c measures 3.97:1. Link text is therefore the body colour
   and the accent moves to the underline, which is decorative and has no
   contrast floor. This also honours the rule that magenta belongs to the CTAs
   and the wordmark, not to running text. */
a {
  color: var(--text);
  text-decoration-color: rgba(236, 11, 124, .4);
  text-underline-offset: .18em;
}

.on-light a { text-decoration-color: rgba(196, 8, 95, .35); }

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

strong { font-weight: 600; }

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

ul { margin: 0; padding: 0; list-style: none; }

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

::selection {
  background: rgba(236, 11, 124, .3);
  color: #fff;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  font-size: .9rem;
}

.skip-link:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   4. Atmosphere
   The canvas in js/atmosphere.js paints the aurora with additive blending,
   which only reads on a dark surface. This is the static base beneath it, so
   the page still has depth with JavaScript disabled, the canvas is a pure
   enhancement and nothing depends on it.

   Deep violet, never magenta. Magenta is the CTA colour: an ambient wash in the
   same hue makes the primary button disappear into the page and turns the
   surface maroon. Measured on a real render, the content column stays 61% within
   8/255 of #0a0a0c and the page reads as black with light falling on it.
   -------------------------------------------------------------------------- */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
}

/* No fade-in. The script paints one frame synchronously before revealing the
   canvas, so there is nothing to fade from, and while the fade existed the
   rendered opacity depended on transition timing, which made the effect
   unmeasurable and left it invisible wherever transitions are suppressed. */
.atmosphere.is-live { opacity: 1; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46% 34% at 2% 4%, rgba(88, 28, 135, .16), transparent 72%),
    radial-gradient(42% 32% at 99% 12%, rgba(120, 40, 170, .13), transparent 74%),
    radial-gradient(40% 30% at 98% 92%, rgba(56, 24, 110, .12), transparent 74%);
}

/* --------------------------------------------------------------------------
   5. The mark, rebuilt from BRAND.md fractions in document type
   -------------------------------------------------------------------------- */

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}

/* icon tile: radius .129S, glyph .598S, tracking -.05em.
   BRAND.md: never put the dark tile on #0a0a0c, use the #141417 inset tile. */
.tile {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 3.9px;
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
}

.tile .glyph {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--text);
}

.tile .glyph i {
  font-style: normal;
  font-weight: 300;
  color: var(--accent);
}

/* at 32px and below the three dots stop resolving, so the pack collapses them to a rule */
.tile .rule {
  width: 8px;
  height: 1.5px;
  margin-left: 5px;
  background: var(--accent);
}

/* wordmark: Geist 500, -.035em, dot row inset .192em from the word's right edge,
   which is what lands the last dot on the centre of the k */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25em;
  font-size: 20px;
  line-height: 1;
}

.wordmark .word {
  font-weight: 500;
  letter-spacing: -.035em;
  color: var(--text);
}

.wordmark .word i {
  font-style: normal;
  color: var(--accent);
}

.wordmark .dots {
  display: flex;
  gap: .096em;
  margin-right: .192em;
}

.wordmark .dots i {
  width: .135em;
  height: .135em;
  border-radius: 50%;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 12, .82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}

.site-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
}

/* padding-block keeps these at or above the 24px minimum target size; at .9375rem
   the text box alone is 23px */
.site-nav a {
  padding-block: 4px;
  color: var(--muted);
  text-decoration: none;
  font-size: .9375rem;
  letter-spacing: -.012em;
}

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

.header-cta { margin-left: auto; }
.site-nav + .header-cta { margin-left: 0; }

@media (max-width: 900px) {
  .site-nav { display: none; }
}

/* --------------------------------------------------------------------------
   7. Buttons + small text
   Trial-first: Download is the filled primary, Buy is the outline beside it.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
  background: var(--accent-fill);
  color: var(--on-fill);
}

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

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--hairline-strong);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.btn .b2 {
  font-size: .75rem;
  font-weight: 400;
  opacity: .8;
  letter-spacing: -.005em;
}

.btn-primary .b2 { opacity: 1; }

.btn-lg {
  min-height: 54px;
  padding: 9px 26px;
  font-size: 1rem;
}

.mono {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--faint);
  font-variant-ligatures: none;
}

.kicker {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--text);
}

.kicker.neutral { color: var(--faint); }

.lede {
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.28rem);
  line-height: 1.56;
  letter-spacing: -.015em;
  color: var(--muted);
  text-wrap: pretty;
}

/* the single editorial accent, used twice on the whole site */
.serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent);
}

kbd {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: var(--ink-raised);
  font-family: var(--font-mono);
  font-size: .78em;
  letter-spacing: .04em;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   8. Sections
   -------------------------------------------------------------------------- */

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

.section-head {
  max-width: 660px;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.section-head h2 { margin-bottom: .5em; }

.band {
  background: var(--ink-band);
  border-block: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(48px, 6vw, 82px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(40px, 5vw, 68px);
  align-items: center;
}

@media (max-width: 940px) {
  .hero .container { grid-template-columns: minmax(0, 1fr); }
}

.hero h1 { margin-bottom: .42em; }

.hero .lede { max-width: 34em; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.hero-meta { margin-top: 22px; }

.hero-quiet {
  margin-top: 7px;
  font-size: .82rem;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   10. Mode and profile pills
   All that survives of the hand-built proof panel. The real screenshot
   replaced it, so the panel, change-mark and caption styles went with it.
   -------------------------------------------------------------------------- */

.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }

.pill {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  font-size: .78rem;
  letter-spacing: -.008em;
  color: var(--muted);
}

/* same filled treatment as the buttons, so every filled pink surface matches */
.pill-active {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-fill);
}

.pp-actions {
  display: flex;
  gap: 14px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--muted);
}

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

.stage-note { margin-top: 14px; text-align: center; }

/* --------------------------------------------------------------------------
   11. Screenshots
   The captures are PNGs with real alpha: rounded corners and no baked-in
   shadow, so they sit straight on the dark page with no grey plate behind
   them. No CSS shadow either, because BRAND.md rules them out and a light
   window on ink already separates itself.
   -------------------------------------------------------------------------- */

.shot-frame {
  display: block;
  width: 100%;
  height: auto;
}

figure { margin: 0; }

figcaption { margin-top: 12px; }

/* --------------------------------------------------------------------------
   12. Cards + grids
   -------------------------------------------------------------------------- */

.card {
  padding: clamp(24px, 3vw, 32px);
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

.card h3 { margin: 14px 0 10px; }

.card p { color: var(--muted); }

.duo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

@media (max-width: 760px) {
  .card-wide { grid-template-columns: minmax(0, 1fr); }
}

.label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.label-green { color: var(--green); }
.label-accent { color: var(--accent-text); }
.label-muted { color: var(--faint); }

.kbd-line {
  margin-top: 16px;
  font-size: .85rem;
  color: var(--faint);
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.chip {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  font-size: .85rem;
  letter-spacing: -.01em;
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   13. Privacy diagram
   -------------------------------------------------------------------------- */

.pipe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}

@media (max-width: 760px) {
  .pipe { grid-template-columns: minmax(0, 1fr); }
  .pipe-link { transform: rotate(90deg); padding-block: 6px; }
}

.pipe-node {
  padding: 26px;
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

.pipe-node strong {
  display: block;
  margin: 8px 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.018em;
}

.pipe-node p {
  margin: 0;
  font-size: .92rem;
  color: var(--muted);
}

.pipe-link {
  display: grid;
  place-items: center;
  gap: 6px;
  color: var(--accent);
}

.pipe-link .arrow { font-size: 1.3rem; line-height: 1; color: var(--muted); }

.pipe-absent {
  margin-top: 18px;
  padding: 18px 26px;
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--radius-card);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.pipe-absent strong {
  font-weight: 500;
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
}

.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 18px 36px;
  margin-top: clamp(36px, 5vw, 56px);
}

.points li {
  display: flex;
  gap: 12px;
  font-size: .95rem;
  color: var(--muted);
}

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

.tick {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 4px;
  color: var(--green);
}

/* --------------------------------------------------------------------------
   14. Comparison table, reflows to cards on small screens, never scrolls off
   -------------------------------------------------------------------------- */

.compare {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.compare th,
.compare td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--hairline);
  font-size: .95rem;
  font-weight: 400;
  vertical-align: middle;
}

.compare thead th {
  padding-bottom: 12px;
  font-size: .9rem;
  color: var(--muted);
  letter-spacing: -.01em;
}

.compare tbody td:not(:first-child),
.compare thead th:not(:first-child) { text-align: center; }

.compare .col-pf {
  background: var(--ink-raised);
  border-inline: 1px solid var(--hairline);
  color: var(--text);
}

.compare thead .col-pf {
  border-top: 1px solid var(--hairline);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.compare tbody tr:last-child .col-pf {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.compare .yes { color: var(--green); display: inline-flex; }

/* the × carries meaning, so it is held to the text threshold, where --faint measures 4.9:1 */
.compare .no { color: var(--faint); font-size: 1.1rem; }

.compare .yes .tick { margin: 0; }

.compare .price { font-variant-numeric: tabular-nums; }

.compare .price strong {
  font-weight: 600;
  letter-spacing: -.015em;
}

.compare-foot { margin-top: 18px; }

/* The one-time argument is the whole pitch, so it is set as a figure rather
   than left to sit politely inside a paragraph. */
.verdict-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  letter-spacing: -.024em;
  line-height: 1.25;
}

.verdict-lead strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.verdict-lead .v-them { color: var(--muted); }
.verdict-lead .v-them strong { color: var(--text); }

.verdict-lead .v-vs {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.verdict-lead .v-us { color: var(--accent-text); }
.verdict-lead .v-us strong { color: var(--accent-text); }

.verdict-body {
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
  letter-spacing: -.011em;
  color: var(--muted);
}

/* macOS: a quiet block, deliberately away from the two primary CTAs so it
   cannot dilute the download-first hierarchy. The button is a live outline
   control, not a disabled-looking one. */
.mac-block {
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(26px, 3.4vw, 38px);
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  text-align: center;
}

.mac-block h3 { margin: 14px 0 10px; }

.mac-block p { color: var(--muted); }

.mac-block .btn { margin-top: 22px; }

.mac-note {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--faint);
}

.verdict {
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(22px, 3vw, 30px);
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-card);
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  line-height: 1.55;
  letter-spacing: -.014em;
}

@media (max-width: 720px) {
  .compare thead { position: absolute; left: -9999px; }

  .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }

  .compare tr {
    margin-bottom: 14px;
    background: var(--ink-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .compare td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    text-align: right;
    border-bottom: 1px solid var(--hairline);
  }

  .compare td:last-child { border-bottom: 0; }

  .compare td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: left;
  }

  .compare td:first-child {
    background: var(--ink-band);
    font-weight: 500;
    justify-content: flex-start;
    text-align: left;
  }

  .compare td:first-child::before { content: none; }

  .compare .col-pf { border-inline: 0; background: var(--accent-wash); }
  .compare tbody tr:last-child .col-pf { border-radius: 0; }
}

/* --------------------------------------------------------------------------
   15. Pricing
   -------------------------------------------------------------------------- */

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
}

.price-card {
  padding: clamp(28px, 3.4vw, 40px);
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

.launch-flag {
  display: inline-block;
  margin-bottom: 20px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.price-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.price-now {
  font-size: clamp(2.6rem, 2rem + 2.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.042em;
  font-variant-numeric: tabular-nums;
}

.price-was {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.price-terms {
  margin-top: 10px;
  font-size: .95rem;
  color: var(--muted);
}

.price-includes {
  display: grid;
  gap: 11px;
  margin: 26px 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.price-includes li {
  display: flex;
  gap: 11px;
  font-size: .95rem;
  color: var(--muted);
}

.price-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.price-foot {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--faint);
}

.byok {
  padding: clamp(28px, 3.4vw, 40px);
  background: var(--ink-band);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

.byok h3 { margin: 14px 0 10px; }
.byok p { color: var(--muted); }

/* Deliberately not green. Green is the proofed/done signal in this brand, and a
   free-tier note is not a done state, using it here would be decoration. */
.callout {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted);
}

.callout strong { color: var(--text); }

/* --------------------------------------------------------------------------
   15b. Checkout closed, and the SmartScreen note

   Lemon Squeezy identity verification is still in review, so the checkout
   cannot take live payments. The buy links stay in the markup and keep their
   launch discount; they are only hidden. Reverting is one line: delete the
   checkout-closed class from the <html> tag in index.html.
   -------------------------------------------------------------------------- */

.buy-soon { display: none; }

.checkout-closed .buy-cta { display: none; }

.checkout-closed .buy-soon {
  display: block;
  max-width: 34em;
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Signed, but a new certificate has no reputation yet. Stated plainly and kept
   secondary: it is a fact about Windows, not an apology. */
.note-signed {
  max-width: 46em;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   16. Founder
   -------------------------------------------------------------------------- */

.founder {
  max-width: 640px;
  margin-inline: auto;
}

.founder-quote {
  margin: 0 0 24px;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem);
  line-height: 1.32;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.founder p { color: var(--muted); }

.sign {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: .9rem;
}

.sign strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */

.faq {
  max-width: 780px;
  border-top: 1px solid var(--hairline);
}

.faq details { border-bottom: 1px solid var(--hairline); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.018em;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: '+';
  flex: none;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  transition: transform .18s ease;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
  max-width: 68ch;
  margin: 0 0 22px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   18. Final CTA
   -------------------------------------------------------------------------- */

.final-cta { text-align: center; }

.final-cta h2 { margin-bottom: .5em; }

.final-cta .lede { max-width: 42ch; margin-inline: auto; }

.final-cta .hero-ctas { justify-content: center; }

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

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

.site-footer {
  padding-block: clamp(48px, 6vw, 72px) 40px;
  border-top: 1px solid var(--hairline);
  background: var(--ink-band);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 36px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 56px;
}

.footer-nav div {
  display: grid;
  gap: 5px;
  align-content: start;
}

/* same 24px minimum target size as the header nav */
.footer-nav a {
  padding-block: 3px;
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
}

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

.footer-legal {
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--faint);
}

.footer-legal p { margin-bottom: .7em; }

.footer-legal a { color: var(--muted); }

/* --------------------------------------------------------------------------
   20. Interior pages, legal + support
   -------------------------------------------------------------------------- */

.page-head { padding-block: clamp(48px, 6vw, 76px) clamp(28px, 3vw, 40px); }

.page-head h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  margin-bottom: .3em;
}

.prose {
  max-width: 680px;
  padding-bottom: clamp(64px, 8vw, 104px);
}

.prose h2 {
  margin: 2.2em 0 .6em;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
  letter-spacing: -.022em;
}

.prose h3 { margin: 1.8em 0 .5em; font-size: 1.02rem; }

.prose p,
.prose li { color: var(--muted); }

.prose ul {
  display: grid;
  gap: 12px;
  margin: 0 0 1.2em;
  padding-left: 0;
}

.prose ul li {
  position: relative;
  padding-left: 20px;
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.prose strong { color: var(--text); }

.summary-card {
  padding: clamp(22px, 3vw, 30px);
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-card);
}

.summary-card p { margin: 10px 0 0; color: var(--muted); }

.updated { margin-top: 4px; }

.support-steps {
  display: grid;
  gap: 14px;
  margin: 0 0 1.4em;
  padding: 0;
  counter-reset: step;
}

.support-steps li {
  position: relative;
  padding: 18px 20px 18px 54px;
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  color: var(--muted);
  font-size: .95rem;
}

.support-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 17px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
}

.support-steps strong { color: var(--text); }

.contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: clamp(22px, 3vw, 28px);
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  margin: 1.4em 0;
}

.contact-card .addr {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.018em;
}

/* --------------------------------------------------------------------------
   21. 404
   -------------------------------------------------------------------------- */

.center-page {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 62vh;
  padding-block: 80px;
  text-align: center;
}

.center-page .lede { max-width: 40ch; }

/* --------------------------------------------------------------------------
   22. Small-screen adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  body { font-size: 16px; }

  .site-header .container { height: 58px; gap: 14px; }

  .hero-ctas .btn,
  .price-ctas .btn { width: 100%; }

  .pp-head, .pp-body, .pp-foot { padding-inline: 15px; }

  .pp-foot { flex-direction: column; align-items: flex-start; gap: 12px; }

  .footer-nav { gap: 20px 36px; }

  .contact-card { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .wordmark { font-size: 18px; }
  .chg::after { display: none; }
}