/*
 * Homepage hero — fits the fold at any screen size.
 *
 * The design export sizes the hero from fixed padding and a viewport-*width*
 * type scale, so on a short screen it ran 160–467px past the fold and the
 * scroll cue was never visible at any size.
 *
 * This layer holds the whole hero inside 100svh: the section becomes a flex
 * column pinned to the viewport, the top padding is driven by the real measured
 * header height (--bwm-chrome, set in JS and updated on resize), and the
 * internal rhythm is expressed in svh so it compresses with the viewport rather
 * than only with its width. Three tiers take over on genuinely short screens.
 *
 * It is a separate stylesheet, and every rule is scoped to .bwm-page-home, so
 * the exported markup stays byte-identical to the design and this can be
 * dropped without touching a template. !important is needed throughout because
 * the design's values are inline style attributes.
 */

.bwm-page-home section#top {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	padding-bottom: clamp(18px, 3svh, 56px) !important;
}

/* The positioned wrapper holding the fold; the other children are the
   decorative mark and the wind canvas, both absolutely positioned. */
.bwm-page-home section#top > div:has([data-hero-fold]) {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* The wrapper carries the design's `max-width:1920px; margin:0 auto`. As a
	   flex item those auto cross-axis margins defeat align-items:stretch, and it
	   falls back to shrink-to-fit — which centred the hero and left it ~270px
	   narrower than every other section. width:100% restores the block width
	   while max-width and the auto margins still centre it on ultra-wide. */
	width: 100%;
}

.bwm-page-home [data-hero-fold] {
	flex: 1 1 auto;
	justify-content: center;
	/* Clear the fixed header, then breathe. */
	padding-top: calc(var(--bwm-chrome, 140px) + clamp(10px, 3svh, 54px)) !important;
	padding-bottom: 0 !important;
	min-height: 0;
}

/* Eyebrow ---------------------------------------------------------------- */
.bwm-page-home [data-hero-fold] > [data-reveal]:first-of-type {
	margin-bottom: clamp(12px, 2.6svh, 52px) !important;
}

/* Headline — scales with height as well as width, which is what stops it
   pushing the CTAs off a laptop screen. */
.bwm-page-home [data-hero-fold] h1 {
	font-size: clamp(32px, min(4.8vw + 26px, 10.4svh), 112px) !important;
	line-height: 1.1 !important;
}

/* CTA + review row ------------------------------------------------------- */
.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] {
	margin-top: clamp(16px, 3.2svh, 60px) !important;
}

/* Scroll cue — the whole point is that it now sits on screen. */
.bwm-page-home [data-scrollcue] {
	margin-top: clamp(12px, 2.6svh, 48px) !important;
}

/* Short screens ---------------------------------------------------------- */
@media (max-height: 860px) {
	.bwm-page-home [data-hero-fold] h1 {
		font-size: clamp(30px, min(4.2vw + 20px, 9.6svh), 84px) !important;
	}
	.bwm-page-home [data-hero-fold] > [data-reveal]:first-of-type {
		margin-bottom: clamp(10px, 2svh, 30px) !important;
	}
}

@media (max-height: 740px) {
	.bwm-page-home [data-hero-fold] {
		padding-top: calc(var(--bwm-chrome, 140px) + clamp(8px, 2svh, 24px)) !important;
	}
	.bwm-page-home [data-hero-fold] h1 {
		font-size: clamp(28px, min(3.8vw + 16px, 9svh), 68px) !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] {
		margin-top: clamp(12px, 2.4svh, 32px) !important;
	}
	.bwm-page-home [data-scrollcue] {
		margin-top: clamp(10px, 2svh, 26px) !important;
	}
}

/* The CTA + intro row -----------------------------------------------------
 *
 * This is what actually overruns. On a wide screen the buttons, the review
 * badges and the intro paragraph sit in one line; below ~1024px they stack into
 * a single column and the row goes from ~150px to over 400px.
 */
@media (max-width: 1024px) {
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] {
		gap: clamp(12px, 2.2svh, 30px) !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] {
		gap: clamp(10px, 1.9svh, 26px) !important;
	}
}

/* The intro paragraph is supporting copy. On a short, narrow screen it is the
   right thing to shrink — the headline and the two buttons are the hero. */
@media (max-width: 900px) and (max-height: 860px) {
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > p {
		font-size: clamp(14px, 1.95svh, 17px) !important;
		line-height: 1.42 !important;
	}
}

/* Narrow screens, whatever their height ------------------------------------
 *
 * Below ~560px the row is always a single column, so the saving has to come
 * from the stack itself rather than from the viewport height. A tall phone
 * (932px) and a mid one (844px) both land here.
 */
@media (max-width: 560px) {
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] {
		gap: clamp(10px, 1.6svh, 18px) !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] {
		gap: clamp(10px, 1.6svh, 18px) !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > p {
		font-size: clamp(14px, 1.75svh, 16px) !important;
		line-height: 1.4 !important;
	}
	.bwm-page-home [data-hero-fold] > [data-reveal]:first-of-type {
		margin-bottom: clamp(8px, 1.5svh, 18px) !important;
	}
	.bwm-page-home [data-scrollcue] {
		margin-top: clamp(8px, 1.5svh, 18px) !important;
	}
	/* The brand line demoted under the H1 (Phase 1.4) takes part in the fit. */
	.bwm-page-home [data-hero-fold] h1 + h2 {
		font-size: clamp(14px, 1.9svh, 17px) !important;
		line-height: 1.3 !important;
		margin-top: clamp(6px, 1.2svh, 14px) !important;
		max-width: 42ch !important;
	}
}

/* Narrow and not especially tall — most phones in portrait. There is not room
   for the headline, both buttons, the review badges *and* the scroll cue, so
   the cue goes: it is the one element that carries no information. */
/* The min-height keeps this off the shortest phones, where the tiers below
   set a smaller headline and would otherwise be overridden by source order. */
@media (max-width: 560px) and (max-height: 910px) and (min-height: 721px) {
	.bwm-page-home [data-scrollcue] {
		display: none !important;
	}
	.bwm-page-home [data-hero-fold] h1 {
		font-size: clamp(28px, min(4.2vw + 18px, 9svh), 46px) !important;
	}
}

/* Phones in landscape and the shortest laptops: the cue is the first thing
   worth losing, since the section edge already signals that the page runs on. */
@media (max-height: 620px) {
	.bwm-page-home [data-hero-fold] h1 {
		font-size: clamp(26px, min(3.4vw + 14px, 8.6svh), 54px) !important;
	}
	.bwm-page-home [data-scrollcue] {
		display: none !important;
	}
}

/* Short *and* narrow — a 667px-tall phone. Everything tightens and the cue goes,
   so the headline, both buttons and the review badges all land above the fold. */
@media (max-width: 900px) and (max-height: 720px) {
	.bwm-page-home [data-scrollcue] {
		display: none !important;
	}
	.bwm-page-home section#top {
		padding-bottom: clamp(12px, 2svh, 24px) !important;
	}
	.bwm-page-home [data-hero-fold] {
		padding-top: calc(var(--bwm-chrome, 145px) + clamp(6px, 1.4svh, 16px)) !important;
	}
	.bwm-page-home [data-hero-fold] > [data-reveal]:first-of-type {
		margin-bottom: clamp(6px, 1.2svh, 14px) !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] {
		margin-top: clamp(10px, 1.8svh, 20px) !important;
		gap: 10px !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] {
		gap: 10px !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > p {
		font-size: 14px !important;
		line-height: 1.4 !important;
	}
	.bwm-page-home [data-hero-fold] h1 {
		font-size: clamp(23px, min(3.4vw + 11px, 7.2svh), 42px) !important;
		line-height: 1.06 !important;
	}
	.bwm-page-home [data-hero-fold] h1 + h2 {
		font-size: 13px !important;
		line-height: 1.22 !important;
		margin-top: 4px !important;
		max-width: 36ch !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] {
		margin-top: 8px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Tall phones, 560px wide and 911px+ (a 430x932-class handset).
 *
 * These fell between the tiers: too tall for the 910px ceiling above, too
 * narrow for anything else, so nothing ever shrank the heading and the hero
 * overran the fold. Pre-dates the Phase 1.4 H1 rewrite; fixed here because the
 * rewrite is what surfaced it.
 * ------------------------------------------------------------------------ */
@media (max-width: 560px) and (min-height: 911px) {
	.bwm-page-home [data-hero-fold] h1 {
		font-size: clamp(30px, min(4.4vw + 16px, 8.4svh), 48px) !important;
	}
	.bwm-page-home [data-hero-fold] h1 + h2 {
		font-size: clamp(14px, 1.8svh, 17px) !important;
		margin-top: clamp(6px, 1.1svh, 13px) !important;
	}
}

/* ---------------------------------------------------------------------------
 * Phones in landscape (844x390 and similar). Very little height, plenty of
 * width — the heading can stay reasonably large but everything else has to
 * compress hard. Also pre-existing.
 * ------------------------------------------------------------------------ */
@media (max-height: 460px) and (orientation: landscape) {
	.bwm-page-home [data-hero-fold] h1 {
		font-size: clamp(20px, min(2.6vw + 10px, 9svh), 34px) !important;
		line-height: 1.05 !important;
		max-width: 34ch !important;
	}
	.bwm-page-home [data-hero-fold] h1 + h2 {
		font-size: 12.5px !important;
		line-height: 1.2 !important;
		margin-top: 3px !important;
		max-width: 46ch !important;
	}
	.bwm-page-home [data-hero-fold] > [data-reveal]:first-of-type {
		margin-bottom: 4px !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] {
		margin-top: 6px !important;
		gap: 8px !important;
	}
	.bwm-page-home [data-scrollcue] {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * The last two stubborn cases: very small phones (360x640) and phones in
 * landscape (844x390). On both, the two fattest items in the hero are the
 * stacked buttons (132px) and the Google-reviews badge, which wraps to three
 * rows at 360px wide and costs 96px.
 *
 * Compressed rather than hidden — the reviews badge is the strongest piece of
 * social proof above the fold, and losing it to save height would be a bad
 * trade. Scoped tightly so nothing larger is affected.
 * ------------------------------------------------------------------------ */
@media (max-width: 560px) and (max-height: 700px),
       (max-height: 460px) and (orientation: landscape) {

	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] a[data-magnetic] {
		padding: 14px 22px !important;
		font-size: 13px !important;
	}

	/* The badge row: tighter gaps, smaller pill, smaller text. */
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] > div:last-child {
		gap: 8px !important;
		row-gap: 6px !important;
	}

	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] > div:last-child span[style*="border-radius:100px"] {
		padding: 5px 9px !important;
		gap: 6px !important;
	}

	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] > div:last-child span {
		font-size: 12.5px !important;
		line-height: 1.3 !important;
	}

	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] > div:last-child svg {
		width: 15px !important;
		height: 15px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Phones in landscape: roughly 260px of usable height once browser chrome is
 * accounted for. The reviews badge is the fattest single item and there is
 * genuinely no room for it — the heading, the deck and both buttons matter
 * more. It is still shown everywhere else, including the same phone held
 * upright, and further down this page.
 *
 * Tried first and rejected: laying the buttons and badge out side by side.
 * The badge wrapped anyway and the hero got 4px taller.
 * ------------------------------------------------------------------------ */
@media (max-height: 460px) and (orientation: landscape) {
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] > div:last-child {
		display: none !important;
	}
	.bwm-page-home [data-hero-fold] {
		padding-top: calc(var(--bwm-chrome, 126px) + 2px) !important;
	}
	.bwm-page-home section#top {
		padding-bottom: 8px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Short landscape screens above phone height (1024x600 netbooks, small laptop
 * windows). Enough room to keep the reviews badge — it just needs everything
 * compressed rather than anything removed.
 * ------------------------------------------------------------------------ */
@media (max-height: 620px) and (min-height: 461px) and (orientation: landscape) {
	.bwm-page-home [data-hero-fold] h1 {
		font-size: clamp(24px, min(3vw + 12px, 7.4svh), 44px) !important;
		line-height: 1.08 !important;
	}
	.bwm-page-home [data-hero-fold] h1 + h2 {
		font-size: 13px !important;
		line-height: 1.25 !important;
		margin-top: 4px !important;
		max-width: 54ch !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] {
		margin-top: 8px !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] {
		gap: 10px !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] a[data-magnetic] {
		padding: 13px 20px !important;
		font-size: 13px !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] > div:last-child span[style*="border-radius:100px"] {
		padding: 5px 9px !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] > div:last-child span {
		font-size: 12.5px !important;
	}
	.bwm-page-home section#top {
		padding-bottom: 10px !important;
	}
}

/* ---------------------------------------------------------------------------
 * 1024x768-class screens (classic iPad in landscape, older laptops). Too tall
 * for the short-landscape tiers above and too narrow for the desktop sizing,
 * so nothing was scaling the heading here.
 * ------------------------------------------------------------------------ */
@media (min-height: 621px) and (max-height: 800px) and (max-width: 1100px) and (orientation: landscape) {
	.bwm-page-home [data-hero-fold] h1 {
		font-size: clamp(28px, min(3.6vw + 12px, 8.2svh), 48px) !important;
	}
	.bwm-page-home [data-hero-fold] h1 + h2 {
		font-size: clamp(14px, 1.8svh, 17px) !important;
		margin-top: clamp(6px, 1svh, 12px) !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] {
		margin-top: clamp(12px, 2svh, 24px) !important;
	}
}

/* ---------------------------------------------------------------------------
 * The 801-900px height band (1080x810, 1536x864, 1440x900).
 *
 * Tried and reverted first: one global `min(…, svh)` rule to size the heading
 * continuously at every height. It reads well but it overrode the hand-tuned
 * small-screen tiers above — 375x667 went from fitting to 155px over — because
 * those tiers deliberately set much smaller sizes than a smooth curve would.
 * The ladder stays; this is the one rung that was missing.
 * ------------------------------------------------------------------------ */
@media (min-height: 801px) and (max-height: 900px) and (min-width: 1000px) {
	.bwm-page-home [data-hero-fold] h1 {
		font-size: clamp(30px, min(4.8vw + 26px, 8svh), 84px) !important;
		/* Widening the measure drops the heading from four lines to three,
		   which is worth more here than another point off the type size. */
		max-width: 26ch !important;
	}
	.bwm-page-home [data-hero-fold] h1 + h2 {
		font-size: clamp(14px, 1.9svh, 19px) !important;
		margin-top: clamp(8px, 1.2svh, 14px) !important;
	}
	/* The scroll cue costs 49px and every shorter tier already drops it. */
	.bwm-page-home [data-scrollcue] {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * 375x812-class phones (iPhone X/11/13 mini). Between the 721px tier's ceiling
 * and the tall-phone tier's 911px floor, the heading was sized by the base
 * rule and the hero ran 5px past the fold — small, but it means the CTA is cut.
 * The review badges are the fattest item at this width (96px, wrapped), so
 * they get the same compression as the shorter tiers.
 * ------------------------------------------------------------------------ */
@media (max-width: 560px) and (min-height: 721px) and (max-height: 910px) {
	.bwm-page-home [data-hero-fold] h1 + h2 {
		font-size: clamp(13.5px, 1.8svh, 16px) !important;
		margin-top: clamp(5px, 0.9svh, 11px) !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] > div:last-child {
		gap: 8px !important;
		row-gap: 6px !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] > div:last-child span[style*="border-radius:100px"] {
		padding: 6px 10px !important;
	}
	.bwm-page-home [data-hero-fold] [data-hero-layer="1.5"] > [data-reveal] > div:last-child span {
		font-size: 13px !important;
	}
}