/*
 * MYS 2026 — design system.
 * Mobile-first. Everything here is layout and surface treatment; colours come
 * from theme.json presets so the palette stays in one place.
 *
 * Written 2026-08-25 after DJ compared the build to the live Zyrosite site and
 * said it did not look like his site. It did not: the page was 155 blocks in a
 * single column with no card, grid or hero treatment anywhere.
 */

:root {
	--mys-radius: 14px;
	--mys-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
	--mys-shadow-lift: 0 10px 30px rgba(236, 0, 140, 0.13);
	--mys-section-y: clamp(2.5rem, 7vw, 5rem);
}

/* ── Sections ─────────────────────────────────────────────────────────────
   Every section is a full-bleed band. Alternating bands are what stop a long
   page reading as one undifferentiated scroll. */
.mys-section {
	padding-block: var(--mys-section-y);
	padding-inline: 1.25rem;
}

.mys-section > * {
	max-width: 1140px;
	margin-inline: auto;
}

.mys-section--blush { background: var(--wp--preset--color--blush); }
.mys-section--ink {
	background: var(--wp--preset--color--ink);
	color: #fff;
}
.mys-section--ink :is(h2, h3, p) { color: #fff; }
/* Cards keep their white background inside a dark section, so anything sitting
   on a card has to opt back out of the white text above or it renders blank. */
.mys-section--ink .mys-card,
.mys-section--ink .mys-card :is(h2, h3, p) {
	color: var(--wp--preset--color--ink);
}

.mys-section > :is(h2, .mys-section__title) {
	text-align: center;
	font-size: clamp(1.75rem, 4.5vw, 2.6rem);
	line-height: 1.2;
	margin-block: 0 0.5rem;
}

.mys-section__lede {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
	color: var(--wp--preset--color--muted);
	font-size: 1.05rem;
	margin-block-end: 2.25rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────────
   The first screen. Centred, generous, and the rotating headline is the
   largest thing on it — that is how the live site reads and it is the one
   piece of motion on the page. */
.mys-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3rem, 9vw, 6rem);
	padding-inline: 1.25rem;
	text-align: center;
	min-height: min(56rem, 88vh);
	display: grid;
	align-items: center;
}

/* The clip and the scrim over it. Both absolute so the hero's height is set by
   its words — a video-height hero is a different height on every screen. */
.mys-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

.mys-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* White text over moving footage is only legible with something between them.
   The live site's own contrast, matched: dark enough to read, light enough that
   the clip still reads as the picture rather than as a texture. */
.mys-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%,
	                                     rgba(0, 0, 0, 0.44) 55%,
	                                     rgba(0, 0, 0, 0.52) 100%);
}

/* Anyone who has asked the OS to stop motion gets the first frame and no loop.
   A background video is decoration; it is never worth making somebody ill. */
@media (prefers-reduced-motion: reduce) {
	.mys-hero__video { display: none; }
	.mys-hero__media { background: var(--wp--preset--color--ink); }
	.mys-hero__scrim { background: rgba(0, 0, 0, 0.25); }
}

.mys-hero__inner > * {
	max-width: 62rem;
	margin-inline: auto;
}

.mys-hero :is(h1, h2, h3, p, li, a) { color: #fff; }

/* 24px on the live site, and not a small-caps eyebrow — it is a full sentence
   and it reads as one. */
.mys-hero__eyebrow {
	font-size: clamp(1.05rem, 2.4vw, 1.5rem);
	font-weight: 600;
	margin-block: 0 0.75rem;
}

/* The largest thing in the hero — 56px live — and deliberately not the H1. The
   H1 is the line below it, which is the one carrying the phrase people search
   for. Size is a design decision; heading level is a structural one. */
.mys-hero__big {
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 600;
	line-height: 1.1;
	margin-block: 0 0.5rem;
}

.mys-hero h1 {
	font-size: clamp(1.6rem, 5vw, 3rem);
	font-weight: 600;
	line-height: 1.25;
	margin-block: 0 0.25rem;
}

.mys-hero__lede {
	font-size: 1rem;
	line-height: 1.65;
	color: #fff;
	max-width: 48rem;
	margin-inline: auto;
	margin-block: 1.5rem 1.75rem;
}

.mys-hero__lede u {
	font-weight: 900;
	font-style: italic;
}

/* The rotating phrase completes the H1's sentence, and on the live site it is
   the one serif thing on the page — that contrast is what makes it read as the
   punchline rather than as more heading. build_rotator.py owns its size and its
   animation; only the face and the colour change here. */
.mys-hero .mys-rotator,
.mys-hero .mys-rotator-phrase {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 600;
	color: #fff;
}

/* Four plain links across the bottom of the hero, wrapping to two-up on a
   phone. Cards here were the single biggest reason the rebuild did not look
   like the live site: the live ones carry no box at all. */
.mys-hero__links {
	list-style: none;
	margin: 2.5rem auto 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem 2.5rem;
	font-weight: 600;
}

/* One picture at the head of a section, capped in height so a tall source image
   cannot push the content it introduces off a phone screen. */
.mys-section__media {
	margin: 0 0 1.75rem;
	border-radius: var(--mys-radius);
	overflow: hidden;
	max-height: 20rem;
}

.mys-section__media img {
	width: 100%;
	height: 100%;
	max-height: 20rem;
	object-fit: cover;
	display: block;
}

/* ── Grids ────────────────────────────────────────────────────────────────
   auto-fit rather than a fixed column count: one column on a phone, and the
   number of columns on a laptop follows the number of cards instead of
   leaving a hole. */
.mys-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.mys-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
	.mys-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.mys-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* A fixed three across rather than auto-fit. auto-fit fitted four columns on a
   wide screen, which left the six service cards as a row of four and a row of
   two with a hole beside it, and put the two rows out of alignment because a
   card with a picture is taller than one without. */
@media (min-width: 62em) {
	.mys-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Cards ────────────────────────────────────────────────────────────────
   The unit the old site was built from and this build had none of. */
.mys-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mys-radius);
	box-shadow: var(--mys-shadow);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
	.mys-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--mys-shadow-lift);
	}
}

.mys-card h3,
.mys-card .mys-card__title {
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.mys-card p {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* A card whose picture is the point: image bleeds to the card edge. */
.mys-card--media { padding: 0; overflow: hidden; }
.mys-card--media > figure,
.mys-card--media > .mys-card__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--blush);
}

/* Labels that belong to the picture rather than to the card — the thermal scan
   pair is "Neuropathy / Normal" and the words mean nothing away from the image.
   Sits over the image because the frame above clips anything below it. */
.mys-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.4rem 0.75rem;
	background: rgba(255, 255, 255, 0.92);
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
.mys-card--media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mys-card--media .mys-card__body {
	padding: 1.25rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Numbered steps. The number is the visual anchor, so it is a real element
   rather than a list marker that cannot be styled reliably. */
.mys-card--step { padding-block-start: 2.75rem; position: relative; }
.mys-card__num {
	position: absolute;
	top: -1.1rem;
	left: 1.5rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	display: grid;
	place-items: center;
	box-shadow: 0 3px 10px rgba(236, 0, 140, 0.3);
}

/* Team: a portrait, round, above the name. */
.mys-card--person { text-align: center; align-items: center; }
.mys-card--person img {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--wp--preset--color--blush);
	margin-block-end: 0.25rem;
}
.mys-card--person figure { margin: 0; }
.mys-card__role {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

/* Result cards carry a mandatory disclaimer; it must stay legible, so it is
   set apart rather than shrunk into the noise. */
.mys-card--result { text-align: center; }
.mys-card__stat {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.mys-card__note {
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block-start: 0.6rem;
	margin-block-start: auto;
}

/* ── Pain-point list ──────────────────────────────────────────────────────
   Patient quotes. Reads as speech, not as bullets. */
.mys-quotes {
	list-style: none;
	margin: 0 auto 1.75rem;
	padding: 0;
	max-width: 44rem;
	display: grid;
	gap: 0.75rem;
}
.mys-quotes li {
	background: #fff;
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: 8px;
	padding: 0.9rem 1.1rem;
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: var(--mys-shadow);
}
/* The quote cards keep their white background inside a dark section, so they
   have to opt back out of that section's white text or they render blank. */
.mys-section--ink .mys-quotes li { color: var(--wp--preset--color--ink); }

/* ── Buttons ──────────────────────────────────────────────────────────────
   Big enough to hit with a thumb: 48px is the accessibility floor and this
   audience is on a phone. */
.wp-block-button__link,
.mys-btn {
	border-radius: 999px;
	padding: 0.85rem 1.9rem;
	font-weight: 700;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
	.wp-block-button__link:hover {
		transform: translateY(-2px);
		box-shadow: var(--mys-shadow-lift);
	}
}

.mys-ctarow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-block-start: 1.5rem;
}

/* The core buttons block keeps its own flex row and its own left justification,
   so centring the row above does nothing until this centres the row inside it. */
.mys-ctarow .wp-block-buttons {
	justify-content: center;
	margin-block: 0;
}

/* ── Images in flow ───────────────────────────────────────────────────────
   Anything left in the normal flow gets a radius so a stray full-width photo
   does not look like it escaped the design. */
.mys-section .wp-block-image img { border-radius: var(--mys-radius); }

/* ── Reviews: inherit the card surface ───────────────────────────────────── */
.mys-review { border-radius: var(--mys-radius); box-shadow: var(--mys-shadow); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.mys-faq { max-width: 46rem; margin-inline: auto; display: grid; gap: 0.75rem; }
.mys-faq__q {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 1.1rem 1.3rem;
}
.mys-faq__q h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.mys-faq__q p { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.97rem; }

/* ── Theme-built pages ────────────────────────────────────────────────
   /bhrt, /botox-and-fillers and /skincare use WordPress's ordinary page
   template rather than copied Zyro markup. That is the right template: moving
   them to page-mirror would remove the header and footer they depend on.

   The ordinary template did not have a design shell, though. live.css reset
   the body to 17px DM Sans, the inline template padding won at the top, and the
   constrained blocks became 390px wide on a 390px phone. The result was black
   text touching both screen edges while mirrored pages opened with Lato type
   on the site's pink gradient.

   Scope this to page-template-default rather than three page IDs. The defect
   belongs to the template, and the other ordinary pages need the same safe
   gutters when they are filled in. Mirrored pages never load this sheet, but
   keeping the selector explicit documents and enforces that boundary. */
.page-template-default {
	--mys-page-gutter: clamp(1.25rem, 5vw, 2rem);
	font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.65;
}

.page-template-default main.wp-block-group {
	/* page.html writes padding-top inline. It has to lose to the full-bleed hero,
	   so this is the one place where an important override is warranted. */
	padding-top: 0 !important;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.page-template-default main > .wp-block-post-title {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: none;
	min-height: clamp(18rem, 58vw, 32rem);
	margin: 0;
	padding: clamp(3.5rem, 10vw, 6.5rem) var(--mys-page-gutter);
	background: linear-gradient(180deg, rgb(255, 77, 151) 0%, rgb(224, 77, 193) 100%);
	color: #fff;
	font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: clamp(2.25rem, 7vw, 4rem);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
}

.page-template-default main > .wp-block-post-content {
	box-sizing: border-box;
	width: calc(100% - var(--mys-page-gutter) - var(--mys-page-gutter));
	max-width: 760px;
	margin-block-start: 0;
	margin-inline: auto;
	padding-block: clamp(2.5rem, 7vw, 4.5rem);
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.page-template-default .wp-block-post-content :is(h1, h2, h3, h4, h5, h6) {
	font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Related links, FAQs and final booking copy are already grouped in the page
   source. A quiet surface makes those real groups read as sections without
   inventing new content or changing the database. */
.page-template-default .wp-block-post-content :is(.seo-faq, .seo-related, .seo-cta) {
	box-sizing: border-box;
	margin-block: clamp(2.25rem, 6vw, 4rem);
	padding: clamp(1.25rem, 5vw, 2rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mys-radius);
	background: var(--wp--preset--color--blush);
}

.page-template-default .wp-block-post-content :is(.seo-faq, .seo-related, .seo-cta) > :first-child {
	margin-block-start: 0;
}

.page-template-default .wp-block-post-content :is(.seo-faq, .seo-related, .seo-cta) > :last-child {
	margin-block-end: 0;
}

/* /reservations keeps the same Authorize.Net catalog payment used by the live
   site. Give its accessible replacement button a clear, contained payment
   surface instead of leaving a small vendor image floating in body copy. */
.mys-payment-box {
	padding: clamp(1.5rem, 6vw, 2.5rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mys-radius);
	background: var(--wp--preset--color--blush);
	text-align: center;
}

.mys-payment-box .wp-element-button {
	min-height: 48px;
	padding: 0.85rem 1.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.mys-payment-box .wp-element-button:hover,
.mys-payment-box .wp-element-button:focus-visible {
	background: var(--wp--preset--color--brand-dark);
}

.mys-payment-box p {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--muted);
}

/* ── Motion ───────────────────────────────────────────────────────────────
   One quiet rise as a section enters. Off entirely for anyone who has asked
   the OS for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.mys-card { animation: mys-rise 0.5s ease both; }
}

@keyframes mys-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* The copied bands butt against each other, the way they do on live.

   Each section.block is a full-bleed band that paints its own background edge
   to edge and carries its own internal padding — the live page has exactly 0px
   between one and the next. WordPress does not know that: it treats them as
   ordinary flow children and gives every one after the first a block gap of
   21.6px. Ten of those is 216px of white seam through the middle of the page,
   in ten places where live has a colour change with no seam at all.

   Scoped to section.block on purpose. The disclosure and the two SEO groups
   further down the page are this rebuild's own blocks rather than copied bands,
   and they should keep the spacing the theme gives everything else. */
main section.block {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
   Corrections to the live layout.

   Everything above this point exists to make the rebuild match the live site.
   What follows is the opposite: places where matching live would mean copying a
   mistake. Each one is scoped to the band it fixes by the builder's own id, so
   if a re-capture ever changes that id the rule stops applying rather than
   landing somewhere it was never meant to.
   --------------------------------------------------------------------------- */

/* The slider fills the cell the embed used to. .mys-ba carries a 1.5rem margin
   for the scan comparisons further down the site, where it sits in a column of
   running text; in a grid cell that margin is a nudge off the row. */
#ai-fbwilA .mys-ba {
	margin: 0;
}

/* The Kiley and Kelli before-and-after band.

   Live places the two sliders side by side on grid row 2, then puts their
   captions on rows that do not match each other — Kiley's at 5/7 and Kelli's at
   4/6. One row of difference is 53px, which is why the two names sit at
   visibly different heights on a page where everything else is aligned.

   Row 3 is 322px tall and holds nothing. The captions start below it, so the
   band reads as two pictures, a screen of white, and then two names a long way
   from the pictures they belong to.

   Both captions go on the same rows, and row 3 becomes an ordinary gap.

   Row 2 comes down from 676px to 533px for a third reason, one frame further
   in. Both sliders hold 768x1024 photographs — three to four — and the embed
   around them is published with a hardcoded height="668". The widget honours
   the picture's aspect ratio and letterboxes whatever is left over, so at 400px
   wide the photograph is 533px tall inside a 668px frame. That white sat inside
   the embed, which is why no amount of looking at this page's own CSS ever
   found it. The embed is gone now — the slider is the theme's own, and it takes
   the shape of its photograph — but the row still has to be told what that
   shape comes to, because the builder wrote 676px here.

   And the columns. Live gives Kiley's slider 32.68% of the grid and Kelli's
   27.70%, so the same pair of 768x1024 photographs renders 400x533 on the left
   and 339x452 on the right: the two women are shown at different sizes, side by
   side, which reads as one of them being further away rather than as a layout
   accident. The 4.98% goes back to column 4 and comes out of the empty column 3
   between them, so both sliders are 400px, both are 533px tall, and the band
   keeps its outside edges exactly where live has them. Kelli's caption comes off
   the 4/6 span at the same time, because a caption spanning the 1.06% gutter as
   well as its own column no longer centres under the picture it names. */
/* The same band on a phone, where the rows are the reason for the white.

   The builder writes this grid's rows as fixed pixels at every breakpoint, and
   the phone breakpoint says 530px for a row holding a slider that is 437px tall
   at 328px wide — the slider takes the shape of its photograph, and the row was
   measured against an embed that letterboxed. That is 93px of white under Kiley,
   19px under Kelli, another 99px in an empty row at the foot of the band, and a
   name sitting a screen away from the picture it belongs to.

   Dropping the explicit rows lets each one size to what is actually in it. The
   Rows sized to their content fix that, but they cannot be left on the builder's
   placements: this band's four elements are written in the source as slider,
   slider, name, name and then spread over nine rows to interleave them. Collapse
   the rows and the two pairs land on top of each other. So the phone gets four
   rows of its own and each element is told which one it belongs on, picture then
   name, twice.

   min-height goes with them because the builder also writes a min-height equal to
   the sum of the rows it generated, which would hold the band open at its old
   height with nothing in the space.

   Selected on what each element contains rather than on its position, same as the
   desktop rule below, so that re-ordering the band cannot silently point a name
   rule at a slider. */
@media (max-width: 920px) {
	#ai-fbwilA .block-layout {
		grid-template-columns: 1fr;
		grid-template-rows: repeat( 4, min-content );
		row-gap: 1.25rem;
		min-height: 0;
	}

	#ai-fbwilA .layout-element {
		grid-column: 1;
	}

	#ai-fbwilA .layout-element:not(:has(.text-box)) {
		grid-row: 1;
	}

	#ai-fbwilA .layout-element:has(.text-box) {
		grid-row: 2;
	}

	#ai-fbwilA .layout-element:not(:has(.text-box)) ~ .layout-element:not(:has(.text-box)) {
		grid-row: 3;
	}

	#ai-fbwilA .layout-element:has(.text-box) ~ .layout-element:has(.text-box) {
		grid-row: 4;
	}
}

@media (min-width: 921px) {
	#ai-fbwilA .block-layout {
		grid-template-rows: 27px 533px 32px 53.1979px 89.1979px 53.1979px 0;
		grid-template-columns: 8.42% 32.68% 12.83% 32.68% 1.06% 12.34%;
		min-height: 0;
	}

	/* The two captions are the layout elements holding text; the two sliders
	   hold pictures. Selecting on what they contain rather than on their position
	   means re-ordering the band cannot silently point this at a slider. */
	#ai-fbwilA .layout-element:has(.text-box) {
		grid-row: 4 / 6;
	}

	/* Kelli's caption, the second of the two. Live spans it 4/6; her slider is
	   4/5, so the caption has to be as well or the two centre lines part. */
	#ai-fbwilA .layout-element:has(.text-box) ~ .layout-element:has(.text-box) {
		grid-column: 4 / 5;
	}

	/* The same off-by-one row, in four more bands.

	   It is the signature of a drag-and-drop editor: two things that read as a
	   pair are dropped a row apart, and a row here is between 3px and 18px, so
	   it looks like a wobble rather than like a mistake. Each rule below moves
	   one element onto the row its peers are already on, and nothing else. The
	   measured offset being corrected is named in every case.

	   These select by :nth-child because the builder gives these elements no
	   distinguishing class — the position is the only handle there is. The
	   quoted text is what sat at that position when the rule was written, so a
	   re-capture that reorders a band can be checked against it. */

	/* Two review stars, 3px apart: nth-5 on rows 2/4, nth-6 on rows 3/5. */
	#ai-6UxPvs .layout-element:nth-child(6) {
		grid-row: 2 / 4;
	}

	/* The same band sits high in its own space: 117px above the stars and 211px
	   of nothing below the two names, so the reviews read as having drifted
	   toward the ceiling. The trailing row is brought down to match the leading
	   one; the seven rows that hold content are untouched.

	   min-height comes off with it. The builder writes a min-height equal to the
	   sum of the rows it generated, so shortening a row on its own changes the
	   row and not the band — the grid keeps its old height and hands the
	   difference straight back as free space at the bottom. Zeroing it lets the
	   rows decide, which is what they already do everywhere else. */
	#ai-6UxPvs .block-layout {
		grid-template-rows: 117px 3px 23px 3px 13px 54px 11px 24px 117px;
		min-height: 0;
	}

	/* "Step 1: Choose Your Medication" sat on rows 7/9 while steps 2 and 3 sat
	   on 6/8 — the first of three steps hanging 6px below the other two. */
	#zVuKc4 .layout-element:nth-child(3) {
		grid-row: 6 / 8;
	}

	/* "DR. RAUL RODRIGUEZ, MD" started on row 10 where MELISSA and DJ both
	   start on row 11, lifting the physician's name 18px above the two team
	   members either side of him. The span stays three rows — his caption is
	   two lines where theirs are one. */
	#ai-_JDRo1 .layout-element:nth-child(5) {
		grid-row: 11 / 14;
	}

	/* "North Houston Cypress / Tombball" started on row 11 against row 10 for
	   the other two locations, dropping one of three side-by-side clinic
	   captions 11px below its neighbours. */
	#zOANNa .layout-element:nth-child(9) {
		grid-row: 10 / 14;
	}
}

/* The header and the footer, set in the live site's own type.

   These two are WordPress template parts, which is deliberate — it is what puts
   one header and one footer on all 136 pages instead of on the eleven bands
   copied from the home page. The cost is that they sit outside the copied
   markup, so none of the .text-box rules in live.css reach them, and what they
   inherited instead was the page builder's own reset:

       body { font-family: DM Sans, sans-serif; color: #1d1e20 }

   Every visible element on the live site is inside a .text-box or a
   .block-header__nav-link and overrides that reset, so the live site never
   shows a pixel of DM Sans. The rebuild's header showed nothing but — grey
   17px DM Sans against live's pink 16px Lato, at the very top of the page.

   So the values come from the same --nav-link-* and --body-* tokens the live
   header reads, rather than from the theme's own presets. Two sources of truth
   for one typeface is how the headers came apart in the first place. */
header,
footer {
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
}

/* Colour goes on the containers, never on the <a>.

   WordPress pins every navigation link to `color: inherit` through a selector
   that repeats its own class to raise specificity:

       .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content

   That is (0,3,0), and it is deliberate — core wants the block coloured once
   and the links to follow. Trying to colour the anchor directly means either
   out-repeating core's class or reaching for !important, and losing the ability
   to state hover and current-page as ordinary overrides. Colouring the
   container and letting `inherit` carry it down is the way in that core
   intends, and it is why every rule below sets colour on a wrapper.

   Without this the links inherited from the builder's body reset instead, and
   the whole menu came out #1d1e20 where live is pink. */
header .wp-block-navigation {
	color: var(--nav-link-color);
}

/* Font, size and spacing are safe on the anchor: core states no opinion. */
header .wp-block-navigation a {
	font-family: var(--nav-link-font-family);
	font-size: var(--nav-link-font-size);
	font-weight: var(--nav-link-font-weight);
	letter-spacing: var(--nav-link-letter-spacing);
	text-transform: var(--nav-link-text-transform);
	text-decoration: none;
}

header .wp-block-navigation .wp-block-navigation-item:hover,
header .wp-block-navigation .wp-block-navigation-item:focus-within {
	color: var(--nav-link-color-hover);
}

header .wp-block-navigation a:hover,
header .wp-block-navigation a:focus-visible {
	text-decoration: underline;
}

/* The page you are on. Live marks it with the hover colour and an underline
   rather than with a colour of its own, so this is that, not an invention.
   WordPress adds the class itself — nothing has to be passed in per page. */
header .wp-block-navigation .current-menu-item,
header .wp-block-navigation .current_page_item {
	color: var(--nav-link-color-hover);
}

header .wp-block-navigation .current-menu-item > a,
header .wp-block-navigation .current_page_item > a {
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Submenu items sit on a white panel, where pink-on-white at 16px is thin to
   read; live darkens them for the same reason. */
header .wp-block-navigation .wp-block-navigation__submenu-container {
	color: var(--nav-link-color-hover);
}

/* The Google rating, directly under the hero links — the last thing in the hero
   on the live site too. Deliberately plain text rather than the avatar row live
   uses: those five faces are hotlinked third-party images that cost a render
   block at the top of the page, and the number is the part that does the work. */
.mys-hero__rating {
	margin: 1.25rem 0 0;
	text-align: center;
	font-size: 0.95rem;
	font-weight: 600;
}

.mys-hero__rating a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
	padding-bottom: 2px;
}

.mys-hero__rating a:hover,
.mys-hero__rating a:focus-visible {
	border-bottom-color: #fff;
}

/* The header CTA button ("I'm Ready To Start!") sits inline with the nav on
   desktop. On mobile the navigation collapses to a hamburger and the button
   wraps below the logo row, creating a floating pink pill between the header
   and the hero — the live site does not show this. Hide it there; it remains
   reachable via the hero's own CTA links and the hamburger menu on mobile. */
@media (max-width: 767px) {
	header .wp-block-buttons {
		display: none;
	}
}

.mys-hero__star {
	color: #f0a202;
	font-size: 1.05em;
}

/* ── Zyro block-background fix ────────────────────────────────────────────
   Zyro's Vue runtime reads --v4cfc8878 and applies it as background-color
   at runtime. Without Vue running in WP, all colored sections are transparent
   and white text becomes invisible. This rule restores those backgrounds. */
.block-background {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--v4cfc8878, transparent);
}

/* The overlay is a separate layer — Zyro renders it as a pseudo-element
   with opacity var(--v3f9ca25a). Without Vue, apply it directly. */
.block-background::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--v4cfc8878, transparent);
	opacity: var(--v3f9ca25a, 0);
}

/* Section-specific overrides for sections that use a background IMAGE
   (transparent --v4cfc8878) but need a color for the overlay. */
#ai-6UxPvs .block-background {
	background: linear-gradient(135deg, rgba(255, 77, 151, 0.88), rgba(143, 17, 168, 0.88));
}

/* Ensure block layout sits above the background */
.block-layout {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
   Footer.

   The live footer is section #zSiG-O — a Zyro grid band on a white background
   whose every cell is absolutely placed by CSS custom properties that Vue sets
   at runtime. Copying that markup the way build_home_from_live.py copies the
   home page's bands does not work here: capture_live_theme.py never captured
   the footer's per-element rules (grep for "#zSiG-O" in live.css returns 0), so
   the copied cells would stack in source order with no columns at all.

   So the footer is rebuilt as an ordinary four-column flex layout that reads
   the same tokens as the rest of the theme. Same words, same links, same order,
   same white ground and pink wordmark — laid out by rules that exist rather
   than by rules that were never downloaded.

   Read off madeyaskinny.com's own footer on 2026-08-26. The five disclaimer
   paragraphs are verbatim: DJ's counsel wrote them and LegitScript reads them.
   --------------------------------------------------------------------------- */
.mys-footer {
	background: #fff;
	border-top: 1px solid rgba(29, 30, 32, 0.1);
	padding: 56px 24px 40px;
	color: #1d1e20;
}

.mys-footer__inner {
	max-width: 1224px;
	margin: 0 auto;
}

.mys-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 40px;
}

.mys-footer__wordmark {
	font-family: var(--h2-font-family, var(--body-font-family));
	font-size: 32px;
	font-weight: 700;
	color: rgb(255, 77, 151);
	text-decoration: none;
	line-height: 1.2;
}

.mys-footer__social {
	display: flex;
	gap: 16px;
	color: rgb(255, 77, 151);
}

.mys-footer__social a {
	color: inherit;
	display: inline-flex;
}

.mys-footer__social a:hover {
	opacity: 0.75;
}

/* Four columns on desktop, two on tablet, one on phone. auto-fit rather than a
   fixed count so the LEARN column never sits alone on a row of its own. */
.mys-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px 24px;
	margin-bottom: 48px;
}

.mys-footer__col h3 {
	font-family: var(--body-font-family);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1d1e20;
	margin: 0 0 16px;
}

.mys-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mys-footer__col li {
	margin-bottom: 10px;
	font-size: var(--body-font-size, 16px);
	line-height: 1.5;
}

.mys-footer__col a {
	color: #1d1e20;
	text-decoration: none;
}

.mys-footer__col a:hover,
.mys-footer__col a:focus-visible {
	color: rgb(255, 77, 151);
	text-decoration: underline;
}

/* Magnolia and Cypress hang off Physical Locations on live, indented rather
   than promoted to siblings — they are the two clinics, not two more sections. */
.mys-footer__sub {
	margin-top: 10px;
	padding-left: 16px;
}

.mys-footer__phone {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.mys-footer__phone a {
	font-weight: 700;
}

.mys-footer__phone span {
	color: rgba(29, 30, 32, 0.65);
	font-size: 14px;
}

/* The disclaimers. Smaller and greyed, the way live sets them — they are
   required text, not body copy, and setting them at body size made the footer
   read as five paragraphs of marketing. */
.mys-footer__legal {
	border-top: 1px solid rgba(29, 30, 32, 0.1);
	padding-top: 24px;
	margin-bottom: 24px;
}

.mys-footer__legal p {
	font-size: 13px;
	line-height: 1.6;
	color: rgba(29, 30, 32, 0.65);
	margin: 0 0 12px;
}

.mys-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid rgba(29, 30, 32, 0.1);
	padding-top: 24px;
}

.mys-footer__copy {
	margin: 0;
	font-size: 13px;
	color: rgba(29, 30, 32, 0.65);
}

.mys-footer__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mys-footer__policies a {
	font-size: 13px;
	color: rgba(29, 30, 32, 0.65);
	text-decoration: none;
}

.mys-footer__policies a:hover,
.mys-footer__policies a:focus-visible {
	color: rgb(255, 77, 151);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.mys-footer {
		padding: 40px 16px 32px;
	}

	.mys-footer__wordmark {
		font-size: 26px;
	}

	.mys-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* The pink handset next to the phone number is live's own asset, not an icon
   font — same file, so the number reads the same on both sites. */
.mys-footer__phone-icon {
	width: 16px;
	height: 16px;
	display: block;
	flex-shrink: 0;
}

/* Maintained conversion pages
   ===========================
   These pages are authored as full-width responsive sections. Leaving them in
   the legacy 760px prose well creates a narrow stripe on desktop and makes
   every card/image feel crowded on a phone. */
.page-template-default .wp-block-post-content:has(
	:is(.mys-wm-intro, .mys-services-page, .mys-paath-page, .mys-affordable-page)
) {
	width: 100%;
	max-width: none;
	padding-block: 0;
}

:is(.mys-services-page, .mys-paath-page, .mys-affordable-page) {
	font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

:is(.mys-services-page, .mys-paath-page, .mys-affordable-page, .wp-block-post-content) :is(h1, h2, h3) {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}

.mys-kicker,
.mys-card__eyebrow {
	color: var(--wp--preset--color--brand);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

.mys-kicker {
	max-width: 46rem;
	margin-block: 0 0.6rem;
	text-align: center;
}

.mys-card__link {
	margin-top: auto;
	padding-top: 0.35rem;
	color: var(--wp--preset--color--brand);
	font-weight: 800;
}

.mys-btn--pink {
	border: 2px solid var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: #fff;
}

.mys-btn--outline {
	border: 2px solid var(--wp--preset--color--brand);
	background: #fff;
	color: var(--wp--preset--color--brand);
}

.mys-section--ink .mys-btn--outline {
	border-color: #fff;
	background: transparent;
	color: #fff;
}

/* Progressive scroll reveal. Content is hidden only after JavaScript declares
   itself ready, so a blocked or failed script never creates a blank page. */
body.mys-reveal-ready .mys-reveal-item {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}
body.mys-reveal-ready .mys-reveal-item[data-animation-state="active"] {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	body.mys-reveal-ready .mys-reveal-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.mys-paath-qr {
	max-width: 260px;
	margin: 2rem auto 0;
	text-align: center;
}
.mys-paath-qr img {
	display: block;
	width: 100%;
	height: auto;
	border: 10px solid #fff;
	border-radius: var(--mys-radius);
	box-shadow: var(--mys-shadow);
}
.mys-paath-qr figcaption {
	margin-top: 0.75rem;
	font-size: 0.9rem;
	line-height: 1.5;
}

.mys-price-card {
	align-self: stretch;
	padding: clamp(1.4rem, 4vw, 2rem);
	border: 1px solid rgba(255, 77, 151, 0.22);
	border-radius: var(--mys-radius);
	background: var(--wp--preset--color--blush);
	box-shadow: var(--mys-shadow);
}

.mys-price-card p { margin: 0; }
.mys-price-card__label {
	color: var(--wp--preset--color--brand);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.mys-price-card__price {
	font-size: clamp(2.5rem, 8vw, 4rem);
	font-weight: 800;
	line-height: 1.05;
}
.mys-price-card__after {
	margin-top: 1rem !important;
	padding-top: 1rem;
	border-top: 1px solid rgba(29, 30, 32, 0.14);
	font-size: 0.9rem;
	line-height: 1.5;
}

.mys-wm-intro__grid,
.mys-story-grid {
	display: grid;
	gap: clamp(1.25rem, 4vw, 2rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

.mys-wm-intro__grid > div > h2,
.mys-wm-intro__grid > div > .mys-kicker {
	text-align: left;
}

.mys-story-card {
	min-width: 0;
	padding: clamp(0.9rem, 3vw, 1.25rem);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--mys-radius);
	background: rgba(255, 255, 255, 0.08);
}

.mys-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: calc(var(--mys-radius) - 4px);
	background: #000;
}

.mys-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mys-story-card h3 { margin: 1rem 0 0.35rem; }

.mys-online-help {
	max-width: 46rem;
	margin: 1.5rem auto 0;
	text-align: center;
	font-weight: 700;
}

.mys-big-number {
	color: var(--wp--preset--color--brand) !important;
	font-size: clamp(2.5rem, 8vw, 4rem) !important;
	font-weight: 800;
	line-height: 1;
}

.mys-process-list {
	max-width: 50rem;
	margin: 2rem auto 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.85rem;
	counter-reset: mys-process;
}

.mys-process-list li {
	position: relative;
	padding: 1rem 1rem 1rem 4rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	counter-increment: mys-process;
}

.mys-process-list li::before {
	content: counter(mys-process);
	position: absolute;
	left: 1rem;
	top: 1rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-weight: 800;
}

.mys-process-list strong,
.mys-process-list span { display: block; }
.mys-process-list span { margin-top: 0.25rem; color: var(--wp--preset--color--muted); }

.mys-service-index__featured .mys-card__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0;
}

.mys-service-index__featured .mys-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mys-service-index__card,
.mys-service-index__featured { min-width: 0; }

.mys-affordable-options .mys-card .mys-btn {
	align-self: stretch;
	margin-top: auto;
	text-align: center;
}

.mys-affordable-options .mys-grid { max-width: 44rem; }

.mys-cherry-widget {
	width: 100%;
	min-height: 12rem;
	overflow: visible;
}

.mys-affordable-cherry {
	overflow: clip;
}

/* Shared first-party Google review marquee. Home receives the same rules from
   mirror.css; maintained pages use design.css. Keeping the selectors identical
   prevents the canonical review block from turning into a tall vertical list. */
.mys-home-reviews {
	padding: 44px clamp(20px, 4vw, 52px) 38px;
	overflow: hidden;
	background: #fff7fb;
	color: #1d1e20;
	font-family: var(--body-font-family, Lato, sans-serif);
}

.mys-home-reviews h2 {
	margin: 0 auto 8px;
	max-width: 1160px;
	color: rgb(255, 77, 151);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.2;
	text-align: center;
}

.mys-home-reviews__lead,
.mys-home-reviews__link,
.mys-home-reviews > .mys-disclaimer {
	max-width: 72ch;
	margin: 0 auto;
	text-align: center;
}

.mys-reviews-viewport {
	margin: 24px calc(clamp(20px, 4vw, 52px) * -1);
	padding: 4px 0 12px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 77, 151, 0.45) transparent;
}

.mys-reviews-track,
.mys-reviews-set {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: max-content;
}

.mys-reviews-track {
	animation: mys-design-review-scroll 95s linear infinite;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	will-change: transform;
}

.mys-reviews-viewport:hover .mys-reviews-track,
.mys-reviews-viewport:focus .mys-reviews-track,
.mys-reviews-viewport:focus-within .mys-reviews-track {
	animation-play-state: paused;
}

.mys-home-reviews .mys-review {
	flex: 0 0 clamp(18rem, 30vw, 20rem);
	padding: 20px;
	border: 1px solid rgba(255, 77, 151, 0.16);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(76, 31, 53, 0.08);
}

.mys-home-reviews .mys-review-stars {
	margin: 0 0 8px;
	color: #e39a00;
	font-size: 1rem;
	letter-spacing: 0.08em;
}

.mys-home-reviews blockquote,
.mys-home-reviews blockquote p {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	line-height: 1.5;
}

.mys-review-emoji {
	display: inline-block;
	width: 1em;
	height: 1em;
	overflow: hidden;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
	font-size: 1em;
	line-height: 1;
	vertical-align: -0.1em;
}

.mys-review-emoji img.emoji,
.mys-review-emoji img.wp-smiley,
.mys-home-reviews img.emoji,
.mys-home-reviews img.wp-smiley {
	display: inline !important;
	width: 1em !important;
	height: 1em !important;
	max-width: 1em !important;
	max-height: 1em !important;
	margin: 0 0.07em !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	object-fit: contain !important;
	vertical-align: -0.1em !important;
}

.mys-home-reviews cite {
	display: block;
	margin-top: 12px;
	color: #6a5b62;
	font-size: 0.78rem;
	font-style: normal;
}

.mys-home-reviews .mys-review .mys-disclaimer {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-left: 3px solid rgb(255, 77, 151);
	background: #fff7fb;
	font-size: 0.72rem;
	line-height: 1.4;
}

.mys-home-reviews__link { margin-top: 4px; }

.mys-home-reviews__link a {
	color: rgb(255, 77, 151);
	font-weight: 700;
}

.mys-home-reviews > .mys-disclaimer {
	margin-top: 12px;
	color: #6a5b62;
	font-size: 0.78rem;
	line-height: 1.45;
}

@keyframes mys-design-review-scroll {
	to { transform: translate3d(calc(-50% - 8px), 0, 0); }
}

@media screen and (max-width: 600px) {
	.mys-home-reviews { padding: 30px 18px 24px; }
	.mys-home-reviews h2 { font-size: 1.8rem; }
	.mys-home-reviews__lead { font-size: 0.95rem; line-height: 1.4; }
	.mys-reviews-viewport { margin: 18px -18px 0; padding-bottom: 8px; }
	.mys-home-reviews .mys-review { flex-basis: min(82vw, 19rem); padding: 18px; }
	.mys-home-reviews__link { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.mys-reviews-track { animation: none; }
	.mys-reviews-set[aria-hidden="true"] { display: none; }
}

/* Same interactive three-step component on Home and Weight Management. */
.mys-steps-block { padding-block: var(--mys-section-y); }
.mys-steps { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.mys-steps__heading { margin: 0 0 1.5rem; text-align: center; }
.mys-steps__switch {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mys-steps__list {
	max-width: 42rem; margin: 0 auto; padding: 0; list-style: none;
	display: grid; gap: 1.5rem;
}
.mys-step {
	display: flex; min-width: 0; flex-direction: column; overflow: hidden;
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--mys-radius);
	background: #fff; box-shadow: var(--mys-shadow);
}
.mys-step__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mys-step__num { margin: 1rem 1.25rem 0; color: var(--wp--preset--color--brand); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mys-step__title { margin: 0.25rem 1.25rem 0; font-size: 1.25rem; line-height: 1.3; }
.mys-step__copy { margin: 0.5rem 1.25rem 1.25rem; line-height: 1.55; }
.mys-steps__choice-label { margin: 0 1.25rem 0.5rem; color: var(--wp--preset--color--brand); font-size: 0.85rem; font-weight: 800; text-transform: uppercase; }
.mys-steps__choice { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0 1.25rem 0.875rem; }
.mys-steps__pick { flex: 1 1 10rem; padding: 0.7rem 1rem; border: 2px solid var(--wp--preset--color--brand); border-radius: 999px; color: var(--wp--preset--color--brand); font-weight: 700; text-align: center; cursor: pointer; }
#mys-path-office:checked ~ .mys-steps__list .mys-steps__pick--office,
#mys-path-online:checked ~ .mys-steps__list .mys-steps__pick--online { background: var(--wp--preset--color--brand); color: #fff; }
.mys-step--office, .mys-step--online, .mys-steps__prescreen { display: none !important; }
#mys-path-office:checked ~ .mys-steps__list .mys-step--office,
#mys-path-online:checked ~ .mys-steps__list .mys-step--online { display: flex !important; }
#mys-path-office:checked ~ .mys-steps__list .mys-steps__prescreen,
#mys-path-online:checked ~ .mys-steps__list .mys-steps__prescreen { display: inline-flex !important; }
.mys-steps__prescreen { align-self: flex-start; min-height: 48px; margin: 0 1.25rem 1.25rem; padding: 0.75rem 1.5rem; text-decoration: none; }
.mys-steps__note { max-width: 42rem; margin: 1.5rem auto 0; text-align: center; line-height: 1.55; }

@media (min-width: 62em) {
	.mys-wm-intro__grid { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.8fr); }
	.mys-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#mys-path-office:checked ~ .mys-steps__list,
	#mys-path-online:checked ~ .mys-steps__list { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 39.99em) {
	.mys-section { padding-inline: 1rem; }
	.mys-section > :is(h2, .mys-section__title) { font-size: clamp(1.65rem, 8vw, 2rem); }
	.mys-section__lede { font-size: 1rem; }
	.mys-ctarow { align-items: stretch; flex-direction: column; }
	.mys-ctarow .mys-btn { width: 100%; }
}