/* ═════════════════════════════════════════════════════════════════════════════
 * INTEGRATIONS — the 2026 design system
 *
 * From the export's "Site - Integrations" (Fluent Website Build-6). Loaded on
 * page-integrations-ds.php only, on top of pages.css, and declared as a dependency of
 * it rather than trusted to source order — see the note in fluent_commerce_ds_enqueue().
 *
 * The markup is in inc/ds-integrations.php. Every class named in here is named there.
 *
 * ── WHAT IS DELIBERATELY NOT IN THIS FILE ───────────────────────────────────
 *
 *   · THE RULED COLUMN. The two hairlines at the gutter and the 40px inset are in
 *     layout.css. They arrived with the Security Trust Center and this page is the
 *     second caller, which is what made them a primitive.
 *   · THE Q&A. Already in pages.css, because Order Management has one. This page added
 *     three rules to it — .fc-faq__head and .fc-faq__sub, for a left cell that is more
 *     than the heading, and a tighter margin between two paragraphs of one answer.
 *   · THE UNDERLINED MARK. .fc-mark--u, in layout.css beside .fc-mark. One quote in the
 *     carousel asks for it; the reason is written there.
 *   · THE EMAIL CTA and its ink tone. layout.css, for the reason the crosslink is: a
 *     post, a listing and now a composed page all end on one.
 *   · THE FOLD and its bottom-left copy arrangement (.fc-hero-copy--foot). layout.css.
 *   · THE SEAM between the carousel and the Q&A. .fc-seam, layout.css.
 *   · PARAGRAPH SIZE, LEADING AND COLOUR. .fc-copy and .fc-copy--dark carry all three,
 *     so the copy columns in here only ever state a measure.
 *
 * What IS here is one page's furniture: the browser frame around the Fluent Connect
 * screenshot, the white plate the integration map sits on, and the story carousel.
 *
 * ── THE SECTIONS DO NOT SET THEIR OWN GROUND ────────────────────────────────
 *
 * The export writes background:#F2F1ED on every bone section. The page's ground is
 * already bone (tokens.css sets it on the body), so only the three surfaces that differ
 * say so: the near-black hero, the white map plate and the ink argument. A section that
 * states the surface it is already standing on is a rule that cannot be wrong and cannot
 * be right either.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE HERO
 * A full-bleed still, and one word over the bottom-left of it. #0a0a0a rather than the
 * primary ink because the artwork is graded to it — the same call the home page makes,
 * and the reason both are in fluent_commerce_ds_nav_tone()'s dark list.
 *
 * No rule for .fc-integrations-hero__art: .fc-cover already fills the positioned
 * .fc-fold, which is the whole job. The hook is on the image for anything later.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-integrations-hero {
	background: var(--fc-ink-10);
}

/*
 * 56% is what keeps one long word clear of the right half of the artwork, where the
 * signal converges. The 720 ceiling is for the 1920 case, where 56% is more width than
 * a single word ever needs.
 */
body.fc-ds .fc-integrations-hero__title {
	max-width: min(720px, 56%);
	line-height: 1.05;
	color: var(--text-on-dark);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * WHAT WE INTEGRATE WITH
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-integrations-what__copy {
	max-width: 520px;
	color: var(--text-on-light-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE MAP
 * A white plate laid into the bone page: full-bleed to both edges, a hairline top and
 * bottom, and the ruled column's two verticals crossing it. It carries .fc-ruled like
 * every other section in the run — pseudo-elements paint above their own element's
 * background, so the verticals cross the white exactly as the design draws them, with
 * no z-index to negotiate.
 *
 * It is not a .fc-section, so it pays its own vertical padding: the .fc-section ramp is
 * rhythm for copy, and this band is one picture. Its horizontal padding is the ruled
 * inset (gutter + 40) so the drawing lines up with the copy above and below it.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-integrations-map {
	padding: var(--sp-72) calc(var(--gutter-page) + 40px);
	border-top: var(--stroke-1) solid var(--border-on-light);
	border-bottom: var(--stroke-1) solid var(--border-on-light);
	background: var(--surface-lightest);
}

body.fc-ds .fc-integrations-map__img {
	display: block;
	width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * FLUENT CONNECT
 * The screenshot in a drawn browser frame. Everything in the frame is furniture and is
 * aria-hidden in the markup — the three dots and the empty address bar say "this is a
 * product, in a browser" to someone looking at it and nothing to anyone else.
 *
 * The geometry is the export's, as literals: 32 for the bar, 6 for a dot, 14 for the
 * address field. Control geometry is measured rather than chosen, which is why
 * layout.css states the button's 48 and 22 the same way.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-integrations-frame {
	overflow: hidden;
	border: var(--stroke-1) solid var(--border-on-light);
	border-radius: var(--radius-10);
	background: var(--surface-light);
	/*
	 * The export's own value, and not --shadow-frame: that token is 0.25 black, which is
	 * the weight a frame needs on a dark surface. This frame sits on bone, where the same
	 * shadow reads as dirt under the plate.
	 */
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

body.fc-ds .fc-integrations-frame__bar {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 32px;
	padding: 0 12px;
	border-bottom: var(--stroke-1) solid var(--border-on-light);
}

body.fc-ds .fc-integrations-frame__dots {
	display: flex;
	gap: 6px;
}

/*
 * a40 rather than the export's 0.3. There is no a30 in the ink ramp, and inventing a
 * step for three 6px dots is how a ramp of eight becomes a ramp of twelve.
 */
body.fc-ds .fc-integrations-frame__dots > span {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--fc-ink-a40);
}

body.fc-ds .fc-integrations-frame__url {
	flex: 1;
	max-width: 320px;
	height: 14px;
	border: var(--stroke-1) solid var(--border-on-light);
	border-radius: var(--radius-pill);
}

body.fc-ds .fc-integrations-frame__img {
	display: block;
	width: 100%;
}

/*
 * 8 on top of the stack's 24, which is the design's 32 between the question and the
 * answer to it. The paragraph under "Fluent Connect." keeps the stack's own gap,
 * because those two lines are one answer and sit closer to each other than the pair
 * does to the heading.
 */
body.fc-ds .fc-integrations-how__product {
	margin-top: var(--sp-8);
}

body.fc-ds .fc-integrations-how__body {
	max-width: 520px;
	color: var(--text-on-light-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * WHY FLUENT CONNECT
 * The one ink section. Its verticals are redrawn in bone by .fc-ruled--dark in
 * layout.css — an opaque dark surface hides the ink pair its neighbours draw. The four
 * paragraphs carry .fc-copy--dark, so only the measure is stated here.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-integrations-why {
	background: var(--surface-dark);
}

body.fc-ds .fc-integrations-why__eyebrow,
body.fc-ds .fc-integrations-why__title {
	color: var(--text-on-dark);
}

body.fc-ds .fc-integrations-why__body {
	max-width: 520px;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * THE STORY CAROUSEL'S SECTION
 *
 * The carousel itself is NOT here any more. It moved to pages.css on 2026-08-26, when the
 * pricing page became its second caller — which is what the block was named .fc-story for
 * in the first place. See THE STORY CAROUSEL there for the mechanism and the drag, and
 * inc/ds-blocks.php for the markup that feeds it.
 *
 * What is left is the one declaration that was always this page's.
 * ═══════════════════════════════════════════════════════════════════════════ */
body.fc-ds .fc-integrations-story__title {
	text-align: center;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * Container queries against `page`, at the breakpoints layout.css establishes. The
 * design ships desktop only; everything below is ours.
 * ══════════════════════════════════════════════════════════════════════════ */

/*
 * The hero title's 56% is a desktop measure — it exists so the word clears the right half
 * of the artwork. Once the fold has released its height (820, in layout.css) the artwork
 * is a band and the title has the width to itself.
 */
@container page (max-width: 820px) {
	body.fc-ds .fc-integrations-hero__title {
		max-width: none;
	}

	/*
	 * ── THE FOLD KEEPS ITS COMPOSITION HERE, AND THAT IS THE POINT ──────────────
	 *
	 * layout.css releases every fold's height below 820 — a full-screen hero squeezes
	 * the copy on a phone — and for the OMS hero, which is a title, a paragraph and a
	 * button, that is right. Here it produced the fault reported on 2026-08-25: the
	 * button overlapping the artwork. The copy is one word and one button, so once the
	 * height went the section collapsed to 246px, and .fc-hero-copy--foot's 96px of
	 * bottom padding then held the button in the VERTICAL MIDDLE of the band — which
	 * is exactly where the signal converges. White outlined button, white beam.
	 *
	 * So this hero opts back in: a height, and a copy block that fills it, which is
	 * what puts the words back in the bottom-left corner the design has them in. The
	 * corner is dark in the artwork at every width — the beam runs through the middle
	 * and the wave falls away to the right — so the button reads against flat black
	 * instead of against the brightest part of the picture. Nothing moves sideways;
	 * the gutter is the same one the rest of the page uses.
	 *
	 * 56svh, not 100 — the artwork is the hero, but a phone screen given entirely to
	 * one word says nothing and hides the section that answers it. svh for the reason
	 * layout.css gives: on mobile Safari vh is the largest viewport, so a vh fold is
	 * always taller than what you can see.
	 *
	 * The 300px floor is for the landscape phone, where 56svh is about 200 and the
	 * copy needs 170 of it — at that height the band crops to just the beam and the
	 * button is back on top of it. 300 buys the dark corner back. It costs a hero
	 * taller than a 360px landscape viewport, so the button's bottom edge lands at the
	 * bottom of the screen rather than above it, which is the better of the two: the
	 * whole button is still visible and it is legible where it sits.
	 *
	 * padding-bottom is 24 rather than the desktop 96 because the fold is a third of
	 * the height it is on desktop and 96 of it is a quarter of the band.
	 */
	body.fc-ds .fc-integrations-hero {
		height: 56svh;
		min-height: 300px;
	}

	body.fc-ds .fc-integrations-hero__copy {
		height: 100%;
		padding-bottom: var(--sp-24);
	}

	/* Matches the ruled column's own step down from a 40px inset to 20. */
	body.fc-ds .fc-integrations-map {
		padding-left: calc(var(--gutter-page) + 20px);
		padding-right: calc(var(--gutter-page) + 20px);
	}

	/*
	 * The map is a drawing with twelve labels in it, and below about 640px of plate the
	 * labels stop being readable — so the frame becomes a scroll container and the drawing
	 * keeps a legible width inside it. The scrollbar is deliberately NOT hidden: it is the
	 * only thing telling a visitor there is more of the drawing to the right.
	 *
	 * On the frame and not on the band, so the plate keeps its padding and the drawing
	 * scrolls inside it rather than under the page's own edge.
	 *
	 * Preferred over the alternatives on purpose. Shrinking it to fit produces 4px type;
	 * cropping it loses categories; splitting it into a list of twelve names throws away
	 * the one thing the drawing says, which is that they all point at the same middle.
	 */
	body.fc-ds .fc-integrations-map__frame {
		overflow-x: auto;
	}

	body.fc-ds .fc-integrations-map__img {
		min-width: 640px;
	}
}