/**
 * Mainsail Valuation — three-step home valuation wizard.
 *
 * Visual pass 2: full-page Equinox-style hero (gradient overlay, progress
 * tracker on the image itself), black/white buttons (theme accent
 * deliberately overridden per explicit request — see the note above the
 * button rules below), larger on-image progress icons, and a redesigned
 * #f2f2f2 success card. No bare element selectors outside this file's own
 * `.mainsail-valuation` scope — this file also styles a Contact Form 7
 * form, and two OTHER unrelated CF7 forms exist sitewide that must not be
 * affected.
 */

.mainsail-valuation {
	--mainsail-valuation-transition: 0.2s ease;
	/* Full-bleed breakout: Kadence's Customizer "Content Vertical/Horizontal
	   Spacing" setting (Layout → Content Style) puts 24px of padding on
	   .entry-content-wrap on every page — that's the gutter this cancels.
	   It's a sitewide setting, so rather than changing it globally (would
	   affect every other page) this is scoped to just this section: the
	   standard "break out of a centered, padded parent" trick for the
	   sides (width:auto + negative margins sized from the viewport), and
	   matching negative vertical margins to cancel the same padding
	   top/bottom without touching Kadence's (locked) files or the
	   Customizer setting itself. */
	width: auto;
	/* Kadence pads .entry-content-wrap 2rem (32px) on desktop/tablet and 1.5rem
	   (24px) at <=767px — a flat -24px left an 8px white strip above and below
	   the hero on desktop. Match each breakpoint exactly. */
	margin: -2rem calc(50% - 50vw);
}

@media (max-width: 767px) {
	.mainsail-valuation {
		margin-top: -1.5rem;
		margin-bottom: -1.5rem;
	}
}

/* ----------------------------------------------------------------------
   Hero (§5/§30) — full page, gradient overlay, everything (including
   Step 1/2's own buttons) sits inside this image, not a separate section
   below it. padding-top leaves room for a transparent/overlay header.
   ---------------------------------------------------------------------- */

.mainsail-valuation__hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(32px, 5vw, 56px);
	min-height: 100vh;
	padding: clamp(120px, 14vw, 170px) 20px clamp(40px, 5vw, 64px);
	background: var(--mainsail-valuation-hero-image) center center / cover no-repeat, #222222;
	box-sizing: border-box;
}

.mainsail-valuation__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Flat, uniform black tint (not a top-to-bottom gradient) per direct
	   request. */
	background: rgba(0, 0, 0, 0.6);
}

.mainsail-valuation__inner {
	position: relative;
	/* Higher than .mainsail-valuation__progress's z-index (1) — they're
	   sibling stacking contexts inside .hero, and .progress comes later
	   in the DOM, so at equal z-index it was painting on top and
	   covering the address-suggestions dropdown that lives inside
	   .inner. */
	z-index: 2;
	max-width: 880px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

.mainsail-valuation__heading {
	margin: 0;
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-size: clamp(28px, 3.6vw, 48px);
	font-weight: 400;
	line-height: 1.15;
	text-transform: capitalize;
	color: #ffffff;
}

.mainsail-valuation__heading:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

.mainsail-valuation__subtext {
	margin: max(1.25vw, 14px) 0 0;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: max(0.95vw, 15px);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
}

/* ----------------------------------------------------------------------
   Step 1 — address field (LOCKED layout, as of the feedback round that
   settled it): ONE capsule-shaped bar (icon + single address input +
   Next button), not a two-column street/city-state-zip split. Bar
   height 60px (1.5x the original ~40px), fully rounded pill on both
   ends — left side matches the Next button's own right-side radius.
   This design is final — don't restyle it without a direct request.
   ---------------------------------------------------------------------- */

.mainsail-valuation__address-field {
	position: relative;
	display: flex;
	align-items: stretch;
	margin-top: max(2vw, 24px);
	background: #ffffff;
	border-radius: 999px;
}

.mainsail-valuation__address-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	width: 22px;
	margin-left: 24px;
	color: #000000;
}

.mainsail-valuation__address-icon svg {
	width: 100%;
	height: 22px;
}

/* Extra parent-scoped specificity: Kadence's own global.min.css has
   `input[type="text"], ...{padding:0.4em 0.5em}`, which is MORE specific
   than a bare `.mainsail-valuation__address-input` class selector (an
   attribute selector counts the same as a class, plus the bare `input`
   element adds one more) — without this it silently won regardless of
   load order, and the bar rendered ~5px tall instead of the intended
   60px, since Kadence's own file loads first anyway. */
.mainsail-valuation__address-field .mainsail-valuation__address-input {
	flex: 1 1 0;
	min-width: 0;
	height: 60px;
	border: none;
	outline: none;
	padding: 0 18px;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 15px;
	color: #000000;
	background: transparent;
	box-sizing: border-box;
}

.mainsail-valuation__address-input:focus-visible {
	outline: 2px solid #000000;
	outline-offset: -2px;
}

.mainsail-valuation__address-suggestions {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 6px;
	background: #ffffff;
	border-radius: 18px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	max-height: 240px;
	overflow-y: auto;
	overflow-x: hidden;
	text-align: left;
}

.mainsail-valuation__address-suggestion {
	display: block;
	width: 100%;
	padding: 12px 20px;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background: transparent;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 13px;
	line-height: 1.4;
	color: #000000;
	text-align: left;
	cursor: pointer;
}

.mainsail-valuation__address-suggestion:last-child {
	border-bottom: none;
}

/* Only the hovered/focused row gets the black background — not the
   whole list — per direct request. The list itself stays light so it's
   readable against the dark hero image behind it. */
.mainsail-valuation__address-suggestion:hover,
.mainsail-valuation__address-suggestion:focus-visible {
	background: #000000;
	color: #ffffff;
}

.mainsail-valuation__error {
	margin: 10px 0 0;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.95);
	color: #b3261e;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 13px;
	text-align: left;
}

/* ----------------------------------------------------------------------
   Buttons — NEXT / Submit / Explore Properties
   §6 requires inheriting the theme accent for these — explicitly
   overridden here per direct request ("theme accent would override,
   either we can use black colour on button"): every button below uses
   black/white instead of the cyan accent, following the exact same
   bordered → solid-on-hover pattern already established sitewide
   (.site-button etc.), just with the accent swapped for black. Two
   variants: "on-image" buttons (Steps 1–2, sitting on the dark hero
   photo) are white-on-transparent, solid white on hover; the Step 3
   button sits on the light #f2f2f2 success card, so it's the inverse —
   black-on-transparent, solid black on hover.
   ---------------------------------------------------------------------- */

.mainsail-valuation__next {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 50px = 1.25x the original 40px, per direct request. */
	padding: 0 50px;
	border: none;
	background: #000000;
	color: #ffffff;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Rounds only the right corners so the button's black background follows
   the address-field pill's own shape (see the field's border-radius
   above) without needing overflow:hidden on the field. */
.mainsail-valuation__next--bar {
	border-radius: 0 999px 999px 0;
}

/* No hover/focus color flip here (unlike the other buttons below) — kept
   black bg / white text in both states per direct request. This has to
   be stated explicitly (not just omitted) or Kadence's own global button
   hover style (the theme accent color) shows through instead. */
.mainsail-valuation__next:hover,
.mainsail-valuation__next:focus-visible {
	background: #000000;
	color: #ffffff;
}

.mainsail-valuation .wpcf7-form-control.wpcf7-submit {
	display: block;
	width: 100%;
	margin-top: max(1.5vw, 18px);
	padding: 16px 40px;
	border: 1px solid #ffffff;
	background: transparent;
	color: #ffffff;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color var(--mainsail-valuation-transition), color var(--mainsail-valuation-transition);
}

.mainsail-valuation .wpcf7-form-control.wpcf7-submit:hover,
.mainsail-valuation .wpcf7-form-control.wpcf7-submit:focus-visible {
	background: #000000;
	color: #ffffff;
}

.mainsail-valuation__next:disabled,
.mainsail-valuation .wpcf7-form-control.wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-valuation .wpcf7-form-control.wpcf7-submit {
		transition: none;
	}
}

@media (max-width: 700px) {
	.mainsail-valuation__address-icon {
		margin-left: 18px;
	}

	.mainsail-valuation__address-field .mainsail-valuation__address-input {
		height: 52px;
		padding: 0 12px;
		font-size: 14px;
	}

	.mainsail-valuation__next--bar {
		padding: 0 25px;
		font-size: 12px;
	}
}

/* ----------------------------------------------------------------------
   Step 2 — CF7 form fields (§8/§9/§10/§31) (LOCKED layout, as of the
   feedback round that settled the 4-column grid, field sizing, textarea
   height, checkbox alignment, and validation styling below). This
   design is final — don't restyle it without a direct request.
   ---------------------------------------------------------------------- */

.mainsail-valuation__step--2 .wpcf7-form {
	text-align: left;
}

.mainsail-valuation__step--2 .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 14px;
}

/* :where(), not :not() twice — :where()'s argument contributes ZERO
   specificity, so this stays at (0,2,0) instead of (0,4,0). That
   mattered concretely: with :not() this rule out-specified the
   .is-placeholder rule below it (same technique already had to fix the
   Step 1 address-bar height for the same underlying reason), forcing
   the select's placeholder color back to black despite the class being
   correctly applied by JS. */
.mainsail-valuation__step--2 .wpcf7-form-control:where(:not(.wpcf7-acceptance):not(.wpcf7-submit)) {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: #ffffff;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 14px;
	font-weight: 400;
	color: #000000;
	box-sizing: border-box;
}

.mainsail-valuation__step--2 .wpcf7-form-control::placeholder {
	color: rgba(0, 0, 0, 0.45);
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-weight: 400;
}

.mainsail-valuation__step--2 select.wpcf7-form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}

/* A required <select>'s own placeholder option ("Property Type", etc.)
   gets the same muted color as every other field's ::placeholder, since
   native <select> has no ::placeholder pseudo. `:invalid` doesn't work
   here — CF7's [select* ... "Label" "Option A" ...] tag makes that first
   label a real, valid, selectable option (not an empty one) — so
   mainsail-valuation.js toggles this class on selectedIndex instead. */
.mainsail-valuation__step--2 select.wpcf7-form-control.is-placeholder {
	color: rgba(0, 0, 0, 0.45);
}

/* ~3 visible lines (14px font, 1.5 line-height = 21px/line) plus the
   field's own 14px top/bottom padding, per direct request. CF7's own
   textarea tag defaults to rows="10", which sets the browser's intrinsic
   height for the element — min-height alone is only a floor and can't
   override that, so it still rendered ~10 lines tall despite min-height
   being set to ~3 lines' worth. An explicit height (not just min-height)
   is what actually caps it; resize:vertical still lets a visitor drag
   it taller by hand. */
.mainsail-valuation__step--2 textarea.wpcf7-form-control {
	height: 91px;
	min-height: 91px;
	line-height: 1.5;
	resize: vertical;
}

.mainsail-valuation__step--2 .wpcf7-form-control:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 1px;
}

.mainsail-valuation__step--2 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 12px;
	color: #ffb4a8;
}

.mainsail-valuation__step--2 .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 13px;
}

/* Consent checkbox row — was misaligned because the checkbox <input> and
   the `.wpcf7-list-item-label` text are SIBLINGS inside CF7's own
   <label> (input, then the label span) — flexing `.wpcf7-list-item-label`
   alone only affected the text span, not its relationship to the
   checkbox next to it, so the fix has to go on that shared <label>
   parent instead. */
.mainsail-valuation__step--2 .wpcf7-acceptance {
	display: block;
	margin-bottom: 14px;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 13px;
	line-height: 1.6;
	color: #ffffff;
}

.mainsail-valuation__step--2 .wpcf7-list-item {
	margin: 0;
}

.mainsail-valuation__step--2 .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mainsail-valuation__step--2 input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #000000;
	flex-shrink: 0;
}

/* 4-column grid so bedrooms/bathrooms (short selects) can be sized at
   25% each instead of the full 50% every other field gets — the DOM
   order lines up so each row fills exactly: name+email (50/50),
   phone+timeframe (50/50), property-type+condition (50/50),
   bedrooms+bathrooms+square-feet (25/25/50), upgrades+comments (50/50),
   then acceptance/submit full-width. */
@media (min-width: 768px) {
	.mainsail-valuation__step--2 .wpcf7-form {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0 16px;
	}

	.mainsail-valuation__step--2 .wpcf7-form > p:has(input[name="valuation-name"]),
	.mainsail-valuation__step--2 .wpcf7-form > p:has(input[name="valuation-email"]),
	.mainsail-valuation__step--2 .wpcf7-form > p:has(input[name="valuation-phone"]),
	.mainsail-valuation__step--2 .wpcf7-form > p:has(select[name="valuation-selling-timeframe"]),
	.mainsail-valuation__step--2 .wpcf7-form > p:has(select[name="valuation-property-type"]),
	.mainsail-valuation__step--2 .wpcf7-form > p:has(select[name="valuation-condition"]),
	.mainsail-valuation__step--2 .wpcf7-form > p:has(input[name="valuation-square-feet"]),
	.mainsail-valuation__step--2 .wpcf7-form > p:has(textarea) {
		grid-column: span 2;
	}

	.mainsail-valuation__step--2 .wpcf7-form > p:has(select[name="valuation-bedrooms"]),
	.mainsail-valuation__step--2 .wpcf7-form > p:has(select[name="valuation-bathrooms"]) {
		grid-column: span 1;
	}

	.mainsail-valuation__step--2 .wpcf7-form > p:has(.wpcf7-acceptance),
	.mainsail-valuation__step--2 .wpcf7-form > p:has(.wpcf7-submit) {
		grid-column: 1 / -1;
	}
}

/* ----------------------------------------------------------------------
   Progress tracker (§7) — lives ON the hero image itself (transparent,
   white-bordered/white-icon circles), not in a separate white bar below
   it, matching the Equinox reference. Icons enlarged (20px -> 35px) and
   circles enlarged proportionally (44px -> ~78px, ~1.8x) per explicit
   request. current/complete states use a solid white fill + black icon
   (no separate colored square badge — that "blue square" artifact from
   the previous pass is removed entirely, not just recolored).
   ---------------------------------------------------------------------- */

.mainsail-valuation__progress {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(10px, 2vw, 22px);
	margin: 0 auto;
	max-width: 720px;
}

.mainsail-valuation__progress-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	width: 180px;
}

.mainsail-valuation__progress-arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	width: 32px;
	height: 78px;
	color: #ffffff;
}

.mainsail-valuation__progress-arrow svg {
	width: 100%;
	height: 12px;
}

.mainsail-valuation__progress-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	color: #ffffff;
	background: transparent;
	transition: background-color var(--mainsail-valuation-transition), color var(--mainsail-valuation-transition);
}

.mainsail-valuation__progress-icon svg {
	width: 35px;
	height: 35px;
}

.mainsail-valuation__progress-item.is-current .mainsail-valuation__progress-icon,
.mainsail-valuation__progress-item.is-complete .mainsail-valuation__progress-icon {
	background: #ffffff;
	color: #000000;
}

/* Sized up (12px -> 20px, ~1.7x) per direct request. */
.mainsail-valuation__progress-label {
	display: flex;
	flex-direction: column;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #ffffff;
}

/* Both label words (e.g. "Property" / "Address") always stack on their
   own line — a <br> in the markup, not width-dependent wrapping, so all
   three labels match instead of only the longest one wrapping. */
.mainsail-valuation__progress-label-line {
	display: block;
}

.mainsail-valuation__progress-label small {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.15em;
	color: rgba(255, 255, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-valuation__progress-icon {
		transition: none;
	}
}

@media (max-width: 700px) {
	.mainsail-valuation__progress {
		gap: 6px;
	}

	/* Fixed width, not flex-grow: .progress has margin:0 auto inside a
	   flex-direction:column parent (.hero), which sizes it by shrink-to-
	   fit rather than stretching it to the hero's full width — with
	   flex-grow items that made each item's available width unreliable
	   (narrower than "Valuation" needed, forcing a mid-word break). A
	   fixed width per item is deterministic regardless of that. */
	.mainsail-valuation__progress-item {
		width: 100px;
		flex: 0 0 auto;
	}

	.mainsail-valuation__progress-icon {
		width: 56px;
		height: 56px;
	}

	.mainsail-valuation__progress-icon svg {
		width: 26px;
		height: 26px;
	}

	.mainsail-valuation__progress-arrow {
		width: 18px;
		height: 56px;
	}

	.mainsail-valuation__progress-label {
		font-size: 14px;
	}

	.mainsail-valuation__progress-label small {
		display: none;
	}
}

/* ----------------------------------------------------------------------
   Step 3 — success screen (§17-21, LOCKED layout, as of the feedback
   round that settled the reduced padding, vertical-centered message
   column, address text size/color, and Explore Properties button
   sizing below) — light #f2f2f2 card. .success is a direct child of
   .hero (see valuation.php), alongside .inner and .progress — it sits
   on hero's own single background image + overlay rather than carrying
   a second, independent copy of the photo (which would crop/align
   differently from hero's, creating a visible seam where the two met).
   This design is final — don't restyle it without a direct request.
   ---------------------------------------------------------------------- */

.mainsail-valuation__success {
	position: relative;
	z-index: 1;
	/* Reduced 40% from the original clamp(60px,8vw,100px) 20px. */
	padding: clamp(36px, 4.8vw, 60px) 12px;
}

.mainsail-valuation__success-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: max(3vw, 32px);
	max-width: 900px;
	margin: 0 auto;
	padding: max(3vw, 40px);
	background: #f2f2f2;
	text-align: left;
}

.mainsail-valuation__success-agent {
	display: flex;
	flex-direction: column;
}

.mainsail-valuation__success-message {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mainsail-valuation__success-photo {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.mainsail-valuation__success-agent-name {
	margin: 0;
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-size: 20px;
	font-weight: 400;
	text-transform: capitalize;
	color: #000000;
}

.mainsail-valuation__success-agent-title {
	margin: 4px 0 0;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.6);
}

.mainsail-valuation__success-message h2 {
	margin: max(1.5vw, 20px) 0 0;
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-size: max(1.8vw, 26px);
	font-weight: 400;
	text-transform: capitalize;
	color: #000000;
}

/* No focus outline here — JS calls this heading's .focus() on every step
   transition purely for screen-reader announcement, not keyboard
   navigation, but some mobile browsers render a focus ring for a
   programmatic focus() too, showing a boxy border around "Thank You!"
   that read as a stray design element rather than a focus ring. Explicit
   outline:none (not just omitting a rule) is needed to suppress the
   browser's own default focus ring, not just our old override of it. */
.mainsail-valuation__success-message h2:focus-visible {
	outline: none;
}

.mainsail-valuation__success-message p {
	margin: 14px 0 0;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 15px;
	line-height: 1.8;
	color: #333333;
}

/* Extra specificity (parent class + this class, rather than !important)
   to win over the generic ".mainsail-valuation__success-message p" rule
   above for this one paragraph. */
.mainsail-valuation__success-message .mainsail-valuation__success-address {
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-style: italic;
	/* 34px reduced 20% -> 27px. line-height tightened too (was inheriting
	   1.8 from the generic .success-message p rule, too loose at this
	   size). */
	font-size: 27px;
	line-height: 1.2;
	color: #666666;
}

.mainsail-valuation__success-address:empty {
	display: none;
}

.mainsail-valuation__explore-link {
	display: inline-block;
	/* .success-message is a flex column (for vertical centering); flex's
	   default align-items:stretch was silently forcing this previously
	   natural-width inline-block to stretch to the column's full width.
	   align-self overrides just this one child back to its own content
	   width, without touching the heading/paragraph siblings, which
	   still need the full stretched width to wrap normally. */
	align-self: flex-start;
	margin-top: max(1.5vw, 24px);
	padding: 16px 32px;
	border: 1px solid #000000;
	background: transparent;
	color: #000000;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--mainsail-valuation-transition), color var(--mainsail-valuation-transition);
}

.mainsail-valuation__explore-link:hover,
.mainsail-valuation__explore-link:focus-visible {
	background: #000000;
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-valuation__explore-link {
		transition: none;
	}
}

@media (max-width: 767px) {
	.mainsail-valuation__success-inner {
		grid-template-columns: 1fr;
		padding: 28px;
	}

	.mainsail-valuation__success-photo {
		aspect-ratio: 4 / 3;
		/* The shorter mobile aspect ratio crops more vertically than
		   desktop's — default center-center cropping was cutting off the
		   top of the agent's head/face, so anchor the crop to the top
		   instead. */
		object-position: center top;
	}

	/* Full-width CTA on mobile (unlike desktop's natural content width),
	   with its text centered rather than sitting at the box's left edge. */
	.mainsail-valuation__explore-link {
		align-self: stretch;
		width: 100%;
		box-sizing: border-box;
	}
}

@media (max-width: 480px) {
	.mainsail-valuation__hero {
		padding-left: 16px;
		padding-right: 16px;
	}
}