/* Colors, radii and shadows match the app (mobile/src/design/tokens.ts). */
:root {
  --dark-navy: #2E2E50;
  --medium-navy: #3A3A5C;
  --light-navy: #8080A8;
  --very-light-navy: #EFEFF2;
  --extra-light-navy: #F5F5F8;
  --white: #FFFFFF;
  --periwinkle: #C4BFF4;
  --rose: #F4C2D7;
  --mint: #C9E8D1;
  --butter: #F6E3A8;
  --peach: #F6D9C4;
  --card-shadow: 0 4px 20px rgba(100, 80, 120, 0.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--extra-light-navy);
  color: var(--dark-navy);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--dark-navy); }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; }

header { padding: 20px 0; }
header .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 20px; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }

main { flex: 1; }

/* Home */
.home { display: flex; align-items: center; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
/* iPhone frame around the app screenshot */
.phone { position: relative; width: 100%; max-width: 300px; aspect-ratio: 300 / 568; margin: 0 auto; padding: 11px; background: #1C1C1E; border-radius: 50px; box-shadow: var(--card-shadow), inset 0 0 0 2px #3A3A3C; }
.phone::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 88px; height: 26px; background: #000; border-radius: 13px; z-index: 1; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 39px; display: block; }
.hero h1 { font-size: 56px; line-height: 60px; font-weight: 900; margin: 0 0 16px; letter-spacing: -0.5px; }
.hero .tagline { font-size: 22px; line-height: 30px; color: var(--medium-navy); margin: 0 0 28px; }
.badge { display: inline-block; background: var(--white); border-radius: 16px; padding: 12px 18px; font-weight: 800; box-shadow: var(--card-shadow); }
.badge span { display: block; font-weight: 400; font-size: 14px; color: var(--light-navy); margin-top: 2px; }

/* Legal pages */
.doc { background: var(--white); border-radius: 20px; box-shadow: var(--card-shadow); padding: 40px; margin: 16px auto 56px; max-width: 760px; }
.doc h1 { font-size: 28px; line-height: 34px; font-weight: 800; margin: 0 0 4px; }
.doc .updated { color: var(--light-navy); margin: 0 0 28px; }
.doc h2 { font-size: 18px; line-height: 24px; font-weight: 800; margin: 32px 0 8px; }
.doc p, .doc li { color: var(--medium-navy); }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.note { background: var(--butter); border-radius: 16px; padding: 14px 18px; color: var(--dark-navy); }

footer { padding: 24px 0 32px; border-top: 1px solid var(--very-light-navy); }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--light-navy); }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--light-navy); text-decoration: none; }
footer a:hover { color: var(--dark-navy); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 8px; padding-bottom: 40px; }
  .hero h1 { font-size: 42px; line-height: 46px; }
  .hero .tagline { font-size: 19px; line-height: 26px; }
  .doc { padding: 24px 20px; }
}