/* site.css — shared design system for pilotmedicalguardian.com.
   Single source of truth for the brand hero, nav, layout, typography,
   tokens, dark mode, and common utilities used on every page. Each page's
   unique components (lede, FAQ accordion, feature list, etc.) stay in that
   page's own inline <style>. Brand palette matches the app exactly
   (DesignSystem/BrandMark.swift). */

:root {
  color-scheme: light dark;
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #0f1419;
  --muted: #545d6b;
  --rule: #e4e8ef;
  --accent: #1c66d9;            /* Brand.primary */
  --accent-2: #2e9ecc;          /* gradient end (medical teal) */
  --brand-grad: linear-gradient(135deg, #1c66d9 0%, #2e9ecc 100%);
  --accent-tint: #eef4fe;       /* highlight callout background */
  --accent-edge: #cfe0fb;       /* highlight callout border */
  --radius-card: 16px;
  --radius-chip: 12px;
  /* Spacing scale */
  --s1: 6px; --s2: 10px; --s3: 14px; --s4: 18px; --s5: 24px; --s6: 38px;
  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16,22,34,0.04), 0 2px 8px rgba(16,22,34,0.05);
  --shadow-cta: 0 6px 18px rgba(28,102,217,0.28);
  /* Warning-banner palette (FAQ beta notice). */
  --warnbg: #fff7e6;
  --warnrule: #f0d9a6;
  --warntext: #6b4e12;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1015;
    --card: #181b22;
    --text: #f0f2f6;
    --muted: #9aa3b3;
    --rule: #272b34;
    --accent: #5b9cf0;
    --accent-tint: #16202e;
    --accent-edge: #2a3a52;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
    --warnbg: #2a2310;
    --warnrule: #4a3d18;
    --warntext: #e8cf95;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, filter .15s ease; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

/* ============================================================
   Shared page shell — one source of truth for the sticky nav,
   section rhythm, inner-page hero, buttons, and footer used on
   EVERY page. The homepage's unique hero/feature-grid and each
   page's own components stay in that page's inline <style>. */

/* Wide container for the nav + full-width sections. The narrow
   reading column (.wrap, below) sits inside sections for prose. */
.container { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

/* --- Sticky top nav --- */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; letter-spacing: -0.01em; }
.nav-brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(16,22,34,0.06); }
.nav-brand span { font-size: 1.02rem; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.9rem; padding: 8px 12px; border-radius: 10px; }
.nav-links a:hover { color: var(--text); background: var(--bg); }
.nav-links a[aria-current="page"] { color: var(--text); background: var(--bg); }
.nav-links .nav-cta { color: #fff; background: var(--brand-grad); box-shadow: var(--shadow-cta); font-weight: 600; font-size: 0.9rem; padding: 8px 12px; border-radius: 10px; }
.nav-links a.nav-cta:hover { filter: brightness(1.05); color: #fff; background: var(--brand-grad); }
/* Pre-launch "coming soon" pill (hero + closing CTA). Swap to the linked Apple
   "Download on the App Store" badge on release day. */
.appstore-soon { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--brand-grad); color: #fff; font-weight: 700; box-shadow: var(--shadow-cta); }
/* Mobile hamburger menu (phones): collapse the nav links behind a toggle. */
.nav-toggle { display: none; }
.nav-toggle-cb { display: none; }
@media (max-width: 620px) {
  .site-nav .container { position: relative; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; font-size: 1.4rem; line-height: 1;
    color: var(--text); background: var(--bg); border-radius: 10px;
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .nav-links {
    display: none; position: absolute; top: 100%; right: 0; margin-top: 8px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
    padding: 8px; min-width: 190px; box-shadow: 0 10px 30px rgba(16,22,34,0.14); z-index: 30;
  }
  .nav-toggle-cb:checked ~ .nav-links { display: flex; }
  .nav-links .nav-hide-sm { display: block; }
  .nav-links a, .nav-links .nav-cta { width: 100%; text-align: left; }
}

/* --- Section rhythm (shared by the homepage + inner pages) --- */
.section { padding: 52px 0; }
.section.tint { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section-head { max-width: 720px; margin: 0 auto 22px; text-align: center; }
.section-head h2 { margin: 0; }
.section-head p { color: var(--muted); margin: 8px auto 0; max-width: 60ch; }
.section-head .eyebrow { display: block; margin: 0 0 6px; }

/* --- Compact hero band for inner pages (title only, no phone) ---
   Echoes the homepage hero tint so the whole site reads as one. */
.page-hero {
  background:
    radial-gradient(1200px 480px at 78% -8%, rgba(46,158,204,0.16), transparent 60%),
    linear-gradient(180deg, var(--accent-tint), var(--bg) 70%);
  border-bottom: 1px solid var(--rule);
}
.page-hero .wrap { padding-top: 44px; padding-bottom: 30px; }
.page-hero h1 {
  font-size: clamp(1.85rem, 5vw, 2.6rem); line-height: 1.08;
  letter-spacing: -0.03em; margin: 10px 0 0; text-wrap: balance;
}
.page-hero .page-sub {
  font-size: clamp(1.02rem, 2.3vw, 1.18rem); line-height: 1.5;
  color: var(--muted); margin: 14px 0 0; max-width: 62ch; text-wrap: pretty;
}
.page-hero .page-sub strong { color: var(--text); font-weight: 600; }
.page-hero .meta { margin-top: 10px; }

/* --- Shared CTA button row --- */
.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
.links.cta { margin: 16px 0 6px; }
.card .links { margin-bottom: 0; }
.links a { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-chip); padding: 13px 22px; text-decoration: none; font-weight: 600; line-height: 1; }
.links a.primary { background: var(--brand-grad); color: #fff; border: 0; box-shadow: var(--shadow-cta); }
.links a.primary:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 9px 24px rgba(28,102,217,0.36); }
.links a.primary:active { transform: translateY(0); }
.links a.secondary { background: var(--card); border: 1px solid var(--rule); color: var(--accent); box-shadow: var(--shadow-sm); }
.links a.secondary:hover { border-color: var(--accent); }

/* Narrow reading column for prose — vertical rhythm comes from the
   wrapping .section (or .page-hero), so no vertical padding here. */
.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }

h2 { font-size: clamp(1.7rem, 5.5vw, 2.1rem); margin: 14px 0 6px; line-height: 1.14; letter-spacing: -0.022em; text-wrap: balance; }
h3 { font-size: 1.1rem; margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 8px 0; color: var(--text); text-wrap: pretty; }

/* Surface card — used for content blocks across pages. */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin: 14px 0;
  box-shadow: var(--shadow-sm);
}
.card a { color: var(--accent); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* Common text utilities. */
.muted { color: var(--muted); font-size: 0.92rem; }
.fineprint { color: var(--muted); font-size: 0.86rem; margin: 10px 0 0; }
.disclaimer { color: var(--muted); font-size: 0.9rem; margin-top: var(--s5); }
.meta { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }

/* Eyebrow labels + pill badge. */
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: 3px 12px; margin-bottom: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  color: var(--accent); letter-spacing: 0.06em; margin: 26px 0 2px;
}

footer {
  margin-top: 34px; padding: 22px; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 0.85rem; text-align: center;
}
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* Small screens — tighten the reading gutters. */
@media (max-width: 430px) {
  .wrap { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, .shots img { transition: none; }
  .links a.primary:hover, .shots img:hover { transform: none; }
}