/* The landing page only. The legal pages keep styles.css alone. */
.landing { --night: #0b1120; --night-2: #141a2e; }
.landing .topbar { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--ground) 82%, transparent); border-bottom: 1px solid var(--line); }
.landing .topbar .inner { max-width: 1080px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; }
.landing .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--ink); letter-spacing: -0.01em; }
.landing .brand .mark { width: 28px; height: 28px; }
.landing .inner { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.landing .eyebrow { color: var(--brand); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; margin: 0 0 10px; }
.landing .center { text-align: center; }
.landing h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 18px; }
.landing h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 14px; }
.landing .lede { font-size: 1.12rem; line-height: 1.6; color: var(--ink-soft); max-width: 34em; }
.landing .lede.center { margin-left: auto; margin-right: auto; }

.landing .hero { padding: 64px 0 24px; text-align: left; }
.landing .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.landing .cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.landing .cta-note { color: var(--ink-soft); font-size: 0.95rem; }

.landing .play { display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff; text-decoration: none; border-radius: 12px; padding: 10px 18px 10px 14px; line-height: 1.05; border: 1px solid #333; }
.landing .play span { display: flex; flex-direction: column; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.landing .play small { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.08em; opacity: 0.85; }
.landing .play.large { padding: 14px 24px 14px 18px; border-radius: 14px; margin-top: 8px; }
.landing .play.large span { font-size: 1.4rem; }
.landing .play-small { padding: 8px 16px; font-weight: 600; font-size: 0.95rem; border-radius: 999px; }

/* A phone: dark bezel, the app's own black inside, and the screenshot fills it.
   `peek` lets the tall shots sit half out of the section so the page stays short. */
.landing .phone { margin: 0; width: min(320px, 100%); aspect-ratio: 720 / 1406; border-radius: 40px; padding: 10px; background: #1a1a1f; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6), inset 0 0 0 1px #2c2c33; overflow: hidden; justify-self: center; }
.landing .phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 31px; background: var(--night); }
.landing .phone.small { width: min(230px, 100%); border-radius: 30px; padding: 7px; }
.landing .phone.small img { border-radius: 24px; }
.landing .phone.small figcaption { display: none; }
.landing .hero-phone { width: min(360px, 100%); transform: rotate(-3deg); }

.landing .feature { padding: 72px 0; }
.landing .feature.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.landing .feature-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; }
.landing .feature-grid.reverse { grid-template-columns: 1.2fr 0.8fr; }
.landing .feature-grid.reverse .phone { order: 2; }
.landing .feature-copy p { color: var(--ink-soft); font-size: 1.05rem; max-width: 36em; }

.landing .cities { padding: 80px 0 40px; }
.landing .city-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; justify-items: center; }

.landing .get { padding: 88px 0 96px; background: linear-gradient(160deg, #4f46e5, #9333ea 55%, #ec4899); color: #fff; }
.landing .get h2, .landing .get .lede { color: #fff; }
.landing .get .lede { opacity: 0.88; margin: 0 auto 8px; }
.landing .get h2 { margin-bottom: 10px; }

.landing footer .inner { max-width: 1080px; }

@media (max-width: 860px) {
  .landing .hero { padding-top: 40px; }
  .landing .hero-grid, .landing .feature-grid, .landing .feature-grid.reverse { grid-template-columns: 1fr; gap: 28px; }
  .landing .feature-grid.reverse .phone { order: 0; }
  .landing .hero-phone { transform: none; margin-top: 12px; }
  .landing .city-row { grid-template-columns: repeat(2, 1fr); }
  .landing .feature { padding: 52px 0; }
}