/**
 * Theme CSS.
 *
 * Only what theme.json genuinely cannot express. Everything that can be a token
 * lives in theme.json, where the block editor can see it too.
 */

/* ------------------------------------------------------------- box-sizing */

/**
 * Global border-box reset.
 *
 * WordPress core does NOT ship a global box-sizing reset, and this theme was
 * missing one. Under the browser default (content-box), any element with
 * width:100% AND padding renders wider than its container by the padding — so
 * the pricing/care cards and About cards (width:100% columns with 24px inner
 * padding) pushed ~50px past a 375px phone viewport, and the whole page could
 * scroll sideways. border-box makes width INCLUDE padding, which is what every
 * one of these fixed-width-plus-padding layouts assumes. This is the single fix
 * for the mobile horizontal overflow on pricing, about and the start form.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- dark areas */

/**
 * Links on dark surfaces.
 *
 * theme.json sets element.link colour globally to --primary (#DB0050). That is
 * correct on white (5.09:1) and WRONG on the near-black footer, where it drops
 * to 3.84:1 and fails AA. The same trap as the Next.js build: a token doing two
 * jobs with different reference points.
 *
 * theme.json cannot express "different link colour inside a dark group", so it
 * has to be here.
 */
.is-dark-section a:where(:not(.wp-element-button)) {
	color: #d4d4d8; /* 13.22:1 on #0C0C0E */
	text-decoration: none;
}

.is-dark-section a:where(:not(.wp-element-button)):hover {
	color: #ffffff;
	text-decoration: underline;
}

/* Focus ring must invert on dark — the near-black default is invisible there. */
.is-dark-section :focus-visible {
	outline-color: #ffffff;
}

/* ------------------------------------------------------------- footer layout */

/* Footer navigation is a list for semantics, not for bullets. */
.site-footer .footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.site-footer .footer-list li {
	font-size: var(--wp--preset--font-size--small);
}

/* Stop "Managed Websites" wrapping mid-word in a narrow column. */
.site-footer .wp-block-column {
	min-width: 0;
	overflow-wrap: break-word;
}

.site-footer .footer-list a {
	white-space: nowrap;
}

/* ------------------------------------------------------------------- header */




/* --------------------------------------------------------------- a11y basics */

/**
 * Focus ring, drawn OUTSIDE the control via outline-offset so it lands on the
 * surface behind it. A near-black ring drawn ON a pink button is 3.48:1; on the
 * page behind it, ~17:1.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--foreground);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Vestibular safety. WCAG 2.2 requires honouring this. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Buttons and links need a usable target on touch (WCAG 2.5.8). */
.wp-element-button,
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------------------ feature lists */

/* Pink dot markers rather than list bullets. Decorative, so a pseudo-element —
   a screen reader should not announce "check, check, check" down the list. */
.feature-list,
.terms-note {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.feature-list li,
.terms-note li {
	position: relative;
	padding-left: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}

.feature-list li::before,
.terms-note li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	/* accent, not primary: a 7px dot is a graphic, not text — the 3:1 UI bar
	   applies, which #FF0E63 clears at 3.82:1. */
	background: var(--wp--preset--color--accent);
}

.terms-note {
	margin-top: var(--wp--preset--spacing--40);
}

.terms-note li {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

@media (min-width: 782px) {
	.feature-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* The price card follows the reader down a long feature list. */
@media (min-width: 960px) {
	.price-card {
		position: sticky;
		top: 96px;
	}
}

/* ------------------------------------------------------------- trust strip */

.trust-strip .wp-block-column {
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------------ process */

.step-number {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------- FAQ */

.faq-list .wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	max-width: 78ch;
}

.faq-list .wp-block-details summary {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	cursor: pointer;
	/* 44px comfortable target (WCAG 2.5.8 asks 24 minimum). */
	min-height: 44px;
	display: flex;
	align-items: center;
}

.faq-list .wp-block-details summary:hover {
	color: var(--wp--preset--color--primary);
}

.faq-list .wp-block-details p {
	color: var(--wp--preset--color--muted);
	max-width: 68ch;
	margin-top: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------- cards */

.info-card {
	/* Flex children refuse to shrink below content width without this — the same
	   thing that broke the footer columns. */
	min-width: 0;
}

@media (max-width: 781px) {
	.trust-strip .wp-block-column {
		margin-bottom: var(--wp--preset--spacing--30);
	}
}

/* =========================================================================
   Concept HVAC mockup (hero)
   =========================================================================
   A fabricated example, approved by Adam. Rules it obeys, from the spec:

   - Labelled. Visible "Concept" badge + a caption saying it is not a client
     project. A fabrication must never read as delivered work.
   - No browser chrome. These are device screens, not windows with URL bars —
     the spec rules out fake browser interfaces.
   - No stock photography. Imagery is abstract colour, not a fake photo of a
     fake technician.
   - Its OWN brand, not Xcelerated's. A portfolio piece in our palette implies
     every client site looks like ours.
   ========================================================================= */

.hvac-mockup {
	margin: 0;
	--hvac-navy: #0F2B46;
	--hvac-blue: #1E6BB8;
	--hvac-sky: #DCEBF7;
	--hvac-amber: #F0872B;
	--hvac-muted: #9FB3C4;
}

.hvac-stage {
	position: relative;
	/* Reserves room for the badge so it sits ABOVE the frame rather than on top
	   of the mock's own UI — an honesty label overlapping a button is easy to
	   misread as part of the mock. */
	padding-top: 2rem;
	padding-bottom: 3rem;
	padding-left: 1rem;
}

/* --- devices --- */

.hvac-desktop {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	container-type: inline-size;
}

.hvac-tablet,
.hvac-mobile {
	position: absolute;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.hvac-tablet { right: -2%; bottom: 4%; width: 30%; aspect-ratio: 3 / 4; }
.hvac-mobile { left: 0; bottom: 1%; width: 15%; aspect-ratio: 9 / 19; }

/* --- the mock site's own nav (NOT browser chrome) --- */

.hvac-nav {
	display: flex;
	align-items: center;
	gap: 4cqw;
	padding: 2.2cqw 3cqw;
	border-bottom: 1px solid var(--hvac-sky);
	flex: 0 0 auto;
}

.hvac-logo {
	display: flex;
	align-items: center;
	gap: 1.2cqw;
	font-size: 2.4cqw;
	font-weight: 700;
	color: var(--hvac-navy);
	letter-spacing: -0.02em;
	margin-right: auto;
}

.hvac-mark {
	width: 2.6cqw;
	height: 2.6cqw;
	min-width: 8px;
	min-height: 8px;
	border-radius: 2px;
	background: linear-gradient(135deg, var(--hvac-blue), var(--hvac-amber));
	flex: 0 0 auto;
}

.hvac-navitems { display: flex; gap: 2cqw; }
.hvac-navitems i { display: block; width: 5cqw; height: 1cqw; min-height: 3px; border-radius: 999px; background: var(--hvac-muted); }

/**
 * Navy on amber, NOT white on amber.
 *
 * White on #F0872B is 2.55:1 and fails. aria-hidden does not excuse contrast —
 * a low-vision sighted visitor still looks at it, which is why axe flagged this
 * in the Next.js build. Navy is 5.64:1. A portfolio piece modelling an
 * inaccessible button is also poor advertising for a company selling accessible
 * websites.
 */
.hvac-pill {
	font-size: 1.9cqw;
	font-weight: 600;
	color: var(--hvac-navy);
	background: var(--hvac-amber);
	padding: 1.2cqw 2.4cqw;
	border-radius: 999px;
	white-space: nowrap;
}

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

.hvac-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3cqw; padding: 4cqw 3cqw; align-items: center; flex: 1 1 auto; }
.hvac-herocopy { display: flex; flex-direction: column; gap: 1.6cqw; align-items: flex-start; }
.hvac-eyebrow { width: 14cqw; height: 1.2cqw; min-height: 4px; border-radius: 999px; background: var(--hvac-amber); }
.hvac-heading { margin: 0; font-size: 4.4cqw; line-height: 1.1; color: var(--hvac-navy); letter-spacing: -0.03em; font-weight: 700; }
.hvac-line { display: block; height: 1.1cqw; min-height: 3px; border-radius: 999px; background: var(--hvac-sky); width: 90%; }
.hvac-line.short { width: 62%; }
.hvac-cta { margin-top: 1cqw; font-size: 2cqw; font-weight: 600; color: #fff; background: var(--hvac-blue); padding: 1.6cqw 3cqw; border-radius: 4px; }

/* Abstract art, not a stock photo of a fake technician. */
.hvac-art { aspect-ratio: 4 / 3; border-radius: 6px; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.35), transparent 55%), linear-gradient(150deg, var(--hvac-blue), var(--hvac-navy)); }

/* --- mock cards --- */

.hvac-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 0 3cqw 4cqw; flex: 0 0 auto; }
.hvac-card { display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.4cqw; border: 1px solid var(--hvac-sky); border-radius: 6px; }
.hvac-icon { width: 4cqw; height: 4cqw; min-width: 10px; min-height: 10px; border-radius: 4px; background: var(--hvac-sky); }
.hvac-cardtitle { font-size: 2cqw; font-weight: 600; color: var(--hvac-navy); }

/* --- tablet --- */

.hvac-tabnav { display: flex; align-items: center; justify-content: space-between; padding: 8% 8% 4%; border-bottom: 1px solid var(--hvac-sky); }
.hvac-tabnav .hvac-mark { width: 10px; height: 10px; }
.hvac-tabnav .hvac-navitems i { width: 14px; height: 3px; }
.hvac-tabhero { display: flex; flex-direction: column; gap: 6px; padding: 8%; align-items: flex-start; }
.hvac-headingsm { font-size: 11px; font-weight: 700; color: var(--hvac-navy); line-height: 1.15; }
.hvac-ctasm { font-size: 8px; font-weight: 600; color: var(--hvac-navy); background: var(--hvac-amber); padding: 4px 8px; border-radius: 3px; margin-top: 2px; }
.hvac-tabart { margin: 0 8% 8%; flex: 1 1 auto; border-radius: 4px; background: linear-gradient(150deg, var(--hvac-blue), var(--hvac-navy)); }

/* --- mobile --- */

.hvac-notch { width: 34%; height: 4px; border-radius: 999px; background: var(--hvac-sky); margin: 6px auto 0; }
.hvac-mobnav { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 6px; }
.hvac-mobnav .hvac-mark { width: 8px; height: 8px; }
.hvac-burger { display: flex; flex-direction: column; gap: 1.5px; }
.hvac-burger i { display: block; width: 8px; height: 1.5px; background: var(--hvac-muted); border-radius: 999px; }
.hvac-mobart { margin: 0 8px; aspect-ratio: 4 / 3; border-radius: 3px; background: linear-gradient(150deg, var(--hvac-blue), var(--hvac-navy)); }
.hvac-mobbody { display: flex; flex-direction: column; gap: 4px; padding: 8px; align-items: flex-start; }
.hvac-headingxs { font-size: 7px; font-weight: 700; color: var(--hvac-navy); }
.hvac-mobbody .hvac-line { height: 2px; min-height: 2px; }
.hvac-mobcta { font-size: 6px; font-weight: 600; color: #fff; background: var(--hvac-blue); padding: 3px 6px; border-radius: 2px; margin-top: 2px; }

/* --- the honesty label --- */

.hvac-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	/* Solid, never translucent: this is a claim about authenticity, so it must
	   stay legible over whatever sits behind it. */
	background: var(--wp--preset--color--secondary);
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
}

.hvac-caption {
	margin-top: 1rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* ------------------------------------------------------------ care pricing */

.care-card { min-width: 0; position: relative; display: flex; flex-direction: column; }
.care-card .wp-block-buttons { margin-top: auto; padding-top: var(--wp--preset--spacing--40); }

.care-amount {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--40);
	/* Brand pink, matching the hero's "$199 a month". Large display text (well
	   over 24px bold), so accent's 3.82:1 clears the 3:1 large-text bar. The
	   /month span stays muted for hierarchy. */
	color: var(--wp--preset--color--accent);
}

.care-amount span {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* Highlight uses a border + tag, never colour alone (WCAG 1.4.1). */
.popular-tag {
	position: absolute;
	top: calc(-1 * var(--wp--preset--spacing--30));
	left: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border-radius: 999px;
	margin: 0;
}

.clarifier { border-left: 3px solid var(--wp--preset--color--accent) !important; max-width: 78ch; }

/* Exclusions use a dash, not a coloured dot — state must not be conveyed by
   colour alone, and a pink dot beside "E-commerce" reads as included. */
.exclusion-list li::before {
	background: var(--wp--preset--color--border-strong) !important;
	width: 10px !important;
	height: 2px !important;
	border-radius: 2px !important;
	top: 0.7em !important;
}

.exclusion-list li { color: var(--wp--preset--color--muted); }

/* =========================================================================
   "What your 4–5 pages look like" — the FAQ companion graphic
   =========================================================================
   Sits beside the FAQ, which was a single column with dead space to its right.
   It is not decoration: the FAQ's first two questions are "How many pages are
   included?" and "Is this only a one-page website?", and this answers both
   visually right next to them. The 4–5 page framing is the load-bearing claim
   of the whole offer.

   A real <ol> of real text — not an image. It is readable by a screen reader,
   translatable, selectable, and stays sharp at any size.
   ========================================================================= */

.pages-visual {
	position: sticky;
	top: 96px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--50);
}

.pages-visual__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.pages-stack {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
	counter-reset: none;
}

.page-chip {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	transition: border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

/*
 * These were staggered with an increasing left margin, meaning to read as a
 * stack with depth. It read as crooked — which is what a small unexplained
 * offset always reads as. Aligned flush; the numbered chips already carry the
 * sequence without any help.
 */

.page-chip:hover { border-color: var(--wp--preset--color--border-strong); }

.page-chip__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	margin-top: 2px;
}

.page-chip__body { display: grid; gap: 2px; min-width: 0; }
.page-chip__name { font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.page-chip__note { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }

/**
 * The fifth page is the client's choice, marked by a DASHED BORDER only.
 *
 * It previously also swapped its number to the accent pink (#FF0E63). That
 * forced the number text to near-black, because white on the accent is 3.82:1
 * and fails AA while near-black is 5.11:1. Accessible — and visibly wrong: four
 * white numbers and one black one reads as a bug, which is exactly how Adam
 * read it.
 *
 * The dashed border already carries the distinction, and does it by SHAPE
 * rather than colour, which is what WCAG 1.4.1 wants anyway. So the number now
 * matches the other four and the accent is simply not needed here.
 */
.page-chip--choice {
	border-style: dashed;
	border-color: var(--wp--preset--color--border-strong);
}

.pages-visual__foot {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.pages-visual { position: static; margin-top: var(--wp--preset--spacing--60); }
}

/* =========================================================================
   Start form
   ========================================================================= */

.cortez-form-wrap { display: grid; gap: var(--wp--preset--spacing--60); }

.cortez-progress {
	list-style: none; margin: 0; padding: 0 0 var(--wp--preset--spacing--40);
	display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.cortez-progress__item { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }

.cortez-progress__num {
	display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto;
	border-radius: 999px; border: 1px solid var(--wp--preset--color--border-strong);
	font-weight: 600; font-size: var(--wp--preset--font-size--x-small);
}

/* Current step is marked by weight AND a filled indicator — never colour
   alone (WCAG 1.4.1). */
.cortez-progress__item.is-current { color: var(--wp--preset--color--foreground); font-weight: 600; }
.cortez-progress__item.is-current .cortez-progress__num { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; }
.cortez-progress__item.is-done .cortez-progress__num { background: var(--wp--preset--color--border); border-color: var(--wp--preset--color--border); }
.cortez-progress__label { display: none; }

.cortez-restored {
	font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); margin: 0;
}

.cortez-form { display: grid; gap: var(--wp--preset--spacing--50); }
.cortez-step__title { font-size: var(--wp--preset--font-size--xx-large); margin: 0 0 var(--wp--preset--spacing--40); }
/* Programmatic focus target — no ring, since the user did not tab here. */
.cortez-step__title:focus { outline: none; }

.cortez-grid { display: grid; gap: var(--wp--preset--spacing--40); }
.cortez-field { display: grid; gap: var(--wp--preset--spacing--20); margin: 0; }
.cortez-field--full { grid-column: 1 / -1; }
.cortez-label { font-size: var(--wp--preset--font-size--small); font-weight: 500; }

.cortez-input {
	font: inherit; font-size: var(--wp--preset--font-size--medium);
	padding: var(--wp--preset--spacing--30);
	/* border-strong, not border: 1.4.11 wants 3:1 for input outlines. The
	   decorative border is 1.27:1 — invisible to low-vision users. */
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	min-height: 44px; width: 100%;
}

.cortez-input[aria-invalid="true"] { border-color: #b32d2e; border-width: 2px; }
.cortez-error:empty { display: none; }
.cortez-error { font-size: var(--wp--preset--font-size--small); color: #b32d2e; font-weight: 500; }
.cortez-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); grid-column: 1 / -1; }

.cortez-fit {
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--accent); border-left-width: 3px;
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--40);
}

/* Off-screen, NOT display:none — some bots skip hidden fields, and this needs
   to look fillable to them while never reaching a human. */
.cortez-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cortez-review-plan {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50);
}

.cortez-review-price { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xxx-large); font-weight: 700; margin: var(--wp--preset--spacing--20) 0; }
.cortez-review-price span { font-size: var(--wp--preset--font-size--medium); font-weight: 400; color: var(--wp--preset--color--muted); }

.cortez-review { display: grid; grid-template-columns: 180px 1fr; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); margin: var(--wp--preset--spacing--50) 0; font-size: var(--wp--preset--font-size--small); }
.cortez-review dt { color: var(--wp--preset--color--muted); margin: 0; }
.cortez-review dd { margin: 0; }

.cortez-checkbox { display: flex; gap: var(--wp--preset--spacing--30); align-items: flex-start; font-size: var(--wp--preset--font-size--small); line-height: 1.65; }
.cortez-checkbox input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.cortez-submit-error { color: #b32d2e; font-weight: 500; }

.cortez-actions { display: flex; gap: var(--wp--preset--spacing--30); flex-wrap: wrap; padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--border); }
.cortez-back { background: transparent !important; color: var(--wp--preset--color--foreground) !important; border: 1px solid var(--wp--preset--color--border-strong); }

@media (min-width: 782px) {
	.cortez-grid { grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--50); }
	.cortez-progress__label { display: inline; }
}

/* =========================================================================
   Mobile responsiveness
   =========================================================================
   The theme was built desktop-first and this is the breakpoint layer it was
   missing. The core problem: WordPress only stacks a columns block on mobile
   when it carries isStackedOnMobile, and the patterns did not set it — so every
   two- and four-column row stayed side-by-side at 375px, cramming full layouts
   into a phone. Forcing the stack in CSS fixes all of them at once rather than
   editing isStackedOnMobile into ten patterns.
   ========================================================================= */

@media (max-width: 781px) {

	/* Stack ALL column blocks. This is the single fix for "not responsive". */
	.wp-block-columns {
		flex-direction: column !important;
		gap: var(--wp--preset--spacing--50);
	}

	.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Hero: the copy column leads, the mockup follows and gets breathing room. */
	.wp-block-columns.alignwide { align-items: stretch; }

	.hvac-mockup { margin-top: var(--wp--preset--spacing--50); }
	/* The tablet/mobile device insets are absolute; at phone width they crowd
	   the desktop frame. Pull them in. */
	.hvac-tablet { width: 34%; right: -1%; }
	.hvac-mobile { width: 18%; }

	/* Display heading is huge; the fluid clamp in theme.json handles the size,
	   but tighten leading so it does not tower. */
	h1.has-display-font-size { line-height: 1.05; }

	/* Section padding: 90/80 is generous on desktop, a lot of dead scroll on a
	   phone. The token already steps down at 768px for section-y, but inline
	   pattern padding does not — trim the biggest ones. */
	section[style*="spacing--90"],
	.wp-block-group[style*="spacing--90"] {
		padding-top: var(--wp--preset--spacing--70) !important;
		padding-bottom: var(--wp--preset--spacing--70) !important;
	}

	/* Trust strip: four items in a row is unreadable on a phone. */
	.trust-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40); }

	/* Care pricing cards stack; the "most popular" tag needs room above. */
	.care-popular { margin-top: var(--wp--preset--spacing--40); }

	/* Buttons go full-width so they are easy thumb targets and do not sit
	   awkwardly half-width. */
	.wp-block-buttons:not(.is-content-justification-center) .wp-block-button {
		width: 100%;
	}
	.wp-block-buttons:not(.is-content-justification-center) .wp-block-button__link {
		width: 100%;
	}

}



/* =========================================================================
   Header + navigation
   =========================================================================
   overlayMenu:"always" means the nav is a hamburger at EVERY width. The header
   is: logo (or site-title fallback) on the left, then the CTA button and the
   burger on the right.
   ========================================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--border);
	/*
	 * Solid background, NOT a translucent one with backdrop-filter.
	 *
	 * backdrop-filter (like transform and filter) creates a containing block for
	 * position:fixed descendants. WordPress's mobile nav overlay is
	 * position:fixed and expects the VIEWPORT as its containing block — trapped
	 * inside the header it collapsed to the header's 94px height and the menu was
	 * unusable. The frosted-glass blur is not worth a broken nav.
	 */
	background: var(--wp--preset--color--surface);
}

.site-header__inner { width: 100%; }
.site-header__right { align-items: center; }

/*
 * Site-title fallback.
 *
 * The site-logo block renders nothing until a logo is uploaded. On the server
 * the logo exists and the title is redundant, so hide the title WHEN a logo is
 * present. :has() is supported in every current browser; where it is not, both
 * show, which is ugly but not broken.
 */
.site-header__fallback-title a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.site-header__inner:has(.wp-block-site-logo img) .site-header__fallback-title {
	display: none;
}

/* The nav items inside the overlay. */
.site-nav .wp-block-navigation-item a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-weight: 600;
}
.site-nav .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--primary);
}

/* The burger button — give it a real target size and brand colour. */
.site-nav .wp-block-navigation__responsive-container-open,
.site-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--foreground);
	padding: 10px;
	min-width: 44px;
	min-height: 44px;
}

/*
 * The open overlay.
 *
 * WordPress owns the container geometry (position:fixed, full height, the
 * show/hide). Do NOT set padding on .is-menu-open itself — that collapses the
 * fixed container to its content height and the menu clips to the header. Style
 * only the content and the items INSIDE it.
 */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-size: var(--wp--preset--font-size--x-large);
	padding: var(--wp--preset--spacing--30) 0;
}

/* The CTA in the overlay list gets the button treatment so it stands out. */
.site-nav .nav-cta a {
	color: var(--wp--preset--color--primary);
}

/*
 * Desktop: horizontal nav + the standalone CTA button. The nav also contains a
 * "Start My Website" link (it is the last item), which is redundant next to the
 * button — hide the nav's own CTA item on desktop, keep the prominent button.
 */
@media (min-width: 600px) {
	.site-nav .nav-cta { display: none; }
}

/*
 * Mobile (WordPress collapses the nav to an overlay below ~600px): the
 * standalone button would crowd the bar next to the burger, and the overlay
 * already carries "Start My Website" as its last item. Hide the button here.
 */
@media (max-width: 599px) {
	/* .site-header prefix + the layout class: WordPress sets
	   .wp-block-buttons.is-layout-flex{display:flex} at 0,2,0, which beats a
	   lone .site-header__cta. This must out-specify it to hide. */
	.site-header .site-header__cta.wp-block-buttons { display: none; }
}

/* =========================================================================
   Fix: the "border" colour-slug collision
   =========================================================================
   Our palette has a colour named `border`. WordPress adds the class
   `.has-border-color` to EVERY block that has any border — and because a slug
   named `border` exists, WP also generates
   `.has-border-color{color:var(--…--border)!important}`, a TEXT-colour rule.
   The result: every bordered card forced its uncoloured text (the prices) to
   the border grey.

   This out-specifies that rule (0,2,0 vs 0,1,0, both !important) and restores
   inheritance. It only touches text colour — the border itself stays grey via
   the separate has-*-border-color class. Blocks that set an explicit text
   colour (has-text-color) are excluded and keep it.
   ========================================================================= */
.has-border-color:not(.has-text-color) {
	color: inherit !important;
}


/* The managed-plan price figure ($199), matching the care prices and the hero. */
.price-amount {
	color: var(--wp--preset--color--accent);
}

/* =========================================================================
   Outline button style
   =========================================================================
   Defined here rather than relying on WordPress core because the Stripe
   payment buttons are emitted by a SHORTCODE. WordPress only auto-enqueues the
   button block's is-style-outline variation stylesheet when a real wp:button
   block carrying that style is parsed on the page — a shortcode button is
   invisible to that mechanism, so without this the outline plans (Care
   Essentials, Care Complete) fell back to the filled default and every plan
   button looked identical, killing the "Most popular" emphasis on Growth.

   :not(.has-background) keeps this off the filled buttons (which carry the
   primary background class) so only genuine outline buttons are affected.
   ========================================================================= */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* ---------------------------------------------------- fit refund guarantee */

/*
 * Shown directly under every payment button. Every CTA charges before the
 * customer reaches onboarding — where we may tell them the plan does not fit —
 * so the refund promise has to be visible at the moment of payment, not buried
 * in Terms.
 *
 * Deliberately quiet: it is reassurance, not a sales claim. It must not compete
 * with the button above it.
 */
.cortez-fit-guarantee {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-left: 1.4em;
	position: relative;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* A checkmark, not a bullet — this is a guarantee, not a feature. */
.cortez-fit-guarantee::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.34em;
	width: 0.85em;
	height: 0.45em;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

/*
 * On the dark closing CTA, muted (#52525B) drops to ~2.3:1 on #0C0C0E and the
 * primary pink checkmark fails too. Same zinc-300 the other dark-section text
 * uses, which clears AA.
 */
.is-dark-section .cortez-fit-guarantee,
.cortez-fit-guarantee.on-dark {
	color: #d4d4d8;
}

.is-dark-section .cortez-fit-guarantee::before,
.cortez-fit-guarantee.on-dark::before {
	border-left-color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Centred CTA sections centre their button; the note should follow it. */
.is-dark-section .wp-block-buttons.is-content-justification-center + .cortez-fit-guarantee,
.cortez-fit-guarantee.is-centered {
	text-align: center;
	padding-left: 0;
}

.is-dark-section .wp-block-buttons.is-content-justification-center + .cortez-fit-guarantee::before,
.cortez-fit-guarantee.is-centered::before {
	position: static;
	display: inline-block;
	margin-right: 0.5em;
	transform: rotate(-45deg) translate(0.1em, -0.15em);
}

/* ------------------------------------- ARC Labs partner line (shared) */

/*
 * Common to all three Cortez sites. Zinc, not the brand pink: theme.json sets
 * the global link colour to --primary (#DB0050), which is ~2:1 on this dark
 * footer — the same trap that made the footer links unreadable before.
 */
.footer-legal__sep { margin: 0 0.5em; opacity: 0.45; }

.footer-legal__partner {
	color: #d4d4d8;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.footer-legal__partner:hover {
	color: #ffffff;
	border-bottom-color: var(--wp--preset--color--accent);
}