/* BJP Verification Standard page — CreaFide, Figma file 1xQDeCr07QFZxlMTMZNXxJ:
     desktop "Verification- 3" 76:2035 (1440x4712)
     mobile  "Mobile"          86:850

     hero        76:2036   y0      692
     verified    76:2174   y776    516
     overview    76:2232   y1292   960
     criteria    78:2481   y2252   516
     seal        78:2660   y2768   \
     brands      78:2704   y3077    > one 1115 frame, 78:2703
     faq         78:2749   y3375   /
     commitment  76:2262   y3835   406

   The 1440 frame uses 80px gutters and caps content at 1280; --bjp-pad-x
   spans that down to the 390 frame's 20px. Sections carry 80px of top and
   bottom padding, except the seal/brands/faq trio, which is one 80-padded
   frame internally split by 64px gaps — so those three own 80/32, 32/32 and
   32/80 and add up to the same rhythm. Tokens live on .bjp-verification;
   each section owns its own geometry. */

.bjp-verification {
	/* --- shared tokens ------------------------------------------------- */
	--bjp-color-text: #231F20;
	--bjp-color-primary: #156082;
	--bjp-color-primary-hover: #0f4a63;
	--bjp-color-accent: #67C7C7;
	--bjp-color-border: #EAECF0;
	/* The Testing Criteria band, sampled off the comp. */
	--bjp-color-tint: #EFF9F9;
	--bjp-font: 'Manrope', -apple-system, Roboto, Helvetica, sans-serif;

	--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 hero panel and
   the tinted band reach 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-verification.bjp-verification {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.bjp-verification *,
.bjp-verification *::before,
.bjp-verification *::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-verification__container {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* ======================================================================
   BUTTONS — the shared [button]--primary / --secondary components
   ====================================================================== */

.bjp-verification a.bjp-verification__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 8px;
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bjp-verification a.bjp-verification__button--primary {
	background: var(--bjp-color-primary);
	border: 0;
	color: #ffffff;
}

.bjp-verification a.bjp-verification__button--primary:hover,
.bjp-verification a.bjp-verification__button--primary:focus {
	background: var(--bjp-color-primary-hover);
	color: #ffffff;
}

.bjp-verification a.bjp-verification__button--secondary {
	background: transparent;
	border: 1px solid var(--bjp-color-text);
	color: var(--bjp-color-text);
}

.bjp-verification a.bjp-verification__button--secondary:hover,
.bjp-verification a.bjp-verification__button--secondary:focus {
	background: var(--bjp-color-text);
	color: #ffffff;
}

.bjp-verification__arrow {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* ======================================================================
   HERO — node 76:2036, 1440x692
   ====================================================================== */

.bjp-verification-hero {
	display: flex;
	justify-content: center;
	padding: 0 var(--bjp-pad-x);
	background: #ffffff;
}

/* The frame is 692 tall and the panel fills all of it, so the 64px of frame
   padding belongs to the copy column rather than the section — which is also
   why the comp's 138px top offset is 64 of padding plus the centring of 416
   of content in the 564 that is left. */
.bjp-verification-hero__inner {
	display: flex;
	align-items: stretch;
	min-height: 692px;
}

/* The copy column is a fixed 672 in the comp (x80 to x752) and the panel
   takes the rest, so the column keeps its width and the panel flexes. */
.bjp-verification-hero__column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	flex: 0 0 672px;
	min-width: 0;
	gap: 64px;
	padding: 64px 0;
}

.bjp-verification-hero__copy-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

/* 82px/-1.64px at 1440, 36px at 390. -1.64px is -0.02em, so the tracking
   holds through the interpolation. The text node is 590 wide inside the 672
   column, and Manrope's normal leading puts the two lines at the comp's
   224px. */
/* The comp fixes the text block at 590 inside the 672 column. */
.bjp-verification-hero__copy-wrap {
	max-width: 590px;
}

.bjp-verification .bjp-verification-hero__heading {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: clamp(36px, 5.6944vw, 82px);
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

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

/* The 64px below the copy block is the column's gap; this is just the 16px
   between the buttons. */
.bjp-verification-hero__actions {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

/* Node 76:2046 is 688x692 at x752, so it runs past the 1280 column to the
   right edge of the frame; the negative margin gives back the gutter. */
.bjp-verification-hero__media {
	flex: 1 1 auto;
	min-width: 0;
	margin-right: calc(-1 * var(--bjp-pad-x));
	overflow: hidden;
}

/* <picture> is inline by default, which would break the height chain between
   the panel and the image. */
.bjp-verification-hero__media picture {
	display: block;
	height: 100%;
}

.bjp-verification .bjp-verification-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* ======================================================================
   WHAT IS VERIFIED? — node 76:2174, three cards
   ====================================================================== */

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

.bjp-verification-verified > .bjp-verification__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
}

/* Heading at x0 (391 wide) and lede at x455 (825 wide) — a 64px gutter
   between them, both hanging off the same top edge. */
.bjp-verification-verified__head {
	display: flex;
	align-items: flex-start;
	gap: 64px;
	width: 100%;
}

.bjp-verification .bjp-verification-verified__title {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--bjp-font);
	font-size: 48px;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

.bjp-verification .bjp-verification-verified__lede {
	margin: 0;
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

/* Three 426.67px cards fill the 1280px column exactly, with no gap — the
   strokes are inside the nodes, so the shared edges read as seams. Padding is
   40 plus the 1px border for Figma's 41px inset. */
.bjp-verification-verified__cards {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.bjp-verification-verified__card {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	padding: 40px;
	border: 1px solid var(--bjp-color-border);
	background: #ffffff;
}

.bjp-verification-verified__card-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

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

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

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

/* ======================================================================
   STANDARD OVERVIEW — node 76:2232, four steps beside the 688x800 photo
   ====================================================================== */

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

/* 560 column + 32 gap + 688 photo = the 1280 container. */
.bjp-verification-overview__inner {
	display: flex;
	align-items: stretch;
	gap: 32px;
}

.bjp-verification-overview__column {
	display: flex;
	flex-direction: column;
	flex: 0 0 560px;
	min-width: 0;
	gap: 32px;
}

.bjp-verification-overview__copy-wrap {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.bjp-verification .bjp-verification-overview__title {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

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

/* The rows butt onto each other with no gap, exactly as the comp stacks them
   at 216 / 112 / 112 / 112. */
.bjp-verification .bjp-verification-overview__steps {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bjp-verification-overview__step {
	padding: 40px;
	border: 1px solid var(--bjp-color-border);
	background: #ffffff;
	transition: border-color 0.2s ease;
}

/* Open row: the comp gives it the accent stroke and keeps the body copy. */
.bjp-verification-overview__step.is-active {
	border-color: var(--bjp-color-accent);
}

/* The head is the hit area, so it has to shed every button default. */
.bjp-verification button.bjp-verification-overview__step-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--bjp-font);
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.bjp-verification-overview__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.bjp-verification-overview__number {
	flex: 0 0 auto;
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

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

/* Collapsed rows put the title to the right of the rule, each taking half the
   space left after the number — the comp's twin 203px runs. */
.bjp-verification-overview__step-title {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--bjp-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: var(--bjp-color-text);
}

.bjp-verification-overview__step-body {
	display: none;
}

/* Open row: number goes to 36/44 in the accent, the rule runs the full width
   and the title drops beneath it with the copy — the head already wraps, so
   the 100% basis below is what moves the title onto its own line. */
.bjp-verification-overview__step.is-active .bjp-verification-overview__number {
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	color: var(--bjp-color-accent);
}

.bjp-verification-overview__step.is-active .bjp-verification-overview__dot {
	color: var(--bjp-color-accent);
}

.bjp-verification-overview__step.is-active .bjp-verification-overview__step-title {
	flex: 0 0 100%;
	margin-top: 16px;
}

.bjp-verification-overview__step.is-active .bjp-verification-overview__step-body {
	display: block;
	margin-top: 16px;
}

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

/* The comp draws the column 772 tall inside an 800 node, because the photo is
   what sets the section height — hence the min-height rather than a stretch
   off the copy. */
.bjp-verification-overview__media {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 800px;
	overflow: hidden;
}

.bjp-verification .bjp-verification-overview__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* ======================================================================
   TESTING CRITERIA — node 78:2481, tinted band with four cards
   ====================================================================== */

.bjp-verification-criteria {
	display: flex;
	justify-content: center;
	padding: 80px var(--bjp-pad-x);
	background: var(--bjp-color-tint);
}

.bjp-verification-criteria > .bjp-verification__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 48px;
}

/* The comp centres this heading on the 1280 column and hides the lede. */
.bjp-verification-criteria__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	text-align: center;
}

.bjp-verification .bjp-verification-criteria__title {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 48px;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

.bjp-verification .bjp-verification-criteria__lede {
	margin: 0;
	max-width: 855px;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

/* Four 320px cards fill the 1280px column exactly, same seam trick. */
.bjp-verification-criteria__cards {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.bjp-verification-criteria__card {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	padding: 40px;
	border: 1px solid var(--bjp-color-border);
	background: #ffffff;
}

.bjp-verification-criteria__card-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

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

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

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

/* ======================================================================
   SEAL STATEMENT — node 78:2660, copy beside the 600x165 wordmark
   ====================================================================== */

.bjp-verification-seal {
	display: flex;
	justify-content: center;
	/* First third of the 1115 frame: its 80 above, half of the 64 gap below. */
	padding: 80px var(--bjp-pad-x) 32px;
	background: #ffffff;
}

/* 600 column + 80 gap + 600 wordmark = the 1280 container. */
.bjp-verification-seal__inner {
	display: flex;
	align-items: center;
	gap: 80px;
}

.bjp-verification-seal__column {
	display: flex;
	flex-direction: column;
	flex: 0 0 600px;
	min-width: 0;
	gap: 32px;
}

.bjp-verification .bjp-verification-seal__title {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

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

.bjp-verification-seal__mark {
	flex: 0 1 600px;
	min-width: 0;
}

/* Natural size, capped to a 600x300 box and centred so an upload never
   stretches to fill the column; the widget's size controls override the cap. */
.bjp-verification .bjp-verification-seal__mark img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, 600px);
	max-height: 300px;
	margin: 0 auto;
}

/* ======================================================================
   HOW BRANDS USE IT — node 78:2704, three sentence cards
   ====================================================================== */

.bjp-verification-brands {
	display: flex;
	justify-content: center;
	/* Middle third of the 1115 frame: half of the 64 gap on each side. */
	padding: 32px var(--bjp-pad-x);
	background: #ffffff;
}

.bjp-verification-brands > .bjp-verification__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
}

.bjp-verification-brands__head {
	display: flex;
	width: 100%;
}

.bjp-verification .bjp-verification-brands__title {
	margin: 0;
	max-width: 720px;
	font-family: var(--bjp-font);
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

.bjp-verification-brands__cards {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.bjp-verification-brands__card {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	padding: 40px;
	border: 1px solid var(--bjp-color-border);
	background: #ffffff;
}

.bjp-verification .bjp-verification-brands__card-copy {
	margin: 0;
	width: 100%;
	font-family: var(--bjp-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: var(--bjp-color-text);
}

/* The comp opens each sentence with an accented verb. */
.bjp-verification-brands__lead {
	color: var(--bjp-color-accent);
}

/* ======================================================================
   FAQ — node 78:2749, three collapsed rows
   ====================================================================== */

.bjp-verification-faq {
	display: flex;
	justify-content: center;
	/* Last third of the 1115 frame: half of the 64 gap above, its 80 below. */
	padding: 32px var(--bjp-pad-x) 80px;
	background: #ffffff;
}

.bjp-verification-faq > .bjp-verification__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
}

.bjp-verification-faq__head {
	display: flex;
	width: 100%;
}

.bjp-verification .bjp-verification-faq__title {
	margin: 0;
	max-width: 720px;
	font-family: var(--bjp-font);
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

/* Rows butt onto each other at 112 apiece, same seam trick as the cards. */
.bjp-verification-faq__list {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.bjp-verification-faq__item {
	padding: 40px;
	border: 1px solid var(--bjp-color-border);
	background: #ffffff;
}

.bjp-verification .bjp-verification-faq__question {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.bjp-verification button.bjp-verification-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--bjp-font);
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.bjp-verification-faq__label {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--bjp-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: var(--bjp-color-text);
}

.bjp-verification-faq__chevron {
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--bjp-color-text);
	transition: transform 0.2s ease;
}

.bjp-verification-faq__trigger[aria-expanded="true"] .bjp-verification-faq__chevron {
	transform: rotate(180deg);
}

.bjp-verification-faq__panel {
	padding-top: 16px;
}

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

/* ======================================================================
   COMMITMENT — node 76:2262, dark closing CTA
   ====================================================================== */

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

.bjp-verification-commitment__card {
	padding: 40px;
	border-radius: 16px;
	background: var(--bjp-color-text);
}

.bjp-verification-commitment__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.bjp-verification .bjp-verification-commitment__title {
	margin: 0;
	width: 100%;
	font-family: var(--bjp-font);
	/* 44px/55px at 1440, 36px/44px at 390. */
	font-size: clamp(36px, 3.0556vw, 44px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #ffffff;
}

/* The 185x40 button uses the header's tighter 8/12 padding, not the hero's. */
.bjp-verification a.bjp-verification-commitment__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--bjp-color-primary);
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.bjp-verification a.bjp-verification-commitment__button:hover,
.bjp-verification a.bjp-verification-commitment__button:focus {
	background: var(--bjp-color-primary-hover);
	color: #ffffff;
}

/* ======================================================================
   TABLET — the 1440 columns stop fitting before the 390 frame's rules apply
   ====================================================================== */

@media (max-width: 1200px) {

	/* The fixed 672 / 560 / 600 columns are Figma's 1440 arithmetic; below
	   that they have to give. */
	.bjp-verification-hero__column {
		flex: 1 1 0;
	}

	.bjp-verification-overview__column,
	.bjp-verification-seal__column {
		flex: 1 1 0;
	}

	.bjp-verification-verified__head {
		gap: 32px;
	}

	.bjp-verification-seal__inner {
		gap: 40px;
	}
}

/* ======================================================================
   MOBILE — the 390 frame, 86:850
   ====================================================================== */

@media (max-width: 1024px) {

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

	/* The 390 frame stacks the panel under the copy and runs it edge to edge,
	   so the section keeps only its 32px band and the panel loses the gutter
	   breakout. The 36px below is the white the comp leaves before the next
	   section starts at y824. */
	.bjp-verification-hero {
		padding: 32px 0 36px;
	}

	.bjp-verification-hero__inner {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	/* The comp gives the copy a 400px band and centres it, with 48px between
	   the text and the button rather than the 1440 frame's 64. */
	.bjp-verification-hero__column {
		flex: 0 0 auto;
		min-height: 400px;
		gap: 48px;
		padding: 0 var(--bjp-pad-x);
	}

	.bjp-verification-hero__copy-wrap {
		max-width: none;
	}

	.bjp-verification-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.bjp-verification a.bjp-verification__button {
		width: 100%;
	}

	/* 390x392 in the comp — the same artwork as the 688x692 desktop export. */
	.bjp-verification-hero__media {
		flex: 0 0 auto;
		margin-right: 0;
	}

	.bjp-verification-hero__media picture {
		height: auto;
	}

	.bjp-verification .bjp-verification-hero__media img {
		height: auto;
		aspect-ratio: 390 / 392;
	}

	/* --- what is verified? -------------------------------------------- */

	/* The 390 frame stacks the heading over the lede with a 32px gap, and
	   drops the heading to 36/44 at weight 600. */
	.bjp-verification-verified__head {
		flex-direction: column;
		gap: 32px;
	}

	.bjp-verification .bjp-verification-verified__title {
		flex: 0 0 auto;
		font-size: 36px;
		font-weight: 600;
		line-height: 44px;
	}

	.bjp-verification .bjp-verification-verified__lede {
		flex: 0 0 auto;
		width: 100%;
	}

	.bjp-verification-verified__cards {
		flex-direction: column;
	}

	.bjp-verification-verified__card {
		flex: 0 0 auto;
	}

	/* --- standard overview -------------------------------------------- */

	.bjp-verification-overview__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.bjp-verification-overview__column,
	.bjp-verification-overview__media {
		flex: 0 0 auto;
	}

	/* The 800px floor is the 1440 frame's photo height; on the 390 frame the
	   photo scales with the column instead. */
	.bjp-verification-overview__media {
		min-height: 0;
	}

	.bjp-verification .bjp-verification-overview__media img {
		height: auto;
		aspect-ratio: 688 / 800;
	}

	/* Two columns of 203px do not survive a 390 frame, so the collapsed rows
	   put the title under the number and the rule takes what is left. */
	.bjp-verification-overview__step-title {
		flex: 0 0 100%;
		margin-top: 16px;
	}

	/* --- testing criteria --------------------------------------------- */

	.bjp-verification-criteria__cards {
		flex-direction: column;
	}

	.bjp-verification-criteria__card {
		flex: 0 0 auto;
	}

	/* --- seal --------------------------------------------------------- */

	.bjp-verification-seal__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	.bjp-verification-seal__column,
	.bjp-verification-seal__mark {
		flex: 0 0 auto;
		width: 100%;
	}

	/* --- how brands use it -------------------------------------------- */

	.bjp-verification-brands__cards {
		flex-direction: column;
	}

	.bjp-verification-brands__card {
		flex: 0 0 auto;
	}

	/* --- commitment --------------------------------------------------- */

	.bjp-verification .bjp-verification-commitment__title {
		line-height: 1.2222;
	}
}

/* Testing Criteria's 48px heading is a 1440 measure. "What Is Verified?" has
   its confirmed 390-frame treatment above; this one is still carrying the
   same assumption until its own mobile frame is checked. */
@media (max-width: 560px) {

	.bjp-verification .bjp-verification-criteria__title {
		font-size: 36px;
		line-height: 44px;
	}
}