/**
 * CUSTOMERS — assets/ds/customers.css
 *
 * The page layer for /customers/, on top of pages.css. What is in here is one page's
 * furniture: the ruled story table, the Grid / List switch, and one line of type. What is
 * deliberately NOT in here:
 *
 *   · THE STORY CARD AND ITS GRID, which left for assets/ds/storycard.css on 2026-08-27
 *     when the pricing page's quote carousel was replaced with eight of these cards. Two
 *     callers make it a component, and the head of that file has the reasoning for why it
 *     is its own sheet rather than an addition to pages.css. Several of the notes below
 *     still point at it, because the notes are about the page and the card is still on the
 *     page — it is just no longer styled from here.
 *   · THE PHOTO GALLERY that opens the page, all of which is layout.css's — the track,
 *     the frames, the drawn cursor, the whole responsive scale. This page is its second
 *     caller, which is what moved it there on 2026-08-27. The ONE thing overridden here
 *     is the size of the type laid across it, because this page's heading is a sentence
 *     and Partners' is a word. See THE TYPE below.
 *
 *     Until that date this page opened on an ink fold instead, and the block that used to
 *     sit here was the one block in this file that argued with a shared component: it took
 *     .fc-fold's height back so a 16:9 frame was not cropped by a laptop-shaped box. The
 *     fold is gone, so the argument is gone with it; the reasoning survives in THE PHOTO
 *     GALLERY in inc/ds-customers.php if another page ever puts uncropped media in a fold.
 *   · .fc-statband / .fc-statcol / .fc-statcol__*, which are layout.css's and
 *     pages.css's. The band on this page is the home page's band with three different
 *     figures, one bleed class and one surface class. See THE STAT BAND in
 *     inc/ds-customers.php for why the figures are violet here too.
 *   · .fc-sr, .fc-section, .fc-section-t0, .fc-section-b0, .fc-display-section — all
 *     layout.css.
 *
 * ── VALUES THAT ARE THE DESIGN'S AND VALUES THAT ARE THE THEME'S ─────────────
 *
 * The export writes every number inline. Mapped onto tokens here, with five worth
 * stating because the number changed:
 *
 *   · The export's --type-body-18 becomes --type-body-16. The token names are a trap
 *     across the two systems: --type-body-18 is 18px in the design and 20px in this
 *     theme, and 18px here is --type-body-16. Body copy is 18 everywhere on this site,
 *     so every one of the export's 18px lines is --type-body-16 in this file.
 *   · Card padding 40px becomes --sp-32. The --sp scale has no 40, and --sp-54 is a
 *     different card. Same call the contact page made in Build-11.
 *   · The bottom bar's 20px inset becomes --sp-16, which keeps the relationship the
 *     design built: the bar is inset half as far as the body above it, 20 against 40
 *     there and 16 against 32 here.
 *   · Metric label gap 12px becomes --sp-8, same reason as the padding.
 *   · The card border is --fc-ink-a20, NOT the export's rgba(18,18,18,0.45). The
 *     design's own system/decisions.md locks one hairline weight sitewide, "1px at
 *     20% ... No shadows, no second weight, no blur", and a 45% card border is a
 *     second weight. Flagged rather than quietly reversed, per the instruction at the
 *     head of that file. Putting it back is this one declaration.
 *
 * The quote's line-height is the sixth: the export sets 1.2 and the --lh ramp has no
 * 1.2, so it is --lh-title at 1.25. A twentieth of an em on a 32px serif.
 *
 * Everything else is the export's to the pixel: 32px gaps, the 320/340 card floors, the
 * 88px bar and its 88px arrow cell, the 56px headshot, the 0.9/0.85/2.1/0.65 column
 * ratios and the 200px pill.
 *
 * ── WHAT BUILD-18 MOVED ─────────────────────────────────────────────────────
 *
 * The card was taken apart. The mark used to head it beside an industry pill; it now
 * sits in a ruled 88px bar along the bottom edge, the arrow is an 88px cell in that same
 * bar instead of a 48px plate, and the pill is off the card entirely — it survives only
 * in the list's Industry column. Single-column quotes went from 24px to 32px, which is
 * the export's whole quote-size branch collapsing to one value once you evaluate it. See
 * THE QUOTE below.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE TYPE
 *
 * The one thing this page changes about the shared photo gallery, and it is one property
 * and two supports: the heading here is a SENTENCE.
 *
 * layout.css ramps .fc-gallery__word from 53px to 132px, and its own note says what that
 * ramp is for — one word, "Partners", set as large as the band can hold and deliberately
 * given no max-width, because a single word has no wrap to control. This page's heading is
 * "We'll let our customers do the talking", thirty-eight characters, and at 132px that is
 * about 2,300px of type in a 640px-tall band: it would run off the right edge of a 1440
 * window on one line and there is nothing in the shared sheet to stop it.
 *
 * So three declarations, and each one earns its place:
 *
 *   font-size   the same shape of ramp, scaled down: 32px at a 390 container to 80px at
 *               1920, which is the largest the sentence can be and still leave the band
 *               taller than the type is. Written as the same clamp(min, calc(px + cqw),
 *               max) form layout.css uses rather than a media-query staircase, so it
 *               tracks the container the way every other display size on this site does.
 *   max-width   the measure, in ch, so it scales with the font rather than against it.
 *               13ch puts the sentence on three lines at every width measured — "We'll
 *               let our" / "customers do" / "the talking" — which is a shape rather than
 *               a paragraph, and it keeps the block inside the two light frames it was
 *               ordered to sit on. See THE ORDER IS LUMINANCE in inc/ds-customers.php.
 *   line-height 0.95 and not the shared 0.86. 0.86 is a single line's number, where there
 *               is no gap to be too tight; three stacked lines of semibold at 0.86 have
 *               ascenders touching descenders. 0.95 is still tighter than any body ramp
 *               on the site, so it still reads as display type.
 *
 * Nothing else. The colour, the position, the z-index over the photographs and the
 * pointer-events:none are all layout.css's and all correct as they stand.
 *
 * ── WHAT USED TO BE HERE ─────────────────────────────────────────────
 *
 * THE FOLD: .fc-customers-fold and its two children, removed on 2026-08-27 with the ink
 * fold itself. It was the one block in this file that argued with a shared component,
 * taking .fc-fold's height back so a 16:9 frame was not cropped by a laptop-shaped box,
 * and the argument is recorded in full in THE PHOTO GALLERY in inc/ds-customers.php for
 * whichever page next puts uncropped media in a fold.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-customers-gallery-sec .fc-gallery__word {
	max-width: 13ch;
	font-size: clamp(32px, calc(19.77px + 3.137cqw), 80px);
	line-height: 0.95;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE STAT BAND
 *
 * Build-18 puts this band on white with no section padding on either side, so it is a
 * white stripe the full width of the page between the ink fold and the bone stories
 * section, and the band's own two hairlines are all that separate the three surfaces.
 * There is no generic white-band utility in layout.css, so the surface is declared here.
 *
 * .fc-home-stats is not reused for the bleed because of its top margin: that band is the
 * tail of a split and wants 72px above it, this one wants nothing above it at all.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-customers-stats-band {
	background: var(--surface-lightest);
}

body.fc-ds .fc-customers-stats {
	margin: 0 calc(var(--gutter-page) * -1);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE SECTION, AND THE SWITCH
 *
 * position:relative is load-bearing and not decoration: .fc-sr is position:absolute
 * with no offsets, so without a positioned ancestor the two radios resolve against
 * the page and clicking a label scrolls to the top of it. Same trap the OMS bento and
 * the integrations carousel both document.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-customers {
	position: relative;
}

body.fc-ds .fc-customers__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-54);
	flex-wrap: wrap;
}

/* The pair wraps in Build-18, and its gap went 24 to 32. */
body.fc-ds .fc-viewtoggle {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-32);
}

/*
 * Labels, not buttons — the state is in the radios. So they need the cursor and the
 * type a button would have brought with it, and they need to be reachable: the input
 * is the focusable thing, and it is 1px and clipped, so the ring has to be drawn on
 * the label instead. See THE FOCUS RING below.
 */
body.fc-ds .fc-viewtoggle__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: var(--type-label-12);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--fc-ink-a40);
	transition: color var(--dur-fast) var(--ease-out);
}

body.fc-ds .fc-viewtoggle__btn:hover {
	color: var(--text-on-light);
}

/*
 * ── THE TWO-WAY PAIRING ─────────────────────────────────────────────────────
 *
 * Written with :nth-of-type() rather than with the ids the labels point at, which is
 * how integrations.css writes its five-way version: the ids exist for the label's
 * `for` attribute and nothing else, and a stylesheet that names them makes renaming
 * one of them a two-file change.
 *
 * Grid is the default in both directions — checked in the markup, and the state with
 * no rule matched here — so the only rules needed are the list's.
 */
body.fc-ds .fc-customers__view:nth-of-type(1):checked ~ .fc-customers__head .fc-viewtoggle__btn--grid,
body.fc-ds .fc-customers__view:nth-of-type(2):checked ~ .fc-customers__head .fc-viewtoggle__btn--list {
	color: var(--text-on-light);
}

body.fc-ds .fc-customers__view:nth-of-type(2):checked ~ .fc-storygrid {
	display: none;
}

body.fc-ds .fc-customers__view:nth-of-type(2):checked ~ .fc-storylist {
	display: block;
}

/*
 * ── THE FOCUS RING ──────────────────────────────────────────────────────────
 *
 * :focus-visible on the input, drawn on the label. Without this the switch is
 * keyboard-operable and gives no sign of it, which is worse than not being operable.
 * The offset keeps the ring clear of the 14px glyph.
 */
body.fc-ds .fc-customers__view:nth-of-type(1):focus-visible ~ .fc-customers__head .fc-viewtoggle__btn--grid,
body.fc-ds .fc-customers__view:nth-of-type(2):focus-visible ~ .fc-customers__head .fc-viewtoggle__btn--list {
	outline: var(--stroke-1) solid var(--fc-violet);
	outline-offset: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE INDUSTRY PILL
 * The list's Industry column, and nothing else — Build-18 took it off the card. Still
 * named for what it is rather than for the row, because putting it back on the card is
 * one call in inc/ds-customers.php and this is the object it would use. 6px/14px are
 * the export's and have no token: the pill is sized to its own 12px type, not to the
 * page's spacing scale.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-pill-industry {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: var(--fc-ink-a06);
	font-family: var(--font-mono);
	font-size: var(--type-label-12);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--fc-ink-a60);
	white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE LIST
 * The same nineteen stories as a ruled table. Hidden until the second radio is checked;
 * display:none and not visibility:hidden, because unlike a carousel's slides these
 * rows have no part in sizing anything and there are ten live links in here that
 * should be out of the tab order while they are not on screen.
 *
 * Build-18's head row is a solid ink bar with bone type, where Build-12's was two rules
 * around ink on nothing. So the two-weight exception that rule needed is gone with it:
 * a filled bar is a table head without having to argue about hairlines.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-storylist {
	display: none;
	margin-top: var(--sp-54);
	border-bottom: var(--stroke-1) solid var(--border-on-light);
}

body.fc-ds .fc-storyhead,
body.fc-ds .fc-storyrow {
	display: grid;
	grid-template-columns: 0.9fr 0.85fr 2.1fr 0.65fr;
	gap: var(--sp-32);
	align-items: center;
}

body.fc-ds .fc-storyhead {
	padding: var(--sp-16);
	background: var(--text-on-light);
	font-family: var(--font-mono);
	font-size: var(--type-label-12);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-on-dark-muted);
}

body.fc-ds .fc-storyrow {
	padding: var(--sp-24) var(--sp-16);
	border-top: var(--stroke-1) solid var(--border-on-light);
	color: var(--text-on-light);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* a:hover only, for the reason the card's arrow gives. */
body.fc-ds a.fc-storyrow:hover {
	background: var(--surface-lightest);
	color: var(--fc-violet);
}

body.fc-ds a.fc-storyrow:focus-visible {
	outline: var(--stroke-1) solid var(--fc-violet);
	outline-offset: -2px;
}

body.fc-ds .fc-storyrow__name {
	font-size: var(--type-h5-24);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-title);
}

body.fc-ds .fc-storyrow__industry {
	justify-self: start;
	min-width: 0;
}

/*
 * The pill does not take the row's violet on hover. It is a tag and not a link label,
 * and the row already has two things going violet on it.
 */
body.fc-ds a.fc-storyrow:hover .fc-pill-industry {
	color: var(--fc-ink-a60);
}

body.fc-ds .fc-storyrow__result {
	font-size: var(--type-body-16);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

body.fc-ds .fc-storyrow__go {
	justify-self: end;
}

body.fc-ds .fc-storyrow__read {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	font-size: var(--type-body-16);
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

/*
 * ── "READ STORY" APPEARS ON THE ROW YOU ARE POINTING AT ─────────────────────
 *
 * Build-18's reasoning, and it is sound: the words are redundant on every row at once,
 * because the arrow already says the row is a link. So the label is clipped to nothing
 * until the row is hovered.
 *
 * max-width and opacity rather than display or visibility, because the arrow must not
 * move when the words arrive — a transition needs something to interpolate, and clipping
 * the width means the label takes up its own space only while it is readable. 8em is the
 * export's own ceiling and comfortably clears "Read story".
 *
 * It is restored at 820 below, where the design does not restore it. See
 * fluent_commerce_ds_customers_row() for that divergence.
 */
body.fc-ds .fc-storyrow__label {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity var(--dur-fast) var(--ease-out);
}

body.fc-ds a.fc-storyrow:hover .fc-storyrow__label,
body.fc-ds a.fc-storyrow:focus-visible .fc-storyrow__label {
	max-width: 8em;
	opacity: 1;
}

body.fc-ds .fc-storyrow__arrow {
	flex: none;
	transition: transform var(--dur-fast) var(--ease-out);
}

body.fc-ds a.fc-storyrow:hover .fc-storyrow__arrow {
	transform: translateX(4px);
}

/* ═════════════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 *
 * The design ships desktop only, so both breakpoints below are this theme's. They are the
 * page's own container queries on `page`, matching every other DS sheet.
 *
 * THE LIST ONLY. The grid's two breakpoints went with the card to storycard.css, which is
 * why 440 has no block left in this file at all — everything that happened at 440 here was
 * inside a card. The list's own third step is unnecessary: once it stops being a table at
 * 820 it is already one column per row.
 *
 * The list stops being a table at 820 and becomes nineteen stacked blocks — four columns
 * of 18px copy inside 40px gutters is not a phone layout at any ratio.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── 1100 ── the table's gutters come in, while the grid loses a column next door. */
@container page (max-width: 1100px) {
	body.fc-ds .fc-storyhead,
	body.fc-ds .fc-storyrow {
		gap: var(--sp-24);
	}
}

/* ── 820 ── the table stops being a table. */
@container page (max-width: 820px) {
	/*
	 * The heading row goes with the grid tracks. Its three words label columns that no
	 * longer exist, and each row now reads top to bottom in the same order anyway:
	 * name, industry, result, link.
	 */
	body.fc-ds .fc-storyhead {
		display: none;
	}

	body.fc-ds .fc-storylist {
		border-top: var(--stroke-1) solid var(--text-on-light);
	}

	body.fc-ds .fc-storyrow {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--sp-16);
		padding: var(--sp-24) 0;
	}

	body.fc-ds .fc-storyrow__go {
		justify-self: start;
	}

	/*
	 * Stacked is the touch case, and hover never fires there — so a label that only
	 * appears on hover never appears at all. It comes back permanently, which is exactly
	 * what the design does for its own media list and then does not do here.
	 */
	body.fc-ds .fc-storyrow__label {
		max-width: none;
		opacity: 1;
	}
}