/* ═══════════════════════════════════════
   PUBLIC DATA PAGES — /data, /data/<slug>
   Scope: .data-page, .data-hub
   Uses only tokens declared in css/core/tokens.css — no invented colours.
   Responsive: 1440px → 1024px → 390px (per project convention: 1440/1280/1100/768/480)
═══════════════════════════════════════ */

/* ── Hero / header ───────────────────────── */
.landing-page .data-hero {
    padding: 140px 0 40px;
    position: relative;
    overflow: hidden;
}

.landing-page .data-hero-crumb {
    font-size: 13px;
    color: var(--text-marketing-2);
    margin-bottom: 16px;
}
.landing-page .data-hero-crumb a {
    color: var(--text-marketing-2);
    text-decoration: none;
}
.landing-page .data-hero-crumb a:hover { color: var(--text-marketing-hi); }

.landing-page .data-hero-title {
    font-size: clamp(28px, 4.4vw, 44px);
    font-weight: 800;
    color: var(--text-marketing-hi);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 12px;
}

.landing-page .data-hero-sub {
    font-size: clamp(14px, 1.8vw, 16px);
    color: var(--text-marketing-2);
    max-width: 640px;
    line-height: 1.6;
    margin: 0 0 20px;
}

/* ── Freshness chip ──────────────────────── */
.data-freshness-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-marketing-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    flex-wrap: wrap;
}
.data-freshness-chip .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--positive);
    flex-shrink: 0;
}
.data-freshness-chip.is-stale .dot { background: var(--warning); }
.data-freshness-chip .sep { color: var(--text-marketing-3); }

/* ── Headline stat grid ──────────────────── */
.data-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 28px 0 8px;
}
.data-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}
.data-stat-label {
    font-size: 12.5px;
    color: var(--text-marketing-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.data-stat-value {
    font-family: var(--font-mono);
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 700;
    color: var(--text-marketing-hi);
    line-height: 1.2;
}
.data-stat-sublabel {
    font-size: 13px;
    color: var(--text-marketing-2);
    margin-top: 4px;
}

/* ── Table section ───────────────────────── */
/* Border is OPT-IN via `.border-top`, matching `.feat-section` in
   features-base.css. It used to be unconditional, which drew a full-bleed rule
   above all 7 sections — and because the text column is ~750px inside a 1440px
   viewport, each rule ran far wider than the content it was dividing, so the
   page read as a stack of bands. Sections separate by whitespace and their own
   h2; reserve the rule for a genuine zone change (data → prose, prose → links). */
.data-section {
    padding: 56px 0;
}
.data-section.border-top {
    border-top: 1px solid var(--border);
}
.data-section-title {
    font-size: clamp(19px, 2.4vw, 24px);
    font-weight: 700;
    color: var(--text-marketing-hi);
    margin: 0 0 6px;
}
.data-section-caption {
    font-size: 13.5px;
    color: var(--text-marketing-2);
    margin-bottom: 16px;
}

.data-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 480px;
}
.data-table thead th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-marketing-3);
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table thead th[data-align="right"] { text-align: right; }
.data-table thead th[data-align="center"] { text-align: center; }
.data-table tbody td {
    padding: 11px 16px;
    color: var(--text-marketing);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-family: var(--font-mono);
}
.data-table tbody td[data-align="right"] { text-align: right; }
.data-table tbody td[data-align="center"] { text-align: center; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--bg-hover); }
.data-table tbody td:first-child { font-family: var(--font-ui); font-weight: 600; color: var(--text-marketing-hi); }

.data-truncation-note {
    font-size: 13px;
    color: var(--text-marketing-3);
    margin-top: 10px;
}

/* ── Prose (intro / methodology) ─────────── */
.data-prose {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--text-marketing-2);
    max-width: 760px;
}
.data-prose + .data-prose { margin-top: 18px; }

/* ── FAQ ──────────────────────────────────── */
.data-faq-item {
    border-bottom: 1px solid var(--border);
    padding: 18px 0;
}
.data-faq-item:last-child { border-bottom: none; }
.data-faq-q {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-marketing-hi);
    margin: 0 0 8px;
}
.data-faq-a {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-marketing-2);
    margin: 0;
}

/* ── Related links / glossary chips ─────── */
.data-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.data-link-chip {
    display: inline-block;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    color: var(--text-marketing-2);
    font-size: 13px;
    text-decoration: none;
    transition: var(--transition-base);
}
.data-link-chip:hover {
    color: var(--text-marketing-hi);
    border-color: var(--brand-border);
    background: var(--brand-dim);
}

.data-related-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.data-related-list a {
    color: var(--text-marketing);
    text-decoration: none;
    font-size: 14.5px;
    border-bottom: 1px solid transparent;
}
.data-related-list a:hover {
    color: var(--text-marketing-hi);
    border-bottom-color: var(--border-light);
}

/* ── Disclaimer ───────────────────────────── */
.data-disclaimer {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-marketing-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
}

/* ── /data hub ────────────────────────────── */
.data-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    margin-top: 32px;
}
.data-hub-card {
    display: block;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    text-decoration: none;
    transition: var(--transition-base);
}
.data-hub-card:hover {
    border-color: var(--brand-border);
    background: var(--brand-dim);
}
.data-hub-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-marketing-hi);
    margin: 0 0 10px;
}
.data-hub-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 10px;
}
.data-hub-card-stat-label {
    font-size: 11px;
    color: var(--text-marketing-3);
    text-transform: uppercase;
}
.data-hub-card-stat-value {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-marketing-hi);
}
.data-hub-card-cta {
    font-size: 13px;
    color: var(--brand);
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 1024px) {
    .landing-page .data-hero { padding: 120px 0 32px; }
    .data-stat-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (max-width: 768px) {
    .data-section { padding: 36px 0; }
    .data-stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .data-hub-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .landing-page .data-hero { padding: 104px 0 28px; }
    .data-stat-grid { grid-template-columns: 1fr; }
    .data-table { min-width: 420px; }
}