/* 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. */

.policy-hero {
    background: radial-gradient(ellipse at top right, #16233b 0%, var(--ink) 55%);
    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: 'Playfair Display', Georgia, serif; font-size: 38px; margin: 0 0 12px; font-weight: 800; }
.policy-dates { font-size: 13.5px; color: #9fb0c3; }
.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: 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: 'Playfair Display', Georgia, serif; font-size: 24px; color: var(--navy); margin: 0 0 12px; }
.policy-lead p { color: #334155; 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: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.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(--navy); 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; }

.policy-body { max-width: 780px; margin: 0 auto; padding: 56px 0; }
.policy-body h2 {
    font-family: 'Playfair Display', Georgia, 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: #334155; font-size: 15px; margin: 0 0 14px; }
.policy-body ul { margin: 0 0 14px; padding-left: 22px; color: #334155; 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;
}

.warn-box {
    background: var(--amber-light);
    border: 1px solid #e0b998;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 14px 0 20px;
}
.warn-box p { margin: 0; color: #5f2e15; font-size: 14.5px; }
.warn-box strong { color: #5f2e15; }

.policy-contact {
    background: var(--navy); color: white; border-radius: 14px; padding: 26px 28px; margin: 20px 0;
}
.policy-contact a { color: var(--green-bright); font-weight: 700; font-size: 16px; }

@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 0; }
}