/* ═════════════════════════════════════════════════════════════════════════════
 * 2026 DESIGN SYSTEM — THE SECURITY TRUST CENTER
 *
 * Loaded on page-security-ds.php only, on top of pages.css, which it needs for the
 * diagram system: the availability-zone drawing at the foot of the page is built
 * from .fc-dg-*. Declared as a dependency in fluent_commerce_ds_enqueue() rather
 * than trusted to source order.
 *
 * Its own file rather than an addition to pages.css because almost none of it is
 * reusable. The ruled column, the hairline band of marks, the six bordered bands and
 * the zone plates are one page's treatment, and pages.css is already the largest
 * stylesheet on the site and sits in the critical path of every composed page.
 *
 * ── THE RULED COLUMN IS NOT IN THIS FILE ─────────────────────────────────────
 *
 * The page's defining move — two hairlines running its whole height at the gutter,
 * with the copy inset a further 40px from them — started here and now lives in
 * layout.css under THE RULED COLUMN. .fc-ruled, .fc-ruled--dark, the gutter + 40
 * padding and the 820px step down to gutter + 20 are all there, unchanged. The
 * Integrations page rules its column the same way, which makes the mechanism a
 * primitive rather than one page's treatment — the move the crosslink made out of
 * blog.css. Edit it there; nothing about it is page-specific any more.
 *
 * What is still this page's own, and stays here:
 *
 *   · Every section draws its own pair, where the design draws one pair on a wrapper
 *     around eleven sections — see the header of inc/ds-security.php for why. Because
 *     the sections stack with no gap, the segments meet and read as two continuous
 *     lines.
 *   · The hero opts out of the gutter + 40 padding: its artwork runs to the right
 *     rule, so the section keeps no horizontal padding of its own and the copy column
 *     pays the inset instead.
 *   · The five 1px divider elements the export puts between sections are borders —
 *     border-bottom on the hero, border-top on the four bone sections that follow a
 *     boundary. The ink section cannot carry a visible ink-a20 line, so at that one
 *     boundary the line belongs to the bone section on the other side of it.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE PAGE'S COPY ROLE
 *
 * The design carries a page-level .fc-copy — medium, 1.5, with bold strongs and violet
 * links — and uses it for every paragraph AND for the sub-lead under every section
 * heading. That is one role, so it is one class here.
 *
 * ── THE SIZE IS 18px, WHATEVER THE DESIGN FILE SAYS ─────────────────────────
 *
 * --type-body-16, which is 18px in this system: the site's reading size, and the size
 * of a paragraph on every other page. See the reading-size note in layout.css for why
 * the token is named 16 and set to 18.
 *
 * This page shipped at --type-body-18 — 20px here — because the export's .fc-copy was
 * 20px and the number was taken literally. That was the mistake: it made the Trust
 * Center the one page on the site whose prose is a step larger than the rest, which is
 * exactly what a reader notices when they arrive from anywhere else. Build-6 has since
 * dropped its own .fc-copy to 18px anyway.
 *
 * The standing rule, decided 2026-08-24: body copy is 18px, even when a design file
 * specifies 20. A design's larger body size is not carried over — the leads, eyebrows
 * and labels around it are what scale.
 *
 * Links are the one place it departs: tokens.css withholds the underline from every
 * anchor on the site and hands it back per composition, and this page's links sit
 * mid-sentence in nine paragraphs of compliance copy where colour alone is not enough
 * to find them. currentColor, so the rule is always the link's own violet.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-copy {
	margin: 0;
	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;
}

body.fc-ds .fc-trust-copy strong,
body.fc-ds .fc-trust-copy b {
	font-weight: var(--fw-bold);
	color: var(--fc-ink-12);
}

body.fc-ds .fc-trust-copy a {
	color: var(--fc-violet);
	border-bottom: var(--stroke-1) solid currentColor;
}

body.fc-ds .fc-trust-copy a:hover {
	color: var(--fc-violet-bright);
}

/*
 * On ink. Violet fails contrast on #0A0A0A, which is what --fc-violet-light exists
 * for — the same pairing .fc-em / .fc-em-dark makes in layout.css.
 */
body.fc-ds .fc-trust-copy--dark {
	color: var(--text-on-dark);
}

body.fc-ds .fc-trust-copy--dark strong,
body.fc-ds .fc-trust-copy--dark b {
	color: var(--fc-white);
}

body.fc-ds .fc-trust-copy--dark a {
	color: var(--fc-violet-light);
}

body.fc-ds .fc-trust-copy--dark a:hover {
	color: var(--fc-white);
}

body.fc-ds .fc-trust-copy--muted {
	color: var(--text-on-dark-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * SECTION HEADS
 * A serif title over a 20px sub-lead, six times on this page, with a different
 * measure each time. The two measures are the knobs; --narrow is the three split
 * sections, where the head is a 1fr column beside its content.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-head__title {
	max-width: var(--head-w, 900px);
}

body.fc-ds .fc-trust-head__sub {
	max-width: var(--sub-w, 760px);
}

body.fc-ds .fc-trust-head--narrow {
	--head-w: 460px;
	--sub-w: 440px;
}

/* An eyebrow over one paragraph — the unit the last three sections are built from. */
body.fc-ds .fc-trust-note {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE HERO
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-hero {
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
}

/*
 * The one section on the page whose padding is not the ruled inset on both sides:
 * the artwork runs from the middle of the page to the RIGHT rule, so the section
 * gives up its own horizontal padding and the copy column pays the inset itself.
 * Vertical padding moves there too, because the picture is full-bleed top and
 * bottom and the copy is what sets the height.
 *
 * Written .fc-section.fc-trust-hero to match the specificity of the ruled padding
 * it overrides; it wins on source order, which is why .fc-ruled is at the top of
 * this file.
 */
body.fc-ds .fc-section.fc-trust-hero {
	padding: 0 var(--gutter-page) 0 0;
}

/* No gap: the seam between the two columns is a hairline, not a space. */
body.fc-ds .fc-trust-hero__split {
	gap: 0;
	align-items: stretch;
}

body.fc-ds .fc-trust-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--sp-54) var(--sp-54) var(--sp-54) calc(var(--gutter-page) + 40px);
}

/*
 * The artwork's column. min-height is the floor for the whole header, since the
 * grid stretches both columns to the taller of the two and on a wide screen the
 * copy is the shorter one.
 *
 * border-left is the seam — the export calls this .fc-seam-col and reuses it — and
 * it becomes a border-top when the columns stack, because a rule between two
 * things has to be on the side they actually meet.
 */
body.fc-ds .fc-trust-hero__figure {
	position: relative;
	min-height: 360px;
	border-left: var(--stroke-1) solid var(--fc-ink-a20);
}

/*
 * Absolute, so the picture takes the column's height from the copy beside it
 * rather than giving it a height of its own. object-fit crops it; the hands are
 * central in the frame and survive it at every ratio the column takes.
 */
body.fc-ds .fc-trust-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.fc-ds .fc-trust-hero__title {
	max-width: 1000px;
}

body.fc-ds .fc-trust-hero__lead {
	margin-top: var(--sp-24);
	max-width: 700px;
}

/*
 * The button and the framework list on one line, wrapping to two when they cannot
 * share it.
 */
body.fc-ds .fc-trust-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-24);
	margin-top: var(--sp-32);
}

/*
 * NOWRAP REMOVED 2026-09-01. It used to read `white-space: nowrap`, on the reasoning
 * that "SOC 2 Type 2 · SOC 3 · GDPR · NIS 2.0" broken across a line reads as two
 * lists. True of that string — but the rule was on the SLOT, not on the string, so
 * the first time this slot held a sentence instead of a list the sentence ran
 * straight out of the copy column and under the artwork, with no way to wrap.
 *
 * The list's own protection moved into the words instead: the builder joins the
 * items with ordinary spaces and binds each item internally with a non-breaking
 * space, so "SOC 2 Type 2" cannot split across "SOC 2" / "Type 2" but the list is
 * free to break at a separator, which is what a wrapped list is supposed to do.
 * See fluent_commerce_ds_security_hero_markup(). Content protects itself; the slot
 * stays able to hold prose, which it now does.
 *
 * flex-basis: max-content is what decides whether this shares the button's line, and
 * it decides it from the content rather than from a number picked here. Flex wrapping
 * compares base sizes against the space left on the line, so a short list — which
 * measures about 230px unbroken — fits beside the button and stays there, exactly as
 * designed, while a sentence asks for more than the line has left and drops to its own
 * full-width line instead of squeezing into a four-line ribbon. One keyword, both
 * behaviours, no breakpoint.
 *
 * min-width: 0 so that dropping to its own line is the outcome rather than overflowing
 * the column; max-width caps the measure once it has that line, because the copy column
 * is wider than prose wants to be.
 *
 * SENTENCE CASE, 2026-09-01, on request. The span carries .fc-meta from the builder, and
 * .fc-meta in layout.css is the design's 12px uppercase label — right for the badge strip
 * it was written for, wrong for a sentence, which in caps reads as a legal disclaimer.
 * Three of .fc-meta's declarations are overridden here and the reasoning differs for each:
 *
 *   text-transform  none, which is the actual request.
 *   letter-spacing  normal, because --ls-label is tracking added to compensate for caps.
 *                   Left on lowercase text it just reads loose — sentence case is not a
 *                   half-measure, the tracking goes with the capitals.
 *   line-height     1.5 rather than .fc-meta's 1.2. A label is one line and 1.2 is right
 *                   for it; this wraps to three, and 1.2 across three lines closes the
 *                   gaps until the block reads as a slab.
 *
 * 14px SINCE 2026-09-01, up from .fc-meta's 12px, on request — the fourth declaration
 * overridden and the only one that is a size decision rather than a consequence of the
 * text no longer being a label.
 *
 * A LITERAL, AND WATCH OUT FOR THE TOKEN THAT LOOKS RIGHT. This was set to
 * --type-body-16 first, on the strength of tokens.css calling it "long-form body inside
 * a composition" — and it rendered at 18px, not 16, because layout.css:222 redefines
 * that token to 18px for the whole DS layer and loads after tokens.css. The name is a
 * historical label, not the value; the note at .fc-trust-copy above says as much. So
 * there is no token that means 14px here: --type-body-15 is the smallest the brand
 * scale goes, and 14px is a deliberate step under it belonging to this caption alone,
 * which is also why it is not worth minting one. The footer's certification row is the
 * theme's other 14px literal and it is the same kind of thing — small print that is
 * prose rather than a label. --font-label resolves to --font-core, the same face as
 * body copy, so the family needs no override to go with it.
 *
 * Note the flex-basis above is content-measured, so the larger size feeds straight back
 * into whether this shares the button's line — nothing to retune by hand.
 *
 * These also apply to the badge strip the builder still emits, so on an unedited page
 * "SOC 2 TYPE 2 · SOC 3 · GDPR · NIS 2.0" becomes "SOC 2 Type 2 · SOC 3 · GDPR · NIS 2.0".
 * One word changes shape and the tracking relaxes; the acronyms were already capitals.
 */
body.fc-ds .fc-trust-hero__frameworks {
	flex: 1 1 max-content;
	min-width: 0;
	max-width: 60ch;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--text-on-light-muted);
}

/*
 * Stacked, at the same 1100 the rest of the splits stack.
 *
 * Three things have to move together. The seam becomes the top edge of the
 * picture. The copy column pays the ruled inset on BOTH sides now that it is the
 * full width — 40px on the right rather than the inset again, because the section
 * is already indented by the gutter on that side. And the picture is pulled in off
 * the left rule: it runs to the right one, which .fc-ruled::after draws over the
 * top of it, but ::before is painted before the section's content and a full-bleed
 * image would bury it. The page is two continuous vertical lines; an image that
 * interrupts one of them for 360px reads as a fault.
 */
@container page (max-width: 1100px) {
	body.fc-ds .fc-trust-hero__copy {
		padding: var(--sp-54) 40px var(--sp-54) calc(var(--gutter-page) + 40px);
	}

	body.fc-ds .fc-trust-hero__figure {
		margin-left: calc(var(--gutter-page) + var(--stroke-1));
		border-left: 0;
		border-top: var(--stroke-1) solid var(--fc-ink-a20);
	}
}

/* The 40px inset halves at 768, the same as every other ruled section's. */
@container page (max-width: 820px) {
	body.fc-ds .fc-trust-hero__copy {
		padding: var(--sp-54) 20px var(--sp-54) calc(var(--gutter-page) + 20px);
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE COMMITMENT
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-commit {
	background: var(--fc-ink-10);
}

body.fc-ds .fc-trust-commit__title {
	max-width: 520px;
	color: var(--text-on-dark);
}

body.fc-ds .fc-trust-commit__sub {
	max-width: 480px;
}

body.fc-ds .fc-trust-commit__body {
	max-width: 560px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * INDEPENDENT ATTESTATION
 * Three pillars, numbered by counter. The numeral is the heading's own ::before on a
 * baseline row, which is the export's composition with one fewer element in it — and
 * it means the numbering is a property of the position rather than of the copy, so a
 * fourth pillar cannot arrive as a second 03.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-attest {
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
}

/* The 32px is the seam with the marks band: the two read as one composition. */
body.fc-ds .fc-trust-attest__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-54);
	padding-bottom: var(--sp-32);
}

body.fc-ds .fc-trust-pillars {
	counter-reset: pillar;
}

body.fc-ds .fc-trust-pillar {
	counter-increment: pillar;
	display: flex;
	flex-direction: column;
	gap: var(--sp-32);
	padding-top: var(--sp-32);
}

body.fc-ds .fc-trust-pillar__title {
	display: flex;
	align-items: baseline;
	gap: var(--sp-16);
}

body.fc-ds .fc-trust-pillar__title::before {
	content: counter(pillar, decimal-leading-zero);
	flex: none;
	font-family: var(--font-quote);
	font-weight: var(--fw-regular);
	font-size: var(--type-numeral-24);
	line-height: var(--lh-flush);
	letter-spacing: var(--ls-quote);
	color: var(--fc-ink-a60);
}

body.fc-ds .fc-trust-pillar__items {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
}

body.fc-ds .fc-trust-item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE MARKS BAND
 * Seven certification and auditor marks, the export's own count — the NIS 2 cell was
 * dropped for want of an asset and restored on 2026-09-01. inc/ds-security.php records
 * both halves of that.
 *
 * The hairlines between cells are the band's own background showing through a 1px
 * grid gap, not borders on the cells: one line between two cells rather than two
 * abutting 1px borders, which on a fractional device pixel render as a 2px rule in
 * some columns and a 1px rule in others.
 *
 * WHICH IS ALSO WHY THE COUNT MATTERS. A grid area with no cell in it shows that
 * background, so a row that does not fill reads as a grey block rather than as white
 * space. Six divided evenly into the old 6 → 3 → 2 steps and never left one. Seven is
 * prime and divides into none of them, so the last cell spans the shortfall instead —
 * see the rule below the cell.
 *
 * Its own grid rather than .fc-grid-*: the step-downs are its own and it must not
 * inherit --gap-cards, which would open the hairlines into 33px channels.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-marks {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--stroke-1);
	margin: 0 var(--gutter-page);
	background: var(--fc-ink-a20);
	border: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-trust-marks__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 168px;
	padding: var(--sp-16);
	background: var(--fc-white);
}

/*
 * Contained, not sized. The seven marks have nothing in common geometrically — a
 * 304 × 34 wordmark, a near-square seal and a 1.73:1 banner are all in here — so each
 * one is limited by whichever of the two axes it hits first and keeps its own
 * proportions. This is what let the NIS 2 mark be added without cropping it square.
 */
body.fc-ds .fc-trust-marks__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/*
 * Seven cells in a four- or two-column grid leave one area short, and an empty area in
 * this band shows as grey. The seventh cell takes the shortfall — two columns in both
 * cases, since 7 into 4 leaves a row of three and 7 into 2 leaves a row of one.
 *
 * :nth-child(7):last-child rather than :last-child, so the rule applies only while
 * there are exactly seven marks. Add an eighth and it switches itself off, which is the
 * right answer: eight divides into four and two evenly and wants no span at all. Any
 * other count needs its own arithmetic — see the band's header comment.
 *
 * Nothing is needed at the full seven columns above 1100px: one row, no shortfall.
 */
@container page (max-width: 1100px) {
	body.fc-ds .fc-trust-marks {
		grid-template-columns: repeat(4, 1fr);
	}

	body.fc-ds .fc-trust-marks__cell:nth-child(7):last-child {
		grid-column: span 2;
	}
}

@container page (max-width: 820px) {
	body.fc-ds .fc-trust-marks__cell {
		height: 128px;
	}
}

@container page (max-width: 440px) {
	body.fc-ds .fc-trust-marks {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * PLATFORM SECURITY
 * Five numbered practices on hairlines.
 *
 * Each row is a two-column grid and the numeral spans both text rows, which is what
 * keeps a wrapping title aligned with its own paragraph instead of with the number.
 * The rows are groups rather than list items — see inc/ds-security.php — so the
 * counter is what carries the ordinality that <ol> would have.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-steps {
	counter-reset: step;
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-trust-step {
	counter-increment: step;
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: var(--sp-16);
	row-gap: var(--sp-8);
	padding: var(--sp-24) 0;
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-trust-step::before {
	content: counter(step, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / span 2;
	font-family: var(--font-quote);
	font-weight: var(--fw-regular);
	font-size: var(--type-numeral-24);
	line-height: var(--lh-title);
	letter-spacing: var(--ls-quote);
	color: var(--fc-ink-a60);
}

body.fc-ds .fc-trust-step > * {
	grid-column: 2;
}

@container page (max-width: 440px) {
	body.fc-ds .fc-trust-step {
		grid-template-columns: 36px 1fr;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * DATA PROTECTION
 * Four cards in a ruled table.
 *
 * The hairlines are the reason this is worth a comment. The container draws top and
 * left; every cell draws right and bottom. That one arrangement is correct at four
 * columns, at two and at one, with no :nth-child anywhere — the cell that happens to
 * end a row draws the right-hand edge of the table, and the one that ends the last
 * row draws its bottom. A borders-on-alternate-children scheme has to be rewritten
 * at every breakpoint; this does not.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-data {
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-trust-data__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-54);
}

body.fc-ds .fc-trust-cards {
	gap: 0;
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
	border-left: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-trust-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	padding: var(--sp-32);
	border-right: var(--stroke-1) solid var(--fc-ink-a20);
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
}

/* The glyph carries its own width and height from fluent_commerce_ds_icon(). */
body.fc-ds .fc-trust-card__icon {
	display: block;
	flex: none;
	color: var(--text-on-light);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * ARCHITECTURE
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-arch {
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-trust-arch__side {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
	max-width: 560px;
}

/*
 * The two cloud destinations. Rendered only when the pages exist, so this rule may
 * legitimately match nothing — see fluent_commerce_ds_security_cloud_rows().
 */
body.fc-ds .fc-trust-jump {
	margin: var(--sp-8) 0 0;
	padding: 0;
	list-style: none;
	max-width: 460px;
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-trust-jump__row {
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
}

/*
 * The row lights to white on hover rather than to a tint: the page's surface is bone,
 * so white is the lift, and it is the same move the crosslink block makes.
 */
body.fc-ds .fc-trust-jump__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-32);
	padding: 20px 16px;
	color: var(--text-on-light);
}

body.fc-ds .fc-trust-jump__link:hover {
	background: var(--fc-white);
	color: var(--fc-violet);
}

body.fc-ds .fc-trust-jump__label {
	font-family: var(--font-core);
	font-weight: var(--fw-medium);
	font-size: var(--type-body-18);
	line-height: var(--lh-body);
}

/*
 * The 13px out-and-up arrow. Nudged off the baseline because the glyph's own diagonal
 * reads low against a 20px cap height when it sits on it.
 */
body.fc-ds .fc-trust-jump__mark {
	position: relative;
	top: 2px;
	margin-left: var(--sp-8);
}

body.fc-ds .fc-trust-jump__tag {
	flex: none;
	color: var(--text-on-light-muted);
}

/* The two cloud marks, in one bordered pair. */
body.fc-ds .fc-trust-clouds {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-trust-clouds__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140px;
	padding: var(--sp-32);
}

/* On the cell that follows, not on the one before: two marks or twenty, one rule. */
body.fc-ds .fc-trust-clouds__cell + .fc-trust-clouds__cell {
	border-left: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-trust-clouds__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 76px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * OPERATIONAL RESILIENCE
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-res {
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-trust-res__side {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 560px;
}

body.fc-ds .fc-trust-stat {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
	margin-top: var(--sp-8);
}

body.fc-ds .fc-trust-stat__label {
	color: var(--text-on-light-muted);
}

/* ═════════════════════════════════════════════════════════════════════════════
 * THE AVAILABILITY-ZONE BAND
 *
 * A 620 × 550 drawing on a full-width band. The export scales it with a
 * ResizeObserver that reads the band's width, divides by 660 and writes a transform
 * plus an explicit pixel height on every resize. All of that is a ladder of container
 * queries here, stepping the same ratio 100cqw / 660px would have given.
 *
 * The band is the query container, so the queries below read the band's own width.
 * The canvas is a child of it and is not a container, so nothing is circular: the
 * canvas takes the full width and the drawing inside it is scaled, top-aligned and
 * centred.
 *
 * STEPPED, NOT COMPUTED, and for the reason set out at THE SCALE TRICK in pages.css:
 * this was min(1, tan(atan2(100cqw, 660px))) and that construction resolved to about
 * 3 instead of 0.5 on Safari, magnifying the drawing to a fragment of itself. A
 * container-relative unit inside a comparison function is the thing that breaks, so
 * every value below is a literal and the queries carry the responsiveness.
 *
 * THE TWO DECLARATIONS MOVE TOGETHER. The canvas height is 550 × the scale, written
 * as that multiplication rather than as a resolved pixel value so the relationship
 * stays readable. Change a step in one and you must change it in the other, or the
 * band's paper stops matching the drawing standing on it.
 *
 * Every step is width ÷ 660 rounded DOWN to the nearest hundredth, so the drawing is
 * always a little narrower than the band and never clipped by its overflow: hidden.
 * The band is the viewport less two --gutter-page, so its width runs from about 264 on
 * the narrowest phone anyone still uses up to 1506 on a 1920 desktop. 660 and up is the
 * authored size, which is everything from a 768 tablet on, so the ladder is really only
 * doing work on phones. Stepped every 20 above 360 and every 20 below it as well;
 * worst case is 1.5% under the ideal.
 *
 * KNOWN, AND CONSISTENT: the base value is a floor, and on a 390 phone the factor is
 * about 0.53 and the drawing's 12px labels render near 6px. That is exactly what every
 * other diagram on the site already does — .fc-pat-scale bottoms out the same way — and
 * treating this band differently would make it the odd one out.
 *
 * Everything inside the drawing is in ABSOLUTE PX, deliberately, for the reason
 * written out at the head of the diagram system in pages.css: the canvas scales the
 * whole thing, so a container-relative size inside it would be scaled twice and the
 * drawing would not be the same drawing at two widths.
 * ══════════════════════════════════════════════════════════════════════════ */
body.fc-ds .fc-trust-band {
	container-type: inline-size;
	position: relative;
	margin: 0 var(--gutter-page);
	border: var(--stroke-1) solid var(--fc-ink-a20);
	overflow: hidden;
}

/* The paper is full width and its dot grid is NOT scaled — only the drawing is. */
body.fc-ds .fc-trust-band > .fc-dg {
	width: 100%;
	height: calc(550px * 0.34);
}

body.fc-ds .fc-trust-band__scale {
	position: absolute;
	left: 50%;
	top: 0;
	width: 620px;
	height: 550px;
	translate: -50%;
	scale: 0.34;
	transform-origin: top center;
}

/*
 * 240 → 660, then the authored size and no further. Every 10 up to 420 and every 20
 * above it, because a phone's band is 278 to 398 wide — the viewport less two 20px
 * gutters less the two borders — and that is exactly where coarser spacing costs 8%.
 *
 * The bottom of the ladder is not decoration: a container query measures the CONTENT
 * box, so the width these read is the band less its two 1px borders, and the base value
 * has to be low enough that 620 × scale still fits the narrowest band that can exist.
 * 0.34 gives a 210 drawing, which clears the 238 a 280 phone produces. Round a step up
 * instead of down and the band's own overflow: hidden crops the drawing.
 */
@container (min-width: 240px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.36);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.36;
	}
}

@container (min-width: 260px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.39);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.39;
	}
}

@container (min-width: 280px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.42);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.42;
	}
}

@container (min-width: 290px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.43);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.43;
	}
}

@container (min-width: 300px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.45);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.45;
	}
}

@container (min-width: 310px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.46);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.46;
	}
}

@container (min-width: 320px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.48);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.48;
	}
}

@container (min-width: 330px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.5);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.5;
	}
}

@container (min-width: 340px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.51);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.51;
	}
}

@container (min-width: 350px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.53);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.53;
	}
}

@container (min-width: 360px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.54);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.54;
	}
}

@container (min-width: 370px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.56);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.56;
	}
}

@container (min-width: 380px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.57);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.57;
	}
}

@container (min-width: 390px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.59);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.59;
	}
}

@container (min-width: 400px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.6);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.6;
	}
}

@container (min-width: 410px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.62);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.62;
	}
}

@container (min-width: 420px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.63);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.63;
	}
}

@container (min-width: 440px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.66);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.66;
	}
}

@container (min-width: 460px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.69);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.69;
	}
}

@container (min-width: 480px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.72);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.72;
	}
}

@container (min-width: 500px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.75);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.75;
	}
}

@container (min-width: 520px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.78);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.78;
	}
}

@container (min-width: 540px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.81);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.81;
	}
}

@container (min-width: 560px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.84);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.84;
	}
}

@container (min-width: 580px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.87);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.87;
	}
}

@container (min-width: 600px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.9);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.9;
	}
}

@container (min-width: 620px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.93);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.93;
	}
}

@container (min-width: 640px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: calc(550px * 0.96);
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 0.96;
	}
}

@container (min-width: 660px) {
	body.fc-ds .fc-trust-band > .fc-dg {
		height: 550px;
	}

	body.fc-ds .fc-trust-band__scale {
		scale: 1;
	}
}

/* ── The zone plates ─────────────────────────────────────────────────────────
 * 210 × 198, and the contents are measured to fit rather than assumed to:
 *
 *   header 14.4 + gap 12 + [ node 44.1 + gap 6 + id 14.4 ] × 2 + gap 10 + pad 32
 *   = 165.4 + 32 = 197.4, against 198.
 *
 * Which is why the node inside a plate takes 10px of vertical padding instead of the
 * system's 12: at 12 the same stack comes to 204 and overflows its own plate. The
 * export has this bug; the numbers above are the fix.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-zone {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 210px;
	height: 198px;
	padding: 16px;
	background: var(--fc-white);
	border: 1px solid var(--diagram-edge);
	border-radius: var(--radius-10);
}

body.fc-ds .fc-trust-zone .fc-dg-node {
	padding: 10px 14px;
}

body.fc-ds .fc-trust-zone__head {
	font-family: var(--font-label);
	font-weight: var(--fw-medium);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--fc-ink-a60);
}

body.fc-ds .fc-trust-zone__units {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body.fc-ds .fc-trust-zone__unit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

/* A machine name, so mono — the design system's own signal for an identifier. */
body.fc-ds .fc-trust-zone__id {
	font-family: var(--font-mono);
	font-weight: var(--fw-regular);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: var(--ls-mono);
	font-variant-ligatures: none;
	color: var(--fc-ink-a60);
}

/*
 * The label in the middle of the triangle. Emitted after the plates rather than
 * before them, so DOM order settles the overlap and nothing needs a z-index: the
 * .fc-dg-at wrapper is a stacking context of its own, so a z-index on this element
 * could not have escaped it anyway.
 */
body.fc-ds .fc-trust-latency {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 190px;
	text-align: center;
}

body.fc-ds .fc-trust-latency__title {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: 18px;
	line-height: 1.2;
	color: var(--fc-ink-12);
}

body.fc-ds .fc-trust-latency__note {
	font-family: var(--font-label);
	font-weight: var(--fw-medium);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--fc-ink-a60);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSING CTA
 * Outside the ruled column: the verticals stop at the foot of the drawing, which is
 * the export's own composition. The evidence is ruled; the invitation is not.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-trust-cta {
	background: var(--fc-ink-10);
}

/*
 * 1.05 rather than --lh-flush. This is the one display heading on the page that is
 * meant to wrap, and at 62px flush leading two lines of Instrument Serif touch.
 */
body.fc-ds .fc-trust-cta__title {
	max-width: 840px;
	line-height: 1.05;
	color: var(--text-on-dark);
}

body.fc-ds .fc-trust-cta__sub {
	max-width: 560px;
}

body.fc-ds .fc-trust-cta__inner > .fc-btn {
	margin-top: var(--sp-8);
}