/* Stage B Wave 4: shared product mastheads, compact page density and accessible controls. */

/* Masthead consistency correction (2026-08-06): ONE canonical outer-shell
   rule (width/gutter from --hp-shell-max-width/--hp-shell-gutter in
   tokens.css), shared by every page-content wrapper AND the masthead
   itself. Previously this exact width formula was duplicated three times
   (here, on .hp-content-surface, and implicitly nowhere at all for
   Directory's masthead, which rendered with no wrapper -- full-bleed).
   Giving .hp-page-masthead/.hp-utility-masthead this same rule directly
   (see their own definitions) makes them self-contained: correct even
   when, like Directory, nothing wraps them.

   Standard-masthead spacing correction (2026-08-07): the header-to-masthead
   gap used to live HERE, as this wrapper's own top padding -- but not every
   page that renders a masthead actually has this wrapper (What's On, Free
   Tools and Directory all render their masthead outside it, confirmed by a
   direct per-page audit), so those pages fell through to 0px while pages
   that DID have this wrapper got a real gap, and several more pages added
   their own separate, differently-sized top-padding formula to compensate.
   The header-to-masthead gap now lives as `.hp-page-masthead`'s own
   margin-block-start (below) instead, since the masthead itself is the one
   thing every one of these pages genuinely has in common -- this wrapper
   keeps only the bottom-of-page padding it was always meant to own. */
.hp-product-page .site-main,
.hp-content-surface {
	width: min( 100% - var( --hp-shell-gutter ) * 2, var( --hp-shell-max-width ) );
	margin-inline: auto;
	padding-block: 0 64px;
}

/* The masthead is exempt, and this is the whole reason the bug existed.
   The comment above moved the header-to-masthead gap OUT of this wrapper and
   onto `.hp-page-masthead`'s own margin-block-start, precisely because not
   every page wraps its masthead in `.page-content`. On the pages that DO --
   /submit-private-post/ among them -- the masthead is `.page-content`'s
   first child, so this rule then zeroed the very margin that refactor had
   just made the single source of truth. The pages named in that comment as
   rendering their masthead outside the wrapper (What's On, Free Tools,
   Directory) were unaffected, which is why the gap looked correct almost
   everywhere and tight on a handful of pages.
   Zeroing still applies to any other first child; the masthead owns its own
   top spacing by design. */
.hp-product-page .page-content,
.hp-product-page .page-content > :first-child:not( .hp-page-masthead ) {
	margin-top: 0;
}

/* Page atmosphere is owned by page-experience.css. The old blurred body
   pseudo-element produced a grey band behind otherwise dark mastheads. */
body:has(.hp-page-masthead) { position:relative; }

.hp-page-masthead {
	/* Wave 8 launch convergence: one unboxed page-title system. Decorative
	   families still supply their restrained tint, while structure now has
	   two explicit modes: centred public introductions and compact
	   record/account introductions. */
	--hp-masthead-glow: rgba( 139, 92, 246, 0.24 );
	--hp-masthead-tint: var( --hp-color-primary-100 );
	--hp-masthead-dot: linear-gradient( 135deg, var( --hp-color-primary-400 ), var( --hp-color-primary-700 ) );

	position: relative;
	isolation: isolate;
	display: grid;
	gap: 12px;
	width: min( 100% - var( --hp-shell-gutter ) * 2, var( --hp-shell-max-width ) );
	margin-inline: auto;
	/* Standard-masthead spacing correction (2026-08-07): the masthead is the
	   one element every standard page genuinely has -- unlike its outer
	   wrapper (see the comment above `.hp-content-surface`), it renders
	   identically whether the page wraps it in `.hp-content-surface`, prints
	   it before `<main>` even opens (Directory), or wraps it in nothing at
	   all (What's On, Free Tools). Giving it both a real top AND bottom
	   margin here, matching the SAME clamp values `.hp-content-surface` used
	   to apply as top padding, makes "header/nav -> gap -> masthead -> gap ->
	   first content section" one rule instead of up to six different
	   page-specific formulas. */
	margin-block: clamp( 24px, 5vw, 56px ) clamp( 20px, 3vw, 34px );
	padding: clamp( 24px, 4.5vw, 52px ) clamp( 16px, 5vw, 64px );
}

/* The atmosphere/glow layer lives once, on the shared page surface --
   `body:has(.hp-page-masthead)::before`, near the top of this file (see the
   round-5 comment above `.hp-content-surface`) -- not here. This component
   stays fully transparent and only controls its own spacing/typography. */

.hp-page-masthead--layout-standard {
	justify-items: center;
	text-align: center;
}

.hp-page-masthead--layout-standard .hp-page-masthead__intro {
	margin-inline: auto;
}

.hp-page-masthead--layout-standard .hp-page-masthead__signals,
.hp-page-masthead--layout-standard .hp-page-masthead__actions {
	justify-content: center;
}

.hp-page-masthead--layout-compact {
	gap: 8px;
	margin-block: clamp( 18px, 3vw, 34px ) clamp( 16px, 2.5vw, 26px );
	padding: clamp( 18px, 3vw, 30px ) clamp( 4px, 2vw, 18px );
}

.hp-page-masthead--layout-compact h1 {
	max-width: 850px;
	font-size: clamp( 1.75rem, 4vw, 2.65rem );
	line-height: 1.08;
}

.hp-page-masthead--layout-compact .hp-page-masthead__intro {
	max-width: 760px;
}

/*
 * Masthead theme family (masthead consistency correction, 2026-08-06):
 * a small, approved set of restrained visual identities, each mapped to
 * real page families so related pages share one look -- never a one-off
 * per route. Every theme only touches --hp-masthead-glow/tint/ring/dot;
 * the structural rules above (width, padding, radius, border, type
 * scale) are identical for all of them.
 *
 *   discovery  (default, no block needed) -- Directory, Discover
 *   opportunity -- HertsJobs board + job detail pages
 *   reward      -- HertsOffers board + offer detail pages
 *   community   -- Volunteering board + volunteering detail pages
 *   energetic   -- What's On / event pages
 *   editorial   -- Local Updates
 *   tools       -- Free Tools
 *   calm        -- Add Your Business, My Account, Contact, Help Centre
 */
.hp-page-masthead--theme-opportunity {
	--hp-masthead-glow: rgba( 184, 144, 31, 0.16 );
	--hp-masthead-dot: linear-gradient( 135deg, var( --hp-accent-gold ), var( --hp-color-primary-700 ) );
}

.hp-page-masthead--theme-reward {
	--hp-masthead-glow: rgba( 194, 118, 10, 0.16 );
	--hp-masthead-dot: linear-gradient( 135deg, var( --hp-accent-amber ), var( --hp-color-primary-700 ) );
}

.hp-page-masthead--theme-community {
	--hp-masthead-glow: rgba( 168, 85, 110, 0.16 );
	--hp-masthead-dot: linear-gradient( 135deg, var( --hp-accent-rose ), var( --hp-color-primary-700 ) );
}

.hp-page-masthead--theme-energetic {
	--hp-masthead-glow: rgba( 192, 95, 60, 0.18 );
	--hp-masthead-dot: linear-gradient( 135deg, var( --hp-accent-coral ), var( --hp-color-primary-700 ) );
}

.hp-page-masthead--theme-editorial {
	--hp-masthead-glow: rgba( 51, 48, 143, 0.14 );
	--hp-masthead-dot: linear-gradient( 135deg, var( --hp-accent-ink ), var( --hp-color-primary-900 ) );
}

.hp-page-masthead--theme-tools {
	--hp-masthead-glow: rgba( 37, 107, 108, 0.16 );
	--hp-masthead-dot: linear-gradient( 135deg, var( --hp-accent-teal ), var( --hp-color-primary-700 ) );
}

.hp-page-masthead--theme-calm {
	--hp-masthead-glow: rgba( 139, 92, 246, 0.12 );
	--hp-masthead-dot: linear-gradient( 135deg, var( --hp-color-primary-400 ), var( --hp-color-primary-700 ) );
}

@media ( prefers-color-scheme: dark ) {
	/* No site-wide dark theme currently exists (confirmed: no colour-scheme
	   toggle or dark stylesheet anywhere in this theme) -- this only
	   prevents the masthead specifically from looking broken if a visitor's
	   OS/browser forces dark rendering, by deepening the glow/ring opacity
	   slightly so the accent stays visible against a browser-forced dark
	   canvas. It does not attempt a full dark-mode redesign of the page. */
	.hp-page-masthead {
		--hp-masthead-tint: var( --hp-color-primary-200 );
	}
}

.hp-page-masthead__back {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 0 0 4px;
	color: var( --hp-color-primary-700 );
	font-size: 0.85rem;
	font-weight: 650;
	text-decoration: none;
}

.hp-page-masthead__back:hover,
.hp-page-masthead__back:focus-visible {
	text-decoration: underline;
}

.hp-page-masthead__status {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
}

.hp-page-masthead--layout-standard .hp-page-masthead__status {
	margin-inline: auto;
}

.hp-page-masthead__status--closed {
	background: rgba( 107, 114, 128, 0.14 );
	color: var( --hp-color-body );
}

.hp-page-masthead__status--warning {
	background: #fef3c7;
	color: #92400e;
}

.hp-page-masthead__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin: 0;
	color: var( --hp-color-primary-700 );
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1.25;
	text-transform: uppercase;
}

.hp-page-masthead__eyebrow::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: var( --hp-masthead-dot );
	box-shadow: 0 0 0 5px rgba( 124, 58, 237, 0.11 );
}

.hp-page-masthead h1 {
	max-width: 780px;
	margin: 0;
	color: var( --hp-color-ink );
	font-family: var( --hp-font-heading );
	font-size: clamp( 2rem, 5vw, 3.45rem );
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.02;
}

.hp-page-masthead__intro {
	max-width: 690px;
	margin: 0;
	color: var( --hp-color-body );
	font-size: clamp( 1rem, 2vw, 1.16rem );
	line-height: 1.62;
}

.hp-page-masthead__signals {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

.hp-page-masthead__signal {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 5px 11px;
	border: 1px solid rgba( 124, 58, 237, 0.18 );
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.72 );
	color: var( --hp-color-primary-900 );
	font-size: 0.78rem;
	font-weight: 650;
}

.hp-page-masthead__signal--link {
	text-decoration: none;
}

.hp-page-masthead__signal--link:hover,
.hp-page-masthead__signal--link:focus-visible {
	background: rgba( 255, 255, 255, 0.95 );
	border-color: rgba( 124, 58, 237, 0.36 );
}

.hp-page-masthead__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

.hp-page-masthead__actions .hp-c-btn {
	min-height: 44px;
}

.hp-board-results-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
	color: var( --hp-color-body );
	font-size: 0.9rem;
}

.hp-board-results-summary strong {
	color: var( --hp-color-ink );
}

.hp-product-page :where( a, button, input, select, textarea ):focus-visible {
	outline: 3px solid var( --hp-color-primary-400 );
	outline-offset: 3px;
}

/* Site-wide page-introduction audit (2026-08-06): the "minimal" tier for
 * private account/dashboard/utility pages -- same tokens as the full
 * masthead (gutters, type scale, colours), no card/gradient/imagery, and
 * deliberately shallow so working dashboard content isn't pushed down. */
.hp-utility-masthead {
	/* Masthead consistency correction (2026-08-06): private/dashboard pages
	   stay deliberately more restrained than the public gradient-card
	   mastheads -- no card background, no decorative ring -- but a plain
	   bottom-border alone still read as "unstyled", not "intentionally
	   calm". A faint tint + a coloured accent rule (same family the public
	   mastheads use, at low opacity) gives it a considered identity
	   without competing with the working content beneath it. Same
	   canonical shell width as every other masthead -- was previously left
	   to inherit whatever ambient Elementor content width wrapped it. */
	width: min( 100% - var( --hp-shell-gutter ) * 2, var( --hp-shell-max-width ) );
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 20px;
	margin-block: 0 clamp( 16px, 3vw, 22px );
	padding: 14px 18px 16px;
	border-bottom: 2px solid color-mix( in srgb, var( --hp-color-primary-400 ) 52%, transparent );
	background: linear-gradient( 90deg, color-mix( in srgb, var( --hp-color-primary-100 ) 70%, transparent ) 0%, transparent 84% );
}

.hp-utility-masthead__heading {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.hp-utility-masthead__eyebrow {
	margin: 0;
	color: var( --hp-color-primary-700 );
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hp-utility-masthead h1 {
	margin: 0;
	color: var( --hp-color-ink );
	font-family: var( --hp-font-heading );
	font-size: clamp( 1.5rem, 3.2vw, 2.1rem );
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.hp-utility-masthead__subtitle {
	margin: 0;
	max-width: 62ch;
	color: var( --hp-color-body );
	font-size: 0.95rem;
	line-height: 1.5;
}

.hp-utility-masthead__action {
	flex-shrink: 0;
	min-height: 44px;
}

@media ( max-width: 599px ) {
	.hp-utility-masthead {
		align-items: stretch;
	}

	.hp-utility-masthead__action {
		width: 100%;
		text-align: center;
	}
}

.hp-content-surface__body {
	min-width: 0;
}

.hp-context-page--advertise-with-hertspartners .site-main,
.hp-context-page--help-centre .site-main,
.hp-context-page--select-your-plan-2 .site-main {
	padding-top: 0;
}

/*
 * L01.1 (2026-09-12): the listing-package grid's own section heading. Kept
 * deliberately quiet -- the compact masthead above is the page's voice, and
 * this only needs to name the group of cards below it and restore the
 * heading step Directorist's stored markup skips.
 */
.hp-plan-grid-heading {
	margin: 0 0 1rem;
	font-size: clamp( 1.05rem, 0.98rem + 0.35vw, 1.25rem );
	font-weight: 650;
	line-height: 1.3;
	color: var( --hp-page-ink, inherit );
}

.hp-context-page--select-your-plan-2 #directorist-pricing-plan-container .directorist-container {
	margin-top: 0;
}

.hp-context-page--advertise-with-hertspartners .page-header,
.hp-context-page--help-centre .page-header {
	display: none;
}

.hp-context-gate {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: clamp( 16px, 3vw, 28px );
	align-items: start;
	padding: clamp( 20px, 4vw, 36px );
	border: 1px solid var( --hp-color-primary-200 );
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 18px 50px rgba( 76, 29, 149, 0.08 );
}

.hp-context-gate__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: linear-gradient( 135deg, var( --hp-color-primary-500 ), var( --hp-color-primary-700 ) );
	color: #fff;
	/*
	 * The plus is DRAWN, not typed. A glyph is centred by its font metrics
	 * rather than by its ink, and "+" sits high in its own em box, so a text
	 * plus reads as visibly off-centre in a 52px tile no matter how the box
	 * is aligned. Two bars are centred by construction and cannot drift with
	 * a font change. The "+" character stays in the markup (harmless, and it
	 * is what a copy-paste or a text-only render still produces) but is not
	 * what is displayed.
	 */
	font-size: 0;
	line-height: 0;
}

.hp-context-gate__icon::before,
.hp-context-gate__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	border-radius: 2px;
	transform: translate( -50%, -50% );
}

.hp-context-gate__icon::before { width: 20px; height: 3px; }
.hp-context-gate__icon::after { width: 3px; height: 20px; }

.hp-context-gate h2 {
	margin: 0 0 8px;
	color: var( --hp-color-ink );
	font-size: clamp( 1.35rem, 3vw, 1.8rem );
}

.hp-context-gate p {
	max-width: 64ch;
	margin: 0;
	color: var( --hp-color-body );
	line-height: 1.65;
}

.hp-context-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

/* Site-wide page-introduction audit (2026-08-06): the theme's own single-record
 * pages (What's On events, standalone offers) previously rendered as raw
 * unstyled HTML below their masthead -- no card, no spacing, no image
 * treatment -- unlike every other detail-style page on the platform. This
 * gives them the same body polish the Partner Hub marketplace detail pages
 * already have via public.css, using the theme's own shared tokens. */
.hp-detail-body {
	max-width: 760px;
}

.hp-detail-body__image {
	margin: 0 0 clamp( 18px, 3vw, 28px );
	border-radius: 18px;
	overflow: hidden;
}

.hp-detail-body__image img {
	display: block;
	width: 100%;
	height: auto;
}

.hp-detail-body__content {
	margin: 0 0 clamp( 18px, 3vw, 28px );
	color: var( --hp-color-body );
	line-height: 1.65;
}

.hp-detail-body__section {
	margin: 0 0 clamp( 18px, 3vw, 28px );
	padding: clamp( 16px, 3vw, 24px );
	border: 1px solid var( --hp-color-border );
	border-radius: 16px;
	background: var( --hp-color-surface-muted, #f8f8fb );
}

.hp-detail-body__section h2 {
	margin: 0 0 8px;
	font-size: 1.15rem;
}

.hp-detail-body__section p {
	margin: 0;
	color: var( --hp-color-body );
}

.hp-detail-body__facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 8px 16px;
	margin: 0 0 clamp( 18px, 3vw, 28px );
}

.hp-detail-body__facts dt {
	color: var( --hp-color-body );
	font-weight: 700;
}

.hp-detail-body__facts dd {
	margin: 0;
	color: var( --hp-color-body );
}

.hp-detail-body__actions {
	margin: 0 0 clamp( 16px, 3vw, 24px );
}

.hp-detail-body__actions .hp-c-btn {
	min-height: 44px;
}

@media ( max-width: 599px ) {
	.hp-detail-body__facts {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.hp-detail-body__facts dd {
		margin-bottom: 10px;
	}
}

.hp-context-page--account .hp-content-surface__body {
	padding: clamp( 16px, 3vw, 28px );
	border: 1px solid var( --hp-color-border );
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 14px 45px rgba( 31, 41, 55, 0.06 );
}

/* The Help Hub stylesheet historically referenced --hp-space-5, which is not
 * part of the real token scale. Give the live cards an explicit, responsive
 * gap and internal rhythm so their text never touches neighbouring borders. */
.hp-context-page--help-centre .hp-help__grid {
	gap: clamp( 14px, 2vw, 22px );
	margin-block: clamp( 20px, 3vw, 30px );
}

.hp-context-page--help-centre .hp-help__card {
	padding: clamp( 20px, 3vw, 28px );
}

.hp-context-page--help-centre .hp-help__card h2 {
	margin: 0 0 12px;
	font-size: clamp( 1.35rem, 2.4vw, 1.7rem );
	line-height: 1.15;
}

.hp-context-page--help-centre .hp-help__card p {
	margin: 0 0 14px;
	line-height: 1.58;
}

.hp-context-page--help-centre .hp-help__card ul {
	margin: 0;
	padding-left: 1.25rem;
}

.hp-context-page--help-centre .hp-help__card li + li {
	margin-top: 4px;
}

/* Stage B V43: these are real navigational links (Account and preferences,
 * CV Creator, etc.), not decoration -- they had no touch-target sizing at
 * all, unlike the card/heading chrome around them. */
.hp-context-page--help-centre .hp-help__card li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.hp-context-page :where( button, input, select, textarea, .hp-c-btn ):focus-visible {
	outline: 3px solid var( --hp-color-primary-400 );
	outline-offset: 3px;
}

@media ( max-width: 699px ) {
	.hp-product-page .site-main,
	.hp-content-surface,
	.hp-page-masthead,
	.hp-utility-masthead {
		width: min( 100% - var( --hp-shell-gutter-mobile ) * 2, var( --hp-shell-max-width ) );
	}

	.hp-product-page .site-main,
	.hp-content-surface {
		padding-top: 18px;
	}

	/* Wave 6 mobile touch-target audit (2026-08-20): base .hp-page-masthead__signal
	   is 32px, shared by every layout/width and also used for non-interactive
	   labels (e.g. Directory's "Free to browse" pill) -- scoped to the
	   interactive --link variant only, mobile-only, so plain labels stay their
	   intended compact size. */
	.hp-page-masthead__signal--link {
		min-height: 44px;
	}

	/*
	 * Owner mobile-density correction (2026-08-19): "the thing the user came
	 * to see must appear immediately" -- a real audit of HertsJobs/Account
	 * on phone widths found the masthead alone (eyebrow + huge H1 + full
	 * subtitle + 3 trust pills + a full-size CTA) consuming the entire
	 * first viewport before a single real result was visible. The
	 * Directory-only fix below (line-clamp intro, drop signals) was correct
	 * but never generalised -- every other archive/discovery page (Jobs,
	 * HertsOffers, What's On, Local Updates) still rendered at close to
	 * desktop scale. This block now applies that same discipline to every
	 * STANDARD-layout masthead (the public archive/discovery family), not
	 * just Directory. Heartbeat does not use this component at all (its own
	 * .hp-heartbeat__hero), so it is untouched by definition -- it is the
	 * owner's own explicit density benchmark and must stay that way.
	 */
	.hp-page-masthead {
		gap: 6px;
		margin-block: 8px 10px;
		padding: 16px;
	}

	/*
	 * Owner correction (2026-08-20): real 375px measurement on HertsJobs
	 * (getBoundingClientRect) found the first job card starting at y=531 of
	 * an 812px viewport -- title/employer/location genuinely visible without
	 * scrolling, but the salary line just past the fold, with masthead +
	 * quick-filter row + this results-count line consuming the rest. This
	 * and the masthead margin-block trim above are real, measured, low-risk
	 * whitespace-only reductions (no element removed or resized) that bring
	 * the fully-visible-card point meaningfully closer to the top.
	 */
	.hp-board-results-summary {
		margin-bottom: 8px;
	}

	.hp-page-masthead--layout-standard h1 {
		/* Was clamp(2rem, 11vw, 2.85rem) -- rendered at 43-46px on a typical
		   390-430px phone, effectively desktop scale. Confident but no
		   longer a billboard: real minimum lowered, vw rate halved. */
		font-size: clamp( 1.5rem, 7vw, 1.9rem );
		line-height: 1.08;
	}

	.hp-page-masthead--layout-standard .hp-page-masthead__intro {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 0.94rem;
		line-height: 1.45;
	}

	/* Trust-signal pills ("Free to browse", "Reviewed before publishing"...)
	   repeat what the intro sentence already states -- the one safe thing
	   to drop on every standard masthead so real content starts sooner,
	   generalising the Directory-only precedent this rule used to be. */
	.hp-page-masthead--layout-standard .hp-page-masthead__signals {
		display: none;
	}

	/* A single full-size CTA (e.g. "Post a Job", "Submit an event") inside
	   the masthead read as "giant purple button before I've seen anything
	   real" -- kept, but sized down to a genuinely secondary footprint here;
	   the page's own primary content (search, filters, results) still
	   carries full-size controls of its own below. */
	.hp-page-masthead--layout-standard .hp-page-masthead__actions {
		margin-top: 2px;
	}

	.hp-page-masthead--layout-standard .hp-page-masthead__actions .hp-c-btn {
		/* Wave 6 app-readiness audit (2026-08-20): was 40px, 4px under the
		   documented D004 44px touch-target minimum -- the "secondary
		   footprint" intent above still holds at 44px, a barely-perceptible
		   4px difference, so this keeps that intent while meeting the
		   standard rather than trading one against the other. */
		min-height: 44px;
		padding: 8px 16px;
		font-size: 0.88rem;
	}

	/*
	 * Compact-layout mastheads (single-record detail pages, My Account,
	 * Contact, Help Centre) are ALREADY smaller by design on desktop -- but
	 * on mobile, the generic `.hp-page-masthead h1` rule that used to live
	 * here won on source order (equal specificity, defined later in the
	 * file) and silently overrode the compact layout's own smaller desktop
	 * h1, so a compact-layout title actually rendered LARGER on mobile than
	 * its own desktop rule intended -- confirmed live: this is exactly the
	 * "Keep useful local things together" multi-line-billboard symptom on
	 * My Account. Fixed with its own explicit, smaller mobile rule so it
	 * can never again be silently overridden by the standard-layout one.
	 */
	.hp-page-masthead--layout-compact h1 {
		font-size: clamp( 1.35rem, 6vw, 1.65rem );
		line-height: 1.12;
	}

	.hp-page-masthead--layout-compact .hp-page-masthead__intro {
		font-size: 0.92rem;
		line-height: 1.4;
	}

	.hp-page-masthead__signals {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 2px;
	}

	.hp-context-gate {
		grid-template-columns: 1fr;
	}

	.hp-context-gate__actions {
		flex-direction: column;
	}

	.hp-context-gate__actions .hp-c-btn {
		width: 100%;
		min-height: 46px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hp-page-masthead,
	.hp-page-masthead * {
		scroll-behavior: auto;
	}
}