/*
Theme Name: Altaloans
Theme URI: https://altaloans.com/
Author: Loankea
Author URI: https://loankea.com/
Description: Block theme for Altaloans — business-purpose investor loans for brokers.
Version: 2.2.1
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: altaloans
*/

:where(.alta-prose, .alta-article) :where(p) {
	line-height: 1.75;
}

:where(.alta-prose, .alta-article) :where(li) {
	line-height: 1.6;
}

:where(th, td) {
	line-height: 1.5;
}

.is-layout-flow:where([class*="alta-"]) > * + * {
	margin-block-start: 0;
}

:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(button, input, select, textarea),
.wp-block-button__link {
	font-family: Roboto, sans-serif;
}

/*
 * Every CTA hovers the same way, whatever wraps it — plain wp:button, a core
 * is-style-accent/outline, or an .alta-btn variant. Set once here so no button
 * can end up snapping while its neighbours ease.
 */
.wp-element-button {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
		box-shadow 0.2s ease, transform 0.16s var(--wp--custom--ease--out);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Except on a filled button, where currentColor is the white label: the ring
 * came out white on a light page and read as a strange halo. Ink instead, and
 * white only where the button itself sits on the dark band.
 */
:is(.wp-element-button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--text);
}

.alta-btn--on-dark .wp-element-button:focus-visible {
	outline-color: var(--wp--preset--color--surface);
}

html {
	/* Lets the accordion transition its height between 0 and auto. */
	interpolate-size: allow-keywords;

	/*
	 * No smooth scrolling: the CTAs jump to #quote, 3730px down the home page,
	 * and the browser glides that distance over the better part of a second with
	 * nothing readable in between. An instant jump is the faster read.
	 */
	--alta-window: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

/*
 * Gentler, not zero: colour, shadow and opacity still cross-fade, because that
 * feedback is what tells you a control reacted. Only the properties that move
 * something — transform, width — drop out of the transition, so the element
 * arrives at its new state instead of travelling there.
 */
@media (prefers-reduced-motion: reduce) {
	:where(*, *::before, *::after) {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-property: color, background-color, border-color, box-shadow, opacity !important;
	}
}

.alta-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.alta-util {
	background-color: var(--wp--preset--color--background-dark);
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8125rem;
}

.alta-util__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--sm);
	min-height: 40px;
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: 0 var(--wp--custom--container--pad);
}

.alta-util__list {
	min-width: 0;
	overflow-x: auto;
}

.alta-util__list :where(ul) {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.alta-util__list :where(li) {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
	white-space: nowrap;
}

.alta-util__list :where(li + li)::before,
.alta-util__phone::before {
	content: "";
	flex-shrink: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.35);
}

.alta-util__list :where(a) {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

/*
 * The phone number, brighter and heavier than the portal links beside it
 * because it is the one thing in this bar a broker might want at a glance.
 * Its ::before is the same separator dot the links use, so it reads as the last
 * item in the row rather than a separate element pushed against the edge.
 */
.alta-util__phone {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 16px;
	margin: 0;
	color: var(--wp--preset--color--surface);
	font-weight: 700;
}

.alta-util__phone :where(a) {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.alta-header {
	position: relative;
	z-index: 50;
	border-bottom: 1px solid var(--wp--custom--line);
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
}

/*
 * Depth only once the page has moved under it. The whole chrome — utility bar
 * included — stays pinned, so nothing has to scroll away first and the shadow
 * fades in over the first stretch of movement — driven by the scroll position
 * itself, with no listener and no JS. The @supports is load-bearing: without a
 * scroll timeline the same animation would fill to its end state and the header
 * would wear the shadow at rest.
 */
@supports (animation-timeline: scroll()) {

	@media (prefers-reduced-motion: no-preference) {

		.alta-header::after {
			content: "";
			position: absolute;
			inset: 0;
			opacity: 0;
			box-shadow: 0 8px 24px rgba(15, 37, 47, 0.08);
			pointer-events: none;
			animation: alta-header-lift linear both;
			animation-timeline: scroll();
			animation-range: 0 56px;
		}
	}
}

@keyframes alta-header-lift {
	to {
		opacity: 1;
	}
}

:where(#products, #why, #documents, #about, #quote, #blog) {
	scroll-margin-top: 28px;
}

.alta-article__body :where(h2, h3),
:where(.alta-product[id]) {
	scroll-margin-top: 116px;
}

/*
 * Above 999px the pinned chrome is 40px taller — the utility bar rides along
 * instead of scrolling away — so every anchor target owes it that much more
 * clearance or the heading lands underneath the bar.
 */
@media (min-width: 1000px) {

	:where(#products, #why, #documents, #about, #quote, #blog) {
		scroll-margin-top: 68px;
	}

	.alta-article__body :where(h2, h3),
	:where(.alta-product[id]) {
		scroll-margin-top: 156px;
	}
}

.alta-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 96px;
	max-width: 1320px;
	margin-inline: auto;
	padding: 0 24px;
}

.alta-header__logo,
.alta-footer__logo {
	display: block;
}

.alta-header__logo {
	flex-shrink: 0;
}

/*
 * ⚠️ Every logo height in this file is tied to the artwork in
 * assets/altaloans-logo.png, so read this before changing one.
 *
 * The file is 908×202 and cropped to its ink — 894×195 of wordmark inside a few
 * pixels of slack, 96.5% of the box. So these heights mean what they say, and
 * the clear space around the lockup has to be spelled out here rather than
 * coming free from the file.
 *
 * It did not used to. Until 2026-08-10 the asset was 1024×367 with the same
 * 894×195 of ink floating in symmetric padding — 53% ink — so a height set here
 * bought about half as much logo as it looked like, and 60px drew a 32px mark
 * in a 96px bar. The numbers below are the ink height wanted, divided by 0.965:
 * 48px for the ~46px the header wants, which is a shade under half the bar and
 * where a horizontal wordmark sits.
 *
 * 🔴 Swapping the asset back for a padded one silently shrinks every logo on the
 * site by nearly half. Crop to the ink, or redo the arithmetic.
 */
.alta-header__logo.wp-block-site-logo img {
	display: block;
	height: 48px;
	width: auto;
}

/*
 * Mobile rhythm. Nothing below was designed for a phone: the 40px container
 * gutter and the 90-100px desktop section padding were simply inherited
 * as-is, so a 390px screen carried the same whitespace as a 1240px one and
 * every section read as a squeezed desktop layout. Shrinking the shared
 * tokens here re-tunes every section that consumes them in one place.
 */
@media (max-width: 781px) {
	:root {
		--wp--custom--container--pad: 20px;
	}

	.alta-header__inner {
		min-height: 72px;
	}

	.alta-header__logo.wp-block-site-logo img {
		height: 31px;
	}
}

.alta-header__right {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

.alta-btn .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	min-height: 44px;
	padding: 15px 28px;
	border: 0;
	border-radius: var(--wp--custom--radius--xs);
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	font-size: 1rem;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
	box-shadow: var(--wp--custom--shadow--blue);
	cursor: pointer;
}

/* The blue CTA — Get Started, Continue, Submit — darkens and lifts its glow. */
.alta-btn .wp-element-button:hover,
.alta-btn .wp-element-button:focus-visible {
	background-color: var(--wp--custom--blue--700);
	box-shadow: 0 12px 26px rgba(0, 97, 153, 0.3);
}

/* A pressable thing gives under the finger. */
:where(.wp-element-button, .wp-block-button__link):active {
	transform: scale(0.97);
}

.alta-btn--accent .wp-element-button {
	background-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--custom--shadow--accent);
}

.alta-btn--outline .wp-element-button {
	padding: 14px 26px;
	border: 1.5px solid var(--wp--custom--line);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	box-shadow: none;
}

.alta-btn--outline .wp-element-button:hover,
.alta-btn--outline .wp-element-button:focus-visible {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand);
}

.alta-btn--sm .wp-element-button {
	padding: 11px 18px;
	font-size: 0.90625rem;
	box-shadow: var(--wp--custom--shadow--blue-sm);
}

.alta-btn--on-dark .wp-element-button {
	background-color: var(--wp--preset--color--accent);
	font-weight: 700;
	box-shadow: var(--wp--custom--shadow--accent-lg);
}

.alta-btn--ghost .wp-element-button {
	min-height: 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--text);
	font-size: 0.90625rem;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: none;
}

.alta-btn--ghost .wp-element-button:hover,
.alta-btn--ghost .wp-element-button:focus-visible {
	background: none;
	color: var(--wp--preset--color--brand);
	transform: none;
	box-shadow: none;
}

.wp-block-button.is-style-accent > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--accent);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 14px 26px;
	border: 1.5px solid var(--wp--custom--line);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.alta-partner :where(textarea) {
	min-height: 110px;
}

.alta-nav {
	min-width: 0;
}

.alta-nav :where(.wp-block-navigation__container) {
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--sm);
}

.alta-nav :where(.wp-block-navigation-item__content) {
	min-width: 0;
	color: var(--wp--custom--neutral--400);
	font-size: 0.84375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-decoration: none;
}

.alta-nav :where(.wp-block-navigation__responsive-container-open) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	color: var(--wp--custom--neutral--400);
}

/*
 * The close sits exactly where the hamburger was, so the thumb that opened the
 * menu closes it without moving.
 *
 * 🔴 It was landing 18px low — at 32/28 against the hamburger's 14/24, close
 * enough to look like a mistake and far enough to feel like one. The offsets
 * were being resolved against .wp-block-navigation__responsive-dialog, which
 * carries the sheet's 24px padding, so every number written here arrived
 * shifted by it.
 *
 * `position: fixed` is the obvious repair and it does not work: the container
 * is transformed while it slides, and a transformed ancestor becomes the
 * containing block for fixed descendants too — measured, the button flew to
 * -779px, riding the sheet's own translate. So the dialog is taken out of the
 * positioning chain instead, and the button is placed against the container,
 * whose padding box starts at the viewport's corner. The numbers below are then
 * the same numbers the hamburger uses, and the two match by construction rather
 * than by arithmetic.
 */
.alta-nav :where(.wp-block-navigation__responsive-dialog) {
	position: static;
}

.alta-nav :where(.wp-block-navigation__responsive-container-close) {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: 14px;
	left: 24px;
	width: 44px;
	height: 44px;
	color: var(--wp--custom--neutral--400);
}

/*
 * Both triggers, one treatment. Mobile browsers paint their own grey-blue wash
 * over a tapped button and Chrome adds its blue focus ring on top — reported as
 * "a blue background appears when I press it". Suppressing the wash without
 * replacing it would leave keyboard users with nothing, so the ring comes back
 * in the theme's own colour and only for :focus-visible, which pointer taps do
 * not trigger.
 */
.alta-nav :where(
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close
) {
	-webkit-tap-highlight-color: transparent;
	border-radius: var(--wp--custom--radius--xs);
}

.alta-nav :where(
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close
):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

.wp-site-blocks > *,
.alta-main > .entry-content > * {
	margin-block-start: 0;
}

.alta-footer {
	background-color: var(--wp--preset--color--background-dark);
	color: rgba(255, 255, 255, 0.7);
}

.alta-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: 64px var(--wp--custom--container--pad) 44px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 860px) {
	.alta-footer__top {
		gap: 32px;
		padding: 48px var(--wp--custom--container--pad) 36px;
	}
}

.alta-footer__brand {
	min-width: 0;
	max-width: 320px;
}

.alta-footer__logo {
	margin-bottom: 20px;
	filter: brightness(0) invert(1);
}

/*
 * 31px — see the logo note above, which is what these numbers are divided by.
 *
 * It was 42px against the padded asset, which drew 22px of ink, and 23px held
 * that exactly when the asset was cropped. Held is what was wrong with it: at
 * 22px the wordmark came out 106px wide against a phone number 105px wide
 * directly beneath it, so the brand read as the first of four stacked lines
 * rather than the thing they hang off. 31px puts it at 138px and half again
 * the phone's height, which is the separation a footer lockup needs — and
 * still two thirds of the header's, so the pair stay in their own order.
 */
.alta-footer__logo.wp-block-site-logo img {
	display: block;
	height: 31px;
	width: auto;
}

.alta-footer__top > .alta-footer__cols.is-layout-flex {
	display: contents;
}

.alta-footer__links {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 360px) {
	.alta-footer__top {
		grid-template-columns: repeat(2, 1fr);
	}

	.alta-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 861px) {
	.alta-footer__top {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}

	.alta-footer__brand {
		grid-column: auto;
	}
}

.alta-footer__cols > .alta-footer__col {
	display: flex;
	flex-direction: column;
	gap: 13px;
	min-width: 0;
	flex-basis: auto;
}

.alta-footer__title {
	margin: 0 0 4px;
	line-height: normal;
	color: var(--wp--preset--color--surface);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.alta-footer__links :where(a) {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.90625rem;
	line-height: normal;
	text-decoration: none;
}

.alta-contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
}

.alta-contact > :where(p) {
	margin: 0;
}

.alta-contact :where(a) {
	color: var(--wp--preset--color--surface);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.alta-contact__nmls,
.alta-contact__address {
	color: rgba(255, 255, 255, 0.55);
}

.alta-contact__nmls {
	margin-top: 6px;
}

.alta-contact__address {
	font-style: normal;
	line-height: var(--wp--custom--line-height--normal);
}

.alta-footer--legal .alta-footer__top {
	display: none;
}

.alta-footer--legal .alta-footer {
	padding-top: 48px;
}

.alta-footer--legal .alta-footer__fine::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: var(--wp--custom--container--pad);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.alta-footer.is-layout-flow > .alta-footer__fine {
	margin-block-start: 0;
}

.alta-footer__fine {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: 26px var(--wp--custom--container--pad) 32px;
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.78125rem;
	line-height: 1.5;
}

.alta-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

/*
 * The design caps the fine print at 680px, but it never pairs its longest
 * sentence with the five full link labels; together they overrun the 1160px
 * row. The prose gives way first — it wraps to a second line, the links keep
 * their row — and only when even that is not enough does the row itself wrap.
 */
.alta-footer__copyright {
	margin: 0;
	flex: 1 1 0;
	min-width: min(320px, 100%);
	max-width: 680px;
}

.alta-footer__legal :where(ul) {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alta-footer__legal :where(a) {
	color: rgba(255, 255, 255, 0.55);
	line-height: normal;
	text-decoration: none;
}

/*
 * Under 999px the portal/login links move into the main mobile menu (see the
 * .alta-nav__portal-link rules below) instead of staying as their own
 * scrollable strip — one menu to check instead of two.
 *
 * 🔴 And then the bar itself goes, not just its links. Measured at 500px once
 * the links had moved: a 40px dark strip wrapping a single 15px phone number —
 * a container with nothing left to contain, reading as a leftover rather than
 * as navigation, and spending 40px of the only screen where vertical space is
 * scarce.
 *
 * The number is not lost with it. It rides into the flyout as the last of the
 * portal links (parts/header.html), stays in the quote section on the home page
 * and in the footer on every page, and the header keeps its Get Started button
 * beside the logo — so the call is one tap further away, not gone.
 */
@media (max-width: 999px) {
	.alta-util {
		display: none;
	}
}

@media (max-width: 999px) {
	/*
	 * .alta-header__inner stays the positioned ancestor for the hamburger button
	 * itself (pulled to the header's far-left edge below), but the dropdown no
	 * longer anchors to the header row at all — it now covers the full viewport
	 * (position: fixed + inset: 0) instead of unfurling as a panel under it.
	 */
	.alta-nav {
		position: static;
	}

	.alta-header__inner {
		position: relative;
		padding-left: 80px;
	}

	/*
	 * Pulled out of .alta-header__right's flow to sit ahead of the logo instead of
	 * after it — the far-left "menu" position readers expect from a mobile header.
	 * .alta-header__inner's extra left padding above is exactly this button's
	 * width plus its gap to the logo, so nothing overlaps.
	 */
	.alta-nav .wp-block-navigation__responsive-container-open {
		position: absolute;
		top: 50%;
		left: 24px;
		transform: translateY(-50%);
	}

	.alta-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100dvh;
		max-height: none;
		overflow-y: auto;
		padding: 24px var( --wp--custom--container--pad ) 32px;
		border-bottom: none;
		background-color: var( --wp--preset--color--surface );
		box-shadow: none;
	}

	/*
	 * 🔴 The sheet travels, and it comes from the top.
	 *
	 * This used to be `animation: alta-nav-drop` — opacity plus a 6px nudge
	 * downward, which was right when the menu was a small panel unfurling under
	 * the header. It is now a surface covering the entire viewport, and a 6px
	 * shift on something that size does not read as a panel arriving; it reads
	 * as the page flinching. The gesture was left behind when the design changed.
	 *
	 * Off the top edge, because that is where the button that opened it lives.
	 * A sheet that covers the page has to say where it came from or the whole
	 * screen simply teleports.
	 *
	 * Transitions rather than keyframes, which is the part that matters for a
	 * toggle: a keyframe restarts from its first frame every time it is
	 * retriggered, so tapping open/close/open makes the sheet jump back to
	 * fully-offscreen mid-flight. A transition retargets from wherever the
	 * property currently is, so an interrupted open reverses smoothly from the
	 * position it had reached.
	 *
	 * `display` is in the transition list with allow-discrete so the sheet can
	 * animate *out* as well: core removes .is-menu-open and its own rule sets
	 * display:none, which would otherwise cut the exit dead. Browsers without
	 * allow-discrete ignore that line and close instantly — exactly today's
	 * behaviour, so nothing regresses.
	 *
	 * Reduced motion needs nothing here. The global guard near the top of this
	 * file already narrows transition-property to colour and opacity, which
	 * drops the travel and keeps the fade — gentler, not absent.
	 */
	.alta-nav .wp-block-navigation__responsive-container {
		opacity: 0;
		transform: translateY( -100% );
		transition:
			opacity 200ms var( --wp--custom--ease--out ),
			transform 260ms var( --wp--custom--ease--out ),
			display 260ms allow-discrete;
	}

	.alta-nav .wp-block-navigation__responsive-container.is-menu-open {
		/*
		 * 🔴 Core animates this container itself — a 0.1s fade with a 0.5em rise,
		 * and crucially `forwards`, which pins the properties at the animation's
		 * final frame. A filled animation outranks a transition no matter how
		 * specific the transition's selector is, so without this line the rules
		 * below are simply never observed: measured here as the sheet sitting at
		 * opacity 0 with an 8px offset while its own transition ran underneath,
		 * unable to paint. The theme's previous keyframe rule was not competing
		 * with core's animation, it was replacing it — removing that rule handed
		 * control back to core rather than to this file.
		 */
		animation: none;
		opacity: 1;
		transform: translateY( 0 );
	}

	/*
	 * Without this the sheet is already at its open values on the frame it stops
	 * being display:none, and the entrance never plays — only the exit would.
	 */
	@starting-style {

		.alta-nav .wp-block-navigation__responsive-container.is-menu-open {
			opacity: 0;
			transform: translateY( -100% );
		}
	}

	/*
	 * 🔴 The gap goes to nearly nothing, and the rows do the spacing instead.
	 *
	 * Measured: 45px rows with a 24px gap between them — a 69px pitch, so more
	 * than a third of the sheet was air between links. Thirteen items at that
	 * pitch run past 900px and scroll on any phone. The air belongs *inside* the
	 * row, where it is already paid for by the 14px padding that makes the tap
	 * target, not stacked on top of it a second time. 2px keeps the rows from
	 * touching without pretending to be a separator.
	 *
	 * Plain selector, not :where(), for the same reason the row padding below is
	 * one: `.alta-nav :where(.wp-block-navigation__container)` earlier in this
	 * file sets the desktop gap and scores an identical (0,1,0), so the tie went
	 * to source order and this rule lost in a media query it should have owned.
	 */
	.alta-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-wrap: wrap;
		gap: 2px;
		padding: var( --wp--preset--spacing--xs ) 0;
	}

	/*
	 * :where() here would lose to core's `.wp-block-navigation ul li { padding: 0 }`
	 * (that rule earns specificity from its two type selectors, and :where()
	 * zeroes out everything inside it) — so this stays a plain selector. 14px top
	 * and bottom brings each row to a 44px tap target instead of the ~16px text
	 * line core leaves it at.
	 */
	.alta-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 14px 0;
		font-size: 0.875rem;
	}

	/*
	 * The five portal/login links used to be their own scrollable strip above the
	 * header — cramped on a phone and easy to miss. Folded into the same flyout as
	 * the page nav instead. No caption on the divider: this group will eventually
	 * mix plain login links with buttons that open a form/popup instead of
	 * navigating, so a single label like "Portal Access" would misdescribe half of
	 * it. The rule alone is enough to read as "a different kind of link than the
	 * page sections above."
	 */
	.alta-nav .wp-block-navigation__responsive-container.is-menu-open .alta-nav__portal-link--first {
		margin-top: 10px;
		padding-top: 24px;
		border-top: 1px solid var( --wp--custom--line );
	}
}

/*
 * Core's own responsive-nav breakpoint is a hardcoded 600px — above that it
 * hides the hamburger and renders the container as a plain inline block,
 * regardless of what width our own hamburger-mode CSS targets (999px, chosen
 * to match this header's actual content width). Between 600 and 999px the two
 * disagreed: core showed every item — the 7 page links and the 5 portal links
 * — inline at once, wrapping and crowding the header row. Re-asserting
 * hamburger mode here keeps one breakpoint in charge across the whole range.
 */
@media (min-width: 600px) and (max-width: 999px) {
	.alta-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}

	.alta-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (min-width: 1000px) {
	/*
	 * Core's `.wp-block-navigation .wp-block-navigation-item { display: flex }`
	 * is two classes (0,2,0); a bare `.alta-nav__portal-link` selector is only one
	 * (0,1,0) and loses the tie-break, so these stayed visible in the desktop bar
	 * that already carries them via .alta-util. !important is the deliberate,
	 * final word here — there's no next line of copy that also needs hiding.
	 */
	.alta-nav__portal-link {
		display: none !important;
	}
}

.alta-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #faf6f0 0%, #fff 78%);
}

.alta-hero::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(241, 111, 0, 0.06), transparent 70%);
	pointer-events: none;
}

.alta-hero__inner,
.alta-stats__inner {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xxl) var(--wp--custom--container--pad);
}

.alta-hero__inner {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	padding: 76px var(--wp--custom--container--pad) 90px;
}

@media (max-width: 839px) {
	.alta-hero__inner {
		gap: 32px;
		padding: 32px var(--wp--custom--container--pad) 48px;
	}

	.alta-hero__eyebrow {
		margin-bottom: 16px;
	}

	.alta-hero__title {
		margin-bottom: 16px;
	}

	.alta-hero__lede {
		margin-bottom: 24px;
	}

	.alta-hero__prose .alta-hero__ctas {
		margin-bottom: 0;
	}

	.alta-hero__ctas .wp-block-button {
		flex: 1 1 auto;
	}

	.alta-hero__ctas .wp-element-button {
		width: 100%;
	}
}

.alta-hero__prose {
	min-width: 0;
}

.alta-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px;
	padding: 7px 15px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--card);
	color: var(--wp--custom--neutral--400);
	font-size: 0.84375rem;
	font-weight: 600;
}

.alta-hero__eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--custom--orange--300);
	flex-shrink: 0;
}

.alta-hero__title {
	margin: 0 0 22px;
	font-size: var(--wp--preset--font-size--display);
}

@media (max-width: 359px) {
	:root {
		--wp--preset--font-size--display: 2.625rem;
		--wp--preset--font-size--heading-1: 2rem;
		--wp--preset--font-size--heading-2: 2rem;
		--wp--preset--font-size--heading-3: 1.5rem;
	}
}

.alta-hero__lede {
	margin: 0 0 32px;
	max-width: 540px;
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary);
}

.alta-hero__prose .alta-hero__ctas {
	gap: 14px;
	margin-bottom: 40px;
}

.alta-hero__media {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--md);
	min-width: 0;
}

.alta-hero__photo {
	position: relative;
	margin: 0;
	aspect-ratio: 11 / 10;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 97, 153, 0.14);
}

.alta-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 35% 40%;
	display: block;
}

.alta-hero__card {
	padding: 20px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 20px 50px rgba(15, 37, 47, 0.18);
}

.alta-hero__card.is-layout-flow > * + * {
	margin-block-start: 0;
}

.alta-hero__card.is-layout-flow > .alta-hero__callout {
	margin-block-start: 15px;
}

.alta-hero__card-title {
	margin: 0 0 14px;
	color: var(--wp--preset--color--text);
	font-size: 0.96875rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.alta-hero__rate {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--wp--custom--line);
}

.alta-hero__rate-label,
.alta-hero__rate-value {
	margin: 0;
	min-width: 0;
}

.alta-hero__rate-label {
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.84375rem;
	font-weight: 500;
}

.alta-hero__rate-value {
	flex-shrink: 0;
	color: var(--wp--preset--color--brand);
	font-size: 0.875rem;
	font-weight: 800;
	text-align: right;
	white-space: nowrap;
}

.alta-hero__callout {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 15px 0 0;
	padding: 13px 14px;
	border: 1px solid rgba(0, 97, 153, 0.2);
	border-radius: var(--wp--custom--radius--xs);
	background-color: rgba(0, 97, 153, 0.07);
	color: var(--wp--preset--color--text);
	font-size: 0.84375rem;
	font-weight: 700;
	line-height: normal;
}

.alta-hero__callout::before {
	content: "\2713";
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	font-size: 0.6875rem;
	font-weight: 900;
	line-height: 1;
}

.alta-stats {
	border-top: 1px solid var(--wp--custom--line);
	border-bottom: 1px solid var(--wp--custom--line);
	background-color: var(--wp--preset--color--surface);
}

.alta-stats__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	padding-block: 52px;
}

@media (min-width: 840px) {
	.alta-stats__inner {
		padding-block: clamp(32px, var(--alta-window) - 708px, 52px);
	}
}

.alta-stats__cell {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding-left: 22px;
	border-left: 3px solid var(--wp--preset--color--accent);
}

.alta-stats__value {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-size: 2.625rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
}

.alta-stats__label {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.90625rem;
	font-weight: 500;
	line-height: normal;
}

.alta-products {
	background-color: var(--wp--preset--color--surface);
}

.alta-products__head,
.alta-products__grid,
.alta-why__inner {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--pad);
}

.alta-products__head {
	margin-bottom: 44px;
	padding-top: var(--wp--preset--spacing--xxl);
}

@media (max-width: 839px) {
	.alta-products__head {
		margin-bottom: 28px;
		padding-top: 48px;
	}
}

.alta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--tint--blue-100);
	color: var(--wp--preset--color--brand);
}

.alta-icon.wp-block-group__placeholder > .components-placeholder {
	display: none;
}

.alta-icon::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.alta-icon--bridge::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%209v9'/><path%20d='M21%209v9'/><path%20d='M3%2014h18'/><path%20d='M3%2011a9%209%200%200118%200'/><path%20d='M8.5%2014v4'/><path%20d='M15.5%2014v4'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%209v9'/><path%20d='M21%209v9'/><path%20d='M3%2014h18'/><path%20d='M3%2011a9%209%200%200118%200'/><path%20d='M8.5%2014v4'/><path%20d='M15.5%2014v4'/></svg>");
}

.alta-icon--dscr::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M8%203h6l4%204v14H6V5'/><path%20d='M14%203v4h4'/><path%20d='M9%2013h6'/><path%20d='M9%2017h6'/><path%20d='M9%209h2'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M8%203h6l4%204v14H6V5'/><path%20d='M14%203v4h4'/><path%20d='M9%2013h6'/><path%20d='M9%2017h6'/><path%20d='M9%209h2'/></svg>");
}

.alta-icon--flip::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%2012a9%209%200%200115.6-6.1L21%208'/><path%20d='M21%204v4h-4'/><path%20d='M21%2012a9%209%200%2001-15.6%206.1L3%2016'/><path%20d='M3%2020v-4h4'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%2012a9%209%200%200115.6-6.1L21%208'/><path%20d='M21%204v4h-4'/><path%20d='M21%2012a9%209%200%2001-15.6%206.1L3%2016'/><path%20d='M3%2020v-4h4'/></svg>");
}

.alta-icon--nonqm::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2019V5'/><path%20d='M4%2019h16'/><path%20d='M8%2015v-4'/><path%20d='M12%2015V7'/><path%20d='M16%2015v-7'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2019V5'/><path%20d='M4%2019h16'/><path%20d='M8%2015v-4'/><path%20d='M12%2015V7'/><path%20d='M16%2015v-7'/></svg>");
}

.alta-icon--construction::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2021V8l8-4%208%204v13'/><path%20d='M9%2021v-5h6v5'/><path%20d='M8%2011h.01'/><path%20d='M16%2011h.01'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2021V8l8-4%208%204v13'/><path%20d='M9%2021v-5h6v5'/><path%20d='M8%2011h.01'/><path%20d='M16%2011h.01'/></svg>");
}

.alta-icon--shield::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203l8%203v5c0%205-3.5%208-8%2010-4.5-2-8-5-8-10V6z'/><path%20d='M9%2012l2%202%204-4'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203l8%203v5c0%205-3.5%208-8%2010-4.5-2-8-5-8-10V6z'/><path%20d='M9%2012l2%202%204-4'/></svg>");
}

.alta-icon--handshake::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%206l-2-2-5%204v5l3%203'/><path%20d='M12%206l2-2%205%204v5l-3%203'/><path%20d='M8%2014l3%203%202-1%202%202'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%206l-2-2-5%204v5l3%203'/><path%20d='M12%206l2-2%205%204v5l-3%203'/><path%20d='M8%2014l3%203%202-1%202%202'/></svg>");
}

.alta-icon--bolt::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M13%202L4%2014h7l-1%208%209-12h-7z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M13%202L4%2014h7l-1%208%209-12h-7z'/></svg>");
}

.alta-icon--people::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M16%2021v-2a4%204%200%2000-4-4H6a4%204%200%2000-4%204v2'/><path%20d='M9%2011a4%204%200%20100-8%204%204%200%20000%208'/><path%20d='M22%2021v-2a4%204%200%2000-3-3.9'/><path%20d='M16%203.1a4%204%200%20010%207.8'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M16%2021v-2a4%204%200%2000-4-4H6a4%204%200%2000-4%204v2'/><path%20d='M9%2011a4%204%200%20100-8%204%204%200%20000%208'/><path%20d='M22%2021v-2a4%204%200%2000-3-3.9'/><path%20d='M16%203.1a4%204%200%20010%207.8'/></svg>");
}

.alta-icon--calendar::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M8%202v4'/><path%20d='M16%202v4'/><path%20d='M3%2010h18'/><path%20d='M4%206h16v14H4z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M8%202v4'/><path%20d='M16%202v4'/><path%20d='M3%2010h18'/><path%20d='M4%206h16v14H4z'/></svg>");
}

.alta-icon--clock::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%2021a9%209%200%201%200%200-18%209%209%200%200%200%200%2018z'/><path%20d='M12%207v5l3%203'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%2021a9%209%200%201%200%200-18%209%209%200%200%200%200%2018z'/><path%20d='M12%207v5l3%203'/></svg>");
}

.alta-icon--share-x::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%204l16%2016'/><path%20d='M20%204L4%2020'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%204l16%2016'/><path%20d='M20%204L4%2020'/></svg>");
}

.alta-icon--share-linkedin::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%209h4v11H4z'/><path%20d='M6%206a2%202%200%201%200%200-4%202%202%200%200%200%200%204z'/><path%20d='M11%209h4v11h-4z'/><path%20d='M11%2013c0-2%201.5-3%203-3s3%201%203%203v7h-4v-6c0-.6-.4-1-1-1'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%209h4v11H4z'/><path%20d='M6%206a2%202%200%201%200%200-4%202%202%200%200%200%200%204z'/><path%20d='M11%209h4v11h-4z'/><path%20d='M11%2013c0-2%201.5-3%203-3s3%201%203%203v7h-4v-6c0-.6-.4-1-1-1'/></svg>");
}

.alta-icon--share-mail::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%205h18v14H3z'/><path%20d='M3%206l9%207%209-7'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%205h18v14H3z'/><path%20d='M3%206l9%207%209-7'/></svg>");
}

.alta-icon--share-link::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M10%2013a5%205%200%200%200%207%200l3-3a5%205%200%200%200-7-7l-1.5%201.5'/><path%20d='M14%2011a5%205%200%200%200-7%200l-3%203a5%205%200%200%200%207%207l1.5-1.5'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M10%2013a5%205%200%200%200%207%200l3-3a5%205%200%200%200-7-7l-1.5%201.5'/><path%20d='M14%2011a5%205%200%200%200-7%200l-3%203a5%205%200%200%200%207%207l1.5-1.5'/></svg>");
}

.alta-eyebrow :where(a) {
	color: inherit;
	text-decoration: none;
}

.alta-eyebrow :where(a):hover,
.alta-eyebrow :where(a):focus-visible {
	text-decoration: underline;
}

.alta-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	line-height: normal;
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.alta-products__title,
.alta-why__title {
	margin: 0;
	max-width: 560px;
	font-size: var(--wp--preset--font-size--heading-2);
}

.alta-why__title {
	max-width: 480px;
}

.alta-products__lede,
.alta-why__lede {
	color: var(--wp--preset--color--text-secondary);
	font-size: 1.0625rem;
}

.alta-products__lede {
	margin: 14px 0 0;
	line-height: 1.55;
}

.alta-why__lede {
	margin: 18px 0 30px;
	max-width: 460px;
	line-height: 1.6;
}

.alta-products__grid {
	display: grid;
	gap: 18px;
	padding-block: 0 var(--wp--preset--spacing--xxl);
}

@media (max-width: 839px) {
	.alta-products__grid {
		padding-block: 0 48px;
	}
}

.alta-products__panels {
	display: grid;
	gap: 18px;
	min-width: 0;
}

.alta-product {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.alta-product[hidden] {
	display: none;
}

.alta-product__photo {
	position: relative;
	flex-shrink: 0;
	height: 196px;
	margin: 0;
	overflow: hidden;
	background: linear-gradient(135deg, #eaf2f8, #dbe9f2);
}

.alta-product__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alta-product__photo :where(figcaption, .wp-element-caption) {
	position: absolute;
	top: 18px;
	left: 18px;
	padding: 7px 13px;
	border-radius: var(--wp--custom--radius--full);
	background-color: rgba(0, 97, 153, 0.72);
	color: var(--wp--preset--color--surface);
	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.alta-product__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 28px 36px 34px;
}

.alta-product__body.is-layout-flow > * + *,
.alta-product__naming.is-layout-flow > * + * {
	margin-block-start: 0;
}

.alta-product__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.alta-product__naming {
	min-width: 0;
}

.alta-product__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-3);
}

.alta-product__short {
	display: block;
	margin: 5px 0 0;
	color: var(--wp--preset--color--brand);
	font-size: 0.84375rem;
	font-weight: 600;
}

.alta-product__blurb {
	margin: 0 0 22px;
	max-width: 420px;
	color: var(--wp--preset--color--text-secondary);
	font-size: 1rem;
	line-height: 1.55;
}

.alta-product__benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.alta-product__benefits :where(li) {
	position: relative;
	min-width: 0;
	padding-left: 22px;
	color: var(--wp--custom--neutral--400);
	font-size: 0.875rem;
	line-height: 1.4;
}

.alta-product__benefits :where(li)::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--wp--custom--success);
	font-size: 0.8125rem;
	font-weight: 900;
}

.alta-product__learn {
	margin: auto 0 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

.alta-product__learn :where(a) {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.alta-product__learn :where(a)::after {
	content: " \2192";
}

.alta-js .alta-products__panels {
	display: grid;
}

/*
 * The panels already stack in one grid cell, so the swap costs a transition
 * and no layout. visibility holds the outgoing panel visible for the whole
 * duration and flips at the end, which is what makes the cross-fade work
 * without a second element. Under reduced motion the theme's allowlist keeps
 * the opacity and drops the travel, which is the right amount of this.
 *
 * The transition hangs off --enhanced, which theme.js adds after it has chosen
 * a panel: the four it hides on load were stacked and visible until that moment
 * and must go at once, not fade.
 */
.alta-js .alta-products__panels > .alta-product {
	grid-area: 1 / 1;
}

.alta-products--enhanced .alta-product {
	transition: opacity 0.18s var(--wp--custom--ease--out), transform 0.18s var(--wp--custom--ease--out),
		visibility 0.18s;
}

.alta-js .alta-product[aria-hidden="true"] {
	visibility: hidden;
	opacity: 0;
	transform: translateY(4px);
}

.alta-products__rail {
	display: grid;
	gap: 12px;
	align-content: start;
	min-width: 0;
}

.alta-product-tab {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 17px 18px;
	border: 1px solid var(--wp--custom--line);
	border-radius: 15px;
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--card);
	position: relative;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease,
		transform 0.22s var(--wp--custom--ease--out);
}

.alta-product-tab[aria-selected="true"] {
	/*
	 * Above its neighbours, or they paint their white backgrounds over the blue
	 * shadow it casts on them — and a hovered neighbour, promoted to its own
	 * layer by the transform, covered and then snapped it back on the way out.
	 */
	z-index: 1;
	border-color: var(--wp--preset--color--brand);
	background-color: rgba(0, 97, 153, 0.05);
	box-shadow: 0 10px 26px rgba(0, 97, 153, 0.14);
	transform: translateX(-4px);
}

.alta-product-tab__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background-color: var(--wp--custom--tint--blue-100);
	color: var(--wp--preset--color--brand);
}

.alta-product-tab[aria-selected="true"] .alta-product-tab__icon {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
}

.alta-product-tab__body {
	flex: 1;
	min-width: 0;
}

.alta-product-tab__name {
	display: block;
	color: var(--wp--preset--color--text);
	font-size: 1.03125rem;
	font-weight: 700;
}

.alta-product-tab__short {
	display: block;
	margin-top: 2px;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.8125rem;
}

.alta-product-tab__arrow {
	flex-shrink: 0;
	color: #c2ccd6;
	font-size: 1.125rem;
	font-weight: 900;
	transition: color 0.22s ease;
}

.alta-product-tab[aria-selected="true"] .alta-product-tab__arrow {
	color: var(--wp--preset--color--brand);
}

@media (min-width: 840px) {
	.alta-hero__inner {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 64px;
		align-items: center;
	}

	.alta-hero__inner {
		--alta-fold-pad: clamp(46px, var(--alta-window) - 790px, 166px);
		padding-block: calc(var(--alta-fold-pad) * 0.458) calc(var(--alta-fold-pad) * 0.542);
	}

	.alta-hero__photo {
		aspect-ratio: auto;
		height: clamp(300px, var(--alta-window) - 356px, 480px);
	}

	.alta-hero__card {
		position: absolute;
		left: -34px;
		bottom: 34px;
		width: 300px;
	}
}

@media (min-width: 840px) {
	.alta-products__grid {
		grid-template-columns: 1.2fr 1fr;
		align-items: stretch;
	}

	.alta-products__rail {
		grid-template-rows: repeat(5, 1fr);
	}
}

.alta-why {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--background-warm);
}

.alta-why::before {
	content: "";
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 460px;
	background-color: rgba(0, 97, 153, 0.03);
	clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}

.alta-why__inner {
	position: relative;
	display: grid;
	gap: 64px;
	padding-block: var(--wp--preset--spacing--xxl);
}

@media (max-width: 839px) {
	.alta-why__inner {
		gap: 40px;
		padding-block: 48px;
	}
}

.alta-why .alta-cta-partner .wp-block-button__link {
	box-shadow: 0 10px 26px rgba(241, 111, 0, 0.3);
}

.alta-why__head {
	min-width: 0;
}

.alta-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	align-content: center;
}

.alta-why__card {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	padding: 26px 24px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--card);
}

.alta-why__card :where(.alta-icon) {
	margin-bottom: 14px;
}

.alta-product__head :where(.alta-icon) {
	width: 60px;
	height: 60px;
	border-radius: 16px;
}

.alta-why__card :where(.alta-icon) {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background-color: rgba(241, 111, 0, 0.12);
	color: var(--wp--preset--color--accent);
}

.alta-why__card-title {
	margin: 0 0 8px;
	font-size: 1.03125rem;
	letter-spacing: normal;
	font-weight: 700;
	line-height: 1.25;
}

.alta-why__card-text {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.875rem;
	line-height: 1.5;
}

@media (min-width: 840px) {

	.alta-product--featured {
		grid-column: span 2;
	}

	.alta-why__inner {
		grid-template-columns: 1fr 1.1fr;
		align-items: center;
	}
}

.alta-docs {
	background-color: var(--wp--preset--color--surface);
}

.alta-docs__inner {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xxl) var(--wp--custom--container--pad);
}

@media (max-width: 781px) {
	.alta-docs__inner {
		padding-block: 48px;
	}
}

.alta-about__inner {
	max-width: 960px;
	margin-inline: auto;
	padding: 100px 20px;
}

@media (max-width: 839px) {
	.alta-about__inner {
		padding: 48px 20px;
	}
}

.alta-docs__lede {
	margin: 14px 0 0;
	max-width: 100%;
	color: var(--wp--preset--color--text-secondary);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.alta-docs__lede {
	margin: 14px 0 0;
	max-width: 60ch;
	color: var(--wp--preset--color--text-secondary);
	font-size: 1.0625rem;
	line-height: 1.55;
}

/*
 * 🔴 Two real columns, each its own group block — see the note in
 * content/documents.php. This was `columns: 2`, which fills top-to-bottom so
 * source order was column order for free, and it is unusable: a multi-column
 * container is a fragmentation context and WebKit clips each column's paint to
 * the column box. The cards fill their column edge to edge, so in Safari every
 * card's shadow was sliced off down both sides and the one under the last card
 * of a column was cut straight across. Chrome does not clip and showed none of
 * it, which is why it survived a first round of fixes.
 *
 * A plain grid of two column tracks has no fragmentation and no clipping, and
 * the halves are now explicit in the markup rather than an artefact of fill
 * order — so the shadows behave and the two read the same.
 */
.alta-docs__files {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.alta-docs__col {
	display: grid;
	/* start: an odd count leaves the short column short, not stretched. */
	align-content: start;
	gap: 14px;
	min-width: 0;
}

@media (min-width: 720px) {
	.alta-docs__files {
		grid-template-columns: 1fr 1fr;
	}
}

.alta-doc {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	align-items: center;
	gap: 3px 16px;
	min-width: 0;
	margin: 0;
	padding: 17px 20px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--card);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.alta-doc__file {
	display: contents;
}

.alta-doc::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background-color: var(--wp--custom--tint--blue-100);
	background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23006199'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M8%203h6l4%204v14H6V5'/><path%20d='M14%203v4h4'/><path%20d='M9%2013h6'/><path%20d='M9%2017h6'/><path%20d='M9%209h2'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

/*
 * 🔴 Not --shadow--card-hover, which every other card on the site uses, and the
 * reason is the 14px gutter. That token is `0 18px 44px`: it reaches about 40px
 * below a card and 22px to either side. In the body of a column you never see
 * that, because the next card's opaque background covers all but the 14px strip
 * in the gap — measured, the shadow reads 21, 18, 15 down the gutter and is at 0
 * by 20px, cut by the card below. Under the LAST card in a column there is
 * nothing to cover it, so the full pool appears and fades over 65px, with its
 * right-hand side sliced off straight by the adjacent column's card.
 *
 * So hovering the last card looked nothing like hovering any other one, which is
 * what reads as a broken shadow. Sized to the gutter instead, it is spent by
 * 15px and the two are indistinguishable: 13, 4, 0 against 14, 6, 0.
 *
 * The resting --shadow--card has a milder version of the same mismatch (20px of
 * reach into a 14px gap) but it is grey at 0.06 rather than brand blue at 0.16,
 * and nobody has reported seeing it.
 */
.alta-doc:hover {
	border-color: rgba(0, 97, 153, 0.35);
	box-shadow: 0 1px 2px rgba(15, 37, 47, 0.06), 0 4px 10px rgba(0, 97, 153, 0.16);
}

.alta-doc__file > :where(a:not(.wp-block-file__button)) {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	color: var(--wp--preset--color--text);
	font-size: 0.96875rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.alta-doc__file > :where(a:not(.wp-block-file__button)):hover,
.alta-doc__file > :where(a:not(.wp-block-file__button)):focus-visible {
	color: var(--wp--preset--color--brand);
}

.alta-doc__status {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	color: var(--wp--custom--success);
	font-size: 0.78125rem;
	font-weight: 600;
	line-height: normal;
}

/*
 * A form that does not exist yet. Green is the site's "this is ready" colour and
 * four cards wearing it while pointing at nothing is the one thing this section
 * must not do — a broker who downloads the wrong form finds out at underwriting.
 */
.alta-doc__status--soon {
	color: var(--wp--preset--color--text-secondary);
	font-weight: 500;
}

/*
 * And no Download button until there is something to download. `#documents` is
 * the section's own anchor and is what a card carries before a file is attached,
 * so this is keyed on the one thing that changes when one is: attach the PDF by
 * either route and the button appears, with no second control to find.
 *
 * Not core's `showDownloadButton` attribute, which would be the obvious way and
 * is a trap — core's Replace handler does not set it, so a card filled in from
 * wp-admin would keep its file and never grow a button. See content/documents.php.
 */
.alta-doc__file > a.wp-block-file__button[href="#documents"] {
	display: none;
}

.alta-doc__go::before,
.alta-doc .wp-block-file__button::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 7px;
	background-color: currentColor;
	vertical-align: -1px;
	-webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203v12'/><path%20d='M7%2010l5%205%205-5'/><path%20d='M4%2021h16'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203v12'/><path%20d='M7%2010l5%205%205-5'/><path%20d='M4%2021h16'/></svg>") no-repeat center / contain;
}

.alta-doc__go,
.alta-doc .wp-block-file__button {
	grid-column: 3;
	grid-row: 1 / span 2;
	flex-shrink: 0;
	margin-left: auto;
	padding: 9px 15px;
	border-radius: 9px;
	background-color: var(--wp--custom--tint--blue-100);
	color: var(--wp--preset--color--brand);
	font-size: 0.84375rem;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;

	box-shadow: none;
}

.alta-doc .wp-block-file__button:hover,
.alta-doc .wp-block-file__button:focus-visible {
	background-color: var(--wp--custom--tint--blue-150);
	transform: none;
	box-shadow: none;
}

.alta-about__inner {
	display: grid;
	gap: 56px;
}

.alta-about__prose {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.alta-about__prose :where(p:not(.alta-eyebrow)) {
	margin: 6px 0 0;
	color: var(--wp--custom--neutral--400);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.alta-about__card :where(.wp-block-buttons, .alta-btn) {
	margin-top: 24px;
}

.alta-about {
	border-top: 1px solid var(--wp--custom--line);
	border-bottom: 1px solid var(--wp--custom--line);
	background-color: var(--wp--preset--color--background-warm);
}

.alta-about__card {
	margin-top: 70px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 38px 34px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--background);
}

.alta-about__card-label {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: 0.78125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.alta-about__card-value {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
}

.alta-about__card-text {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
}

@media (min-width: 840px) {
		.alta-about__inner {
		grid-template-columns: 1.55fr 0.85fr;
		align-items: start;
	}
}

.alta-quote {
	background-color: var(--wp--preset--color--background);
}

.alta-quote__inner {
	display: grid;
	gap: 56px;
	align-items: center;
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xxl) var(--wp--custom--container--pad);
}

@media (max-width: 839px) {
	.alta-quote__inner {
		gap: 32px;
		padding-block: 48px;
	}
}

.alta-quote__prose :where(h2) {
	max-width: 560px;
}

.alta-quote__prose,
.alta-quote__form {
	min-width: 0;
}

.alta-quote__lede {
	margin: 16px 0 28px;
	max-width: 460px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

.alta-quote__points {
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.alta-quote__points :where(li) {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-left: 0;
	color: var(--wp--preset--color--text);
	font-size: 1rem;
	font-weight: 500;
}

.alta-quote__points :where(li)::before {
	content: "\2713";
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #e7f4ec;
	color: var(--wp--custom--success);
	font-size: 0.8125rem;
	font-weight: 900;
	line-height: 1;
}

.alta-quote__cta {
	margin-bottom: 30px;
}

.alta-advisor {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--custom--line);
}

.alta-advisor::before {
	content: "";
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wp--preset--color--brand), var(--wp--custom--blue--700));
}

.alta-advisor__who {
	min-width: 0;
}

.alta-advisor__name {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.alta-advisor__phone {
	margin: 0;
	font-size: 1.3125rem;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.alta-advisor__phone :where(a) {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.alta-quote__form {
	padding: 36px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 24px 60px rgba(15, 37, 47, 0.1);
}

.alta-form__step-count {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: normal;
	text-transform: uppercase;
}

.wp-block-jetpack-contact-form .wp-block-jetpack-form-step {
	gap: 16px;
}

.wp-block-jetpack-contact-form.alta-form {
	gap: 16px;
}

.alta-form > .wp-block-button,
.alta-form > .wp-block-jetpack-form-step-navigation__wrapper {
	margin-top: 10px;
}

.wp-block-jetpack-contact-form .wp-block-button .wp-block-button__link {
	padding-block: 15px;
}

.alta-form__step-title {
	margin: -10px 0 2px;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: normal;
}

.alta-form__progress {
	margin-bottom: 10px;
}

.alta-form__progress {
	--jp-form-progress-height: 6px;
	--jp-progress-track-color: var(--wp--preset--color--background);
}

.alta-form__progress .jetpack-form-progress-indicator-steps {
	height: var(--jp-form-progress-height);
}

.alta-form__progress .jetpack-form-progress-indicator-progress {
	background: linear-gradient(90deg, var(--wp--preset--color--brand), var(--wp--preset--color--accent));
	/* ponytail: width, not scaleX — Jetpack writes the width inline, so CSS has
	   nothing to scale from. Off the GPU, but it runs once per step. */
	transition: width 0.25s var(--wp--custom--ease--out);
}

.alta-form__consent {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.wp-block-jetpack-form-step-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.wp-block-jetpack-form-step-navigation .is-hidden {
	display: none;
}

.alta-form__group-wrap {
	margin: 0;
	padding: 0;
	border: 0;
}

.alta-form__group-wrap :where(.jetpack-field-multiple__fieldset) {
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Jetpack pads this fieldset 8px down at (0,3,0), which pushed the Yes/No pair
 * below the input in the column beside it — the row read as crooked. Matched
 * specificity, and the options land on the same 44px as every other field.
 */
.alta-form.wp-block-jetpack-contact-form .alta-form__group-wrap :where(.jetpack-field-multiple__fieldset) {
	padding: 0;
}

.alta-form__group-wrap :where(legend) {
	padding: 0;
	margin-bottom: 9px;
	color: var(--wp--custom--neutral--400);
	font-size: 0.84375rem;
	font-weight: 600;
	line-height: normal;
}

.alta-form__group-wrap .wp-block-jetpack-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 480px) {

	.alta-form__group-wrap .wp-block-jetpack-options {
		grid-template-columns: 1fr;
	}
}

.alta-form__group-wrap :where(.wp-block-jetpack-field-option-radio, .wp-block-jetpack-option) {
	margin: 0;
	min-width: 0;
}

.alta-form__group-wrap :where(label) {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--wp--custom--neutral--500);
	border-radius: var(--wp--custom--radius--xs);
	color: var(--wp--preset--color--text);
	font-size: 0.90625rem;
	font-weight: 500;
	line-height: normal;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/*
 * The text sat against the top padding rather than the middle of the 44px box:
 * something in the Jetpack layer computes align-items: baseline here and no
 * author rule in the CSSOM declares it, so specificity is not the lever —
 * matching (0,2,0) and (0,1,0) both lose and only !important lands. Measured:
 * 9px above the text and 18px below it, now 13.5 and 13.5.
 */
.contact-form .alta-form__group-wrap :where(label) {
	align-items: center !important;
}

.alta-form__group-wrap :where(label):has(:checked) {
	border-color: var(--wp--preset--color--brand);
	background-color: rgba(0, 97, 153, 0.06);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.alta-form {
	--jetpack--contact-form--error-color: #b3272a;
}

.alta-form .contact-form__error.show-errors {
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid rgba(179, 39, 42, 0.3);
	border-radius: var(--wp--custom--radius--xs);
	background-color: #fdf4f3;
	color: var(--jetpack--contact-form--error-color);
	font-size: 0.9375rem;
	font-weight: 500;
}

.alta-form .contact-form__error :where(ul) {
	display: none;
}

.alta-form .contact-form__error-message:focus {
	outline: none;
}

.alta-form :where(.form-error) {
	margin: 0 0 4px;
	padding: 14px 16px;
	border: 1px solid rgba(179, 39, 42, 0.3);
	border-radius: var(--wp--custom--radius--xs);
	background-color: #fdf4f3;
	color: var(--jetpack--contact-form--error-color);
}

.alta-form :where(.form-error h3) {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

.alta-form :where(.form-errors) {
	margin: 6px 0 0;
	padding-left: 1.1em;
	font-size: 0.875rem;
}

.alta-form :where(.form-errors li) {
	color: inherit;
}

.contact-form .alta-form .alta-form__group-wrap fieldset[aria-invalid="true"] {
	margin-bottom: 0;
	outline: none;
}

.contact-form .alta-form .alta-form__group-wrap fieldset[aria-invalid="true"] :where(label) {
	border-color: rgba(179, 39, 42, 0.55);
}

.contact-form .grunion-field-wrap.alta-form__group-wrap input[type="radio"] {
	position: absolute;
	width: 1px;
	min-width: 0;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.alta-form__group-wrap :where(label):has(:focus-visible) {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

:where(.alta-quote__form, .alta-servicing) :where(input, select, textarea) {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--wp--custom--neutral--500);
	border-radius: var(--wp--custom--radius--xs);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: 16px;
}

.alta-quote__form :where(input[type="radio"]) {
	min-height: 0;
}

/*
 * Jetpack ghosts the placeholder — 50% on hover, 30% on focus, 300ms each way —
 * so running the mouse down the form set every placeholder fading in and out,
 * and that fade was the only thing that answered when you reached a field. The
 * placeholder holds still now. The border answers instead, in 150ms, which is
 * what you were looking at anyway. Selectors carry an element to outrank
 * Jetpack's own, which load in either order.
 */
form.contact-form :is(input, textarea)::placeholder {
	color: var(--wp--custom--neutral--500);
	opacity: 1;
	transition: none;
}

form.contact-form :is(input, textarea):hover::placeholder,
form.contact-form :is(input, textarea):focus::placeholder {
	opacity: 1;
}

/*
 * Half-width fields sit two to a row as flex items, each stacking its label
 * above its input. Nothing makes the labels equal height, so the moment one
 * wraps — "Requested payment date (MM/DD/YYYY)" beside "Type of payment", or
 * any label at all once the dialog narrows — its input drops a line and the
 * two boxes in that row stop lining up.
 *
 * Letting the label take the slack puts every input on a common baseline
 * whatever its label does, which is the version that survives a longer label,
 * a translation, or a phone.
 */
/*
 * 🔴 :not(.alta-hp-wrap) is load-bearing, not tidiness. This selector carries
 * two classes and the rule hiding the honeypot carries one, so a bare
 * display: flex here outranks display: none there and puts "Leave this field
 * empty" on a public form. The trap is excluded rather than the hiding rule
 * strengthened, because it has no row to line up with either way.
 */
/*
 * 🔴 Measured, not assumed: the form computes to align-items: flex-start, so
 * two fields sharing a row size to their own content and never to the row.
 * Without this, the label below has no slack to absorb and grows by nothing —
 * which is exactly how the date box spent two rounds sitting a line lower than
 * the select beside it.
 */
.alta-servicing .wp-block-jetpack-contact-form {
	align-items: stretch;
}

.alta-servicing .grunion-field-wrap:not(.alta-hp-wrap) {
	display: flex;
	flex-direction: column;
}

.alta-servicing .grunion-field-wrap > :where(label) {
	flex-grow: 1;
}

/*
 * The date picker on the servicing forms. Built here rather than taken from
 * the browser because input[type=date] formats from the browser's UI locale
 * and nothing can override it — an en-GB broker reads 10/08/2026 as August
 * where a US one reads October, which on a form that moves money is not a
 * cosmetic difference.
 *
 * It lives inside the dialog, which is what lets it draw at all: showModal()
 * promotes only the dialog's own subtree to the top layer.
 */
.alta-cal__field {
	position: relative;
}

.alta-cal__field :where(input) {
	padding-right: 44px;
}

.alta-cal__toggle {
	position: absolute;
	right: 1px;
	bottom: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 0 var(--wp--custom--radius--xs) var(--wp--custom--radius--xs) 0;
	background: none;
	color: var(--wp--custom--neutral--500);
	cursor: pointer;
	transition: color 0.18s ease;
}

.alta-cal__toggle:hover,
.alta-cal__toggle:focus-visible {
	color: var(--wp--preset--color--brand);
}

.alta-cal__toggle :where(svg) {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}

.alta-cal {
	position: absolute;
	z-index: 2;
	top: calc(100% + 6px);
	right: 0;
	width: 268px;
	padding: 12px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 16px 40px rgba(15, 37, 47, 0.18);
}

.alta-cal.is-above {
	top: auto;
	bottom: calc(100% + 6px);
}

.alta-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.alta-cal__month {
	font-size: 0.9375rem;
	font-weight: 700;
}

.alta-cal__nav {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--xs);
	background: none;
	color: var(--wp--preset--color--text);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}

.alta-cal__nav:hover,
.alta-cal__nav:focus-visible {
	border-color: var(--wp--custom--line);
}

.alta-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}

.alta-cal__dow {
	padding-bottom: 4px;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.alta-cal__day {
	min-height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--xs);
	background: none;
	color: var(--wp--preset--color--text);
	font-size: 0.875rem;
	cursor: pointer;
}

.alta-cal__day:hover,
.alta-cal__day:focus-visible {
	border-color: var(--wp--preset--color--brand);
}

.alta-cal__day.is-today {
	font-weight: 700;
	text-decoration: underline;
}

.alta-cal__day.is-chosen {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	font-weight: 700;
}

/*
 * The honeypot on the two servicing forms. display: none rather than an
 * off-screen park: off-screen catches the bots that read CSS, but it also
 * leaves the input in the accessibility tree, reading out an instruction to
 * leave blank a field its user cannot see.
 *
 * 🔴 -wrap, not the bare class. Jetpack puts a field's className on the input
 * and a -wrap suffixed copy on the wrapper that holds the label, so .alta-hp
 * alone hides the input and leaves "Leave this field empty" sitting on a public
 * form. Same convention as .alta-form__group-wrap above.
 */
.alta-hp-wrap {
	display: none;
}

/* "Select an option" is a prompt until something is picked, so it looks like one. */
:is(.alta-form, .alta-partner, .alta-servicing) select:has(option[value=""]:checked) {
	color: var(--wp--custom--neutral--500);
}

:is(.alta-form, .alta-partner, .alta-servicing) :is(input, select, textarea) {
	color: var(--wp--preset--color--text);
	transition: border-color 0.18s ease;
}

:is(.alta-form, .alta-partner, .alta-servicing) :is(input, select, textarea):hover {
	border-color: rgba(0, 97, 153, 0.4);
}

:is(.alta-form, .alta-partner, .alta-servicing) :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--brand);
}

:where(.alta-quote__form, .alta-servicing) :where(textarea) {
	min-height: 96px;
}

.alta-btn--quiet .wp-element-button {
	background-color: transparent;
	color: var(--wp--preset--color--brand);
	border: 1px solid var(--wp--custom--neutral--500);
}

/*
 * The sent state. Jetpack draws a heading, a "← Back" link and the custom
 * message into a plain box; left alone it reads as a system notice bolted under
 * a designed form, which is exactly what the screenshot showed.
 *
 * The box is dropped — the card around it is already the container — and what is
 * left is a confirmation: a green check, the outcome in heading type, and one
 * line saying what happens next. The heading text itself is rebranded in
 * functions.php, because it is Jetpack's translated string rather than ours.
 */
:where(.alta-quote__form, .alta-partner, .alta-servicing) :where(.contact-form-submission) {
	margin: 0;
	padding: var(--wp--preset--spacing--xs) 0 var(--wp--preset--spacing--2xs);
	border: 0;
	border-radius: 0;
	font-size: inherit;
}

/* A way back into a form that has already been sent, offered at the moment it
   can only cause a second submission. */
:where(.alta-quote__form, .alta-partner, .alta-servicing) :where(.contact-form-submission) .go-back-message {
	display: none;
}

:where(.alta-quote__form, .alta-partner, .alta-servicing) :where(.contact-form-submission) :where(h4) {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	color: var(--wp--preset--color--text);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--tight, -0.01em);
	line-height: 1.25;
}

:where(.alta-quote__form, .alta-partner, .alta-servicing) :where(.contact-form-submission) :where(h4)::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--custom--success);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 17px 17px;
}

/*
 * WordPress swaps the ✨ that trails Jetpack's heading for an <img>, and it is a
 * sibling of the translated string rather than part of it — so rewriting the copy
 * in functions.php leaves the sparkle behind. The check to the left already says
 * "sent"; two symbols saying it is one too many.
 *
 * !important, which is not laziness: core's emoji stylesheet ships
 * `img.emoji { display: inline !important }`, so nothing without it wins.
 */
:where(.alta-quote__form, .alta-partner, .alta-servicing) :where(.contact-form-submission) :where(h4) img.emoji {
	display: none !important;
}

:where(.alta-quote__form, .alta-partner, .alta-servicing) :where(.jetpack_forms_contact-form-custom-success-message) {
	margin: 0;
	padding-left: 44px;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

@media (max-width: 599px) {

	:where(.alta-quote__form, .alta-partner, .alta-servicing) :where(.jetpack_forms_contact-form-custom-success-message) {
		padding-left: 0;
	}
}

@media (min-width: 840px) {
	.alta-quote__inner {
		grid-template-columns: 1fr 1.05fr;
	}
}

.alta-archive-head,
.alta-post-head {
	position: relative;
	overflow: hidden;
	background: linear-gradient(var(--wp--preset--color--background-warm) 0%, var(--wp--preset--color--surface) 92%);
}

.alta-archive-head {
	background: linear-gradient(var(--wp--preset--color--background-warm) 0%, var(--wp--preset--color--surface) 78%);
}

.alta-archive-head::before,
.alta-post-head::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(241, 111, 0, 0.06), transparent 70%);
	pointer-events: none;
}

.alta-archive-head__inner,
.alta-post-head__inner,
.alta-archive-list__inner,
.alta-blog__inner,
.alta-post-cta__inner,
.alta-related__inner {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xxl) var(--wp--custom--container--pad);
}

@media (max-width: 781px) {
	.alta-archive-head__inner,
	.alta-post-head__inner,
	.alta-archive-list__inner,
	.alta-blog__inner,
	.alta-post-cta__inner,
	.alta-related__inner {
		padding-block: 48px;
	}
}

.alta-archive-head__inner,
.alta-post-head__inner {
	position: relative;
}

.alta-archive-head__inner.is-layout-flow > * + *,
.alta-post-head__inner.is-layout-flow > * + * {
	margin-block-start: 0;
}

.alta-post-head__inner {
	max-width: 860px;
	padding: 64px var(--wp--custom--container--pad) 40px;
}

.alta-archive-head__inner {
	max-width: 780px;
	padding: 76px var(--wp--custom--container--pad) 56px;
}

.alta-archive-head :where(h1),
.alta-post-head :where(h1) {
	margin-bottom: 18px;
}

 * Each is also the largest the line can be rather than a flat number: the design
 * keeps one size at every width, and on an article that stops being true before
 * 375px — "Understanding" is wider than the column at 50px, and the only reason
 * the mockup survives it is the page-level overflow clip that build/10 ruled out.
 * Without the clip the word breaks mid-syllable instead. The designed size is
 * reached by 625px wide and holds from there up.
 */
.alta-archive-head :where(h1) {
	font-size: clamp(2.125rem, 8vw, 3rem);
	line-height: 1.08;
}

.alta-post-head :where(h1) {
	font-size: clamp(2.125rem, 8vw, 3.125rem);
	line-height: 1.07;
}

.alta-post-head__lede {
	margin: 0 0 28px;
	max-width: 680px;
	color: var(--wp--preset--color--text-secondary);
	font-size: 1.15625rem;
	line-height: 1.55;
}

.alta-blog .alta-cards {
	margin-top: 40px;
}

.alta-blog :where(.alta-card__term, .alta-card__title) {
	margin-bottom: 10px;
}

.alta-blog__lede {
	margin: 14px 0 0;
	max-width: 100%;
	color: var(--wp--preset--color--text-secondary);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.alta-archive-head__lede {
	margin: 0 0 32px;
	max-width: 620px;
	color: var(--wp--preset--color--text-secondary);
	font-size: 1.125rem;
	line-height: 1.55;
}

.alta-archive-head__search {
	max-width: 480px;
}

.alta-archive-head__search :where(input[type="search"]) {
	width: 100%;
	padding: 14px 16px 14px 46px;
	border: 1px solid var(--wp--custom--neutral--500);
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface);
	line-height: normal;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23a89e96" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M11 19a8 8 0 100-16 8 8 0 000 16z"/><path d="M21 21l-4.3-4.3"/></svg>');
	background-repeat: no-repeat;
	background-position: 16px center;
	color: var(--wp--preset--color--text);
	font-size: 0.96875rem;
	box-shadow: var(--wp--custom--shadow--card);
}

.alta-post-head__byline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 22px;
}

.alta-post-head__author-mini {
	display: flex;
	align-items: center;
	gap: 10px;
}

.alta-avatar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
}

.alta-post-head__author {
	margin: 0;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: normal;
}

.alta-post-head__byline > * + *::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 14px;
	border-radius: 50%;
	background-color: var(--wp--custom--neutral--300);
	vertical-align: middle;
}

.alta-post-head__byline .alta-post-head__date,
.alta-post-head__byline .alta-meta {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.84375rem;
	line-height: normal;
}

.alta-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.alta-post-head__byline > .alta-meta::before {
	margin-right: 8px;
}

.alta-post-head__byline :where(.wp-block-avatar) {
	line-height: 0;
}

.alta-icon--bare {
	display: inline-flex;
	width: auto;
	height: auto;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
}

.alta-icon--bare::before {
	width: 15px;
	height: 15px;
}

.alta-share-out {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--custom--line);
}

.alta-share-out__label {
	margin: 0;
	color: var(--wp--preset--color--text);
	font-size: 0.90625rem;
	font-weight: 700;
}

.alta-author-card {
	display: flex;
	gap: 18px;
	margin-top: 32px;
	padding: 26px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--background);
}

.alta-avatar--photo {
	display: block;
	object-fit: cover;
	background-color: var(--wp--custom--tint--blue-100);
}

.alta-author-card :where(.alta-avatar) {
	font-size: 1.125rem;
}

.alta-author-card__body {
	min-width: 0;
}

.alta-author-card__name {
	margin: 0;
	color: var(--wp--preset--color--text);
	font-size: 1.03125rem;
	font-weight: 800;
}

.alta-author-card__role {
	margin: 0 0 8px;
	color: var(--wp--preset--color--accent);
	font-size: 0.84375rem;
	font-weight: 600;
}

.alta-author-card__bio {
	margin: 0;
	max-width: 560px;
	color: var(--wp--custom--neutral--400);
	font-size: 0.90625rem;
	line-height: 1.6;
}

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

.alta-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--wp--custom--line);
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--custom--neutral--400);
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.alta-share__btn:hover,
.alta-share__btn:focus-visible {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.alta-share__btn .alta-icon::before {
	width: 16px;
	height: 16px;
}

.alta-share__btn.is-copied {
	border-color: var(--wp--custom--success);
	color: var(--wp--custom--success);
}

/* The colour says copied; the icon acknowledges the press that did it. */
@media (prefers-reduced-motion: no-preference) {

	.alta-share__btn.is-copied .alta-icon {
		animation: alta-pop 0.16s var(--wp--custom--ease--out);
	}
}

@keyframes alta-pop {
	from {
		transform: scale(0.9);
	}
}

.alta-post-head__date,
.alta-card__date {
	margin: var(--wp--preset--spacing--sm) 0 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.alta-post-head__photo {
	position: relative;
	max-width: var(--wp--custom--container--max);
	margin: 8px auto 0;
	padding-inline: var(--wp--custom--container--pad);
}

.alta-post-head__photo img {
	display: block;
	width: 100%;
	height: 440px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--card);
}

.alta-article {
	padding-block: 64px 20px;
	background-color: var(--wp--preset--color--surface);
}

.alta-article__grid {
	display: grid;
	gap: 40px;
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--pad);
}

.alta-article__body {
	max-width: 760px;
	min-width: 0;
}

.alta-toc {
	min-width: 0;
}

.alta-toc__box {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 22px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--background);
}

.alta-toc__label {
	margin-bottom: 10px;
	color: var(--wp--custom--neutral--300);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.alta-toc__link {
	padding: 7px 0;
	border-bottom: 1px solid var(--wp--custom--line);
	color: var(--wp--custom--neutral--400);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.alta-toc__link:hover,
.alta-toc__link:focus-visible {
	color: var(--wp--preset--color--brand);
}

.alta-toc__cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 18px;
	padding-top: 18px;
}

.alta-toc__cta-text {
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.84375rem;
	line-height: 1.5;
}

.alta-toc__cta-btn .wp-element-button {
	width: 100%;
	box-shadow: none;
}

@media (min-width: 1000px) {

	.alta-article__grid:has(.alta-toc) {
		grid-template-columns: 260px 1fr;
		gap: 56px;
		align-items: start;
	}

	.alta-toc {
		position: sticky;
		top: 144px;
	}
}

.alta-prose :where(h2) {
	margin: 36px 0 14px;
	font-size: 1.625rem;
	letter-spacing: normal;
	line-height: 1.2;
}

.alta-prose :where(h3) {
	margin: 28px 0 12px;
	font-size: 1.1875rem;
	letter-spacing: normal;
	line-height: 1.3;
}

.alta-article :where(h2) {
	margin: 44px 0 18px;
	font-size: 1.875rem;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.alta-article :where(h3) {
	margin: 30px 0 14px;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
}

.alta-article :where(.wp-block-post-content) :where(p) {
	font-size: 1.03125rem;
	line-height: 1.75;
}

.alta-prose :where(h1) {
	margin: 0 0 14px;
	font-size: 2.625rem;
}

.alta-cats {
	border-top: 1px solid var(--wp--custom--line);
	border-bottom: 1px solid var(--wp--custom--line);
	background-color: var(--wp--preset--color--surface);
}

.alta-cats__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: 20px var(--wp--custom--container--pad);
}

.alta-cats__pill {
	padding: 9px 18px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--custom--neutral--400);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.alta-cats__pill:hover,
.alta-cats__pill:focus-visible {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.alta-cats__pill[aria-current="page"] {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
}

.alta-crumbs {
	border-bottom: 1px solid var(--wp--custom--line);
	background-color: var(--wp--preset--color--background);
	font-size: 0.84375rem;
}

.alta-crumbs__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: 16px var(--wp--custom--container--pad);
}

.alta-crumbs :where(a) {
	color: var(--wp--preset--color--text-secondary);
	font-weight: 500;
	text-decoration: none;
}

.alta-crumbs :where(a):hover,
.alta-crumbs :where(a):focus-visible {
	text-decoration: underline;
}

.alta-crumbs__sep {
	color: var(--wp--custom--neutral--300);
	font-size: 0.6875rem;
}

.alta-crumbs :where([aria-current="page"]) {
	color: var(--wp--preset--color--text);
	font-weight: 700;
}

.alta-prose {
	padding-block: 64px 96px;
	background-color: var(--wp--preset--color--surface);
}

.alta-prose__inner {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--pad);
}

.alta-prose :where(.wp-block-post-content.is-layout-flow) > * + * {
	margin-block-start: 0;
}

.alta-prose :where(.wp-block-post-content) {
	display: flow-root;
}

.alta-prose :where(.wp-block-post-content) > :where(p) {
	margin: 0 0 18px;
}

.alta-prose :where(.wp-block-post-content) > :where(ul, ol) {
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.alta-prose :where(.alta-note) {
	margin-bottom: 32px;
}

.alta-article__lede {
	font-size: var(--wp--preset--font-size--lede);
	color: var(--wp--preset--color--text-secondary);
}

.alta-article :where(.wp-block-post-content) > :where(ul, ol) :where(li) {
	margin-bottom: 12px;
	font-size: 1rem;
	line-height: 1.6;
}

.alta-article :where(.wp-block-post-content) > :where(ul, ol) :where(li:last-child) {
	margin-bottom: 0;
}

.alta-article :where(.wp-block-post-content.is-layout-flow) > * + * {
	margin-block-start: 0;
}

.alta-article :where(.wp-block-post-content) {
	display: flow-root;
}

.alta-article :where(.wp-block-post-content) > :where(p) {
	margin: 0 0 18px;
}

.alta-article :where(.wp-block-post-content) > :where(h2) {
	margin-top: 44px;
}

.alta-article :where(.wp-block-post-content) > :where(h3) {
	margin-top: 30px;
}

.alta-article :where(.wp-block-post-content) > :where(ul, ol) {
	margin: 4px 0 28px;
}

.alta-article :where(.wp-block-post-content) > :where(figure, .wp-block-table, .alta-scroller) {
	margin: 8px 0 28px;
}

.alta-note {
	display: flow-root;
	margin: 8px 0 28px;
	padding: 22px;
	border: 1px solid #c9e3f2;
	border-radius: 14px;
	background-color: var(--wp--custom--tint--blue-150);
}

.alta-takeaways {
	margin: 40px 0;
	padding: 28px 30px;
	border: 1px solid #f0e2cc;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--background-warm);
}

.alta-note__title {
	margin: 0 0 6px;
	font-size: 0.96875rem;
	font-weight: 700;
}

.alta-takeaways__title {
	margin: 0 0 16px;
	font-size: 1.125rem;
	font-weight: 800;
}

.alta-note :where(p) {
	margin: 0;
	color: var(--wp--custom--neutral--400);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.alta-takeaways :where(ul) {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding-left: 18px;
}

.alta-takeaways :where(li) {
	color: var(--wp--preset--color--text);
	font-size: 0.96875rem;
	line-height: 1.6;
}

.alta-scroller {
	min-width: 0;
	overflow-x: auto;
	margin: 8px 0 28px;
	border: 1px solid var(--wp--custom--line);
	border-radius: 14px;
}

.alta-scroller :where(.wp-block-table) {
	min-width: 0;
	margin: 0;
	overflow-x: visible;
}

.alta-scroller :where(table) {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 0.90625rem;
}

.alta-scroller th,
.alta-scroller td {
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--wp--custom--line);
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}

.alta-scroller th {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
	font-weight: 700;
	white-space: nowrap;
}

.alta-scroller td {
	color: var(--wp--custom--neutral--400);
}

.alta-scroller thead {
	border-bottom: 0;
}

.alta-scroller tr:last-child td {
	border-bottom: 0;
}

.alta-scroller figcaption {
	min-width: 560px;
	margin: 0;
	padding: 12px 18px 14px;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--caption);
}

.alta-article :where(.wp-block-details) {
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--wp--custom--line);
	border-radius: 0;
}

.alta-article :where(.wp-block-details summary) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 2px;
	color: var(--wp--preset--color--text);
	font-size: 1.03125rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.alta-article :where(.wp-block-details summary)::-webkit-details-marker {
	display: none;
}

.alta-article :where(.wp-block-details summary)::after {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: var(--wp--custom--neutral--300);
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M6%209l6%206%206-6'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M6%209l6%206%206-6'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 0.2s var(--wp--custom--ease--out);
}

.alta-article :where(.wp-block-details[open] summary)::after {
	transform: rotate(180deg);
}

.alta-article :where(.wp-block-details) :where(p) {
	margin: 0;
	padding: 0 2px 22px;
	max-width: 680px;
	color: var(--wp--custom--neutral--400);
	font-size: 0.96875rem;
	line-height: 1.65;
}

/*
 * The chevron turned over 220ms while the answer under it appeared all at
 * once. A collapse has nothing but its height to animate, so this is the one
 * place the theme animates a layout property on purpose. Anything with
 * ::details-content gets it; everywhere else keeps today's snap.
 */
@media (prefers-reduced-motion: no-preference) {

	.alta-article :where(.wp-block-details)::details-content {
		height: 0;
		opacity: 0;

		/* Clips the collapse without eating the focus ring of a link at the edge. */
		overflow: clip;
		overflow-clip-margin: 4px;
		transition: height 0.2s var(--wp--custom--ease--out), opacity 0.16s ease,
			content-visibility 0.2s allow-discrete;
	}

	.alta-article :where(.wp-block-details[open])::details-content {
		height: auto;
		opacity: 1;
	}
}

.alta-cards__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 861px) {
	.alta-blog .alta-cards__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.alta-blog .alta-cards__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 861px) {
	:where(.alta-archive-list, .alta-related) .alta-cards__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 860px) {
	:where(.alta-archive-list, .alta-related) .alta-cards__list {
		grid-template-columns: 1fr;
	}
}

.alta-related .alta-cards__list {
	margin-top: 28px;
}

.alta-cards__list > :where(li) {
	display: flex;
	flex-direction: column;
	min-width: 0;

	margin-block: 0;
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--card);
}

.alta-card__photo {
	position: relative;
	flex-shrink: 0;
	height: 170px;
	margin: 0;
	overflow: hidden;
	background: linear-gradient(135deg, #eaf2f8, #dbe9f2);
}

.alta-hero__photo::after,
.alta-product__photo::after,
.alta-card__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(165deg, rgba(20, 16, 10, 0.12), rgba(255, 255, 255, 0.05));
	pointer-events: none;
}

.alta-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alta-cards__list > :where(li) > :where(:not(.alta-card__photo)) {
	margin-inline: 22px;
}

.alta-cards__list > :where(li) > :where(.alta-card__term) {
	margin-top: 22px;
}

.alta-cards__list > :where(li) > :where(.alta-card__foot) {
	margin-bottom: 26px;
}

.alta-card__term {
	margin-bottom: 8px;
	color: var(--wp--custom--neutral--300);
	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.alta-card__term :where(a) {
	color: inherit;
	text-decoration: none;
}

.alta-card__title {
	margin-top: 0;
	margin-bottom: 8px;
	color: var(--wp--preset--color--text);
	font-size: 1.09375rem;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.35;
}

.alta-card__title :where(a) {
	color: inherit;
	text-decoration: none;
}

.alta-card__title :where(a):hover {
	text-decoration: underline;
}

.alta-card__text {
	margin-block: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.alta-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xs);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--sm);
}

.alta-card__foot :where(.alta-card__date) {
	margin: 0;
	color: var(--wp--custom--neutral--300);
	font-size: 0.8125rem;
}

.alta-blog .alta-card__more {
	font-size: 0.9375rem;
}

.alta-card__more {
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
}

.alta-card__more::after {
	content: " \2192" / "";
}

.alta-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
}

.alta-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.alta-pagination :where(.page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 6px;
	border: 1px solid var(--wp--custom--line);
	border-radius: 10px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font-size: 0.90625rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.alta-pagination :where(.page-numbers.current) {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
}

.alta-pagination :where(a.page-numbers):hover,
.alta-pagination :where(a.page-numbers):focus-visible {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.alta-pagination :where(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	min-height: 40px;
	padding: 10px 18px;
	text-align: center;
	border: 1px solid var(--wp--custom--line);
	border-radius: 10px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font-size: 0.90625rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.alta-pagination :where(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next):hover,
.alta-pagination :where(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next):focus-visible {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.alta-pagination :where(button.wp-block-query-pagination-previous, button.wp-block-query-pagination-next) {
	font-family: inherit;
	cursor: default;
}

.alta-pagination :where(.is-disabled) {
	color: var(--wp--custom--neutral--300);
	opacity: 0.5;
}

.alta-post-cta {
	background-color: var(--wp--preset--color--background-dark);
	color: var(--wp--preset--color--surface);
}

.alta-post-cta :where(h2) {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--heading-2);
	color: var(--wp--preset--color--surface);
}

.alta-post-cta :where(.alta-eyebrow) {
	color: var(--wp--custom--line);
}

.alta-post-cta :where(.wp-block-buttons) {
	margin-top: var(--wp--preset--spacing--md);
}

.alta-post-cta :where(.is-style-outline .wp-block-button__link) {
	color: var(--wp--preset--color--surface);
}

.alta-related,
.alta-blog {
	background-color: var(--wp--preset--color--background);
}

.alta-partner__inner,
.alta-servicing__inner {
	max-width: 720px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xxl) var(--wp--custom--container--pad);
}

@media (max-width: 781px) {
	.alta-partner__inner {
		padding-block: 48px;
	}
}

.alta-partner__lede,
.alta-servicing__lede {
	margin: var(--wp--preset--spacing--xs) 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--lede);
}

.alta-partner :where(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	min-height: 44px;
	padding: 10px var(--wp--preset--spacing--xs);
	border: 1px solid var(--wp--custom--neutral--500);
	border-radius: var(--wp--custom--radius--xs);
	font-size: 16px;
}

.alta-partner :where(textarea) {
	min-height: 96px;
}

/* The partner form's sent state is the same component; it is styled with the
   quote form's, above. */

.alta-dialog-source {
	display: none;
}

.alta-dialog {
	width: min(560px, calc(100vw - 32px));
	max-width: none;
	max-height: min(760px, calc(100vh - 48px));

	max-height: min(760px, calc(100dvh - 48px));
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	box-shadow: 0 30px 80px rgba(15, 37, 47, 0.28);
	overflow: hidden;
}

.alta-dialog::backdrop {
	background-color: rgba(11, 42, 63, 0.6);
}

/*
 * The dialog used to arrive over 220ms and then vanish. One transition covers
 * both directions now, and it is interruptible where the keyframe was not:
 * display and overlay transition discretely so the element stays in the top
 * layer while it fades. Opening is the deliberate act at 220ms; closing is the
 * answer to a click and snaps in 160. Browsers without allow-discrete ignore
 * all of it and open the dialog outright, as they did before.
 */
@media (prefers-reduced-motion: no-preference) {

	.alta-dialog {
		opacity: 0;
		transform: translateY(12px) scale(0.985);
		transition: opacity 0.16s var(--wp--custom--ease--out), transform 0.16s var(--wp--custom--ease--out),
			display 0.16s allow-discrete, overlay 0.16s allow-discrete;
	}

	.alta-dialog[open] {
		opacity: 1;
		transform: none;
		transition-duration: 0.22s;
	}

	@starting-style {

		.alta-dialog[open] {
			opacity: 0;
			transform: translateY(12px) scale(0.985);
		}
	}

	.alta-dialog::backdrop {
		opacity: 0;
		transition: opacity 0.16s var(--wp--custom--ease--out), display 0.16s allow-discrete,
			overlay 0.16s allow-discrete;
	}

	.alta-dialog[open]::backdrop {
		opacity: 1;
		transition-duration: 0.22s;
	}

	@starting-style {

		.alta-dialog[open]::backdrop {
			opacity: 0;
		}
	}
}

/*
 * The quote form swaps its two steps instantly, and an error or the thank-you
 * panel simply appears where a moment ago there was nothing. Each of those is a
 * state change worth a beat: the incoming block rises into place rather than
 * being there already.
 */
@media (prefers-reduced-motion: no-preference) {

	.alta-form .jetpack-form-step.is-current-step,
	.alta-form :where(.contact-form__error.show-errors),
	:where(.alta-quote__form, .alta-partner, .alta-servicing) :where(.contact-form-submission) {
		animation: alta-step-in 0.18s var(--wp--custom--ease--out);
	}
}

@keyframes alta-step-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.alta-dialog__body {
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 24px;
}

@media (min-width: 480px) {

	.alta-dialog__body {
		padding: 36px;
	}
}

.alta-dialog .alta-partner__inner,
.alta-dialog .alta-servicing__inner,
.alta-dialog .alta-quote__form {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background-color: transparent;
}

.alta-dialog__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--custom--line);
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--custom--neutral--400);
	font-size: 1.375rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.alta-dialog__close:hover,
.alta-dialog__close:focus-visible {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.alta-dialog :where(.wp-block-jetpack-form-step-navigation) :where(.form-button-next, .form-button-submit),
.alta-dialog .alta-form > .wp-block-button {
	flex: 1;
}

.alta-dialog :where(.wp-block-jetpack-form-step-navigation) :where(.form-button-next, .form-button-submit) .wp-element-button,
.alta-dialog .alta-form > .wp-block-button .wp-element-button {
	width: 100%;
}

.contact-form .grunion-field-wrap.grunion-field-consent-wrap input[type="checkbox"].consent {
	width: 18px;
	min-width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--brand);
}

.alta-dialog :where(.alta-eyebrow, h2) {
	padding-right: 44px;
}

.alta-util__list :where(a),
.alta-util__phone :where(a),
.alta-footer__links :where(a),
.alta-footer__legal :where(a),
.alta-contact :where(a),
.alta-nav :where(.wp-block-navigation-item__content),
.alta-card__term :where(a),
.alta-card__more,
.alta-product__learn :where(a),
.alta-advisor__phone :where(a),
.alta-header__logo {
	transition: color 0.18s ease, opacity 0.18s ease;
}

.alta-util__list :where(a):hover,
.alta-util__list :where(a):focus-visible,
.alta-footer__links :where(a):hover,
.alta-footer__links :where(a):focus-visible,
.alta-footer__legal :where(a):hover,
.alta-footer__legal :where(a):focus-visible {
	color: var(--wp--preset--color--surface);
}

.alta-contact :where(a):hover,
.alta-contact :where(a):focus-visible {
	text-decoration: underline;
}

.alta-nav :where(.wp-block-navigation-item__content):hover,
.alta-nav :where(.wp-block-navigation-item__content):focus-visible,
.alta-card__term :where(a):hover,
.alta-card__term :where(a):focus-visible,
.alta-advisor__phone :where(a):hover,
.alta-advisor__phone :where(a):focus-visible {
	color: var(--wp--preset--color--brand);
}

.alta-header__logo:hover {
	opacity: 0.85;
}

.alta-card__more::after,
.alta-product__learn :where(a)::after {
	display: inline-block;
	margin-left: 0.28em;
	transition: transform 0.18s var(--wp--custom--ease--out);
}

.alta-product__learn :where(a):hover,
.alta-product__learn :where(a):focus-visible,
.alta-card__more:hover,
.alta-card__more:focus-visible {
	color: var(--wp--custom--blue--700);
}

.alta-doc__go {
	transition: background-color 0.18s ease, color 0.18s ease;
}

.alta-doc:hover .alta-doc__go,
.alta-doc__go:hover,
.alta-doc__go:focus-visible {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
}

.alta-product-tab:not([aria-selected="true"]):hover,
.alta-product-tab:not([aria-selected="true"]):focus-visible {
	border-color: rgba(0, 97, 153, 0.35);
}

.alta-cards__list > :where(li) {
	transition: border-color 0.25s ease, box-shadow 0.25s ease,
		transform 0.25s var(--wp--custom--ease--out);
}

.alta-cards__list > :where(li):hover,
.alta-cards__list > :where(li):focus-within {
	border-color: rgba(0, 97, 153, 0.35);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.alta-article :where(.wp-block-details summary) {
	transition: color 0.18s ease;
}

.alta-article :where(.wp-block-details summary)::after {
	transition: background-color 0.18s ease, transform 0.22s var(--wp--custom--ease--out);
}

.alta-article :where(.wp-block-details summary):hover,
.alta-article :where(.wp-block-details summary):focus-visible {
	color: var(--wp--preset--color--brand);
}

.alta-article :where(.wp-block-details summary):hover::after {
	background-color: var(--wp--preset--color--brand);
}

.alta-article :where(.wp-block-details[open] summary)::after {
	transform: rotate(180deg);
}

@media (min-width: 840px) and (max-height: 880px) {
	.alta-hero__eyebrow,
	.alta-hero__title {
		margin-bottom: 14px;
	}

	.alta-hero__lede {
		margin-bottom: 22px;
	}

	.alta-hero__prose .alta-hero__ctas {
		margin-bottom: 0;
	}
}

.alta-404-routes {
	background-color: var(--wp--preset--color--surface);
}

.alta-404-routes__inner {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xl) var(--wp--custom--container--pad) var(--wp--preset--spacing--xxl);
}

@media (max-width: 781px) {
	.alta-404-routes__inner {
		padding: 32px var(--wp--custom--container--pad) 48px;
	}
}

.alta-404-routes__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.alta-404-routes__list {
		grid-template-columns: 1fr 1fr;
	}
}

.alta-route {
	position: relative;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 20px 22px 20px 80px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--card);
	transition: border-color 0.25s ease, box-shadow 0.25s ease,
		transform 0.25s var(--wp--custom--ease--out);
}

.alta-route:hover,
.alta-route:has(a:focus-visible) {
	border-color: rgba(0, 97, 153, 0.35);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.alta-route > .alta-icon {
	position: absolute;
	top: 20px;
	left: 22px;
	width: 42px;
	height: 42px;
	border-radius: 12px;
}

.alta-route > .alta-icon::before {
	width: 20px;
	height: 20px;
}

.alta-route__name {
	margin: 0;
	font-size: 1.03125rem;
	font-weight: 700;
	line-height: 1.3;
}

.alta-route__name :where(a) {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.alta-route__name :where(a)::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.alta-route__name :where(a)::after {
	content: " \2192";
	display: inline-block;
	margin-left: 0.28em;
	color: var(--wp--preset--color--brand);
	transition: transform 0.18s var(--wp--custom--ease--out);
}

.alta-route__text {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.90625rem;
	line-height: 1.5;
}

.alta-404-routes__help {
	margin: var(--wp--preset--spacing--lg) 0 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.96875rem;
}

.alta-404-routes__help :where(a) {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	text-decoration: none;
}

.alta-404-routes__help :where(a):hover,
.alta-404-routes__help :where(a):focus-visible {
	text-decoration: underline;
}

.alta-empty {
	max-width: 46ch;
	margin: 40px auto 0;
	padding: 40px 32px;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	text-align: center;
}

.alta-empty__title {
	margin: 0 0 10px;
	font-size: 1.375rem;
	line-height: 1.25;
}

.alta-empty__text {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.96875rem;
	line-height: 1.55;
}

.alta-empty__link {
	margin: 20px 0 0;
}

.alta-empty__link :where(a) {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	text-decoration: none;
}

.alta-empty__link :where(a)::after {
	content: " \2192";
	display: inline-block;
	margin-left: 0.28em;
	transition: transform 0.18s var(--wp--custom--ease--out);
}

.alta-cards__list > :where(li):not(:has(.alta-card__photo))::before {
	content: "";
	display: block;
	flex-shrink: 0;
	height: 170px;
	background: linear-gradient(135deg, #eaf2f8, #dbe9f2);
}

.alta-card__term {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alta-card__term .wp-block-post-terms__separator {
	white-space: inherit;
}

@media print {
	.alta-util,
	.alta-nav,
	.alta-header .alta-btn,
	.alta-crumbs,
	.alta-cats,
	.alta-archive-head__search,
	.alta-toc,
	.alta-share,
	.alta-share-out,
	.alta-post-cta,
	.alta-related,
	.alta-partner,
	.alta-servicing,
	.alta-pagination,
	.alta-footer__top,
	.alta-quote__form,
	.wp-block-file__button {
		display: none !important;
	}

	:where(*) {
		background: transparent !important;
		box-shadow: none !important;
		color: #000 !important;
	}

	.alta-header {
		position: static;
		border-bottom: 1px solid #999;
	}

	.alta-header__inner {
		padding-block: 8px;
	}

	.alta-article__grid {
		display: block;
	}

	.alta-article__body,
	.alta-prose__inner {
		max-width: none;
	}

	.alta-post-head__photo img {
		height: auto;
		max-height: 8cm;
	}

	:where(h1, h2, h3) {
		break-after: avoid;
	}

	:where(p, li, figure, .wp-block-table, .alta-note, .alta-takeaways) {
		break-inside: avoid;
	}

	.alta-footer__fine {
		border-top: 1px solid #999;
	}

	.alta-footer__fine::after {
		content: "altaloans.com · NMLS #2427649 · (855) 435-0003";
		display: block;
		width: 100%;
		padding-top: 4px;
	}

	@page {
		margin: 15mm;
	}
}

/*
 * Jetpack renders every textarea with rows='20'. Left alone that is roughly
 * 370px of empty box, which on the servicing forms pushed the submit button
 * below the fold and made the dialog scroll. Height is set rather than
 * min-height so the rows attribute stops deciding, and resize stays vertical
 * for anyone with more to say.
 */
.alta-quote__form :where(textarea),
.alta-partner :where(textarea),
.alta-servicing :where(textarea) {

	height: 96px;
	min-height: 84px;
	resize: vertical;
}

.alta-form__group-wrap :where(label) {
	border-color: var(--wp--custom--line);
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.alta-form__group-wrap :where(label):hover {
	border-color: rgba(0, 97, 153, 0.4);
}

.alta-form__group-wrap:has(:where(.wp-block-jetpack-field-option-radio, .wp-block-jetpack-option):nth-child(2):last-child) :where(.wp-block-jetpack-fieldset, .wp-block-jetpack-options) {
	grid-template-columns: repeat(2, minmax(88px, 132px));
}

.alta-form :where(.grunion-field-label),
.alta-form__group-wrap :where(legend) {
	margin-bottom: 9px;
	color: var(--wp--custom--neutral--400);
	font-size: 0.84375rem;
	font-weight: 600;
	line-height: normal;
}

/*
 * Jetpack gives the consent line the field-label class, so it inherited 13.5px
 * at 600 and read as a heading. It is a sentence.
 */
.alta-form :where(.grunion-field-label).consent {
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--normal);
}

.alta-form .grunion-label-required {
	display: none;
}

.alta-form .alta-form__optional-wrap .grunion-field-label::after {
	content: " (optional)";
	color: var(--wp--custom--neutral--300);
	font-weight: 400;
}

[hidden] {
	display: none !important;
}

.alta-btn--quiet .wp-element-button {
	border-color: var(--wp--custom--line);
	color: var(--wp--preset--color--text);
	box-shadow: none;
}

.alta-btn--quiet .wp-element-button:hover,
.alta-btn--quiet .wp-element-button:focus-visible {
	border-color: rgba(0, 97, 153, 0.4);
	background-color: var(--wp--custom--tint--blue-100);
	color: var(--wp--preset--color--brand);
	box-shadow: none;
}

/*
 * The states belong to the button, not to .wp-block-button around it: that
 * wrapper is a square div, so hovering painted a rectangular glow and pressing
 * painted a rectangular orange block behind the rounded button.
 */
.alta-btn--accent .wp-element-button:hover,
.alta-btn--accent .wp-element-button:focus-visible,
.alta-btn--on-dark .wp-element-button:hover,
.alta-btn--on-dark .wp-element-button:focus-visible,
.wp-block-button.is-style-accent > .wp-block-button__link:hover,
.wp-block-button.is-style-accent > .wp-block-button__link:focus-visible {
	background-color: var(--wp--custom--orange--600);
	box-shadow: 0 12px 26px rgba(241, 111, 0, 0.36);
}

.alta-btn--accent .wp-element-button:active,
.alta-btn--on-dark .wp-element-button:active,
.wp-block-button.is-style-accent > .wp-block-button__link:active {
	background-color: var(--wp--custom--orange--600);
	box-shadow: var(--wp--custom--shadow--accent);
}

.alta-btn--outline .wp-element-button:hover,
.alta-btn--outline .wp-element-button:focus-visible,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	box-shadow: 0 8px 18px rgba(15, 37, 47, 0.1);
}

/*
 * Everything in the theme that MOVES on hover, in one place and behind a gate.
 * A tap on a touch screen fires :hover and it sticks: the card stayed lifted,
 * the arrow stayed nudged, until you tapped somewhere else. Colour and shadow
 * above stay ungated — they read as feedback on a phone, not as a stuck state.
 */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

	/*
	 * 🔴 .alta-doc deliberately does NOT lift, and adding it back for consistency
	 * with the cards below reintroduces a bug. A transform makes the element its
	 * own stacking context, so it paints in the positioned-descendants step —
	 * above the plain in-flow siblings around it. Its hover shadow is the shared
	 * --shadow--card-hover, `0 18px 44px`, which reaches ~40px down and ~22px
	 * sideways; the docs rows are 14px apart, the tightest grid in the theme
	 * (.alta-cards__list is 24px, .alta-products__grid 18px). So the blue shadow
	 * landed on top of the next card instead of behind it and washed out its top
	 * third, border and all — measured at 24,439 changed pixels over the card
	 * below, against 8,353 without the transform, and that remainder is exactly
	 * the 14px gutter strip (573×14), which is a shadow doing its job.
	 *
	 * Colour and shadow still answer the hover; only the 2px move is gone, and in
	 * a dense row list it was the least legible of the three lifts anyway.
	 */

	.alta-product-tab:not([aria-selected="true"]):hover {
		transform: translateX(-2px);
	}

	.alta-cards__list > :where(li):hover {
		transform: translateY(-4px);
	}

	.alta-route:hover {
		transform: translateY(-2px);
	}

	.alta-btn--outline .wp-element-button:hover,
	.wp-block-button.is-style-outline > .wp-block-button__link:hover {
		transform: translateY(-1px);
	}

	.alta-card__more:hover::after,
	.alta-product__learn :where(a):hover::after,
	.alta-route:hover .alta-route__name :where(a)::after,
	.alta-empty__link :where(a):hover::after {
		transform: translateX(3px);
	}
}

/* The same nudge for focus, on any pointer: a keyboard does not hover. */
@media (prefers-reduced-motion: no-preference) {

	.alta-product-tab:not([aria-selected="true"]):focus-visible {
		transform: translateX(-2px);
	}

	.alta-cards__list > :where(li):focus-within {
		transform: translateY(-4px);
	}

	.alta-route:has(a:focus-visible) {
		transform: translateY(-2px);
	}

	.alta-btn--outline .wp-element-button:focus-visible,
	.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
		transform: translateY(-1px);
	}

	.alta-card__more:focus-visible::after,
	.alta-product__learn :where(a):focus-visible::after,
	.alta-empty__link :where(a):focus-visible::after {
		transform: translateX(3px);
	}
}

/*
 * The last two controls in the theme with no hover of their own: the mobile
 * menu's open and close buttons, and the consent row, which is a label you
 * click. Same colour move and the same 0.18s as everything else.
 */
.alta-nav :where(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
	transition: color 0.18s ease;
}

.alta-nav :where(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):hover,
.alta-nav :where(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):focus-visible {
	color: var(--wp--preset--color--brand);
}

.alta-form :where(.grunion-field-label).consent {
	cursor: pointer;
	transition: color 0.18s ease;
}

.alta-form :where(.grunion-field-label).consent:hover {
	color: var(--wp--preset--color--brand);
}

.alta-dialog__close {
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.alta-dialog__close:hover,
.alta-dialog__close:focus-visible {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--custom--tint--blue-100);
	color: var(--wp--preset--color--brand);
}

/* =========================================================================
 * Calculators
 * =======================================================================*/

/*
 * The calculator pages. Wide, because the design is two columns of inputs and
 * results — page.html's 760px prose measure has nowhere to put the second one.
 */
.alta-calc-page {
	padding-inline: max(
		var(--wp--custom--container--pad),
		(100% - var(--wp--custom--container--max)) / 2
	);
	padding-block: clamp(24px, 4vw, 48px);

	/*
	 * White, where the rest of the site is warm off-white. The calculator builds
	 * its surfaces the opposite way round to every other page here — tinted
	 * panels on a plain ground, rather than white cards on a tinted one — which
	 * is how the design was drawn and what its inputs and readouts are spaced
	 * for. Give it a warm ground and the panels have nothing to sit against.
	 *
	 * Padding does the centring rather than a max-width, so the ground reaches
	 * both edges without negative margins and without a clip-path: clipping
	 * would make this element the containing block for the mobile tooltip's
	 * position: fixed, and park it inside the calculator instead of the
	 * viewport.
	 */
	background-color: var(--wp--preset--color--surface);
}

/*
 * The design draws its own page padding inside .page, which is already inside
 * this container. Left alone the two stack and the calculator sits in a
 * gutter twice as wide as everything else on the site.
 */
.alta-calc .alta-calc__shell {
	max-width: none;
	padding: 0;
}

/*
 * The page title, which the calculator does not draw. The design was built as
 * an iframe widget whose host page owned every piece of chrome, so its only
 * <h1> is inside the print-only estimate — a calculator page with no
 * wp:post-title would have no heading at all.
 */
.alta-calc-page__title {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 clamp(16px, 2vw, 28px);
}

/*
 * The wordmark on the printed estimate falls back to text if the logo URL
 * never arrives — better a name than a broken image on a lending document.
 */
.alta-calc .lk-logo-text {
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand);
}

/*
 * ⚠️ Printing a calculator prints the calculator. The design hides its own
 * live UI and reveals a purpose-built print document, but it was a standalone
 * page and had no header, footer or dialogs to think about — here they would
 * print around the estimate.
 */
@media print {
	/*
	 * 🔴 Not `body > header`. A block theme wraps the whole template in
	 * .wp-site-blocks, so the header and footer are grandchildren of body and a
	 * child combinator matches nothing — the site chrome printed around the
	 * estimate while this rule looked like it was preventing exactly that.
	 * And .alta-crumbs, which is what the breadcrumb block actually renders.
	 */
	body:has(.alta-calc) .wp-site-blocks > header,
	body:has(.alta-calc) .wp-site-blocks > footer,
	body:has(.alta-calc) .alta-crumbs,
	body:has(.alta-calc) .alta-calc-page__title,
	body:has(.alta-calc) dialog {
		display: none !important;
	}

	.alta-calc-page {
		max-width: none;
		padding: 0;
		background: none;
	}
}

/* =========================================================================
 * Header: the Calculators submenu
 * =======================================================================*/

/*
 * Core ships a submenu panel with its own borders and white background, drawn
 * for a default theme. None of it matches this header, so all of it is
 * restated here.
 *
 * openSubmenusOnClick is set on the navigation block, so the parent is a real
 * <button aria-expanded> rather than a link that is also a menu trigger —
 * which is the control that fires the wrong one under a thumb.
 */
/*
 * 🔴 Doubled class, and the same trick below. Core paints this panel with
 * `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`
 * — three classes — so every rule here written the theme's usual way, inside
 * :where(), lost silently. The panel that shipped was core's: its own grey
 * border and its own #000 links, only the radius and shadow this theme asked
 * for. Stated at a weight that lands.
 */
.alta-nav .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--custom--shadow--card);
	padding: 6px;
	min-width: 210px;
}

/*
 * The parent is a <button>, and core sizes it from its own rule. The theme's
 * nav typography is set inside :where(), which cannot outrank that — so
 * "Calculators" sat at 16px/400 among 13.5px/500 neighbours and read as a
 * different typeface altogether. It is the same Roboto; it was never the font.
 */
.alta-nav .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
	/*
	 * ⚠️ The gap before the chevron is this padding minus the -0.6em core pulls
	 * the icon back by — and that pull computes against the icon's own 16px, so
	 * it stays 9.6px while an em-based padding shrinks with the label. At the
	 * 13.5px below, core's 0.85em leaves 1.9px and the chevron sits on the last
	 * letter. Fixed px on both sides of the subtraction, so it cannot drift.
	 */
	padding: 0 15px 0 0;
	/*
	 * inherit, not the theme's nav colour, which is what the sibling links
	 * actually get: core forces `color: inherit` onto every .._item__content
	 * with a doubled class, so the links ignore that rule and take the header's
	 * ink. Naming a colour here made the button the one item obeying it, and it
	 * sat a shade lighter than everything beside it.
	 */
	color: inherit;
	font-size: 0.84375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/*
 * ⚠️ The button keeps its padding. The gap before the chevron is the button's
 * own padding-right minus the -0.6em core pulls the icon back by; zero the
 * padding to line the label up with its neighbours and the chevron lands on
 * top of the final letter.
 */

.alta-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 8px;
	padding: 9px 12px;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Hover was background-warm — the beige band from the home page, which on a
 * white panel read as a highlighter stripe. The site answers a hover on a quiet
 * surface everywhere else with the blue tint and brand ink; so does this.
 */
.alta-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.alta-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--custom--tint--blue-100);
	color: var(--wp--preset--color--brand);
}

/*
 * 🔴 Core animates the submenu open with `animation-fill-mode: forwards`,
 * which pins the final frame and outranks any transition this theme sets on
 * the same properties — the same trap the mobile flyout hit.
 */
.alta-nav :where(.wp-block-navigation__submenu-container) {
	animation: none;
}

@media (max-width: 999px) {
	/*
	 * 999px, not 899px — the sheet, the hamburger and every other rule that
	 * governs this nav are on 999px, and a submenu on its own breakpoint left a
	 * 100px band where the sheet was open and the submenu was still a floating
	 * panel inside it.
	 *
	 * Inside the mobile sheet the submenu is not a floating panel — it is an
	 * indented group in the list, so every rule that made it one comes off.
	 */
	.alta-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0 0 0 14px;
		min-width: 0;
	}
}