/*
 * Voltrise Fitness Club: the CSS this starter site needs beyond the base theme.
 *
 * The design is docs/ref/fitness/bozza/ (approved 2026-09-24, P-10). Every
 * shape the bozza drew with an `.itd-*` class lives here, in the order of the
 * bozza's own stylesheet; so do the corrections Task 2 measured on the theme
 * under this dark palette (D-1...D-10, and the "in the demo" alternatives of
 * T-1...T-4 and G-1: the theme stays 1.2.0). Each block says which it closes.
 *
 * Three rules this file obeys without exception:
 *
 * 1. No palette hexadecimal, anywhere, not even as a var() fallback (D-A,
 *    D-O, Phase 7 deviation 28). Colours come from the ten preset slots and
 *    from color-mix() of them, so the Customizer's Colors section reaches
 *    every one of them. The one literal colour is Contact Form 7's error red,
 *    which spec 4.2 keeps outside the palette.
 * 2. This stylesheet loads on every page of a site that imported the demo,
 *    and a customer may import two. Content rules are scoped to `.itd-*`
 *    classes only this package writes, and never reach a bare element. The
 *    few rules that restyle shared furniture - the logo's size, the menu, the
 *    header button, content buttons, the footer, form fields, the search
 *    page - say so where they stand.
 * 3. EVERY rule begins with `:root ` (the custom-property block aside), in
 *    the base file and inside every `@media` block, and the prefix never goes
 *    inside `:is()`/`:where()`/`:not()`. WordPress prints its layout rules
 *    (`:root :where(.is-layout-flow) > * { margin-block-start: ... }`,
 *    `.is-layout-constrained > :where(...) { max-width: ... }`) and the theme
 *    prints main.css AFTER this file; the prefix lifts every rule here one
 *    class above both, and because it is on all of them, their order among
 *    themselves is untouched (Restaurant, Phase 8 deviation 8; this package's
 *    content test checks it). A rule added here needs it
 *    too. `!important` appears only against core declarations that already
 *    carry it (`.wp-block-columns { align-items: normal !important }`, a
 *    column's `flex-basis: 100% !important` on a phone) or against a width
 *    written inline by the editor (`style="flex-basis:38%"`), and says so.
 *
 * Site chrome is global ON PURPOSE (user decision, 2026-09-24, as Restaurant
 * does): the header, the menu, the footer, every core button
 * (`.wp-block-button__link`) and every Contact Form 7 form are restyled on the
 * whole site, not only inside this demo's sections. The Companion loads the
 * stylesheet of every imported demo, so on a site with two demos the rules that
 * weigh more win (these `:root ` ones beat Restaurant's `body ` ones); one demo
 * per site is the supported case (manual, section 12).
 */

:root {
	/* Named for this demo so two imported packages cannot fight over them. */
	--itd-fit-radius: 4px;
	--itd-fit-gutter: var( --wp--style--root--padding-left, clamp( 1rem, 4vw, 2rem ) );
	/* G-1: a field border that reaches 3:1 on base, tertiary and surface. */
	--itd-fit-field-border: color-mix( in srgb, var( --wp--preset--color--muted ) 60%, var( --wp--preset--color--tertiary ) );
	/* The check mark of the plan features and of the "finding us" list. */
	/*
	 * The family demo.json gives the heading roles (P-5), for the three big
	 * numbers that are not headings (counters, plan prices, value numbers).
	 * Named here, as Restaurant does, because the theme applies a role font
	 * with tag rules - `h1{font-family:...}` from itd_customizer_inline_css() -
	 * and leaves --wp--preset--font-family--heading/--body saying Manrope:
	 * reading those presets printed Manrope on the imported demo (Task 5).
	 * Headings take the tag rules, text takes `inherit`. Exactly the string
	 * itd_font_catalog() uses, so the same file is served.
	 * Known limit (as Restaurant): a heading font changed in the Customizer
	 * reaches the headings, not these three numbers, which stay Montserrat.
	 */
	--itd-fit-display: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--itd-fit-check: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3E%3Cpath d='M1.5 7 6 11.5 14.5 1.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

/* ------------------------------------------------ shared furniture: header
 *
 * D-3, D-4, D-5. The bozza's header: the Voltrise PNG at the height of its
 * drawing, a `line` rule under the header instead of the theme's lime tint,
 * the menu in `contrast` 600 with a `primary` bar, and a square-cornered
 * uppercase "Book a class" in `primary`. The theme hides that button at
 * <=782px already; the open phone menu is left to the theme.
 */

:root .custom-logo-link img {
	/* 366x70 at 2x; the bozza draws the mark 30px high. */
	max-height: 35px;
}

:root .site-header {
	border-bottom-color: var( --wp--preset--color--line );
}

/* The phone menu button in `contrast`, as the bozza draws it; the theme's
   header colour (`primary`) made it lime (Task 5). */
:root .menu-toggle {
	color: var( --wp--preset--color--contrast );
}

:root .site-header__cta {
	padding: 0.85rem 1.4rem;
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

:root .site-header__cta:hover {
	background-color: var( --wp--preset--color--accent-2 );
	color: var( --wp--preset--color--base );
}

@media ( min-width: 1025px ) {
	:root .primary-menu {
		gap: 2rem;
	}

	:root .primary-menu a {
		padding-block: 0.4rem;
		color: var( --wp--preset--color--contrast );
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		white-space: nowrap;
	}

	:root .primary-menu a::after {
		bottom: -0.35rem;
		border-radius: 0;
		background-color: var( --wp--preset--color--primary );
	}

	:root .primary-menu a:hover {
		color: var( --wp--preset--color--primary );
	}
}

@media ( max-width: 1180px ) and ( min-width: 1025px ) {
	:root .primary-menu {
		gap: 1.25rem;
	}

	:root .primary-menu a {
		font-size: 0.75rem;
		letter-spacing: 0.04em;
	}

	:root .site-header__cta {
		padding: 0.75rem 1.1rem;
		font-size: 0.75rem;
	}

	:root .custom-logo-link img {
		max-height: 30px;
	}
}

/* The theme shows the phone menu up to 1024px (theme 1.2.1): the logo takes
   its phone size there too, and the band that squeezed the desktop menu
   below 960px is gone with it. */
@media ( max-width: 1024px ) {
	:root .custom-logo-link img {
		max-height: 28px;
	}
}

/* ----------------------------------------- shared furniture: content buttons
 *
 * D-6. Square-ish corners, a 2px border, small uppercase: the bozza's button
 * instead of the theme's pill. Hover is `accent-2`, and the theme's
 * brightness filter and lift are switched off (they would brighten the lime
 * past its measured contrast). Outline buttons are `contrast` and turn
 * `primary` on hover.
 */

:root .wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.75rem;
	border: 2px solid var( --wp--preset--color--primary );
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-family: inherit; /* the body role, from the theme's `body{}` rule (see --itd-fit-display) */
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

:root .wp-block-button .wp-block-button__link:hover {
	border-color: var( --wp--preset--color--accent-2 );
	background-color: var( --wp--preset--color--accent-2 );
	color: var( --wp--preset--color--base );
	filter: none;
	transform: none;
}

:root .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var( --wp--preset--color--contrast );
	background-color: transparent;
	color: var( --wp--preset--color--contrast );
}

:root .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var( --wp--preset--color--primary );
	background-color: transparent;
	color: var( --wp--preset--color--primary );
}

/* D-7: on the lime band, a dark button - a lime one would vanish into it. */
:root .itd-button-dark .wp-block-button__link {
	border-color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--primary );
}

:root .itd-button-dark .wp-block-button__link:hover {
	border-color: var( --wp--preset--color--tertiary );
	background-color: var( --wp--preset--color--tertiary );
	color: var( --wp--preset--color--accent-2 );
}

/* ---------------------------------------------------------- type scale
 *
 * D-10. Headings uppercase in Montserrat 600 (P-5) with the bozza's slightly
 * open tracking instead of theme.json's -0.04em, which pinches capitals.
 * Scoped to the demo's own bands; the element sits in `:where()` so each rule
 * weighs two classes and a component class further down (`.itd-plan__name`,
 * `.itd-day__name`...) still sets its own size.
 */

:root .itd-hero,
:root .itd-pagehead,
:root .itd-cta,
:root .itd-section,
:root .itd-stats,
:root .itd-band {
	font-size: clamp( 1rem, 0.96rem + 0.2vw, 1.0625rem );
	line-height: 1.65;
	letter-spacing: 0;
}

:root :is( .itd-hero, .itd-pagehead, .itd-cta, .itd-section, .itd-band ) :where( h1, h2, h3, h4 ) {
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

:root :is( .itd-hero, .itd-pagehead, .itd-cta, .itd-section, .itd-band ) :where( h1 ),
:root .itd-pagehead .itd-page-title {
	font-size: clamp( 2.25rem, 1.2rem + 3.6vw, 4rem );
}

:root :is( .itd-hero, .itd-pagehead, .itd-cta, .itd-section, .itd-band ) :where( h2 ) {
	font-size: clamp( 1.75rem, 1.2rem + 2.1vw, 3rem );
}

:root :is( .itd-hero, .itd-pagehead, .itd-cta, .itd-section, .itd-band ) :where( h3 ) {
	font-size: 1.25rem;
}

:root .itd-section .itd-h3 {
	font-size: clamp( 1.5rem, 1.3rem + 0.8vw, 1.875rem );
}

:root .itd-section .itd-h4 {
	font-size: 1rem;
	letter-spacing: 0.06em;
}

:root .itd-lead {
	font-size: clamp( 1.0625rem, 1rem + 0.25vw, 1.1875rem );
	color: var( --wp--preset--color--muted );
}

:root .itd-muted {
	color: var( --wp--preset--color--muted );
}

:root .itd-small {
	font-size: 0.875rem;
}

/* ------------------------------------------------------------ eyebrows */

:root .itd-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --wp--preset--color--primary );
}

:root .itd-eyebrow::before,
:root .itd-eyebrow.has-text-align-center::after {
	content: "";
	flex: 0 0 2rem;
	height: 2px;
	background-color: currentColor;
}

:root .itd-eyebrow.has-text-align-center {
	justify-content: center;
}

:root .itd-eyebrow + :is( h1, h2 ) {
	margin-block-start: 0.75rem;
}

/* ------------------------------------------------ sections and columns */

:root .itd-section {
	padding-block: var( --wp--preset--spacing--70 );
}

:root .itd-gap-wide {
	gap: clamp( 2rem, 5vw, 5rem );
}

/*
 * A columns block set to "vertically centred" in the editor never gets
 * there: core's `.wp-block-columns` carries `align-items: normal !important`.
 */
:root .itd-section .wp-block-columns.are-vertically-aligned-center {
	align-items: center !important;
}

/* Section head: the title on the left, a text link on the right. */
:root .itd-section-head {
	/* !important: core's align-items: normal !important. */
	align-items: flex-end !important;
}

:root .itd-section-head > .wp-block-column:last-child {
	flex: 0 0 auto;
}

:root .itd-more {
	margin: 0;
	padding-bottom: 0.4rem;
}

/* The arrow link: the theme nudges the whole link on hover; here only the arrow moves. */
:root .itd-more .itd-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var( --wp--preset--color--primary );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

:root .itd-more .itd-arrow-link:hover {
	color: var( --wp--preset--color--accent-2 );
	transform: none;
}

:root .itd-more .itd-arrow-link::after {
	content: "→";
	transition: transform 0.15s ease;
}

:root .itd-more .itd-arrow-link:hover::after {
	transform: translateX( 3px );
}

:root .itd-rounded img {
	width: 100%;
	border-radius: var( --itd-fit-radius );
}

/* ------------------------------------------------------ covers and veil
 *
 * P-19: the veil is a gradient of `base`, never a hex. The cover blocks carry
 * core's 60% black overlay (what the editor shows); on the site that overlay
 * becomes this palette gradient. D-1/R-8: the inner pages open on
 * `.itd-pagehead`, never on the theme's `.itd-page-hero`, whose `::before`
 * would paint over the cover's own text.
 */

:root .itd-hero,
:root .itd-pagehead,
:root .itd-cta {
	padding-inline: 0;
	color: var( --wp--preset--color--contrast );
}

:root :is( .itd-hero, .itd-pagehead, .itd-cta ).wp-block-cover > .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background-color: transparent;
	background-image: linear-gradient( 90deg,
		color-mix( in srgb, var( --wp--preset--color--base ) 92%, transparent ) 0%,
		color-mix( in srgb, var( --wp--preset--color--base ) 72%, transparent ) 42%,
		color-mix( in srgb, var( --wp--preset--color--base ) 18%, transparent ) 100% );
}

:root .itd-cta.wp-block-cover > .wp-block-cover__background.has-background-dim {
	background-image: none;
	background-color: color-mix( in srgb, var( --wp--preset--color--base ) 74%, transparent );
}

/* --------------------------------------------------------------- hero */

:root .itd-hero {
	min-height: clamp( 560px, 50vw, 720px );
	padding-block: 5rem;
}

:root .itd-hero__inner > .itd-hero__text {
	/* Wide enough for each title line to stay on one line. */
	max-width: 56rem;
	margin-inline: 0;
}

:root .itd-hero__title {
	font-size: clamp( 2rem, 0.9rem + 4.6vw, 4.75rem );
	line-height: 1.02;
}

:root .itd-hero__text > .itd-lead {
	max-width: 31rem;
	margin-block-start: 1.25rem;
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 86%, transparent );
}

:root .itd-hero__text > .wp-block-buttons {
	margin-block-start: 2.25rem;
}

/*
 * P-26: the hero's green word turns RISE / LIFT / SWEAT / WIN. The four words
 * are stacked in one grid cell, so the title is always as wide as the widest
 * and nothing moves when the word changes. This block is the still state, the
 * one reduced motion (and any browser that runs no animation) keeps: RISE,
 * the other three hidden. The motion itself is in the
 * `prefers-reduced-motion: no-preference` block at the end: one quick cycle
 * that comes back to RISE and stops (user decision, 2026-09-25).
 * The three extra words carry aria-hidden: a screen reader hears the sentence.
 * Each title line is its own inline-block so the entrance can lift it.
 */

:root .itd-hero__line {
	display: inline-block;
}

:root .itd-rotator {
	display: inline-grid;
	justify-items: start;
}

:root .itd-rotator__word {
	grid-area: 1 / 1;
}

:root .itd-rotator__word + .itd-rotator__word {
	opacity: 0;
}

/* ------------------------------------------------------------- counters */

:root .itd-stats {
	padding-block: 2.5rem;
	border-bottom: 1px solid var( --wp--preset--color--line );
}

:root .itd-stats__row {
	gap: 0;
}

:root .itd-stat {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.75rem;
	padding-inline: 1.5rem;
}

:root .itd-stat > * {
	margin-block: 0;
}

:root .itd-stat + .itd-stat {
	border-left: 1px solid var( --wp--preset--color--line );
}

:root .itd-stat__num {
	font-family: var( --itd-fit-display );
	font-size: clamp( 2rem, 1.5rem + 1.6vw, 2.75rem );
	font-weight: 600;
	line-height: 1;
	color: var( --wp--preset--color--primary );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

:root .itd-stat__label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var( --wp--preset--color--contrast );
}

/* --------------------------------------------------- home: class tiles */

:root .itd-classes > .itd-classes__row {
	margin-block-start: 2.75rem;
}

:root .itd-classes__row,
:root .itd-values__row {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 1.5rem;
}

:root .itd-classes__row > * {
	margin-block: 0;
}

:root .itd-class--tile {
	position: relative;
	overflow: hidden;
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--surface );
}

:root .itd-class--tile > * {
	margin-block: 0;
}

:root .itd-class--tile .itd-class__media img,
:root .itd-trainer__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

:root .itd-class--tile .itd-class__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 3.5rem 1.4rem 1.3rem;
	background: linear-gradient( 0deg,
		color-mix( in srgb, var( --wp--preset--color--base ) 92%, transparent ) 0%,
		color-mix( in srgb, var( --wp--preset--color--base ) 60%, transparent ) 55%,
		transparent 100% );
}

:root .itd-class--tile .itd-class__body > * {
	margin-block: 0;
}

:root .itd-class--tile .itd-class__body > * + * {
	margin-block-start: 0.35rem;
}

:root .itd-class--tile .itd-class__name {
	font-size: 1.3125rem;
}

:root .itd-class--tile .itd-class__name a {
	color: inherit;
	text-decoration: none;
}

:root .itd-class--tile .itd-class__name a:hover {
	color: var( --wp--preset--color--primary );
}

:root .itd-class__meta {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var( --wp--preset--color--primary );
}

/* A lime bar on hover, like the menu underline. */
:root .itd-class--tile::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 0;
	height: 3px;
	background-color: var( --wp--preset--color--primary );
	transition: width 0.2s ease;
}

:root .itd-class--tile:hover::after {
	width: 100%;
}

/* ------------------------------------------------------ why (features) */

:root .itd-why__cols {
	/* !important: core's align-items: normal !important. */
	align-items: center !important;
}

:root .itd-why__text > .itd-lead {
	max-width: 28rem;
}

:root .itd-features,
:root .itd-class-list,
:root .itd-trainer-list {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.5rem;
}

:root .itd-features > * {
	margin-block: 0;
}

:root .itd-feature {
	padding: 1.75rem 1.6rem 1.6rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--tertiary );
}

:root .itd-feature > * {
	margin-block: 0;
}

:root .itd-feature > * + * {
	margin-block-start: 0.6rem;
}

:root .itd-feature .itd-icon {
	display: block;
	margin-bottom: 0.4rem;
	color: var( --wp--preset--color--primary );
}

:root .itd-feature .itd-feature__title {
	font-size: 1rem;
	letter-spacing: 0.05em;
	line-height: 1.3;
}

:root .itd-feature p,
:root .itd-class__desc,
:root .itd-trainer__bio {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --wp--preset--color--muted );
}

/* -------------------------------------------------- home: coach tiles */

:root .itd-coaches > .itd-coaches__row {
	margin-block-start: 2.75rem;
}

:root .itd-coaches__row {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1.5rem;
}

:root .itd-coaches__row > *,
:root .itd-trainer--tile > * {
	margin-block: 0;
}

:root .itd-trainer--tile .itd-trainer__media img {
	border-radius: var( --itd-fit-radius );
}

:root .itd-trainer--tile .itd-trainer__name {
	margin-block-start: 1.1rem;
	font-size: 1.125rem;
}

:root .itd-trainer__role {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--primary );
}

:root .itd-trainer--tile .itd-trainer__role {
	margin-block-start: 0.35rem;
}

/* --------------------------------------------------------------- plans */

:root .itd-plans > .itd-plans__row {
	margin-block-start: 2.75rem;
}

:root .itd-plans__row {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	align-items: stretch;
	gap: 1.5rem;
}

:root .itd-plans__row > * {
	margin-block: 0;
}

:root .itd-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2.25rem 2rem 2rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--tertiary );
}

:root .itd-plan > * {
	margin-block: 0;
}

:root .itd-plan .itd-plan__name {
	font-size: 1rem;
	letter-spacing: 0.14em;
	color: var( --wp--preset--color--muted );
}

:root .itd-plan > .itd-plan__cost {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin-block-start: 1rem;
}

:root .itd-plan__cost > * {
	margin: 0;
}

:root .itd-plan__price {
	font-family: var( --itd-fit-display );
	font-size: 3.25rem;
	font-weight: 600;
	line-height: 1;
	color: var( --wp--preset--color--contrast );
	font-variant-numeric: tabular-nums;
}

:root .itd-plan__period {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --wp--preset--color--muted );
}

:root .itd-plan > .itd-plan__desc {
	margin-block-start: 1.1rem;
	font-size: 0.9375rem;
	color: var( --wp--preset--color--muted );
}

:root .itd-plan > .itd-plan__features {
	margin: 1.5rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var( --wp--preset--color--line );
	font-size: 0.9375rem;
	list-style: none;
}

:root .itd-plan__features li {
	position: relative;
	padding-left: 1.75rem;
}

:root .itd-plan__features li + li {
	margin-top: 0.65rem;
}

:root .itd-plan__features li::before,
:root .itd-checks li::before {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 0;
	width: 1rem;
	height: 0.8rem;
	background-color: var( --wp--preset--color--primary );
	-webkit-mask: var( --itd-fit-check ) center / contain no-repeat;
	mask: var( --itd-fit-check ) center / contain no-repeat;
}

:root .itd-plan > .wp-block-buttons {
	margin-block-start: auto;
	padding-top: 2rem;
}

:root .itd-plan .wp-block-button {
	flex: 1;
}

:root .itd-plan .wp-block-button__link {
	width: 100%;
}

:root .itd-plan--featured {
	border: 2px solid var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--surface );
}

:root .itd-plan--featured .itd-plan__name {
	color: var( --wp--preset--color--primary );
}

:root .itd-plan > .itd-plan__badge {
	position: absolute;
	top: 0;
	right: 1.5rem;
	margin: 0;
	padding: 0.35rem 0.8rem;
	transform: translateY( -50% );
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* -------------------------------------------------- photo CTA band */

:root .itd-cta {
	min-height: clamp( 380px, 32vw, 460px );
	padding-block: 4.5rem;
}

:root .itd-cta .wp-block-cover__inner-container > * + * {
	margin-block-start: 1.1rem;
}

:root .itd-cta .wp-block-cover__inner-container > .wp-block-buttons {
	margin-block-start: 2rem;
}

:root .itd-cta__lead {
	font-size: 1.125rem;
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 86%, transparent );
}

/* --------------------------------------------- lime band (inner pages)
 *
 * D-7: a band painted `primary` has to say `base` for everything on it - the
 * pattern sets the group's text colour, this covers the rest (links, focus).
 */

:root .itd-band {
	padding-block: 4rem;
}

:root .itd-band__cols {
	/* !important: core's align-items: normal !important. */
	align-items: center !important;
}

:root .itd-band p {
	color: color-mix( in srgb, var( --wp--preset--color--base ) 78%, var( --wp--preset--color--primary ) );
	font-weight: 500;
}

:root .itd-band h2 + p {
	margin-block-start: 0.6rem;
}

:root .itd-band__cols > .wp-block-column:last-child {
	flex: 0 0 auto;
}

:root .itd-band .wp-block-buttons {
	justify-content: flex-end;
}

:root .itd-band a:not( .wp-element-button ) {
	color: var( --wp--preset--color--base );
}

:root .itd-band a:focus-visible {
	outline-color: var( --wp--preset--color--base );
}

/* ----------------------------------------------------- inner page head */

:root .itd-pagehead {
	min-height: clamp( 300px, 26vw, 380px );
	padding-block: 4rem;
}

:root .itd-pagehead__text {
	max-width: 42rem;
	margin-inline: 0;
}

:root .itd-pagehead__text > h1 + p {
	margin-block-start: 1rem;
}

:root .itd-pagehead__text > .itd-lead {
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 84%, transparent );
}

/* ---------------------------------------------------------------- about */

:root .itd-story__text > p:not( .itd-eyebrow ) {
	color: var( --wp--preset--color--muted );
}

:root .itd-story__text > p.itd-story__quote {
	padding-left: 1.25rem;
	border-left: 3px solid var( --wp--preset--color--primary );
	color: var( --wp--preset--color--contrast );
	font-weight: 600;
}

:root .itd-values > .itd-values__row {
	margin-block-start: 2.75rem;
}

:root .itd-values__row > * {
	margin-block: 0;
}

:root .itd-value {
	padding: 2rem 1.75rem;
	border-top: 3px solid var( --wp--preset--color--primary );
	border-radius: 0 0 var( --itd-fit-radius ) var( --itd-fit-radius );
	background-color: var( --wp--preset--color--surface );
}

:root .itd-value > * {
	margin-block: 0;
}

:root .itd-value > * + * {
	margin-block-start: 0.75rem;
}

:root .itd-value__num {
	font-family: var( --itd-fit-display );
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
	color: var( --wp--preset--color--primary );
}

:root .itd-value h3 {
	font-size: 1.125rem;
}

:root .itd-value p:last-child,
:root .itd-space p {
	font-size: 0.9375rem;
	color: var( --wp--preset--color--muted );
}

:root .itd-spaces > .itd-spaces__row {
	margin-block-start: 2.75rem;
	gap: 1.5rem;
}

:root .itd-space > * {
	margin-block: 0;
}

:root .itd-space > * + * {
	margin-block-start: 1rem;
}

:root .itd-space > h3 {
	margin-block-start: 1.5rem;
	font-size: 1.125rem;
}

/* ------------------------------------------ classes and trainers: cards */

:root .itd-class-list > *,
:root .itd-trainer-list > * {
	margin-block: 0;
}

:root .itd-class:not( .itd-class--tile ),
:root .itd-trainer:not( .itd-trainer--tile ) {
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--tertiary );
}

:root .itd-class:not( .itd-class--tile ) > *,
:root .itd-trainer:not( .itd-trainer--tile ) > * {
	margin-block: 0;
}

:root .itd-class:not( .itd-class--tile ) > .itd-class__media,
:root .itd-trainer:not( .itd-trainer--tile ) > .itd-trainer__media {
	position: relative;
	flex: 0 0 40%;
	margin: 0;
	aspect-ratio: 4 / 5;
}

/* The photo fills its column without giving it a height: WordPress prints
   width/height on an imported image, and `height: 100%` inside a stretched
   flex item then resolved against the photo itself (a 1 500 px card, Task 5).
   The column is at least 4:5, as the drawing; a longer text stretches it. */
:root .itd-class:not( .itd-class--tile ) .itd-class__media img,
:root .itd-trainer:not( .itd-trainer--tile ) .itd-trainer__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

:root .itd-class:not( .itd-class--tile ) > .itd-class__body,
:root .itd-trainer:not( .itd-trainer--tile ) > .itd-trainer__body {
	flex: 1;
	min-width: 0;
	padding: 1.75rem 1.75rem 1.6rem;
}

:root .itd-class__body > *,
:root .itd-trainer__body > * {
	margin-block: 0;
}

:root .itd-class__body > * + *,
:root .itd-trainer__body > * + * {
	margin-block-start: 0.75rem;
}

:root .itd-class:not( .itd-class--tile ) .itd-class__name,
:root .itd-trainer:not( .itd-trainer--tile ) .itd-trainer__name {
	font-size: 1.375rem;
}

:root .itd-class__coach {
	font-size: 0.875rem;
	color: var( --wp--preset--color--contrast );
}

:root .itd-class__coach span {
	color: var( --wp--preset--color--muted );
}

:root .itd-class__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
}

:root .itd-class__facts > * {
	margin: 0;
}

/* Intensity: three bars and the word, HTML (wp:html), never an image. */
:root .itd-intensity {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
}

/* The orange accent marks ONLY the words "High intensity"; the bars stay lime. */
:root .itd-intensity--3 .itd-intensity__label {
	color: var( --wp--preset--color--accent );
}

:root .itd-intensity__bars {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 14px;
}

:root .itd-intensity__bars i {
	display: block;
	width: 6px;
	border-radius: 1px;
	background-color: var( --wp--preset--color--line );
}

:root .itd-intensity__bars i:nth-child( 1 ) {
	height: 6px;
}

:root .itd-intensity__bars i:nth-child( 2 ) {
	height: 10px;
}

:root .itd-intensity__bars i:nth-child( 3 ) {
	height: 14px;
}

:root .itd-intensity--1 i:nth-child( -n + 1 ),
:root .itd-intensity--2 i:nth-child( -n + 2 ),
:root .itd-intensity--3 i:nth-child( -n + 3 ) {
	background-color: var( --wp--preset--color--primary );
}

:root .itd-trainer__certs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

:root .itd-trainer__certs li {
	margin: 0;
	padding: 0.3rem 0.65rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--contrast );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

/* ------------------------------------------------------------ schedule
 *
 * P-20: one card per day, seven across at 1440, two on a tablet, one on a
 * phone; never a table that scrolls sideways.
 */

:root .itd-week {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 0.75rem;
}

:root .itd-week > * {
	margin-block: 0;
}

:root .itd-day {
	overflow: hidden;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--tertiary );
}

:root .itd-day > * {
	margin-block: 0;
}

:root .itd-day .itd-day__name {
	padding: 0.9rem 1rem;
	border-bottom: 2px solid var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--surface );
	font-size: 0.875rem;
	letter-spacing: 0.12em;
}

:root .itd-slots {
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .itd-slots li {
	margin: 0;
	padding: 0.9rem 1rem;
	line-height: 1.35;
}

:root .itd-slots li + li {
	border-top: 1px solid var( --wp--preset--color--line );
}

:root .itd-slot__time {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --wp--preset--color--primary );
	font-variant-numeric: tabular-nums;
}

:root .itd-slot__class {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
}

:root .itd-slot__coach {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	color: var( --wp--preset--color--muted );
}

/* A paragraph cannot be "wide" in the editor: the note takes the week's width here. */
:root .itd-schedule > .itd-schedule-note {
	max-width: var( --wp--style--global--wide-size );
	margin-block-start: 2.5rem;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var( --wp--preset--color--primary );
	border-radius: 0 var( --itd-fit-radius ) var( --itd-fit-radius ) 0;
	background-color: var( --wp--preset--color--tertiary );
}

/* ----------------------------------------------------------------- faq */

/* The list starts right under the heading, as the bozza draws it (its
   `h2 + *` gap loses to the `.wp-block-details` rule there): user's
   decision at the P-10 review, Task 5 fix round 1. */
:root .itd-faq > .wp-block-details {
	margin-block-start: 0;
	border-bottom: 1px solid var( --wp--preset--color--line );
}

:root .itd-faq > .wp-block-details:first-of-type {
	border-top: 1px solid var( --wp--preset--color--line );
}

:root .itd-faq .wp-block-details summary {
	position: relative;
	padding: 1.25rem 2.5rem 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
}

:root .itd-faq .wp-block-details summary:focus-visible {
	/* The theme rings links and buttons, not <summary>: the browser's own
	   blue ring measured 2.85:1 on `tertiary` (Task 5). The theme's ring. */
	outline: 2px solid var( --wp--preset--color--secondary );
	outline-offset: 2px;
}

:root .itd-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

:root .itd-faq .wp-block-details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0.25rem;
	transform: translateY( -50% );
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	color: var( --wp--preset--color--primary );
}

:root .itd-faq .wp-block-details[open] summary::after {
	content: "−";
}

:root .itd-faq .wp-block-details > p {
	margin: 0;
	padding: 0 2.5rem 1.35rem 0;
	color: var( --wp--preset--color--muted );
}

/* ------------------------------------------------------------- contact */

:root .itd-info-card {
	padding: 2rem 2rem 1.75rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --itd-fit-radius );
}

:root .itd-info-card > * {
	margin-block: 0;
}

:root .itd-info-card > * + * {
	margin-block-start: 0.6rem;
}

:root .itd-info-card > :is( p, ul ) + h2 {
	margin-block-start: 1.75rem;
}

:root .itd-info-card h2 {
	color: var( --wp--preset--color--primary );
}

:root .itd-info-card a {
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
}

:root .itd-info-card a:hover {
	color: var( --wp--preset--color--primary );
}

:root .itd-info-card .itd-info-card__phone {
	font-size: 1.375rem;
	font-weight: 600;
}

:root .itd-hours {
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	list-style: none;
}

:root .itd-hours li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.5rem;
	border-bottom: 1px solid var( --wp--preset--color--line );
}

:root .itd-hours li:last-child {
	border-bottom: 0;
}

:root .itd-hours li span:first-child {
	font-weight: 600;
}

:root .itd-hours li span:last-child {
	color: var( --wp--preset--color--muted );
	white-space: nowrap;
}

/*
 * D-8: Contact Form 7 on the Contact page, as the bozza drew its form: name
 * and email side by side, the rest full width. Contact Form 7 gives its
 * fields nothing to name but their paragraphs, so the first two are counted;
 * a customer's own form with other fields still lays out, one per row after
 * the first two. The colours of the fields are further down, for every form.
 */
:root .itd-contact-form .wpcf7-form {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.1rem 1rem;
}

:root .itd-contact-form .wpcf7-form > * {
	grid-column: 1 / -1;
	margin: 0;
}

:root .itd-contact-form .wpcf7-form > p:nth-of-type( -n + 2 ) {
	grid-column: auto;
}

:root .itd-contact-form .wpcf7-form > p:last-of-type {
	margin-top: 0.4rem;
}

:root .itd-checks {
	padding: 0;
	list-style: none;
}

:root .itd-checks li {
	position: relative;
	padding-left: 1.75rem;
	color: var( --wp--preset--color--muted );
}

:root .itd-checks li + li {
	margin-top: 0.55rem;
}

/* ------------------------------------------ shared furniture: form fields
 *
 * D-8, G-1, T-3, T-4, for every Contact Form 7 form, the search form (D-9)
 * and the comment form. The theme paints fields `base` with a `line` border
 * (1.47:1, under the 3:1 a field's edge needs), lime labels and lime typed
 * text, a pill `secondary` submit, the browser's grey placeholder (4.05:1 on
 * `base`) and the error tip in `#c0392b` (3.43:1). Here: `tertiary` fields,
 * a border mixed from `muted` (3.68:1 on base, 3.36 on tertiary), `contrast`
 * text and labels, a `muted` placeholder (7.59:1) and the error red lightened
 * toward `contrast` (6.5:1) - the red itself stays the only colour outside
 * the palette. The not-valid border keeps the theme's red: the field rule
 * below weighs exactly as much as the theme's `.wpcf7-not-valid` rule, which
 * is served later and wins.
 */

:root .wpcf7-form label {
	color: var( --wp--preset--color--contrast );
	font-size: 0.875rem;
	font-weight: 600;
}

:root .wpcf7-form input.wpcf7-form-control,
:root .wpcf7-form textarea.wpcf7-form-control,
:root .search-form .search-field,
:root .comment-form input[type="text"],
:root .comment-form input[type="email"],
:root .comment-form input[type="url"],
:root .comment-form textarea {
	min-height: 3.25rem;
	margin-top: 0.45rem;
	padding: 0.8rem 1rem;
	border: 1px solid var( --itd-fit-field-border );
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--tertiary );
	color: var( --wp--preset--color--contrast );
	font-weight: 500;
}

:root .wpcf7-form textarea.wpcf7-form-control {
	min-height: 9rem;
}

:root .search-form .search-field {
	margin-top: 0;
}

:root .wpcf7-form input.wpcf7-form-control:focus,
:root .wpcf7-form textarea.wpcf7-form-control:focus,
:root .search-form .search-field:focus,
:root .comment-form input:focus,
:root .comment-form textarea:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 1px;
	box-shadow: none;
}

:root .search-form .search-field::placeholder,
:root .wpcf7-form .wpcf7-form-control::placeholder,
:root .comment-form input::placeholder,
:root .comment-form textarea::placeholder {
	color: var( --wp--preset--color--muted );
	opacity: 1;
}

:root .wpcf7-form .wpcf7-not-valid-tip {
	color: color-mix( in srgb, #c0392b 60%, var( --wp--preset--color--contrast ) );
}

:root .wpcf7-form input.wpcf7-submit,
:root .search-form .search-submit,
:root .comment-form .form-submit input[type="submit"] {
	min-height: 3.25rem;
	margin-top: 0;
	padding: 0.9rem 1.75rem;
	border: 0;
	border-radius: var( --itd-fit-radius );
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

:root .wpcf7-form input.wpcf7-submit:hover,
:root .search-form .search-submit:hover,
:root .comment-form .form-submit input[type="submit"]:hover {
	background-color: var( --wp--preset--color--accent-2 );
	filter: none;
	transform: none;
}

/* D-9: the search and 404 titles in `contrast`, like every other page title. */
:root .page-title {
	color: var( --wp--preset--color--contrast );
}

/* --------------------------------------------- shared furniture: footer
 *
 * D-2, closing T-1 in the demo. The theme paints its footer `primary`, which
 * under this palette is a lime slab where its link colour, social hover and
 * focus ring drop to 1.25-1.73:1. The bozza's footer is `tertiary`: text
 * `contrast` 15.2, `muted` 6.9, headings and hovers `primary` 14.5, the
 * theme's `secondary` focus ring 9.8.
 */

:root .site-footer {
	border-top: 1px solid var( --wp--preset--color--line );
	background-color: var( --wp--preset--color--tertiary );
	color: var( --wp--preset--color--contrast );
	font-size: 0.9375rem;
}

:root .site-footer__heading {
	font-family: inherit; /* the body role, as the bozza */
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--primary );
}

:root .site-footer__col p,
:root .site-footer__copy,
:root .site-footer__hours li {
	color: var( --wp--preset--color--muted );
}

:root .site-footer__hours li span:first-child,
:root .site-footer__col a,
:root .site-footer__copy a,
:root .site-footer .footer-menu a {
	color: var( --wp--preset--color--contrast );
}

:root .site-footer__col a:hover,
:root .site-footer__copy a:hover,
:root .site-footer .footer-menu a:hover {
	color: var( --wp--preset--color--primary );
}

:root .site-footer__hours li,
:root .site-footer__inner {
	border-color: var( --wp--preset--color--line );
}

/* The circle is decorative (1.34:1); the `contrast` icon (15.2:1) names the control. */
:root .site-footer__social a {
	border-color: var( --wp--preset--color--line );
	color: var( --wp--preset--color--contrast );
}

:root .site-footer__social a:hover {
	border-color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

/* ------------------------------------------ the theme's own page hero
 *
 * T-2, in the demo. The theme builds `.itd-page-hero` (its starter pages and
 * the article header of a blog the customer may switch on, P-8) on `primary`:
 * under this palette a lime veil (text 2.2-2.6:1). This package never writes
 * the class (R-8); these two rules only give the theme's own hero a `base`
 * veil for the pages the customer adds.
 */

:root .itd-page-hero {
	background-color: var( --wp--preset--color--base );
}

:root .itd-page-hero::before {
	background: linear-gradient( 180deg,
		color-mix( in srgb, var( --wp--preset--color--base ) 72%, transparent ) 0%,
		color-mix( in srgb, var( --wp--preset--color--base ) 58%, transparent ) 100% );
}

/* --------------------------------------------------------------- tablet */

@media ( max-width: 1100px ) {
	:root .itd-class-list,
	:root .itd-trainer-list {
		grid-template-columns: 1fr;
	}

	/* P-20: two days across on a tablet. */
	:root .itd-week {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	:root .itd-stat {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		text-align: center;
	}
}

@media ( max-width: 1100px ) and ( min-width: 783px ) {
	:root .itd-why__cols {
		flex-direction: column;
		/* !important: core's align-items: normal !important. */
		align-items: stretch !important;
	}

	:root .itd-why__cols > .wp-block-column {
		/* !important: the editor writes the 38%/62% widths inline. */
		flex-basis: auto !important;
	}

	:root .itd-plan {
		padding-inline: 1.5rem;
	}
}

/* --------------------------------------------------------------- phones */

@media ( max-width: 782px ) {
	:root .itd-section {
		padding-block: 3.5rem;
	}

	:root .itd-hero {
		min-height: 600px;
		align-items: flex-end;
		padding-block: 3rem 2.5rem;
	}

	:root .itd-hero.wp-block-cover > .wp-block-cover__background.has-background-dim {
		background-image: linear-gradient( 0deg,
			color-mix( in srgb, var( --wp--preset--color--base ) 94%, transparent ) 0%,
			color-mix( in srgb, var( --wp--preset--color--base ) 70%, transparent ) 55%,
			color-mix( in srgb, var( --wp--preset--color--base ) 30%, transparent ) 100% );
	}

	:root .itd-hero__text .wp-block-button__link {
		padding: 0.95rem 1.15rem;
		font-size: 0.75rem;
		letter-spacing: 0.08em;
	}

	:root .itd-hero__text .wp-block-buttons {
		gap: 0.625rem;
	}

	/* Counters two by two. */
	:root .itd-stats {
		padding-block: 0.5rem;
	}

	:root .itd-stats__row {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	:root .itd-stat {
		padding: 1.5rem 0.75rem;
	}

	:root .itd-stat + .itd-stat {
		border-left: 0;
	}

	:root .itd-stat:nth-child( even ) {
		border-left: 1px solid var( --wp--preset--color--line );
	}

	:root .itd-stat:nth-child( n + 3 ) {
		border-top: 1px solid var( --wp--preset--color--line );
	}

	:root .itd-section-head {
		row-gap: 1rem;
	}

	/* R-13, as Restaurant: the class tiles become a row that scrolls with a finger, CSS only. */
	:root .itd-classes > .itd-classes__row {
		margin-block-start: 2rem;
		/* !important: the constrained layout's margin-inline: auto !important. */
		margin-inline: calc( -1 * var( --itd-fit-gutter ) ) !important;
	}

	:root .itd-classes__row {
		display: flex;
		gap: 1rem;
		max-width: none;
		padding: 0.25rem var( --itd-fit-gutter ) 1.25rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var( --itd-fit-gutter );
		scrollbar-width: thin;
	}

	:root .itd-classes__row > .itd-class--tile {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}

	:root .itd-features {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	:root .itd-why__cols {
		row-gap: 2rem;
	}

	:root .itd-coaches > .itd-coaches__row {
		margin-block-start: 2rem;
	}

	:root .itd-coaches__row {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 1.75rem 1rem;
	}

	:root .itd-trainer--tile .itd-trainer__name {
		font-size: 1rem;
	}

	:root .itd-trainer--tile .itd-trainer__role {
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
	}

	/* Plans in a column. */
	:root .itd-plans > .itd-plans__row {
		margin-block-start: 2.25rem;
	}

	:root .itd-plans__row {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	:root .itd-plan {
		padding: 2rem 1.5rem 1.5rem;
	}

	:root .itd-cta {
		min-height: 420px;
		padding-block: 3.5rem;
	}

	:root .itd-band {
		padding-block: 3rem;
	}

	:root .itd-band .wp-block-buttons {
		justify-content: flex-start;
	}

	:root .itd-band__cols {
		row-gap: 1.5rem;
	}

	:root .itd-pagehead {
		min-height: 280px;
		padding-block: 3rem;
	}

	:root .itd-pagehead.wp-block-cover > .wp-block-cover__background.has-background-dim {
		background-image: linear-gradient( 0deg,
			color-mix( in srgb, var( --wp--preset--color--base ) 92%, transparent ) 0%,
			color-mix( in srgb, var( --wp--preset--color--base ) 62%, transparent ) 100% );
	}

	:root .itd-gap-wide {
		row-gap: 2rem;
	}

	:root .itd-values > .itd-values__row {
		margin-block-start: 2rem;
	}

	:root .itd-values__row {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	:root .itd-spaces > .itd-spaces__row {
		row-gap: 2.25rem;
		margin-block-start: 2rem;
	}

	/* P-20: one day per row on a phone. */
	:root .itd-week {
		grid-template-columns: 1fr;
	}

	:root .itd-faq .wp-block-details summary {
		padding-right: 2rem;
	}

	:root .itd-faq .wp-block-details > p {
		padding-right: 0;
	}

	:root .itd-info-card {
		padding: 1.5rem 1.25rem;
	}

	:root .itd-contact-form .wpcf7-form {
		grid-template-columns: 1fr;
	}

	:root .itd-contact-form .wpcf7-form input.wpcf7-submit {
		width: 100%;
	}

	/* CF7's hidden spinner follows the full-width button and wrapped onto a
	   line of its own: 32px of empty band under the form (Task 5). Pinned
	   inside the button's right end instead, where it still shows while a
	   message is sending; left in the flow it would widen the page. */
	:root .itd-contact-form .wpcf7-form > p:last-of-type {
		position: relative;
	}

	:root .itd-contact-form .wpcf7-form .wpcf7-spinner {
		position: absolute;
		top: 50%;
		right: 1rem;
		margin: -12px 0 0;
	}

	/* D-2, as the bozza: copyright over the footer menu on a phone. */
	:root .site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Class and trainer cards: the photo on top when the row gets narrow. */
@media ( max-width: 600px ) {
	:root .itd-class:not( .itd-class--tile ),
	:root .itd-trainer:not( .itd-trainer--tile ) {
		flex-direction: column;
	}

	:root .itd-class:not( .itd-class--tile ) > .itd-class__media,
	:root .itd-trainer:not( .itd-trainer--tile ) > .itd-trainer__media {
		flex: none;
		aspect-ratio: auto;
	}

	:root .itd-class:not( .itd-class--tile ) .itd-class__media img,
	:root .itd-trainer:not( .itd-trainer--tile ) .itd-trainer__media img {
		position: static;
		height: auto;
		aspect-ratio: 4 / 5;
	}

	:root .itd-class:not( .itd-class--tile ) > .itd-class__body,
	:root .itd-trainer:not( .itd-trainer--tile ) > .itd-trainer__body {
		padding: 1.4rem 1.25rem 1.5rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	:root .itd-class--tile::after,
	:root .itd-more .itd-arrow-link::after,
	:root .wp-block-button .wp-block-button__link {
		transition: none;
	}
}

/*
 * P-26, the motion, only for visitors who have not asked for less of it
 * (every animation and every @keyframes of this file lives here; the content
 * test checks it).
 *
 * The entrance, once, on load: eyebrow, the two title lines, the lead and the
 * buttons rise in turn, about 1.1s in all. The start state exists only inside
 * the keyframes (`both` fills it in during each delay), so where no animation
 * runs nothing is ever hidden.
 *
 * Then the word, once (user decision, 2026-09-25: no pause control, so
 * WCAG 2.2.2 is met by stopping within five seconds): from 1.3s, RISE leaves,
 * LIFT, SWEAT and WIN each come up from below (0.3s), hold, and leave upwards
 * (0.3s), and RISE comes back and stays - 4.65s from the first move to the
 * last. RISE's keyframes begin and end shown; the other three begin and end
 * hidden, and `both` keeps them so before their delay and after their turn.
 * Longhands, not the shorthand: the content test reads them.
 */

@media ( prefers-reduced-motion: no-preference ) {
	:root .itd-hero__text > .itd-eyebrow,
	:root .itd-hero__line,
	:root .itd-hero__text > .itd-lead,
	:root .itd-hero__text > .wp-block-buttons {
		animation: itd-fit-enter 0.6s cubic-bezier( 0.2, 0.7, 0.2, 1 ) both;
	}

	:root .itd-hero__line {
		animation-delay: 0.12s;
	}

	:root .itd-hero__line--2 {
		animation-delay: 0.24s;
	}

	:root .itd-hero__text > .itd-lead {
		animation-delay: 0.38s;
	}

	:root .itd-hero__text > .wp-block-buttons {
		animation-delay: 0.5s;
	}

	:root .itd-rotator__word {
		animation-name: itd-fit-word;
		animation-duration: 1.35s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
		animation-fill-mode: both;
	}

	/* RISE: shown, out at 1.3s, back at 5.65s, 5.95s shown for good. */
	:root .itd-rotator__word--1 {
		animation-name: itd-fit-word-first;
		animation-duration: 4.65s;
		animation-delay: 1.3s;
	}

	:root .itd-rotator__word--2 {
		animation-delay: 1.6s;
	}

	:root .itd-rotator__word--3 {
		animation-delay: 2.95s;
	}

	:root .itd-rotator__word--4 {
		animation-delay: 4.3s;
	}

	@keyframes itd-fit-enter {
		from {
			opacity: 0;
			transform: translateY( 0.75rem );
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	/* LIFT, SWEAT, WIN: 0.3s in, 0.75s held, 0.3s out. */
	@keyframes itd-fit-word {
		0% {
			opacity: 0;
			transform: translateY( 0.3em );
		}

		22%,
		78% {
			opacity: 1;
			transform: none;
		}

		100% {
			opacity: 0;
			transform: translateY( -0.3em );
		}
	}

	/* RISE: 0.3s out, away while the others turn, 0.3s back in. */
	@keyframes itd-fit-word-first {
		0% {
			opacity: 1;
			transform: none;
		}

		6.5% {
			opacity: 0;
			transform: translateY( -0.3em );
		}

		7%,
		93.5% {
			opacity: 0;
			transform: translateY( 0.3em );
		}

		100% {
			opacity: 1;
			transform: none;
		}
	}
}