/* =========================================================================
   Design tokens
   Mirrored from the mobile app's `theme.ts` design system, so this landing
   page stays visually consistent with the app. Keep these two in sync if
   the app's theme changes. Source values (Tailwind naming) noted inline.
   ========================================================================= */
:root {
  /* Brand */
  --color-primary: #d97706;       /* amber-600 — primary CTA color */
  --color-primary-dark: #b45309;  /* amber-700 — hover/active state */
  --color-badge: #fef3c7;         /* amber-100 — badge/pill backgrounds */

  /* Dark showcase panel background */
  --color-dark-bg: #0f172a;       /* slate-900 */

  /* Screens & surfaces */
  --color-bg: #f9fafb;            /* gray-50 — page background */
  --color-surface: #ffffff;       /* white — cards, nav/footer fill */

  /* Text */
  --color-text: #1f2937;          /* gray-800 — primary text */
  --color-text-muted: #6b7280;    /* gray-500 — secondary text */
  --color-text-faint: #9ca3af;    /* gray-400 — fine print, timestamps */

  /* Borders */
  --color-border: #e5e7eb;        /* gray-200 */

  /* Status */
  --color-danger: #d32f2f;
  --color-success: #2e7d32;

  /* Radii (app scale: sm 6 / md 12 / lg 20 / pill 999) */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

/* Font family: Outfit (via Google Fonts on web; the app loads the same
   family through @expo-google-fonts/outfit as Outfit_400Regular/500Medium/
   600SemiBold/700Bold — use font-weight 400/500/600/700 below to match). */

* {
  box-sizing: border-box;
}

html {
  /* Stops WebKit from inflating text (and, with it, the effective layout
     scale) when the device rotates — Safari's documented remedy for
     rotation-induced text/zoom scaling. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  /* Grid (rather than a flex column) for the nav / content / footer stack.
     Grid places each section in an explicit full-width column, whereas the
     flex version relied on `align-items: stretch`, which iOS Safari fails to
     recompute after an orientation change — leaving the nav and footer
     shrunk to their content width. The `1fr` middle row grows to push the
     footer to the bottom on short pages, and still expands past the viewport
     when the content is taller. `dvh` tracks Safari's dynamic toolbars, with
     `vh` as a fallback for older browsers. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Nav */
.nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-surface);
  font-weight: 700;
  font-size: 0.9rem;
}

.nav__brand-text {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-badge);
  color: var(--color-primary-dark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Hero layout */
.hero {
  display: flex;
  align-items: center;
  padding: 28px 24px;
}

.hero__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 480px;
}



.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.eyebrow__line {
  width: 24px;
  height: 2px;
  background: var(--color-primary);
}

.hero__title {
  font-size: clamp(1.75rem, 6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--color-text);
}

.hero__description {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 28px;
}

/* Signup form */
.signup-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.signup-form input[type='email'] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
}

.signup-form input[type='email']::placeholder {
  color: var(--color-text-faint);
}

.signup-form input[type='email']:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.signup-form input[type='email']:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.signup-form button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.signup-form button:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.signup-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-message {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: 0.9rem;
}

.form-message.success {
  color: var(--color-success);
}

.form-message.error {
  color: var(--color-danger);
}

.hero__fineprint {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  line-height: 1.5;
  margin: 16px 0 24px;
}

.hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__features li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
}

.hero__features-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-badge);
  border: 1px solid var(--color-primary);
}

/* Showcase (dark panel) */
.showcase {
  /* Deliberately no fixed height: the panel sizes to its content, and the
     photo's height comes from its own aspect ratio. That keeps it correct at
     any viewport size — including short/landscape phones, where a
     viewport-height-based height would squash the photo flat. */
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-dark-bg);
  border-radius: var(--radius-lg);
  padding: 24px;
  color: var(--color-surface);
  overflow: hidden;
}

.showcase__eyebrow {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

.showcase__title {
  flex: 0 0 auto;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.showcase__photo {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.showcase__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.85), transparent);
}

.showcase__caption-title {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-surface);
}

.showcase__caption-text {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* Legal pages */
.legal {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px;
}

.legal__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--color-text);
}

.legal__body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 32px;
}

.legal__body a {
  color: var(--color-primary);
  text-decoration: underline;
}

.legal__back {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

.legal__back:hover {
  color: var(--color-primary);
}

/* Footer */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  text-align: center;
  padding: 24px 16px;
}

.site-footer__link {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.site-footer__copyright {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

/* Responsive */
@media (max-width: 900px) {
  /* Stack the text and the photo panel vertically, and anchor the content to
     the top rather than centering it, since it may now be taller than the
     viewport. */
  .hero {
    align-items: flex-start;
    padding: 24px 20px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero__left {
    max-width: none;
  }
}

@media (max-width: 640px) {
  /* Let the nav wrap onto a second line instead of overflowing (the brand
     and the "Coming Soon" badge don't fit one line at phone widths, which
     caused horizontal scrolling). */
  .nav__inner {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 14px 16px;
  }

  .nav__brand-text {
    font-size: 0.95rem;
  }

  .hero__description {
    font-size: 1rem;
  }

  /* Stack the email field and button so both are full-width, easy-to-tap
     targets rather than being squeezed side by side. */
  .signup-form__row {
    flex-direction: column;
    align-items: stretch;
  }

  .signup-form input[type='email'],
  .signup-form button {
    flex: 0 0 auto;
    width: 100%;
  }

  .signup-form button {
    justify-content: center;
  }

  .hero__features {
    gap: 16px;
  }

  .showcase {
    padding: 18px;
  }
}