/* Emcee waitlist — built from canvas direction 4A.
   Mobile-first; the desktop layout takes over at 1100px. */

:root {
  --bg: #0E0F12;
  --text: #F5F5F2;
  --muted: #9A9A9E;
  --faint: #6e7685;
  --orange: #FF8C1A;
  --orange-press: #E67E17;
  --pink: #FC95A8;
  --blue: #92A8FF;
  --teal: #86CFCE;
  --peach: #FEA376;
  --lime: #EBF1B0;
  --surface: #17171A;
  --field: #161618;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .12);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "IBM Plex Mono", monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

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

html {
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}
/* The page itself never scrolls — `main.snap` does, one full-screen panel at a time */
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.accent { color: var(--orange); }
.desktop-only { display: none !important; }

/* ---------- Background (same as direction 3C) ---------- */
.bg { position: fixed; inset: 0; z-index: -1; background: var(--bg); pointer-events: none; }
.bg::before, .bg::after { content: ""; position: absolute; inset: 0; }
.bg::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) .5px, transparent .5px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) .5px, transparent .5px);
  background-size: 60px 60px;
}
.bg::after {
  background:
    radial-gradient(360px 300px at 70% 4%, rgba(146, 168, 255, .16), transparent 60%),
    radial-gradient(320px 280px at 10% 34%, rgba(252, 149, 168, .13), transparent 60%),
    radial-gradient(340px 300px at 90% 62%, rgba(134, 207, 206, .13), transparent 60%),
    radial-gradient(300px 260px at 40% 90%, rgba(254, 163, 118, .11), transparent 60%);
}

/* ---------- Panels: each one is exactly one screen tall ---------- */
.snap {
  position: fixed; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.panel {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Content that might not fit a short screen is scaled down to fit (see main.js) */
.fit { transform-origin: center center; }
.panel-index {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--faint);
}
h1, h2, h3, p { margin: 0; }
h1 em, h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.14em; letter-spacing: -.016em; color: var(--orange);
}

/* ---------- Header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  padding-top: max(22px, env(safe-area-inset-top));
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.logo-word { width: 94.57px; height: 30px; flex: none; }
/* Desktop menu */
.site-nav { align-items: center; gap: 36px; }
.site-nav a {
  padding: 6px 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); transition: color .15s;
}
.site-nav a:hover { color: var(--text); }
.site-nav a:focus-visible { color: var(--text); outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 2px; }

/* Mobile menu button: a + that turns into an × inside the menu */
.menu-btn {
  position: relative; flex: none;
  width: 40px; height: 40px; margin: -4px -8px -4px 0; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.plus { position: relative; width: 22px; height: 22px; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.plus::before, .plus::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: currentColor;
}
.plus::after { transform: rotate(90deg); }

/* Mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: rgba(14, 15, 18, .94);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0; transition: opacity .25s ease;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu.is-open .menu-close .plus { transform: rotate(45deg); }
.menu-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 24px 48px; }
.menu-links a {
  align-self: flex-start; padding: 6px 0;
  font-size: 46px; line-height: 1.05; font-weight: 700; letter-spacing: -.035em; color: var(--text);
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1), color .15s;
}
.menu.is-open .menu-links a { opacity: 1; transform: none; }
.menu.is-open .menu-links a:nth-child(2) { transition-delay: .05s, .05s, 0s; }
.menu.is-open .menu-links a:nth-child(3) { transition-delay: .1s, .1s, 0s; }
.menu.is-open .menu-links a:nth-child(4) { transition-delay: .15s, .15s, 0s; }
.menu-links a:hover, .menu-links a:active { color: var(--orange); }
.menu-links a:focus-visible { color: var(--orange); outline: none; }
.menu-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 0 24px max(28px, env(safe-area-inset-bottom));
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange);
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.82); }
}

/* ---------- Phone mockup (sized from --h, its height) ---------- */
.phone {
  --h: 380px;
  position: relative; flex: none;
  height: var(--h); width: calc(var(--h) * .479);
  border-radius: calc(var(--h) * .083);
  padding: max(2px, calc(var(--h) * .0053));
  background: linear-gradient(150deg, #4a4a4e, #1b1b1d 38%, #0d0d0f 62%, #3d3d41);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
}
.phone-inner {
  width: 100%; height: 100%;
  border-radius: calc(var(--h) * .0775);
  padding: max(3px, calc(var(--h) * .0128));
  background: #000;
}
.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: calc(var(--h) * .0669);
  overflow: hidden; background: #0b0b0d;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.island {
  position: absolute; left: 50%; top: calc(var(--h) * .021); transform: translateX(-50%);
  width: calc(var(--h) * .177); height: calc(var(--h) * .051);
  border-radius: 999px; background: #000;
}
.dim { position: absolute; inset: 0; background: rgba(10, 12, 15, .42); }

/* ---------- Hero (mobile) ---------- */
.hero-body {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 44px;
}
.hero-inner {
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  width: 100%; max-width: 560px;
  padding: 0 24px;
}
.hero-fan {
  /* phone height: as tall as the design (380px) or whatever space the screen leaves */
  --ph: min(380px, 88.4vw, calc(var(--vh) - 392px));
  display: flex; align-items: flex-end; justify-content: center;
  margin: 0 -24px;
}
.phone-center { --h: var(--ph); position: relative; z-index: 2; }
.phone-side {
  --h: calc(var(--ph) * .8);
  margin-bottom: calc(var(--ph) * .055);
  background: linear-gradient(150deg, #434347, #1b1b1d 40%, #0d0d0f 64%, #38383c);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .5);
}
.phone-left { margin-right: calc(var(--ph) * -.066); transform: rotate(-6deg); transform-origin: bottom right; }
.phone-right { margin-left: calc(var(--ph) * -.066); transform: rotate(6deg); transform-origin: bottom left; }

.hero-copy { display: flex; flex-direction: column; gap: 16px; }
.eyebrow {
  align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.6px;
  color: var(--orange); text-transform: uppercase;
}
.eyebrow .pulse { width: 7px; height: 7px; }

.headline {
  margin-top: 24px;
  font-size: min(40px, calc((100vw - 48px) / 10));
  line-height: 1.02; letter-spacing: -.0375em; font-weight: 700; color: var(--text);
}
.lede { max-width: 470px; font-size: 19px; line-height: 1.5; color: var(--muted); }

/* Rotating word — every word sits in one fixed-width slot, so nothing around it moves */
.slot {
  display: inline-grid; width: 3.6em;
  justify-items: center; align-items: baseline; vertical-align: baseline;
}
/* line-height 0 keeps the taller display fonts from pushing the two headline lines apart.
   The padding (cancelled by the negative margin, so nothing moves) gives script letters
   that reach past their box, like the tail on Caveat's "e", room so Safari doesn't clip them.
   Visibility, not opacity, gives the hard cut without Safari putting each word on its own
   clipped GPU layer. */
.word {
  grid-area: 1 / 1; white-space: nowrap; line-height: 0; visibility: hidden;
  padding: .5em .2em; margin: -.5em -.2em;
  animation: word-cycle 2s step-end infinite both;
}
@keyframes word-cycle { 0% { visibility: visible; } 12.5%, 100% { visibility: hidden; } }
.w1 { color: var(--orange); animation-delay: 0s; }
.w2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.14em; letter-spacing: -.02em; color: var(--pink); animation-delay: -1.75s; }
.w3 { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 1.05em; letter-spacing: .01em; color: var(--blue); animation-delay: -1.5s; }
.w4 { font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-weight: 400; font-size: .92em; letter-spacing: -.01em; color: var(--teal); animation-delay: -1.25s; }
.w5 { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: .95em; letter-spacing: -.04em; color: var(--peach); animation-delay: -1s; }
.w6 { font-family: "Pacifico", cursive; font-weight: 400; font-size: .92em; letter-spacing: 0; color: var(--lime); animation-delay: -.75s; }
.w7 { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.4em; letter-spacing: 0; color: var(--pink); animation-delay: -.5s; }
.w8 { font-family: "Syne", sans-serif; font-weight: 800; font-size: .86em; letter-spacing: -.03em; color: var(--blue); animation-delay: -.25s; }

/* ---------- Waitlist form ---------- */
.waitlist { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; width: 100%; }
.waitlist input {
  height: 54px; padding: 0 18px; font-size: 16px;
  color: var(--text); background: var(--field);
  border: 1px solid var(--line-strong); border-radius: 12px; outline: none;
}
.waitlist input::placeholder { color: #9a9a97; }
.waitlist input:focus-visible { border-color: rgba(255, 140, 26, .55); }
.waitlist button {
  height: 54px; padding: 0 28px; font-size: 16px; font-weight: 600;
  color: #241305; background: var(--orange);
  border: none; border-radius: 12px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(255, 140, 26, .28);
}
.waitlist button:hover:not(:disabled) { background: var(--orange-press); }
.waitlist button:disabled { cursor: not-allowed; }
.waitlist { position: relative; }
/* hidden trap field for bots */
.waitlist .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* after signing up, the field and button are replaced by a confirmation */
.waitlist-done {
  display: none; flex: 1; align-items: center; gap: 12px;
  min-height: 54px; margin: 0; padding: 12px 18px;
  font-size: 15px; line-height: 1.4; text-align: left; color: var(--text);
  background: rgba(111, 217, 143, .08); border: 1px solid rgba(111, 217, 143, .35); border-radius: 12px;
}
.waitlist-done::before {
  content: "✓"; flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: #0E0F12; background: #6FD98F;
}
.waitlist.is-done input, .waitlist.is-done button { display: none; }
.waitlist.is-done .waitlist-done { display: flex; }
/* errors sit just under the form so nothing around it moves */
.waitlist-msg {
  position: absolute; left: 0; right: 0; top: 100%; margin: 8px 0 0;
  font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: .4px; color: #FF8A7A;
}
.waitlist-msg:empty { display: none; }

.waitlist-count { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; color: var(--muted); }
.waitlist-count[hidden] { display: none; }
.waitlist-count strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.avatars { display: flex; }
.avatars img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; }
.avatars img + img { margin-left: -9px; }

/* ---------- Inside the app (mobile) ---------- */
.inside { justify-content: center; align-items: center; }
.inside-wrap {
  display: flex; flex-direction: column; gap: 22px;
  width: 100%; max-width: 560px;
  padding: 52px 24px 44px;
}
.inside-head { display: flex; flex-direction: column; gap: 12px; }
.inside-head h2 { font-size: 32px; line-height: 1.05; letter-spacing: -.034em; font-weight: 700; }
.inside-head p { max-width: 620px; font-size: 19px; line-height: 1.5; color: var(--muted); }

.cards { display: flex; flex-direction: column; gap: 22px; }
.card {
  display: flex; flex-direction: row-reverse; align-items: stretch; gap: 14px;
  padding: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.card-shot {
  /* window height shrinks on shorter screens so all three cards fit */
  position: relative; flex: none; width: 128px; height: clamp(110px, calc((var(--vh) - 363px) / 3), 190px);
  border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .04);
}
.phone-card { --h: 230px; position: absolute; left: 9px; top: 12px; box-shadow: none; padding: 2px; }
.phone-card .phone-inner { padding: 0; border-radius: calc(var(--h) * .074); }
.card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.card h3 { font-size: 19px; font-weight: 600; letter-spacing: -.016em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  margin: 0; padding: 5px 8px;
  font-family: var(--mono); font-size: 9px; line-height: normal; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.chip:hover { color: var(--text); border-color: rgba(255, 255, 255, .28); }
.chip[aria-pressed="true"] {
  color: var(--accent); background: rgba(var(--accent-rgb), .08);
  border-color: rgba(var(--accent-rgb), .6); cursor: default;
}
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shot-in { animation: shot-in .35s ease both; }
@keyframes shot-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Get in line (mobile) ---------- */
.waves-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  width: 100%; max-width: 480px; margin: 0 auto; padding: 48px 24px;
  text-align: center;
}
.waves-body h2 { font-size: 52px; line-height: .96; letter-spacing: -.038em; font-weight: 700; }
.waves-body h2 em { letter-spacing: -.015em; }
.waves-body p { max-width: 320px; font-size: 14px; line-height: 1.55; color: var(--muted); }

.site-footer {
  padding: 18px 24px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px; color: var(--faint); text-transform: uppercase;
}

/* ---------- Scroll reveal (where the browser supports it) ---------- */
@supports (animation-timeline: view()) {
  .reveal { animation: rise auto linear both; animation-timeline: view(); animation-range: entry 5% entry 50%; }
}
@keyframes rise { from { opacity: 0; transform: translateY(54px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .word { animation: none; }
  .w1 { visibility: visible; }
  .pulse, .reveal, .shot-in { animation: none; }
  .menu, .menu-links a, .plus { transition: none; }
}

/* =================================================================
   Desktop — 1100px and up
   ================================================================= */
@media (min-width: 1100px) {
  .desktop-only { display: revert !important; }
  .eyebrow.desktop-only, .site-nav.desktop-only { display: flex !important; }
  .menu { display: none !important; }
  .mobile-only { display: none !important; }

  .bg::before { background-size: 90px 90px; }
  .bg::after {
    background:
      radial-gradient(640px 420px at 72% 6%, rgba(146, 168, 255, .15), transparent 60%),
      radial-gradient(520px 380px at 14% 32%, rgba(252, 149, 168, .12), transparent 60%),
      radial-gradient(560px 400px at 88% 58%, rgba(134, 207, 206, .13), transparent 60%),
      radial-gradient(480px 360px at 38% 88%, rgba(254, 163, 118, .10), transparent 60%);
  }

  .panel-index { bottom: 20px; gap: 5px; font-size: 10px; letter-spacing: 1.6px; }

  .site-header { padding: 30px 64px; }
  .logo { gap: 12px; }
  .logo-icon { width: 36px; height: 36px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45)); }
  .logo-word { width: 100.87px; height: 32px; }

  .hero-body { padding-bottom: 40px; }
  .hero-inner {
    --stage-w: min(560px, 44vw);
    display: grid; grid-template-columns: minmax(0, 1fr) var(--stage-w); align-items: center; gap: 40px;
    max-width: 1440px; padding: 0 64px;
  }
  .hero-copy { gap: 26px; }
  .headline {
    margin-top: 0;
    font-size: min(60px, calc((100vw - 168px - min(560px, 44vw)) / 10));
    line-height: .96; letter-spacing: -.038em;
  }
  .waitlist { flex-direction: row; max-width: 470px; padding-top: 0; }
  .waitlist input { flex: 1; min-width: 0; height: 58px; padding: 0 20px; font-size: 17px; }
  .waitlist button { height: 58px; font-size: 17px; }
  .waitlist-done { min-height: 58px; padding: 14px 20px; font-size: 16px; }
  .waitlist-msg { font-size: 12px; }
  .waitlist-count { justify-content: flex-start; gap: 14px; font-size: 15px; }
  .avatars img { width: 30px; height: 30px; }
  .avatars img + img { margin-left: -10px; }

  .hero-stage { position: relative; width: var(--stage-w); height: min(768px, calc(var(--vh) - 136px)); }
  .stage-glow {
    position: absolute; inset: -60px -100px; pointer-events: none;
    background:
      radial-gradient(360px 300px at 35.3% 33%, rgba(146, 168, 255, .15), transparent 65%),
      radial-gradient(340px 300px at 69.2% 60.8%, rgba(252, 149, 168, .13), transparent 65%),
      radial-gradient(320px 280px at 54.4% 25.2%, rgba(134, 207, 206, .13), transparent 65%);
  }
  .phone-hero {
    --h: min(568px, calc(var(--vh) - 290px));
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
  }
  .feature-cards { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 2; }
  .feature-card {
    position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 10px;
    width: 184px; padding: 8px 12px 8px 8px;
    border-radius: 12px; background: rgba(26, 26, 28, .85);
    border: 1px solid rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  }
  .feature-card img { width: 38px; height: 38px; flex: none; }
  .feature-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .feature-card strong { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
  .feature-card span { font-size: 10.5px; line-height: 1.3; color: var(--muted); }

  .inside-wrap { max-width: 1440px; gap: 40px; padding: clamp(40px, calc((var(--vh) - 600px) / 2), 80px) 64px; }
  .inside-head { gap: 14px; max-width: 780px; }
  .inside-head h2 { font-size: 50px; line-height: 1.02; letter-spacing: -.038em; }
  .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
  .card { flex-direction: column; gap: 14px; padding: 0; overflow: visible; background: none; border: 0; border-radius: 0; }
  .card-shot {
    width: 100%; height: min(360px, calc(var(--vh) - 480px));
    border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
  }
  .phone-card {
    --h: 459px; left: 50%; top: 44px; transform: translateX(-50%);
    padding: 3px; box-shadow: 0 22px 44px rgba(0, 0, 0, .55);
  }
  .phone-card .phone-inner { padding: 6px; border-radius: calc(var(--h) * .0763); }
  .card h3 { font-size: 22px; letter-spacing: -.018em; }
  .chips { gap: 8px; }
  .chip { padding: 6px 10px; font-size: 10px; letter-spacing: 1.2px; }

  .waves-body { max-width: 760px; gap: 26px; padding: 64px; }
  .waves-body h2 { font-size: 84px; line-height: .94; letter-spacing: -.04em; }
  .waves-body h2 em { letter-spacing: -.017em; }
  .waves-body p { max-width: 520px; font-size: 19px; line-height: 1.5; }
  .waves-body .waitlist { width: 470px; }
  .site-footer { padding: 22px 64px; font-size: 10px; letter-spacing: 1.4px; }
}

/* Shorter phone screens (most browsers with their toolbars showing):
   tighten spacing so every panel still fits one screen */
@media (max-width: 1099px) and (max-height: 760px) {
  .hero-inner, .hero-copy { gap: 12px; }
  .headline { margin-top: 12px; }
  .waitlist input, .waitlist button { height: 48px; }
  .hero-fan { --ph: min(380px, 88.4vw, calc(var(--vh) - 352px)); }

  .inside-wrap { gap: 14px; padding: 44px 24px 40px; }
  .inside-head { gap: 10px; }
  .inside-head h2 { font-size: 28px; }
  .cards { gap: 14px; }
  .card { padding: 12px; gap: 12px; }
  .card-shot { height: clamp(110px, calc((var(--vh) - 330px) / 3), 190px); }
}