/* ==========================================================================
   SEO copy, set A — /metis144, /sprinter144, /vans-for-sale (2026-10-19)
   ==========================================================================
   The marketing copy plan's sections are page-sections.css (pg-section /
   pg-head / pg-prose / pg-list / pg-grid / pg-card) and its FAQ is
   landing-page.css. This sheet adds only what neither has: a live-text spec
   table, a two-up copy + figure row, the second line of the /sprinter144
   title, and a visually-hidden helper for an H1 that is artwork.

   Surfaces: no backgrounds here — rows are separated by --tv-line hairlines
   (docs/surfaces.md). Listed in each page's extra_styles, so it blocks first
   paint like the rest of the page's sheets: the /sprinter144 title line
   lives above the fold. */

/* --- Visually hidden, still read (the /metis144 H1 is two images) -------- */
.seo-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- /sprinter144: the H1's second line, at the tagline's scale --------- */
.header-title h1 .seo-h1-sub {
    display: block;
    margin-top: 0.35rem;
}

/* --- Spec table: live text, one row per fact ----------------------------- */
.seo-specs-wrap {
    max-width: 64rem;
    overflow-x: auto;
}

.seo-specs {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.5;
}

.seo-specs caption {
    caption-side: bottom;
    padding-top: 0.85rem;
    color: var(--theme-text-muted, #c4c6cc);
    font-size: 0.9rem;
    text-align: left;
}

.seo-specs th,
.seo-specs td {
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid var(--tv-line, rgba(255, 255, 255, 0.08));
    text-align: left;
    vertical-align: top;
}

.seo-specs th {
    color: var(--theme-text-strong, #ffffff);
    font-weight: 500;
    white-space: nowrap;
}

.seo-specs td {
    color: var(--theme-text-muted, #c4c6cc);
    font-weight: 300;
}

.seo-specs thead th {
    border-bottom-color: var(--tv-line-strong, rgba(255, 255, 255, 0.16));
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

/* Several model columns: the label column stays readable and the table
   scrolls inside its wrapper on a phone rather than widening the page. */
.seo-specs--cols {
    min-width: 40rem;
}

/* --- Copy beside a figure (the /metis144 floor plan) --------------------- */
.seo-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}

@media only screen and (max-width: 980px) {
    .seo-split {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* --- /sprinter144: the floor-plan head sits flush on the model cards --- */
.seo-flush-bottom {
    padding-bottom: 0;
}