/* ==========================================================================
   Family hub copy — /classic, /metis, /ultra (marketing SEO pass, 2026-10-19)
   ==========================================================================
   The sections themselves are page-sections.css (pg-section / pg-head /
   pg-prose) and the FAQ is landing-page.css (includes/page-faq.php). This
   sheet adds only what neither has: the small at-a-glance table generated
   from the variants, and the link colour inside the series intro's lead
   paragraph. Loaded off the critical path (deferred_styles) — everything it
   styles sits below the hero.

   Surfaces: the table is one rung up (--tv-band) on the ground, its head one
   more (--tv-surface); never a new dark (docs/surfaces.md). */

/* --- The lead paragraph's links, in the series intro ---------------------- */
.series-intro__lead a {
    color: var(--theme-text-strong, #ffffff);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--theme-accent, #aa0000);
    text-decoration-thickness: 2px;
}

.series-intro__lead a:hover {
    text-decoration-color: var(--theme-text-strong, #ffffff);
}

/* --- At-a-glance table ---------------------------------------------------- */
/* The wrapper scrolls, never the page: a table wider than a phone stays
   inside it (docs/media-performance.md § Phase 3, the compare-panel guard). */
.seo-table-wrap {
    max-width: 60rem;
    overflow-x: auto;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--theme-radius-md, 1rem);
    background: var(--tv-band);
    overscroll-behavior-x: contain;
}

.seo-table-wrap:focus-visible {
    outline: 2px solid var(--theme-text-strong, #ffffff);
    outline-offset: 3px;
}

.pg-prose + .seo-table-wrap {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.seo-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* The table's title, inside the panel. */
.seo-table__caption {
    caption-side: top;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
    color: var(--theme-text-main, #ececef);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

/* The price note sits under the panel, not in it: a caption scrolls with a
   table that is wider than a phone, and the note would be cut off. */
.seo-table__note {
    max-width: 60rem;
    margin: 0.75rem 0 0;
    color: var(--theme-text-muted, #c4c6cc);
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.seo-table th,
.seo-table td {
    padding: 0.8rem 1.1rem;
    /* m072224.css's `* { font-weight: 300; color: var(--c3) }` reaches every
       cell — restate both. */
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-align: left;
    vertical-align: top;
    color: var(--theme-text-muted, #c4c6cc);
}

.seo-table thead th,
.seo-table thead td {
    background: var(--tv-surface);
    border-bottom: 1px solid var(--theme-border-strong, rgba(255, 255, 255, 0.16));
    color: var(--theme-text-main, #ececef);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.seo-table tbody tr + tr > * {
    border-top: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
}

/* The row label reads as one. */
.seo-table tbody th {
    color: var(--theme-text-strong, #ffffff);
    font-weight: 500;
    white-space: nowrap;
}

.seo-table a {
    color: var(--theme-text-strong, #ffffff);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--theme-accent, #aa0000);
}

.seo-table a:hover {
    text-decoration-color: var(--theme-text-strong, #ffffff);
}

/* Figures line up only when their glyphs are one width. */
.seo-table__num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* On a phone the labels wrap so the table fits the column instead of
   scrolling it; the figures still keep to one line. */
@media only screen and (max-width: 700px) {
    .seo-table th,
    .seo-table td {
        padding: 0.7rem 0.75rem;
        font-size: 0.9rem;
    }

    .seo-table thead th,
    .seo-table tbody th {
        white-space: normal;
    }
}