/* ============================================
   CIA Development — Trust Center / Legal pages
   Layered on top of styles.css (reuses tokens,
   nav, footer, .btn, .container)
   ============================================ */

/* Page header */
.legal-hero {
    padding: clamp(140px, 18vw, 220px) 0 clamp(48px, 7vw, 80px);
    border-bottom: 1px solid var(--glass-border);
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--gold-glow), transparent 60%),
        var(--ink);
}
.legal-hero .container { max-width: var(--container-narrow); }
.legal-eyebrow {
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}
.legal-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(34px, 6vw, 60px);
    line-height: 1.08;
    color: var(--white);
    letter-spacing: -0.01em;
}
.legal-title em { font-style: italic; color: var(--gold-light); }
.legal-lead {
    margin-top: 22px;
    font-size: clamp(16px, 2vw, 19px);
    color: var(--silver);
    max-width: 60ch;
}
.legal-meta {
    margin-top: 28px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--mist);
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* Body / prose */
.legal {
    padding: clamp(56px, 8vw, 96px) 0 clamp(80px, 12vw, 140px);
}
.legal .container { max-width: var(--container-narrow); }
.legal h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(24px, 3.5vw, 32px);
    color: var(--white);
    margin: 56px 0 18px;
    padding-top: 12px;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 18px;
    color: var(--cloud);
    margin: 32px 0 12px;
}
.legal p, .legal li {
    color: var(--silver);
    font-size: 16px;
    line-height: 1.75;
}
.legal p { margin: 0 0 18px; }
.legal ul, .legal ol { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--blue-400); text-decoration: none; border-bottom: 1px solid rgba(82,163,232,0.3); }
.legal a:hover { color: var(--blue-500); border-bottom-color: var(--blue-500); }
.legal strong { color: var(--cloud); font-weight: 600; }

/* Tables (subprocessors, data inventory) */
.legal-table-wrap { overflow-x: auto; margin: 0 0 26px; }
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: var(--font-sans);
}
.legal-table th, .legal-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--glass-border);
    vertical-align: top;
}
.legal-table th {
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 12px;
    white-space: nowrap;
}
.legal-table td { color: var(--silver); }

/* Definition rows (key/value, e.g. contacts) */
.legal-kv { margin: 0 0 22px; }
.legal-kv div { padding: 10px 0; border-bottom: 1px solid var(--glass-border); display: flex; gap: 16px; flex-wrap: wrap; }
.legal-kv dt { color: var(--mist); font-family: var(--font-sans); font-size: 13px; min-width: 160px; }
.legal-kv dd { color: var(--cloud); }

/* CONFIRM marker — DRAFT ONLY, easy to grep/remove before publishing */
.confirm {
    background: rgba(201,169,110,0.12);
    border: 1px dashed var(--gold-dark);
    color: var(--gold-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 13px;
}

/* Trust hub grid */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 8px;
}
.trust-card {
    display: block;
    padding: 28px;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: var(--glass-bg);
    transition: var(--transition-base);
}
.trust-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hi);
    transform: translateY(-2px);
}
.trust-card-icon { color: var(--gold); margin-bottom: 16px; }
.trust-card h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 18px;
    color: var(--white);
    margin: 0 0 8px;
}
.trust-card p { color: var(--mist); font-size: 14px; line-height: 1.6; margin: 0; }
.trust-card .trust-card-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 16px; color: var(--gold); font-size: 13px;
    font-family: var(--font-sans); letter-spacing: 0.02em;
}

/* Status pill */
.trust-status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    font-family: var(--font-sans); font-size: 13px; color: var(--silver);
}
.trust-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; }

/* Back-to-top / breadcrumb */
.legal-back { font-family: var(--font-sans); font-size: 13px; color: var(--mist); margin-bottom: 28px; display: inline-block; }
.legal-back:hover { color: var(--gold); }

/* Self-contained nav for trust/legal pages (no JS) */
.tnav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(11, 14, 19, 0.85);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
}
.tnav-inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 14px clamp(24px, 5vw, 64px);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.tnav-logo img { height: 26px; width: auto; }
.tnav-links { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); flex-wrap: wrap; font-family: var(--font-sans); font-size: 14px; }
.tnav-links a { color: var(--silver); transition: color var(--transition-base); }
.tnav-links a:hover { color: var(--gold); }
.tnav-links a.cta { color: var(--gold); }

/* Link color in the dark hero + standalone legal links */
.legal-hero a, a.legal-link { color: var(--blue-400); }
.legal-hero a:hover, a.legal-link:hover { color: var(--blue-500); }