/* privacy-policy.php + terms-of-service.php — page-specific styles only.
   Shared tokens, nav, footer, .btn base styles come from landing.css
   (loaded first by head.php). The two legal pages share this file since
   they're built from the same layout (policy-hero/policy-lead/policy-body/
   policy-contact) — page-only bits (glance-table, legal-caps, warn-box)
   live here too rather than forking into two near-identical files. */

/* Kept dark on purpose (unlike the .page-hero family in landing.css,
   fixed to a light background the same session for the identical
   problem) — recolored to --rust instead of the old navy radial gradient
   so it no longer blends into the equally-dark .top-nav sitting right
   above it: same "no visible seam" bug, different fix, since the user
   wanted these two legal pages to keep a dark hero. */
.policy-hero {
    background: var(--rust);
    color: white;
    padding: 56px 0 48px;
}
.policy-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
    padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px;
}
.policy-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); }
.policy-hero h1 { font-family: 'Inter', system-ui, sans-serif; font-size: 38px; margin: 0 0 12px; font-weight: 800; }
.policy-dates { font-size: 13.5px; color: rgba(255,255,255,0.72); } /* was #9fb0c3, a blue-tinted grey tuned for the old navy background */
.policy-dates span { color: white; font-weight: 600; }

/* border-left-color is set inline per page (privacy: --green-bright,
   terms: --blue) since it's the one property that genuinely differs
   between the two pages' lead statements. */
.policy-lead {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--green-bright);
    border-radius: 14px;
    padding: 30px 32px;
    margin: -32px 0 40px;
    position: relative;
    z-index: 2;
    box-shadow: 0 12px 30px -18px rgba(0,0,0,0.25);
}
.policy-lead h2 { font-family: 'Inter', system-ui, sans-serif; font-size: 24px; color: var(--navy); margin: 0 0 12px; }
.policy-lead p { color: var(--text); font-size: 15px; margin: 0 0 10px; }
.policy-lead p:last-child { margin-bottom: 0; }
.policy-lead strong { color: var(--navy); }
.policy-lead .policy-note { font-size: 13.5px; color: var(--ash); font-style: italic; margin: 0; }

/* ── At-a-glance table (privacy-policy.php) ── */
.glance-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06); }
.glance-table th, .glance-table td { text-align: left; padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid var(--line); vertical-align: top; }
.glance-table th { background: var(--ink); color: white; font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.glance-table tr:last-child td { border-bottom: none; }
.glance-table td:first-child { font-weight: 600; color: var(--navy); white-space: nowrap; }

/* Full container width, not a narrower reading column — narrower here
   read as smaller/lesser than the wide .container sections (policy-hero,
   policy-lead) directly above it, on every page that uses this shell. */
.policy-body { max-width: 1280px; margin: 0 auto; padding: 56px 24px; }
.policy-body h2 {
    font-family: 'Inter', system-ui, sans-serif; font-size: 22px; color: var(--navy);
    margin: 44px 0 16px; padding-top: 8px; border-top: 1px solid var(--line);
}
.policy-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.policy-body h3 { font-size: 15.5px; font-weight: 700; color: var(--navy); margin: 22px 0 8px; }
.policy-body p { color: var(--text); font-size: 15px; margin: 0 0 14px; }
.policy-body ul { margin: 0 0 14px; padding-left: 22px; color: var(--text); font-size: 15px; }
.policy-body li { margin-bottom: 6px; }
.policy-body a { color: var(--blue); }

/* Sections that are legally required to be in caps stay that way — this is
   meaningful legal formatting (conspicuousness requirement for
   disclaimers/liability caps), not app copy, so sentence-case rules for UI
   text don't apply here. (terms-of-service.php) */
.legal-caps {
    background: #f8f5ef;
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber);
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: #3f3a33;
    margin: 0 0 14px;
}
:root[data-theme="dark"] .legal-caps { background: rgba(168,85,44,.12); color: var(--text); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .legal-caps { background: rgba(168,85,44,.12); color: var(--text); }
}

.warn-box {
    background: var(--amber-light);
    border: 1px solid #e0b998;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 14px 0 20px;
}
:root[data-theme="dark"] .warn-box { border-color: var(--amber); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .warn-box { border-color: var(--amber); }
}
.warn-box p { margin: 0; color: var(--amber); font-size: 14.5px; }
.warn-box strong { color: var(--amber); }

.policy-contact {
    background: var(--ink); color: white; border-radius: 14px; padding: 26px 28px; margin: 20px 0;
}
.policy-contact a { color: var(--green-bright); font-weight: 700; font-size: 16px; }
/* .policy-body p (above) sets every <p> to a dark slate for the page's
   white background — same (0,1,1) specificity as this rule, so it only
   loses because this one is declared later. Needed: any <p> inside this
   dark box (e.g. .u-544eeb00's "we take X seriously" line) was silently
   inheriting that dark color instead of something readable against navy —
   #334155 on var(--navy) measures ~1.05:1, found by the Phase 0 axe-core
   scan on every page using this box (security, privacy-policy,
   health-data-privacy, accessibility). */
.policy-contact p { color: #cbd5e1; }

@media (max-width: 700px) {
    .policy-hero h1 { font-size: 28px; }
    .policy-lead { margin: -24px 0 32px; padding: 24px 20px; }
    .glance-table { display: block; overflow-x: auto; white-space: nowrap; }
    .policy-body { padding: 40px 20px; }
}