/* ==========================================================================
   Integrated Imaging — Design System (UI Kit)
   Self-contained. Deliberately does NOT load main.css: that file is a
   compiled Tailwind subset and only contains classes the original React app
   happened to use. Everything here is hand-written CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — mirrored from assets/css/main.css so the kit is the source of
   truth without depending on the compiled blob.
   -------------------------------------------------------------------------- */

:root {
    /* Brand */
    --red: #c8102e;
    --red-dark: #9b0e24;
    /* --red-light (#ff6b80) retired 2026-08-20 — one red everywhere, the
       button's. On charcoal it is spent on figures, marks and headings;
       body-size words on charcoal stay white or muted. */
    --red-soft: rgba(200, 16, 46, .078);

    /* Grounds */
    --charcoal: #1a1a1a;
    --charcoal-2: #252525;
    --charcoal-3: #333;
    --cream: #faf7f2;
    --cream-2: #f4f0e9;

    /* Ink */
    --text: #2c2c2c;
    --text-muted: #5e5e5e;
    /* main.css ships --text-light: #8a8a8a, which is 3.23:1 on cream and fails
       WCAG AA for text. It is unused on the live site, so the system adopts a
       warmer, darker value at 4.68:1 instead. */
    --text-light: #726f6a;

    /* Structure */
    --rule: #e6e1d8;
    --rule-dark: rgba(255, 255, 255, .1);
    --radius: .25rem;
    --max: 1240px;
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Type */
    --font: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

    /* Fluid display scale */
    --t-display: clamp(3rem, 7vw, 4.25rem);
    --t-h2: clamp(2.375rem, 5vw, 3.75rem);
    --t-h3: clamp(1.75rem, 3.2vw, 2.5rem);
    --t-h4: 1.5rem;
    --t-lead: clamp(1.0625rem, 1.2vw, 1.1875rem);
    --t-body: 1rem;
    --t-small: .90625rem;
    --t-micro: .75rem;
    --t-nano: .6875rem;

    /* Space — 4px base */
    --s1: .25rem;
    --s2: .5rem;
    --s3: .75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 2.5rem;
    --s8: 3.5rem;
    --s9: 5rem;
    --s10: 7.5rem;

    /* Kit chrome */
    --rail: 15rem;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* An unbroken string — a long token name, a URL, a German compound — wraps
       instead of forcing the page sideways. */
    overflow-wrap: break-word;
}

/* Grid and flex children refuse to shrink below their content by default,
   which is how a single long word blows out a column. */
.capindex li > *,
.compare__cell,
.panel__split > *,
.statband__cell,
.typerow > * {
    min-width: 0;
}

kbd {
    display: inline-block;
    padding: .0625rem .375rem;
    border: 1px solid var(--rule);
    border-bottom-width: 2px;
    border-radius: 3px;
    background: var(--cream-2);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .8125em;
    line-height: 1.4;
    white-space: nowrap;
}

h1,
h2,
h3,
h4,
h5,
p,
figure,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* One focus treatment for the whole document. */
:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: 1px;
}

.skip {
    position: absolute;
    left: var(--s4);
    top: var(--s4);
    z-index: 200;
    padding: var(--s3) var(--s5);
    background: var(--charcoal);
    color: #fff;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform .2s var(--ease);
}

.skip:focus {
    transform: none;
}

.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Kit shell — asymmetric: fixed index rail, wide plate column.
   -------------------------------------------------------------------------- */

.shell {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 96rem;
    margin: 0 auto;
}

@media (min-width: 60rem) {
    .shell {
        grid-template-columns: var(--rail) minmax(0, 1fr);
        column-gap: var(--s8);
    }
}

/* --- Masthead --- */

.masthead {
    grid-column: 1 / -1;
    padding: var(--s8) var(--gutter) var(--s7);
    border-bottom: 1px solid var(--rule);
}

.masthead__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s5);
}

.masthead__mark {
    display: flex;
    align-items: center;
    gap: var(--s4);
}

.masthead__mark img {
    height: 40px;
    width: auto;
}

.masthead__mark span {
    padding-left: var(--s4);
    border-left: 1px solid var(--rule);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.masthead__meta {
    display: flex;
    gap: var(--s6);
    font-size: var(--t-nano);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.masthead h1 {
    margin-top: var(--s7);
    max-width: 22ch;
    font-size: var(--t-display);
    font-weight: 200;
    line-height: .98;
    letter-spacing: -.035em;
}

.masthead h1 em {
    font-style: normal;
    font-weight: 300;
    color: var(--red);
}

.masthead__intro {
    margin-top: var(--s5);
    max-width: 56ch;
    font-size: var(--t-lead);
    line-height: 1.6;
    color: var(--text-muted);
}

/* --- Index rail --- */

.rail {
    display: none;
}

@media (min-width: 60rem) {
    .rail {
        display: block;
        position: sticky;
        top: 0;
        align-self: start;
        max-height: 100vh;
        overflow-y: auto;
        padding: var(--s8) 0 var(--s8) var(--gutter);
        scrollbar-width: thin;
    }
}

.rail__label {
    margin-bottom: var(--s4);
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-light);
}

.rail__group {
    margin-bottom: var(--s6);
}

.rail a {
    display: flex;
    gap: var(--s3);
    padding: .5rem 0;
    font-size: var(--t-small);
    text-decoration: none;
    color: var(--text-muted);
    border-left: 1.5px solid transparent;
    padding-left: var(--s3);
    margin-left: -.75rem;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}

.rail a b {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-light);
    transition: color .2s var(--ease);
}

.rail a:hover {
    color: var(--text);
}

.rail a[aria-current="true"] {
    color: var(--red);
    border-left-color: var(--red);
}

.rail a[aria-current="true"] b {
    color: var(--red);
}

/* --- Plates --- */

.plates {
    min-width: 0;
    padding: 0 var(--gutter) var(--s10);
}

.plate {
    padding: var(--s8) 0;
    border-bottom: 1px solid var(--rule);
    scroll-margin-top: var(--s5);
}

.plate:last-child {
    border-bottom: 0;
}

.plate__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s3) var(--s4);
    margin-bottom: var(--s2);
}

.plate__no {
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}

.plate__kind {
    font-size: var(--t-nano);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-light);
}

.plate h2 {
    font-size: var(--t-h3);
    font-weight: 300;
    letter-spacing: -.025em;
    line-height: 1.1;
}

.plate__note {
    margin-top: var(--s4);
    max-width: 62ch;
    color: var(--text-muted);
    font-size: var(--t-small);
    line-height: 1.65;
}

.plate__note + .plate__note {
    margin-top: var(--s3);
}

.plate__note strong {
    color: var(--text);
    font-weight: 600;
}

.plate__note code,
.inline-code {
    padding: .0625rem .3125rem;
    background: var(--cream-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .8125em;
    color: var(--text);
}

/* --- Specimen frame: registration ticks at the corners, like a plate proof --- */

.specimen {
    position: relative;
    margin-top: var(--s6);
    padding: var(--s7);
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.specimen::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        linear-gradient(var(--red), var(--red)) left top / 12px 1px no-repeat,
        linear-gradient(var(--red), var(--red)) left top / 1px 12px no-repeat,
        linear-gradient(var(--red), var(--red)) right top / 12px 1px no-repeat,
        linear-gradient(var(--red), var(--red)) right top / 1px 12px no-repeat,
        linear-gradient(var(--red), var(--red)) left bottom / 12px 1px no-repeat,
        linear-gradient(var(--red), var(--red)) left bottom / 1px 12px no-repeat,
        linear-gradient(var(--red), var(--red)) right bottom / 12px 1px no-repeat,
        linear-gradient(var(--red), var(--red)) right bottom / 1px 12px no-repeat;
}

.specimen--dark {
    background: var(--charcoal);
    border-color: var(--charcoal);
    color: rgba(255, 255, 255, .85);
}

.specimen--flush {
    padding: 0;
    overflow: hidden;
}

.specimen--tight {
    padding: var(--s5);
}

.specimen__caption {
    margin-top: var(--s3);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* --- Current → Proposed delta marker --- */

.delta {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-left: auto;
    padding: .25rem .5rem .25rem .375rem;
    border: 1px solid rgba(200, 16, 46, .3);
    background: var(--red-soft);
    border-radius: var(--radius);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red);
}

.delta::before {
    content: "";
    width: 5px;
    height: 5px;
    background: var(--red);
    border-radius: 50%;
    flex: none;
}

.delta--none {
    border-color: var(--rule);
    background: var(--cream-2);
    color: var(--text-light);
}

.delta--none::before {
    background: var(--text-light);
}

/* Side-by-side comparison */
.compare {
    display: grid;
    gap: 1px;
    margin-top: var(--s6);
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

@media (min-width: 48rem) {
    .compare {
        grid-template-columns: 1fr 1fr;
    }
}

.compare__cell {
    padding: var(--s6);
    background: #fff;
}

.compare__cell--dark {
    background: var(--charcoal);
    color: rgba(255, 255, 255, .85);
}

.compare__tag {
    display: block;
    margin-bottom: var(--s5);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-light);
}

.compare__cell--dark .compare__tag {
    color: rgba(255, 255, 255, .45);
}

.compare__tag--new {
    color: var(--red);
}

/* --- Markup disclosure --- */

details.code {
    margin-top: var(--s4);
    border-top: 1px solid var(--rule);
}

details.code summary {
    padding: .875rem 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-light);
    transition: color .2s var(--ease);
}

details.code summary::-webkit-details-marker {
    display: none;
}

/* A drawn marker, not a typed one. "+ " and "– " as generated content get read
   aloud by most screen readers ("plus Markup"), and <details> already exposes
   its expanded state programmatically — so this stays purely visual. */
details.code summary::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: .5rem;
    vertical-align: middle;
    border-left: 5px solid var(--red);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .2s var(--ease);
}

details.code[open] summary::before {
    transform: rotate(90deg);
}

details.code summary:hover {
    color: var(--text);
}

details.code pre {
    margin: 0 0 var(--s5);
    padding: var(--s5);
    overflow-x: auto;
    background: var(--charcoal);
    color: #e8e4dd;
    border-radius: var(--radius);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .78125rem;
    line-height: 1.7;
    tab-size: 2;
}

/* --------------------------------------------------------------------------
   4. Foundations — color
   -------------------------------------------------------------------------- */

.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--s4);
    margin-top: var(--s6);
}

.swatch {
    display: flex;
    flex-direction: column;
    background: #fff;
    text-align: left;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    cursor: copy;
    font: inherit;
    transition: border-color .2s var(--ease);
}

.swatch:hover {
    border-color: var(--text-light);
}

.swatch__chip {
    display: block;
    height: 5.5rem;
    border-bottom: 1px solid var(--rule);
}

.swatch__body {
    display: block;
    padding: var(--s4);
}

.swatch__name {
    display: block;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .04em;
}

.swatch__hex {
    display: block;
    margin-top: .125rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: var(--t-micro);
    color: var(--text-muted);
}

.swatch__role {
    display: block;
    margin-top: var(--s2);
    font-size: var(--t-micro);
    line-height: 1.55;
    color: var(--text-light);
}

.swatch__copied {
    color: var(--red);
    font-weight: 700;
}

/* Contrast table. The wrapper scrolls so a narrow phone never pushes the whole
   page sideways; min-width keeps the four columns legible rather than crushed. */
.table-scroll {
    margin-top: var(--s6);
    overflow-x: auto;
}

.ratios {
    width: 100%;
    min-width: 26rem;
    border-collapse: collapse;
    font-size: var(--t-small);
}

.ratios th,
.ratios td {
    padding: var(--s3) var(--s4);
    text-align: left;
    border-bottom: 1px solid var(--rule);
}

.ratios th {
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-light);
}

.ratios td:nth-child(3),
.ratios td:nth-child(4) {
    font-variant-numeric: tabular-nums;
}

.ratios .pass {
    color: #1c6b3f;
    font-weight: 700;
}

.ratios .fail {
    color: var(--red);
    font-weight: 700;
}

.ratios__sample {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   5. Foundations — type specimens
   -------------------------------------------------------------------------- */

.typerow {
    display: grid;
    gap: var(--s3);
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 48rem) {
    .typerow {
        grid-template-columns: 9rem minmax(0, 1fr);
        gap: var(--s6);
        align-items: baseline;
    }
}

.typerow:last-child {
    border-bottom: 0;
}

.typerow__meta {
    font-size: var(--t-nano);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    line-height: 1.7;
}

.typerow__meta b {
    display: block;
    color: var(--text);
    font-weight: 700;
}

.scale-display {
    font-size: var(--t-display);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.035em;
}

.scale-h2 {
    font-size: var(--t-h2);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.03em;
}

.scale-h3 {
    font-size: var(--t-h3);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.scale-h4 {
    font-size: var(--t-h4);
    font-weight: 500;
    line-height: 1.25;
}

.scale-lead {
    font-size: var(--t-lead);
    line-height: 1.6;
    color: var(--text-muted);
}

.scale-body {
    font-size: var(--t-body);
    line-height: 1.65;
}

.scale-small {
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--text-muted);
}

.scale-micro {
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--red);
}

.weights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s6);
    margin-top: var(--s6);
}

.weights div {
    font-size: 1.75rem;
    line-height: 1.2;
}

.weights span {
    display: block;
    font-size: var(--t-nano);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* --------------------------------------------------------------------------
   6. Foundations — space, rule, radius, motion
   -------------------------------------------------------------------------- */

.spacescale {
    margin-top: var(--s6);
}

.spacescale li {
    display: grid;
    grid-template-columns: 3.5rem 4rem minmax(0, 1fr);
    align-items: center;
    gap: var(--s4);
    padding: .375rem 0;
    font-size: var(--t-micro);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.spacescale b {
    color: var(--text);
    font-weight: 600;
}

.spacescale i {
    display: block;
    height: 10px;
    background: var(--red);
    opacity: .85;
    border-radius: 1px;
}

.motion-demo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5);
    margin-top: var(--s6);
    align-items: flex-end;
}

.motion-demo figure {
    flex: 1 1 12rem;
}

.motion-demo__track {
    height: 3rem;
    background: var(--cream-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.motion-demo__bar {
    height: 100%;
    width: 22%;
    background: var(--red);
    transform: translateX(0);
}

.is-playing .motion-demo__bar {
    animation: sweep 1.4s var(--ease) both;
}

.motion-demo__bar--linear {
    background: var(--charcoal-3);
}

.is-playing .motion-demo__bar--linear {
    animation-timing-function: linear;
}

@keyframes sweep {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(355%);
    }
}

.motion-demo figcaption {
    margin-top: var(--s2);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* ==========================================================================
   7. COMPONENTS — the actual system.
   Everything below this line is production CSS, copy it into site.css.
   ========================================================================== */

/* --- 7.1 Buttons ------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--t-small);
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    transition:
        background-color .25s var(--ease),
        border-color .25s var(--ease),
        color .25s var(--ease),
        transform .25s var(--ease),
        box-shadow .25s var(--ease);
}

.btn svg {
    flex: none;
    transition: transform .25s var(--ease);
}

.btn:hover svg {
    transform: translateX(3px);
}

.btn--primary {
    background: var(--red);
    color: #fff;
}

.btn--primary:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(200, 16, 46, .5);
}

.btn--secondary {
    border-color: var(--charcoal);
    color: var(--charcoal);
}

.btn--secondary:hover {
    background: var(--charcoal);
    color: var(--cream);
    transform: translateY(-1px);
}

.btn--ghost {
    position: relative;
    padding-inline: 0;
    color: var(--text);
}

.btn--ghost::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: .625rem;
    width: 0;
    height: 1.5px;
    background: var(--red);
    transition: width .25s var(--ease);
}

.btn--ghost:hover {
    color: var(--red);
}

.btn--ghost:hover::after {
    width: 100%;
}

.btn--sm {
    padding: .625rem 1.125rem;
    font-size: var(--t-micro);
}

.btn--lg {
    padding: 1.0625rem 2.25rem;
    font-size: var(--t-body);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

/* On charcoal grounds the secondary button inverts. */
.on-dark .btn--secondary {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.on-dark .btn--secondary:hover {
    background: #fff;
    color: var(--charcoal);
}

.on-dark .btn--ghost {
    color: rgba(255, 255, 255, .85);
}

.on-dark .btn--ghost:hover {
    color: var(--red);
}

.on-dark .btn--ghost::after {
    background: var(--red);
}

.btnrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s5);
}

/* --- 7.2 Eyebrow ------------------------------------------------------- */

.eyebrow {
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--red);
}

.on-dark .eyebrow {
    color: var(--red);
}

/* --- 7.3 Display heading ----------------------------------------------- */

.display {
    font-size: var(--t-display);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.035em;
}

.display em {
    font-style: normal;
    font-weight: 300;
    color: var(--red);
}

.on-dark .display,
.on-dark .display em {
    color: #fff;
}

.on-dark .display em {
    color: var(--red);
}

/* The same accent phrase at the smaller heading sizes, for pages that keep
   the display size for the H1 alone and step every section heading down. */
.scale-h2 em,
.scale-h3 em {
    font-style: normal;
    font-weight: 300;
    color: var(--red);
}

.on-dark .scale-h2 em,
.on-dark .scale-h3 em {
    color: var(--red);
}

/* --- 7.4 Checklist ------------------------------------------------------
   One CSS mask replaces ~20 hand-inlined <svg> checkmarks. The tick inherits
   its color from the list, so on-dark needs no second icon. */

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .625rem 0;
    font-size: var(--t-small);
    line-height: 1.55;
}

.checklist li::before {
    content: "";
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: .1875rem;
    background: var(--red);
    -webkit-mask: var(--tick) center / contain no-repeat;
    mask: var(--tick) center / contain no-repeat;
}

.on-dark .checklist li::before {
    background: var(--red);
}

.on-dark .checklist li {
    color: rgba(255, 255, 255, .85);
}

:root {
    --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l4 4 8-10'/%3E%3C/svg%3E");
}

/* Dotted variant — the hero's bullet list. */
.dotlist li {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .75rem 0;
    font-size: var(--t-small);
    line-height: 1.55;
    border-bottom: 1px solid var(--rule);
}

.dotlist li:last-child {
    border-bottom: 0;
}

.dotlist li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: .5625rem;
    border-radius: 50%;
    background: var(--red);
}

/* --- 7.5 Capability index ----------------------------------------------
   Replaces the six identical icon-heading-paragraph cards. The measurable
   fact leads; the sentence supports it. */

.capindex {
    border-top: 1px solid var(--rule);
}

.capindex li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--rule);
}

/* A single row shown out of context — inside a comparison cell, say — carries
   no rules and no outer padding, so it aligns flush with whatever sits beside
   it. Zeroing only padding-top inline left 24px of dead space underneath and
   knocked the two comparison halves out of alignment. */
.capindex--bare {
    border-top: 0;
}

.capindex--bare li {
    border-bottom: 0;
}

.capindex--bare li:first-child {
    padding-top: 0;
}

.capindex--bare li:last-child {
    padding-bottom: 0;
}

@media (min-width: 40rem) {
    .capindex li {
        grid-template-columns: 8.5rem minmax(0, 1fr);
        gap: var(--s6);
        /* Was `baseline`. Sharing a baseline between a 36px numeral and a 17px
           heading is technically aligned and visually wrong — the figure has
           ~14px more cap height, so it floats. Align the tops instead and pay
           back the heading's half-leading by hand. */
        align-items: start;
    }

    .capindex__fig {
        /* (1.6 line-height − 1) × 17px ÷ 2 = the space above the heading's
           cap. The figure has none of its own at line-height 1. */
        padding-top: .3125rem;
    }
}

.capindex__fig {
    font-size: 2.25rem;
    font-weight: 200;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}

/* The unit label under the figure. Was <sub>, which is subscript semantics for
   something that is not a subscript — now a plain span. */
.capindex__fig span {
    display: block;
    margin-top: .375rem;
    font-size: var(--t-nano);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-light);
}

.capindex__name {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.capindex__desc {
    margin-top: .25rem;
    max-width: 54ch;
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--text-muted);
}

/* --- 7.6 Spec chips ----------------------------------------------------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem .75rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--cream-2);
    font-size: var(--t-micro);
    color: var(--text-muted);
}

.chip::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
}

.on-dark .chip {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .75);
}

.on-dark .chip::before {
    background: var(--red);
}

/* --- 7.7 Stat band ------------------------------------------------------ */

.statband {
    display: grid;
    background: var(--charcoal);
    color: #fff;
}

/* One fact per row until there is room for the whole row of facts — the
   figures hold their full size instead of wrapping inside a narrow cell.
   Wide, the band takes as many equal columns as it has cells. */
@media (min-width: 64rem) {
    .statband {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

/* Left-aligned facts on one system: every cell is the same width and every
   block starts the same distance in from its divider — the inset is a
   fixed share of the cell, never derived from the content's own width. */
.statband__cell {
    padding: var(--s5);
    border-top: 1px solid var(--rule-dark);
    text-align: left;
}


.statband__cell:first-child {
    border-top: 0;
}

@media (min-width: 48rem) {
    .statband__cell {
        padding: var(--s6);
    }
}

@media (min-width: 64rem) {
    .statband__cell {
        padding-left: 18%;
    }
}

@media (min-width: 64rem) {
    .statband__cell {
        border-top: 0;
        border-left: 1px solid var(--rule-dark);
    }

    .statband__cell:first-child {
        border-left: 0;
    }
}

.statband__fig {
    margin-top: var(--s4);
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}

/* The name sits ABOVE its figure — the label reads first, the figure answers. */
.statband__name {
    font-size: 1.0625rem;
    font-weight: 500;
}

.statband__desc {
    margin-top: .25rem;
    font-size: var(--t-micro);
    color: rgba(255, 255, 255, .6);
}

/* --- 7.8 Feature panel -------------------------------------------------- */

/* This used to be a bordered, rounded box on charcoal — a card, sitting two
   plates after the rule that says reach for a rule and space before a card.
   The rule was right; the component was inherited. Ground change plus one
   hairline now does the separating. */
.panel {
    padding: clamp(1.75rem, 4vw, 3.5rem);
    background: var(--charcoal-2);
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85);
}

.panel__kicker {
    font-size: var(--t-nano);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--red);
}

.panel h3,
.panel__title {
    margin-top: var(--s4);
    max-width: 22ch;
    font-size: var(--t-h3);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
}

.panel__lede {
    margin-top: var(--s4);
    max-width: 60ch;
    font-size: var(--t-small);
    line-height: 1.65;
    color: rgba(255, 255, 255, .65);
}

.panel__split {
    display: grid;
    gap: var(--s6);
    margin-top: var(--s7);
    padding-top: var(--s6);
    border-top: 1px solid var(--rule-dark);
}

@media (min-width: 44rem) {
    .panel__split {
        grid-template-columns: 1fr 1fr;
        gap: var(--s8);
    }
}

.panel__subhead {
    margin-bottom: var(--s3);
    font-size: var(--t-nano);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* Numbered protocol row (the cardiac 01/02/03 list). */
.protocol {
    padding: var(--s5) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.protocol:first-child {
    border-top: 0;
    padding-top: 0;
}

.protocol__head {
    display: flex;
    align-items: baseline;
    gap: var(--s4);
}

.protocol__no {
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}

.protocol h4,
.protocol__title {
    font-size: 1.375rem;
    font-weight: 400;
    color: #fff;
}

/* Direct child only — `.protocol p` also matched the <p class="protocol__title">
   inside the head and shrank it to body size. */
.protocol > p {
    margin: var(--s3) 0 var(--s4);
    max-width: 66ch;
    font-size: var(--t-small);
    color: rgba(255, 255, 255, .6);
}

/* Was a second bordered box inside the panel — a card inside a card. A left
   rule marks it just as clearly and adds no container. */
.protocol--flagged {
    padding-left: var(--s5);
    border-left: 2px solid var(--red);
}

.protocol--flagged .protocol__no {
    color: rgba(255, 255, 255, .6);
}

.protocol--flagged > p {
    color: rgba(255, 255, 255, .85);
}

/* --- 7.9 Process steps --------------------------------------------------
   Matches the live page: an 80px circle per step, cream with a hairline
   edge and the number in the accent, centred in its column, a hairline
   running through the circles' centres, title and sentence centred beneath. */

.steps {
    position: relative;
    display: grid;
    gap: var(--s7);
    text-align: center;
    counter-reset: step;
}

@media (min-width: 48rem) {
    .steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s8);
    }

    /* Through the centre of the circles; the circles' own fill hides it
       where they sit, so it reads as running behind them. */
    .steps::before {
        content: "";
        position: absolute;
        top: 2.5rem;
        left: 10%;
        right: 10%;
        height: 1px;
        background: var(--rule);
    }
}

/* Six steps — a whole appointment, call to report. Three-up on a tablet so
   the row never crushes, six across on a laptop, and the hairline only
   draws when all six sit on one line. */
@media (min-width: 48rem) {
    .steps--six {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s8) var(--s7);
    }

    .steps--six::before {
        display: none;
    }
}

@media (min-width: 64rem) {
    .steps--six {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--s6);
    }

    .steps--six::before {
        display: block;
        left: 5%;
        right: 5%;
    }
}

.step {
    position: relative;
}

.step__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background: var(--cream);
    border: 1.5px solid var(--rule);
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}

.step h4,
.step .step__title {
    margin-top: 1.75rem;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.step p:not(.step__title) {
    margin: var(--s3) auto 0;
    max-width: 16.25rem;
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--text-muted);
}

/* When a step carries two or three sentences rather than one, the sentence
   is set at body size on a wider measure, so the longest step reads as a
   paragraph and not as a column of crumbs. */
.steps--prose .step p:not(.step__title) {
    max-width: 19rem;
    font-size: var(--t-body);
    line-height: 1.65;
}

/* Six across leaves ~180px per column; the sentence may use all of it. */
@media (min-width: 64rem) {
    .steps--six .step p:not(.step__title) {
        max-width: none;
    }

    .steps--six .step .step__title {
        font-size: 1.25rem;
    }
}

.on-dark .step__no {
    background: var(--charcoal-2);
    border-color: rgba(255, 255, 255, .18);
    color: var(--red);
}

.on-dark .step .step__title {
    color: #fff;
}

.on-dark .step p:not(.step__title) {
    color: rgba(255, 255, 255, .65);
}

/* --- 7.10 Section tabs --------------------------------------------------
   Active state is driven by aria-current, not by JS writing inline styles. */

.tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--rule);
    background: var(--cream);
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tabs a {
    padding: 1.125rem 1.5rem;
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}

.tabs a:hover {
    color: var(--text);
}

.tabs a[aria-current="true"] {
    color: var(--red);
    border-bottom-color: var(--red);
}

/* --- 7.11 Site header --------------------------------------------------- */

.siteheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
    /* A fixed height, so anything sticky beneath it (the section tabs) can
       pin to exactly this edge. 16px + 36px logo + 16px = 68px. */
    height: 4.25rem;
    padding: 0 var(--s5);
    background: rgba(250, 247, 242, .95);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease);
}

.siteheader.is-scrolled {
    border-bottom-color: var(--rule);
}

/* Charcoal header. The logo swaps to its reverse (white wordmark, mark
   unchanged — logo-white.png); links take the dark-ground ink and the
   same red as everywhere else. */
.siteheader--dark {
    background: rgba(26, 26, 26, .95);
    color: #fff;
}

.siteheader--dark.is-scrolled {
    border-bottom-color: var(--rule-dark);
}

.siteheader--dark .navlink {
    color: rgba(255, 255, 255, .85);
}

.siteheader--dark .navlink:hover,
.siteheader--dark .navlink[aria-current="page"] {
    color: var(--red);
}

.siteheader--dark .navlink::after {
    background: var(--red);
}

.siteheader__nav {
    display: flex;
    align-items: center;
    gap: var(--s5);
}

.navlink {
    position: relative;
    font-size: var(--t-micro);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s var(--ease);
}

.navlink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.25rem;
    width: 0;
    height: 1.5px;
    background: var(--red);
    transition: width .25s var(--ease);
}

.navlink:hover {
    color: var(--red);
}

.navlink:hover::after {
    width: 100%;
}

/* --- 7.12 Footer -------------------------------------------------------- */

.sitefooter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s5);
    background: var(--charcoal);
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: var(--t-micro);
    color: rgba(255, 255, 255, .6);
}

.sitefooter nav {
    display: flex;
    align-items: center;
    gap: var(--s6);
}

/* A social mark in the footer nav — the icon takes the link ink. */
.sitefooter__social {
    display: inline-flex;
    align-items: center;
}

.sitefooter__social svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.sitefooter a {
    text-decoration: none;
    transition: color .2s var(--ease);
}

.sitefooter a:hover {
    color: #fff;
}

/* --- 7.13 Form ---------------------------------------------------------- */

.field {
    display: grid;
    gap: .375rem;
    margin-bottom: var(--s5);
}

.field > label {
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: .04em;
}

/* Required is marked in words, not with a bare asterisk nobody has explained.
   The mark is aria-hidden; the input's own `required` does the announcing. */
.field__required {
    margin-left: .375rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--text-light);
    text-transform: none;
}

.field__hint {
    font-size: var(--t-micro);
    color: var(--text-light);
}

.field input,
.field textarea,
.field select {
    padding: .8125rem .875rem;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: var(--t-small);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--text-light);
}

.field input:hover,
.field textarea:hover,
.field select:hover {
    border-color: #d5cec1;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-soft);
}

.field--error input,
.field--error textarea {
    border-color: var(--red);
}

.field__error {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--t-micro);
    font-weight: 600;
    color: var(--red);
}

.field__error::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red);
    flex: none;
}

/* --- 7.14 Images & media ------------------------------------------------
   Every photograph declares its real pixel size so the page cannot shift as
   it loads, and ships WebP with a JPEG fallback. */

.media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--cream-2);
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Two ratios, because the site has two places to put a photograph. A square
   or a 16:9 crop would have nowhere to sit. */
.media--portrait {
    aspect-ratio: 1 / 1.05;
}

.media--landscape {
    aspect-ratio: 4 / 3;
}

.media--hero {
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .3);
}

.mediarow {
    display: grid;
    gap: var(--s5);
    margin-top: var(--s6);
}

@media (min-width: 40rem) {
    .mediarow {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* A photograph never stands alone on this site — it is always half of a pair
   with a column of text. There are two such pairings and no others. */
.medialayout {
    display: grid;
    gap: var(--s6);
    align-items: center;
}

@media (min-width: 48rem) {
    .medialayout--hero {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--s8);
    }

    .medialayout--row {
        grid-template-columns: 1fr 1fr;
        gap: var(--s8);
    }

    /* Consecutive service rows put the photograph on opposite sides. */
    .medialayout--flipped .medialayout__media {
        order: -1;
    }
}

.mediarow--pair {
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .mediarow--pair {
        grid-template-columns: 1fr 1fr;
    }
}

.fieldgroup {
    border: 0;
    padding: 0;
    margin: 0 0 var(--s6);
}

.fieldgroup legend {
    padding: 0 0 var(--s2);
    font-size: var(--t-nano);
    color: var(--text-light);
}

.mediarow figcaption {
    margin-top: var(--s3);
    font-size: var(--t-nano);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* --- 7.15 Links ---------------------------------------------------------- */

.prose a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: rgba(200, 16, 46, .35);
    transition: text-decoration-color .2s var(--ease);
}

.prose a:hover {
    text-decoration-color: var(--red);
}

.on-dark .prose a {
    color: var(--red);
    text-decoration-color: rgba(255, 107, 128, .4);
}

.link-external::after {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-left: .3125rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
}

/* --- 7.16 Icons ---------------------------------------------------------- */

.icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--red);
}

.icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.icon--lg {
    width: 2.625rem;
    height: 2.625rem;
}

.iconrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s6);
    align-items: flex-end;
}

.iconrow figcaption {
    margin-top: var(--s3);
    font-size: var(--t-nano);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
}

.logobox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s7);
    border: 1px dashed var(--rule);
    border-radius: var(--radius);
}

.logobox img {
    height: 46px;
    width: auto;
}

.logobox--dark {
    background: var(--charcoal);
    border-color: rgba(255, 255, 255, .18);
}

/* --- 7.17 Choice controls ------------------------------------------------ */

.choice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .5rem 0;
    cursor: pointer;
    font-size: var(--t-small);
}

.choice input {
    appearance: none;
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: .1875rem 0 0;
    background: #fff;
    border: 1px solid #c9c2b4;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .15s var(--ease), border-color .15s var(--ease);
}

.choice input[type="radio"] {
    border-radius: 50%;
}

.choice input:hover {
    border-color: var(--text-light);
}

.choice input:checked {
    background: var(--red);
    border-color: var(--red);
}

.choice input[type="checkbox"]:checked {
    background-image: var(--tick);
    background-size: .875rem;
    background-position: center;
    background-repeat: no-repeat;
}

.choice input[type="radio"]:checked {
    box-shadow: inset 0 0 0 3px #fff;
}

.choice input:disabled {
    background: var(--cream-2);
    border-color: var(--rule);
    cursor: not-allowed;
}

/* A switch is for something that takes effect immediately. A checkbox is for
   something that takes effect when the form is submitted. */
.switch {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--t-small);
    cursor: pointer;
}

.switch input {
    appearance: none;
    position: relative;
    flex: none;
    width: 2.5rem;
    height: 1.375rem;
    background: #c9c2b4;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s var(--ease);
}

.switch input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s var(--ease);
}

.switch input:checked {
    background: var(--red);
}

.switch input:checked::after {
    transform: translateX(1.125rem);
}

/* --- 7.18 Accordion ------------------------------------------------------ */

.faq {
    border-top: 1px solid var(--rule);
}

.faq details {
    border-bottom: 1px solid var(--rule);
}

.faq summary {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
    padding: var(--s5) 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: color .2s var(--ease);
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary:hover {
    color: var(--red);
}

.faq summary::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    margin-top: .5rem;
    border-left: 6px solid var(--red);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform .2s var(--ease);
}

.faq details[open] summary::before {
    transform: rotate(90deg);
}

.faq__body {
    padding: 0 0 var(--s5) 2.125rem;
    max-width: 68ch;
    font-size: var(--t-small);
    line-height: 1.65;
    color: var(--text-muted);
}

/* --- 7.19 Notices -------------------------------------------------------- */

.notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s4);
    padding: var(--s5);
    border: 1px solid var(--rule);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--cream-2);
}

.notice__mark {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: .125rem;
    border-radius: 50%;
    background: var(--text-light);
}

.notice__title {
    font-size: var(--t-small);
    font-weight: 700;
    letter-spacing: -.01em;
}

.notice__body {
    margin-top: .25rem;
    max-width: 66ch;
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--text-muted);
}

.notice--action {
    border-left-color: var(--red);
    background: var(--red-soft);
}

.notice--action .notice__mark {
    background: var(--red);
}

/* --- 7.20 Data table ----------------------------------------------------- */

.datatable-scroll {
    overflow-x: auto;
}

.datatable {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: var(--t-small);
}

.datatable caption {
    margin-bottom: var(--s4);
    text-align: left;
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-light);
}

.datatable th,
.datatable td {
    padding: var(--s3) var(--s4);
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.datatable thead th {
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-light);
    border-bottom-color: var(--text-light);
}

.datatable tbody th {
    font-weight: 600;
}

.datatable td:first-child,
.datatable th:first-child {
    padding-left: 0;
}

.datatable [data-num] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- 7.21 Quote ---------------------------------------------------------- */

.quote {
    margin: 0;
    max-width: 60ch;
    padding-left: var(--s5);
    border-left: 2px solid var(--red);
}

.quote p {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -.015em;
}

.quote footer {
    margin-top: var(--s4);
    font-size: var(--t-micro);
    color: var(--text-muted);
}

.quote footer b {
    display: block;
    font-weight: 600;
    color: var(--text);
}

.on-dark .quote {
    border-left-color: var(--red);
}

.on-dark .quote footer b {
    color: #fff;
}

/* --- 7.22 Empty & loading ------------------------------------------------ */

.empty {
    padding: var(--s8) var(--s5);
    text-align: center;
    border: 1px dashed var(--rule);
    border-radius: var(--radius);
}

.empty__title {
    font-size: 1.0625rem;
    font-weight: 600;
}

.empty__body {
    margin: var(--s2) auto 0;
    max-width: 44ch;
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--text-muted);
}

.empty .btn {
    margin-top: var(--s5);
}

.skeleton {
    background: linear-gradient(90deg, var(--cream-2) 0%, #ece7dd 50%, var(--cream-2) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius);
    animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

.skeleton--line {
    height: .75rem;
    margin-bottom: .625rem;
}

.skeleton--media {
    aspect-ratio: 4 / 3;
    margin-bottom: var(--s4);
}

/* Body copy inherits the dark ground's ink. */
.on-dark .scale-body,
.on-dark .scale-small,
.on-dark .scale-lead {
    color: rgba(255, 255, 255, .85);
}

.on-dark .scale-h2,
.on-dark .scale-h3,
.on-dark .scale-h4,
.on-dark .capindex__name,
.on-dark .svc-three__name {
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
    }
}

/* ==========================================================================
   7.24 SECTIONS
   Whole page-sections assembled from the components above. These are layout
   proposals: the copy in them is placeholder Latin on purpose, so nobody
   reads a specimen as approved wording.
   ========================================================================== */

.sec {
    padding: var(--s8) var(--s6);
    background: var(--cream);
}

.sec__inner {
    max-width: 60rem;
    margin: 0 auto;
}

.sec--white {
    background: #fff;
}

.sec--tint {
    background: var(--cream-2);
}

.sec--dark {
    background: var(--charcoal);
    color: rgba(255, 255, 255, .85);
}

.sec--tight {
    padding-block: var(--s7);
}

.sec--center {
    text-align: center;
}

.sec--center .sec__inner > * {
    margin-inline: auto;
}

/* Label stuck to the top-left of each specimen so variants stay tellable
   apart when several sit in a row. */
.variant {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    padding: var(--s3) var(--s5);
    border-bottom: 1px solid var(--rule);
    background: var(--cream);
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-light);
}

.variant b {
    color: var(--red);
    font-variant-numeric: tabular-nums;
}

.variant span {
    margin-left: auto;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: none;
}

/* Placeholder copy is dimmed a shade so it reads as filler at a glance. */
.lorem {
    color: var(--text-muted);
}

.sec--dark .lorem {
    color: rgba(255, 255, 255, .6);
}

/* --- Navigation variants -------------------------------------------------- */

.nav-demo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
    padding: var(--s4) var(--s6);
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
}

.nav-demo--dark {
    background: var(--charcoal);
    border-bottom-color: rgba(255, 255, 255, .12);
}

.nav-demo--dark .navlink {
    color: rgba(255, 255, 255, .85);
}

.nav-demo--stack {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s4);
}

.nav-demo__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
}

.nav-demo__util {
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-nano);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
}

.nav-demo__links {
    display: flex;
    align-items: center;
    gap: var(--s5);
}

/* --- Hero variants -------------------------------------------------------- */

.hero-split {
    display: grid;
    gap: var(--s6);
    align-items: center;
}

@media (min-width: 48rem) {
    .hero-split {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--s8);
    }
}

.hero-stack {
    max-width: 34ch;
}

.sec--center .hero-stack {
    max-width: 26ch;
}

/* Beside a photograph or a form the column is narrow enough that the
   accent phrase would otherwise split across two lines. Cap the measure so
   the break lands after the full stop, where the sentence wants it. Over a
   photograph the same cap keeps the heading inside the heavy end of the
   wash at every width. */
.hero-split .hero-stack,
.hero-call .hero-stack,
.hero-photo .hero-stack {
    max-width: 15ch;
}

/* 28d / 28e — the photograph is the ground. It stays a real <img> (declared
   size, WebP, alt) rather than a CSS background, so plate 19's rules still
   hold. This is the one full-bleed photograph the system allows.

   Legibility is not left to a gradient guessed in viewport percentages. The
   words' column draws its own ground — solid behind every line, fading out
   over 16rem on the photograph's side, running to the viewport edge on the
   other — so the type sits on flat cream (or flat charcoal) at every width,
   and the photograph is allowed to be a photograph. A faint, even veil over
   the whole picture sits it back a step; it does no contrast work. */
.hero-photo {
    position: relative;
    display: grid;
    overflow: hidden;
    background: var(--charcoal);
    color: rgba(255, 255, 255, .85);
}

/* Below 64rem the words come first and the picture follows — the same
   text-first rule every pairing in the system obeys, a step earlier than the
   other arrangements because a photograph that is the ground needs the
   room; on a tablet the words' own ground would cover it. */
.hero-photo__media {
    position: relative;
    order: 1;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.hero-photo__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-photo__body {
    padding: var(--s8) var(--s6);
}

/* The words' column. */
.hero-photo__col {
    position: relative;
    max-width: 34rem;
}

@media (min-width: 64rem) {
    .hero-photo {
        min-height: clamp(32rem, 64vh, 40rem);
    }

    .hero-photo__media {
        position: absolute;
        inset: 0;
        order: 0;
        aspect-ratio: auto;
    }

    .hero-photo__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(26, 26, 26, .25);
    }

    .hero-photo__body {
        position: relative;
        z-index: 1;
        align-self: center;
        width: 100%;
        padding: var(--s9) var(--s6);
    }

    /* The column's ground. Stops are measured from the column's own edge,
       so it holds at every width and every measure. */
    .hero-photo__col {
        isolation: isolate;
    }

    .hero-photo__col::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -50rem;
        bottom: -50rem;
        left: -100vw;
        right: -20rem;
        background: linear-gradient(270deg,
                rgba(26, 26, 26, 0) 0,
                rgba(26, 26, 26, .6) 8rem,
                var(--charcoal) 18rem,
                var(--charcoal) 100%);
    }
}

/* 28e — same photograph, cream ground, ordinary light-ground ink. */
.hero-photo--light {
    background: var(--cream);
    color: var(--text);
}

@media (min-width: 64rem) {
    .hero-photo--light .hero-photo__media::after {
        background: rgba(250, 247, 242, .18);
    }

    .hero-photo--light .hero-photo__col::before {
        background: linear-gradient(270deg,
                rgba(250, 247, 242, 0) 0,
                rgba(250, 247, 242, .6) 8rem,
                var(--cream) 18rem,
                var(--cream) 100%);
    }
}

/* The words can sit on either side. --end puts them on the right and
   turns the ground around with them, for a photograph whose subject is on
   the left. */
@media (min-width: 64rem) {
    .hero-photo--end .hero-photo__body .sec__inner {
        display: flex;
        justify-content: flex-end;
    }

    .hero-photo--end .hero-photo__col::before {
        left: -20rem;
        right: -100vw;
        background: linear-gradient(90deg,
                rgba(26, 26, 26, 0) 0,
                rgba(26, 26, 26, .6) 8rem,
                var(--charcoal) 18rem,
                var(--charcoal) 100%);
    }

    .hero-photo--light.hero-photo--end .hero-photo__col::before {
        background: linear-gradient(90deg,
                rgba(250, 247, 242, 0) 0,
                rgba(250, 247, 242, .6) 8rem,
                var(--cream) 18rem,
                var(--cream) 100%);
    }
}

/* Microcopy under a hero button — the one sentence that answers "but do I
   need a referral?" before it becomes a reason not to call. */
.hero-fine {
    margin-top: var(--s4);
    max-width: 44ch;
    font-size: var(--t-micro);
    line-height: 1.6;
    color: var(--text-muted);
}

.on-dark .hero-fine {
    color: rgba(255, 255, 255, .65);
}

/* 28f — a call-back form beside the words. Not a card: the white inputs
   draw the region themselves and one hairline marks where it begins. */
.hero-form {
    padding-top: var(--s5);
    border-top: 1px solid var(--rule);
}

.hero-form__intro {
    margin: var(--s2) 0 var(--s5);
    max-width: 40ch;
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--text-muted);
}

/* 28g — the number is the button, so it takes the button's red and the
   button's job. The heading keeps its size and gives up its accent. */
.hero-call {
    display: grid;
    gap: var(--s6);
}

@media (min-width: 48rem) {
    .hero-call {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--s8);
        align-items: end;
    }
}

.hero-call__number {
    display: inline-block;
    margin-top: var(--s3);
    font-size: clamp(2.5rem, 4.5vw, 3.5rem);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--red);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: color .25s var(--ease);
}

.hero-call__number:hover {
    color: var(--red-dark);
}

.hero-call__meta {
    margin-top: var(--s3);
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--text-muted);
}

.on-dark .hero-call__number {
    color: var(--red);
}

.on-dark .hero-call__number:hover {
    color: #fff;
}

.on-dark .hero-call__meta {
    color: rgba(255, 255, 255, .65);
}

/* --- Fact bar ----------------------------------------------------------
   The light-ground twin of the statistic band, for facts that are words
   rather than figures — "no contrast" has no number to lead with. Label on
   top, fact underneath, hairlines between. Two-up on a phone. */
.factbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--rule);
    border-block: 1px solid var(--rule);
}

@media (min-width: 48rem) {
    .factbar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.factbar__cell {
    padding: var(--s5) var(--s5);
    background: var(--cream);
}

.sec--white .factbar__cell {
    background: #fff;
}

.factbar__label {
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-light);
}

.factbar__fact {
    margin-top: .375rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.3;
}

/* --- Reasons grid -------------------------------------------------------
   Four short reasons, side by side, no numbers — order carries nothing
   here, so nothing implies one. Same hairline grid as the three-across
   services cells. */
.reasons {
    display: grid;
    gap: 1px;
    background: var(--rule);
    border-block: 1px solid var(--rule);
}

@media (min-width: 40rem) {
    .reasons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .reasons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.reasons__cell {
    padding: var(--s6) var(--s5);
    background: var(--cream);
}

.sec--white .reasons__cell {
    background: #fff;
}

.reasons__name {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.reasons__desc {
    margin-top: var(--s2);
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--text-muted);
}

/* --- Rating ------------------------------------------------------------
   Five stars and the word Google. The review count is deliberately absent;
   it goes on once it is large enough to help. */
.rating {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s3) var(--s4);
}

.rating__stars {
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--red);
}

.rating__label {
    font-size: var(--t-small);
    font-weight: 600;
}

.rating__label small {
    display: block;
    font-size: var(--t-micro);
    font-weight: 400;
    color: var(--text-muted);
}

.on-dark .rating__stars {
    color: var(--red);
}

/* --- Services variants ---------------------------------------------------- */

.svc-three {
    display: grid;
    gap: 1px;
    background: var(--rule);
    border-block: 1px solid var(--rule);
}

@media (min-width: 44rem) {
    .svc-three {
        grid-template-columns: repeat(3, 1fr);
    }
}

.svc-three__cell {
    padding: var(--s6) var(--s5);
    background: var(--cream);
}

.sec--white .svc-three__cell {
    background: #fff;
}

.svc-three__no {
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}

.svc-three__name {
    margin-top: var(--s3);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -.01em;
}

/* --- CTA variants --------------------------------------------------------- */

.cta-split {
    display: grid;
    gap: var(--s5);
    align-items: center;
}

@media (min-width: 44rem) {
    .cta-split {
        grid-template-columns: 1.4fr auto;
        gap: var(--s8);
    }
}

.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
}

/* --- Referrer / practical-detail blocks ----------------------------------- */

/* The light-ground twin of .panel__subhead. */
.subhead {
    font-size: var(--t-nano);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* An address is a semantic element, not an italic one. */
address {
    font-style: normal;
}

.duo {
    display: grid;
    gap: var(--s6);
}

@media (min-width: 48rem) {
    .duo {
        grid-template-columns: 1.3fr 1fr;
        gap: var(--s8);
    }

    /* A short heading beside a long list — questions, reviews. The list
       takes the room; the heading keeps it company from the left. Two of
       these stacked on one ground share a column line. */
    .duo--aside {
        grid-template-columns: 1fr 1.6fr;
        align-items: start;
    }
}

.trio {
    display: grid;
    gap: var(--s6);
}

@media (min-width: 44rem) {
    .trio {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s7);
    }
}

/* A labelled fact — fax number, hours, parking. The label is the small tracked
   thing; the fact is what the eye should land on. */
.facts {
    border-top: 1px solid var(--rule);
}

.facts div {
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--rule);
}

.facts dt {
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-light);
}

.facts dd {
    margin: .25rem 0 0;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.facts dd small {
    display: block;
    margin-top: .125rem;
    font-size: var(--t-micro);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
}

.on-dark .facts {
    border-top-color: var(--rule-dark);
}

.on-dark .facts div {
    border-bottom-color: var(--rule-dark);
}

.on-dark .facts dt {
    color: rgba(255, 255, 255, .5);
}

.on-dark .facts dd {
    color: #fff;
}

.on-dark .facts dd small {
    color: rgba(255, 255, 255, .6);
}

/* Opening hours. Days left, times right, closed days muted rather than hidden
   — "we are shut on Sunday" is information a patient needs. */
.hours {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-small);
}

.hours th,
.hours td {
    padding: .4375rem 0;
    text-align: left;
    border-bottom: 1px solid var(--rule);
}

.hours th {
    font-weight: 500;
}

.hours td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.hours [data-closed] {
    color: var(--text-light);
}

/* Stand-in for a map. Deliberately not an embed: a third-party map frame ships
   the visitor's IP to another company before they have agreed to anything. */
.mapslot {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: var(--s5);
    border: 1px dashed var(--rule);
    border-radius: var(--radius);
    background: var(--cream-2);
    text-align: center;
    font-size: var(--t-micro);
    color: var(--text-light);
}

/* Filled state: a stitched OpenStreetMap image, served from our own host. */
.mapslot--filled {
    position: relative;
    padding: 0;
    border-style: solid;
    overflow: hidden;
}

.mapslot--filled picture,
.mapslot--filled img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mapslot__credit {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: var(--s1) var(--s2);
    background: rgba(250, 247, 242, .85);
    border-top-left-radius: var(--radius);
    font-size: var(--t-nano);
    color: var(--text-muted);
}

.mapslot__credit a {
    color: inherit;
}

/* --- Wrong / right pairs --------------------------------------------------
   The fastest way to teach a rule is to show it broken beside it kept. */

.vs {
    display: grid;
    gap: 1px;
    margin-top: var(--s5);
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

@media (min-width: 44rem) {
    .vs {
        grid-template-columns: 1fr 1fr;
    }
}

.vs__cell {
    padding: var(--s6);
    background: #fff;
}

.vs__cell--dark {
    background: var(--charcoal);
    color: rgba(255, 255, 255, .85);
}

.vs__tag {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--s5);
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.vs__tag::before {
    content: "";
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    flex: none;
}

.vs__tag--no {
    color: var(--red);
}

.vs__tag--no::before {
    background: var(--red);
}

.vs__tag--yes {
    color: #1c6b3f;
}

.vs__tag--yes::before {
    background: #1c6b3f;
}

.vs__cell--dark .vs__tag--yes {
    color: #6ec89a;
}

.vs__cell--dark .vs__tag--yes::before {
    background: #6ec89a;
}

/* The two halves of the card demonstration in Plate 42. */
.dont-card {
    padding: var(--s5);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--cream-2);
}

.do-rule {
    padding-top: var(--s5);
    border-top: 1px solid var(--rule);
}

.vs__sample {
    font-size: 1.0625rem;
    font-weight: 600;
}

.vs__sample--bad {
    color: var(--red);
}

.vs__sample--good {
    color: var(--red);
}

/* The plate-41 contrast demo shows the red spent on a figure, at figure size. */
.vs__sample--fig {
    font-size: 2.25rem;
    font-weight: 200;
    letter-spacing: -.02em;
}

.vs__why {
    margin-top: var(--s5);
    font-size: var(--t-micro);
    line-height: 1.6;
    color: var(--text-light);
}

.vs__cell--dark .vs__why {
    color: rgba(255, 255, 255, .55);
}

/* --- State matrix ---------------------------------------------------------
   :hover cannot be forced for a screenshot, so each state is also reachable
   by class. The class and the real pseudo-class share one declaration, so
   they can never drift apart. */

.states {
    display: grid;
    gap: var(--s5);
    margin-top: var(--s5);
}

@media (min-width: 40rem) {
    .states {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }
}

.states figcaption {
    margin-top: var(--s3);
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-light);
}

.btn--primary.is-hover {
    background: var(--red-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(200, 16, 46, .5);
}

.btn--secondary.is-hover {
    background: var(--charcoal);
    color: var(--cream);
    transform: translateY(-1px);
}

.btn--ghost.is-hover {
    color: var(--red);
}

.btn--ghost.is-hover::after {
    width: 100%;
}

.btn.is-focus {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

.btn--primary.is-active {
    background: var(--red-dark);
    transform: translateY(0);
    box-shadow: none;
}

.field input.is-hover {
    border-color: #d5cec1;
}

.field input.is-focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-soft);
}

/* --- Phone frame ----------------------------------------------------------
   A real 375px container. The components inside answer to the container's
   width, not the browser's, so this reflows for real rather than pretending. */

.phone {
    width: 375px;
    max-width: 100%;
    margin-top: var(--s5);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    container-type: inline-size;
}

.phone__bar {
    padding: .5rem var(--s4);
    background: var(--cream-2);
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-nano);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-light);
    text-align: center;
}

@container (max-width: 420px) {

    .medialayout--hero,
    .medialayout--row,
    .hero-split,
    .hero-call,
    .duo,
    .trio,
    .cta-split,
    .capindex li,
    .steps,
    .panel__split {
        grid-template-columns: 1fr;
    }

    .steps::before {
        display: none;
    }

    /* In the phone frame the band goes two-up; the media queries above
       still see a wide viewport, so the borders are restated for a grid. */
    .statband {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
    }

    .statband .statband__cell {
        border-top: 1px solid var(--rule-dark);
        border-left: 1px solid var(--rule-dark);
    }

    .statband .statband__cell:nth-child(-n+2) {
        border-top: 0;
    }

    .statband .statband__cell:nth-child(odd) {
        border-left: 0;
    }

    .factbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reasons,
    .steps--six {
        grid-template-columns: 1fr;
    }

    .steps--six::before {
        display: none;
    }

    .medialayout--flipped .medialayout__media {
        order: 0;
    }

    .sec {
        padding: var(--s6) var(--s5);
    }

    .cta-band {
        flex-direction: column;
        align-items: flex-start;
    }

    /* The photographic hero stacks, words first, exactly as it does below
       768px in a real viewport. */
    .hero-photo {
        min-height: 0;
    }

    .hero-photo__media {
        position: relative;
        inset: auto;
        order: 1;
        aspect-ratio: 3 / 2;
    }

    .hero-photo__media::after,
    .hero-photo__col::before {
        display: none;
    }

    .hero-photo__body {
        padding: var(--s6) var(--s5);
    }
}

/* --- Copy stress test ------------------------------------------------------ */

.stress {
    border-top: 1px solid var(--rule);
}

.stress > div {
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--rule);
}

.stress__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    margin-bottom: var(--s3);
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-light);
}

.stress__meta b {
    color: var(--red);
    font-variant-numeric: tabular-nums;
}

.stress__verdict {
    margin-top: var(--s3);
    font-size: var(--t-micro);
    line-height: 1.6;
    color: var(--text-muted);
}

/* --- Page map ------------------------------------------------------------- */

.pagemap {
    display: grid;
    gap: 2px;
}

.pagemap__band {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: 0 var(--s4);
    border-radius: 2px;
    font-size: var(--t-nano);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pagemap__band b {
    font-variant-numeric: tabular-nums;
    opacity: .55;
}

.pagemap__band span {
    margin-left: auto;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: none;
    opacity: .7;
}

.band--cream {
    background: var(--cream);
    border: 1px solid var(--rule);
    color: var(--text);
}

.band--white {
    background: #fff;
    border: 1px solid var(--rule);
    color: var(--text);
}

.band--tint {
    background: var(--cream-2);
    border: 1px solid var(--rule);
    color: var(--text);
}

.band--dark {
    background: var(--charcoal);
    color: #fff;
}

/* --- Footer variants ------------------------------------------------------ */

.foot-cols {
    display: grid;
    gap: var(--s6);
}

@media (min-width: 44rem) {
    .foot-cols {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: var(--s8);
    }
}

/* A column label, not a document heading — the kit's outline stays h1 + h2s. */
.foot-cols__label {
    margin-bottom: var(--s3);
    font-size: var(--t-nano);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.foot-cols li {
    padding: .25rem 0;
    font-size: var(--t-micro);
    color: rgba(255, 255, 255, .65);
}

.foot-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s4);
    margin-top: var(--s7);
    padding-top: var(--s5);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--t-micro);
    color: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   7.25 Kit-page helpers

   Styling that used to sit in inline style attributes. Inline styling still
   survives in exactly one situation on this page: where the value IS the
   thing being documented — a swatch's color, a contrast pair, a font weight,
   the width of a spacing bar. Those are data. Everything else lives here.
   -------------------------------------------------------------------------- */

/* Vertical rhythm between a plate's sub-topics. */
.u-gap-top {
    margin-top: var(--s6);
}

.u-gap-top-lg {
    margin-top: var(--s7);
}

/* Between a section's heading and a composition that needs air — the
   steps, a gallery. */
.u-gap-top-xl {
    margin-top: var(--s9);
}

.u-center {
    text-align: center;
}

/* Measures. Named for intent, not for their number. */
.u-measure-head {
    max-width: 18ch;
}

.u-measure-lead {
    max-width: 52ch;
}

.u-measure-list {
    max-width: 34rem;
}

.u-measure-form {
    max-width: 32rem;
}

.masthead__intro--fine {
    margin-top: var(--s4);
    font-size: var(--t-small);
}

/* Second row of buttons in a specimen spaces itself. */
.btnrow + .btnrow {
    margin-top: var(--s7);
}

/* A control that drives the specimen above it. */
.demo-control {
    margin-top: var(--s4);
}

/* Plate 03b — radius comparison. The radius is the data and stays inline;
   everything around it is identical across the three and belongs here. */
.radius-demo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 3rem;
    background: var(--cream-2);
    border: 1px solid var(--rule);
    font-size: var(--t-micro);
    letter-spacing: .1em;
}

.radius-demo--wrong {
    color: var(--text-light);
}

/* Plates 02 and 09 — reproductions of what the live site does today. The
   Helvetica stack is deliberate: it is the defect being illustrated. */
.legacy {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.legacy-display {
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.03em;
}

.legacy-display em {
    font-weight: 300;
    font-style: italic;
    color: var(--red);
}

.legacy-card__title {
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.25;
}

.legacy-card__body {
    margin-top: var(--s3);
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--text-muted);
}

.legacy-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--s5);
    color: var(--red);
}

.legacy-card__icon svg {
    width: 100%;
    height: 100%;
}

/* The proposed display heading shown at comparison scale. */
.display--compare {
    font-size: 2.25rem;
}

/* Plate 12b stacks its protocols instead of splitting into two columns. */
.panel__split--stacked {
    display: block;
}

/* Plate 15 — the logo inside the header specimen. */
.siteheader__logo {
    height: 36px;
    width: auto;
}

/* --------------------------------------------------------------------------
   8. Motion policy — everything above is transform/opacity only, and all of
   it stops here.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .btn:hover,
    .btn:hover svg {
        transform: none;
    }
}

@media print {
    .rail,
    .skip,
    details.code {
        display: none;
    }

    .plate {
        break-inside: avoid;
    }
}