/*
 * Block styles and the few component classes the patterns share.
 *
 * Loaded on the front end and inside the editor canvas from one file, so what
 * the client edits is what the visitor gets. Every value is a theme.json
 * token; logical properties only, per docs/I18N-RTL.md.
 */

/* ── Eyebrow ──────────────────────────────────────────────────────────────
   The small tracked label above a section heading. A paragraph, not a
   heading, so it never breaks the heading order for a screen reader.
   spring-deep, not spring: the mark green reads at 2.2–2.5:1 on white and
   aqua-tint, well under the 4.5:1 AA floor this text needs. spring-deep is
   the same hue, dark enough to pass, and already in the palette for exactly
   this on-tint-text role. */
/* The file draws the eyebrow in `--color-accent-2` (#0abc8a) on a white ground
   and `--color-accent-2-800` (#044f3c) on its two tinted bands. Both design
   files agree, so both colours are stated here.

   ACCESSIBILITY, on the record: #0abc8a measures 2.45:1 on white at 13px bold,
   which does not clear the 4.5:1 AA floor. This was previously substituted for
   spring-deep and has been put back at the client's explicit direction. To undo
   it, change the one declaration below back to `--wp--preset--color--spring-deep`
   — the band rule underneath is already that colour and needs no change.
   See docs/DESIGN-DEVIATIONS.md. */
.is-style-eyebrow {
	color: var(--wp--preset--color--spring);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* The two bands the file takes the eyebrow to accent-2-800 on: "How it works"
   on the aqua tint and "The fine print" on the cream. Named individually rather
   than by `.codigo-lavie-band`, because the footer's lead capture is a band too
   and the file draws its eyebrow in accent-2 like the rest.
   8.72:1 on the aqua ground, 8.80:1 on the cream. */
.codigo-how .is-style-eyebrow,
.codigo-fineprint .is-style-eyebrow {
	color: var(--wp--preset--color--spring-deep);
}

/* ── Pill chip ───────────────────────────────────────────────────────────
   Badges: the hero credential, the card category, "Flagship". Sits on
   photography as often as on white, hence the veil rather than a flat fill. */
.is-style-pill {
	background-color: var(--wp--custom--veil--strong);
	border: 1px solid var(--wp--custom--divider);
	border-radius: var(--wp--custom--radius--pill);
	/* The veil is always light, so the ink is stated rather than inherited —
	   a cover sets its own text colour to white and would erase the label. */
	color: var(--wp--preset--color--ink);
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	inline-size: fit-content;
	line-height: 1.3;
	padding: 9px 17px;
}

.is-style-pill.has-background {
	border-color: transparent;
}

/* ── Ink helper ──────────────────────────────────────────────────────────
   Body copy held back from the running ink.

   This is a class rather than a colour set on the block for a reason worth
   knowing: WordPress escapes `--` to `u002du002d` when it serialises a block's
   attributes, and prints that back verbatim into the inline style. A
   `var(--wp--custom--…)` stored in a block attribute therefore survives inside
   a pattern file but breaks the moment the page holding it is saved, and the
   text falls back to full-strength ink. Presets are safe — they serialise as
   `var:preset|…` — but the custom ramp has no such form, so it lives here. */
.codigo-lavie-ink-muted {
	color: var(--wp--custom--ink--muted);
}

/* ── Fine print ─────────────────────────────────────────────────────────── */
.is-style-note {
	color: var(--wp--custom--ink--soft);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.55;
	max-inline-size: 56ch;
}

/* ── Divider ──────────────────────────────────────────────────────────
   Every rule the design draws — under the hero stats, across a team card, above
   the phone routes — is one hairline at the divider tint. Core builds its
   separator out of two borders, a block-start and a block-end on an element
   with no height, so what actually lands on the page is a 2px band of a colour
   chosen to be seen once at 1px. Doubled, a 13% tint reads as a smudge rather
   than a line. Only the block-end is kept, which is the edge core's own
   `is-style-wide` sizes.

   Not scoped to a section: an editor dropping a separator anywhere owes the
   page the same hairline. */
.wp-block-separator:not(.is-style-dots) {
	border-block-start: 0;
	border-block-end-width: 1px;
}

/* ── Stat figure ─────────────────────────────────────────────────────────
   A number set in the display face: hero stats, membership figures. */
.is-style-stat {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: 1;
}

/* ── Card ────────────────────────────────────────────────────────────────
   Surface only. Padding stays on the block so a card can be flush when it
   carries an image to its own edge. */
.is-style-card {
	background-color: var(--wp--preset--color--base);
	block-size: 100%;
	border: 1px solid var(--wp--custom--divider);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.is-style-card:hover,
.is-style-card:focus-within {
	border-color: var(--wp--preset--color--aqua);
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-5px);
}

/* Images inside a clipped card must not round twice. */
.is-style-card > figure.wp-block-post-featured-image img,
.is-style-card > figure.wp-block-image img {
	border-radius: 0;
	display: block;
	inline-size: 100%;
}

/* ── Shell panel ─────────────────────────────────────────────────────────
   The large rounded blocks: the plan band, the Cherry band, membership. */
.is-style-shell {
	border-radius: var(--wp--custom--radius--shell);
	overflow: hidden;
	position: relative;
}

/* ── Tick list ─────────────────────────────────────────────────────────── */
.is-style-check {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-check > li {
	line-height: 1.5;
	padding-inline-start: 1.9em;
	position: relative;
}

.is-style-check > li::before {
	color: var(--wp--preset--color--spring);
	content: "✓";
	font-weight: 700;
	inset-inline-start: 0;
	position: absolute;
}

/* ── Numbered steps ──────────────────────────────────────────────────────
   The three-step explainer beside the enquiry form. Counter rather than an
   ordered-list marker, because the marker cannot be a filled aqua disc. */
.is-style-steps {
	counter-reset: codigo-step;
	list-style: none;
	padding-inline-start: 0;
}

.is-style-steps > li {
	counter-increment: codigo-step;
	line-height: 1.55;
	min-block-size: 30px;
	padding-inline-start: 44px;
	position: relative;
}

/* The design's 14px between steps. core/list supports margin and padding but
   not blockGap, so the gap the pattern states in the sidebar is dropped on
   render and the rows close up to their own leading — which reads as one
   paragraph with numbers in it rather than three steps. Stated on the
   following sibling so the list keeps whatever margin sits above it. */
.is-style-steps > li + li {
	margin-block-start: 14px;
}

.is-style-steps > li::before {
	align-items: center;
	background-color: var(--wp--preset--color--aqua);
	block-size: 30px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	content: counter(codigo-step);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	inline-size: 30px;
	inset-block-start: 0;
	inset-inline-start: 0;
	justify-content: center;
	position: absolute;
}

/* ── Pulled quote ─────────────────────────────────────────────────────────
   The review quote. A flat 20px rather than the fluid lede: the design sets
   this one size and holds it at every width, and `flex: 1` lets it absorb the
   slack in the card so the attribution lands on the bottom edge of all three
   tiles however long the quotes run. The excerpt block wraps its own
   paragraph, so the growth is on the wrapper and the margin comes off the
   paragraph inside it. */
.is-style-quote {
	flex: 1;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	line-height: 1.45;
	margin-block: 0;
	text-wrap: pretty;
}

.is-style-quote > .wp-block-post-excerpt__excerpt {
	margin-block: 0;
}

/* ── Reviews ─────────────────────────────────────────────────────────────
   The design's review tile is bare cream: no border, no shadow, and nothing
   on hover. `.is-style-card` carries all three for the sections that do want
   them, so the row unwinds them here rather than the shared style losing
   them for everyone.

   The tile is a flex column because the design pins the attribution to the
   bottom edge with `flex: 1` on the quote, and a flow layout cannot say that.
   Its own block gap would then stack on top of the flex gap, so the children
   give their margins up. */
.codigo-lavie-reviews .is-style-card {
	border-radius: calc(var(--wp--custom--radius--lg) * 1.15);
	border-width: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: none;
}

.codigo-lavie-reviews .is-style-card:hover,
.codigo-lavie-reviews .is-style-card:focus-within {
	border-color: transparent;
	box-shadow: none;
	transform: none;
}

.codigo-lavie-reviews .is-style-card > * {
	margin-block: 0;
}

/* The star glyphs sit a half-step above the small preset — the design states
   15px here — and take their colour from the stylesheet rather than an inline
   style, so a page holding older stored markup still reads gold. */
.codigo-lavie-reviews__stars {
	color: var(--wp--custom--star);
	font-size: 15px;
}

.codigo-lavie-reviews__meta {
	/* ink--half measured 3.22:1 on white — under AA; ink--soft clears it. */
	color: var(--wp--custom--ink--soft);
}

/* Core's grid support emits auto-fill, which holds empty tracks open once the
   row has fewer cards than the width allows. The design fits what it has. */
.codigo-lavie-reviews .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(292px, 100%), 1fr));
}

/* The heading breaks at 22ch here, half the shared measure: the design wants
   this one over two lines above the row. */
.codigo-lavie-reviews .codigo-lavie-measure {
	line-height: 1.08;
	max-inline-size: min(22ch, 100%);
}

/* The Google line is a step larger and lighter than the fine print elsewhere,
   and sits closer to the row than the section's own block gap allows. */
.codigo-lavie-reviews .is-style-note {
	/* ink--half measured 3.22:1 on white — under AA; ink--soft clears it. */
	color: var(--wp--custom--ink--soft);
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: var(--wp--preset--spacing--30);
}

.codigo-lavie-reviews .is-style-note a {
	border-block-end: 1.5px solid var(--wp--preset--color--aqua);
	font-weight: 600;
}

/* Tablet: the shared swipe row turns the grid into a snap row at this width.
   The design runs it edge to edge — the negative inline margin cancels the
   section's padding, the matching inline padding puts the first card back on
   the text column — and shows a little over two cards, not the shared clamp's
   one and a bit. */
@media (max-width: 1024px) {
	.codigo-lavie-reviews .is-style-swipe {
		margin-inline: calc(var(--wp--custom--shell-pad) * -1);
		padding-block: 2px 10px;
		padding-inline: var(--wp--custom--shell-pad);
		scroll-padding-inline-start: var(--wp--custom--shell-pad);
	}

	.codigo-lavie-reviews .is-style-swipe > li {
		flex: 0 0 47%;
	}
}

/* Phone: one card and the edge of the next. The design tightens its --space-6
   at this width, which is the tile's padding and the heading's bottom margin;
   the padding is an inline block support, so it takes the weight to move. */
@media (max-width: 640px) {
	.codigo-lavie-reviews .is-style-card {
		padding: var(--wp--preset--spacing--40) !important;
	}

	/* The heading's bottom margin is the row's block gap, and it steps down
	   with the tile padding. */
	.codigo-lavie-reviews .wp-block-query {
		margin-block-start: var(--wp--preset--spacing--40);
	}

	.codigo-lavie-reviews .is-style-swipe > li {
		flex: 0 0 84%;
	}
}

/* ── Two-up split ────────────────────────────────────────────────────────
   Grid columnCount cannot express an fr ratio, so the tracks live here. The
   design leads with the wider column and collapses to one at the tablet
   breakpoint — the same rhythm the footer uses. */
.is-style-split {
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
}

@media (max-width: 1024px) {
	.is-style-split {
		grid-template-columns: 1fr;
	}
}

/* ── Membership ───────────────────────────────────────────────────────────
   The design leads this one 1.25/0.75 rather than the site's 1.1/0.9, and it
   does not align the two tracks to the top: the notices column takes the whole
   height of the Society panel beside it.

   The gaps live here rather than on the block because the style engine drops a
   blockGap holding a raw var() — it reads the bracket as unsafe — and falls
   back to core's 0.5em, which is half what the design draws. */
.codigo-lavie-membership {
	align-items: stretch;
	gap: var(--wp--custom--gap);
	grid-template-columns: 1.25fr 0.75fr;
}

@media (max-width: 1024px) {
	.codigo-lavie-membership {
		grid-template-columns: 1fr;
	}
}

/* The white disc bleeding out of the panel's bottom trailing corner. The shell
   style already clips it. Decorative, so a pseudo-element rather than markup an
   editor could delete by accident — and inset-inline so it mirrors in RTL. */
.codigo-lavie-membership__panel::before {
	background-color: var(--wp--preset--color--base);
	block-size: 220px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: 220px;
	inset-block-end: -60px;
	inset-inline-end: -40px;
	opacity: 0.4;
	pointer-events: none;
	position: absolute;
}

/* Lifts the panel's own content clear of that disc. */
.codigo-lavie-membership__panel > * {
	position: relative;
	z-index: 1;
}

.codigo-lavie-membership__stack {
	gap: var(--wp--custom--gap);
}

/* The panel's own type. The design runs a shade wider than the shared heading
   step here — 42px against 40px — and holds the headline to 24ch so it breaks
   where the comp breaks it. */
.codigo-lavie-membership__panel > h2 {
	font-size: clamp(28px, 3.3vw, 42px);
	max-inline-size: 24ch;
}

.codigo-lavie-membership__lede {
	color: var(--wp--custom--ink--strong);
	font-size: 17.5px;
	line-height: 1.6;
	max-inline-size: 46ch;
	text-wrap: pretty;
}

/* The three figures are a flat 25px in the design, not the fluid heading step
   the shared stat style rides — these sit in fixed-width tiles, so there is
   nothing for them to scale against. Scoped, because the hero uses the same
   style at a size that should stay fluid. */
.codigo-lavie-membership .is-style-stat {
	font-size: 25px;
}

.codigo-lavie-membership__eyebrow {
	color: var(--wp--custom--ink--soft);
}

.codigo-lavie-membership__stat {
	background-color: var(--wp--custom--veil--strong);
	border-radius: var(--wp--custom--radius--md);
}

.codigo-lavie-membership__statlabel {
	color: var(--wp--custom--ink--quiet);
	font-size: 14px;
	line-height: 1.4;
}

.codigo-lavie-membership .codigo-lavie-membership__cta .wp-block-button__link {
	padding: 16px 28px;
}

/* Flat 26px on the two notices, for the same reason as the figures: the column
   they sit in is a fixed share of the grid. */
.codigo-lavie-membership__note > h3 {
	font-size: 26px;
	line-height: 1.15;
}

/* The two notices divide the panel's height between them, so the second one
   ends level with the panel rather than leaving a gap under it. Each is a
   column in its own right, so its content still flows from the top however
   tall the card grows — no fixed or minimum height anywhere in the section. */
.codigo-lavie-membership__note {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* Stacked, the column has no height of its own to share out, so the notices go
   back to sizing to their content. */
@media (max-width: 1024px) {
	.codigo-lavie-membership__note {
		flex: 0 1 auto;
	}
}

/* The design rules these two links rather than underlining them: a 2px edge in
   the running ink, or in the spring green on the survivors' notice. */
.codigo-lavie-rule-link {
	font-size: 15.5px;
}

.codigo-lavie-rule-link > a {
	border-block-end: 2px solid currentColor;
	padding-block-end: 3px;
}

/* The arrow used to be baked into the translated string itself, which a
   translator can't safely flip per-locale and which never mirrored under
   RTL the way every other directional mark on the page does. Drawn here
   instead, the same idiom as the marquee's separator and the tour's play
   glyph: punctuation, not content, flipped in style-rtl.css. */
.codigo-lavie-rule-link > a::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 6px;
}

.codigo-lavie-rule-link.is-accent > a {
	border-block-end-color: var(--wp--preset--color--spring);
}

/* ── Plan band ───────────────────────────────────────────────────────────
   One of the two splits the design inverts: the finder card is the wider
   track, so eight answer tiles sit two-up without wrapping mid-word. */
.codigo-lavie-plan {
	grid-template-columns: 0.92fr 1.08fr;
	/* Lifts the two columns clear of the decorative disc below. */
	position: relative;
	z-index: 1;
}

@media (max-width: 1024px) {
	.codigo-lavie-plan {
		grid-template-columns: 1fr;
	}
}

/* ── Enquiry split ───────────────────────────────────────────────────────
   The other one. Here the form is the wider track: five controls at the
   design's padding need the room more than a paragraph capped at 46ch does,
   and the card's shell radius reads as a shape rather than a rounded
   rectangle only above a certain width.

   It does not collapse with `is-style-split` alone: both rules are one class
   selector deep, so the tie goes to whichever comes later in the file — this
   one — and its own 0.95/1.05 track kept winning under 1024px instead of
   `is-style-split`'s 1fr. Restating the collapse here, after it, is what
   actually puts the copy above the form — the order the design stacks them
   in — rather than leaving the two columns squeezed edge to edge on tablet. */
.codigo-lavie-enquiry {
	grid-template-columns: 0.95fr 1.05fr;
}

@media (max-width: 1024px) {
	.codigo-lavie-enquiry {
		grid-template-columns: 1fr;
	}
}

/* The aqua disc bleeding out of the shell's top outer corner. Decorative, so
   it is a pseudo-element rather than markup an editor could delete by
   accident — and it mirrors with the text direction. */
.codigo-lavie-plan-shell::before {
	background-color: var(--wp--preset--color--aqua);
	block-size: 280px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: 280px;
	inset-block-start: -70px;
	inset-inline-end: -70px;
	opacity: 0.4;
	pointer-events: none;
	position: absolute;
}

/* ── Cherry band ─────────────────────────────────────────────────────────
   The financing section, and the only place the partner palette is allowed.
   `is-style-split` leads 1.1/0.9 and aligns to the top; the design draws this
   one band a shade evener and centres the two columns against each other. */
.codigo-lavie-cherry__grid {
	align-items: center;
	grid-template-columns: 1.05fr 0.95fr;
	/* Lifts both columns clear of the decorative disc below. */
	position: relative;
	z-index: 1;
}

@media (max-width: 1024px) {
	.codigo-lavie-cherry__grid {
		grid-template-columns: 1fr;
	}
}

/* The partner disc, out of the shell's top leading corner. Same reasoning as
   the plan band's: a pseudo-element, so an editor cannot delete it by
   accident, and inset-inline so it mirrors rather than mis-mirrors in RTL. */
.codigo-lavie-cherry::before {
	background-color: var(--wp--preset--color--cherry-green);
	block-size: 260px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: 260px;
	inset-block-start: -90px;
	inset-inline-start: -70px;
	opacity: 0.07;
	pointer-events: none;
	position: absolute;
}

/* The eyebrow is spring green everywhere else on the page. Inside the partner
   band there is no La Vie green, so it drops to the partner ink. */
.codigo-lavie-cherry .is-style-eyebrow {
	color: var(--wp--custom--on-cherry--soft);
}

/* Same swap for the tick glyph. */
.codigo-lavie-cherry .is-style-check > li::before {
	color: var(--wp--preset--color--cherry-green);
}

/* The design sets this band's heading a step under the site h2 — 46px against
   50px — and tightens the leading to match. */
.codigo-lavie-cherry__title {
	line-height: 1.08;
	max-inline-size: min(17ch, 100%);
}

/* The lock-up the partner's brand guidance requires: their mark on white, at a
   fixed size, never recoloured. The box is the pattern's; the mark inside it is
   an ordinary image an editor replaces with the official asset. */
.codigo-lavie-cherry__logo {
	align-items: center;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--cherry-line);
	border-radius: var(--wp--custom--radius--sm);
	block-size: 52px;
	display: flex;
	flex-shrink: 0;
	inline-size: 176px;
	justify-content: center;
	padding: 8px 14px;
}

/* The mark is centred in the box rather than stretched to fill it. Setting the
   image to 100% of both axes only centres a wordmark whose proportions happen
   to match the 148x36 well left inside the padding, and it overrides a width
   the client set deliberately — core writes an editor's resize onto the image
   itself, which outranks anything here. So the size is left alone and only
   constrained, and the mark is centred instead: auto inline margins on the
   image, which hold whatever width it ends up with in the middle of the
   figure, and the flex centring above, which does the same for the figure in
   the box. The figure's own display is core's to choose — an editor who
   centres or resizes the image changes it — and auto margins do not care
   which one it picked. */
.codigo-lavie-cherry__logo figure {
	block-size: 100%;
	inline-size: 100%;
	margin: 0;
	text-align: center;
}

.codigo-lavie-cherry__logo img {
	block-size: auto;
	display: block;
	inline-size: auto;
	margin-inline: auto;
	max-block-size: 100%;
	max-inline-size: 100%;
	object-fit: contain;
}

/* The one button on the site that is not set in the heading face. It belongs to
   the partner's brand, not La Vie's, and the design sets it in the body face at
   700 to say so.

   Only the face. The fill is Penn Blue — the same ink every other call to
   action on the page carries, so the one control in this band that starts an
   application does not read as the partner's own widget — and that is
   theme.json's `elements.button`, hover and press included, so the block sets
   no colour of its own and nothing about it is restated here. A preset colour
   class paints at !important; a button carrying one would be a flat fill with
   no pointer states, which is what the partner green had become. */
.codigo-lavie-cherry__cta .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
}

/* ── Swipe row ───────────────────────────────────────────────────────────
   Reviews and journal become horizontal snap rows on tablet and below.
   The team row is deliberately not one: the design's responsive sheet turns
   the team cards horizontal instead — see the provider block below. */
@media (max-width: 1024px) {
	.is-style-swipe {
		-webkit-overflow-scrolling: touch;
		display: flex !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.is-style-swipe::-webkit-scrollbar {
		display: none;
	}

	.is-style-swipe > * {
		flex: 0 0 clamp(240px, 74vw, 320px);
		scroll-snap-align: start;
	}
}

/* ── Measures ────────────────────────────────────────────────────────────
   Line-length caps the design sets per block. A constrained layout would do
   it, but core implements that with margin-left/right and !important, which
   pins the column in RTL. */
.codigo-lavie-measure {
	max-inline-size: min(46ch, 100%);
}

/* The provider's two paragraphs; the design sets these a few characters
   longer than the 46ch body measure. */
.codigo-lavie-measure-wide {
	max-inline-size: min(54ch, 100%);
}

/* Display headings only: at 92px, 15ch is already a full line. */
.codigo-lavie-measure-tight {
	max-inline-size: min(15ch, 100%);
}

/* ── Provider portrait ───────────────────────────────────────────────────
   The arch: square shoulders, deeply rounded foot. Written with logical
   radius properties so the arch does not mirror into a mistake in RTL. */
.codigo-lavie-provider__portrait img {
	border-end-end-radius: 240px;
	border-end-start-radius: 240px;
	border-start-end-radius: var(--wp--custom--radius--shell);
	border-start-start-radius: var(--wp--custom--radius--shell);
	box-shadow: var(--wp--preset--shadow--lg);
	display: block;
}

/* The portrait fills its track — the 0.82fr below is what keeps the arch
   from reading as a keyhole, so no width cap is needed here. `z-index` is
   what makes this the stacking context the disc resolves inside. */
.codigo-lavie-provider > .codigo-lavie-provider__portrait {
	margin-block: 0;
	position: relative;
	z-index: 0;
}

/* ── Header shell ────────────────────────────────────────────────────────
   The bar is a frosted veil over whatever scrolls under it, which rules out
   a background colour attribute twice over: theme.json has no 93% white in
   the palette, and core prints `.has-*-background-color` with `!important`,
   so a CSS override would never land. The part therefore ships with no
   background support and the fill is drawn here — in blocks.css rather than
   style.css so the site editor shows the same bar the visitor gets.

   The blur sits on a pseudo-element, not on the header. `backdrop-filter`
   makes an element the containing block for every `position: fixed`
   descendant, and the navigation overlay is one: on the header it clipped
   the whole mobile menu to the height of the bar. */
.codigo-lavie-header {
	background-color: transparent;
}

.codigo-lavie-header::before {
	backdrop-filter: blur(16px);
	background-color: var(--wp--custom--veil--header);
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

/* ── Mobile dock ─────────────────────────────────────────────────────────
   The design's permanent bottom bar: Call and Book, pinned under everything
   a phone visitor scrolls past. It ships in the footer part so every template
   carries it, stays off-screen above 640px exactly like the design's own
   `#lv-dock`, and sits below the full-screen nav overlay (100000) but above
   the sticky header (60).

   `env(safe-area-inset-bottom)` is additive to the design's 10px, not a
   replacement for it — a device with no notch still gets the 10px, one with
   one gets both. The matching block-end padding on the body lives beside the
   phone breakpoint's other rules in style.css, not here, so the two stay next
   to the rest of that cascade. */
.codigo-lavie-dock {
	background-color: var(--wp--custom--veil--play);
	backdrop-filter: blur(16px);
	block-size: auto;
	/* `!important`: core's own `.is-layout-flex` sets `display: flex` at the
	   same specificity as a single class selector, and which of the two wins
	   at a tie is a question of stylesheet order this rule should not have to
	   depend on. */
	display: none !important;
	inset-block-end: 0;
	inset-inline: 0;
	padding-block-end: calc(10px + env(safe-area-inset-bottom));
	padding-inline: 14px;
	position: fixed;
	z-index: 90;
}

@media (max-width: 640px) {
	.codigo-lavie-dock {
		display: flex !important;
	}
}

/* On a treatment page and on a treatment-area category page the design draws
   the dock at every width, as a centred pill rather than the full-width bar it
   becomes on the phone — in the file it is one element outside the mockup's
   page switcher, so both templates it covers get it. The homepage file draws a
   different floating element in that corner, so this stays on those two rather
   than being turned on for the site. */
body.single-codigo_treatment .codigo-lavie-dock,
body.tax-codigo_area .codigo-lavie-dock {
	background-color: var(--wp--custom--veil--play);
	border: 1px solid var(--wp--custom--divider);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--preset--shadow--lg);
	display: flex !important;
	/* Centred with `inset-inline: 0` and an auto inline margin rather than the
	   design's `inset-inline-start: 50%` plus a translate. The translate is a
	   physical-axis move: in Arabic the inline start becomes the right edge but
	   `translateX(-50%)` still pulls left, and the pill lands off-centre. This
	   pair mirrors correctly because neither half has a direction. */
	inline-size: fit-content;
	inset-block-end: 22px;
	inset-inline: 0;
	margin-inline: auto;
	max-inline-size: calc(100% - 28px);
	padding: 10px 12px;
	z-index: 210;
}

@media (max-width: 640px) {
	/* Back to the design's full-width bar, with the safe-area inset added to
	   its 10px rather than replacing it. */
	body.single-codigo_treatment .codigo-lavie-dock,
	body.tax-codigo_area .codigo-lavie-dock {
		border-inline: 0;
		border-radius: 0;
		box-shadow: none;
		inline-size: auto;
		inset-block-end: 0;
		inset-inline: 0;
		margin-inline: 0;
		max-inline-size: none;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		z-index: 90;
	}
}

/* The financing link the file puts at the head of the dock. It is dropped on
   the phone, where the file turns the dock into a two-control bar. */
.codigo-lavie-dock__plan {
	font-size: 14.5px;
	font-weight: 700;
	margin-block: 0;
	white-space: nowrap;
}

/* The file draws this as text with 14px of inline padding and no height of its
   own, which is an 18px target. The block padding takes it to 44 and the
   negative margin puts the row back at the height the file draws — the same
   pair the breadcrumb links use. */
.codigo-lavie-dock__plan a {
	display: inline-block;
	margin-block: -13px;
	padding: 13px 14px;
}

@media (max-width: 640px) {
	.codigo-lavie-dock__plan {
		display: none;
	}
}

.codigo-lavie-dock__call {
	align-items: center;
	block-size: 50px;
	/* The file's `* { box-sizing: border-box }` makes its 50px the whole disc,
	   edge included. Stated here so the 1.5px border does not add to it. */
	box-sizing: border-box;
	border: 1.5px solid var(--wp--custom--divider);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-shrink: 0;
	inline-size: 50px;
	justify-content: center;
}

.codigo-lavie-dock__book {
	flex: 1;
}

/* The single button inside does not grow to fill a flex row on its own —
   only the row itself does that against the call disc beside it. */
.codigo-lavie-dock__book .wp-block-button {
	flex: 1;
}

.codigo-lavie-dock__book .wp-block-button__link {
	display: flex;
	font-size: 16px;
	justify-content: center;
	padding: 16px 26px;
}

/* The file sets the header nav at 15.5px and both header buttons at 15px. Both
   carried the `small` preset, which is 14.5px, and a preset class ships at
   !important — so the presets come off in parts/header.html and the sizes are
   stated here. */
:root .codigo-lavie-header__actions .wp-block-button__link,
:root .codigo-lavie-header__actions .wp-block-button.is-style-outline > .wp-block-button__link {
	font-size: 15px;
}

.codigo-lavie-header .wp-block-navigation {
	font-size: 15.5px;
}

/* The logo is 54px in both files; the block was emitting its own 52. */
.codigo-lavie-header .custom-logo {
	block-size: 54px;
	inline-size: auto;
}

/* The bar is 13.5px in both design files; the `x-small` preset it was using is
   13px, and a preset class ships at !important so the half pixel was
   unreachable from the block. */
.codigo-lavie-announcement {
	font-size: 13.5px;
}

/* ── Announcement bar ────────────────────────────────────────────────────
   The design sets the three notices apart with a faint middot. Punctuation,
   not content, so it is drawn here and stays out of the accessible name —
   the same treatment the marquee gets. The trailing margin stands in for the
   flex gap the design's separate spans had on both sides. */
.codigo-lavie-announcement > * + *::before {
	content: "·";
	margin-inline-end: var(--wp--preset--spacing--30);
	opacity: 0.35;
}

/* The location closes the line at a lower weight than the offer that opens
   it, so it reads as the aside it is. */
.codigo-lavie-announcement > :last-child {
	opacity: 0.7;
}

/* On phones the three notices wrap to their own lines, and the flex gap that
   spaces them across one line turns into a tall stack. Close the rows up.
   The block's 11px padding is an inline style, so only !important reaches it. */
@media (max-width: 640px) {
	.codigo-lavie-announcement.wp-block-group {
		line-height: 1.35;
		padding-block: 6px !important;
		row-gap: 2px;
	}
}

/* ── Hero ────────────────────────────────────────────────────────────────
   The photograph runs edge to edge; the words sit in the page column. Core
   zeroes the inner container's global padding whenever a full-width cover is
   itself inside full-width post content, which pulls the headline to the
   viewport edge, so the column is rebuilt here. The cover carries no content
   position: core shrink-wraps the inner container the moment one is set, and
   the design wants a full-width container aligned to the foot. Height is the
   viewport less the header — a calc no block attribute can express, so the
   cover ships without a min-height of its own. */
.wp-block-cover.codigo-lavie-hero {
	align-items: flex-end;
	min-block-size: calc(100vh - 120px);
	padding-inline: 0;
}

/* The design measures the 1280px box; theme.json measures the column inside
   it. Adding the shell pad back gets the same edge from the other side. */
.wp-block-cover.codigo-lavie-hero .wp-block-cover__inner-container {
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: calc(var(--wp--style--global--content-size) + var(--wp--custom--shell-pad) * 2);
	padding-inline: var(--wp--custom--shell-pad);
}

/* Four figures spread across the whole column. Core's grid support auto-fills
   fixed tracks, which parks all four at the start of a 1212px row; the design
   auto-fits them, so the tracks grow to share the width. */
.wp-block-group.codigo-lavie-hero__stats {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* The credential chip carries a spring dot in the design. Decorative, so it
   is drawn rather than written, and left out of the accessible name. */
.codigo-lavie-hero .is-style-pill::before {
	background-color: var(--wp--preset--color--spring);
	block-size: 7px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	display: inline-block;
	inline-size: 7px;
	margin-inline-end: 9px;
}

@media (max-width: 1024px) {
	.wp-block-cover.codigo-lavie-hero {
		min-block-size: 76vh;
	}
}

/* On a phone the scrim turns vertical and the hero sizes to its content. */
@media (max-width: 640px) {
	.wp-block-cover.codigo-lavie-hero {
		min-block-size: 0;
	}

	.codigo-lavie-hero .wp-block-cover__background {
		/* Preset gradient classes ship !important, so the swap must match it. */
		background-image: var(--wp--preset--gradient--hero-scrim-vertical) !important;
	}

	/* Four figures will not sit on one line at this width; the design pairs
	   them rather than letting the grid fall to a single column. */
	.wp-block-group.codigo-lavie-hero__stats {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Marquee ─────────────────────────────────────────────────────────────
   Two identical tracks scrolling in step: as the first clears the viewport
   the second is already filling it, so the loop has no seam. That is why the
   pattern carries the phrases twice — edit both halves or the loop stutters.
   The reduced-motion block in style.css zeroes the duration, which parks the
   strip at its start position rather than mid-scroll. */
.codigo-lavie-marquee {
	display: flex;
	overflow: hidden;
}

.codigo-lavie-marquee__track {
	animation: codigo-lavie-marquee 38s linear infinite;
	flex-shrink: 0;
	inline-size: max-content;
	/* The gap before the next copy starts. A block padding attribute would be
	   physical and land on the wrong edge in RTL, so it lives here. */
	padding-inline-end: var(--wp--preset--spacing--50);
}

/* The design separates the phrases with a faint bullet. Punctuation, not
   content, so it is drawn here and left out of the accessible name.

   Drawn as a disc rather than set as a •. The phrases are display type at
   `heading-l` on a 1 leading; a bullet glyph sits on their baseline, which
   parks it near the foot of a line box three times its own size and reads as
   a dropped speck rather than a separator. A box can be centred against the
   line instead, and it comes out the same size in every font stack — the same
   idiom the hero's credential chip already uses for its spring dot. */
.codigo-lavie-marquee__track > p::after {
	background-color: var(--wp--custom--ink--faint);
	block-size: 7px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	display: inline-block;
	inline-size: 7px;
	margin-inline-start: var(--wp--preset--spacing--50);
	vertical-align: middle;
}

@keyframes codigo-lavie-marquee {
	from {
		transform: translateX(0);
	}

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

/* The editor must not scroll the canvas out from under the writer. */
.editor-styles-wrapper .codigo-lavie-marquee__track {
	animation: none;
}

/* ── Section rhythm ──────────────────────────────────────────────────────
   Sections carry their space on the block-start edge only, so two adjacent
   bands never double up. */
.codigo-lavie-section {
	/* The design's page wrapper hides horizontal overflow so the decorative
	   discs can hang past a column edge without pushing the document wider
	   than the viewport. `clip` rather than `hidden`: it does not make a
	   scroll container, so a sticky descendant still sticks. */
	overflow-x: clip;
	padding-block-start: var(--wp--preset--spacing--80);
}

/* A band with its own background needs the space inside it — and, on a
   treatment page, the section step above it as well. The file gives "How it
   works" and "The fine print" `margin-top: var(--lv-sec)`, because the sections
   they follow ("Why choose it", "Where it works") carry padding at the top only
   and nothing at the bottom. Without it the cream and aqua grounds start the
   moment the previous section's last line ends. The concern pages draw the
   same rule for their own three bands — "why it happens" (after self-check),
   the "not on the list?" CTA (after the skin/hair grids) and the reviews band
   (after before/after) — dc.html lines 390, 243 and 501 each give the band
   `margin-top: var(--lv-sec)` on top of its own `padding: var(--lv-sec) 0`. */
body.single-codigo_treatment .codigo-how,
body.single-codigo_treatment .codigo-fineprint,
.codigo-cx-why,
.codigo-cx-not-listed,
.codigo-cx-reviews-band {
	margin-block-start: var(--wp--preset--spacing--80);
}

.codigo-lavie-band {
	padding-block: var(--wp--preset--spacing--80);
}

/* ── Skin-goal filter ─────────────────────────────────────────────────────────────────
   The design's goal control is a tile, not a pill: a cream panel at the
   medium radius carrying the goal on one line and its treatment count on the
   next, aligned to the start and filling its cell. It stays a core/button —
   the shared control — so the focus ring, the link semantics and the editing
   affordance all come from theme.json's `elements.button`, and `is-style-goal`
   restates only the shape, fill and type that differ from it.

   None of this is gated behind `.is-enhanced`. The tile is what the section
   looks like, script or no script. Only the active state below needs the
   script, because only the script knows which goal is showing. */

/* core/buttons has no grid layout to switch to — `allowSwitching` is false on
   the block — so the row is made a grid here. Core paints the flex layout from
   the block library sheet at two classes
   (`.wp-block-buttons.is-layout-flex`), so the leading `:root` is what carries
   this past it whichever sheet loads first — the same move the button variants
   below have to make. The gap stays the block's, so an editor changing it in
   the sidebar still moves these. */
:root .wp-block-buttons.codigo-goals {
	/* Core's flex layout ships `align-items: center` on the same element. It
	   survives the switch to grid as the tiles' `align-self`, which centres each
	   one in its track at its own content height — so a goal whose name fits on
	   one line comes out shorter than the two-line tile beside it. Stretch is
	   what makes `block-size: 100%` on the link below mean anything. */
	align-items: stretch;
	display: grid;
	gap: 12px;
	/* And this is what carries the height across rows. Grid sizes each row to
	   its own tallest item, so without it the tiles that wrap to a second row
	   are shorter than the first row's — every tile the same height means the
	   tallest one anywhere, not the tallest one in its line. */
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

/* Grid items stretch, so every tile in a row is as tall as the tallest —
   which is what keeps a two-line label from shortening its neighbours. The
   link has to fill the block it sits in for that to show. */
.codigo-goals .codigo-goal {
	inline-size: 100%;
}

/* Specificity has to clear theme.json's `:root :where(.wp-element-button)`,
   core's own `.wp-block-button__link` paint, and — for content saved before
   this tile existed — core's `is-style-outline` variation, which WordPress
   serialises per instance as `is-style-outline--7` and paints at
   `:root :where(...)`. Three classes does all of it without !important.

   The hook is `.codigo-goals .codigo-goal`, the pattern's own contract and
   the one assets/js/treatments.js reads, not `.is-style-goal`. A block style
   is a value in the stored markup: a page saved before the style was
   registered, or a tile an editor switched, drops the class and with it the
   whole tile — which is exactly what left the section rendering as core's
   outline pill. The classes the pattern always writes cannot go missing. */
.codigo-goals .codigo-goal > .wp-block-button__link {
	align-items: flex-start;
	background-color: var(--wp--preset--color--cream);
	block-size: 100%;
	border-color: transparent;
	border-radius: var(--wp--custom--radius--md);
	border-style: solid;
	border-width: 1.5px;
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	gap: 6px;
	line-height: 1.3;
	/* The design states 18px block, 20px inline. Only the second is on the
	   spacing scale; the first is a control dimension, like the pill chip's
	   and the card buttons', and is stated the way those are. */
	padding-block: 18px;
	padding-inline: var(--wp--preset--spacing--30);
	text-align: start;
	transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}

/* The design draws no pointer states on the tile at all — only the
   transition that carries it into and out of the selected fill. Restating
   the resting paint here is not a no-op: theme.json gives every
   `.wp-element-button` an ink-soft hover and an ink-deep press, and without
   this the tile would flash two blues the design never puts on it. The
   focus ring is left alone; that one the element owes the keyboard. */
.codigo-goals .codigo-goal > .wp-block-button__link:hover,
.codigo-goals .codigo-goal > .wp-block-button__link:active {
	background-color: var(--wp--preset--color--cream);
	border-color: transparent;
	color: var(--wp--preset--color--ink);
}

/* The count line. Filled by assets/js/treatments.js from the cards actually
   on the page — never printed server-side, where it would be a number frozen
   at the moment the page was created. 13.5px is the design's, and a control
   dimension rather than a step on the type scale — `x-small` is 13px and
   belongs to the eyebrows, which the design does set at 13px. */
.codigo-goal__count {
	font-size: 13.5px;
	line-height: normal;
	opacity: 0.62;
}

/* The one the grid is currently filtered to. Painted here rather than by
   moving core's `is-style-outline` around: WordPress resolves that style per
   block instance into an indexed `is-style-outline--7` class and hangs the
   real paint off that, so a class the script toggles at runtime would never
   match anything. Scoped to `.is-enhanced`, which the script adds — with
   JavaScript off there is no active goal to show. */
.codigo-goals.is-enhanced .codigo-goal.is-goal-active > .wp-block-button__link,
.codigo-goals.is-enhanced .codigo-goal.is-goal-active > .wp-block-button__link:hover,
.codigo-goals.is-enhanced .codigo-goal.is-goal-active > .wp-block-button__link:active {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* A goal the script finds nothing under. The server drops these before the
   page exists; this covers the window after it does — a treatment untagged or
   unpublished since — so a tile never leads to an empty grid. */
.codigo-goals.is-enhanced .codigo-goal[hidden] {
	display: none;
}

/* ── Treatments section ──────────────────────────────────────────────────
   The menu follows the skin-goal tiles directly, so the design gives it the
   block step rather than the full section step every other band carries —
   the two read as one unit. */
.codigo-treatments {
	padding-block-start: var(--wp--preset--spacing--60);
}

/* ── Treatment card ──────────────────────────────────────────────────────
   The design's card is a shadow on white with no edge at all, and it sits at
   a wider radius than the shared card style: the design system's `.card`
   resolves to `calc(--radius-lg * 1.15)`, which theme.json carries as its own
   `radius.card`. Scoped to the section rather than applied to `.is-style-card`
   itself, because that same style dresses the reviews, team and journal cards,
   which the design does draw with an edge. */
.codigo-treatments .is-style-card {
	border: 0;
	border-radius: var(--wp--custom--radius--card);
}

/* Hover is the lift and the deeper shadow only — with no edge to recolour,
   the aqua border the shared style turns on has nothing to paint. */
.codigo-treatments .is-style-card:hover,
.codigo-treatments .is-style-card:focus-within {
	border-color: transparent;
}

/* The design hangs the category tag over the photograph rather than setting
   it in the body, so the card opens on the image and the first line of text
   is the treatment's name. That needs a positioned wrapper, which is the one
   thing the block markup cannot express on its own. */
.codigo-treatments__media {
	position: relative;
}

/* Logical inset: the design's 14px from the top and the leading edge, which
   is the right-hand one once the site is read in Arabic.

   The tag on a photograph is tighter and heavier than the shared pill: the
   design sets it at 12px/700 in a near-opaque white with no edge, because it
   has to hold up over an image rather than over the page. */
.codigo-treatments__kind {
	background-color: rgba(255, 255, 255, 0.94);
	border: 0;
	font-size: 12px;
	font-weight: 700;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	letter-spacing: 0.02em;
	padding: 6px 12px;
	position: absolute;
}

/* The card clips its own corners, and the photograph now sits a level deeper
   than the card's direct children, so the rule that stops an image rounding
   twice has to reach it here. */
.codigo-treatments__media .wp-block-post-featured-image img {
	border-radius: 0;
	display: block;
	inline-size: 100%;
}

/* Name and price share a baseline in the design. Core's flex layout offers
   top, centre and bottom and no baseline, so it is stated here — at two
   classes, which clears the layout rule core prints for the block. */
.codigo-treatments .codigo-treatments__head {
	align-items: baseline;
}

/* Equal card heights are not enough on their own: the design gives the blurb
   `flex: 1` inside a column body, so the slack from a short description lands
   above the rule rather than under the buttons. That is what puts every card's
   time/downtime line and Book row on the same baseline across a row. */
.codigo-treatments .is-style-card {
	display: flex;
	flex-direction: column;
}

.codigo-treatments__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.codigo-treatments .wp-block-post-excerpt {
	flex: 1;
}

/* The design sets the card's own type at flat sizes rather than on the fluid
   heading and body steps — a card is the same width on the phone as it is in
   a three-up row, so nothing about it should shrink with the viewport. The
   same reasoning the journal card already follows. */
.codigo-treatments .wp-block-post-title {
	font-size: 22px;
}

.codigo-treatments .wp-block-post-excerpt {
	color: var(--wp--custom--ink--body);
	font-size: 15.5px;
}

/* The rule above the time and downtime line, and the ink they are set in.
   Both left the block attributes for the reason given on .codigo-lavie-ink-muted. */
.codigo-treatments .codigo-treatments__meta {
	border-block-start: 1px solid var(--wp--custom--divider);
}

.codigo-treatments .codigo-treatments__meta p {
	/* ink--half measured 3.22:1 on white — under the 4.5:1 AA floor for
	   13.5px text. ink--soft is the lightest step that still clears it. */
	color: var(--wp--custom--ink--soft);
	font-size: 13.5px;
}

.codigo-treatments__count {
	/* ink--dim measured 4.34:1 on white — just under AA. ink--soft clears it. */
	color: var(--wp--custom--ink--soft);
	font-size: 15px;
}

/* The fine print under the grid runs wider and lighter than the shared note:
   the design gives it 14.5px on a 52ch measure at a looser leading.
   ink--note measured 3.73:1 on white — under AA; ink--soft clears it. */
.codigo-treatments__fineprint {
	color: var(--wp--custom--ink--soft);
	font-size: 14.5px;
	line-height: 1.6;
	max-inline-size: 52ch;
}

.codigo-treatments__more .wp-block-button__link {
	font-size: 15.5px;
}

/* The design's 16px gutter. It lives here rather than on the block because the
   style engine drops a blockGap holding a raw var() — it reads the bracket as
   unsafe — and falls back to core's own value, which is wider than the design
   draws. The same reason the membership grid carries its gap in CSS. */
.codigo-treatments .wp-block-post-template {
	gap: var(--wp--custom--gap);
}

/* The design drops the treatment grid to a single column on the phone. Core's
   `minimumColumnWidth` would still fit two at 640px exactly. */
@media (max-width: 640px) {
	.codigo-treatments .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* A filtered card must leave the grid entirely. Core sets `display` on the
   container, but a stray rule on the item itself would beat the UA sheet's
   [hidden]. */
.codigo-treatments .wp-block-post[hidden] {
	display: none !important;
}

/* The show-all control is built by the script and appended to the footer row,
   so it inherits none of the pattern's block gap — and, like the goal buttons,
   none of core's resolved outline style either. It reads as secondary next to
   the Book buttons on the cards above it, which the design has it doing too. */
.codigo-treatments__toggle {
	flex-shrink: 0;
}

.codigo-treatments.is-enhanced .codigo-treatments__toggle .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--custom--divider);
	color: var(--wp--preset--color--ink);
	font-size: 15.5px;
	padding: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--40) * 1.2);
}

/* The design darkens the ground rather than swapping the fill, so the edge
   stays put and the label never inverts. Same mix the outline variant uses. */
.codigo-treatments.is-enhanced .codigo-treatments__toggle .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 7%, transparent);
}

.codigo-treatments.is-enhanced .codigo-treatments__toggle .wp-block-button__link:active {
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}

.codigo-treatments__toggle[hidden] {
	display: none;
}

/* Shown only when a goal matches nothing. It replaces the grid rather than
   sitting under it, so it carries the block gap the cards would have had. */
.codigo-treatments__empty {
	margin-block: var(--wp--preset--spacing--40);
}

/* The count is a live region once the script owns it. Reserve the line so a
   two-digit result does not nudge the heading it sits beside. */
.codigo-treatments__count {
	min-inline-size: 9ch;
}

/* ── Clinic tour ─────────────────────────────────────────────────────────
   The design's cinematic frame: a 21/9 well at the shell radius with the
   interior shot filling it and the play badge floating dead centre. The well
   carries its own colour so the frame is the right shape and tone before the
   photograph decodes, which is what keeps the section from reflowing on load.

   The design's mock also runs a `washed` filter over this image. That is a
   device for greying out placeholder art in the comp, not an instruction —
   shipping it would permanently desaturate the client's own photography — so
   it is deliberately not reproduced here or on any other image well. */
.codigo-tour {
	aspect-ratio: 21 / 9;
	background-color: var(--wp--preset--color--tour-well);
	border-radius: var(--wp--custom--radius--shell);
	overflow: hidden;
	position: relative;
}

/* The design spaces this section unevenly: 34px under the heading, then only
   16px between the frame and the cards. The wrapper's block gap draws the
   34px; the tighter step is stated on the cards, at two classes so it clears
   the gap core prints for the flow layout. */
.codigo-lavie-band .codigo-visit__list {
	margin-block-start: var(--wp--custom--gap);
}

.codigo-tour__media {
	block-size: 100%;
	inline-size: 100%;
	margin: 0;
}
/* ── Clinic switch ───────────────────────────────────────────────────────
   The design's segmented control: a white capsule on the cream band holding
   one segment per clinic, sat against the trailing edge of the heading row.
   Built by assets/js/tour.js, because which clinics exist is not something the
   markup can know — see the note at the head of patterns/locations-visit.php.

   The pattern draws the slot hidden, so the row leaves no gap on a page with
   JavaScript off or a single clinic — and `display: flex` below would override
   the attribute's own `display: none` on its own, so the hidden case is stated
   back at a class plus an attribute, which outranks it. */
.codigo-tour__switch[hidden] {
	display: none;
}

.codigo-tour__switch {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	inline-size: fit-content;
	/* Holds the control at the trailing edge when the heading row wraps, which
	   `space-between` alone stops doing the moment the two share no line. */
	margin-inline-start: auto;
	padding: 7px;
}

/* The row the script builds for itself on a page saved before the slot beside
   the heading existed. It sits above the frame instead, at the same edge, and
   owes the frame the gap the heading row would have given it. */
.codigo-tour__switch--loose {
	margin-block-end: var(--wp--custom--gap);
}

.codigo-tour__clinic {
	background-color: transparent;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--custom--ink--body);
	cursor: pointer;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	padding: 11px 20px;
	transition: background-color 0.16s, color 0.16s;
}

/* The clinic currently in the frame. `aria-pressed` is the state the button
   already publishes to a screen reader, so it is also the one the paint hangs
   off — there is no second class that could drift out of step with it. */
.codigo-tour__clinic[aria-pressed="true"] {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.codigo-tour__clinic:hover:not([aria-pressed="true"]) {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}



.codigo-tour__media img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/* Centred over the frame. The anchor and the caption are the same badge —
   only one of them is clickable — so the shape is described once.

   Centred with `inset: 0` and auto margins rather than a half-offset and a
   translate: a translate is physical, so it keeps pulling the badge left once
   the layout mirrors and the thing lands off-centre in Arabic. Auto margins on
   a symmetric inset have no direction to get wrong.

   The badge ships as a paragraph and is replaced by a real button when a
   clinic has a film, so the shape is described once and the button's own UA
   styling is reset alongside it.

   Two classes, because core prints its own `margin-block: 0` for the group's
   block gap at `.wp-container-... > *` and that would pin the badge to the
   foot of the frame. */
.codigo-tour .codigo-tour__play {
	align-items: center;
	background-color: var(--wp--custom--veil--play);
	block-size: fit-content;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--preset--shadow--lg);
	color: var(--wp--preset--color--ink);
	display: flex;
	font-size: 17px;
	font-weight: 700;
	gap: 13px;
	inline-size: fit-content;
	inset: 0;
	margin: auto;
	max-inline-size: calc(100% - var(--wp--preset--spacing--30));
	padding: 18px 30px;
	position: absolute;
	text-align: start;
	text-decoration: none;
}

/* Only the button form is clickable; the paragraph form never is. */
.codigo-tour button.codigo-tour__play {
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* The caption over a clinic with no film yet. It is not a control, so it must
   not answer the pointer — in either of the two forms it arrives in: the
   paragraph the pattern ships, and the button the script stands back down when
   the visitor switches to a clinic whose tour has not been shot. A disabled
   button is already out of the tab order; this is what takes it out of the
   pointer's reach as well, so the two forms behave alike. */
.codigo-tour__play--static {
	cursor: default;
	pointer-events: none;
}

/* The design's 36px disc with the play glyph. A pseudo-element: it is a
   picture of a button, not a second label for a screen reader to read out. */
.codigo-tour__play::before {
	align-items: center;
	background-color: var(--wp--preset--color--ink);
	block-size: 36px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--base);
	content: "\25B6";
	display: flex;
	flex-shrink: 0;
	font-size: 14px;
	inline-size: 36px;
	justify-content: center;
	line-height: 1;
}

.codigo-tour__play:hover,
.codigo-tour__play:focus-visible {
	color: var(--wp--preset--color--ink);
}

.codigo-tour__play:hover::before {
	background-color: var(--wp--preset--color--ink-soft);
}

/* The lightbox the badge opens. Sized to the film rather than to the screen,
   so a 16/9 tour keeps its shape on a phone held either way. */
.codigo-tour__dialog {
	background: transparent;
	border: 0;
	inline-size: min(1100px, 92vw);
	max-block-size: none;
	max-inline-size: none;
	overflow: visible;
	padding: 0;
}

.codigo-tour__dialog::backdrop {
	background-color: rgba(2, 34, 83, 0.72);
}

.codigo-tour__frame {
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--ink-deep);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.codigo-tour__frame > * {
	block-size: 100%;
	border: 0;
	display: block;
	inline-size: 100%;
}

/* Sits just clear of the film's top trailing corner, so it never covers the
   player's own controls. */
.codigo-tour__close {
	background-color: var(--wp--custom--veil--play);
	block-size: 40px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-size: 20px;
	inline-size: 40px;
	inset-block-start: -52px;
	inset-inline-end: 0;
	line-height: 1;
	position: absolute;
}

.codigo-tour__close::before {
	content: "\00D7";
}

.codigo-tour__close:hover {
	background-color: var(--wp--preset--color--base);
}

/* ── Clinic cards ────────────────────────────────────────────────────────
   Two equal columns at the design's 16px gutter, at every width down to the
   phone breakpoint — confirmed against the design's actual responsive sheet,
   not the abridged export the pattern's own comment used to cite. The row
   only turns into an edge-to-edge snap-scroll strip at 640px, showing one
   card and most of the next; tablet keeps the two-up grid the switch above it
   already assumes. */
.codigo-visit__grid {
	gap: var(--wp--custom--gap);
}

@media (max-width: 640px) {
	.codigo-visit__grid {
		-webkit-overflow-scrolling: touch;
		display: flex !important;
		grid-template-columns: none !important;
		margin-inline: calc(var(--wp--custom--shell-pad) * -1);
		padding-block: 2px 10px;
		padding-inline: var(--wp--custom--shell-pad);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.codigo-visit__grid::-webkit-scrollbar {
		display: none;
	}

	/* post-template's own `<li>` wrapper, not `.codigo-visit__card` — the class
	   sits one level deeper, on the group inside it. This is the element that
	   actually becomes the flex item once `display: flex` above lands, so it is
	   the one that needs a basis and a snap point. */
	.codigo-visit__grid > li {
		flex: 0 0 87%;
		scroll-snap-align: center;
	}
}

/* Like the treatment card, the design draws this one as a shadow on white
   with no edge, at the wider card radius. */
.codigo-visit__card {
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	display: flex;
	flex-direction: column;
}

/* Hover has no edge to recolour — and unlike the treatment grid these two are
   not links, so the design does not lift them at all. */
.codigo-visit__card:hover,
.codigo-visit__card:focus-within {
	border-color: transparent;
	transform: none;
}

/* The card the switch above the tour frame currently points at — the design's
   entire focus effect, copied at the values it ships: an inset aqua outline
   and nothing else, no scale, no dim, no blur on the other card. It is not
   gated behind a breakpoint because the design does not gate it either; the
   switch sets it at every width, assets/js/tour.js is what keeps it in sync
   with a click and with a manual swipe of the row. */
.codigo-visit__card[aria-current="true"] {
	outline: 2px solid var(--wp--preset--color--aqua);
	outline-offset: -2px;
}

.codigo-visit__head {
	align-items: baseline;
}

.codigo-visit__card .wp-block-post-title {
	font-size: 27px;
}

.codigo-visit__address p {
	color: var(--wp--custom--ink--muted);
	font-size: 16.5px;
	line-height: 1.55;
}

/* The badge is the design's tag, not the shared pill: tighter, heavier and
   without an edge. */
.codigo-visit__badge {
	background-color: var(--wp--preset--color--aqua-tint);
	border: 0;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 13px;
}

/* The design's second badge colour, for a clinic that has just opened. Which
   clinic gets it is the client's choice, set on the location and published as
   a class by codigo-extra — a block can bind text, but not a class name. With
   the plugin gone the badge is gone with it, so aqua above is the only tone
   the theme ever has to draw on its own. */
.codigo-badge-sand .codigo-visit__badge {
	background-color: var(--wp--preset--color--sand);
}

/* The hours/parking/best-for block: ruled off above, and holding the design's
   own gap to the buttons below it. */
.codigo-visit__meta {
	border-block-start: 1px solid var(--wp--custom--divider);
	color: var(--wp--custom--ink--body);
	margin-block-end: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
}

.codigo-visit__meta p {
	font-size: 15.5px;
}

/* The label is the same ink held back, not a lighter ink — which is what
   keeps it in step when the block above it is recoloured. */
.codigo-visit__label {
	opacity: 0.62;
}

/* Logical: the value sits against the trailing edge, which is the left-hand
   one once the site is read in Arabic. */
.codigo-visit__value {
	text-align: end;
}

/* What pins the two clinics' Book rows to the same line: the actions take the
   card's leftover height, so a longer address above never pushes one row of
   buttons below the other. */
.codigo-visit__actions {
	gap: 10px;
	margin-block-start: auto;
}

.codigo-visit__actions .wp-block-button__link {
	font-size: 15.5px;
	padding: 14px 24px;
}

/* ── Journal ─────────────────────────────────────────────────────────────
   The design's article card is quieter than the shared one: no resting shadow
   and no lift on hover, so the only thing that moves is the edge turning aqua
   under a soft shadow. Scoped to the section, because the same
   `.is-style-card` carries the treatments, reviews, locations and team cards,
   which the design does shadow. */
.codigo-journal .is-style-card {
	box-shadow: none;
}

.codigo-journal .is-style-card:hover,
.codigo-journal .is-style-card:focus-within {
	box-shadow: var(--wp--preset--shadow--md);
	transform: none;
}

/* The thumbnail sits in a tinted well at the medium radius, so a square
   photograph still reads as rounded while it loads. The block carries the
   radius on the image itself; the well behind it has to match, and clip. */
.codigo-journal .wp-block-post-featured-image {
	background-color: var(--wp--preset--color--aqua-tint);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.codigo-journal .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--md);
}

/* The design sets the card title at a flat 23px — it does not ride the fluid
   heading step, which would take it to 15px on the phone, where the card is
   at its widest. Stated here rather than on the block because theme.json has
   fluid typography on globally and it rewrites any size the block carries.
   An editor changing the size in the sidebar still wins: that lands inline. */
.codigo-journal__meta .wp-block-post-date,
.codigo-journal__meta .wp-block-post-terms {
	color: var(--wp--custom--ink--dim);
}

.codigo-journal .wp-block-post-title {
	font-size: 23px;
	letter-spacing: -0.01em;
	line-height: 1.24;
}

/* The section's own link, at the design's 15.5px. Same flat step as the menu's
   show-all control, which sits in the matching position one section up. */
.codigo-journal__more .wp-block-button__link {
	font-size: 15.5px;
}

/* The design's header row: the eyebrow and heading hold a 600px measure and
   the section link is pushed out to the trailing edge of the column. Without
   the cap the heading is free to take the whole 1212px row, `space-between`
   has no slack left to distribute, and the button wraps underneath at the
   leading edge — which is where it had been landing.

   Selected by what the row contains rather than by a class of its own. This
   section is copied into the page the moment it is inserted and then stops
   tracking the file it came from, so a class added to the pattern today
   reaches only pages made after today; `:has()` reads the markup that is
   already out there as well. */
.codigo-journal .wp-block-group:has(> .wp-block-buttons > .codigo-journal__more) > .wp-block-group {
	max-inline-size: 600px;
}

/* And this is what keeps the button against the trailing edge once the row
   does wrap — `space-between` only separates items that share a line. */
.codigo-journal .wp-block-group:has(> .wp-block-buttons > .codigo-journal__more) > .wp-block-buttons {
	margin-inline-start: auto;
}

/* Date and category are divided by a hairline in the design, not by a bullet
   or a slash. It hangs off the category because that is the block that may be
   absent — an uncategorised post loses the rule with it. The margin matches
   the row's own 12px gap, so the rule sits centred between the two. */
.codigo-journal__meta > .wp-block-post-terms::before {
	background-color: var(--wp--custom--divider);
	block-size: 14px;
	content: "";
	display: inline-block;
	inline-size: 1px;
	margin-inline-end: 12px;
	vertical-align: -2px;
}

/* ── Journal carousel ────────────────────────────────────────────────────
   The homepage row holds the latest six articles and shows three at a time,
   two on tablet. It is a snap row at every width, so it reads and swipes
   without JavaScript; assets/js/pages.js only adds the auto-advance.

   The block padding gives the hover shadow room — a scroll container clips
   on both axes once it clips on one. */
.codigo-journal__row {
	-webkit-overflow-scrolling: touch;
	display: flex !important;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: none !important;
	overflow-x: auto;
	padding-block: 2px 12px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.codigo-journal__row::-webkit-scrollbar {
	display: none;
}

/* The journal page's `.alignwide > *` reset also strips the gap between the
   heading row and the carousel here, so the carousel puts it back. */
.codigo-journal .alignwide > .wp-block-query:has(> .codigo-journal__row) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.codigo-journal__row > li {
	flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--50)) / 3);
	min-inline-size: 0;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.codigo-journal__row > li {
		flex-basis: calc((100% - var(--wp--preset--spacing--50)) / 2);
	}
}

/* Below 640px it runs edge to edge: the negative inline margin cancels the
   section's own padding and the matching inline padding puts the first card
   back on the text column, so the row bleeds off both sides of the screen
   while still starting where the heading does. */
@media (max-width: 640px) {
	.codigo-journal__row {
		margin-inline: calc(var(--wp--custom--shell-pad) * -1);
		padding-inline: var(--wp--custom--shell-pad);
		scroll-padding-inline-start: var(--wp--custom--shell-pad);
	}

	.codigo-journal__row > li {
		flex: 0 0 clamp(240px, 74vw, 320px);
	}
}

/* ── Photograph placeholder ──────────────────────────────────────────────
   Stood in by inc/media.php for a treatment with no image yet. It arrives
   carrying the block's own width, height and object-fit, so all that is left
   is to stop a browser from treating the SVG as a decorative unsized box. */
.codigo-lavie-placeholder {
	background-color: var(--wp--preset--color--aqua-tint);
	display: block;
	inline-size: 100%;
}

/* ── Button variants ─────────────────────────────────────────────────────
   theme.json carries the shared `.btn`: the heading face at its own weight,
   a pill, and a 1px transparent edge every variant keeps so the filled,
   outlined and ghost buttons come out the same size.

   Core paints `is-style-outline` from the block library sheet at two classes
   (`.wp-block-button.is-style-outline > .wp-block-button__link`), which beats
   theme.json's `:root :where(.wp-element-button)`. The leading `:root` here
   is what carries these past it, whichever sheet loads first. */
:root .wp-block-button.is-style-outline > .wp-block-button__link,
:root .wp-block-button__link.is-style-outline {
	background-color: transparent;
	border-color: var(--wp--custom--divider);
	border-style: solid;
	border-width: 1px;
	color: var(--wp--preset--color--ink);
	/* Core gives the outline its own em-based padding; restate the shared one
	   so a secondary sitting beside a primary lines up. */
	padding: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--40) * 1.2);
}

/* The design does not move the edge on hover — it darkens the ground under it
   by a fixed share of the running ink, so an outlined button beside a filled
   one keeps the same footprint through every state. */
:root .wp-block-button.is-style-outline > .wp-block-button__link:hover,
:root .wp-block-button__link.is-style-outline:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 7%, transparent);
	border-color: var(--wp--custom--divider);
	color: var(--wp--preset--color--ink);
}

:root .wp-block-button.is-style-outline > .wp-block-button__link:active,
:root .wp-block-button__link.is-style-outline:active {
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}

/* The third variant: no fill and no edge. The pill shape still holds it in a
   row of buttons, so an undo like "Start again" reads as the quietest thing
   there rather than as body copy that happens to be clickable. */
:root .wp-block-button.is-style-ghost > .wp-block-button__link,
:root .wp-block-button__link.is-style-ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--ink);
}

:root .wp-block-button.is-style-ghost > .wp-block-button__link:hover,
:root .wp-block-button__link.is-style-ghost:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
	color: var(--wp--preset--color--ink);
}

:root .wp-block-button.is-style-ghost > .wp-block-button__link:active,
:root .wp-block-button__link.is-style-ghost:active {
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
}

/* ── Provider intro ──────────────────────────────────────────────────────
   The one split on the page that leads with the *narrower* column: the
   portrait is 0.82fr against the copy's 1.18fr, and the two are centred
   against each other rather than aligned to the top. Grid columnCount cannot
   express an fr ratio, so the tracks live here — the same move the plan and
   Cherry bands make. Collapses to one column at the tablet breakpoint. */
.codigo-lavie-provider {
	align-items: center;
	grid-template-columns: 0.82fr 1.18fr;
}

@media (max-width: 1024px) {
	.codigo-lavie-provider {
		grid-template-columns: 1fr;
	}

	/* Stacked, the portrait has the whole column and a 4/5 ratio would make it
	   taller than the screen. The design's sheet says only that this section
	   drops to one column, so the cap is ours: the arch keeps its shape and
	   the copy below it stays within reach of the fold. */
	.codigo-lavie-provider > .codigo-lavie-provider__portrait {
		max-inline-size: 420px;
	}
}

/* The aqua disc bleeding out of the portrait's bottom leading corner. A
   pseudo-element for the same reason as the plan and Cherry discs: an editor
   cannot delete it by accident, and `inset-inline-start` mirrors it correctly
   in RTL. Negative z-index puts it behind the arch without touching the
   image's own paint order — the portrait's own `z-index: 0` above is what
   makes this the stacking context it resolves inside. */
.codigo-lavie-provider__portrait::before {
	background-color: var(--wp--preset--color--aqua);
	block-size: 150px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: 150px;
	inset-block-end: -26px;
	inset-inline-start: -26px;
	opacity: 0.42;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* The provider's four credentials are the largest pills on the page — the
   design sets them a size and a little padding above the badge default. */
.codigo-lavie-provider__tags .is-style-pill {
	padding: 11px 18px;
}

/* ── Team row ────────────────────────────────────────────────────────────
   The design keeps this a plain auto-fit grid at every size above the phone
   breakpoint — no snap row. The tint is the empty state: a colleague with no
   portrait yet still reads as a card, not a hole. */
.codigo-lavie-team .wp-block-post-featured-image {
	background-color: var(--wp--preset--color--aqua-tint);
	margin-block: 0;
}

/* The role line. It is an eyebrow, but the card sets it a step larger and a
   good deal tighter than the section eyebrows above it. */
.codigo-lavie-team__role {
	letter-spacing: 0.05em;
}

/* Phone: the card turns horizontal — portrait on the leading edge, the name,
   role and note beside it — and the grid drops to one column so each card has
   the width that layout needs. Flex rather than grid so the lead provider's
   card, which carries no portrait, simply fills the row. */
@media (max-width: 640px) {
	.codigo-lavie-team {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The track's own minimum is the card's min-content, and the card is about
	   to become a flex row whose portrait carries an aspect ratio — enough to
	   push the row wider than the column it sits in. The `minmax(0, …)` above
	   says so too, but core restates a bare `1fr` under 600px at four classes
	   deep, so the guard that has to hold is this one, on the item. */
	.codigo-lavie-team > li {
		min-inline-size: 0;
	}

	.codigo-lavie-team .is-style-card {
		display: flex;
	}

	/* The portrait stretches to the card's height, and `aspect-ratio` turns
	   that height back into a minimum width — 1:1 of however tall the card
	   grew. Left at `auto`, that minimum beats the 34% basis and pushes the
	   card past its track. */
	.codigo-lavie-team .is-style-card > .wp-block-post-featured-image {
		flex: 0 0 34%;
		min-inline-size: 0;
	}

	.codigo-lavie-team .is-style-card > .wp-block-post-featured-image img {
		block-size: 100%;
		object-fit: cover;
	}

	/* Beside a portrait, the card's own 34px inline padding leaves too little
	   for the role to stay on one line. The design does not draw this card —
	   its responsive sheet only says the team goes photo-left on the phone —
	   so the block padding gives way rather than the wording. `!important` is
	   what it takes: core prints the padding inline, from the block's own
	   attribute, and the editor keeps that control at every other width. */
	.codigo-lavie-team .is-style-card > .wp-block-group {
		flex: 1 1 auto;
		min-inline-size: 0;
		padding-inline: var(--wp--preset--spacing--30) !important;
	}
}

/* ── Footer social ───────────────────────────────────────────────────────
   The design's own line-icon set, not a social-links block's brand logos —
   these four glyphs do not exist in core's icon library. `color-mix()` gets
   the design's 30% border against the dark shell without a literal rgba(). */
.codigo-lavie-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.codigo-lavie-footer__social a {
	align-items: center;
	block-size: 44px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--base);
	display: flex;
	inline-size: 44px;
	justify-content: center;
	transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}

.codigo-lavie-footer__social a:hover,
.codigo-lavie-footer__social a:focus-visible {
	background-color: var(--wp--preset--color--aqua);
	border-color: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--ink);
}

.codigo-lavie-footer__social a:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TREATMENT PAGE & TREATMENT AREA PAGE
   The two inner templates. Everything above this line is the homepage.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumbs ─────────────────────────────────────────────────────────
   Treatments / Face & Neck / PRP Microneedling. The separators are drawn
   rather than written: a slash typed between two links is read aloud as a
   slash, and it would have to be translated for no reason. */
.codigo-crumbs {
	color: var(--wp--custom--ink--soft);
	font-size: var(--wp--preset--font-size--small);
}

/* Pulls the crumb's own box back to the design's 18px line after the touch
   target below has grown it to 44. The flex container centres its items, so the
   target overhangs evenly above and below the text. Two classes: core's flex
   layout prints `> * { margin: 0 }` for the container at one. */
.codigo-tx-crumbs .codigo-crumbs > *,
.codigo-area-hero .codigo-crumbs > * {
	margin-block: -13px;
}

/* The design draws these at 14.5px, which is a 15px-tall hit area — under the
   44px floor for a control that is not a word inside a sentence. The padding
   supplies the target, the negative margin above puts the line back, and the
   row gap is opened past the overhang so two crumbs wrapped onto separate
   lines never share a tappable pixel. */
.codigo-crumbs {
	column-gap: 10px;
	row-gap: 30px;
}

.codigo-crumbs a {
	display: inline-block;
	padding-block: 13px;
}

.codigo-crumbs > * + *::before {
	content: "/";
	margin-inline-end: 10px;
	opacity: 0.45;
}

/* The last crumb is where the visitor is, not somewhere to go. core/post-title
   and core/query-title at level 0 both render a plain paragraph, so this is
   only a matter of weight and colour. */
.codigo-crumbs__here {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* core/post-terms wraps its links in a div of its own, which would otherwise
   sit on the flex line as a block. */
.codigo-crumbs .wp-block-post-terms {
	font-size: inherit;
}

.codigo-crumbs a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ── Pill chips that may be empty ────────────────────────────────────────
   A pill bound to an optional field renders with nothing in it when the field
   was left blank. An empty pill is still a pill — a small blank capsule — so
   it is taken off the page entirely. Applies to every pill on the site: an
   empty one is never wanted anywhere. */
.is-style-pill:empty {
	display: none;
}

/* ── Treatment and category pages: the design file's own scale ───────────
   `design/La Vie Treatment Pages.html` and `design/La Vie Medspa Homepage
   v3.html` are two files with two slightly different scales, and theme.json
   carries the homepage's: section step 104px against 96px, h2 topping out at
   50px against 48px, h1 at 92px against 84px. Rather than pick one and make
   the other wrong, the treatment file's values are declared here on the three
   views it governs — the single treatment, a treatment area, and the treatment
   archive — as plain custom-property declarations. Nothing is overridden and
   nothing needs `!important`: the properties below are the same ones
   theme.json defines, redeclared at a narrower scope.

   `--wp--preset--spacing--80` is the design's `--lv-sec`, which it uses for
   every section step, the hero's closing padding and the footer's opening one.
   `--wp--custom--shell-pad` is its `--lv-pad`. Both step down at the file's own
   two breakpoints rather than sliding, because the file steps rather than
   slides. */
body.single-codigo_treatment,
body.tax-codigo_area,
body.post-type-archive-codigo_treatment,
body.single-codigo_condition,
body.post-type-archive-codigo_condition {
	--wp--custom--shell-pad: 34px;
	--wp--preset--spacing--80: 96px;
	/* The design's own heading steps, named for what they are so a section can
	   ask for one without restating the clamp. Shared with the concern pages:
	   docs/design_handoff_concerns_pages/README.md states the identical scale,
	   same project, same stylesheet. */
	--lvt-h1: clamp(40px, 5.4vw, 76px);
	--lvt-h1-lh: 1.02;
	--lvt-h2: clamp(30px, 3.7vw, 48px);
	--lvt-h2-lh: 1.08;
	/* The file steps its shell radius at the same two widths it steps
	   everything else; theme.json slides it, which is the homepage's rule. */
	--wp--custom--radius--shell: 40px;
}

/* The concerns index draws a larger h1 than every other page on this scale —
   its own worked example, distinct from --lvt-h1 above. */
body.post-type-archive-codigo_condition {
	--lvt-h1-index: clamp(42px, 6vw, 84px);
	--lvt-h1-index-lh: 1.01;
}

@media (max-width: 1024px) {
	body.single-codigo_treatment,
	body.tax-codigo_area,
	body.post-type-archive-codigo_treatment,
	body.single-codigo_condition,
	body.post-type-archive-codigo_condition {
		--wp--custom--shell-pad: 26px;
		--wp--preset--spacing--80: 68px;
		--wp--custom--radius--shell: 32px;
	}
}

@media (max-width: 640px) {
	body.single-codigo_treatment,
	body.tax-codigo_area,
	body.post-type-archive-codigo_treatment,
	body.single-codigo_condition,
	body.post-type-archive-codigo_condition {
		--wp--custom--shell-pad: 18px;
		--wp--preset--spacing--80: 50px;
		--wp--custom--radius--shell: 24px;
		/* The file tightens its two widest steps on the phone. */
		--wp--preset--spacing--60: 28px;
		--wp--preset--spacing--50: 24px;
	}
}

/* Every heading the file sets at its shared h2 step. The three that carry their
   own size — the two dark calls to action and the category filter — state it
   where they are drawn. */
.codigo-benefits h2,
.codigo-how h2,
.codigo-areas h2,
.codigo-fineprint h2,
.codigo-results h2,
.codigo-treatment-related h2 {
	font-size: var(--lvt-h2, clamp(30px, 3.7vw, 48px));
	line-height: var(--lvt-h2-lh, 1.08);
}

/* The fallbacks are the same values, for the editor canvas: the hero is in
   the treatment's own content now, and the canvas has no
   body.single-codigo_treatment for the tokens to be declared on. */
.codigo-treatment-hero h1.wp-block-post-title {
	font-size: var(--lvt-h1, clamp(40px, 5.4vw, 76px));
	line-height: var(--lvt-h1-lh, 1.02);
}

/* The file's measures, in characters, section by section. They are stated here
   rather than swapped into the patterns because the three shared measure
   classes — 15ch, 46ch, 54ch — are the homepage's, and the same patterns are
   dropped on pages the homepage file governs. An element-plus-class selector
   clears a single-class one without needing anything stronger. */
.codigo-benefits__head,
.codigo-fineprint h2,
.codigo-results h2,
.codigo-results--strip h2 {
	max-inline-size: min(22ch, 100%);
}

.codigo-how h2,
.codigo-areas h2 {
	max-inline-size: min(20ch, 100%);
}

.codigo-how .codigo-lavie-measure-wide {
	/* 18.5px is the file's, and it is not a step on the shared scale — the
	   `large` preset core used to print here is 17px and arrived at
	   `!important`, so it was taken off the blocks rather than fought. */
	font-size: 18.5px;
	max-inline-size: min(52ch, 100%);
}

.codigo-treatment-related h2 {
	max-inline-size: min(24ch, 100%);
}

.codigo-results--strip .codigo-results__note {
	max-inline-size: min(32ch, 100%);
}

/* The two dark calls to action are the same block on both templates, and the
   file gives them different measures: twenty characters when it is closing a
   single treatment, twenty-two when it is closing a category. */
body.single-codigo_treatment .codigo-booking h2 {
	max-inline-size: min(20ch, 100%);
}

body.tax-codigo_area .codigo-booking h2,
body.post-type-archive-codigo_treatment .codigo-booking h2 {
	max-inline-size: min(22ch, 100%);
}

/* ── The four headings the file sizes for itself ─────────────────────────
   Everything else on these pages rides --lvt-h2. */
.codigo-booking h2 {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.06;
}

.codigo-area-grid .codigo-treatments__heading {
	font-size: clamp(28px, 3.3vw, 42px);
	line-height: var(--lvt-h2-lh, 1.08);
}

.codigo-area-hero h1 {
	font-size: clamp(42px, 6vw, 84px);
	letter-spacing: -0.03em;
	line-height: 1.01;
	max-inline-size: min(16ch, 100%);
}

/* ── Treatment hero ──────────────────────────────────────────────────────
   The cream opening band. Two columns at the wide layout, one below the
   tablet breakpoint, with the photograph following the copy rather than
   leading it — the design puts the reason to keep reading first. */
.codigo-treatment-hero__grid {
	align-items: center;
	grid-template-columns: 1.02fr 0.98fr;
}

/* The file spaces the column unevenly — 20px under the tag row, 25px under the
   name, 34px under each of the next two — so the gaps are stated here rather
   than left to one blockGap that would have to be wrong three times out of
   four. Two classes, which is what clears the single-class rule core prints
   for the group's own blockGap. */
.codigo-treatment-hero .codigo-treatment-hero__copy > * {
	margin-block-end: var(--wp--preset--spacing--50);
	margin-block-start: 0;
}

.codigo-treatment-hero .codigo-treatment-hero__tags {
	margin-block-end: var(--wp--preset--spacing--30);
}

.codigo-treatment-hero .codigo-treatment-hero__copy > .wp-block-post-title {
	margin-block-end: var(--wp--preset--spacing--40);
}

.codigo-treatment-hero .codigo-treatment-hero__copy > :last-child {
	margin-block-end: 0;
}

/* The two hero badges are the file's `.tag`, which is heavier and a shade
   tighter than the pill the rest of the site wears. */
.codigo-treatment-hero__tags .is-style-pill {
	font-weight: 700;
	padding: 8px 16px;
}

/* Flat 26px: the file draws the four figures at one size, and a hero fact is
   the same width in a four-up row as it is stacked on a phone. */
.codigo-treatment-hero .codigo-treatment-facts__value {
	font-size: 26px;
}

/* The area, drawn as the design's white pill. core/post-terms emits its own
   wrapper and a link inside it, so the pill is painted on the wrapper and the
   link inside is left as text. */
.codigo-treatment-hero__area {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--divider);
	/* The padding moves to the link below so the whole badge is the target.
	   Two classes: the pill rule on the row is one, and at a tie it was
	   painting the wrapper's padding on top of the link's — the badge came out
	   16px taller than the claim beside it. */
	padding: 0;
}

.codigo-treatment-hero__tags .codigo-treatment-hero__area {
	padding: 0;
}

.codigo-treatment-hero__area a {
	color: inherit;
	display: inline-block;
	padding: 8px 16px;
}

.codigo-treatment-hero__area a:hover,
.codigo-treatment-hero__area a:focus-visible {
	color: var(--wp--preset--color--spring-deep);
}

.codigo-treatment-hero .codigo-lavie-measure-tight {
	margin-block: 0;
}

.codigo-treatment-hero__lede {
	max-inline-size: min(44ch, 100%);
}

.codigo-treatment-hero__media img {
	aspect-ratio: 4 / 4.4;
	border-radius: var(--wp--custom--radius--shell);
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/* ── Hero fact strip ─────────────────────────────────────────────────────
   Four figures over one rule, in the design's `auto-fit minmax(140px, 1fr)`
   grid. It used to be a flex row, on the reasoning that a fact left blank
   should collapse rather than hold a gap open — but blank facts are seeded now
   rather than removed, and flex was doing two visible things wrong: the last
   item on a wrapped line stretched to the full column, and a figure that ran to
   two lines sat thirteen pixels above its neighbours instead of level with
   them. A grid gives equal tracks and a shared top edge, which is what the file
   draws. */
.codigo-treatment-facts {
	border-block-start: 1px solid var(--wp--custom--divider);
}

.codigo-treatment-facts__item {
	align-content: start;
}

.codigo-treatment-facts__item > * {
	margin-block: 0;
}

/* The design draws four figures under the hero, always. A figure nobody has
   filled in is seeded rather than removed, so the strip keeps its shape. */

.codigo-treatment-facts__label {
	color: var(--wp--custom--ink--soft);
	font-size: 13.5px;
	line-height: 1.4;
}

/* The last section on a treatment page carries the step below it too — the
   design closes the page on the section rhythm rather than letting the footer
   band butt straight up against the comparer. */
.codigo-lavie-section.is-closing {
	padding-block-end: var(--wp--preset--spacing--80);
}

/* ── Sections the design draws as always present ───────────────────────
   These five used to be removed when they had nothing to show. The design file
   draws every one of them on every treatment, so a page missing one is a page
   that does not match the file — and hiding the gap made it invisible in review
   rather than fixing it. The rules are gone; codigo-extra supplies demo content
   for anything a clinic has not written yet, so a section is never both present
   and empty. See docs/DESIGN-DEVIATIONS.md. */

/* The lead capture opens the footer. The footer already carries the section
   step above it and the section before it carries one below, which is the
   192px the file puts there; the band's own top margin and padding were a
   third and a fourth helping on top of that. */
.codigo-lavie-footer > .codigo-lavie-band {
	padding-block-start: 0;
}

/* ── Start the conversation ─────────────────────────────────────
   The footer's lead capture. The file gives its heading a step of its own —
   larger than the shared h2 and tighter — and a 42ch standfirst rather than the
   shared 46ch. */
.codigo-lavie-enquiry h2 {
	font-size: clamp(34px, 4.2vw, 56px);
	letter-spacing: -0.025em;
	line-height: 1.04;
}

.codigo-lavie-enquiry .codigo-lavie-measure {
	max-inline-size: min(42ch, 100%);
}

/* ── Booking band ────────────────────────────────────────────────────────
   The dark call to action, on both templates. */
.codigo-booking {
	align-items: center;
	grid-template-columns: 1.15fr 0.85fr;
}

.codigo-booking > * {
	margin-block: 0;
}

.codigo-booking .codigo-lavie-measure {
	font-size: 18px;
}

.codigo-booking__actions > * {
	margin-block: 0;
}

/* The outlined button on a dark ground. theme.json paints the site's outline
   button for a light one, and white-on-navy is the inverse of it rather than a
   variant, so it is restated here.

   The leading `:root` is load-bearing: the shared outline paint further up this
   file already runs at four classes to clear core's own, and three classes here
   would have left this button wearing the light edge on the navy panel. Five
   clears it, and the design's own padding goes on at the same time — the file
   sets 18px on all four sides of both buttons in this column, not the shared
   button's 15/30. */
:root .codigo-booking .codigo-booking__call > .wp-block-button__link {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	border-style: solid;
	border-width: 1.5px;
	color: var(--wp--preset--color--base);
}

:root .codigo-booking .codigo-booking__call > .wp-block-button__link:hover,
:root .codigo-booking .codigo-booking__call > .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

:root .codigo-booking .codigo-booking__actions .wp-block-button__link {
	padding: 18px;
}

/* The file's 13.5px on the reassurance line under the two buttons. */
.codigo-booking__actions p {
	font-size: 13.5px;
	line-height: 1.5;
}

/* ── Packages ────────────────────────────────────────────────────────────
   The head row; the cards and the add-on bar under it are drawn by
   codigo-extra/treatment-packages, which is where their paint lives. */
.codigo-packages__head > * {
	margin-block: 0;
}

.codigo-packages__intro {
	line-height: 1.5;
	max-inline-size: min(36ch, 100%);
}

/* ── Why choose it ───────────────────────────────────────────────────────
   Cream tiles, one claim each. The design draws a different pictogram on every
   tile; each is decorative and none is referred to, so one mark serves all of
   them and the sentence carries the meaning — see the note in
   patterns/treatment-benefits.php.

   The grid itself ships with codigo-extra/treatment-benefits, which is what
   builds the list; what is here is the paint, which is the theme's. The design
   also sets the sentence a touch below the mark's centre line. */
.codigo-benefits__grid > li {
	background-color: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--custom--ink--strong);
	display: flex;
	font-size: 16.5px;
	gap: 14px;
	line-height: 1.5;
	padding: 22px 24px;
	text-wrap: pretty;
}

.codigo-benefits__grid > li::before {
	background-color: var(--wp--preset--color--base);
	block-size: 40px;
	border-radius: var(--wp--custom--radius--pill);
	/* The four-point spark the design uses on the brand mark, at the size the
	   tile's circle is drawn. A background rather than a glyph, so it is not in
	   the accessible name of the sentence beside it. */
	background-image: radial-gradient(circle at 50% 50%, var(--wp--preset--color--aqua) 0 5px, transparent 5px);
	content: "";
	flex-shrink: 0;
	inline-size: 40px;
}

/* ── How it works ────────────────────────────────────────────────────────── */
.codigo-how__grid {
	align-items: center;
	grid-template-columns: 0.95fr 1.05fr;
}

.codigo-how__media {
	margin-block: 0;
}

.codigo-how__media img {
	border-radius: var(--wp--custom--radius--shell);
	display: block;
	inline-size: 100%;
}

.codigo-how__copy > * {
	margin-block: 0;
}

.codigo-how__steps {
	margin-block: 0;
}

/* ── Ideal treatment areas ───────────────────────────────────────────────
   Each row ruled off above and marked with the aqua dot. The dot is drawn on
   the row rather than written into it: it is punctuation for the eye. */
.codigo-areas__row {
	border-block-start: 1px solid var(--wp--custom--divider);
	position: relative;
}

.codigo-areas__row > * {
	margin-block: 0;
}

.codigo-areas__name {
	font-size: 17.5px;
	padding-inline-start: 21px;
}

.codigo-areas__name::before {
	background-color: var(--wp--preset--color--aqua);
	block-size: 8px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: 8px;
	inset-block-start: 0.6em;
	inset-inline-start: 0;
	position: absolute;
}

.codigo-areas__note {
	line-height: 1.5;
	padding-inline-start: 21px;
}

/* ── The fine print ──────────────────────────────────────────────────────
   A cream band across the page, with the decorative disc bleeding off its top
   corner — the same device the plan band uses, at the size the design draws
   here. The head row above the cards puts the heading on the wide side and the
   standfirst with the financing link on the narrow one, both sitting on the
   same baseline. */
.codigo-fineprint {
	overflow: hidden;
	position: relative;
}

.codigo-fineprint::before {
	background-color: var(--wp--preset--color--aqua);
	block-size: 300px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: 300px;
	inset-block-start: -110px;
	inset-inline-end: -80px;
	opacity: 0.32;
	pointer-events: none;
	position: absolute;
}

/* Lifts the band's own content clear of that disc. */
.codigo-fineprint > * {
	position: relative;
}

.codigo-fineprint__head {
	align-items: end;
	grid-template-columns: 1.1fr 0.9fr;
}

.codigo-fineprint__head > * {
	margin-block: 0;
}

/* The design hangs the link off the standfirst's own edge rather than
   stretching it, and leaves 25px between the two. */
.codigo-fineprint__aside {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

.codigo-fineprint__aside > * {
	margin-block: 0;
}

.codigo-fineprint__lede {
	max-inline-size: min(44ch, 100%);
}

/* The design draws this one smaller and tighter than the shared secondary —
   15.5px on 14/24 rather than 17px on 15/30. Five classes deep: the shared
   outline rule above is four, and this has to clear it without `!important`. */
:root .codigo-fineprint .codigo-fineprint__actions .is-style-outline > .wp-block-button__link {
	font-size: 15.5px;
	padding: 14px 24px;
}

/* ── Before & after ──────────────────────────────────────────────────────── */
.codigo-results__note {
	max-inline-size: min(34ch, 100%);
}

/* ── Treatment area hero ─────────────────────────────────────────────────── */
.codigo-area-hero {
	overflow: hidden;
	position: relative;
}

.codigo-area-hero::before {
	background-color: var(--wp--preset--color--aqua);
	block-size: 340px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: 340px;
	inset-block-start: -120px;
	inset-inline-end: -90px;
	opacity: 0.32;
	pointer-events: none;
	position: absolute;
}

.codigo-area-hero > * {
	position: relative;
}

.codigo-area-hero > .wp-block-group > * {
	margin-block: 0;
}

/* The rhythm the file draws down this stack: a gap under the breadcrumbs, a
   smaller one under the pill, a smaller one again under the h1. Core's block
   gap is a single value for the whole group, so the three steps are stated
   here and the rule above zeroes the one gap core would otherwise apply.
   Stated as margin-block-end rather than -start so the pill keeps its space
   from the crumbs whether or not the h1 below it wraps. */
.codigo-area-hero > .wp-block-group > .codigo-crumbs {
	margin-block-end: var(--wp--preset--spacing--40);
}

.codigo-area-hero > .wp-block-group > .codigo-area-hero__tag {
	margin-block-end: var(--wp--preset--spacing--30);
}

.codigo-area-hero > .wp-block-group > h1 {
	margin-block-end: var(--wp--preset--spacing--20);
}

.codigo-area-hero__tag {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--divider);
	font-size: 13px;
	font-weight: 700;
	padding: 8px 16px;
}

.codigo-area-hero__lede {
	max-inline-size: min(56ch, 100%);
}

/* ── Goal chips ──────────────────────────────────────────────────────────
   The same control as the homepage's goal tiles, in the design's other shape:
   on a category page the goals are a filter bar across the top rather than a
   section of their own, so they are pills on one line instead of tiles in a
   grid. The hooks are identical — `.codigo-goals` and `.codigo-goal` — so
   assets/js/treatments.js drives both without knowing which it is looking at,
   and the active state, the hidden-when-empty rule and the focus ring are all
   inherited from the block above. Only the shape is restated. */
:root .wp-block-buttons.codigo-goals--chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	grid-auto-rows: auto;
	grid-template-columns: none;
}

.codigo-goals--chips .codigo-goal {
	inline-size: auto;
}

.codigo-goals--chips .codigo-goal > .wp-block-button__link {
	align-items: center;
	/* The design's 11px block padding on a 15px/1.3 line comes to 44.5px with
	   its 1.5px edge; Chrome rounds that edge down to one device pixel and the
	   control lands at 43.5. The floor is stated so it cannot, and it costs
	   half a pixel of height nobody can see. */
	min-block-size: 44px;
	block-size: auto;
	border-radius: var(--wp--custom--radius--pill);
	flex-direction: row;
	font-size: 15px;
	padding-block: 11px;
	padding-inline: 20px;
}

/* No count on a chip. The design puts one number on this page — the line above
   the grid, which the script keeps true — and repeating it six times across
   the filter bar is noise, not information. */
.codigo-goals--chips .codigo-goal__count {
	display: none;
}

/* ── Category grid: the browse card, not the homepage card ───────────────
   `patterns/area-treatments.php` reuses `codigo-treatments` so it inherits the
   filter script, the count line and the empty state. What it must not inherit
   is the homepage file's paint: that card is a borderless shadow at the 32px
   card radius in a 16px gutter, and this one is an edged card at the 40px
   shell radius in the file's 25px gutter. `.codigo-area-grid` is the hook the
   pattern already carries for exactly this; everything below restates a value
   the shared section set differently, and nothing needs `!important` because
   each selector simply adds the section class to the one it is answering. */
.codigo-area-grid.codigo-treatments {
	/* The category page gives this section the full section step. The homepage
	   halves it because the goal tiles sit directly above; here the hero does. */
	padding-block-start: var(--wp--preset--spacing--80);
}

.codigo-area-grid .wp-block-post-template {
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.codigo-area-grid.codigo-treatments .is-style-card {
	border: 1px solid var(--wp--custom--divider);
	border-radius: var(--wp--custom--radius--shell);
}

.codigo-area-grid.codigo-treatments .is-style-card:hover,
.codigo-area-grid.codigo-treatments .is-style-card:focus-within {
	border-color: var(--wp--custom--divider);
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-4px);
}

/* The file sets the browse card a step above the homepage card's 22px. */
.codigo-area-grid .wp-block-post-title {
	font-size: 25px;
}

.codigo-area-grid .wp-block-post-excerpt {
	font-size: 15.5px;
}

.codigo-area-card__price {
	font-size: 15px;
}

.codigo-area-card__more {
	font-size: 13.5px;
}

.codigo-area-grid .codigo-treatments__count {
	font-size: 14.5px;
}

@media (max-width: 1024px) {
	.codigo-area-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.codigo-area-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* ── Treatment card, category shape ──────────────────────────────────────
   The homepage card leads with a category badge over the photograph and ends
   in two buttons. This one is the browse card: goals rather than a badge, and
   a price line where the buttons were, because the whole card is the link. */
/* The design draws this card as one control — the whole tile opens the
   treatment. Here that is one link, the title's, stretched over the card by the
   pseudo-element below: the accessible name stays the treatment's name, the
   thumb gets the whole tile instead of the 29px the title text occupies, and
   the card carries no second link to the same place. */
.codigo-area-card {
	display: flex;
	flex-direction: column;
	position: relative;
}

.codigo-area-card .wp-block-post-title a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.codigo-area-card__media {
	margin-block: 0;
}

.codigo-area-card__media img {
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.codigo-area-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.codigo-area-card__body > * {
	margin-block: 0;
}

.codigo-area-card .wp-block-post-title {
	line-height: 1.15;
}

.codigo-area-card .wp-block-post-title a {
	text-decoration: none;
}

/* The blurb takes the slack, so the price line lands on the bottom edge of
   every card in the row whatever length the excerpts run to. */
.codigo-area-card__blurb {
	flex: 1;
	line-height: 1.55;
	text-wrap: pretty;
}

/* The chips are drawn by codigo-extra/term-chips, which is where the design's
   paint for them lives — labels rather than links, because the card is already
   the control. All the card adds is the step above them. */
.codigo-area-card__tags {
	padding-block-start: 4px;
}

.codigo-area-card__foot {
	border-block-start: 1px solid var(--wp--custom--divider);
}

.codigo-area-card__more {
	/* Same line, same colour, same caveat as the concern card's. */
	color: var(--wp--preset--color--spring);
}

.codigo-area-card__more::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 6px;
}

/* ── Treatment pages: tablet ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.codigo-treatment-hero__grid,
	.codigo-booking,
	.codigo-how__grid,
	.codigo-fineprint__head {
		grid-template-columns: 1fr;
	}

	/* The photograph leads the row when the row becomes a column — the design's
	   rule for every split on the site. */
	.codigo-how__media {
		order: -1;
	}

	.codigo-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Treatment pages: phone ──────────────────────────────────────────────── */
@media (max-width: 640px) {
	.codigo-treatment-hero__media img {
		aspect-ratio: 4 / 3;
	}

	.codigo-benefits__grid {
		grid-template-columns: 1fr;
	}

	.codigo-fineprint::before {
		block-size: 200px;
		inline-size: 200px;
		inset-block-start: -80px;
	}

	.codigo-area-hero::before {
		block-size: 220px;
		inline-size: 220px;
		inset-block-start: -90px;
	}
}

/* ── Concern pages ─────────────────────────────────────────────────────────
   templates/single-codigo_condition.html and archive-codigo_condition.html.
   Same token set as the treatment pages above (body-scoped custom
   properties already extended to include these two body classes) — this
   section carries only what is unique to the concern templates: the two
   hero variants, the self-check and why-it-happens splits, the FAQ grid, the
   index search and its category/trust bands. */

body.single-codigo_condition h1.wp-block-post-title,
body.single-codigo_condition h1.wp-block-heading {
	font-size: var(--lvt-h1);
	line-height: var(--lvt-h1-lh);
}

body.post-type-archive-codigo_condition h1.wp-block-heading {
	font-size: var(--lvt-h1-index, var(--lvt-h1));
	line-height: var(--lvt-h1-index-lh, var(--lvt-h1-lh));
}

body.single-codigo_condition h2.wp-block-heading,
body.post-type-archive-codigo_condition h2.wp-block-heading {
	font-size: var(--lvt-h2, clamp(30px, 3.7vw, 48px));
	line-height: var(--lvt-h2-lh, 1.08);
}

/* ── Detail hero ──────────────────────────────────────────────────────── */

.codigo-cx-hero__tags .is-style-pill:empty {
	display: none;
}

.codigo-cx-hero__lede {
	color: var(--wp--custom--ink--muted);
	max-inline-size: 44ch;
}

.codigo-cx-hero__facts {
	border-block-start: 1px solid var(--wp--custom--divider);
}

.codigo-cx-hero__fact-value {
	font-size: 26px;
}

.codigo-cx-hero__fact-label {
	color: var(--wp--custom--ink--soft);
	font-size: 13.5px;
	line-height: 1.4;
	margin: 0;
}

.codigo-cx-hero__media img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

/* ── Self-check + "often mistaken for" ───────────────────────────────────
   The design's 1.15fr .85fr split. core/group's grid layout only offers
   equal columns from the inserter, so the ratio is declared here against
   the class the pattern already carries. */

.codigo-cx-selfcheck-grid {
	align-items: start;
	grid-template-columns: 1.15fr 0.85fr;
}

.codigo-cx-mistaken__label {
	color: var(--wp--custom--ink--note);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

.codigo-cx-mistaken__row {
	border-block-start: 1px solid var(--wp--custom--divider);
	padding-block: 15px;
}

.codigo-cx-mistaken__name {
	font-size: 17.5px;
	font-weight: 700;
	margin: 0;
}

.codigo-cx-mistaken__note {
	color: var(--wp--custom--ink--quiet);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	text-wrap: pretty;
}

.codigo-cx-mistaken__foot {
	color: var(--wp--custom--ink--soft);
	line-height: 1.55;
	text-wrap: pretty;
}

/* ── Why it happens ───────────────────────────────────────────────────── */

.codigo-cx-why__grid {
	align-items: center;
	grid-template-columns: 0.95fr 1.05fr;
}

.codigo-cx-why__media {
	aspect-ratio: 5 / 4.2;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--shell);
	overflow: hidden;
	position: relative;
}

.codigo-cx-why__media > .wp-block-image,
.codigo-cx-why__media > .wp-block-image img {
	block-size: 100%;
	inline-size: 100%;
	margin: 0;
	object-fit: cover;
}

.codigo-cx-why__copy {
	color: var(--wp--custom--ink--strong);
	font-size: 18.5px;
	line-height: 1.66;
	max-inline-size: 52ch;
}

.codigo-cx-why__point {
	align-items: flex-start;
}

.codigo-cx-why__num {
	align-items: center;
	background: var(--wp--preset--color--base);
	border-radius: 999px;
	block-size: 30px;
	display: flex;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 700;
	inline-size: 30px;
	justify-content: center;
	margin: 0;
}

.codigo-cx-why__text {
	color: var(--wp--custom--ink--strong);
	font-size: 16.5px;
	line-height: 1.55;
	margin: 0;
	text-wrap: pretty;
}

/* A concern whose three treatment slots are all empty, unpublished or
   pointing at a treatment this install does not have renders no cards at
   all — codigo-extra/condition-treatments returns nothing rather than an
   empty list. Without this rule the kicker, heading and "also part of the
   plan" bar would stand over a gap; with it the whole section is not there,
   which is what the design means by "3-up, or fewer". */
#treatments:not(:has(.codigo-cx-tx)) {
	display: none;
}

/* ── Matching treatments: support bar ────────────────────────────────── */

.codigo-cx-support {
	border-radius: var(--wp--custom--radius--shell);
	/* dc.html line 445: `margin-top:var(--space-3)` — 25px, not the 20px of
	   --space-4. The section's own blockGap (spacing-50, 34px) is right for
	   the head-row-to-grid gap above but too wide for this one, so it is
	   overridden here rather than left to apply everywhere. */
	margin-block-start: var(--wp--preset--spacing--40);
}

.codigo-cx-support__label {
	color: var(--wp--custom--ink--note);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.codigo-cx-support__pills .is-style-pill {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--divider);
}

.codigo-cx-support__note {
	margin-inline-start: auto;
	max-inline-size: 34ch;
}

/* ── Reviews band ─────────────────────────────────────────────────────── */

.codigo-cx-reviews-band {
	overflow-x: clip;
	position: relative;
}

.codigo-cx-reviews-band::before {
	background: var(--wp--preset--color--aqua);
	block-size: 300px;
	border-radius: 999px;
	content: "";
	inline-size: 300px;
	inset-block-start: -110px;
	inset-inline-end: -80px;
	opacity: 0.32;
	position: absolute;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.codigo-cx-faq {
	grid-template-columns: 0.9fr 1.1fr;
}

.codigo-cx-faq__row {
	border-block-start: 1px solid var(--wp--custom--divider);
}

.codigo-cx-faq__row > summary {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-size: 19px;
	font-weight: 700;
	gap: var(--wp--preset--spacing--40);
	justify-content: space-between;
	line-height: 1.4;
	list-style: none;
	padding-block: 22px;
	text-wrap: pretty;
}

.codigo-cx-faq__row > summary::-webkit-details-marker {
	display: none;
}

/* The plus that turns into a cross. Drawn, not an icon element: a Details
   block's summary is plain text, with nowhere for an <svg> to live. */
.codigo-cx-faq__row > summary::after {
	background:
		linear-gradient(currentColor, currentColor) center / 14px 2.75px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2.75px 14px no-repeat;
	block-size: 18px;
	content: "";
	flex-shrink: 0;
	inline-size: 18px;
	margin-block-start: 5px;
	transition: transform 0.16s;
}

.codigo-cx-faq__row[open] > summary::after {
	transform: rotate(45deg);
}

.codigo-cx-faq__list > .codigo-cx-faq__row {
	margin-block: 0;
}

.codigo-cx-faq__a {
	color: var(--wp--custom--ink--muted);
	font-size: 17px;
	line-height: 1.65;
	margin: 0;
	max-inline-size: 62ch;
	padding-block-end: 26px;
	text-wrap: pretty;
}

/* Same reasoning as #treatments above: an orphan concern (the only one in
   its group, or the only one with siblings still in draft) leaves
   codigo-extra/condition-related with nothing to draw. */
.codigo-cx-related:not(:has(.codigo-cx-card)),
.codigo-cx-reviews-band:not(:has(.codigo-cx-reviews)) {
	display: none;
}

/* The treatment page's three sections whose body is a block that can have
   nothing to draw: no skin goals, no packages written, no claims written. The
   heading would otherwise stand over empty space. Front end only — on the
   editor canvas the section has to stay visible to be filled in. */
body:not(.editor-styles-wrapper) .codigo-treatment-related:not(:has(.codigo-concerns)),
body:not(.editor-styles-wrapper) .codigo-packages:not(:has(.codigo-packages__body)),
body:not(.editor-styles-wrapper) .codigo-benefits:not(:has(.codigo-benefits__body)) {
	display: none;
}

/* ── Closing CTA (shared by the detail and index versions) ──────────────── */

.codigo-cx-cta h2 {
	max-inline-size: min(22ch, 100%);
}

/* ── Concerns index: hero ────────────────────────────────────────────── */

.codigo-cx-index-hero {
	overflow-x: clip;
	position: relative;
}

.codigo-cx-index-hero::before {
	background: var(--wp--preset--color--aqua);
	block-size: 340px;
	border-radius: 999px;
	content: "";
	inline-size: 340px;
	inset-block-start: -120px;
	inset-inline-end: -90px;
	opacity: 0.32;
	position: absolute;
}

.codigo-cx-index-hero > .wp-block-group {
	position: relative;
}

.codigo-cx-index-hero__tag {
	margin-block: var(--wp--preset--spacing--30) 0;
}

.codigo-cx-index-hero__lede {
	color: var(--wp--custom--ink--muted);
	max-inline-size: 56ch;
}

.codigo-cx-index-hero__head {
	align-items: end;
	grid-template-columns: 1.1fr 0.9fr;
}

.codigo-cx-search__label {
	color: var(--wp--custom--ink--note);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.codigo-cx-search__field {
	position: relative;
}

.codigo-cx-search__input {
	background: var(--wp--preset--color--base);
	border: 1.5px solid transparent;
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	font-size: 16.5px;
	inline-size: 100%;
	padding: 17px 22px;
}

.codigo-cx-search__input:focus-visible {
	border-color: var(--wp--preset--color--aqua);
	outline: none;
}

.codigo-cx-index-hero__anchors {
	align-items: center;
}

.codigo-cx-index-hero__result {
	color: var(--wp--custom--ink--soft);
	font-size: 14.5px;
}

/* ── Concerns index: category shortcuts ─────────────────────────────── */

.codigo-cx-categories {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The tile is blocks (name, note, count) so it can be typed into; the name's
   link is stretched over the whole tile, the same one-link card as
   .codigo-area-card. */
.codigo-cx-categories__tile {
	align-items: center;
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	padding: 24px 26px;
	position: relative;
	transition: background-color 0.16s, transform 0.18s;
}

.codigo-cx-categories__tile > *,
.codigo-cx-categories__body > * {
	margin-block: 0;
}

.codigo-cx-categories__name a {
	color: inherit;
	text-decoration: none;
}

.codigo-cx-categories__name a::after {
	border-radius: inherit;
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.codigo-cx-categories__tile:hover,
.codigo-cx-categories__tile:focus-within {
	background: var(--wp--preset--color--aqua-tint);
	transform: translateY(-3px);
}

.codigo-cx-categories__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.codigo-cx-categories__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 23px;
	line-height: 1.15;
}

.codigo-cx-categories__note {
	color: var(--wp--custom--ink--soft);
	font-size: 14.5px;
	line-height: 1.45;
}

.codigo-cx-categories__count {
	color: var(--wp--preset--color--spring);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
}

.codigo-cx-categories__count::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 6px;
}

[dir="rtl"] .codigo-cx-categories__count::after {
	transform: scaleX(-1);
}

/* ── Concerns index: trust strip ─────────────────────────────────────── */

.codigo-cx-trust {
	border-block-start: 1px solid var(--wp--custom--divider);
	/* dc.html line 277: `padding-top:var(--space-6)` — 34px, not the 48px of
	   --space-8. */
	padding-block-start: var(--wp--preset--spacing--50);
}

.codigo-cx-trust__item {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.codigo-cx-trust__item > * {
	margin-block: 0;
}

.codigo-cx-trust__big {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 34px;
	line-height: 1;
}

.codigo-cx-trust__small {
	color: var(--wp--custom--ink--quiet);
	font-size: 15px;
	line-height: 1.5;
	text-wrap: pretty;
}

/* ── Concern pages: tablet ────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.codigo-cx-hero__grid,
	.codigo-cx-selfcheck-grid,
	.codigo-cx-why__grid,
	.codigo-cx-not-listed__grid,
	.codigo-cx-faq,
	.codigo-cx-index-hero__head {
		grid-template-columns: 1fr !important;
	}

	.codigo-cx-why__media {
		order: -1;
	}

	.codigo-cx-support__note {
		margin-inline-start: 0;
	}

	.codigo-cx-categories,
	.codigo-cx-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Concern pages: phone ─────────────────────────────────────────────── */
@media (max-width: 640px) {
	.codigo-cx-hero__media img {
		aspect-ratio: 4 / 3;
	}

	.codigo-cx-categories,
	.codigo-cx-trust {
		grid-template-columns: 1fr;
	}

	/* dc.html line 99 steps --space-6 to 24px at this width; --space-6 is not
	   itself body-scoped like --lv-sec, so the strip's own padding is restated
	   here rather than reaching for a preset that every other page also uses. */
	.codigo-cx-trust {
		padding-block-start: 24px;
	}

	.codigo-cx-index-hero::before {
		block-size: 220px;
		inline-size: 220px;
		inset-block-start: -90px;
	}

	.codigo-cx-reviews-band::before {
		block-size: 220px;
		inline-size: 220px;
		inset-block-start: -90px;
	}
}

/* ══ Inner pages: suites, locations, about, journal ══════════════════════
   design/v2/*. One set of component classes (`codigo-pg-*`) shared by the
   four pages, then each page's own pieces. Layout is on classes, not core's
   grid support, so the columns can reorder and collapse at the design's two
   breakpoints (1024px, 640px) and so nothing is set with a physical side. */

/* The flow layout's own gap is replaced here by the design's measured
   spacing on each block. */
:where(.codigo-pg-hero) .alignwide > *,
.codigo-pg-hero__copy > *,
.codigo-pg-split > * > *,
.codigo-pg-shell > *,
.codigo-pg-point > *,
.codigo-pg-tile > *,
.codigo-pg-step > *,
.codigo-pg-figure > *,
.codigo-suite__body > *,
.codigo-suite__rent > *,
.codigo-clinic__body > *,
.codigo-clinic__address > *,
.codigo-person__body > *,
.codigo-jfeature__copy > *,
.codigo-jcard__body > * {
	margin-block: 0;
}

.codigo-pg-center {
	text-align: center;
}

/* ── Hero ── */
.codigo-pg-hero {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
}

.codigo-pg-hero--short {
	padding-block-end: 64px;
}

/* The shared crumb pads its links out to a 44px target; the negative margin
   puts the line back where the design draws it, as the treatment hero does. */
.codigo-pg-hero .codigo-pg-crumbs {
	margin-block-end: var(--wp--preset--spacing--50);
}

.codigo-pg-crumbs.codigo-crumbs > * {
	margin-block: -13px;
}

.codigo-pg-crumbs a {
	color: var(--wp--custom--ink--dim);
	text-decoration: none;
}

.codigo-pg-hero .is-style-eyebrow {
	margin-block-end: var(--wp--preset--spacing--30);
}

.codigo-pg-title {
	font-size: clamp(40px, 5.4vw, 72px);
	letter-spacing: -0.03em;
	line-height: 1.03;
	margin-block-end: var(--wp--preset--spacing--40);
	max-inline-size: min(18ch, 100%);
}

.codigo-pg-title--short {
	font-size: clamp(40px, 5.2vw, 68px);
	max-inline-size: min(15ch, 100%);
}

.codigo-pg-hero--wide-title .codigo-pg-title {
	max-inline-size: min(20ch, 100%);
}

.codigo-pg-lede {
	color: var(--wp--custom--ink--muted);
	font-size: 20px;
	line-height: 1.62;
	margin-block-end: var(--wp--preset--spacing--50);
	max-inline-size: 52ch;
	text-wrap: pretty;
}

.codigo-suites-hero .codigo-pg-lede {
	max-inline-size: 46ch;
}

.codigo-pg-hero--wide-title .codigo-pg-lede {
	margin-block-end: 0;
}

.codigo-pg-jumps,
.codigo-pg-actions {
	gap: 12px;
}

.codigo-pg-hero .codigo-pg-actions {
	margin-block-end: var(--wp--preset--spacing--50);
}

/* ── Buttons, at the sizes the design writes on each ── */
.wp-block-button.codigo-pg-jump > .wp-block-button__link {
	font-size: 15px;
}

.wp-block-button.codigo-pg-btn-lg > .wp-block-button__link {
	font-size: 16px;
	padding: 16px 26px;
}

.wp-block-button.codigo-pg-btn-md > .wp-block-button__link {
	font-size: 15.5px;
	padding: 14px 24px;
}

.codigo-pg-stack {
	gap: 12px;
}

.codigo-pg-stack > .wp-block-button {
	inline-size: 100%;
}

.wp-block-button.codigo-pg-btn-block > .wp-block-button__link {
	font-size: 17px;
	inline-size: 100%;
	justify-content: center;
	padding: 18px;
}

/* The outlined button on the ink panel: white type, a light rule. */
:root .codigo-pg-dark .wp-block-button.codigo-pg-on-dark > .wp-block-button__link {
	background-color: transparent;
	border: 1.5px solid var(--wp--custom--on-dark--line);
	color: var(--wp--preset--color--base);
}

:root .codigo-pg-dark .wp-block-button.codigo-pg-on-dark > .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
}

/* ── Figures under the suites hero ── */
.codigo-pg-figures {
	border-block-start: 1px solid var(--wp--custom--divider);
	gap: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
}

.codigo-pg-figure {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.codigo-pg-figure__n {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	line-height: 1.2;
}

.codigo-pg-figure__l {
	color: var(--wp--custom--ink--soft);
	font-size: 14px;
}

/* ── Two-up split and its column ratios ── */
.codigo-pg-split {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.codigo-pg-split--terms {
	align-items: start;
	grid-template-columns: 0.9fr 1.1fr;
}

.codigo-pg-split--form {
	align-items: start;
	grid-template-columns: 0.85fr 1.15fr;
}

.codigo-pg-split--cta {
	grid-template-columns: 1.15fr 0.85fr;
}

.codigo-pg-split--media {
	grid-template-columns: 0.95fr 1.05fr;
}

.codigo-pg-split--copy {
	grid-template-columns: 1.05fr 0.95fr;
}

/* ── Grids ── */
.codigo-pg-grid {
	display: grid;
	gap: 22px;
}

.codigo-pg-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.codigo-pg-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.codigo-pg-grid > * {
	margin-block: 0;
}

/* ── Photograph frames ──
   A tinted box that holds the design's proportions while it is empty, so
   the page reads before the photography arrives. */
.codigo-pg-frame {
	background-color: var(--wp--preset--color--aqua-tint);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	position: relative;
}

.codigo-pg-frame > * {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	margin: 0;
	position: absolute;
}

.codigo-pg-frame a {
	block-size: 100%;
	display: block;
}

.codigo-pg-frame img {
	block-size: 100%;
	border-radius: 0;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.codigo-pg-frame img:not([src]) {
	visibility: hidden;
}

.codigo-pg-frame--lift {
	border-radius: var(--wp--custom--radius--shell);
	box-shadow: var(--wp--preset--shadow--lg);
}

.codigo-pg-frame--white {
	background-color: var(--wp--preset--color--base);
}

.codigo-pg-frame--43 {
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--shell);
}

.codigo-pg-frame--program {
	aspect-ratio: 4 / 3.6;
}

/* ── Type ── */
.codigo-pg-h2 {
	font-size: clamp(30px, 3.6vw, 44px);
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin-block: 0 var(--wp--preset--spacing--40);
}

.codigo-pg-h2--gap {
	margin-block-end: var(--wp--preset--spacing--50);
}

.codigo-pg-h2--wide {
	margin-block-end: var(--wp--preset--spacing--60);
	max-inline-size: min(22ch, 100%);
}

.codigo-pg-h2--short {
	max-inline-size: min(18ch, 100%);
}

.codigo-pg-split--form .codigo-pg-h2--short {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.06;
	max-inline-size: min(14ch, 100%);
}

.codigo-pg-h2--mid {
	font-size: clamp(30px, 3.6vw, 46px);
	max-inline-size: min(18ch, 100%);
}

.codigo-pg-h2--cta {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.06;
	max-inline-size: min(20ch, 100%);
}

.codigo-pg-h2--lg {
	font-size: clamp(32px, 3.9vw, 50px);
	max-inline-size: min(26ch, 100%);
}

.codigo-pg-h2--news {
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	margin-block-end: var(--wp--preset--spacing--20);
}

.codigo-pg-intro {
	color: var(--wp--custom--ink--body);
	font-size: 18px;
	line-height: 1.62;
	margin-block-end: var(--wp--preset--spacing--50);
	max-inline-size: 56ch;
	text-wrap: pretty;
}

.codigo-pg-intro--narrow {
	max-inline-size: 40ch;
}

.codigo-pg-split--terms .codigo-pg-intro--narrow {
	margin-block-end: 0;
}

.codigo-pg-intro--flush {
	margin-block-end: 0;
	max-inline-size: 46ch;
}

.codigo-pg-intro--program {
	color: var(--wp--custom--ink--muted);
	margin-block-end: var(--wp--preset--spacing--30);
	max-inline-size: 48ch;
}

/* The design's tag: tinted, tight, heavy. */
.codigo-pg-tag {
	background-color: var(--wp--preset--color--aqua-tint);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	inline-size: fit-content;
	line-height: 1.3;
	padding: 6px 13px;
}

.codigo-pg-tag:empty {
	display: none;
}

/* ── Label / value rows ── */
.codigo-pg-kv {
	gap: var(--wp--preset--spacing--30);
}

.codigo-pg-kv > * {
	margin-block: 0;
}

.codigo-pg-kv__k {
	color: var(--wp--custom--ink--dim);
}

.codigo-pg-kv__v {
	font-weight: 600;
	text-align: end;
}

/* ── Shell panels ── */
.codigo-pg-shell {
	padding: var(--wp--preset--spacing--60);
}

.codigo-pg-dark .is-style-eyebrow {
	color: var(--wp--preset--color--aqua);
}

.codigo-pg-dark .wp-block-heading {
	color: var(--wp--preset--color--base);
}

.codigo-pg-dark .codigo-pg-intro {
	color: var(--wp--custom--on-dark--muted);
}

.codigo-pg-shell .is-style-eyebrow,
.codigo-pg-split > * > .is-style-eyebrow,
.codigo-lavie-section > .alignwide > .is-style-eyebrow {
	margin-block-end: var(--wp--preset--spacing--30);
}

/* ── Included points (on ink) ── */
.codigo-pg-points {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.codigo-pg-point {
	border-block-start: 1px solid var(--wp--custom--on-dark--line);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block-start: var(--wp--preset--spacing--30);
}

.codigo-pg-point__t {
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 21px;
	line-height: 1.25;
}

.codigo-pg-point__b {
	color: var(--wp--custom--on-dark--muted);
	font-size: 14.5px;
	line-height: 1.55;
	text-wrap: pretty;
}

/* ── Tinted tiles ── */
.codigo-pg-tile {
	background-color: var(--wp--preset--color--aqua-tint);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--wp--preset--spacing--50);
}

.codigo-pg-tile__t,
.codigo-pg-step__t {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	line-height: 1.2;
}

.codigo-pg-tile__b,
.codigo-pg-step__b {
	color: var(--wp--custom--ink--body);
	font-size: 15px;
	line-height: 1.55;
	text-wrap: pretty;
}

/* ── Numbered steps ── */
.codigo-pg-step {
	border: 1px solid var(--wp--custom--divider);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--wp--preset--spacing--50);
}

.codigo-pg-step__n {
	align-items: center;
	background-color: var(--wp--preset--color--aqua);
	block-size: 40px;
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	font-size: 16px;
	font-weight: 700;
	inline-size: 40px;
	justify-content: center;
}

/* ── Ruled rows (lease terms) ── */
.codigo-pg-rules {
	border-block-start: 1px solid var(--wp--custom--divider);
}

.codigo-pg-rules > .codigo-pg-kv {
	border-block-end: 1px solid var(--wp--custom--divider);
	font-size: 16px;
	gap: var(--wp--preset--spacing--50);
	margin-block: 0;
	padding-block: 18px;
}

.codigo-pg-rules .codigo-pg-kv__k {
	color: var(--wp--custom--ink--soft);
}

.codigo-pg-rules .codigo-pg-kv__v {
	max-inline-size: 32ch;
}

/* ── Centred FAQ ── */
/* Three classes: core's constrained layout sizes every `.alignwide` child
   at two, and this column is the design's 900px box, not the wide one. */
.is-layout-constrained > .alignwide.codigo-pg-narrow {
	margin-inline: auto;
	max-inline-size: 832px;
}

.codigo-pg-faq {
	border-block-end: 1px solid var(--wp--custom--divider);
}

.codigo-pg-faq .codigo-cx-faq__row > summary {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	padding-inline: 4px;
}

/* The design's plus here is a light glyph, not the concern page's heavy one. */
.codigo-pg-faq .codigo-cx-faq__row > summary::after {
	background:
		linear-gradient(currentColor, currentColor) center / 13px 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 13px no-repeat;
	color: var(--wp--preset--color--spring);
}

.codigo-pg-faq .codigo-cx-faq__a {
	color: var(--wp--custom--ink--body);
	font-size: 16px;
	line-height: 1.6;
	max-inline-size: 64ch;
	padding-block-end: 22px;
	padding-inline: 4px;
}

/* ── Contact lines ── */
.codigo-pg-contact {
	display: flex;
	flex-direction: column;
	font-size: 16px;
	gap: 10px;
}

.codigo-pg-contact > * {
	margin-block: 0;
}

.codigo-pg-contact__phone {
	font-weight: 700;
}

.codigo-pg-contact__address {
	color: var(--wp--custom--ink--soft);
}

/* Space between the last section and the footer, on every page. The
   footer's own top margin is set in parts/footer.html's block attributes but
   never reached its saved markup, so pages ran straight into it; it is set
   here instead. `codigo-pg-last` used to fake it on the suites and journal
   pages and is kept, empty, so their saved content still matches. */
.codigo-lavie-footer {
	margin-block-start: var(--wp--preset--spacing--80);
}

/* ── Suites: hero and cards ── */
.codigo-suites-hero__media {
	aspect-ratio: 4 / 4.2;
}

.codigo-suite,
.codigo-person {
	border-radius: var(--wp--custom--radius--card);
	display: flex;
	flex-direction: column;
}

/* These cards are not links; the design does not lift them. */
.codigo-suite:hover,
.codigo-suite:focus-within,
.codigo-person:hover,
.codigo-person:focus-within {
	border-color: var(--wp--custom--divider);
	box-shadow: var(--wp--preset--shadow--sm);
	transform: none;
}

.codigo-suite > *,
.codigo-person > * {
	margin-block: 0;
}

.codigo-suite__media {
	aspect-ratio: 16 / 10;
	border-radius: 0;
}

.codigo-suite__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
}

.codigo-suite__head {
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
}

.codigo-suite__name {
	font-size: 28px;
	line-height: 1.1;
}

.codigo-suite__desc {
	color: var(--wp--custom--ink--body);
	font-size: 16px;
	line-height: 1.6;
	text-wrap: pretty;
}

.codigo-suite__specs {
	border-block-start: 1px solid var(--wp--custom--divider);
	display: flex;
	flex-direction: column;
	font-size: 15px;
	gap: 10px;
	padding-block-start: var(--wp--preset--spacing--30);
}

.codigo-suite__specs > * {
	margin-block: 0;
}

.codigo-suite__price {
	background-color: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--md);
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	margin-block-start: auto;
	padding: 18px 20px;
}

.codigo-suite__price > * {
	margin-block: 0;
}

.codigo-suite__rent {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.codigo-suite__from {
	color: var(--wp--custom--ink--dim);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.codigo-suite__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	line-height: 1.1;
}

.codigo-suite__per {
	color: var(--wp--custom--ink--dim);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
}

.wp-block-button.codigo-suite__pick > .wp-block-button__link {
	font-size: 15px;
	padding: 13px 22px;
}

/* ── Suites: gallery mosaic ── */
.codigo-gallery {
	display: grid;
	gap: 22px;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 260px 260px;
}

.codigo-gallery > * {
	margin-block: 0;
}

.codigo-gallery > :first-child {
	grid-row: span 2;
}

/* ── Locations: the clinics ── */
.codigo-clinics__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
	list-style: none;
	margin: 0;
	padding: 0;
}

.codigo-clinic {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: 1.05fr 0.95fr;
	scroll-margin-block-start: 100px;
}

.codigo-clinics__list > li:nth-child(even) .codigo-clinic {
	grid-template-columns: 0.95fr 1.05fr;
}

.codigo-clinic > * {
	margin-block: 0;
}

.codigo-clinic__media {
	aspect-ratio: 4 / 3.4;
}

.codigo-clinic__head {
	gap: 10px;
	margin-block-end: var(--wp--preset--spacing--30);
}

.codigo-clinic__head > * {
	margin-block: 0;
}

.codigo-clinic__name {
	line-height: 1.06;
	margin-block-end: 0;
}

.codigo-badge-sand .codigo-clinic__badge {
	background-color: var(--wp--preset--color--sand);
}

.codigo-clinic__address {
	color: var(--wp--custom--ink--quiet);
	font-size: 17px;
	line-height: 1.6;
	margin-block-end: var(--wp--preset--spacing--30);
}

.codigo-clinic__meta {
	border-block-start: 1px solid var(--wp--custom--divider);
	color: var(--wp--custom--ink--muted);
	display: flex;
	flex-direction: column;
	font-size: 15.5px;
	gap: 11px;
	margin-block-end: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
}

.codigo-clinic__meta > * {
	margin-block: 0;
}

/* Same ink held back, not a lighter ink, as the homepage's clinic card. */
.codigo-clinic__meta .codigo-pg-kv__k {
	color: inherit;
	opacity: 0.62;
}

.codigo-clinic__meta .codigo-pg-kv__v {
	font-weight: 400;
}

/* A clinic with a line left empty leaves no bare label behind. Front end
   only: on the canvas the row has to stay to be typed into. */
body:not(.editor-styles-wrapper) .codigo-clinic__meta .codigo-pg-kv:has(> .codigo-pg-kv__v:empty) {
	display: none;
}

.codigo-clinic__actions {
	gap: 10px;
}

/* ── About: people ── */
.codigo-team-lead {
	margin-block-end: var(--wp--preset--spacing--60);
}

.codigo-person__media {
	aspect-ratio: 1;
	border-radius: 0;
}

.codigo-person--lead .codigo-person__media {
	aspect-ratio: 4 / 3;
}

.codigo-person__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: var(--wp--preset--spacing--50);
}

.codigo-person__body > .codigo-person__name {
	font-size: 20px;
	line-height: 1.2;
	margin-block-end: 16px;
}

.codigo-person--lead .codigo-person__body > .codigo-person__name {
	font-size: 24px;
}

.codigo-person__role {
	color: var(--wp--preset--color--spring);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.codigo-person--lead .codigo-person__role {
	font-size: 14px;
}

.codigo-person__bio {
	color: var(--wp--custom--ink--body);
	font-size: 15px;
	line-height: 1.55;
	text-wrap: pretty;
}

.codigo-person--lead .codigo-person__bio {
	color: var(--wp--custom--ink--muted);
	font-size: 16px;
	line-height: 1.6;
}

.codigo-person__body > .codigo-person__based {
	border-block-start: 1px solid var(--wp--custom--divider);
	color: var(--wp--custom--ink--note);
	font-size: 13.5px;
	margin-block-start: var(--wp--preset--spacing--10);
	padding-block-start: 12px;
}

.codigo-team-head {
	font-size: 26px;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-block: 0 var(--wp--preset--spacing--50);
}

/* ── About: programs ── */
.codigo-pg-split > * > .codigo-pg-ticks {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-block-end: var(--wp--preset--spacing--50);
}

.codigo-pg-ticks > li {
	color: var(--wp--custom--ink--strong);
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	padding-inline-start: 33px;
	text-wrap: pretty;
}

/* The design's tick: a tinted disc with the mark cut out of the ink by a
   mask, so both colours stay the palette's. */
.codigo-pg-ticks > li::before {
	background-color: var(--wp--preset--color--aqua-tint);
	block-size: 22px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: 22px;
	inset-block-start: 2px;
}

.codigo-pg-ticks > li::after {
	background-color: var(--wp--preset--color--ink);
	block-size: 12px;
	content: "";
	inline-size: 12px;
	inset-block-start: 7px;
	inset-inline-start: 5px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	position: absolute;
}

.codigo-pg-split > * > .codigo-pg-program-note {
	color: var(--wp--custom--ink--dim);
	font-size: 15px;
	line-height: 1.55;
	margin-block-end: var(--wp--preset--spacing--30);
	max-inline-size: 48ch;
}

/* ── Journal ── */
.codigo-journal.codigo-lavie-section {
	padding-block-start: var(--wp--preset--spacing--60);
}

.codigo-journal .alignwide > * {
	margin-block: 0;
}

.codigo-jfilter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.codigo-jfilter__chip {
	background-color: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	padding: 11px 20px;
	transition: background-color 0.16s, color 0.16s;
	white-space: nowrap;
}

.codigo-jfilter__chip:hover {
	color: var(--wp--preset--color--ink);
}

.codigo-jfilter__chip[aria-current="true"],
.codigo-jfilter__chip[aria-pressed="true"],
.codigo-jfilter__chip[aria-pressed="true"]:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.codigo-journal .alignwide > .codigo-journal__featured {
	margin-block-start: var(--wp--preset--spacing--50);
}

.codigo-journal__featured .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.codigo-journal.is-filtered .codigo-journal__featured {
	display: none;
}

.codigo-jfeature {
	align-items: center;
	border-radius: var(--wp--custom--radius--shell);
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: 1.1fr 0.9fr;
	padding: var(--wp--preset--spacing--50);
}

.codigo-jfeature > * {
	margin-block: 0;
}

.codigo-jfeature__copy > .codigo-jfeature__cat {
	margin-block-end: var(--wp--preset--spacing--30);
	padding: 8px 16px;
}

.codigo-jfeature__cat a,
.codigo-jcard__cat a {
	color: inherit;
	position: relative;
	z-index: 1;
}

.codigo-jfeature__copy > .codigo-jfeature__title {
	font-size: clamp(28px, 3.4vw, 42px);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-block-end: var(--wp--preset--spacing--40);
	max-inline-size: min(22ch, 100%);
}

.codigo-jfeature__copy > .codigo-jfeature__excerpt {
	color: var(--wp--custom--ink--body);
	font-size: 17px;
	line-height: 1.6;
	margin-block-end: var(--wp--preset--spacing--30);
	max-inline-size: 48ch;
}

.codigo-jfeature__excerpt p,
.codigo-jcard__excerpt p {
	margin: 0;
}

.codigo-jfeature__media {
	aspect-ratio: 4 / 3;
}

/* The whole card and the whole feature are the link; the title carries it. */
.codigo-jfeature,
.codigo-jcard {
	position: relative;
}

.codigo-jfeature__title a::after,
.codigo-jcard__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.codigo-jfeature__title a,
.codigo-jcard__title a {
	color: var(--wp--preset--color--ink);
}

.codigo-jmeta {
	color: var(--wp--custom--ink--note);
	font-size: 14px;
	gap: 0;
}

.codigo-jmeta > * {
	margin-block: 0;
}

.codigo-jmeta__time:empty {
	display: none;
}

.codigo-jmeta__time:not(:empty) + .codigo-jmeta__date::before {
	content: "·";
	margin-inline: 0.35em;
}

.codigo-journal .alignwide > .codigo-journal__head {
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
}

.codigo-journal__head > * {
	margin-block: 0;
}

.codigo-journal__heading {
	font-size: 26px;
	line-height: 1.2;
}

.codigo-journal__count {
	color: var(--wp--custom--ink--note);
	font-size: 14.5px;
}

.codigo-journal__count:empty {
	display: none;
}

.codigo-journal__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.codigo-journal__grid > li {
	margin: 0;
}

.codigo-journal__grid > li[hidden],
.codigo-journal:not(.is-filtered) .codigo-journal__grid > li:first-child {
	display: none;
}

.codigo-jcard {
	display: flex;
	flex-direction: column;
	padding: 14px;
}

.codigo-jcard:hover,
.codigo-jcard:focus-within {
	border-color: var(--wp--custom--divider);
	transform: translateY(-4px);
}

.codigo-jcard > * {
	margin-block: 0;
}

.codigo-jcard__media {
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--md);
}

.codigo-jcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 6px 8px;
}

.codigo-jcard__cat {
	color: var(--wp--preset--color--spring);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.codigo-jcard__title {
	flex: 1;
	font-size: 21px;
	letter-spacing: 0;
	line-height: 1.28;
}

.codigo-jcard__excerpt {
	color: var(--wp--custom--ink--soft);
	font-size: 14px;
	line-height: 1.5;
	text-wrap: pretty;
}

.codigo-jcard__body > .codigo-jmeta {
	border-block-start: 1px solid var(--wp--custom--divider);
	font-size: 13px;
	margin-block-start: 4px;
	padding-block-start: 10px;
}

.codigo-journal__empty,
.codigo-journal__none {
	color: var(--wp--custom--ink--note);
	font-size: 16px;
	padding-block: var(--wp--preset--spacing--60);
	text-align: center;
}

.codigo-journal .alignwide > .codigo-journal__empty {
	display: none;
}

.codigo-journal.is-empty .alignwide > .codigo-journal__empty {
	display: block;
}

/* ── Inner pages: tablet ── */
@media (max-width: 1024px) {
	.codigo-pg-split,
	.codigo-pg-split--terms,
	.codigo-pg-split--form,
	.codigo-pg-split--cta,
	.codigo-pg-split--media,
	.codigo-pg-split--copy,
	.codigo-clinic,
	.codigo-clinics__list > li:nth-child(even) .codigo-clinic,
	.codigo-jfeature,
	.codigo-pg-grid--2:not(.codigo-team-lead) {
		grid-template-columns: minmax(0, 1fr);
	}

	.codigo-pg-media-first,
	.codigo-clinic__media {
		order: -1;
	}

	.codigo-pg-grid--4,
	.codigo-journal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.codigo-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
	}

	.codigo-gallery > * {
		aspect-ratio: 4 / 3;
	}

	.codigo-gallery > :first-child {
		aspect-ratio: 16 / 10;
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* The jump links and the category chips turn into one swipeable row. */
	.codigo-pg-jumps,
	.codigo-jfilter__list {
		flex-wrap: nowrap;
		margin-inline: calc(var(--wp--custom--shell-pad) * -1);
		overflow-x: auto;
		padding-block: 2px 4px;
		padding-inline: var(--wp--custom--shell-pad);
		scrollbar-width: none;
	}

	.codigo-pg-jumps::-webkit-scrollbar,
	.codigo-jfilter__list::-webkit-scrollbar {
		display: none;
	}

	.codigo-pg-jumps > .wp-block-button {
		flex-shrink: 0;
	}
}

/* ── Inner pages: phone ── */
@media (max-width: 640px) {
	.codigo-pg-grid--4,
	.codigo-pg-grid--2,
	.codigo-journal__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.codigo-pg-shell {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* ══ Plan & book pages: booking, FAQ, find your plan, payment plans,
   special offers ═══════════════════════════════════════════════════════════
   design/v3/*. Built on the `codigo-pg-*` classes above; what follows is each
   page's own pieces. The booking menu, the plan guide and the payment
   estimator are codigo-extra blocks and style themselves — only the grid the
   estimator sits in is here. Same two breakpoints (1024px, 640px). */

/* ── Shared ── */
.is-style-eyebrow.codigo-pg-eyebrow-deep {
	color: var(--wp--preset--color--spring-deep);
}

.codigo-pg-hero--band {
	padding-block: var(--wp--preset--spacing--60);
}

.wp-block-button.codigo-pg-btn-sm > .wp-block-button__link {
	font-size: 14.5px;
	padding: 11px 18px;
}

.codigo-pg-title--app {
	font-size: clamp(36px, 4.6vw, 60px);
	line-height: 1.04;
}

/* The search field: a pill with the glass inside its leading edge. */
.codigo-pg-search {
	margin-block-start: 6px;
	max-inline-size: 620px;
	position: relative;
}

.codigo-pg-search__icon {
	inset-block-start: 50%;
	inset-inline-start: 20px;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
	transform: translateY(-50%);
}

.codigo-pg-search__input {
	background-color: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--custom--divider);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--preset--shadow--sm);
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 17px;
	inline-size: 100%;
	padding-block: 18px;
	padding-inline: 52px 20px;
}

.codigo-pg-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--spring);
	outline-offset: 2px;
}

/* ── FAQ: hero ── */
.codigo-faq-hero .codigo-pg-title {
	font-size: clamp(38px, 4.8vw, 62px);
	line-height: 1.04;
	margin-block-end: var(--wp--preset--spacing--30);
	max-inline-size: min(16ch, 100%);
}

/* ── FAQ: questions ── */
.codigo-faq {
	padding-block-start: var(--wp--preset--spacing--60);
}

.codigo-faq__grid {
	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: 260px minmax(0, 1fr);
}

.codigo-faq__grid > * {
	margin-block: 0;
}

.codigo-faq__rail {
	align-items: stretch;
	gap: 6px;
	inset-block-start: 100px;
	position: sticky;
}

.codigo-faq__rail > .wp-block-button {
	inline-size: 100%;
	margin: 0;
}

/* Body type, no fill: the design's rail is a list, not a stack of buttons.
   Three classes to clear core's button paint and theme.json's element. */
.codigo-faq__rail .codigo-faq__topic > .wp-block-button__link {
	align-items: center;
	background-color: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	display: flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 700;
	gap: 12px;
	inline-size: 100%;
	justify-content: space-between;
	padding: 12px 16px;
	text-align: start;
}

.codigo-faq__rail .codigo-faq__topic > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--cream);
}

.codigo-faq__rail .codigo-faq__topic.is-on > .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.codigo-faq__count {
	font-weight: 600;
	opacity: 0.55;
}

.codigo-faq__topics {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	min-inline-size: 0;
}

.codigo-faq__topics > *,
.codigo-faq__group > * {
	margin-block: 0;
}

.codigo-faq__group[hidden],
.codigo-faq .codigo-cx-faq__row[hidden] {
	display: none;
}

.codigo-faq .codigo-faq__h {
	font-size: clamp(24px, 2.6vw, 32px);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-block-end: var(--wp--preset--spacing--40);
}

.codigo-faq .codigo-cx-faq__row > summary {
	padding-block: 20px;
}

.codigo-faq .codigo-cx-faq__a {
	color: var(--wp--custom--ink--muted);
	line-height: 1.65;
	max-inline-size: 66ch;
}

.codigo-faq .codigo-cx-faq__a:has(+ .codigo-faq__more) {
	padding-block-end: 12px;
}

.codigo-faq__more {
	font-size: 14.5px;
	font-weight: 700;
	margin-block: 0;
	padding-block-end: 22px;
	padding-inline: 4px;
}

.codigo-faq__more a {
	color: var(--wp--preset--color--spring-deep);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.codigo-faq__more a::after {
	content: " →";
}

.codigo-faq__empty {
	align-items: flex-start;
	background-color: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--lg);
	display: none;
	flex-direction: column;
	gap: 10px;
	padding: var(--wp--preset--spacing--50);
}

.codigo-faq.is-empty .codigo-faq__empty {
	display: flex;
}

.codigo-faq__empty > * {
	margin-block: 0;
}

.codigo-faq__empty-t {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	line-height: 1.2;
}

.codigo-faq__empty-b {
	color: var(--wp--custom--ink--body);
	font-size: 16px;
}

.wp-block-button.codigo-faq__clear > .wp-block-button__link {
	font-size: 15px;
}

/* ── FAQ: still wondering ── */
.codigo-help {
	display: grid;
	gap: 22px;
	grid-template-columns: 1.2fr 0.8fr 0.8fr;
}

.codigo-help > * {
	margin-block: 0;
}

.codigo-help__lead,
.codigo-help__card {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--60);
}

.codigo-help__lead {
	gap: var(--wp--preset--spacing--30);
}

.codigo-help__card {
	gap: 10px;
	transition: background-color 0.2s;
}

/* Two classes and the colour class: core prints the cream as
   `.has-cream-background-color` with !important. */
.codigo-help__card.has-background:hover,
.codigo-help__card.has-background:focus-within {
	background-color: var(--wp--preset--color--sand) !important;
}

.codigo-help__lead > *,
.codigo-help__card > * {
	margin-block: 0;
}

.codigo-help__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.1;
	max-inline-size: 18ch;
}

.codigo-help__body {
	color: var(--wp--custom--ink--muted);
	font-size: 16.5px;
	line-height: 1.6;
	max-inline-size: 44ch;
}

.codigo-help__label {
	color: var(--wp--custom--ink--dim);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.codigo-help__link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	line-height: 1.2;
}

/* The line carries the card's link and stretches it over the card. */
.codigo-help__link a {
	color: inherit;
}

.codigo-help__link a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.codigo-help__note {
	color: var(--wp--custom--ink--strong);
	font-size: 15px;
}

/* ── Special offers: hero ── */
.codigo-offers-hero .codigo-pg-title--short {
	margin-block-end: var(--wp--preset--spacing--30);
	max-inline-size: min(14ch, 100%);
}

.codigo-offers-hero .codigo-pg-lede {
	font-size: 19px;
	margin-block-end: var(--wp--preset--spacing--30);
	max-inline-size: 44ch;
}

.codigo-offers-hero .codigo-pg-actions {
	margin-block-end: 0;
}

.codigo-offers-hero__media {
	position: relative;
}

.codigo-offers-hero__media > * {
	margin-block: 0;
}

.codigo-offers-hero__frame {
	aspect-ratio: 5 / 4.4;
}

.codigo-offers-hero__frame img,
.codigo-offer__media img {
	filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94);
}

.codigo-offers-hero__disc {
	align-items: center;
	background-color: var(--wp--preset--color--aqua);
	block-size: 150px;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--preset--shadow--lg);
	display: flex;
	flex-direction: column;
	inline-size: 150px;
	inset-block-end: -22px;
	inset-inline-start: -18px;
	justify-content: center;
	position: absolute;
	text-align: center;
}

.codigo-offers-hero__disc > * {
	margin-block: 0;
}

.codigo-offers-hero__disc-k {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.codigo-offers-hero__disc-n {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 40px;
	line-height: 1;
}

.codigo-offers-hero__disc-u {
	font-size: 13px;
	font-weight: 700;
}

/* ── Special offers: the month's offers ── */
.codigo-offers__head {
	align-items: flex-end;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

.codigo-offers__head > * {
	margin-block: 0;
}

/* Out of sight, not out of the layout, until the script can filter. */
.codigo-offers:not(.is-enhanced) .codigo-offers__chips {
	visibility: hidden;
}

.codigo-offers__chips {
	gap: 8px;
}

.codigo-offers__chips .codigo-offers__chip > .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--custom--divider);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14.5px;
	font-weight: 700;
	padding: 10px 17px;
}

.codigo-offers__chips .codigo-offers__chip > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink);
}

.codigo-offers__chips .codigo-offers__chip.is-on > .wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.codigo-offers__grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The category groups draw nothing: their cards are the grid's items. */
.codigo-offers__cat {
	display: contents;
}

.codigo-offers__cat[hidden] {
	display: none;
}

.codigo-offer {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--sm);
	display: flex;
	flex-direction: column;
	margin-block: 0;
	overflow: hidden;
}

.codigo-offer > * {
	margin-block: 0;
}

.codigo-offer__media {
	aspect-ratio: 16 / 10;
	border-radius: 0;
}

.codigo-pg-frame > .codigo-offer__tag {
	background-color: var(--wp--preset--color--base);
	block-size: auto;
	border-radius: var(--wp--custom--radius--pill);
	font-size: 12.5px;
	font-weight: 700;
	inline-size: auto;
	inset: auto;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	line-height: 1.3;
	padding: 6px 12px;
}

.codigo-offer__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: var(--wp--preset--spacing--50);
}

.codigo-offer__body > * {
	margin-block: 0;
}

.codigo-offer .codigo-offer__title {
	font-size: 24px;
	letter-spacing: 0;
	line-height: 1.15;
}

.codigo-offer__text {
	color: var(--wp--custom--ink--body);
	font-size: 15px;
	line-height: 1.55;
	text-wrap: pretty;
}

.codigo-offer__body > .codigo-offer__price {
	align-items: baseline;
	gap: 10px;
	margin-block-start: auto;
	padding-block-start: 8px;
}

.codigo-offer__price > * {
	margin-block: 0;
}

.codigo-offer__now {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	line-height: 1.2;
}

.codigo-offer__was {
	color: var(--wp--custom--ink--half);
	font-size: 15px;
	text-decoration: line-through;
}

.codigo-offer__foot {
	align-items: center;
	border-block-start: 1px solid var(--wp--custom--divider);
	gap: 10px;
	padding-block-start: 14px;
}

.codigo-offer__foot > * {
	margin-block: 0;
}

.codigo-offer__where {
	color: var(--wp--custom--ink--soft);
	font-size: 13.5px;
}

/* ── Special offers: packages ── */
.codigo-pkgs .is-style-eyebrow {
	margin-block-end: var(--wp--preset--spacing--20);
}

.codigo-pkgs .codigo-pkgs__h {
	margin-block-end: var(--wp--preset--spacing--40);
}

.codigo-pkgs__intro {
	font-size: 17.5px;
	line-height: 1.6;
	max-inline-size: 54ch;
}

.codigo-pkgs__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.codigo-pkg {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-block: 0;
	padding: var(--wp--preset--spacing--50);
}

.codigo-pkg > *,
.codigo-pkg__head > *,
.codigo-pkg__foot > *,
.codigo-pkg__cost > * {
	margin-block: 0;
}

.codigo-pkg__head {
	align-items: flex-start;
	gap: 10px;
}

.codigo-pkg .codigo-pkg__name {
	font-size: 23px;
	letter-spacing: 0;
	line-height: 1.15;
}

.codigo-pkg__save {
	background-color: var(--wp--preset--color--spring-tint);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--spring-deep);
	flex-shrink: 0;
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 11px;
	white-space: nowrap;
}

.codigo-pkg__blurb {
	color: var(--wp--custom--ink--body);
	font-size: 15px;
	line-height: 1.55;
	text-wrap: pretty;
}

.codigo-pkg__list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	list-style: none;
	padding-inline-start: 0;
}

.codigo-pkg__list > li {
	align-items: center;
	display: flex;
	font-size: 14.5px;
	font-weight: 600;
	gap: 9px;
}

.codigo-pkg__list > li::before {
	background-color: var(--wp--preset--color--spring);
	block-size: 7px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	flex-shrink: 0;
	inline-size: 7px;
}

.codigo-pkg > .codigo-pkg__foot {
	align-items: flex-end;
	border-block-start: 1px solid var(--wp--custom--divider);
	gap: 10px;
	margin-block-start: auto;
	padding-block-start: 14px;
}

.codigo-pkg__cost {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.codigo-pkg__price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	line-height: 1.1;
}

.codigo-pkg__monthly {
	font-size: 13.5px;
	font-weight: 700;
}

.codigo-pkg__monthly a {
	color: var(--wp--preset--color--spring-deep);
}

.codigo-pkg__where {
	color: var(--wp--custom--ink--note);
	font-size: 12.5px;
}

/* ── Special offers: new clients and plan guide ── */
.codigo-offers-close {
	display: grid;
	gap: 22px;
	grid-template-columns: 1.2fr 0.8fr;
}

.codigo-offers-close > * {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin-block: 0;
}

.codigo-offers-close > * > * {
	margin-block: 0;
}

.codigo-offers-close .is-style-eyebrow {
	margin-block-end: 0;
}

.codigo-offers-close__t {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	line-height: 1.15;
}

.codigo-offers-close__t--lg {
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	max-inline-size: 20ch;
}

.codigo-offers-close__b {
	color: var(--wp--custom--ink--strong);
	font-size: 16px;
	line-height: 1.6;
}

.codigo-pg-dark .codigo-offers-close__b {
	color: var(--wp--custom--on-dark--muted);
	font-size: 16.5px;
	max-inline-size: 48ch;
}

.codigo-offers-close__label {
	letter-spacing: 0.15em;
}

.codigo-offers-close__guide > .codigo-offers-close__end {
	margin-block-start: auto;
}

.wp-block-button.codigo-offers-close__aqua > .wp-block-button__link {
	font-weight: 700;
}

.wp-block-button.codigo-offers-close__aqua > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--tour-well) !important;
}

.codigo-offers-close__terms {
	color: var(--wp--custom--ink--note);
	font-size: 13px;
	line-height: 1.6;
	margin-block: var(--wp--preset--spacing--50) 0;
	max-inline-size: 90ch;
	text-wrap: pretty;
}

/* ── Find your plan ── */
.codigo-guide-band__copy > * {
	margin-block: 0;
}

.codigo-guide-band .is-style-eyebrow {
	margin-block-end: var(--wp--preset--spacing--20);
}

.codigo-guide-band .codigo-pg-title--app {
	margin-block-end: var(--wp--preset--spacing--40);
}

.codigo-guide-band__lede {
	max-inline-size: 54ch;
}

/* ── Payment plans ──
   Cherry's page inside La Vie's frame: the partner's face and colours. */
.codigo-pay {
	font-family: var(--wp--preset--font-family--cherry);
}

.codigo-pay :where(h1, h2, h3) {
	font-family: var(--wp--preset--font-family--cherry);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.codigo-pay-hero {
	padding-block-start: var(--wp--preset--spacing--50);
}

/* No padding: core pads any group with a background, and the photograph
   runs to the panel's edges. */
.codigo-pay-hero__panel.has-background {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	padding: 0;
}

.codigo-pay-hero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) calc(var(--wp--preset--spacing--60) + 8px);
}

.codigo-pay-hero__panel > *,
.codigo-pay-hero__copy > *,
.codigo-pay-lockup > *,
.codigo-pay-figures > *,
.codigo-pay-figure > * {
	margin-block: 0;
}

.codigo-pay-lockup {
	align-items: center;
	gap: 12px;
}

/* Cherry's own logo, white on the navy panel — the height is fixed so the
   line never shifts while the image loads. */
.codigo-pay-lockup__cherry img {
	block-size: 30px;
	display: block;
	inline-size: auto;
}

.codigo-pay-lockup__x {
	opacity: 0.4;
}

.codigo-pay-lockup__lavie {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
}

.codigo-pay .codigo-pay-title {
	color: var(--wp--preset--color--base);
	font-size: clamp(38px, 4.8vw, 62px);
	line-height: 1.05;
	max-inline-size: min(14ch, 100%);
}

.codigo-pay-hero__lede {
	color: var(--wp--custom--on-dark--strong);
	font-size: 18.5px;
	line-height: 1.6;
	max-inline-size: 44ch;
	opacity: 0.78;
	text-wrap: pretty;
}

.codigo-pay-hero__copy > .codigo-pay-hero__actions {
	margin-block-start: 6px;
}

/* Cherry's own button: green, navy type, the partner's weight. */
.codigo-pay .wp-block-button.codigo-pay-btn > .wp-block-button__link {
	background-color: var(--wp--preset--color--cherry-green);
	border: 1.5px solid transparent;
	color: var(--wp--preset--color--cherry-navy);
	font-family: var(--wp--preset--font-family--cherry);
	font-size: 16px;
	font-weight: 800;
	padding: 16px 28px;
}

.codigo-pay .wp-block-button.codigo-pay-btn > .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--cherry-green) 88%, var(--wp--preset--color--base));
}

.codigo-pay .wp-block-button.codigo-pay-btn--line > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--custom--on-dark--line);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	padding-inline: 26px;
}

.codigo-pay .wp-block-button.codigo-pay-btn--line > .wp-block-button__link:hover {
	background-color: transparent;
	border-color: var(--wp--preset--color--base);
}

.codigo-pay .wp-block-button.codigo-pay-btn--block {
	inline-size: 100%;
}

.codigo-pay .wp-block-button.codigo-pay-btn--block > .wp-block-button__link {
	inline-size: 100%;
	justify-content: center;
	padding: 16px;
}

.codigo-pay-hero__copy > .codigo-pay-figures {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 15%, transparent);
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
}

.codigo-pay-figure {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.codigo-pay-figure__n {
	color: var(--wp--preset--color--cherry-green);
	font-size: 24px;
	font-weight: 800;
}

.codigo-pay-figure__l {
	color: var(--wp--custom--on-dark--strong);
	font-size: 13.5px;
	opacity: 0.65;
}

/* The photograph is cut on a slant along its leading edge (style-rtl.css
   mirrors the cut). */
.codigo-pay-hero__media {
	background-color: color-mix(in srgb, var(--wp--preset--color--cherry-navy) 82%, var(--wp--preset--color--base));
	clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
	min-block-size: 460px;
	position: relative;
}

.codigo-pay-hero__media > * {
	inset: 0;
	margin: 0;
	position: absolute;
}

.codigo-pay-hero__media img {
	block-size: 100%;
	filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94);
	inline-size: 100%;
	object-fit: cover;
}

.codigo-pay-hero__media img:not([src]) {
	visibility: hidden;
}

/* ── Payment plans: type ── */
.codigo-pay-eyebrow {
	color: var(--wp--preset--color--cherry-deep);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.codigo-pay-eyebrow--on-navy {
	color: var(--wp--preset--color--cherry-green);
}

.codigo-pay .codigo-pay-h2 {
	font-size: clamp(30px, 3.4vw, 42px);
	line-height: 1.1;
	margin-block: 0;
	max-inline-size: min(16ch, 100%);
}

.codigo-pay .codigo-pay-h2--steps {
	font-size: clamp(28px, 3.2vw, 40px);
	margin-block-end: var(--wp--preset--spacing--50);
	max-inline-size: none;
}

.codigo-pay .codigo-pay-h2--apply {
	color: var(--wp--preset--color--base);
	max-inline-size: min(14ch, 100%);
}

.codigo-pay .codigo-pay-h2--faq {
	font-size: clamp(26px, 3vw, 36px);
	margin-block-end: var(--wp--preset--spacing--50);
	max-inline-size: none;
}

.codigo-pay-intro {
	color: var(--wp--custom--ink--body);
	font-size: 17px;
	line-height: 1.6;
	max-inline-size: 40ch;
	text-wrap: pretty;
}

/* ── Payment plans: estimator grid ──
   The words, then the block's example totals under them; the block's card
   beside both. */
.codigo-pay-calc {
	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	grid-template-columns: 0.85fr 1.15fr;
	grid-template-rows: auto 1fr;
}

.codigo-pay-calc > *,
.codigo-pay-calc__copy > * {
	margin-block: 0;
}

.codigo-pay-calc__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	grid-column: 1;
	grid-row: 1;
}

.codigo-pay-calc .codigo-est__presets {
	grid-column: 1;
	grid-row: 2;
}

.codigo-pay-calc .codigo-est__card {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin-block: 0;
}

/* ── Payment plans: how it works ── */
.codigo-pay-steps {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.codigo-pay-step {
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-block: 0;
	padding: var(--wp--preset--spacing--50);
}

.codigo-pay-step > * {
	margin-block: 0;
}

.codigo-pay-step__n {
	align-items: center;
	background-color: var(--wp--preset--color--cherry-green);
	block-size: 48px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--base);
	display: flex;
	font-size: 20px;
	font-weight: 800;
	inline-size: 48px;
	justify-content: center;
}

.codigo-pay .codigo-pay-step__t {
	font-size: 21px;
	letter-spacing: 0;
	line-height: 1.3;
}

.codigo-pay-step__b {
	color: var(--wp--custom--ink--body);
	font-size: 15.5px;
	line-height: 1.6;
	text-wrap: pretty;
}

/* ── Payment plans: check your options ── */
.codigo-pay-apply {
	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: 0.8fr 1.2fr;
	padding: var(--wp--preset--spacing--60);
}

.codigo-pay-apply > *,
.codigo-pay-apply__copy > *,
.codigo-pay-apply__card > * {
	margin-block: 0;
}

.codigo-pay-apply__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.codigo-pay-apply__copy > .codigo-pay-perks {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin-block-start: 6px;
	padding-inline-start: 0;
}

.codigo-pay-perks > li {
	align-items: flex-start;
	color: var(--wp--custom--on-dark--strong);
	display: flex;
	font-size: 15.5px;
	gap: 12px;
	line-height: 1.5;
	opacity: 0.82;
}

.codigo-pay-perks > li::before {
	align-items: center;
	background-color: var(--wp--preset--color--cherry-green);
	block-size: 24px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--cherry-navy);
	content: "✓";
	display: flex;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 800;
	inline-size: 24px;
	justify-content: center;
}

.codigo-pay-apply__card {
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: var(--wp--preset--spacing--50);
}

.codigo-pay-apply__t {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
}

.codigo-pay-apply__b {
	color: var(--wp--custom--ink--body);
	font-size: 15.5px;
	line-height: 1.6;
}

.codigo-pay-apply__secure {
	color: var(--wp--custom--ink--half);
	font-size: 12.5px;
	text-align: center;
}

.codigo-pay-apply__book {
	font-size: 14.5px;
	font-weight: 700;
}

.codigo-pay-apply__book a {
	color: var(--wp--preset--color--cherry-deep);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ── Payment plans: Cherry questions ── */
.codigo-pay-faq .codigo-cx-faq__row > summary {
	font-size: 17px;
	font-weight: 700;
	padding-block: 20px;
}

.codigo-pay-faq .codigo-cx-faq__row > summary::after {
	color: var(--wp--preset--color--cherry-deep);
}

.codigo-pay-faq .codigo-cx-faq__a {
	font-size: 15.5px;
	padding-block-end: 20px;
}

.codigo-pay-disclosure {
	color: var(--wp--custom--ink--note);
	font-size: 12.5px;
	line-height: 1.6;
	margin-block: var(--wp--preset--spacing--50) 0;
	text-wrap: pretty;
}

/* ── Plan & book pages: tablet ── */
@media (max-width: 1024px) {
	.codigo-faq__grid,
	.codigo-help,
	.codigo-offers-close,
	.codigo-pay-hero__panel.has-background,
	.codigo-pay-calc,
	.codigo-pay-steps,
	.codigo-pay-apply {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The rail becomes a wrapping row of topics above the questions. */
	.codigo-faq__rail {
		flex-direction: row;
		flex-wrap: wrap;
		position: static;
	}

	.codigo-faq__rail > .wp-block-button {
		inline-size: auto;
	}

	.codigo-offers__grid,
	.codigo-pkgs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.codigo-pay-hero__media {
		clip-path: none;
		min-block-size: 280px;
	}

	.codigo-pay-calc {
		grid-template-rows: none;
	}

	.codigo-pay-calc__copy,
	.codigo-pay-calc .codigo-est__presets,
	.codigo-pay-calc .codigo-est__card {
		grid-column: auto;
		grid-row: auto;
	}
}

/* ── Plan & book pages: phone ── */
@media (max-width: 640px) {
	.codigo-offers__grid,
	.codigo-pkgs__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.codigo-help__lead,
	.codigo-help__card,
	.codigo-pay-hero__copy,
	.codigo-pay-apply {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}