/* ============================================================
   Layland — site styles
   Light palette on :root, dark under both the media query and an
   explicit [data-theme] so the toggle wins in either direction.
   The accent is the amber of the icon's largest cell; the other
   icon hues (teal, green, rose, blue) appear only as data.
   ============================================================ */

:root {
  --bg:            #fbfbf9;
  --bg-alt:        #f4f3ef;
  --surface:       #ffffff;
  --surface-2:     #f1f0ec;
  --text:          #16150f;
  --text-dim:      #5d5a52;
  --text-faint:    #7a766c;
  --border:        rgba(30, 25, 10, 0.09);
  --border-strong: rgba(30, 25, 10, 0.16);
  --accent:        #c98a17;
  --accent-soft:   rgba(224, 160, 48, 0.14);
  --accent-text:   #93620a;
  --btn-bg:        #16150f;
  --btn-fg:        #fbfaf7;
  --teal:          #2b9eb3;
  --shadow-sm:     0 1px 2px rgba(30, 25, 10, 0.05), 0 1px 3px rgba(30, 25, 10, 0.04);
  --shadow-lg:     0 40px 90px -30px rgba(40, 30, 10, 0.35), 0 14px 30px -16px rgba(40, 30, 10, 0.20);
  --header-bg:     rgba(251, 251, 249, 0.75);
  --window:        #fbfaf8;
  --window-bar:    #eeece7;
  --desk:          linear-gradient(135deg, #e7c889 0%, #d77a61 45%, #6c7fb8 100%);

  --radius:        12px;
  --radius-lg:     20px;
  --wrap:          1120px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter,
          system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0b0b0c;
    --bg-alt:        #111112;
    --surface:       #161617;
    --surface-2:     #1c1c1e;
    --text:          #f3f2ee;
    --text-dim:      #a3a099;
    --text-faint:    #8d8a83;
    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    --accent:        #e8a93a;
    --accent-soft:   rgba(232, 169, 58, 0.14);
    --accent-text:   #f0bb5c;
    --btn-bg:        #e8a93a;
    --btn-fg:        #16120a;
    --teal:          #4cc0d4;
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-lg:     0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 14px 30px -14px rgba(0, 0, 0, 0.7);
    --header-bg:     rgba(11, 11, 12, 0.72);
    --window:        #1e1e1f;
    --window-bar:    #2a2a2b;
    --desk:          linear-gradient(135deg, #3b2a12 0%, #4a1f2a 45%, #16243f 100%);
    --hero-amber:    0.08;
    --hero-teal:     0.07;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:            #0b0b0c;
  --bg-alt:        #111112;
  --surface:       #161617;
  --surface-2:     #1c1c1e;
  --text:          #f3f2ee;
  --text-dim:      #a3a099;
  --text-faint:    #8d8a83;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --accent:        #e8a93a;
  --accent-soft:   rgba(232, 169, 58, 0.14);
  --accent-text:   #f0bb5c;
  --btn-bg:        #e8a93a;
  --btn-fg:        #16120a;
  --teal:          #4cc0d4;
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lg:     0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 14px 30px -14px rgba(0, 0, 0, 0.7);
  --header-bg:     rgba(11, 11, 12, 0.72);
  --window:        #1e1e1f;
  --window-bar:    #2a2a2b;
  --desk:          linear-gradient(135deg, #3b2a12 0%, #4a1f2a 45%, #16243f 100%);
  --hero-amber:    0.08;
  --hero-teal:     0.07;
  color-scheme: dark;
}

/* ─────────────────────────── base ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
/* The hero glow reaches past the viewport's sides on narrow screens; clipped
   here as well as on body, since iOS Safari can pan into overflow body hides. */
html { overflow-x: clip; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
code, kbd { font-family: var(--mono); font-size: 0.86em; }
code { background: var(--surface-2); border: 1px solid var(--border); padding: 0.08em 0.36em; border-radius: 6px; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0.05em 0.4em; text-align: center;
  background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 6px; font-size: 0.8em; line-height: 1.5;
}
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

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

/* ─────────────────────────── header ─────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.site-header.is-scrolled { border-bottom-color: var(--border); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 60px; }

.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; }
.brand img { border-radius: 7px; }

.nav { display: flex; gap: 22px; font-size: 14px; }
.nav a { color: var(--text-dim); text-decoration: none; transition: color 0.15s; }
.nav a:hover { color: var(--text); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-dim); border-radius: 9px; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .i-sun { display: none; } :root:not([data-theme="light"]) .i-moon { display: block; } }
:root[data-theme="dark"] .i-sun { display: none; }
:root[data-theme="dark"] .i-moon { display: block; }

/* ─────────────────────────── buttons ─────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  border-radius: 11px; border: 1px solid transparent; padding: 10px 18px;
  transition: transform 0.12s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn svg { width: 18px; height: 18px; stroke-width: 2; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 6px 20px -8px rgba(201, 138, 23, 0.55); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--text-faint); }
.btn-sm { font-size: 13.5px; padding: 7px 13px; border-radius: 9px; }
.btn-lg { font-size: 16px; padding: 13px 22px; border-radius: 13px; }
.btn-block { display: flex; width: 100%; }

/* The header's Buy button, beside Download. A phone's bar keeps one button. */
.nav-buy .buy-price s { margin-inline-end: 3px; }
@media (max-width: 620px) { .nav-buy { display: none !important; } }

/* ── the launch offer (script.js, "launch promo") ──
   Every slot holds two pills: the standing refund pill, shown by default, and
   the offer pill, hidden in the markup and revealed only while the offer is
   live, when the standing one stands down. The same size, so the swap never
   shifts the layout. */
.promo {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 22px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 14px; font-weight: 500;
}
.promo[hidden] { display: none; }
.promo strong { font-weight: 650; }
/* The standing pill is true every day of the year, so it takes the quiet
   treatment: the accent belongs to the offer that expires. */
.promo.promo-standing {
  padding: 6px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
}
.promo-slot { text-align: center; margin: -18px 0 26px; }
.promo-slot .promo { margin: 0; }
/* .final p sets 18px text; the pills keep their own size there too. */
.final p.promo { font-size: 14px; margin: 0 0 26px; }
@media (max-width: 620px) {
  /* Wrapped, it reads as one centered sentence rather than two ragged columns. */
  .promo { display: inline-block; max-width: 100%; padding: 8px 16px; border-radius: 15px; text-align: center; line-height: 1.45; }
}
/* The old price, struck, then the one you pay. Dimmed only to 0.82 so it keeps
   enough contrast to read, the lighter weight and the strike doing the rest. */
.buy-price s { margin-inline-end: 5px; opacity: 0.82; font-weight: 500; text-decoration-thickness: 1.5px; }
.plan-price .buy-price s { font-size: 0.55em; font-weight: 500; opacity: 0.6; vertical-align: 0.3em; text-decoration-thickness: 2px; }

/* ── gumroad overlay, de-branded ──
   Adding .gumroad-button is what binds Gumroad's checkout overlay, and it drags
   their button skin along: black background, pink on hover, their font, a
   different radius and padding, and a GUMROAD wordmark appended in .logo-full.
   Their CSS is injected at runtime and always lands after this file, so only
   specificity plus !important wins. Every value below restates .btn, .btn-lg,
   .btn-primary and .btn-ghost from above, so a buy button looks like the button
   beside it. If Gumroad changes its skin, the tell is the buy button drifting
   from "Download free". */
.btn.gumroad-button {
  font: inherit !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.6 !important;
  border-radius: 11px !important; border: 1px solid transparent !important; padding: 10px 18px !important;
  height: auto !important; gap: 8px !important; transform: none !important; text-decoration: none !important;
}
.btn.btn-lg.gumroad-button { font-size: 16px !important; padding: 13px 22px !important; border-radius: 13px !important; }
.btn.btn-sm.gumroad-button { font-size: 13.5px !important; padding: 7px 13px !important; border-radius: 9px !important; }
.btn.btn-primary.gumroad-button {
  background: var(--btn-bg) !important; color: var(--btn-fg) !important;
  box-shadow: 0 6px 20px -8px rgba(201, 138, 23, 0.55) !important;
}
.btn.btn-ghost.gumroad-button {
  background: var(--surface) !important; color: var(--text) !important;
  border-color: var(--border-strong) !important; box-shadow: none !important;
}
.btn.btn-primary.gumroad-button:hover, .btn.btn-primary.gumroad-button:focus { filter: brightness(1.08); color: var(--btn-fg) !important; }
.btn.btn-ghost.gumroad-button:hover, .btn.btn-ghost.gumroad-button:focus { color: var(--text) !important; border-color: var(--text-faint) !important; }
.btn.gumroad-button:active { transform: translateY(1px) !important; box-shadow: none !important; }
.btn.gumroad-button .logo-full { display: none !important; }

.link-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--accent-text); padding: 4px 6px; border-radius: 6px;
}
.link-btn:hover { background: var(--accent-soft); }
.link-btn svg { width: 15px; height: 15px; stroke-width: 2; }

/* ─────────────────────────── hero ─────────────────────────── */

.hero { padding: 64px 0 40px; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -138px 0 auto; height: 781px; z-index: -1; pointer-events: none;
  /* Three of the icon's colors in a row, amber, rose and teal, wide enough to
     overlap so the middle is never a gap between two glows. On the dark page
     the side two are halved (--hero-amber, --hero-teal) and the rose leads. */
  background:
    radial-gradient(34% 48% at 24% 30%, rgba(224, 160, 48, var(--hero-amber, 0.16)), transparent 70%),
    radial-gradient(34% 48% at 50% 26%, rgba(214, 65, 97, 0.11), transparent 70%),
    radial-gradient(34% 48% at 76% 30%, rgba(43, 158, 179, var(--hero-teal, 0.14)), transparent 70%);
}
.hero-copy { text-align: center; }

.pill {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  font-size: 13.5px; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px 4px 5px;
  box-shadow: var(--shadow-sm);
}
.pill-tag { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; border-radius: 999px; padding: 2px 9px; font-size: 12.5px; }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.024em; font-weight: 600; text-wrap: pretty; }
p, li { text-wrap: pretty; }

h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.042em; font-weight: 600;
  margin: 0 auto 22px;
}
.h1-soft { color: var(--text-faint); }
.lede { font-size: clamp(17px, 2vw, 20px); color: var(--text-dim); max-width: 36em; margin: 0 auto 30px; text-wrap: pretty; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fineprint { font-size: 13px; color: var(--text-faint); margin: 18px 0 48px; }

/* ── screenshots ──
   Window captures with transparent rounded corners, one per appearance; the
   page shows the one matching its own theme, toggle included. */

.shot { display: block; }
.shot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.28)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12)); }
.shot .is-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot .is-light { display: none; }
  :root:not([data-theme="light"]) .shot .is-dark { display: block; }
}
:root[data-theme="dark"] .shot .is-light { display: none; }
:root[data-theme="dark"] .shot .is-dark { display: block; }
.shot-hero { position: relative; margin-top: 8px; }
/* The glow, as on Subtitles' demo: the picture painted again under the window,
   blurred and saturated, so each part of the haze carries the color of the
   cells above it rather than one flat tint. The source is the map area alone
   (hero-glow.webp, blurred and saturated ahead of time), so the gray sidebar and bars add nothing. It
   sits at z-index -1 in the page's stacking context, so nothing between it and
   the page may form a stacking context or paint an opaque background. */
.shot-hero::before {
  content: "";
  position: absolute;
  /* The blur and saturation are baked into the image (tools/make-hero-glow.py,
     which prints these numbers): a CSS filter here flickered in Safari while
     the scroll reveal scaled the window. The frame is larger than the window
     by the room the blur fades out in, and sits a little low. */
  left: -8.95%; top: -14.05%; width: 120.90%; height: 132.24%;
  z-index: -1;
  background: url("/assets/screens/hero-glow.webp") center / 100% 100% no-repeat;
  opacity: var(--hero-glow, 0.9);
  pointer-events: none;
}
.shot-hero img { filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.18)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)); }
/* A gray shadow under the window grayed the glow on the light page, so there it
   only has an edge line; on the dark page a shadow reads as depth, not gray. */
/* Softer on the dark page, where the same glow on near-black reads brighter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-hero { --hero-glow: 0.7; }
  :root:not([data-theme="light"]) .shot-hero img { filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.3)); }
}
:root[data-theme="dark"] .shot-hero { --hero-glow: 0.7; }
:root[data-theme="dark"] .shot-hero img { filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.3)); }

.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; margin-top: 44px; }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } }
.shots figure { margin: 0; display: flex; flex-direction: column; }
.shots .shot { flex: 1; display: flex; align-items: center; }
.shots .shot img { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.22)); }
.shots figcaption { margin-top: 14px; font-size: 15px; color: var(--text-dim); }
.shots figcaption b { color: var(--text); font-weight: 600; }

/* ── the reveal (index.html, script.js) ──
   --gap is the room the window peeks up from, --slide-t how far the block has
   come up it (0 on load, 1 once arrived), --shot-scale the window's size. The
   defaults are the arrived state, so without the script nothing moves. */
.reveal {
  --gap: 0px;
  --slide-t: 1;
  --shot-scale: 1;
  position: relative;
  /* Clipped below: on load the block is slid down by the whole room, and what
     hangs past the page's end would add itself to the page's height and take
     itself off again as the block slid up, which the scrollbar would show.
     Visible across, for the glow. */
  overflow: visible clip;
}
.reveal .hero { padding-bottom: 0; }
.reveal-gap { height: var(--gap); }
.reveal-marker { position: absolute; left: 0; right: 0; visibility: hidden; pointer-events: none; }
.reveal-slide {
  /* Laid out where it ends up, over the room, and slid down by the room until
     scrolled to, so the page is no taller for the room. */
  margin-top: calc(-1 * var(--gap));
  transform: translateY(calc(var(--gap) * (1 - var(--slide-t))));
  will-change: transform;
}
.hero-shot-wrap { padding-bottom: 40px; }
.reveal .shot-hero { margin-top: 0; transform: scale(var(--shot-scale)); transform-origin: 50% 0; will-change: transform; }
/* Hidden until the picture has loaded and decoded, so it never paints half
   drawn; its width and height attributes keep its space meanwhile. Only with
   the script (html.js, set in the head), which is what reveals it. */
.js .shot-hero img, .js .shot-hero::before { transition: opacity 0.45s ease-out; }
.js .shot-hero:not(.is-loaded) img, .js .shot-hero:not(.is-loaded)::before { opacity: 0; }
/* The glow comes up halfway through the window's fade, and slower, as if the
   window lit it. */
.js .shot-hero.is-loaded::before { transition: opacity 0.9s ease-out 0.225s; }
/* As the window first comes up from under the fold it hops: the nudge to
   scroll. 0.45s after load, and at once when the page returns to the top
   (script.js). On `translate`, since `transform` is the scroll's. */
.reveal.is-arriving .shot-hero { animation: reveal-bump 0.6s ease-in-out var(--bump-delay, 0.45s); }
@keyframes reveal-bump { 50% { translate: 0 -14px; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { --gap: 0px !important; --slide-t: 1 !important; --shot-scale: 1 !important; }
}

/* ─────────────────────────── sections ─────────────────────────── */

.section { padding: clamp(72px, 10vw, 120px) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.kicker { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); margin: 0 0 12px; }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 14px; max-width: 22ch; }
.section-title em { font-style: normal; color: var(--accent-text); }
.section-lede { font-size: 18px; color: var(--text-dim); max-width: 40em; margin: 0 0 44px; text-wrap: pretty; }
.footnote { font-size: 13px; color: var(--text-faint); max-width: 56em; margin: 20px 0 0; }
.center { text-align: center; margin-inline: auto; }

.split { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.prose p { color: var(--text-dim); margin: 0 0 1em; font-size: 18px; }
.prose p:last-child { margin-bottom: 0; }

/* ── race ── */

.race {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px clamp(16px, 3vw, 28px) 24px; box-shadow: var(--shadow-sm);
}
.race-head { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text-faint); margin-bottom: 14px; }
.race-row { display: grid; grid-template-columns: 170px 1fr 70px; align-items: center; gap: 14px; padding: 9px 0; }
.race-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.race-name img { border-radius: 4px; }
.race-track { height: 14px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.race-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--text-faint); opacity: 0.55; }
.is-us .race-fill { background: linear-gradient(90deg, #e0a030, #d64161 55%, #2b9eb3); opacity: 1; }
.race-time { font-family: var(--mono); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.is-done .race-time { color: var(--text); font-weight: 600; }
.is-us.is-done .race-time { color: var(--accent-text); }
@media (max-width: 560px) { .race-row { grid-template-columns: 1fr 64px; } .race-track { grid-column: 1 / -1; grid-row: 2; } }

.table-wrap { overflow-x: auto; margin-top: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.bench { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.bench th, .bench td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.bench th { font-weight: 600; font-size: 12.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.bench tr:last-child td { border-bottom: 0; }
.bench .num { text-align: right; font-variant-numeric: tabular-nums; }
.bench .us { color: var(--accent-text); font-weight: 650; }

/* ── how ── */

.how { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.how li { position: relative; padding: 24px 24px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.how-num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft);
}
.how h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.how p { margin: 0; font-size: 15px; color: var(--text-dim); }

/* ── cards ── */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.card-icon {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; margin-bottom: 16px;
  background: var(--accent-soft); color: var(--accent-text);
}
.card:nth-child(5n+2) .card-icon { background: rgba(43, 158, 179, 0.13); color: var(--teal); }
.card:nth-child(5n+3) .card-icon { background: rgba(46, 158, 107, 0.13); color: #2e9e6b; }
.card:nth-child(5n+4) .card-icon { background: rgba(214, 65, 97, 0.12); color: #d64161; }
.card:nth-child(5n+5) .card-icon { background: rgba(63, 114, 175, 0.14); color: #4a82c4; }
.card-icon svg { width: 20px; height: 20px; }
.card h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.card p { margin: 0; font-size: 15px; color: var(--text-dim); }

/* ── pricing ── */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 18px; justify-content: center; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.plan { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-direction: column; }
.plan-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 60px -30px rgba(201, 138, 23, 0.55); }
.plan h3 { margin: 0; font-size: 15px; font-weight: 650; color: var(--text-dim); }
.plan-price { font-size: 46px; font-weight: 600; letter-spacing: -0.035em; margin: 6px 0 0; line-height: 1.1; }
.plan-price small { font-size: 15px; font-weight: 500; color: var(--text-faint); letter-spacing: 0; }
.plan-sub { font-size: 14px; color: var(--text-faint); margin: 4px 0 20px; }
.ticks { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.ticks li { position: relative; padding: 6px 0 6px 28px; font-size: 15px; color: var(--text-dim); }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 11px; width: 14px; height: 8px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.ticks b { color: var(--text); }

/* ── faq ── */

.faq details { border-bottom: 1px solid var(--border); }
.faq details:first-child { border-top: 1px solid var(--border); }
.faq summary {
  text-wrap: balance; cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative;
  font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(45deg);
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details p { margin: -6px 0 22px; color: var(--text-dim); font-size: 16px; max-width: 42em; }
.faq a { color: var(--accent-text); }

/* ── final ── */

.final { padding: clamp(80px, 11vw, 130px) 0; text-align: center; position: relative; overflow: hidden; }
.final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40% 60% at 50% 40%, rgba(224, 160, 48, 0.14), transparent 70%);
}
.final-inner img { margin: 0 auto 22px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25)); }
.final h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.035em; line-height: 1.08; margin: 0 0 12px; font-weight: 600; }
.final p { color: var(--text-dim); font-size: 18px; margin: 0 0 30px; }

/* ── footer ── */

.site-footer { padding: 48px 0 52px; border-top: 1px solid var(--border); background: var(--bg-alt); font-size: 14.5px; }
.footer-inner { display: flex; flex-direction: column; gap: 30px; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; margin: 0; }
.footer-brand img { border-radius: 5px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 28px 80px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-h { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 2px; }
.footer-col a { color: var(--text-dim); text-decoration: none; }
.footer-col a:hover { color: var(--text); text-decoration: underline; }
.footer-about {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  padding-top: 28px; border-top: 1px solid var(--border);
}
.footer-maker { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-faint); text-decoration: none; }
.footer-maker:hover { color: var(--text); }
/* The icon carries its own dark disc, so it reads on either background. */
.footer-maker img { display: block; border-radius: 50%; }
.footer-note { font-size: 13.5px; color: var(--text-faint); margin: 0; max-width: 68ch; }
.footer-note a { color: inherit; }

/* ── subpages: privacy, terms, download/thanks ── */

.hero-sub { padding: 64px 0 24px; }
.hero-sub .hero-copy { text-align: left; max-width: 760px; }
.hero-sub h1 { margin: 0 0 18px; max-width: none; font-size: clamp(2rem, 4.4vw, 3rem); }
.hero-sub .lede { margin: 0; max-width: 40em; }
.hero-sub::before { opacity: 0.6; }
.crumb { font-size: 14px; color: var(--text-faint); margin: 0 0 14px; }
.crumb a { color: var(--accent-text); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.legal { padding: 24px 0 96px; }
.legal .wrap { max-width: 760px; }
.legal h2 { font-size: 1.45rem; letter-spacing: -0.02em; margin: 48px 0 12px; }
.legal p, .legal li { color: var(--text-dim); font-size: 16.5px; }
.legal p { margin: 0 0 1em; }
.legal ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal li { margin: 0 0 0.6em; }
.legal li b, .legal p b { color: var(--text); font-weight: 600; }
.legal a:not(.btn):not(.card) { color: var(--accent-text); }
.legal .updated { font-size: 14px; color: var(--text-faint); margin-top: 48px; }
.legal address { font-style: normal; color: var(--text-dim); font-size: 16px; line-height: 1.7; }
.cta-left { justify-content: flex-start; margin-top: 26px; }
.legal h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }

/* Changelog: one article per release. */
.release { padding: 8px 0 36px; border-bottom: 1px solid var(--border); margin-bottom: 36px; scroll-margin-top: 80px; }
.release h2 { margin-top: 10px; }
.release-lede { font-size: 18px; }
.rung {
  display: inline-block; margin: 0; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border);
}
.rung-major { color: var(--accent-text); background: var(--accent-soft); border-color: transparent; }
.release-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* The changelog's filter bar, from subtitles-site: sticky under the header,
   pills that are checkboxes, one line under them that is either the state or
   the way out of it. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-sub:has(+ .relfilter) { padding-bottom: 16px; }
.relfilter {
  position: sticky; top: 60px; z-index: 40;   /* under the header's 50 */
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.relfilter.is-stuck { border-bottom-color: var(--border); }
.relfilter-inner { display: grid; justify-items: start; gap: 7px; padding-block: 12px; max-width: 760px; }
.relfilter-set { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.relchip {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 11px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text-dim); font-size: 14px; font-weight: 500; line-height: 1.2;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.relchip:hover { color: var(--text); border-color: var(--accent); }
/* The input carries the state and the focus; the pill is the picture of it. */
.relchip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* Off is a dotted ring waiting to be filled, on is filled. */
.relchip-box {
  display: grid; place-items: center; flex: none; width: 17px; height: 17px;
  border: 2px dotted var(--text-faint); border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.relchip:hover .relchip-box { border-color: var(--accent); }
.relchip-box::after {
  content: ""; width: 10px; height: 10px; background: var(--btn-fg); opacity: 0; transform: scale(0.5);
  transition: opacity 0.12s ease, transform 0.12s ease;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / contain no-repeat;
}
.relchip input:checked ~ .relchip-box { background: var(--accent); border-style: solid; border-color: var(--accent); }
.relchip input:checked ~ .relchip-box::after { opacity: 1; transform: scale(1); }
.relchip:has(input:checked) { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent); }
/* A rung with no releases yet: nothing to show or hide. */
.relchip:has(input:disabled) { opacity: 0.5; cursor: default; }
.relchip:has(input:disabled):hover { color: var(--text-dim); border-color: var(--border-strong); }
.relchip:has(input:disabled):hover .relchip-box { border-color: var(--text-faint); }
/* The sole survivor: still checked, but nothing left to offer a click. */
.relchip.is-locked { cursor: default; }
/* A refused click shakes its head, small and damped. */
@keyframes relchip-refuse {
  0%, 100% { transform: translateX(0); }
  16% { transform: translateX(-4px); }
  42% { transform: translateX(3px); }
  68% { transform: translateX(-2px); }
  88% { transform: translateX(1px); }
}
.relchip.is-refused { animation: relchip-refuse 0.36s ease-out; }
.relchip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.relchip-n { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-faint); }
.relchip:has(input:checked) .relchip-n { color: var(--accent-text); opacity: 0.72; }
.relfilter-note { margin: 0; font-size: 13.5px; line-height: 1.4; }
.relfilter-note #relall { color: var(--text-faint); }
.relfilter-note [hidden] { display: none; }
.relfilter-reset { padding: 0; border: 0; background: none; font: inherit; color: var(--accent-text); cursor: pointer; }
.relfilter-reset:hover { text-decoration: underline; }
.release[hidden] { display: none; }
/* Without the head script's js class the pills would do nothing. */
html:not(.js) .relfilter { display: none; }
@media (prefers-reduced-motion: reduce) {
  .relchip, .relchip-box, .relchip-box::after { transition: none; }
  .relchip.is-refused { animation: none; }
  .relchip.is-refused .relchip-box { border-color: var(--text); }
}

/* Numbered install steps, the numbers in the accent like the "how" list. */
.steps { list-style: none; padding: 0; margin: 24px 0 8px; counter-reset: step; }
.steps li { position: relative; padding: 0 0 22px 48px; margin: 0; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft);
}
.steps li p { margin: 0; }

.shot-window { margin: 20px 0 8px; }
.shot-window figcaption { margin-top: 12px; font-size: 14px; color: var(--text-faint); text-align: center; }

.cards-links { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 18px; }
.cards-links .card { color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.cards-links .card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cards-links .card p { font-size: 15px; }

@media (max-width: 720px) {
  .nav { display: none; }
  .wrap { padding: 0 16px; }
  .hero { padding-top: 40px; }
}