/* RydPal landing site, "Evergreen": mirrors packages/shared/src/theme.ts and packages/ui/src/theme.css. */
:root {
  --bg:#f6f6f3; --card:#ffffff; --card2:#eef1ee; --line:#e2e8e4;
  --text:#15201c; --text2:#2f3b36; --muted:#5b6b65;
  --accent:#0e8a6d; --accent-text:#0b6e5f; --accent-soft:#e3f4ee; --on-accent:#ffffff;
  --favorite:#c2410c; --favorite-soft:#fbe9d2;
  --shadow:0 8px 30px rgba(21,32,28,.10);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0f1513; --card:#151d1a; --card2:#1e2a25; --line:#243029;
    --text:#f1f5f2; --text2:#d5ded9; --muted:#9db0a8;
    --accent:#3fbf9a; --accent-text:#5fd3b3; --accent-soft:#17302a; --on-accent:#0f1513;
    --favorite:#f2b46a; --favorite-soft:#3a2e1c;
    --shadow:0 8px 30px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0f1513; --card:#151d1a; --card2:#1e2a25; --line:#243029;
  --text:#f1f5f2; --text2:#d5ded9; --muted:#9db0a8;
  --accent:#3fbf9a; --accent-text:#5fd3b3; --accent-soft:#17302a; --on-accent:#0f1513;
  --favorite:#f2b46a; --favorite-soft:#3a2e1c;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:500;
}
.wrap { max-width:960px; margin:0 auto; padding:16px 16px 56px; }
a { color:var(--accent-text); text-decoration:none; }
a:hover { text-decoration:underline; }
p, li { color:var(--text2); }
h1, h2, h3 { color:var(--text); letter-spacing:-.02em; }
h1 { font-size:clamp(32px, 6vw, 52px); line-height:1.08; font-weight:800; margin:0 0 16px; }
h2 { font-size:24px; font-weight:800; margin:40px 0 12px; }
h3 { font-size:17px; font-weight:800; margin:0 0 6px; }
.muted { color:var(--muted); font-size:14px; }
.lede { font-size:19px; color:var(--text2); margin:0 0 24px; max-width:620px; }

/* Header */
header.site { display:flex; align-items:center; gap:12px; padding:12px 0 8px; }
.logo { display:inline-flex; align-items:center; gap:10px; font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.logo:hover { text-decoration:none; }
.logo img { width:32px; height:32px; border-radius:9px; display:block; }
.logo b { font-weight:800; }
.logo span { color:var(--accent-text); }
nav { margin-left:auto; display:flex; gap:4px; }
nav a { color:var(--muted); font-weight:700; font-size:14px; padding:8px 12px; border-radius:999px; }
nav a:hover { background:var(--card2); color:var(--text); text-decoration:none; }
@media (max-width: 639px) { nav a.sec { display:none; } }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px;
  border-radius:16px; font-weight:800; font-size:16px; border:1px solid transparent; }
.btn:hover { text-decoration:none; filter:brightness(1.05); }
.btn-primary { background:var(--accent); color:var(--on-accent); }
.btn-secondary { background:var(--card); color:var(--text); border-color:var(--line); }
.actions { display:flex; flex-wrap:wrap; gap:12px; }

/* Hero */
.hero { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; padding:28px 0 8px; }
@media (min-width: 760px) { .hero { grid-template-columns:1.1fr .9fr; gap:40px; padding:48px 0 16px; } }
.pill { display:inline-flex; align-items:center; gap:8px; background:var(--accent-soft); color:var(--accent-text);
  border-radius:999px; padding:6px 12px; font-size:13px; font-weight:800; margin-bottom:16px; }
.pill::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* Phone-style offer sheet, drawn like the app's plan screen */
.phone { background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:16px; max-width:380px; margin:0 auto; width:100%; }
.phone .trip { display:grid; grid-template-columns:18px 1fr; gap:10px 12px; align-items:center; padding:6px 4px 14px; border-bottom:1px solid var(--line); }
.phone .dot { width:10px; height:10px; border-radius:50%; background:var(--accent); margin:auto; }
.phone .dot.sq { border-radius:3px; background:var(--text); }
.phone .trip div:nth-child(even) { color:var(--text); font-weight:700; font-size:15px; }
.phone .label { margin:14px 4px 8px; color:var(--muted); font-size:13px; font-weight:700; }
.offer { display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:12px; border-radius:16px; border:1px solid var(--line); margin-bottom:10px; background:var(--card); }
.offer.selected { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft); }
.avatar { width:44px; height:44px; border-radius:50%; background:var(--card2); color:var(--accent-text); display:grid; place-items:center; font-weight:800; }
.offer .name { font-weight:800; color:var(--text); font-size:15px; line-height:1.25; }
.offer .sub { color:var(--muted); font-size:13px; }
.offer .price { font-weight:800; color:var(--text); font-size:17px; text-align:right; }
.offer .eta { color:var(--muted); font-size:13px; text-align:right; }
.star { color:var(--favorite); }
.phone .total { display:flex; justify-content:space-between; align-items:baseline; margin:14px 4px 10px; color:var(--muted); font-size:13px; font-weight:700; }
.phone .total b { color:var(--text); font-size:17px; }
.phone .btn { width:100%; }

/* Cards and grids */
.grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width: 640px) { .grid.two { grid-template-columns:1fr 1fr; } .grid.three { grid-template-columns:1fr 1fr 1fr; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px; }
.card p:last-child { margin-bottom:0; }
.step { display:flex; flex-direction:column; gap:8px; }
.num { width:32px; height:32px; border-radius:10px; background:var(--accent-soft); color:var(--accent-text); display:grid; place-items:center; font-weight:800; }
.card .btn { margin-top:14px; }

/* Documents (terms, privacy) */
.doc { max-width:760px; }
.doc h1 { font-size:36px; margin:28px 0 8px; }
.doc h2 { font-size:20px; margin:32px 0 8px; }
.doc h3 { font-size:15px; margin:18px 0 6px; color:var(--accent-text); }
table { width:100%; border-collapse:collapse; margin:12px 0; font-size:14px; }
th, td { text-align:left; padding:10px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text2); }
th { color:var(--muted); font-weight:700; }
td:first-child { color:var(--text); font-weight:700; width:38%; }

footer { border-top:1px solid var(--line); margin-top:56px; padding-top:20px; color:var(--muted); font-size:14px;
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
footer a { color:var(--muted); font-weight:700; }
footer span { margin-left:auto; }