@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
}

:root {
  --field: #0F1712;
  --glass: #1A231C;
  --gold: #E0A93E;
  --chalk: #F5F5F0;
  --muted: #8A948C;
  --line: rgba(138, 148, 140, 0.25);
  --display: "Anton", "Arial Narrow", sans-serif;
  --body-font: "Archivo", Helvetica, Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  background: var(--field);
  color: var(--chalk);
  font-family: var(--body-font);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* Chalk grain over the whole field */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}

/* Vignette: darker edges, night-game feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 32%, transparent 52%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 1;
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

/* Floodlight banks: two blooms in the upper corners, haze below. Lights as weather. */
.lights {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(620px 340px at 7% -8%, rgba(245, 245, 240, 0.17), transparent 65%),
    radial-gradient(620px 340px at 93% -8%, rgba(245, 245, 240, 0.17), transparent 65%),
    linear-gradient(180deg, rgba(245, 245, 240, 0.045), transparent 32%);
}

a {
  color: var(--chalk);
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.site-header {
  padding: 1.4rem 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-family: var(--body-font);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--chalk);
}

.brand img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: block;
}

.prelaunch {
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  white-space: nowrap;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 0 3rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.5rem;
  align-items: center;
  width: 100%;
}

.kicker {
  font-family: var(--display);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.7rem, 5.6vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.sub {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 33rem;
  margin-bottom: 1.8rem;
}

.sub strong {
  color: var(--chalk);
  font-weight: 600;
}

.signup {
  background: rgba(26, 35, 28, 0.72);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.4rem 1.5rem 1.25rem;
  max-width: 29rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.signup h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.field-row {
  margin-bottom: 1rem;
}

label,
legend {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--chalk);
  margin-bottom: 0.35rem;
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

input[type="email"],
input[type="text"],
select {
  width: 100%;
  background: rgba(15, 23, 18, 0.85);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--chalk);
  font: inherit;
  font-size: 1rem;
  padding: 0.65rem 0.8rem;
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--chalk);
  outline-offset: 2px;
}

fieldset {
  border: 0;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choices label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  font-weight: 500;
  color: var(--chalk);
  cursor: pointer;
  margin-bottom: 0;
}

.choices input {
  accent-color: var(--muted);
}

.choices label:has(input:checked) {
  border-color: var(--chalk);
}

.more {
  margin-bottom: 1rem;
}

.more summary {
  color: var(--muted);
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.more summary::-webkit-details-marker {
  display: none;
}

.more summary::before {
  content: "+";
  font-weight: 600;
}

.more[open] summary::before {
  content: "\2212";
}

.more[open] summary {
  margin-bottom: 0.9rem;
}

.agecheck {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--chalk);
  margin-bottom: 1.2rem;
}

.agecheck input {
  margin-top: 0.25rem;
  accent-color: var(--muted);
  width: 1rem;
  height: 1rem;
  flex: none;
}

.cta {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, #EBB954, var(--gold));
  color: #14100a;
  border: 0;
  border-radius: 12px;
  font-family: var(--body-font);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.9rem 1rem;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(224, 169, 62, 0.22);
}

.cta:disabled {
  opacity: 0.6;
  cursor: default;
}

.quiet {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 0.85rem;
}

.quiet a {
  color: var(--muted);
}

.form-error {
  color: var(--chalk);
  background: rgba(138, 148, 140, 0.12);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem;
  margin-top: 0.8rem;
}

.thanks {
  max-width: 29rem;
}

.thanks h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.thanks p {
  color: var(--muted);
}

/* The lit object */
.phone-col {
  display: flex;
  justify-content: center;
  position: relative;
}

/* Floodlight falloff behind the phone */
.phone-col::before {
  content: "";
  position: absolute;
  width: 150%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(245, 245, 240, 0.1), rgba(245, 245, 240, 0.035) 45%, transparent 72%);
  pointer-events: none;
}

.phone {
  position: relative;
  width: clamp(300px, 28vw, 390px);
  max-width: 86vw;
  border-radius: 60px;
  padding: 4px;
  /* Titanium band: light sweeps around the rim, bright top and bottom, dark flanks */
  background: conic-gradient(
    from 0deg at 50% 50%,
    #eceeed 0deg,
    #b9bbba 25deg,
    #5f6160 70deg,
    #464847 90deg,
    #5f6160 110deg,
    #c6c8c7 155deg,
    #f2f4f3 180deg,
    #c6c8c7 205deg,
    #5f6160 250deg,
    #464847 270deg,
    #5f6160 290deg,
    #b9bbba 335deg,
    #eceeed 360deg
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.25),
    0 24px 48px rgba(0, 0, 0, 0.55),
    0 60px 120px rgba(0, 0, 0, 0.5);
}

/* Physical buttons: action + two volume on the left, power on the right */
.phone-buttons {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.phone-buttons::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 16.5%;
  width: 3.5px;
  height: 26px;
  border-radius: 2px;
  background: linear-gradient(180deg, #cfd1d0, #8e908f 15%, #6a6c6b 85%, #3c3e3d);
  box-shadow:
    -0.5px 0 0 0 rgba(0, 0, 0, 0.45),
    0 44px 0 0 #7d7f7e,
    -0.5px 44px 0 0 rgba(0, 0, 0, 0.45),
    0 86px 0 0 #7d7f7e,
    -0.5px 86px 0 0 rgba(0, 0, 0, 0.45);
}

.phone-buttons::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 27%;
  width: 3.5px;
  height: 58px;
  border-radius: 2px;
  background: linear-gradient(180deg, #cfd1d0, #8e908f 15%, #6a6c6b 85%, #3c3e3d);
  box-shadow: 0.5px 0 0 0 rgba(0, 0, 0, 0.45);
}

/* Dynamic Island over the status bar */
.phone-screen::after {
  content: "";
  position: absolute;
  top: 1.9%;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  height: 2.7%;
  border-radius: 999px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
  z-index: 2;
}

/* Ground shadow so it sits on the field */
.phone::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -34px;
  height: 44px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0.55), transparent 75%);
  filter: blur(6px);
  z-index: -1;
}

.phone-screen {
  position: relative;
  border-radius: 56px;
  border: 10px solid #050605;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.04);
}

/* Glass sheen: one soft diagonal reflection across the top corner */
.phone-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 18%, transparent 34%);
  pointer-events: none;
  z-index: 1;
}

.phone-screen img {
  border-radius: 45px;
}

.phone-screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Three beats, nothing more */
.beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}

.beat h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.beat h3 span {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  margin-right: 0.5rem;
}

.beat p {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Second still: the app answering "is this real?" */
.proof {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
  gap: 3rem;
  align-items: center;
  margin-top: 4rem;
}

.proof .phone {
  width: min(260px, 70vw);
  border-radius: 46px;
  padding: 3px;
  margin: 0 auto;
}

.proof .phone-screen {
  border-radius: 43px;
  border-width: 7px;
}

.proof .phone-screen img {
  border-radius: 36px;
}

.proof .phone-buttons::before {
  height: 18px;
  top: 16%;
  box-shadow:
    -0.5px 0 0 0 rgba(0, 0, 0, 0.45),
    0 30px 0 0 #7d7f7e,
    -0.5px 30px 0 0 rgba(0, 0, 0, 0.45),
    0 58px 0 0 #7d7f7e,
    -0.5px 58px 0 0 rgba(0, 0, 0, 0.45);
}

.proof .phone-buttons::after {
  height: 40px;
}

.proof-copy h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.proof-copy p {
  color: var(--muted);
  font-size: 1rem;
  max-width: 28rem;
}

.proof-link {
  margin-top: 1.1rem;
}

.proof-link a {
  color: var(--chalk);
  font-weight: 600;
  text-underline-offset: 3px;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0 1.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.site-footer a {
  color: var(--muted);
}

.made-by {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.aries-mark {
  width: auto;
  height: 15px;
  opacity: 0.85;
}

.footer-links {
  display: flex;
  gap: 1.25rem;
}

.page {
  padding: 2.5rem 0 3rem;
}

.page article {
  max-width: 42rem;
}

.page h1 {
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  margin-bottom: 1.25rem;
}

.page h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 1.7rem 0 0.5rem;
}

.page p,
.page li {
  color: var(--muted);
  margin-bottom: 0.8rem;
}

.page ul {
  padding-left: 1.2rem;
}

.page strong {
  color: var(--chalk);
}

/* ============================================================
   Homepage (branch prototype). Everything below is additive;
   the waitlist styles above stay untouched.
   ============================================================ */

body.home main {
  justify-content: flex-start;
  padding-bottom: 0;
}

/* Evening pitch behind the hero: the app's own floodlit-field backdrop,
   darkened hard and dissolving into the flat field color so the sections
   below stay quiet. Scrolls with the page; not a fixed wallpaper. */
body.home {
  position: relative;
}

.hero-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(150vh, 1380px);
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg,
      rgba(15, 23, 18, 0.42) 0%,
      rgba(15, 23, 18, 0.30) 26%,
      rgba(15, 23, 18, 0.58) 58%,
      rgba(15, 23, 18, 0.88) 80%,
      var(--field) 97%),
    url("/assets/pitch-night-wide.jpg");
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
}

/* Bookend: the field returns under the closing badge, so the page ends
   where it began. Solid field at the top edge, grass by the footer. */
.close-backdrop {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: min(95vh, 820px);
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg,
      var(--field) 0%,
      rgba(15, 23, 18, 0.88) 28%,
      rgba(15, 23, 18, 0.6) 66%,
      rgba(15, 23, 18, 0.52) 100%),
    url("/assets/pitch-night-wide.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Extra shade on the left flank where the headline and badge sit */
.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 23, 18, 0.55) 8%, transparent 58%);
}

.brand-wordmark img {
  width: auto;
  height: 38px;
  border-radius: 0;
}

.header-store {
  color: var(--chalk);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.42rem 1.05rem;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.header-store:hover {
  border-color: var(--chalk);
  background: rgba(245, 245, 240, 0.06);
}

body.home .hero {
  padding-top: 2rem;
  min-height: min(calc(88vh - 90px), 720px);
  align-content: center;
}

/* Store badge: the one thing this page wants tapped */
.store-cta {
  margin-top: 0.4rem;
}

.store-badge {
  display: inline-block;
  border-radius: 13px;
  line-height: 0;
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.store-badge img {
  display: block;
  width: 180px;
  height: 60px;
}

.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.store-badge:active {
  transform: translateY(0);
}

body.home .quiet {
  margin-top: 1rem;
}

/* Hero video slot: still now, one-file swap later */
.phone-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 45px;
  z-index: 1;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(245, 245, 240, 0.4);
  background: rgba(15, 23, 18, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--chalk);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  /* the huge spread is clipped by the screen's overflow and acts as a scrim,
     so the button reads as a video affordance, not a stray control */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 9999px rgba(5, 8, 6, 0.28);
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.play-btn[hidden] {
  display: none;
}

.play-btn svg {
  margin-left: 3px;
}

.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.07);
  background: rgba(15, 23, 18, 0.75);
  border-color: rgba(245, 245, 240, 0.6);
}

.play-btn.nudge {
  animation: nudge 420ms ease;
}

@keyframes nudge {
  0%, 100% { transform: translate(-50%, -50%); }
  30% { transform: translate(-50%, -50%) scale(0.94); }
  60% { transform: translate(-50%, -50%) scale(1.04); }
}

/* Smaller phone variants (same hardware, scaled down) */
.phone.small {
  width: min(260px, 70vw);
  border-radius: 46px;
  padding: 3px;
  margin: 0 auto;
}

.phone.small .phone-screen {
  border-radius: 43px;
  border-width: 7px;
}

.phone.small .phone-screen img {
  border-radius: 36px;
}

.phone.small .phone-buttons::before,
.phone.mini .phone-buttons::before {
  height: 18px;
  top: 16%;
  box-shadow:
    -0.5px 0 0 0 rgba(0, 0, 0, 0.45),
    0 30px 0 0 #7d7f7e,
    -0.5px 30px 0 0 rgba(0, 0, 0, 0.45),
    0 58px 0 0 #7d7f7e,
    -0.5px 58px 0 0 rgba(0, 0, 0, 0.45);
}

.phone.small .phone-buttons::after,
.phone.mini .phone-buttons::after {
  height: 40px;
}

.phone.mini {
  width: min(232px, 62vw);
  border-radius: 42px;
  padding: 3px;
  margin: 0 auto;
}

.phone.mini .phone-screen {
  border-radius: 39px;
  border-width: 6px;
}

.phone.mini .phone-screen img {
  border-radius: 33px;
}

.phone.mini::after,
.phone.small::after {
  bottom: -24px;
  height: 32px;
}

/* Section rhythm. padding-top only, deliberately: these sections are all
   .wrap, and the shorthand that used to live here zeroed the horizontal
   padding .wrap sets, so at phone widths the copy ran to both screen edges. */
.beats-block,
.reject,
.loop,
.close {
  padding-top: 4.5rem;
}

/* 2. Three beats, each with its screen */
.beats-block {
  border-top: 1px solid var(--line);
  margin-top: 4.5rem;
}

.beats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}

.beat-card {
  text-align: center;
}

.mini-phone-wrap {
  padding: 1.4rem 0 2.2rem;
  position: relative;
}

.mini-phone-wrap::before {
  content: "";
  position: absolute;
  width: 120%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(245, 245, 240, 0.07), rgba(245, 245, 240, 0.02) 45%, transparent 72%);
  pointer-events: none;
}

.beat-card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.beat-card h3 span {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  margin-right: 0.5rem;
}

.beat-card p {
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 19rem;
  margin: 0 auto;
}

/* 3 + 4. Copy-and-phone sections */
.reject,
.loop {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
  gap: 3rem;
  align-items: center;
}

.loop {
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
}

.reject-copy h2,
.loop-copy h2,
.close h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.reject-copy p,
.loop-copy p {
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 30rem;
  margin-bottom: 0.8rem;
}

.reject-copy strong,
.loop-copy strong,
.close p strong {
  color: var(--chalk);
  font-weight: 600;
}

.loop-phones {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.loop-phones .phone.small {
  margin: 0;
  width: min(235px, 62vw);
}

.phone.tilt-l {
  transform: rotate(-4deg) translateX(12px);
  z-index: 1;
}

.phone.tilt-r {
  transform: rotate(4deg) translateX(-12px) translateY(18px);
}

/* The loop beat lost its second phone when the Home screen came out. A lone
   phone still carrying the pair's inward offset reads as a missing sibling,
   so the solo case sits centred, tilts the other way to match the copy on
   its left, and takes the width the pair used to share. */
.loop-phones-solo .phone.small {
  width: min(268px, 68vw);
}

.loop-phones-solo .phone.tilt-r {
  transform: rotate(-3deg);
}

/* 5. Close */
.close {
  padding-bottom: 5rem;
  text-align: center;
}

.close-inner {
  max-width: 34rem;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding-top: 4rem;
}

.close p {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 1.6rem;
}

.close .quiet {
  margin-top: 1.2rem;
}

/* Scroll reveals: applied only when JS confirms motion is welcome */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.js-reveal .reveal.in {
  opacity: 1;
  transform: none;
}

.js-reveal .phone-col.reveal {
  transition-delay: 120ms;
}

.js-reveal .beat-card:nth-child(2) {
  transition-delay: 100ms;
}

.js-reveal .beat-card:nth-child(3) {
  transition-delay: 200ms;
}

/* tilt transforms must survive the reveal transform reset */
.js-reveal .loop-phones.reveal {
  transition-delay: 120ms;
}

@media (max-width: 840px) {
  body.home .hero {
    min-height: 0;
    padding-top: 0.5rem;
  }

  /* Portrait pitch shot on phones, fit to width so the towers survive the
     crop; the fade reaches flat field before the photo's bottom edge (the
     image runs 150vw tall at this ratio, so the fade closes inside it) */
  .hero-backdrop {
    height: min(115vh, 950px);
    background-image:
      linear-gradient(180deg,
        rgba(15, 23, 18, 0.44) 0%,
        rgba(15, 23, 18, 0.38) 28%,
        rgba(15, 23, 18, 0.72) 46%,
        var(--field) 58%),
      url("/assets/pitch-night-tall.jpg");
    background-size: 100% auto;
    background-position: center top;
  }

  .hero-backdrop::after {
    content: none;
  }

  /* Copy first on the homepage: the headline and store badge own the first
     screen; the phone follows. (The waitlist keeps its phone-first order.) */
  body.home .phone-col {
    order: 0;
    padding-top: 1.5rem;
  }

  .brand-wordmark img {
    height: 30px;
  }

  body.home .site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(15, 23, 18, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(138, 148, 140, 0.14);
    padding: 0.8rem 0;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy .sub {
    margin-left: auto;
    margin-right: auto;
  }

  .beats-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .reject,
  .loop {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    text-align: center;
  }

  .reject-copy p,
  .loop-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .reject-phone {
    order: 1;
  }

  .reject-copy {
    order: 0;
  }

  .loop-phones .phone.small {
    width: min(180px, 44vw);
  }

  .beats-block,
  .reject,
  .loop,
  .close {
    padding-top: 3.2rem;
  }

  .beats-block {
    margin-top: 3rem;
  }
}

@media (max-width: 840px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .phone-col {
    order: -1;
    padding-top: 1rem;
  }

  .phone {
    width: min(225px, 58vw);
  }

  .proof .phone {
    width: min(210px, 54vw);
  }

  main {
    padding-top: 0.25rem;
  }

  .beats {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin-top: 2.5rem;
  }

  .proof {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
    text-align: center;
  }

  .proof-copy p {
    margin: 0 auto;
  }

  .prelaunch {
    font-size: 0.72rem;
    white-space: normal;
    text-align: center;
  }
}

/* Pre-launch CTA. Mirrors the waitlist button on `/` so the two pages read as
   one site. Reverts to `.store-badge` above on launch day. */
.cta {
  display: inline-block;
  background: linear-gradient(180deg, #EBB954, var(--gold));
  color: #14100a;
  border: 0;
  border-radius: 12px;
  font-family: var(--body-font);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.9rem 1.9rem;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(224, 169, 62, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(224, 169, 62, 0.3);
}

.cta:focus-visible {
  outline: 2px solid var(--chalk);
  outline-offset: 3px;
}

/* The header CTA carries "Join the waitlist" rather than the shorter string the
   pill was sized for, which wrapped it to two lines below about 360px and
   crowded the wordmark. Keep it on one line and give it back the room. */
.header-store {
  white-space: nowrap;
}

@media (max-width: 360px) {
  .header-store {
    font-size: 0.8rem;
    padding: 0.38rem 0.78rem;
  }

  .brand-wordmark img {
    width: 118px;
    height: auto;
  }
}