/* Tokens mirror frontend/src/constants/palette.ts and typography.ts —
   keep these in sync by hand if the app's design system changes; this site
   has no build step / shared package with the app to pull them from
   automatically. */
:root {
  --brand-100: #e0ecff;
  --brand-200: #c0d9ff;
  --brand-500: #377ee3;
  --brand-600: #0462d3;
  --brand-700: #004daa;
  --brand-900: #00265b;

  --neutral-50: #fbf8f6;
  --neutral-100: #f2eeea;
  --neutral-200: #e2ddd9;
  --neutral-500: #7f7974;
  --neutral-700: #443f3b;
  --neutral-900: #14110f;

  --success-100: #d5f5da;
  --success-700: #006b2e;
  --success-900: #003312;

  /* Same vertical gradient as the app icon/splash screen/in-app loading
     screen (Palette.brand[500] -> brand[900]) — used here so the very
     first thing a visitor sees ties directly to the app they'll recognize
     on their home screen, rather than introducing a new color. */
  --brand-gradient: linear-gradient(180deg, var(--brand-500), var(--brand-900));

  --font-display: "Sora", -apple-system, sans-serif;
  --font-body: "Public Sans", -apple-system, sans-serif;

  --radius-medium: 12px;
  --radius-large: 20px;
  --radius-pill: 999px;

  --content-width: 1080px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--neutral-900);
  background: var(--neutral-50);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  text-align: center;
}

p {
  margin: 0 0 1em;
  color: var(--neutral-700);
}

a {
  color: var(--brand-600);
}

img {
  max-width: 100%;
  display: block;
}

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

/* --- Header --- */

.site-header {
  padding: 20px 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
}

.brand__wordmark {
  height: 24px;
  width: auto;
}

/* --- Buttons --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.button--primary {
  background: var(--brand-600);
  color: #fff;
}

/* Bordered, like the app's own secondary Button (components/ui/Button.tsx —
   isBordered is true for 'secondary'/'outline') — this site's version was
   missing the border, which is part of why a page like FAQ, using this same
   shared header, read as visually distinct from the app's own screens even
   though the color tokens already matched. */
.button--secondary {
  background: var(--neutral-100);
  color: var(--neutral-900);
  border-color: var(--neutral-200);
}

.button--outline {
  background: transparent;
  border-color: var(--neutral-200);
  color: var(--brand-600);
}

/* White-filled, brand-blue text — for the actually-usable primary action
   when it sits on a brand-gradient surface (hero, CTA band), where a plain
   .button--primary's blue fill would nearly disappear into the background. */
.button--inverse {
  background: #fff;
  color: var(--brand-700);
}

/* Muted/ghost — for "Get the app — coming soon", which isn't clickable
   yet. Deliberately the quieter option next to .button--inverse: the
   button people can actually use right now should be the loud one, not a
   disabled App Store badge. */
.button--ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.button--large {
  padding: 14px 28px;
  font-size: 1.05rem;
}

.button[aria-disabled="true"] {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

/* --- Chip --- */

.chip {
  display: inline-block;
  background: var(--success-100);
  color: var(--success-900);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

/* --- Hero --- */

.hero {
  padding: 64px 0 96px;
  background: var(--brand-gradient);
  color: #fff;
}

.hero h1 {
  color: #fff;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero__subhead {
  font-size: 1.15rem;
  max-width: 46ch;
  /* var(--neutral-700) (this file's default <p> color) is illegible on the
     dark gradient — a light, slightly-transparent white instead, so it
     still reads as secondary/lower-emphasis than the white h1 above it. */
  color: rgba(255, 255, 255, 0.85);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.hero__shot {
  max-width: 320px;
  margin: 0 auto;
  /* The framed mockup image already has its own dark bezel/shadow-reading
     edges baked in (see generate-phone-mockup.cjs) — a drop-shadow here is
     just extra lift so it reads as floating above the gradient rather than
     flush against it. */
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
}

/* --- How it works --- */

.how-it-works {
  padding: 64px 0;
  background: var(--brand-100);
}

.steps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.step {
  background: #fff;
  border-radius: var(--radius-medium);
  padding: 28px;
}

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 16px;
}

/* --- Features --- */

.features {
  padding: 80px 0;
}

.section-subhead {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
  font-size: 1.05rem;
}

.feature-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.feature h3 {
  font-size: 1.15rem;
}

/* --- CTA band --- */

.cta {
  padding: 72px 0;
  background: var(--brand-900);
  color: #fff;
  text-align: center;
}

.cta h2 {
  color: #fff;
}

.cta .hero__actions {
  justify-content: center;
}

/* --- FAQ ---
   Deliberately NOT styled like the rest of this marketing site's
   hero/landing sections (centered, oversized display type, generous
   whitespace) — this page's counterparts are terms.tsx/privacy.tsx in the
   actual app (a document-style screen: left-aligned, Typography.title's
   28px scale, tighter spacing), and the three read as one connected "legal/
   info" flow to a visitor even though they're genuinely different codebases
   (see AGENTS.md-adjacent comment at the top of this file) — so FAQ matches
   THAT density instead of this site's own hero styling. */

.faq {
  padding: 40px 0 64px;
}

.faq__wrap {
  max-width: 720px;
}

.faq h1 {
  text-align: left;
  /* 1.75rem = 28px at the default 16px root — Typography.title's exact
     size/family (Sora Bold) in the app's ThemedText, not this site's own
     clamp()'d hero h1 scale. */
  font-size: 1.75rem;
  margin-bottom: 0.3em;
}

.faq .section-subhead {
  text-align: left;
  margin: 0 0 32px;
  max-width: none;
}

.faq-list {
  margin: 0;
}

.faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--neutral-200);
}

.faq-item:first-child {
  border-top: 1px solid var(--neutral-200);
}

.faq-item dt a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--neutral-900);
  text-decoration: none;
}

.faq-item dt a:hover {
  color: var(--brand-600);
}

.faq-item dd {
  margin: 8px 0 0;
  color: var(--neutral-700);
}

.faq-still-stuck {
  text-align: center;
  margin-top: 40px;
}

/* --- Footer --- */

.site-footer {
  padding: 32px 0;
  border-top: 1px solid var(--neutral-200);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer__mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.site-footer__copy {
  margin: 0;
  color: var(--neutral-500);
  font-size: 0.9rem;
}

.site-footer__links {
  margin-left: auto;
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
}

@media (max-width: 800px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  /* No order override here on purpose — natural DOM order (copy, then
     screenshot) matches the desktop layout's left-to-right reading
     priority. A real, detail-rich screenshot (specific items/prices) needs
     the headline's framing BEFORE it, not after — showing it first reads
     as "what am I looking at?" rather than "oh, that's what this does." */
  .steps,
  .feature-grid {
    grid-template-columns: 1fr;
  }
}