/* Chatoyance site — one stylesheet, hand-written.
   System font stack only, no web fonts, no JavaScript. Colours are a
   tiger's-eye palette: gold and amber on deep slate (dark) or warm paper
   (light), switched with prefers-color-scheme. Every animation is CSS-only
   and runs only under prefers-reduced-motion: no-preference. Spacing runs on
   an 8-px rhythm (--s-*). */

/* ================= Tokens ================= */

:root {
  color-scheme: light dark;

  --bg: #f8f5ef;
  --bg-tint: #f1ebe0;
  --surface: #fffdf9;
  --surface-2: #f4efe6;
  --line: rgba(52, 38, 16, 0.11);
  --line-strong: rgba(52, 38, 16, 0.18);
  --fg: #1d1913;
  --fg-2: #554c3f;
  --fg-3: #6b6255;
  --display-2: #8a7f70;
  --accent: #94560f;
  --accent-ink: #7a460c;
  --gold: #e3a743;
  --gold-hi: #f4cd82;
  --glow: rgba(227, 154, 52, 0.30);
  --wall-a: #f2e6d2;
  --wall-b: #d6bf9b;
  --menubar: rgba(255, 252, 245, 0.55);
  --menubar-ink: rgba(40, 30, 15, 0.55);

  /* The demo app (search panel + opened folder window) mimics macOS's own
     light/dark materials, independent of the page's own palette above. */
  --panel-bg: rgba(246, 246, 248, 0.78);
  --panel-ink: rgba(20, 20, 22, 0.92);
  --panel-ink-dim: rgba(20, 20, 22, 0.55);
  --panel-hair: rgba(0, 0, 0, 0.12);
  --panel-sel: rgb(10, 95, 215);
  --panel-btn-bg: rgba(0, 0, 0, 0.06);
  --panel-scroll-bg: rgba(0, 0, 0, 0.08);
  --panel-thumb-bg: rgba(0, 0, 0, 0.28);
  --fw-bar-bg: #e3e3e6;
  --fw-body-bg: #fbfbfc;
  --fw-border: rgba(0, 0, 0, 0.16);
  --fw-ink: rgba(20, 20, 22, 0.92);
  --fw-ink-dim: rgba(20, 20, 22, 0.55);
  --fw-side-bg: #ececef;
  --fw-side-on-bg: rgba(10, 95, 215, 0.14);
  --fw-side-on-ink: rgb(10, 95, 215);
  --fw-icon: var(--gold);

  --shadow-sm: 0 1px 2px rgba(60, 40, 10, 0.06), 0 2px 8px -2px rgba(60, 40, 10, 0.08);
  --shadow-md: 0 1px 2px rgba(60, 40, 10, 0.05), 0 12px 32px -12px rgba(60, 40, 10, 0.22);
  --shadow-lg: 0 2px 6px rgba(40, 25, 5, 0.10), 0 30px 60px -20px rgba(40, 25, 5, 0.35), 0 60px 120px -40px rgba(40, 25, 5, 0.30);

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-16: 128px;

  --max: 1152px;
  --gutter: 24px;
  --nav-h: 60px;

  --font: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c10;
    --bg-tint: #0f1116;
    --surface: #14161c;
    --surface-2: #1a1d24;
    --line: rgba(255, 236, 205, 0.08);
    --line-strong: rgba(255, 236, 205, 0.14);
    --fg: #f5f1ea;
    --fg-2: #bdb4a6;
    --fg-3: #9a9285;
    --display-2: #6f695f;
    --accent: #ecb75c;
    --accent-ink: #f2c779;
    --glow: rgba(233, 160, 60, 0.30);
    --wall-a: #1d2029;
    --wall-b: #0f1116;
    --menubar: rgba(30, 32, 40, 0.55);
    --menubar-ink: rgba(255, 245, 230, 0.55);

    --panel-bg: rgba(72, 78, 88, 0.88);
    --panel-ink: rgba(255, 255, 255, 0.96);
    --panel-ink-dim: rgba(255, 255, 255, 0.62);
    --panel-hair: rgba(255, 255, 255, 0.14);
    --panel-sel: rgb(10, 95, 215);
    --panel-btn-bg: rgba(28, 31, 35, 0.9);
    --panel-scroll-bg: rgba(10, 10, 12, 0.7);
    --panel-thumb-bg: rgba(150, 150, 150, 0.9);
    --fw-bar-bg: #2b2d33;
    --fw-body-bg: #1f2126;
    --fw-border: rgba(255, 255, 255, 0.14);
    --fw-ink: rgba(255, 255, 255, 0.92);
    --fw-ink-dim: rgba(255, 255, 255, 0.55);
    --fw-side-bg: #26282e;
    --fw-side-on-bg: rgba(10, 95, 215, 0.35);
    --fw-side-on-ink: #bcd6ff;
    --fw-icon: var(--gold-hi);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 60px 140px -40px rgba(0, 0, 0, 0.8);
  }
}

/* ================= Base ================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
b, strong { font-weight: 600; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

code, kbd {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
kbd { box-shadow: inset 0 -1px 0 var(--line-strong); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; flex: none; }

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--s-1); }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section[id], [id="top"] { scroll-margin-top: calc(var(--nav-h) + 8px); }

/* ================= Type ================= */

.eyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}

.display {
  font-weight: 700;
  font-size: clamp(44px, 7.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.display > span { display: block; }
.display-2 { color: var(--display-2); }
.display-sm {
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.036em;
}

.lead {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 34em;
  text-wrap: pretty;
}

/* ================= Buttons ================= */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn .i { width: 14px; height: 14px; }

.btn-primary {
  color: #231503;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #cf8f2c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(150, 90, 15, 0.35), 0 10px 24px -10px rgba(190, 120, 20, 0.7);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(150, 90, 15, 0.4), 0 14px 30px -10px rgba(190, 120, 20, 0.8); text-decoration: none; }

.btn-quiet { color: var(--fg); }
.btn-quiet:hover { background: var(--surface-2); text-decoration: none; }
.btn-quiet:hover .i { transform: translateX(2px); }
.btn-quiet .i { transition: transform 0.2s ease; }

.pill-soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.pill-soon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--glow);
}

.btn-badge { display: inline-block; border-radius: 10px; transition: transform 0.2s ease; }
.btn-badge:hover { transform: translateY(-1px); }
.badge-slot img { height: 48px; width: auto; }

/* ================= Nav ================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.brand img { width: 28px; height: 28px; filter: drop-shadow(0 2px 4px rgba(90, 50, 5, 0.35)); }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  display: block;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--fg-2);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-links a:hover { color: var(--fg); background: var(--surface-2); }

/* ================= Hero ================= */

.hero {
  position: relative;
  padding-top: var(--s-6);
  isolation: isolate;
}

/* A faint banded texture behind the hero. */
.hero-bands {
  position: absolute;
  inset: -60px 0 auto;
  height: 900px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 10%, var(--glow), transparent 70%),
    repeating-linear-gradient(-9deg, transparent 0 22px, color-mix(in srgb, var(--gold) 9%, transparent) 22px 23px, transparent 23px 41px, color-mix(in srgb, var(--gold) 5%, transparent) 41px 44px);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%);
  opacity: 0.9;
}

/* The hero is one column (copy, then the demo) up to 960px, and a
   text-left / demo-right grid above it, so the demo — the product's whole
   pitch — is never pushed below the first screen. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--s-6);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-copy .eyebrow { margin-top: 0; }
.hero-copy .lead { margin-top: var(--s-3); }
.hero-copy .cta-row { margin-top: var(--s-4); }

.hero-demo { min-width: 0; }

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(320px, 420px) 1fr;
    column-gap: var(--s-8);
  }
  .hero-copy { align-items: flex-start; text-align: left; }
  .hero-copy .lead { max-width: 32em; }
  .stage { margin-top: 0; height: 520px; }
}

/* The stone: rendered from the app's own artwork, with a slow chatoyant
   band of light rolling across it. */
.stone {
  position: relative;
  width: clamp(104px, 12vw, 140px);
  aspect-ratio: 1;
}
.stone::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 170, 70, 0.55), rgba(240, 170, 70, 0.14) 55%, transparent);
  filter: blur(8px);
}
.stone img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: drop-shadow(0 18px 24px rgba(70, 40, 5, 0.35)) drop-shadow(0 4px 6px rgba(70, 40, 5, 0.3));
}
.stone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(189deg, transparent 36%, rgba(255, 200, 110, 0) 41%, rgba(255, 200, 110, 0.2) 46.5%, rgba(255, 226, 150, 0.48) 50%, rgba(255, 200, 110, 0.2) 53.5%, rgba(255, 200, 110, 0) 59%, transparent 64%);
  background-size: 100% 280%;
  background-position: 0 58%;
  mix-blend-mode: screen;
}

/* ---------- Stage: the product in place ---------- */

.stage {
  --panel-right: max(5%, calc(50% - 470px));
  position: relative;
  margin-top: 0;
  height: 580px;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg);
}
.stage-wall {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(45% 70% at 72% 18%, rgba(236, 166, 64, 0.55), transparent 70%),
    radial-gradient(40% 60% at 18% 90%, rgba(150, 90, 30, 0.30), transparent 70%),
    repeating-linear-gradient(-9deg, transparent 0 34px, rgba(255, 220, 160, 0.05) 34px 36px),
    linear-gradient(170deg, var(--wall-a), var(--wall-b));
}
.stage::after {
  /* a soft inner edge, like glass over the screen */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.menubar {
  position: absolute;
  inset: 0 0 auto;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  padding-inline: 18px;
  background: var(--menubar);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  z-index: 2;
}
.mb-item { display: block; color: var(--menubar-ink); }
.mb-pill { width: 18px; height: 9px; border-radius: 3px; border: 1.5px solid currentColor; opacity: 0.7; }
.mb-pill-wide { width: 54px; height: 8px; border: 0; background: currentColor; opacity: 0.35; border-radius: 4px; }
.mb-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.7; }
.mb-stone {
  position: absolute;
  right: calc(var(--panel-right) + 207px - 15px);
  top: 4px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 22px;
  border-radius: 6px;
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 16%, transparent);
}
.mb-stone svg { width: 16px; height: 16px; }

.stage-window {
  position: absolute;
  left: 5%;
  top: 76px;
  width: min(56%, 640px);
  border-radius: 3.35%/3.94%;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25), 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 50px 100px -30px rgba(0, 0, 0, 0.45);
}

/* ---------- The search panel, built to match the app's own ---------- */

.panel {
  --row: 24.5px;
  position: absolute;
  top: 38px;
  right: var(--panel-right);
  width: min(415px, calc(100% - 32px));
  border-radius: 16px;
  color: var(--panel-ink);
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  box-shadow:
    inset 0 0 0 0.5px var(--panel-hair),
    0 0 0 0.5px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.22),
    0 28px 60px -12px rgba(0, 0, 0, 0.55),
    0 60px 120px -30px rgba(30, 15, 0, 0.5);
  font-family: var(--font);
  letter-spacing: 0;
  z-index: 1;
  transform-origin: 70% 0;
}
.p-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 37px;
  padding: 0 12px 0 13px;
}
.p-mag { width: 14px; height: 14px; color: var(--panel-ink-dim); flex: none; }
.p-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  height: 20px;
  margin-left: 7px;
  font-size: 15px;
  line-height: 20px;
}
.p-ph { position: absolute; left: 1px; color: var(--panel-ink-dim); opacity: 0; white-space: nowrap; }
.p-q { display: inline-flex; color: var(--panel-ink); }
.k { display: inline-block; overflow: hidden; max-width: 1em; }
.p-caret {
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 1px;
  border-radius: 1px;
  background: var(--panel-sel);
}
.p-clear {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 45%, var(--panel-bg) 45% 55%, transparent 55%) center / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 45%, var(--panel-bg) 45% 55%, transparent 55%) center / 7px 7px no-repeat,
    var(--panel-ink-dim);
}

.p-rows {
  position: relative;
  height: calc(var(--row) * 14);
  margin-bottom: 6px;
  overflow: hidden;
}
.p-list {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
}
.p-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--row);
  padding: 0 32px 0 16px;
  white-space: nowrap;
}
.p-list b {
  font-weight: 500;
  font-size: 13px;
  color: var(--panel-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-list i {
  font-style: normal;
  font-size: 11px;
  color: var(--panel-ink-dim);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.p-list em { font-style: normal; margin-left: 4px; }
.list-c { opacity: 1; }

.p-sel {
  position: absolute;
  left: 6px;
  right: 20px;
  top: 0;
  height: var(--row);
  border-radius: 5px;
  background: var(--panel-sel);
  transform: translateY(calc(var(--row) * 3));
}
.p-sel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
}

.p-scroll {
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 4px;
  width: 9px;
  border-radius: 5px;
  background: var(--panel-scroll-bg);
}
.p-thumb {
  position: absolute;
  left: 1.5px;
  right: 1.5px;
  top: 2px;
  height: 46%;
  border-radius: 4px;
  background: var(--panel-thumb-bg);
}

.p-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 11px 4px 11px;
}
.p-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 22px;
  border-radius: 6px;
  background: var(--panel-btn-bg);
  color: var(--panel-ink);
}
.p-btn svg { width: 12px; height: 12px; }
.p-count {
  position: relative;
  margin-left: auto;
  font-size: 11px;
  color: var(--panel-ink-dim);
  font-variant-numeric: tabular-nums;
}
.p-count span { display: block; text-align: right; }
.c-a, .c-b { position: absolute; right: 0; top: 0; opacity: 0; }

.stage-note {
  margin-top: var(--s-2);
  text-align: center;
  font-size: 13px;
  color: var(--fg-3);
}

/* ---------- The folder window: a generic Mac-style window, drawn in CSS,
   that pops open once the demo "presses Return" on the selected row.
   Styled to match the app's own light/dark appearance, independent of the
   page's own palette. Statically (no JS, reduced motion) it simply sits
   open, since that's the demo's payoff frame. ---------- */

.folder-win {
  position: absolute;
  left: 50%;
  top: 34px;
  width: min(460px, calc(100% - 40px));
  transform: translateX(-50%);
  transform-origin: 50% 30%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fw-body-bg);
  box-shadow:
    0 0 0 0.5px var(--fw-border),
    0 4px 10px rgba(0, 0, 0, 0.22),
    0 28px 60px -12px rgba(0, 0, 0, 0.45),
    0 60px 120px -30px rgba(0, 0, 0, 0.4);
  font-family: var(--font);
  z-index: 2;
  opacity: 1;
}
.fw-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  background: var(--fw-bar-bg);
  border-bottom: 0.5px solid var(--fw-border);
}
.fw-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.fw-dot-r { background: #ff5f57; }
.fw-dot-y { background: #febc2e; }
.fw-dot-g { background: #28c840; }
.fw-title {
  position: absolute;
  left: 90px;
  right: 90px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fw-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.fw-body { display: flex; height: 228px; }
.fw-side {
  width: 108px;
  flex: none;
  background: var(--fw-side-bg);
  border-right: 0.5px solid var(--fw-border);
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fw-side-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--fw-ink-dim);
}
.fw-side-item .i { width: 13px; height: 13px; color: var(--fw-icon); flex: none; }
.fw-side-on { background: var(--fw-side-on-bg); color: var(--fw-side-on-ink); }
.fw-side-on .i { color: var(--fw-side-on-ink); }
.fw-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 4px;
  padding: 16px 12px;
  align-content: start;
}
.fw-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  font-size: 10.5px;
  color: var(--fw-ink);
  text-align: center;
}
.fw-label {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.fw-i { width: 32px; height: 26px; color: var(--fw-icon); }
.fw-file .fw-i { width: 20px; height: 24px; color: var(--fw-ink-dim); }

@media (max-width: 560px) {
  .fw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 2px; }
  .fw-item { width: 100%; font-size: 9.5px; }
  .fw-body { height: auto; }
}

/* ---------- The demo's animation: one 17-second loop. Typing begins
   promptly (under half a second in), narrows the list, moves the selection
   down with the arrow keys, "presses Return" (the flash), then the panel
   closes as the project's folder opens, holds, and closes again before the
   loop quietly resets. ---------- */

@media (prefers-reduced-motion: no-preference) {
  .stone::after { animation: sheen 9s ease-in-out infinite alternate; }
  .stone::before { animation: breathe 9s ease-in-out infinite alternate; }

  .panel { animation: panel-life 17s ease infinite; }
  .folder-win { animation: folder-life 17s ease infinite; }
  .mb-stone { animation: mb-active 17s step-end infinite; }
  .k { animation: 17s step-end infinite; }
  .k1 { animation-name: k1; } .k2 { animation-name: k2; } .k3 { animation-name: k3; }
  .k4 { animation-name: k4; } .k5 { animation-name: k5; } .k6 { animation-name: k6; } .k7 { animation-name: k7; }
  .p-ph { animation: show-idle 17s step-end infinite; }
  .p-clear { animation: show-typed 17s step-end infinite; }
  .p-caret { animation: caret 1.1s step-end infinite; }
  .list-a, .c-a { animation: show-a 17s step-end infinite; }
  .list-b, .c-b { animation: show-b 17s step-end infinite; }
  .list-c, .c-c { animation: show-c 17s step-end infinite; }
  .p-thumb { animation: thumb 17s step-end infinite; }
  .p-sel { animation: select 17s step-end infinite; }
  .p-sel::after { animation: open-flash 17s step-end infinite; }
}

@keyframes sheen {
  from { background-position: 0 90%; }
  to { background-position: 0 18%; }
}
@keyframes breathe {
  from { opacity: 0.75; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.04); }
}
/* Timeline (of the 17s loop): 0–2.9% idle · 2.9–9.4% typing "library" and
   the list narrowing · 9.4–12.1% arrow-key selection · 15–16% the Return
   flash · 16.8–18.5% the panel closes · 17.6–20% the folder window opens ·
   20–34.7% it holds · 34.7–37.1% it closes · 38.2–40% the panel reopens,
   idle, resetting for the 40–100% rest before the loop repeats. */
@keyframes panel-life {
  0%, 16.8% { opacity: 1; transform: none; }
  18.5%, 38.2% { opacity: 0; transform: translateY(-8px) scale(0.985); }
  40%, 100% { opacity: 1; transform: none; }
}
@keyframes folder-life {
  0%, 17.6% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.94); }
  20%, 34.7% { opacity: 1; transform: translateX(-50%); }
  37.1%, 100% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.94); }
}
@keyframes mb-active {
  0% { background: color-mix(in srgb, var(--fg) 16%, transparent); }
  16.8% { background: color-mix(in srgb, var(--fg) 16%, transparent); }
  18% { background: transparent; }
  40% { background: color-mix(in srgb, var(--fg) 16%, transparent); }
}
@keyframes k1 { 0% { max-width: 0; } 2.9% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k2 { 0% { max-width: 0; } 3.8% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k3 { 0% { max-width: 0; } 4.6% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k4 { 0% { max-width: 0; } 5.4% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k5 { 0% { max-width: 0; } 6.2% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k6 { 0% { max-width: 0; } 7.1% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes k7 { 0% { max-width: 0; } 7.9% { max-width: 1em; } 38.2% { max-width: 0; } }
@keyframes show-idle { 0% { opacity: 1; } 2.9% { opacity: 0; } 38.2% { opacity: 1; } }
@keyframes show-typed { 0% { opacity: 0; } 2.9% { opacity: 1; } 38.2% { opacity: 0; } }
@keyframes caret { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes show-a { 0% { opacity: 1; } 3.8% { opacity: 0; } 38.2% { opacity: 1; } }
@keyframes show-b { 0% { opacity: 0; } 3.8% { opacity: 1; } 4.6% { opacity: 0; } }
@keyframes show-c { 0% { opacity: 0; } 4.6% { opacity: 1; } 38.2% { opacity: 0; } }
@keyframes thumb { 0% { height: 9%; } 3.8% { height: 22%; } 4.6% { height: 46%; } 38.2% { height: 9%; } }
@keyframes select {
  0% { opacity: 0; transform: translateY(0); }
  9.4% { opacity: 1; transform: translateY(0); }
  10.3% { opacity: 1; transform: translateY(var(--row)); }
  11.2% { opacity: 1; transform: translateY(calc(var(--row) * 2)); }
  12.1% { opacity: 1; transform: translateY(calc(var(--row) * 3)); }
  18.5% { opacity: 0; transform: translateY(0); }
}
@keyframes open-flash {
  0% { opacity: 0; }
  15% { opacity: 0.32; }
  15.3% { opacity: 0; }
  15.7% { opacity: 0.32; }
  16% { opacity: 0; }
}

/* ================= Stats ================= */

.stats-band { padding-block: var(--s-10) 0; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats li {
  padding: var(--s-4) var(--s-3);
  border-left: 1px solid var(--line);
}
.stats li:first-child { border-left: 0; padding-left: 0; }
.stats strong {
  display: block;
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  margin-bottom: var(--s-1);
}
.stats strong::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-top: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.stats span { display: block; color: var(--fg-2); font-size: 15px; line-height: 1.5; max-width: 16em; }

/* ================= Sections ================= */

.section { padding-block: 112px; }
.section-tint {
  background: var(--bg-tint);
  border-block: 1px solid var(--line);
}
.section-head { max-width: 760px; margin-bottom: var(--s-8); }
.section-lead { margin-top: var(--s-3); color: var(--fg-2); font-size: 19px; line-height: 1.55; max-width: 34em; }

/* ---------- Feature cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.card {
  position: relative;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card-glyph {
  width: 44px;
  height: 44px;
  padding: 8px;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent);
  margin-bottom: var(--s-3);
}
.card-before {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 14px;
  font-style: italic;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.card-before::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1.5px;
  transform: translateY(-4px);
  background: var(--gold);
}
.card h3 {
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-1);
}
.card p:last-child { color: var(--fg-2); font-size: 16px; line-height: 1.6; }

/* ---------- Filing trees ---------- */

.filing {
  margin-top: var(--s-3);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.filing h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: var(--s-1); }
.filing-copy p { color: var(--fg-2); font-size: 16px; }
.filing-key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-2);
  font-size: 14px !important;
  color: var(--fg-3) !important;
}
.key-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 0 3px var(--glow); }

.trees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}
.tree {
  padding: var(--s-2);
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.3;
  min-width: 0;
}
.tree figcaption {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.tree li {
  position: relative;
  color: var(--fg-2);
}
.tree li > .i {
  display: inline-block;
  vertical-align: -2px;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  color: #8fa3bf;
}
.tree ul ul {
  margin-left: 6px;
  padding-left: 13px;
  border-left: 1px solid var(--line-strong);
}
.tree ul ul li { padding-top: 6px; }
.tree .t-root { font-weight: 600; color: var(--fg); }
.tree .t-root ul { font-weight: 400; }
.tree .t-job { color: var(--fg); padding-left: 20px; text-indent: -20px; }
.tree .t-job::before {
  content: "";
  position: absolute;
  left: -5px;
  right: -6px;
  top: 3px;
  bottom: -3px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
  z-index: 0;
}
.tree .t-job > * { position: relative; }
.tree .t-job .i { color: var(--gold); position: relative; z-index: 1; }
.tree .t-job { isolation: isolate; }
.tree .t-job::before { z-index: -1; }

/* ---------- Tour: videos ---------- */

.video-section { display: grid; gap: var(--s-8); margin-bottom: var(--s-8); }
.motion { margin: 0; }
.motion-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #0b0c10;
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg);
}
.motion-frame::before {
  content: "";
  position: absolute;
  inset: auto 10% -30%;
  height: 60%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  z-index: -1;
}
.motion video { width: 100%; height: auto; aspect-ratio: 16 / 10; background: #0b0c10; }
.motion figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  margin-top: var(--s-2);
  color: var(--fg-2);
  font-size: 15px;
}
.motion figcaption b { color: var(--fg); font-size: 17px; letter-spacing: -0.015em; }

/* ---------- Tour: screenshots ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-3);
}
.shot {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.shot-wide { grid-column: span 7; }
.shot:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.shot-copy { padding: var(--s-4) var(--s-4) 0; }
.shot-copy h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 6px; }
.shot-copy p { color: var(--fg-2); font-size: 16px; max-width: 30em; }
.shot-visual {
  position: relative;
  height: 400px;
  margin-top: var(--s-4);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--s-1);
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 100%, var(--glow), transparent 70%),
    repeating-linear-gradient(-9deg, transparent 0 26px, color-mix(in srgb, var(--gold) 6%, transparent) 26px 27px);
}
.win {
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.18), 0 24px 48px -16px rgba(20, 10, 0, 0.5);
}
.win-panel { width: min(340px, 86%); border-radius: 3.9%/2.75%; }
.win-wizard { width: min(560px, 90%); border-radius: 1.75%/1.92%; }
.shot:hover .win { transform: translateY(-8px); }

.shot-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
}
.shot-side .shot-copy { align-self: center; padding: var(--s-4); }
.shot-side .shot-visual { margin-top: 0; height: auto; min-height: 400px; padding-top: var(--s-4); }

/* ================= Privacy ================= */

.privacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-8);
  align-items: start;
}
.promise {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-3));
  padding: var(--s-5);
  border-radius: var(--r-lg);
  color: #f5f1ea;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(236, 166, 64, 0.35), transparent 70%),
    repeating-linear-gradient(-9deg, transparent 0 22px, rgba(255, 220, 160, 0.045) 22px 23px),
    linear-gradient(160deg, #1d2029, #0d0e13);
  box-shadow: 0 0 0 1px rgba(255, 236, 205, 0.08), var(--shadow-lg);
  overflow: hidden;
}
.promise .eyebrow { color: #ecb75c; margin-bottom: var(--s-1); }
.promise-glyph { width: 48px; height: 48px; color: #ecb75c; margin-bottom: var(--s-4); }
.promise-title {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin-bottom: var(--s-4);
}
.checks { display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: #d9d1c4; font-size: 16px; line-height: 1.45; }
.checks .i {
  width: 22px;
  height: 22px;
  padding: 2px;
  margin-top: -1px;
  border-radius: 50%;
  color: #1b1204;
  background: #ecb75c;
}

.policy h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.policy-date { color: var(--fg-3); font-size: 15px; margin: 6px 0 var(--s-4); }
.policy h3 {
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: var(--s-4) 0 6px;
}
.policy p { color: var(--fg-2); max-width: 38em; }
.policy > p:nth-of-type(2) { color: var(--fg); font-size: 19px; line-height: 1.55; }

/* ================= Support ================= */

.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-8);
  align-items: start;
}
.support-intro > p:not(.eyebrow) { color: var(--fg-2); margin-top: var(--s-3); font-size: 18px; }
.support-intro .display { margin-top: 0; }
.getting-started {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.getting-started h3 { font-size: 17px; margin-bottom: 6px; }
.getting-started p { color: var(--fg-2); font-size: 16px; }

.faq {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 18px var(--s-3);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  transition: background-color 0.15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 10px no-repeat,
    var(--surface-2);
  color: var(--fg-2);
  transition: transform 0.25s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--accent);
}
.faq summary:hover { background: var(--surface-2); }
.faq summary:focus-visible { outline-offset: -3px; border-radius: 0; }
.faq details p {
  padding: 0 var(--s-3) 20px;
  color: var(--fg-2);
  font-size: 16px;
  max-width: 40em;
}

/* ================= Closing ================= */

.closing {
  position: relative;
  padding-block: var(--s-16);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.closing::before {
  content: "";
  position: absolute;
  inset: 10% 15% -20%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--glow), transparent);
}
.closing-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.closing-stone { width: 56px; height: 56px; border-radius: 50%; filter: drop-shadow(0 8px 14px rgba(70, 40, 5, 0.35)); }

/* ================= Footer ================= */

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-5);
  font-size: 14px;
  color: var(--fg-3);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-4);
  align-items: center;
}
.footer-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-brand img { width: 22px; height: 22px; }
.footer-brand > span:first-of-type { color: var(--fg); font-weight: 650; }
.footer-tag { color: var(--fg-3); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: flex-end; }
.footer-links a { color: var(--fg-2); text-decoration: none; }
.footer-links a:hover { color: var(--fg); text-decoration: underline; }
.footer-copy { grid-column: 1 / -1; font-size: 13px; }

/* ================= Scroll-driven reveal ================= */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

/* ================= Responsive ================= */

@media (max-width: 1000px) {
  .cards { grid-template-columns: 1fr; max-width: 640px; }
  .filing { grid-template-columns: 1fr; }
  .shot, .shot-wide { grid-column: span 6; }
  .privacy-grid, .support-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .promise { position: relative; top: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .stage-window { width: 62%; left: 3%; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .section { padding-block: var(--s-12); }
  .hero { padding-top: var(--s-8); }
  .trees { grid-template-columns: 1fr; }
  .shot, .shot-wide { grid-column: 1 / -1; }
  .shot-visual { height: 320px; }
  .shot-short .shot-visual { height: 190px; }
  .shot-side { display: flex; }
  .shot-side .shot-copy { padding: var(--s-4) var(--s-4) 0; }
  .shot-side .shot-visual { min-height: 0; height: 320px; margin-top: var(--s-4); padding-top: var(--s-1); }
  .stage { --panel-right: 12px; }
  .mb-stone { right: calc(50% - 15px); }
  .filing { padding: var(--s-3); }
  .card { padding: var(--s-3); }
  .promise { padding: var(--s-4) var(--s-3); }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }

  .stage {
    height: auto;
    padding: 46px 12px 0;
    margin-top: 0;
    border-radius: var(--r-lg);
  }
  .folder-win { width: calc(100% - 24px); }
  .stage-window { display: none; }
  .panel {
    position: relative;
    top: 0;
    right: auto;
    width: 100%;
    margin: 0 auto 12px;
  }
  .p-rows { height: calc(var(--row) * 11); }

  .motion-frame { border-radius: 0; margin-inline: calc(var(--gutter) * -1); box-shadow: none; border-block: 1px solid var(--line-strong); }
  .motion figcaption { padding-inline: 0; }
}

@media (max-width: 560px) {
  .nav-wide { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats li { padding: var(--s-3) var(--s-2); }
  .stats li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats span { font-size: 14px; }
  .p-list li { padding-right: 24px; }
  .p-list b { font-size: 12.5px; }
  .p-list em { display: none; }
  .btn, .pill-soon { min-height: 46px; }
}

/* ================= 404 ================= */

.error-page {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-8) var(--gutter);
  position: relative;
  isolation: isolate;
}
.error-page .hero-bands { inset: 0; height: auto; }
.error-page .stone { margin-inline: auto; margin-bottom: var(--s-5); }
.error-page .eyebrow { margin-bottom: var(--s-2); }
.error-page .lead { margin: var(--s-3) auto var(--s-4); }
.error-page .cta-row { justify-content: center; }

/* ================= Forced colours / print ================= */

@media (forced-colors: active) {
  .stage-wall, .hero-bands, .stone::after { display: none; }
  .btn, .pill-soon, .card, .faq, .shot { border: 1px solid CanvasText; }
}