/*
 * Fluent Order Management — the product page (2026 brand refresh).
 *
 * Loaded on the "Product Page 2026" template, on any page that has one of the
 * PDP patterns dropped onto it, and inside the block editor when that page is
 * open — see fluent_commerce_needs_pdp_styles() and
 * fluent_commerce_editing_pdp_page(). None of it reaches the existing pages.
 *
 * Values come from the 1920px Figma frame 6005:3731 (page node 6005:2326).
 * Where the design gives no guidance — small screens, hover and focus states,
 * the scroll affordances — the choice is called out in a comment so it can be
 * checked against the designer's intent rather than found by accident.
 *
 * WHAT THIS FILE DOES NOT CONTAIN. assets/home.css is a hard dependency (see
 * the enqueue in functions.php) and carries everything shared: the design
 * tokens, the section rhythm tokens, .fc-btn, the nav and footer chrome, and
 * the no-theme.json .wp-block-group__inner-container reset. Those are not
 * duplicated here — a second copy would drift. The cost is that the PDP also
 * downloads the home page's section rules it never uses; extracting the shared
 * chrome into its own file is part of the pending fc-home-* → fc-section-*
 * rename, which is held back because it would rewrite stored post_content.
 *
 * SCOPING RULE — the same rule home.css states, and for the same reason: only
 * page-shell rules may be scoped to body.fc-home, because the editor canvas has
 * no body class we can set from PHP. Everything that styles a block keys off the
 * block's own fc-pdp-* class, which is present in both the editor and the
 * frontend. Every section therefore paints its own background too, so the dark
 * bands still read correctly against the editor's white canvas.
 *
 * BREAKPOINTS — the same three tiers as home.css, and only these three:
 *
 *   1100px  The design's two-column rows stop fitting and the 4-across mosaic
 *           reflows. Rows stack; the mosaic goes to two columns.
 *    781px  WordPress's own mobile breakpoint. Single column throughout, the
 *           hero's decorative layers dropped, the industries column's inner
 *           scroll dropped.
 *    640px  Phone. Only for what is still wrong at 781: minimum heights and the
 *           largest type.
 *
 * Desktop-first (max-width) throughout, matching home.css. Everything below
 * 1100px is our own work — the Figma file has no mobile frames for this page.
 *
 * TWO SIZING RULES THIS FILE FOLLOWS THROUGHOUT, both learned by measuring:
 *
 * 1. A centred box is "width: 100%; max-width: Npx", never "width: Npx;
 *    max-width: 100%". The two look identical until the box sits in a grid or
 *    flex track: a percentage max-width is indefinite while the track is being
 *    intrinsically sized, so the track inflates to the fixed width and the
 *    section overflows the viewport. This page overflowed by 95px at 781px wide
 *    for exactly that reason.
 *
 * 2. Every fr track is minmax(0, Nfr), and boxes inside them get min-width: 0.
 *    A bare "Nfr" is minmax(auto, Nfr), so the track can never go below its
 *    content's min-content width — the scale band's three square cards floored
 *    their column at 1157px and stole 313px from the headline column.
 *
 * @package Fluent_Commerce
 */

/* --- Typography ----------------------------------------------------------
 * The design's four heading sizes and its two body voices, as explicit classes
 * so the same rules match inside the editor canvas.
 *
 * Note the mapping onto the shared type tokens is NOT the same as the home
 * page's. This page uses 32px and 24px sub-headings in the *sans*, where home
 * uses a 32px serif h3; so .fc-pdp-h3 is 32px sans and .fc-pdp-h4 is 24px sans.
 * The tokens themselves are shared — --fc-text-h4 is the 32px step and
 * --fc-text-h5 the 24px one, whatever they are called.
 *
 * Colour is deliberately left off the headings: each section sets its own, so a
 * heading inherits the right ink or paper from the ground it sits on. Body copy
 * is the exception — the design mutes it to 80% on every ground, which is a
 * different value per ground, so it carries the paper-section default here and
 * the dark bands override it.
 * ------------------------------------------------------------------------- */

.fc-pdp-h1,
.fc-pdp-h2 {
	font-family: var(--fc-font-display);
	font-weight: 400;
	/* The design's -0.72px at 72px and -0.62px at 62px are both exactly -1%. */
	letter-spacing: -0.01em;
	margin: 0;
}

.fc-pdp-h1 {
	font-size: var(--fc-text-h1);
	line-height: 1.1;
}

.fc-pdp-h2 {
	font-size: var(--fc-text-h2);
	line-height: 1;
}

.fc-pdp-h3 {
	font-family: var(--fc-font-body);
	font-weight: 600;
	font-size: var(--fc-text-h4);
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0;
}

.fc-pdp-h4 {
	font-family: var(--fc-font-body);
	font-weight: 600;
	font-size: var(--fc-text-h5);
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0;
}

.fc-pdp-body {
	font-family: var(--fc-font-body);
	font-weight: 500;
	font-size: var(--fc-text-body);
	line-height: 1.4;
	color: var(--fc-ink-80);
	margin: 0;
}

/* Uppercase Trispace, for the two panel markers and the accordion toggles. */
.fc-pdp-caption {
	font-family: var(--fc-font-caption);
	font-weight: 400;
	font-size: var(--fc-text-body);
	line-height: 1.3;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin: 0;
}

/* --- Hero ----------------------------------------------------------------
 * A paper band with the headline sitting low and left, over a dot field and a
 * sweep of circuit traces that enter from the right. 938px tall in the frame.
 *
 * The copy column starts 106px from the frame's left edge, not at the 359px
 * gutter the rest of the page uses (node 6005:2344 centres at 960-538 on a
 * 632px box). Reproduced as drawn — it is the hero, and the traces need the
 * room on the right — but flagged, because it is the one place on the page
 * where the left margin is not one of the two section gutters.
 * ------------------------------------------------------------------------- */

.fc-pdp-hero {
	position: relative;
	overflow: hidden;
	background: var(--fc-paper);
	color: var(--fc-ink);
	/*
	 * The frame is 938 tall with the copy starting at 493 — the top half is
	 * given to the visual. min-height rather than height so the section grows
	 * if an editor lengthens the headline instead of clipping it, which is what
	 * the design's overflow-clip would do.
	 */
	min-height: clamp(560px, 48.9vw, 938px);
	padding: clamp(220px, 25.7vw, 493px) var(--fc-sec-x-wide) var(--fc-sec-y)
		clamp(1.5rem, 5.52vw, 106px);
	box-sizing: border-box;
}

/*
 * The decorative chrome, injected by fluent_commerce_pdp_hero_visual(). Behind
 * the copy and inert: aria-hidden in the markup, pointer-events: none here.
 */
.fc-pdp-hero__visual {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/*
 * The dot field (node 6005:2329, "Union"). 2,880 identical 4px dots on a
 * uniform 36px pitch, black at 10% — so a tiled radial-gradient instead of the
 * 532KB SVG the design exports. The 2px offset centres the dot in its cell.
 */
.fc-pdp-hero__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 2px 2px, rgba(0, 0, 0, 0.1) 2px, transparent 2px);
	background-size: 36px 36px;
	/* DEVIATION: the source layer is 2848x1264 centred in a 938px band, so it
	 * overflows on both axes and its exact phase can't be reproduced by tiling.
	 * Centring leaves the grid off-phase by at most 18px — half a cell, at 10%
	 * opacity. */
	background-position: center;
}

/*
 * The paper fade along the bottom edge (node 6005:2343): a 191px band of #eee
 * fading upward to nothing, so the traces dissolve into the next section rather
 * than being cut off by the clip.
 */
.fc-pdp-hero__visual::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 191px;
	background: linear-gradient(to top, var(--fc-paper), rgba(238, 238, 238, 0));
}

/*
 * The six trace layers (6005:2330-2335) merged into one 3.9KB SVG. All six
 * terminate at the same x in the frame, which is what cross-checked the
 * arithmetic; the numbers below are that merged file's own box, bleed included,
 * positioned from the frame centre so it stays put as the viewport narrows.
 */
.fc-pdp-hero__traces {
	position: absolute;
	left: calc(50% - 599.44px);
	top: -330.14px;
	width: 2078.88px;
	height: 918.64px;
	background: url(pdp-hero-traces.svg) no-repeat center / 100% 100%;
}

/* The black mark card (6005:2336): a 69.189px ink square around the 120x117
 * wordmark. Centred on 50% + 272.43px, exactly as the frame has it. */
.fc-pdp-hero__card {
	position: absolute;
	left: calc(50% + 272.43px);
	top: 365px;
	transform: translateX(-50%);
	display: flex;
	padding: 69.189px;
	background: var(--fc-ink);
}

.fc-pdp-hero__card img {
	display: block;
	width: 120.484px;
	height: 116.592px;
}

/*
 * The two junction dots (6005:2341, 6005:2342).
 *
 * DEVIATION: drawn in CSS rather than from their exported asset, so the fill and
 * ring are an approximation of the design's — a violet core inside a paper ring,
 * which is what the export reads as at 30px.
 */
.fc-pdp-hero__node {
	position: absolute;
	top: 477px;
	width: 30px;
	height: 30px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: var(--fc-violet);
	box-shadow: 0 0 0 4px var(--fc-paper);
}

.fc-pdp-hero__node--a {
	left: calc(50% + 143px);
}

.fc-pdp-hero__node--b {
	left: calc(50% + 402px);
}

/* 28px between the headline, the lead-plus-CTA block, and the link (6005:2344);
 * 32px inside that block (6005:2346), which the CTA's extra 4px makes up. */
.fc-pdp-hero__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
	width: 100%;
	max-width: 632px;
}

.fc-pdp-hero__actions.wp-block-buttons {
	margin: 4px 0 0;
	gap: 0;
}

/*
 * "Discover the method behind the melody →". A Trispace caption in the design,
 * not a body link (node 6005:2131), and at full ink rather than 80%.
 *
 * The design gives no hover state; underlining on hover is our own, so the link
 * reads as one on a page where the CTAs are buttons. It is a jump link to the
 * mosaic below, which is why it is not a .fc-btn.
 */
.fc-pdp-hero__link {
	font-family: var(--fc-font-caption);
	font-weight: 400;
	font-size: var(--fc-text-body);
	line-height: 1.3;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin: 0;
}

.fc-pdp-hero__link a {
	color: var(--fc-ink);
	text-decoration: none;
}

.fc-pdp-hero__link a:hover,
.fc-pdp-hero__link a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 781px) {
	/*
	 * No mobile frame. The traces, the mark card and the junction dots are all
	 * positioned from the frame centre with offsets of 270-600px, so below tablet
	 * they either sit off-screen or land on top of the headline. The dot field and
	 * the bottom fade carry the hero's texture on their own, so the three
	 * positioned layers are dropped rather than rescaled into a different
	 * composition than the one that was designed.
	 */
	.fc-pdp-hero__traces,
	.fc-pdp-hero__card,
	.fc-pdp-hero__node {
		display: none;
	}

	.fc-pdp-hero {
		/* The copy no longer needs to clear the visual, so it comes up the page
		 * and the hero aligns with every other section's gutter. */
		min-height: 0;
		padding: var(--fc-sec-y-lg) var(--fc-sec-x-wide);
	}
}

/* --- Capability mosaic ---------------------------------------------------
 * A centred header over a 4x4 grid of 286x173 cards with 20px gaps, the dark
 * feature card spanning the top-right 3x3 block.
 *
 * The column positions in the frame are 359 / 665 / 970 / 1275 with the last
 * card ending at 1561 — a 1202px content width inside the 359px gutters, on a
 * 306px pitch. So: four equal columns, 20px gaps, and the grid is described
 * once as named areas rather than eight sets of coordinates.
 * ------------------------------------------------------------------------- */

.fc-pdp-harmonies {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 54px;
	padding: var(--fc-sec-y-lg) var(--fc-sec-x-wide);
	background: var(--fc-paper);
	color: var(--fc-ink);
}

.fc-pdp-harmonies__header {
	display: grid;
	gap: 24px;
	justify-items: center;
	width: 100%;
	max-width: 812px;
	margin: 0 auto;
	text-align: center;
}

.fc-pdp-harmonies__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* minmax so a card can grow past 173px if an editor lengthens its label,
	 * instead of the text spilling out of a fixed-height box. */
	grid-template-rows: repeat(4, minmax(173px, auto));
	gap: 20px;
	grid-template-areas:
		"selected      feature feature feature"
		"analytics     feature feature feature"
		"store         feature feature feature"
		"orchestration returns service delivery";
}

/*
 * A card. Icon pinned to the top, label (and on the feature card, its body) to
 * the bottom — the design's justify-between, expressed as an auto margin so the
 * feature card's two text lines stay 8px apart instead of being spread as well.
 */
.fc-pdp-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	border: 1px solid rgba(18, 18, 18, 0.2);
	box-sizing: border-box;
}

/*
 * The 36px icon.
 *
 * Painted through mask-image with a background-color rather than shipped as an
 * <img>, the same trick .fc-btn's arrow uses — that is what lets one monochrome
 * file serve the outline cards, the violet card and the dark feature card. The
 * colour is a custom property rather than currentColor because the design does
 * NOT tie it to the text: the outline cards' icons are violet against ink text,
 * and only the two filled cards use their text colour.
 */
.fc-pdp-card::before {
	content: "";
	flex: none;
	width: 36px;
	height: 36px;
	margin-bottom: auto;
	background-color: var(--fc-pdp-icon-color, var(--fc-violet));
	-webkit-mask-image: var(--fc-pdp-icon);
	mask-image: var(--fc-pdp-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fc-pdp-card--icon-inventory {
	--fc-pdp-icon: url(pdp-icon-inventory.svg);
}

.fc-pdp-card--icon-analytics {
	--fc-pdp-icon: url(pdp-icon-analytics.svg);
}

.fc-pdp-card--icon-store {
	--fc-pdp-icon: url(pdp-icon-store.svg);
}

.fc-pdp-card--icon-orchestration {
	--fc-pdp-icon: url(pdp-icon-orchestration.svg);
}

.fc-pdp-card--icon-returns {
	--fc-pdp-icon: url(pdp-icon-returns.svg);
}

.fc-pdp-card--icon-service {
	--fc-pdp-icon: url(pdp-icon-service.svg);
}

.fc-pdp-card--icon-delivery {
	--fc-pdp-icon: url(pdp-icon-delivery.svg);
}

/* The expanded card: ink ground, a paper icon, a 32px label and body copy. */
.fc-pdp-card--feature {
	grid-area: feature;
	background: var(--fc-ink);
	color: var(--fc-paper);
	border-color: var(--fc-paper-20);
	--fc-pdp-icon-color: var(--fc-paper);
}

.fc-pdp-card--feature .fc-pdp-card__title,
.fc-pdp-card--feature .fc-pdp-card__body {
	/* The design caps this text at 543px inside an 896px card. */
	max-width: 543px;
}

.fc-pdp-card--feature .fc-pdp-card__body {
	margin-top: 8px;
	color: var(--fc-paper-80);
}

/*
 * The small card matching the expanded one, in its selected state. In Figma
 * these eight are one interactive component — clicking a small card expands it
 * into the feature slot and marks it selected. Built as the resting state; the
 * interaction belongs to the motion pass, so there is deliberately no
 * cursor: pointer here. Pretending a card is clickable when nothing happens is
 * worse than leaving it plainly static.
 */
.fc-pdp-card--selected {
	grid-area: selected;
	background: var(--fc-violet);
	color: #fff;
	--fc-pdp-icon-color: #fff;
}

.fc-pdp-card--analytics {
	grid-area: analytics;
}

.fc-pdp-card--store {
	grid-area: store;
}

.fc-pdp-card--orchestration {
	grid-area: orchestration;
}

.fc-pdp-card--returns {
	grid-area: returns;
}

.fc-pdp-card--service {
	grid-area: service;
}

.fc-pdp-card--delivery {
	grid-area: delivery;
}

@media (max-width: 1100px) {
	/*
	 * Four 286px columns need 1,202px of content width; at 1100 they would be
	 * 157px each, narrower than the 36px icon plus a two-word label. So the
	 * mosaic drops to two columns with the feature card full width across the
	 * top, and the remaining seven flow in DOM order — which leaves the last
	 * card on a half-width row of its own. The alternative, spanning it to fill,
	 * would give one arbitrary card twice the emphasis of its neighbours.
	 */
	.fc-pdp-harmonies__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		grid-template-areas: none;
	}

	.fc-pdp-card {
		grid-area: auto;
		min-height: 173px;
	}

	.fc-pdp-card--feature {
		grid-area: auto;
		grid-column: 1 / -1;
	}
}

@media (max-width: 781px) {
	.fc-pdp-harmonies__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * The two scrolling regions take tabindex from
 * fluent_commerce_pdp_scroller_a11y(), so they are focus stops and need to say
 * so. Inset, because an outline on a box that is masked at both edges would be
 * clipped by the mask if it sat outside.
 */
.fc-pdp-platform__rail:focus-visible,
.fc-pdp-industries__scroller:focus-visible {
	outline: 2px solid var(--fc-violet);
	outline-offset: -2px;
}

/* --- Capability tile rail ------------------------------------------------
 * A centred header over five 429px illustrated tiles.
 *
 * The row is a native horizontal scroller. In Figma the five tiles total
 * 2,241px inside a 1,506px flex box that overflows the frame, with a designer's
 * note reading "forced scroll when section reaches center" — so the row does
 * scroll sideways, but here it scrolls by ordinary means (drag, trackpad,
 * shift+wheel, arrow keys, and a real scrollbar) rather than by pinning the page
 * and hijacking vertical scroll. Native overflow stays reachable by keyboard and
 * assistive tech, costs no JavaScript, and doesn't fight reduced-motion.
 * ------------------------------------------------------------------------- */

.fc-pdp-platform {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 54px;
	/* No side padding on the section itself — the rail has to reach both edges. */
	padding: var(--fc-sec-y-lg) 0;
	background: var(--fc-paper);
	color: var(--fc-ink);
	overflow: hidden;
}

.fc-pdp-platform__header {
	display: grid;
	gap: 24px;
	justify-items: center;
	/* 716px of content inside the page's own gutters. */
	width: 100%;
	max-width: calc(716px + 2 * var(--fc-sec-x-wide));
	margin: 0 auto;
	padding: 0 var(--fc-sec-x-wide);
	box-sizing: border-box;
	text-align: center;
}

/*
 * The rail. Its first tile starts at the frame's 207px gutter — the design's
 * 1,506px box is centred, so its left edge lands on 207 — and the same padding
 * closes the far end, so the last tile stops at the mirror of where the first
 * one starts. (The design lets that tile run off the frame edge, which is the
 * right answer for a still and the wrong one for something you can scroll to
 * the end of.)
 */
.fc-pdp-platform__rail {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 0 max(var(--fc-sec-x), calc(50% - 753px));
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
	/*
	 * The design fades the row into the paper at both ends with four overlapping
	 * gradient rects (6005:2556-2559). One mask on the scroller does the same job
	 * and — unlike overlays — can't sit on top of the tiles and swallow a drag.
	 *
	 * DEVIATION: the design's right-hand fade is 533px against 296px on the left.
	 * Both are 296px here: asymmetry that reads as "more to come" on a still
	 * becomes 533px of half-visible tile once you can actually scroll to the end.
	 */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 clamp(80px, 15.4vw, 296px),
		#000 calc(100% - clamp(80px, 15.4vw, 296px)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 clamp(80px, 15.4vw, 296px),
		#000 calc(100% - clamp(80px, 15.4vw, 296px)),
		transparent 100%
	);
}

.fc-pdp-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	flex: 0 0 429.396px;
	scroll-snap-align: center;
}

/* The white illustration frame. Square in the design, and both the design's box
 * and the export are square, so aspect-ratio holds it without a fixed height. */
.fc-pdp-tile__figure {
	width: 100%;
	margin: 0;
	background: #fff;
	aspect-ratio: 1;
	overflow: hidden;
}

/* Doubled class beats core's ".wp-block-image img { height: auto }". */
.fc-pdp-tile__figure.fc-pdp-tile__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fc-pdp-tile__caption {
	padding: 0 16px;
	box-sizing: border-box;
}

/*
 * The caption's opening word is 24px semibold and the sentence continues at
 * 18px medium. In Figma that is one text node with a line break after the word,
 * so it is one paragraph here with the lead as a block-level <strong> — one
 * editable field, and the line break the design draws.
 */
.fc-pdp-tile__caption strong {
	display: block;
	font-weight: 600;
	font-size: var(--fc-text-h5);
	line-height: 1.3;
}

@media (max-width: 781px) {
	/* A 429px tile is wider than the viewport, so it would fill the screen with
	 * no sign that the row continues. Narrower tiles keep the next one's edge in
	 * view, which is the only cue that this scrolls. */
	.fc-pdp-tile {
		flex-basis: min(300px, 78vw);
	}
}

/* --- Two audience panels ------------------------------------------------
 * A centred header over two 596x441 panels, each with copy over its own
 * visual and a Trispace marker in the top-right corner.
 * ------------------------------------------------------------------------- */

.fc-pdp-teams {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 54px;
	justify-items: center;
	padding: var(--fc-sec-y) var(--fc-sec-x-wide) var(--fc-sec-y-lg);
	background: var(--fc-paper);
	color: var(--fc-ink);
}

.fc-pdp-teams__header {
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 606px;
	text-align: center;
}

/* The design puts a soft white glow behind this line (node 6005:2563) — it sits
 * over the paper, so it reads as a faint lift rather than a shadow. */
.fc-pdp-teams__lead {
	text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.29);
}

.fc-pdp-teams__panels {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	width: 100%;
}

.fc-pdp-panel {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr auto;
	align-content: start;
	padding: 31px;
	border: 1px solid var(--fc-void);
	background: var(--fc-paper);
	color: var(--fc-paper);
	/* 596x441 in the frame. */
	aspect-ratio: 596 / 441;
	box-sizing: border-box;
}

.fc-pdp-panel__figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

.fc-pdp-panel__figure.fc-pdp-panel__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * ADDED, not in the design: a scrim under the copy.
 *
 * The design's panels hold dark video, so paper text over them is legible with
 * nothing behind it. The shipped placeholder is a light raster and the client
 * will replace it with footage of their choosing, so unguarded #eee text is a
 * coin flip. This is the cheapest insurance — delete this rule if the final
 * footage is dark enough not to need it.
 */
.fc-pdp-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 60%;
	background: linear-gradient(to bottom, rgba(18, 18, 18, 0.62), rgba(18, 18, 18, 0));
	pointer-events: none;
}

.fc-pdp-panel__marker,
.fc-pdp-panel__title,
.fc-pdp-panel__body {
	position: relative;
}

.fc-pdp-panel__marker {
	grid-column: 2;
	grid-row: 1;
	text-align: right;
}

.fc-pdp-panel__title {
	grid-column: 1;
	grid-row: 1;
}

.fc-pdp-panel__body {
	grid-column: 1;
	grid-row: 2;
	max-width: 355px;
	margin-top: 24px;
	color: var(--fc-paper);
}

@media (max-width: 1100px) {
	/*
	 * The copy block inside a panel is 532px wide with a 31px inset, so a panel
	 * needs ~594px to hold it. Two of them stop fitting well before 1100, and
	 * squeezing them reflows "For business teams" onto two lines against a fixed
	 * 441px height. Stacked, each panel keeps the design's proportions.
	 */
	.fc-pdp-teams__panels {
		grid-template-columns: minmax(0, 1fr);
	}

	.fc-pdp-panel {
		aspect-ratio: auto;
		min-height: 441px;
	}
}

@media (max-width: 640px) {
	.fc-pdp-panel {
		padding: 24px;
		min-height: 380px;
	}
}

/* --- Scale band ----------------------------------------------------------
 * An ink band: the headline column on the left, two groups of three square
 * cards on the right. 590 + 72 + 846 = 1,508 across the frame's 207px gutters.
 * ------------------------------------------------------------------------- */

.fc-pdp-scale {
	display: grid;
	grid-template-columns: minmax(0, 590fr) minmax(0, 846fr);
	gap: 72px;
	align-items: start;
	padding: var(--fc-sec-y-lg) var(--fc-sec-x);
	background: var(--fc-ink);
	color: var(--fc-paper);
}

.fc-pdp-scale .fc-pdp-body {
	color: var(--fc-paper);
}

.fc-pdp-scale__intro {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	align-self: stretch;
}

/*
 * DEVIATION, held open on purpose: the design reserves a 550px-tall slot at the
 * bottom of this column (node 6005:2585, set to mix-blend-screen) that is
 * completely empty — no fill, no image, no layer inside it. The space is kept
 * exactly as drawn and left blank rather than filled with a guess, so whatever
 * is intended drops straight into the right place. A pseudo-element rather than
 * markup, so there is nothing in the editor for someone to wonder about.
 */
.fc-pdp-scale__intro::after {
	content: "";
	display: block;
	height: 550px;
	margin-top: auto;
}

.fc-pdp-scale__groups {
	display: grid;
	gap: 120px;
}

.fc-pdp-scale__group {
	display: flex;
	flex-direction: column;
}

.fc-pdp-scale__subtitle {
	margin-bottom: 32px;
}

/*
 * In Figma the body copy is one text node whose paragraphs are separated by
 * zero-width-space spacer lines. Those are real paragraph breaks in the markup,
 * and an empty 18px/1.4 line is 25.2px — which is what this reproduces.
 */
.fc-pdp-scale__body + .fc-pdp-scale__body {
	margin-top: 25px;
}

.fc-pdp-scale__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 54px;
}

/*
 * Three 282px squares butted edge to edge, so neighbouring 1px borders would
 * otherwise stack into a 2px rule. Pulling each card onto its neighbour's border
 * collapses them back to one.
 */
.fc-pdp-scale__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	/*
	 * Square, but never at the cost of the copy inside it. Between 1100px and
	 * the full frame the square shrinks while the labels wrap taller, and the two
	 * cross over — aspect-ratio on its own would clip. min-height wins over
	 * aspect-ratio, so fit-content makes the height max(square, content).
	 */
	aspect-ratio: 1;
	min-height: fit-content;
	box-sizing: border-box;
}

.fc-pdp-scale__card + .fc-pdp-scale__card {
	margin-left: -1px;
}

.fc-pdp-scale__card-body.fc-pdp-body {
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1100px) {
	.fc-pdp-scale {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fc-sec-y);
	}

	/* Stacked, the reserved slot would be 550px of blank ink between the
	 * headline and the cards. Held only while the two columns sit side by side,
	 * where it is filling space the right-hand column already occupies. */
	.fc-pdp-scale__intro::after {
		display: none;
	}

	/* Three cards in one column's width instead of the frame's 846px: the square
	 * would go to 228px and clip its own copy. */
	.fc-pdp-scale__card {
		aspect-ratio: auto;
		min-height: 240px;
	}

	.fc-pdp-scale__groups {
		gap: var(--fc-sec-y-lg);
	}
}

@media (max-width: 781px) {
	.fc-pdp-scale__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.fc-pdp-scale__card + .fc-pdp-scale__card {
		margin-left: 0;
		margin-top: -1px;
	}

	.fc-pdp-scale__card {
		min-height: 0;
	}
}

/* --- Industries ---------------------------------------------------------
 * Copy on the left at the 359px gutter; on the right a 699px column of the
 * sixteen industries that scrolls inside itself, masked to paper at both ends.
 *
 * The two columns are not symmetric in the frame: the copy starts at 359 and
 * the list ends at 1,664, leaving a 256px right margin. Reproduced with the
 * same ratios rather than centred.
 * ------------------------------------------------------------------------- */

.fc-pdp-industries {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 427fr) minmax(0, 699fr);
	gap: clamp(32px, 9.3vw, 179px);
	align-items: center;
	min-height: 699px;
	padding: var(--fc-sec-y-lg) clamp(1.5rem, 13.3vw, 256px) var(--fc-sec-y-lg)
		var(--fc-sec-x-wide);
	background: var(--fc-paper);
	color: var(--fc-ink);
	overflow: hidden;
	box-sizing: border-box;
}

.fc-pdp-industries__intro {
	display: grid;
	gap: 32px;
}

/*
 * The cue between the two columns (node 6005:2624): the same triangle .fc-btn
 * uses for its arrow, at 4.11x — the design's 32.887x65.773 box is exactly the
 * button arrow's 8x16 scaled up, so it is the same file rather than a new asset.
 */
.fc-pdp-industries::after {
	content: "";
	position: absolute;
	left: calc(50% - 85.44px);
	top: 273.73px;
	width: 32.887px;
	height: 65.773px;
	background-color: var(--fc-ink);
	-webkit-mask-image: url(home-arrow.svg);
	mask-image: url(home-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
}

.fc-pdp-industries__scroller {
	height: 438px;
	overflow-x: hidden;
	overflow-y: auto;
	/*
	 * The design's two 121px paper gradients (6005:2622, 6005:2623) sit inside
	 * this box, so as drawn they would scroll away with the list. A mask on the
	 * scroller is pinned to the box, which is what the design means.
	 */
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 121px,
		#000 calc(100% - 121px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 121px,
		#000 calc(100% - 121px),
		transparent 100%
	);
	/*
	 * A visible scrollbar, which the design does not have. Without it — and
	 * without the animation the design implies — nothing tells you this column
	 * moves. Drop the two declarations below once the scroll is animated.
	 */
	scrollbar-width: thin;
	overscroll-behavior-y: contain;
}

/*
 * 142px above the first item and 210px below the last, so the list starts and
 * ends inside the fades rather than flush against them.
 */
.fc-pdp-industries__list {
	list-style: none;
	margin: 0;
	padding: 142px 0 210px;
}

.fc-pdp-industries__list li {
	font-family: var(--fc-font-body);
	font-weight: 600;
	font-size: var(--fc-text-h2);
	line-height: 1.4;
	color: var(--fc-ink);
}

@media (max-width: 1100px) {
	.fc-pdp-industries {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fc-sec-y);
		min-height: 0;
		padding-inline: var(--fc-sec-x-wide);
	}

	/* Positioned off the frame centre, between two columns that no longer sit
	 * side by side. */
	.fc-pdp-industries::after {
		display: none;
	}
}

@media (max-width: 781px) {
	/*
	 * The inner scroll is dropped and the whole list laid out in the page. A
	 * scrollable box nested inside page scroll is awkward to operate on a
	 * touchscreen — and sixteen items is short enough to show whole. Figma has no
	 * mobile frame for this section.
	 */
	.fc-pdp-industries__scroller {
		height: auto;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.fc-pdp-industries__list {
		padding: 0;
	}

	.fc-pdp-industries__list li {
		/* 62px is the design's display size for a column you scan; in flow, at
		 * phone width, it is a wall. */
		font-size: var(--fc-text-h4);
		line-height: 1.3;
	}

	.fc-pdp-industries__list li + li {
		margin-top: 12px;
	}
}

/* --- Signal band --------------------------------------------------------
 * An ink band, 808px tall, with a wide screen-recording still blended into the
 * ink behind centred copy and a CTA.
 * ------------------------------------------------------------------------- */

.fc-pdp-signal {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 808px;
	padding: var(--fc-sec-y-lg) var(--fc-sec-x);
	background: var(--fc-ink);
	color: #fff;
	overflow: hidden;
	/* Keeps the still's blend inside this section, so it composites against the
	 * band's own ink and not against whatever is painted behind the page. */
	isolation: isolate;
	box-sizing: border-box;
}

/*
 * The still (node 6005:2629): 1,501px wide starting 209px in, full band height,
 * blended rather than laid on top. Expressed as percentages of the frame so it
 * keeps its place as the viewport narrows.
 */
.fc-pdp-signal__figure {
	position: absolute;
	left: 10.89%;
	top: 0;
	width: 78.18%;
	height: 100%;
	margin: 0;
	mix-blend-mode: lighten;
	pointer-events: none;
}

.fc-pdp-signal__figure.fc-pdp-signal__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fc-pdp-signal__inner {
	position: relative;
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 590px;
}

/* The headline breaks well short of the column it sits in (398.853px of 590). */
.fc-pdp-signal__title {
	max-width: 399px;
}

/* The body and CTA are indented 132px under the headline — the design's one
 * editorial offset in this section. */
.fc-pdp-signal__body {
	display: grid;
	padding-left: 132px;
}

/* Zero-width-space spacer lines again: an empty 18px/1.4 line is 25.2px. */
.fc-pdp-signal__body .fc-pdp-body {
	color: rgba(255, 255, 255, 0.8);
}

.fc-pdp-signal__body .fc-pdp-body + .fc-pdp-body {
	margin-top: 25px;
}

.fc-pdp-signal__actions.wp-block-buttons {
	margin: 32px 0 0;
	gap: 0;
}

@media (max-width: 781px) {
	.fc-pdp-signal {
		min-height: 0;
	}

	/* 132px of indent inside a 32px gutter leaves the copy in a column of its
	 * own. The offset is a desktop device. */
	.fc-pdp-signal__body {
		padding-left: 0;
	}

	.fc-pdp-signal__figure {
		left: 0;
		width: 100%;
	}
}

/* --- FAQ ----------------------------------------------------------------
 * A 438px serif heading beside a 744px column of five collapsed accordions.
 * 438 + 20 + 744 = 1,202 inside the frame's 359px gutters.
 * ------------------------------------------------------------------------- */

.fc-pdp-faq {
	display: grid;
	grid-template-columns: minmax(0, 438fr) minmax(0, 744fr);
	gap: 20px;
	align-items: start;
	padding: var(--fc-sec-y) var(--fc-sec-x-wide);
	background: var(--fc-paper);
	color: var(--fc-ink);
}

/*
 * A hairline above every row and one below the last, with 32px of air on both
 * sides of each — the design draws six separate 1px lines around five rows,
 * which is one border-top on the column plus one border-bottom per row.
 */
.fc-pdp-faq__list {
	display: grid;
	gap: 32px;
	padding-top: 32px;
	border-top: 1px solid rgba(18, 18, 18, 0.2);
}

.fc-pdp-faq__item {
	margin: 0;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(18, 18, 18, 0.2);
}

.fc-pdp-faq__item > summary {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	font-family: var(--fc-font-body);
	font-weight: 600;
	font-size: var(--fc-text-h5);
	line-height: 1.3;
	color: var(--fc-ink);
	cursor: pointer;
	/* display: flex already suppresses the disclosure triangle in most engines;
	 * these two cover the ones where it doesn't. */
	list-style: none;
}

.fc-pdp-faq__item > summary::-webkit-details-marker {
	display: none;
}

/*
 * The toggle.
 *
 * DEVIATION: Figma renders it as three separate Trispace text nodes — "[", "+",
 * "]" with 10px between them — and draws no open state at all. Drawn here as one
 * generated string, with "[ – ]" chosen for open.
 */
.fc-pdp-faq__item > summary::after {
	content: "[ + ]";
	flex: none;
	margin-left: auto;
	font-family: var(--fc-font-caption);
	font-weight: 400;
	font-size: var(--fc-text-body);
	line-height: 1.3;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.fc-pdp-faq__item[open] > summary::after {
	content: "[ – ]";
}

.fc-pdp-faq__answer {
	margin-top: 24px;
}

.fc-pdp-faq__answer + .fc-pdp-faq__answer {
	/* Zero-width-space spacer lines, as elsewhere on the page. */
	margin-top: 25px;
}

@media (max-width: 1100px) {
	/* A 62px headline in a 438px column that has shrunk with the viewport starts
	 * breaking mid-word. */
	.fc-pdp-faq {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fc-sec-y);
	}
}