/* Shared look for site pages: brand tokens, type, buttons, cards and form fields.
   Same navy/orange system as the homepage and the iOS app. */
:root {
  --navy: #011432;
  --navy-2: #071d45;
  --card: #0d2552;
  --card-2: #12306a;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .18);
  --ink: #f5f7fa;
  --muted: #b0bcd2;
  --dim: #7f8fae;
  --orange: #fd5b02;
  --orange-2: #ff7a2e;
  --field: #061a3e;
  --radius: 20px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--navy); color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2 { line-height: 1.08; letter-spacing: -.025em; }
[hidden] { display: none !important; }
h1 em, h2 em { font-style: normal; color: var(--orange); }
:focus-visible { outline: 3px solid var(--orange-2); outline-offset: 3px; border-radius: 6px; }

.eyebrow { color: var(--orange-2); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.lead { color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 16px; padding: 14px 22px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer; transition: transform .15s, background .15s, border-color .15s;
  text-decoration: none; color: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.btn--fill { background: var(--orange); color: #fff; }
.btn--fill:hover { background: var(--orange-2); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { padding: 10px 16px; font-size: 14px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

.field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.field input, .field select, .field textarea, input.tsx-input, textarea.tsx-input {
  width: 100%; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink);
  background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(253, 91, 2, .25); }

@media (max-width: 600px) { .btn { padding: 13px 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }