/* ═════════════════════════════════════════════════════════════════════════════
 * COMPARE US — Build-19's `Site - Compare Us.dc.html`
 *
 * Two compositions and one page-scoped colour. Everything else on the page already
 * existed: the ruled column, .fc-split-13, .fc-stack, .fc-display-hero, .fc-copy,
 * .fc-eyebrow, .fc-btn--violet, and the whole of .fc-faq — which is in pages.css and
 * which this file declares as its dependency in inc/ds.php.
 *
 * WHAT IS IN HERE
 *   · THE HERO's ink surface, its looser display leading and its mark.
 *   · THE MATRIX, which is the page: six columns of prose over four bands, pinned to
 *     the viewport while the bands slide up over one another.
 *
 * WHAT IS DELIBERATELY NOT IN HERE
 *   · A SECOND .fc-matrix. That class is the Knowledge Hub's hairline table frame and
 *     three pages use it. This is .fc-compare, and the two share nothing but the idea.
 *   · A GLOBAL VIOLET-ON-INK MARK. layout.css's INLINE EMPHASIS block states the rule
 *     — violet type is surface-dependent, .fc-mark is for bone and .fc-mark--dark is
 *     for ink — and argues against a fourth variant on one caller. So the hero's mark
 *     is page-scoped. The day a second page wants it, that is the promotion.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE HERO
 * The one ink section on the page, so it carries .fc-ruled--dark in the markup and
 * the nav goes dark above it — see fluent_commerce_ds_nav_tone().
 *
 * THE LEADING IS THE DESIGN'S 1.32 AND NOT --lh-flush, and that is worth stating
 * because the pricing page solved a neighbouring collision the other way. A .fc-mark at
 * display size paints its wash over the descenders of the line above it; pricing.css
 * fixes that with isolation + z-index:-1 and keeps the flush leading, because its
 * composition is a three-line hero that cannot afford a third of a line of extra
 * space. This hero can afford the 1.32, and at 1.32 nothing in this heading has a
 * descender under the wash — so no stacking context is introduced here.
 *
 * The mark's own wrap is a different problem with the same cause, and it is solved
 * below rather than here. See THE MARK'S VERTICAL PADDING IS ALL THERE IS.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-compare-hero {
	background: var(--surface-dark);
	color: var(--text-on-dark);
}

body.fc-ds .fc-compare-hero__title {
	line-height: 1.32;
	color: var(--text-on-dark);
}

/*
 * The third mark. #9747FF on #23193A in the export, which measures 3.65:1 — under the
 * 4.5:1 body threshold and comfortably over the 3:1 one that applies at 72px, which is
 * the only size this is ever used at. Do not reuse it at body size.
 *
 * The tint is written as the brand violet at 16.5% rather than as #23193A, because that
 * is what #23193A IS: --fc-violet over --fc-ink-12 at 0.165 resolves to #23193A to the
 * byte in all three channels. One number to change if the violet ever moves, instead of
 * a hex that would quietly stop matching.
 *
 * ── THE MARK'S VERTICAL PADDING IS ALL THERE IS ─────────────────────────────
 *
 * "Order Management" is two words and it wraps, at every width from 1101 up. What an
 * inline background fills is not the line box, it is the font's CONTENT AREA — and for
 * Instrument Serif that area is 1.3013em, measured. The line box at 1.32 is 1.32em. So
 * the whole vertical budget between one fragment's wash and the next one's is 0.0187em,
 * and the export's 0.06em / 0.1em spends eight times it: the two bands overlapped by
 * 8.6px at 1440, and because the wash is semi-transparent that strip doubled to roughly
 * 0.30 alpha and read as a seam drawn through the phrase.
 *
 * So the vertical padding is 0.018em, spent at the bottom where the export puts the
 * heavier half — it still sits the band slightly low against the baseline, and the two
 * fragments now abut within half a pixel at every width the title wraps at. The export's
 * horizontal 0.12em is untouched; it costs nothing.
 *
 * Two things were rejected. A looser leading (1.3013 + 0.16 = 1.47) would have kept the
 * export's padding by changing its composition, which is the trade pricing.css already
 * argued against. An opaque #23193A would have hidden the doubling without removing the
 * overlap, and would have started painting over the line above the moment the copy gained
 * a descender there.
 */
body.fc-ds .fc-compare-hero__mark {
	color: var(--fc-violet-bright);
	background: rgba(121, 61, 255, 0.165);
	padding: 0 0.12em 0.018em;
	/* Without this a phrase that wraps gets a padded box per line fragment. */
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

body.fc-ds .fc-compare-hero__copy {
	max-width: 560px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE SECTION HEAD
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-compare-options__head {
	max-width: 820px;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * THE MATRIX
 * Six options across, four bands down, pinned to the viewport while the bands
 * slide up over one another.
 *
 * THE TRACKS ARE NOT THE EXPORT'S. The design's 1320px table does not fit the 1120px
 * ruled column, so it was refitted rather than left to scroll — see THE KNOBS below,
 * which is where the numbers and the reasoning are.
 *
 * THE HEAD ROW APPEARS FOUR TIMES, NOT ONCE. The real one is the <thead>; the other three
 * are aria-hidden copies at the top of bands two, three and four, and they show only while
 * the section is NOT pinned, which is the state in which those bands are four separate
 * tables. See THE HEAD ROW, AGAIN below.
 *
 * IT IS A <table>, AND THEN IT IS A GRID. The table is for the reader with a screen
 * reader: twenty-four cells of prose need their row and column headers, which is what
 * scope="col" / scope="row" give and what a stack of divs cannot. The grid is for the
 * animation: a <tbody> cannot be stacked on its siblings while it is a
 * table-row-group. Overriding display on a table box strips its implicit ARIA role, so
 * inc/ds-compare.php writes every role back explicitly. Both halves are load-bearing;
 * neither works alone.
 *
 * THE RULE SYSTEM, stated once, and it is the design's own. Every band is a bounded
 * run of six cells: each category cell draws top, left and bottom, and the sixth also
 * draws right. Nothing else draws anything — not the label column, not the empty
 * corner, not the question strips — so the left margin stays open and no seam is ever
 * doubled. The design needs a `:first-child { box-shadow: none }` to exempt the label;
 * here .fc-compare__cell is only ever on the six, so there is nothing to exempt.
 *
 * The rules are inset shadows and not borders, for a reason that only shows up once the
 * bands move: a border adds a pixel to the box, and a band whose cells are each 1px
 * taller than the head row's no longer lines up with it as it slides past. An inset
 * shadow costs no layout.
 *
 * THE FOUR THINGS THE SCRIPT DOES NOT DO are in the head of assets/ds/compare.js. The
 * short version, because it explains the arithmetic below: compare.js sets data-pin
 * once and writes ONE custom property, --fc-compare-t, which is the fractional clock
 * — 0 when no band has moved, 3 when the last of four has arrived. Every transform on
 * this page is derived here, from that number and the band's own static index.
 * ════════════════════════════════════════════════════════════════════════════ */
body.fc-ds .fc-compare {
	/*
	 * ── THE KNOBS, AND WHY THEY ARE NOT THE EXPORT'S ────────────────────────
	 *
	 * The design's tracks are 120 + six 200s with 20px cells, which is a 1320px table.
	 * The ruled content column is 1120px at 1440 — so as drawn, the sixth option, the
	 * ANSWER, began off the right edge on every laptop, and the first thing a reader had
	 * to do with the page's central argument was discover it could be scrolled.
	 *
	 * So the table was refitted to the column instead, on request, 2026-08-27: the tracks
	 * came in to 140, the cells to the --sp- scale's 16, and the copy to --fc-compare-size
	 * below. 120 + six 140s is 960, and minmax(140px, 1fr) means that is a FLOOR and not a
	 * width — at 1440 the six share the full 1120 and land on 167 each, wider than the
	 * floor and narrower than the design's 200. The table fits the column from about 1280
	 * up, which is every laptop this page will be read on.
	 *
	 * --min is still the floor below which the panel scrolls sideways rather than squeeze
	 * the copy further, because six columns of prose genuinely do not fit every width and
	 * a sideways scroll is the honest answer rather than a failure. That now only happens
	 * between 1101 and roughly 1280, where it used to happen everywhere. knowledge.css
	 * says the same thing about the Hub's seven-column tables.
	 *
	 * 12 stays a literal for the reason --matrix-pad is one: there is no 12 on the --sp-
	 * scale and a cell is not a block. 16 is on the scale, so it is the token.
	 */
	--fc-compare-label: 120px;
	--fc-compare-col: 140px;
	--fc-compare-min: 960px;
	--fc-compare-pad: var(--sp-16);
	--fc-compare-label-pad: 12px;
	/*
	 * THE CELL SIZE, and it is the one number on this page below the brand's reading
	 * scale. See THE CELLS for the whole argument; the short version is that 15px is
	 * tokens.css's own value for --type-body-15, "the smallest body size the brand
	 * allows", and what this skips is only the +2 reading-size bump layout.css adds on
	 * top of it — a bump made for paragraphs read at length, not for a cell in a
	 * six-column table that has to fit one screen.
	 */
	--fc-compare-size: 15px;
	--fc-compare-rule: var(--fc-ink-a20);
	/*
	 * Where the panel parks. The export hard-codes 100px; this reads the nav's own height
	 * so the table stops under the bar rather than 10px above or below it, on a page where
	 * the bar is 90 tall at desktop and 76 on a phone.
	 */
	--fc-compare-top: calc(var(--nav-height, 90px) + 16px);
	/*
	 * How much scroll one band costs. A floor of 320 so the animation is never so fast it
	 * reads as a jump, and then proportional to the viewport so a tall window does not have
	 * to scroll four screens to get through it. svh and not vh: on a phone the mobile
	 * toolbars are in and out of the calculation constantly, and this must not resize.
	 * Unused unless the pin engages.
	 */
	--fc-compare-step: max(320px, 46svh);

	margin-top: var(--sp-72);
}

/*
 * The frame is focusable, because a region that only a mouse can scroll is a region a
 * keyboard cannot read. role and tabindex are in the markup; compare.js takes the tab
 * stop away again when there is nothing to scroll. The ring is drawn outside the frame
 * so the frame's own overflow cannot clip it.
 */
body.fc-ds .fc-compare__panel {
	/*
	 * x auto, y hidden. Leaving y to compute to auto — which a single non-visible axis
	 * makes it do — would put a vertical bar on the panel the first time a font rounded
	 * the pinned grid a pixel taller than the row it was measured into.
	 */
	overflow: auto hidden;
	overscroll-behavior-x: contain;
	/*
	 * The bar stays, unlike the diagram row on Order Management. There the design has no
	 * scrollbar and rail.js takes it away; here overflow-x: auto IS the design's answer,
	 * and on a table the bar is the one cue that says a sixth column exists. Thin and in
	 * the hairline ink so it reads as part of the frame.
	 */
	scrollbar-width: thin;
	scrollbar-color: var(--fc-ink-a20) transparent;
}

body.fc-ds .fc-compare__panel:focus-visible {
	outline: 2px solid var(--fc-violet);
	outline-offset: 4px;
}

/*
 * ── GRAB AND DRAG ───────────────────────────────────────────────────────────
 *
 * House rule: anything that moves sideways moves under the pointer, not only under a
 * bar. This mattered more before the table was refitted, when six columns at the
 * design's 1320px never fit a laptop and the answer column always began off the right
 * edge; the floor is now 960 and the common case is that nothing scrolls at all. It is
 * kept for the widths where it still does — roughly 1101 to 1280 — because a bar at the
 * bottom of a 500px-tall band is a long way from the thing you want to move.
 *
 * Both classes come from compare.js and only where Pointer Events exist, so the failure
 * state is an ordinary scroller with a bar, exactly as the design ships it. .is-grab
 * also only arrives while the panel actually overflows — a table that fits is not
 * something to offer to drag, which is now most of the time.
 */
body.fc-ds .fc-compare__panel.is-grab {
	cursor: grab;
}

body.fc-ds .fc-compare__panel.is-dragging {
	cursor: grabbing;
	/* Or the pull paints a selection across six cells of body copy. */
	user-select: none;
}

body.fc-ds .fc-compare__table {
	display: grid;
	min-width: var(--fc-compare-min);
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
}

/*
 * A <thead> or <tbody> that is a grid item is blockified from table-header-group /
 * table-row-group anyway. Stated so it reads as intended rather than inherited.
 */
body.fc-ds .fc-compare__headrow,
body.fc-ds .fc-compare__band {
	display: block;
}

/*
 * The tracks, declared on the two row types rather than on the table, because with
 * display:grid on the table the rows are the grid containers and the columns no longer
 * come from a table column context.
 *
 * --fc-compare-n is written into the markup by inc/ds-compare.php from the number of
 * categories, so a seventh option needs no change in here. The 6 is the fallback for a
 * page whose markup predates the property.
 *
 * THREE ROW TYPES SHARE THEM, and .fc-compare__repeat is named here rather than being
 * given .fc-compare__row in the markup: it is a copy of the head row that sits inside a
 * band, so a rule written later for the data rows should not find it.
 */
body.fc-ds .fc-compare__headrow > tr,
body.fc-ds .fc-compare__repeat,
body.fc-ds .fc-compare__row {
	display: grid;
	grid-template-columns:
		var(--fc-compare-label)
		repeat(var(--fc-compare-n, 6), minmax(var(--fc-compare-col), 1fr));
}

/* One cell spanning the band, so it wants no tracks. */
body.fc-ds .fc-compare__qrow {
	display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CELLS
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-compare__cell {
	padding: var(--fc-compare-pad);
	background: var(--fc-white);
	box-shadow:
		inset 1px 0 0 var(--fc-compare-rule),
		inset 0 1px 0 var(--fc-compare-rule),
		inset 0 -1px 0 var(--fc-compare-rule);
}

/* The sixth closes the band on the right. */
body.fc-ds .fc-compare__cell:last-child {
	box-shadow:
		inset 1px 0 0 var(--fc-compare-rule),
		inset 0 1px 0 var(--fc-compare-rule),
		inset 0 -1px 0 var(--fc-compare-rule),
		inset -1px 0 0 var(--fc-compare-rule);
}

/* The answer's column, washed for its whole height. One category has this flag. */
body.fc-ds .fc-compare__cell--answer {
	background: var(--fc-violet-wash);
}

/*
 * ── THE CELL SIZE IS THE TABLE SIZE ─────────────────────────────────────────
 *
 * 20px as built, then 17, now 15, twice on request as the table was fitted to its column.
 * The tokens do not read as those numbers, so it is worth writing down what happened.
 *
 * layout.css sets the three body tokens two pixels above the export's, as a site-wide
 * reading-size decision: --type-body-18 resolves to 20px, --type-body-16 to 18 and
 * --type-body-15 to 17. This started on --type-body-18, which is to say 20px — a size that
 * file reserves for leads and kickers — for twenty-four cells of prose. --type-body-15 took
 * it to 17, the step layout.css describes as "copy inside a card, a table, a panel".
 *
 * 15px is one step further and is the only type on this page outside that scale, so: it is
 * exactly tokens.css's literal --type-body-15, described there as "the smallest body size
 * the brand allows". What it declines is the +2 bump, and the bump's own reasoning is why —
 * it was made so a paragraph read at length would not shrink with the window. A cell in a
 * six-column comparison table is not read at length; it is scanned across, and the reason
 * it is scanned across is that all six have to be on screen at once. Set at 17 the table
 * could not do that inside 1120px without the columns going narrower than the copy.
 *
 * It is a page-scoped custom property rather than a bare 15px so the whole table has one
 * number to change, and so nothing reads it as a new global step.
 *
 * A side effect, deliberate: five pixels off twenty-four cells is a much shorter tallest
 * band, which is what the pin gate in compare.js measures. Laptops that fell back to the
 * plain table now pin. Nothing had to change for that.
 */
body.fc-ds .fc-compare__copy {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-medium);
	font-size: var(--fc-compare-size);
	/* The design's 1.5, not --lh-body's 1.4: a 200px column needs the extra leading. */
	line-height: var(--lh-loose);
	color: var(--text-on-light);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE COLUMN HEADS
 * A grotesk semibold, bottom-aligned in a 110px band so six names of one, two and
 * four lines all sit on the same line above the table.
 *
 * The design sets these at 24. They are set at --type-body-16, which the override layer
 * resolves to 18px flat — two steps down, taken with the cells as the table was fitted to
 * its column. The Hub's own comparison table is the precedent for a head at body size:
 * see .fc-matrix__head in knowledge.css, "bold grotesk at body size, which the design
 * sets and no type role carries". Semibold here rather than that table's bold, which is
 * this design's own weight.
 *
 * 18 over the cells' 15 is the step that has to survive, because these six names are the
 * table's only structure — going to 15 as well would leave the head row reading as a
 * fifth band. It does not need to be 24 to do that.
 *
 * The 110px band is left alone. The longest name is three lines at 140px, and 3 × 18 ×
 * 1.3 is 70 — so it fits with room, and the band is what keeps six names of one, two and
 * three lines sharing a single baseline above the rules.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-compare__head {
	display: flex;
	align-items: flex-end;
	min-height: 110px;
}

body.fc-ds .fc-compare__headtext {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: var(--type-body-16);
	line-height: var(--lh-snug);
	text-wrap: pretty;
}

/* The answer, named in the brand's own violet with white on it. */
body.fc-ds .fc-compare__head--answer {
	background: var(--fc-violet);
	color: var(--fc-white);
}

/*
 * ── THE HEAD ROW, AGAIN, AT THE TOP OF EVERY BAND BUT THE FIRST ─────────────
 *
 * Added on request, 2026-08-27. Unpinned the four bands read as four stacked tables and
 * only the first had the six names over it; by the fourth you are reading six paragraphs
 * with no idea which option each belongs to. inc/ds-compare.php repeats the row inside
 * bands two, three and four, aria-hidden, after the question strip. Everything about how
 * it looks is inherited from .fc-compare__head / .fc-compare__headtext above — one table,
 * one set of column names, one place to restyle them.
 *
 * THE 110px BAND DOES NOT COME WITH IT. Up top that height is the air the design puts
 * between the section heading and the table, and it is what lets six names of one, two and
 * three lines share a baseline. In a band the question strip is already the air, and the
 * six cells of a grid row are equal-height regardless — so flex-end alone still lands all
 * six names on one line, and 110px would only open a gap under a heading that already has
 * one. Height here is the tallest name.
 */
body.fc-ds .fc-compare__repeat .fc-compare__head {
	min-height: 0;
}

/*
 * The empty corner and the label column carry no surface and no rule: the bone shows
 * through, which is what keeps the left margin open and the six cells reading as a
 * bounded band rather than as a seven-column table with a blank first column.
 */
body.fc-ds .fc-compare__corner {
	padding: 0;
}

body.fc-ds .fc-compare__label {
	display: flex;
	align-items: flex-start;
	/* The eyebrow's own --lh-snug is the design's 1.3; it needs no restating. */
	padding: var(--fc-compare-pad) var(--fc-compare-label-pad);
	color: var(--text-on-light);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE QUESTION STRIPS
 * Three of the four bands open with the question that band answers. The first does
 * NOT — "What it is" is the table's legend, not a question — which is exactly why the
 * strip lives inside the band. A synchronised layer above the stack would have to be
 * empty for band one, and then every band's cells would start at the wrong height.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-compare__question {
	padding: var(--sp-32) var(--sp-24) var(--sp-24);
}

body.fc-ds .fc-compare__qtext {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--type-display-40);
	line-height: var(--lh-flush);
	letter-spacing: var(--ls-display);
	color: var(--fc-violet);
	text-wrap: pretty;
}

/*
 * The standfirst under a question. One band has one — "That depends who 'you' are, see
 * below." moved down here from under the section's h2 on 2026-08-27 — and this rule is
 * written for that shape: a single line of ink under a violet serif question.
 *
 * It restates .fc-copy rather than the markup carrying that class, because this <p> is
 * inside a <td> that display:grid has blockified along with the rest of the table, and
 * .fc-copy's own selector is on the page's prose. Copying five declarations keeps the
 * question strip self-contained in this file, which is where the strip already lives.
 *
 * The 16 above it is --sp-16 and not the strip's own padding: the cell's bottom padding
 * (--sp-24, and --sp-32 on top) is the space between the strip and the cells below it,
 * and that gap should not change just because one band gained a second line.
 */
body.fc-ds .fc-compare__qsub {
	margin: var(--sp-16) 0 0;
	max-width: 620px;
	font-family: var(--font-core);
	font-weight: var(--fw-medium);
	font-size: var(--type-body-16);
	line-height: var(--lh-loose);
	color: var(--text-on-light);
	text-wrap: pretty;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * THE PIN
 * Everything below is inside [data-pin="1"], which ONLY assets/ds/compare.js ever
 * sets. Script blocked, reduced motion, a narrow window, a short window, a JS error
 * — and the section is what it is above: a complete table with the questions
 * interleaved, reading top to bottom. That is the design's own fallback, not a
 * degraded one, and it is the state the markup ships in.
 *
 * THE ARITHMETIC. --fc-compare-i is the band's index, written into the markup once.
 * --fc-compare-t is the clock, written by the script and inherited. A band's offset is
 * clamp(0, i - t, 1): still fully down at 1 while the clock is a band or more behind
 * it, fully arrived at 0 once the clock passes it, and interpolating in between. Times
 * 100% of its own height, which is why nothing here needs measuring.
 * ════════════════════════════════════════════════════════════════════════════ */
/*
 * The travel, and the whole scroll budget the animation gets. One step per band after the
 * first, laid under the sticky panel — so the wrapper is taller than the panel by exactly
 * the distance the clock has to run, and the script can read the progress off two
 * offsetHeights instead of computing a height and writing it back.
 *
 * IT HAS TO BE A BOX AND NOT PADDING. A sticky box travels within its CONTAINING BLOCK,
 * and the containing block a block container establishes is its content box — padding is
 * outside it. Written as padding-bottom the wrapper grew by 1490px and the panel's range
 * stayed exactly its own height, so it never left its static position and the clock ran
 * with nothing pinned: the whole section scrolled past and the bands changed on the way.
 * An ::after is in flow, so it extends the content box, which is the thing sticky reads.
 */
body.fc-ds .fc-compare[data-pin="1"]::after {
	content: '';
	display: block;
	height: calc((var(--fc-compare-bands, 4) - 1) * var(--fc-compare-step));
}

body.fc-ds .fc-compare[data-pin="1"] .fc-compare__panel {
	position: sticky;
	top: var(--fc-compare-top);
}

body.fc-ds .fc-compare[data-pin="1"] .fc-compare__table {
	/*
	 * Two rows: the heads, then one row that every band shares. `auto` on the second
	 * sizes it to the TALLEST band, and the bands stretch into it — which is how the
	 * stack auto-sizes with nothing measured and no height written anywhere.
	 */
	grid-template-rows: auto auto;
	/* The clip. A band pushed a full 100% down is entirely below this edge. */
	overflow: hidden;
}

body.fc-ds .fc-compare[data-pin="1"] .fc-compare__headrow {
	grid-row: 1;
	grid-column: 1;
	/* Above every band, whatever their indices climb to. */
	z-index: 99;
}

/*
 * AND THE REPEATS GO. Pinned, that head row is a fixed layer above the stack and every
 * band slides in underneath it — there is one table on screen, its names are always
 * overhead, and a second copy inside the band would print them twice at once. The repeats
 * exist for the state where the bands are four separate tables; here they are one.
 *
 * The measurement order makes this free. compare.js sets data-pin="1" BEFORE it measures,
 * so the panel it gates on is already the pinned panel with the repeats out — the gate
 * sees exactly the heights it saw before this rule existed, and a fallback then brings
 * both the plain stack and its repeats back together.
 */
body.fc-ds .fc-compare[data-pin="1"] .fc-compare__repeat {
	display: none;
}

body.fc-ds .fc-compare[data-pin="1"] .fc-compare__band {
	grid-row: 2;
	grid-column: 1;
	align-self: stretch;
	/*
	 * Opaque, so a band arriving hides the one under it. Bone rather than white because
	 * the band is bigger than its cells — the label column and the question strip are
	 * page surface showing through, and they have to keep showing the page's colour and
	 * not the cells'.
	 */
	background: var(--surface-light);
	transform: translateY(calc(clamp(0, var(--fc-compare-i) - var(--fc-compare-t, 0), 1) * 100%));
	z-index: var(--fc-compare-i);
	/*
	 * No transition. The transform follows the scroll position continuously, so easing it
	 * would put the bands behind the wheel rather than on it.
	 */
	will-change: transform;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * THE CLOSE
 * ════════════════════════════════════════════════════════════════════════════ */
body.fc-ds .fc-compare-cta {
	display: flex;
	justify-content: center;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * The design ships desktop only. Container queries against `page`, at the theme's own
 * breakpoints — see THE SHELL in layout.css.
 *
 * 1100 IS THE ONE THAT MATTERS, and it is the same number the pin refuses below and
 * the same number .fc-split stacks at. Above it the matrix is a matrix. Below it, six
 * columns of forty-word prose cannot be compared side by side at any type size, and a
 * 1320px table in a sideways scroller on a phone is a worse answer than no table — so
 * it stops being one. The bands become four stacked runs of six named paragraphs, in
 * the design's own reading order: what it is, best if, the vendors, look out.
 *
 * The head row goes with it. Six column names above something that is no longer laid
 * out in columns is a legend for a table that is not there; each cell prints its own
 * name instead, off the data-fc-col that inc/ds-compare.php puts on it. Visual only —
 * the screen reader already had the association from scope="col", which is still in
 * the markup and still correct.
 * ════════════════════════════════════════════════════════════════════════════ */
@container page (max-width: 1100px) {
	body.fc-ds .fc-compare {
		margin-top: var(--sp-54);

		/*
		 * THE READING SIZE COMES BACK. 15px is the price of fitting six columns inside
		 * 1120px, and below here there are no six columns — each cell is the full measure
		 * of the page. So the cells go back to --type-body-16, which the override layer
		 * resolves to the site's own 18px paragraph size. Nothing is being fitted on a
		 * phone; it is being read.
		 */
		--fc-compare-size: var(--type-body-16);
	}

	/* Nothing left to scroll sideways, and nothing left to park under the nav. */
	body.fc-ds .fc-compare__panel {
		overflow-x: visible;
	}

	body.fc-ds .fc-compare__table {
		min-width: 0;
	}

	/*
	 * The head row goes, and so does every repeat of it — same reason, four times over.
	 * Down here each cell prints its own column name from data-fc-col, which is a legend
	 * per paragraph rather than one per band, and it is the better one when nothing is in
	 * columns any more.
	 */
	body.fc-ds .fc-compare__headrow,
	body.fc-ds .fc-compare__repeat {
		display: none;
	}

	body.fc-ds .fc-compare__row {
		grid-template-columns: 1fr;
	}

	/* The row header becomes the band's subheading. */
	body.fc-ds .fc-compare__label {
		padding: 0 0 var(--sp-16);
	}

	/*
	 * The verticals go and the horizontals stay: stacked, the cells share hairlines top
	 * and bottom and a left edge on each one would draw a line down a single column.
	 */
	body.fc-ds .fc-compare__cell,
	body.fc-ds .fc-compare__cell:last-child {
		box-shadow:
			inset 0 1px 0 var(--fc-compare-rule),
			inset 0 -1px 0 var(--fc-compare-rule);
	}

	body.fc-ds .fc-compare__cell::before {
		content: attr(data-fc-col);
		display: block;
		margin-bottom: var(--sp-8);
		font-family: var(--font-core);
		font-weight: var(--fw-bold);
		font-size: var(--type-eyebrow-16);
		line-height: var(--lh-snug);
		letter-spacing: var(--ls-eyebrow);
		text-transform: uppercase;
		color: var(--fc-violet);
	}

	body.fc-ds .fc-compare__question {
		padding: var(--sp-32) 0 var(--sp-24);
	}

	body.fc-ds .fc-compare__band + .fc-compare__band .fc-compare__label {
		padding-top: var(--sp-32);
	}

	body.fc-ds .fc-compare__band:not(:last-child) {
		padding-bottom: var(--sp-54);
	}
}