/*
 * The Crypto Secret — the comparison table and the credibility band
 * (Story 2.4). Sections 7 and 8 of the locked order.
 *
 * Source of truth: design/canvas/Main.dc.html:359-388 (comparison) and
 * :390-421 (credibility). Where this file departs from the board, the reason
 * is written at the rule.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * WHAT THIS FILE CONSUMES RATHER THAN RE-DECLARES
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * sections.css owns the two bands' grounds and their type pairing —
 * .tcs-band--cream, .tcs-band--black and .tcs-band--tight. Nothing here sets a
 * band background or a heading colour; declaring either a second time would be
 * a second place for the palette rule to drift.
 *
 * motion.css owns BOTH interactions in this file. .tcs-row (motion.css:352-368)
 * carries the comparison row's background wash, its padding-left indent, its
 * :focus-within pairing and its reduced-motion state; .tcs-card
 * (motion.css:330-349) carries the figure card's hover lift. This file writes
 * NEITHER — it applies the classes and makes the layout able to receive them.
 * That is why comparison.css is enqueued after motion.css in
 * tcs_child_stylesheets(): the layout adjustments below have to be able to win
 * against the shared layer where the two touch the same element.
 *
 * tokens.css owns every value. There is not one literal colour, radius or
 * type size in this file — the whole Story 2.4 block was added to tokens.css
 * first for exactly that reason, and verify-foundation.sh asserts the absence
 * of a hex here.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * THE TWO THINGS THIS FILE EXISTS TO GET RIGHT
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * 1. THE ROW MOVES AS ONE. The artboard puts its `.row` hover on the label
 *    cell alone, so the label indents while its two content cells stay put.
 *    Here .tcs-row is a WRAPPER around all three cells, made a grid
 *    participant with `display: contents` at desktop so the cells still land
 *    in the table's own columns — and the wrapper is where the hover lands.
 *    `display: contents` removes the wrapper from the box tree, which means it
 *    cannot itself paint a background or take padding, so the hover is
 *    re-expressed onto its cells at desktop. See section 4, which is the
 *    subtlest part of this file.
 *
 * 2. NOTHING FAILS AA, AT REST OR ON HOVER. The free column is painted
 *    --tcs-label-on-white (#767164), NOT the artboard's --tcs-muted (#8B877D),
 *    which measures 3.58:1 on white and 3.39:1 once the row-hover wash
 *    composites over it. The hover ground is a real ground: rgba(247,147,26,.07)
 *    over white resolves to #FEF7EF and costs every pairing in the row about
 *    0.3 of its ratio. Every colour decision below is stated with both numbers.
 */

/* ===========================================================================
 * 1. THE COMPARISON BAND
 * ========================================================================= */

/*
 * The band's inner column. The artboard draws the table full-width inside the
 * band's 40px padding with no max-width of its own, so nothing is constrained
 * here beyond what .tcs-band already sets.
 */
.tcs-compare__inner {
	display: flex;
	flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * 1a. The header row — Main.dc.html:361-364.
 *
 * h2 left, conceding lede right, BOTTOM-aligned. `align-items: flex-end` is
 * the board's own alignment and it is what makes the lede's last line sit on
 * the headline's baseline rather than floating at the top of a 2-line block.
 * ------------------------------------------------------------------------- */

.tcs-compare__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tcs-cred-col-gap);
	margin-bottom: var(--tcs-compare-head-gap);
}

/*
 * NO COLOUR HERE. .tcs-band--cream already resolves an h2 to --tcs-black
 * (19.55:1 on white, 18.09:1 on the cream ground). A second declaration would
 * be a second place for it to drift.
 */
.tcs-compare__headline {
	margin: 0;
	font-size: var(--tcs-fs-h2);
	line-height: var(--tcs-lh-h2);
	letter-spacing: var(--tcs-ls-h2);
	font-weight: var(--tcs-fw-semibold);
}

/*
 * THE CONCESSION. "You can. Plenty of people try." --tcs-body is 6.91:1 on the
 * cream ground: comfortably AA, and deliberately not the muted colour — this
 * sentence is the argument, not a caption.
 */
.tcs-compare__lede {
	margin: 0;
	max-width: var(--tcs-compare-lede-max);
	font-size: var(--tcs-fs-body);
	line-height: var(--tcs-lh-lede);
	color: var(--tcs-body);
}

/* ---------------------------------------------------------------------------
 * 2. The table — Main.dc.html:367.
 *
 * A CSS grid, not a <table>. This IS tabular data, so the ARIA roles are on
 * the markup; the grid is here because a real <table> cannot restack into five
 * cards at 390px without `display: block`, which strips those semantics off
 * again — the layout would win and the screen reader would lose.
 *
 * minmax(0, …) ON EVERY COLUMN, never a bare fr. A grid item's implicit
 * min-width is `auto`, so one long unbroken cell string ("Often anonymous,
 * often selling something" is close) widens its column past its share and
 * pushes the row sideways. That is the horizontal-overflow failure the I/O
 * matrix forbids at 390 / 768 / 1440, and it is a grid rule, not a taste.
 *
 * `overflow: hidden` is load-bearing, not tidiness: the book column is tinted
 * and the table is rounded, so without it the tint squares off outside the
 * top-right and bottom-right corner radii and the defect is plainly visible.
 * ------------------------------------------------------------------------- */

.tcs-compare__table {
	display: grid;
	grid-template-columns:
		minmax(0, var(--tcs-compare-label-col))
		minmax(0, 1fr)
		minmax(0, 1fr);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-compare-table);
	overflow: hidden;
}

/*
 * THE TWO ROW WRAPPERS ARE `display: contents` AT DESKTOP.
 *
 * The header row and each body row wrap three cells so the row is one thing
 * in the DOM — which is what lets .tcs-row hover the whole row and what lets
 * the mobile stack turn each row into a card. But a wrapper element between
 * the grid and its cells would make each row a single grid item, collapsing
 * the three columns to one. `display: contents` removes the wrapper from the
 * box tree so its three children become the grid's own items and land in the
 * table's columns.
 *
 * THE COST, AND IT IS THE SUBTLE PART OF THIS FILE: an element with
 * `display: contents` generates NO BOX, so it cannot paint a background and
 * cannot take padding. .tcs-row's hover — which is exactly a background and a
 * padding-left — would therefore do nothing here. Section 4 re-expresses it
 * onto the cells, which is why that section exists at all.
 */
.tcs-compare__headrow,
.tcs-compare__row {
	display: contents;
}

/* ---------------------------------------------------------------------------
 * 3. The cells — Main.dc.html:368-386.
 *
 * The board pads the header row 20px and the body rows 19px — one pixel, its
 * own value, kept because it is what makes the header read as fractionally
 * heavier than the rows below it.
 * ------------------------------------------------------------------------- */

.tcs-compare__cell {
	display: flex;
	align-items: center;
	padding: var(--tcs-compare-cell-pad-y) var(--tcs-compare-cell-pad-x);
	font-size: var(--tcs-fs-compare-cell);
	line-height: var(--tcs-lh-compare-cell);
	/*
	 * The row rule is --tcs-cream-2 (#EFEADF) doing a second job as a
	 * hairline, straight from the board: --tcs-border-2 here would read as
	 * five stacked tables rather than one. --tcs-compare-row-rule names that
	 * intent so a later edit cannot mistake it for a fill.
	 */
	border-bottom: var(--tcs-border-width) solid var(--tcs-compare-row-rule);
}

/*
 * The two vertical rules use the TABLE's border colour, not the row rule's:
 * a column separator runs the full height of the table and is structural,
 * where a row rule divides items within one column. That difference is the
 * board's (Main.dc.html:371 pairs #E4DED0 vertical with #EFEADF horizontal)
 * and it is what stops the table reading as a uniform grid of boxes.
 */
.tcs-compare__cell--corner,
.tcs-compare__cell--label,
.tcs-compare__cell--free {
	border-right: var(--tcs-border-width) solid var(--tcs-border);
}

/* The header row's own padding and its heavier divider. */
.tcs-compare__cell--head,
.tcs-compare__cell--corner {
	padding-top: var(--tcs-compare-head-pad-y);
	padding-bottom: var(--tcs-compare-head-pad-y);
	border-bottom-color: var(--tcs-border);
	font-weight: var(--tcs-fw-semibold);
}

/* The last row carries no bottom rule — the table's own border closes it. */
.tcs-compare__row:last-child .tcs-compare__cell {
	border-bottom: 0;
}

/*
 * The row label. 15px and weight 500, a half-step above the content cells:
 * it is the row's subject, and --tcs-black on white is 19.55:1 at rest and
 * 18.47:1 on the hover ground.
 */
.tcs-compare__cell--label {
	font-size: var(--tcs-fs-compare-label);
	font-weight: var(--tcs-fw-medium);
	color: var(--tcs-black);
}

/* ---------------------------------------------------------------------------
 * 3a. THE FREE COLUMN'S COLOUR — the accessibility fix this story turns on.
 *
 * The artboard paints this column #8B877D (--tcs-muted). On white that
 * measures 3.58:1 — a WCAG AA failure for body text — and 3.39:1 once the
 * row-hover wash composites over it. This is the THIRD story to reach for that
 * colour on a light ground, and the token layer already carries the answer:
 * --tcs-label-on-white (#767164) is the same hue and chroma family lifted to
 * 4.87:1 at rest and 4.60:1 on hover. Both clear 4.5:1.
 *
 * The artboards win on a visual conflict. They do not win on an accessibility
 * failure, and tokens.css:515-522 exists saying exactly that.
 *
 * THE COLUMN STAYS SUBORDINATE, which is what the muted colour was actually
 * carrying: at 4.87:1 against the book column's 18.23:1 the free route is
 * still visibly the quieter answer. The design intent survives; only the
 * failing value is replaced.
 *
 * THE HEADER CELL IS INCLUDED. A sweep that fixed the five body cells and left
 * "Free threads & videos" at 3.58:1 would fail the gate on the one cell a
 * reader looks at first.
 * ------------------------------------------------------------------------- */

.tcs-compare__cell--free {
	color: var(--tcs-label-on-white);
}

/* ---------------------------------------------------------------------------
 * 3b. The book column — Main.dc.html:369-386.
 *
 * The tint is the only fill in the table and it runs the full column
 * INCLUDING the header, which is what makes the column read as one answer
 * rather than six tinted cells. --tcs-black on it is 18.23:1 at rest and
 * 17.30:1 on the hover ground.
 * ------------------------------------------------------------------------- */

.tcs-compare__cell--book {
	background: var(--tcs-compare-book-tint);
	color: var(--tcs-black);
}

/*
 * Row 5's book cell — the price — is the only cell set at 600. It is the
 * answer the whole band has been building toward, and the board weights it
 * accordingly (Main.dc.html:386).
 */
.tcs-compare__cell--strong {
	font-weight: var(--tcs-fw-semibold);
}

/* ---------------------------------------------------------------------------
 * 3c. The two column marks — Main.dc.html:368-369.
 *
 * A dashed circle over the free column and a tick over the book column. Both
 * are decorative and aria-hidden: the column name beside each says what the
 * mark says, so announcing them would repeat it.
 *
 * They are STROKES, not text, so they are not measured by the text-contrast
 * sweep — but they still have to be visible. The tick is drawn in
 * --tcs-amber (3.82:1 on white, 3.56:1 on the tint), which clears the 3:1
 * WCAG floor for a non-text graphical object in both states, and the dash in
 * --tcs-label-on-white for the same reason the column's type is.
 * ------------------------------------------------------------------------- */

.tcs-compare__mark {
	flex: none;
	width: var(--tcs-compare-mark);
	height: var(--tcs-compare-mark);
	margin-right: var(--tcs-compare-mark-gap);
	stroke-linecap: round;
}

.tcs-compare__mark--dash {
	stroke: var(--tcs-label-on-white);
	stroke-width: 1.9;
}

.tcs-compare__mark--tick {
	stroke: var(--tcs-amber);
	stroke-width: 2.2;
	stroke-linejoin: round;
}

/* The column name sits beside its mark; the flex row above already aligns it. */
.tcs-compare__colname {
	min-width: 0;
}

/*
 * The inline column headers exist for the mobile card stack ONLY. They ship in
 * the markup at every width — a media query cannot invent text — and are
 * hidden here rather than in the mobile block so the desktop table never has
 * to un-show them.
 */
.tcs-compare__inline-head {
	display: none;
}

/* ===========================================================================
 * 4. THE ROW HOVER — the defect this story was written to fix.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * WHAT WAS WRONG
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Main.dc.html puts its `.row` class on the LABEL CELL of each row. Hovering
 * therefore washes and indents the label while its two content cells sit
 * still — which does not read as a subtle affordance, it reads as a row that
 * has broken in half. The spec names it: "The row hover moves the whole row,
 * not just its label."
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * WHAT IS DONE INSTEAD, AND WHY IT TAKES THREE RULES
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * .tcs-row is hoisted onto the row WRAPPER, which is the only element that
 * knows about all three cells. motion.css:352-368 then gives that wrapper the
 * transition, the background wash, the padding-left indent, the :focus-within
 * pairing and the reduced-motion state — none of it authored here.
 *
 * But the wrapper is `display: contents` (section 2), so it generates no box:
 * it can neither paint the background nor take the padding motion.css hands
 * it. Both therefore have to be re-expressed onto the cells, which DO have
 * boxes — while the transition timing stays motion.css's, referenced through
 * the same tokens rather than restated as literals.
 *
 * The indent goes on the FIRST cell only, as extra padding-left. Indenting all
 * three would shift each cell's text away from its own column rule and the row
 * would appear to come apart — the opposite of the fix. One row-leading indent
 * with a wash across all three cells is what makes the row read as one object
 * moving.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * THE CONTRAST CONSEQUENCE, WHICH NO EARLIER STORY HAD TO MEASURE
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * --tcs-row-hover-bg is rgba(247, 147, 26, .07) — an ALPHA colour, so it does
 * not replace the ground, it composites over it. Over white that resolves to
 * #FEF7EF; over the book tint to #FEEFDB. Every text pairing in the row loses
 * about 0.3 of its ratio in that state, and a resting-state-only contrast
 * sweep would never see it. Measured, on the composited ground:
 *
 *   free column   --tcs-label-on-white   4.87:1 → 4.60:1   passes
 *   label / book  --tcs-black           19.55:1 → 18.47:1  passes
 *   book column   --tcs-black           18.23:1 → 17.30:1  passes
 *
 * The free column is the one with no margin. Had it stayed at the artboard's
 * #8B877D it would read 3.39:1 here — which is why the story's gate runs the
 * whole sweep a second time with a row hovered.
 * ========================================================================= */

/*
 * The wash. `background` on a cell rather than the wrapper, for the reason
 * above. The book column is excluded by specificity below so its tint is not
 * flattened away — the wash there is applied as a second layer instead.
 */
.tcs-compare__row.tcs-row:hover .tcs-compare__cell,
.tcs-compare__row.tcs-row:focus-within .tcs-compare__cell {
	background-color: var(--tcs-row-hover-bg);
}

/*
 * The book column keeps its tint AND takes the wash, as two stacked layers:
 * `background-image` paints the alpha wash over the `background-color` tint,
 * which is exactly the composite the ratios above were measured against.
 * Setting `background-color` here instead would erase the tint and the column
 * would flash white under the cursor.
 */
.tcs-compare__row.tcs-row:hover .tcs-compare__cell--book,
.tcs-compare__row.tcs-row:focus-within .tcs-compare__cell--book {
	background-color: var(--tcs-compare-book-tint);
	background-image: linear-gradient(
		var(--tcs-row-hover-bg),
		var(--tcs-row-hover-bg)
	);
}

/*
 * The indent, on the row's leading cell only. The transition is declared on
 * the cell because that is the box that moves, and it uses motion.css's own
 * tokens rather than new values — the two must not be able to drift apart.
 */
.tcs-compare__cell--label {
	transition:
		background-color var(--tcs-dur-btn-hover) ease,
		padding-left var(--tcs-dur-row-hover) var(--tcs-ease-reveal);
}

.tcs-compare__cell--free,
.tcs-compare__cell--book {
	transition: background-color var(--tcs-dur-btn-hover) ease;
}

.tcs-compare__row.tcs-row:hover .tcs-compare__cell--label,
.tcs-compare__row.tcs-row:focus-within .tcs-compare__cell--label {
	padding-left: calc(var(--tcs-compare-cell-pad-x) + var(--tcs-row-hover-indent));
}

/*
 * REDUCED MOTION. The final state is the HOVER state's colours with no
 * travel — never no hover at all, and never a zero-height or invisible
 * result. motion.css takes the same position for .tcs-row; this block exists
 * because the padding-left transition above is declared on a different element
 * than the one motion.css disables, so motion.css's own block cannot reach it.
 */
@media (prefers-reduced-motion: reduce) {

	.tcs-compare__cell,
	.tcs-compare__cell--label,
	.tcs-compare__cell--free,
	.tcs-compare__cell--book {
		transition: none;
	}

	/*
	 * The indent is dropped entirely rather than made instant: a 12px jump
	 * with no tween is motion sickness with extra steps. The wash still
	 * identifies the hovered row, which is what the affordance is for.
	 */
	.tcs-compare__row.tcs-row:hover .tcs-compare__cell--label,
	.tcs-compare__row.tcs-row:focus-within .tcs-compare__cell--label {
		padding-left: var(--tcs-compare-cell-pad-x);
	}
}

/* ===========================================================================
 * 5. THE CREDIBILITY BAND — Main.dc.html:390-421.
 *
 * The ground and the type pairing come from .tcs-band--black in sections.css,
 * which resolves body copy to --tcs-body-dark (#A9A49A, 7.88:1 on black).
 * NOT --tcs-body (#55524B), which is roughly 2.4:1 there — a real failure the
 * band system exists to make impossible. Nothing below re-declares either.
 *
 * The 88px padding is .tcs-band--tight (sections.css:186-190), whose comment
 * cites this very band's line in the artboard. Applied, not re-authored.
 * ========================================================================= */

/*
 * `position: relative` and `overflow: hidden` contain the aurora blob, which
 * is 520px and bleeds well past the band's top-right corner. Clipping it here
 * rather than leaving .tcs-bands to catch it keeps the containment local: a
 * decorative element must not be able to widen the document, and the matrix
 * asserts body.scrollWidth <= innerWidth at all three widths.
 */
.tcs-cred {
	position: relative;
	overflow: hidden;
}

/*
 * The aurora blob. `pointer-events: none` so it cannot eat a click on
 * anything beneath it, and no animation: the hero's blobs breathe because the
 * hero is the page's first impression; a sixth-section blob looping forever is
 * motion with nothing to say, and it costs a compositor layer for the whole
 * scroll.
 */
.tcs-cred__blob {
	position: absolute;
	top: calc(var(--tcs-cred-blob-size) / -2.9);
	right: calc(var(--tcs-cred-blob-size) / -4.3);
	width: var(--tcs-cred-blob-size);
	height: var(--tcs-cred-blob-size);
	border-radius: var(--tcs-radius-full);
	/*
	 * color-mix, not rgba(): the alpha stop has to be derived FROM
	 * --tcs-orange rather than from a second spelling of #F7931A, or the two
	 * drift the day the accent moves. This is the convention hero.css:127-131
	 * set for every blob in the system.
	 */
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--tcs-orange) var(--tcs-cred-blob-pct), transparent) 0%,
		color-mix(in srgb, var(--tcs-orange) 0%, transparent) 68%
	);
	filter: blur(var(--tcs-blob-blur));
	pointer-events: none;
}

/*
 * The two-column layout: a fixed 300px eyebrow rail against the content.
 * `position: relative` lifts the content above the blob without a z-index
 * war — the blob is earlier in the source, so a positioned sibling wins.
 */
.tcs-cred__inner {
	position: relative;
	display: grid;
	grid-template-columns: var(--tcs-cred-label-col) minmax(0, 1fr);
	gap: var(--tcs-cred-col-gap);
	align-items: start;
}

/*
 * The eyebrow. --tcs-orange on black is 8.51:1, well clear of AA at 12px, and
 * the +.13em tracking is the system's only positive tracking — it is what
 * makes 12px uppercase legible rather than cramped. The 10px offset is the
 * board's: it optically aligns the eyebrow's cap height with the headline's.
 */
.tcs-cred__eyebrow {
	padding-top: 10px;
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-orange);
}

.tcs-cred__body {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-cred-stack-gap);
	min-width: 0;
}

/*
 * 46px, not the 54px --tcs-fs-h2, and -.038em, not -.040em. Both are the
 * board's own values for a headline that sits in a column rather than
 * spanning the band: at 54px it wraps to four lines here and the figure cards
 * below lose their relationship to it. No `color` — .tcs-band--black already
 * resolves headings to --tcs-cream (17.24:1).
 */
.tcs-cred__headline {
	margin: 0;
	max-width: var(--tcs-cred-headline-max);
	font-size: var(--tcs-fs-credibility-h2);
	font-weight: var(--tcs-fw-semibold);
	line-height: var(--tcs-lh-credibility-h2);
	letter-spacing: var(--tcs-ls-credibility-h2);
}

.tcs-cred__prose {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tcs-cred-prose-gap);
}

/*
 * The two body paragraphs. --tcs-body-dark is inherited from the band rather
 * than restated; only the size and leading are this band's, and 16.5px is the
 * board's (Main.dc.html:400) rather than the system's 17px body.
 */
.tcs-cred__copy {
	margin: 0;
	font-size: var(--tcs-fs-cred-copy);
	line-height: var(--tcs-lh-cred-copy);
}

/*
 * The emphasised word. --tcs-cream at weight 600 with `font-style: normal` —
 * the <em> is there for the SEMANTIC stress, and the board expresses that
 * stress with weight and brightness rather than italics. 17.24:1 on black.
 */
.tcs-cred__emph {
	font-style: normal;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-cream);
}

/* ---------------------------------------------------------------------------
 * 5a. The three figure cards — Main.dc.html:409-419.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * THE FIGURES ARE TEXT. THERE IS NOTHING HERE THAT COULD ANIMATE THEM.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * epic-2-context.md: "Statistics render their final value as literal text in
 * markup. A counter capable of displaying 0 is a defect — this is a live bug
 * on the current site." So `1,200`, `1,300` and `8` are characters in the
 * response body, and this file gives them a size, a weight and a colour and
 * nothing else. No keyframe touches .tcs-figure__value, no transition is
 * declared on it, and there is no width or clip a script could sweep. The card
 * gets the shared .tcs-card hover lift and the shared .tcs-reveal fade, both
 * of which move the CARD; neither can change what the figure says.
 * ------------------------------------------------------------------------- */

.tcs-cred__figures {
	display: grid;
	/*
	 * repeat(3, minmax(0, 1fr)), never a bare 1fr: the captions are prose
	 * ("chapters, rewritten around reader questions"), and a bare fr's
	 * implicit auto min-width would let the longest of them widen its column
	 * past its third and push the row sideways.
	 */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tcs-figure-card-gap);
	padding-top: 12px;
}

/*
 * NO TRANSITION AND NO TRANSFORM HERE. .tcs-card (motion.css:330-349) owns
 * the hover lift and its shadow, and comparison.css is enqueued after
 * motion.css so this rule can add to it without needing to restate it. A
 * `transition` shorthand written here would silently reset transition-delay to
 * 0s and kill the three-card reveal stagger — the exact failure mode
 * functions.php documents for the chapter cards.
 */
.tcs-figure {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-figure-gutter);
	padding: var(--tcs-figure-card-pad);
	background: var(--tcs-panel);
	border: var(--tcs-border-width) solid var(--tcs-border-dark);
	border-radius: var(--tcs-radius-figure-card);
	min-width: 0;
}

/*
 * The figure itself. --tcs-cream on --tcs-panel is 16.45:1; at 34px it needs
 * only 3:1 as WCAG large text, so it clears the floor five times over. The
 * -.04em tracking is the h2's, because a 34px numeral at default tracking sits
 * loose beside a 13.5px caption.
 */
.tcs-figure__value {
	font-size: var(--tcs-fs-figure);
	font-weight: var(--tcs-fw-semibold);
	line-height: 1;
	letter-spacing: var(--tcs-ls-h2);
	color: var(--tcs-cream);
}

/*
 * The `+` is TYPOGRAPHY, NOT ARITHMETIC. It carries the under-claim
 * convention — 1,200+ against 1,248 actual, 1,300+ against 1,303 — and the
 * accent colour is what makes it read as part of the claim rather than a
 * stray character. --tcs-orange on --tcs-panel is 8.08:1; as part of a 34px
 * run it needs 3:1. The third card has no plus, correctly: `8` is exact.
 */
.tcs-figure__plus {
	color: var(--tcs-orange);
}

/*
 * The caption. The artboard uses --tcs-muted (#8B877D), and unlike the
 * comparison table that is CORRECT here: #8B877D is a light grey on a near
 * black panel and measures 5.18:1, comfortably AA. The colour only fails on
 * LIGHT grounds, which is why tokens.css:517-522 splits --tcs-label-on-white
 * off from it rather than editing the shipped value. The band's own
 * --tcs-body-dark would also pass at 7.48:1; --tcs-muted is used because the
 * caption is a label under a figure, not body copy, and the board draws it as
 * the quieter of the two.
 *
 * 13.5px clears the 12px interface-text floor.
 */
.tcs-figure__caption {
	font-size: var(--tcs-fs-figure-caption);
	line-height: var(--tcs-lh-figure-caption);
	color: var(--tcs-muted);
}

/* ===========================================================================
 * 6. MOBILE — a designed state, not a reflow.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * THERE IS NO ARTBOARD FOR EITHER BAND AT THIS WIDTH
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Both sections are absent from HomeMobile.dc.html, and EXPERIENCE.md:244
 * records that as EXPECTED — the mobile board predates the home-page
 * expansion. So there is no board to honour here and none being contradicted;
 * the mobile state is designed, following the precedent story 2.3 set when it
 * hit the same gap. What it is designed to is written below so a later reader
 * knows which decisions were forced and which were chosen.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * THE TABLE BECOMES FIVE CARDS, AND ALL FIVE SHIP
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * A three-column grid cannot hold prose at 390px. "Often anonymous, often
 * selling something" in a ~110px column wraps to five lines against a
 * one-line neighbour and the row stops being readable as a comparison. So each
 * row becomes its own card: the label as its heading, then the two answers
 * stacked with their column name inline above each.
 *
 * ALL FIVE ROWS SURVIVE. Dropping the fifth would delete the concession —
 * "Free, plus your time" is the row that makes the other four credible — and
 * the product brief says most buyers arrive on a phone, so a row hidden here
 * is a row hidden from the majority of readers. The gate asserts five at 390.
 *
 * THE COLUMN HEADERS REPEAT PER CARD. Once the table is a stack, a single
 * header row scrolled far above five cards leaves every cell unlabelled —
 * "Weeks of collecting fragments" with nothing saying which route that is. The
 * inline headers ship in the markup at both widths (a media query cannot
 * invent text) and exactly one set displays at each, so a screen reader hears
 * each cell's column named once either way: the desktop header row is
 * `display: none` here, which removes it from the accessibility tree, and the
 * inline heads are aria-hidden so their visible label is not announced twice
 * over the roles the markup already carries.
 *
 * THE FIGURES GO THREE-UP AT 26px. They stay in one row rather than stacking:
 * three figures read as a set, and stacked they read as three unrelated
 * claims. 26px is the nearest mobile analogue on the board for a stat row,
 * and at 390px three 26px figures fit their columns with the captions
 * wrapping under them.
 * ========================================================================= */

@media (max-width: 768px) {

	/* ── The comparison head stacks. ────────────────────────────────────── */

	.tcs-compare__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		margin-bottom: 28px;
	}

	.tcs-compare__headline {
		font-size: var(--tcs-fs-h2-mobile);
		line-height: var(--tcs-lh-h2-mobile);
		letter-spacing: var(--tcs-ls-h2-mobile);
	}

	.tcs-compare__lede {
		max-width: none;
		font-size: var(--tcs-fs-body-sm);
	}

	/* ── The table becomes a stack of five cards. ───────────────────────── */

	/*
	 * The grid, the white fill, the border and the clip all come off: each
	 * row is its own card now, and a wrapper border around five cards would
	 * draw a box that means nothing.
	 */
	.tcs-compare__table {
		display: flex;
		flex-direction: column;
		gap: var(--tcs-figure-card-gap);
		background: none;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	/*
	 * The desktop header row goes, and `display: none` is deliberate over
	 * visibility or clipping: it must leave the accessibility tree too, or a
	 * screen reader announces the column names once at the top and again
	 * inside every card.
	 */
	.tcs-compare__headrow {
		display: none;
	}

	/*
	 * The row wrapper stops being `display: contents` and becomes the card.
	 * This is the whole reason the wrapper exists in the markup rather than
	 * the row being three loose cells: there would be nothing to make a card
	 * out of.
	 */
	.tcs-compare__row {
		display: flex;
		flex-direction: column;
		background: var(--tcs-white);
		border: var(--tcs-border-width) solid var(--tcs-border);
		border-radius: var(--tcs-radius-compare-table);
		overflow: hidden;
	}

	/*
	 * Cells stack. The vertical column rules become horizontal card rules —
	 * the border that separated columns now separates the two answers, which
	 * is the same relationship expressed for a stack.
	 */
	.tcs-compare__cell {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
		border-right: 0;
		border-bottom: var(--tcs-border-width) solid var(--tcs-compare-row-rule);
	}

	.tcs-compare__row .tcs-compare__cell:last-child {
		border-bottom: 0;
	}

	/*
	 * The label becomes the card's heading: on the inset fill so it reads as
	 * a header band rather than a first answer.
	 */
	.tcs-compare__cell--label {
		background: var(--tcs-cream-2);
		font-size: var(--tcs-fs-compare-label);
		font-weight: var(--tcs-fw-semibold);
	}

	/*
	 * The inline column headers appear. --tcs-label-on-white is 4.87:1 on
	 * white and 4.31:1 on the book tint — both AA at 12px, and the +.09em
	 * tracking is what keeps a 12px uppercase label from reading as a smudge.
	 */
	.tcs-compare__inline-head {
		display: block;
		font-size: var(--tcs-fs-eyebrow);
		font-weight: var(--tcs-fw-semibold);
		letter-spacing: 0.09em;
		text-transform: var(--tcs-tt-eyebrow);
		color: var(--tcs-label-on-white);
	}

	/*
	 * The free cell's VALUE keeps the AA-safe colour; its inline head has it
	 * already. Scoping the colour to the value rather than the cell means the
	 * two can never disagree.
	 */
	.tcs-compare__cell--free .tcs-compare__value {
		color: var(--tcs-label-on-white);
	}

	/*
	 * THE BOOK COLUMN'S INLINE HEAD IS NOT --tcs-amber, AND THE HOVER SWEEP
	 * IS WHY.
	 *
	 * --tcs-amber (#B8730C) is the system's LINK colour on light grounds and
	 * it measures 3.82:1 on white — fine for the 3:1 non-text floor a stroked
	 * tick has to clear, and a REAL FAILURE for 12px text. On the book tint
	 * it is worse still at 3.56:1. The desktop tick escapes because a stroke
	 * is a graphical object; this label is text and does not.
	 *
	 * --tcs-amber-numeral-aa (#75592C) is the same amber darkened for exactly
	 * this class of use — tokens.css introduced it when the chapter numeral
	 * landed 0.08 short — and it reads 6.08:1 on the tint. The column still
	 * reads as the warm, affirmative one; only the failing value is replaced.
	 */
	.tcs-compare__cell--book .tcs-compare__inline-head {
		color: var(--tcs-amber-numeral-aa);
	}

	/*
	 * THE CELLS KEEP OPAQUE GROUNDS ONCE THE TABLE'S WHITE FILL IS GONE.
	 *
	 * At desktop the table itself is white and every cell inherits that. The
	 * mobile stack moves the fill onto the row card — so without this the
	 * free cell would sit on whatever shows through, which is the band's
	 * --tcs-cream, where --tcs-label-on-white measures 4.31:1 and misses AA
	 * by 0.19. Giving each cell its own ground is what keeps the measured
	 * pairing the same one the desktop table was designed against.
	 */
	.tcs-compare__cell--free {
		background: var(--tcs-white);
	}

	/*
	 * The hover indent has no meaning on a touch device and would fire on tap
	 * as a stuck state. The wash stays — it is harmless and still identifies
	 * a focused card for a keyboard user on a narrow window.
	 */
	.tcs-compare__row.tcs-row:hover .tcs-compare__cell--label,
	.tcs-compare__row.tcs-row:focus-within .tcs-compare__cell--label {
		padding-left: var(--tcs-compare-cell-pad-x);
	}

	/*
	 * THE ROW ITSELF, NOT JUST THE LABEL CELL (code-review fix, 2026-09-04).
	 * .tcs-compare__row stops being `display: contents` above and becomes the
	 * card's own box — which means motion.css's base `.tcs-row:hover` /
	 * `:focus-within` rule (background wash + 12px padding-left, aimed at a
	 * `display: contents` wrapper that paints nothing at desktop) now paints
	 * for real on the card element itself: the whole card shifted ~12px right
	 * and showed a flat, unlayered wash clipped to the card's border-radius,
	 * layered on top of the per-cell wash the unscoped rule above already
	 * applies correctly. The cells carry the affordance; the card box does
	 * not need its own. Restored to the resting card fill with no indent —
	 * higher specificity than motion.css's rule wins regardless of stylesheet
	 * order.
	 */
	.tcs-compare__row.tcs-row:hover,
	.tcs-compare__row.tcs-row:focus-within {
		background: var(--tcs-white);
		padding-left: 0;
	}

	/* ── The credibility band stacks to one column. ─────────────────────── */

	.tcs-cred__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.tcs-cred__eyebrow {
		padding-top: 0;
	}

	.tcs-cred__headline {
		font-size: var(--tcs-fs-h2-mobile);
		line-height: var(--tcs-lh-h2-mobile);
		letter-spacing: var(--tcs-ls-h2-mobile);
	}

	/* Two prose columns at 390px would be two 165px columns of 16.5px type. */
	.tcs-cred__prose {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.tcs-cred__copy {
		font-size: var(--tcs-fs-body-sm);
		line-height: var(--tcs-lh-body-sm);
	}

	/*
	 * THREE-UP, NOT STACKED. The three figures are one claim about the same
	 * product and reading them as a row is what makes them a set. The gutter
	 * tightens and the padding comes in so three columns fit 350px of
	 * content; the captions wrap under their figures, which is expected.
	 */
	.tcs-cred__figures {
		gap: 8px;
		padding-top: 4px;
	}

	.tcs-figure {
		padding: 14px 12px;
		gap: 6px;
	}

	.tcs-figure__value {
		font-size: var(--tcs-fs-figure-mobile);
	}

	.tcs-figure__caption {
		font-size: var(--tcs-fs-eyebrow);
	}
}