/* Dancing Files — website. The app's own look, stretched to a page:
   ember mesh backdrop, dark glass surfaces, one accent per file category. */

:root {
  --text: rgba(255, 255, 255, 0.94);
  --muted: rgba(255, 255, 255, 0.52);
  --faint: rgba(255, 255, 255, 0.30);
  --surface: rgba(255, 255, 255, 0.055);
  --surface-hi: rgba(255, 255, 255, 0.10);
  --border: rgba(255, 255, 255, 0.10);
  --border-hi: rgba(255, 255, 255, 0.20);

  --image: #5eead4;
  --video: #a78bfa;
  --audio: #fbbf24;
  --document: #f472b6;
  --data: #60a5fa;
  --accent: var(--image);
  --ok: #4ade80;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --display: "Avenir Next", "SF Pro Display", -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", sans-serif;
  --shell: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  min-height: 100%;
  background: #0a0208;
  color: var(--text);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --------------------------------------------------------------- backdrop */

/* Lifted from the app: violet and magenta pooling on the left, a black core
   down the middle, hot orange rays raking in from the top right. Fixed, so the
   page scrolls over a backdrop that stays put. */
.mesh {
  position: fixed;
  inset: -14%;
  z-index: -3;
  filter: blur(70px);
  background:
    linear-gradient(118deg, transparent 54%, rgba(198, 198, 198, 0.26) 61%, transparent 68%),
    linear-gradient(72deg, transparent 68%, #ff2200 76%, transparent 84%),
    linear-gradient(72deg, transparent 80%, #ffa437 88%, #ff7a08 96%, transparent 100%),
    radial-gradient(30% 28% at 33% 67%, #ff2a86, transparent 70%),
    linear-gradient(78deg, transparent 25%, #e2101c 31%, transparent 38%),
    radial-gradient(34% 50% at -2% 54%, #e00060, transparent 70%),
    radial-gradient(42% 42% at 2% 3%, #4a0658, transparent 72%),
    radial-gradient(30% 28% at 100% -4%, #ff0038, transparent 68%),
    radial-gradient(20% 42% at 53% 17%, #000, transparent 64%),
    radial-gradient(26% 26% at 2% 102%, #000, transparent 66%),
    radial-gradient(32% 28% at 78% 98%, rgba(20, 5, 28, 0.88), transparent 68%),
    linear-gradient(135deg, #24082f 0%, #0a0208 55%, #180722 100%);
}

.aurora {
  position: fixed;
  inset: -25%;
  z-index: -2;
  filter: blur(110px);
  opacity: 0.16;
  pointer-events: none;
}
.aurora i {
  position: absolute;
  display: block;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  animation: drift 34s var(--ease) infinite alternate;
}
.aurora i:nth-child(1) { background: #ff1a7a; top: 6%; left: 16%; }
.aurora i:nth-child(2) { background: #ff8a1e; bottom: 2%; right: 10%; animation-delay: -12s; }
.aurora i:nth-child(3) { background: #12041a; top: 24%; left: 44%; opacity: 0.9; animation-delay: -23s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, -4vh, 0) scale(1.14); }
}

/* The veil: the mesh is vivid enough to fight the text, so it gets knocked
   back — and harder further down the page, where the reading happens. */
.veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 20%, rgba(0, 0, 0, 0.55) 100%),
    rgba(6, 1, 10, 0.46);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora i { animation: none; }
}

/* --------------------------------------------------------------- shell */

.shell { width: min(100% - 44px, var(--shell)); margin-inline: auto; }

section { padding: 96px 0; }
@media (max-width: 720px) { section { padding: 68px 0; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 13px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 10px 1px var(--ok);
}

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

.section-head { max-width: 620px; margin-bottom: 44px; }
.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 640;
  line-height: 1.12;
  margin: 14px 0 12px;
}
.section-head p { margin: 0; color: var(--muted); font-size: 16px; }

/* --------------------------------------------------------------- header */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: rgba(10, 2, 8, 0.42);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.topbar.is-stuck {
  background: rgba(10, 2, 8, 0.72);
  border-bottom-color: var(--border);
}
.topbar__in {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
}

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand__mark {
  width: 22px; height: 26px;
  background: currentColor;
  -webkit-mask: url("assets/mark-white.png") center / contain no-repeat;
  mask: url("assets/mark-white.png") center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.brand__name {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.navlinks { display: flex; gap: 2px; margin-left: auto; }
.navlinks a {
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 9px;
  transition: color 0.16s, background 0.16s;
}
.navlinks a:hover { color: var(--text); background: var(--surface-hi); }
@media (max-width: 780px) { .navlinks { display: none; } }
@media (max-width: 780px) { .topbar .btn--sm { margin-left: auto; } }

/* --------------------------------------------------------------- buttons */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: 0.1px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 14px 24px;
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: border-color 0.22s var(--ease), box-shadow 0.24s var(--ease),
              transform 0.18s var(--ease), background 0.18s;
}
/* The glow lives on a pseudo-element so it can fade independently of the glass. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 100% at 0% 50%, var(--tint, var(--accent)), transparent 62%);
  opacity: 0.16;
  pointer-events: none;
  transition: opacity 0.22s;
}
.btn:hover {
  border-color: color-mix(in oklab, var(--tint, var(--accent)), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 34px -8px color-mix(in oklab, var(--tint, var(--accent)), transparent 30%);
}
.btn:hover::after { opacity: 0.36; }
.btn:active { transform: scale(0.985); }
.btn:active::after { opacity: 0.44; }

.btn svg { width: 18px; height: 18px; flex: none; }

.btn--sm { font-size: 13px; padding: 8px 16px; border-radius: 10px; }
.btn--sm svg { width: 15px; height: 15px; }

.btn--ghost {
  background: transparent;
  box-shadow: none;
  font-weight: 550;
  color: var(--muted);
}
.btn--ghost::after { opacity: 0; }
.btn--ghost:hover { background: var(--surface-hi); color: var(--text); box-shadow: none; }

/* --------------------------------------------------------------- hero */

.hero { padding: 74px 0 40px; text-align: center; }
.hero h1 {
  font-size: clamp(40px, 7.2vw, 74px);
  font-weight: 640;
  line-height: 1.03;
  margin: 22px 0 0;
}
/* Each verb takes the colour of the category it belongs to — the same three
   accents the app uses for image, video and document. */
.hero h1 .g {
  background: linear-gradient(102deg, #ff2a86 0%, #a78bfa 46%, #5eead4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  max-width: 560px;
  margin: 20px auto 0;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--muted);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
.hero__meta {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.hero__meta b { color: var(--muted); font-weight: 550; }

.hero__icon {
  width: 108px;
  height: 108px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(255, 42, 134, 0.28));
  animation: bob 7s var(--ease) infinite alternate;
}
@keyframes bob {
  from { transform: translateY(-5px) rotate(-1.4deg); }
  to   { transform: translateY(5px) rotate(1.4deg); }
}
@media (prefers-reduced-motion: reduce) { .hero__icon { animation: none; } }

/* --------------------------------------------------------------- app window */

.window-wrap { padding-bottom: 8px; perspective: 1600px; }
.window {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--border-hi);
  background: rgba(10, 2, 12, 0.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 60px 120px -40px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  overflow: hidden;
  user-select: none;
}
/* A glow pooled under the window so it sits on the page rather than floating. */
.window-wrap::after {
  content: "";
  display: block;
  height: 120px;
  margin: -60px 8% 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 42, 134, 0.22), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.win__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lights { display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.lights i:nth-child(1) { background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.win__title {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
}
.win__title i {
  width: 15px; height: 18px;
  background: #fff;
  -webkit-mask: url("assets/mark-white.png") center / contain no-repeat;
  mask: url("assets/mark-white.png") center / contain no-repeat;
}

.win__crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px 0;
  font-size: 12px;
  color: var(--muted);
}
.win__crumbs .navbtn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--faint);
}
.win__crumbs .navbtn svg { width: 14px; height: 14px; }
.win__crumbs .here { color: var(--text); font-weight: 620; }
.win__crumbs .sep { color: var(--faint); }
.win__crumbs .pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 560;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  padding: 4px 12px;
}
.win__crumbs .pill b { color: var(--ok); font-variant-numeric: tabular-nums; }

.win__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 20px;
  padding: 14px 18px 20px;
}
@media (max-width: 860px) { .win__body { grid-template-columns: minmax(0, 1fr); } .win__side { display: none; } }

.win__tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.wtab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 560;
  color: var(--muted);
  border-radius: 10px;
  padding: 7px 8px;
  white-space: nowrap;
}
.wtab .n {
  font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 20px;
  background: var(--surface-hi);
  font-variant-numeric: tabular-nums;
}
.wtab.is-on {
  color: var(--tint);
  background: color-mix(in oklab, var(--tint), transparent 86%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tint), transparent 72%);
}
.wtab.is-on .n { color: #0d0f13; background: var(--tint); }

.win__label {
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 2px 8px;
}

.wfiles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.wfile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12.5px;
}
.wfile .thumb {
  width: 26px; height: 26px; flex: none;
  border-radius: 7px;
  display: grid; place-items: center;
  color: var(--tint);
  background: color-mix(in oklab, var(--tint), transparent 86%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tint), transparent 78%);
}
.wfile .thumb svg { width: 14px; height: 14px; }
.wfile .meta { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }

.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
.wtile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.18s, transform 0.2s var(--ease);
}
.wtile::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 0% 50%, var(--tint), transparent 62%);
  opacity: 0;
  transition: opacity 0.22s;
}
.wtile:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.wtile:hover::after { opacity: 0.12; }
.wtile__icon {
  position: relative;
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--tint);
  background: color-mix(in oklab, var(--tint), transparent 86%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tint), transparent 78%);
}
.wtile__icon svg { width: 18px; height: 18px; }
.wtile__t { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wtile__n { display: block; font-size: 13px; font-weight: 620; letter-spacing: -0.15px; }
.wtile__h {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wtile.is-on {
  border-color: transparent;
  background: color-mix(in oklab, var(--tint), transparent 88%);
  box-shadow: inset 0 0 0 1.5px var(--tint), 0 4px 18px -10px var(--tint);
}
.wtile.is-on .wtile__icon { color: #0d0f13; background: var(--tint); box-shadow: none; }
.wtile.is-on .wtile__h { color: color-mix(in oklab, var(--tint), white 30%); }

.win__go {
  margin-top: 16px;
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  font-weight: 620;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--tint, var(--image)), transparent 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 0 30px -10px color-mix(in oklab, var(--tint, var(--image)), transparent 40%);
}

.win__side { border-left: 1px solid var(--border); padding-left: 18px; }
.wres { display: flex; flex-direction: column; gap: 6px; }
.wres .wfile { font-size: 12px; }
.wres .save { color: var(--ok); font-weight: 620; font-size: 11px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- audio

   The second, narrower window. Same parts as the big one, sitting beside its
   own copy rather than alone across the page. */

.audio-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
@media (max-width: 900px) { .audio-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.minwin {
  border-radius: 16px;
  border: 1px solid var(--border-hi);
  background: rgba(10, 2, 12, 0.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 50px 100px -40px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  overflow: hidden;
  user-select: none;
}
.minwin__body { padding: 14px 16px 18px; }
.minwin .win__tabs { margin-bottom: 12px; }
.minwin .win__go { font-size: 13px; padding: 10px; }
.wgrid--tight { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* The file card while it is playing: the glyph gives way to pause, five bars
   read the sound, and the progress runs along the bottom edge. */

.wfile { position: relative; overflow: hidden; }
.wfile .thumb { position: relative; overflow: hidden; }

.wfile__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: color-mix(in oklab, var(--tint), transparent 85%);
}
.wfile__bar i {
  display: block;
  height: 100%;
  background: var(--tint);
}

.eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.6px;
  height: 13px;
}
.eq i {
  width: 2px;
  border-radius: 1px;
  background: var(--tint);
  transform-origin: bottom;
  animation: eq 900ms var(--ease) infinite alternate;
}
.eq i:nth-child(1) { height: 45%; animation-duration: 760ms; }
.eq i:nth-child(2) { height: 80%; animation-duration: 620ms; }
.eq i:nth-child(3) { height: 60%; animation-duration: 880ms; }
.eq i:nth-child(4) { height: 92%; animation-duration: 700ms; }
.eq i:nth-child(5) { height: 38%; animation-duration: 960ms; }

@keyframes eq { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }

/* The pause symbol sits over the bars, the way it does in the app when the
   pointer is on the card. */
.wfile.is-playing .thumb__glyph {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px; height: 11px;
  color: var(--tint);
  opacity: 0;
}
.wfile.is-playing:hover .eq { opacity: 0.25; }
.wfile.is-playing:hover .thumb__glyph { opacity: 1; }

/* The bars are a readout of the sound, not decoration, so they slow down
   rather than disappear. */
@media (prefers-reduced-motion: reduce) {
  .eq i { animation-duration: 2.6s !important; }
}

/* --------------------------------------------------------------- steps */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 820px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.step::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 0% 0%, var(--tint), transparent 60%);
  opacity: 0.08;
  pointer-events: none;
}
.step__n {
  position: relative;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--tint);
}
.step h3 { position: relative; font-size: 19px; font-weight: 620; margin: 10px 0 8px; }
.step p { position: relative; margin: 0; color: var(--muted); font-size: 14.5px; }

/* --------------------------------------------------------------- formats */

.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.fcard {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.24s var(--ease);
}
.fcard::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(100% 90% at 0% 0%, var(--tint), transparent 62%);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity 0.24s;
}
.fcard:hover { border-color: color-mix(in oklab, var(--tint), transparent 60%); transform: translateY(-2px); }
.fcard:hover::after { opacity: 0.13; }

.fcard__head { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fcard__icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--tint);
  background: color-mix(in oklab, var(--tint), transparent 86%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tint), transparent 74%);
}
.fcard__icon svg { width: 21px; height: 21px; }
.fcard__head h3 { font-size: 18px; font-weight: 640; }
.fcard__count { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }

.frow { position: relative; display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.frow__k {
  flex: none;
  width: 52px;
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 3px;
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2px;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--surface-hi);
  color: var(--muted);
}
.chip--out {
  color: color-mix(in oklab, var(--tint), white 22%);
  background: color-mix(in oklab, var(--tint), transparent 88%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tint), transparent 80%);
}

/* --------------------------------------------------------------- features */

.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }
.feat {
  padding: 22px 22px 24px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
}
.feat:hover { background: var(--surface-hi); border-color: var(--border-hi); }
.feat__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--tint, var(--accent));
  background: color-mix(in oklab, var(--tint, var(--accent)), transparent 86%);
  margin-bottom: 14px;
}
.feat__icon svg { width: 18px; height: 18px; }
.feat h3 { font-size: 16px; font-weight: 620; margin-bottom: 6px; }
.feat p { margin: 0; color: var(--muted); font-size: 14px; }

/* --------------------------------------------------------------- keys */

.keys-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 880px) { .keys-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.keys { display: flex; flex-direction: column; }
.keyrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.keyrow:last-child { border-bottom: none; }
.keyrow span { color: var(--muted); }
kbd {
  font-family: var(--mono);
  font-size: 12px;
  min-width: 58px;
  text-align: center;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, 0.3);
  color: var(--text);
}

/* --------------------------------------------------------------- callout */

.callout {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.24);
}
.callout__icon { flex: none; color: var(--audio); }
.callout__icon svg { width: 22px; height: 22px; }
.callout h3 { font-size: 16px; font-weight: 620; margin-bottom: 6px; }
.callout p { margin: 0 0 8px; color: var(--muted); font-size: 14.5px; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); font-weight: 620; }
.callout a { color: var(--audio); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--audio), transparent 65%); }
.callout a:hover { color: var(--text); }

/* The first-launch note carries the one thing people get stuck on, so it is
   allowed to be louder than an ordinary callout. */
.callout--loud { padding: 26px 28px; background: rgba(251, 191, 36, 0.085); border-color: rgba(251, 191, 36, 0.34); }
.callout--loud h3 { font-size: 17px; margin-bottom: 10px; }

/* What macOS actually says, set apart so it reads as a quotation of the dialog
   rather than as our own words. */
.callout .quote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 2px solid color-mix(in oklab, var(--audio), transparent 55%);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 10px 10px 0;
  color: var(--text);
  font-size: 14px;
}
.callout .quote em { font-style: normal; font-weight: 620; }

.steps-num { margin: 12px 0; padding-left: 22px; }
.steps-num li { color: var(--muted); font-size: 14.5px; margin-bottom: 8px; padding-left: 4px; }
.steps-num li::marker { color: var(--audio); font-weight: 700; }

.callout__foot { border-top: 1px solid rgba(251, 191, 36, 0.18); padding-top: 10px; margin-top: 14px !important; font-size: 13.5px !important; }

/* --------------------------------------------------------------- download */

.dl {
  position: relative;
  text-align: center;
  padding: 68px 32px 72px;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.dl::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 420px;
  background: radial-gradient(50% 60% at 50% 50%, rgba(255, 42, 134, 0.30), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.dl__in { position: relative; }
.dl h2 { font-size: clamp(28px, 4.4vw, 42px); font-weight: 640; line-height: 1.1; }
.dl p { max-width: 480px; margin: 14px auto 0; color: var(--muted); font-size: 16px; }
.dl .hero__cta { margin-top: 30px; }

.specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--faint);
}
.specs b { display: block; color: var(--muted); font-weight: 550; font-size: 13px; }

/* --------------------------------------------------------------- pages

   support/ and privacy/ — the two pages the app itself links to from its About
   panel and its Help menu. One column of prose on the same backdrop, so they
   read as part of the app rather than as legal boilerplate bolted on. */

.page { padding: 118px 0 40px; }
.page__head { max-width: 720px; margin-bottom: 34px; }
.page__head h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 14px 0 14px;
}
.page__head p { color: var(--muted); font-size: 17px; margin: 0; }
.page__date { color: var(--faint); font-size: 13px; margin-top: 14px !important; }

.prose { max-width: 720px; }
.prose section {
  padding: 24px 26px 26px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.prose h2 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 640;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.prose h3 {
  font-size: 15px;
  font-weight: 640;
  margin: 22px 0 6px;
  color: var(--text);
}
.prose h3:first-of-type { margin-top: 0; }
.prose p, .prose li { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.prose li { margin-bottom: 7px; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose .steps-num { margin: 12px 0 14px; padding-left: 22px; }
.prose .steps-num li { font-size: 15px; }
.prose p:last-child, .prose ul:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 620; }
.prose em { color: var(--text); font-style: normal; }
.prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent), transparent 65%); }
.prose a:hover { color: var(--text); }
.prose kbd {
  font: 12px/1 var(--mono);
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  color: var(--text);
}

/* A question and its answer, for the support page. */
.qa { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 18px; }
.qa:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.qa h3 { margin-top: 0; }

/* The short list of links at the top of a page. */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; max-width: 720px; }
.toc a {
  font-size: 13px;
  font-weight: 560;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.toc a:hover { color: var(--text); border-color: var(--border-hi); }

/* --------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--border);
  padding: 30px 0 44px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--faint);
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot__links { margin-left: auto; display: flex; gap: 18px; }

/* --------------------------------------------------------------- reveal */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.wsave {
  margin: 12px 2px 0;
  font-size: 11.5px;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}
.whint {
  margin: 6px 2px 0;
  font-size: 11px;
  color: var(--faint);
}