/*
 * Front-end assessment styles. Doc's own visual direction: "retaining
 * LifeStamp's black, bone and white interface, readable controls and
 * licensed fonts." Display font falls back to Georgia, body to Arial
 * (doc: "Display fonts fall back to Georgia and Arial when licensed
 * LifeStamp fonts are unavailable"). 150-250ms section-change motion,
 * reduced-motion respected throughout.
 *
 * Licensed LifeStamp fonts (client-supplied .ttf files), self-hosted
 * under assets/fonts/ rather than linked to lifestampbranding.com —
 * that domain doesn't send an Access-Control-Allow-Origin header, so
 * browsers block the cross-origin font fetch outright (confirmed live:
 * Chrome throws a CORS error and the request never completes). Freight
 * Big Cmp Pro is only available here in italic — see the h1/h2/h3 rule
 * below.
 */

@font-face {
	font-family: 'Neue Haas Display';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/NeueHaasDisplayBlack.ttf') format( 'truetype' );
;}
@font-face {
	font-family: 'Neue Haas Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/NeueHaasDisplayBold.ttf') format( 'truetype' );
;}
@font-face {
	font-family: 'Neue Haas Display';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/NeueHaasDisplayLight.ttf') format( 'truetype' );
;}
@font-face {
	font-family: 'Neue Haas Display';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/NeueHaasDisplayMediu.ttf') format( 'truetype' );
;}
@font-face {
	font-family: 'Neue Haas Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/NeueHaasDisplayRoman.ttf') format( 'truetype' );
;}
@font-face {
	font-family: 'Neue Haas Display';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/NeueHaasDisplayThin.ttf') format( 'truetype' );
;}
@font-face {
	font-family: 'Neue Haas Display';
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/NeueHaasDisplayXXThin.ttf') format( 'truetype' );
;}

@font-face {
	font-family: 'Freight Big Cmp Pro';
	font-style: italic;
	font-weight: bold;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/FreightBigCmpProBold-Italic.ttf') format( 'truetype' );
;}
@font-face {
	font-family: 'Freight Big Cmp Pro';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/FreightBigCmpProBook-Italic.ttf') format( 'truetype' );
;}
@font-face {
	font-family: 'Freight Big Cmp Pro';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/FreightBigCmpProLight-Italic.ttf') format( 'truetype' );
;}
@font-face {
	font-family: 'Freight Big Cmp Pro';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/FreightBigCmpProMedium-Italic.ttf') format( 'truetype' );
;}
@font-face {
	font-family: 'Freight Big Cmp Pro';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('https://brandingboardroom.lifestamp.com/wp-content/plugins/BP Quiz Build + funnel - ML V2/assets/fonts/FreightBigCmpProSemibold-Italic.ttf') format( 'truetype' );
;}

.bbra {
	--bbra-bg: #edece6;
	--bbra-surface: #ffffff;
	--bbra-ink: #111111;
	--bbra-accent: #111111;
	--bbra-muted: #595951;
	--bbra-border: #cbc9c0;

	background: var( --bbra-bg );
	color: var( --bbra-ink );
	color-scheme: light;
	font-family: 'Neue Haas Display', Arial, Helvetica, sans-serif;
	line-height: 1.5;
	/* !important: Astra's `.entry-content[data-ast-blocks-layout] > *`
	 * rule (its per-block "Content Width" feature) has higher
	 * specificity than a plain `.bbra` class selector and silently
	 * re-constrains this to the theme's content-width var otherwise —
	 * confirmed live via getMatchedCSSRules, not assumed. */
	max-width: none !important;
	padding: 0;
	box-sizing: border-box;
	/* No `min-height: 100vh` here (was tried, then reverted): forcing
	 * this element to be at least one viewport tall doesn't remove the
	 * empty space on a short screen — it only relocates it. First
	 * attempt kept the min-height and stretched `.bbra-content` via
	 * flex-grow to push the footer down to the forced height's bottom
	 * edge, which on a genuinely short screen (e.g. the receipt screen)
	 * just moved the same dead space from *below* the footer (outside
	 * this element, as exposed bone background) to *inside* it, between
	 * the content and the footer (client-reported: footer no longer
	 * sitting in a "consistent" spot relative to content). The correct
	 * fix is simpler: don't force any minimum height at all. Left with
	 * only its own content's natural height, `.bbra-frame`'s footer bar
	 * always sits immediately after the content, on every screen,
	 * regardless of how short or tall that content is. */
	/* Full-bleed breakout: fixing this element's own max-width (above)
	 * only lets it fill its parent — and that parent is still Astra's
	 * own ~1200px site content column, a separate constraint several
	 * levels up the DOM (confirmed by walking the ancestor chain live).
	 * Negative-margin calc() escapes that regardless of how deeply
	 * nested inside the theme's layout this ends up, same visual
	 * result as the equivalent width:100vw + position/left/transform
	 * technique — swapped to this instead since it keeps the element
	 * in normal flow (no `position: relative`, so it can't become an
	 * unintended containing block for any descendant's `position:
	 * absolute`, and DevTools' box-model panel reads as plain margins
	 * instead of confusing position offsets). !important for the same
	 * reason as max-width above — Astra's same rule also sets
	 * `margin-left/right: auto` on this element and wins on
	 * specificity otherwise (confirmed live: without !important here,
	 * both margins computed to 0). */
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
}

/*
 * Client-reported: a thin horizontal scrollbar appearing on the page,
 * traced to the full-bleed breakout above. `100vw` includes the
 * vertical scrollbar's own width, but `%` is resolved against the
 * layout viewport (which excludes it) — so on any page tall enough to
 * actually show a non-overlay scrollbar, `calc(50% - 50vw)` overshoots
 * by half the scrollbar's width on each side, pushing this element (and
 * the page) that far past the visible edge. Happens on both the native
 * WordPress install (escaping Astra's content column) and a genuine
 * cross-origin embed (where there's no Astra column to escape at all,
 * so the breakout fires for no benefit and only the bug shows).
 * `:has()` scopes this to only pages that actually embed the widget,
 * rather than blanket-touching every page's body. Both `html` and
 * `body` are set — `body`'s `overflow-x` only becomes the viewport's
 * effective scroll behavior when the UA propagates it up from `body`
 * to `html` (only happens when `html` itself has no `overflow` set),
 * and live testing found that propagation doesn't reliably happen here
 * (confirmed via `window.scrollTo()` still moving `scrollX` with only
 * `body` set) — so `html` is targeted directly rather than relying on
 * that propagation. */
html:has( .bbra ),
body:has( .bbra ) {
	overflow-x: hidden;
}

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

.bbra h1, .bbra h2, .bbra h3 {
	/* Freight Big Cmp Pro is only licensed here in italic — LifeStamp's
	 * headline treatment is fully italic by design, not just on
	 * emphasized sub-phrases (client-confirmed). Weight 700 (bold), not
	 * 400: checked live against lifestampbranding.com/home-new/ — every
	 * Freight-styled headline/title there (the giant hero H1, the
	 * "Services"/"Resources" card titles) renders bold italic, never
	 * the lighter "Book" weight. */
	font-family: 'Freight Big Cmp Pro', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var( --bbra-ink );
}

.bbra h1 {
	font-size: 96px;
	line-height: 100px;
	outline: none;
}

@media ( max-width: 480px ) {
	/* Client feedback: the 96px/100px desktop hero size is too large on
	 * mobile — same 480px breakpoint already used for the results-hero
	 * h1 below. */
	.bbra h1 {
		font-size: 50px;
		line-height: 50px;
	}
}

.bbra h2 {
	font-size: 20px;
	margin-top: 28px;
}

/*
 * Scroll-reveal (results screen's major blocks) — a shared class the JS
 * toggles `.is-visible` on via one IntersectionObserver. `html { scroll-
 * behavior }` intentionally NOT set globally, since this app has no
 * anchor-link navigation to smooth-scroll for.
 */
.bbra-reveal {
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity 500ms ease, transform 500ms ease;
}

.bbra-reveal.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.bbra-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Hover/focus micro-interactions shared by inputs and buttons. */
.bbra-input,
.bbra-textarea,
.bbra-select {
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.bbra-input:focus,
.bbra-textarea:focus,
.bbra-select:focus {
	/* !important on all three: Astra's own theme CSS (inlined in
	 * <head>, not a linked stylesheet — confirmed live via matched-
	 * rule inspection) unconditionally sets a thin dotted border on
	 * every text input's focus state sitewide. Without overriding
	 * border-style/-width here too — only border-color was overridden
	 * before — that dotted ring still showed through underneath this
	 * one, reading as a "double border" (client screenshot). One clean
	 * solid ring now, not two stacked focus indicators. */
	border-color: var( --bbra-ink ) !important;
	border-style: solid !important;
	border-width: 1px !important;
	box-shadow: 0 0 0 3px rgba( 17, 17, 17, 0.08 ) !important;
	outline: none !important;
}

.bbra-btn-primary,
.bbra-btn-secondary {
	transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

.bbra-btn-primary:hover,
.bbra-btn-secondary:hover {
	transform: translateY( -1px );
}

.bbra-choice,
.bbra-chip,
.bbra-swatch {
	transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.bbra-btn-primary,
	.bbra-btn-secondary,
	.bbra-choice,
	.bbra-chip,
	.bbra-swatch,
	.bbra-input,
	.bbra-textarea,
	.bbra-select {
		transition: none;
	}
	.bbra-btn-primary:hover,
	.bbra-btn-secondary:hover {
		transform: none;
	}
}

/*
 * Persistent "boardroom document" shell — masthead, 7-step nav rail with
 * progress meter, and footer bar wrap every screen inside a white paper
 * panel on the bone body background. Matches the reference: "Fixing the
 * shell fixes most of the perceived gap" (parity spec §1).
 */

.bbra-frame {
	width: 100%;
	background: var( --bbra-surface );
	/* Sticky footer, site-wide: pins the footer to the bottom of the
	 * viewport instead of sitting right after short content. Safe now
	 * that the page background matches the widget's own white (see
	 * workprogress.md) — the leftover space above the footer on short
	 * screens reads as normal whitespace, not a mismatched dead zone. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.bbra-masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 26px 96px;
	border-bottom: 1px solid var( --bbra-ink );
}

.bbra-masthead-word {
	font-family: Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.12em;
	color: inherit;
	text-decoration: none !important;
}

.bbra-masthead-word:hover {
	text-decoration: underline !important;
}

.bbra-masthead-logo {
	display: block;
	height: 48px;
	width: auto;
	max-width: 280px;
	object-fit: contain;
}

.bbra-masthead-kicker {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --bbra-muted );
}

.bbra-navrail {
	padding: 22px 96px 0;
}

.bbra-navrail-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

/*
 * Explicit `!important` colors throughout this block — same theme-bleed
 * defense used elsewhere this session. Astra's own typography rules
 * (e.g. for generic <span>/<p> text) were winning over our unqualified
 * `color: var(--bbra-muted)` here, washing every step (including the
 * current/done ones, whose own override lost the same way) out to a
 * uniform theme-blue-gray instead of our ink/muted/border palette.
 */

.bbra-navrail-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 1;
	color: var( --bbra-muted ) !important;
	white-space: nowrap;
}

.bbra-navrail-name {
	color: inherit !important;
}

/* Visually hidden but readable by assistive tech. */
.bbra-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.bbra-navrail-dot {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var( --bbra-border ) !important;
	background: var( --bbra-surface ) !important;
	color: var( --bbra-muted ) !important;
	font-style: italic;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 1;
	font-family: Georgia, serif;
}

.bbra-navrail-step.is-done,
.bbra-navrail-step.is-done .bbra-navrail-name {
	color: var( --bbra-muted ) !important;
}

.bbra-navrail-step.is-done .bbra-navrail-dot {
	background: var( --bbra-ink ) !important;
	border-color: var( --bbra-ink ) !important;
	color: var( --bbra-surface ) !important;
}

.bbra-navrail-step.is-current,
.bbra-navrail-step.is-current .bbra-navrail-name {
	color: var( --bbra-ink ) !important;
	font-weight: 700;
}

.bbra-navrail-step.is-current .bbra-navrail-dot {
	background: var( --bbra-ink ) !important;
	border-color: var( --bbra-ink ) !important;
	color: var( --bbra-surface ) !important;
}

/* Digital Presence is a checkpoint alongside the six numbered stages,
 * not a seventh stage — its dot is a square, not a circle, in every
 * state (matches the reference exactly). */
.bbra-navrail-step--final .bbra-navrail-dot {
	border-radius: 3px;
}

.bbra-navrail-meter {
	height: 3px;
	background: var( --bbra-border );
	margin-top: 16px;
	border-radius: 999px;
	overflow: hidden;
}

.bbra-navrail-meter-fill {
	height: 100%;
	background: var( --bbra-ink );
	transition: width 200ms ease;
}

.bbra-navrail-count-row {
	display: flex;
	align-items: center;
	/* Back-and-counter live on the same row now at every width (client
	 * feedback: previously only on mobile, and even then Back sat below
	 * this row rather than sharing it) — Back on the left via
	 * .bbra-navrail-back below, counter on the right. */
	justify-content: space-between;
	margin-top: 6px;
}

.bbra-navrail-count {
	text-align: right;
	font-size: 11px;
	color: var( --bbra-muted );
}

/* Back trigger rendered inside the navrail itself, right next to
 * "X of 27 answered" (client-requested placement — see renderNavrail()
 * for why this can't just be a CSS reorder of the screen's own Back
 * button). Shown at every width now; the screen's own
 * `.bbra-section-transition .bbra-back-btn` is hidden unconditionally
 * below instead, so there's never two Back controls on this screen.
 * !important: `.bbra-link-btn`'s `font: inherit` (the font *shorthand*,
 * which resets font-size too) sits later in this file and otherwise
 * wins the cascade at equal specificity, silently resetting this back
 * to the page's default body size (confirmed live: without
 * !important, "Back" rendered oversized despite this rule existing). */
.bbra-navrail-back {
	font-size: 13px !important;
}

.bbra-section-transition .bbra-back-btn {
	display: none;
}

.bbra-content {
	max-width: 100%;
	margin: 0;
	padding: 48px 96px 60px;
	/* Flex item of `.bbra-frame` below — `flex: 1 0 auto` lets this
	 * absorb the leftover space so the footer sits at the bottom on a
	 * short screen, and `align-self: stretch` keeps it full-width
	 * (without it, a flex item with no explicit width can shrink to its
	 * content size instead of stretching — confirmed live: this exact
	 * combination, minus align-self, once indented the whole content
	 * block on both sides instead of lining up with the masthead). */
	flex: 1 0 auto;
	align-self: stretch;
}

.bbra-footer-bar {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var( --bbra-border );
	padding: 18px 96px;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --bbra-muted );
}


/* ---- Compact progress (mobile + tablet) ---- */

.bbra-progress-compact {
	display: none;
}

@media ( max-width: 1024px ) {
	.bbra-navrail-steps,
	.bbra-navrail-meter,
	.bbra-navrail-count {
		display: none !important;
	}

	.bbra-progress-compact {
		display: block;
	}

	/* Same type as the desktop rail's "X of 27 answered" counter. */
	.bbra-progress-compact-top {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		font-size: 11px;
		color: var( --bbra-muted ) !important;
	}

	.bbra-progress-compact-segs {
		display: flex;
		gap: 6px;
		margin-top: 12px;
	}

	.bbra-progress-seg {
		position: relative;
		flex: 1 1 0;
		height: 6px;
		border-radius: 999px;
		background: var( --bbra-border );
		overflow: hidden;
	}

	/* Digital Presence is a checkpoint after the six stages — set apart
	 * by a wider gap, like the grouped segments in the reference. */
	.bbra-progress-seg--final {
		margin-left: 10px;
	}

	.bbra-progress-seg-fill {
		position: absolute;
		inset: 0 auto 0 0;
		background: var( --bbra-ink );
		border-radius: inherit;
		transition: width 200ms ease;
	}

	.bbra-progress-seg.is-current {
		box-shadow: 0 0 0 1px var( --bbra-ink );
	}

	/* Label is a standard .bbra-eyebrow; only spacing is set here. */
	.bbra .bbra-progress-compact-label {
		margin: 14px 0 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.bbra-progress-seg-fill {
		transition: none;
	}
}

@media ( max-width: 820px ) {
	.bbra-masthead,
	.bbra-navrail,
	.bbra-content,
	.bbra-footer-bar {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ---- Two-column question screen ---- */

.bbra-question-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 88px;
	align-items: start;
}

@media ( max-width: 820px ) {
	.bbra-question-grid {
		grid-template-columns: 1fr;
		/* The 88px `gap` above is meant as horizontal breathing room
		 * between the two desktop columns — once the grid collapses to
		 * a single column here, that same value becomes a huge vertical
		 * gap between the stacked sections instead (client-reported: a
		 * large empty space above "Which answer feels closest?"). Reset
		 * to a normal vertical rhythm value for the stacked layout. */
		gap: 32px;
	}
}

.bbra-question-left h1 {
	/* The shared .bbra h1 hero size (96px/100px) works for the short,
	 * fixed headlines on the welcome/landing/email-gate screens, but
	 * question prompts are long, dynamic, user-authored text sharing a
	 * narrow column with the answer list — at 96px it wrapped to 5
	 * lines and overflowed past the choices. Sized down for this one
	 * context instead of shrinking the hero size everywhere. */
	font-size: 40px;
	line-height: 1.15;
}

.bbra-question-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	color: var( --bbra-muted );
	margin-bottom: 10px;
}

/* Sized up from 13px (client-requested 2026-11-04) — applies the same
 * across desktop, tablet and mobile since nothing below overrides it
 * at a narrower width. */
.bbra-question-right-label {
	font-size: 18px;
	color: var( --bbra-muted );
	margin: 0 0 8px;
}

/* Reset the browser's default fieldset chrome (border/padding/margin) —
 * `<fieldset>`/`<legend>` used here purely for the accessibility
 * semantics, styled to look exactly like the plain label it replaced. */
.bbra-fieldset-reset {
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.bbra-fieldset-reset legend {
	padding: 0;
}

/* Real SVG icons (assets/images/arrow-icon*.svg, inlined — see
 * arrowIcon() in assessment.js) replacing the plain "→"/"←"/"↗"/"↖"
 * text characters previously used throughout. Sized off the parent's
 * own font-size (the SVG itself is width/height:1em) so it scales
 * naturally wherever it's dropped in, and nudged down slightly to sit
 * on the text baseline instead of the box's vertical center. */
.bbra-arrow-icon {
	display: inline-flex;
	vertical-align: -0.125em;
}

/* Flex-centered rather than relying on `vertical-align` alone (still
 * set above for the other, non-flex arrow-icon spots — landing CTA,
 * agenda rows, the brand annotation): a fixed em-based vertical-align
 * offset looked fine on the big bold uppercase "NEXT QUESTION" text
 * but visibly too high next to "Back"'s smaller, lighter link text —
 * two very different font metrics can't share one static offset.
 * `align-items: center` on the button itself vertically centers the
 * icon against the *actual* line box of whatever text sits next to
 * it, correct regardless of font-size/weight, so this fixes every
 * `.bbra-next-btn` across the app (all of them share this exact
 * "label + right arrow, centered" pattern) in one place, not just the
 * one screen reported. `.bbra-back-btn` only has an icon on the
 * question screen's own Back button; harmless no-op everywhere else
 * `.bbra-back-btn` is plain text with nothing to center against. */
.bbra-back-btn {
	display: inline-flex;
	align-items: center;
	/* Baseline gap so the icon and "Back" text don't touch — needed
	 * now that the JS no longer relies on a manual leading space
	 * character for spacing (see arrowIcon() call sites). The desktop-
	 * only `.bbra-question-nav .bbra-back-btn { column-gap: 10px; }`
	 * rule below still applies its own explicit value there; this is
	 * just the fallback everywhere else (mobile, and any other
	 * `.bbra-back-btn` instance without that more specific rule). */
	column-gap: 6px;
}

.bbra-next-btn {
	/* Same reasoning as .bbra-back-btn above — the JS text no longer
	 * ends in a manual trailing space before the arrow icon, so this
	 * is now the only thing providing that gap (client screenshot:
	 * arrow was sitting flush against the text). */
	column-gap: 10px;
	/* !important: .bbra-btn-primary (every .bbra-next-btn also carries
	 * that class) sets its own `display: block` later in this file —
	 * same selector specificity, later source order wins otherwise,
	 * confirmed live before adding this (same cascade-order pattern
	 * this file has hit before with Astra's theme CSS). */
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Arrow spans inside Back/Next animate independently of their label. */
.bbra-btn-arrow {
	transition: transform 180ms ease;
}

.bbra-back-btn:hover .bbra-btn-arrow--back {
	transform: translateX( -3px );
}

.bbra-next-btn:not( :disabled ):hover .bbra-btn-arrow {
	transform: translateX( 4px );
}

.bbra-next-btn:not( :disabled ):hover {
	filter: brightness( 1.15 );
}

.bbra-next-btn:not( :disabled ):active {
	transform: translateY( 1px );
}

/* One-off "reward" pulse when Next flips from disabled to enabled. */
@keyframes bbra-btn-pulse {
	0% { transform: scale( 1 ); }
	50% { transform: scale( 1.015 ); }
	100% { transform: scale( 1 ); }
}

.bbra-pulse {
	animation: bbra-btn-pulse 260ms ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.bbra-btn-arrow,
	.bbra-next-btn:not( :disabled ):hover,
	.bbra-next-btn:not( :disabled ):active {
		transition: none;
		transform: none;
		filter: none;
	}
	.bbra-pulse {
		animation: none;
	}
}

.bbra-brand-token {
	/* Client-requested: no underline anywhere (was mobile-only at
	 * first, then extended to desktop too — see workprogress.md).
	 * Italic alone still marks the brand-name substitution. */
	font-style: italic;
	text-decoration: none;
}

.bbra-question-token-note {
	/* Client-requested: hidden everywhere (was mobile-only at first,
	 * then extended to desktop too — see workprogress.md). Kept the
	 * rule (rather than deleting it and its JS call site) since the
	 * underlying data/logic driving it is unrelated and still used
	 * elsewhere; this is purely a visibility switch. */
	display: none;
}

.bbra-question-rule {
	border: none;
	border-top: 1px solid var( --bbra-border );
	margin: 0 0 20px;
}

.bbra-question-context-rule {
	border: none;
	border-top: 1px solid var( --bbra-border );
	margin: 20px 0;
}

.bbra-context-toggle,
.bbra-context-toggle:hover,
.bbra-context-toggle:focus,
.bbra-context-toggle:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var( --bbra-ink ) !important;
	padding: 0;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	margin-bottom: 12px;
}

.bbra-context-label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
}

.bbra-context-helper {
	font-size: 12px;
	color: var( --bbra-muted );
	margin: 4px 0 0;
}

/* ---- Field-level labels/hints (welcome + story screens) ---- */

.bbra-field-label {
	font-weight: 700;
	font-size: 15px;
	margin: 24px 0 8px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.bbra-required-mark {
	font-family: 'Neue Haas Display', Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --bbra-muted );
}

.bbra-field-hint {
	font-size: 12px;
	color: var( --bbra-muted );
	margin: 4px 0 0;
}

.bbra-field-error {
	color: #b3261e;
}

.bbra-select,
.bbra-select:hover,
.bbra-select:focus {
	width: 100%;
	font: inherit;
	/* .bbra sets line-height:1.5 for body copy, which inherits into
	 * native <select> controls; Chrome doesn't grow the control to fit
	 * that taller line box, so the option text's ascender gets clipped
	 * by the control's own edge. Overriding it back to normal (~1.2)
	 * fixes the clipped/overlapping text rendering. */
	line-height: normal;
	color: var( --bbra-ink ) !important;
	background-color: var( --bbra-surface ) !important;
	border: 1px solid var( --bbra-border ) !important;
	box-shadow: none !important;
	border-radius: 2px;
	padding: 12px 40px 12px 14px;
	margin: 8px 0 4px;
	/* Every other control here (buttons, chips, inputs) is fully custom-
	 * styled; left as browser-default, the native dropdown arrow/box
	 * chrome is the one control that still looks unfinished next to them
	 * (client-reported). `appearance: none` drops that native chrome so
	 * the custom arrow below (drawn with `currentColor`, so it tracks the
	 * operator's own ink color from Settings) is the only one shown,
	 * consistently across browsers. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url( "data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 12px;
}

/* Old Edge/IE also draw their own native arrow on top of a custom
 * background-image unless explicitly hidden. */
.bbra-select::-ms-expand {
	display: none;
}

.bbra-swatch-row {
	display: flex;
	gap: 10px;
	margin: 8px 0 4px;
}

.bbra-swatch,
.bbra-swatch:hover,
.bbra-swatch:focus,
.bbra-swatch:active {
	width: 40px;
	height: 40px;
	border: 1px solid var( --bbra-border ) !important;
	border-radius: 4px;
	cursor: pointer;
	padding: 0;
}

.bbra-swatch.is-selected {
	outline: 2px solid var( --bbra-ink );
	outline-offset: 2px;
}

.bbra-form-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 24px;
}

.bbra-form-actions .bbra-btn-primary {
	width: auto;
	margin-top: 0;
}

.bbra-form-actions .bbra-back-btn {
	margin: 0;
}

.bbra-extra-links {
	margin: 0;
}

.bbra-question-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	gap: 12px;
}

.bbra-question-nav .bbra-back-btn {
	margin: 0;
}

@media ( max-width: 820px ) {
	/* Client-requested, mobile only: Back after the primary CTA instead
	 * of before it, but still side by side in one row — not stacked
	 * (an earlier pass here used `column-reverse` per a different
	 * client screenshot; a follow-up screenshot showed Next and Back on
	 * the same row, Next on the left, Back on the right, so corrected
	 * to `row-reverse` instead). Back stays the first child in the DOM
	 * either way (screen-reader/tab order stays "Back, then Next"),
	 * this only changes the *visual* order. The existing flex-shrink
	 * behavior (Next's own width:100% as its flex-basis vs. Back's
	 * small content-sized basis) already makes Next claim the bulk of
	 * the row and Back stay compact — same mechanism the desktop row
	 * layout already relies on, no extra width override needed. */
	.bbra-question-nav {
		flex-direction: row-reverse;
	}

	button.bbra-btn-primary.bbra-next-btn {
		margin-top: 0;
	}
}

@media ( min-width: 821px ) {
	/* Client-supplied CSS for the desktop question-screen nav row.
	 * Scoped to `.bbra-question-nav .bbra-btn-primary` rather than the
	 * bare `.bbra-btn-primary` as given: that class is shared by many
	 * other buttons across the app (welcome/story, section-intro/
	 * complete, the results email panel) that already have their own
	 * deliberate width overrides — an unscoped `!important` rule would
	 * have silently overridden all of those too, not just this one
	 * button. */
	.bbra-question-nav .bbra-btn-primary {
		width: 86% !important;
		margin-top: 0 !important;
	}

	.bbra-question-nav .bbra-back-btn {
		column-gap: 10px;
	}

	.bbra-question-nav {
		margin-top: 44px;
	}
}

.bbra-btn-primary.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---- Welcome screen: two-column with sticky brand card ---- */

.bbra-welcome-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 88px;
	align-items: start;
}

@media ( max-width: 820px ) {
	.bbra-welcome-grid {
		grid-template-columns: 1fr;
		/* Same fix as `.bbra-question-grid`/`.bbra-landing-hero` — this
		 * grid's second column (the desktop brand card copy) is hidden
		 * on mobile, so the 88px gap currently has no visible second
		 * row to apply to, but resetting it here too keeps this in sync
		 * defensively rather than relying on that staying true. */
		gap: 32px;
	}
}

/* Two copies of the same card exist in the DOM (see renderWelcome() in
 * assessment.js) so it can sit in different positions on desktop vs.
 * mobile without JS reaching into the grid to reorder things — only
 * one is ever visible at a time, same 820px breakpoint the grid itself
 * already collapses at. */
.bbra-brand-card--mobile-only {
	display: none;
}

@media ( max-width: 820px ) {
	.bbra-brand-card--mobile-only {
		display: block;
		/* Not sticky: that's meant for the desktop sidebar copy staying
		 * put beside a scrolling form; inline mid-form on mobile it
		 * pinned awkwardly over the field below it as the visitor
		 * scrolled instead (client screenshot). !important: this rule
		 * and the base `.bbra-brand-card { position: sticky; }` below
		 * have equal specificity (one class each), and the base rule
		 * comes later in the file — cascade order alone would let it
		 * win over this media-query override otherwise, confirmed live
		 * before adding this. */
		position: static !important;
		margin: 20px 0 28px;
	}

	.bbra-brand-card--desktop-only {
		display: none;
	}
}

.bbra-brand-card {
	position: sticky;
	top: 24px;
	background: var( --bbra-surface );
	border: 1px solid var( --bbra-border );
	padding: 28px;
}

.bbra-brand-card-label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --bbra-muted );
	margin: 0 0 16px;
}

.bbra-brand-card-tile {
	width: 64px;
	height: 64px;
	border: 1px solid var( --bbra-ink );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Freight Big Cmp Pro', Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 16px;
}

.bbra-brand-card-name {
	font-family: 'Freight Big Cmp Pro', Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 24px;
	margin: 0 0 4px;
	word-break: break-word;
}

.bbra-brand-card-sub {
	font-size: 13px;
	color: var( --bbra-muted );
	margin: 0 0 16px;
}

.bbra-brand-card-divider {
	border: none;
	border-top: 1px solid var( --bbra-border );
	margin: 16px 0;
}

.bbra-brand-card-body {
	font-size: 14px;
	margin: 0 0 12px;
}

.bbra-brand-card-tagline {
	font-family: 'Freight Big Cmp Pro', Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 15px;
	margin: 0;
}

/* ---- Section start / section complete transition screens ---- */

.bbra-section-transition {
	text-align: center;
	max-width: 640px;
	margin: 20px auto 0;
	position: relative;
}

/* This screen's own Back button is unconditionally hidden now (see the
 * `.bbra-section-transition .bbra-back-btn { display: none; }` rule
 * near .bbra-navrail-count-row above) — Back lives in the navrail's
 * count row instead, at every width. No positioning rule needed here
 * any more. */

.bbra-section-transition-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
	color: var( --bbra-muted );
	margin: 0 0 20px;
}

.bbra-section-transition-icon {
	display: flex;
	justify-content: center;
	color: var( --bbra-ink );
}

.bbra-section-transition-icon svg {
	width: 44px;
	height: 44px;
}

.bbra-section-transition-number {
	font-family: 'Freight Big Cmp Pro', Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 64px;
	color: var( --bbra-border );
	margin: 12px 0;
	line-height: 1;
}

.bbra-section-transition h1 {
	font-size: 55px;
	line-height: 1.15;
	margin: 8px 0 16px;
}

.bbra-section-transition h1 em {
	/* Inherit the heading's bold-italic weight — was previously pinned
	 * to 400 back when only `em` sub-phrases were italic and the rest
	 * of the heading was upright; now the whole heading is bold italic
	 * (see .bbra h1/h2/h3), so this no longer needs its own override. */
	font-style: italic;
}

.bbra-section-transition-body {
	font-size: 16px;
	max-width: 46ch;
	margin: 0 auto 16px;
}

.bbra-section-transition-tagline {
	font-family: 'Freight Big Cmp Pro', Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 18px;
	margin: 16px 0;
}

.bbra-section-transition-rule {
	border: none;
	border-top: 1px solid var( --bbra-border );
	width: 120px;
	margin: 20px auto;
}

.bbra-section-transition-actions {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.bbra-section-transition-actions .bbra-btn-primary {
	width: auto;
	margin-top: 0;
	padding: 14px 26px;
}

.bbra-section-transition-sub {
	font-size: 13px;
	color: var( --bbra-muted );
	margin-top: 16px;
}

.bbra .bbra-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	color: var( --bbra-muted );
	margin-bottom: 8px;
}

.bbra .bbra-helper,
.bbra .bbra-section-lead {
	color: var( --bbra-muted );
	font-size: 15px;
}

.bbra .bbra-aside {
	font-style: italic;
	color: var( --bbra-muted );
	border-left: 2px solid var( --bbra-border );
	padding-left: 12px;
	margin: 16px 0;
}

.bbra .bbra-screen {
	animation: bbra-fade 200ms ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.bbra .bbra-screen {
		animation: none;
	}
}

@keyframes bbra-fade {
	from { opacity: 0; transform: translateY( 6px ); }
	to { opacity: 1; transform: translateY( 0 ); }
}

.bbra-input,
.bbra-textarea {
	width: 100%;
	font: inherit;
	color: var( --bbra-ink );
	background: var( --bbra-surface );
	border: 1px solid var( --bbra-border );
	border-radius: 2px;
	padding: 12px 14px;
	margin: 8px 0 4px;
}

.bbra-textarea {
	min-height: 80px;
	resize: vertical;
}

/* Text inputs/textareas removed from this list — they now carry their
 * own single, complete focus style (border + soft box-shadow ring,
 * see .bbra-input:focus above) instead of ALSO getting this outline
 * stacked on top, which is what produced the doubled-ring look a
 * client screenshot flagged. Buttons/choices/chips have no border-
 * based focus style of their own, so they still rely on this outline
 * as their one indicator. */
.bbra-choice:focus-visible,
.bbra-chip:focus-visible,
.bbra-btn-primary:focus-visible,
.bbra-link-btn:focus-visible {
	outline: 2px solid var( --bbra-accent );
	outline-offset: 2px;
}

.bbra-choice-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0;
}

.bbra-choice {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	background: var( --bbra-surface );
	border: 1px solid var( --bbra-border );
	border-radius: 2px;
	padding: 14px 16px;
	font: inherit;
	color: var( --bbra-ink );
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease;
}

.bbra-choice-radio {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var( --bbra-border );
	position: relative;
	transition: border-color 150ms ease;
}

/* Checkbox-square variant, for genuinely multi-select choice lists
 * (client-requested: the Plan inquiry's "goal" field) — same selection
 * mechanics/colors as the radio dot, just square to signal "pick any
 * number" rather than "pick one." */
.bbra-choice-radio--multi,
.bbra-choice-radio--multi::after {
	border-radius: 3px;
}

.bbra-choice-radio--multi {
	width: 16px;
	height: 16px;
}

.bbra-choice-radio--multi::after {
	width: 10px;
	height: 10px;
}

.bbra-choice-radio::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	transform: translate( -50%, -50% ) scale( 0 );
	transition: transform 150ms ease;
}

.bbra-choice:hover .bbra-choice-radio {
	border-color: var( --bbra-accent );
}

.bbra-choice.is-selected .bbra-choice-radio {
	border-color: var( --bbra-surface );
}

.bbra-choice.is-selected .bbra-choice-radio::after {
	transform: translate( -50%, -50% ) scale( 1 );
}

.bbra-choice-label {
	flex: 1;
}

/*
 * Explicit hover/focus/active overrides below, all with the WordPress
 * active theme's own global button styling in mind (e.g. Astra applies a
 * blue background on button :hover/:focus/:active sitewide). Without
 * these, that theme rule can win over our base `.bbra-choice` background
 * inside the shortcode's rendered content, showing a stray blue fill
 * instead of our ink/bone/white selection style. `!important` is
 * deliberate here — this is a plugin-owned widget embedded in arbitrary
 * theme markup and needs to be immune to whatever the active theme does
 * to <button>.
 */

.bbra-choice {
	background: var( --bbra-surface ) !important;
	color: var( --bbra-ink ) !important;
}

.bbra-choice:hover,
.bbra-choice:focus,
.bbra-choice:active {
	background: var( --bbra-bg ) !important;
	color: var( --bbra-ink ) !important;
}

.bbra-choice:hover,
.bbra-choice:focus {
	border-color: var( --bbra-accent );
}

.bbra-choice.is-selected .bbra-choice-label {
	font-weight: 500;
}

.bbra-choice.is-selected,
.bbra-choice.is-selected:hover,
.bbra-choice.is-selected:focus,
.bbra-choice.is-selected:active {
	background: var( --bbra-ink ) !important;
	color: var( --bbra-surface ) !important;
	border-color: var( --bbra-ink );
}

.bbra-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}

.bbra-chip,
.bbra-chip:hover,
.bbra-chip:focus,
.bbra-chip:active {
	background: var( --bbra-surface ) !important;
	color: var( --bbra-ink ) !important;
	border: 1px solid var( --bbra-border );
	border-radius: 999px;
	padding: 8px 16px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.bbra-chip.is-selected,
.bbra-chip.is-selected:hover,
.bbra-chip.is-selected:focus,
.bbra-chip.is-selected:active {
	background: var( --bbra-ink ) !important;
	color: var( --bbra-surface ) !important;
	border-color: var( --bbra-ink );
}

.bbra-btn-primary {
	display: block;
	width: 100%;
	background: var( --bbra-ink ) !important;
	color: var( --bbra-surface ) !important;
	border: none;
	border-radius: 2px;
	padding: 12px 20px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	margin-top: 24px;
}

.bbra-btn-primary:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.bbra-btn-primary:disabled:hover {
	transform: none;
}

.bbra-btn-primary:hover,
.bbra-btn-primary:focus,
.bbra-btn-primary:active {
	background: var( --bbra-ink ) !important;
	color: var( --bbra-surface ) !important;
	opacity: 0.9;
}

.bbra-link-btn,
.bbra-link-btn:hover,
.bbra-link-btn:focus,
.bbra-link-btn:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var( --bbra-muted ) !important;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
	padding: 4px 0;
}

.bbra-back-btn {
	margin-bottom: 16px;
}

.bbra-resume-banner {
	background: var( --bbra-surface );
	border: 1px solid var( --bbra-border );
	border-radius: 2px;
	padding: 12px 14px;
	font-size: 14px;
	margin-bottom: 20px;
}

.bbra-progress {
	margin-bottom: 24px;
}

.bbra-progress-track {
	height: 8px;
	background: var( --bbra-border );
	border-radius: 999px;
	overflow: hidden;
}

.bbra-progress-fill {
	height: 100%;
	background: var( --bbra-ink );
	transition: width 200ms ease;
}

.bbra-progress-label {
	display: block;
	font-size: 12px;
	color: var( --bbra-muted );
	margin-top: 6px;
}

.bbra-logo-field {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 12px 0;
}

.bbra-logo-preview {
	width: 64px;
	height: 64px;
	border: 1px dashed var( --bbra-border );
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-size: 11px;
	color: var( --bbra-muted );
	text-align: center;
	flex-shrink: 0;
}

.bbra-logo-preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bbra-result-score {
	font-family: 'Freight Big Cmp Pro', Georgia, serif;
	font-style: italic;
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
}

.bbra-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	margin: 16px 0;
}

.bbra-checkbox-label input[type="checkbox"] {
	/* Client-requested: the checkbox was using the browser's default
	 * blue accent color, which doesn't match the site's black/bone/
	 * white palette — `accent-color` recolors the native check/box
	 * fill without needing a custom-built checkbox control. */
	accent-color: var( --bbra-ink );
}

/* ---- Results screen ---- */

.bbra-result-hero {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.bbra-result-hero-left {
	flex: 1;
	min-width: 260px;
}

/* Client-requested (2026-10-19): larger results title. */
.bbra-result-hero h1 {
	font-size: 80px;
	line-height: 1.02;
}

@media ( max-width: 900px ) {
	.bbra-result-hero h1 {
		font-size: 64px;
	}
}

@media ( max-width: 480px ) {
	.bbra-result-hero h1 {
		font-size: 44px;
	}
}

.bbra-result-ring-wrap {
	position: relative;
	width: 170px;
	height: 170px;
	flex-shrink: 0;
}

.bbra-result-ring-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.bbra-result-ring-label {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bbra-muted );
	margin-top: 4px;
}

.bbra-stage-badge {
	display: inline-block;
	border: 1px solid var( --bbra-ink );
	border-radius: 3px;
	padding: 6px 14px;
	font-size: 13px;
	margin: 16px 0 12px;
}

.bbra-result-panel-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 24px 0;
}

@media ( max-width: 640px ) {
	.bbra-result-panel-row {
		grid-template-columns: 1fr;
	}
}

.bbra-result-panel {
	background: var( --bbra-surface );
	border: 1px solid var( --bbra-border );
	border-radius: 4px;
	padding: 20px;
}

.bbra-result-panel--shaded {
	/* Client-requested: this panel only ("Your next useful move"), not
	 * its sibling ("A strength to build on") — black background, all
	 * text inside white. */
	background: #111111;
	border-color: #111111;
}

.bbra-result-panel--shaded * {
	color: #ffffff;
}

.bbra-result-panel--shaded h1,
.bbra-result-panel--shaded h2,
.bbra-result-panel--shaded h3 {
	color: #ffffff;
}

.bbra-result-panel h3 {
	margin: 6px 0 8px;
}

/* Client-requested, results page only: h3s at 38px, h2s at 46px. */
.bbra-screen--results h3 {
	font-size: 52px;
}

.bbra-screen--results h2 {
	font-size: 52px;
}

.bbra-result-panel p:last-child {
	font-size: 13px;
	color: var( --bbra-muted );
	margin: 0;
}

.bbra-result-panel--shaded p:last-child {
	color: #ffffff;
}

.bbra-btn-secondary,
.bbra-btn-secondary:hover,
.bbra-btn-secondary:focus,
.bbra-btn-secondary:active {
	background: var( --bbra-surface ) !important;
	color: var( --bbra-ink ) !important;
	border: 1px solid var( --bbra-ink ) !important;
	box-shadow: none !important;
	border-radius: 2px;
	padding: 12px 20px;
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.bbra-email-panel {
	background: var( --bbra-bg );
	border-radius: 4px;
	padding: 28px;
	margin: 48px 0 24px;
}

.bbra-email-panel .bbra-btn-primary {
	max-width: 260px;
}

.bbra-screen--shared-result .bbra-email-panel .bbra-btn-primary {
	display: inline-flex !important;
	width: auto;
	max-width: 100%;
	white-space: nowrap;
}

/*
 * Landing/hero screen — matches the approved Canva prototype's opening
 * screen ("Step into the boardroom"), transcribed from a screenshot the
 * client supplied (the Canva file itself is not programmatically
 * fetchable). This screen alone gets a wider container than the rest of
 * the conversational flow, which stays at the narrow 640px reading width
 * — matches the two-column editorial layout in the reference image while
 * keeping every other screen's proven mobile-first single column.
 */

.bbra-landing {
	animation: none; /* this is the entry screen; nothing to fade in from */
}

.bbra-landing-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 88px;
	align-items: start;
}

@media ( max-width: 820px ) {
	.bbra-landing-hero {
		grid-template-columns: 1fr;
		/* Same fix as `.bbra-question-grid` above: the 88px desktop
		 * column-gap becomes an oversized vertical gap once this
		 * collapses to one column (the agenda panel stays visible on
		 * mobile, stacked below the hero text). */
		gap: 32px;
	}
}

.bbra-landing-left .bbra-eyebrow {
	margin-bottom: 16px;
}

.bbra-landing-title {
	font-size: 44px;
	line-height: 1.1;
	margin: 0 0 20px;
}

.bbra-landing-title em {
	/* Inherit the heading's bold-italic weight (see note on
	 * .bbra-section-transition h1 em above). */
	font-style: italic;
}

.bbra-landing-body {
	font-size: 16px;
	color: var( --bbra-ink );
	max-width: 46ch;
	margin: 0 0 28px;
}

.bbra-landing-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin-top: 0;
	padding: 14px 24px;
}

.bbra-landing-stats {
	display: flex;
	gap: 40px;
	margin: 32px 0 16px;
}

.bbra-landing-stat {
	display: flex;
	flex-direction: column;
}

.bbra-landing-stat-num {
	font-family: Georgia, serif;
	font-size: 32px;
	font-weight: 700;
}

.bbra-landing-stat-label {
	font-size: 12px;
	color: var( --bbra-muted );
	max-width: 12ch;
}

.bbra-landing-footnote {
	font-size: 13px;
	color: var( --bbra-muted );
}

.bbra-landing-agenda {
	border: 1px solid var( --bbra-ink );
	background: var( --bbra-surface );
	padding: 28px;
	border-radius: 2px;
}

.bbra-landing-agenda-label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --bbra-muted );
	margin: 0 0 16px;
}

.bbra-landing-agenda-list {
	display: flex;
	flex-direction: column;
}

.bbra-landing-agenda-row {
	display: grid;
	grid-template-columns: 22px 26px 1fr 20px;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var( --bbra-border );
	font-size: 14px;
}

.bbra-landing-agenda-row:last-of-type {
	border-bottom: none;
}

.bbra-landing-agenda-icon {
	display: flex;
	color: var( --bbra-ink );
}

.bbra-landing-agenda-num {
	font-family: Georgia, serif;
	font-weight: 700;
	color: var( --bbra-muted );
}

.bbra-landing-agenda-arrow {
	color: var( --bbra-muted );
	text-align: right;
}

.bbra-landing-agenda-tagline {
	font-size: 15px;
	margin: 20px 0 4px;
}

.bbra-landing-agenda-tagline em {
	font-style: italic;
}

.bbra-landing-agenda-sub {
	font-size: 12px;
	color: var( --bbra-muted );
	margin: 0;
}

@media ( max-width: 480px ) {
	.bbra-landing-title {
		font-size: 32px;
	}
	.bbra-landing-agenda {
		padding: 20px;
	}
}

/*
 * Results page — results spec §2 order: overall, category cards with
 * interpretation + Quick Fix, Share Your Result (after Personal
 * Discovery), Next Useful Move, stage Plan CTA. No email capture.
 */

.bbra-result-stage .bbra-result-strongest {
	margin: 8px 0 0;
}

.bbra-result-overall {
	margin-bottom: 32px;
}

.bbra-cat {
	border-top: 1px solid var( --bbra-border );
}

.bbra-cat-head,
.bbra-cat-head:hover,
.bbra-cat-head:focus,
.bbra-cat-head:active {
	display: grid;
	grid-template-columns: minmax( 150px, 220px ) 1fr 40px 20px;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 0;
	background: transparent !important;
	color: var( --bbra-ink ) !important;
	border: 0 !important;
	box-shadow: none !important;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

div.bbra-cat-head {
	grid-template-columns: minmax( 150px, 220px ) 1fr 40px;
	cursor: default;
}

.bbra-cat-head:focus-visible {
	outline: 2px solid var( --bbra-ink );
	outline-offset: 2px;
}

.bbra-cat-name {
	font-weight: 700;
	font-size: 15px;
}

.bbra-cat-num {
	color: var( --bbra-muted );
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.bbra-cat-bar {
	display: block;
	height: 8px;
	background: var( --bbra-border );
	border-radius: 999px;
	overflow: hidden;
}

.bbra-cat-bar-fill {
	display: block;
	height: 100%;
	background: var( --bbra-ink );
}

.bbra-cat-score {
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bbra-cat-toggle {
	font-size: 18px;
	line-height: 1;
	text-align: center;
}

.bbra-cat-body {
	padding: 0 0 20px;
}

.bbra-cat-desc,
.bbra-cat-fix-label,
.bbra-cat-fix {
	max-width: 680px;
}

.bbra-cat-body .bbra-share {
	margin: 24px 0 4px;
}

.bbra-cat-desc {
	margin: 0 0 12px;
}

.bbra-cat-fix-label {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bbra-cat-fix {
	margin: 0;
	font-style: italic;
	border-left: 2px solid var( --bbra-ink );
	padding-left: 12px;
}

@media ( max-width: 560px ) {
	.bbra-cat-head,
	.bbra-cat-head:hover,
	.bbra-cat-head:focus,
	.bbra-cat-head:active {
		grid-template-columns: 1fr 36px 20px;
		row-gap: 8px;
	}

	div.bbra-cat-head {
		grid-template-columns: 1fr 36px;
	}

	.bbra-cat-bar {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* Share Your Result */
.bbra-share {
	background: var( --bbra-bg );
	border-radius: 4px;
	padding: 24px;
	margin: 8px 0 24px;
}

.bbra-screen--results .bbra-share-heading {
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 16px;
}

.bbra-share-grid {
	display: grid;
	/* minmax(0, ...), not bare fr units — see the modal-scoped override
	 * below for why (same latent overflow risk applies here). */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.4fr );
	gap: 24px;
}

.bbra-share-col--team {
	border-left: 1px solid var( --bbra-border );
	padding-left: 24px;
}

@media ( max-width: 640px ) {
	.bbra-share-grid {
		grid-template-columns: 1fr;
	}

	.bbra-share-col--team {
		border-left: 0;
		border-top: 1px solid var( --bbra-border );
		padding: 20px 0 0;
	}
}

.bbra-share-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bbra-muted );
}

.bbra-share .bbra-share-main {
	display: inline-block;
	width: auto;
	margin-top: 0;
	padding: 12px 28px;
}

/* Row of black circular network icons revealed by hovering the Share
 * button — matches the client's reference screenshot. Hover-capable
 * screens float the row under the button (no layout shift); the
 * padding-top keeps the hover alive while the pointer moves down to the
 * icons. Touch screens toggle .is-open on tap instead. */
.bbra-share-hover {
	position: relative;
	display: inline-block;
}

.bbra-share-networks {
	display: none;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 14px;
}

.bbra-share-hover:hover .bbra-share-networks,
.bbra-share-hover:focus-within .bbra-share-networks,
.bbra-share-hover.is-open .bbra-share-networks {
	display: flex;
	animation: bbra-share-pop 180ms ease-out;
}

@media ( hover: hover ) {
	.bbra-share-networks {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 5;
		flex-wrap: nowrap;
	}
}

@keyframes bbra-share-pop {
	from { opacity: 0; transform: translateY( -4px ); }
	to { opacity: 1; transform: none; }
}

/* White bordered buttons, not solid black circles (client-requested
 * 2026-11-03, matching the reference's labeled-button style). Every
 * use is icon-only now (Email/Copy link live as Team buttons instead,
 * not repeated here — client-requested 2026-11-04), so this is a
 * fixed square. */
.bbra-share-circle,
.bbra-share-circle:hover,
.bbra-share-circle:focus,
.bbra-share-circle:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 2px;
	background: var( --bbra-surface ) !important;
	color: var( --bbra-ink ) !important;
	border: 1px solid var( --bbra-ink ) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: transform 150ms ease, background 150ms ease;
}

.bbra-share-circle:hover {
	background: var( --bbra-bg ) !important;
	transform: translateY( -2px );
}

.bbra-share-circle:focus-visible {
	outline: 2px solid var( --bbra-ink );
	outline-offset: 3px;
}

.bbra-share-circle-icon {
	display: flex;
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.bbra-share-networks,
	.bbra-share-circle {
		animation: none;
		transition: none;
	}
}

.bbra-share-team-heading {
	margin: 0 0 4px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bbra-share-team-body {
	margin: 0 0 12px;
}

.bbra-share-team-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

a.bbra-share-team-btn,
a.bbra-share-team-btn:hover,
a.bbra-share-team-btn:focus,
.bbra-plan-cta a.bbra-plan-cta-btn,
.bbra-plan-cta a.bbra-plan-cta-btn:hover {
	display: inline-block;
	text-decoration: none !important;
}

.bbra-share-status {
	margin: 12px 0 0;
	min-height: 1em;
	font-size: 13px;
}

/* Your Next Useful Move + Plan CTA */
.bbra-next-move {
	margin: 32px 0 24px;
}

/* Client feedback 2026-10-20: no box/border — the section sits on the
 * page like the other section headings, aligned to the content edge. */
.bbra-plan-cta {
	padding: 16px 0 8px;
	margin: 0 0 40px;
}

/* Client feedback 2026-10-20: same look as the page's other section
 * headings ("Already thinking this through with AI?") — size, sentence
 * case, no tracking. */
.bbra-screen--results .bbra-plan-cta-heading {
	font-size: 52px;
	line-height: 1.1;
	text-transform: none;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
}

@media ( max-width: 640px ) {
	.bbra-screen--results .bbra-plan-cta-heading {
		font-size: 42px;
	}
}

.bbra-plan-cta .bbra-plan-cta-btn {
	display: inline-block;
	width: auto;
	margin-top: 0;
	text-decoration: none;
	text-align: center;
}

/* "Back" repeated next to the Plan CTA button (client-requested
 * 2026-11-03), matching its own icon+label style. */
.bbra-plan-cta-actions {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 8px;
}

/* `.bbra-back-btn`'s own `margin-bottom: 16px` (meant for contexts
 * where Back sits alone, above other content) was pushing this one up
 * out of vertical center within the row above — same zeroing-out every
 * other `.bbra-back-btn` usage inside a button row already needs (see
 * `.bbra-form-actions .bbra-back-btn`, `.bbra-question-nav
 * .bbra-back-btn`). */
.bbra-plan-cta-actions .bbra-back-btn {
	margin: 0;
}

/* Stacked on mobile (client-requested 2026-11-04) — the CTA button's
 * own text already wraps to two lines at this width, so "Back" sitting
 * beside it on the same row left it squeezed against the button's
 * right edge instead of having its own breathing room. */
@media ( max-width: 640px ) {
	.bbra-plan-cta-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}


/* Marketing permission at the bottom of the welcome form. */
.bbra-welcome-optin {
	margin-top: 24px;
}

/*
 * Results overall block (client request 2026-10-19): bigger readiness
 * circle, sitting beside the title + stage text with its bottom level
 * with the "A strength to build on" line.
 */
.bbra-result-hero--overall {
	/* Top-aligned: the title starts level with the circle; the strength
	 * line now sits under the circle instead of beside it. */
	align-items: flex-start;
	flex-wrap: nowrap;
}

.bbra-result-hero--overall .bbra-result-strongest {
	margin-bottom: 0;
}

.bbra-result-hero--overall .bbra-result-ring-wrap {
	width: 260px;
	height: 260px;
}

.bbra-result-hero--overall .bbra-result-score {
	font-size: 76px;
}

.bbra-result-hero--overall .bbra-result-ring-label {
	font-size: 12px;
	margin-top: 8px;
}

@media ( max-width: 900px ) {
	.bbra-result-hero--overall .bbra-result-ring-wrap {
		width: 210px;
		height: 210px;
	}

	.bbra-result-hero--overall .bbra-result-score {
		font-size: 62px;
	}
}

@media ( max-width: 640px ) {
	.bbra-result-hero--overall {
		flex-wrap: wrap;
	}

	.bbra-result-hero--overall .bbra-result-ring-wrap {
		width: 200px;
		height: 200px;
		margin-top: 24px;
	}
}

/*
 * Plan inquiry form (client feedback 2026-10-20): question headings styled
 * like the reference contact page — small uppercase labels — in the
 * current black/white palette; contact fields in a two-column grid; the
 * submit button only as wide as the consent sentence above it.
 */
.bbra-screen--inquiry h2 {
	font-family: inherit;
	font-style: normal;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 36px 0 12px;
}

.bbra-screen--inquiry .bbra-field-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bbra-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
}

.bbra-contact-grid-full {
	grid-column: 1 / -1;
}

@media ( max-width: 640px ) {
	.bbra-contact-grid {
		grid-template-columns: 1fr;
	}
}

.bbra-inquiry-submit {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	max-width: 100%;
	margin-top: 8px;
}

.bbra-inquiry-submit .bbra-btn-primary {
	width: 100%;
	margin-top: 18px;
}

/* Circle + "A strength to build on" stacked on the right (2026-10-20). */
.bbra-result-ring-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.bbra-result-ring-col .bbra-result-strongest {
	margin: 16px 0 0;
	text-align: center;
}

.bbra-result-hero--overall .bbra-result-stage p:last-child {
	margin-bottom: 0;
}

@media ( max-width: 640px ) {
	.bbra-result-ring-col {
		width: 100%;
		margin-top: 24px;
	}

	.bbra-result-hero--overall .bbra-result-ring-col .bbra-result-ring-wrap {
		margin-top: 0;
	}
}

/* Results eyebrow tight above the title (2026-10-20). */
.bbra-result-hero--overall .bbra-result-eyebrow {
	margin: 0 0 12px;
}

.bbra-result-hero--overall .bbra-result-hero-left h1 {
	margin-top: 0;
}

/* Uploaded / selected files under "Choose files" (2026-10-22). */
.bbra-file-list {
	list-style: none;
	margin: 10px 0 4px;
	padding: 0;
	font-size: 14px;
}

.bbra-file-list li {
	padding: 6px 0;
	border-bottom: 1px solid var( --bbra-border );
}

.bbra-file-list .bbra-link-btn {
	margin-left: 8px;
	font-size: 13px;
}

/*
 * Results summary (client feedback 2026-10-23, mobile first, then applied
 * to tablet and desktop): readiness summary + score in one box, a single
 * SHARE MY RESULTS button under it, and the Share Your Result panel removed.
 */
.bbra-result-overall-wrap {
	margin-bottom: 32px;
}

.bbra-result-overall-wrap .bbra-result-overall {
	margin-bottom: 0;
}

/* Below 900px the border sits on the summary only, so SHARE MY RESULTS
 * shows under the box; wide screens move it onto the whole box (below).
 * Highlighted with the site's own Accent color (Settings -> Appearance)
 * instead of a plain border, so the summary box stands out from the
 * page (client-requested 2026-11-04). `color-mix()` tints the surface
 * color with a little Accent rather than hard-coding a fixed tint, so
 * it still looks right whatever Accent color is configured; browsers
 * without `color-mix()` support simply keep the plain surface color. */
.bbra-result-overall-wrap .bbra-result-hero--overall {
	border: 1px solid var( --bbra-accent );
	border-radius: 4px;
	padding: 22px 18px 24px;
	background: color-mix( in srgb, var( --bbra-accent ) 10%, var( --bbra-surface ) );
}

.bbra-mobile-share {
	display: block;
	margin-top: 16px;
}

.bbra-mobile-share .bbra-mobile-share-btn {
	margin-top: 0;
}

/* The Share Your Result panel inside Personal Discovery. */
.bbra-cat-body .bbra-share {
	display: none;
}

/*
 * Summary box order: 1 label + title, 2 score circle, 3 stage tag +
 * description, 4 "A strength to build on". The two columns are flattened
 * (display: contents) so their pieces can be re-ordered in one column.
 */
.bbra-result-hero--overall {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}

.bbra-result-hero--overall .bbra-result-hero-left,
.bbra-result-hero--overall .bbra-result-ring-col {
	display: contents;
}

.bbra-result-hero--overall .bbra-result-eyebrow { order: 1; }
.bbra-result-hero--overall h1 { order: 2; }

.bbra-result-hero--overall .bbra-result-ring-wrap {
	order: 3;
	align-self: center;
	margin: 24px 0 8px;
}

.bbra-result-hero--overall .bbra-result-stage {
	order: 4;
	margin-top: 16px;
}

.bbra-result-hero--overall .bbra-result-strongest {
	order: 5;
	margin: 16px 0 0;
	text-align: left;
}

@media ( min-width: 641px ) {
	.bbra-result-overall-wrap .bbra-result-hero--overall {
		padding: 40px 48px 44px;
	}
}

/* Narrow screens (any input type): share icons sit in the page flow and
 * wrap, never floating over the Team section (2026-10-23). */
@media ( max-width: 640px ) {
	.bbra-share-networks {
		position: static;
		flex-wrap: wrap;
	}
}

/*
 * "Share your result" modal (2026-11-03, replaces the old inline-reveal
 * panel under SHARE MY RESULTS — matches the sibling ml-quiz plugin's
 * own share popup). Reuses `shareSection()`'s markup unchanged inside
 * `.bbra-share-modal-options`: icons show straight away, with no inner
 * "Share my result" trigger button or repeated heading, same idea as
 * the old inline panel had.
 */
.bbra-share-modal-overlay {
	/* Appended to `document.body` (see assessment.js), outside `.bbra` —
	 * redeclared here so `var(--bbra-*)` still resolves for everything
	 * inside the modal. */
	--bbra-bg: #edece6;
	--bbra-surface: #ffffff;
	--bbra-ink: #111111;
	--bbra-accent: #111111;
	--bbra-muted: #595951;
	--bbra-border: #cbc9c0;

	position: fixed;
	inset: 0;
	background: rgba( 17, 17, 17, 0.55 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
	z-index: 1000;
}

.bbra-share-modal {
	/* !important: without this, text here (eyebrow, stage badge,
	 * strength line, the ring's own number/label — none of which set
	 * their own `color`) falls back to the theme's own default text
	 * color instead of this site's ink black, rendering with a visible
	 * blue-ish tint (client-reported 2026-11-03, screenshot) — same
	 * root cause as the earlier logo/headline fixes today: this modal
	 * sits outside the page's normal `.entry-content` wrapper, which is
	 * what was quietly supplying the correct color everywhere else.
	 * Setting it once here, inherited by everything inside, instead of
	 * patching each element individually. */
	color: var( --bbra-ink ) !important;
	background: var( --bbra-surface );
	border-radius: 6px;
	width: 100%;
	max-width: 640px;
	max-height: 100%;
	overflow-y: auto;
	padding: 18px 20px 20px;
	box-shadow: 0 20px 60px rgba( 17, 17, 17, 0.3 );
}

.bbra-share-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.bbra-share-modal-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --bbra-ink );
}

.bbra-share-modal-close,
.bbra-share-modal-close:hover,
.bbra-share-modal-close:focus,
.bbra-share-modal-close:active {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* !important: the theme's own default button styling (blue
	 * background) otherwise wins here — same Astra-conflict pattern
	 * already noted on `.bbra` itself and fixed the same way on every
	 * other custom button on this screen. */
	background: var( --bbra-surface ) !important;
	color: var( --bbra-ink ) !important;
	border: 1px solid var( --bbra-ink ) !important;
	box-shadow: none !important;
	border-radius: 2px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}

.bbra-share-preview {
	border: 1px solid var( --bbra-border );
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 14px;
}

/* Flex row: text column (eyebrow/headline/stage/strength) vs the ring,
 * `align-items: center` here centers the ring against this row's full
 * height — which now spans the *entire* card content, headline
 * included, not just a shorter row below it (client-requested
 * 2026-11-03: "center it against the whole card height" — the ring
 * previously sat as a sibling of just the stage badge/strength line,
 * so it only ever centered against that short block). */
.bbra-share-preview-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px 18px;
}

/* Sized up (client-requested 2026-11-04: "make the highlighted things
 * a little bigger") — eyebrow, headline, stage badge, strength line
 * and the ring all grew a step from their original popup sizes. */
.bbra-share-preview-body .bbra-eyebrow {
	margin: 0 0 4px;
	font-size: 13px;
}

/* !important: same theme-conflict as the logo color above — outside
 * the page's normal wrapper, the theme's own heading font/weight/
 * style otherwise wins over `.bbra h1`'s italic serif. */
.bbra-share-preview-body h1 {
	font-family: 'Freight Big Cmp Pro', Georgia, 'Times New Roman', serif !important;
	font-style: italic !important;
	font-weight: 700 !important;
	color: var( --bbra-ink ) !important;
	font-size: 40px;
	line-height: 1.15;
	margin: 0;
}

.bbra-share-preview-stage {
	margin-top: 10px;
}

.bbra-share-preview-stage .bbra-stage-badge {
	font-size: 15px;
	padding: 7px 16px;
	margin-bottom: 4px;
}

.bbra-share-preview-stage .bbra-result-strongest {
	font-size: 15px;
	margin: 0;
}

.bbra-share-preview-body .bbra-result-ring-wrap {
	flex-shrink: 0;
	width: 112px;
	height: 112px;
}

.bbra-share-preview-body .bbra-result-score {
	font-size: 28px;
}

.bbra-share-preview-body .bbra-result-ring-label {
	font-size: 9px;
}

.bbra-share-modal-options.bbra-share {
	padding: 14px 16px;
	margin: 0;
}

.bbra-share-modal-options .bbra-share-heading,
.bbra-share-modal-options .bbra-share-main,
/* The "Send your result..." explainer paragraph, and the "SHARE WITH
 * YOUR TEAM" sub-heading — both dropped inside the modal specifically:
 * the "TEAM" eyebrow label already says what the column is (matching
 * "SOCIAL" right next to it), so repeating it as a second, bigger
 * heading read as redundant rather than helpful (client-requested
 * 2026-11-03, "design this section better"). */
.bbra-share-modal-options .bbra-share-team-body,
.bbra-share-modal-options .bbra-share-team-heading {
	display: none;
}

/* Single column, Social above Team, at every width (client-requested
 * 2026-11-04) — previously two side-by-side columns above 640px, which
 * also squeezed the Team column too narrow for its own buttons at that
 * width (see the stacked-vs-row Team button fix just above). */
.bbra-share-modal-options .bbra-share-grid {
	grid-template-columns: 1fr;
	gap: 24px;
}

/* The base (non-modal) `.bbra-share-col--team` puts a left border on
 * Team for when it sits beside Social in a side-by-side grid — now
 * that the modal's own grid is always a single column, that becomes a
 * horizontal divider between the stacked sections instead. */
.bbra-share-modal-options .bbra-share-col--team {
	border-left: 0;
	border-top: 1px solid var( --bbra-border );
	padding: 20px 0 0;
}

.bbra-share-modal-options .bbra-share-label {
	margin-bottom: 10px;
}

.bbra-share-modal-options .bbra-share-networks {
	display: flex;
	position: static;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 0;
	animation: none;
}

.bbra-share-modal-options .bbra-share-circle,
.bbra-share-modal-options .bbra-share-circle:hover,
.bbra-share-modal-options .bbra-share-circle:focus,
.bbra-share-modal-options .bbra-share-circle:active {
	height: 42px;
	min-width: 42px;
}

/* Team buttons restyled to match the Social icons' own button language
 * (same height/border/weight) instead of the taller, heavier
 * `.bbra-btn-secondary` treatment they had before — the two columns now
 * read as one consistent system rather than two different button
 * styles sitting side by side. Row, not stacked (client-requested
 * 2026-11-04) — now that Social and Team are always a single
 * full-width column (see `.bbra-share-grid` above), Team always has
 * the room for this, not just at the one narrow width that used to be
 * true before that change. */
.bbra-share-modal-options .bbra-share-team-actions {
	flex-direction: row;
	gap: 8px;
}

.bbra-share-modal-options .bbra-share-team-btn,
.bbra-share-modal-options a.bbra-share-team-btn,
.bbra-share-modal-options a.bbra-share-team-btn:hover,
.bbra-share-modal-options a.bbra-share-team-btn:focus,
.bbra-share-modal-options button.bbra-share-team-btn {
	/* `flex: 1`, not `width: 100%` — in a row, `width: 100%` would have
	 * each button try to claim the full row on its own; `flex: 1` splits
	 * it evenly between them instead, and `min-width: 0` lets a button
	 * actually shrink below its text's natural width if the row gets
	 * narrow, rather than refusing to and breaking the row. */
	/* flex + center, not just `text-align: center` — "Email my result"
	 * is an `<a>` (inline by default) while "Copy link" is a `<button>`
	 * (inline-block by default); without an explicit display the two
	 * sized/centered their text differently, leaving one pinned to the
	 * top of its own box instead of centered (client-reported
	 * 2026-11-03, DevTools screenshot). Flex centers both the same way
	 * regardless of the underlying tag. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	text-align: center;
	height: 42px;
	padding: 0 18px;
	margin: 0;
	font-size: 13px;
	background: var( --bbra-surface ) !important;
	color: var( --bbra-ink ) !important;
	border: 1px solid var( --bbra-ink ) !important;
	border-radius: 2px;
	box-shadow: none !important;
}

.bbra-share-modal-options .bbra-share-team-btn-icon {
	display: flex;
	flex-shrink: 0;
	pointer-events: none;
}

/*
 * Tablet/phone. Stays the same centered, rounded-corner card with the
 * dimmed backdrop visible around it that every other width uses —
 * client-requested 2026-11-03, reversing an earlier attempt today that
 * went edge-to-edge full-screen instead (that was chasing a "no
 * scrolling" request, but the actual target look keeps the floating
 * overlay style like the reference image, not full-bleed). The
 * generous content compaction already done for this width (smaller
 * ring/headline, single-column Social/Team) carries over unchanged —
 * that's still doing the real work of fitting the content; the
 * modal's own `max-height: 100%` + `overflow-y: auto` remains the
 * safety net if a particularly short screen still needs to scroll.
 */
@media ( max-width: 640px ) {
	/* Tighter outer margin around the card itself — the less room this
	 * eats on a short screen, the more is left for the card's own
	 * content before it needs to scroll (client-requested 2026-11-03,
	 * "reduce the spacing, make it fit with no scrolling"). */
	.bbra-share-modal-overlay {
		padding: 10px;
	}

	.bbra-share-modal {
		padding: 12px 14px 14px;
	}

	.bbra-share-modal-header {
		margin-bottom: 8px;
	}

	.bbra-share-preview-body {
		padding: 8px 16px 10px 12px;
	}

	.bbra-share-preview-body h1 {
		font-size: 26px;
	}

	.bbra-share-preview-body .bbra-eyebrow {
		font-size: 12px;
		margin-bottom: 2px;
	}

	.bbra-share-preview-body .bbra-result-ring-wrap {
		width: 96px;
		height: 96px;
	}

	.bbra-share-preview-body .bbra-result-score {
		font-size: 23px;
	}

	.bbra-share-preview-body .bbra-result-ring-label {
		font-size: 8px;
	}

	.bbra-share-preview-stage {
		margin-top: 6px;
	}

	.bbra-share-modal-options.bbra-share {
		padding: 12px;
	}

	/* Tighter gap only — the grid is already a single column at every
	 * width (base rule above, client-requested 2026-11-04). */
	.bbra-share-modal-options .bbra-share-grid {
		gap: 10px;
	}

	.bbra-share-modal-options .bbra-share-label {
		margin-bottom: 6px;
	}

	.bbra-share-modal-options .bbra-share-networks {
		gap: 8px;
	}

	.bbra-share-modal-options .bbra-share-col--team {
		border-left: 0;
		border-top: 1px solid var( --bbra-border );
		padding: 10px 0 0;
	}

	.bbra-share-modal-options .bbra-share-circle,
	.bbra-share-modal-options .bbra-share-circle:hover,
	.bbra-share-modal-options .bbra-share-circle:focus,
	.bbra-share-modal-options .bbra-share-circle:active {
		height: 38px;
		min-width: 38px;
	}

	/* `flex: 1` (not `width: 100%`) so the two buttons split this row
	 * evenly, same reasoning as the desktop row version this mirrors.
	 * "Email my result" wraps to 2 lines at a smaller width otherwise —
	 * a touch smaller text keeps it on one line without needing a
	 * taller button. */
	.bbra-share-modal-options .bbra-share-team-btn,
	.bbra-share-modal-options a.bbra-share-team-btn,
	.bbra-share-modal-options button.bbra-share-team-btn {
		flex: 1;
		min-width: 0;
		height: 38px;
		font-size: 12px;
		padding: 0 10px;
		gap: 8px;
	}

	.bbra-share-modal-options .bbra-share-team-btn-icon {
		display: flex;
		flex-shrink: 0;
	}

	.bbra-share-modal-options .bbra-share-team-btn-icon svg {
		width: 16px;
		height: 16px;
	}
}

/* Stays a single row at every width (earlier had this switch to a
 * stacked column below 480px) — that stacked layout was producing a
 * broken-looking split where the ring rendered as if it were its own
 * separate box below the card instead of part of it (client-reported
 * 2026-11-03, screenshot). Shrinking the ring further here instead
 * keeps everything in the one unbroken card the reference also uses. */
@media ( max-width: 380px ) {
	.bbra-share-preview-body h1 {
		font-size: 25px;
	}

	.bbra-share-preview-body .bbra-result-ring-wrap {
		width: 68px;
		height: 68px;
	}

	.bbra-share-preview-body .bbra-result-score {
		font-size: 17px;
	}

	.bbra-share-preview-body .bbra-result-ring-label {
		font-size: 7px;
	}
}

/*
 * Wide screens (client feedback 2026-10-23): two columns inside the box.
 * Title, stage and strength on the left, the score circle on the right;
 * SHARE MY RESULTS at its natural width under the box.
 */
@media ( min-width: 900px ) {
	.bbra-result-hero--overall {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		column-gap: 64px;
		align-items: start;
	}

	.bbra-result-hero--overall .bbra-result-eyebrow { grid-column: 1; grid-row: 1; }
	.bbra-result-hero--overall h1 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
	.bbra-result-hero--overall .bbra-result-stage { grid-column: 1; grid-row: 3; margin-top: 28px; }
	.bbra-result-hero--overall .bbra-result-strongest { grid-column: 1; grid-row: 4; }

	.bbra-result-hero--overall .bbra-result-ring-wrap {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: center;
		margin: 0;
	}

	/* SHARE MY RESULTS inside the box, under the strength line. The
	 * Accent highlight moves here too at this width, matching the
	 * narrower-screen version above — the border/background sits on
	 * whichever element is actually the outer box at a given width. */
	.bbra-result-overall-wrap .bbra-result-overall {
		border: 1px solid var( --bbra-accent );
		border-radius: 4px;
		padding: 48px 56px;
		background: color-mix( in srgb, var( --bbra-accent ) 10%, var( --bbra-surface ) );
	}

	.bbra-result-overall-wrap .bbra-result-hero--overall {
		border: 0;
		padding: 0;
	}

	.bbra-result-overall .bbra-mobile-share {
		margin-top: 32px;
	}

	.bbra-mobile-share .bbra-mobile-share-btn {
		display: inline-block;
		width: auto;
		padding-left: 48px;
		padding-right: 48px;
	}
}

/* "Break down your result" heading above the category rows (2026-10-23),
 * styled like the Plan CTA heading. */
.bbra-screen--results .bbra-cat-section-heading {
	font-size: 52px;
	line-height: 1.1;
	text-transform: none;
	letter-spacing: -0.02em;
	margin: 56px 0 24px;
}

@media ( max-width: 640px ) {
	.bbra-screen--results .bbra-cat-section-heading {
		font-size: 42px;
		margin: 40px 0 16px;
	}
}

/* Results h2/h3 at 52px on desktop and 42px on phones (client feedback
 * 2026-10-23). */
@media ( max-width: 640px ) {
	.bbra-screen--results h2,
	.bbra-screen--results h3 {
		font-size: 42px;
	}
}

/* "Required" marker on inquiry question headings (2026-10-26). */
.bbra-screen--inquiry h2 .bbra-required-mark {
	margin-left: 10px;
}