/*
 * Home page (2026 brand refresh).
 *
 * Loaded on the "Home 2026" page template and inside the block editor when
 * that template is in use, so the editor previews the real design. None of it
 * reaches the existing pages. Values come from the 1920px Figma frame; where
 * the design gives no guidance (small screens, hover states) the choice is
 * called out in a comment so it can be checked against the designer's intent.
 *
 * Section grounds alternate between ink (#121212) and paper (#eee), so colour
 * is set per section rather than inherited from the page.
 *
 * SCOPING RULE — important for editor parity: 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 must key off the block's own
 * fc-home-* class, which is present in both the editor and the frontend. Each
 * section therefore also paints its own background, so a dark section still
 * reads correctly against the editor's white canvas.
 *
 * BREAKPOINTS — three tiers, and only these three, so a new section can never
 * introduce a fourth:
 *
 *   1100px  The design's two-column rows and five-across grids stop fitting.
 *           Rows stack, wide grids reflow, the nav collapses to its toggle.
 *    781px  WordPress's own mobile breakpoint — core block CSS and style.css
 *           both use it, so matching it keeps the theme and core in step.
 *           Tablet portrait and down: single column, the editorial indents
 *           dropped, the desktop vertical rhythm stepped down.
 *    640px  Phone. Only for what is still wrong at 781: fixed minimum
 *           heights, the photo rails, the visual's framing offsets.
 *
 * Desktop-first (max-width) throughout. Mobile-first is the better default on
 * a new stylesheet, but the design is a single 1920px frame and the desktop
 * layout is the reviewed one — inverting 1650 lines of it would be a rewrite
 * that buys nothing. Consistency within the file wins here.
 *
 * Everything below 1100px is our own work: the Figma file has no mobile
 * frames. Each of those decisions is commented where it is made, so the
 * designer can accept or replace it rather than having to find it.
 *
 * @package Fluent_Commerce
 */

/*
 * Section rhythm tokens.
 *
 * Every section's padding comes from these four values, so the page's rhythm
 * steps down at one place per breakpoint instead of inside twelve separate
 * rules — and a new section only has to decide which of the two vertical
 * bands and which of the two gutters it belongs to.
 *
 *   --fc-sec-y       standard band (72px in the frame)
 *   --fc-sec-y-lg    the roomier bands the design gives 120px
 *   --fc-sec-x       standard side gutter (the frame's 207px)
 *   --fc-sec-x-wide  the wider gutter used by the list and card sections (359px)
 *
 * Declared on :root rather than on .fc-home so they also resolve inside the
 * editor's iframe, which has its own document and no body class of ours.
 */
:root {
	--fc-sec-y: 72px;
	--fc-sec-y-lg: 120px;
	--fc-sec-x: clamp(1.5rem, 10.8vw, 207px);
	--fc-sec-x-wide: clamp(1.5rem, 18.7vw, 359px);
}

/*
 * No mobile frames. Desktop bands of 72px and 120px are a big share of a phone
 * screen and make the page feel padded rather than composed, so both step down
 * twice.
 *
 * The gutters have to be overridden outright, not left to their clamps. Their
 * middles are 10.8vw and 18.7vw, and a viewport has to fall below about 128px
 * before the 1.5rem floor ever applies — so at 390px the wide sections were
 * still taking 18.7vw a side, 146px of gutter around 244px of content. Measured,
 * not assumed: that was 37% of the screen given to margin.
 *
 * The two gutters also converge here. The 207px/359px distinction is an
 * editorial device that only reads at desktop scale; at phone width the only
 * question is how far the text sits from the edge, and it should be one answer.
 */
@media (max-width: 781px) {
	:root {
		--fc-sec-y: 48px;
		--fc-sec-y-lg: 64px;
		--fc-sec-x: 32px;
		--fc-sec-x-wide: 32px;
	}
}

@media (max-width: 640px) {
	:root {
		--fc-sec-y: 40px;
		--fc-sec-y-lg: 52px;
		--fc-sec-x: 24px;
		--fc-sec-x-wide: 24px;
	}
}

/* --- Page shell ----------------------------------------------------------
 * This template renders full-bleed sections instead of the centered .fc-wrap
 * the rest of the site uses, so the shell is defined here from scratch.
 * Frontend only — see the scoping rule above.
 * ------------------------------------------------------------------------- */

body.fc-home {
	font-family: var(--fc-font-body);
	background: var(--fc-ink);
	color: var(--fc-paper);
	line-height: 1.4;
	/* The design is a 1920px frame; beyond that the sections stop growing and
	 * center, rather than stretching indefinitely on ultra-wide monitors. */
	max-width: 1920px;
	margin: 0 auto;
}

.fc-home main > * {
	/* Sections butt directly against each other — the rhythm is each section's
	 * own padding, not a gap between them (the design has no gaps). */
	margin: 0;
}

/*
 * The theme has no theme.json, so WordPress restores the legacy
 * .wp-block-group__inner-container wrapper inside every group block. Making it
 * display:contents lets the group's real children take part in the group's own
 * flex layout, so the sections can be styled from their semantic classes and
 * nothing depends on whether that wrapper is present.
 *
 * The editor emits the same wrapper (as .wp-block-group__inner-container
 * .block-editor-block-list__layout), and it needs flattening there for the same
 * reason — without it every flex row and grid has exactly one child, so the
 * rows stack and each image fills the canvas at its aspect-ratio's full height.
 * Hence the second selector: the canvas has no body class to match on.
 *
 * Both selectors are scoped rather than bare because the stylesheet may later
 * load on any page that uses these sections, and flattening group wrappers
 * outside them would break layouts that rely on the wrapper being a box.
 */
.fc-home .wp-block-group__inner-container,
.editor-styles-wrapper .wp-block-group__inner-container {
	display: contents;
}

/* Shared section paddings, derived from the frame's 207px side gutters. */
.fc-home-section {
	padding: var(--fc-sec-y) var(--fc-sec-x);
}

/* --- Typography ----------------------------------------------------------
 * Applied as explicit classes rather than bare element selectors, so the same
 * rules match inside the editor canvas (where there is no fc-home ancestor)
 * without leaking onto every other admin screen.
 * ------------------------------------------------------------------------- */

.fc-home-h1,
.fc-home-h2,
.fc-home-h3 {
	font-family: var(--fc-font-display);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0;
}

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

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

.fc-home-h3 {
	font-size: var(--fc-text-h4);
	line-height: 1.2;
}

/* Uppercase Trispace caption, used for eyebrows and buttons. */
.fc-home-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;
}

/*
 * Bold uppercase line introducing a block of copy.
 *
 * Violet, which is how the design styles the one eyebrow it renders visibly —
 * the closing section's "Ready to fulfill your dreams?" (node 6005:2314).
 *
 * DEVIATION FROM THE DESIGN, deliberate: the two eyebrows in the two-up section
 * (nodes 6005:2160 and 6005:2177) are #121212 on a #121212 ground there, so they
 * can't be seen at all — almost certainly a slip from copying them off a paper
 * section. Rather than guess, they take the same violet as the one that is
 * visible.
 *
 * ACCESSIBILITY, needs a decision: --fc-violet is 4.1:1 on ink and 3.7:1 on
 * paper, so at 16px it misses AA (4.5:1) on both grounds — including where the
 * design uses it itself. Lightening it to about #b9a1f7 would clear AA on ink
 * while reading as the same accent; that's a brand call, so it's flagged rather
 * than made here.
 */
.fc-home-eyebrow {
	font-family: var(--fc-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	text-transform: uppercase;
	margin: 0;
	color: var(--fc-violet);
}

/*
 * 24px semibold sans — the design's second-level voice, used for section
 * sub-headlines and card labels. Colour is set per section, since it appears on
 * both grounds.
 */
.fc-home-subhead {
	font-family: var(--fc-font-body);
	font-weight: 600;
	font-size: var(--fc-text-h5);
	line-height: 1.3;
	margin: 0;
}

/*
 * 32px semibold sans — the design system's H4. Deliberately not folded into
 * .fc-home-h3, which is the same size in the *display* serif: the design uses
 * both at 32px and they aren't interchangeable.
 */
.fc-home-h4 {
	font-family: var(--fc-font-body);
	font-weight: 600;
	font-size: var(--fc-text-h4);
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0;
}

/* Body copy inside the refreshed sections. */
.fc-home-body {
	font-family: var(--fc-font-body);
	font-weight: 500;
	font-size: var(--fc-text-body);
	line-height: 1.4;
	margin: 0;
}

/* --- Button --------------------------------------------------------------
 * A hard-edged paper rectangle with an uppercase Trispace label and a small
 * triangular arrow. Width is left to the content (the design's 175px and
 * 204px are just the two label lengths), so editors can change the copy
 * without the button breaking.
 * ------------------------------------------------------------------------- */

.fc-btn .wp-block-button__link,
a.fc-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 53px;
	padding: 0 22px;
	border: 1px solid var(--fc-ink);
	border-radius: 0;
	background: var(--fc-paper);
	color: var(--fc-ink);
	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;
	text-decoration: none;
}

.fc-btn .wp-block-button__link::after,
a.fc-btn::after {
	content: "";
	width: 8px;
	height: 16px;
	flex: 0 0 8px;
	background-color: currentColor;
	-webkit-mask-image: url(home-arrow.svg);
	mask-image: url(home-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	/* The Figma component animates arrows sliding in from the left on hover.
	 * That's part of the motion pass; until then the arrow just nudges, so the
	 * button has an affordance without inventing a new hover treatment. */
	transition: transform 0.18s ease;
}

.fc-btn .wp-block-button__link:hover::after,
a.fc-btn:hover::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.fc-btn .wp-block-button__link::after,
	a.fc-btn::after {
		transition: none;
	}
}

/* --- Nav ----------------------------------------------------------------
 * Sits in normal flow above the hero, exactly as the design has it — it is
 * deliberately not sticky, since the design gives no scrolled state. Rendered
 * by header.php, so it never appears in the editor.
 * ------------------------------------------------------------------------- */

.fc-home-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fc-space-md);
	min-height: var(--fc-nav-h);
	padding: 16px clamp(1.25rem, 2.8vw, 54px);
	background: var(--fc-ink);
	border-bottom: 1px solid var(--fc-paper-20);
	/*
	 * Lifts the whole bar above the page so the submenu panels overlap the section
	 * below instead of sliding under it. Needed because several sections are
	 * position: relative themselves (the hero, for one) and would otherwise paint
	 * over a dropdown regardless of its own z-index — they're later in the DOM.
	 */
	position: relative;
	z-index: 10;
}

/*
 * The wordmark is also the home link, and at 15-19px tall it was the smallest
 * tap target on the page. The bar is 85px tall and centers its items, so a 44px
 * floor here is invisible — it just gives the link a thumb-sized box.
 */
.fc-home-nav__brand {
	display: flex;
	align-items: center;
	min-height: 44px;
	flex: 0 0 auto;
	line-height: 0;
}

.fc-home-nav__brand img {
	display: block;
	width: 229px;
	height: auto;
}

/*
 * The top-level row only — bound with > so the .sub-menu lists below don't
 * inherit it and lay their items out sideways.
 */
.fc-home-nav__menu,
.fc-home-nav__menu > ul {
	display: flex;
	align-items: center;
	gap: 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-home-nav__menu a {
	color: var(--fc-white-60);
	font-family: var(--fc-font-body);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	transition: color 0.15s ease;
}

.fc-home-nav__menu a:hover,
.fc-home-nav__menu a:focus-visible {
	/* The design has no hover state for nav links; brightening to full paper
	 * is the minimum needed for a usable link. */
	color: var(--fc-paper);
}

/* --- Nav dropdowns -------------------------------------------------------
 * DEVIATION FROM THE DESIGN: Figma has no submenu, so this panel is our
 * pattern. Product and Community are labels rather than destinations — their
 * own href is "#" — so the submenu is the only way through them, which is why
 * it opens three ways: hover for the mouse, :focus-within for the keyboard,
 * and the .is-open class assets/home-nav.js sets for touch. Miss any one of
 * those and a whole branch of the site becomes unreachable for someone.
 * ------------------------------------------------------------------------- */

/* The positioning context for the panel. */
.fc-home-nav__menu li {
	position: relative;
}

/* A caret, so a label that opens something looks different from one that
   navigates. Two borders on a rotated box — no icon file to load. */
.fc-home-nav__menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}

.fc-home-nav__menu li:hover > a::after,
.fc-home-nav__menu li:focus-within > a::after,
.fc-home-nav__menu li.is-open > a::after {
	transform: translateY(1px) rotate(225deg);
}

.fc-home-nav__menu .sub-menu {
	position: absolute;
	/* Flush under the bar. The nav's 16px padding sits between the label and the
	   bar's edge, so the panel starts level with the border rather than floating
	   in a gap the pointer would have to cross. */
	top: calc(100% + 16px);
	left: -24px;
	z-index: 20;
	display: block;
	min-width: 220px;
	margin: 0;
	padding: 18px 24px;
	list-style: none;
	background: var(--fc-ink);
	border: 1px solid var(--fc-paper-20);
	/*
	 * Hidden with visibility rather than display:none so it can transition, and
	 * because visibility:hidden also takes the links out of the tab order — a
	 * display:none panel can't animate, and an opacity:0 one leaves invisible
	 * links focusable.
	 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.fc-home-nav__menu li:hover > .sub-menu,
.fc-home-nav__menu li:focus-within > .sub-menu,
.fc-home-nav__menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.fc-home-nav__menu .sub-menu a {
	display: block;
	/* 40px rows: the panel is a pointer target as much as a list. */
	padding: 9px 0;
	line-height: 1.4;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.fc-home-nav__menu .sub-menu,
	.fc-home-nav__menu .menu-item-has-children > a::after {
		transition: none;
	}
}

/*
 * Holds the language switcher and the CTA button. It was a single-child wrapper
 * until the French microsite added the switcher beside the button, hence the flex
 * row — without it the two would stack.
 */
.fc-home-nav__cta {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--fc-space-md);
	padding-left: 46px;
}

/*
 * Language switcher (see inc/i18n.php). Styled as a nav link rather than a
 * second button, because it is navigation between two sites and not a call to
 * action competing with "Request demo".
 *
 * The label is always the name of the language being offered, written in that
 * language — "Français" on the English site, "English" on the French one. A
 * visitor who cannot read the current page can still read the way out. The lang
 * attribute in the markup is what stops a screen reader pronouncing "Français"
 * with English phonics.
 *
 * No flag icon: flags mean countries, not languages, and French is not
 * exclusively France.
 */
.fc-home-nav__lang {
	flex: 0 0 auto;
	color: var(--fc-white-60);
	font-family: var(--fc-font-body);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.fc-home-nav__lang:hover,
.fc-home-nav__lang:focus-visible {
	color: var(--fc-paper);
}

/*
 * The collapsible half of the bar.
 *
 * display: contents means the wrapper has no box of its own, so the menu and the
 * CTA stay direct flex children of .fc-home-nav and the design's three-part
 * desktop layout is exactly as it was before the wrapper existed. It only
 * becomes a real box inside the collapse breakpoint below.
 */
.fc-home-nav__panel {
	display: contents;
}

/*
 * The toggle. Hidden by default at every width: the collapse rules below only
 * show it inside .fc-home-nav--js, which assets/home-nav.js adds — so a
 * no-JavaScript visitor never sees a button that can't do anything, and gets the
 * wrapping bar instead.
 */
.fc-home-nav__toggle {
	display: none;
	align-items: center;
	gap: 10px;
	/* Comfortably over the 44px WCAG 2.5.8 target, and level with the wordmark. */
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--fc-paper);
	font-family: var(--fc-font-caption);
	font-size: var(--fc-text-body);
	line-height: 1.3;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	cursor: pointer;
}

/*
 * Three bars from one element: the middle is the span, the outer two are its
 * pseudo-elements offset either side. currentColor so they follow the label.
 */
.fc-home-nav__bars,
.fc-home-nav__bars::before,
.fc-home-nav__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.fc-home-nav__bars {
	position: relative;
}

.fc-home-nav__bars::before,
.fc-home-nav__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.fc-home-nav__bars::before {
	top: -6px;
}

.fc-home-nav__bars::after {
	top: 6px;
}

/*
 * Open: the middle bar goes and the outer two cross on the centre line. The
 * button's accessible state is aria-expanded, which the script owns — this is
 * only the visual half of it.
 */
.fc-home-nav.is-open .fc-home-nav__bars {
	background: transparent;
}

.fc-home-nav.is-open .fc-home-nav__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.fc-home-nav.is-open .fc-home-nav__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.fc-home-nav__bars,
	.fc-home-nav__bars::before,
	.fc-home-nav__bars::after {
		transition: none;
	}
}

/*
 * Below 1100px the four nav items stop fitting on one row.
 *
 * DEVIATION FROM THE DESIGN: Figma has no mobile nav at all, so the collapsed
 * bar is our pattern. It is a disclosure rather than an off-canvas drawer
 * deliberately — the panel is in the normal flow directly under the button, so
 * there is no overlay to trap focus in, nothing to scroll-lock, and reading
 * order is unchanged. Easy to replace once a mobile design exists.
 *
 * The two blocks are kept apart on purpose: the first is the no-JavaScript
 * layout (links wrap, everything visible), the second is the enhanced one.
 */
@media (max-width: 1100px) {
	.fc-home-nav {
		flex-wrap: wrap;
		row-gap: var(--fc-space-sm);
	}

	.fc-home-nav__menu ul,
	.fc-home-nav__menu {
		gap: var(--fc-space-md);
	}

	/*
	 * Inside the collapsed panel the CTA row sits under the menu, so the switcher
	 * and the button read better stacked and full-width than crammed side by side
	 * on a narrow screen.
	 */
	.fc-home-nav__cta {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--fc-space-sm);
		padding-left: 0;
	}

	/* Enhanced: the panel becomes a box and collapses. */
	.fc-home-nav--js .fc-home-nav__toggle {
		display: inline-flex;
	}

	.fc-home-nav--js .fc-home-nav__panel {
		display: none;
		/* After the brand and the toggle, on its own row. */
		order: 3;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--fc-space-md);
		width: 100%;
		padding-bottom: var(--fc-space-sm);
	}

	.fc-home-nav--js.is-open .fc-home-nav__panel {
		display: flex;
	}

	.fc-home-nav--js .fc-home-nav__menu,
	.fc-home-nav--js .fc-home-nav__menu ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	/*
	 * Stacked links need real targets — 18px/1 is a 18px row, well under the
	 * 44px minimum, and these are the primary navigation.
	 */
	.fc-home-nav--js .fc-home-nav__menu a {
		display: block;
		padding: 12px 0;
		line-height: 1.4;
	}

	/*
	 * Collapsed, the submenus stop being dropdowns and become indented lists
	 * that are simply always open.
	 *
	 * There is no hover on a phone, and the parents are "#" — so a closed
	 * submenu here would need a second row of toggles to reach the only real
	 * links in the menu. Showing them costs a few rows of scroll and needs no
	 * JavaScript, no aria-expanded and nothing to get out of sync.
	 */
	.fc-home-nav--js .fc-home-nav__menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 4px 16px;
		background: none;
		border: 0;
		border-left: 1px solid var(--fc-paper-20);
		margin-left: 2px;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	/* The caret would promise a disclosure that isn't there. */
	.fc-home-nav--js .fc-home-nav__menu .menu-item-has-children > a::after {
		display: none;
	}
}

@media (max-width: 640px) {
	.fc-home-nav__brand img {
		width: 180px;
	}

	/* No-JavaScript only; with the script the panel already stacks. */
	.fc-home-nav__menu ul,
	.fc-home-nav__menu {
		flex-wrap: wrap;
	}
}

/* --- Hero --------------------------------------------------------------
 * The designer's sticky note specifies 100vh/100vw. In the frame the nav
 * (82px) plus hero (1018px) together make up one 1100px viewport, so the hero
 * fills whatever is left below the nav rather than a full 100vh of its own.
 * svh is used so mobile browser chrome doesn't push the CTA out of view.
 * ------------------------------------------------------------------------- */

.fc-home-hero {
	position: relative;
	min-height: calc(100svh - var(--fc-nav-h));
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Content sits in the upper third (162px from the top of a 1018px hero),
	 * leaving the lower half to the generative visual. */
	padding: clamp(3rem, 15vh, 10.125rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 8vh, 6rem);
	overflow: hidden;
	/* The design holds the generative visual back so the headline reads over it.
	 * In Figma the video layer (6005:2138) renders at full strength on its own —
	 * near-white at the crest — but visibly muted inside the Hero frame, and the
	 * frame has no scrim rectangle of its own, so the difference is the layer's
	 * opacity. Over a pure --fc-void background an opacity reduction and a black
	 * overlay of the inverse alpha are the same arithmetic, so this does it with
	 * opacity: one property, no extra layer to paint, and it reads as what it is.
	 *
	 * 0.6 was the estimate matched against the two Figma renders (the node's
	 * opacity isn't exposed over MCP). Taken down to 0.45 deliberately — the same
	 * as a 55% black scrim rather than 40% — so the white headline holds its
	 * contrast over the brightest part of the wave crest. If the exact Figma
	 * figure is ever read off the inspector, keep the headline legible over it. */
	--fc-hero-visual-opacity: 0.45;
	background-color: var(--fc-void);
	color: var(--fc-paper);
	text-align: center;
}

/*
 * The generative particle visual — the video layer in Figma.
 *
 * Two layers, same framing: the still below and the video over it. The still is
 * a pseudo-element so the hero stays a plain group of editable blocks with no
 * decorative markup inside it, and it's what the editor canvas, a browser that
 * blocks autoplay and reduced-motion all show. The <video> is injected into the
 * rendered section by fluent_commerce_home_hero_video().
 *
 * The image is the video's own first frame, so the two can't disagree and there
 * is no jump when playback starts. (home-hero-bg.webp, the still exported from
 * Figma, is now unreferenced — it's a different, wider crop of the same scene.)
 */
.fc-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url(home-hero-poster.webp);
	background-repeat: no-repeat;
	/* The design hangs the visual 50px below the hero's bottom edge, which
	 * shows more of the peaks and keeps the reflective floor in frame. */
	background-position: center calc(100% + 50px);
	background-size: cover;
	/* Both layers share the token, so the still and the video are held back by
	 * the same amount and there's no brightness jump when playback starts. */
	opacity: var(--fc-hero-visual-opacity);
	pointer-events: none;
}

.fc-home-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	/* Cover, hung 50px low — the object-fit equivalent of the still's framing
	 * above, so the two layers line up at every viewport size. */
	object-fit: cover;
	object-position: center calc(100% + 50px);
	opacity: var(--fc-hero-visual-opacity);
	pointer-events: none;
}

/*
 * Motion off: drop back to the still, which is the same frame.
 *
 * NOTE, not fixed: this stops the animation but not the download — by the time
 * the rule applies the browser has usually started fetching the MP4. Skipping
 * the fetch needs a matchMedia() check in JS, which this page doesn't load.
 */
@media (prefers-reduced-motion: reduce) {
	.fc-home-hero__video {
		display: none;
	}
}

/*
 * No mobile frames. The visual hangs 50px below the hero's bottom edge at the
 * design size, which is 5% of a 1018px hero but a quarter of a phone's, so the
 * peaks and the reflective floor drop out of frame entirely. Both layers lose
 * the offset together — they have to stay in step, or the still and the video
 * show different crops and there's a jump when playback starts.
 *
 * The hero keeps filling the viewport at every size: the nav no longer wraps
 * below 1100px (it collapses to its toggle instead), so --fc-nav-h stays
 * accurate and the CTA stays above the fold.
 */
@media (max-width: 640px) {
	.fc-home-hero::before {
		background-position: center bottom;
	}

	.fc-home-hero__video {
		object-position: center bottom;
	}
}

.fc-home-hero__eyebrow,
.fc-home-hero__body,
.fc-home-hero__actions {
	position: relative;
	z-index: 1;
}

.fc-home-hero__eyebrow {
	max-width: 646px;
	margin: 0 0 30px;
	color: var(--fc-paper);
	/* Faint white glow from the design, so the caption reads against the
	 * brighter parts of the visual. */
	text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.29);
}

.fc-home-hero__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 646px;
	margin: 0 0 32px;
}

.fc-home-hero__title {
	color: var(--fc-paper);
}

.fc-home-hero__lead {
	color: var(--fc-paper-80);
}

.fc-home-hero__actions.wp-block-buttons {
	display: flex;
	justify-content: center;
	gap: var(--fc-space-sm);
	margin: 0;
}

/* --- Marquee -------------------------------------------------------------
 * A 62px ink strip of uppercase claims. The design anchors the row to the
 * right edge and clips it, which only makes sense as a scrolling ticker, so
 * the scroll is implemented here rather than deferred — a stationary marquee
 * reads as broken rather than as "motion not done yet".
 *
 * The phrase set is repeated three times in the markup (see
 * fluent_commerce_home_marquee_markup), so translating the track by exactly
 * -33.3333% lands on a pixel-identical frame and the loop has no visible seam.
 * ------------------------------------------------------------------------- */

.fc-home-marquee {
	display: flex;
	align-items: center;
	height: 62px;
	padding: 0;
	overflow: hidden;
	background: var(--fc-ink);
}

.fc-home-marquee__track {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	animation: fc-home-marquee-scroll 45s linear infinite;
	will-change: transform;
}

.fc-home-marquee__group {
	display: flex;
	align-items: center;
	gap: 96px;
	/* Carries the inter-phrase gap across the join between repeats, so the
	 * spacing stays even at the seam instead of doubling or collapsing. */
	padding-right: 96px;
	flex: 0 0 auto;
}

.fc-home-marquee__item {
	font-family: var(--fc-font-caption);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.2;
	/* The design's 0.36px at 12px, expressed in em so it tracks the size. */
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

@keyframes fc-home-marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-33.3333%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fc-home-marquee__track {
		animation: none;
	}
}

/*
 * No mobile frames. At 96px between phrases a phone shows barely one claim at a
 * time, which reads as a stuck ticker rather than a moving one. The gap and the
 * seam padding step down together — they have to match, or the loop jumps at
 * the join between repeats.
 */
@media (max-width: 781px) {
	.fc-home-marquee__group {
		gap: 48px;
		padding-right: 48px;
	}
}

/* --- Intro ---------------------------------------------------------------
 * Paper ground, one centered 590px column. min-height rather than a fixed
 * 590px so longer copy grows the section instead of overflowing it.
 * ------------------------------------------------------------------------- */

.fc-home-intro {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 590px;
	padding: var(--fc-sec-y) clamp(1.5rem, 5vw, 4rem);
	background: var(--fc-paper);
	color: var(--fc-ink);
}

.fc-home-intro__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	max-width: 590px;
}

.fc-home-intro__title {
	color: var(--fc-ink);
}

.fc-home-intro__body {
	display: flex;
	flex-direction: column;
	/* The design separates the three paragraphs with blank lines rather than a
	 * measured gap; one line of leading reproduces that. */
	gap: 1.4em;
	/* The design indents the body copy 132px inside the 590px column, so it
	 * sits under the headline's second half. */
	padding-left: 132px;
	color: var(--fc-ink-80);
}

/*
 * No mobile frames exist. The 132px indent is a desktop editorial device that
 * would eat most of a phone's width, so it's dropped below the tablet break.
 *
 * The 590px floor goes with it: it exists to give the copy a generous band on a
 * wide screen, but on a phone the copy is already taller than that and the floor
 * only risks trapping empty space under short copy.
 */
@media (max-width: 781px) {
	.fc-home-intro {
		min-height: 0;
	}

	.fc-home-intro__body {
		padding-left: 0;
	}
}

/* --- Two-up: global reach, then AI --------------------------------------
 * Ink ground, two mirrored rows of text beside a generative visual.
 *
 * Both rows are text-first in the markup even though the design puts the AI
 * visual on the left, so the heading always precedes its illustration in
 * reading order and in the stacked mobile layout. The mirroring is done with
 * flex order, which only affects the visual — safe, because the visual carries
 * no information.
 * ------------------------------------------------------------------------- */

.fc-home-twoup {
	display: flex;
	flex-direction: column;
	gap: 54px;
	padding: var(--fc-sec-y) var(--fc-sec-x);
	background: var(--fc-ink);
	color: #fff;
}

.fc-home-twoup__row {
	display: flex;
	align-items: center;
	gap: 20px;
}

.fc-home-twoup__row--mirrored .fc-home-twoup__media {
	order: -1;
}

/*
 * The text column: a measure-limited stack, centered in its half of the row.
 *
 * The design gives the two rows slightly different measures (570px and 515px).
 * One value is used for both — a 55px difference isn't a design decision at
 * this size, and two values would drift the first time either was touched.
 */
.fc-home-twoup__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	flex: 1 1 0;
	min-width: 0;
}

.fc-home-twoup__title,
.fc-home-twoup__indent {
	width: 100%;
	max-width: 570px;
}

.fc-home-twoup__title {
	color: #fff;
}

.fc-home-twoup__indent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	/* Same 132px editorial indent as the intro section. */
	padding-left: 132px;
}

.fc-home-twoup__copy,
.fc-home-twoup__lead {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.fc-home-twoup__copy {
	gap: 8px;
}

.fc-home-twoup__lead {
	/* The design separates these with a blank line, not a measured gap. */
	gap: 1.4em;
}

.fc-home-twoup__actions.wp-block-buttons {
	margin: 0;
}

/*
 * The visual is a real image block (figure + img) so an editor can swap it from
 * the media library, which is why the shape lives here rather than in the
 * block's attributes: CSS owns the slot, the block owns only the file.
 * "margin: 0" overrides the core .wp-block-image bottom margin.
 */
.fc-home-twoup__media {
	flex: 1 1 0;
	min-width: 0;
	/* Height comes from the design's 743x561 slot, so the visual keeps its
	 * framing at every width instead of being cropped by a fixed height. */
	aspect-ratio: 743 / 561;
	margin: 0;
	background-color: var(--fc-void);
	/* Containing block for the video layer below. */
	position: relative;
}

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

/*
 * The video layer, for slots whose still has a moving version (currently only
 * --global). It sits ON TOP of the image rather than replacing it, which is what
 * keeps the still doing all of its jobs: it stays lazy-loaded, it is what the
 * editor canvas shows, and it is the whole picture for anyone the video never
 * reaches — reduced motion, narrow screens, no JavaScript, blocked autoplay.
 *
 * Hidden until it is actually playing, so a slow or failed load never shows a
 * black rectangle over the still. The fade is short and only has to cover the
 * handover; the video's first frame IS this still, so there is nothing to see
 * across it. Opacity is compositor-only, so the fade costs no layout work.
 *
 * assets/home-video.js owns the src and the is-playing class.
 */
.fc-home-twoup__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fc-home-twoup__video.is-playing {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.fc-home-twoup__video {
		transition: none;
	}
}

/*
 * No mobile frames exist. Below the point where two 743px columns stop fitting,
 * the row stacks and the visual follows its text.
 */
@media (max-width: 1100px) {
	.fc-home-twoup__row {
		flex-direction: column;
		align-items: stretch;
	}

	.fc-home-twoup__row--mirrored .fc-home-twoup__media {
		order: 0;
	}

	.fc-home-twoup__title,
	.fc-home-twoup__indent {
		max-width: none;
	}
}

@media (max-width: 781px) {
	.fc-home-twoup {
		/* Once the rows are stacked, 54px between them has to stay clearly larger
		 * than the 20px inside a row or the two readings blur into one column. */
		gap: 44px;
	}

	.fc-home-twoup__indent {
		padding-left: 0;
	}
}

/* --- Never box yourself in ----------------------------------------------
 * Paper ground, a heading and lead, then six numbered capability lines.
 *
 * The numerals come from a CSS counter on a real <ol>, so they always match
 * the list rather than being typed into the copy. The default list marker is
 * suppressed because the numeral is rendered on the right instead.
 *
 * Hovering a row paints a white bar behind it, draws both ends of the row
 * inward, and floats a 350x350 image in the gap between the label and the
 * numeral. Figma carries that as seven variants of one component — a default
 * plus one per row.
 * ------------------------------------------------------------------------- */

.fc-home-box {
	display: flex;
	flex-direction: column;
	gap: 54px;
	/* The frame's 359px gutters, which are wider than the rest of the page. */
	padding: var(--fc-sec-y) var(--fc-sec-x-wide);
	background: var(--fc-paper);
	color: var(--fc-ink);
}

.fc-home-box__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fc-home-box__title {
	color: var(--fc-ink);
}

.fc-home-box__lead {
	/* The design sets the lead on a short measure against the wide list. */
	max-width: 408px;
	color: var(--fc-ink);
}

.fc-home-box__list {
	counter-reset: fc-home-box;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-home-box__list > li {
	counter-increment: fc-home-box;
	/* Containing block for the hover image, which is absolutely positioned. */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fc-space-md);
	min-height: 79px;
	font-family: var(--fc-font-body);
	font-weight: 600;
	font-size: var(--fc-text-h5);
	line-height: 1.3;
	color: var(--fc-ink-80);
	transition: background-color 0.15s ease, padding-left 0.15s ease,
		padding-right 0.15s ease;
}

.fc-home-box__list > li::after {
	content: counter(fc-home-box, decimal-leading-zero);
	flex: 0 0 auto;
	color: var(--fc-ink);
}

/*
 * The label deliberately keeps its 80% ink here. The design darkens only the
 * numeral, and against white the same ink already reads a step stronger — so
 * there's nothing to add.
 *
 * z-index lifts the row so its image covers the rows below it rather than
 * sliding under them; without it only the rows above would be overlapped,
 * since those come earlier in the DOM.
 */
.fc-home-box__list > li:hover {
	z-index: 1;
	/*
	 * Set as two longhands, not the shorthand: the narrow layout below gives
	 * these rows vertical padding, and a shorthand here would silently drop it.
	 */
	padding-left: 24px;
	padding-right: 24px;
	background-color: #fff;
}

/*
 * The hover image.
 *
 * Drawn as a background on ::before rather than an <img> added to the block
 * markup. The markup for this section is generated once, when the page is
 * created, and then lives in post content — so changing it would reach new
 * pages only, and leave the home page that already exists without the images.
 * Nothing is lost by keeping them in CSS: they're decorative, the row's own
 * text already says what the capability is, so there's no alt text to give up.
 *
 * Gated on a hover-capable pointer and a wide viewport. The gate isn't only
 * about taste — below roughly 1290px the design's geometry stops fitting (see
 * the width) — and it has the happy side effect that a phone never downloads
 * the six files.
 */
@media (hover: hover) and (min-width: 1290px) {
	.fc-home-box__list > li::before {
		content: "";
		position: absolute;
		top: 50%;
		/* The frame's 220px of clearance from the numerals, as a ratio of its
		   1202px list. */
		right: 18.3%;
		/*
		 * 350px wherever it fits, then shrinking to keep 458px free on the
		 * left — the longest label plus the 24px the row insets on hover.
		 * Around 1290px those two reserves meet and the image would start
		 * landing on the text, which is where the gate above comes from.
		 */
		width: min(350px, 81.7% - 458px);
		aspect-ratio: 1;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		opacity: 0;
		/* Rest is 33px above the row's middle, which is the bias the design
		   gives it; this is that plus the 40px it rises through. */
		transform: translateY(calc(-50% + 7px));
		transition: opacity 0.18s ease, transform 0.18s ease;
		/* The image overhangs its neighbours by a long way. Without this it
		   would swallow the hover of every row it covers. */
		pointer-events: none;
	}

	.fc-home-box__list > li:nth-child(1)::before {
		background-image: url(home-box-orchestration.webp);
	}

	.fc-home-box__list > li:nth-child(2)::before {
		background-image: url(home-box-inventory.webp);
	}

	.fc-home-box__list > li:nth-child(3)::before {
		background-image: url(home-box-promise.webp);
	}

	.fc-home-box__list > li:nth-child(4)::before {
		background-image: url(home-box-service.webp);
	}

	.fc-home-box__list > li:nth-child(5)::before {
		background-image: url(home-box-collect.webp);
	}

	.fc-home-box__list > li:nth-child(6)::before {
		background-image: url(home-box-returns.webp);
	}

	.fc-home-box__list > li:hover::before {
		opacity: 1;
		transform: translateY(calc(-50% - 33px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.fc-home-box__list > li,
	.fc-home-box__list > li::before {
		transition: none;
	}

	/*
	 * The rise is motion, so it goes. Appearing at all isn't, so the image
	 * still does — it just arrives already in place.
	 */
	.fc-home-box__list > li::before,
	.fc-home-box__list > li:hover::before {
		transform: translateY(calc(-50% - 33px));
	}
}

/*
 * No mobile frames. Each row is a heading-sized line with its numeral pushed to
 * the far edge. On a phone the line wraps to three or four, so the numeral has
 * to sit level with the first of them instead of floating in the row's vertical
 * middle — otherwise it drifts away from the line it belongs to.
 *
 * The 79px floor goes because a wrapped row already clears it, and padding
 * replaces it so single-line rows keep their air.
 */
@media (max-width: 781px) {
	.fc-home-box {
		gap: 40px;
	}

	.fc-home-box__list > li {
		align-items: flex-start;
		gap: var(--fc-space-sm);
		min-height: 0;
		padding: 12px 0;
	}
}

/* --- But wait. There's more. --------------------------------------------
 * Centered header with a CTA, then three illustrated cards with left-aligned
 * captions beneath them.
 * ------------------------------------------------------------------------- */

.fc-home-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 62px;
	padding: var(--fc-sec-y-lg) var(--fc-sec-x-wide);
	background: var(--fc-paper);
	color: var(--fc-ink);
}

.fc-home-more__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 27px;
	max-width: 672px;
	text-align: center;
}

.fc-home-more__heading {
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* The design sets the headline on a narrower measure than its container so
	 * it breaks after "wait." */
	max-width: 497px;
}

.fc-home-more__title {
	color: var(--fc-ink-93);
}

.fc-home-more__sub {
	color: var(--fc-ink-80);
}

.fc-home-more__actions.wp-block-buttons {
	margin: 0;
}

/*
 * auto-fit rather than a fixed three columns: the cards reflow to two and then
 * one as the viewport narrows, without needing breakpoints of their own.
 */
.fc-home-more__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	width: 100%;
	max-width: 1202px;
}

.fc-home-more__item {
	display: flex;
	flex-direction: column;
}

/* Replaceable image block; CSS owns the square slot. See .fc-home-twoup__media. */
.fc-home-more__figure {
	aspect-ratio: 1;
	/* The illustrations are exported on their own white card, so the colour
	 * behind them only shows before the image loads. */
	background-color: #fff;
	margin: 0 0 32px;
}

.fc-home-more__figure.fc-home-more__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The label and its line sit as one block of text, with no gap between them. */
.fc-home-more__label,
.fc-home-more__caption {
	color: var(--fc-ink-80);
}

/*
 * No mobile frames. The cards reflow on their own (auto-fit), so this is only
 * rhythm — the 62px between header and cards and the 32px under each figure are
 * both sized against a 1920px frame.
 */
@media (max-width: 781px) {
	.fc-home-more {
		gap: 40px;
	}

	.fc-home-more__figure {
		margin-bottom: 20px;
	}
}

/* --- "But wait. There's more." card motion -------------------------------
 * Two of the three cards animate. In Figma it is a single 4.0036s timeline on
 * the page frame, looping, driving 23 layers at once — not two independent
 * animations. That distinction is the whole reason this block is built the way
 * it is: every moving part shares one duration and one iteration count,
 * declared once below. The two cards are separate SVGs with no common clock, so
 * if their durations ever drift apart they desync a few loops in.
 *
 * Figma exports each of the 23 layers as its own keyframe set. They are folded
 * down here to the smallest set that reproduces the sequence, because whole
 * groups of them move identically — seven glyph vectors sharing one fill
 * change, four ellipses sharing one rotation.
 *
 * Property mapping: Figma models every layer as a div, so it emits a frame's
 * fill as background-color and a LINE node's stroke as border-color. In inline
 * SVG those are fill and stroke, which is what these keyframes animate.
 *
 * The percentages are Figma's own, kept to 3dp against the 4.0036s clock rather
 * than rounded to something tidier — they encode the stagger between the three
 * chips lighting up, and rounding them visibly evens out a rhythm that is
 * deliberately uneven. Do not "clean them up".
 *
 * The step-end easing on the colour tracks is not decoration: it holds each
 * colour flat until its moment instead of interpolating across the whole loop,
 * which is what makes a chip snap on rather than slowly wash into purple.
 * ------------------------------------------------------------------------- */

.fc-more-anim [class*="fc-more-anim__"] {
	animation-duration: 4.0036s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

/*
 * Paint cost is the reason for the gate. Most of these tracks animate fill,
 * stroke and stroke-dasharray, none of which the compositor can handle on its
 * own — they repaint every frame, forever, on the busiest page we ship. So the
 * observer in assets/home-more.js pauses them whenever the section is off
 * screen.
 *
 * Pausing is scoped to --js, the same bargain home-nav.js strikes: the cards are
 * never left paused without the script that resumes them. It matters more here
 * than it does for the nav, because frame 0 of this timeline is the empty state
 * — undrawn lines, unlit chips, a label at zero opacity — so a card paused by a
 * script that never ran would read as broken rather than as still. Without JS
 * the animation simply runs the whole time, which is only ever a cost question.
 */
.fc-more-anim--js [class*="fc-more-anim__"] {
	animation-play-state: paused;
}

.fc-more-anim--js.is-running [class*="fc-more-anim__"] {
	animation-play-state: running;
}

/* SVG shapes rotate about the origin of the whole viewBox unless told
 * otherwise, which sends the ellipses swinging in an arc instead of spinning in
 * place. fill-box puts each one's origin at its own centre. */
.fc-more-anim__spin {
	transform-box: fill-box;
	transform-origin: center;
	animation-name: fc-more-spin;
}

.fc-more-anim__draw-a {
	animation-name: fc-more-draw-a;
}

.fc-more-anim__draw-b {
	animation-name: fc-more-draw-b;
}

.fc-more-anim__draw-c {
	animation-name: fc-more-draw-c;
}

.fc-more-anim__draw-full {
	animation-name: fc-more-draw-full;
}

.fc-more-anim__chip-a {
	animation-name: fc-more-chip-a;
}

.fc-more-anim__chip-b {
	animation-name: fc-more-chip-b;
}

.fc-more-anim__chip-c {
	animation-name: fc-more-chip-c;
}

.fc-more-anim__glyph-a {
	animation-name: fc-more-glyph-a;
}

.fc-more-anim__glyph-b {
	animation-name: fc-more-glyph-b;
}

.fc-more-anim__glyph-c {
	animation-name: fc-more-glyph-c;
}

.fc-more-anim__slide {
	animation-name: fc-more-slide;
}

.fc-more-anim__rule {
	animation-name: fc-more-rule;
}

/* Two tracks on one element: it fades in over 0.04s, then travels for 0.23s. */
.fc-more-anim__label {
	animation-name: fc-more-label-fade, fc-more-label-rise;
}

/*
 * The draw-on effect. stroke-dasharray in path-length units, so every path
 * needs pathLength="1" in the markup — without it the dasharray is read in user
 * units and short paths finish instantly while long ones never finish.
 * visibility rides along because a 0-length dash still paints its linecaps as a
 * dot at the start of the path.
 */
@keyframes fc-more-draw-a {
	0% {
		animation-timing-function: ease-out;
		stroke-dasharray: 0 1;
		visibility: hidden;
	}

	12.489% {
		stroke-dasharray: 1 1;
		visibility: visible;
	}

	100% {
		stroke-dasharray: 1 1;
		visibility: visible;
	}
}

@keyframes fc-more-draw-b {
	0% {
		stroke-dasharray: 0 1;
		visibility: hidden;
	}

	12.489% {
		animation-timing-function: ease-out;
		stroke-dasharray: 0 1;
		visibility: hidden;
	}

	24.978% {
		stroke-dasharray: 1 1;
		visibility: visible;
	}

	100% {
		stroke-dasharray: 1 1;
		visibility: visible;
	}
}

@keyframes fc-more-draw-c {
	0% {
		stroke-dasharray: 0 1;
		visibility: hidden;
	}

	24.978% {
		animation-timing-function: ease-out;
		stroke-dasharray: 0 1;
		visibility: hidden;
	}

	37.466% {
		stroke-dasharray: 1 1;
		visibility: visible;
	}

	100% {
		stroke-dasharray: 1 1;
		visibility: visible;
	}
}

/* The one line that draws across the entire loop rather than in a slot. */
@keyframes fc-more-draw-full {
	0% {
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		stroke-dasharray: 0 1;
		visibility: hidden;
	}

	100% {
		stroke-dasharray: 1 1;
		visibility: visible;
	}
}

@keyframes fc-more-chip-a {
	0% {
		animation-timing-function: step-end;
		fill: #fff;
	}

	12.489% {
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		fill: #fff;
	}

	15.411% {
		fill: #e0daeb;
	}

	100% {
		fill: #e0daeb;
	}
}

@keyframes fc-more-chip-b {
	0% {
		animation-timing-function: step-end;
		fill: #fff;
	}

	21.398% {
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		fill: #fff;
	}

	24.878% {
		fill: #e0daeb;
	}

	100% {
		fill: #e0daeb;
	}
}

@keyframes fc-more-chip-c {
	0% {
		animation-timing-function: step-end;
		fill: #fff;
	}

	37.466% {
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		fill: #fff;
	}

	41.288% {
		fill: #e0daeb;
	}

	100% {
		fill: #e0daeb;
	}
}

/* Each glyph flips a beat before its chip finishes, not with it. */
@keyframes fc-more-glyph-a {
	0% {
		animation-timing-function: step-end;
		fill: #121212;
	}

	12.489% {
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		fill: #121212;
	}

	15.386% {
		fill: #9055ee;
	}

	100% {
		fill: #9055ee;
	}
}

@keyframes fc-more-glyph-b {
	0% {
		animation-timing-function: step-end;
		fill: #121212;
	}

	21.256% {
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		fill: #121212;
	}

	24.878% {
		fill: #9055ee;
	}

	100% {
		fill: #9055ee;
	}
}

@keyframes fc-more-glyph-c {
	0% {
		animation-timing-function: step-end;
		fill: #121212;
	}

	37.441% {
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		fill: #121212;
	}

	41.288% {
		fill: #9055ee;
	}

	100% {
		fill: #9055ee;
	}
}

/*
 * 188 and -77 are user units, not CSS pixels: inside an SVG a transform reads
 * in the viewBox coordinate system, so both distances scale with the card
 * instead of drifting as the grid reflows.
 */
@keyframes fc-more-slide {
	0% {
		translate: 0 0;
	}

	37.466% {
		translate: 0 0;
	}

	50.904% {
		translate: 188px 0;
	}

	100% {
		translate: 188px 0;
	}
}

@keyframes fc-more-rule {
	0% {
		animation-timing-function: step-end;
		stroke: #e0daeb;
	}

	59.96% {
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		stroke: #e0daeb;
	}

	63.706% {
		stroke: #6b4fa0;
	}

	100% {
		stroke: #6b4fa0;
	}
}

@keyframes fc-more-label-fade {
	0% {
		opacity: 0;
	}

	63.706% {
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		opacity: 0;
	}

	64.652% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fc-more-label-rise {
	0% {
		translate: 0 0;
	}

	63.823% {
		animation-timing-function: ease-out;
		translate: 0 0;
	}

	69.676% {
		translate: 0 -77px;
	}

	100% {
		translate: 0 -77px;
	}
}

@keyframes fc-more-spin {
	0% {
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		rotate: 0deg;
	}

	92.699% {
		rotate: 360deg;
	}

	100% {
		rotate: 360deg;
	}
}

/*
 * Reduced motion has to do more than switch the animation off. Frame 0 is the
 * empty state — undrawn lines, unlit chips, a label at opacity 0 — so stopping
 * there would leave two cards looking broken rather than still. These rules
 * hold the finished frame instead, which is the composition the illustration is
 * actually meant to read as.
 */
@media (prefers-reduced-motion: reduce) {
	.fc-more-anim [class*="fc-more-anim__"] {
		animation: none;
	}

	.fc-more-anim__draw-a,
	.fc-more-anim__draw-b,
	.fc-more-anim__draw-c,
	.fc-more-anim__draw-full {
		stroke-dasharray: 1 1;
		visibility: visible;
	}

	.fc-more-anim__chip-a,
	.fc-more-anim__chip-b,
	.fc-more-anim__chip-c {
		fill: #e0daeb;
	}

	.fc-more-anim__glyph-a,
	.fc-more-anim__glyph-b,
	.fc-more-anim__glyph-c {
		fill: #9055ee;
	}

	.fc-more-anim__slide {
		translate: 188px 0;
	}

	.fc-more-anim__rule {
		stroke: #6b4fa0;
	}

	.fc-more-anim__label {
		opacity: 1;
		translate: 0 -77px;
	}
}

/* --- We're making waves. ------------------------------------------------
 * A full-bleed particle-wave band with centered copy over it.
 *
 * The purple is not in the artwork: the source image is greyscale, and Figma
 * tints it with stacked blend layers. Those are reproduced here as one overlay
 * in mix-blend-mode: color, which is the layer doing the work — Figma also has
 * a mix-blend-mode: hue layer, but hue blending keeps the backdrop's
 * saturation, and the backdrop is greyscale, so it contributes nothing. The
 * faint white wash above it is kept, since that does lift the darks.
 *
 * isolation: isolate stops the blend reaching the sections above and below.
 * ------------------------------------------------------------------------- */

.fc-home-waves {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 626px;
	padding: var(--fc-sec-y) clamp(1.5rem, 5vw, 4rem);
	background-color: var(--fc-void);
	color: var(--fc-paper);
	text-align: center;
	overflow: hidden;
}

/*
 * The wave artwork. A replaceable image block rather than this section's
 * background-image, so it's lifted out of the flex flow and stretched behind the
 * copy. z-index: -1 is what keeps the paint order the design needs: the void
 * background colour, then this image, then the two tint layers below (both
 * z-index: 0), then __inner on top.
 */
/*
 * Doubled class because the editor gives every block
 * ".block-editor-block-list__block { position: relative }" — one class, same as
 * this, and later in the cascade, so a single class here would leave the image
 * in the flow and it would sit above the copy instead of behind it.
 */
.fc-home-waves__bg.fc-home-waves__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	pointer-events: none;
}

.fc-home-waves__bg.fc-home-waves__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.fc-home-waves::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(
		130.3deg,
		rgba(107, 79, 160, 0.4) 13.71%,
		rgba(74, 114, 255, 0.24) 42.07%,
		rgba(107, 79, 160, 0.4) 67.79%,
		rgba(169, 143, 210, 0.4) 84.43%
	);
	mix-blend-mode: color;
	pointer-events: none;
}

.fc-home-waves::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(255, 255, 255, 0.05);
	pointer-events: none;
}

.fc-home-waves__inner {
	position: relative;
	/* Above both tint layers. */
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 562px;
	/* The copy sits above the wave crests rather than centered in the band. */
	margin-bottom: clamp(0px, 6vw, 100px);
}

.fc-home-waves__title {
	color: rgba(238, 238, 238, 0.93);
}

.fc-home-waves__lead {
	display: flex;
	flex-direction: column;
	/* Blank lines between the paragraphs, as the design has it. */
	gap: 1.4em;
	color: var(--fc-paper-80);
}

/*
 * The design nests the title and lead in their own group, so the CTA sits 32px
 * from the copy while the copy's own gap is 24px. Flattened here, with the
 * difference added back rather than adding a wrapper for 8px.
 */
.fc-home-waves__actions.wp-block-buttons {
	margin: 8px 0 0;
	justify-content: center;
}

/*
 * No mobile frames. 626px of band is most of a phone screen for three lines of
 * copy, so the artwork is cropped instead of the section being left mostly
 * empty. The copy also stops sitting high in the band: it is lifted on desktop
 * to clear the wave crests, and at this crop there are no crests under it.
 */
@media (max-width: 781px) {
	.fc-home-waves {
		min-height: 480px;
	}

	.fc-home-waves__inner {
		margin-bottom: 0;
	}
}

@media (max-width: 640px) {
	.fc-home-waves {
		min-height: 420px;
	}
}

/* --- Wanna hear a story? ------------------------------------------------
 * A centered heading over a horizontally scrollable rail of quote cards.
 *
 * The rail scrolls rather than auto-animating: unlike the marquee, these are
 * words people need time to read, and a moving target is hostile to that. It's
 * keyboard-focusable so the scroll is reachable without a pointer.
 * ------------------------------------------------------------------------- */

.fc-home-testimonial {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 74px;
	padding: var(--fc-sec-y-lg) 0;
	background: var(--fc-paper);
	color: var(--fc-ink);
}

.fc-home-testimonial__title {
	max-width: 497px;
	color: var(--fc-ink-93);
	text-align: center;
}

/*
 * The fades are on the rail, not the track, so they stay put while the cards
 * move under them. 407px at the design width, scaled down so they never swallow
 * a whole card on a narrow screen.
 */
.fc-home-testimonial__rail {
	position: relative;
	width: 100%;
}

.fc-home-testimonial__rail::before,
.fc-home-testimonial__rail::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: clamp(48px, 21vw, 407px);
	pointer-events: none;
}

.fc-home-testimonial__rail::before {
	left: 0;
	background: linear-gradient(90deg, var(--fc-paper), rgba(238, 238, 238, 0));
}

.fc-home-testimonial__rail::after {
	right: 0;
	background: linear-gradient(270deg, var(--fc-paper), rgba(238, 238, 238, 0));
}

.fc-home-testimonial__track {
	display: flex;
	gap: 20px;
	margin: 0;
	/* Side padding so the first and last card clear the fades. */
	padding: 0 var(--fc-sec-x-wide);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Hairline scrollbar rather than none at all, so the section doesn't hide
	 * the fact that it scrolls. */
	scrollbar-width: thin;
}

.fc-home-quote {
	display: flex;
	flex-direction: column;
	gap: 32px;
	flex: 0 0 auto;
	width: min(724px, 85vw);
	padding: 24px 26px 26px;
	background: #fff;
	scroll-snap-align: center;
}

/*
 * The customer's logo. The design has a grey rectangle here and no company
 * name in the copy, so the quote ships unattributed — this is a placeholder,
 * not a finished element.
 */
.fc-home-quote__logo {
	flex: 0 0 auto;
	width: 108px;
	height: 100px;
	background: #d9d9d9;
}

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

.fc-home-quote__source {
	margin: 0;
	font-family: var(--fc-font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--fc-ink-80);
}

/*
 * No mobile frames. The fades exist to say "this scrolls"; at their 48px floor
 * they cover a seventh of a phone-width card, which obscures the words instead.
 * 24px still reads as a fade and the cards stay legible.
 *
 * The rail keeps its swipe: cards are min(724px, 85vw), so the next one is
 * always part-visible, which is the affordance doing the real work here.
 */
@media (max-width: 781px) {
	.fc-home-testimonial {
		gap: 40px;
	}

	.fc-home-testimonial__rail::before,
	.fc-home-testimonial__rail::after {
		width: 24px;
	}

	.fc-home-quote {
		gap: 24px;
		padding: 20px;
	}
}

/* --- Move fast. See value faster. ---------------------------------------
 * Headline beside its lead, then three stat panels ruled top and bottom.
 * ------------------------------------------------------------------------- */

.fc-home-fast {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 72px;
	padding: var(--fc-sec-y-lg) 0;
	background: var(--fc-paper);
	color: var(--fc-ink);
}

.fc-home-fast__header {
	display: flex;
	align-items: flex-start;
	gap: 54px;
	width: 100%;
	padding: 0 var(--fc-sec-x-wide);
}

.fc-home-fast__title {
	/* Fixed in the design so the headline breaks into three lines; capped rather
	 * than fixed here so it can shrink. */
	flex: 0 1 590px;
	color: var(--fc-ink-93);
}

.fc-home-fast__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	flex: 1 1 0;
	min-width: 0;
}

.fc-home-fast__lead {
	color: var(--fc-ink-80);
}

.fc-home-fast__actions.wp-block-buttons {
	margin: 0;
}

.fc-home-fast__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
	width: 100%;
	max-width: 1203px;
	padding: 0 var(--fc-sec-x-wide);
}

.fc-home-fast__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 241px;
	padding: 24px 16px;
	/* Hairlines top and bottom only — the panels have no side rules. */
	border-top: 1px solid rgba(18, 18, 18, 0.2);
	border-bottom: 1px solid rgba(18, 18, 18, 0.2);
	color: var(--fc-ink-80);
	text-align: center;
}

.fc-home-fast__figure {
	margin: 0;
	font-family: var(--fc-font-body);
	font-weight: 700;
	/* 54px at the design width. */
	font-size: clamp(2.25rem, 2.8vw, 3.375rem);
	line-height: 1.3;
	letter-spacing: -0.03em;
	color: var(--fc-ink-80);
}

/*
 * No mobile frames exist. The headline and its lead stack rather than sharing a
 * row once there isn't width for both.
 */
@media (max-width: 1100px) {
	.fc-home-fast__header {
		flex-direction: column;
		gap: 32px;
	}

	.fc-home-fast__title {
		flex: 0 0 auto;
	}
}

/*
 * No mobile frames. Once the panels are a single column, three 241px boxes are
 * 723px of largely empty space — the figure and its label need about 140px. The
 * hairlines stay top and bottom on each panel, which is what still reads as
 * three separate measurements rather than one list.
 */
@media (max-width: 781px) {
	.fc-home-fast {
		gap: 40px;
	}

	.fc-home-fast__stat {
		min-height: 180px;
	}
}

/* --- Brands ---------------------------------------------------------------
 * A centered headline, a fanned row of five square customer photos, and the
 * brand names with their results underneath.
 * ------------------------------------------------------------------------- */

.fc-home-brands {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* The design's frame is exactly 1080px tall and leaves ~200px of trailing
	 * whitespace; 120px keeps this in step with the sections around it. */
	padding: var(--fc-sec-y) 0 var(--fc-sec-y-lg);
	background: var(--fc-paper);
	color: var(--fc-ink);
}

.fc-home-brands__title {
	/* 516px in the design, which is what breaks the headline into its two
	 * sentences; capped rather than fixed so it can shrink. */
	max-width: 520px;
	text-align: center;
}

/*
 * The stack. Five squares, each 356.65 of the band's 1490px (23.936%), pulled
 * together so the row spans the band exactly: 5 x 23.936% = 119.68%, so the
 * four seams each overlap 4.92%. Percentages mean the fan holds its proportions
 * at every width instead of only at 1920px.
 */
.fc-home-brands__stack {
	display: flex;
	width: min(100% - 3rem, 1490px);
	margin: 118px auto 111px;
}

/*
 * Each sleeve is a replaceable image block; CSS owns the square and the overlap.
 * The margin shorthand also clears core's .wp-block-image bottom margin, which
 * would otherwise push the brand names down by a line.
 */
.fc-home-brands__sleeve {
	position: relative;
	flex: 0 0 23.936%;
	aspect-ratio: 1;
	margin: 0 0 0 -4.92%;
	background-color: rgba(18, 18, 18, 0.06);
}

.fc-home-brands__sleeve.fc-home-brands__sleeve img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.fc-home-brands__sleeve:first-child {
	margin-left: 0;
}

/* Leftmost in front, as in the design — a crate of records seen from the left. */
.fc-home-brands__sleeve:nth-child(1) {
	z-index: 5;
}

.fc-home-brands__sleeve:nth-child(2) {
	z-index: 4;
}

.fc-home-brands__sleeve:nth-child(3) {
	z-index: 3;
}

.fc-home-brands__sleeve:nth-child(4) {
	z-index: 2;
}

.fc-home-brands__sleeve:nth-child(5) {
	z-index: 1;
}

/* Five 270px columns on a 307px step in the design — one even grid here. */
.fc-home-brands__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 37px;
	width: min(100% - 3rem, 1499px);
	margin: 0 auto;
}

.fc-home-brands__brand {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fc-home-brands__result {
	color: var(--fc-ink-80);
}

/*
 * No mobile frames exist. Five columns of photos shrink to thumbnails long
 * before the viewport runs out, so below the design width the stack becomes a
 * swipeable rail at a readable size — the same treatment as the quote rail —
 * and the names reflow into as many columns as fit.
 */
@media (max-width: 1100px) {
	.fc-home-brands__stack {
		width: 100%;
		max-width: none;
		padding: 0 1.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.fc-home-brands__sleeve {
		flex: 0 0 min(240px, 60vw);
		margin-left: -50px;
		scroll-snap-align: center;
	}

	.fc-home-brands__list {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 32px;
	}
}

/*
 * No mobile frames. On a phone the fan wants a smaller sleeve so more than one
 * is in view — a single photo filling the rail loses the crate-of-records read
 * the section is built on. The 118px/111px band around the stack comes down with
 * it.
 *
 * The names go to a fixed two columns rather than the auto-fit above, which
 * would give one: they are two or three words each, so two columns fit
 * comfortably and five names stay scannable as a group.
 */
@media (max-width: 640px) {
	.fc-home-brands__stack {
		margin: 56px auto;
	}

	.fc-home-brands__sleeve {
		flex: 0 0 min(200px, 62vw);
		margin-left: -40px;
	}

	.fc-home-brands__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

/* --- Why us? --------------------------------------------------------------
 * A centered heading, the circuit-line diagram, and five bordered cards.
 * ------------------------------------------------------------------------- */

.fc-home-why {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--fc-sec-y) var(--fc-sec-x);
	background: var(--fc-paper);
	color: var(--fc-ink);
}

.fc-home-why__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	/* 325px in the design, which is what breaks the lead into its two sentences. */
	width: 100%;
	max-width: 325px;
	text-align: center;
}

.fc-home-why__lead {
	color: var(--fc-ink-80);
}

/*
 * The diagram band. Its aspect ratio is the design's 1510 x 342, so the labels
 * — placed as percentages of it — stay on the path at any width. The line itself
 * is drawn wider than the band (1667.27 / 1510) and centered, which is what
 * makes it run off both edges.
 */
.fc-home-why__diagram {
	position: relative;
	width: 100%;
	aspect-ratio: 1510 / 342;
	margin: 62px 0 44px;
}

.fc-home-why__line {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 110.415%;
	height: auto;
	transform: translate(-50%, -50%);
}

.fc-home-why__line-base {
	fill: none;
	stroke: rgba(18, 18, 18, 0.2);
	stroke-width: 2;
	stroke-dasharray: 4 4;
}

/*
 * The violet trace. pathLength="1" is set on the path itself, so one unit is the
 * whole line: dasharray 1 1 with dashoffset 0 is the fully drawn state, and the
 * motion pass draws it by animating dashoffset from 1 down to 0.
 */
.fc-home-why__line-trace {
	fill: none;
	stroke: var(--fc-violet);
	stroke-width: 4;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
}

.fc-home-why__label {
	position: absolute;
	padding: 16px 24px;
	background: var(--fc-ink);
	color: var(--fc-paper);
	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;
	white-space: nowrap;
}

/*
 * The 8px terminals where the line meets a label, centered on the two edges it
 * arrives at — sideways for the labels sitting on a horizontal run, top and
 * bottom for the ones the line climbs into.
 */
.fc-home-why__label::before,
.fc-home-why__label::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fc-violet);
}

.fc-home-why__label--h::before,
.fc-home-why__label--h::after {
	top: 50%;
	margin-top: -4px;
}

.fc-home-why__label--h::before {
	left: -4px;
}

.fc-home-why__label--h::after {
	right: -4px;
}

.fc-home-why__label--v::before,
.fc-home-why__label--v::after {
	left: 50%;
	margin-left: -4px;
}

.fc-home-why__label--v::before {
	top: -4px;
}

.fc-home-why__label--v::after {
	bottom: -4px;
}

/*
 * Five cards butted together. Each hairline is shared rather than doubled: only
 * the first card carries a left border, the rest inherit their neighbour's.
 */
.fc-home-why__cards {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	width: 100%;
	counter-reset: fc-home-why;
}

.fc-home-why__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px;
	border: 1px solid rgba(18, 18, 18, 0.2);
	border-left: 0;
	counter-increment: fc-home-why;
}

.fc-home-why__card:first-child {
	border-left: 1px solid rgba(18, 18, 18, 0.2);
}

/* 01-05, generated from the cards so the numbering can't drift from them. */
.fc-home-why__card::after {
	content: counter(fc-home-why, decimal-leading-zero);
	margin-top: auto;
	/* The design leaves a clear gap above the numeral even on the fullest card. */
	padding-top: 32px;
	font-family: var(--fc-font-caption);
	font-size: var(--fc-text-body);
	line-height: 1.3;
	letter-spacing: -0.03em;
	color: var(--fc-ink-60);
}

.fc-home-why__card-title {
	color: var(--fc-ink);
}

.fc-home-why__card-body {
	display: flex;
	flex-direction: column;
	/* The design spaces these with empty paragraphs — one blank line each. */
	gap: 1.4em;
}

.fc-home-why__body {
	color: var(--fc-ink-60);
}

/*
 * No mobile frames exist. Below the design width the diagram would shrink to
 * unreadable, so the line is dropped and its labels become a plain wrapped row —
 * they're the content; the routing between them is decoration. The cards reflow
 * into as many columns as fit, and get their own borders back once they're no
 * longer a single unbroken row.
 */
@media (max-width: 1100px) {
	.fc-home-why__diagram {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		aspect-ratio: auto;
		margin: 48px 0 44px;
	}

	.fc-home-why__line {
		display: none;
	}

	.fc-home-why__label {
		position: static;
	}

	.fc-home-why__label::before,
	.fc-home-why__label::after {
		display: none;
	}

	.fc-home-why__cards {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 20px;
	}

	.fc-home-why__card,
	.fc-home-why__card:first-child {
		border-left: 1px solid rgba(18, 18, 18, 0.2);
	}
}

/*
 * No mobile frames. A full-width card at 24px padding leaves a short measure on
 * a phone; trimming the padding and the gap above the numeral gives the copy
 * back about 8px a side without the card losing its inset look.
 */
@media (max-width: 640px) {
	.fc-home-why__card {
		gap: 16px;
		padding: 20px;
	}

	.fc-home-why__card::after {
		padding-top: 20px;
	}
}

/* --- Closing CTA ----------------------------------------------------------
 * "What can go wrong, won't." — the last section before the footer.
 * ------------------------------------------------------------------------- */

.fc-home-closing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: var(--fc-sec-y-lg) var(--fc-sec-x);
	background: var(--fc-paper);
	color: var(--fc-ink);
	text-align: center;
}

.fc-home-closing__title {
	color: var(--fc-ink-93);
}

.fc-home-closing__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	/* 540px in the design, which is what sets the lead's four-line shape. */
	max-width: 540px;
}

.fc-home-closing__lead {
	color: var(--fc-ink-80);
}

/* The design puts 32px between the eyebrow and the button, 16px above it. */
.fc-home-closing__actions.wp-block-buttons {
	margin: 16px 0 0;
}

/* --- Footer ---------------------------------------------------------------
 * The wordmark in ink on paper, with the ink link panel riding up over its
 * lower third so the letters are sliced by it.
 * ------------------------------------------------------------------------- */

.fc-home-footer {
	background: var(--fc-paper);
	color: var(--fc-ink);
	overflow: hidden;
}

/*
 * The design's box for the wordmark: 90px down, 36px in from the left, 29px from
 * the right, all of a 1920px frame. Expressed as percentages so the slice through
 * the letters stays put as it scales.
 */
.fc-home-footer__mark {
	display: block;
	width: 96.615%;
	height: auto;
	margin-left: 1.875%;
	padding-top: 4.6875%;
}

/*
 * The panel covers the bottom 111px of the wordmark's 457px — 5.78% of the frame
 * width, and percentage margins resolve against width, so the overlap tracks the
 * wordmark exactly as it scales. position: relative is what puts the panel's
 * background above the image: without it the img, as replaced content, paints
 * over a later sibling's background.
 */
.fc-home-footer__panel {
	position: relative;
	margin-top: -5.78%;
	/* The design's 356px gutter, taken from the shared wide token — the 3px
	 * difference from the 359px the other wide sections use isn't a design
	 * decision, and sharing the token means the footer gets the mobile step too. */
	padding: var(--fc-sec-y) var(--fc-sec-x-wide);
	background: var(--fc-ink);
	color: var(--fc-paper);
}

.fc-home-footer__cols {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-home-footer__cols .sub-menu {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.fc-home-footer__cols .sub-menu li + li {
	margin-top: 8px;
}

.fc-home-footer__cols a {
	font-family: var(--fc-font-body);
	font-weight: 500;
	font-size: var(--fc-text-body);
	line-height: 1.4;
	color: var(--fc-paper);
	text-decoration: none;
}

.fc-home-footer__cols a:hover,
.fc-home-footer__cols a:focus-visible {
	text-decoration: underline;
}

/*
 * No mobile frames exist. Four columns spread across the full width need more
 * room than a phone has, so they wrap and pack to the left instead.
 */
@media (max-width: 1100px) {
	.fc-home-footer__cols {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 32px 64px;
	}
}

/*
 * Touch targets. At 18px/1.4 each link row is a 25px target, under the 44px
 * WCAG 2.5.8 minimum, and stacked link lists are the easiest thing on the page
 * to mis-tap. Padding does the work rather than a larger type size, so the
 * footer still looks like the design; the 8px row margin comes off because the
 * padding now provides that separation.
 *
 * Applied on touch-sized viewports rather than via a pointer query, since a
 * touch laptop should keep the design's spacing.
 */
@media (max-width: 781px) {
	.fc-home-footer__cols a {
		display: inline-block;
		padding: 10px 0;
	}

	.fc-home-footer__cols .sub-menu {
		margin-top: 0;
	}

	.fc-home-footer__cols .sub-menu li + li {
		margin-top: 0;
	}
}

/* No mobile frames. Two columns of links at a phone width need less alley. */
@media (max-width: 640px) {
	.fc-home-footer__cols {
		gap: 16px 40px;
	}
}