/* =========================================================================
   BuyTides — Home page
   =========================================================================

   Scoped entirely to `.hm-page`, the wrapper in templates/front-page.html,
   so nothing here can leak into the shop, the product template, or the
   sitewide chrome.

   The page is built from native Gutenberg blocks. Everything below styles
   those blocks through the classNames set on them in the editor — no block
   output is hand-written, which is what keeps the page visually editable.
   Twenty Twenty-Five's block-gap margins are cleared once, at the top, and
   every gap below is set with flex/grid `gap` instead, so a section's
   rhythm survives an editor reordering its children.

   Class names avoid BEM's double hyphen on purpose: the block-comment JSON
   escapes `--` as `u002du002d`, which is easy to break by hand-editing.
   ========================================================================= */

.hm-page {
	--hm-navy: #2b3754;
	--hm-navy-mid: #12406c;
	--hm-hero-ink: #06192d;
	--hm-cyan: #1fc8e3;
	--hm-cyan-soft: #61ddeb;
	--hm-cyan-tint: #eaf9fc;
	--hm-cyan-ink: #9eedf6;
	--hm-teal: #1b7fa8;
	--hm-line: #dde7ee;
	--hm-line-soft: #edf3f7;
	--hm-surface: #f4f7f9;
	--hm-muted: #4b6479;
	--hm-muted-soft: #7c93a3;

	--hm-shell: 1240px;
	--hm-gutter: clamp(20px, 4vw, 48px);
	--hm-sec-pad: clamp(56px, 7vw, 104px);

	--hm-sans: "Inter", system-ui, -apple-system, sans-serif;
	--hm-display: "Outfit", "Inter", system-ui, sans-serif;

	background: #fff;
	color: var(--hm-navy);
	font-family: var(--hm-sans);
	line-height: 1.6;
}

/* Twenty Twenty-Five hands every block a vertical block-gap margin, including
   the wrapper itself as a child of .wp-site-blocks. Left in place it opens a
   strip of page background between the announcement marquee and the hero
   video, so it is cleared outside as well as inside. */
.wp-site-blocks > .hm-page {
	margin-block: 0;
}

.hm-page > *,
.hm-page .wp-block-group,
.hm-page .wp-block-cover,
.hm-page .wp-block-buttons,
.hm-page .wp-block-details,
.hm-page .wp-block-image,
.hm-page h1,
.hm-page h2,
.hm-page h3,
.hm-page p,
.hm-page figure {
	margin-block: 0;
}

.hm-page h1,
.hm-page h2,
.hm-page h3 {
	font-family: var(--hm-display);
	font-weight: 600;
	letter-spacing: -0.028em;
	text-wrap: balance;
}

.hm-page p {
	text-wrap: pretty;
}

.hm-page a {
	color: var(--hm-teal);
	text-decoration: none;
}

.hm-page a:hover {
	color: var(--hm-navy);
}

/* -------------------------------------------------------------------------
   Shared layout
   ---------------------------------------------------------------------- */

.hm-page .hm-wrap {
	width: 100%;
	max-width: var(--hm-shell);
	margin-inline: auto;
	padding-inline: var(--hm-gutter);
}

.hm-page .hm-sec {
	padding-block: var(--hm-sec-pad);
	text-align: center;
}

.hm-page .hm-sec > .hm-wrap {
	display: flex;
	flex-direction: column;
}

.hm-page .hm-sec-head {
	max-width: 660px;
	margin-inline: auto;
	margin-bottom: clamp(26px, 3vw, 38px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.hm-page .hm-sec-head-wide {
	max-width: 720px;
	margin-bottom: clamp(32px, 4vw, 50px);
}

.hm-page .hm-sec-head-narrow {
	max-width: 640px;
	margin-bottom: clamp(28px, 3.4vw, 42px);
}

.hm-page .hm-kick {
	font-family: var(--hm-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hm-teal);
}

.hm-page .hm-h2 {
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.1;
}

.hm-page .hm-lead {
	font-size: clamp(16px, 1.4vw, 17.5px);
	line-height: 1.62;
	color: var(--hm-muted);
}

.hm-page .hm-sec-head-wide .hm-lead {
	max-width: 60ch;
}

.hm-page .hm-sec-cta {
	justify-content: center;
	margin-top: clamp(24px, 3vw, 34px);
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.hm-page .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hm-page .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: clamp(46px, 3.2vw, 54px);
	padding: 0 clamp(18px, 1.8vw, 26px);
	border: 0;
	border-radius: 12px;
	white-space: nowrap;
	background: var(--hm-navy);
	color: #fff;
	font-family: var(--hm-display);
	font-size: clamp(15px, 1.2vw, 16.5px);
	font-weight: 600;
	line-height: 1;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hm-page .wp-block-button__link:hover,
.hm-page .wp-block-button__link:focus-visible {
	background: var(--hm-navy-mid);
	color: #fff;
}

.hm-page .hm-btn-cy .wp-block-button__link {
	background: var(--hm-cyan-soft);
	color: var(--hm-navy);
}

.hm-page .hm-btn-cy .wp-block-button__link:hover,
.hm-page .hm-btn-cy .wp-block-button__link:focus-visible {
	background: #3ecfe0;
	color: var(--hm-navy);
}

.hm-page .hm-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}

.hm-page .hm-btn-ghost .wp-block-button__link:hover,
.hm-page .hm-btn-ghost .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.hm-page .hm-btn-out .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--hm-line);
	color: var(--hm-navy);
}

.hm-page .hm-btn-out .wp-block-button__link:hover,
.hm-page .hm-btn-out .wp-block-button__link:focus-visible {
	background: var(--hm-surface);
	border-color: var(--hm-cyan-soft);
	color: var(--hm-navy);
}

.hm-page .hm-btn-navy .wp-block-button__link {
	background: var(--hm-navy);
	color: #fff;
}

.hm-page .hm-btn-navy-out .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--hm-navy);
	color: var(--hm-navy);
}

.hm-page .hm-btn-navy-out .wp-block-button__link:hover,
.hm-page .hm-btn-navy-out .wp-block-button__link:focus-visible {
	background: rgba(43, 55, 84, 0.1);
	color: var(--hm-navy);
}

/* The affiliate panel's second action is a plain text link in the design, not
   a second button. It stays a core button so an editor can move or relabel it
   with the first one. */
.hm-page .hm-btn-link .wp-block-button__link {
	height: auto;
	padding: 0;
	background: transparent;
	color: var(--hm-teal);
	font-size: 15px;
}

.hm-page .hm-btn-link .wp-block-button__link:hover,
.hm-page .hm-btn-link .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--hm-navy);
}

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

/* core/cover gives us the video background and its own dim <span>. dimRatio is
   0 on the block, so that span paints nothing and the cyan corner glow below
   (::after) is the only wash left over the video. It sits behind
   .wp-block-cover__inner-container, which is lifted above it. */
.hm-page .hm-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: max(420px, 31.25vw);
	padding: 0;
	color: #fff;
	background: var(--hm-hero-ink);
}

.hm-page .hm-hero .wp-block-cover__video-background {
	object-fit: cover;
	background: var(--hm-hero-ink);
}

.hm-page .hm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* The export's vertical navy scrim over the video is deliberately gone: the
   footage is graded for the headline to sit on it directly. Only the cyan
   corner glow remains. Text contrast now rests on the video itself — a
   brighter recut will need the scrim back. */
.hm-page .hm-hero::after {
	background-image:
		radial-gradient(
			80% 80% at 0% 100%,
			rgba(31, 200, 227, 0.4) 0%,
			rgba(31, 200, 227, 0.12) 44%,
			rgba(31, 200, 227, 0) 70%
		),
		radial-gradient(
			66% 66% at 100% 0%,
			rgba(111, 228, 242, 0.3) 0%,
			rgba(31, 200, 227, 0.08) 46%,
			rgba(31, 200, 227, 0) 72%
		);
}

.hm-page .hm-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: clamp(40px, 4.4vw, 72px);
}

.hm-page .hm-hero-body {
	max-width: 900px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hm-page .hm-hero-h1 {
	max-width: 22ch;
	margin-bottom: 14px;
	font-size: clamp(27px, 3.5vw, 56px);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: #fff;
}

.hm-page .hm-hero-lede {
	max-width: 58ch;
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

.hm-page .hm-hero-cta {
	justify-content: center;
	margin-top: clamp(20px, 2.2vw, 30px);
}

/* -------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------- */

.hm-page .hm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr));
	gap: 20px;
}

.hm-page .hm-grid3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 20px;
}

.hm-page .hm-grid-cat {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
	gap: 14px;
}

.hm-page .hm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--hm-line);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	color: var(--hm-navy);
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hm-page .hm-card:hover {
	border-color: var(--hm-cyan-soft);
	box-shadow: 0 14px 34px -20px rgba(11, 44, 77, 0.4);
	transform: translateY(-2px);
}

/* Each card carries exactly one link, and it is stretched over the whole card
   so the entire tile is clickable — the design draws these as link cards, and
   core has no block that wraps children in an anchor. */
.hm-page .hm-card-cta a::after,
.hm-page .hm-cat-name a::after,
.hm-page .hm-card-prog .hm-card-h a::after,
.hm-page .hm-card-lab .hm-card-buy a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.hm-page .hm-card-h {
	font-size: 19.5px;
	line-height: 1.22;
}

.hm-page .hm-card-h a {
	color: inherit;
}

.hm-page .hm-card-p {
	flex: 1;
	font-size: 14px;
	line-height: 1.55;
	color: var(--hm-muted);
}

.hm-page .hm-card-meta {
	font-size: 12.5px;
	color: var(--hm-muted-soft);
}

/* How it works */

.hm-page .hm-card-step {
	gap: 12px;
	padding: 28px;
}

.hm-page .hm-card-step .hm-card-h {
	font-size: 21px;
	line-height: 1.2;
}

.hm-page .hm-step-n {
	font-family: var(--hm-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--hm-teal);
}

.hm-page .hm-card-cta {
	margin-top: auto;
	padding-top: 12px;
	font-family: var(--hm-display);
	font-size: 14.5px;
	font-weight: 600;
}

.hm-page .hm-shop,
.hm-page .hm-cats {
	background: var(--hm-surface);
}

.hm-page .hm-shop {
	padding-bottom: clamp(34px, 4vw, 56px);
}

.hm-page .hm-cats {
	padding-top: 0;
}

.hm-page .hm-card-buy {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.hm-page .hm-card-buy strong {
	font-family: var(--hm-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--hm-navy);
	white-space: nowrap;
}

/* Best sellers: the catalogue card, rendered by [buytides_archive_cards]. The
   .bt-arc wrapper is only there to carry that design's colour tokens, so the
   page background and bottom padding it also declares are stripped, and the
   section's centring is stopped at the card edge - these cards are
   left-aligned by design. */
.hm-page .hm-shop-cards {
	background: none;
	padding-bottom: 0;
	text-align: left;
}

.hm-page .hm-shop-cards .bt-grid {
	width: 100%;
}

/* `.hm-page a` sets the page link colour at (0,1,1), which outranks the card
   design's own `.bt-view { color: #fff }` at (0,1,0) — so the footer CTA came
   through teal on navy. The card's colours are restored here rather than
   raising specificity in archive.css, which the shop also reads. The icon is an
   inline SVG stroked with currentColor, so it follows the label. */
.hm-page .hm-shop-cards .bt-view,
.hm-page .hm-shop-cards .bt-view:hover,
.hm-page .hm-shop-cards .bt-view:focus-visible,
.hm-page .hm-shop-cards .bt-view:active {
	color: #fff;
}

.hm-page .hm-shop-cards .bt-view svg {
	color: #fff;
	stroke: currentColor;
}

/* The catalogue's own grid is auto-fill over a 270px floor, sized for an
   archive column that gives up 320px to the filter rail. Home has the full
   1240px shell and no rail, so auto-fill lands on three columns at 1440px and
   leaves the second row short. Eight cards are meant to read as two rows of
   four, so the count is pinned once the shell is wide enough to carry it —
   1200px, where four tracks still clear the design's 270px card floor. Below
   that the catalogue's own auto-fill takes over. */
@media (min-width: 1200px) {

	.hm-page .hm-shop-cards .bt-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Categories */

.hm-page .hm-card-cat {
	gap: 6px;
	padding: 20px 22px;
	border-radius: 14px;
}

.hm-page .hm-cat-name {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: var(--hm-display);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.25;
}

.hm-page .hm-cat-name a {
	color: var(--hm-navy);
}

.hm-page .hm-arrow {
	color: var(--hm-teal);
}

.hm-page .hm-cat-dek {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--hm-muted);
}

/* Programs */

.hm-page .hm-card-prog {
	gap: 11px;
	padding: 26px;
}

.hm-page .hm-mark {
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--hm-cyan-tint);
	color: var(--hm-teal);
	font-family: var(--hm-display);
	font-size: 15px;
	font-weight: 600;
}

/* Lab tests */

.hm-page .hm-labsteps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 14px;
	margin-bottom: clamp(24px, 3vw, 34px);
}

.hm-page .hm-labstep {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--hm-surface);
	text-align: center;
}

.hm-page .hm-labstep-n {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hm-cyan-tint);
	color: var(--hm-teal);
	font-family: var(--hm-display);
	font-size: 13px;
	font-weight: 600;
}

.hm-page .hm-labstep-b {
	font-size: 14.5px;
	line-height: 1.5;
}

.hm-page .hm-card-lab {
	gap: 9px;
	padding: 24px;
}

.hm-page .hm-card-lab .hm-card-h {
	font-size: 19px;
	line-height: 1.24;
}

.hm-page .hm-card-lab .hm-card-buy {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--hm-line-soft);
}

.hm-page .hm-card-lab .hm-card-buy strong {
	font-size: 19px;
}

.hm-page .hm-card-lab .hm-card-buy a {
	font-family: var(--hm-display);
	font-size: 14px;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Split sections
   ---------------------------------------------------------------------- */

.hm-page .hm-split {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: clamp(30px, 5vw, 72px);
	align-items: center;
	text-align: center;
}

.hm-page .hm-split-copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.hm-page .hm-split-cta {
	margin-top: 10px;
	align-items: center;
	justify-content: center;
}

/* Purity & testing */

.hm-page .hm-purity {
	background: var(--hm-navy);
	color: #fff;
}

.hm-page .hm-purity .hm-kick,
.hm-page .hm-wholesale .hm-kick {
	color: var(--hm-cyan-ink);
}

.hm-page .hm-dark-p {
	max-width: 56ch;
	margin-inline: auto;
	font-size: 16.5px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.84);
}

.hm-page .hm-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.hm-page .hm-stat {
	gap: 6px;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	text-align: center;
}

.hm-page .hm-stat-n {
	font-family: var(--hm-display);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--hm-cyan-soft);
}

.hm-page .hm-stat-l {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

/* Affiliate */

.hm-page .hm-panel {
	padding: clamp(30px, 4vw, 52px);
	border: 1.5px solid var(--hm-line);
	border-radius: 20px;
	background: var(--hm-surface);
}

.hm-page .hm-affiliate .hm-lead {
	max-width: 52ch;
	margin-inline: auto;
}

.hm-page .hm-perks {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin-block: 6px;
}

.hm-page .hm-perk {
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--hm-cyan-tint);
	color: var(--hm-teal);
	font-family: var(--hm-display);
	font-size: 13px;
	font-weight: 600;
}

.hm-page .hm-facts {
	display: grid;
	gap: 12px;
}

.hm-page .hm-fact {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1.5px solid var(--hm-line);
	border-radius: 14px;
	background: #fff;
}

.hm-page .hm-fact-lead {
	border-color: var(--hm-cyan-soft);
	background: var(--hm-cyan-tint);
}

.hm-page .hm-fact-copy {
	gap: 3px;
	text-align: center;
}

.hm-page .hm-fact-name {
	font-family: var(--hm-display);
	font-size: 16.5px;
	font-weight: 600;
}

.hm-page .hm-fact-dek {
	font-size: 13.5px;
	color: var(--hm-muted);
}

.hm-page .hm-fact-val {
	font-family: var(--hm-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--hm-teal);
	white-space: nowrap;
}

/* Wholesale */

.hm-page .hm-wholesale {
	padding-bottom: 0;
}

.hm-page .hm-panel-dark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: clamp(30px, 4vw, 52px);
	border-radius: 20px;
	background-color: var(--hm-navy);
	background-image:
		radial-gradient(80% 90% at 8% 100%, rgba(31, 200, 227, 0.34) 0%, rgba(31, 200, 227, 0) 62%),
		radial-gradient(70% 80% at 100% 0%, rgba(111, 228, 242, 0.26) 0%, rgba(31, 200, 227, 0) 66%);
	color: #fff;
	text-align: center;
}

.hm-page .hm-panel-dark .hm-h2 {
	max-width: 26ch;
}

.hm-page .hm-ws-stats {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 4px;
}

.hm-page .hm-ws-item {
	gap: 3px;
	align-items: center;
}

.hm-page .hm-ws-n {
	font-family: var(--hm-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--hm-cyan-soft);
}

.hm-page .hm-ws-l {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.78);
}

/* -------------------------------------------------------------------------
   FAQ
   ---------------------------------------------------------------------- */

.hm-page .hm-faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 860px;
	margin-inline: auto;
	width: 100%;
}

.hm-page .hm-faq {
	border: 1.5px solid var(--hm-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	text-align: center;
	transition: border-color 0.15s ease;
}

.hm-page .hm-faq[open] {
	border-color: var(--hm-cyan-soft);
}

.hm-page .hm-faq summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 19px 56px;
	list-style: none;
	cursor: pointer;
	font-family: var(--hm-display);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hm-navy);
}

/* Safari still paints the disclosure triangle unless this is spelled out. */
.hm-page .hm-faq summary::-webkit-details-marker {
	display: none;
}

/* The chevron: an inline SVG data URI so the summary stays plain editable
   text — an <svg> child would be stripped by the block editor. */
.hm-page .hm-faq summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 21px;
	transform: translateY(-50%);
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--hm-cyan-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231b7fa8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.18s ease;
}

.hm-page .hm-faq[open] summary::after {
	transform: translateY(-50%) rotate(180deg);
}

.hm-page .hm-faq-a {
	padding: 0 21px 21px;
	text-align: center;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--hm-muted);
}

/* -------------------------------------------------------------------------
   Closing CTA
   ---------------------------------------------------------------------- */

.hm-page .hm-cta {
	background: var(--hm-cyan-soft);
	color: var(--hm-navy);
}

.hm-page .hm-cta-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.hm-page .hm-cta .hm-kick {
	color: var(--hm-navy);
}

.hm-page .hm-cta .hm-h2 {
	max-width: 22ch;
}

.hm-page .hm-cta-p {
	max-width: 56ch;
	font-size: 16.5px;
	line-height: 1.6;
}

.hm-page .hm-cta .hm-sec-cta {
	margin-top: 16px;
}

/* -------------------------------------------------------------------------
   Narrow screens
   ---------------------------------------------------------------------- */

@media (max-width: 880px) {

	.hm-page .hm-split {
		grid-template-columns: 1fr;
	}
}

/* Tablet portrait. The split sections have already stacked at 880px, so the
   only thing left is the stats pair, which is fine two-up in a full-width
   column. */
@media (max-width: 781px) {

	.hm-page .hm-stats {
		grid-template-columns: 1fr;
	}
}

/* Phones. max(420px, 31.25vw) resolves to 420px here, which is shorter than
   the hero's own stacked content, so the floor is raised rather than dropped. */
@media (max-width: 599px) {

	.hm-page .hm-hero {
		min-height: 520px;
	}

	/* Phones crop the 3.2:1 footage hard, so the copy lands on whatever slice
	   of frame happens to be centred rather than on the composed shot. A 10%
	   navy wash steadies that without reading as a scrim. Literal rgba because
	   --hm-navy (#2b3754) is a hex token, not channels. */
	.hm-page .hm-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: rgba(43, 55, 84, 0.1);
		pointer-events: none;
	}

	/* Full-width CTAs are a phone affordance. Left on at tablet widths they
	   stretch to ~345px each and read as two slabs. */
	/* The hero body centres its children, so the button row shrinks to its
	   content unless it is told to fill — without this the "full width"
	   buttons stop short of the gutter. */
	.hm-page .hm-hero-cta,
	.hm-page .hm-hero-cta .wp-block-button,
	.hm-page .hm-hero-cta .wp-block-button__link {
		width: 100%;
	}

	/* 56px of padding on both sides of a summary leaves a 320px screen 168px
	   of text, so every question wraps to two lines. The chevron is absolute
	   and only needs clearance on the right, but the padding stays symmetric
	   or the centred question drifts off-axis. */
	.hm-page .hm-faq summary {
		padding-inline: 42px;
		font-size: 15.5px;
	}

	.hm-page .hm-faq summary::after {
		right: 12px;
	}

	/* Name, description and value cannot share a row this narrow. */
	.hm-page .hm-fact {
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}
}