/* ==========================================================================
   Page-level pieces: quiz, COA table, 404, post meta, tables
   ========================================================================== */

/* --- Quiz ----------------------------------------------------------------- */

.quiz__options {
	margin-bottom: var(--s-6);
}

.quiz__option {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	height: 100%;
	padding: var(--s-6);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	text-align: left;
	transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

.quiz__option:hover,
.quiz__option:focus-visible {
	border-color: var(--c-ink);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.quiz__option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--c-surface-alt);
	border-radius: var(--r-pill);
	color: var(--c-ink);
}

.quiz__option-title {
	color: var(--c-ink);
	font-family: var(--f-display);
	font-size: var(--fs-h5);
	font-weight: var(--fw-semibold);
}

.quiz__option-text {
	color: var(--c-muted-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

.quiz__reset {
	margin-top: var(--s-7);
}

/* --- COA table ------------------------------------------------------------- */

.table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.coa-table {
	min-width: 520px;
	background: var(--c-white);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md);
	overflow: hidden;
}

.coa-table th,
.coa-table td {
	font-size: var(--fs-sm);
}

.coa-table thead th {
	background: var(--c-surface-alt);
	font-family: var(--f-display);
	font-weight: var(--fw-semibold);
}

.coa-table tbody th {
	font-weight: var(--fw-medium);
}

.coa-table tbody th a {
	color: var(--c-ink);
}

.coa-table tbody th a:hover {
	color: var(--c-accent);
}

.coa-table__pending {
	color: var(--c-muted);
}

.coa-table__note {
	margin-top: var(--s-5);
	color: var(--c-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-loose);
}

/* --- Post meta -------------------------------------------------------------- */

.post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0 0 var(--s-3);
}

.post-terms__item {
	padding: var(--s-1) var(--s-3);
	background: var(--c-surface-alt);
	border-radius: var(--r-xs);
	color: var(--c-muted-2);
	font-size: 0.6875rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.post-terms__item:hover {
	background: var(--c-ink);
	color: var(--c-white);
}

.post-article__meta {
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

.post-article__media,
.page-article__media {
	margin-bottom: var(--s-7);
}

.post-article__media img,
.page-article__media img {
	width: 100%;
	border-radius: var(--r-lg);
	object-fit: cover;
}

/* --- CTA links inside imported page copy -------------------------------------- */

.entry-content .kaia-cta {
	margin-block: var(--s-6);
}

.entry-content figure {
	margin: var(--s-7) 0;
}

/* --- 404 ----------------------------------------------------------------------- */

.error-404 {
	text-align: center;
}

.error-404__code {
	margin: 0 0 var(--s-3);
	color: var(--c-line);
	font-family: var(--f-display);
	font-size: clamp(4rem, 2rem + 10vw, 8rem);
	font-weight: var(--fw-bold);
	line-height: 1;
}

.error-404__title {
	margin-bottom: var(--s-4);
}

.error-404__text {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--c-muted-2);
}

.error-404__search {
	max-width: 420px;
	margin: var(--s-7) auto;
}

.error-404__actions {
	margin-bottom: var(--s-9);
}

.error-404__links-title {
	margin-bottom: var(--s-4);
	font-size: var(--fs-h5);
}

.error-404__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2) var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.error-404__list .nav__item {
	margin: 0;
}

.error-404__list .nav__link {
	color: var(--c-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
}

/* --- Search form ----------------------------------------------------------------- */

.search-form {
	display: flex;
	gap: var(--s-2);
}

.search-form label {
	flex: 1;
	margin: 0;
}

.search-form .search-submit {
	flex: 0 0 auto;
	min-height: 46px;
	padding-inline: var(--s-5);
	background: var(--c-ink);
	border: 0;
	border-radius: var(--r-sm);
	color: var(--c-white);
	font-family: var(--f-body);
	font-weight: var(--fw-semibold);
}

/* --- Content bands ---------------------------------------------------------
   Imported page copy is wrapped in <section class="band"> blocks that carry
   their background as custom properties, reproducing the original's stacked
   full-bleed sections without any builder markup.
   ------------------------------------------------------------------------ */

.band {
	position: relative;
	padding-block: var(--section-y-sm);
	background: var(--band-bg, transparent);
	isolation: isolate;
}

@media (min-width: 768px) {
	.band {
		padding-block: var(--section-y);
	}
}

.band--image {
	min-height: var(--band-min, 0);
	background-image: var(--band-image);
	background-position: var(--band-position, center center);
	background-size: cover;
	background-repeat: no-repeat;
}

/* Every photographic band on the live site carries white text over a scrim,
   so the image is what decides the treatment — not the container's own
   computed colour, which reports the inherited dark value. */
.band--image {
	color: var(--c-white);
}

.band--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(12, 12, 12, 0.72) 0%, rgba(12, 12, 12, 0.45) 55%, rgba(12, 12, 12, 0.2) 100%);
}

.band--light,
.band--light p,
.band--light li,
.band--image p,
.band--image li,
.band--image strong {
	color: var(--c-white);
}

.band--light h1,
.band--light h2,
.band--light h3,
.band--light h4,
.band--light h5,
.band--light h6,
.band--image h1,
.band--image h2,
.band--image h3,
.band--image h4,
.band--image h5,
.band--image h6 {
	color: var(--c-white);
}

.band--light a:not(.btn),
.band--image a:not(.btn) {
	color: var(--c-green);
}

/* Photographic bands need real height, as the originals have. Stretch the
   children: as flex items they would shrink to their text and centre
   themselves, while live keeps the copy against the gutter. */
.band--image {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	/* Live's measured heights run past 700px on some pages, which left a third
	   of the band empty under the copy. Whatever it measured, a photographic
	   band is at most two thirds of the screen. */
	min-height: min(var(--band-min, 520px), 66vh);
}

.band__inner,
.band > * {
	position: relative;
}

/* Band content shares the page container. */
.entry-content .band {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2));
}

@media (min-width: 768px) {
	/* --band-px is live's own gutter for that band (10, 76 or 80px on the pages
	   measured), which live keeps from tablet up; the calc centres the content
	   once the viewport is wider than the container. On a phone it would eat
	   the screen, so there the theme's own gutter takes over. */
	.entry-content .band {
		padding-inline: max(var(--band-px, var(--gutter)), calc(50vw - var(--container) / 2));
	}
}

.entry-content .band > * {
	max-width: var(--container-narrow);
}

/* The extractor measures each band's own vertical padding on the live page and
   passes it as `--band-pt` / `--band-pb`. Those values run from 40 to 160px
   with no pattern, which is what made the imported pages read unevenly, so
   they are no longer honoured: every band breathes on the site's own rhythm.
   The measured inner width and gutter (`--band-w` / `--band-px`) still are —
   they are layout, not rhythm. */
@media (min-width: 1025px) {
	.entry-content .band {
		padding-block: var(--section-y);
	}

	.entry-content .band > * {
		max-width: var(--band-w, var(--container-narrow));
	}
}

.entry-content .band h2 {
	font-size: clamp(1.75rem, 1.15rem + 2vw, 2.75rem);
}

.entry-content .band > * + * {
	/* Measured: live's copy runs on a 1em rhythm inside a band, which puts its
	   paragraph pitch at 39px against our 48px. Bands that set their own row
	   gap carry it as --band-gap. */
	margin-top: var(--band-gap, var(--s-4));
}

.entry-content .band .kaia-cta {
	margin-top: var(--s-6);
}

.entry-content .band > *:last-child,
.entry-content .band__col > *:last-child {
	margin-bottom: 0;
}

.site-main > .page-article--banded:first-child {
	/* The first band sits under the overlay header and pads itself. Needs to
	   match the specificity of the generic first-child rule in header.css. */
	padding-top: 0;
}

.page-article--banded .entry-content--banded > .band:first-child {
	padding-top: calc(var(--header-h) + var(--s-8));
}

/* A photographic opening band runs behind the header, so it carries the header
   height on top of the usual rhythm rather than the original's own padding. */
.page-article--hero .entry-content--banded > .band:first-child {
	padding-top: calc(var(--header-h) + var(--section-y));
}

.entry-content--banded > * + * {
	margin-top: 0;
}

/* Bands used to stack their vertical padding on top of whatever already paid
   for the gap — a second band after the first, or a band sitting inside a
   .section that pads itself — which put 200px of nothing between one block of
   copy and the next. One rhythm pays once. A band that carries its own surface
   (a colour or a photograph) still pads itself, because its background has to
   breathe. */
.entry-content > .band + .band:where(:not([style*="--band-bg"]):not(.band--image):not(.band--dark)),
.entry-content--banded > .band + .band:where(:not([style*="--band-bg"]):not(.band--image):not(.band--dark)) {
	margin-top: 0;
	padding-top: 0;
}

.section > .entry-content > .band:first-child:where(:not([style*="--band-bg"]):not(.band--image):not(.band--dark)) {
	padding-top: 0;
}

/* …but a band that follows a surface — a photograph, a filled band, a dark one
   — pays the rhythm again, or its first line sits on the edge of the picture
   above it. */
.entry-content .band--image + .band,
.entry-content .band--filled + .band,
.entry-content .band--dark + .band,
.entry-content .band[style*="--band-bg"] + .band,
.entry-content--banded .band--image + .band,
.entry-content--banded .band--filled + .band,
.entry-content--banded .band--dark + .band,
.entry-content--banded .band[style*="--band-bg"] + .band {
	padding-top: var(--section-y);
}

/* The band keeps its bottom padding and the section gives its own up, rather
   than the other way round: on the FAQ page the section had no bottom padding
   of its own, so zeroing the band's put the closing buttons against the
   footer. */
.section:has(> .entry-content > .band:last-child) {
	padding-bottom: 0;
}

/* --- FAQ page intro ---------------------------------------------------------- */

.faq-intro {
	padding-bottom: 0;
}

.faq-intro .entry-content > h2:first-child {
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
}

.faq-section--page {
	padding-top: var(--s-6);
}

/* --- Two-column bands --------------------------------------------------------
   Live stacks copy beside a picture inside a band; the extractor emits those as
   a split so the text column keeps its original measure.
   -------------------------------------------------------------------------- */

.band__split,
.band__cols {
	display: grid;
	gap: var(--s-7);
	align-items: center;
	width: 100%;
}

@media (min-width: 1025px) {
	.band__split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-9);
	}
}

.entry-content .band .band__split > .band__col {
	max-width: none;
}

.band__col > * + * {
	margin-top: var(--s-5);
}

.band__figure {
	margin: 0;
}

.band__figure img {
	width: 100%;
	border-radius: var(--r-lg);
	object-fit: cover;
}

/* Live pairs a large heading with a small bold sub-heading; both arrive as h2
   from the builder, so the second one is stepped down here. The margin is set
   rather than left to the prose rhythm because `.entry-content h2` would
   otherwise open 48px above it. It has to be positive: live runs these headings
   on a line-height equal to their size, so the descenders of the big one sit on
   the edge of its box and a negative margin drove the sub-heading straight
   through them. Live keeps 22px of clear space between the two. */

.entry-content .band h2 + h2,
.band__col h2 + h2 {
	margin-top: var(--s-4);
	font-size: 1.0625rem;
	font-weight: var(--fw-bold);
	line-height: 1.4;
}

@media (min-width: 1025px) {
	/* From here up the headings take live's measured type, whose line-height
	   equals its size — so the big one's box has no leading under it and the
	   pair closes by the 5px the theme's own 1.1 was contributing. Measured:
	   both breakpoints now clear live's 22px / 21px. */
	.entry-content .band h2 + h2,
	.band__col h2 + h2 {
		margin-top: 21px;
	}
}

@media (min-width: 1025px) {
	/* The live row gives the copy a little more room than the picture. */
	.band__split {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	}
}

/* An accordion's closing line and its buttons sit centred under the questions,
   whether the buttons arrive loose or in one of the importer's rows. */
.entry-content .accordion ~ p,
.entry-content .accordion ~ .kaia-cta {
	text-align: center;
}

.entry-content .accordion ~ .band__cols {
	justify-content: center;
}

/* Those imported call-to-action buttons wear the display face; the site's other
   buttons stay on the body face, as live has them. */
.entry-content .kaia-cta .btn {
	font-family: var(--f-display);
}

/* --- Contact form ------------------------------------------------------------ */

/* Live runs this form at about 880px, centred under a centred heading, with
   the labels left over full-width fields. */
/* Out-ranks the band's own child width, which is measured from live's copy
   column and is narrower than the form live actually renders. */
.contact,
.entry-content .band > .contact,
.entry-content .band__col > .contact {
	max-width: 720px;
	margin-inline: auto;
}

/* The heading, the intro and the privacy line are siblings of the form, not
   children of it, and live centres all three over the same 880px column. */
.entry-content .band:has(> .contact) > h2,
.entry-content .band:has(> .contact) > h3 {
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}

/* The line above the form reads on a shorter measure than the form itself. */
.entry-content .band:has(> .contact) > p {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
}

.contact__form {
	max-width: none;
	margin-inline: auto;
}

.contact__field {
	margin-bottom: var(--s-4);
}

/* Live's contact fields are white boxes with a thin dark rule and barely any
   corner, not the tinted pill the rest of the site's inputs use. */
.contact__field input[type="text"],
.contact__field input[type="email"],
.contact__field input[type="tel"],
.contact__field select,
.contact__field textarea {
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid var(--c-dark);
	border-radius: 4px;
	background: var(--c-white);
	color: var(--c-ink);
}

.contact__field textarea {
	min-height: 150px;
	border-radius: 4px;
}

.contact__field input:focus,
.contact__field select:focus,
.contact__field textarea:focus {
	border-color: var(--c-ink);
	background: var(--c-white);
	box-shadow: 0 0 0 3px rgba(12, 12, 12, 0.08);
}

.contact__field label {
	display: block;
	margin-bottom: var(--s-2);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.contact__actions {
	margin: 0;
}

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

/* Consecutive call-to-action links sit side by side on the live pages. */

.entry-content .kaia-cta {
	display: inline-block;
	margin-right: var(--s-3);
}

/* --- COA gallery -------------------------------------------------------------- */

.coa-gallery {
	/* Live's gallery widget: four columns with a 10px gap in both directions,
	   stacking one-up on phones and two-up on tablet. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.coa-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.coa-gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.coa-gallery__item {
	margin: 0;
}

.coa-gallery__link {
	/* Live crops each certificate into a 3:2 tile — the sheet is not
	   letterboxed, it fills the tile and the top of the page shows. */
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--c-white);
	transition: opacity var(--t-base);
}

.coa-gallery__link:hover {
	opacity: 0.88;
}

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

/* The COA page's copy is imported as a band, which brings live's own 80px of
   band padding with it — the wrapper only clears the overlay header. Live sets
   the gallery flush under that copy and pads the page out below it. */
.section--band-top {
	padding-top: var(--header-h);
	padding-bottom: 0;
}

.section--coa-grid {
	padding-top: 0;
	padding-bottom: var(--section-y);
}

/* Blog posts are a single 800px column on live — their imported bands must not
   break out of it the way a page's full-bleed band does. */
.post-article .entry-content .band {
	margin-inline: 0;
	padding-inline: 0;
}

.post-article .entry-content .band > * {
	max-width: 100%;
}

.post-article .entry-content img {
	max-width: 100%;
	height: auto;
}

/* A band pads itself the way live does, so its opening heading must not also
   carry the generic prose top margin. */
.entry-content .band > :first-child,
.entry-content .band .band__col > :first-child,
.entry-content .band .band__cols > :first-child {
	margin-top: 0;
}

/* Type measured off the live desktop layout, carried inline as custom
   properties. Colour applies everywhere; the sizes only from the desktop
   breakpoint up, so phones keep the theme's own scale. */
.entry-content .band [style*="--tc"] {
	color: var(--tc);
}

@media (min-width: 1025px) {
	.entry-content .band [style*="--fs"] {
		font-size: var(--fs);
		line-height: var(--lh, normal);
		font-weight: var(--fw, inherit);
		letter-spacing: var(--ls, normal);
	}
}

/* Live centres each band's content in its own gutter. The width matters as
   much as the margin: inside a flex band an auto-margin child shrinks to its
   text and floats to the middle, where live has it filling the column. */
.entry-content .band > * {
	width: 100%;
	margin-inline: auto;
}

/* --- Blog archive ------------------------------------------------------------- */

.archive-list {
	display: grid;
	gap: var(--s-10);
}

.post-feature__title {
	margin-bottom: var(--s-5);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
}

.post-feature__title a {
	color: var(--c-ink);
}

.post-feature__title a:hover {
	color: var(--c-green-deep);
}

.post-feature__media {
	display: block;
	margin-bottom: var(--s-3);
}

.post-feature__media img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

@media (min-width: 1025px) {
	/* Live caps the archive image at 500px tall on desktop and crops to fill;
	   below that it runs at the upload's own 1.82 ratio. */
	.post-feature__media img {
		height: 500px;
	}
}

.post-feature__standfirst {
	margin: 0;
	color: var(--c-body);
	font-size: var(--fs-sm);
}

/* --- Card rows inside a band --------------------------------------------------
   Live groups a band's child containers into a row — sometimes copy beside a
   picture, sometimes three or four cards with their own surface. The extractor
   measures the row on the live page and passes the real proportions through
   `--cols` (plus `--col-gap`), so the columns keep their original widths
   instead of an even split. Below 1025px everything stacks, as it does on live.
   --------------------------------------------------------------------------- */

.band__cols {
	display: grid;
	gap: var(--s-5);
	width: 100%;
	align-items: stretch;
}

@media (min-width: 768px) {
	/* Live holds its rows side by side from tablet up rather than stacking. */
	.band__cols {
		grid-template-columns: var(--cols, repeat(auto-fit, minmax(0, 1fr)));
		gap: var(--col-gap, var(--s-6));
	}
}

.band__col {
	min-width: 0;
}

.band__col > * + * {
	margin-top: var(--s-4);
}

/* A column is a flex column, so the prose margins inside it add to the rule
   above instead of collapsing with it — live's 16px paragraph pitch was coming
   out at 32px. The `* + *` rule owns the rhythm; the prose carries none. */
.band__col > :is(p, ul, ol, h2, h3, h4, h5, h6, figure, table) {
	margin-bottom: 0;
}

/* A card carries its own surface, so the band's light-on-dark text must not
   bleed into it. */
.band__card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	color: var(--c-body);
}

.band__card :is(h2, h3, h4, h5, p, li) {
	color: inherit;
}

.entry-content .band .band__cols,
.entry-content .band .band__cols > .band__col {
	max-width: none;
}

/* --- A stacked row leads with its picture -------------------------------------
   Once a row stacks on the phone live puts the picture first, whichever side it
   sat on at desktop — measured on four rows across affiliates and
   peptide-information, two of which carry the picture second in the source.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Live's inline column padding is the gutter a column keeps from its
	   neighbour in the row — 80px on one side, or 10px around a picture. Once
	   the row stacks there is no neighbour to clear and live drops it, which is
	   what left the copy on a 268px measure here against live's 353px. Columns
	   that carry their own surface keep their padding: that one is real card
	   padding. The value arrives inline from the extractor, so unsetting it
	   needs the flag. */
	.entry-content .band .band__col:not([style*="background"]) {
		padding: 0 !important;
	}

	.entry-content .band__col:has(> .band__figure:only-child) {
		order: -1;
	}
}

/* --- Button rows ----------------------------------------------------------
   The importer keeps live's column proportions, which is right for copy and
   pictures but strands a row of buttons at opposite ends of the page: on the
   support page "Call Us" sat 670px from "Email Us". A row whose columns hold
   nothing but a call to action collapses to the buttons' own width. */
.entry-content .band__cols:has(> .band__col > .kaia-cta:only-child) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	align-items: center;
}

.entry-content .band__cols:has(> .band__col > .kaia-cta:only-child) > .band__col {
	flex: 0 0 auto;
	width: auto;
}

/* --- COA page -------------------------------------------------------------- */

/* The heading was landing exactly on the header's bottom edge, and the gallery
   started flush against the intro. */
.section--band-top {
	padding-top: calc(var(--header-h) + var(--section-y-sm));
}

.section--coa-grid {
	padding-top: var(--s-7);
	padding-bottom: var(--section-y);
}

.coa-gallery {
	gap: var(--s-5);
}

/* --- FAQ into its closing call to action ----------------------------------
   Live puts about 104px between the last question and "Need more information?".
   Ours ran to 295: the last row's own trailing space, then the FAQ section's
   bottom padding, then the CTA's top padding, all in a row. One gap now. */
.faq-section:has(+ .shop-cta),
.faq-section:has(+ .cta-band) {
	padding-bottom: 0;
}

.faq-section + .shop-cta,
.faq-section + .cta-band {
	padding-top: var(--s-9);
}

/* --- Band pictures fill their row -----------------------------------------
   Live stretches a row's picture to the height of the copy beside it; ours sat
   at its own aspect ratio and left a gap under it. A column holding nothing but
   a picture now fills the row, and the picture crops to fit. */
@media (min-width: 768px) {
	.entry-content .band__col:has(> .band__figure:only-child) {
		display: flex;
	}

	.entry-content .band__col > .band__figure:only-child,
	.entry-content .band__col > .band__figure:only-child img {
		flex: 1;
		height: 100%;
		min-height: 100%;
	}
}

/* --- Live's comparison table ----------------------------------------------
   Live styles this one as `.compare-table`, with a bold 22% label column and
   centred column heads. The importer keeps the markup but not those classes, so
   the same shape is matched structurally: first cell in a row is the label,
   every other head is centred. */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-body);
}

.entry-content table th {
	padding: 12px 8px;
	font-weight: var(--fw-bold);
	text-align: left;
}

.entry-content table td {
	padding: 12px 8px;
	line-height: 1.35;
	vertical-align: top;
}

.entry-content table th:first-child,
.entry-content table td:first-child {
	width: 22%;
	font-weight: var(--fw-bold);
}

.entry-content table thead th:not(:first-child) {
	font-weight: 800;
	text-align: center;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid var(--c-line-soft);
}

/* Live stripes alternate body rows in #f6f6f6 — sampled off its own capture. */
.entry-content table tbody tr:nth-child(odd) th,
.entry-content table tbody tr:nth-child(odd) td {
	background: #f6f6f6;
}