/* ==========================================================================
   Safe & Cozy — page sections
   Header, hero, the three content bands, the CTA and the footer. Anything
   that is page chrome rather than a repeatable component lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.sc-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--sc-hero-min, clamp(368px, 288px + 13vw, 416px));
	padding-top: var(--sc-pad-top, clamp(36px, 22.4px + 3.4vw, 56px));
	padding-bottom: var(--sc-pad-bottom, clamp(17.6px, 1vw, 25.6px));
	background: var(--sc-cream);
}

.sc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Clip here, not on .sc-hero — the hero has to let the search bar's
	   date and guest popovers hang below its bottom edge. */
	overflow: hidden;
}

.sc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--sc-hero-focus, 62% 50%);
}

/* The white wash that lets the headline sit on the photo, as in the comp. */
.sc-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
			97deg,
			rgb(255 255 255 / 100%) 0%,
			rgb(255 255 255 / 96%) 22%,
			rgb(255 255 255 / 76%) 38%,
			rgb(255 255 255 / 28%) 52%,
			rgb(255 255 255 / 0%) 63%
		),
		/* Softens the photo's top edge into the white header above it. */
			linear-gradient(
				180deg,
				rgb(255 255 255 / 34%) 0%,
				rgb(255 255 255 / 0%) 20%
			);
}

.sc-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: clamp(32px, 16px + 4vw, 60px);
}

.sc-hero__copy {
	align-self: flex-start;
	max-width: var(--sc-hero-copy, 512px);
}

.sc-hero__copy p {
	margin-top: var(--sc-space-5);
	color: var(--sc-ink);
	font-size: var(--sc-fs-lead);
	max-width: min(100%, 480px);
}

@media (max-width: 991px) {
	.sc-hero {
		align-items: stretch;
		min-height: 0;
	}

	.sc-hero__media img {
		object-position: var(--sc-hero-focus, 66% 50%);
	}

	.sc-hero__scrim {
		background: linear-gradient(
			180deg,
			rgb(255 255 255 / 96%) 0%,
			rgb(255 255 255 / 88%) 42%,
			rgb(255 255 255 / 82%) 100%
		);
	}

	.sc-hero__copy {
		align-self: stretch;
		max-width: 544px;
	}

	.sc-hero__copy p {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   What We Offer
   -------------------------------------------------------------------------- */

.sc-section--offer {
	--sc-cols-d: 4;
	--sc-cols-t: 2;
	--sc-slides-m: 1.15;
	--sc-media-ratio: 17 / 10;
}

/* Leave room for the card shadow inside the carousel's scroll box. */
@media (max-width: 640px) {
	.sc-section--offer .sc-cardgrid[data-sc-mobile="carousel"] {
		padding-block: var(--sc-space-2);
	}
}

/* --------------------------------------------------------------------------
   Built for Guests, Hosts, and Outdoor Brands
   -------------------------------------------------------------------------- */

.sc-section--built {
	--sc-cols-d: 3;
	--sc-cols-t: 1;
	--sc-grid-gap: clamp(24px, 8px + 3vw, 48px);

	padding-top: 0;
}

/* Pin the photo to the bottom so images line up across uneven copy. */
.sc-section--built .sc-card__media {
	margin-top: auto;
}

.sc-section--built .sc-card__text {
	font-size: var(--sc-fs-xs);
}

@media (max-width: 991px) {
	.sc-section--built .sc-cardgrid {
		--sc-grid-gap: var(--sc-space-10);
	}
}

/* --------------------------------------------------------------------------
   Why Safe & Cozy
   -------------------------------------------------------------------------- */

/* Reusable band. In WordPress this goes in a WPBakery row's "Extra class"
   field, which is how the Why Safe & Cozy section gets its backdrop. */
.sc-band--cream {
	position: relative;
	background: var(--sc-cream);
}

.sc-band--cream::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url("../img/topo.svg") repeat;
	background-size: 1040px auto;
	opacity: 0.22;
	pointer-events: none;
}

.sc-band--cream > * {
	position: relative;
	z-index: 1;
}

.sc-section--why {
	--sc-cols-d: 4;
	--sc-cols-t: 2;
	--sc-icon-size: 56px;
	--sc-grid-gap: clamp(20px, 6.4px + 2.4vw, 36px);

	position: relative;
	background: var(--sc-cream);
}

/* Faint topographic contours, as in the comp. */
.sc-section--why::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url("../img/topo.svg") repeat;
	background-size: 1040px auto;
	opacity: 0.22;
}

.sc-section--why > .sc-container {
	position: relative;
	z-index: 1;
}

.sc-section--why .sc-card__title {
	font-size: var(--sc-fs-sm);
}

.sc-section--why .sc-card__text {
	font-size: var(--sc-fs-xs);
}

.sc-section--why .sc-card__head {
	align-items: center;
	gap: var(--sc-space-4);
}

.sc-section--why .sc-card__body {
	gap: var(--sc-space-1);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.sc-cta {
	position: relative;
	overflow: hidden;
	background: var(--sc-cta-bg, var(--sc-green-800));
	color: var(--sc-on-dark);
}

.sc-cta__media {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: 0;
	width: var(--sc-cta-media, 64%);
}

.sc-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Green wash fading left-to-right across the photo. */
.sc-cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--sc-green-800) 0%,
		rgb(29 70 48 / 88%) 26%,
		rgb(29 70 48 / 30%) 58%,
		rgb(29 70 48 / 8%) 100%
	);
	background: linear-gradient(
		90deg,
		var(--sc-cta-bg, var(--sc-green-800)) 0%,
		color-mix(in srgb, var(--sc-cta-bg, var(--sc-green-800)) 88%, transparent) 26%,
		color-mix(in srgb, var(--sc-cta-bg, var(--sc-green-800)) 30%, transparent) 58%,
		color-mix(in srgb, var(--sc-cta-bg, var(--sc-green-800)) 8%, transparent) 100%
	);
}

.sc-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(24px, 8px + 4vw, 64px);
	padding-top: var(--sc-pad-top, clamp(28px, 19.2px + 1.8vw, 38px));
	padding-bottom: var(--sc-pad-bottom, clamp(28px, 19.2px + 1.8vw, 38px));
}

.sc-cta__copy {
	max-width: 500px;
}

.sc-cta h2 {
	color: var(--sc-on-dark);
}

.sc-cta p {
	margin-top: var(--sc-space-4);
	max-width: 410px;
	color: var(--sc-on-dark-soft);
	font-size: var(--sc-fs-sm);
}

@media (max-width: 767px) {
	.sc-cta__media {
		width: 100%;
	}

	.sc-cta__media::after {
		background: linear-gradient(
			180deg,
			rgb(29 70 48 / 86%) 0%,
			rgb(29 70 48 / 94%) 100%
		);
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--sc-cta-bg, var(--sc-green-800)) 86%, transparent) 0%,
			color-mix(in srgb, var(--sc-cta-bg, var(--sc-green-800)) 94%, transparent) 100%
		);
	}

	.sc-cta__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sc-space-6);
	}
}

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

.sc-footer {
	background: var(--sc-green-800);
	color: var(--sc-on-dark);
}

.sc-footer__top {
	display: grid;
	grid-template-columns: 1.5fr repeat(5, 1fr) 1.4fr;
	gap: var(--sc-space-6);
	padding-block: clamp(14px, 11.2px + 0.8vw, 18px);
	border-top: 1px solid var(--sc-on-dark-line);
}

.sc-footer__brand svg {
	width: 98px;
	height: 66px;
	color: var(--sc-on-dark);
}

.sc-footer__brand span {
	display: block;
	margin-top: var(--sc-space-2);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.sc-footer__col h2 {
	margin-bottom: 6px;
	color: var(--sc-on-dark);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.sc-footer__col li + li {
	margin-top: 4px;
}

.sc-footer__col a {
	color: var(--sc-on-dark-soft);
	font-size: 13px;
	line-height: 1.35;
}

.sc-footer__col a:hover {
	color: var(--sc-on-dark);
}

.sc-social {
	display: flex;
	gap: var(--sc-space-3);
	margin-bottom: var(--sc-space-3);
}

.sc-social a {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: var(--sc-on-dark);
	transition: opacity var(--sc-dur) var(--sc-ease);
}

.sc-social a:hover {
	opacity: 0.72;
}

.sc-social svg {
	width: 26px;
	height: 26px;
}

.sc-footer__note {
	color: var(--sc-on-dark-soft);
	font-size: 13px;
	line-height: 1.4;
}

.sc-footer__bottom {
	display: flex;
	align-items: center;
	gap: var(--sc-space-6);
	padding-block: var(--sc-space-3);
	border-top: 1px solid var(--sc-on-dark-line);
	color: var(--sc-on-dark-soft);
	font-size: var(--sc-fs-xs);
}

.sc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-6);
	margin-inline: auto;
}

.sc-footer__legal a:hover {
	color: var(--sc-on-dark);
}

.sc-footer__lang {
	display: flex;
	align-items: center;
	gap: var(--sc-space-1);
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sc-on-dark-soft);
	font-size: var(--sc-fs-xs);
	font-weight: 700;
	cursor: pointer;
}

.sc-footer__lang svg:first-child {
	width: 16px;
	height: 16px;
}

.sc-footer__lang .sc-lang__caret {
	width: 11px;
	height: 11px;
}

@media (max-width: 991px) {
	.sc-footer__top {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sc-space-8) var(--sc-space-6);
	}

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

@media (max-width: 575px) {
	.sc-footer__top {
		grid-template-columns: repeat(2, 1fr);
	}

	.sc-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sc-space-4);
	}

	.sc-footer__legal {
		gap: var(--sc-space-4);
		margin-inline: 0;
	}
}

/* --------------------------------------------------------------------------
   Element overrides — hero, CTA and heading
   -------------------------------------------------------------------------- */

/* Fixed aspect ratio instead of a minimum height. */
.sc-hero--ratio {
	aspect-ratio: var(--sc-hero-ratio, 16 / 9);
	min-height: 0;
}

.sc-hero--center .sc-hero__copy,
.sc-hero--right .sc-hero__copy {
	align-self: center;
	max-width: 672px;
}

.sc-hero--center {
	text-align: center;
}

.sc-hero--center .sc-hero__copy p {
	margin-inline: auto;
}

.sc-hero--right .sc-hero__copy {
	align-self: flex-end;
	text-align: right;
}

/* Overlay strength, 0-1, from the element. */
.sc-hero__scrim {
	opacity: var(--sc-hero-overlay, 1);
}

.sc-hero h1 {
	font-family: var(--sc-font);
	font-size: var(--sc-title-size, var(--sc-fs-h1));
	font-weight: var(--sc-title-weight, 800);
	color: var(--sc-title-color, var(--sc-green-900));
}

.sc-hero__copy p {
	font-size: var(--sc-text-size, var(--sc-fs-lead));
	color: var(--sc-text-color, var(--sc-ink));
	line-height: var(--sc-line-height, var(--sc-lh-body));
}

.sc-cta h2,
.sc-heading h1,
.sc-heading h2,
.sc-heading h3 {
	font-family: var(--sc-font);
	font-size: var(--sc-title-size, var(--sc-fs-h2));
	font-weight: var(--sc-title-weight, 800);
}

.sc-cta h2 {
	color: var(--sc-title-color, var(--sc-on-dark));
}

.sc-heading h1,
.sc-heading h2,
.sc-heading h3 {
	color: var(--sc-title-color, var(--sc-green-900));
}

.sc-cta p {
	font-size: var(--sc-text-size, var(--sc-fs-sm));
	color: var(--sc-text-color, var(--sc-on-dark-soft));
	line-height: var(--sc-line-height, var(--sc-lh-body));
}

.sc-heading {
	padding-top: var(--sc-pad-top, 0);
	padding-bottom: var(--sc-pad-bottom, 0);
}

/* --------------------------------------------------------------------------
   Stacked media on small screens

   Instead of the copy sitting over the photo, the photo takes the top of the
   section and fades into the background the copy sits on. Easier to read on a
   phone, and it keeps the photo uncropped.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sc-hero--stack {
		display: block;
		min-height: 0;
		padding-top: 0;
	}

	.sc-hero--stack .sc-hero__media {
		position: relative;
		height: var(--sc-media-h, 260px);
	}

	/* The overlay wash is for text sitting on the photo; there is none here. */
	.sc-hero--stack .sc-hero__scrim {
		display: none;
	}

	.sc-hero--stack .sc-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			var(--sc-fade-angle, to bottom),
			transparent var(--sc-fade-start, 45%),
			var(--sc-fade-color, var(--sc-cream)) 100%
		);
	}

	.sc-hero--stack .sc-hero__inner {
		padding-top: 24px;
	}

	.sc-cta--stack .sc-cta__media {
		position: relative;
		inset: auto;
		width: 100%;
		height: var(--sc-media-h, 240px);
	}

	.sc-cta--stack .sc-cta__media::after {
		background: linear-gradient(
			var(--sc-fade-angle, to bottom),
			transparent var(--sc-fade-start, 40%),
			var(--sc-fade-color, var(--sc-cta-bg, var(--sc-green-800))) 100%
		);
	}

	.sc-cta--stack .sc-cta__inner {
		padding-top: 24px;
	}
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.sc-breadcrumb {
	align-self: flex-start;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sc-space-2);
	margin-bottom: var(--sc-space-5);
	color: var(--sc-muted);
	font-size: var(--sc-fs-xs);
}

/* Flex items are blockified, so without this the icon sits above its label. */
.sc-breadcrumb a,
.sc-breadcrumb [aria-current="page"] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sc-breadcrumb a {
	color: var(--sc-muted);
}

.sc-breadcrumb a:hover {
	color: var(--sc-green-900);
}

.sc-breadcrumb svg {
	width: 15px;
	height: 15px;
}

.sc-breadcrumb__sep {
	opacity: 0.55;
}

.sc-breadcrumb [aria-current="page"] {
	color: var(--sc-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Inset CTA band

   The RV Rentals page puts the band inside the container as a rounded card
   rather than running it edge to edge.
   -------------------------------------------------------------------------- */

.sc-cta--inset {
	margin-bottom: var(--sc-section-y);
	border-radius: var(--sc-cta-radius, var(--sc-radius-xl));
	overflow: hidden;
}

/* Faint topographic texture on the dark band. */
.sc-cta--pattern .sc-cta__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/topo.svg") repeat;
	background-size: 620px auto;
	opacity: 0.16;
	pointer-events: none;
}

.sc-cta--pattern .sc-cta__inner {
	position: relative;
	isolation: isolate;
}

/* --------------------------------------------------------------------------
   Header — current page
   -------------------------------------------------------------------------- */

.sc-nav__list a.is-current {
	color: var(--sc-green-900);
	font-weight: 700;
	box-shadow: inset 0 -2px 0 var(--sc-green-900);
}

@media (max-width: 1099px) {
	.sc-nav__list a.is-current {
		box-shadow: none;
	}
}

/* --------------------------------------------------------------------------
   Footer — brand column with tagline and socials
   -------------------------------------------------------------------------- */

.sc-footer__brand p {
	margin-top: var(--sc-space-3);
	color: var(--sc-on-dark-soft);
	font-size: 13px;
	line-height: 1.45;
}

.sc-footer__brand .sc-social {
	margin-top: var(--sc-space-4);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hero — button instead of a search bar, and the trust strip
   -------------------------------------------------------------------------- */

.sc-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sc-space-5);
	align-self: flex-start;
	margin-top: var(--sc-space-6);
}

.sc-hero__note {
	color: var(--sc-body);
	font-size: var(--sc-fs-sm);
	font-weight: 600;
}

.sc-hero__trust {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sc-space-6);
	align-self: flex-start;
	margin-top: var(--sc-space-6);
}

.sc-hero__trust li {
	display: flex;
	align-items: center;
	gap: var(--sc-space-3);
	color: var(--sc-green-900);
	font-size: var(--sc-fs-xs);
	font-weight: 600;
	line-height: 1.3;
}

.sc-hero__trust li + li {
	padding-left: var(--sc-space-6);
	border-left: 1px solid var(--sc-line);
}

.sc-hero__trust svg {
	width: 24px;
	height: 24px;
	flex: none;
	color: var(--sc-green-900);
}

/* Each reassurance wraps to two short lines, as in the design. */
.sc-hero__trust span {
	max-width: 9.5em;
}

@media (max-width: 640px) {
	.sc-hero__trust {
		gap: var(--sc-space-3);
	}

	.sc-hero__trust li + li {
		padding-left: 0;
		border-left: 0;
	}
}


/* --------------------------------------------------------------------------
   CTA band — stacked variant

   The Add-Ons band puts the button under the headline instead of beside it.
   -------------------------------------------------------------------------- */

.sc-cta--stacked .sc-cta__inner {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sc-space-6);
}

.sc-cta--stacked .sc-cta__copy {
	max-width: 620px;
}

/* --------------------------------------------------------------------------
   Row spacing

   The theme puts 80px under every WPBakery row (style.css, `.wpb_row`). Our
   sections carry their own spacing, so a row holding one of them does not
   need it — without this, one row left at the default opens a gap the rest
   of the page does not have. A margin set in the row's Design Options still
   wins.
   -------------------------------------------------------------------------- */

.sc-page .wpb_row:has(.sc-cardgrid-block, .sc-steps-block, .sc-plans-block, .sc-note, .sc-hero, .sc-cta, .sc-section-head) {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hero — second button, arrowed button, ticked list, signup box

   Loyalty puts an outlined button beside the first; Mobile Mechanics lists
   its promises down the left of a service request bar; Newsletters sets a
   signup box beside the headline.
   -------------------------------------------------------------------------- */

.sc-hero__actions:has(.sc-btn--outline) {
	gap: var(--sc-space-3);
}

.sc-btn--arrow {
	gap: var(--sc-space-4);
	padding-right: var(--sc-space-2);
}

.sc-btn--primary .sc-btn__arrow {
	width: 26px;
	height: 26px;
	color: var(--sc-green-900);
}

.sc-btn--primary .sc-btn__arrow svg {
	width: 14px;
	height: 14px;
}

.sc-btn--primary:hover .sc-btn__arrow {
	transform: translateX(3px);
}

.sc-hero__actions .sc-btn--outline {
	padding-block: 10.52px;
}

/* A ticked list, one promise per line. */
.sc-hero__trust--list {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sc-space-2);
}

.sc-hero__trust--list li {
	gap: var(--sc-space-2);
	color: var(--sc-ink);
	font-size: var(--sc-fs-xs);
	font-weight: 500;
}

.sc-hero__trust--list li + li {
	padding-left: 0;
	border-left: 0;
}

.sc-hero__trust--list svg {
	width: 18px;
	height: 18px;
}

.sc-hero__trust--list span {
	max-width: none;
}

/* The list and a search bar share a row: promises left, bar right. */
@media (min-width: 992px) {
	.sc-hero__inner:has(> .sc-hero__trust--list):has(> .sc-searchbar) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-auto-flow: row dense;
		align-items: end;
		column-gap: var(--sc-space-8);
		row-gap: var(--sc-space-5);
	}

	.sc-hero__inner:has(> .sc-hero__trust--list):has(> .sc-searchbar) > * {
		grid-column: 1 / -1;
	}

	.sc-hero__inner:has(> .sc-hero__trust--list):has(> .sc-searchbar) > .sc-breadcrumb {
		margin-bottom: 0;
	}

	.sc-hero__inner > .sc-hero__trust--list:has(~ .sc-searchbar),
	.sc-hero__inner > .sc-searchbar ~ .sc-hero__trust--list {
		grid-column: 1;
		margin-top: 0;
	}

	.sc-hero__inner:has(> .sc-hero__trust--list) > .sc-searchbar {
		grid-column: 2;
		justify-self: end;
	}
}

/* Service request bar: three short questions and the button. The promises
   list comes before it when the two stack. */
.sc-hero__inner:has(> .sc-hero__trust--list) > .sc-searchbar {
	order: 1;
}

.sc-searchbar--request .sc-searchbar__field[data-sc-field="location"] {
	flex-grow: 1;
}

/* --- Signup box beside the headline -------------------------------------- */

@media (min-width: 992px) {
	.sc-hero--panel .sc-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--sc-hero-panel-w, 340px);
		align-items: center;
		column-gap: clamp(32px, 4vw, 72px);
		row-gap: 0;
	}

	.sc-hero--panel .sc-hero__inner > * {
		grid-column: 1;
	}

	.sc-hero--panel .sc-hero__inner > .sc-breadcrumb {
		grid-column: 1 / -1;
	}

	.sc-hero--panel .sc-hero__inner > .sc-hero__panel {
		grid-column: 2;
		grid-row: span 3;
		align-self: start;
	}

	.sc-hero--panel .sc-hero__copy {
		max-width: 720px;
	}
}

.sc-hero__panel {
	position: relative;
	width: 100%;
	margin-top: var(--sc-space-4);
	padding: var(--sc-space-8) var(--sc-space-6) var(--sc-space-5);
	border-radius: var(--sc-radius-xl);
	background: var(--sc-surface);
	box-shadow: var(--sc-shadow-bar);
	text-align: center;
}

.sc-hero__panel-icon {
	position: absolute;
	top: 0;
	left: 50%;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-surface);
	box-shadow: 0 2px 8px rgb(20 40 30 / 12%);
	color: var(--sc-gold-500);
	transform: translate(-50%, -50%);
}

.sc-hero__panel-icon svg {
	width: 18px;
	height: 18px;
}

.sc-page .sc-hero__panel-title {
	color: var(--sc-green-900);
	font-size: clamp(22px, 20px + 0.4vw, 26px);
	font-weight: 700;
	line-height: var(--sc-lh-snug);
}

.sc-hero__panel-text {
	margin-top: var(--sc-space-2);
	color: var(--sc-body);
	font-size: 13px;
	line-height: 1.5;
}

.sc-hero__panel-form {
	display: grid;
	gap: var(--sc-space-3);
	margin-top: var(--sc-space-5);
}

.sc-hero__panel-form .sc-btn {
	width: 100%;
	padding-block: 13px;
}

.sc-input {
	width: 100%;
	height: 46px;
	padding: 0 var(--sc-space-4);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
	color: var(--sc-ink);
	font: inherit;
	font-size: var(--sc-fs-xs);
	transition: border-color var(--sc-dur) var(--sc-ease);
}

.sc-input::placeholder {
	color: var(--sc-muted);
}

.sc-input:focus {
	border-color: var(--sc-green-700);
	outline: none;
}

.sc-hero__panel-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sc-space-2);
	margin-top: var(--sc-space-4);
	color: var(--sc-muted);
	font-size: 12px;
}

.sc-hero__panel-note svg {
	width: 14px;
	height: 14px;
	flex: none;
}

@media (max-width: 991px) {
	.sc-hero__panel {
		max-width: 440px;
		margin-top: var(--sc-space-8);
		align-self: flex-start;
	}
}

/* --------------------------------------------------------------------------
   CTA band — icon features beside the headline

   Loyalty lists "Free to Join" and friends in outlined circles between the
   copy and the photo. The headline and button keep together in __main.
   -------------------------------------------------------------------------- */

.sc-cta__main {
	display: flex;
	align-items: center;
	gap: clamp(24px, 8px + 4vw, 64px);
}

.sc-cta--stacked .sc-cta__inner:has(> .sc-cta__features) {
	flex-direction: row;
	align-items: center;
}

.sc-cta--stacked .sc-cta__main {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sc-space-6);
}

.sc-cta__features {
	display: flex;
	align-items: flex-start;
	gap: var(--sc-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-cta__features li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sc-space-3);
	width: 96px;
	color: var(--sc-on-dark);
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
}

.sc-cta__feature-icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border: 1.5px solid rgb(255 255 255 / 85%);
	border-radius: var(--sc-radius-pill);
}

.sc-cta__feature-icon svg {
	width: 24px;
	height: 24px;
}

@media (max-width: 767px) {
	.sc-cta--stacked .sc-cta__inner:has(> .sc-cta__features),
	.sc-cta__main {
		flex-direction: column;
		align-items: flex-start;
	}

	.sc-cta__features {
		flex-wrap: wrap;
		gap: var(--sc-space-4);
	}
}

/* --------------------------------------------------------------------------
   Hero without a search bar

   The wide gap under the copy makes room for the bar. With buttons or a
   reassurance list instead, they follow the copy closely, as in the designs.
   -------------------------------------------------------------------------- */

.sc-hero__inner:not(:has(> .sc-searchbar)) {
	gap: var(--sc-space-6);
}

.sc-hero__inner:not(:has(> .sc-searchbar)) > .sc-hero__actions,
.sc-hero__inner:not(:has(> .sc-searchbar)) > .sc-hero__trust {
	margin-top: 0;
}

.sc-hero__inner > .sc-breadcrumb {
	margin-bottom: 0;
}

/* An inset or row-width band has no container of its own to pad it. */
.sc-cta:not(.sc-bleed) .sc-cta__inner {
	padding-inline: clamp(24px, 8px + 3.4vw, 56px);
}

/* Request bar: the three questions keep to one line each. */
.sc-searchbar--request .sc-searchbar__label {
	white-space: nowrap;
}

.sc-searchbar--request .sc-searchbar__control {
	padding-inline: var(--sc-space-3);
}

/* Beside a signup box the headline has less room, so it runs a size down —
   two lines on a desktop, as in the Newsletters design. */
.sc-hero--panel h1 {
	font-size: var(--sc-title-size, clamp(34px, 21.6px + 2vw, 48px));
}

/* A long label wraps on a phone rather than pushing past the screen. */
@media (max-width: 480px) {
	.sc-cta .sc-btn--gold {
		max-width: 100%;
		white-space: normal;
		text-align: left;
	}
}