/**
 * Component: Hero Banner — styles
 * Scoped to .hero-banner (BEM root). Tokens from style.css.
 *
 * Desktop numbers are the comp's, measured from the Figma SVG export (page y,
 * 1440 frame; the section starts under the 146px header):
 *   H1 line box 198.7  → padding-top 53
 *   lead 384.4         → 42 below the H1
 *   form 478–528       → 42 below the lead
 *   centre phone 733   → 205 below the form; side phones 108 lower
 *   phone row 204–1235 → 1031 wide, phones 286 wide
 *   outer phones       → x −162 and 1315, y 973 and 983; they end at 1663,
 *                        21px into the features section's top padding
 * The v3 export (2026-09-29) lifts the phone row 26px (centre phone 707, 179
 * below the form) and pushes everything after the hero 40px further down, so
 * the section ends 66px lower after its phones: padding-bottom 186.
 */

.hero-banner {
	position: relative;
	isolation: isolate;
	padding: 53px var(--gutter) 186px;
	color: var(--color-text);
}

/* ── Line shapes ──────────────────────────────────────────────── */
/* Inline SVGs from apt_line_shape(): .apt-lines (style.css) already makes
   them absolute and draws them in, so this only places them. Comp boxes, page
   coords at 1440 (hero top = 146):
     left       x −85.55   y 192.45  w 432.2
     top        x 244      y −364    w 432.2   mostly above the page
     top-right  x 1104.82  y 14      w 382.18
   The wrapper is the centred 1440 container they're pinned to (house rule,
   and what feature_grid's line does): wider than 1440 they stay beside the
   content, like the header's logo and button, instead of drifting to the
   screen edges. Below 1440 each one scales with the viewport (every px → its
   vw at 1440), so the page edge cuts the same part of it at any width. The
   top two rise behind the transparent header, which sits above them at
   z-index 10; .site-content clips only sideways, so they aren't cut off at
   the hero's top edge. */
.hero-banner__lines {
	/* The site header's height (site_header.css: 146 / 114 / 82). The top two
	   shapes are placed from the top of the PAGE, as in the comp, so they keep
	   the same place in the header band at every breakpoint. */
	--hero-header-h: 146px;
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: var(--page-max);
	margin-inline: auto;
	pointer-events: none;
}

.hero-banner__line--left {
	top: 46.45px;
	left: max(-85.55px, -5.941vw);
	width: min(432.2px, 30.014vw);
}

/* Tracks the centre (244 = 720 − 476), so it stays above the headline's left
   half. Only the bottom of its lower loop is on the page (y 0–57, in the
   header band); the rest is above the top of the document. */
.hero-banner__line--top {
	top: calc(-1 * var(--hero-header-h) - min(364px, 25.278vw));
	left: calc(50% - min(476px, 33.056vw));
	width: min(432.2px, 30.014vw);
}

.hero-banner__line--top-right {
	top: calc(min(14px, 0.972vw) - var(--hero-header-h));
	right: max(-47px, -3.264vw);
	width: min(382.18px, 26.54vw);
}

/* ── Copy + form ──────────────────────────────────────────────── */
.hero-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hero-banner__title {
	max-width: 11.67em; /* 700px at 60px — breaks after "verge of", as in the comp */
	margin: 0;
	font-family: var(--font-title);
	font-size: var(--text-h1);
	font-weight: 800;
	line-height: var(--leading-h1);
	letter-spacing: var(--tracking-h1);
	color: var(--color-text);
}

.hero-banner__subhead {
	max-width: 600px; /* breaks after "net worth," */
	margin: 42px 0 0;
	font-size: var(--text-body-lg);
	line-height: 1.444;
	color: var(--color-text-muted);
}

.hero-banner__form {
	display: flex;
	gap: 8px;
	width: 100%;
	max-width: 556px;
	margin-top: 42px;
}

.hero-banner__form .hero-banner__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	margin: 0;
	padding: 0 25px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-field);
	color: var(--color-accent-ink);
	font-family: var(--font-body);
	font-size: var(--text-body-lg);
	line-height: 1;
	transition: box-shadow 0.2s ease;
}

.hero-banner__form .hero-banner__input::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

.hero-banner__form .hero-banner__input:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent);
}

.hero-banner__submit {
	flex: 0 0 auto;
}

.hero-banner__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hero-banner__notice {
	margin: 16px 0 0;
	font-size: var(--text-body);
	font-weight: 700;
}

.hero-banner__notice--success { color: var(--color-accent); }
.hero-banner__notice--error   { color: var(--color-error); }

/* ── Phones ───────────────────────────────────────────────────── */
/* Positions are fractions of the comp's 1031×788 phone row, so the fan scales
   as one piece at any width down to the mobile layout. The outer two sit
   outside the row and are cut off by the page edge (.site-content clips the
   sideways overflow). Below 1440 the row keeps the comp's share of the page
   (1031 / 1440 ≈ 71.6vw) rather than filling the content width — any wider
   and the outer phones would be pushed off-screen entirely. */
.hero-banner__phones {
	position: relative;
	width: min(1031px, 71.6vw);
	aspect-ratio: 1031 / 788;
	margin: 179px auto 0;
}

.hero-banner__phone {
	position: absolute;
	width: 27.74%; /* 286 / 1031 */
}

.hero-banner__phone--far-left  { left: -35.5%;  top: 30.46%; } /* −366 / 1031, 240 / 788 */
.hero-banner__phone--left      { left: 0;       top: 13.71%; } /* 108 / 788 */
.hero-banner__phone--center    { left: 35.5%;   top: 0; }
.hero-banner__phone--right     { left: 72.26%;  top: 13.71%; }
.hero-banner__phone--far-right { left: 107.76%; top: 31.73%; } /* 1111 / 1031, 250 / 788 */

.hero-banner__phone-img {
	display: block;
	width: 100%;
	height: auto;
	animation: apt-float 7s ease-in-out infinite;
}

/* Neighbours float half a cycle apart. */
.hero-banner__phone--far-left .hero-banner__phone-img  { animation-delay: -5.8s; }
.hero-banner__phone--left .hero-banner__phone-img      { animation-delay: -2.3s; }
.hero-banner__phone--right .hero-banner__phone-img     { animation-delay: -4.6s; }
.hero-banner__phone--far-right .hero-banner__phone-img { animation-delay: -1.1s; }

/* ── Tablet ≤900px ────────────────────────────────────────────── */
@media (max-width: 900px) {
	.hero-banner {
		padding-top: 40px;
		padding-bottom: 96px;
	}

	.hero-banner__subhead {
		max-width: 540px;
		margin-top: 28px;
	}

	.hero-banner__form {
		margin-top: 32px;
	}

	.hero-banner__phones {
		margin-top: 96px;
	}

	.hero-banner__lines {
		--hero-header-h: 114px;
	}
}

/* ── Mobile ≤480px ────────────────────────────────────────────── */
/* Three phones abreast would be ~95px each here, so the outer two go and the
   fan tightens: the centre phone leads and the side phones tuck in behind it.
   The row fills the content width again. */
@media (max-width: 480px) {
	.hero-banner {
		padding-top: 28px;
		padding-bottom: 72px;
	}

	.hero-banner__subhead {
		margin-top: 20px;
	}

	.hero-banner__form {
		flex-direction: column;
		gap: 12px;
		margin-top: 28px;
	}

	.hero-banner__submit {
		width: 100%;
	}

	.hero-banner__phones {
		width: 100%;
		aspect-ratio: 100 / 138;
		margin-top: 56px;
	}

	.hero-banner__phone--far-left,
	.hero-banner__phone--far-right {
		display: none;
	}

	.hero-banner__phone--center {
		left: 21%;
		width: 58%;
	}

	.hero-banner__phone--left,
	.hero-banner__phone--right {
		top: 9%;
		width: 44%;
	}

	/* Dim the tucked-in side phones. On the image, not the wrapper: the
	   wrapper's opacity belongs to the reveal, whose rule ends at 1 and would
	   override this (it did, until 2026-09-24). */
	.hero-banner__phone--left .hero-banner__phone-img,
	.hero-banner__phone--right .hero-banner__phone-img {
		opacity: 0.85;
	}

	.hero-banner__phone--left  { left: -4%; }
	.hero-banner__phone--right { left: auto; right: -4%; }

	.hero-banner__lines {
		--hero-header-h: 82px;
	}
}

/* ── Reduced motion ───────────────────────────────────────────── */
/* The line shapes stand down in style.css (drawn, no spark). */
@media (prefers-reduced-motion: reduce) {
	.hero-banner__phone-img {
		animation: none;
	}

	.hero-banner__input {
		transition: none;
	}
}