:root {
  --bg: #121416;
  --text: #f4f7fb;
  --muted: #a9b7c4;
  --cyan: #20e0d0;
  --font-display: "Manrope", sans-serif;
  --font-body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font-body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }

/* Soft teal and blue glows, as on the main site. */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .22; animation: drift 14s ease-in-out infinite alternate; }
.aurora span:first-child { width: 520px; height: 520px; top: -180px; left: -160px; background: #20e0d0; }
.aurora span:last-child { width: 560px; height: 560px; bottom: -220px; right: -180px; background: #1d7cff; animation-duration: 17s; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.08); } }

.holding { flex: 1; width: min(640px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.brand { width: 190px; }
.mascot { width: min(260px, 62vw); margin: 34px 0 10px; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); }

h1 { margin: 0; font: 800 clamp(44px, 8vw, 72px)/1 var(--font-display); letter-spacing: -.045em; }
h1 span { color: var(--cyan); font-style: italic; }
.lede { max-width: 420px; margin: 22px 0 30px; color: #fff; font-size: clamp(17px, 2.6vw, 20px); line-height: 1.6; }

/* A copy of the app's "Transcribing…" indicator. */
.indicator { display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 26px 0 8px; border: 1px solid #1f4c47; border-radius: 999px; background: #212329; box-shadow: 0 22px 50px rgba(0, 0, 0, .55); color: #b6c0c8; font: 400 16px "Segoe UI", Inter, system-ui, sans-serif; }
.indicator-spinner { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #1a2027; }
.indicator-spinner::before { content: ""; width: 20px; height: 20px; border: 2.5px solid #174a55; border-top-color: #1fd6e8; border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.tagline { margin: 30px 0 0; color: var(--muted); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.footer { padding: 20px 16px 26px; color: #7f8c99; font-size: 12px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .aurora span, .indicator-spinner::before { animation: none; }
}