/* People: shared styles.
   Colours mirror lib/core/design/app_colors.dart so the site and app match. */

:root {
  --accent: #2d6be4;
  --accent-2: #5b8def;
  --warm: #e85d3d;      /* AppColors.accentWarm */
  --warm-2: #ff8a6b;
  --logo: #fc6143;      /* AppColors.logoColor / interaction */

  /* Semantic tokens, matching the app. */
  --birthday: #e85d8a;  /* AppColors.eventBirthday */
  --privacy: #2d6be4;   /* AppColors.accent */
  --journey: #1aa8a8;   /* map/journey teal */

  /* AppColors.avatarGradients, so the tiles match the app's avatars. */
  --g0a: #5b5bd6; --g0b: #9b59b6;   /* indigo -> purple */
  --g1a: #2d6be4; --g1b: #1aa8a8;   /* blue   -> teal   */
  --g2a: #e85d8a; --g2b: #e09b2d;   /* pink   -> amber  */
  --g3a: #18a85a; --g3b: #2d6be4;   /* green  -> blue   */
  --g4a: #e09b2d; --g4b: #e85d3d;   /* amber  -> warm   */
  --g5a: #1aa8a8; --g5b: #18a85a;   /* teal   -> green  */
  --g6a: #9b59b6; --g6b: #e85d8a;   /* purple -> pink   */
  --violet: #5b5bd6;    /* AppColors.avatarGradients indigo */
  --violet-2: #9b59b6;  /* ...purple */
  --teal: #1aa8a8;      /* ...teal */
  --ink: #0e141b;
  --ink-2: #495663;
  --ink-3: #7a8694;
  --bg: #ffffff;
  --bg-2: #f6f7f9;
  --card: #ffffff;
  --line: #e6e9ee;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
            0 8px 24px -8px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.04),
               0 24px 48px -12px rgba(16, 24, 40, 0.18);
  --max: 720px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3f5f8;
    --ink-2: #b3bdc9;
    --ink-3: #838e9c;
    --bg: #0b0f14;
    --bg-2: #121820;
    --card: #141b24;
    --line: #232c38;
    --accent: #4d88ff;
    --accent-2: #74a2ff;
    --warm: #ff7a5c;      /* AppColors.accentWarm dark */
    --warm-2: #ff9d85;
    --logo: #fc6143;      /* same in both modes, as in the app */
    --violet: #7d7de0;
    --violet-2: #b072cd;
    --teal: #3cc4c4;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4),
                 0 24px 48px -12px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Anchor targets stop below the sticky header (59px) instead of under it. */
.section-head[id], .doc h2[id], .doc h3[id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  /* Slight transparency so content tints the bar as it scrolls under.
     No backdrop-filter: blurring a sticky element forces a repaint on every
     scroll frame, which showed as jitter. */
  background: var(--logo);
  background: color-mix(in srgb, var(--logo) 97%, transparent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  padding: 14px 28px;
  max-width: 1120px;
  margin: 0 auto;
}

.site-header img {
  width: 30px;
  height: 30px;
  border-radius: 8px; /* ~0.295 x size, matching AppRadius.squircle */
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.site-header .name {
  font-weight: 680;
  font-size: 17.5px;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}

.site-header nav { margin-left: auto; display: flex; gap: 26px; }

.site-header nav a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.005em;
  transition: color 0.15s ease;
}

.site-header nav a:hover { color: #fff; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: 104px 28px 88px;
  text-align: center;
}

/* Soft brand wash behind the headline, echoing the app's warm/cool pairing. */
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 20% auto;
  height: 620px;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--warm) 20%, transparent), transparent),
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
  background-position: 22% 32%, 78% 20%;
  background-size: 58% 90%, 62% 88%;
  background-repeat: no-repeat;
  filter: blur(28px);
  pointer-events: none;
  z-index: -1;
}

.hero .inner { max-width: 780px; margin: 0 auto; }

.hero img.mark {
  width: 78px;
  height: 78px;
  margin-bottom: 26px;
  border-radius: 23px; /* ~0.295 x size */
  box-shadow: 0 12px 28px -8px rgba(232, 93, 61, 0.42);
}

.hero h1 {
  font-size: clamp(38px, 6.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 18px;
}

.hero h1 .accent {
  background: linear-gradient(120deg, var(--logo), var(--g0b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lede {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 540px;
  margin: 0 auto 34px;
}

.badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-3);
  text-decoration: none;
  font-weight: 550;
  font-size: 15px;
  box-shadow: var(--shadow);
}

/* ── Phone mockup ───────────────────────────────────────────────────────── */

.showcase { padding: 0 28px 96px; display: flex; justify-content: center; }

.phone {
  width: min(300px, 88vw);
  height: 610px;
  border-radius: 46px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  position: relative;
}

.phone .screen {
  width: 100%;
  height: 100%;
  border-radius: 35px;
  background: var(--bg-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 30px 20px 20px;
  gap: 12px;
}

.phone .notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 26px;
  border-radius: 0 0 16px 16px;
  background: var(--card);
  z-index: 2;
}

.phone .greeting {
  font-size: 21px;
  font-weight: 680;
  letter-spacing: -0.02em;
  margin: 6px 0 2px;
}

.phone .sub { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }

.phone .stat-row { display: flex; gap: 10px; }

.phone .stat {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 11px;
}

.phone .stat .label {
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 650;
}

.phone .stat .num {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 2px;
}

.phone .cta {
  background: linear-gradient(120deg, var(--logo), #ff8f70);
  color: #fff;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 650;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 18px -6px rgba(252, 97, 67, 0.55);
}

.phone .section-label {
  font-size: 13px;
  font-weight: 680;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

.phone .row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 11px;
}

.phone .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}

.phone .row .who { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.phone .row .when { font-size: 10.5px; color: var(--ink-3); }
.phone .row .pill {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 999px;
}

/* ── Features ───────────────────────────────────────────────────────────── */

.section-head { max-width: 1120px; margin: 0 auto; padding: 0 28px 34px; }

.section-head .eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.section-head h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  letter-spacing: -0.028em;
  margin: 0;
  max-width: 620px;
  line-height: 1.15;
}

.features {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.feature .icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--accent), var(--journey));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--journey) 80%, transparent);
}

/* Quick Log carries AppColors.interaction, its branding colour in the app.
   Deliberately not accentWarm: today_stats_strip.dart makes the same point
   where the nudge is built. */
.feature.quicklog .icon {
  background: linear-gradient(135deg, var(--logo), #ff8f70);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--logo) 80%, transparent);
}

.feature.g0 .icon {
  background: linear-gradient(135deg, var(--g0a), var(--g0b));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--g0a) 80%, transparent);
}

.feature.birthday .icon {
  background: linear-gradient(135deg, var(--birthday), #f2809f);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--birthday) 80%, transparent);
}

.feature.privacy .icon {
  background: linear-gradient(135deg, var(--privacy), var(--accent-2));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--privacy) 80%, transparent);
}

.feature.g5 .icon {
  background: linear-gradient(135deg, var(--g5a), var(--g5b));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--g5a) 80%, transparent);
}

.feature .icon svg { width: 22px; height: 22px; stroke: #fff; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.feature h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.018em;
}

.feature p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }

/* ── "And the rest" list ────────────────────────────────────────────────── */

.more-list {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4px 48px;
}

.more-list ul { list-style: none; margin: 0; padding: 0; }

.more-list li {
  position: relative;
  padding: 7px 0 7px 26px;
  color: var(--ink-2);
  font-size: 15.5px;
}

/* Tick rather than a bullet: these are things the app already does. */
.more-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.qa {
  /* Barely-there fill: enough to read as a card, not a grey block. */
  background: color-mix(in srgb, var(--bg-2) 45%, var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}

/* Flex rather than an absolutely positioned pseudo-element: the badge then
   aligns to the first line's box instead of a guessed offset, and stays put
   when the question wraps. */
.qa h3 {
  font-size: 16.5px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  margin: 0 0 7px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

/* A quiet question mark instead of a bullet. */
.qa h3::before {
  content: "?";
  flex: none;
  /* Sits on the cap height rather than the ascender. */
  margin-top: 2px;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

.qa p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}

/* ── Privacy strip ──────────────────────────────────────────────────────── */

.privacy-strip {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 88px 28px;
  text-align: center;
}

.privacy-strip .shield {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--privacy), var(--accent-2));
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--privacy) 85%, transparent);
}

.privacy-strip .shield svg { width: 26px; height: 26px; stroke: #fff; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.privacy-strip h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.028em;
  margin: 0 0 14px;
  line-height: 1.15;
}

.privacy-strip p {
  max-width: 560px;
  margin: 0 auto 22px;
  color: var(--ink-2);
  font-size: 17px;
}

.privacy-points {
  max-width: 860px;
  margin: 36px auto 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  text-align: left;
}

.pp {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}

.pp-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.pp-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pp h3 {
  font-size: 16px;
  letter-spacing: -0.015em;
  margin: 0 0 5px;
}

.pp p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: none;
}

.privacy-strip .link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.privacy-strip .link:hover { gap: 11px; }
.privacy-strip .link { transition: gap 0.18s ease; }

/* ── Legal documents ────────────────────────────────────────────────────── */

.doc { max-width: var(--max); margin: 0 auto; padding: 64px 28px 104px; }

.doc h1 {
  font-size: clamp(30px, 4.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.doc .updated { color: var(--ink-3); font-size: 15px; margin: 0 0 40px; }

.doc h2 {
  font-size: 21px;
  letter-spacing: -0.02em;
  margin: 46px 0 12px;
}

.doc h3 { font-size: 17px; margin: 30px 0 8px; }

.doc p, .doc li { color: var(--ink-2); }
.doc a { color: var(--accent); }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc strong { color: var(--ink); font-weight: 600; }

.doc .callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 30px 0;
  box-shadow: var(--shadow);
}

.doc .callout p { margin: 0; color: var(--ink); }

.doc .table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 22px 0;
  box-shadow: var(--shadow);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 520px;
}

.doc th, .doc td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.doc thead th {
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
  background: var(--bg-2);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.doc tbody tr:last-child td { border-bottom: none; }
.doc td { color: var(--ink-2); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  padding: 44px 28px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}

.site-footer nav { display: flex; gap: 22px; justify-content: center; margin-bottom: 14px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer p { margin: 0; }

@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Header: the wordmark can go, the icon still says which app this is. */
  .site-header .wrap { padding: 11px 16px; }
  .site-header .brand { gap: 9px; }
  .site-header .name { font-size: 16px; }
  .site-header nav { gap: 15px; }
  .site-header nav a { font-size: 13.5px; }

  /* Hero: tighter, and the glow stays inside the viewport. */
  .hero { padding: 52px 20px 44px; }
  .hero::before { inset: -30% -10% auto; height: 460px; }
  .hero img.mark { width: 64px; height: 64px; border-radius: 19px; margin-bottom: 20px; }
  .hero .lede { margin-bottom: 26px; }

  /* Stacked but hugging their text: these aren't pressable yet, so they
     shouldn't look like full-width buttons. */
  .badges { flex-direction: column; align-items: center; gap: 10px; }
  .badge { padding: 12px 22px; font-size: 14.5px; }

  /* Sections were spaced for a wide screen; halve the gaps. */
  .showcase { padding: 0 20px 56px; }
  .phone { height: 560px; }
  /* Centre the headings so they sit with the hero and privacy strip rather
     than hard against the left edge. Card and FAQ text stays left: centred
     body copy is harder to read at this width. */
  .section-head { padding: 0 20px 22px; text-align: center; }
  .section-head h2 { margin-left: auto; margin-right: auto; }
  .features { padding: 0 20px 56px; gap: 14px; }
  .feature { padding: 22px; }
  .feature .icon { width: 40px; height: 40px; margin-bottom: 14px; }
  .more-list { padding: 0 20px 56px; gap: 0 20px; }
  .faq { padding: 0 20px 56px; gap: 8px 20px; }
  .qa p { margin-bottom: 14px; }
  .privacy-strip { padding: 52px 20px; }
  .privacy-points { margin: 26px auto 24px; gap: 20px; }
  .site-footer { padding: 32px 20px; }

  .doc { padding: 36px 20px 64px; }
  .doc h2 { margin-top: 34px; }
}

/* Very narrow phones: drop the wordmark so the nav never crowds. */
@media (max-width: 380px) {
  .site-header .name { display: none; }
  .site-header nav { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}