/* ===========================================================================
   Hourmark website — design system.

   Two rules shape everything here.

   1. No external requests. No web fonts, no CDN, no analytics, no remote
      images. A product whose pitch is "your browsing stays yours" must not
      phone anywhere on load, and it means the site needs no cookie banner:
      the only thing ever stored is the light/dark choice in localStorage.

   2. The night belongs to the brand, not to the theme. "Owl studying at
      night" is Hourmark's identity, so the atmospheric bands (`.band--night`)
      stay deep navy in BOTH themes, the way a hero photograph would. Content
      sections follow the theme around them. That keeps the identity intact in
      light mode instead of making light mode a different product.
   =========================================================================== */

:root {
  /* Night — fixed, used by .band--night in both themes */
  --night-900: #070a16;
  --night-800: #0b1024;
  --night-700: #121936;
  --night-600: #1b2450;
  --moon: #cfd8ff;
  --star: #e8edff;

  /* Brand */
  --indigo: #5457e5;
  --indigo-bright: #8b8cf8;
  --violet: #8b5cf6;
  --teal: #22d3a7;
  --teal-deep: #0f9b7c;

  /* Light theme surfaces */
  --bg: #f7f8fc;
  --bg-soft: #eef1f8;
  --panel: #ffffff;
  --ink: #131a2c;
  --ink-soft: #38415a;
  --muted: #5c6579;
  --line: #e2e6f0;
  --primary: var(--indigo);
  --primary-ink: #4649d6;
  --primary-soft: #ecedfe;
  --accent: var(--teal-deep);
  --accent-soft: #e2f7f1;

  --shadow-sm: 0 2px 8px rgba(20, 26, 48, .05);
  --shadow-md: 0 12px 32px rgba(20, 26, 48, .09);
  --shadow-lg: 0 28px 70px rgba(20, 26, 48, .16);

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1180px;
}

:root[data-theme='dark'] {
  --bg: #0d1019;
  --bg-soft: #121622;
  --panel: #161b28;
  --ink: #eef0f7;
  --ink-soft: #c3c9da;
  --muted: #98a1b8;
  --line: #262d3e;
  --primary: var(--indigo-bright);
  --primary-ink: #a5a6fb;
  --primary-soft: #1e2138;
  --accent: var(--teal);
  --accent-soft: #14261f;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 72px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0d1019; --bg-soft: #121622; --panel: #161b28;
    --ink: #eef0f7; --ink-soft: #c3c9da; --muted: #98a1b8; --line: #262d3e;
    --primary: #8b8cf8; --primary-ink: #a5a6fb; --primary-soft: #1e2138;
    --accent: #22d3a7; --accent-soft: #14261f;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
    --shadow-md: 0 12px 32px rgba(0,0,0,.45);
    --shadow-lg: 0 30px 72px rgba(0,0,0,.6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* clip, not hidden: overflow-x set to anything but visible while overflow-y is left
     unset forces the browser to compute overflow-y as auto too, turning body into an
     unintended scroll container — which is what was breaking position: sticky for every
     descendant on the page (the privacy page's table of contents included). clip prevents
     the same horizontal bleed without ever establishing a scroll container. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: -.028em; line-height: 1.18; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 880px; }
.hero-grid > *, .grid-3 > *, .grid-2 > *, .split > *, .footer-grid > * { min-width: 0; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px;
}
.band--night a:focus-visible, .band--night button:focus-visible { outline-color: var(--moon); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-md);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Night band ---------------------------------------------------------
   The moonlit study atmosphere. Built from CSS gradients and a tiled SVG star
   field so nothing is downloaded and it stays crisp at any size. */
.band--night {
  position: relative; isolation: isolate; color: #eaeeff;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(139, 92, 246, .28), transparent 62%),
    radial-gradient(760px 420px at 8% 12%, rgba(34, 211, 167, .12), transparent 60%),
    linear-gradient(178deg, var(--night-800) 0%, var(--night-700) 46%, var(--night-900) 100%);
}
/* Stars: two offset layers so the field does not read as a regular grid. */
.band--night::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 62% 14%, var(--star), transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 42%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 34% 62%, var(--star), transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 78%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 72% 82%, var(--star), transparent 60%),
    radial-gradient(1.3px 1.3px at 46% 34%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 92% 68%, var(--star), transparent 60%);
  background-size: 620px 420px, 460px 380px, 720px 500px, 540px 460px, 680px 520px, 500px 400px, 600px 440px, 560px 480px;
}
/* A soft moon glow and a horizon so the band has depth rather than being flat. */
.band--night::after {
  content: ''; position: absolute; inset: auto 0 0; height: 46%; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(7, 10, 22, .92), transparent);
}
.band--night h1, .band--night h2, .band--night h3 { color: #fbfcff; }
.band--night p { color: #b9c2e0; }
.band--night .eyebrow { color: #a5a6fb; }
.moon {
  position: absolute; top: 64px; right: 8%; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fdfdff, #d8def8 58%, #aeb8e0);
  box-shadow: 0 0 60px 18px rgba(190, 205, 255, .16); z-index: -1; pointer-events: none;
}
@media (max-width: 900px) { .moon { width: 62px; height: 62px; top: 40px; right: 7%; } }

/* ---- Navigation ---------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 16px; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand strong { font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav-links > a, .menu-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border: 0; border-radius: 9px; background: transparent;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.nav-links > a:hover, .menu-trigger:hover { color: var(--ink); background: var(--bg-soft); }
.nav-links > a[aria-current='page'] { color: var(--primary); background: var(--primary-soft); }
.menu-trigger svg { width: 14px; height: 14px; transition: transform .15s ease; }
.menu[data-open='true'] .menu-trigger svg { transform: rotate(180deg); }
.menu { position: relative; }
.menu-panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 208px; z-index: 5;
  display: none; flex-direction: column; gap: 1px; padding: 7px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); box-shadow: var(--shadow-md);
}
.menu[data-open='true'] .menu-panel { display: flex; }
.menu-panel a {
  padding: 9px 11px; border-radius: 8px; color: var(--ink-soft);
  text-decoration: none; font-size: 14px; font-weight: 600;
}
.menu-panel a:hover { color: var(--primary); background: var(--primary-soft); }
.nav-actions { display: flex; align-items: center; gap: 9px; flex: none; }

.icon-btn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--muted); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
[data-theme='dark'] .sun-icon, .moon-icon { display: none; }
[data-theme='dark'] .moon-icon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .sun-icon { display: none; }
  :root:not([data-theme='light']) .moon-icon { display: block; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 20px; height: 46px; border-radius: 12px; border: 1px solid transparent;
  font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--indigo); color: #fff; box-shadow: 0 8px 22px rgba(84, 87, 229, .28); }
.btn--primary:hover { background: var(--primary-ink); }
.btn--ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.band--night .btn--ghost {
  background: rgba(255, 255, 255, .07); color: #f2f5ff; border-color: rgba(207, 216, 255, .28);
}
.band--night .btn--ghost:hover { background: rgba(255, 255, 255, .13); border-color: var(--moon); color: #fff; }
.btn--sm { height: 40px; padding: 0 15px; font-size: 14px; border-radius: 10px; }
.btn--lg { height: 54px; padding: 0 28px; font-size: 16.5px; }
.btn--block { width: 100%; }
/* A button that cannot act has to look like it. Without this the pending Continue on /support
   renders identically to a live one and invites a click that does nothing. */
.btn:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
.btn--primary:disabled:hover { background: var(--indigo); }
.nav-toggle { display: none; }

@media (max-width: 1040px) {
  .nav-links {
    display: none; position: absolute; inset: 70px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 24px 22px; background: var(--bg); border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }
  .nav-links > a, .menu-trigger { padding: 12px; font-size: 15px; width: 100%; justify-content: space-between; }
  .menu-panel { position: static; display: flex; border: 0; box-shadow: none; padding: 2px 0 6px 12px; background: transparent; }
  .menu-panel a { padding: 10px 12px; }
  .nav-toggle { display: grid; }
  .nav-cta-mobile { display: flex; margin-top: 10px; }
  .nav-actions .btn--nav { display: none; }
}
.nav-cta-mobile { display: none; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; padding: 86px 0 96px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 58px; align-items: center; }
.eyebrow {
  display: inline-block; margin-bottom: 18px; color: var(--primary);
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em;
}
.hero h1 { font-size: clamp(36px, 5.1vw, 56px); margin-bottom: 20px; }
.lede { max-width: 34em; font-size: 17.5px; color: var(--muted); }
.band--night .lede { color: #b9c2e0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 24px; }
.trust-line { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: #9fa9cc; }
.trust-line span { display: inline-flex; align-items: center; gap: 7px; }
.trust-line svg { width: 15px; height: 15px; color: var(--teal); flex: none; }

.preview { position: relative; }
.browser {
  border: 1px solid rgba(207, 216, 255, .16); border-radius: var(--radius); overflow: hidden;
  background: var(--night-700); box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
}
.browser-bar {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(207, 216, 255, .12);
}
.browser-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(207, 216, 255, .22); flex: none; }
.browser-url {
  flex: 1; height: 24px; margin-left: 8px; padding: 0 10px; border-radius: 7px;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(207, 216, 255, .1);
  color: #9fa9cc; font-size: 11px;
}
.browser-fallback {
  aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 24px; text-align: center;
  color: #8e99bd; font-size: 13px; background: rgba(0, 0, 0, .2);
}
/* Two screenshots ship, light and dark, and the theme toggle picks which one is in the
   document flow. Same attribute pattern as the backdrop, so both follow the same switch —
   pressing the toggle changes the painting behind the page and the product shot inside it
   together, never one without the other. */
.browser img[data-screenshot-light] { display: none; }
:root[data-theme='light'] .browser img[data-screenshot-dark] { display: none; }
:root[data-theme='light'] .browser img[data-screenshot-light] { display: block; }

/* Every screenshot in the README's feature tour ships as a matched dark/light pair, captured
   from the same seeded preview data so a reader toggling the theme sees the same numbers and
   course names, just re-skinned — not a different moment frozen in a different screenshot. */
.readme-shot img[data-screenshot-light] { display: none; }
:root[data-theme='light'] .readme-shot img[data-screenshot-dark] { display: none; }
:root[data-theme='light'] .readme-shot img[data-screenshot-light] { display: block; }

/* The README's "Light and dark" demo is the one place that shows the OPPOSITE of the
   page's current theme on purpose — the point of that section is proving the other mode
   exists, and the reader is already looking at the one that matches the page. */
img[data-inverse-shot-dark] { display: none; }
:root[data-theme='light'] img[data-inverse-shot-dark] { display: block; }
:root[data-theme='light'] img[data-inverse-shot-light] { display: none; }
.owl-peek {
  position: absolute; left: -40px; bottom: -30px; width: 112px; height: 112px; object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5)); pointer-events: none;
}
@media (max-width: 980px) {
  .hero { padding: 56px 0 66px; }
  .hero-grid { grid-template-columns: 1fr; gap: 42px; }
  /* On the stacked layout the owl used to sit two-thirds on top of the screenshot, covering the
     dashboard's sidebar. Below the frame it still peeks without hiding the product. */
  .owl-peek { width: 74px; height: 74px; left: 6px; bottom: -52px; }
}

/* ---- Sections ------------------------------------------------------------ */
.section { padding: 84px 0; }
.section--line { border-top: 1px solid var(--line); }
.section--soft { background: var(--bg-soft); }
.section-head { max-width: 660px; margin-bottom: 44px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(27px, 3.5vw, 36px); margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 16.5px; }
.band--night .section-head p { color: #b9c2e0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 940px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  padding: 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 9px;
}
.card h3 { font-size: 17px; }
.card p { color: var(--muted); font-size: 14.5px; }
.card--link { text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.card--link:hover { border-color: var(--primary); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } }
.card-icon {
  width: 44px; height: 44px; margin-bottom: 6px; display: grid; place-items: center;
  border-radius: 13px; background: var(--primary-soft); color: var(--primary);
}
.card-icon svg { width: 21px; height: 21px; }
.card-icon--teal { background: var(--accent-soft); color: var(--accent); }
.step-no { font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--primary); }

/* Alternating feature rows with a real screenshot beside the copy. */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; padding: 44px 0; }
.split + .split { border-top: 1px solid var(--line); }
.split--flip .split__media { order: -1; }
.split h3 { font-size: 24px; margin-bottom: 12px; }
.split p { color: var(--muted); }
.split__media img, .split__media .browser-fallback {
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); background: var(--bg-soft);
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 26px; padding: 32px 0; }
  .split--flip .split__media { order: 0; }
}

.pill-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pill-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-soft); font-size: 14.5px; }
.pill-list svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 3px; }

/* ---- Privacy band -------------------------------------------------------- */
.shield {
  width: 56px; height: 56px; margin-bottom: 22px; display: grid; place-items: center;
  border-radius: 16px; background: rgba(34, 211, 167, .14); color: var(--teal);
}
.shield svg { width: 27px; height: 27px; }
.trust-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.trust-points li {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  border: 1px solid rgba(207, 216, 255, .14); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .04);
}
.trust-points svg { width: 19px; height: 19px; color: var(--teal); flex: none; margin-top: 2px; }
.trust-points strong { display: block; font-size: 15px; color: #f2f5ff; }
.trust-points span { color: #b9c2e0; font-size: 14px; }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
  padding: 4px 20px;
}
.faq summary {
  padding: 16px 0; cursor: pointer; font-weight: 700; font-size: 15.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--primary); font-size: 20px; font-weight: 700; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq p { padding: 14px 0 18px; color: var(--muted); font-size: 15px; }

/* ---- Support ------------------------------------------------------------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 780px) { .tier-grid { grid-template-columns: 1fr; } }
.tier {
  padding: 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); text-align: center; display: flex; flex-direction: column; gap: 8px;
}
.tier strong { font-size: 30px; letter-spacing: -.04em; }
.tier h3 { font-size: 16px; }
.tier p { color: var(--muted); font-size: 14px; }
.notice {
  margin: 24px 0 0; padding: 16px 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-soft); font-size: 14.5px;
}
.notice strong { color: var(--ink); }
.fineprint { margin-top: 12px; color: var(--muted); font-size: 13px; }

/* ---- Changelog ----------------------------------------------------------- */
.release { padding: 30px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 34px; }
.release:first-of-type { border-top: 0; }
@media (max-width: 820px) { .release { grid-template-columns: 1fr; gap: 14px; } }
.release__meta strong { display: block; font-size: 19px; }
.release__meta time { color: var(--muted); font-size: 13.5px; }
.release h3 { font-size: 20px; margin-bottom: 14px; }
.change-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.change-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); font-size: 15px; }
.tag {
  flex: none; min-width: 74px; padding: 3px 9px; border-radius: 999px; text-align: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.tag--new { background: var(--primary-soft); color: var(--primary-ink); }
.tag--improved { background: var(--accent-soft); color: var(--accent); }
.tag--fixed { background: rgba(250, 204, 21, .16); color: #8a6d09; }
[data-theme='dark'] .tag--fixed { color: #fde047; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tag--fixed { color: #fde047; } }
.badge-current {
  display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
}

/* ---- Help search --------------------------------------------------------- */
.search-box {
  display: flex; align-items: center; gap: 11px; max-width: 520px; margin: 0 auto;
  padding: 0 16px; height: 52px; border-radius: 14px;
  border: 1px solid rgba(207, 216, 255, .2); background: rgba(255, 255, 255, .06);
}
.search-box svg { width: 19px; height: 19px; color: #9fa9cc; flex: none; }
.search-box input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: #f2f5ff; font: inherit; font-size: 15px;
}
.search-box input::placeholder { color: #8e99bd; }
.no-results { text-align: center; color: var(--muted); padding: 30px 0; }

/* ---- Policy page --------------------------------------------------------- */
.policy-meta { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 26px; font-size: 14px; }
.policy-meta div { display: flex; flex-direction: column; gap: 2px; }
.policy-meta dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.policy-meta dd { margin: 0; font-weight: 650; color: var(--ink); }
.summary-card {
  margin-top: 32px; padding: 22px 24px; border-radius: var(--radius-sm);
  border: 1px solid rgba(207, 216, 255, .16); border-left: 3px solid var(--indigo-bright);
}
.summary-card strong { display: block; margin-bottom: 6px; color: var(--ink); }
/* Keep the aside stretched to the article's height so the sticky <details> wrapper has the
   full policy column as its travel area. The wrapper—not the nav inside it—must be sticky:
   an auto-height <details> would otherwise constrain its sticky child to its own short box. */
.policy-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 56px; padding: 48px 0 90px; }
@media (max-width: 980px) { .policy-layout { grid-template-columns: 1fr; gap: 26px; } }
/* The sidebar sits over a photograph now, not a flat colour, so it needs its own opaque
   surface at every width — not just the collapsed mobile <details> card it already had. */
.toc-details { position: sticky; top: 100px; }
.toc {
  padding: 16px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel);
}
.toc-details > summary, .toc-details[open] > summary { display: none; }
.toc h4 { margin: 0 0 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.toc a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.toc a:hover { color: var(--ink); background: var(--bg-soft); }
.toc a.is-current { color: var(--primary); background: var(--primary-soft); font-weight: 650; }
@media (max-width: 980px) {
  /* The <details> becomes the one card here, so .toc itself goes back to plain — otherwise
     it is a bordered panel nested inside the <details>'s own bordered panel. */
  .toc { padding: 0; border: 0; background: transparent; }
  .toc-details { position: static; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 4px 10px; }
  .toc-details > summary, .toc-details[open] > summary { display: list-item; padding: 13px 6px; font-weight: 700; cursor: pointer; }
  .toc-details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 6px; }
  .toc h4 { display: none; }
}
.policy { max-width: 760px; padding-bottom: 34vh; }
.policy section { scroll-margin-top: 96px; padding-bottom: 40px; }
.policy h2 { font-size: 23px; margin: 0 0 14px; }
.policy h3 { font-size: 16px; margin: 24px 0 8px; }
.policy p { color: var(--ink-soft); margin-bottom: 14px; }
.policy ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink-soft); }
.policy li { margin: 7px 0; }
.policy code { padding: 2px 6px; border-radius: 6px; font-size: 13.5px; background: var(--bg-soft); border: 1px solid var(--line); }
.note { margin: 18px 0; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-soft); font-size: 14.5px; color: var(--ink-soft); }
.note strong { color: var(--ink); }
.placeholder { padding: 1px 7px; border-radius: 5px; font-weight: 700; font-size: 13.5px; background: var(--primary-soft); color: var(--primary-ink); border: 1px dashed var(--primary); }
.policy table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 14.5px; }
.policy th, .policy td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.policy th { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; }
.policy td:first-child { width: 34%; font-weight: 650; color: var(--ink); }
@media (max-width: 620px) {
  .policy table, .policy tbody, .policy tr, .policy td { display: block; width: 100%; }
  .policy thead { display: none; }
  .policy tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .policy td { border: 0; padding: 2px 0; }
  .policy td:first-child { width: auto; }
}

/* ---- Page hero (inner pages) --------------------------------------------- */
.page-hero { position: relative; padding: 66px 0 58px; overflow: hidden; text-align: center; }
.page-hero h1 { font-size: clamp(31px, 4.4vw, 44px); margin-bottom: 15px; }
.page-hero p { max-width: 42em; margin: 0 auto; font-size: 17px; }
.page-hero--left { text-align: left; }
.page-hero--left p { margin: 0; }

/* ---- Final CTA ----------------------------------------------------------- */
.cta { position: relative; padding: 92px 0; overflow: hidden; text-align: center; }
.cta h2 { font-size: clamp(29px, 3.8vw, 40px); margin-bottom: 14px; }
.cta p { font-size: 17.5px; margin-bottom: 30px; }
.cta-owl { width: 92px; height: 92px; margin: 0 auto 24px; object-fit: contain; filter: drop-shadow(0 14px 28px rgba(0,0,0,.45)); }

/* ---- Footer -------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding: 58px 0 40px; background: var(--bg-soft); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer p { color: var(--muted); font-size: 14px; max-width: 32em; margin-top: 12px; }
.footer h4 { margin: 0 0 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer ul a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.footer ul a:hover { color: var(--primary); text-decoration: underline; }
.footer-base {
  margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  color: var(--muted); font-size: 13px;
}
.disclaimer { max-width: 60em; }

/* ---- Design system page -------------------------------------------------- */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.swatch { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); }
.swatch i { display: block; height: 76px; }
.swatch span { display: block; padding: 10px 12px; font-size: 12.5px; }
.swatch span b { display: block; font-size: 13px; }
.swatch span code { font-size: 11.5px; color: var(--muted); }
.spec { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.spec:first-of-type { border-top: 0; }
.spec > .spec__label { width: 170px; flex: none; color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------------------
   Night-study atmosphere. Built from CSS gradients and one inline SVG star
   field rather than photographs: it stays original, weighs nothing, themes
   itself, and keeps the promise that this site makes no external requests.
   --------------------------------------------------------------------------- */
.night {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% -10%, rgba(139,140,248,.20), transparent 58%),
    radial-gradient(90% 70% at 8% 6%, rgba(34,211,167,.10), transparent 55%),
    linear-gradient(178deg, var(--bg) 0%, var(--bg-soft) 100%);
}
:root[data-theme='dark'] .night,
:root:not([data-theme='light']) .night {
  background:
    radial-gradient(120% 90% at 78% -12%, rgba(124,108,245,.28), transparent 60%),
    radial-gradient(80% 60% at 6% 4%, rgba(34,211,167,.10), transparent 55%),
    linear-gradient(178deg, #0b0d13 0%, #12151d 62%, var(--bg) 100%);
}
/* Stars only exist in the dark theme — a starfield on a white page reads as dust. */
.night::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 27% 9%, rgba(199,205,245,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 24%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.1px 1.1px at 58% 12%, rgba(169,232,212,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 69% 28%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 83% 15%, rgba(199,205,245,.65), transparent 60%),
    radial-gradient(1.3px 1.3px at 92% 32%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.1px 1.1px at 34% 40%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 76% 46%, rgba(169,232,212,.5), transparent 60%);
}
:root[data-theme='dark'] .night::before,
:root:not([data-theme='light']) .night::before { opacity: 1; }
/* A soft moon behind the product preview, giving the hero depth without an image. */
.night::after {
  content: ''; position: absolute; top: -160px; right: -120px;
  width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(139,140,248,.22), transparent 62%);
}
.night > * { position: relative; z-index: 1; }

/* ---- Owl companion ------------------------------------------------------- */
.owl-companion { display: flex; align-items: center; gap: 16px; }
.owl-companion img { width: 92px; height: 92px; object-fit: contain; flex: none; }
.owl-companion p { color: var(--muted); font-size: 14.5px; }
.owl-inline { width: 74px; height: 74px; object-fit: contain; }

/* ---- Page hero (shared by the inner pages) ------------------------------- */
.page-hero { padding: 66px 0 44px; }
.page-hero h1 { font-size: clamp(31px, 4.2vw, 42px); margin-bottom: 14px; }
.page-hero p { color: var(--muted); font-size: 17px; max-width: 44em; }
.page-hero-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ---- Help centre --------------------------------------------------------- */
.help-search { margin: 26px 0 4px; max-width: 460px; position: relative; }
.help-search input {
  width: 100%; height: 48px; padding: 0 16px 0 44px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--ink); font: inherit;
}
.help-search input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.help-search svg { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; color: var(--muted); }
.guide-card { text-decoration: none; transition: border-color .14s ease, transform .14s ease; }
.guide-card:hover { border-color: var(--primary); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .guide-card:hover { transform: none; } }
.guide-card h3 { color: var(--ink); }
.guide-card .soon { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.no-results { color: var(--muted); font-size: 15px; padding: 22px 2px; }

/* ---- Changelog ----------------------------------------------------------- */
.release { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 32px; padding: 34px 0; border-top: 1px solid var(--line); }
.release:first-of-type { border-top: 0; padding-top: 6px; }
@media (max-width: 780px) { .release { grid-template-columns: 1fr; gap: 14px; } }
.release-meta strong { display: block; font-size: 19px; }
.release-meta time { color: var(--muted); font-size: 13.5px; }
.release-body h3 { font-size: 19px; margin-bottom: 14px; }
.change-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.change-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-soft); font-size: 14.5px; }
.tag {
  flex: none; min-width: 62px; text-align: center; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.tag--new { background: var(--primary-soft); color: var(--primary-ink); }
.tag--improved { background: var(--mint-soft); color: var(--mint); }
.tag--fixed { background: rgba(250,204,21,.16); color: #8a6d09; }
:root[data-theme='dark'] .tag--fixed { color: #fde047; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tag--fixed { color: #fde047; } }

/* ---- Support tiers ------------------------------------------------------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 6px 0 26px; }
@media (max-width: 780px) { .tier-grid { grid-template-columns: 1fr; } }
.tier { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); text-align: center; }
.tier strong { display: block; font-size: 27px; letter-spacing: -.03em; }
.tier span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.faq summary { padding: 17px 20px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq p { padding: 0 20px 18px; color: var(--muted); font-size: 14.5px; }

/* ---- Inline notice ------------------------------------------------------- */
.notice { padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink-soft); font-size: 14.5px; }
.notice strong { color: var(--ink); }

/* ---- Nav: dropdown, quiet button, responsive swaps ----------------------- */
.btn--quiet { background: transparent; color: var(--muted); border-color: transparent; }
.btn--quiet:hover { color: var(--ink); background: var(--bg-soft); }

/* The Help menu is a <details>, so it opens and closes with no JavaScript and
   is keyboard-operable for free. */
.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 600;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover { color: var(--ink); background: var(--bg-soft); }
.nav-menu > summary svg { width: 14px; height: 14px; transition: transform .15s ease; }
.nav-menu[open] > summary svg { transform: rotate(180deg); }
.nav-menu__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 186px;
  display: flex; flex-direction: column; gap: 1px; padding: 7px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--panel);
  box-shadow: var(--shadow-md);
}
.nav-menu__panel a { padding: 9px 11px; border-radius: 8px; font-size: 14px; }

.nav-links > .nav-only-mobile, .nav-only-mobile { display: none; }
@media (max-width: 1040px) {
  .nav-desktop { display: none; }
  .nav-links > .nav-only-mobile, .nav-only-mobile { display: flex; }
  .nav-only-mobile.btn { justify-content: center; margin-top: 8px; }
  /* Inside the stacked mobile menu the dropdown becomes a plain inline list. */
  .nav-menu__panel { position: static; box-shadow: none; border: 0; padding: 0 0 0 10px; min-width: 0; }
  .nav-menu > summary { padding: 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .nav-menu > summary svg { transition: none; } }

/* ---- Tip card (/support) -------------------------------------------------
   The support flow is one card: pick an amount, continue. It is deliberately
   the only thing competing for attention on that part of the page, because a
   contribution is optional and should be quick to give or quick to skip. */
.tip-card {
  max-width: 620px; margin: 0 auto; padding: 30px 30px 26px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  text-align: center; box-shadow: 0 18px 46px rgba(19, 26, 44, .07);
}
.tip-card__glyph {
  width: 62px; height: 62px; margin: 2px auto 16px; border-radius: 50%;
  display: grid; place-items: center; color: var(--primary);
  background: var(--primary-soft); box-shadow: 0 0 0 1px rgba(84, 87, 229, .16);
}
.tip-card__glyph svg { width: 28px; height: 28px; }
.tip-card__title { margin: 0 0 22px; font-size: 27px; letter-spacing: -.035em; }

.tip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.tip {
  position: relative; min-height: 112px; padding: 14px 10px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tip:hover { border-color: var(--primary); }
/* The radio stays in the DOM and focusable so the group is keyboard- and screen-reader-navigable;
   the tile itself carries the visible state. */
.tip input[type='radio'] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
.tip strong { font-size: 26px; letter-spacing: -.035em; line-height: 1.1; }
.tip__label { color: var(--muted); font-size: 14px; }
.tip.is-selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary), 0 10px 26px rgba(84, 87, 229, .16); }
.tip.is-selected .tip__label { color: var(--primary); }
.tip__check {
  position: absolute; top: -11px; right: -11px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--indigo);
  opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease;
}
.tip__check svg { width: 14px; height: 14px; }
.tip.is-selected .tip__check { opacity: 1; transform: scale(1); }

.tip--custom { gap: 9px; }
.tip__custom-head { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.tip__pencil { color: var(--primary); display: grid; place-items: center; }
.tip__pencil svg { width: 19px; height: 19px; }
.tip__label--custom { color: var(--ink); font-size: 15px; font-weight: 650; }
.tip.is-selected .tip__label--custom { color: var(--ink); }
.tip__amount {
  display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  color: var(--muted); font-size: 14px; font-weight: 700;
}
.tip__amount input {
  width: 100%; min-width: 0; border: 0; padding: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 15px; text-align: right;
}
.tip__amount input:focus { outline: none; }
.tip--custom:has(input[data-tip-amount]:focus) { border-color: var(--primary); }

.tip-error { margin: 14px 0 0; color: var(--danger, #c94a5d); font-size: 13.5px; font-weight: 650; }
.tip-assurances {
  list-style: none; margin: 22px 0 18px; padding: 16px 0 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  color: var(--muted); font-size: 14.5px;
}
.tip-assurances li { display: inline-flex; align-items: center; gap: 8px; }
.tip-assurances svg { width: 17px; height: 17px; flex: none; }
.tip-assurances__dot { opacity: .5; }
.tip-pending { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

:root[data-theme='dark'] .tip { background: rgba(255, 255, 255, .03); }
:root[data-theme='dark'] .tip.is-selected { background: rgba(139, 140, 248, .12); }
:root[data-theme='dark'] .tip__amount { background: rgba(0, 0, 0, .24); }

@media (max-width: 620px) {
  .tip-card { padding: 24px 18px 22px; }
  .tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .tip-card__title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .tip, .tip__check { transition: none; }
}

/* The hero headline is now the entire message — the eyebrow and the second
   headline were removed — so it carries much more weight and scales larger. */
.hero-title {
  font-size: clamp(44px, 7.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -.045em;
  margin-bottom: 22px;
}
.hero .hero-lede { font-size: 18px; max-width: 26em; }
@media (max-width: 560px) { .hero-title { font-size: clamp(38px, 11vw, 54px); } }

/* ---- README page --------------------------------------------------------
   The project README, published as a page. Long-form prose, so the measure is
   narrow and the screenshots are allowed to breathe. */
.readme { display: flex; flex-direction: column; gap: 18px; }
.readme h2 {
  margin: 22px 0 0; padding-top: 26px; border-top: 1px solid var(--line);
  font-size: 26px;
}
.readme > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.readme h3 { margin: 14px 0 0; font-size: 18.5px; color: var(--ink); }
.readme p { color: var(--ink-soft); font-size: 16px; line-height: 1.75; }
.readme ul, .readme ol { margin: 0; padding-left: 22px; color: var(--ink-soft); line-height: 1.75; }
.readme li { margin: 6px 0; }
.readme li strong, .readme p strong { color: var(--ink); }
.readme code {
  padding: 2px 6px; border-radius: 6px; background: var(--bg-soft);
  color: var(--ink); font-size: 14px;
}
.readme-shot { margin: 6px 0; }
.readme-shot img {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); background: var(--panel);
}
/* The popup shots are 320px artefacts; blowing them up to the measure looks broken. */
.readme-shot--narrow img { width: auto; max-width: min(320px, 100%); margin: 0 auto; }
.readme-table { overflow-x: auto; }
.readme table { width: 100%; border-collapse: collapse; font-size: 15px; }
.readme th, .readme td {
  padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
.readme th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.readme td { color: var(--ink-soft); }
.footer-version { display: inline-block; margin-left: 6px; opacity: .75; }

/* ---- One continuous night --------------------------------------------------
   Previously each atmospheric section painted its own gradient, so every
   section boundary was a visible seam, and a decorative frond layer sat on top
   of that and lined up with nothing. Both are gone.

   The page now has a single fixed backdrop behind everything. Sections are
   transparent, so there is no edge for a gradient to break across no matter how
   tall a page grows or where a section starts. Depth comes from one soft glow
   and a star layer, both fixed to the viewport rather than to any element.
   ---------------------------------------------------------------------------- */
body {
  background: var(--bg);
  position: relative;
}

/* The backdrop. Fixed, full-viewport, behind all content. Light theme gets the
   daylight counterpart of the same reference set — trees, misty ridge and
   leaves framing the edges, transparent through almost the whole middle — so
   the two themes read as one piece of art rather than a painting swapped for
   a flat gradient. Same fixed/cover treatment as the dark layer below, for
   the same reason: nothing here can seam no matter where a section starts. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 80% at 76% -8%, rgba(99, 102, 241, .10), transparent 60%),
    radial-gradient(90% 60% at 4% 2%, rgba(34, 211, 167, .06), transparent 55%),
    url('/assets/bg-forest-day.webp');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, center bottom;
  background-size: cover, cover, cover;
}
/* Dark theme swaps in the night half of the same reference set — moon, ridge
   and leaf silhouettes, transparent through the middle — layered under the
   brand colour glows and over a solid navy so it still covers a viewport
   taller or wider than the source art. Self-hosted, one file, fixed to the
   viewport like the gradients it replaced, so no new seam is possible. */
:root[data-theme='dark'] body::before,
:root:not([data-theme='light']) body::before {
  background-image:
    radial-gradient(130% 85% at 78% -10%, rgba(124, 108, 245, .20), transparent 62%),
    radial-gradient(85% 55% at 3% 1%, rgba(34, 211, 167, .07), transparent 58%),
    url('/assets/bg-forest-night.webp'),
    linear-gradient(180deg, #0a0c11 0%, #0d1016 45%, #0b0e14 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, center bottom, 0 0;
  background-size: cover, cover, cover, cover;
}

/* Stars: one fixed layer for the whole page, light theme only — the dark
   theme's stars now live inside the painting above instead of a second,
   competing CSS starfield. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 14%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.1px 1.1px at 28% 7%, rgba(199,205,245,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 43% 21%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.1px 1.1px at 59% 10%, rgba(169,232,212,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 71% 26%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 86% 13%, rgba(199,205,245,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 34%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 33% 44%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.3px 1.3px at 78% 52%, rgba(169,232,212,.45), transparent 60%),
    radial-gradient(1.1px 1.1px at 18% 68%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 78%, rgba(199,205,245,.4), transparent 60%),
    radial-gradient(1.1px 1.1px at 89% 88%, rgba(255,255,255,.3), transparent 60%);
}

/* Sections no longer paint their own background — that is what created the
   seams. `.night` and `.band--night` become plain transparent containers that
   keep only their text treatment. */
.night, .band--night,
:root[data-theme='dark'] .night, :root:not([data-theme='light']) .night,
:root[data-theme='dark'] .band--night, :root:not([data-theme='light']) .band--night {
  background: transparent;
}
.night::before, .night::after,
.band--night::before, .band--night::after { content: none; }

/* A section that used to be a different colour now only lifts very slightly,
   which reads as depth rather than as a band with two hard edges. */
.section--soft { background: rgba(255, 255, 255, .022); }
:root[data-theme='dark'] .section--soft,
:root:not([data-theme='light']) .section--soft { background: rgba(255, 255, 255, .016); }

/* Panels sit above the backdrop, so they need to be opaque enough to read. */
.card, .tier, .faq details, .notice, .support-card, .cta-card,
.trust-points li, .summary-card, .nav-menu__panel {
  background: var(--panel);
}
:root[data-theme='dark'] .card, :root:not([data-theme='light']) .card,
:root[data-theme='dark'] .tier, :root:not([data-theme='light']) .tier,
:root[data-theme='dark'] .faq details, :root:not([data-theme='light']) .faq details,
:root[data-theme='dark'] .notice, :root:not([data-theme='light']) .notice,
:root[data-theme='dark'] .support-card, :root:not([data-theme='light']) .support-card,
:root[data-theme='dark'] .cta-card, :root:not([data-theme='light']) .cta-card,
:root[data-theme='dark'] .trust-points li, :root:not([data-theme='light']) .trust-points li,
:root[data-theme='dark'] .summary-card, :root:not([data-theme='light']) .summary-card {
  background: rgba(255, 255, 255, .035);
}

/* The sticky header sits on the same darkness rather than its own colour. */
.nav { background: color-mix(in srgb, var(--bg) 82%, transparent); }
:root[data-theme='dark'] .nav,
:root:not([data-theme='light']) .nav { background: rgba(10, 12, 17, .78); }
.footer { background: transparent; }

/* ---- Text colours that assumed a dark band --------------------------------
   The atmospheric sections used to paint their own dark background, so several
   rules hard-coded pale text and a bright teal tick. Now that those sections are
   transparent and sit on the page backdrop, that text lands on a light surface
   in light mode: the trust line measured 2.19:1 and its tick 1.81:1, both well
   under WCAG AA. These use the theme-aware tokens instead, which are already
   contrast-checked in both themes. */
.trust-line { color: var(--muted); }
.trust-line svg { color: var(--mint); }
.band--night h1, .band--night h2, .band--night h3 { color: var(--ink); }
.band--night p, .band--night .lede, .band--night .section-head p { color: var(--muted); }
.band--night .eyebrow { color: var(--primary); }
.band--night .btn--ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.band--night .btn--ghost:hover { background: var(--bg-soft); border-color: var(--primary); color: var(--primary); }

/* ---- Document-style hero (README) -----------------------------------------
   Every other page pairs a centred hero with a full-width grid below it, which
   reads fine. The README's body sits in a narrow reading column, so a centred
   full-width hero put the title and the prose on two different left edges and
   stranded the owl off to one side. This variant shares the body's column and
   its left edge, so the page reads as one document. */
.page-hero--doc { text-align: left; }
.page-hero--doc .page-hero-row { gap: 16px; align-items: center; margin-bottom: 4px; }
.page-hero--doc .owl-inline { width: 58px; height: 58px; }
.page-hero--doc h1 { font-size: clamp(30px, 3.8vw, 40px); }
.page-hero--doc p { max-width: 46em; }
/* Stack the owl above the title so the eyebrow, heading and prose all start on
   the same left edge as the body text. Beside the title it pushed the heading
   ~74px right of the column, which is the offset that made the page feel off. */
.page-hero--doc .page-hero-row { flex-direction: column; align-items: flex-start; gap: 10px; }
.page-hero--doc .page-hero-row > div { width: 100%; }
.page-hero--doc p { margin-left: 0; margin-right: auto; }

/* README is the last nav item and reads as a separate destination from the
   support links beside it, so it gets a little breathing room on its left
   rather than sitting flush against Privacy. */
.nav-links .nav-last { margin-left: 10px; }
@media (max-width: 1040px) { .nav-links .nav-last { margin-left: 0; } }

/* ---- Feedback card ------------------------------------------------------
   One card, centred: an idea and a bug go to the same inbox, so there is
   nothing here to choose between. */
.feedback-card { max-width: 560px; margin: 0 auto; align-items: center; text-align: center; }
.feedback-card .card-icon { margin: 0 auto; }
.feedback-card p { color: var(--muted); font-size: 15px; }
.feedback-card .btn { margin-top: 6px; }
.feedback-card small { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 46ch; }

/* ---- Reveal on scroll ---------------------------------------------------
   Sections lift in as they come into view. The hidden state is applied by
   JavaScript (`.js-reveal` on <html>), never in the stylesheet, so if the
   script fails to run the page is simply static and fully visible instead of
   permanently blank — the usual failure mode of scroll animations. Anything
   already on screen at load reveals immediately, so the first paint is never
   an empty page, and reduced motion opts out entirely. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(14px); }
.js-reveal [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .68, .3, 1);
}
/* Cards in a row arrive one after another rather than all at once. */
.js-reveal [data-reveal].is-in:nth-child(2) { transition-delay: .07s; }
.js-reveal [data-reveal].is-in:nth-child(3) { transition-delay: .14s; }
.js-reveal [data-reveal].is-in:nth-child(4) { transition-delay: .21s; }
.js-reveal [data-reveal].is-in:nth-child(5) { transition-delay: .28s; }
.js-reveal [data-reveal].is-in:nth-child(6) { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* The hero owl waves in once, after the headline has landed. */
.owl-peek { animation: owl-arrive .7s cubic-bezier(.22, .68, .3, 1) .35s both; }
@keyframes owl-arrive {
  from { opacity: 0; transform: translateY(16px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
/* Cards and tips respond to the pointer, so the page feels alive under the hand. */
.card, .tip { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tip:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .owl-peek { animation: none; }
  .card, .tip { transition: none; }
  .card:hover, .tip:hover { transform: none; }
}

/* ---- Feedback modal -----------------------------------------------------
   A native <dialog>, so Esc, the backdrop and focus trapping are the browser's
   job rather than hand-rolled. Built on the theme tokens, so it follows the
   header's light/dark toggle like every other surface: light is the default
   below and the dark treatment overrides only what has to change.

   The site is static and its CSP forbids outbound requests, so submitting
   composes a pre-filled mail draft rather than posting anywhere. */
.fb-inline { display: flex; justify-content: center; padding-top: 30px; }
.fb-panel {
  position: relative; width: min(560px, 100%);
  padding: 46px 26px 24px; border-radius: 28px;
  border: 1px solid rgba(124, 128, 240, .28);
  background: linear-gradient(180deg, #ffffff 0%, #f4f5fe 100%);
  box-shadow: 0 30px 80px rgba(24, 30, 66, .18), 0 0 0 1px rgba(255, 255, 255, .6) inset;
  display: flex; flex-direction: column; gap: 16px;
}
/* The chat badge sits over the panel's top edge, as in the reference. */
.fb-panel__badge {
  position: absolute; top: -27px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  color: #5457e5; background: linear-gradient(160deg, #e9eaff, #dfe1ff);
  border: 1px solid rgba(124, 128, 240, .34);
  box-shadow: 0 12px 26px rgba(84, 87, 229, .22);
}
.fb-panel__badge svg { width: 25px; height: 25px; }
.fb-panel__close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-soft);
}
.fb-panel__close:hover { background: #e6e9f5; color: var(--ink); }
.fb-panel__close svg { width: 17px; height: 17px; }
.fb-panel__head { text-align: center; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.fb-panel__head h3 { font-size: 26px; letter-spacing: -.035em; }
.fb-panel__head p { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 42ch; margin: 0 auto; }
.fb-panel__body { display: flex; flex-direction: column; gap: 15px; }

.fb-field { display: flex; flex-direction: column; gap: 8px; }
.fb-field > label, .fb-label { font-size: 14.5px; font-weight: 700; }
.fb-label em { color: var(--muted); font-style: normal; font-weight: 500; font-size: 13.5px; }

.fb-input-wrap { position: relative; display: flex; align-items: center; }
.fb-input-wrap > svg { position: absolute; left: 15px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.fb-panel input[type='email'], .fb-panel textarea {
  width: 100%; padding: 14px 15px; border-radius: 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.fb-panel input[type='email'] { padding-left: 46px; }
.fb-panel textarea { resize: vertical; min-height: 140px; line-height: 1.6; padding-bottom: 46px; }
.fb-panel input::placeholder, .fb-panel textarea::placeholder { color: #98a0b8; }
.fb-panel input:focus, .fb-panel textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.fb-textarea-wrap { position: relative; }
.fb-count { color: var(--muted); font-size: 12.5px; pointer-events: none; }

.fb-preview { max-height: 170px; width: auto; border: 1px solid var(--line); border-radius: 12px; }

.fb-error { margin: 0; color: #c94a5d; font-size: 13.5px; font-weight: 650; }
.fb-status {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
  background: var(--accent-soft); color: var(--accent);
}
.fb-send {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; min-height: 56px; padding: 0 22px; border: 0; border-radius: 15px; cursor: pointer;
  background: linear-gradient(95deg, #3b82f6 0%, #5457e5 52%, #8b5cf6 100%); color: #fff;
  font: inherit; font-size: 17px; font-weight: 700;
  box-shadow: 0 12px 30px rgba(84, 87, 229, .34);
}
.fb-send:hover { filter: brightness(1.06); }
.fb-send svg { width: 20px; height: 20px; }

/* ---- Dark theme ---- */
:root[data-theme='dark'] .fb-panel,
:root:not([data-theme='light']) .fb-panel {
  border-color: rgba(139, 140, 248, .38);
  background: linear-gradient(180deg, #0f1424 0%, #0b0f1b 100%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .7), 0 0 60px rgba(99, 102, 241, .18);
}
:root[data-theme='dark'] .fb-panel__badge,
:root:not([data-theme='light']) .fb-panel__badge {
  color: #a5a6fb; background: #171c30; border-color: rgba(139, 140, 248, .45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 26px rgba(99, 102, 241, .28);
}
:root[data-theme='dark'] .fb-panel__close,
:root:not([data-theme='light']) .fb-panel__close {
  border-color: rgba(199, 205, 245, .18); background: rgba(255, 255, 255, .05); color: #c3c9da;
}
:root[data-theme='dark'] .fb-panel__close:hover,
:root:not([data-theme='light']) .fb-panel__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
:root[data-theme='dark'] .fb-panel input[type='email'],
:root[data-theme='dark'] .fb-panel textarea,
:root:not([data-theme='light']) .fb-panel input[type='email'],
:root:not([data-theme='light']) .fb-panel textarea {
  border-color: rgba(199, 205, 245, .16); background: rgba(255, 255, 255, .035);
}
:root[data-theme='dark'] .fb-panel input::placeholder,
:root[data-theme='dark'] .fb-panel textarea::placeholder,
:root:not([data-theme='light']) .fb-panel input::placeholder,
:root:not([data-theme='light']) .fb-panel textarea::placeholder { color: #6f7893; }
:root[data-theme='dark'] .fb-error,
:root:not([data-theme='light']) .fb-error { color: #fb7185; }
:root[data-theme='dark'] .fb-preview, :root:not([data-theme='light']) .fb-preview { border-color: rgba(199, 205, 245, .16); }

@media (prefers-reduced-motion: no-preference) {
  .fb-inline:not([hidden]) .fb-panel { animation: fb-in .26s cubic-bezier(.22, .68, .3, 1); }
  @keyframes fb-in { from { opacity: 0; transform: translateY(12px) scale(.99); } }
}
@media (max-width: 560px) {
  .fb-panel { padding: 42px 16px 18px; border-radius: 24px; }
  .fb-panel__head h3 { font-size: 22px; }
}

/* `hidden` must actually hide. The attribute only carries `display: none` from the UA
   stylesheet, so any author rule setting `display` on the same element beats it — which is
   how the feedback card and its panel ended up on screen at the same time, the form open
   before anyone pressed the button. */
[hidden] { display: none !important; }

/* ---- Attaching, inside the message box ----------------------------------
   Everything to do with a file lives on the textarea itself: the clip, the
   attached-file chip and the counter share one compact row along the bottom
   of the box. Nothing sits outside it. */
.fb-textarea-wrap { position: relative; }
.fb-textarea-wrap.is-over textarea { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fb-tools {
  position: absolute; left: 10px; right: 12px; bottom: 9px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  pointer-events: none;
}
/* Chips wrap onto more rows as files are added; the script grows the textarea's
   bottom padding to match, so the writing area never ends up underneath them. */
.fb-chips-list { display: contents; }
.fb-attach {
  pointer-events: auto; flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--primary);
  font: inherit; font-size: 12px; font-weight: 650; line-height: 1.4;
}
.fb-attach svg { width: 13px; height: 13px; flex: none; }
.fb-attach:hover { border-color: var(--primary); background: var(--primary-soft); }
.fb-textarea-wrap input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* The chip is deliberately tiny — a thumbnail, a truncated name and a remove
   button — so an attachment never pushes the writing area around. */
.fb-attachment {
  /* Never grows past its share of the row, so a long name cannot push the counter out. */
  pointer-events: auto; flex: 0 1 auto; min-width: 0; max-width: 200px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
}
.fb-attachment .fb-preview {
  width: 20px; height: 20px; flex: none; object-fit: cover; border-radius: 4px;
  max-height: none; border: 0;
}
.fb-attachment__name {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-attachment__remove {
  flex: none; width: 18px; height: 18px; border-radius: 5px; cursor: pointer;
  display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); padding: 0;
}
.fb-attachment__remove:hover { background: var(--bg-soft); color: var(--ink); }
.fb-attachment__remove svg { width: 11px; height: 11px; }
.fb-count { flex: none; margin-left: auto; color: var(--muted); font-size: 12px; pointer-events: none; }
.fb-attachment__glyph { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted); }
.fb-attachment__glyph svg { width: 14px; height: 14px; }

:root[data-theme='dark'] .fb-attach,
:root:not([data-theme='light']) .fb-attach {
  border-color: rgba(199, 205, 245, .18); background: rgba(255, 255, 255, .06); color: #a5a6fb;
}
:root[data-theme='dark'] .fb-attachment,
:root:not([data-theme='light']) .fb-attachment {
  border-color: rgba(199, 205, 245, .16); background: rgba(255, 255, 255, .05);
}
:root[data-theme='dark'] .fb-attachment__remove:hover,
:root:not([data-theme='light']) .fb-attachment__remove:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* One quiet line under the subtitle: a mail app opening unannounced reads as a
   bug, so the panel says what will happen before anything is typed. */
.fb-panel__note {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px auto 0;
  padding: 5px 11px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 12.5px; font-weight: 600;
}
.fb-panel__note svg { width: 14px; height: 14px; flex: none; }
:root[data-theme='dark'] .fb-panel__note,
:root:not([data-theme='light']) .fb-panel__note { background: rgba(139, 140, 248, .14); color: #a5a6fb; }

/* The shipped version, so a bug report can say which build it came from. */
.footer-version {
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
}