/* Longevity List components. Values come from tokens.css; no colour is written here. Rules: DESIGN-SYSTEM.md. */

/* base */
* { box-sizing: border-box; margin: 0; }
body { font-family: var(--font); font-weight: 400; font-size: var(--size-body); line-height: 1.45; letter-spacing: var(--track-body); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, th, strong, b { font-weight: 400; }
.wrap { padding: 0 var(--gutter); }

/* type helpers */
.t30 { font-size: var(--size-figure); line-height: 1.05; letter-spacing: var(--track-tight); }
.t12 { font-size: var(--size-note); line-height: 1.2; letter-spacing: -.008em; }
.dim { color: var(--ink-60); }
.arrow::after { content: " \2192"; color: var(--amber); }

/* section rhythm */
.gap { margin-top: var(--section); }

/* glass: over the home hero sky only */
.glass { position: relative; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-shine), 0 18px 40px -22px var(--glass-shadow); border-radius: var(--radius); }

/* header: a glass bar on the sky */
.header { position: relative; z-index: 2; margin: 20px var(--gutter) 0; height: 56px; padding: 0 12px 0 20px; display: flex; align-items: center; justify-content: space-between; }
.header .name { font-size: 18px; letter-spacing: var(--track-tight); }
.header nav { display: flex; gap: 4px; }
.header nav a { padding: 8px 14px; border-radius: var(--radius-sm); }
.header nav a:hover { background: var(--glass-hover); }
.header nav a[aria-current] { box-shadow: inset 0 -1px 0 var(--amber); border-radius: 0; }
.menu { display: none; font: inherit; background: none; border: 0; padding: 0 8px; }
@media (max-width: 800px) { .header { margin: 12px 12px 0; } .header nav { display: none; } .menu { display: block; } }
/* the phone menu: site.js toggles .open; the bar grows and the links stack inside it */
@media (max-width: 800px) {
  .header.open { height: auto; flex-wrap: wrap; padding-top: 14px; padding-bottom: 8px; }
  .header.open nav { display: flex; flex-direction: column; flex-basis: 100%; order: 3; padding-top: 8px; }
  .header.open nav a { padding: 12px 0; align-self: flex-start; }
}

/* home search results: written by site.js under the search box, on the hero sky */
.results { margin-top: 8px; max-width: 600px; padding: 8px; }
.results[hidden] { display: none; }
.results a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); }
.results a:hover, .results a:focus-visible { background: var(--glass-hover); }
.results .kind { display: block; color: var(--ink-60); font-size: 14px; }
.results p { margin: 0; padding: 10px 14px; }

/* hero: the picture is the section */
.hero { position: relative; height: 100vh; min-height: 600px; max-height: 980px; overflow: hidden; display: flex; flex-direction: column; }
.hero .copy { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 72px; max-width: calc(760px + var(--gutter)); }
.hero h1 { font-size: var(--size-hero); line-height: 1.02; letter-spacing: -.045em; }
.hero h1 span { display: block; color: var(--ink-on-sky); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; letter-spacing: -.025em; margin-top: 16px; max-width: 34ch; }

/* search: glass field with a solid button */
.search { margin-top: 28px; display: flex; max-width: 600px; padding: 6px; }
.search input { flex: 1; min-width: 0; height: var(--control); border: 0; background: transparent; font: inherit; padding: 0 14px; color: var(--ink); }
.search input::placeholder { color: var(--ink-60); }
.search input:focus { outline: none; }
.search:focus-within { box-shadow: inset 0 1px 0 var(--glass-shine), 0 0 0 2px var(--ink); }
.search .btn { border-radius: var(--radius-sm); padding: 0 24px; }

/* buttons: two kinds only */
.btn { height: var(--control); padding: 0 24px 0 18px; display: inline-flex; align-items: center; gap: 12px; font: inherit; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.btn--solid { background: var(--ink); color: var(--on-ink); }
.btn--solid:hover { background: var(--ink-hover); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--line-hover); }

/* scene host (drawn by ../scenes.js). Its movement lives in motion.css */
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene svg { width: 100%; height: 100%; display: block; }

/* section marker (Neko): one per section, nowhere else */
.marker { display: flex; align-items: center; gap: 16px; padding: 0 0 22px; margin-bottom: 40px; border-bottom: 1px solid var(--rule); font-size: var(--size-marker); letter-spacing: var(--track-marker); text-transform: uppercase; line-height: 1; }
.marker::before { content: ""; width: 16px; height: 16px; border-radius: 4px; background: var(--ink); flex: none; }

/* count tiles: one tint, 8px apart */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-tile); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* the home page's three figures; one column on a phone, as .grid */
.grid--3 .count { font-size: 56px; white-space: nowrap; }  /* "4.6 times" on one line in a third of the page */
.cell .src { margin-top: auto; padding-top: 24px; color: var(--ink-60); }
.cell { padding: 40px 40px 36px; border-radius: var(--radius); min-height: 260px; display: flex; flex-direction: column; background: var(--tile); }
.cell .count { font-size: var(--size-count); line-height: 1; letter-spacing: -.05em; margin-bottom: 24px; }
.cell p { margin-top: 8px; max-width: 40ch; }
.cell .links { margin-top: auto; padding-top: 32px; display: flex; gap: 28px; flex-wrap: wrap; }
.cell .links a:hover { color: var(--ink-60); }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } .cell { padding: 28px 24px; min-height: 0; } .cell .count { font-size: 56px; } }

/* picture band: a scene with a two tone headline */
.band { position: relative; height: 640px; overflow: hidden; margin-top: var(--section); }
.band .copy { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 64px; max-width: calc(560px + var(--gutter)); }
.band h2 { font-size: var(--size-figure); line-height: 1.05; letter-spacing: var(--track-tight); }
.band h2 span { display: block; color: var(--ink-60); }
.band .btn { margin-top: 28px; align-self: flex-start; }
@media (max-width: 800px) { .band { height: 520px; } }

/* comparison: Polestar's specification table. Grey label over black value in every cell */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; table-layout: fixed; }
thead th { position: sticky; top: 0; background: var(--ground); text-align: left; font-size: var(--size-body); padding: 0 var(--pad-cell) var(--pad-cell) 0; vertical-align: bottom; border-bottom: 1px solid var(--ink); }
thead th span { display: block; color: var(--ink-60); }
td { padding: var(--pad-cell) var(--pad-cell) var(--pad-cell) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td small { display: block; font-size: var(--size-body); color: var(--ink-60); margin-bottom: 2px; }
td .fig { font-size: var(--size-figure); line-height: 1; letter-spacing: var(--track-tight); }
sup { font-size: 10px; margin-left: 2px; color: var(--amber); }

/* comparison by provider (ruling 45): one block per provider. On a wide screen the blocks line up as the table's columns
   (subgrid, one row per fact); on a phone they follow one another, every fact in view, nothing sideways. Set --rows on .cmp */
.cmp { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-rows: repeat(var(--rows), auto); }
.cmp article { display: grid; grid-row: span var(--rows); grid-template-rows: subgrid; }
.cmp h3 { font-size: var(--size-body); padding: 0 var(--pad-cell) var(--pad-cell) 0; border-bottom: 1px solid var(--ink); display: flex; flex-direction: column; justify-content: flex-end; }
.cmp h3 span, .cmp small { display: block; color: var(--ink-60); }
.cmp small { font-size: var(--size-body); margin-bottom: 2px; }
.cmp .c { padding: var(--pad-cell) var(--pad-cell) var(--pad-cell) 0; border-bottom: 1px solid var(--rule); }
.cmp .fig { font-size: var(--size-figure); line-height: 1; letter-spacing: var(--track-tight); }
@media (max-width: 800px) {
  .cmp { grid-auto-flow: row; grid-template-rows: none; row-gap: 48px; }
  .cmp article { grid-row: auto; grid-template-rows: none; }
  .cmp h3 { font-size: var(--size-figure); line-height: 1.05; letter-spacing: var(--track-tight); padding: 0 0 16px; }
  .cmp h3 span { font-size: var(--size-body); letter-spacing: var(--track-body); margin-top: 6px; }
  .cmp .c { padding: 16px 0; }
}

/* body coverage chart: which part of the body a scan covers, from the provider's own words */
.body { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin: 10px 0 6px; max-width: 240px; }
.body i { height: 10px; background: var(--tile); border-radius: 2px; }
.body i.on { background: var(--amber); }
.body i.half { background: linear-gradient(90deg, var(--amber) 50%, var(--tile) 50%); }
.body-key { display: flex; justify-content: space-between; max-width: 240px; font-size: var(--size-note); color: var(--ink-60); }

/* caveat: an official statement placed next to the figures it qualifies */
.caveat { margin-top: 24px; padding: var(--pad-cell); background: var(--tile); border-radius: var(--radius); max-width: 760px; }

/* numbered notes */
.notes { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.notes ol { grid-column: 2; padding-left: 16px; display: grid; gap: 6px; color: var(--ink-60); }
.notes li::marker { color: var(--amber); }
@media (max-width: 800px) { .notes { grid-template-columns: 1fr; } .notes ol { grid-column: 1; } }

/* numbered walk with a sourced example */
.walk { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 0 0 24px; }
.walk h2 { font-size: var(--size-title); line-height: 1; letter-spacing: -.038em; }
.walk h2 span { display: block; color: var(--ink-60); }
.walk ol { list-style: none; padding: 0; margin-top: 40px; display: grid; counter-reset: s; }
.walk > ol { margin-top: 0; }  /* steps beside the heading, in the second column (home page) */
.walk li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; padding: 20px 0; border-top: 1px solid var(--rule); }
.walk li::before { content: counter(s); color: var(--amber); font-size: var(--size-figure); line-height: 1; letter-spacing: var(--track-tight); }
.example { background: var(--tile); border-radius: var(--radius); padding: 32px; align-self: end; }
.example .who { color: var(--ink-60); }
.example blockquote { font-size: var(--size-figure); line-height: 1.1; letter-spacing: var(--track-tight); margin: 16px 0 24px; }
.example .src { font-size: var(--size-note); color: var(--ink-60); padding-top: 16px; border-top: 1px solid var(--rule); }
@media (max-width: 800px) { .walk { grid-template-columns: 1fr; gap: 32px; } .walk h2 { font-size: 36px; } }

/* questions (Neko): tall hairline rows, plus in a soft square */
.faq h2 { font-size: var(--size-title); line-height: 1; letter-spacing: -.038em; margin-bottom: 40px; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 36px 0; font-size: var(--size-lead); letter-spacing: -.025em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; border-radius: 6px; background: var(--tile); display: grid; place-items: center; font-size: var(--size-lead); line-height: 1; color: var(--ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--ink-60); }
.faq .a { padding: 0 60px 36px 0; max-width: 70ch; }
.faq .a p + p { margin-top: 12px; }
.faq .src { font-size: var(--size-note); color: var(--ink-60); }
@media (max-width: 800px) { .faq h2 { font-size: 36px; } .faq summary { font-size: 18px; padding: 24px 0; } .faq .a { padding-right: 0; } }

/* footer (Neko): closing line on a white to ice gradient, then the sign and links */
.footer { position: relative; overflow: hidden; color: var(--ink); margin-top: var(--section); background: linear-gradient(180deg, var(--ground) 0%, var(--ice-1) 55%, var(--ice-2) 100%); }
.footer .close { text-align: center; padding: 160px 0 140px; }
.footer .kicker { font-size: var(--size-marker); letter-spacing: var(--track-marker); text-transform: uppercase; }
.footer .close h2 { font-size: var(--size-close); line-height: 1.05; letter-spacing: -.045em; margin: 28px auto 40px; max-width: 18ch; }
.footer .close .btn { margin: 0 auto; }
.footer .sign { display: flex; align-items: center; gap: 16px; font-size: var(--size-marker); letter-spacing: var(--track-marker); text-transform: uppercase; }
.footer .sign::before { content: ""; width: 16px; height: 16px; border-radius: 4px; background: var(--ink); flex: none; }
.footer .sign::after { content: ""; flex: 1; height: 1px; background: var(--ink); margin-left: 24px; }
.footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; }
.footer .cols ul { color: var(--ink-60); }
.footer ul { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 16px; }
.footer a:hover { color: var(--ink); }
.footer .legal { color: var(--ink-60); margin-top: 64px; max-width: 70ch; padding-bottom: 40px; }
@media (max-width: 800px) { .footer .cols { grid-template-columns: 1fr 1fr; } }

/* intro line under a marker */
.intro { color: var(--ink-60); margin-bottom: 40px; }

/* ---------- NEW 20 Oct 2026, from the first listing page (archive/page-listing-hooke.html, now generated as listings/hooke-london.html). Awaiting Si ---------- */

/* inner page header: the home header without glass, on white with a hairline (glass is for the sky only) */
.header--page { margin: 0; height: 72px; padding: 0 var(--gutter); border-bottom: 1px solid var(--rule); border-radius: 0; }
.header--page nav a:hover { background: var(--tile); }
@media (max-width: 800px) { .header--page { margin: 0; height: 60px; } }

/* breadcrumbs: grey, plain, a slash between */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink-60); padding-top: 32px; }
.crumbs a:hover { color: var(--ink); }
.crumbs a:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--rule); }

/* listing head: two tone title, then the summary strip (Polestar's label over value) */
.listing-head { padding: 48px 0 0; }
.listing-head h1 { font-size: var(--size-title); line-height: 1; letter-spacing: -.038em; max-width: 20ch; }
.listing-head h1 span { display: block; color: var(--ink-60); font-size: var(--size-lead); line-height: 1.3; letter-spacing: var(--track-tight); margin-top: 16px; max-width: 48ch; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; padding-top: var(--pad-cell); border-top: 1px solid var(--ink); }
.facts small { display: block; font-size: var(--size-body); color: var(--ink-60); margin-bottom: 2px; }
.facts .fig { font-size: var(--size-figure); line-height: 1.05; letter-spacing: var(--track-tight); }
.listing-head .actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.listing-head .checked { margin-top: 16px; }
@media (max-width: 800px) { .listing-head h1 { font-size: 36px; } .listing-head h1 span { font-size: var(--size-lead); } .facts { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* rail and content: a sticky list of the page's sections (Polestar's specifications page) */
.rail-layout { display: grid; grid-template-columns: 200px 1fr; gap: 64px; margin-top: var(--section); }
.rail { position: sticky; top: 32px; align-self: start; display: grid; gap: 10px; color: var(--ink-60); }
.rail a:hover { color: var(--ink); }
.rail-layout > div > section + section { margin-top: var(--section); }

/* section heading on inner pages (Polestar's specifications page; Si chose it over the marker, ruling 29). The marker is for the home page */
.sec { font-size: var(--size-figure); line-height: 1.05; letter-spacing: var(--track-tight); margin-bottom: 32px; }
.sec + .lede { margin-top: -20px; }
@media (max-width: 800px) { .rail-layout { grid-template-columns: 1fr; gap: 0; } .rail { display: none; } }

/* price list: every longevity service in full. Name and what it includes left, price right */
.prices { list-style: none; padding: 0; }
.prices li:first-child { padding-top: 0; }
.prices li { display: grid; grid-template-columns: 1fr auto; gap: 12px 48px; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.prices .name { font-size: var(--size-lead); letter-spacing: -.025em; }
.prices .price { font-size: var(--size-figure); line-height: 1.05; letter-spacing: var(--track-tight); text-align: right; grid-row: span 2; }
.prices .price small { display: block; font-size: var(--size-body); letter-spacing: var(--track-body); color: var(--ink-60); }
.prices .inc { max-width: 62ch; line-height: 1.55; }
@media (max-width: 800px) { .prices li { grid-template-columns: 1fr; } .prices .price { text-align: left; grid-row: auto; } }

/* spec rows: a grey label left, the fact right, a hairline between. Terms, registration, sites, sources */
.spec > div:first-child { padding-top: 0; }
.spec.spec--people dt { color: var(--ink); }  /* when the label is the subject (a doctor), it is ink */
.spec > div { display: grid; grid-template-columns: 220px 1fr; gap: 8px 32px; padding: var(--pad-cell) 0; border-bottom: 1px solid var(--rule); }
.spec dt { color: var(--ink-60); }
.spec dd { margin: 0; max-width: 62ch; line-height: 1.55; }
.spec dd a.arrow { white-space: nowrap; }
.spec dd a:not(.arrow) { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.spec dd + dd { grid-column: 2; }
@media (max-width: 800px) { .spec > div { grid-template-columns: 1fr; gap: 4px; } .spec dd + dd { grid-column: 1; } }

/* source line under a block of facts */
.src-line { font-size: var(--size-note); color: var(--ink-60); margin-top: 16px; }
.src-line a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.caveat .src-line { margin-top: 12px; }

/* sources differ: two sources side by side, each with its own page and date. No comment of our own */
.differ { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 24px; }
.differ > div { padding: 20px 24px 20px 0; }
.differ > div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.differ small { display: block; font-size: var(--size-body); color: var(--ink-60); margin-bottom: 2px; }
@media (max-width: 800px) { .differ { grid-template-columns: 1fr; } .differ > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }

/* overview (ruling 56): the first section of a listing, what the place is in one short paragraph at lead size, then spec rows at a glance */
.overview-lead { font-size: var(--size-lead); line-height: 1.4; letter-spacing: -.025em; max-width: 52ch; }

/* section intro on a listing, kept short */
.lede { max-width: 62ch; margin-bottom: 40px; color: var(--ink-60); }

/* ---------- NEW 20 Oct 2026, ruling 28: hierarchy on a listing. Awaiting Si's look ---------- */

/* before you book: a fixed set of factual checks, the same for every listing, shown first. Never a verdict */
.before { background: var(--tile); border-radius: var(--radius); padding: 40px 48px 24px; }
.before h2 { font-size: var(--size-figure); line-height: 1.05; letter-spacing: var(--track-tight); }
.before > p { color: var(--ink-60); margin-top: 4px; max-width: 60ch; }
.before ul { list-style: none; padding: 0; margin-top: 20px; }
.before li { display: grid; grid-template-columns: 1fr auto; gap: 4px 32px; padding: 20px 0; border-top: 1px solid var(--rule); }
.before li > span:first-child { max-width: 62ch; line-height: 1.55; }
.before li > a { white-space: nowrap; color: var(--ink-60); }
.before li > a:hover { color: var(--ink); }
.before .src-line { margin-top: 4px; grid-column: 1; }
@media (max-width: 800px) { .before { padding: 24px 20px 8px; } .before li { grid-template-columns: 1fr; } }

/* what the clinic tells you: the same questions for every clinic, stated or not stated. No count, no score */
.told { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.told li { display: grid; grid-template-columns: 20px 1fr; gap: 2px 12px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.told i { width: 14px; height: 14px; border-radius: 3px; margin-top: 5px; background: var(--ink); }
.told li.no i { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-60); }
.told .q { grid-column: 2; }
.told .ans { grid-column: 2; color: var(--ink-60); }
.told li.no .ans { color: var(--ink); }
.told-key { display: flex; gap: 24px; color: var(--ink-60); margin-bottom: 8px; }
.told-key span { display: inline-flex; align-items: center; gap: 8px; }
.told-key i { width: 12px; height: 12px; border-radius: 3px; background: var(--ink); }
.told-key i.no { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-60); }
@media (max-width: 800px) { .told { grid-template-columns: 1fr; } }

/* details: reference facts folded away under the questions rows, so the page's top half carries the weight */
.details details { border-top: 1px solid var(--rule); }
.details details:last-of-type { border-bottom: 1px solid var(--rule); }
.details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: var(--size-lead); letter-spacing: -.025em; cursor: pointer; }
.details summary::-webkit-details-marker { display: none; }
.details summary::after { content: "+"; flex: none; width: 36px; height: 36px; border-radius: 6px; background: var(--tile); display: grid; place-items: center; font-size: var(--size-lead); line-height: 1; }
.details details[open] summary::after { content: "\2212"; }
.details summary:hover { color: var(--ink-60); }
.details .body-in { padding: 0 0 32px; }

/* ---------- NEW 20 Oct 2026, ruling 33: the clinic listing answers the reader's questions. Awaiting Si ---------- */

/* coverage chart: what an assessment covers, in the same eight categories for every clinic.
   Filled amber = included, half = offered as a choice or add on, tint = not mentioned. The words sit underneath */
.cover { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.cover > div { display: grid; gap: 8px; }
.cover i { height: 12px; border-radius: 2px; background: var(--tile); }
.cover i.on { background: var(--amber); }
.cover i.opt { background: linear-gradient(90deg, var(--amber) 50%, var(--tile) 50%); }
.cover span { font-size: var(--size-note); color: var(--ink-60); line-height: 1.25; }
.cover-key { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; font-size: var(--size-note); color: var(--ink-60); }
.cover-key b { display: inline-block; width: 16px; height: 8px; border-radius: 2px; margin-right: 8px; background: var(--tile); vertical-align: middle; }
.cover-key b.on { background: var(--amber); }
.cover-key b.opt { background: linear-gradient(90deg, var(--amber) 50%, var(--tile) 50%); }
@media (max-width: 800px) { .cover { grid-template-columns: repeat(4, 1fr); row-gap: 16px; } }

/* price strip: where one price sits among similar ones. A hairline scale, a dot per provider, this one in amber.
   Positions are set inline as left:<percent>. It shows spread, never order of merit */
.strip { position: relative; height: 64px; margin: 8px 0 0; }
.strip::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--rule); }
.strip i { position: absolute; top: 19px; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: var(--ink-60); }
.strip i.this { width: 15px; height: 15px; margin-left: -7px; top: 17px; background: var(--amber); }
.strip .end { position: absolute; top: 40px; font-size: var(--size-note); color: var(--ink-60); }
.strip .end.max { right: 0; }
.strip-label { display: flex; justify-content: space-between; gap: 24px; }

/* comparison rows: similar clinics, one line each, price and coverage side by side */
.alts { list-style: none; padding: 0; }
.alts li { display: grid; grid-template-columns: 1fr 150px 240px; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.alts li:first-child { border-top: 1px solid var(--rule); }
.alts .who small { display: block; color: var(--ink-60); }
.alts .p { font-size: var(--size-lead); letter-spacing: -.025em; text-align: right; white-space: nowrap; }
.alts .cover { gap: 3px; }
.alts .cover i { height: 10px; }
@media (max-width: 800px) { .alts li { grid-template-columns: 1fr auto; } .alts .cover { grid-column: 1 / -1; } }

/* official voices: a professional body's own words, the body named first. Used for "is it worth it" */
.voices { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; }
.voices figure { margin: 0; padding-top: 24px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; }  /* no card (ruling 59): a hairline, the body named, its words */
.voices .who { color: var(--ink-60); }
.voices blockquote { font-size: var(--size-lead); line-height: 1.3; letter-spacing: -.025em; margin: 12px 0 20px; }
.voices .src-line { margin-top: auto; }
.voices > figure:only-child { grid-column: 1 / -1; }                 /* a lone voice fills the row (Si: "looks weird in the width it's in") */
.voices > figure:only-child blockquote { max-width: 34em; }          /* its quote held to a reading line */
@media (max-width: 800px) { .voices { grid-template-columns: 1fr; } }

/* coverage dot row (ruling 38, Si: "agree, 1"): what an assessment covers, one small dot per area, eight across.
   Same look as the comparison page's market table, so the two pages match. Ink included, half a choice, ring not mentioned. Not amber: amber dots read as a warning (Si: "Looks like 'no'", ruling 39) */
.dotrow { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 0; }
.dotrow > div { display: grid; justify-items: center; gap: 10px; text-align: center; }
.dotrow i { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.dotrow .opt i { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--ink); }
.dotrow .no i { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-60); }
.dotrow span { font-size: var(--size-note); color: var(--ink-60); }
.dotkey { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; font-size: var(--size-note); color: var(--ink-60); }
.dotkey span { display: inline-flex; align-items: center; gap: 6px; }
.dotkey b { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.dotkey b.opt { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--ink); }
.dotkey b.no { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-60); }
@media (max-width: 800px) { .dotrow { grid-template-columns: repeat(4, 1fr); row-gap: 18px; } }

/* ---------- NEW 21 Oct 2026, the comparison page (page-compare-london.html). Awaiting Si ---------- */

/* words for screen readers only */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* market table (ruling 36, idea D): every assessment in price order, a dot per area, a row opens to the clinic's words.
   The head sticks while you scroll, so a phone needs no sideways scroll: on a phone the dots drop under the name */
.market { border-top: 1px solid var(--ink); margin-top: 40px; }
.mhead, .mrow summary { display: grid; grid-template-columns: minmax(220px, 1.4fr) 130px 3fr; gap: 0 16px; align-items: center; }
.mhead { position: sticky; top: 0; z-index: 1; background: var(--ground); padding: 14px 0; border-bottom: 1px solid var(--rule); }
.mhead .d span { font-size: var(--size-note); color: var(--ink-60); text-align: center; line-height: 1.25; }
.mhead .sm { display: none; }
.market .d { display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; }
.mrow { border-bottom: 1px solid var(--rule); }
.mrow summary { list-style: none; padding: 12px 0; cursor: pointer; }
.mrow summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .mrow summary:hover .n { color: var(--ink-60); } }
.mrow .n small { display: block; color: var(--ink-60); }
.mrow .p { text-align: right; white-space: nowrap; }
.mrow .d i { justify-self: center; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-60); }  /* grey ring, as on the clinic page: the faint ring failed 3:1 (ruling 54) */
.mrow .d i.y { background: var(--ink); box-shadow: none; }
.mrow .d i.o { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--ink); }
.mrow[open] summary { padding-bottom: 8px; }
.mrow .more { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 16px 0 32px; }
.mrow .words { max-width: 62ch; line-height: 1.55; margin-top: 4px; }
.mrow .more .spec > div { grid-template-columns: 140px 1fr; padding: 12px 0; }
.mrow .go { margin-top: 20px; }
.mfoot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: baseline; }
.mfoot .dotkey b.no { box-shadow: inset 0 0 0 1px var(--ink-60); }
.mnone { padding: 32px 0; color: var(--ink-60); }
@media (max-width: 800px) {
  .mhead { grid-template-columns: 1fr; }
  .mhead .n, .mhead .p { display: none; }
  .mhead .lg { display: none; } .mhead .sm { display: inline; }
  .mrow summary { grid-template-columns: 1fr auto; row-gap: 14px; }
  .mrow .d { grid-column: 1 / -1; }
  .mrow .more { grid-template-columns: 1fr; gap: 24px; }
  .mrow .more .spec > div { grid-template-columns: 1fr; }
}

/* filters: plain toggles above the market table. Pressed is solid ink, like the main button */
.filters { display: grid; gap: 12px; margin-top: 48px; }
.fgroup { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: baseline; }
.fgroup > div { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle { height: 40px; padding: 0 16px; font: inherit; color: var(--ink); background: var(--ground); border: 0; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; }
.toggle:hover { box-shadow: inset 0 0 0 1px var(--line-hover); }
.toggle[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.linkbtn { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
@media (max-width: 800px) { .fgroup { grid-template-columns: 1fr; gap: 8px; } .toggle { height: 36px; padding: 0 12px; } .strip-label { flex-direction: column; gap: 2px; } }

/* the price strip across a whole market: no amber dot, since no one clinic is the subject. Filtered rows fade */
.strip--market i { background: var(--ink); }
.strip i.out { opacity: .15; }

/* comparison page head: no summary strip (the price chart carries the figures); one note line, and a draft tag while the data is a draft */
.head-note { color: var(--ink-60); max-width: 62ch; margin-top: 24px; }
.head-note + .head-note { margin-top: 8px; display: flex; gap: 12px; align-items: baseline; }
.tag { flex: none; display: inline-block; font-size: var(--size-note); line-height: 1; padding: 5px 8px; margin-right: 10px; border-radius: 4px; background: var(--tile); color: var(--ink); vertical-align: 2px; }

/* price distribution: dots in price bands on a linear scale from £0 (ruling 58). Drawn by the page's script; the table holds the same facts for screen readers */
.dist { margin: 72px 0 0; }
.dist figcaption { margin-bottom: 8px; }
.dist-plot { position: relative; }
.dist-plot > i { position: absolute; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); cursor: pointer; }
.dist-plot > i::before { content: ""; position: absolute; inset: -6px; }
.dist-plot > i:hover { outline: 1px solid var(--ink); outline-offset: 3px; }
.dist-plot > i.out { opacity: .15; }
.dist-mid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-60); }
.dist-mid span { position: absolute; top: 0; left: 8px; font-size: var(--size-note); color: var(--ink-60); white-space: nowrap; }
.dist-tip { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 10px)); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--ink); color: var(--on-ink); font-size: var(--size-note); white-space: nowrap; pointer-events: none; }
.dist-axis { position: relative; height: 28px; border-top: 1px solid var(--ink); }
.dist-axis span { position: absolute; top: 8px; transform: translateX(-50%); font-size: var(--size-note); color: var(--ink-60); }
.dist-axis span:first-child { transform: none; }

/* ---------- NEW 21 Oct 2026, ruling 41 (Si: "yep to glass accents and midday sky"). Colour and glass on inner pages ---------- */

/* sky head: an inner page opens on a still scene that is not the home sunrise (the comparison page: the pale midday sky, scene "tests").
   The glass header sits on it, as on the home page; the price chart sits on it in a glass panel */
.head-sky { position: relative; overflow: hidden; padding-bottom: 72px; }
.head-sky > *:not(.scene) { position: relative; z-index: 1; }
.head-sky .crumbs, .head-sky .crumbs a, .head-sky .head-note, .head-sky .listing-head h1 span { color: var(--ink-on-sky); }
.head-sky .crumbs a:hover { color: var(--ink); }
.dist-glass { margin-top: 48px; padding: 4px 28px 8px; }
.dist-glass .dist { margin-top: 20px; }
.dist-glass figcaption, .dist-glass .dist-axis span, .dist-glass .dist-mid span { color: var(--ink-on-sky); }
@media (max-width: 800px) { .dist-glass { padding: 4px 16px 8px; } }

/* ice field: a full width band of ice behind the reader's questions, so their official quotes can sit in glass */
.field { padding: var(--section) 0; background: linear-gradient(180deg, var(--ground) 0%, var(--frost-3) 18%, var(--frost-2) 50%, var(--frost-3) 82%, var(--ground) 100%); }
.field .voices .who, .field .voices .src-line { color: var(--ink-on-sky); }

/* the market table's label row in glass: it stays on screen and the rows blur as they pass under it. The rows stay solid */
.mhead.glass { background: var(--glass-fill); margin: 0 -12px; padding: 14px 12px; border-radius: var(--radius); }
/* the mask uses only alpha: ink is opaque, so the sky shows fully, then fades to the white page */
.head-sky > .scene { -webkit-mask-image: linear-gradient(180deg, var(--ink) 72%, transparent 100%); mask-image: linear-gradient(180deg, var(--ink) 72%, transparent 100%); }

/* ice field inside a listing's rail layout: the band runs the full page width, under the rail, while its words stay in the content column.
   The offsets match .rail-layout (a 200px rail and a 64px gap) */
.field--rail { margin: var(--section) calc(-1 * var(--gutter)) 0 calc(-1 * (var(--gutter) + 264px)); padding: var(--section) var(--gutter) var(--section) calc(var(--gutter) + 264px); }
.field--rail section + section { margin-top: var(--section); }
.rail-layout > div > .field--rail + section { margin-top: 0; }
.rail { z-index: 1; }
@media (max-width: 800px) { .field--rail { margin: var(--section) calc(-1 * var(--gutter)) 0; padding: var(--section) var(--gutter); } }

/* the summary strip in glass on a listing's sky head */
.facts-glass { margin-top: 40px; padding: 4px 28px 24px; }
.facts-glass .facts { margin-top: 0; border-top: 0; }
.facts-glass small { color: var(--ink-on-sky); }
.head-sky .listing-head .checked { color: var(--ink-on-sky); }

/* ---------- NEW 21 Oct 2026, rulings 46 and 47: content pages (guides, cost guides, explainers) ---------- */

/* twilight head: the sky head on the twilight scene, white type over the blue, darker glass on the header */
.head--dark .header .name, .head--dark .header nav a, .head--dark .header .menu, .head--dark .listing-head h1,
.head--dark .crumbs, .head--dark .crumbs a, .head--dark .head-note { color: var(--on-night); }
.head--dark .listing-head h1 span { color: var(--on-night-80); }
.head--dark .header.glass { background: var(--glass-night-fill); border-color: var(--glass-night-edge); box-shadow: inset 0 1px 0 var(--glass-night-edge); }
.head--dark .header nav a:hover { background: var(--glass-night-fill); }
/* a dark head with facts and buttons: the glass, facts, date line and buttons turn for the dark. Not in use since ruling 55 */
.head--dark { color: var(--on-night); }
.head--dark .glass { background: var(--glass-night-fill); border-color: var(--glass-night-edge); }
.head--dark .facts-glass small, .head-sky.head--dark .listing-head .checked { color: var(--on-night); }
.head--dark .btn--solid { background: var(--on-night); color: var(--ink); }
.head--dark .btn--line { color: var(--on-night); box-shadow: inset 0 0 0 1px var(--on-night); }
.head--dark .btn--line.arrow::after { color: var(--on-night); }

/* the short answer: a glass panel in the head, the answer first in lead size */
.answer { margin-top: 48px; padding: 28px 32px 30px; max-width: 820px; }
.answer .k { color: var(--ink-on-sky); }
.answer .a { font-size: var(--size-lead); line-height: 1.35; letter-spacing: -.025em; margin-top: 8px; max-width: 46ch; }
@media (max-width: 800px) { .answer { padding: 20px; } }

/* prose: a guide's written sections, held to about 65 characters, with lead size subheads */
.prose p { max-width: 65ch; line-height: 1.6; }
.prose p + p { margin-top: 16px; }
.prose h3 { font-size: var(--size-lead); line-height: 1.2; letter-spacing: -.025em; margin: 48px 0 12px; }
.prose h3:first-of-type { margin-top: 0; }
.prices .go { grid-column: 1; margin-top: 4px; }

/* numbered sources at the foot of a guide */
.sources ol { padding-left: 18px; display: grid; gap: 10px; color: var(--ink-60); max-width: 70ch; }
.sources li::marker { color: var(--amber); }
.sources a { color: var(--ink); }
.faq h2.sec { font-size: var(--size-figure); line-height: 1.05; letter-spacing: var(--track-tight); margin-bottom: 32px; }

/* provider cards (rulings 48 to 50): blue glass cards on the white page inside a guide, white type. There is nothing behind them
   to blur, so the glass is drawn: a deep twilight fill, a faint sheen across the top corner, a lit top edge. No band behind them
   (Si: "it's just blue glass not blue background"). Package, price large, name, one line, link */
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-tile); }
.pick { display: flex; flex-direction: column; padding: 28px 28px 24px; min-height: 280px; color: var(--on-night); border-radius: var(--radius);
  background: radial-gradient(120% 70% at 0% 0%, var(--glass-night-fill), transparent 60%),
              linear-gradient(160deg, var(--twilight-1) 0%, var(--twilight-2) 60%, var(--twilight-text) 100%);
  border: 1px solid var(--glass-night-edge); box-shadow: inset 0 1px 0 var(--glass-night-edge); }
.pick .fig { font-size: var(--size-title); line-height: 1; letter-spacing: -.038em; margin-top: 6px; }
.pick .name { font-size: var(--size-lead); line-height: 1.2; letter-spacing: -.025em; margin-top: 28px; }
.pick .why { margin-top: 8px; line-height: 1.5; max-width: 36ch; }
.pick .go { margin-top: auto; padding-top: 24px; }
.pick .go.arrow::after { color: var(--on-night); }
@media (hover: hover) { .pick:hover { border-color: var(--on-night-80); } }
/* yellow glass (ruling 51): the same card in the sun's light, for a different section. Ink type, ink arrow (amber fails on yellow) */
.pick--sun { color: var(--ink);
  background: radial-gradient(120% 70% at 0% 0%, var(--glass-edge), transparent 60%),
              linear-gradient(160deg, var(--sun-1) 0%, var(--sun-2) 100%);
  border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-shine); }
.pick--sun .go.arrow::after { color: var(--ink); }
/* more glass colours (ruling 52), each from a scene the site draws: polar night (white type), pale ice, alpenglow rose, dawn peach (ink type) */
.pick--night { background: radial-gradient(120% 70% at 0% 0%, var(--glass-night-fill), transparent 60%), linear-gradient(160deg, var(--night-1) 0%, var(--night-2) 100%); }
.pick--ice, .pick--rose, .pick--peach { color: var(--ink); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-shine); }
.pick--ice .go.arrow::after, .pick--rose .go.arrow::after, .pick--peach .go.arrow::after { color: var(--ink); }
.pick--ice { background: radial-gradient(120% 70% at 0% 0%, var(--glass-edge), transparent 60%), linear-gradient(160deg, var(--ice-c1) 0%, var(--ice-c2) 100%); }
.pick--rose { background: radial-gradient(120% 70% at 0% 0%, var(--glass-edge), transparent 60%), linear-gradient(160deg, var(--rose-1) 0%, var(--rose-2) 100%); }
.pick--peach { background: radial-gradient(120% 70% at 0% 0%, var(--glass-edge), transparent 60%), linear-gradient(160deg, var(--peach-1) 0%, var(--peach-2) 100%); }
@media (hover: hover) { .pick--sun:hover, .pick--ice:hover, .pick--rose:hover, .pick--peach:hover { border-color: var(--ink-60); } }  /* the edge brightens; the fill stays, so the type keeps its contrast */
@media (max-width: 800px) { .picks { grid-template-columns: 1fr; } .pick { min-height: 0; } }

/* coach card (rulings 65, 66, 68): option A from specimens/specimen-coach-scan-pages.html, spliced as approved. Yellow glass, ink type,
   black and white photo, three across, the 7 rows in two columns with course and training full width. No scores: nothing adds up to a winner.
   The same card heads each coach's page (.coach-head). A row the coach does not state says Not stated with the open square (ruling 66). */
.deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-tile); }
.cc { display: flex; flex-direction: column; padding: 12px 12px 20px; border-radius: var(--radius); color: var(--ink);
  background: radial-gradient(120% 70% at 0% 0%, var(--glass-edge), transparent 60%), linear-gradient(160deg, var(--sun-1) 0%, var(--sun-2) 100%);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-shine); }
.cc .ph { aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: var(--glass-fill); }
.cc .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; filter: grayscale(1) contrast(1.05); }
.cc .ph.none { display: flex; align-items: flex-end; padding: 16px; color: var(--ink-60); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.cc .nm { font-size: var(--size-lead); line-height: 1.15; letter-spacing: -.025em; margin: 18px 8px 0; }
.cc .ln { margin: 6px 8px 0; line-height: 1.45; color: var(--ink-60); }
.cc dl { margin: 16px 8px 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.cc dl > div { padding: 10px 0; border-top: 1px solid var(--glass-edge); }
.cc dl > div.wide { grid-column: 1 / -1; }
.cc dt { font-size: var(--size-note); color: var(--ink-60); }
.cc dd { margin: 2px 0 0; line-height: 1.4; }
.cc dd.no, .spec dd.no { display: flex; align-items: center; gap: 8px; color: var(--ink-60); }  /* also the coach page's rows */
.cc dd.no::before, .spec dd.no::before { content: ""; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ink-60); }
.cc .go { margin: auto 8px 0; padding-top: 16px; }
.cc .go.arrow::after { color: var(--ink); }
@media (hover: hover) { a.cc:hover { border-color: var(--ink-60); } }
.coach-head { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; margin-top: 32px; }
.coach-head h1 { font-size: var(--size-title); line-height: 1; letter-spacing: -.038em; }
.coach-head h1 span { display: block; color: var(--ink-on-sky); font-size: var(--size-lead); line-height: 1.3; letter-spacing: var(--track-tight); margin-top: 16px; max-width: 40ch; }
.coach-head .actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }  /* 16px between buttons (ruling 68) */
.coach-head .checked { margin-top: 16px; color: var(--ink-on-sky); max-width: 52ch; }
.coach-head .caveat-line { margin-top: 24px; max-width: 52ch; }
@media (max-width: 1100px) { .deck { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .deck { grid-template-columns: 1fr; } .coach-head { grid-template-columns: 1fr; gap: 32px; } }

/* scan pages (rulings 69, 70): option B from specimens/specimen-coach-scan-pages.html, spliced as approved. A package with its words
   beside the body figure, amber where the provider's words name the area; the hub sets the figures side by side, never ranked;
   every scan page carries the "If it finds something" panel. Built by build-scans.py */
.pkg { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; padding: var(--pad-cell) 0; border-top: 1px solid var(--rule); }
.pkg .pn { font-size: var(--size-lead); letter-spacing: -.025em; }
.pkg .pp { font-size: var(--size-figure); letter-spacing: var(--track-tight); margin-top: 4px; }
.pkg .spec { margin-top: 20px; }
.pkg .spec > div { grid-template-columns: 160px 1fr; }
.fig-body svg { width: 96px; height: auto; display: block; }
.fig-body .on, .bodies .on { fill: var(--amber); }
.fig-body .off { fill: var(--tile); }
.fig-body figcaption { margin-top: 12px; color: var(--ink-60); font-size: var(--size-note); max-width: 28ch; }
.bodies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-tile); }  /* minmax: a long word never widens a tile past the gutter */
.bodies > a { background: var(--tile); border-radius: var(--radius); padding: 28px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; }
.bodies .off { fill: var(--ground); }
.bodies .nm { font-size: var(--size-lead); letter-spacing: -.025em; line-height: 1.15; }
.bodies .pr { font-size: var(--size-figure); letter-spacing: var(--track-tight); margin-top: 8px; }
.bodies .ws { margin-top: 12px; line-height: 1.45; }
.bodies .go { display: inline-block; margin-top: 16px; }
.if-found .spec > div { grid-template-columns: 240px 1fr; }
.if-found .spec dd.no { color: var(--ink); }
@media (max-width: 1100px) { .bodies { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) { .pkg { grid-template-columns: minmax(0, 1fr); gap: 24px; } .pkg .spec > div, .if-found .spec > div { grid-template-columns: 1fr; } }
/* the scans scene was drawn with text in its lower half. In a page head its horizon (31% down) crosses the subtitle on a phone and
   shows as a stray line under the header on desktop, so there the horizon line and far shore (the scene's only paths) are dropped;
   the blue hour and glow stay. Tiles and bands elsewhere keep the full scene */
.head-sky .scene[data-scene="scans"] path { display: none; }

/* coach list (ruling 71, Si 22 Oct: "maybe A list, with image to left?", then "this will do"): the coaches directory, spliced from
   specimens/specimen-coach-list.html. One row per coach on the white page: black and white photo (only with permission; otherwise
   the space stays empty, no box), name and one line, then 4 facts in columns, the same for every coach. The card stays on each
   coach's own page (ruling 68). Replaces the .deck grid on the directory */
.crows { border-top: 1px solid var(--ink); }
.crow { display: grid; grid-template-columns: 88px minmax(0, 2fr) repeat(4, minmax(0, 1fr)) auto; gap: 24px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.crow .pic { width: 88px; aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.crow .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; filter: grayscale(1) contrast(1.05); }
.crow .nm { font-size: var(--size-lead); line-height: 1.15; letter-spacing: -.025em; }
.crow .ln { margin-top: 4px; line-height: 1.4; color: var(--ink-60); }
.crow .cf { display: grid; gap: 2px; }
.crow .cl { font-size: var(--size-note); color: var(--ink-60); }
.crow .no { display: flex; align-items: center; gap: 8px; color: var(--ink-60); }
.crow .no::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ink-60); }
.crow .go { white-space: nowrap; padding-top: 2px; }
@media (hover: hover) { .crow:hover .nm { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 1100px) { .crow { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); } .crow .pic { width: 72px; grid-row: span 3; } .crow .who, .crow .go { grid-column: 2 / -1; } }
@media (max-width: 560px) { .crow { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; } .crow .pic { width: 64px; } }
/* a plain white page head, no scene (the coaches directory: Si rejected the yellow head and the three skies offered) */
.head-plain { padding-bottom: 24px; }

/* ---------- biological age tests (rulings 76 and 77) ---------- */
/* the tests hub: the market rows with five fact columns instead of the dot row */
.tm .mhead, .tm .mrow summary { grid-template-columns: minmax(220px, 1.6fr) 120px 110px 110px 110px 110px; }
.tm .mhead span { font-size: var(--size-note); color: var(--ink-60); line-height: 1.25; }
.tm .mhead .n, .tm .mhead .p { display: block; }
.tm .mrow .v { line-height: 1.3; }
.tm .mrow .v.empty { min-height: 1em; }  /* ruling 78: a fact the maker does not state leaves a blank cell, no Not stated */
.tm .mrow .cl { display: none; font-size: var(--size-note); color: var(--ink-60); }
/* a test page's head: the price at count size with its note (ruling 37, applied by ruling 76) */
.price-big { font-size: var(--size-count); line-height: 1; letter-spacing: -.038em; margin-top: 8px; }
.price-big small { display: block; font-size: var(--size-body); letter-spacing: var(--track-body); color: var(--ink-60); margin-top: 10px; max-width: 62ch; }
.head-sky .price-big small { color: var(--ink-on-sky); }
/* what the maker claims: its words, then what backs them */
.claims { border-top: 1px solid var(--ink); }
.claims > div { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: var(--pad-cell) 0; border-bottom: 1px solid var(--rule); }
.claims blockquote { margin: 0; font-size: var(--size-lead); line-height: 1.3; letter-spacing: -.025em; max-width: 30em; }
.claims .by { color: var(--ink-60); margin-bottom: 4px; }
.claims p { line-height: 1.55; max-width: 62ch; }
/* where to buy: sellers in rows */
.sellers { border-top: 1px solid var(--ink); }
.seller { display: grid; grid-template-columns: minmax(0, 2fr) 140px auto; gap: 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.seller .nm { font-size: var(--size-lead); letter-spacing: -.025em; line-height: 1.15; }
.seller .ln { margin-top: 4px; color: var(--ink-60); line-height: 1.4; }
.seller .pr { text-align: right; white-space: nowrap; }
.seller .go { white-space: nowrap; }
@media (max-width: 800px) {
  .tm .mhead { display: none; } .tm .mrow summary { grid-template-columns: 1fr 1fr; row-gap: 12px; } .tm .mrow .n { grid-column: 1 / -1; } .tm .mrow .cl { display: block; } .tm .mrow .v.empty { display: none; }
  .claims > div { grid-template-columns: 1fr; gap: 16px; }
  .seller { grid-template-columns: 1fr auto; } .seller .go { grid-column: 1 / -1; }
}

/* the tests hub's commentary under the table (ruling 79): prose sections, one after another, held to reading width */
.hub-sec { margin-top: var(--section); }
.lede.opening { margin-bottom: 40px; color: var(--ink); }
.prose ul { max-width: 65ch; line-height: 1.6; padding-left: 18px; display: grid; gap: 10px; margin-top: 16px; }
.prose ul + p, .prose ul + .src-line { margin-top: 16px; }
.prose li::marker { color: var(--ink-60); }
.prose.how { margin-bottom: 32px; }

/* the wordmark (ruling 73): option A of specimens/specimen-wordmark.html, drawn by build-wordmark.py into mark/header-mark.html.
   One thin line in the current text colour, so it is ink on light heads and white on dark ones. 15px high in the header */
.wm path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.name-mark { display: flex; align-items: center; color: inherit; }
.name-mark .wm { height: 15px; width: auto; }
.name-mark .wm path { stroke-width: 1.4px; }
.footer .sign .wm { height: 11px; width: auto; }
.footer .sign .wm path { stroke-width: 1.2px; }

/* content page head and foot (rulings 46 to 48, moved in from the content specimen 25 Oct): the title held to a line, the next cells spaced */
.head--dark .listing-head h1 { max-width: 22ch; }
.next { margin-top: var(--section); }

/* the short answer on a dark head (25 Oct): drawn glass as the provider cards are (ruling 50), a twilight fill with the sheen on
   top, so the white answer stays readable where the sky fades at the foot of the head, which on a phone is where the card lands */
.head--dark .answer.glass { background: radial-gradient(120% 70% at 0% 0%, var(--glass-night-fill), transparent 60%), var(--twilight-text); border-color: var(--glass-night-edge); box-shadow: inset 0 1px 0 var(--glass-night-edge); }
.head--dark .answer .k { color: var(--on-night-80); }

/* the doctors index (25 Oct): the age tests' table with 4 fact columns (price from, based in, sees patients, register) */
.tm.td .mhead, .tm.td .mrow summary { grid-template-columns: minmax(220px, 1.6fr) 130px 150px 200px 130px; }
@media (max-width: 800px) { .tm.td .mhead { display: none; } .tm.td .mrow summary { grid-template-columns: 1fr 1fr; } }
.tm.td .mhead .p, .tm.td .mrow .p { text-align: center; }  /* Si, 25 Oct: "prices from should be centralised" */
@media (max-width: 800px) { .tm.td .mrow .p { text-align: left; } }  /* stacked rows: every cell starts at the left */

/* the clinics hub (25 Oct): region links under the head, then the tests' table per region */
.jump { display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: none; margin-bottom: 0; }
.jump a { color: var(--ink); }