/* The join page's three ways in and its full-membership part (REQ-639, REQ-640, REQ-641, REQ-513). Loaded on /join/ and
   /welcome/ only. Colours come from the site's tokens, so the dark display keeps its contrast. */
.bnb-join-tiers {
	display: grid;
	gap: var(--bnb-space-3);
	margin-block: var(--bnb-space-4);
}

.bnb-join-tiers h2 {
	color: var(--bnb-heading-ink, var(--bnb-ink));
	font-size: 1.25rem;
	margin: 0;
}

.bnb-join-tier-list {
	display: grid;
	gap: var(--bnb-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-join-tier {
	background: var(--bnb-surface);
	border: 2px solid var(--bnb-line);
	border-radius: var(--bnb-r-lg);
	color: var(--bnb-ink);
	display: grid;
	gap: var(--bnb-space-1);
	block-size: 100%;
	padding: var(--bnb-space-3) var(--bnb-space-4);
	text-decoration: none;
}

.bnb-join-tier strong {
	color: var(--bnb-heading-ink, var(--bnb-ink));
	font-size: 1.1rem;
}

.bnb-join-tier span {
	color: var(--bnb-ink-soft);
}

.bnb-join-tier small {
	color: var(--bnb-gold-ink);
	font-weight: 700;
}

.bnb-join-tier:hover {
	border-color: var(--bnb-gold-bright);
}

/* The way in this page is on: a gold frame and a check, so the choice does not rest on colour alone. */
.bnb-join-tier.is-chosen {
	border-color: var(--bnb-gold-bright);
	box-shadow: 0 0 0 3px var(--bnb-gold-pale);
}

.bnb-join-tier.is-chosen strong::before {
	content: "✓ ";
}

.bnb-join-tier:focus-visible {
	outline: 3px solid var(--bnb-gold-bright);
	outline-offset: 2px;
}

.bnb-join-tier-note {
	background: var(--bnb-gold-pale);
	border-radius: var(--bnb-r-sm);
	color: var(--bnb-gold-ink);
	font-weight: 600;
	margin: 0;
	padding: var(--bnb-space-2) var(--bnb-space-3);
}

.bnb-join-packages a { display: inline-flex; align-items: center; min-block-size: 44px; }

.bnb-join-packages {
	margin: 0;
}

/* The full-membership part of the form. */
.bnb-join-full {
	border: 0;
	border-block-start: 1px solid var(--bnb-line);
	display: grid;
	gap: var(--bnb-space-2);
	margin: var(--bnb-space-3) 0 0;
	padding: var(--bnb-space-4) 0 0;
}

.bnb-join-full h2 {
	color: var(--bnb-heading-ink, var(--bnb-ink));
	font-size: 1.2rem;
	margin: 0;
}

.bnb-join-full > label:not(.bnb-check-row) {
	font-weight: 700;
}

.bnb-join-more summary {
	cursor: pointer;
	font-weight: 700;
	min-block-size: var(--bnb-tap);
	padding-block: var(--bnb-space-2);
}

.bnb-join-more[open] {
	display: grid;
	gap: var(--bnb-space-2);
}

/* The site's terms (every joiner, REQ-682) and the circle's own, scrolled before they are accepted (as on the packages page). */
.bnb-join-packages-link {
	margin-block-start: var(--bnb-space-1);
}

.bnb-join-scroll .bnb-pk-terms {
	display: grid;
	gap: var(--bnb-space-2);
}

.bnb-join-scroll [data-bnb-terms-hint][hidden] {
	display: none;
}

.bnb-join-scroll .bnb-pk-terms h3 {
	font-size: 1.05rem;
	margin: 0;
}

.bnb-join-scroll .bnb-pk-terms-box {
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	max-block-size: 14rem;
	overflow-y: auto;
	padding: var(--bnb-space-3) var(--bnb-space-4);
}

.bnb-join-scroll .bnb-pk-terms-box h4 {
	font-size: 1rem;
	margin: var(--bnb-space-3) 0 var(--bnb-space-1);
}

.bnb-join-scroll .bnb-pk-terms-box h4:first-child {
	margin-block-start: 0;
}

.bnb-join-scroll .bnb-pk-terms-box p {
	color: var(--bnb-ink-soft);
	margin: 0;
}

.bnb-join-scroll .bnb-pk-progress {
	background: var(--bnb-line);
	block-size: 6px;
	border-radius: 6px;
	overflow: hidden;
}

.bnb-join-scroll .bnb-pk-progress span {
	background: var(--bnb-gold-bright);
	block-size: 100%;
	display: block;
	inline-size: 0;
}

.bnb-welcome-upgrade-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-3);
}

@media (max-width: 40rem) {
	/* The terms take less of a phone's height; the whole text is one scroll away. */
	.bnb-join-scroll .bnb-pk-terms-box {
		max-block-size: 8.5rem;
	}

	.bnb-join-tier-list {
		gap: var(--bnb-space-2);
	}

	.bnb-join-tier {
		padding: var(--bnb-space-2);
	}

	.bnb-join-tier strong {
		font-size: 1rem;
	}

	.bnb-join-tier span {
		font-size: 0.85rem;
	}
}

/* REQ-698, the expert panel of 13.10.2026 (see lanes/claude/4313/2026-10-13-join-form-panel_HE.md). */

/* The password and the button that shows it sit on one row. */
.bnb-password-field {
	align-items: stretch;
	display: flex;
	gap: var(--bnb-space-2);
}

.bnb-password-field input {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.bnb-password-field .bnb-password-toggle {
	flex: 0 0 auto;
	margin: 0;
	min-block-size: var(--bnb-tap);
	min-inline-size: var(--bnb-tap);
	padding-inline: 0.8rem;
	white-space: nowrap;
}

.bnb-password-field .bnb-password-toggle[hidden] {
	display: none;
}

.bnb-password-progress:empty {
	display: none;
}

/* The three boxes of consent are one group, set apart from the fields above them. */
.bnb-join-form .bnb-join-consents {
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	display: grid;
	gap: var(--bnb-space-2);
	margin-block-start: var(--bnb-space-4);
	padding: var(--bnb-space-3) var(--bnb-space-4);
}

.bnb-join-form .bnb-join-consents > * {
	margin-block: 0;
}

/* The main button is across the form on every width, not only on a phone. */
.bnb-portal-page .bnb-join-form.bnb-join-form > .bnb-button {
	inline-size: 100%;
	justify-self: stretch;
	min-block-size: 52px;
}

/* The gender choice: each answer is a row a thumb can hit. */
.bnb-join-up-gender .bnb-check-grid label {
	align-items: center;
	display: flex;
	gap: var(--bnb-space-2);
	min-block-size: var(--bnb-tap);
}

/* The way to the form leaves the top of the form's frame in view. */
.bnb-join-form {
	scroll-margin-block-start: var(--bnb-space-3);
}

/* The way straight to the form: on a phone the form starts below the ways in and the owner's lines (REQ-698). */
.bnb-join-skip {
	margin: 0;
}

.bnb-join-skip a {
	align-items: center;
	display: inline-flex;
	font-weight: 700;
	min-block-size: var(--bnb-tap);
}

/* SHIP-01 (REQ-771): the form in numbered steps, all on one page, with the steps listed above it. Inside a step the fields
   keep the spacing they had as the form's own children. */
.bnb-join-progress {
	counter-reset: bnb-step;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-join-progress li {
	counter-increment: bnb-step;
	flex: 1 1 8rem;
}

.bnb-join-progress a {
	align-items: center;
	border-block-end: 4px solid var(--bnb-line);
	color: var(--bnb-muted);
	display: flex;
	font-size: 0.9rem;
	font-weight: 700;
	gap: 0.4rem;
	min-block-size: var(--bnb-tap);
	text-decoration: none;
}

.bnb-join-progress a::before {
	align-items: center;
	border: 2px solid currentcolor;
	border-radius: 50%;
	content: counter(bnb-step);
	display: inline-flex;
	flex: none;
	block-size: 1.6rem;
	inline-size: 1.6rem;
	justify-content: center;
}

.bnb-join-progress .is-current a {
	border-block-end-color: var(--bnb-accent, var(--bnb-ink));
	color: var(--bnb-ink);
}

.bnb-join-progress .is-done a {
	border-block-end-color: var(--bnb-success, var(--bnb-accent, var(--bnb-ink)));
	color: var(--bnb-ink);
}

.bnb-join-progress .is-done a::before {
	background: var(--bnb-success, var(--bnb-accent, var(--bnb-ink)));
	border-color: transparent;
	color: var(--bnb-surface);
	content: "✓";
}

.bnb-join-step {
	border-block-start: 1px solid var(--bnb-line);
	display: grid;
	gap: 0.7rem;
	margin: var(--bnb-space-3) 0 0;
	padding: var(--bnb-space-4) 0 0;
	row-gap: 0.4rem;
	scroll-margin-block-start: var(--bnb-space-3);
}

.bnb-join-step-title {
	color: var(--bnb-heading-ink, var(--bnb-ink));
	font-size: 1.2rem;
	margin: 0 0 0.4rem;
}

.bnb-join-step-of {
	color: var(--bnb-muted);
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
}

.bnb-join-step > label:not(:has(> input)) {
	display: block;
	margin-block-start: 1.1rem;
}

.bnb-join-step > .bnb-join-step-title + label:not(:has(> input)) {
	margin-block-start: 0;
}

.bnb-join-step > :is(fieldset, details, .bnb-check-row, label:has(> input)) {
	margin-block: 1.1rem 0;
}

/* The full-membership details open their step, so their own top rule and heading would repeat the step's. */
.bnb-join-step > .bnb-join-full:not(.bnb-join-circle) {
	border-block-start: 0;
	margin: 0;
	padding: 0;
}

.bnb-join-step > .bnb-join-full > #bnb-join-full-title {
	display: none;
}

.bnb-portal-page .bnb-join-step > .bnb-button {
	inline-size: 100%;
	justify-self: stretch;
	margin-block-start: 1.25rem;
	min-block-size: 52px;
}

/* SHIP-01: one step at a time with the script; the next step opens with „continue" or once this one is complete. */
.bnb-join-step[hidden] {
	display: none;
}

.bnb-join-next {
	margin: var(--bnb-space-3) 0 0;
}

.bnb-join-next[hidden] {
	display: none;
}

.bnb-portal-page .bnb-join-next-button {
	inline-size: 100%;
	min-block-size: 52px;
}

/* REQ-771: a quiet, illustrated welcome and short screens in the site's navy and gold. */
.bnb-join-intro {
	background: #11223a;
	border: 1px solid #24364e;
	border-radius: 24px;
	color: #fff;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	isolation: isolate;
	overflow: hidden;
}

.bnb-join-intro-copy {
	align-self: center;
	padding: clamp(20px, 4vw, 36px);
}

.bnb-join-intro.bnb-page-intro :is(h1, p) {
	color: #fff;
}

.bnb-join-intro.bnb-page-intro .bnb-eyebrow {
	color: #efdaa8;
	font-size: 0.85rem;
	margin-block-end: 12px;
}

.bnb-join-intro.bnb-page-intro h1 {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	line-height: 1.25;
}

.bnb-join-intro.bnb-page-intro p:last-child {
	font-size: 1rem;
	line-height: 1.7;
	margin-block-end: 0;
}

.bnb-join-intro .bnb-join-intro-art {
	block-size: 100%;
	inline-size: 100%;
	min-block-size: 220px;
	object-fit: cover;
	object-position: center top;
}

.bnb-join-page .bnb-join-form {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: 24px;
	box-shadow: 0 16px 44px rgb(17 34 58 / 8%);
	padding: clamp(20px, 4vw, 36px);
}

.bnb-join-page :is(.bnb-join-form, .bnb-join-tier, .bnb-join-intro, .bnb-join-step) {
	min-inline-size: 0;
	overflow-wrap: normal;
	word-break: normal;
}

.bnb-join-tier {
	border-width: 1px;
	gap: 0.5rem;
	padding: 18px;
}

.bnb-join-tier.is-chosen {
	border-color: #a08036;
	box-shadow: inset 0 3px #a08036;
}

.bnb-join-tier.is-circle {
	background: #142137;
	color: #f2dfad;
}

.bnb-join-tier.is-circle :is(strong, span, small) {
	color: inherit;
}

.bnb-join-tier-note {
	background: var(--bnb-surface-2);
	color: var(--bnb-ink-soft);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.7;
}

.bnb-join-progress {
	flex-wrap: nowrap;
	gap: 8px;
}

.bnb-join-progress li {
	flex: 1 1 0;
	min-inline-size: 0;
}

.bnb-join-progress a {
	align-items: flex-start;
	border-block-end-width: 2px;
	flex-direction: column;
	font-size: 0.8rem;
	gap: 8px;
	line-height: 1.4;
	padding-block-end: 8px;
}

.bnb-join-progress a[aria-disabled="true"] {
	cursor: default;
}

.bnb-join-step {
	border-block-start: 0;
	margin-block-start: 0;
	padding-block-start: 12px;
}

.bnb-join-step-of {
	display: none;
}

.bnb-join-progress-text {
	color: var(--bnb-gold-ink);
	font-weight: 600;
}

.bnb-join-next {
	align-items: center;
	display: flex;
	gap: 12px;
}

.bnb-portal-page .bnb-join-next-button {
	flex: 1;
	inline-size: auto;
}

.bnb-portal-page .bnb-join-back {
	flex: 0 0 auto;
	margin: 0;
	min-block-size: 52px;
}

.bnb-join-coupon {
	border-block-start: 1px solid var(--bnb-line);
	font-size: 0.9rem;
}

.bnb-join-coupon summary {
	color: var(--bnb-ink-soft);
	cursor: pointer;
	min-block-size: 44px;
	padding-block: 12px;
}

.bnb-join-coupon[open] {
	display: grid;
	gap: 8px;
}

.bnb-join-switch {
	font-size: 0.85rem;
	margin: 0 0 8px;
}

@media (max-width: 40rem) {
	.bnb-join-intro {
		grid-template-columns: minmax(0, 1fr);
	}

	.bnb-join-intro .bnb-join-intro-art {
		aspect-ratio: 16 / 7;
		block-size: auto;
		min-block-size: 0;
	}

	.bnb-join-tier-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bnb-join-tier {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 12px 16px;
	}

	.bnb-join-tier span {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.bnb-join-tier small {
		align-self: center;
		font-size: 0.75rem;
		max-inline-size: 10rem;
	}

	.bnb-join-progress a {
		font-size: 0;
	}

	.bnb-join-progress a::before {
		font-size: 0.85rem;
	}

	.bnb-password-field {
		flex-wrap: wrap;
	}

	.bnb-password-field .bnb-password-toggle {
		font-size: 0.85rem;
		padding-inline: 12px;
	}
}

/* Four steps fit at narrow widths; larger journeys may wrap. */
.bnb-join-form.is-long-journey .bnb-join-progress {
	display: flex;
	max-inline-size: 100%;
}
.bnb-join-progress a { min-inline-size: 0; overflow-wrap: anywhere; }
.bnb-join-progress:has(li:nth-child(5)) { flex-wrap: wrap; }

.bnb-join-form.is-long-journey .bnb-join-progress-text::after {
	background: linear-gradient(to left, #a08036 var(--bnb-join-progress), var(--bnb-line) var(--bnb-join-progress));
	block-size: 4px;
	border-radius: 4px;
	content: "";
	display: block;
	margin-block-start: 12px;
}

.bnb-join-tier strong { min-inline-size: 0; overflow-wrap: anywhere; }


/* Keep enlarged card titles and prices in their own full-width rows. */
@media (max-width: 35rem) {
	.bnb-join-tier { grid-template-columns: minmax(0, 1fr); }
	.bnb-join-tier :is(strong, small) { grid-column: 1 / -1; max-inline-size: 100%; overflow-wrap: anywhere; }
}
/* One comparison, in the existing tier cards. Labels wrap only at word boundaries. */
.bnb-join-tier-list > li { min-inline-size: 0; }
.bnb-join-tier-list .bnb-join-tier { box-sizing: border-box; grid-template-columns: minmax(0, 1fr); align-content: start; max-inline-size: 100%; }
.bnb-join-tier > :is(strong, span, small, ul) { grid-column: 1; grid-row: auto; min-inline-size: 0; max-inline-size: 100%; }
.bnb-join-tier .bnb-join-tier-features { display: grid; gap: .65rem; list-style: none; padding: 0; margin: .75rem 0; }
.bnb-join-tier-features > li { display: flex; align-items: baseline; gap: .5rem; min-inline-size: 0; font-size: .875rem; line-height: 1.6; }
.bnb-join-tier .bnb-tier-mark { flex: 0 0 1em; color: var(--bnb-ink); font-size: inherit; }
.bnb-join-tier .bnb-tier-label { color: var(--bnb-ink); font-size: inherit; overflow-wrap: normal; word-break: normal; }
.bnb-join-tier .is-excluded :is(.bnb-tier-label, .bnb-tier-mark) { color: var(--bnb-muted); }
.bnb-join-tier.is-circle { background: var(--bnb-surface); color: var(--bnb-ink); }
.bnb-join-tier.is-circle :is(strong, small) { color: var(--bnb-heading-ink, var(--bnb-ink)); }
.bnb-join-tier .bnb-join-tier-button { margin-block-start: .5rem; text-align: center; justify-content: center; font-size: .875rem; white-space: normal; }
@media (max-width: 60rem) { .bnb-join-tier-list { grid-template-columns: minmax(0, 1fr); } }

/* D-ONB-2: compact selectable rows at every width. */
.bnb-join-tier-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.bnb-join-tier-list .bnb-join-tier { grid-template-columns: minmax(0,1fr) auto; gap: .25rem .75rem; padding: .65rem 1rem; }
.bnb-join-tier > strong { grid-column: 1; grid-row: 1; overflow-wrap: normal; }
.bnb-join-tier > span { grid-column: 1; grid-row: 2; font-size: .875rem; }
.bnb-join-tier > small { grid-column: 2; grid-row: 1 / 3; align-self: center; overflow-wrap: normal; }
.bnb-join-step-of { display: block; }
.bnb-join-intro-details summary { cursor: pointer; min-block-size: 44px; }
#bnb-join-consent-help { display: block; visibility: visible; }
@media (max-width: 40rem) {
 .bnb-join-intro .bnb-join-intro-art { display: none; }
 .bnb-join-intro-copy { padding: 16px; }
 .bnb-join-tier-list .bnb-join-tier { grid-template-columns: minmax(0,1fr); }
 .bnb-join-tier > small { grid-column: 1; grid-row: 3; }
}

.bnb-join-tier-list .bnb-join-tier-badge { grid-column: 1 / -1; grid-row: auto; background: var(--bnb-gold-pale); color: var(--bnb-gold-ink); border-radius: 999px; padding: 4px 12px; justify-self: start; }
.bnb-join-alt-link { border: 1px solid var(--bnb-line); border-radius: var(--bnb-r-sm); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-block-size: 44px; padding: 8px 12px; }
.bnb-join-alt-link.is-chosen strong::before { content: "✓ "; }
.bnb-join-switch a { display: inline-flex; align-items: center; min-block-size: 44px; }
@media (max-width: 40rem) { .bnb-join-tier-list { grid-template-columns: minmax(0, 1fr); } }