/* BJP homepage — CreaFide, Figma frames:
     hero panel 4027:226             (1440x756, the header floating over it)
     hero rest  "Frame 14" 6081:191  (video band and framework)
     authority  33:151               (1440x363)
     process    52:84                (1440x934)
     partner    60:84                (1440x406)

   Shared tokens live on .bjp-home; each section owns its own geometry. */

.bjp-home {
	/* --- shared tokens ------------------------------------------------- */
	--bjp-color-text: #231F20;
	--bjp-color-primary: #156082;
	--bjp-color-primary-hover: #0f4a63;
	--bjp-color-accent: #67C7C7;
	--bjp-color-border: #EAECF0;
	--bjp-color-band: rgba(234, 236, 240, 0.55);
	--bjp-font: 'Manrope', -apple-system, Roboto, Helvetica, sans-serif;

	/* Height of the header the hero overlays. Matches header.css: 84px,
	   dropping to 72px at the 560px breakpoint. */
	--bjp-header-h: 84px;
	--bjp-pad-x: clamp(20px, 5.5556vw, 80px);

	box-sizing: border-box;
	font-family: var(--bjp-font);
	color: var(--bjp-color-text);
	background: #ffffff;
}

/* Break out of Astra's / Elementor's content container so the artwork reaches
   both edges of the viewport. The doubled class raises specificity past
   `.entry-content[data-ast-blocks-layout] > *`, which otherwise forces
   `margin-left: auto` and a content-width max-width onto the wrapper. */
.bjp-home.bjp-home {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Off the homepage the header sits in normal flow, so there is nothing to
   reserve space for. */
.bjp-header-solid .bjp-home {
	--bjp-header-h: 0px;
}

.bjp-home *,
.bjp-home *::before,
.bjp-home *::after {
	box-sizing: border-box;
}

/* Figma's frames are a fixed 1440 with 80px gutters; cap content at that
   1280px column and centre it on wider viewports. */
.bjp-home__container {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* Outranks Astra's `.entry-content a`, which underlines every link inside
   post content. */
.bjp-home a.bjp-hero__button,
.bjp-home a.bjp-hero__button:hover,
.bjp-home a.bjp-hero__button:focus,
.bjp-home a.bjp-process__cta,
.bjp-home a.bjp-process__cta:hover,
.bjp-home a.bjp-process__cta:focus,
.bjp-home a.bjp-partner__cta-button,
.bjp-home a.bjp-partner__cta-button:hover,
.bjp-home a.bjp-partner__cta-button:focus {
	text-decoration: none;
}

/* Shared arrow_forward glyph (Figma component 6:19). */
.bjp-home__arrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* ======================================================================
   HERO — photo panel 756 / video band / framework 852

   BJP-13 replaced the molecule artwork with the swimmer photograph
   (node 4027:226) and the three trust-badge placeholders with a video, so
   nothing bleeds between the three blocks any more: each one clips its own
   content and the section no longer reserves header height, because the
   photograph is meant to run up under the transparent header.
   ====================================================================== */

.bjp-hero {
	--bjp-hero-panel-h: 756px;
	--bjp-hero-pad-y: 128px;
	--bjp-hero-video-pad: 96px;
	--bjp-hero-framework-h: 852px;

	position: relative;
}

/* --- hero panel -------------------------------------------------------- */

.bjp-hero__panel {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	/* Figma's 756px frame is measured from the very top of the page, with the
	   84px header floating over it, so the header height is inside this box
	   rather than added above it. */
	min-height: var(--bjp-hero-panel-h);
	padding: calc(var(--bjp-hero-pad-y) + var(--bjp-header-h)) var(--bjp-pad-x) var(--bjp-hero-pad-y);
	overflow: hidden;
	background: var(--bjp-color-text);
}

/* The photograph is 1440x756 — the frame's exact size — so on anything wider
   it is the cover crop that keeps the swimmer in frame, not an upscale of a
   larger source.

   Scoped to .bjp-home to outrank Elementor's `.elementor img { height: auto }`,
   which otherwise leaves the image at its own aspect ratio. At 1440 that is
   exactly the 756px panel height, so the bug only shows once the viewport
   stops matching the artwork. */
.bjp-home .bjp-hero__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Figma's flat rgba(35,31,32,0.40) layer over the photograph. */
.bjp-hero__panel::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(35, 31, 32, 0.40);
	pointer-events: none;
}

.bjp-hero__panel-inner {
	position: relative;
	z-index: 1; /* Above the photograph and its overlay. */
	display: flex;
	align-items: center;
}

.bjp-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	max-width: 653px; /* Figma text column. */
}

.bjp-hero__heading-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;
}

.bjp-hero__title {
	/* 82px at 1440 down to 36px on mobile; -0.02em reproduces both the
	   -1.64px desktop and -0.72px mobile letter-spacing exactly. */
	margin: 0;
	/* Figma gives the heading its own 800px width, wider than the 653px text
	   column, so the two authored lines never wrap a third time. */
	width: max-content;
	max-width: min(800px, calc(100vw - 2 * var(--bjp-pad-x)));
	font-family: var(--bjp-font);
	font-size: clamp(36px, 5.6944vw, 82px);
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.bjp-hero__description {
	margin: 0;
	align-self: stretch;
	font-family: var(--bjp-font);
	font-size: clamp(16px, 1.25vw, 18px);
	font-weight: 400;
	line-height: 28px;
	color: #ffffff;
}

/* --- hero buttons ------------------------------------------------------ */

.bjp-hero__actions {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

/* The process CTA is the same button as the hero's, in another section, so it
   shares the rules rather than restating them. */
.bjp-hero__button,
.bjp-process__cta {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 8px;
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bjp-hero__button--primary,
.bjp-hero__button--primary:visited,
.bjp-process__cta,
.bjp-process__cta:visited {
	background-color: var(--bjp-color-primary);
	border: 1px solid var(--bjp-color-primary);
	color: #ffffff;
}

.bjp-hero__button--primary:hover,
.bjp-hero__button--primary:focus-visible,
.bjp-process__cta:hover,
.bjp-process__cta:focus-visible {
	background-color: var(--bjp-color-primary-hover);
	border-color: var(--bjp-color-primary-hover);
	color: #ffffff;
}

/* No fill on this one in Figma — the photograph shows through, so the outline
   and the label are white against it. */
.bjp-hero__button--secondary,
.bjp-hero__button--secondary:visited {
	background-color: transparent;
	border: 1px solid #ffffff;
	color: #ffffff;
}

.bjp-hero__button--secondary:hover,
.bjp-hero__button--secondary:focus-visible {
	background-color: #ffffff;
	color: var(--bjp-color-text);
}

/* --- hero video band --------------------------------------------------- */

/* Replaces the three trust-badge placeholders (BJP-13). The band keeps the
   badges' tint so the strip still reads as its own block between the photo
   panel and the framework. */
.bjp-hero__video {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	padding: var(--bjp-hero-video-pad) var(--bjp-pad-x);
	background: var(--bjp-color-band);
}

/* 16:9, capped so a full-width player does not push the framework a screen and
   a half down on a large monitor. */
.bjp-hero__video-frame {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: var(--bjp-color-text);
}

.bjp-hero__video-frame video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The uploaded file rarely matches 16:9 exactly; contain keeps it whole
   inside the frame instead of cropping the top and bottom off. */
.bjp-hero__video-player {
	object-fit: contain;
	background: var(--bjp-color-text);
}

/* Same dashed treatment the badge placeholders used, so an unset video still
   reads as "content goes here" rather than as a broken player. */
.bjp-hero__video-placeholder {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 10px;
	border: 1px dashed #ffffff;
	border-radius: 10px;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	line-height: normal;
	color: #ffffff;
}

/* --- hero verification framework -------------------------------------- */

.bjp-hero__framework {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	min-height: var(--bjp-hero-framework-h);
	padding: var(--bjp-hero-pad-y) var(--bjp-pad-x);
}

.bjp-hero__framework > .bjp-home__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
}

.bjp-hero__framework-intro {
	display: flex;
	align-items: center;
	gap: 80px;
	align-self: stretch;
}

/* A column since BJP-13: the statement, then the Verify My Batch CTA. */
.bjp-hero__framework-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 32px;
	flex: 1 1 0;
	min-width: 0;
}

.bjp-hero__framework-statement {
	margin: 0;
	align-self: stretch;
	font-family: var(--bjp-font);
	/* 48px/60px at 1440; -0.02em gives Figma's -0.96px. */
	font-size: clamp(28px, 3.3333vw, 48px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

.bjp-hero__brand {
	font-weight: 700;
	color: var(--bjp-color-accent);
}

.bjp-hero__framework-logo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
}

/* 600x165 in Figma; aspect-ratio keeps that geometry explicit when the column
   narrows rather than leaving it to the intrinsic size. */
.bjp-hero__framework-logo img {
	display: block;
	width: 600px;
	max-width: 100%;
	aspect-ratio: 600 / 165;
	height: auto;
}

/* Four 320px cards fill the 1280px column exactly, with no gap — Figma's
   strokes are inside the nodes, so the shared edges read as seams. */
.bjp-hero__pillars {
	display: flex;
	align-items: stretch;
	align-self: stretch;
}

.bjp-hero__pillar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 320px;
	min-width: 0;
	padding: 40px;
	border: 1px solid var(--bjp-color-border);
	background: #ffffff;
}

.bjp-hero__pillar-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	max-width: 240px;
}

.bjp-hero__pillar-icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	color: var(--bjp-color-accent);
}

.bjp-home .bjp-hero__pillar-title {
	margin: 0;
	align-self: stretch;
	font-family: var(--bjp-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: var(--bjp-color-text);
}

.bjp-home .bjp-hero__pillar-copy {
	margin: 0;
	align-self: stretch;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

/* ======================================================================
   AUTHORITY — dark card, node 33:151 (pt 80 / pb 23 in Figma)
   ====================================================================== */

/* Bottom padding is the frame's own 23px plus the 161px of empty canvas
   between the authority frame (ends y2237) and the process frame (starts
   y2398). Without it the dark card sits twice as close to "Verification
   process" as the comp shows. The mobile frames sit flush, so this gap is
   desktop-only. Figma also overlaps the partner frame 30px into the process
   frame, which is a mockup artefact and cannot be reproduced in flow. */
.bjp-authority {
	display: flex;
	justify-content: center;
	padding: 80px var(--bjp-pad-x) 184px;
}

.bjp-authority__card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 120px; /* Figma uses a 120px spacer frame between the columns. */
	width: 100%;
	max-width: 1280px;
	min-height: 260px;
	padding: 32px 0;
	border-radius: 16px;
	background: var(--bjp-color-text);
}

/* Desktop shows the two lists only; the mark belongs to the mobile frame. */
.bjp-authority__mark {
	display: none;
}

.bjp-home .bjp-authority__list {
	margin: 0;
	padding: 0 0 0 48px; /* Figma indents each item by 48px. */
	list-style: disc;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--bjp-font);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	color: #ffffff;
}

/* Desktop only, and deliberately inside a min-width query: the card goes
   flex-direction:column below 1025, where a flex-basis is a HEIGHT and these
   would stretch the card to 577px + 484px tall. */
@media (min-width: 1025px) {
	.bjp-home .bjp-authority__list:nth-of-type(1) {
		flex: 0 1 577px;
	}

	.bjp-home .bjp-authority__list:nth-of-type(2) {
		flex: 0 1 484px;
	}
}

.bjp-home .bjp-authority__list li {
	margin: 0;
}

/* ======================================================================
   PROCESS — node 52:84, heading plus five numbered steps
   ====================================================================== */

.bjp-process {
	display: flex;
	justify-content: center;
	padding: 128px var(--bjp-pad-x);
	background: #ffffff;
}

.bjp-process > .bjp-home__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
}

.bjp-process__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 720px;
}

.bjp-home .bjp-process__title {
	margin: 0;
	font-family: var(--bjp-font);
	/* 48px/60px at 1440; -0.96px letter-spacing is -0.02em. */
	font-size: clamp(36px, 3.3333vw, 48px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

.bjp-home .bjp-process__lede {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

/* flex:1 with an 86px gap gives three 369.33px steps on the first row and
   two 597px steps on the second, matching the design exactly at 1280. */
.bjp-home .bjp-process__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	gap: 86px;
	width: 100%;
}

.bjp-home .bjp-process__step {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	flex: 1 1 0;
	min-width: 256px;
	max-width: 600px;
}

/* A 48px box that centres each icon. Icons 03 and 04 export at 36x44 and
   44x44 because Figma insets them inside their 48px frames; centring lands
   them at exactly (6,2) and (2,2), which is where the design puts them. */
.bjp-process__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}

.bjp-process__icon img {
	display: block;
}

.bjp-process__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.bjp-process__dot {
	display: block;
	flex: 0 0 auto;
}

.bjp-process__number {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	color: var(--bjp-color-text);
}

.bjp-process__rule {
	flex: 1 1 0;
	min-width: 0;
	height: 1px;
	background: var(--bjp-color-border);
}

.bjp-home .bjp-process__step-title {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: var(--bjp-color-text);
}

.bjp-home .bjp-process__step-copy {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--bjp-color-text);
}

/* ======================================================================
   PARTNER — node 60:84, launch-partner card plus certification CTA
   ====================================================================== */

.bjp-partner {
	display: flex;
	justify-content: center;
	padding: 80px var(--bjp-pad-x);
	background: #ffffff;
}

.bjp-partner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 64px;
}

.bjp-partner__launch {
	position: relative;
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
	border: 1px solid var(--bjp-color-border);
	border-radius: 16px;
}

/* Figma layers a 10% accent wash over this card in luminosity blend mode,
   which is what gives it its slightly grey ground rather than plain white. */
.bjp-partner__launch::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background: rgba(103, 199, 199, 0.1);
	mix-blend-mode: luminosity;
	pointer-events: none;
}

.bjp-partner__launch-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 256px;
}

.bjp-home .bjp-partner__eyebrow {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
  text-align: center;
	color: var(--bjp-color-text);
}

/* The logo is authored art of unknown size, so it gets a fixed box rather
   than its intrinsic dimensions: 256px is the launch body's min-width, so
   the card holds the footprint it had when this row was the brand name,
   whatever logo is uploaded. object-fit keeps the aspect ratio inside the
   box and object-position lines the logo up with the eyebrow above it. */
.bjp-home .bjp-partner__logo {
	margin: 0;
	width: 256px;
	line-height: 0;
}

.bjp-partner__logo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.bjp-partner__cta {
	position: relative;
	flex: 1 1 0;
	min-width: 256px;
	align-self: stretch;
	display: flex;
	align-items: center;
	min-height: 246px;
	padding: 40px;
	border-radius: 16px;
	overflow: hidden;
}

/* Photo geometry straight from the node: 100% wide, 251.91% tall, offset
   23.44% / -113.33% inside the clipped card. */
.bjp-partner__cta-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 16px;
}

.bjp-partner__cta-media img {
	position: absolute;
	left: 23.44%;
	top: -113.33%;
	width: 100%;
	height: 251.91%;
	max-width: none;
}

/* Figma's radial gradient: transparent at the bottom-right corner, solid
   #231F20 by 52% of the way out, so the photo only reads on the right. */
.bjp-partner__cta::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background: radial-gradient(
		877px 667px at 100% 100%,
		rgba(35, 31, 32, 0) 0%,
		rgba(35, 31, 32, 1) 52.14%
	);
}

.bjp-partner__cta-body {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 256px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.bjp-home .bjp-partner__cta-title {
	margin: 0;
	max-width: 590px;
	font-family: var(--bjp-font);
	font-size: clamp(28px, 2.7778vw, 40px);
	font-weight: 600;
	line-height: normal;
	color: #ffffff;
}

.bjp-partner__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--bjp-color-primary);
	border: 1px solid var(--bjp-color-primary);
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: #ffffff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bjp-partner__cta-button:hover,
.bjp-partner__cta-button:focus-visible {
	background: var(--bjp-color-primary-hover);
	border-color: var(--bjp-color-primary-hover);
	color: #ffffff;
}

/* ======================================================================
   TABLET — 561 to 1024
   ====================================================================== */

@media (max-width: 1024px) {
	.bjp-hero {
		--bjp-hero-panel-h: 640px;
		--bjp-hero-pad-y: 96px;
		--bjp-hero-video-pad: 64px;
		--bjp-hero-framework-h: auto;
	}

	/* 48px type in a half-width column is too tight below 1024, so the
	   statement and the logo stack. */
	.bjp-hero__framework-intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 48px;
	}

	.bjp-hero__framework-logo {
		align-self: center;
	}

	/* Two-by-two instead of four across. */
	.bjp-hero__pillars {
		flex-wrap: wrap;
	}

	.bjp-hero__pillar {
		flex: 1 1 50%;
	}

	.bjp-authority {
		padding-bottom: 120px;
	}

	/* 32px claims in two columns overflow well before 1024. Stacked, the two
	   Figma lists should read as one, so the gap matches the 10px between
	   items rather than separating them. */
	.bjp-authority__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 40px;
	}

	.bjp-home .bjp-authority__list {
		flex: 0 1 auto;
		font-size: 24px;
		padding-left: 30px;
	}

	.bjp-home .bjp-process__steps {
		gap: 64px;
	}

	/* The partner row stacks; both cards go full width. */
	.bjp-partner__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.bjp-partner__launch {
		flex: 0 0 auto;
	}
}

/* ======================================================================
   MOBILE — 560 and below
   ====================================================================== */

@media (max-width: 560px) {
	.bjp-home {
		--bjp-header-h: 72px;
		--bjp-pad-x: 20px;
	}

	.bjp-hero {
		/* Figma mobile frame: 464px panel, 32px/20px padding, 94px header
		   offset — our built header is 72px there.

		   BJP-13 gave the hero no mobile frame, so the photograph keeps the
		   desktop composition and the cover crop holds the swimmer centred. */
		--bjp-hero-panel-h: 464px;
		--bjp-hero-pad-y: 32px;
		--bjp-hero-video-pad: 48px;
	}

	.bjp-hero__content {
		max-width: 100%;
		gap: 48px;
	}

	.bjp-hero__actions {
		flex-direction: column;
		align-self: stretch;
	}

	.bjp-hero__button {
		align-self: stretch;
	}

	.bjp-hero__framework {
		padding: 64px var(--bjp-pad-x);
	}

	.bjp-hero__framework > .bjp-home__container {
		gap: 32px;
	}

	.bjp-hero__framework-intro {
		gap: 32px;
	}

	/* One card per row. */
	.bjp-hero__pillar {
		flex: 1 1 100%;
		padding: 24px;
	}

	.bjp-hero__pillar-inner {
		max-width: 100%;
	}

	/* --- authority: node 69:552, one list under a 182px mark ----------- */

	.bjp-authority {
		padding: 20px;
	}

	.bjp-authority__card {
		flex-direction: column;
		align-items: center;
		gap: 0;
		min-height: 0;
		padding: 0 20px 80px;
	}

	.bjp-authority__mark {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		padding: 60px;
	}

	.bjp-authority__mark img {
		display: block;
		width: 181px;
		height: 181px;
	}

	.bjp-home .bjp-authority__list {
		flex: 0 0 auto;
		width: 100%;
		font-size: 20px;
		padding-left: 30px;
	}

	/* Both Figma lists become one continuous column, so the second must not
	   reintroduce a gap of its own. */
	.bjp-home .bjp-authority__list:nth-of-type(2) {
		margin-top: 10px;
	}

	/* --- process ------------------------------------------------------- */

	.bjp-home .bjp-process__steps {
		gap: 64px;
	}

	.bjp-home .bjp-process__step {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* Full width in the stacked column, like the hero's buttons. */
	.bjp-process__cta {
		align-self: stretch;
	}

	/* --- partner ------------------------------------------------------- */

	.bjp-partner__inner {
		gap: 64px;
	}

	.bjp-partner__launch,
	.bjp-partner__cta {
		padding: 24px;
	}

	.bjp-partner__cta {
		min-height: 312px; /* Figma mobile CTA card. */
	}
}