/* Meret landing site. Brand tokens from the app repo's docs/design/design.html and
   ui/theme/Color.kt. One dark canvas, coral for action, violet for the idea. No external
   requests: the only web font is Duma Bold, self hosted, and there are no analytics or trackers. */

@font-face {
  font-family: "Duma";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/duma-bold.ttf") format("truetype");
}

:root {
  /* Ground and surfaces */
  --canvas: #08070B;
  --ink: #0B0A0F;
  --surface: #141219;
  --surface-2: #1C1A24;
  --surface-3: #242130;
  --line: #2A2733;
  --line-soft: #211E29;

  /* Text */
  --text: #F3F0F8;
  --muted: #9E99AC;
  --faint: #6A6578;

  /* Accents. Coral is the color of action, violet is the color of the idea. */
  --accent: #FF6A3D;
  --accent-2: #FF8A63;
  --accent-deep: #C33A18;
  --accent-weak: rgba(255, 106, 61, 0.16);
  --accent-line: rgba(255, 106, 61, 0.42);
  --violet: #8E7BFF;
  --violet-weak: rgba(142, 123, 255, 0.16);
  --violet-line: rgba(142, 123, 255, 0.42);
  --good: #54D19B;

  --radius: 18px;
  --radius-lg: 26px;
  --wrap: 1120px;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
/* scroll-padding-top keeps every in-page anchor target clear of the sticky header
   instead of landing underneath it. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  color: var(--text);
  background: var(--canvas);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

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

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; margin: 0; }

/* The wordmark, drawn in Duma Bold with a real coral disc for the tone dot, matching the app's
   Wordmark composable. The dot keeps coral's meaning as the color of action. */
.wordmark {
  font-family: "Duma", var(--sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
}
/* The coral tone dot is a real disc resting on the text baseline, matching the app's
   Wordmark composable (a 0.17em disc, AboveBaseline). vertical-align: baseline places an
   empty inline-block's bottom edge on the baseline, so the disc sits like a low round dot
   after "meret" at any size, rather than being nudged by a flex hack. */
.wordmark .dot {
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 0.05em;
  /* Seat the disc a touch below the baseline (scales with the type) so it reads as a
     grounded tone dot rather than sitting a hair high. */
  vertical-align: -0.02em;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand img { height: 28px; width: 28px; display: block; border-radius: 8px; }
.brand .wordmark { font-size: 21px; }
.site-header nav { display: inline-flex; align-items: center; gap: 26px; }
.site-header nav a { color: var(--muted); font-weight: 600; font-size: 15px; }
.site-header nav a:hover { color: var(--text); }
.nav-cta {
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text) !important;
  background: var(--surface-2);
}
.nav-cta:hover { border-color: var(--accent-line); }
@media (max-width: 720px) { .site-header nav a:not(.nav-cta) { display: none; } }

/* Ambient glow behind the hero.
   overflow: clip (not hidden) contains the glow pseudo-elements without turning the
   hero into a programmatically scrollable box, which otherwise traps an anchor jump
   to the waitlist form inside the hero and blocks scrolling until a page refresh. */
.hero { position: relative; padding: 84px 0 56px; overflow: clip; }
.hero::before {
  content: ""; position: absolute; inset: -34% -18% auto auto;
  width: 1120px; height: 900px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,106,61,0.20), rgba(255,106,61,0.07) 45%, rgba(255,106,61,0) 72%);
  filter: blur(8px);
}
.hero::after {
  content: ""; position: absolute; inset: auto auto -34% -20%;
  width: 820px; height: 680px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(142,123,255,0.16), rgba(142,123,255,0) 72%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 22px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
}
.eyebrow .live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-line);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,106,61,0.5); }
  70% { box-shadow: 0 0 0 9px rgba(255,106,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,106,61,0); }
}

.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  line-height: 1.04; font-weight: 800; margin: 0 0 22px;
}
.hero h1 .em { color: var(--accent); }
.hero .lede { font-size: clamp(1.08rem, 2.1vw, 1.3rem); color: var(--muted); margin: 0 0 30px; max-width: 40ch; }

/* Waitlist CTA */
.cta { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.waitlist { display: flex; gap: 10px; }
.waitlist input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  padding: 14px 16px; font-size: 15px; font-family: var(--sans);
  color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.waitlist input[type="email"]::placeholder { color: var(--faint); }
.waitlist input[type="email"]:focus { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-weak); }
.btn {
  flex: 0 0 auto; cursor: pointer; border: none; white-space: nowrap;
  padding: 14px 22px; font-size: 15px; font-weight: 700; font-family: var(--sans);
  color: #180B06; border-radius: 14px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent-deep));
  box-shadow: 0 12px 30px -12px rgba(226,75,37,0.6);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(226,75,37,0.7); }
.btn:active { transform: translateY(0); }
.note { color: var(--faint); font-size: 13.5px; margin: 2px 0 0; display: flex; align-items: center; gap: 7px; }
.note.note-center { justify-content: center; text-align: left; }
.note svg { width: 15px; height: 15px; flex: none; color: var(--good); }

/* ---- The phone: a faithful mock of the app's live Recording screen.
   Structure and tokens are ported from docs/design/design.html (the "Capture, live"
   screen): Pause is the big center control, Stop reaches to the side, and the third
   slot is held for the planned Flag control. The waveform is animated for a live feel. */
/* perspective on the stage lets the device tilt in 3D as the page scrolls (driven in JS).
   A closer perspective makes the tilt read clearly rather than looking flat. */
.stage { justify-self: center; position: relative; perspective: 1000px; }
.device {
  width: min(320px, 82vw);
  border-radius: 46px; padding: 11px;
  background: linear-gradient(160deg, #211E29, #0d0c11);
  border: 1px solid #322E3C;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 46px 90px -34px rgba(0,0,0,0.92), 0 0 0 1px rgba(0,0,0,0.4);
  transform: translateY(var(--phoneY, 0px)) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
/* The phone's real thickness: a short stack of rounded slabs sitting behind the front
   face, each pushed a little further back in Z. Because every slab is the same rounded
   rectangle as the phone, the stacked edges form a solid rounded side that follows the
   corners, so the device reads as a real object when it tilts. The slabs are built and
   coloured in site.js and are invisible head-on (the front face covers them). */
.device .device-slab {
  position: absolute; inset: 0; border-radius: 46px;
  backface-visibility: hidden; pointer-events: none;
}
.screen {
  position: relative; border-radius: 36px; overflow: hidden;
  background: var(--ink); aspect-ratio: 320 / 690; display: flex; flex-direction: column;
}
/* status bar */
.screen .statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); flex: 0 0 auto;
}
.screen .dots { display: flex; gap: 5px; align-items: center; }
.screen .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); display: inline-block; }
.screen .bat { width: 22px; height: 11px; border: 1px solid var(--muted); border-radius: 3px; position: relative; }
/* a partial green charge, matching the design's status bar battery */
.screen .bat::after { content: ""; position: absolute; inset: 2px; right: 7px; background: var(--good); border-radius: 1px; }
/* app shell and app bar */
.screen .app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.screen .appbar { padding: 8px 20px 4px; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.screen .title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.screen .body { flex: 1; min-height: 0; overflow: hidden; padding: 6px 18px 12px; display: flex; flex-direction: column; gap: 12px; }
/* the live recording panel */
.rec-live { flex: 1; display: flex; flex-direction: column; }
.rec-top { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.rec-dot { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.rec-dot b { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-weak); animation: blink 1.4s steps(1) infinite; }
.rec-timer { font-family: var(--mono); font-size: 48px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
@keyframes blink { 50% { opacity: 0.25; } }
/* the live waveform: a coral amplitude envelope with the app's exact bar heights (set
   inline). To simulate an active recording it scrolls steadily left to right. The bar
   sequence is duplicated into one track so the loop is seamless, and the two ends are
   masked so bars fade in and out rather than popping at the edges. */
.rec-wave {
  height: 72px; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.rec-wave-track {
  display: flex; align-items: center; gap: 3px; height: 100%; width: max-content;
  animation: recscroll 7s linear infinite;
}
.rec-wave-track i { flex: 0 0 auto; width: 3px; border-radius: 2px; background: var(--accent); }
/* translate by half the track (one full copy) so copy 2 lands exactly where copy 1 began */
@keyframes recscroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* controls: Pause is the big center button, Stop reaches to the side, third slot held for Flag */
.rec-controls { display: flex; align-items: flex-start; justify-content: center; gap: 30px; padding: 6px 0 4px; }
.rcwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rcwrap span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.rcwrap.center span { color: var(--accent); }
.rc { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.rc svg { width: 24px; height: 24px; }
.rc.big { width: 84px; height: 84px; background: var(--accent); color: #180b06; border: none; box-shadow: 0 18px 44px -16px rgba(255,106,61,0.75); }
.rc.big svg { width: 30px; height: 30px; }
/* the Pause control is clickable: it toggles the preview between recording and paused */
.rcwrap.center .rc.big { cursor: pointer; transition: transform 0.12s ease; }
.rcwrap.center .rc.big:active { transform: scale(0.95); }

/* paused state: the status goes muted and still, the waveform holds, the timer freezes
   (handled in JS), and the button becomes Resume (icon swapped in JS), mirroring the app */
.is-paused .rec-dot { color: var(--muted); }
.is-paused .rec-dot b { background: var(--muted); box-shadow: none; animation: none; }
.is-paused .rec-wave-track { animation-play-state: paused; }
/* home indicator */
.home-indicator { flex: 0 0 auto; display: flex; justify-content: center; padding: 12px 0 14px; }
.home-indicator::after { content: ""; width: 118px; height: 5px; border-radius: 3px; background: var(--surface-3); }
@media (prefers-reduced-motion: reduce) {
  .rec-wave-track, .rec-dot b, .eyebrow .live { animation: none; }
}

/* Hero collapses to a single column on narrow screens, phone below the copy. */
@media (max-width: 900px) {
  .hero { padding: 56px 0 40px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
  .hero .intro { order: 1; }
  .stage { order: 2; }
  .device { width: min(300px, 78vw); }
  .cta { max-width: 100%; }
}
@media (max-width: 460px) {
  .waitlist { flex-direction: column; }
  .waitlist input[type="email"], .waitlist .btn { width: 100%; }
  .closing .waitlist { flex-direction: column; }
}

/* Section rhythm */
section { position: relative; }
.section-head { max-width: 640px; margin: 0 0 40px; }
.section-head .kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  display: block; margin: 0 0 14px;
}
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 800; }
.section-head p { color: var(--muted); font-size: 1.08rem; margin: 16px 0 0; }

/* The creative loop: three destinations */
.loop { padding: 40px 0 20px; }
.loop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dest {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.dest:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.dest .num { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.14em; }
.dest .ic {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin: 16px 0 18px;
  background: var(--accent-weak); border: 1px solid var(--accent-line); color: var(--accent-2);
}
.dest.idea .ic { background: var(--violet-weak); border-color: var(--violet-line); color: var(--violet); }
.dest .ic svg { width: 24px; height: 24px; }
.dest h3 { font-size: 1.3rem; font-weight: 750; margin: 0 0 10px; }
.dest p { color: var(--muted); font-size: 0.98rem; margin: 0; }
.dest .arrow {
  position: absolute; top: 26px; right: 24px; color: var(--faint); font-size: 18px;
}
@media (max-width: 860px) { .loop-grid { grid-template-columns: 1fr; } }

/* Principles: how it feels */
.feel { padding: 72px 0 40px; }
.feel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feature {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px;
}
.feature .fi {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--accent-2);
}
.feature .fi svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.1rem; font-weight: 700; margin: 2px 0 6px; }
.feature p { color: var(--muted); font-size: 0.96rem; margin: 0; }
@media (max-width: 720px) { .feel-grid { grid-template-columns: 1fr; } }

/* Story band */
.story { padding: 64px 0; }
.band {
  position: relative; overflow: hidden;
  border-radius: 30px; padding: 56px clamp(28px, 5vw, 64px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(142,123,255,0.12), transparent 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(255,106,61,0.12), transparent 55%),
    var(--surface);
  border: 1px solid var(--line);
}
.band .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; margin: 0 0 18px; }
.band h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 800; margin: 0 0 22px; max-width: 20ch; }
.band p { color: var(--muted); font-size: 1.08rem; max-width: 62ch; margin: 0 0 16px; }
.band p.close { color: var(--text); }
.band p.close strong { color: var(--text); font-weight: 700; }

/* FAQ */
.faq { padding: 40px 0 80px; }
.faq-list { display: grid; gap: 12px; max-width: 820px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 22px; transition: border-color 0.2s ease;
}
.faq-item[open] { border-color: var(--accent-line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 0; font-weight: 650; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--mono); font-size: 20px; color: var(--accent); flex: none;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--muted); margin: 0 0 18px; font-size: 1rem; }

/* Closing call */
.closing { padding: 20px 0 90px; }
.closing .wrap { text-align: center; }
.closing h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin: 0 0 14px; }
/* Direct child only, so this subtitle style does not bleed into the form's .note and
   .form-done paragraphs (which would otherwise inherit its larger size and wrap). */
.closing .wrap > p { color: var(--muted); margin: 0 auto 28px; max-width: 46ch; font-size: 1.1rem; }
.closing .cta { margin: 0 auto; align-items: center; }
.closing .waitlist { width: 100%; }

/* Footer */
.site-footer { border-top: 1px solid var(--line-soft); padding: 40px 0 56px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 20px; }
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-top .wordmark { font-size: 20px; }
.foot-links { display: inline-flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-weight: 600; font-size: 14px; }
.foot-links a:hover { color: var(--text); }
.fine { color: var(--faint); font-size: 13px; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fine .sep { opacity: 0.5; }

/* ---- Legal and prose pages (privacy, security, terms) ---- */
.legal { padding: 56px 0 80px; }
.legal .wrap { max-width: 760px; }
.legal .back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 30px; font-weight: 600; font-size: 14px; color: var(--muted);
}
.legal .back:hover { color: var(--text); }
/* The arrow carries the coral accent so the back link reads as branded and clickable,
   while the label stays in the muted-to-white register the header navigation uses. */
.legal .back .arrow { color: var(--accent); transition: transform 0.15s ease; }
.legal .back:hover .arrow { transform: translateX(-2px); }
.legal h1 { font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 800; margin: 0 0 8px; }
.legal .updated { color: var(--faint); font-family: var(--mono); font-size: 13px; margin: 0 0 32px; }
.legal .lede { color: var(--text); font-size: 1.12rem; margin: 0 0 28px; }
.legal h2 { font-size: 1.32rem; font-weight: 750; margin: 44px 0 12px; color: var(--text); }
.legal h3 { font-size: 1.08rem; font-weight: 700; margin: 28px 0 10px; color: var(--text); }
.legal p, .legal li { color: #C4BFD1; font-size: 1.02rem; }
.legal p { margin: 0 0 16px; }
.legal ul { padding-inline-start: 22px; margin: 0 0 16px; }
.legal li { margin: 0 0 9px; }
.legal li strong, .legal p strong { color: var(--text); font-weight: 650; }
.legal a { color: var(--accent-2); }
.legal a:hover { color: var(--accent); }

/* A quiet callout for a disclaimer or a draft note */
.legal .callout {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 14px; padding: 16px 20px; margin: 0 0 32px;
}
.legal .callout p { margin: 0; color: var(--muted); font-size: 0.96rem; }

/* Permissions table */
.legal .table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 14px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.98rem; min-width: 460px; }
.legal thead th {
  text-align: left; padding: 13px 18px; color: var(--text); font-weight: 700;
  background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.legal tbody td { padding: 13px 18px; color: #C4BFD1; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.legal tbody tr:last-child td { border-bottom: none; }
.legal tbody td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .legal tbody td:first-child { white-space: normal; } }

/* A short cross-link row at the foot of a legal page. These are related pages with no
   inherent order, so they carry no directional arrow, just a quiet "See also" label. */
.legal .also {
  margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
}
.legal .also .also-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
}
.legal .also a { font-weight: 600; font-size: 14px; }

/* A tiny inline confirmation for the waitlist, shown after submit */
.form-done { display: none; color: var(--good); font-size: 14px; margin: 2px 0 0; align-items: center; gap: 8px; }
.form-done.show { display: flex; }
.form-done svg { width: 16px; height: 16px; flex: none; }