/* biz-sv.css -- the page system of the rebuilt Services pages (Issue #1454), classes sv-*.
   Markup: scripts/biz/services-pages/page-system.js and the modules under v2/.
   One container width, the section head of the older pages, logical properties throughout.
   A status is a word first and colour repeats it. Text inside a card is --color-ink-700 or
   darker on a light ground. Colours come from biz-tokens.css only. */

/* ─── HERO: text and the small visual of the page, side by side ──────── */
.sv-hero {
    background: var(--bg-hero);
    color: var(--fg-on-dark);
    padding-block: var(--space-10);
}
.sv-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-9);
    align-items: center;
}
.sv-hero .biz-eyebrow { color: var(--color-brand-gold); }
.sv-hero h1 {
    color: var(--fg-on-dark);
    font-size: var(--fs-display);
    line-height: 1.15;
    letter-spacing: var(--ls-display);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}
.sv-hero__sub {
    color: var(--fg-on-dark-muted);
    font-size: 1.15rem;
    line-height: var(--lh-relaxed);
    margin: 0;
    max-inline-size: 56ch;
}
.sv-hero__actions { margin: var(--space-7) 0 var(--space-3); }
.sv-hero .biz-btn--cta,
.sv-closing .biz-btn--cta {
    background: var(--color-brand-gold);
    color: var(--color-brand-blue);
}
.sv-hero .biz-btn--cta:hover,
.sv-closing .biz-btn--cta:hover { background: var(--color-brand-gold-soft); color: var(--color-brand-blue); }
/* A long label wraps inside the button; it never widens the page (as in #1450). */
.sv-hero .biz-btn--cta,
.sv-closing .biz-btn--cta { white-space: normal; max-inline-size: 100%; text-align: center; line-height: var(--lh-snug); }
.sv-hero__note { color: var(--fg-on-dark-muted); font-size: var(--fs-body-sm); margin: 0; }
.sv-hero__visual { min-inline-size: 0; }

/* The short answer: a panel that overlaps the foot of the hero, not a section of its own. */
/* flow-root keeps the panel's negative margin inside this section; without it the margin
   collapsed through and pulled the whole light section up, so the panel sat on the hero's
   edge with nothing dark behind it. */
.sv-answer-wrap { display: flow-root; background: var(--color-surface-tint); padding-block-end: var(--space-8); }
.sv-answer {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-inline-start: 4px solid var(--color-brand-gold);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-soft);
    padding: var(--space-6) var(--space-7);
    margin-block-start: calc(-1 * var(--space-8));
    position: relative;
}
.sv-answer__title {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-extrabold);
    color: var(--color-brand-blue);
    text-transform: uppercase;
    letter-spacing: var(--ls-uppercase-wide);
    margin: 0 0 var(--space-2);
}
.sv-answer p { font-size: 1.1rem; line-height: var(--lh-relaxed); color: var(--fg-strong); margin: 0; }

/* ─── CARD: the frame of every product-style visual ──────────────────── */
.sv-card {
    background: var(--color-surface);
    border: 1px solid var(--color-ink-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    color: var(--color-ink-700);
    margin: 0;
    overflow: hidden;
    text-align: start;
}
.sv-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--color-brand-blue);
    color: var(--fg-on-dark);
}
.sv-card__title { font-weight: var(--fw-bold); font-size: var(--fs-h4); }
.sv-card__meta { color: var(--color-ink-200); font-size: var(--fs-body-sm); }
.sv-n { font-variant-numeric: tabular-nums; }

/* Numbered callout: the same number sits in the figure and in the legend under it. */
.sv-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--color-brand-gold);
    color: var(--color-ink-900);
    font-size: var(--fs-overline);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    margin-inline-end: var(--space-2);
}

/* Chips: dark text on a tint, with a coloured edge. The word carries the meaning. */
.sv-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-line);
    background: var(--color-surface-tint);
    color: var(--color-ink-800);
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
}
.sv-chip--ok   { background: var(--color-success-bg); border-color: var(--color-success); }
.sv-chip--warn { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.sv-chip--bad  { background: var(--color-danger-bg);  border-color: var(--color-danger-border); }
.sv-chip--info { background: var(--color-info-bg);    border-color: var(--color-info-border); }

.sv-ico { flex: none; }
.sv-ico--yes  { color: var(--color-success-ink); }
.sv-ico--no   { color: var(--color-danger); }
.sv-ico--none { color: var(--color-ink-400); }

/* ─── RANKED LIST (hero of candidate screening) ──────────────────────── */
.sv-rank__list { list-style: none; margin: 0; padding: 0; }
.sv-rank__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-block-end: 1px solid var(--color-line);
}
.sv-rank__row:last-child { border-block-end: 0; }
.sv-rank__pos {
    inline-size: 28px;
    block-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-line-soft);
    color: var(--color-ink-700);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-sm);
}
.sv-rank__name { font-weight: var(--fw-semibold); color: var(--color-ink-900); overflow-wrap: anywhere; }
.sv-rank__score {
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    color: var(--color-brand-blue);
    font-variant-numeric: tabular-nums;
    min-inline-size: 2ch;
    text-align: end;
}

/* ─── REQUIREMENT BREAKDOWN (the worked example of candidate screening) ─ */
.sv-score {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--fw-semibold);
}
.sv-score__n { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-brand-gold); font-variant-numeric: tabular-nums; }
.sv-reqs__head,
.sv-reqs__row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 120px 120px minmax(0, 1.8fr);
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-4) var(--space-6);
}
.sv-reqs__head {
    background: var(--color-line-soft);
    color: var(--color-ink-700);
    font-size: var(--fs-overline);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-uppercase);
    align-items: center;
}
.sv-reqs__head > span { display: inline-flex; align-items: center; }
.sv-reqs__row { border-block-start: 1px solid var(--color-line); font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.sv-reqs__row[data-result="partial"],
.sv-reqs__row[data-result="none"] { background: var(--color-brand-gold-soft); }
.sv-reqs__req { font-weight: var(--fw-semibold); color: var(--color-ink-900); }
.sv-reqs__ev { color: var(--color-ink-700); }
.sv-level {
    display: inline-block;
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    color: var(--color-ink-800);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--color-line-soft);
    border: 1px solid var(--color-line);
}
.sv-level--mandatory { background: var(--color-brand-blue); border-color: var(--color-brand-blue); color: var(--fg-on-dark); }
.sv-level--nice { background: var(--color-surface); }
.sv-result { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); color: var(--color-ink-900); }
.sv-confirm {
    border-block-start: 1px solid var(--color-line);
    background: var(--color-surface-cool);
    padding: var(--space-5) var(--space-6);
}
.sv-confirm__title { display: flex; align-items: center; font-weight: var(--fw-bold); color: var(--color-ink-900); margin: 0 0 var(--space-2); }
.sv-confirm ul { margin: 0; padding-inline-start: var(--space-6); color: var(--color-ink-700); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }

/* ─── LEGEND under a figure ──────────────────────────────────────────── */
.sv-legend {
    list-style: none;
    margin: var(--space-7) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}
.sv-legend li { display: flex; align-items: flex-start; color: var(--fg-default); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.sv-sample-note { text-align: center; color: var(--color-ink-500); font-size: var(--fs-caption); margin: var(--space-6) 0 0; }

/* ─── STEPS ──────────────────────────────────────────────────────────── */
.sv-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}
.sv-step {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    display: flex;
    flex-direction: column;
}
.sv-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-md);
    background: var(--color-brand-blue);
    color: var(--color-brand-gold);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    font-variant-numeric: tabular-nums;
    margin-block-end: var(--space-5);
}
.sv-step__title { font-size: var(--fs-h3); color: var(--color-brand-blue); font-weight: var(--fw-semibold); margin: 0 0 var(--space-3); line-height: var(--lh-snug); }
.sv-step__body { color: var(--fg-default); line-height: var(--lh-relaxed); font-size: var(--fs-body-sm); margin: 0 0 var(--space-4); }
.sv-step__list {
    list-style: none;
    margin: auto 0 0;
    padding: var(--space-4) 0 0;
    border-block-start: 1px solid var(--color-line-soft);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.sv-step__list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--color-ink-600); line-height: var(--lh-normal); }

/* ─── DOES / DOES NOT ────────────────────────────────────────────────── */
.sv-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.sv-scope__col {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
}
.sv-scope__col h3 { font-size: var(--fs-h3); color: var(--color-brand-blue); margin: 0 0 var(--space-4); }
.sv-scope__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sv-scope__col li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--fg-default); line-height: var(--lh-relaxed); }
.sv-scope__col li .sv-ico { margin-block-start: 3px; }

/* ─── PLANS ──────────────────────────────────────────────────────────── */
.sv-plans { margin: 0 auto; max-inline-size: 880px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.sv-plans__row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border-block-end: 1px solid var(--color-line);
    align-items: baseline;
}
.sv-plans__row:last-child { border-block-end: 0; }
.sv-plans__row:nth-child(odd) { background: var(--color-surface-tint); }
.sv-plans dt { font-weight: var(--fw-bold); color: var(--color-brand-blue); font-size: var(--fs-h4); }
.sv-plans dd { margin: 0; color: var(--fg-default); line-height: var(--lh-relaxed); }
.sv-plans__note { text-align: center; color: var(--color-ink-500); font-size: var(--fs-body-sm); margin: var(--space-5) 0 0; }
.sv-plans__note a { color: var(--color-brand-blue); font-weight: var(--fw-semibold); }

/* ─── CLOSING BAND, full width like the one that ends the home page ──── */
/* The closing band sits directly above the footer, which is --bg-hero on every page, so it is
   the brand blue and never the footer's colour (owner rule, 2026-10-10; scripts/biz/sync-bands.js). */
.sv-closing { background: var(--color-brand-blue); color: var(--fg-on-dark); text-align: center; padding-block: var(--space-10); }
.sv-closing h2 { color: var(--fg-on-dark); font-size: 2.4rem; letter-spacing: var(--ls-display); margin: 0 0 var(--space-4); text-wrap: balance; }
.sv-closing__lead { color: var(--fg-on-brand-muted); font-size: 1.1rem; margin: 0 auto var(--space-7); max-inline-size: 600px; line-height: var(--lh-relaxed); }
.sv-closing__note { color: var(--fg-on-brand-muted); font-size: var(--fs-caption); margin: var(--space-4) 0 0; }
.sv-closing__links { margin: var(--space-6) 0 0; font-size: var(--fs-body-sm); color: var(--fg-on-brand-muted); }
.sv-closing__links a { color: var(--color-brand-gold); font-weight: var(--fw-semibold); display: inline-block; padding: var(--space-2); }
.sv-closing__links a:hover { text-decoration: underline; }

/* ─── SHARED WITH (hero of the hiring team page) ─────────────────────── */
.sv-shared__list { list-style: none; margin: 0; padding: 0; }
.sv-shared__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-block-end: 1px solid var(--color-line);
}
.sv-shared__who { font-weight: var(--fw-semibold); color: var(--color-ink-900); }
.sv-shared__foot { margin: 0; padding: var(--space-4) var(--space-6); background: var(--color-line-soft); color: var(--color-ink-700); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }

/* ─── TWO VIEWS SIDE BY SIDE (what you send, what they see) ──────────── */
.sv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.sv-card__title { display: inline-flex; align-items: center; }
.sv-people { list-style: none; margin: 0; padding: 0; }
.sv-people__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-block-end: 1px solid var(--color-line);
}
.sv-people__row:last-child { border-block-end: 0; }
.sv-people__row--off { background: var(--color-surface-tint); }
.sv-people__row--note { grid-template-columns: minmax(0, 1fr) auto; }
.sv-people__name { font-weight: var(--fw-semibold); color: var(--color-ink-900); overflow-wrap: anywhere; }
.sv-people__score { font-weight: var(--fw-bold); color: var(--color-brand-blue); font-variant-numeric: tabular-nums; }
.sv-people__note {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-inline-start: 3px solid var(--color-brand-gold);
    background: var(--color-brand-gold-soft);
    border-radius: var(--radius-xs);
    color: var(--color-ink-700);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-normal);
}

/* ─── TABLES INSIDE A CARD, AND THE ROLE TABLE ───────────────────────── */
/* Inside a card the table is the card's body: full width, no second frame. */
.sv-card .sv-table-wrap--bare { max-inline-size: none; margin: 0; border: 0; border-radius: 0; }
.sv-card .sv-table thead th { background: var(--color-line-soft); color: var(--color-ink-700); font-size: var(--fs-overline); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-uppercase); }
.sv-card .sv-table tbody th { font-weight: var(--fw-semibold); color: var(--color-ink-900); }
.sv-card .sv-table tbody tr:last-child > * { border-block-end: 0; }
.sv-result--open { color: var(--color-ink-500); font-weight: var(--fw-medium); }
/* Two classes on purpose: `.sv-table td { text-align: start }` comes later in this file with the
   same weight as a single-class rule, and it won. The ticks sat at the start of their column
   (owner's review, 2026-10-10). */
.sv-table.sv-table--matrix td,
.sv-table.sv-table--matrix thead th:not(:first-child) { text-align: center; }
.sv-table--matrix tbody th { color: var(--color-ink-800); }
.sv-table--matrix tbody tr:nth-child(even) > * { background: var(--color-surface-tint); }
.sv-table--matrix tbody tr:last-child > * { border-block-end: 0; }

/* ─── TARGET SIZE: a link or a summary that stands alone is at least 24px tall ── */
.sv-page .biz-breadcrumb a,
.sv-page .biz-breadcrumb li > span { display: inline-block; padding-block: var(--space-1); min-inline-size: 24px; min-block-size: 24px; text-align: center; }
/* The whole row of a question opens it, not only the line of text. */
.sv-page [data-section="faq"] .faq-item { padding: 0; }
.sv-page [data-section="faq"] .faq-item summary { padding: var(--space-5) var(--space-6); padding-inline-end: calc(var(--space-6) + 32px); }
.sv-page [data-section="faq"] .faq-item summary::after { inset-inline-end: var(--space-6); }
.sv-page [data-section="faq"] .faq-item__body { margin: 0; padding: 0 var(--space-6) var(--space-5); }

/* A page that ends with the dark band meets the dark footer with no gap. */
.biz-footer--flush { margin-block-start: 0; }

/* ─── MINUTES, and the badge in a card head ──────────────────────────── */
.sv-min { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; color: var(--color-ink-700); font-size: var(--fs-body-sm); }
.sv-min__n { font-weight: var(--fw-bold); color: var(--color-ink-900); font-variant-numeric: tabular-nums; }
.sv-card__badge {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-brand-gold);
    color: var(--color-ink-900);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-sm);
}
.sv-card__badge .sv-min__n,
.sv-card__badge .sv-min__u { color: var(--color-ink-900); }

/* ─── TIME SPLIT (hero of interview questions) ───────────────────────── */
.sv-split__list { list-style: none; margin: 0; padding: var(--space-3) 0; }
.sv-split__row {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
}
.sv-split__row .sv-chip { justify-self: start; }
.sv-split__bar { display: block; block-size: 8px; border-radius: var(--radius-pill); background: var(--color-line-soft); overflow: hidden; }
.sv-split__bar > span { display: block; block-size: 100%; border-radius: var(--radius-pill); background: var(--color-brand-blue); }

/* ─── QUESTION PLAN (the worked example of interview questions) ──────── */
.sv-plan__list { list-style: none; margin: 0; padding: 0; counter-reset: sv-q; }
.sv-plan__item { padding: var(--space-5) var(--space-6); border-block-end: 1px solid var(--color-line); }
.sv-plan__item:last-child { border-block-end: 0; }
.sv-plan__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-block-end: var(--space-3); }
.sv-plan__meta .sv-min { display: inline-flex; align-items: center; }
.sv-plan__q { font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--color-ink-900); line-height: var(--lh-normal); margin: 0 0 var(--space-3); }
.sv-plan__notes { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); }
.sv-plan__notes dt {
    display: flex;
    align-items: center;
    font-size: var(--fs-overline);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-uppercase);
    color: var(--color-ink-500);
    margin-block-end: 2px;
}
.sv-plan__notes dd { margin: 0; color: var(--color-ink-700); font-size: var(--fs-body-sm); line-height: var(--lh-normal); }

/* ─── THE SAME PLAN AT THREE LENGTHS ─────────────────────────────────── */
/* linkedin-check: two scores side by side, and the three reasons to compare. */
.sv-scorepair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.sv-scorepair > div { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.sv-scorepair > div + div { border-inline-start: 1px solid var(--color-line); }
.sv-scorepair dt { color: var(--color-ink-500); font-size: var(--fs-body-sm); }
.sv-scorepair dd { margin: 0; }
.sv-scorepair__n { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-ink-700); font-variant-numeric: tabular-nums; }
.sv-scorepair__n--main { color: var(--color-brand-blue); }
.sv-diffhero__flag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--color-line); color: var(--color-ink-700); font-size: var(--fs-body-sm); }
.sv-diff tbody tr[data-state="differs"] { background: var(--color-brand-gold-soft); }
.sv-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.sv-why__item { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-ink-200); border-radius: var(--radius-lg); }
.sv-why__item h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h4); color: var(--fg-strong); }
.sv-why__item p { margin: 0; color: var(--color-ink-700); line-height: var(--lh-relaxed); }
@media (max-width: 880px) { .sv-why { grid-template-columns: minmax(0, 1fr); } }
/* linkedin-search: a six-cell meter per result, and the cost table. */
.sv-met { display: inline-flex; align-items: center; gap: var(--space-3); }
.sv-meter { display: inline-flex; gap: 3px; }
.sv-meter__cell { inline-size: 14px; block-size: 10px; border-radius: 2px; background: var(--color-ink-200); }
.sv-meter__cell.is-on { background: var(--color-brand-blue); }
.sv-met__n { font-weight: var(--fw-bold); color: var(--color-ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-of { margin-inline: 2px; color: var(--color-ink-500); font-weight: var(--fw-regular); }
.sv-found tbody tr[data-picked="true"] { background: var(--color-surface-tint); }
.sv-cost { max-inline-size: 760px; }
.sv-table .sv-cost__n { text-align: end; font-weight: var(--fw-bold); color: var(--color-ink-900); font-variant-numeric: tabular-nums; }
.sv-cost thead th:last-child { text-align: end; }
/* submittal-resume: a resume as a short outline, before and after. */
.sv-doc { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.sv-doc__h { margin: var(--space-3) 0 0; font-size: var(--fs-overline); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-uppercase); color: var(--color-ink-500); }
.sv-doc__h:first-child { margin-block-start: 0; }
.sv-doc__p { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-ink-700); font-size: var(--fs-body-sm); line-height: var(--lh-normal); display: flex; align-items: flex-start; }
.sv-doc__p.is-marked { background: var(--color-brand-gold-soft); color: var(--color-ink-900); }
.sv-facts { list-style: none; margin: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); color: var(--color-ink-900); font-size: var(--fs-body-sm); }
.sv-facts li { display: flex; align-items: flex-start; gap: var(--space-2); }
/* services hub: the flow card, the service cards of a group, and the link to the audience page. */
.sv-flow { list-style: none; margin: 0; padding: var(--space-3) 0; }
.sv-flow li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); color: var(--color-ink-900); font-size: var(--fs-body-sm); }
.sv-flow li + li { border-block-start: 1px solid var(--color-line); }
.sv-svcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.sv-svc { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-ink-200); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); }
.sv-svc__title { margin: 0; font-size: var(--fs-h4); }
.sv-svc__title a { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--color-brand-blue); text-decoration: none; }
.sv-table th a { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--color-brand-blue); }
.sv-svc__title a:hover,
.sv-svc__title a:focus-visible { text-decoration: underline; }
.sv-svc__line { margin: 0; color: var(--color-ink-700); line-height: var(--lh-relaxed); }
.sv-svc__get { margin: auto 0 0; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-line); display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink-900); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.sv-svc__plan { margin: 0; }
.sv-card__foot { margin: 0; padding: var(--space-3) var(--space-5); border-block-start: 1px solid var(--color-line); color: var(--color-ink-500); font-size: var(--fs-caption); }
.sv-count { display: inline-flex; align-items: baseline; }
.sv-pair > .sv-card { block-size: 100%; }
.sv-more { text-align: center; margin: var(--space-7) 0 0; }
.sv-more a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 24px; font-weight: var(--fw-semibold); color: var(--color-brand-blue); }
@media (max-width: 720px) { .sv-svcs { grid-template-columns: minmax(0, 1fr); } }
/* audience pages: sourced figures. */
.sv-figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.sv-fig { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-ink-200); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-2); }
.sv-fig__n { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-brand-blue); font-variant-numeric: tabular-nums; line-height: 1.1; }
.sv-fig__text { margin: 0; color: var(--color-ink-700); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.sv-fig__meta { margin: auto 0 0; padding-block-start: var(--space-3); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-caption); }
.sv-fig__meta a { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--color-brand-blue); overflow-wrap: anywhere; }
@media (max-width: 1000px) { .sv-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-figs { grid-template-columns: minmax(0, 1fr); } }
/* benchmarks: label legend, charts on one scale, and the two readings of a topic. */
.sv-labels { margin: 0; padding: var(--space-3) var(--space-5); }
.sv-labels > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-2) 0; }
.sv-labels > div + div { border-block-start: 1px solid var(--color-line); }
.sv-labels dt { margin: 0; }
.sv-labels dd { margin: 0; color: var(--color-ink-700); font-size: var(--fs-caption); line-height: var(--lh-normal); }
.sv-updated { margin-block: var(--space-6) 0; color: var(--color-ink-500); font-size: var(--fs-body-sm); }
.sv-figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-figs--1 { grid-template-columns: minmax(0, 1fr); max-inline-size: 640px; margin-inline: auto; }
/* Every track is as wide as the chart, and every chart has one width: a bar's length is its value. */
.sv-chart { inline-size: min(100%, 640px); margin: var(--space-7) auto 0; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-ink-200); border-radius: var(--radius-lg); }
.sv-chart__title { font-weight: var(--fw-bold); color: var(--color-ink-900); margin-block-end: var(--space-4); }
.sv-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.sv-bar__label { display: block; color: var(--color-ink-700); font-size: var(--fs-body-sm); margin-block-end: var(--space-1); }
.sv-bar__row { display: grid; grid-template-columns: minmax(0, 1fr) 4rem; align-items: center; gap: var(--space-3); }
.sv-bar__track { display: block; block-size: 14px; background: var(--color-line-soft); border-radius: var(--radius-sm); overflow: hidden; }
.sv-bar__fill { display: block; block-size: 100%; inline-size: calc(var(--v) * 1%); background: var(--color-brand-blue); border-radius: var(--radius-sm); }
.sv-bar__v { text-align: end; font-weight: var(--fw-bold); color: var(--color-ink-900); font-variant-numeric: tabular-nums; }
.sv-chart__meta { flex-direction: row; flex-wrap: wrap; align-items: center; margin-block-start: var(--space-4); color: var(--color-ink-700); }
.sv-read { margin-block-start: var(--space-7); }
.sv-read__col h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h4); color: var(--fg-strong); }
.sv-read__col p { margin: 0; color: var(--color-ink-700); line-height: var(--lh-relaxed); }
.sv-read__link { margin-block-start: var(--space-3) !important; font-weight: var(--fw-semibold); }
.sv-read__link a { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--color-brand-blue); }
@media (max-width: 1000px) { .sv-figs--3 { grid-template-columns: minmax(0, 1fr); } }
.sv-sizes { margin-block-start: var(--space-9); }
.sv-sizes__title { text-align: center; font-size: var(--fs-h2); color: var(--fg-strong); margin: 0 0 var(--space-2); }
.sv-sizes__lead { text-align: center; color: var(--fg-muted); margin: 0 auto var(--space-6); max-inline-size: 60ch; line-height: var(--lh-relaxed); }
.sv-table-wrap { max-inline-size: 880px; margin: 0 auto; border: 1px solid var(--color-ink-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.sv-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); color: var(--color-ink-700); }
.sv-table th,
.sv-table td { padding: var(--space-4) var(--space-5); text-align: start; border-block-end: 1px solid var(--color-line); vertical-align: middle; }
.sv-table thead th { background: var(--color-brand-blue); color: var(--fg-on-dark); font-weight: var(--fw-semibold); }
.sv-table thead .sv-min,
.sv-table thead .sv-min__n { color: var(--fg-on-dark); }
.sv-table tbody th { font-weight: var(--fw-regular); }
.sv-table tfoot th,
.sv-table tfoot td { background: var(--color-line-soft); font-weight: var(--fw-bold); color: var(--color-ink-900); border-block-end: 0; }
.sv-sizes__q { font-weight: var(--fw-bold); color: var(--color-ink-900); font-variant-numeric: tabular-nums; }

/* ─── NARROWER SCREENS ───────────────────────────────────────────────── */
@media (max-width: 960px) {
    .sv-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .sv-hero h1 { font-size: var(--fs-h1); }
    .sv-steps,
    .sv-legend,
    .sv-scope { grid-template-columns: minmax(0, 1fr); }
    .sv-closing h2 { font-size: 1.8rem; }
}
@media (max-width: 720px) {
    .sv-hero { padding-block: var(--space-9) var(--space-10); }
    .sv-answer { padding: var(--space-5); }
    .sv-card__head,
    .sv-rank__row,
    .sv-confirm { padding-inline: var(--space-4); }
    /* The requirement table becomes one block per requirement: nothing scrolls inside it. */
    /* Only the evidence label of the head stays, so its callout has something to point at. */
    .sv-reqs__head { display: block; padding: var(--space-3) var(--space-4); }
    .sv-reqs__head > :not(:last-child) { display: none; }
    .sv-reqs__row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-2) var(--space-3);
        padding: var(--space-4);
    }
    .sv-reqs__row > :nth-child(1),
    .sv-reqs__row > :nth-child(4) { grid-column: 1 / -1; }
    .sv-rank__row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .sv-rank__row .sv-chip { grid-column: 2; grid-row: 2; justify-self: start; }
    .sv-rank__score { grid-column: 3; grid-row: 1; }
    .sv-plans__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .sv-split__row { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-4); }
    .sv-split__bar { grid-column: 1 / -1; grid-row: 2; }
    .sv-plan__item { padding-inline: var(--space-4); }
    .sv-plan__notes { grid-template-columns: minmax(0, 1fr); }
    .sv-table th,
    .sv-table td { padding: var(--space-3); }
    .sv-table .sv-min { display: flex; flex-wrap: wrap; column-gap: 4px; row-gap: 0; white-space: normal; }
    .sv-table .sv-min__u { font-size: var(--fs-caption); min-inline-size: 0; overflow-wrap: anywhere; }
    .sv-pair { grid-template-columns: minmax(0, 1fr); }
    .sv-shared__list li,
    .sv-shared__foot,
    .sv-people__row { padding-inline: var(--space-4); }
    /* A table inside a card becomes one block per row, each cell with its column name. */
    .sv-table--stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .sv-table--stack,
    .sv-table--stack tbody,
    .sv-table--stack tr,
    .sv-table--stack th,
    .sv-table--stack td { display: block; inline-size: 100%; }
    .sv-table--stack tr { padding: var(--space-3) 0; border-block-end: 1px solid var(--color-line); }
    .sv-table--stack tr:last-child { border-block-end: 0; }
    .sv-table--stack th,
    .sv-table--stack td { border: 0; padding: var(--space-1) var(--space-4); }
    .sv-table--stack td { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
    .sv-table--stack td::before { content: attr(data-label); color: var(--color-ink-500); font-size: var(--fs-caption); }
    .sv-table--stack td > * { text-align: end; }
    /* A table with a few short columns keeps its shape and shares the width out. */
    .sv-table { table-layout: fixed; }
    .sv-table th,
    .sv-table td { overflow-wrap: anywhere; }
    .sv-table th:first-child { inline-size: 40%; }
    .sv-table .sv-chip { white-space: normal; border-radius: var(--radius-sm); }
    .sv-table th,
    .sv-table td { padding: var(--space-3) var(--space-2); }
    .sv-table th { hyphens: auto; }
    .sv-table--stack th:first-child { inline-size: 100%; }
    /* The role table: one block per capability, the four roles under it, two by two. */
    .sv-table--matrix thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .sv-table--matrix,
    .sv-table--matrix tbody { display: block; inline-size: 100%; }
    .sv-table--matrix tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-1) var(--space-4);
        padding: var(--space-4);
        border-block-end: 1px solid var(--color-line);
    }
    .sv-table--matrix tbody tr:last-child { border-block-end: 0; }
    .sv-table--matrix tbody th { grid-column: 1 / -1; inline-size: auto; padding: 0 0 var(--space-1); border: 0; font-weight: var(--fw-semibold); color: var(--color-ink-900); background: none; }
    /* Two classes, to outweigh the centring rule above; the cell is a flex row here. */
    .sv-table.sv-table--matrix tbody td { display: flex; align-items: center; gap: var(--space-2); padding: 2px 0; border: 0; text-align: start; background: none; font-size: var(--fs-body-sm); }
    .sv-table--matrix tbody td::after { content: attr(data-label); color: var(--color-ink-700); }
    .sv-table--matrix tbody tr:nth-child(even) > * { background: none; }
    .sv-table--matrix tbody tr:nth-child(even) { background: var(--color-surface-tint); }
    .sv-score { margin-inline-start: 0; }
}