/* Black Friday / Cyber Monday sale hero.

   Rides on .billboard-hero so the section inherits the default hero's
   full-bleed width, background image, video and the desktop pull-up under the
   header from billboard-hero.css. Nothing in that file is changed. One
   template for both phases: only the second lockup word, the date line, the
   clock label and the CTA ref differ, so nothing here is phase specific.

   Mobile first. Below 801px (the breakpoint billboard-hero.css uses) the hero
   is one centred column: date line, lockup, "$5 every two weeks", clock,
   button. From 801px it is two columns: lockup and date line on the left;
   offer line, three plans, "Every two weeks", clock and button on the right.
   The three-plan block and the $5 block are both in the HTML and exactly one
   is displayed at any width.

   Every rule that touches an element with a site-wide default (h1, p, ul, a)
   is written at two classes so it beats style.css on specificity, not on
   load order. Fonts: Poppins (site-wide), zuume (self-hosted in style.css)
   and Permanent Marker (enqueued with this file). */

/* ---------- section shell ---------- */

/* Solid fallback behind the video while it loads, and a stacking context on
   mobile too (billboard-hero.css only sets z-index at >=801px) so nothing in
   this hero paints over the search bar below it. overflow: hidden is a guard:
   no word in the lockup can push the page sideways at any width. */
.bf-hero {
	background: #000;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

/* The clock and button make this hero taller than the default one. Extra
   bottom room so the search bar that overlaps the hero bottom does not sit on
   the button. Two classes so it beats .billboard-hero in billboard-hero.css. */
.billboard-hero.bf-hero {
	padding-bottom: 150px;
}

.bf-hero .billboard-hero__bg,
.bf-hero .billboard-hero__video {
	z-index: 0;
}

/* Darker than the default hero's overlay, like the comp. */
.bf-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.70) 100%);
}

/* ---------- layout (mobile) ---------- */

.bf-hero__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 20px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	text-align: center;
	color: #ffffff;
}

.bf-hero__lockup,
.bf-hero__offer {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

.bf-hero__lockup {
	animation: bh-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.bf-hero__offer {
	width: 100%;
	gap: 22px;
	animation: bh-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* ---------- lockup ---------- */

.bf-hero .bf-hero__title {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: clamp(44px, 12vw, 92px);
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #ffffff;
}

.bf-hero__word {
	display: block;
}

/* Outlined word. Plain white where text-stroke is unsupported, so the word
   can never render invisible. */
.bf-hero__word--outline {
	color: #ffffff;
}

@supports (-webkit-text-stroke: 2px #ffffff) {
	.bf-hero__word--outline {
		color: transparent;
		-webkit-text-stroke: 2px #ffffff;
	}
}

/* Red brush script with a glow. Sized off the h1 so it scales with it. */
.bf-hero .bf-hero__word--sale {
	margin-top: 0.04em;
	font-family: 'Permanent Marker', 'Poppins', cursive;
	font-weight: 400;
	font-size: 1.15em;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #ff5546;
	text-shadow:
		0 0 0.12em rgba(255, 70, 55, 0.85),
		0 0 0.35em rgba(255, 40, 25, 0.55);
	transform: rotate(-4deg);
}

/* Date line. Above the lockup on mobile (order: -1), below it on desktop. */
.bf-hero .bf-hero__dates {
	order: -1;
	margin: 0 0 16px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: clamp(12px, 3.4vw, 20px);
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
}

/* ---------- offer: desktop-only parts, hidden on mobile ---------- */

.bf-hero .bf-hero__kicker,
.bf-hero .bf-hero__plans,
.bf-hero .bf-hero__cadence {
	display: none;
}

/* ---------- offer: mobile-only "$5 every two weeks" ---------- */

.bf-hero .bf-hero__single {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2.5vw, 20px);
	margin: 0;
	font-family: 'zuume', 'Arial Narrow', sans-serif;
	font-weight: 700;
	line-height: 0.85;
	text-transform: uppercase;
}

.bf-hero__single-price {
	font-size: clamp(96px, 30vw, 240px);
	line-height: 0.8;
	color: #e23b2e;
}

.bf-hero__single-terms {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	font-size: clamp(50px, 16vw, 128px);
	line-height: 0.9;
	color: #ffffff;
}

.bf-hero__single-line {
	display: block;
	white-space: nowrap;
}

/* ---------- countdown clock ----------

   Normal flow only: no position, no fixed height. The clock sits between the
   offer and JOIN NOW and can only push the button down, never overlap it. A
   small label, then Days / Hrs / Min / Sec in ONE row (flex, nowrap) split by
   the same 1px rgba(255, 255, 255, 0.28) dividers as the price row. Digits
   scale with the viewport so the row stays on one line from 320px up. The
   bottom margin guarantees at least 20px above the button on top of the
   column gap. */

.bf-hero__clock {
	position: static;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 0 0 6px;
	font-family: 'Poppins', sans-serif;
}

.bf-hero .bf-hero__clock-title {
	margin: 0 0 10px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: clamp(11px, 3vw, 14px);
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.bf-hero__clock-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}

.bf-hero__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	padding: 0 clamp(10px, 3.6vw, 24px);
}

.bf-hero__unit + .bf-hero__unit {
	border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.bf-hero__num {
	font-weight: 800;
	font-size: clamp(28px, 9vw, 56px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: #ffffff;
}

.bf-hero__cap {
	margin-top: 6px;
	font-weight: 600;
	font-size: clamp(10px, 2.6vw, 14px);
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

/* ---------- JOIN NOW ---------- */

.bf-hero .bf-hero__cta {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 18px 56px;
	border-radius: 999px;
	background: #e23b2e;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 0 28px rgba(226, 59, 46, 0.45);
	transition: background-color 0.2s ease;
}

.bf-hero .bf-hero__cta:hover,
.bf-hero .bf-hero__cta:focus {
	background: #c42e22;
	color: #ffffff;
	text-decoration: none;
}

/* White ring: a red one would vanish into the button. */
.bf-hero .bf-hero__cta:focus,
.bf-hero .bf-hero__cta:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* ---------- Desktop ---------- */

@media (min-width: 801px) {
	.billboard-hero.bf-hero {
		padding-bottom: 170px;
	}

	.bf-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		column-gap: clamp(32px, 5vw, 96px);
		max-width: 1600px;
		padding: 210px 40px 0;
	}

	.bf-hero .bf-hero__title {
		font-size: clamp(52px, 6vw, 116px);
	}

	.bf-hero__word--outline {
		-webkit-text-stroke-width: 2.5px;
	}

	.bf-hero .bf-hero__dates {
		order: 0;
		margin: 24px 0 0;
		font-size: clamp(13px, 1.05vw, 20px);
		letter-spacing: 0.18em;
	}

	.bf-hero__offer {
		gap: clamp(16px, 1.6vw, 26px);
	}

	.bf-hero .bf-hero__single {
		display: none;
	}

	.bf-hero .bf-hero__kicker {
		display: block;
		margin: 0;
		font-family: 'Poppins', sans-serif;
		font-weight: 700;
		font-size: clamp(20px, 2vw, 38px);
		line-height: 1.2;
		color: #ffffff;
	}

	.bf-hero .bf-hero__plans {
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.bf-hero .bf-hero__plan {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 clamp(12px, 1.6vw, 32px);
		list-style: none;
	}

	.bf-hero .bf-hero__plan + .bf-hero__plan {
		border-left: 1px solid rgba(255, 255, 255, 0.28);
	}

	.bf-hero__plan-name {
		font-family: 'Poppins', sans-serif;
		font-weight: 600;
		font-size: clamp(12px, 1.05vw, 20px);
		line-height: 1.2;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.85);
	}

	.bf-hero__plan-price {
		margin-top: 6px;
		font-family: 'Poppins', sans-serif;
		font-weight: 800;
		font-size: clamp(40px, 4.2vw, 84px);
		line-height: 1;
		letter-spacing: -0.02em;
		color: #ffffff;
	}

	.bf-hero__plan--basic .bf-hero__plan-price {
		color: #ff4b3e;
	}

	/* Small raised dollar sign, top-aligned to the digits as in the comp. */
	.bf-hero__cur {
		position: relative;
		top: -0.72em;
		margin-right: 0.04em;
		font-size: 0.5em;
	}

	.bf-hero .bf-hero__cadence {
		display: block;
		margin: -6px 0 0;
		font-family: 'Poppins', sans-serif;
		font-weight: 500;
		font-size: clamp(14px, 1.1vw, 21px);
		line-height: 1.3;
		color: rgba(255, 255, 255, 0.9);
	}

	.bf-hero__clock {
		max-width: 640px;
	}

	.bf-hero .bf-hero__clock-title {
		font-size: clamp(11px, 0.85vw, 16px);
	}

	.bf-hero__unit {
		padding: 0 clamp(12px, 1.6vw, 30px);
	}

	.bf-hero__num {
		font-size: clamp(30px, 3.4vw, 64px);
	}

	.bf-hero__cap {
		font-size: clamp(10px, 0.75vw, 14px);
	}

	.bf-hero .bf-hero__cta {
		padding: 20px 60px;
		font-size: clamp(16px, 1.1vw, 20px);
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.bf-hero__lockup,
	.bf-hero__offer {
		animation: none;
	}
}