/**
 * fitproflo.com — the public pages.
 *
 * ## Why this file reuses the application's stylesheet instead of restating it
 *
 * Every colour, radius, shadow, space step and typeface below comes from
 * `fitpro/assets/css/tokens.css`, which the application itself uses. The
 * marketing pages wrap their content in
 *
 *     <div class="fitpro-app flo-page" data-fp-theme="dark">
 *
 * so the token block on `.fitpro-app` is in force and `light-dark()` resolves
 * to the dark half. That single attribute is the whole dark-mode mechanism —
 * see the long note at the top of `tokens.css`.
 *
 * The consequence worth knowing: **the site cannot drift from the product.**
 * When the accent moves, when a card's radius changes, when dark mode's surface
 * is re-tuned, the marketing pages move with it, because they are not holding a
 * second copy of any of those values. The cards, buttons and pills on these
 * pages are the real `.fitpro-card`, `.fitpro-btn` and `.fitpro-pill` rules
 * rendering live.
 *
 * ## The device shots are the app, not a drawing of it
 *
 * They were a drawing of it, and it did not survive contact with anybody who
 * had used the product: five tab labels where there are nine, grey squares
 * where there are icons, a greeting card laid out differently from the one
 * that ships. Every one of those was written from the class names rather than
 * from the screen.
 *
 * So each frame now loads the client portal's **own markup**, captured from
 * the running app by `tools/app-harness` on invented data and wrapped into a
 * page by `bin/build-screens.php`. Nothing here describes the interface any
 * more, which means nothing here can be wrong about it.
 *
 * Not a screenshot, for three reasons that all point the same way: an image
 * goes stale and cannot say so, it blurs on a retina screen, and it cannot
 * follow the trainer's own accent colour. Markup does all three, and gzips to
 * a few kilobytes where a PNG of the same screen is hundreds.
 *
 * Each one is an `<iframe>`, and that is not incidental — see `.flo-screen`.
 *
 * ## Naming
 *
 * `flo-` is this site. `fitpro-` is the product. The prefix is the boundary:
 * anything `flo-` can be edited without opening the plugin, and nothing `flo-`
 * ships to another trainer.
 */

/* ---------------------------------------------------------------------------
 * Divi's own furniture
 *
 * Each marketing band is a Divi Code module sitting in a Divi section > row >
 * column. That nesting is what makes the page editable — Florina can reorder,
 * duplicate or delete whole bands in the builder, and open any one of them to
 * edit its markup.
 *
 * It also brings Divi's own spacing with it: a section pads itself 4% top and
 * bottom, and a row is capped at 1080px and centred. Both fight a full-bleed
 * band, which is every band here.
 *
 * `:has()` rather than a class on the section, deliberately. A class has to be
 * set in the block's JSON, which means depending on Divi's `className` support
 * doing what it looks like it does, and means a band pasted in by hand later
 * would silently lose its styling. Asking "does this section contain one of our
 * bands?" needs nothing from Divi at all and cannot be forgotten.
 * ------------------------------------------------------------------------ */

.et_pb_section:has(.flo-band),
.et_pb_section:has(.flo-hero) {
	padding: 0 !important;
	margin: 0 !important;
}

.et_pb_row:has(.flo-band),
.et_pb_row:has(.flo-hero) {
	inline-size: 100% !important;
	max-inline-size: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/*
 * The Code module's own wrapper. Divi gives `.et_pb_code_inner` no width of its
 * own, but the module above it is a flex item in Divi 5's column, and a flex
 * item's automatic minimum would let a wide band push the column instead of
 * staying inside it.
 */
.et_pb_module:has(> .et_pb_code_inner > .flo-page),
.et_pb_column:has(.flo-band),
.et_pb_column:has(.flo-hero) {
	inline-size: 100% !important;
	max-inline-size: none !important;
	min-inline-size: 0;
	padding: 0 !important;
	margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Native bands: built from Divi's own modules, so copy is edited in place
 *
 * Here Divi's section *is* the band (`.flo-hero`), its row *is* the grid
 * (`.flo-hero__grid`) and its columns are the grid's cells, with the classes
 * set in each block's CSS Class field. So the spacing Divi gives those wrappers
 * has to give way to ours, and only here: `.flo-native` is on the section, and a
 * Code-module band never carries it.
 *
 * `color-scheme` stands in for `data-fp-theme="dark"`, which Divi has no field
 * for; it is all that attribute does in `tokens.css`.
 * ------------------------------------------------------------------------ */

.et_pb_section.flo-native {
	color-scheme: dark;
	margin: 0 !important;
	row-gap: 0 !important;
}

/*
 * Divi caps a row at 1080px; ours is the band's measure, or the narrow one.
 * Through a variable, because the `!important` needed to beat Divi's cap would
 * otherwise beat `.flo-wrap--narrow` as well.
 */
.et_pb_section.flo-native > .et_pb_row {
	/* A Divi 5 section is a flex box: `auto` would shrink a row to its content. */
	inline-size: 100% !important;
	max-inline-size: var(--flo-row-max, var(--flo-measure)) !important;
	margin-inline: auto !important;
	padding: 0 !important;
}

.et_pb_section.flo-native > .et_pb_row.flo-wrap--narrow {
	--flo-row-max: 780px;
}

.et_pb_section.flo-native > .et_pb_row.flo-wrap--wide {
	--flo-row-max: 1440px;
}

/* A Divi 5 column is a flex column with a 30px gap between its modules. */
.flo-native .et_pb_column {
	/* 100%, not auto: in a one-column row the column is a flex item and would shrink. */
	inline-size: 100% !important;
	min-inline-size: 0;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
}

/*
 * A Text module sets its own line height and, through `et_pb_bg_layout_light`,
 * a dark text colour. Ours come from the band, as they did in a Code module.
 */
.flo-native .et_pb_module {
	margin: 0 !important;
	line-height: inherit;
	color: inherit;
}

/*
 * A Divi column is a vertical flex box, so `justify-content: center` on
 * `.flo-hero__art` centres its frame top to bottom instead of across. Centred
 * across too, where the Code-module band's row of one put it.
 */
.flo-native :is(.flo-hero__art, .flo-feature__art, .flo-coach__photo) {
	align-items: center;
}

/*
 * Divi pads a paragraph 1em at the bottom unless it is the last `<p>` among its
 * siblings. In a Code-module band an eyebrow or a first paragraph was followed
 * by more and got it; in its own Text module it is the last and does not.
 * `pages/native.php` marks those `.flo-spaced`, so a native band sits exactly
 * where the Code-module one did.
 */
/*
 * A Text module wraps a quote's words in a `<p>`, whose margin then escapes
 * through the quote's edge and opens a gap under it. The quote had no inner
 * paragraph before; this makes the one it has now take no room.
 */
.flo-native .et_pb_text_inner blockquote > p {
	margin: 0;
	padding: 0;
}

.flo-native .et_pb_text_inner p.flo-spaced {
	padding-block-end: 1em; /* beats Divi's p:not(.has-background):last-of-type */
}

/* ---------------------------------------------------------------------------
 * The page shell
 * ------------------------------------------------------------------------ */

/*
 * Divi wraps post content in `.entry-content`, which applies a max-width and
 * centring to its children, and puts `!important` on heading styles. The app's
 * own container already defends against the first; these handle the rest for
 * the full-bleed bands.
 */
.flo-page {
	--flo-band: clamp(56px, 8vw, 112px);
	--flo-measure: 1180px;

	background: var(--fp-surface);
	overflow-x: clip;
}

.flo-page h1,
.flo-page h2,
.flo-page h3,
.flo-page h4 {
	font-family: var(--fp-font-heading);
	color: var(--fp-heading);
	margin: 0;
	text-transform: uppercase;
}

/* A full-width horizontal band. Every section on the site is one of these. */
.flo-band {
	padding-block: var(--flo-band);
	padding-inline: clamp(16px, 4vw, 32px);
}

/*
 * The alternating band. Not a different colour token — a *lift* off the page
 * colour, so the two read as one surface catching light rather than as stripes.
 */
.flo-band--lift {
	background: color-mix(in srgb, var(--fp-card) 55%, var(--fp-surface));
	border-block: 1px solid var(--fp-line);
}

.flo-band--accent {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--fp-accent) 22%, var(--fp-surface)) 0%,
		var(--fp-surface) 62%
	);
	border-block: 1px solid var(--fp-line);
}

.flo-wrap {
	max-width: var(--flo-measure);
	margin-inline: auto;
}

.flo-wrap--narrow {
	max-width: 780px;
}

/* The plan cards: five of them need more than the page's usual measure. */
.flo-wrap--wide {
	max-width: 1440px;
}

/* ---------------------------------------------------------------------------
 * Section headings
 * ------------------------------------------------------------------------ */

.flo-lead {
	margin-block-end: clamp(32px, 5vw, 56px);
}

.flo-lead--centre {
	text-align: center;
	margin-inline: auto;
	max-width: 720px;
}

/*
 * `clamp()` rather than a breakpoint ladder: these headings are the largest
 * text on the site and the one thing guaranteed to overflow a narrow phone if
 * it is sized in steps and the step below is still too big.
 */
.flo-page .flo-h2 {
	font-size: clamp(28px, 4.4vw, 46px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: clamp(1px, 0.3vw, 2px);
}

.flo-page .flo-h3 {
	font-size: clamp(21px, 2.4vw, 28px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 1px;
}

.flo-page .flo-sub {
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.7;
	color: var(--fp-body);
	margin-block: var(--fp-space-4) 0;
}

.flo-page .flo-sub--tight {
	margin-block-start: var(--fp-space-3);
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

.flo-hero {
	position: relative;
	padding-block: clamp(48px, 9vw, 120px);
	padding-inline: clamp(16px, 4vw, 32px);
	background:
		radial-gradient(
			ellipse 80% 60% at 78% 18%,
			rgba(var(--fp-accent-rgb), 0.3) 0%,
			transparent 62%
		),
		radial-gradient(
			ellipse 70% 70% at 6% 88%,
			rgba(var(--fp-accent-rgb), 0.12) 0%,
			transparent 58%
		),
		var(--fp-surface);
	border-block-end: 1px solid var(--fp-line);
	overflow: hidden;
}

.flo-hero__grid {
	max-width: var(--flo-measure);
	margin-inline: auto;
	display: grid;
	/*
	 * `minmax(0, …)` on both tracks, never a bare `1fr`. A grid track's implicit
	 * minimum is its widest child's content, and the right-hand track holds a
	 * fixed-width device frame — which would push the whole grid past the
	 * viewport and take the page's horizontal scrollbar with it.
	 */
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/*
 * The lockup, above the eyebrow on both heroes.
 *
 * `<picture>` is not a replaced element -- it is a plain inline wrapper around
 * the `<img>` that does the drawing -- so the width goes on the image and the
 * wrapper is made a block, or it sits on a text baseline and carries the
 * descender gap of a line it has no text in.
 *
 * Sized in `clamp()` against the viewport rather than at a fixed width: it is
 * the first thing on the page and the last thing that should be forcing a
 * horizontal scrollbar on a 320px phone.
 *
 * The artwork is a 1.62:1 horizontal lockup, already trimmed of the transparent
 * bands the square source carried, so `height: auto` keeps its shape and the
 * `width`/`height` attributes on the `<img>` reserve the right box before it
 * arrives. No lazy loading: it is above the fold, and `fetchpriority="high"`
 * says so, because a brand mark that fades in after the headline reads as a
 * page still loading.
 */
.flo-logo {
	display: block;
	margin-block-end: var(--fp-space-5);
}

.flo-logo img {
	inline-size: clamp(168px, 17vw, 248px);
	block-size: auto;
	max-inline-size: 100%;
}

/*
 * The homepage's is twice that — it is the lead mark on the page somebody
 * lands on, where the pricing page's is a reminder of where they already are.
 *
 * `max-inline-size: 100%` above is what keeps the doubling safe: the clamp
 * floor is 336px and the hero column is narrower than that on a 320px phone,
 * so without it the mark would set the width of the page. Doubling the floor
 * is the whole reason that line stopped being belt and braces.
 */
.flo-logo--lead img {
	inline-size: clamp(336px, 34vw, 496px);
}

/*
 * The pricing hero centres its column with `text-align`, which a block element
 * does not answer -- so it is centred here rather than inherited.
 */
.flo-hero .flo-wrap--narrow .flo-logo img {
	margin-inline: auto;
}

.flo-page .flo-hero__title {
	font-size: clamp(34px, 6vw, 68px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: clamp(1px, 0.3vw, 2px);
}

/*
 * French, Spanish and Romanian put accents on capitals, and in this face an
 * accented capital stands 1.09em above its baseline (É, Â, Î, measured in the
 * loaded Oswald) -- taller than the 1.02 and 1.08 the English headings are set
 * at, so every accent touched the line above. A comma or cedilla under that
 * line (Ș, Ț, Ç) hangs another 0.28em. 1.3 clears an accent under any ordinary
 * letter with room to spare; only Ș or Ç sitting directly over an accented
 * capital still comes close, which is rare enough not to set a looser
 * heading for.
 *
 * `:lang()` because the translated pages declare their language on <html>, and
 * English keeps the tighter setting it was designed at.
 */
.flo-page :is(.flo-hero__title, .flo-h2, .flo-h3):is(:lang(fr), :lang(es), :lang(ro)) {
	line-height: 1.3;
}

/*
 * The pricing hero: centred, and a smaller title. These were inline styles, and
 * a Divi row has no field for one -- a class survives being built into native
 * modules and being saved from the builder.
 */
.flo-centre {
	text-align: center;
}

.flo-page .flo-hero__title.flo-hero__title--compact {
	font-size: clamp(32px, 5vw, 54px);
}

.flo-page .flo-hero__sub.flo-hero__sub--centred {
	margin-inline: auto;
	max-width: 56ch;
}

/* The one word that carries the brand colour, so the accent means something. */
.flo-page .flo-hero__title em {
	font-style: normal;
	color: var(--fp-accent);
}

.flo-page .flo-hero__sub {
	font-size: clamp(16px, 1.7vw, 20px);
	line-height: 1.65;
	color: var(--fp-body);
	margin-block: var(--fp-space-5) 0;
	max-width: 46ch;
}

.flo-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fp-space-3);
	margin-block-start: var(--fp-space-6);
}

/* Small reassurances under the buttons — no card, no download, no contract. */
.flo-hero__notes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fp-space-2) var(--fp-space-5);
	margin-block-start: var(--fp-space-5);
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--fp-muted);
}

.flo-hero__notes li {
	display: flex;
	align-items: center;
	gap: var(--fp-space-2);
}

.flo-hero__notes li::before {
	content: '';
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--fp-accent);
	flex: 0 0 auto;
}

.flo-hero__art {
	display: flex;
	justify-content: center;
}

@media (max-width: 900px) {
	.flo-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * `.flo-page` here too. The rule it is overriding is `.flo-page
	 * .flo-hero__sub`, and a bare class inside a media query is still (0,1,0) —
	 * media queries carry no weight of their own, which is the single easiest
	 * way to write an override that silently does nothing.
	 */
	.flo-page .flo-hero__sub {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * Device frames
 *
 * Three frames — phone, tablet, laptop — each a bezel wrapped around a
 * `.flo-screen`. The screen is a plain scroll-less box; everything inside it is
 * composed from the application's component classes.
 *
 * Sizes are fixed rather than fluid *inside* the frame, because what is in
 * there is the app, captured at one viewport: the document declares that width
 * and lays itself out for it. A fluid frame would not reflow the capture, it
 * would letterbox or crop it. The frames scale as a whole instead — see
 * `.flo-devices` and the `--flo-scale` custom property.
 * ------------------------------------------------------------------------ */

/*
 * `.flo-device` is the box the page lays out; the frame inside it is what gets
 * scaled.
 *
 * This split is not decoration. **A transformed element still occupies its
 * untransformed size in layout** — scaling the frame directly leaves a band of
 * dead space beneath every one of them exactly as tall as the shrink, and a row
 * of three different scales leaves three different bands. So the wrapper is
 * given the scaled size arithmetically, from the same two numbers the transform
 * uses, and the frame is anchored into its top-left corner.
 *
 * `--flo-w` and `--flo-h` are each frame's real dimensions, declared beside the
 * frame's own rule so the pair cannot drift apart.
 */
.flo-device {
	--flo-scale: 1;

	position: relative;
	flex: 0 0 auto;
	inline-size: calc(var(--flo-w) * var(--flo-scale));
	block-size: calc(var(--flo-h) * var(--flo-scale));
}

.flo-device > * {
	transform: scale(var(--flo-scale));
	transform-origin: top left;
}

/*
 * Real device viewports, because what is inside them is the real app.
 *
 * Each `--flo-w` is the captured width plus the bezel either side, and the
 * screen inside is exactly what `bin/build-screens.php` declared: 390x844,
 * 834x1112, 1440x900. Choosing a shape that merely looked phone-like would
 * lay the app out at a width no phone has, and its own breakpoints would
 * answer accordingly.
 */
.flo-device--phone {
	/* 390 + 11 of bezel either side. */
	--flo-w: 412px;
	--flo-h: 866px;
}

.flo-device--tablet {
	/* 834 + 16 either side. */
	--flo-w: 866px;
	--flo-h: 1144px;
}

.flo-device--laptop {
	/* 1440 + 14 either side; the lid's 914 plus the base's 14. */
	--flo-w: 1468px;
	--flo-h: 928px;
}

/* ---- Phone ---- */

.flo-phone {
	inline-size: 412px;
	block-size: 866px;
	border-radius: 42px;
	padding: 11px;
	background: linear-gradient(160deg, #3a4150 0%, #1d222c 46%, #2c3240 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06),
		var(--fp-shadow-lg),
		0 32px 64px rgba(0, 0, 0, 0.45);
}

.flo-phone .flo-screen {
	border-radius: 32px;
}

/* The speaker island. Decorative, and therefore not in the accessibility tree. */
.flo-phone::before {
	content: '';
	position: absolute;
	inset-block-start: 22px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 78px;
	block-size: 22px;
	border-radius: var(--fp-radius-pill);
	background: #10131a;
	z-index: 3;
}

/* ---- Tablet ---- */

.flo-tablet {
	inline-size: 866px;
	block-size: 1144px;
	border-radius: 26px;
	padding: 16px;
	background: linear-gradient(160deg, #3a4150 0%, #1d222c 46%, #2c3240 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06),
		var(--fp-shadow-lg),
		0 32px 64px rgba(0, 0, 0, 0.45);
}

.flo-tablet .flo-screen {
	border-radius: 12px;
}

/* ---- Laptop ---- */

.flo-laptop {
	inline-size: 1468px;
}

.flo-laptop__lid {
	block-size: 914px;
	border-radius: 14px 14px 0 0;
	padding: 14px 14px 0;
	background: linear-gradient(160deg, #3a4150 0%, #1d222c 46%, #2c3240 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06),
		var(--fp-shadow-lg);
}

.flo-laptop .flo-screen {
	border-radius: 6px 6px 0 0;
}

/*
 * The base. A trapezium would be truer to a real laptop, but a rectangle with a
 * lighter top edge reads the same at this size and does not need a clip path
 * that Safari renders half a pixel differently.
 */
.flo-laptop__base {
	block-size: 14px;
	border-radius: 0 0 10px 10px;
	background: linear-gradient(180deg, #414857 0%, #232833 100%);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
	position: relative;
}

.flo-laptop__base::after {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 96px;
	block-size: 5px;
	border-radius: 0 0 6px 6px;
	background: #171b24;
}

/* ---- The screen itself ---- */

/*
 * The screen is an `<iframe>`, and that is the load-bearing decision.
 *
 * What it loads is the client portal's own markup, captured from the running
 * app. Inlined into this page instead, every media query in `tokens.css` would
 * answer the **page's** width rather than the frame's -- so a 390px phone on a
 * 1440px laptop would render the desktop layout, tab rail turned into a
 * sidebar, inside a phone-shaped hole. `.fitpro-shell` is sized in `dvh` for
 * the same reason and would be as tall as the marketing page.
 *
 * An iframe has a viewport of its own, so the app lays itself out for the
 * device it is drawn as. It also means the product's stylesheet cannot reach
 * out into this page, or this page's into it.
 *
 * `pointer-events: none` because these are pictures; the document inside is
 * `inert`, which is what keeps them out of the focus order and the
 * accessibility tree. Belt and braces, on the one thing a reader would
 * otherwise walk into with no way out.
 */
.flo-screen {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	background: var(--fp-surface);
	pointer-events: none;
	color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * Feature rows — a device frame beside an explanation
 * ------------------------------------------------------------------------ */

.flo-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

/*
 * The frame changes side down the page so the eye zig-zags instead of running
 * down one gutter. `order` rather than two markup variants, so the document
 * order stays "what it is, then a picture of it" for a reader who gets no CSS.
 */
.flo-feature--flip .flo-feature__art {
	order: -1;
}

.flo-feature__art {
	display: flex;
	justify-content: center;
}

.flo-feature + .flo-feature {
	margin-block-start: clamp(56px, 8vw, 110px);
}

@media (max-width: 900px) {
	.flo-feature {
		grid-template-columns: minmax(0, 1fr);
	}

	.flo-feature--flip .flo-feature__art {
		order: 0;
	}
}

/*
 * How large a frame sits in a feature column.
 *
 * The frames are fixed-size by design (see the note on `.flo-device`), so
 * fitting them to a column is a matter of choosing the scale rather than
 * letting them reflow. A tablet is 866px now and the column at the page's
 * widest is about 530px, so the trim is a real one rather than the shave off a
 * round 1 that it used to be.
 *
 * A phone is 412px and needs no scaling at all there, which is why it has no
 * rule until the column starts to narrow.
 */
.flo-feature__art .flo-device--tablet {
	--flo-scale: 0.59;
}

@media (max-width: 1080px) {
	.flo-feature__art .flo-device--tablet {
		--flo-scale: 0.5;
	}
}

@media (max-width: 600px) {
	.flo-hero__art .flo-device--phone,
	.flo-feature__art .flo-device--phone {
		--flo-scale: 0.78;
	}

	.flo-feature__art .flo-device--tablet {
		--flo-scale: 0.36;
	}
}

@media (max-width: 400px) {
	.flo-hero__art .flo-device--phone,
	.flo-feature__art .flo-device--phone {
		--flo-scale: 0.66;
	}

	.flo-feature__art .flo-device--tablet {
		--flo-scale: 0.3;
	}
}

/* The checklist under a feature's explanation. */
.flo-points {
	list-style: none;
	margin: var(--fp-space-5) 0 0;
	padding: 0;
	display: grid;
	gap: var(--fp-space-3);
}

.flo-points li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: var(--fp-space-3);
	align-items: start;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fp-body);
}

.flo-points li::before {
	content: '';
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	margin-block-start: 2px;
	background:
		/* A tick, drawn rather than typed, so no font has to have the glyph. */
		linear-gradient(45deg, transparent 46%, var(--fp-accent) 46% 56%, transparent 56%) no-repeat 6px 10px / 7px 7px,
		linear-gradient(-45deg, transparent 46%, var(--fp-accent) 46% 56%, transparent 56%) no-repeat 9px 6px / 11px 11px,
		color-mix(in srgb, var(--fp-accent) 14%, transparent);
}

.flo-points strong {
	color: var(--fp-heading);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * The three-device row
 * ------------------------------------------------------------------------ */

/*
 * Laptop, tablet and phone at once, overlapped, at the scale each needs to sit
 * in one row. Below 1100px the overlap stops working and they stack.
 */
.flo-devices {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/*
 * Each scale is the size the frame used to render at, over its real width --
 * so the overlap below is the arrangement that was designed rather than a new
 * one. 1468 x 0.5 is 734, which is what 860 x 0.86 came to.
 */
.flo-devices .flo-device--laptop {
	--flo-scale: 0.5;
	z-index: 1;
}

/*
 * The two smaller frames overlap the laptop's near corner. Negative margins
 * rather than absolute positioning, so the row still reflows on its own once
 * the overlap stops fitting.
 */
.flo-devices .flo-device--tablet {
	--flo-scale: 0.34;
	margin-inline-start: -74px;
	z-index: 2;
}

.flo-devices .flo-device--phone {
	--flo-scale: 0.45;
	margin-inline-start: -96px;
	z-index: 3;
}

@media (max-width: 1080px) {
	.flo-devices {
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		gap: var(--fp-space-5);
	}

	.flo-devices .flo-device {
		margin-inline-start: 0;
	}

	/*
	 * Stacked rather than overlapped, so each frame gets the width it needs
	 * instead of the width the row can spare. Deliberately larger than the
	 * old scales worked out to: what is inside is the app at 13px, and the
	 * drawing it replaced stayed legible at sizes a capture does not.
	 */
	.flo-devices .flo-device--laptop { --flo-scale: 0.42; }
	.flo-devices .flo-device--tablet { --flo-scale: 0.44; }
	.flo-devices .flo-device--phone  { --flo-scale: 0.58; }
}

@media (max-width: 620px) {
	/*
	 * Sized to the column rather than to taste: at 375px the card gives the
	 * row 343px, and a frame wider than that is not a frame that overflows
	 * the page -- it is one whose right-hand third is quietly cut off, with
	 * nothing on screen to say so, because the section clips it.
	 */
	.flo-devices .flo-device--laptop { --flo-scale: 0.23; }
	.flo-devices .flo-device--tablet { --flo-scale: 0.39; }
	.flo-devices .flo-device--phone  { --flo-scale: 0.8; }
}

/* 288px of column at the narrowest phone this is checked at. */
@media (max-width: 400px) {
	.flo-devices .flo-device--laptop { --flo-scale: 0.19; }
	.flo-devices .flo-device--tablet { --flo-scale: 0.33; }
	.flo-devices .flo-device--phone  { --flo-scale: 0.68; }
}

/* ---------------------------------------------------------------------------
 * Feature grid — the long tail of what the app does
 * ------------------------------------------------------------------------ */

.flo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--fp-space-5);
}

.flo-tile {
	background: var(--fp-card);
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius-lg);
	padding: var(--fp-space-5);
	transition: border-color 0.18s ease, transform 0.18s ease;
}

/* Hover is a nicety, and a pointer is the only input that has one. */
@media (hover: hover) {
	.flo-tile:hover {
		border-color: color-mix(in srgb, var(--fp-accent) 48%, var(--fp-line));
		transform: translateY(-3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.flo-tile {
		transition: none;
	}

	.flo-tile:hover {
		transform: none;
	}
}

.flo-tile__icon {
	inline-size: 42px;
	block-size: 42px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--fp-accent) 15%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-block-end: var(--fp-space-4);
}

.flo-tile h3 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.4px;
	margin-block-end: var(--fp-space-2);
}

.flo-tile p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--fp-body);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * The coach
 * ------------------------------------------------------------------------ */

.flo-coach {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

@media (max-width: 900px) {
	.flo-coach {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * The photograph is a cut-out with a transparent backdrop, so she stands on the
 * page rather than sitting in a box. No frame, no crop, no card — a disc of
 * accent light behind her and nothing else.
 *
 * `isolation: isolate` because the glow is a child painted underneath her: it
 * needs its own stacking context or it competes with the band's own background
 * layers.
 */
.flo-coach__photo {
	position: relative;
	isolation: isolate;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

/* The light she is standing in. */
.flo-coach__photo::before {
	content: '';
	position: absolute;
	inset-block-end: 4%;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 108%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(var(--fp-accent-rgb), 0.34) 0%,
		rgba(var(--fp-accent-rgb), 0.12) 42%,
		transparent 68%
	);
	z-index: -1;
}

/*
 * And the shadow she casts. Without it a cut-out floats — there is nothing to
 * say where the floor is.
 */
.flo-coach__photo::after {
	content: '';
	position: absolute;
	inset-block-end: 1.5%;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 58%;
	block-size: 26px;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at 50% 50%,
		rgba(0, 0, 0, 0.45) 0%,
		transparent 72%
	);
	z-index: -1;
}

.flo-coach__photo img {
	position: relative;
	inline-size: 100%;
	max-inline-size: 420px;
	block-size: auto;
	display: block;
	/*
	 * A cut-out on a dark page reads as pasted on unless it is lit like the
	 * page. This is the same accent, thrown from where the glow is.
	 */
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
}

.flo-coach__quote {
	font-family: var(--fp-font-heading);
	font-size: clamp(18px, 2vw, 23px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--fp-heading);
	border-inline-start: 3px solid var(--fp-accent);
	padding-inline-start: var(--fp-space-4);
	margin: var(--fp-space-5) 0 0;
	text-transform: none;
}

/* ---- Certifications ---- */

.flo-certs {
	margin-block-start: clamp(40px, 6vw, 64px);
}

.flo-certs__head {
	display: flex;
	align-items: baseline;
	gap: var(--fp-space-3);
	flex-wrap: wrap;
	margin-block-end: var(--fp-space-5);
}

.flo-certs__count {
	font-size: 13px;
	color: var(--fp-muted);
}

.flo-certs__list {
	display: grid;
	/*
	 * 340px, not 280: a certification's name is the longest string on the page
	 * that cannot be shortened — "Hip & Lower Back: From Rehab to Results" — and
	 * at four to a row every one of them wrapped to three lines.
	 */
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: var(--fp-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.flo-cert {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: var(--fp-space-3);
	align-items: center;
	padding: var(--fp-space-3) var(--fp-space-4);
	background: var(--fp-card);
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius);
}

.flo-cert__seal {
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--fp-accent) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--fp-accent) 38%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.flo-cert__name {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--fp-heading);
	line-height: 1.35;
}

.flo-cert__by {
	display: block;
	font-size: 11px;
	color: var(--fp-muted);
	margin-block-start: 2px;
}

/*
 * The certificates as their own logos, no words beside them: the logo is the
 * name, and its alt text says it to anybody who cannot see it.
 *
 * Every tile is the same box whatever the logo's shape, and small -- these are
 * evidence, not the point of the band. `object-fit: contain` keeps each logo
 * whole inside it; the images are trimmed to their ink when generated
 * (`bin/build-certs.php`), so one issuer's transparent margins cannot make its
 * logo smaller than the next.
 *
 * Most logos are drawn in white or cream for dark backgrounds. The five in dark
 * ink -- canfitpro's navy, STRONG Nation's grey, both Piloxing marks and
 * BODYSHRED -- all but vanish on this band, so they sit on a light tile. Same
 * size, same frame; only the backing changes.
 */
.flo-page .flo-certs__list--logos {
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	gap: var(--fp-space-3);
}

.flo-page .flo-certs__list--logos .flo-cert {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 76px;
	padding: 12px 16px;
	margin: 0;
}

.flo-page .flo-certs__list--logos .flo-cert img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	margin: 0;
}

.flo-page .flo-certs__list--logos .flo-cert--light {
	background: #f4f5f7;
	border-color: #f4f5f7;
}

/* ---------------------------------------------------------------------------
 * Pricing
 * ------------------------------------------------------------------------ */

.flo-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--fp-space-5);
	/*
	 * `stretch`, not `start`. The cards carry `block-size: 100%` so that the
	 * call to action can be pinned to the bottom of each one with an `auto`
	 * top margin -- and a percentage height resolves against nothing at all
	 * when the item is only as tall as its own content. With `start` the
	 * three buttons sit at three different heights, which is the first thing
	 * the eye notices on a pricing table.
	 */
	align-items: stretch;
}

.flo-plan {
	position: relative;
	background: var(--fp-card);
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius-lg);
	padding: var(--fp-space-6) var(--fp-space-5);
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

/*
 * The middle plan, lifted. `outline` rather than a thicker border, because a
 * border changes the box's size and the three cards would stop lining up.
 */
.flo-plan--featured {
	outline: 2px solid var(--fp-accent);
	outline-offset: -1px;
	background: color-mix(in srgb, var(--fp-accent) 5%, var(--fp-card));
}

.flo-plan__flag {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	padding: 5px 14px;
	border-radius: var(--fp-radius-pill);
	background: var(--fp-accent-fill);
	color: var(--fp-accent-contrast);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

.flo-page .flo-plan__name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 2px;
}

.flo-page .flo-plan__blurb {
	font-size: 14px;
	line-height: 1.6;
	color: var(--fp-body);
	margin-block: var(--fp-space-2) 0;
	min-block-size: 3.2em;
}

.flo-page .flo-plan__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-block: var(--fp-space-5) 0;
	padding-block-end: var(--fp-space-5);
	border-block-end: 1px solid var(--fp-line);
}

.flo-plan__amount {
	font-family: var(--fp-font-heading);
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	color: var(--fp-heading);
}

.flo-plan__period {
	font-size: 13px;
	color: var(--fp-muted);
}

.flo-plan__features {
	list-style: none;
	margin: var(--fp-space-5) 0 var(--fp-space-6);
	padding: 0;
	display: grid;
	gap: var(--fp-space-3);
	font-size: 14px;
	line-height: 1.55;
	color: var(--fp-body);
}

.flo-plan__features li {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: var(--fp-space-3);
	align-items: start;
}

.flo-plan__features li::before {
	content: '';
	inline-size: 18px;
	block-size: 18px;
	border-radius: 50%;
	margin-block-start: 1px;
	background:
		linear-gradient(45deg, transparent 46%, var(--fp-accent) 46% 58%, transparent 58%) no-repeat 5px 8px / 6px 6px,
		linear-gradient(-45deg, transparent 46%, var(--fp-accent) 46% 58%, transparent 58%) no-repeat 7px 5px / 9px 9px,
		color-mix(in srgb, var(--fp-accent) 14%, transparent);
}

/*
 * The placeholder marker under a price.
 *
 * It exists so an unpriced plan reads as unfinished on purpose rather than as
 * a bug. Delete the line along with the placeholder and nothing shifts — it is
 * the last thing in the price group.
 */
.flo-page .flo-plan__note {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--fp-warning);
	margin: var(--fp-space-3) 0 0;
}

/* `auto` top margin pins the button to the bottom however long the list is. */
.flo-plan__cta {
	margin-block-start: auto;
}

.flo-page .flo-plans__foot {
	text-align: center;
	font-size: 14px;
	color: var(--fp-muted);
	max-width: 62ch;
	margin: clamp(32px, 4vw, 48px) auto 0;
}

/*
 * The live cards, read from the app by `[flo_plans]` (plans.php).
 *
 * A row of fixed columns rather than "as many as fit": fitting five into the
 * page's measure made each card about 220px, the lists wrapped every line and
 * the buttons ran to four lines (15 Oct 2026). The band is 1440px wide
 * (`.flo-wrap--wide`), the number across is chosen per screen and per number
 * of plans, and a short last row is centred rather than left with a gap.
 *
 * Flex rather than grid for exactly that last point: grid cannot centre the
 * two cards left over from three across.
 */
.flo-page .flo-plans--live {
	--flo-plan-cols: 3;
	--flo-plan-gap: var(--fp-space-4);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--flo-plan-gap);
}

.flo-page .flo-plans--live .flo-plan {
	flex: 0 0 calc((100% - (var(--flo-plan-cols) - 1) * var(--flo-plan-gap)) / var(--flo-plan-cols));
	min-inline-size: 0;
	max-inline-size: 440px;
	block-size: auto;
	padding: var(--fp-space-6) var(--fp-space-4);
}

/* Up to five fit in one row at full width (about 260px each); six is 3 + 3. */
@media (min-width: 1400px) {
	.flo-page .flo-plans--live {
		--flo-plan-cols: 4;
	}

	.flo-page .flo-plans--live.flo-plans--count-1 {
		--flo-plan-cols: 1;
	}

	.flo-page .flo-plans--live.flo-plans--count-2 {
		--flo-plan-cols: 2;
	}

	.flo-page .flo-plans--live.flo-plans--count-3,
	.flo-page .flo-plans--live.flo-plans--count-6 {
		--flo-plan-cols: 3;
	}

	.flo-page .flo-plans--live.flo-plans--count-5 {
		--flo-plan-cols: 5;
	}
}

/* Four would be three and one: two and two. */
@media (min-width: 900px) and (max-width: 1399px) {
	.flo-page .flo-plans--live.flo-plans--count-4,
	.flo-page .flo-plans--live.flo-plans--count-2 {
		--flo-plan-cols: 2;
	}

	.flo-page .flo-plans--live.flo-plans--count-1 {
		--flo-plan-cols: 1;
	}
}

/* Three selectors' worth, and later, so they win over every count above. */
@media (max-width: 899px) {
	.flo-page .flo-plans.flo-plans--live {
		--flo-plan-cols: 2;
	}
}

@media (max-width: 599px) {
	.flo-page .flo-plans.flo-plans--live {
		--flo-plan-cols: 1;
	}
}

/*
 * The app's button is sized for a form's one action: 32px of padding a side
 * and 3px between letters. On a 275px card that wrapped "Choisir cette formule".
 */
.flo-page .flo-plans--live .flo-plan__cta .fitpro-btn {
	padding: 14px 12px;
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 1.3;
}

.flo-page .flo-plans--live .flo-plan__price {
	flex-wrap: wrap;
	column-gap: 6px;
	row-gap: 2px;
}

.flo-page .flo-plans--live .flo-plan__amount {
	font-size: 34px;
}

/* Trial, length of access, total of instalments: the price's small print. */
.flo-page .flo-plan__terms {
	list-style: none;
	margin: var(--fp-space-3) 0 0;
	padding: 0;
	display: grid;
	gap: 2px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--fp-muted);
}

.flo-page .flo-plan__list {
	margin: var(--fp-space-5) 0 var(--fp-space-6);
	display: grid;
	gap: var(--fp-space-4);
}

.flo-page .flo-plan__list .flo-plan__features {
	margin: 0;
	gap: var(--fp-space-2);
	font-size: 13px;
}

/* A group's name, as the app heads them: Coaching, Library, Nutrition... */
.flo-page .flo-plan__heading {
	margin: 0 0 var(--fp-space-2);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--fp-muted);
}

/* "Everything in Foundation, plus:" */
.flo-page .flo-plan__lead {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--fp-heading);
}

/* Everything under Coaching is bold, as on the app's own card. */
.flo-page .flo-plan__features--strong {
	font-weight: 700;
	color: var(--fp-heading);
}

/* Both lists are in the markup; the switch decides which one shows. */
.flo-page .flo-plans--live.is-view-new .flo-plan__list--full,
.flo-page .flo-plans--live.is-view-full .flo-plan__list--new {
	display: none;
}

.flo-page .flo-plans-view {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--fp-space-3);
	margin: 0 0 var(--fp-space-6);
}

/* An author `display` beats `[hidden]`, so it is said again. */
.flo-page .flo-plans-view[hidden] {
	display: none;
}

.flo-page .flo-plans-view__label {
	font-size: 13px;
	color: var(--fp-muted);
}

.flo-page .flo-plans-view__switch {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius-pill);
	background: var(--fp-card);
}

.flo-page .flo-plans-view__switch button {
	appearance: none;
	margin: 0;
	border: 0;
	border-radius: var(--fp-radius-pill);
	background: transparent;
	color: var(--fp-body);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	min-block-size: 36px;
	padding: 8px 16px;
	cursor: pointer;
}

.flo-page .flo-plans-view__switch button[aria-pressed="true"] {
	background: var(--fp-accent-fill);
	color: var(--fp-accent-contrast);
}

.flo-page .flo-plans-view__switch button:focus-visible {
	outline: 2px solid var(--fp-accent);
	outline-offset: 2px;
}

/*
 * On a phone the two words do not fit side by side as pills, and wrapped they
 * stacked into one tall pill. Two equal halves instead, the words wrapping
 * inside each.
 */
@media (max-width: 560px) {
	.flo-page .flo-plans-view__switch {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		inline-size: 100%;
		border-radius: var(--fp-radius-lg);
	}

	.flo-page .flo-plans-view__switch button {
		border-radius: 12px;
		padding: 8px 10px;
		font-size: 11px;
		letter-spacing: 0.5px;
		line-height: 1.3;
	}
}

.flo-page .flo-plans__empty {
	text-align: center;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Questions
 * ------------------------------------------------------------------------ */

/*
 * Laid out flat rather than as a set of `<details>` folds. Six short answers
 * are quicker to read than to open, and a fold hides exactly the reassurance
 * somebody came to the pricing page looking for.
 */
.flo-faq {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--fp-space-5) clamp(32px, 4vw, 56px);
}

.flo-faq__item h3 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.2px;
	margin-block-end: var(--fp-space-2);
}

.flo-faq__item p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--fp-body);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Closing call to action
 * ------------------------------------------------------------------------ */

.flo-cta {
	text-align: center;
	padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px);
	border-radius: var(--fp-radius-lg);
	background:
		radial-gradient(
			ellipse 70% 100% at 50% 0%,
			rgba(var(--fp-accent-rgb), 0.28) 0%,
			transparent 70%
		),
		var(--fp-card);
	border: 1px solid color-mix(in srgb, var(--fp-accent) 26%, var(--fp-line));
}

.flo-cta__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fp-space-3);
	justify-content: center;
	margin-block-start: var(--fp-space-6);
}

/* ---------------------------------------------------------------------------
 * Motion
 * ------------------------------------------------------------------------ */

/*
 * Frames drift up as they come into view. Applied by `marketing.js`, which adds
 * `.flo-reveal` only once it has confirmed `IntersectionObserver` exists —
 * without that guard a browser missing it would leave every frame at opacity 0,
 * which is a blank page rather than a missing animation.
 */
.flo-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.flo-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.flo-reveal,
	.flo-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Language switcher
 * ------------------------------------------------------------------------ */

/*
 * Top right, over the hero, where the logo is top left. Absolute against the
 * document rather than fixed: it is a way into the page, not a toolbar that
 * follows somebody down it.
 *
 * The admin bar's height is added so a signed-in editor does not find it
 * underneath the bar; `--wp-admin--admin-bar--height` is core's own variable
 * and is unset for everybody else.
 *
 * The chosen language is marked by weight and an underline in the accent rather
 * than by a filled pill: white on the brand orange is 3.34:1, which is not
 * enough for text this small.
 */
.flo-langs {
	position: absolute;
	inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);
	inset-inline-end: clamp(12px, 3vw, 28px);
	z-index: 50;
	/*
	 * Its own content's width. Something upstream gives every `nav` a width, and
	 * an absolute box with a width stretches across the page from the right
	 * edge -- which put the first links off the left of the screen.
	 */
	inline-size: max-content;
	max-inline-size: calc(100vw - 24px);
	background: none;
}

.flo-langs ul {
	display: flex;
	gap: 2px;
	margin: 0 !important;
	padding: 4px !important;
	list-style: none !important;
	background: color-mix(in srgb, var(--fp-surface) 72%, transparent);
	border: 1px solid var(--fp-line);
	border-radius: 100px;
	backdrop-filter: blur(8px);
}

.flo-langs li {
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.flo-langs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 36px;
	min-block-size: 32px;
	padding-inline: 8px;
	border-radius: 100px;
	font: 700 12px/1 var(--fp-font-body);
	letter-spacing: 1px;
	color: var(--fp-body);
	text-decoration: none;
}

.flo-langs a[aria-current="page"] {
	color: var(--fp-heading);
	text-decoration: underline 2px var(--fp-accent);
	text-underline-offset: 5px;
}

.flo-langs a:focus-visible {
	outline: 2px solid var(--fp-accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.flo-langs a:not([aria-current]):hover {
		color: var(--fp-heading);
		background: color-mix(in srgb, var(--fp-heading) 10%, transparent);
	}
}