/* ==========================================================================
   BNB Portal Theme
   ========================================================================== */

/* ==========================================================================
   1. Root styles
   ========================================================================== */

:root {
	/* Brand colours */
	--bnb-cream: #FFFCF4;
	--bnb-orange: #FF862E;
	--bnb-yellow: #FFA934;
	--bnb-pink: #FBBECA;
	--bnb-green: #AFC74C;
	--bnb-lilac: #DEC8EF;
	--bnb-blue: #79A7E6;
	--bnb-hot-pink: #F46DA6;
	--bnb-dark: #151515;

	/* Softer tints */
	--bnb-pink-light: #FFF2F4;
	--bnb-lilac-light: #F8EFFF;
	--bnb-green-light: #F6FAE4;
	--bnb-orange-light: #FFF3E2;

	/* Neutrals */
	--bnb-background: #FFFCF4;
	--bnb-background-alt: #FCF9F0;
	--bnb-surface: #FFFCF4;
	--bnb-border: #F2EDDF;
	--bnb-muted: rgba(21, 21, 21, 0.62);

	/* Generic theme variables */
	--colour-background: var(--bnb-background);
	--colour-surface: var(--bnb-surface);
	--colour-text: var(--bnb-dark);
	--colour-muted: var(--bnb-muted);
	--colour-border: var(--bnb-border);
	--colour-accent: var(--bnb-hot-pink);

	/* Fonts */
	--font-heading: "Scotch Deck", Georgia, "Times New Roman", serif;
	--font-body: "Larsseit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-accent: "DM Mono", "Courier New", monospace;

	/* Layout */
	--site-width: 1180px;
	--content-width: 820px;
	--section-spacing: clamp(48px, 8vw, 96px);
	--radius: 24px;
	--portal-sidebar-width: 292px;
}

@font-face {
	font-family: "Scotch Deck";
	src: url("../fonts/ScotchDeck-Light.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Larsseit";
	src: url("../fonts/Larsseit-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Larsseit";
	src: url("../fonts/Larsseit-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Mono";
	src: url("../fonts/DMMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. General styles
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

button,
input,
textarea,
select {
	font: inherit;
}

button {
	cursor: pointer;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 16px;
	left: 16px;
	width: auto;
	height: auto;
	padding: 10px 14px;
	background: var(--colour-text);
	color: #fff;
	clip: auto;
}

.site-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-inner {
	flex: 1;
}

.site-main {
	min-height: 50vh;
}

.inner {
	width: min(calc(100% - 40px), var(--site-width));
	margin-inline: auto;
}

.page-content,
.single-content,
.content-archive,
.error-404 {
	padding: var(--section-spacing) 0;
}

.bnb-portal-page--has-header-actions .bnb-schedule-page,
.bnb-portal-page--has-header-actions .bnb-offers-page,
.bnb-portal-page--has-header-actions .bnb-workweek-page,
.bnb-portal-page--has-header-actions .bnb-pricing-page {
	margin-top: var(--bnb-page-action-offset, -126px);
}

.page-content__inner,
.single-content__body,
.error-404__inner {
	max-width: var(--content-width);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.65em;
	font-family: var(--font-heading);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.055em;
}

h1 {
	font-size: clamp(42px, 8vw, 84px);
}

h2 {
	font-size: clamp(32px, 5vw, 56px);
}

h3 {
	font-size: clamp(24px, 3vw, 36px);
}

p {
	margin: 0 0 1em;
}

.bnb-portal-page__kicker,
.bnb-topbar__kicker,
.bnb-sidebar__menu-title,
.bnb-section-kicker,
.content-card__meta,
.single-content__category,
.error-404__eyebrow {
	font-family: var(--font-accent);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.page-content__header,
.single-content__header,
.content-archive__header {
	margin-bottom: 36px;
}

.content-archive__description,
.single-content__meta,
.content-card__meta,
.error-404__eyebrow {
	color: var(--colour-muted);
}

.bnb-portal-section__header h1 {
    font-size: clamp(42px, 6vw, 72px);
}

.button,
.wp-block-button__link,
.search-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border: 1px solid var(--colour-accent);
	border-radius: 999px;
	background: var(--colour-accent);
	color: #fff;
	text-decoration: none;
	line-height: 1.2;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button:hover,
.wp-block-button__link:hover,
.search-form__submit:hover {
	background: transparent;
	color: var(--colour-accent);
}

/* Standard site header */

.site-header {
	position: sticky;
	z-index: 50;
	top: 0;
	background: rgba(249, 246, 240, 0.94);
	border-bottom: 1px solid transparent;
	backdrop-filter: blur(12px);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-scrolled {
	border-bottom-color: var(--colour-border);
	box-shadow: 0 10px 30px rgba(31, 26, 23, 0.06);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 84px;
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading);
	font-size: 26px;
	line-height: 1;
	text-decoration: none;
}

.site-header__logo img {
	width: auto;
	max-height: 52px;
}

.site-header__nav ul,
.site-header__mobile-nav ul,
.site-footer__nav ul {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__nav a,
.site-header__mobile-nav a,
.site-footer__nav a {
	text-decoration: none;
}

.site-header__nav a:hover,
.site-header__mobile-nav a:hover,
.site-footer__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.site-header__menu-toggle,
.site-header__mobile-close {
	display: none;
	border: 0;
	background: transparent;
	color: inherit;
}

.site-header__menu-toggle {
	width: 42px;
	height: 42px;
	padding: 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
}

.site-header__menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.site-header__mobile-panel {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	background: rgba(31, 26, 23, 0.35);
}

.site-header__mobile-panel.is-open {
	display: block;
}

.site-header__mobile-inner {
	position: absolute;
	top: 0;
	right: 0;
	width: min(380px, 90vw);
	height: 100%;
	padding: 28px;
	background: var(--colour-background);
	box-shadow: -20px 0 60px rgba(31, 26, 23, 0.18);
}

.site-header__mobile-close {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 42px;
	height: 42px;
}

.site-header__mobile-close span {
	position: absolute;
	left: 10px;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.site-header__mobile-close span:first-child {
	transform: rotate(45deg);
}

.site-header__mobile-close span:last-child {
	transform: rotate(-45deg);
}

.site-header__mobile-nav {
	margin-top: 64px;
}

.site-header__mobile-nav ul {
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.mobile-menu-is-open {
	overflow: hidden;
}

/* Standard site footer */

.site-footer {
	padding: 52px 0;
	background: var(--colour-text);
	color: #fff;
}

.site-footer__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
}

.site-footer__logo {
	display: inline-block;
	margin-bottom: 12px;
	font-family: var(--font-heading);
	font-size: 28px;
	text-decoration: none;
}

.site-footer__brand p {
	max-width: 420px;
	color: rgba(255, 255, 255, 0.75);
}

.footer-copyright {
	padding: 18px 0;
	background: var(--colour-text);
	color: rgba(255, 255, 255, 0.72);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 14px;
}

.footer-copyright p {
	margin: 0;
}

.footer-copyright a {
	color: inherit;
}

/* General cards / archives */

.content-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.content-card {
	background: var(--colour-surface);
	border: 1px solid var(--colour-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.content-card__link {
	display: block;
	height: 100%;
	text-decoration: none;
}

.content-card__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.content-card__content {
	padding: 22px;
}

.content-card__meta {
	margin-bottom: 8px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.content-card__title {
	font-size: 24px;
}

.content-card__excerpt {
	color: var(--colour-muted);
}

/* Single content */

.single-content__header {
	padding: var(--section-spacing) 0 36px;
}

.single-content__header-inner {
	max-width: var(--content-width);
}

.single-content__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.single-content__featured-image {
	margin-bottom: 48px;
}

.single-content__featured-image img {
	width: 100%;
	border-radius: var(--radius);
}

.single-content__body > * {
	max-width: var(--content-width);
}

.single-content__body > .alignwide {
	max-width: var(--site-width);
}

.single-content__body > .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.single-content__footer {
	padding: 40px 0 var(--section-spacing);
}

.single-content__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.single-content__tags a {
	padding: 6px 10px;
	border: 1px solid var(--colour-border);
	border-radius: 999px;
	text-decoration: none;
}

.single-content__post-navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

/* General forms */

.search-form {
	display: flex;
	gap: 10px;
	max-width: 560px;
}

.search-form__input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--colour-border);
	border-radius: 999px;
	background: #fff;
	color: var(--colour-text);
}

/* ==========================================================================
   3. Portal layout
   ========================================================================== */

.page-template-portal {
	background: #f9f1e8;
}

.page-template-portal .site-header,
.page-template-portal .site-footer,
.page-template-portal .footer-copyright {
	display: none;
}

.page-template-portal .site-inner,
.page-template-portal .site-main {
	min-height: 100vh;
}

.page-template-portal .site-main {
	padding: 0;
}

.bnb-portal {
	position: relative;
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	min-height: 100vh;
	background: var(--bnb-background);
	color: #151515;
}

.bnb-portal__content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--bnb-border);
}

.bnb-portal__main-wrap {
	width: 100%;
	padding: 32px;
}

.bnb-portal-page {
	max-width: 100%;
	margin: 0 auto;
}

.bnb-portal-page__header {
	margin-bottom: 28px;
}

.bnb-portal-page__kicker,
.bnb-topbar__kicker,
.bnb-sidebar__menu-title {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bnb-portal-page__kicker,
.bnb-section-kicker {
	color: var(--bnb-hot-pink);
}

.bnb-portal-page__title {
	margin: 0;
	font-size: clamp(42px, 6vw, 72px);
	line-height: 0.95;
}

.bnb-portal-page__intro {
	max-width: 780px;
	margin: 18px 0 0;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: clamp(16px, 2vw, 22px);
	font-weight: 300;
	line-height: 1.15;
}

.bnb-portal-page__body > *:first-child {
	margin-top: 0;
}

.bnb-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--bnb-background);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 76px;
	padding: 0 32px;
}

.bnb-topbar__sidebar-toggle {
	display: none;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(37, 24, 25, 0.14);
	border-radius: 999px;
	background: #fff7ee;
	color: inherit;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
}

.bnb-topbar__sidebar-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.bnb-topbar__page-context {
	margin-right: auto;
}

.bnb-topbar__kicker {
	color: rgba(37, 24, 25, 0.48);
}

.bnb-topbar__greeting {
	margin: 0;
	font-weight: 800;
	line-height: 1.2;
}

.bnb-topbar__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bnb-topbar__action-link,
.bnb-topbar__user,
.bnb-topbar__login-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
}

.bnb-topbar__action-link {
	border: 1px solid rgba(37, 24, 25, 0.12);
	background: #fff7ee;
	font-weight: 700;
}

.bnb-topbar__user {
	background: #fff7ee;
}

.bnb-topbar__avatar {
	flex: 0 0 auto;
}

.bnb-topbar__avatar img {
	border-radius: 999px;
}

.bnb-topbar__user-text {
	display: grid;
	line-height: 1.1;
}

.bnb-topbar__user-name {
	font-weight: 800;
}

.bnb-topbar__user-label {
	margin-top: 3px;
	font-size: 12px;
	color: rgba(37, 24, 25, 0.56);
}

/* Topbar user dropdown */

.bnb-topbar__user-menu {
	position: relative;
}

.bnb-topbar__user {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 10px 4px 4px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	text-decoration: none;
	cursor: pointer;
}

.bnb-topbar__user:hover,
.bnb-topbar__user:focus {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-topbar__user-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--bnb-hot-pink);
	font-size: 17px;
	line-height: 1;
	transition: transform 160ms ease;
}

.bnb-topbar__user-menu.is-open .bnb-topbar__user-arrow {
	transform: rotate(180deg);
}

.bnb-topbar__user-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 50;
	display: grid;
	gap: 4px;
	width: 190px;
	padding: 10px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	box-shadow: 0 18px 48px rgba(21, 21, 21, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	pointer-events: none;
	transition:
		opacity 160ms ease,
		visibility 160ms ease,
		transform 160ms ease;
}

.bnb-topbar__user-menu.is-open .bnb-topbar__user-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.bnb-topbar__user-dropdown a {
	display: block;
	padding: 10px 12px;
	border-radius: 999px;
	color: var(--bnb-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.bnb-topbar__user-dropdown a:hover,
.bnb-topbar__user-dropdown a:focus {
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
}

/* ==========================================================================
   Portal topbar actions
   ========================================================================== */

.bnb-topbar__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bnb-topbar__sidebar-toggle,
.bnb-topbar__icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	cursor: pointer;
	transition:
		background 160ms ease,
		border-color 160ms ease,
		transform 160ms ease;
}

.bnb-topbar__sidebar-toggle:hover,
.bnb-topbar__sidebar-toggle:focus,
.bnb-topbar__icon-button:hover,
.bnb-topbar__icon-button:focus {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-topbar__sidebar-toggle:active,
.bnb-topbar__icon-button:active {
	transform: scale(0.96);
}

.bnb-topbar__icon-button svg, .bnb-notifications__icon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Hamburger icon */

.bnb-topbar__sidebar-toggle {
	flex-direction: column;
	gap: 4px;
}

.bnb-topbar__sidebar-toggle span {
	display: block;
	width: 16px;
	height: 1.5px;
	border-radius: 999px;
	background: currentColor;
	transition:
		transform 180ms ease,
		opacity 180ms ease;
}

body.bnb-mobile-sidebar-is-open .bnb-topbar__sidebar-toggle span:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}

body.bnb-mobile-sidebar-is-open .bnb-topbar__sidebar-toggle span:nth-child(2) {
	opacity: 0;
}

body.bnb-mobile-sidebar-is-open .bnb-topbar__sidebar-toggle span:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* Desktop collapsed sidebar */

body.bnb-sidebar-is-collapsed .bnb-sidebar {
	transform: translateX(-100%);
}

body.bnb-sidebar-is-collapsed .bnb-portal {
	grid-template-columns: 0 minmax(0, 1fr);
}

body.bnb-sidebar-is-collapsed .bnb-portal__content {
	grid-column: 2;
}

.bnb-sidebar {
	transition: transform 220ms ease;
}

.bnb-portal {
	transition: grid-template-columns 220ms ease;
}

/* Mobile sidebar drawer */

@media (max-width: 900px) {
	.bnb-portal {
		display: block;
	}

	.bnb-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 80;
		width: min(320px, 86vw);
		height: 100vh;
		max-height: 100vh;
		background: var(--bnb-background);
		border-right: 1px solid var(--bnb-border);
		box-shadow: 18px 0 50px rgba(21, 21, 21, 0.12);
		transform: translateX(-100%);
		overflow: hidden;
	}

	body.bnb-mobile-sidebar-is-open .bnb-sidebar {
		transform: translateX(0);
	}

	.bnb-sidebar__inner {
		height: 100%;
		background: var(--bnb-background);
	}

	body.bnb-sidebar-is-collapsed .bnb-sidebar {
		transform: translateX(-100%);
	}

	body.bnb-sidebar-is-collapsed .bnb-portal {
		grid-template-columns: none;
	}

	body.bnb-sidebar-is-collapsed .bnb-portal__content {
		grid-column: auto;
	}

	.bnb-portal__overlay {
		position: fixed;
		inset: 0;
		z-index: 70;
		background: rgba(21, 21, 21, 0.26);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity 180ms ease,
			visibility 180ms ease;
	}

	body.bnb-mobile-sidebar-is-open .bnb-portal__overlay {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

/* Notifications */

.bnb-topbar__notifications {
	position: relative;
}

.bnb-topbar__notification-dot {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 9px;
	height: 9px;
	border: 2px solid var(--bnb-background);
	border-radius: 999px;
	background: var(--bnb-hot-pink);
}

.bnb-notifications {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bnb-notifications__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--bnb-dark);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.bnb-notifications__toggle:hover,
.bnb-notifications.is-open .bnb-notifications__toggle {
	background: var(--bnb-pink-light);
}

.bnb-notifications__toggle:focus-visible {
	outline: 2px solid var(--bnb-hot-pink);
	outline-offset: 4px;
}

.bnb-notifications__badge {
	position: absolute;
	top: 13px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	font-family: var(--font-accent);
	font-size: 0.65rem;
	line-height: 1;
}

.bnb-notifications__dropdown {
	position: absolute;
	top: calc(100% + 18px);
	right: -110px;
	z-index: 80;
	width: min(360px, calc(100vw - 32px));
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-cream);
	box-shadow: 0 22px 70px rgba(21, 21, 21, 0.13);
	overflow: hidden;
}

.bnb-notifications__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 16px;
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-notifications__header h3 {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
}

.bnb-notifications__header span {
	font-family: var(--font-accent);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bnb-muted);
}

.bnb-notifications__list {
	max-height: 360px;
	overflow: auto;
}

.bnb-notifications__item {
	display: grid;
	grid-template-columns: 10px 1fr;
	gap: 12px;
	padding: 16px 24px;
	color: var(--bnb-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--bnb-border);
	transition: background 0.2s ease;
}

.bnb-notifications__item:hover,
.bnb-notifications__item:focus {
	background: var(--bnb-pink-light);
	color: var(--bnb-dark);
}

.bnb-notifications__item-dot {
	width: 8px;
	height: 8px;
	margin-top: 7px;
	border-radius: 999px;
	background: transparent;
}

.bnb-notifications__item.is-unread .bnb-notifications__item-dot {
	background: var(--bnb-hot-pink);
}

.bnb-notifications__item-content {
	display: grid;
	gap: 4px;
}

.bnb-notifications__item-content strong {
	font-size: 0.95rem;
	line-height: 1.25;
}

.bnb-notifications__item-content span {
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--bnb-muted);
}

.bnb-notifications__item-content small {
	font-family: var(--font-accent);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bnb-muted);
}

.bnb-notifications__empty {
	padding: 24px;
	color: var(--bnb-muted);
}

.bnb-notifications__empty p {
	margin: 0;
}

.bnb-notifications__view-all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	background: var(--bnb-pink-light);
	color: var(--bnb-dark);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-notifications__view-all:hover,
.bnb-notifications__view-all:focus {
	color: var(--bnb-dark);
	background: var(--bnb-lilac-light);
}

.bnb-notifications-page__list {
	display: grid;
	gap: 12px;
	max-width: 760px;
}

.bnb-notifications-page__list .bnb-notifications__item {
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-cream);
}

@media (max-width: 760px) {
	.bnb-notifications__toggle {
		width: 54px;
		height: 54px;
	}

	.bnb-notifications__dropdown {
		right: -80px;
	}
}

.bnb-notifications__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 16px;
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-notifications__header > div {
	display: grid;
	gap: 3px;
}

.bnb-notifications__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 10px;
	border-radius: 999px;
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-notifications__clear:hover,
.bnb-notifications__clear:focus {
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
}


/* ==========================================================================
   4. Sidebar
   ========================================================================== */

.bnb-sidebar {
	position: sticky;
	top: 0;
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;
	padding: 0;
}

.bnb-sidebar__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100vh;
	min-height: 0;
	overflow: hidden;
	gap: 0px;
	padding: 28px 22px 22px;
}

.bnb-sidebar__logo,
.bnb-sidebar__student,
.bnb-sidebar__footer {
	flex: 0 0 auto;
}

.bnb-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: stretch;
	padding-right: 10px;
}
.bnb-sidebar__footer {
	flex: 0 0 auto;
	display: grid;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--bnb-border);
	background: var(--bnb-background);
}

.bnb-sidebar__logo {
	display: inline-flex;
	flex-direction: column;
	margin-bottom: 28px;
	color: inherit;
	text-decoration: none;
}

.bnb-sidebar__logo-main,
.bnb-sidebar__logo-sub {
	display: block;
	font-family: var(--font-heading);
	font-size: 36px;
	line-height: 0.88;
	letter-spacing: -0.04em;
}

.bnb-sidebar__logo-main {
	color: var(--bnb-pink);
}

.bnb-sidebar__logo-sub {
	margin-left: 18px;
	color: var(--bnb-green);
}

.bnb-sidebar__user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	margin-bottom: 28px;
	border: 1px solid rgba(255, 247, 238, 0.16);
	border-radius: 18px;
	background: rgba(255, 247, 238, 0.06);
}

.bnb-sidebar__avatar {
	flex: 0 0 auto;
}

.bnb-sidebar__avatar img {
	border-radius: 999px;
}

.bnb-sidebar__user-text p {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
}

.bnb-sidebar__user-text span {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	opacity: 0.72;
}

.bnb-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bnb-sidebar__nav ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnb-sidebar__nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	opacity: 0.78;
	transition: background 160ms ease, opacity 160ms ease;
}

.bnb-sidebar__nav a:hover,
.bnb-sidebar__nav a.is-active,
.bnb-sidebar__nav .current-menu-item > a {
	background: rgba(255, 247, 238, 0.12);
	opacity: 1;
}

.bnb-sidebar__nav-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1.8px solid currentColor;
	border-radius: 6px;
	opacity: 0.8;
}

.bnb-sidebar__menu-group {
	display: grid;
	gap: 8px;
}

.bnb-sidebar__menu-title {
	color: rgba(255, 247, 238, 0.48);
}

/* Sidebar help box */

.bnb-sidebar__nav::-webkit-scrollbar {
	width: 6px;
}

.bnb-sidebar__nav::-webkit-scrollbar-track {
	background: transparent;
}

.bnb-sidebar__nav::-webkit-scrollbar-thumb {
	background: rgba(21, 21, 21, 0.12);
	border-radius: 999px;
}

.bnb-sidebar__help-box {
	position: relative;
	display: grid;
	gap: 8px;
	margin-top: 10px;
	padding: 32px 16px 18px;
	border: 2px solid var(--bnb-hot-pink);
	border-radius: 22px;
	background: var(--bnb-background);
	text-align: center;
}

.bnb-sidebar__help-icon {
	position: absolute;
	top: 0;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	font-size: 22px;
	line-height: 1;
	transform: translate(-50%, -50%);
}

.bnb-sidebar__help-box h3 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 36px;
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
	color: var(--bnb-dark);
}

.bnb-sidebar__help-box p {
	margin: 0;
	color: var(--bnb-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
}

.bnb-sidebar__help-box a {
	justify-self: center;
	margin-top: 2px;
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.bnb-portal__overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: none;
	border: 0;
	background: rgba(37, 24, 25, 0.36);
}

.bnb-sidebar-is-open .bnb-portal__overlay {
	display: block;
}

/* Mobile sidebar close button */

.bnb-sidebar__mobile-close {
	display: none;
}

@media (max-width: 900px) {
	.bnb-sidebar__mobile-close {
		position: absolute;
		top: 18px;
		right: 18px;
		z-index: 5;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid var(--bnb-border);
		border-radius: 999px;
		background: var(--bnb-background);
		color: var(--bnb-dark);
		cursor: pointer;
	}

	.bnb-sidebar__mobile-close span {
		position: absolute;
		width: 16px;
		height: 1.5px;
		border-radius: 999px;
		background: currentColor;
	}

	.bnb-sidebar__mobile-close span:first-child {
		transform: rotate(45deg);
	}

	.bnb-sidebar__mobile-close span:last-child {
		transform: rotate(-45deg);
	}
}

.bnb-sidebar__primary-nav {
	display: grid;
	gap: 10px;
}

.bnb-sidebar__primary-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 11px 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-cream);
	color: var(--bnb-dark);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.bnb-sidebar__primary-link span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bnb-sidebar__primary-link span:last-child {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
	font-size: 0.85rem;
	line-height: 1;
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.bnb-sidebar__primary-link:hover,
.bnb-sidebar__primary-link:focus,
.bnb-sidebar__primary-link.is-active {
	background: var(--bnb-lilac-light);
	border-color: rgba(244, 109, 166, 0.28);
	transform: translateX(2px);
	outline: none;
}

.bnb-sidebar__primary-link:hover span:last-child,
.bnb-sidebar__primary-link:focus span:last-child,
.bnb-sidebar__primary-link.is-active span:last-child {
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	transform: translateX(2px);
}

.bnb-sidebar__nav-group--support {
	margin-top: 26px;
}

.bnb-sidebar__nav-group--support h2 {
	margin: 0 0 10px;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 0.68rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-sidebar__nav-group--support .bnb-sidebar__menu {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnb-sidebar__nav-group--support .bnb-sidebar__menu a {
	display: flex;
	align-items: center;
	min-height: 34px;
	padding: 7px 10px;
	border-radius: 14px;
	color: var(--bnb-dark);
	text-decoration: none;
	font-size: 0.94rem;
	line-height: 1.2;
	transition: background 0.2s ease, color 0.2s ease;
}

.bnb-sidebar__nav-group--support .bnb-sidebar__menu a:hover,
.bnb-sidebar__nav-group--support .bnb-sidebar__menu a:focus,
.bnb-sidebar__nav-group--support .bnb-sidebar__menu a.is-active {
	background: var(--bnb-pink-light);
	color: var(--bnb-dark);
	outline: none;
}

/* ==========================================================================
   Portal Sidebar Navigation
   ========================================================================== */

.bnb-sidebar__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	gap: 0px;
}

.bnb-sidebar__logo {
	display: inline-grid;
	gap: 2px;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: 44px;
	line-height: 0.82;
	letter-spacing: -0.055em;
	text-decoration: none;
}

.bnb-sidebar__logo span {
	display: inline-block;
	width: max-content;
	padding: 0.02em 0.12em 0.07em;
}

.bnb-sidebar__logo span:first-child {
	background: var(--bnb-lilac);
}

.bnb-sidebar__logo span:last-child {
	background: var(--bnb-green);
}

.bnb-sidebar__student {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background-alt);
}

.bnb-sidebar__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	font-family: var(--font-accent);
	font-size: 14px;
	text-transform: uppercase;
}

.bnb-sidebar__student span {
	display: block;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 9px;
	text-transform: uppercase;
}

.bnb-sidebar__student strong {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
}

.bnb-sidebar__nav {
	display: grid;
	gap: 20px;
}

.bnb-sidebar__dashboard-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 13px;
	text-transform: uppercase;
	text-decoration: none;
}

.bnb-sidebar__dashboard-link::after {
	content: "→";
}

.bnb-sidebar__dashboard-link:hover,
.bnb-sidebar__dashboard-link:focus,
.bnb-sidebar__dashboard-link.is-active {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-sidebar__nav-group {
	display: grid;
	gap: 10px;
}

.bnb-sidebar__nav-group h2,
.bnb-sidebar__nav-group summary {
	margin: 0;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
}

.bnb-sidebar__nav-group summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	list-style: none;
}

.bnb-sidebar__nav-group summary::-webkit-details-marker {
	display: none;
}

/* Course menu collapse fixes */

.bnb-sidebar {
	width: var(--portal-sidebar-width, 292px);
	min-width: var(--portal-sidebar-width, 292px);
}

.bnb-sidebar__inner,
.bnb-sidebar__nav,
.bnb-sidebar__nav-group,
.bnb-sidebar__nav-group summary,
.bnb-sidebar__dashboard-link,
.bnb-sidebar__menu,
.bnb-sidebar__menu li,
.bnb-sidebar__menu a {
	width: 100%;
	box-sizing: border-box;
}

.bnb-sidebar__nav-group--course summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bnb-sidebar__nav-group--course summary::after {
	content: "↓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1;
	transition:
		background 160ms ease,
		border-color 160ms ease;
}

.bnb-sidebar__nav-group--course summary:hover::after,
.bnb-sidebar__nav-group--course summary:focus::after {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-sidebar__nav-group--course[open] summary::after {
	content: "↑";
	transform: none;
}

.bnb-sidebar__menu {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnb-sidebar__menu li {
	margin: 0;
	padding: 0;
}

.bnb-sidebar__menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 999px;
	color: var(--bnb-dark);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.bnb-sidebar__menu a:hover,
.bnb-sidebar__menu a:focus,
.bnb-sidebar__menu .current-menu-item > a,
.bnb-sidebar__menu .current_page_item > a,
.bnb-sidebar__menu .current-menu-ancestor > a {
	background: var(--bnb-lilac-light);
}

.bnb-sidebar__menu .sub-menu {
	display: grid;
	gap: 3px;
	margin: 4px 0 4px 14px;
	padding: 0;
	list-style: none;
}

.bnb-sidebar__menu .sub-menu a {
	color: var(--bnb-muted);
	font-size: 14px;
	font-weight: 300;
}

.bnb-sidebar__logout {
	display: inline-flex;
	justify-self: start;
	margin-top: 8px;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.bnb-sidebar__logout:hover,
.bnb-sidebar__logout:focus {
	color: var(--bnb-hot-pink);
}

.bnb-sidebar,
.bnb-sidebar__inner {
	overflow: hidden !important;
}

.bnb-sidebar__nav {
	overflow-y: auto !important;
}

/* ==========================================================================
   5. Unique pages / shortcodes
   ========================================================================== */

/* Shared portal cards */

.bnb-portal-card,
.bnb-schedule-summary > div,
.bnb-schedule-navigation,
.bnb-project-card,
.bnb-holiday-card,
.bnb-form-section,
.bnb-schedule-table-wrap,
.bnb-availability-checker {
	background: var(--bnb-background-alt);
	border-color: var(--bnb-border);
}

/* BNB Schedule page */

.bnb-schedule-page {
	display: grid;
	gap: 24px;
	margin-top: -135px;
}

.bnb-schedule-hero {
	display: grid;
	gap: 32px;
	align-items: start;
	justify-content: end;
	margin-bottom: 6px;
}

.bnb-schedule-hero__content {
	display: none;
}

/* Schedule action cards */

.bnb-schedule-actions {
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 16px;
	align-self: start;
}

.bnb-schedule-action-card {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	align-items: center;
	gap: 5px;
	min-height: 100px;
	padding: 14px 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	text-align: left;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}

.bnb-schedule-action-card--project.is-active {
	border-color: var(--bnb-blue);
}

.bnb-schedule-action-card--holiday.is-active {
	border-color: var(--bnb-green);
}

.bnb-schedule-action-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin: 0;
	padding-top: 7px !important;
	border: 3px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: var(--bnb-blue);
	font-family: var(--font-body);
	font-size: 52px !important;
	font-weight: 300 !important;
	line-height: 0.8;
}

.bnb-schedule-action-card--project .bnb-schedule-action-card__icon {
	color: var(--bnb-blue) !important;
}

.bnb-schedule-action-card--holiday .bnb-schedule-action-card__icon {
	color: var(--bnb-green);
}

.bnb-schedule-action-card strong {
	display: block;
	margin: 0 0 10px;
	font-family: var(--font-heading);
	font-size: clamp(34px, 2vw, 48px);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.025em;
}

.bnb-schedule-action-card span,
.bnb-schedule-action-card p {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
}

/* Schedule messages */

.bnb-message {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-green-light);
	font-weight: 500;
}

.bnb-message-error {
	background: var(--bnb-pink-light);
	border-color: var(--bnb-pink);
}

.bnb-message-close {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 999px;
	background: rgba(21, 21, 21, 0.08);
	color: var(--bnb-dark);
	line-height: 1;
}

/* Schedule forms */

.bnb-schedule-workspace {
	display: none;
	gap: 18px;
	justify-content: end;
}

.bnb-schedule-workspace.has-open-panel {
	display: grid;
	margin-bottom: 18px;
}

.bnb-entry-forms {
	display: grid;
	gap: 18px;
}

.bnb-entry-forms:has(.bnb-schedule-form-panel:not([hidden])) {
	display: grid;
}

.bnb-schedule-form-panel {
	scroll-margin-top: 100px;
}

.bnb-schedule-form-panel[hidden] {
	display: none;
}

.bnb-project-form,
.bnb-holiday-form,
.bnb-edit-form,
.bnb-availability-checker {
	padding: 22px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background);
}

.bnb-edit-form {
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.1);
}

.bnb-project-form h3,
.bnb-holiday-form h3,
.bnb-edit-form h3,
.bnb-availability-checker h3 {
	margin-bottom: 16px;
	font-family: var(--font-heading);
	font-size: 34px;
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.05em;
}

.bnb-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}

.bnb-form-grid label,
.bnb-availability-checker label {
	display: grid;
	gap: 7px;
	font-size: 14px;
	font-weight: 500;
}

.bnb-form-grid label > span,
.bnb-availability-checker label > span {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.bnb-form-grid input,
.bnb-form-grid select,
.bnb-availability-checker select {
	width: 100%;
	min-height: 46px;
	padding: 10px 13px;
	border: 1px solid var(--bnb-border);
	border-radius: 14px;
	background: #fff;
	color: var(--bnb-dark);
}

.bnb-form-grid input:focus,
.bnb-form-grid select:focus,
.bnb-availability-checker select:focus {
	border-color: var(--bnb-hot-pink);
}

.bnb-project-suggestion,
.bnb-availability-result {
	grid-column: 1 / -1;
	padding: 14px;
	border: 1px solid var(--bnb-lilac);
	border-radius: 18px;
	background: var(--bnb-lilac-light);
}

.bnb-project-suggestion p,
.bnb-availability-result p {
	margin: 0 0 12px;
}

.bnb-project-suggestion strong,
.bnb-availability-result strong {
	display: block;
	margin-bottom: 3px;
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

/* Schedule buttons */

.bnb-button,
.bnb-small-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 11px 16px;
	border: 1px solid var(--bnb-hot-pink);
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 300;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background 160ms ease,
		color 160ms ease,
		border-color 160ms ease,
		transform 160ms ease;
	text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bnb-button:hover,
.bnb-small-button:hover {
	background: var(--bnb-hot-pink);
	color: var(--bnb-dark);
	border-color: var(--bnb-hot-pink);
	transform: translateY(-1px);
}

.bnb-secondary-button {
    background: #fffcf4;
    border: 1px solid var(--bnb-border);
    color: var(--bnb-dark);
    text-decoration: none;
}

.bnb-secondary-button:hover {
	background: var(--bnb-border);
	color: var(--bnb-dark);
}

/* Schedule navigation */

.bnb-schedule-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 28px 0 16px;
	padding: 18px 0;
	border: 0;
	border-radius: 16px;
	background: transparent;
	box-shadow: none;
}

.bnb-schedule-navigation > div:first-child {
	display: block;
	flex: 1 1 auto;
	min-width: 260px;
}

.bnb-schedule-navigation .bnb-section-kicker {
	display: none;
}

.bnb-schedule-navigation h3 {
	max-width: none;
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 0.95;
	text-transform: uppercase;
	white-space: nowrap;
}

.bnb-schedule-navigation-actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.bnb-schedule-navigation-actions .bnb-small-button {
	min-height: 28px;
	padding: 6px 14px;
	border: 0;
	background: transparent;
	color: var(--bnb-dark);
	font-size: 15px;
	font-family: var(--font-body);
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
}

.bnb-schedule-navigation-actions .bnb-small-button:nth-child(2) {
	background: var(--bnb-lilac);
	border-radius: 999px;
}

.bnb-schedule-navigation-actions .bnb-small-button:hover {
	background: var(--bnb-dark);
	color: var(--bnb-cream);
	transform: none;
}

/* Schedule grid */

.bnb-schedule-calendar-panel {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.bnb-schedule-table-wrap {
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow-x: auto;
}

.bnb-schedule-grid-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
}

.bnb-schedule-grid {
	--bnb-schedule-column-width: minmax(78px, 1fr);
	display: grid;
	grid-template-columns: 72px repeat(var(--bnb-schedule-columns), var(--bnb-schedule-column-width));
	grid-template-rows: 34px repeat(var(--bnb-schedule-slots), 90px);
	width: 100%;
	min-width: 980px;
	overflow: hidden;
	position: relative;
}

.bnb-schedule-grid__corner,
.bnb-schedule-grid__date,
.bnb-schedule-grid__slot,
.bnb-schedule-grid__cell {
	border-right: 1px solid var(--bnb-border);
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-schedule-grid__corner {
	background: transparent;
}

.bnb-schedule-grid__date {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.bnb-schedule-grid__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.bnb-schedule-grid__cell {
	background: rgba(255, 252, 244, 0.72);
}

.bnb-schedule-grid__bar {
	z-index: 2;
	display: flex;
	align-self: center;
	flex-direction: column;
	justify-content: center;
	min-height: 44px;
	margin: 0 10px;
	padding: 15px 12px;
	border-radius: 8px;
	overflow: hidden;
	color: var(--bnb-dark);
}

.bnb-schedule-grid__bar strong {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bnb-schedule-grid__bar span {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bnb-schedule-grid__bar--project {
	z-index: 2;
	margin-left: 0;
	margin-right: 0;
	border-radius: 0;
	background: var(--bnb-lilac);
}

.bnb-schedule-grid__bar--project:not(.bnb-schedule-grid__bar--continues-before) {
	margin-left: 10px;
	margin-right: 10px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.bnb-schedule-grid__bar--project:not(.bnb-schedule-grid__bar--continues-after) {
	margin-left: 10px;
	margin-right: 10px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.bnb-schedule-grid__bar--holiday {
	z-index: 3;
	align-self: stretch;
	align-items: center;
	margin-top: 0;
	margin-right: 10px !important;
	margin-bottom: 0;
	margin-left: 10px !important;
	border-radius: 0;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	text-align: center;
}

.bnb-schedule-grid__bar--holiday strong {
	font-family: var(--font-body);
	font-size: 16px;
	white-space: normal;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* Project colours by consecutive project */

.bnb-schedule-grid__bar--project.bnb-project-colour--palette-a-odd {
	background: var(--bnb-green);
	color: var(--bnb-dark);
	border-color: var(--bnb-green);
}

.bnb-schedule-grid__bar--project.bnb-project-colour--palette-a-even {
	background: var(--bnb-pink);
	color: var(--bnb-dark);
	border-color: var(--bnb-pink);
}

.bnb-schedule-grid__bar--project.bnb-project-colour--palette-b-odd {
	background: var(--bnb-lilac);
	color: var(--bnb-dark);
	border-color: var(--bnb-lilac);
}

.bnb-schedule-grid__bar--project.bnb-project-colour--palette-b-even {
	background: var(--bnb-yellow);
	color: var(--bnb-dark);
	border-color: var(--bnb-yellow);
}

/* Summary cards */

.bnb-schedule-at-a-glance {
	margin-top: 34px;
}

.bnb-schedule-summary {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

.bnb-schedule-summary > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 106px;
	padding: 18px;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: var(--bnb-background-alt);
	text-align: center;
}

.bnb-schedule-summary > div:nth-child(1) {
	background: var(--bnb-pink-light);
	border-color: var(--bnb-pink);
}

.bnb-schedule-summary > div:nth-child(2) {
	background: var(--bnb-lilac-light);
	border-color: var(--bnb-lilac);
}

.bnb-schedule-summary > div:nth-child(3) {
	background: var(--bnb-green-light);
	border-color: var(--bnb-green);
}

.bnb-schedule-summary > div:nth-child(4) {
	background: var(--bnb-orange-light);
	border-color: var(--bnb-orange);
}

.bnb-schedule-summary > div:nth-child(5) {
	background: var(--bnb-pink-light);
	border-color: var(--bnb-pink);
}

.bnb-schedule-summary strong {
	display: block;
	margin-bottom: 10px;
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.bnb-schedule-summary span {
	display: block;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.08;
}

.bnb-summary-card h4 {
    font-family: 'Larsseit';
    font-weight: 300;
    letter-spacing: 0;
    padding-top: 8px;
}

/* Saved projects / holidays */

.bnb-schedule-lists,
.bnb-saved-items {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
	align-items: stretch;
}

.bnb-schedule-panel,
.bnb-saved-list {
	padding: 22px;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background);
}

.bnb-schedule-lists .bnb-schedule-panel {
	display: flex;
	flex-direction: column;
	height: 520px;
	min-height: 520px;
}

.bnb-schedule-lists .bnb-section-header,
.bnb-schedule-lists .bnb-project-tabs {
	flex: 0 0 auto;
}

.bnb-section-header {
	margin-bottom: 18px;
	border-bottom: 1px solid var(--bnb-border);
    padding-bottom: 18px;
}

.bnb-section-kicker, .bnb-portal-page__kicker {
	margin: 0 0 7px;
	font-family: var(--font-accent);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bnb-hot-pink);
}

.bnb-section-header h3,
.bnb-saved-list > h3 {
	margin: 0 0 8px;
    font-family: var(--font-accent);
    font-size: 16px;
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bnb-section-header p {
	max-width: 520px;

}

.bnb-project-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.bnb-project-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding: 4px 12px;
	border: 0px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-blue);
	color: var(--bnb-cream);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	letter-spacing: 0.05em;
	font-family: var(--font-accent);
    text-transform: uppercase;
}

.bnb-project-tab span {
	display: none;
}

.bnb-project-tab.is-active {
	text-decoration: underline;
}

.bnb-project-tab.is-active span {
	background: rgba(255, 255, 255, 0.18);
	color: var(--bnb-cream);
}

.bnb-project-list,
.bnb-saved-list ul {
	display: grid;
	flex: 1 1 auto;
	gap: 10px;
	min-height: 0;
	margin: 0;
	padding: 0 6px 0 0;
	list-style: none;
	overflow-y: auto;
	scrollbar-gutter: stable;
}

.bnb-project-list::-webkit-scrollbar,
.bnb-saved-list ul::-webkit-scrollbar {
	width: 8px;
}

.bnb-project-list::-webkit-scrollbar-track,
.bnb-saved-list ul::-webkit-scrollbar-track {
	background: rgba(21, 21, 21, 0.04);
	border-radius: 999px;
}

.bnb-project-list::-webkit-scrollbar-thumb,
.bnb-saved-list ul::-webkit-scrollbar-thumb {
	background: rgba(21, 21, 21, 0.18);
	border-radius: 999px;
}

.bnb-project-list::-webkit-scrollbar-thumb:hover,
.bnb-saved-list ul::-webkit-scrollbar-thumb:hover {
	background: rgba(21, 21, 21, 0.28);
}

.bnb-saved-card,
.bnb-saved-list li {
	display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 5px;
    border-bottom: 1px solid var(--bnb-border);
    background: var(--bnb-background);
}

.bnb-project-card[hidden],
.bnb-project-empty-message[hidden] {
	display: none !important;
}

.bnb-saved-card h4,
.bnb-saved-list li strong {
	display: block;
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    font-family: var(--font-body);
    letter-spacing: 0;
}

.bnb-saved-card p,
.bnb-saved-list li span {
	display: block;
	margin: 0 0 4px;
	color: var(--bnb-dark);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-list-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	font-size: 13px;
	font-weight: 500;
}

.bnb-edit-link,
.bnb-delete-link,
.bnb-cancel-link {
	color: var(--bnb-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.bnb-delete-link {
	color: var(--bnb-hot-pink);
}

.bnb-project-empty-message {
	margin: 12px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-pink-light);
	font-weight: 500;
}


/* Key Info page */

.bnb-key-info-page {
	display: grid;
	gap: 24px;
}

.bnb-key-info {
	display: grid;
	gap: 24px;
}

.bnb-key-info-summary {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

.bnb-key-info-stat {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	min-height: 118px;
	padding: 18px;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: var(--bnb-background-alt);
}

.bnb-key-info-stat--pink {
	background: var(--bnb-pink-light);
	border-color: var(--bnb-pink);
}

.bnb-key-info-stat--lilac {
	background: var(--bnb-lilac-light);
	border-color: var(--bnb-lilac);
}

.bnb-key-info-stat--green {
	background: var(--bnb-green-light);
	border-color: var(--bnb-green);
}

.bnb-key-info-stat--orange {
	background: var(--bnb-orange-light);
	border-color: var(--bnb-orange);
}

.bnb-key-info-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid currentColor;
	border-radius: 999px;
	color: var(--bnb-hot-pink);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

.bnb-key-info-stat--lilac .bnb-key-info-stat__icon {
	color: var(--bnb-lilac);
}

.bnb-key-info-stat--green .bnb-key-info-stat__icon {
	color: var(--bnb-green);
}

.bnb-key-info-stat--orange .bnb-key-info-stat__icon {
	color: var(--bnb-orange);
}

.bnb-key-info-stat strong {
	display: block;
	margin: 0 0 18px;
	font-family: var(--font-accent);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
}

.bnb-key-info-stat span {
	display: block;
	margin: 0 0 4px;
	font-family: var(--font-body);
	font-size: clamp(24px, 2.1vw, 34px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: 0;
}

.bnb-key-info-stat em {
	display: block;
	margin: 0;
	color: var(--bnb-dark);
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 1.25;
}

.bnb-key-info-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr);
	gap: 18px;
	align-items: start;
}

.bnb-key-info-main-card,
.bnb-key-info-connect-card,
.bnb-key-info-privacy-card {
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background);
}

.bnb-key-info-main-card {
	padding: 22px;
}

.bnb-key-info-side {
	display: grid;
	gap: 18px;
}

.bnb-key-info-connect-card {
	padding: 22px;
}

.bnb-key-info-privacy-card {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 18px 22px;
}

.bnb-key-info-privacy-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--bnb-green);
	border-radius: 999px;
	color: var(--bnb-green);
	font-size: 18px;
	line-height: 1;
}

.bnb-key-info-privacy-card p {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
}

.bnb-key-info-form {
	display: grid;
	gap: 18px;
}

.bnb-key-info-form-grid {
	display: grid;
	gap: 13px;
}

.bnb-key-info-form-grid label {
	display: grid;
	grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
	gap: 16px;
	align-items: center;
}

.bnb-key-info-form-grid label > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-accent);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.bnb-key-info-form-grid input,
.bnb-key-info-form-grid select {
	width: 100%;
	min-height: 46px;
	padding: 10px 13px;
	border: 1px solid var(--bnb-border);
	border-radius: 14px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
}

.bnb-key-info-form-grid input:focus,
.bnb-key-info-form-grid select:focus {
	outline: 3px solid rgba(244, 109, 166, 0.2);
	border-color: var(--bnb-hot-pink);
}

.bnb-key-info-offer-note {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	margin-top: 12px;
	padding: 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
}

.bnb-key-info-offer-note__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--bnb-green);
	border-radius: 999px;
	color: var(--bnb-green);
	font-size: 18px;
	line-height: 1;
}

.bnb-key-info-offer-note p {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
}

.bnb-key-info-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.bnb-button-outline {
	background: transparent;
	border-color: var(--bnb-hot-pink);
	color: var(--bnb-hot-pink);
}

.bnb-button-outline:hover {
	background: var(--bnb-hot-pink);
	color: var(--bnb-dark);
}

.bnb-key-info-connect-list {
	display: grid;
	gap: 0;
}

.bnb-key-info-connect-item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-key-info-connect-item:last-child {
	border-bottom: 0;
}

.bnb-key-info-connect-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border: 1px solid currentColor;
	border-radius: 14px;
	font-size: 25px;
	line-height: 1;
}

.bnb-key-info-connect-item--pink .bnb-key-info-connect-item__icon {
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
}

.bnb-key-info-connect-item--lilac .bnb-key-info-connect-item__icon {
	background: var(--bnb-lilac-light);
	color: var(--bnb-lilac);
}

.bnb-key-info-connect-item--green .bnb-key-info-connect-item__icon {
	background: var(--bnb-green-light);
	color: var(--bnb-green);
}

.bnb-key-info-connect-item--orange .bnb-key-info-connect-item__icon {
	background: var(--bnb-orange-light);
	color: var(--bnb-orange);
}

.bnb-key-info-connect-item strong {
	display: block;
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.1;
}

.bnb-key-info-connect-item p {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
}

.bnb-field-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bnb-section-header h3 .bnb-info-tip {
	position: relative;
	top: -0.1em;
	margin-left: 8px;
}

.bnb-info-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 1px solid var(--bnb-hot-pink);
	border-radius: 999px;
	background: transparent;
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 9px;
	font-weight: 400;
	line-height: 1;
	vertical-align: middle;
}

.bnb-info-tip__icon {
	display: block;
	line-height: 1;
}

.bnb-info-tip__content {
	position: absolute;
	z-index: 30;
	left: 50%;
	bottom: calc(100% + 10px);
	width: min(260px, 72vw);
	padding: 11px 12px;
	border: 1px solid var(--bnb-border);
	border-radius: 14px;
	background: var(--bnb-dark);
	color: var(--bnb-cream);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	box-shadow: 0 16px 40px rgba(21, 21, 21, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
	pointer-events: none;
}

.bnb-info-tip__content::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 10px;
	height: 10px;
	background: var(--bnb-dark);
	transform: translate(-50%, -5px) rotate(45deg);
}

.bnb-info-tip:hover .bnb-info-tip__content,
.bnb-info-tip:focus .bnb-info-tip__content,
.bnb-info-tip:focus-within .bnb-info-tip__content {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.bnb-money-input {
	display: flex;
	align-items: stretch;
	width: 100%;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	overflow: hidden;
}

.bnb-money-input__symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: 12px 14px;
	border-right: 1px solid var(--bnb-border);
	background: var(--bnb-pink-light);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

.bnb-money-input input {
	width: 100%;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.bnb-money-input:focus-within {
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.12);
}


/* Key Info responsive */

@media (max-width: 1320px) {
	.bnb-key-info-summary {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bnb-key-info-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.bnb-key-info-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bnb-key-info-form-grid label {
		grid-template-columns: 1fr;
		gap: 7px;
	}

	.bnb-key-info-offer-note {
		grid-template-columns: 42px minmax(0, 1fr);
	}

	.bnb-key-info-offer-note .bnb-small-button {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

@media (max-width: 640px) {
	.bnb-key-info-summary {
		grid-template-columns: 1fr;
	}

	.bnb-key-info-main-card,
	.bnb-key-info-connect-card,
	.bnb-key-info-privacy-card {
		border-radius: 24px;
		padding: 16px;
	}

	.bnb-key-info-connect-item {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 14px;
	}

	.bnb-key-info-connect-item__icon {
		width: 48px;
		height: 48px;
		font-size: 20px;
	}

	.bnb-key-info-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.bnb-key-info-actions .bnb-button {
		width: 100%;
	}
}

@media (max-width: 760px) {
	.bnb-course-module-card__body {
		grid-template-columns: 1fr;
	}

	.bnb-course-module-card__image {
		min-height: 220px;
	}

	.bnb-course-module-card__content {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.bnb-course-module-card__arrow {
		width: 54px;
		height: 54px;
		font-size: 28px;
	}
}

/* ============================================================================
   Offer Library + Deliverables
   ========================================================================== */

.bnb-offers-page {
	display: grid;
	gap: 22px;
	margin-top: -126px !important;
}

.bnb-offers-header-actions {
	display: flex;
	justify-content: flex-end;
	min-height: 96px;
	pointer-events: none;
}

.bnb-offers-header-actions > * {
	pointer-events: auto;
	width: min(260px, 100%);
}

.bnb-offer-library-panel {
	padding: 28px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background);
}

.bnb-offer-section-title {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-offer-section-title h3 {
	margin: 0;
	font-size: clamp(30px, 4vw, 46px);
}

.bnb-offer-section-title > p {
	max-width: 420px;
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.35;
}

.bnb-offer-cards {
	display: grid;
}

.bnb-offer-card {
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-offer-card:last-child {
	border-bottom: 0;
}

.bnb-offer-card__summary {
	display: grid;
	grid-template-columns: minmax(260px, 1.35fr) minmax(320px, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: 22px 0;
}

.bnb-offer-card__title h5 {
	margin: 0;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
}

.bnb-offer-card__title p {
	margin: 6px 0 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-offer-card__schedule-status {
	font-size: 13px !important;
	font-weight: 500;
}

.bnb-offer-status-active .bnb-offer-card__schedule-status {
	color: #6f8d11;
}

.bnb-offer-card__meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.bnb-offer-card__meta span {
	display: grid;
	gap: 4px;
}

.bnb-offer-card__meta strong {
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--bnb-muted);
}

.bnb-offer-card__meta em {
	font-style: normal;
}

.bnb-offer-card__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	white-space: nowrap;
}

.bnb-offer-card__actions a {
	font-family: var(--font-accent);
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;
}

.bnb-offer-card__actions .bnb-small-button {
	padding: 10px 14px;
}

.bnb-delete-link {
	color: var(--bnb-hot-pink);
}

.bnb-offer-card.is-editing {
	padding-bottom: 26px;
}

.bnb-offer-inline-edit-form {
	margin: 0 0 26px;
	padding: 22px;
	border: 1px solid var(--bnb-border);
	border-radius: 22px;
	background: var(--bnb-background-alt);
}

.bnb-offer-inline-fields {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.bnb-offer-inline-fields {
	align-items: end;
}


.bnb-offer-inline-fields input,
.bnb-offer-inline-fields select,
.bnb-offer-inline-fields textarea {
	min-height: 72px;
	padding: 22px 20px;
}

.bnb-offer-inline-fields textarea {
	height: 72px;
	resize: vertical;
}

.bnb-offer-inline-fields label {
	display: grid;
	gap: 8px;
}

.bnb-offer-inline-fields label:nth-child(2) {
	grid-column: span 2;
}

.bnb-offer-inline-fields label > span {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
}

.bnb-offer-inline-fields input,
.bnb-offer-inline-fields select,
.bnb-offer-inline-fields textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
}

.bnb-offer-inline-fields textarea {
	min-height: 52px;
	resize: vertical;
}


.bnb-offer-deliverables-edit-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin: 20px 0 14px;
}

.bnb-offer-deliverables-edit-header h4 {
	margin: 0;
	font-size: 32px;
}

.bnb-offer-deliverables-edit-header > p {
	max-width: 460px;
	margin: 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-offer-deliverables-preview {
	margin: 0 0 24px;
}

.bnb-offer-deliverables-wrap {
	width: 100%;
	overflow-x: auto;
	padding-bottom: 10px;
	scrollbar-gutter: stable;
}

form.bnb-form-section.bnb-offer-form, .bnb-entry-forms {
    margin: 0 0 26px;
    padding: 22px;
    border: 1px solid var(--bnb-border);
    border-radius: 22px;
    background: var(--bnb-background-alt);
}

.bnb-offer-deliverables-grid {
	display: grid;
	grid-template-columns: repeat(var(--bnb-offer-weeks), minmax(132px, 1fr));
	min-width: calc(var(--bnb-offer-weeks) * 132px);
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	overflow: hidden;
}

.bnb-offer-deliverables-week {
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 164px;
	border-right: 1px solid var(--bnb-border);
}

.bnb-offer-deliverables-week:last-child {
	border-right: 0;
}

.bnb-offer-deliverables-week__header {
	padding: 10px 8px;
	background: var(--bnb-hot-pink);
	color: #fff;
	text-align: center;
}

.bnb-offer-deliverables-week__header span {
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
}

.bnb-offer-deliverables-week__body {
	display: grid;
	align-content: start;
	gap: 7px;
	min-height: 128px;
	padding: 8px;
}

.bnb-offer-deliverable-pill,
.bnb-offer-deliverable-edit {
	position: relative;
	border-radius: 0;
	font-size: 13px;
	line-height: 1.25;
	text-align: center;
}

.bnb-offer-deliverable-edit.is-marked-for-delete {
	display: none;
}

.bnb-offer-deliverable-pill {
	padding: 11px 8px;
}

.bnb-offer-deliverable-edit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px;
	padding: 4px 4px 4px 8px;
}

.bnb-offer-deliverable-edit input[type="text"] {
	width: 100%;
	padding: 8px 6px;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 13px;
}

.bnb-offer-deliverable-delete {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	cursor: pointer;
}

.bnb-offer-deliverable-delete input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.bnb-offer-deliverable-delete span[aria-hidden="true"] {
	font-size: 16px;
	line-height: 1;
}

.bnb-offer-deliverable-delete input:checked + span {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--bnb-dark);
	color: var(--bnb-background);
	text-align: center;
	line-height: 18px;
}

.bnb-offer-deliverable-new input {
	width: 100%;
	min-height: 36px;
	padding: 7px 8px;
	border: 1px solid var(--bnb-border);
	border-radius: 12px;
	background: var(--bnb-background);
	font-size: 12px;
	text-align: center;
}

.bnb-offer-deliverables-empty {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
}

.bnb-offer-deliverable--orange {
	background: var(--bnb-orange);
}

.bnb-offer-deliverable--pink {
	background: var(--bnb-pink);
}

.bnb-offer-deliverable--green {
	background: var(--bnb-green);
}

.bnb-offer-deliverable--lilac {
	background: var(--bnb-lilac);
}

.bnb-offer-deliverables-scroll-note {
	margin: 8px 0 0;
	color: var(--bnb-muted);
	font-size: 13px;
}

.bnb-offer-form-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
}

.bnb-offer-empty {
	padding: 30px;
	border: 1px dashed var(--bnb-border);
	border-radius: 18px;
	text-align: center;
}

.bnb-offer-empty h5 {
	margin-bottom: 6px;
	font-size: 26px;
}

.bnb-offer-empty p {
	margin: 0;
	color: var(--bnb-muted);
}

.bnb-offer-signature-badge {
	display: inline-flex;
	margin-top: 8px;
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--bnb-green);
	font-family: var(--font-accent);
	font-size: 10px;
	line-height: 1;
	text-transform: uppercase;
}

.bnb-checkbox-field {
	display: flex !important;
	align-items: center;
	gap: 10px;
}

.bnb-checkbox-field input {
	width: auto !important;
}

@media (max-width: 1180px) {
	.bnb-offers-page {
		margin-top: 0;
	}

	.bnb-offers-header-actions {
		justify-content: flex-start;
		min-height: 0;
	}

	.bnb-offer-card__summary {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.bnb-offer-card__actions {
		justify-content: flex-start;
	}

	.bnb-offer-inline-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.bnb-offer-library-panel,
	.bnb-offer-inline-edit-form {
		padding: 20px;
	}

	.bnb-offer-section-title,
	.bnb-offer-deliverables-edit-header {
		display: block;
	}

	.bnb-offer-section-title > p,
	.bnb-offer-deliverables-edit-header > p {
		margin-top: 10px;
	}

	.bnb-offer-card__meta,
	.bnb-offer-inline-fields {
		grid-template-columns: 1fr;
	}

	.bnb-offer-inline-fields label:nth-child(2) {
		grid-column: auto;
	}
}


/* ========================================================================== 
   Ideal Workweek
   ========================================================================== */

.bnb-workweek-page {
	display: grid;
	gap: 22px;
	margin-top: -126px !important;
}

.bnb-workweek-hero {
	display: flex;
	justify-content: flex-end;
	min-height: 96px;
	pointer-events: none;
}

.bnb-workweek-actions {
	pointer-events: auto;
	width: min(300px, 100%);
}

.bnb-workweek-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.bnb-workweek-stat {
	display: grid;
	gap: 8px;
	min-height: 128px;
	padding: 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 22px;
	background: var(--bnb-background);
}

.bnb-workweek-stat strong {
	font-family: var(--font-accent);
	font-size: 14px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.bnb-workweek-stat span {
    font-family: var(--font-body);
    font-size: 32px;
    line-height: 0.9;
    letter-spacing: 0;
    font-weight: 500;
}

.bnb-workweek-stat em {
    font-style: normal;
    color: var(--bnb-dark);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0;
}

.bnb-workweek-stat--pink {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-workweek-stat--lilac {
	border-color: var(--bnb-lilac);
	background: var(--bnb-lilac-light);
}

.bnb-workweek-stat--green {
	border-color: var(--bnb-green);
	background: var(--bnb-green-light);
}

.bnb-workweek-stat--orange {
	border-color: var(--bnb-orange);
	background: var(--bnb-orange-light);
}

.bnb-workweek-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.75fr);
	gap: 22px;
	align-items: start;
}

.bnb-workweek-planner-card h3 {
    font-family: var(--font-heading);
    text-transform: none;
    letter-spacing: -0.05em;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 0.95;
}

.bnb-workweek-planner-card,
.bnb-workweek-advice-card,
.bnb-workweek-types-card {
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background);
}

.bnb-workweek-planner-card {
	padding: 28px;
}

.bnb-workweek-side {
	display: grid;
	gap: 20px;
}


.bnb-workweek-advice-card,
.bnb-workweek-types-card {
	padding: 24px;
}

.bnb-workweek-grid-wrap {
	width: 100%;
	overflow-x: auto;
	padding-bottom: 10px;
	scrollbar-gutter: stable;
}

.bnb-workweek-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(160px, 1fr));
	min-width: 1120px;
	border: 1px solid var(--bnb-border);
	border-radius: 22px;
	background: var(--bnb-background);
	overflow: hidden;
}

.bnb-workweek-day {
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 460px;
	border-right: 1px solid var(--bnb-border);
}

.bnb-workweek-day:last-child {
	border-right: 0;
}

.bnb-workweek-day__header {
	padding: 14px 10px;
	background: var(--bnb-lilac);
	text-align: center;
}

.bnb-workweek-day__header span {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
}

.bnb-workweek-day__body {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 12px;
}

.bnb-workweek-day__empty {
	margin: 0;
	padding: 18px 8px;
	color: var(--bnb-muted);
	font-size: 13px;
	text-align: center;
}

.bnb-workweek-block {
	display: grid;
	gap: 10px;
	padding: 12px;
	border-radius: 16px;
	color: var(--bnb-dark);
}

.bnb-workweek-block {
	min-height: calc(54px + (var(--bnb-workweek-block-hours, 1) * 18px));
}

.bnb-workweek-block strong {
	display: block;
	font-weight: 500;
	line-height: 1.2;
}

.bnb-workweek-block span {
	display: block;
	margin-top: 4px;
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-workweek-block p {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.35;
}

.bnb-workweek-block__actions {
	display: flex;
	gap: 10px;
}

.bnb-workweek-block__actions a {
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: none;
}

.bnb-workweek-block__actions a:last-child {
	color: var(--bnb-hot-pink);
}

.bnb-workweek-block--client_work { background: var(--bnb-pink); }
.bnb-workweek-block--calls { background: var(--bnb-lilac); }
.bnb-workweek-block--marketing { background: var(--bnb-green); }
.bnb-workweek-block--admin { background: var(--bnb-orange); }
.bnb-workweek-block--ceo { background: var(--nbnb-blue, #79A7E6); }
.bnb-workweek-block--learning { background: var(--bnb-yellow); }

.bnb-workweek-form-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.bnb-workweek-form-grid label {
	display: grid;
	gap: 8px;
}

.bnb-workweek-form-grid label > span {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
}

.bnb-workweek-form-grid input,
.bnb-workweek-form-grid select,
.bnb-workweek-form-grid textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
}

.bnb-workweek-form-grid__wide {
	grid-column: span 5;
}

.bnb-workweek-form-grid textarea {
	resize: vertical;
}

.bnb-workweek-form-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
}

.bnb-workweek-advice-list,
.bnb-workweek-type-list {
	display: grid;
	gap: 12px;
}

.bnb-workweek-advice {
	padding: 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background-alt);
}

.bnb-workweek-advice strong {
	display: block;
	margin-bottom: 6px;
}

.bnb-workweek-advice p {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.4;
}

.bnb-workweek-advice--success {
	border-color: var(--bnb-green);
	background: var(--bnb-green-light);
}

.bnb-workweek-advice--warning {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-workweek-type-key {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.bnb-workweek-type-key > span {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: 4px;
	border-radius: 999px;
	border: 1px solid rgba(21, 21, 21, 0.12);
}

.bnb-workweek-type-key.bnb-workweek-block--client_work > span {
	background: var(--bnb-pink);
}

.bnb-workweek-type-key.bnb-workweek-block--calls > span {
	background: var(--bnb-lilac);
}

.bnb-workweek-type-key.bnb-workweek-block--marketing > span {
	background: var(--bnb-green);
}

.bnb-workweek-type-key.bnb-workweek-block--admin > span {
	background: var(--bnb-orange);
}

.bnb-workweek-type-key.bnb-workweek-block--ceo > span {
	background: var(--bnb-blue, #79A7E6);
}

.bnb-workweek-type-key.bnb-workweek-block--learning > span {
	background: var(--bnb-yellow);
}

.bnb-workweek-type-key strong {
	display: block;
	margin-bottom: 2px;
}

.bnb-workweek-type-key p {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 13px;
	line-height: 1.35;
}

@media (max-width: 1180px) {
	.bnb-workweek-page {
		margin-top: 0;
	}

	.bnb-workweek-hero {
		justify-content: flex-start;
		min-height: 0;
	}

	.bnb-workweek-summary,
	.bnb-workweek-layout {
		grid-template-columns: 1fr;
	}

	.bnb-workweek-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bnb-workweek-form-grid__wide {
		grid-column: span 2;
	}
}

@media (max-width: 720px) {
	.bnb-workweek-planner-card,
	.bnb-workweek-advice-card,
	.bnb-workweek-types-card {
		padding: 20px;
	}

	.bnb-workweek-form-grid {
		grid-template-columns: 1fr;
	}

	.bnb-workweek-form-grid__wide {
		grid-column: auto;
	}
}

/* ==========================================================================
   Ideal Workweek refinements
   ========================================================================== */

/* Optional page-level class for pages with action cards pulled into the header area. */
.bnb-portal-page--has-header-actions .bnb-workweek-page,
.bnb-portal-page--has-header-actions .bnb-offers-page,
.bnb-portal-page--has-header-actions .bnb-schedule-page {
	margin-top: var(--bnb-page-action-offset, -126px);
}

.bnb-workweek-page {
	display: grid;
	gap: 22px;
}

/* Top-right Add card. Keep this near the page title area, but make it easier to override. */
.bnb-workweek-hero {
	display: flex;
	justify-content: flex-end;
	min-height: 96px;
	pointer-events: none;
}

.bnb-workweek-actions {
	pointer-events: auto;
	width: min(300px, 100%);
}

/* Weekly planner now owns the full width. */
.bnb-workweek-planner-card {
	width: 100%;
	padding: 28px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background);
}

/* Compact horizontal colour key above the planner grid. */
.bnb-workweek-type-list--compact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 16px;
}

.bnb-workweek-type-list--compact .bnb-workweek-type-key {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 10px;
	border: 1px solid rgba(21, 21, 21, 0.08);
	border-radius: 999px;
	background: var(--bnb-background-alt);
}

.bnb-workweek-type-list--compact .bnb-workweek-type-key > span {
	width: 10px;
	height: 10px;
	margin: 0;
	border-radius: 999px;
}

.bnb-workweek-type-list--compact .bnb-workweek-type-key strong {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}

/* Full-width weekly grid. */
.bnb-workweek-grid-wrap {
	width: 100%;
	overflow-x: auto;
	padding-bottom: 10px;
	scrollbar-gutter: stable;
}

.bnb-workweek-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(170px, 1fr));
	min-width: 1190px;
	border: 1px solid var(--bnb-border);
	border-radius: 22px;
	background: var(--bnb-background);
	overflow: hidden;
}

.bnb-workweek-day {
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 500px;
	border-right: 1px solid var(--bnb-border);
}

.bnb-workweek-day:last-child {
	border-right: 0;
}

.bnb-workweek-day__header {
	padding: 14px 10px;
	background: var(--bnb-lilac);
	text-align: center;
}

.bnb-workweek-day__header span {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
}

.bnb-workweek-day__body {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 12px;
}

.bnb-workweek-block {
	position: relative;
	display: grid;
	gap: 10px;
	padding: 14px 34px 14px 14px;
	border-radius: 16px;
	color: var(--bnb-dark);
}

.bnb-workweek-block__delete {
	position: absolute;
	top: 8px;
	right: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	color: var(--bnb-dark);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.bnb-workweek-block__delete:hover,
.bnb-workweek-block__delete:focus {
	background: rgba(255, 255, 255, 0.45);
}

.bnb-workweek-block__edit {
	justify-self: start;
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: none;
}

/* Retire the old action-row layout if it still exists in the CSS below this add-on. */
.bnb-workweek-block__actions {
	display: none;
}

/* Summary boxes now sit underneath the weekly planner. */
.bnb-workweek-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

/* Legacy side layout is no longer used, but this protects old markup if cached. */
.bnb-workweek-layout {
	display: block;
}

.bnb-workweek-side,
.bnb-workweek-advice-card,
.bnb-workweek-types-card {
	display: contents;
}

@media (max-width: 1180px) {
	.bnb-portal-page--has-header-actions .bnb-workweek-page,
	.bnb-portal-page--has-header-actions .bnb-offers-page,
	.bnb-portal-page--has-header-actions .bnb-schedule-page,
	.bnb-workweek-page {
		margin-top: 0;
	}

	.bnb-workweek-hero {
		justify-content: flex-start;
		min-height: 0;
	}

	.bnb-workweek-advice-list,
	.bnb-workweek-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.bnb-workweek-reality-card,
	.bnb-workweek-planner-card {
		padding: 20px;
	}

	.bnb-workweek-advice-list,
	.bnb-workweek-summary {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Pricing Planner
   ========================================================================== */

.bnb-pricing-page {
	display: grid;
	gap: 22px;
}

/* Shared cards */

.bnb-pricing-reality-strip,
.bnb-pricing-calculator-card,
.bnb-pricing-income-planner,
.bnb-pricing-pipeline-card,
.bnb-pricing-offer-table-card {
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background);
}

.bnb-pricing-calculator-card,
.bnb-pricing-pipeline-card,
.bnb-pricing-offer-table-card {
	padding: 28px;
}

.bnb-pricing-section-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 20px;
}

.bnb-pricing-section-heading h3 {
	margin-bottom: 8px;
	font-size: clamp(32px, 4vw, 52px);
}

.bnb-pricing-section-heading p:not(.bnb-section-kicker) {
	max-width: 660px;
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.35;
}

/* Signature service calculator */


.bnb-pricing-signature-badge {
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	border: 1px solid var(--bnb-lilac);
	font-family: var(--font-accent);
	font-size: 11px;
	text-transform: uppercase;
	white-space: nowrap;
}

.bnb-pricing-calculator {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 22px;
	align-items: stretch;
}

.bnb-pricing-calculator__inputs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

.bnb-pricing-calculator__inputs label,
.bnb-pricing-expenses-toolbar label,
.bnb-pricing-expense-row label {
	display: grid;
	gap: 8px;
}

.bnb-pricing-calculator__inputs label > span,
.bnb-pricing-expenses-toolbar label > span,
.bnb-pricing-expense-row label > span {
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--bnb-muted);
}

.bnb-pricing-calculator__inputs input,
.bnb-pricing-expenses-toolbar input,
.bnb-pricing-expense-row input,
.bnb-pricing-expense-row select {
	width: 100%;
	min-height: 62px;
	padding: 16px 18px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
}

.bnb-pricing-calculator__results {
	display: grid;
	gap: 12px;
}

.bnb-pricing-result {
	display: grid;
	gap: 8px;
	padding: 18px;
	border-radius: 20px;
	border: 1px solid var(--bnb-border);
	background: var(--bnb-background-alt);
}

.bnb-pricing-result strong {
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
}

.bnb-pricing-result span {
	font-family: var(--font-heading);
	font-size: clamp(38px, 4vw, 58px);
	line-height: 0.9;
	letter-spacing: -0.04em;
}

.bnb-pricing-result em {
	font-style: normal;
	color: var(--bnb-muted);
	font-size: 13px;
	line-height: 1.35;
}

.bnb-pricing-result--goal {
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	border-color: var(--bnb-hot-pink);
}

.bnb-pricing-result--goal em {
	color: rgba(255, 252, 244, 0.78);
}

.bnb-pricing-result--buffer {
	background: var(--bnb-green);
	border-color: var(--bnb-green);
}

.bnb-pricing-result--buffer.is-na {
	background: var(--bnb-background-alt);
	border-color: var(--bnb-border);
}

/* ==========================================================================
   Pricing Planner — schedule snapshot
   ========================================================================== */

.bnb-pricing-schedule-snapshot {
	display: grid;
	gap: 18px;
	width: 100%;
}

.bnb-pricing-mini-heading {
	display: grid;
	gap: 6px;
}

.bnb-pricing-mini-heading h3 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.bnb-pricing-schedule-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.bnb-pricing-schedule-stat {
    display: grid;
    align-content: space-between;
    gap: 18px;
    min-height: 120px;
    padding: 25px;
    border: 1px solid var(--bnb-border);
    border-radius: 16px;
    color: var(--bnb-dark);
}

.bnb-pricing-schedule-stat strong {
    display: block;
    margin: 0;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: 0;
}

.bnb-pricing-schedule-stat span {
    display: block;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2;
    text-transform: none;
}

.bnb-pricing-schedule-stat--pink {
	background: var(--bnb-pink-light);
	border: 1px solid var(--bnb-pink);
}

.bnb-pricing-schedule-stat--green {
	background: var(--bnb-green-light);
	border: 1px solid var(--bnb-green);
}

.bnb-pricing-schedule-stat--lilac {
	background: var(--bnb-lilac-light);
	border: 1px solid var(--bnb-lilac);
}

.bnb-pricing-schedule-stat--yellow {
	background: #fff8df;
	border: 1px solid var(--bnb-orange);
}

@media (max-width: 980px) {
	.bnb-pricing-schedule-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.bnb-pricing-schedule-stats {
		grid-template-columns: 1fr;
	}

	.bnb-pricing-schedule-stat {
		min-height: 112px;
		border-radius: 20px;
	}
}

/* Offer price review */

.bnb-pricing-offer-table {
	overflow: hidden;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
}

.bnb-pricing-offer-table__header,
.bnb-pricing-offer-row {
	display: grid;
	grid-template-columns: minmax(240px, 1.25fr) minmax(100px, 0.5fr) minmax(120px, 0.55fr) minmax(120px, 0.55fr) minmax(120px, 0.55fr) minmax(170px, 0.75fr);
	gap: 14px;
	align-items: center;
}

.bnb-pricing-offer-table__header {
	padding: 13px 16px;
	background: var(--bnb-lilac);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-pricing-offer-row {
	padding: 16px;
	border-top: 1px solid var(--bnb-border);
	background: var(--bnb-background);
}

.bnb-pricing-offer-row:nth-child(odd) {
	background: var(--bnb-background-alt);
}

.bnb-pricing-offer-row strong {
	display: block;
	font-weight: 500;
}

.bnb-pricing-offer-row em {
	display: block;
	margin-top: 3px;
	color: var(--bnb-muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.3;
}

.bnb-pricing-signature-inline {
	display: inline-flex !important;
	margin-left: 8px !important;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--bnb-lilac);
	color: var(--bnb-dark) !important;
	font-family: var(--font-accent);
	font-size: 9px !important;
	text-transform: uppercase;
	vertical-align: middle;
}

.bnb-pricing-offer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bnb-pricing-offer-actions form {
	margin: 0;
}

.bnb-pricing-offer-actions button {
	padding: 8px 10px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

/* Empty state */

.bnb-pricing-empty {
	padding: 28px;
	border: 1px dashed var(--bnb-border);
	border-radius: 18px;
	text-align: center;
}

.bnb-pricing-empty h4 {
	margin-bottom: 6px;
	font-size: 26px;
}

.bnb-pricing-empty p {
	margin: 0;
	color: var(--bnb-muted);
}

/* Responsive */

@media (max-width: 1180px) {
	.bnb-pricing-reality-strip,
	.bnb-pricing-section-heading,
	.bnb-pricing-income-planner summary,
	.bnb-pricing-sync-note,
	.bnb-pricing-expenses-toolbar,
	.bnb-pricing-calculator,
	.bnb-pricing-calculator__inputs,
	.bnb-pricing-expense-totals,
	.bnb-pricing-income-goal-total,
	.bnb-pricing-pipeline-stats {
		display: grid;
		grid-template-columns: 1fr;
	}

	.bnb-pricing-income-planner summary > span {
		justify-self: start;
	}

	.bnb-pricing-expense-row {
		grid-template-columns: 1fr;
	}

	.bnb-pricing-expense-row--head {
		display: none;
	}

	.bnb-pricing-expense-remove {
		margin-bottom: 0;
	}

	.bnb-pricing-offer-table {
		overflow-x: auto;
	}

	.bnb-pricing-offer-table__header,
	.bnb-pricing-offer-row {
		min-width: 980px;
	}
}

@media (max-width: 720px) {
	.bnb-pricing-calculator-card,
	.bnb-pricing-pipeline-card,
	.bnb-pricing-offer-table-card,
	.bnb-pricing-income-planner summary,
	.bnb-pricing-income-planner__inner {
		padding: 20px;
	}

	.bnb-pricing-expenses-toolbar,
	.bnb-pricing-expense-row,
	.bnb-pricing-expense-totals div,
	.bnb-pricing-income-goal-total div {
		padding: 16px;
	}
}

/* ========================================================================== 
   BNB Login
   ========================================================================== */

.bnb-login-page {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
	gap: 24px;
	align-items: stretch;
	min-height: calc(100vh - 180px);
}

.bnb-login-card,
.bnb-login-side-card {
	border: 1px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-background);
}

.bnb-login-card {
	display: grid;
	align-content: center;
	gap: 28px;
	padding: clamp(28px, 5vw, 64px);
}

.bnb-login-brand {
	display: inline-grid;
	justify-self: start;
	gap: 4px;
	font-family: var(--font-heading);
	font-size: clamp(42px, 5vw, 72px);
	line-height: 0.82;
	letter-spacing: -0.055em;
	text-transform: lowercase;
}

.bnb-login-brand span {
	display: inline-block;
	width: max-content;
	padding: 0.03em 0.14em 0.08em;
}

.bnb-login-brand span:first-child {
	background: var(--bnb-lilac);
}

.bnb-login-brand span:last-child {
	background: var(--bnb-green);
}

.bnb-login-content {
	max-width: 620px;
}

.bnb-login-content h1 {
	margin-bottom: 12px;
	font-size: clamp(50px, 7vw, 92px);
}

.bnb-login-content p:not(.bnb-section-kicker) {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 18px;
	line-height: 1.45;
}

.bnb-login-form {
	display: grid;
	gap: 16px;
	max-width: 520px;
}

.bnb-login-form label:not(.bnb-login-remember) {
	display: grid;
	gap: 8px;
}

.bnb-login-form label:not(.bnb-login-remember) > span {
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--bnb-muted);
}

.bnb-login-form input[type="text"],
.bnb-login-form input[type="password"] {
	width: 100%;
	min-height: 68px;
	padding: 18px 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font: inherit;
}

.bnb-login-remember {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--bnb-muted);
}

.bnb-login-remember input {
	width: 18px;
	height: 18px;
	accent-color: var(--bnb-hot-pink);
}

.bnb-login-form .bnb-button {
	justify-self: start;
	min-width: 180px;
}

.bnb-login-forgot {
	justify-self: start;
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.bnb-login-side-card {
	display: grid;
	align-content: end;
	gap: 24px;
	padding: clamp(28px, 4vw, 44px);
		border: 0px solid var(--bnb-border);


}

.bnb-login-side-card h2 {
	max-width: 480px;
	margin: 0;
	font-size: clamp(42px, 5vw, 74px);
}

.bnb-login-side-card ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnb-login-side-card li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
}

.bnb-login-side-card li::before {
	content: "♡";
	color: var(--bnb-hot-pink);
}

@media (max-width: 980px) {
	.bnb-login-page {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.bnb-login-side-card {
		align-content: start;
	}
}

@media (max-width: 640px) {
	.bnb-login-card,
	.bnb-login-side-card {
		padding: 22px;
		border-radius: 24px;
	}

	.bnb-login-form input[type="text"],
	.bnb-login-form input[type="password"] {
		min-height: 58px;
	}
}

/* ==========================================================================
   Auth pages: Forgot Password / Reset Password
   ========================================================================== */

.bnb-login-page {
	display: grid;
	grid-template-columns: minmax(1, 1fr);
	align-items: center;
	justify-items: center;
	width: 100%;
	min-height: calc(100vh - 80px);
	padding: clamp(28px, 5vw, 72px);
}

.bnb-login-page .bnb-login-card {
	width: min(620px, 100%);
}

.bnb-login-card {
	display: grid;
	gap: 28px;
	padding: clamp(28px, 5vw, 54px);
	border: 1px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
}

.bnb-login-brand {
	display: inline-grid;
	justify-self: start;
	gap: 3px;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(44px, 7vw, 76px);
	line-height: 0.82;
	letter-spacing: -0.055em;
	text-decoration: none;
}

.bnb-login-brand span {
	display: inline-block;
	width: max-content;
	padding: 0.02em 0.12em 0.07em;
}

.bnb-login-brand span:first-child {
	background: var(--bnb-lilac);
}

.bnb-login-brand span:last-child {
	background: var(--bnb-green);
}

.bnb-login-content {
	display: grid;
	gap: 10px;
	max-width: 520px;
}

.bnb-login-content h1 {
	margin: 0;
	color: var(--bnb-dark);
	font-size: clamp(44px, 7vw, 72px);
	line-height: 0.88;
	letter-spacing: -0.055em;
}

.bnb-login-content p:not(.bnb-section-kicker) {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 17px;
	line-height: 1.42;
}

.bnb-login-form {
	display: grid;
	gap: 16px;
	width: 100%;
}

.bnb-login-form label:not(.bnb-login-remember) {
	display: grid;
	gap: 8px;
}

.bnb-login-form label:not(.bnb-login-remember) > span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
}

.bnb-login-form input[type="text"],
.bnb-login-form input[type="email"],
.bnb-login-form input[type="password"] {
	width: 100%;
	min-height: 62px;
	padding: 16px 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font: inherit;
}

.bnb-login-form input:focus {
	outline: 0;
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.14);
}

.bnb-login-form .bnb-button {
	justify-self: start;
	min-width: 190px;
}

.bnb-login-forgot {
	justify-self: start;
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.bnb-login-forgot:hover,
.bnb-login-forgot:focus {
	color: var(--bnb-hot-pink);
}

.bnb-muted-text {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 16px;
	line-height: 1.45;
}

@media (max-width: 640px) {
	.bnb-login-page {
		align-items: start;
		min-height: 100vh;
		padding: 24px 16px;
	}

	.bnb-login-card {
		padding: 24px;
		border-radius: 24px;
	}

	.bnb-login-form input[type="text"],
	.bnb-login-form input[type="email"],
	.bnb-login-form input[type="password"] {
		min-height: 56px;
		border-radius: 18px;
	}
}

/* ==========================================================================
   Account page
   ========================================================================== */

.bnb-account-page {
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 960px;
}

.bnb-account-card {
	display: grid;
	gap: 30px;
	width: 100%;
	padding: clamp(26px, 4vw, 46px);
	border: 0px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
}

.bnb-account-card .bnb-section-header {
	display: grid;
	gap: 12px;
	margin: 0;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-account-card .bnb-section-header h2 {
	margin: 0;
	color: var(--bnb-dark);
	font-size: clamp(54px, 6vw, 84px);
	line-height: 0.88;
	letter-spacing: -0.06em;
}

.bnb-account-card .bnb-section-header p:not(.bnb-section-kicker) {
	max-width: 620px;
	margin: 0;
	color: var(--bnb-muted);
	font-size: 18px;
	line-height: 1.45;
}

.bnb-account-form {
	display: grid;
	gap: 22px;
}

.bnb-account-form label {
	display: grid;
	gap: 8px;
}

.bnb-account-form label > span {
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
}

.bnb-account-form input[type="text"],
.bnb-account-form input[type="email"],
.bnb-account-form input[type="password"] {
	width: 100%;
	min-height: 62px;
	padding: 16px 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font: inherit;
	font-size: 16px;
}

.bnb-account-form input:disabled {
	cursor: not-allowed;
	opacity: 0.72;
}

.bnb-account-form input:focus {
	outline: 0;
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.14);
}

.bnb-account-password-panel {
	display: grid;
	gap: 20px;
	margin-top: 8px;
	padding: 26px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background-alt);
}

.bnb-account-password-panel .bnb-section-header--small {
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.bnb-account-password-panel .bnb-section-header--small h3 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(36px, 4vw, 54px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
	text-transform: none;
}

.bnb-account-password-panel .bnb-section-header--small p {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 16px;
	line-height: 1.4;
}

.bnb-account-form .bnb-button {
	justify-self: start;
	margin-top: 4px;
}

.bnb-form-grid {
	display: grid;
	gap: 16px;
}

.bnb-form-grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.bnb-account-page {
		max-width: none;
	}

	.bnb-account-card {
		padding: 24px;
		border-radius: 26px;
	}

	.bnb-form-grid--two {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.bnb-account-card .bnb-section-header h2 {
		font-size: 48px;
	}

	.bnb-account-password-panel {
		padding: 20px;
		border-radius: 22px;
	}

	.bnb-account-form input[type="text"],
	.bnb-account-form input[type="email"],
	.bnb-account-form input[type="password"] {
		min-height: 56px;
		border-radius: 18px;
	}
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.bnb-dashboard-page {
	display: grid;
	gap: 24px;
}

.bnb-dashboard-hero,
.bnb-dashboard-card,
.bnb-dashboard-stat {
	border: 1px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
}

.bnb-dashboard-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	padding: clamp(28px, 5vw, 56px);
	background: var(--bnb-pink-light);
	border-color: var(--bnb-hot-pink);
}

.bnb-dashboard-hero h1 {
	max-width: 780px;
	margin: 0 0 16px;
	font-size: clamp(56px, 8vw, 112px);
	line-height: 0.84;
	letter-spacing: -0.06em;
}

.bnb-dashboard-hero p:not(.bnb-section-kicker) {
	max-width: 720px;
	margin: 0;
	color: var(--bnb-dark);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 500;
	line-height: 1.28;
}

.bnb-dashboard-hero__button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
}

.bnb-dashboard-hero__button::after {
	content: "→";
	margin-left: 10px;
}

.bnb-dashboard-grid {
	display: grid;
	gap: 16px;
}

.bnb-dashboard-grid--stats {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bnb-dashboard-stat {
	display: grid;
	align-content: space-between;
	min-height: 180px;
	gap: 18px;
	padding: 22px;
}

.bnb-dashboard-stat--pink {
	background: var(--bnb-pink-light);
	border-color: var(--bnb-pink);
}

.bnb-dashboard-stat--pink a {
    color: #FF8EA3 !important;
}

.bnb-dashboard-stat--green {
	background: var(--bnb-green-light);
	border-color: var(--bnb-green);
}

.bnb-dashboard-stat--green a {
    color: #AFC74C !important;
}

.bnb-dashboard-stat--lilac {
	background: var(--bnb-lilac-light);
	border-color: var(--bnb-lilac);
}

.bnb-dashboard-stat--lilac a {
    color: #BE98DB !important;
}

.bnb-dashboard-stat--orange {
	background: var(--bnb-orange-light);
	border-color: var(--bnb-orange);
}

.bnb-dashboard-stat--orange a {
    color: var(--bnb-orange) !important;
}

.bnb-dashboard-stat span,
.bnb-dashboard-stat em {
	font-family: var(--font-body);
	font-size: 10px;
	font-style: normal;
	font-weight: 300;
	text-transform: none;
	color: var(--bnb-muted);
}

.bnb-dashboard-stat strong {
	font-family: var(--font-body);
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 300;
	line-height: 0.86;
	letter-spacing: 0;
}

.bnb-dashboard-columns {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
	gap: 16px;
	align-items: stretch;
}

.bnb-dashboard-card {
	display: grid;
	gap: 22px;
	padding: clamp(24px, 4vw, 36px);
}

.bnb-dashboard-card .bnb-section-header h2 {
	margin: 0;
	font-size: clamp(42px, 5vw, 72px);
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.bnb-dashboard-card .bnb-section-header p:not(.bnb-section-kicker) {
	max-width: 640px;
	margin: 10px 0 0;
	color: var(--bnb-muted);
	font-size: 16px;
	line-height: 1.42;
}

.bnb-dashboard-steps {
	display: grid;
	gap: 10px;
}

.bnb-dashboard-step {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-dashboard-step:hover,
.bnb-dashboard-step:focus {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-dashboard-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 13px;
}

.bnb-dashboard-step--done .bnb-dashboard-step__icon {
	background: var(--bnb-green);
	color: var(--bnb-dark);
}

.bnb-dashboard-step strong,
.bnb-dashboard-step em {
	display: block;
}

.bnb-dashboard-step strong {
	margin-bottom: 3px;
	font-size: 17px;
	font-weight: 500;
}

.bnb-dashboard-step em {
	color: var(--bnb-muted);
	font-size: 14px;
	font-style: normal;
	line-height: 1.3;
}

.bnb-dashboard-focus-card {
	align-content: end;
	background: var(--bnb-green-light);
	border-color: var(--bnb-green);
}

.bnb-dashboard-focus-card h2 {
	max-width: 460px;
	margin: 0;
	font-size: clamp(48px, 6vw, 86px);
	line-height: 0.86;
	letter-spacing: -0.06em;
}

.bnb-dashboard-focus-card p:not(.bnb-section-kicker) {
	max-width: 460px;
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
}

.bnb-dashboard-tool-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.bnb-dashboard-tool-grid a {
	display: grid;
	align-content: space-between;
	min-height: 170px;
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-dashboard-tool-grid a:hover,
.bnb-dashboard-tool-grid a:focus {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-dashboard-tool-grid span {
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
	color: var(--bnb-hot-pink);
}

.bnb-dashboard-tool-grid strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 34px;
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.05em;
}

.bnb-dashboard-tool-grid em {
	display: block;
	margin-top: 8px;
	color: var(--bnb-muted);
	font-size: 14px;
	font-style: normal;
	line-height: 1.3;
}

@media (max-width: 1180px) {
	.bnb-dashboard-grid--stats,
	.bnb-dashboard-tool-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bnb-dashboard-columns,
	.bnb-dashboard-hero {
		grid-template-columns: 1fr;
		display: grid;
	}

	.bnb-dashboard-hero__button {
		justify-self: start;
	}
}

@media (max-width: 720px) {
	.bnb-dashboard-grid--stats,
	.bnb-dashboard-tool-grid {
		grid-template-columns: 1fr;
	}

	.bnb-dashboard-hero,
	.bnb-dashboard-card,
	.bnb-dashboard-stat {
		border-radius: 24px;
	}

	.bnb-dashboard-stat,
	.bnb-dashboard-tool-grid a {
		min-height: 0;
	}
}


/* ==========================================================================
   Dashboard v2
   ========================================================================== */

.bnb-dashboard-page {
	display: grid;
	gap: 26px;
}

.bnb-dashboard-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.bnb-dashboard-header h1 {
	margin: 0 0 8px;
	color: var(--bnb-dark);
	font-size: clamp(54px, 6vw, 88px);
	line-height: 0.9;
	letter-spacing: -0.06em;
}

.bnb-dashboard-header p {
	margin: 0;
	color: var(--bnb-dark);
	font-size: 19px;
	font-weight: 500;
}

.bnb-dashboard-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 276px;
	gap: 30px;
	align-items: start;
}

.bnb-dashboard-main {
	display: grid;
	gap: 22px;
	min-width: 0;
}

.bnb-dashboard-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.bnb-dashboard-stat,
.bnb-dashboard-card,
.bnb-dashboard-side-card {
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
}

.bnb-dashboard-stat {
	position: relative;
	display: grid;
	gap: 9px;
	min-height: 128px;
	padding: 18px;
	overflow: hidden;
}

.bnb-dashboard-stat--pink {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-dashboard-stat--lilac {
	border-color: var(--bnb-lilac);
	background: var(--bnb-lilac-light);
}

.bnb-dashboard-stat--green {
	border-color: var(--bnb-green);
	background: var(--bnb-green-light);
}

.bnb-dashboard-stat--orange {
	border-color: var(--bnb-orange);
	background: var(--bnb-orange-light);
}

.bnb-dashboard-kicker {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.bnb-dashboard-stat strong {
	display: block;
	margin-top: 4px;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.15;
}

.bnb-dashboard-stat span {
	display: block;
	color: var(--bnb-dark);
	font-size: 16px;
	line-height: 1.25;
}

.bnb-dashboard-stat a,
.bnb-dashboard-card__header a,
.bnb-dashboard-side-card > a {
	align-self: center;
	justify-self: start;
	margin-top: 5px;
	color: var(--bnb-green);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	text-decoration: none;
}

.bnb-dashboard-stat a::after {
	content: " →";
}

.bnb-dashboard-stat--progress {
	display: grid;
	place-items: center;
	text-align: center;
}

.bnb-dashboard-stat--progress .bnb-dashboard-kicker {
	justify-self: start;
	align-self: start;
}

.bnb-dashboard-progress-ring {
	--bnb-progress-angle: calc(var(--bnb-progress, 0) * 3.6deg);

	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	margin: -6px auto 0;
	border-radius: 999px;
	background:
		radial-gradient(circle at center, var(--bnb-orange-light) 0 48%, transparent 49%),
		conic-gradient(var(--bnb-orange) var(--bnb-progress-angle), rgba(255, 134, 46, 0.22) 0);
}

.bnb-dashboard-progress-ring strong {
	margin: 0;
	font-size: 22px;
	line-height: 0.9;
}

.bnb-dashboard-progress-ring span {
	font-size: 8px;
	line-height: 1;
}

.bnb-dashboard-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.32fr);
	gap: 20px;
}

.bnb-dashboard-card {
	display: grid;
	gap: 16px;
	padding: 18px;
	border-radius: 18px;
}

.bnb-dashboard-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-dashboard-card__header a {
	margin: 0;
	color: var(--bnb-dark);
}

.bnb-dashboard-card--community,
.bnb-dashboard-card--replay {
	min-height: 132px;
}

.bnb-dashboard-continue {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	align-items: end;
}

.bnb-dashboard-continue__image {
	position: relative;
	min-height: 104px;
	border-radius: 10px;
	background:
		linear-gradient(135deg, rgba(244,109,166,0.95), rgba(251,190,202,0.95)),
		var(--bnb-pink);
	overflow: hidden;
}


.bnb-dashboard-continue__image span {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	font-family: var(--font-accent);
	font-size: 8px;
	text-transform: uppercase;
}

.bnb-dashboard-pill {
	display: inline-flex;
	width: max-content;
	margin: 0 0 10px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	font-family: var(--font-accent);
	font-size: 11px;
	text-transform: uppercase;
}

.bnb-dashboard-continue h2 {
	margin: 0 0 5px;
	font-size: 30px;
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.bnb-dashboard-continue p:not(.bnb-dashboard-pill) {
	margin: 0 0 12px;
	color: var(--bnb-muted);
	font-size: 12px;
}

.bnb-dashboard-lesson-list {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	font-weight: 500;
}

.bnb-dashboard-lesson-list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bnb-dashboard-lesson-list li::before {
	content: "";
	width: 11px;
	height: 11px;
	border: 1px solid var(--bnb-hot-pink);
	border-radius: 3px;
	background: var(--bnb-background);
}

.bnb-dashboard-lesson-list li.is-complete::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	font-size: 8px;
	line-height: 1;
}

.bnb-dashboard-schedule-preview {
	display: grid;
	gap: 7px;
}

.bnb-dashboard-schedule-preview__dates,
.bnb-dashboard-schedule-preview__row {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 5px;
}

.bnb-dashboard-schedule-preview__dates span {
	display: block;
	padding: 6px 4px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	font-family: var(--font-accent);
	font-size: 12px;
	text-align: center;
}

.bnb-dashboard-schedule-preview__row {
	min-height: 26px;
}

.bnb-dashboard-schedule-preview__row span {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 5px 8px;
	color: var(--bnb-dark);
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bnb-dashboard-schedule-preview__row .is-pink {
	background: var(--bnb-pink);
}

.bnb-dashboard-schedule-preview__row .is-lilac {
	background: var(--bnb-lilac);
}

.bnb-dashboard-schedule-preview__row .is-green {
	background: var(--bnb-green);
}

.bnb-dashboard-mini-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.bnb-dashboard-mini-stats div {
	display: grid;
	place-items: center;
	min-height: 54px;
	padding: 8px;
	border: 1px solid var(--bnb-border);
	border-radius: 8px;
	background: var(--bnb-background-alt);
	text-align: center;
}

.bnb-dashboard-mini-stats span {
	font-family: var(--font-accent);
	font-size: 12px;
	text-transform: uppercase;
}

.bnb-dashboard-mini-stats strong {
	font-family: var(--font-heading);
	font-size: 35px;
	font-weight: 300;
	line-height: 0.9;
}

.bnb-dashboard-community-row,
.bnb-dashboard-replay-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
}

.bnb-dashboard-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--bnb-lilac);
	font-family: var(--font-heading);
	font-size: 28px;
}

.bnb-dashboard-community-row strong,
.bnb-dashboard-replay-row strong {
	display: block;
	font-size: 18px;
	line-height: 1.25;
}

.bnb-dashboard-community-row > span {
	display: inline-flex;
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--bnb-blue);
	color: var(--bnb-background);
	font-family: var(--font-accent);
	font-size: 7px;
	text-transform: uppercase;
}

.bnb-dashboard-replay-row {
	grid-template-columns: 140px minmax(0, 1fr);
}

.bnb-dashboard-replay-thumb {
	display: grid;
	place-items: center;
	min-height: 74px;
	border-radius: 6px;
	background:
		linear-gradient(135deg, rgba(244,109,166,0.95), rgba(175,199,76,0.82)),
		var(--bnb-pink);
}

.bnb-dashboard-replay-thumb span {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	font-size: 20px;
}

.bnb-dashboard-replay-row time {
	display: block;
	margin-bottom: 8px;
	color: var(--bnb-muted);
	font-size: 14px;
}

.bnb-dashboard-aside {
	display: grid;
	gap: 14px;
}

.bnb-dashboard-side-card {
	display: grid;
	gap: 16px;
	padding: 20px;
	border-color: var(--bnb-hot-pink);
	border-radius: 18px;
	background: var(--bnb-background);
}

.bnb-dashboard-side-card h2 {
	margin: 0;
	font-family: var(--font-body);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.bnb-dashboard-task-list,
.bnb-dashboard-action-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnb-dashboard-task-list li {
	position: relative;
	padding-left: 20px;
	font-size: 16px;
	font-weight: 400;
}

.bnb-dashboard-task-list li::before {
	content: "";
	position: absolute;
	top: 0.24em;
	left: 0;
	width: 11px;
	height: 11px;
	border: 1px solid var(--bnb-hot-pink);
	border-radius: 3px;
	background: var(--bnb-background);
}

.bnb-dashboard-task-list li.is-complete::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	font-size: 8px;
	line-height: 1;
}

.bnb-dashboard-action-list a {
	color: var(--bnb-dark);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
}

.bnb-dashboard-action-list a:hover,
.bnb-dashboard-action-list a:focus {
	color: var(--bnb-hot-pink);
}

.bnb-dashboard-upcoming {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
}

.bnb-dashboard-upcoming strong,
.bnb-dashboard-upcoming span {
	display: block;
}

.bnb-dashboard-upcoming strong {
	font-size: 16px;
	line-height: 1.2;
}

.bnb-dashboard-upcoming span {
	margin-top: 4px;
	color: var(--bnb-muted);
	font-size: 14px;
}

.bnb-dashboard-upcoming a {
	color: var(--bnb-green);
	font-size: 11px;
	text-decoration: none;
}

@media (max-width: 1280px) {
	.bnb-dashboard-layout {
		grid-template-columns: 1fr;
	}

	.bnb-dashboard-aside {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.bnb-dashboard-stats,
	.bnb-dashboard-grid,
	.bnb-dashboard-aside {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.bnb-dashboard-header h1 {
		font-size: 48px;
	}

	.bnb-dashboard-card,
	.bnb-dashboard-side-card,
	.bnb-dashboard-stat {
		padding: 16px;
	}

	.bnb-dashboard-continue,
	.bnb-dashboard-replay-row,
	.bnb-dashboard-community-row {
		grid-template-columns: 1fr;
	}

	.bnb-dashboard-mini-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Course lesson resources */

.bnb-course-sidebar-card--resources {
	display: grid;
	gap: 22px;
}

.bnb-course-resource-group {
	display: grid;
	gap: 10px;
}

.bnb-course-resource-group h4 {
	margin: 0;
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.bnb-course-sidebar-links a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-course-sidebar-links a span {
	font-weight: 600;
	line-height: 1.25;
}

.bnb-course-sidebar-links a em {
	color: var(--bnb-muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.2;
	text-align: right;
}

.bnb-course-sidebar-links a strong {
	color: var(--bnb-dark);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
}


/* ==========================================================================
   Coaching Notes
   ========================================================================== */

.bnb-coaching-notes {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 90;
}

.bnb-coaching-notes__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 1px solid var(--bnb-hot-pink);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	box-shadow: 0 18px 44px rgba(21, 21, 21, 0.12);
	cursor: pointer;
	transition:
		transform 160ms ease,
		background 160ms ease,
		color 160ms ease,
		border-color 160ms ease;
}

.bnb-coaching-notes__button:hover,
.bnb-coaching-notes__button:focus {
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	transform: translateY(-2px);
}

.bnb-coaching-notes__icon {
	font-size: 25px;
	line-height: 1;
}

.bnb-coaching-notes__dot {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 13px;
	height: 13px;
	border: 2px solid var(--bnb-background);
	border-radius: 999px;
	background: var(--bnb-green);
}

.bnb-coaching-notes__panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	display: grid;
	gap: 18px;
	width: min(390px, calc(100vw - 32px));
	max-height: min(620px, calc(100vh - 120px));
	padding: 22px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	box-shadow: 0 24px 70px rgba(21, 21, 21, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.98);
	pointer-events: none;
	overflow-y: auto;
	transition:
		opacity 180ms ease,
		visibility 180ms ease,
		transform 180ms ease;
}

.bnb-coaching-notes.is-open .bnb-coaching-notes__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.bnb-coaching-notes__panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-coaching-notes__panel-header h2 {
	margin: 0;
	color: var(--bnb-dark);
	font-size: 42px;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.bnb-coaching-notes__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.bnb-coaching-notes__intro {
	margin: -4px 0 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-coaching-notes__list {
	display: grid;
	gap: 12px;
}

.bnb-coaching-note {
	display: grid;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background-alt);
}

.bnb-coaching-note h3 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.bnb-coaching-note__message {
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.4;
}

.bnb-coaching-note__message p {
	margin: 0;
}

.bnb-coaching-note__message p + p {
	margin-top: 8px;
}

.bnb-coaching-note__action {
	justify-self: start;
	margin-top: 4px;
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.bnb-coaching-notes__empty {
	display: grid;
	gap: 8px;
	padding: 16px;
	border-radius: 20px;
	background: var(--bnb-green-light);
}

.bnb-coaching-notes__empty h3 {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
}

.bnb-coaching-notes__empty p {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.4;
}

@media (max-width: 720px) {
	.bnb-coaching-notes {
		right: 18px;
		bottom: 18px;
	}

	.bnb-coaching-notes__button {
		width: 54px;
		height: 54px;
	}

	.bnb-coaching-notes__panel {
		right: -2px;
		width: calc(100vw - 32px);
		max-height: calc(100vh - 110px);
		padding: 18px;
		border-radius: 24px;
	}

	.bnb-coaching-notes__panel-header h2 {
		font-size: 36px;
	}
}

/* ==========================================================================
   Pricing Planner — spreadsheet-style income goal planner
   Keep at bottom so it overrides older pricing expense styles.
   ========================================================================== */

.bnb-pricing-page .bnb-pricing-expense-sheet {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: var(--bnb-background);
	overflow: hidden;
	margin: 22px 0px;
}

.bnb-pricing-page .bnb-pricing-expense-sheet__column {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	min-width: 0;
	border-right: 1px solid var(--bnb-border);
	background: var(--bnb-background);
}

.bnb-pricing-page .bnb-pricing-expense-sheet__column:last-child {
	border-right: 0;
}

.bnb-pricing-expense-sheet__column-header {
    background: var(--bnb-lilac-light);
}

.bnb-pricing-page .bnb-pricing-expense-sheet__column--business {
}

.bnb-pricing-page .bnb-pricing-expense-sheet__column--personal {
}

.bnb-pricing-page .bnb-pricing-expense-sheet__column--spending_saving {
}

.bnb-pricing-page .bnb-pricing-expense-sheet__column-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
	border-bottom: 1px solid rgba(21, 21, 21, 0.08);
}

.bnb-pricing-page .bnb-pricing-expense-sheet__column-header h4 {
    margin: 0;
    color: var(--bnb-dark);
    font-family: var(--font-accent);
    font-size: 16px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.bnb-pricing-page .bnb-pricing-expense-sheet__column-total {
	display: grid;
	justify-items: end;
	gap: 2px;
	flex: 0 0 auto;
	text-align: right;
}

.bnb-pricing-page .bnb-pricing-expense-sheet__column-total strong {
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}

.bnb-pricing-page .bnb-pricing-expense-sheet__column-total span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

.bnb-pricing-page .bnb-pricing-expense-sheet__headings {
	display: grid;
	grid-template-columns: minmax(150px, 1.4fr) minmax(78px, 0.7fr) minmax(78px, 0.7fr) 30px;
	gap: 0;
	padding: 9px 12px;
	border-bottom: 1px solid rgba(21, 21, 21, 0.08);
	background: rgba(255, 252, 244, 0.58);
}

.bnb-pricing-page .bnb-pricing-expense-sheet__headings span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

.bnb-pricing-page .bnb-pricing-expense-sheet__rows {
	display: grid;
	align-content: start;
	min-height: 240px;
	background: rgba(255, 252, 244, 0.34);
}

.bnb-pricing-page .bnb-pricing-expense-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(150px, 1.4fr) minmax(78px, 0.7fr) minmax(78px, 0.7fr) 30px;
	align-items: stretch;
	gap: 0;
	min-width: 0;
	border-bottom: 1px solid rgba(21, 21, 21, 0.07);
	background: rgba(255, 252, 244, 0.46);
}

.bnb-pricing-page .bnb-pricing-expense-row:last-child {
	border-bottom: 0;
}

.bnb-pricing-page .bnb-pricing-expense-row label {
	display: block;
	min-width: 0;
	margin: 0;
}

.bnb-pricing-page .bnb-pricing-expense-row input[type="text"],
.bnb-pricing-page .bnb-pricing-expense-row input[type="number"] {
	width: 100%;
	min-height: 46px;
	height: 100%;
	padding: 11px 12px;
	border: 0;
	border-right: 1px solid rgba(21, 21, 21, 0.06);
	border-radius: 0;
	background: transparent;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.2;
}

.bnb-pricing-page .bnb-pricing-expense-row input[type="number"] {
	text-align: left;
}

.bnb-pricing-page .bnb-pricing-expense-row input:focus {
	outline: 0;
	background: var(--bnb-background);
	box-shadow: inset 0 0 0 2px rgba(244, 109, 166, 0.18);
}

.bnb-pricing-page .bnb-pricing-expense-row--blank input {
	color: var(--bnb-muted);
}

.bnb-pricing-page .bnb-pricing-expense-remove {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 46px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: rgba(21, 21, 21, 0.36);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.bnb-pricing-page .bnb-pricing-expense-remove:hover,
.bnb-pricing-page .bnb-pricing-expense-remove:focus {
	color: var(--bnb-hot-pink);
	background: rgba(255, 252, 244, 0.7);
}

.bnb-pricing-page .bnb-pricing-expense-sheet__empty-note {
	margin: 0;
	padding: 10px 12px 14px;
	color: var(--bnb-muted);
	font-size: 13px;
	line-height: 1.3;
	background: rgba(255, 252, 244, 0.34);
}

.bnb-pricing-page .bnb-pricing-income-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 22px;
	background: var(--bnb-background-alt);
}

.bnb-pricing-page .bnb-pricing-income-toolbar h4 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.bnb-pricing-page .bnb-pricing-tax-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin: 0;
	padding: 7px 9px 7px 13px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
}

.bnb-pricing-page .bnb-pricing-tax-pill span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}

.bnb-pricing-page .bnb-pricing-tax-pill input {
	width: 70px;
	min-height: 36px;
	padding: 7px 10px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font: inherit;
	font-size: 15px;
	text-align: center;
}

.bnb-pricing-page .bnb-pricing-income-helper {
	margin: -4px 0 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.4;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background-alt);
}

.bnb-pricing-page .bnb-pricing-income-summary-bar span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar strong {
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

@media (max-width: 1180px) {
	.bnb-pricing-page .bnb-pricing-expense-sheet {
		grid-template-columns: 1fr;
	}

	.bnb-pricing-page .bnb-pricing-expense-sheet__column {
		border-right: 0;
		border-bottom: 1px solid var(--bnb-border);
	}

	.bnb-pricing-page .bnb-pricing-expense-sheet__column:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 640px) {
	.bnb-pricing-page .bnb-pricing-expense-sheet__column-header,
	.bnb-pricing-page .bnb-pricing-income-toolbar,
	.bnb-pricing-page .bnb-pricing-income-summary-bar > div {
		align-items: flex-start;
		flex-direction: column;
	}

	.bnb-pricing-page .bnb-pricing-expense-sheet__column-total {
		justify-items: start;
		text-align: left;
	}

	.bnb-pricing-page .bnb-pricing-expense-sheet__headings,
	.bnb-pricing-page .bnb-pricing-expense-row {
		grid-template-columns: minmax(120px, 1.4fr) minmax(70px, 0.7fr) minmax(70px, 0.7fr) 30px;
	}

	.bnb-pricing-page .bnb-pricing-expense-row input[type="text"],
	.bnb-pricing-page .bnb-pricing-expense-row input[type="number"] {
		font-size: 16px;
	}

	.bnb-pricing-page .bnb-pricing-income-summary-bar {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Pricing Planner — income summary hierarchy
   ========================================================================== */

.bnb-pricing-page .bnb-pricing-income-summary-bar {
	display: grid;
	grid-template-columns: minmax(180px, 0.85fr) minmax(260px, 1.35fr) minmax(120px, 0.45fr);
	gap: 12px;
	align-items: stretch;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item {
	display: grid;
	align-content: center;
	gap: 7px;
	min-width: 0;
	padding: 16px 18px;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background-alt);
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item > span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item > strong {
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual {
	background: var(--bnb-hot-pink) !important;
	border-color: var(--bnb-hot-pink) !important;
	color: var(--bnb-background);
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual > span,
.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual > strong {
	color: var(--bnb-background);
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual > strong {
	font-size: clamp(40px, 5vw, 68px);
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item--tax {
	background: var(--bnb-background);
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item--tax input {
	width: 100%;
	min-height: 40px;
	padding: 8px 10px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font: inherit;
	font-size: 16px;
	text-align: center;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item--tax input:focus {
	outline: 0;
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.14);
}

.bnb-pricing-page .bnb-pricing-sync-note {
	margin-top: -4px;
}

@media (max-width: 900px) {
	.bnb-pricing-page .bnb-pricing-income-summary-bar {
		grid-template-columns: 1fr 1fr;
	}

	.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual {
		grid-column: 1 / -1;
		order: -1;
	}
}

@media (max-width: 560px) {
	.bnb-pricing-page .bnb-pricing-income-summary-bar {
		grid-template-columns: 1fr;
	}

	.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual {
		order: 0;
	}
}

/* Pricing Planner — income summary 25 / 25 / 50 layout */

.bnb-pricing-page .bnb-pricing-income-summary-bar {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr;
	gap: 12px;
	align-items: stretch;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item--tax,
.bnb-pricing-page .bnb-pricing-income-summary-bar__item--monthly,
.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual {
	grid-column: auto;
	grid-row: auto;
	min-width: 0;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual {
	display: grid;
	align-content: center;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual > strong {
	font-size: clamp(46px, 5vw, 72px);
}

@media (max-width: 820px) {
	.bnb-pricing-page .bnb-pricing-income-summary-bar {
		grid-template-columns: 1fr 1fr;
	}

	.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.bnb-pricing-page .bnb-pricing-income-summary-bar {
		grid-template-columns: 1fr;
	}

	.bnb-pricing-page .bnb-pricing-income-summary-bar__item--annual {
		grid-column: auto;
	}
}

/* ==========================================================================
   Pricing Planner — calculator refinement
   ========================================================================== */

.bnb-pricing-page .bnb-pricing-calculator {
	align-items: start;
}

.bnb-pricing-page .bnb-pricing-calculator__inputs {
	align-content: start;
	align-items: start;
}

.bnb-pricing-page .bnb-pricing-calculator__inputs label {
	align-content: start;
	min-height: 0;
}

.bnb-pricing-page .bnb-pricing-calculator__inputs input {
	height: auto !important;
	min-height: 62px;
	padding: 16px 18px;
}

.bnb-pricing-page .bnb-pricing-calculator__results {
	align-content: start;
}

.bnb-pricing-page .bnb-pricing-result--goal {
	min-height: 168px;
	align-content: center;
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle {
	display: grid;
	gap: 0;
	padding: 0;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background-alt);
	overflow: hidden;
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 58px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle summary::-webkit-details-marker {
	display: none;
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle summary strong {
	margin: 0;
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle summary > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	font-size: 14px;
	line-height: 1;
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle[open] summary > span {
	transform: rotate(180deg);
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle .bnb-pricing-result__dropdown {
	display: grid;
	gap: 8px;
	padding: 0 18px 18px;
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle .bnb-pricing-result__dropdown > span {
	font-family: var(--font-heading);
	font-size: clamp(38px, 4vw, 58px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle .bnb-pricing-result__dropdown > em {
	max-width: 420px;
	color: var(--bnb-muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle.is-na {
	background: var(--bnb-background-alt);
	opacity: 0.78;
}

/* ==========================================================================
   Pricing Planner — stacked calculator fields
   ========================================================================== */

.bnb-pricing-page .bnb-pricing-calculator {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 28px;
	align-items: start;
}

.bnb-pricing-page .bnb-pricing-calculator__inputs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-content: start;
}

.bnb-pricing-page .bnb-pricing-calculator-field {
	display: grid;
	grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	margin: 0;
}

.bnb-pricing-page .bnb-pricing-calculator-field > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
}

.bnb-pricing-page .bnb-pricing-calculator-field > span em {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1px solid var(--bnb-hot-pink);
	border-radius: 999px;
	color: var(--bnb-hot-pink);
	font-family: var(--font-body);
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	cursor: help;
}

.bnb-pricing-page .bnb-pricing-calculator-field input {
	width: 100%;
	min-height: 68px;
	padding: 18px 22px;
	border: 1px solid var(--bnb-border);
	border-radius: 26px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.2;
}

.bnb-pricing-page .bnb-pricing-calculator-field input:focus {
	outline: 0;
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.14);
	background: var(--bnb-background);
}

.bnb-pricing-page .bnb-pricing-calculator__results {
	display: grid;
	gap: 12px;
	align-content: start;
}

.bnb-pricing-page .bnb-pricing-result--projects {
	min-height: 130px;
}

.bnb-pricing-page .bnb-pricing-result--goal {
	min-height: 190px;
	align-content: center;
}

.bnb-pricing-page .bnb-pricing-result--goal span {
	font-size: clamp(58px, 5vw, 85px);
}

.bnb-pricing-page .bnb-pricing-result--buffer-toggle {
	min-height: auto;
}

@media (max-width: 1100px) {
	.bnb-pricing-page .bnb-pricing-calculator {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
	.bnb-pricing-page .bnb-pricing-calculator-field {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.bnb-pricing-page .bnb-pricing-calculator-field input {
		min-height: 60px;
		border-radius: 22px;
		font-size: 20px;
	}

	.bnb-pricing-page .bnb-pricing-result--goal span {
		font-size: clamp(52px, 16vw, 78px);
	}
}

/* Pricing Planner — calculator money fields */

.bnb-pricing-page .bnb-pricing-money-field {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	width: 100%;
	min-width: 0;
	border: 1px solid var(--bnb-border);
	border-radius: 26px;
	background: var(--bnb-background-alt);
	overflow: hidden;
}

.bnb-pricing-page .bnb-pricing-money-field > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid var(--bnb-border);
	background: var(--bnb-pink-light);
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
}

.bnb-pricing-page .bnb-pricing-money-field input[type="number"] {
	min-height: 68px;
	padding: 18px 22px;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.bnb-pricing-page .bnb-pricing-money-field:focus-within {
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.14);
	background: var(--bnb-background);
}

.bnb-pricing-page .bnb-pricing-money-field:focus-within > span {
	border-right-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

@media (max-width: 680px) {
	.bnb-pricing-page .bnb-pricing-money-field {
		grid-template-columns: 52px minmax(0, 1fr);
		border-radius: 22px;
	}

	.bnb-pricing-page .bnb-pricing-money-field input[type="number"] {
		min-height: 60px;
		font-size: 20px;
	}
}

/* ==========================================================================
   BNB Course
   ========================================================================== */

.bnb-course-overview,
.bnb-course-single {
	display: grid;
	gap: 28px;
}

.bnb-course-hero,
.bnb-course-single__hero,
.bnb-course-lessons-card,
.bnb-course-player-card,
.bnb-course-audio-card,
.bnb-course-action-card,
.bnb-course-content,
.bnb-course-sidebar-card {
	padding: 26px;
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-background);
}

.bnb-course-hero h2,
.bnb-course-single__hero h1,
.bnb-course-section-header h2,
.bnb-course-action-card h2 {
	margin: 0;
	font-weight: 300;
}


.bnb-course-module-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.bnb-course-module-card__link {
	position: relative;
	display: grid;
	min-height: 260px;
	padding: 26px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	color: var(--bnb-dark);
	text-decoration: none;
	overflow: hidden;
}

/* Course module cards — image/content layout */

.bnb-course-module-card__link {
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	gap: 18px;
	height: 100%;
	padding: 28px;
	color: inherit;
	text-decoration: none;
}

.bnb-course-module-card__body {
	display: grid;
	grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
	gap: 28px;
	align-items: stretch;
}

.bnb-course-module-card__image {
	width: 100%;
	height: 100%;
	min-height: 230px;
	aspect-ratio: auto;
	border-radius: 22px;
	overflow: hidden;
	background: var(--bnb-background-alt);
}

.bnb-course-module-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bnb-course-module-card__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px;
	align-items: end;
}

.bnb-course-module-card__content > div {
	align-self: center;
}

.bnb-course-module-card__count {
	display: inline-block;
	margin-top: 22px;
	color: var(--bnb-muted);
	font-size: 22px;
	line-height: 1.2;
}

.bnb-course-module-card__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: end;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--bnb-pink);
	color: var(--bnb-dark);
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}

.bnb-course-module-card__footer {
	display: none;
}

.bnb-course-module-card__link:hover,
.bnb-course-module-card__link:focus {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-module-card h3 {
	margin: 0;
	font-size: clamp(36px, 4vw, 58px);
	font-weight: 300;
}

.bnb-course-module-card p {
	margin: 12px 0 0;
	color: var(--bnb-muted);
	font-size: 16px;
	line-height: 1.4;
}

.bnb-course-module-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.bnb-course-module-card__meta span {
	display: inline-flex;
	padding: 7px 10px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-course-module-card__arrow {
	position: absolute;
	right: 22px;
	bottom: 20px;
	color: var(--bnb-hot-pink);
	font-size: 22px;
	line-height: 1;
}

.bnb-course-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	gap: 22px;
	align-items: start;
}

.bnb-course-single__main,
.bnb-course-single__sidebar {
	display: grid;
	gap: 18px;
}

.bnb-course-single__sidebar {
	position: sticky;
	top: 96px;
}

.bnb-course-lesson-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.bnb-course-lesson-meta span {
	display: inline-flex;
	padding: 7px 10px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-course-video {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background: var(--bnb-dark);
}

.bnb-course-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.bnb-course-audio-card audio {
	width: 100%;
	margin-top: 14px;
}

.bnb-course-action-card {
	background: var(--bnb-lilac-light);
	border-color: var(--bnb-lilac);
}

.bnb-course-action-card__links,
.bnb-course-sidebar-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.bnb-course-sidebar-links {
	display: grid;
}

.bnb-course-sidebar-card h3 {
	margin: 0;
	font-size: 30px;
	font-weight: 300;
}

.bnb-course-sidebar-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.bnb-course-sidebar-links a:hover,
.bnb-course-sidebar-links a:focus {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-lesson-list {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

.bnb-course-lesson-row {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 20px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-course-lesson-row:hover,
.bnb-course-lesson-row:focus,
.bnb-course-lesson-row.is-current {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-lesson-row__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 12px;
}

.bnb-course-lesson-row__content {
	display: grid;
	gap: 3px;
}

.bnb-course-lesson-row__content strong {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
}

.bnb-course-lesson-row__content span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-course-lesson-row__arrow {
	color: var(--bnb-hot-pink);
	font-size: 20px;
}

.bnb-course-lesson-list--compact .bnb-course-lesson-row {
	grid-template-columns: 32px minmax(0, 1fr);
	padding: 11px;
	border-radius: 16px;
}

.bnb-course-lesson-list--compact .bnb-course-lesson-row__arrow {
	display: none;
}

.bnb-course-lesson-list--compact .bnb-course-lesson-row__number {
	width: 26px;
	height: 26px;
	font-size: 10px;
}

.bnb-course-navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.bnb-course-navigation__link {
	display: grid;
	gap: 5px;
	padding: 18px;
	border: 1px solid var(--bnb-hot-pink);
	border-radius: 22px;
	background: var(--bnb-pink-light);
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-course-navigation__link:hover,
.bnb-course-navigation__link:focus {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.1);
}

.bnb-course-navigation__link span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-course-navigation__link strong {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
}

.bnb-course-navigation__link--next {
	text-align: right;
}

.bnb-empty-state {
	padding: 24px;
	border: 1px dashed var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background-alt);
}

.bnb-empty-state h3 {
	margin: 0 0 8px;
	font-weight: 300;
}

.bnb-empty-state p {
	margin: 0;
	color: var(--bnb-muted);
}

@media (max-width: 1100px) {
	.bnb-course-single__layout {
		grid-template-columns: 1fr;
	}

	.bnb-course-single__sidebar {
		position: static;
	}
}

@media (max-width: 760px) {
	.bnb-course-module-grid,
	.bnb-course-navigation {
		grid-template-columns: 1fr;
	}

	.bnb-course-hero,
	.bnb-course-single__hero,
	.bnb-course-lessons-card,
	.bnb-course-player-card,
	.bnb-course-audio-card,
	.bnb-course-action-card,
	.bnb-course-content,
	.bnb-course-sidebar-card {
		padding: 22px;
		border-radius: 26px;
	}
}





/* ==========================================================================
   6. Mobile styling
   ========================================================================== */

@media (max-width: 1180px) {
	.bnb-schedule-hero,
	.bnb-entry-forms,
	.bnb-schedule-lists,
	.bnb-saved-items {
		grid-template-columns: 1fr;
	}

	.bnb-schedule-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bnb-schedule-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bnb-schedule-lists .bnb-schedule-panel {
		height: auto;
		min-height: 0;
		max-height: none;
	}

	.bnb-project-list,
	.bnb-saved-list ul {
		max-height: 420px;
	}
}

@media (max-width: 980px) {
	.bnb-portal {
		display: block;
	}

	.bnb-sidebar {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: min(320px, 88vw);
		transform: translateX(-100%);
		transition: transform 220ms ease;
	}

	.bnb-sidebar.is-open {
		transform: translateX(0);
	}

	.bnb-topbar__sidebar-toggle {
		display: inline-flex;
	}

	.bnb-portal__main-wrap {
		padding: 24px 18px 40px;
	}

	.bnb-topbar__inner {
		padding: 0 18px;
	}

	.bnb-topbar__action-link span:last-child,
	.bnb-topbar__user-text {
		display: none;
	}
}

@media (max-width: 900px) {
	.site-header__nav {
		display: none;
	}

	.site-header__menu-toggle,
	.site-header__mobile-close {
		display: inline-flex;
	}

	.site-footer__inner {
		flex-direction: column;
	}

	.site-footer__nav ul {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.content-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.bnb-schedule-actions,
	.bnb-form-grid,
	.bnb-schedule-summary {
		grid-template-columns: 1fr;
	}

	.bnb-schedule-action-card {
		grid-template-columns: 60px minmax(0, 1fr);
		min-height: 100px;
		padding: 18px 22px;
	}

	.bnb-schedule-action-card__icon {
		width: 48px;
		height: 48px;
		font-size: 42px;
	}

	.bnb-schedule-action-card strong {
		font-size: 34px;
	}

	.bnb-schedule-action-card span,
	.bnb-schedule-action-card p {
		font-size: 17px;
	}

	.bnb-schedule-calendar-panel,
	.bnb-schedule-panel,
	.bnb-saved-list,
	.bnb-project-form,
	.bnb-holiday-form,
	.bnb-edit-form,
	.bnb-availability-checker {
		border-radius: 24px;
		padding: 16px;
	}

	.bnb-schedule-navigation {
		align-items: stretch;
		flex-direction: column;
	}

	.bnb-schedule-navigation-actions {
		justify-content: flex-start;
	}

	.bnb-saved-card,
	.bnb-saved-list li {
		flex-direction: column;
	}
}

@media (max-width: 640px) {
	.inner {
		width: min(calc(100% - 28px), var(--site-width));
	}

	.site-header__inner {
		min-height: 72px;
	}

	.content-archive__grid {
		grid-template-columns: 1fr;
	}

	.search-form,
	.single-content__post-navigation {
		grid-template-columns: 1fr;
		flex-direction: column;
	}

	.search-form__submit {
		width: 100%;
	}
}

/* ==========================================================================
   Pricing Planner — Income Goal Planner final polish
   ========================================================================== */

.bnb-pricing-page .bnb-pricing-income-planner {
	position: relative;
	padding: 28px;
	border: 1px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-background);
	overflow: hidden;
}

.bnb-pricing-page .bnb-pricing-income-planner > summary {
	display: grid;
	gap: 8px;
	margin: 0 0 24px;
	list-style: none;
	cursor: pointer;
}

.bnb-pricing-page .bnb-pricing-income-planner > summary::-webkit-details-marker {
	display: none;
}

.bnb-pricing-page .bnb-pricing-income-planner > summary::marker {
	content: "";
}

.bnb-pricing-page .bnb-pricing-income-planner > summary::after {
	content: "↓";
	position: absolute;
	top: 28px;
	right: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-hot-pink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1;
}

.bnb-pricing-page .bnb-pricing-income-planner[open] > summary::after {
	content: "↑";
}

.bnb-pricing-page .bnb-pricing-income-planner > summary .bnb-section-kicker {
	margin: 0;
}

.bnb-pricing-page .bnb-pricing-income-planner > summary h3 {
	margin: 0;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.06em;
}

.bnb-pricing-page .bnb-pricing-income-planner__summary {
	margin: 10px 0 0;
	color: var(--bnb-dark);
	font-size: 17px;
	line-height: 1.35;
}

.bnb-pricing-page .bnb-pricing-income-planner__summary strong {
	font-weight: 500;
}

.bnb-pricing-page .bnb-pricing-income-planner__inner {
	display: grid;
	gap: 18px;
}

.bnb-pricing-page .bnb-pricing-income-toolbar {
	display: grid;
	gap: 4px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.bnb-pricing-page .bnb-pricing-income-toolbar h4 {
	margin: 0;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.bnb-pricing-page .bnb-pricing-income-helper {
	margin: 0;
	max-width: 820px;
	color: var(--bnb-muted);
	font-size: 15px;
	line-height: 1.4;
}

.bnb-pricing-page .bnb-pricing-income-summary-bar {
	margin-top: 0;
}

.bnb-pricing-page .bnb-pricing-income-planner .bnb-button {
	justify-self: start;
	margin-top: 0;
}

.bnb-pricing-page .bnb-pricing-income-planner__footer {
	display: grid;
	gap: 14px;
	margin-top: 22px;
	padding-top: 4px;
}

.bnb-pricing-page .bnb-pricing-sync-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--bnb-lilac);
	border-radius: 22px;
	background: var(--bnb-lilac-light);
}

.bnb-pricing-page .bnb-pricing-sync-note p {
	margin: 0;
	color: var(--bnb-dark);
	font-size: 15px;
	line-height: 1.35;
}

.bnb-pricing-page .bnb-pricing-sync-note form {
	flex: 0 0 auto;
	margin: 0;
}

@media (max-width: 720px) {
	.bnb-pricing-page .bnb-pricing-income-planner {
		padding: 22px;
		border-radius: 26px;
	}

	.bnb-pricing-page .bnb-pricing-income-planner > summary::after {
		top: 22px;
		right: 22px;
	}

	.bnb-pricing-page .bnb-pricing-sync-note {
		display: grid;
	}
}


/* ==========================================================================
   7. Course styling
   ========================================================================== */
   
   
 /* Hide native theme header/footer on BNB Course CPT pages */

.single-bnb_course .site-header,
.single-bnb_course .site-footer,
.single-bnb_course .footer-copyright {
	display: none;
}

.single-bnb_course .site-inner,
.single-bnb_course .site-main {
	min-height: 100vh;
}

.single-bnb_course .site-main {
	padding: 0;
}

.single-bnb_course {
	background: var(--bnb-background);
}  

/* ==========================================================================
   BNB Course — Overview, Module and Lesson Pages
   ========================================================================== */

.bnb-course-overview,
.bnb-course-single {
	display: grid;
	gap: 26px;
}

.bnb-course-overview__hero,
.bnb-course-module-hero,
.bnb-course-lesson-hero {
	display: grid;
	gap: 10px;
}

.bnb-course-overview__hero h1,
.bnb-course-module-hero h1,
.bnb-course-lesson-hero h1 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(42px, 6vw, 72px);
	font-weight: 300;
	line-height: 0.88;
	letter-spacing: -0.05em;
}

.bnb-course-overview__hero p,
.bnb-course-module-hero p,
.bnb-course-lesson-hero p {
	max-width: 860px;
	margin: 0;
	color: var(--bnb-dark);
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 300;
	line-height: 1.18;
}

.bnb-course-overview__top-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
	gap: 18px;
	align-items: stretch;
}

.bnb-course-continue-card,
.bnb-course-progress-card,
.bnb-course-strategy-note,
.bnb-course-current-lesson,
.bnb-course-lessons-card,
.bnb-course-player-card,
.bnb-course-audio-card,
.bnb-course-action-card,
.bnb-course-content,
.bnb-course-sidebar-card {
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background);
}

.bnb-course-continue-card,
.bnb-course-progress-card,
.bnb-course-strategy-note,
.bnb-course-current-lesson,
.bnb-course-lessons-card,
.bnb-course-audio-card,
.bnb-course-action-card,
.bnb-course-content,
.bnb-course-sidebar-card {
	padding: 24px;
}

.bnb-course-continue-card {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-progress-card {
	border-color: var(--bnb-green);
	background: var(--bnb-green-light);
}

.bnb-course-progress-card h2,
.bnb-course-strategy-note h2,
.bnb-course-current-lesson h2,
.bnb-course-section-heading h2,
.bnb-course-sidebar-card h3,
.bnb-course-action-card h2,
.bnb-course-audio-card h2 {
	margin: 0 0 8px;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: clamp(22px, 2vw, 35px);
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: -0.01em;
}


.bnb-course-continue-card__inner,
.bnb-course-current-lesson__inner {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
}

.bnb-course-continue-card__text,
.bnb-course-current-lesson__inner > div {
	display: grid;
	gap: 6px;
}

.bnb-course-continue-card__text span,
.bnb-course-current-lesson__inner span {
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 11px;
	text-transform: uppercase;
}

.bnb-course-continue-card__text h2 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(34px, 4vw, 56px);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.055em;
}

.bnb-course-continue-card__text p {
	margin: 0;
	color: var(--bnb-dark);
	font-size: 17px;
	line-height: 1.35;
}

.bnb-course-section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}

.bnb-course-section-heading > p {
	margin: 0;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 11px;
	text-transform: uppercase;
}

.bnb-course-module-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.bnb-course-module-card__link {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	gap: 18px;
	min-height: 285px;
	padding: 22px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	color: var(--bnb-dark);
	text-decoration: none;
	overflow: hidden;
	transition:
		background 160ms ease,
		border-color 160ms ease,
		transform 160ms ease;
}

.bnb-course-module-card__link:hover,
.bnb-course-module-card__link:focus {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-module-card__top,
.bnb-course-module-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	line-height: 1.1;
	text-transform: uppercase;
}

.bnb-course-module-card__body h3 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(32px, 3.2vw, 46px);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.055em;
}

.bnb-course-module-card__body p {
	margin: 12px 0 0;
	color: var(--bnb-dark);
	font-size: 15px;
	line-height: 1.35;
}

.bnb-course-module-card__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.bnb-course-module-card__tools span {
	display: inline-flex;
	padding: 6px 9px;
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
	font-size: 12px;
	line-height: 1.1;
}

.bnb-course-module-card__footer strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--bnb-pink);
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
}

.bnb-course-strategy-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	border-color: var(--bnb-lilac);
	background: var(--bnb-lilac-light);
}

.bnb-course-strategy-note h2 {
	font-size: clamp(28px, 3vw, 42px);
}

.bnb-course-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 11px;
	line-height: 1.2;
	text-transform: uppercase;
}

.bnb-course-breadcrumb a {
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-course-breadcrumb a:hover,
.bnb-course-breadcrumb a:focus {
	color: var(--bnb-hot-pink);
}

.bnb-course-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: 20px;
	align-items: start;
}

.bnb-course-single__main,
.bnb-course-single__sidebar {
	display: grid;
	gap: 18px;
	min-width: 0;
}

.bnb-course-single__sidebar {
	position: sticky;
	top: 98px;
}

.bnb-course-video {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 24px;
	background: var(--bnb-dark);
}

.bnb-course-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.bnb-course-video--placeholder {
	min-height: 360px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
}

.bnb-course-player-card {
	padding: 0;
	overflow: hidden;
}

.bnb-course-lesson-tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	padding: 10px;
	border-top: 1px solid var(--bnb-border);
	background: var(--bnb-background);
}

.bnb-course-lesson-tabs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	border-radius: 999px;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.bnb-course-lesson-tabs a:hover,
.bnb-course-lesson-tabs a:focus,
.bnb-course-lesson-tabs a.is-active {
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
}

.bnb-course-audio-card {
	display: grid;
	gap: 16px;
	border-color: var(--bnb-lilac);
	background: var(--bnb-lilac-light);
}

.bnb-course-audio-card audio {
	width: 100%;
}

.bnb-course-action-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	border-color: var(--bnb-green);
	background: var(--bnb-green-light);
}

.bnb-course-action-card__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	flex: 0 0 auto;
}

.bnb-course-content {
	display: grid;
	gap: 14px;
}

.bnb-course-content > *:last-child {
	margin-bottom: 0;
}

.bnb-course-sidebar-card {
	display: grid;
	gap: 16px;
}

.bnb-course-sidebar-card__header {
	display: grid;
	gap: 6px;
}

.bnb-course-sidebar-card h3 {
	font-size: clamp(26px, 2.6vw, 36px);
}

.bnb-course-sidebar-links,
.bnb-course-module-jump-list {
	display: grid;
	gap: 8px;
}

.bnb-course-sidebar-links a,
.bnb-course-module-jump-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 14px;
	border: 1px solid var(--bnb-lilac);
	border-radius: 18px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.bnb-course-sidebar-links a:hover,
.bnb-course-sidebar-links a:focus,
.bnb-course-module-jump-list a:hover,
.bnb-course-module-jump-list a:focus,
.bnb-course-module-jump-list a.is-current {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-module-jump-list a {
	justify-content: flex-start;
}

.bnb-course-module-jump-list a span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
}

.bnb-course-lessons-card {
	display: grid;
}

.bnb-course-lesson-list {
	display: grid;
	gap: 9px;
}

.bnb-course-lesson-row {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-course-lesson-row:hover,
.bnb-course-lesson-row:focus,
.bnb-course-lesson-row.is-current {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-lesson-row__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 11px;
	line-height: 1;
}

.bnb-course-lesson-row__content {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.bnb-course-lesson-row__content strong {
	color: var(--bnb-dark);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
}

.bnb-course-lesson-row__content span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	line-height: 1.2;
	text-transform: uppercase;
}

.bnb-course-lesson-row__arrow {
	color: var(--bnb-hot-pink);
	font-size: 18px;
	line-height: 1;
}

.bnb-course-lesson-list--compact .bnb-course-lesson-row {
	grid-template-columns: 32px minmax(0, 1fr);
	padding: 10px;
	border-radius: 16px;
}

.bnb-course-lesson-list--compact .bnb-course-lesson-row__arrow {
	display: none;
}

.bnb-course-lesson-list--compact .bnb-course-lesson-row__number {
	width: 26px;
	height: 26px;
	font-size: 10px;
}

.bnb-course-lesson-list--compact .bnb-course-lesson-row__content strong {
	font-size: 14px;
}

.bnb-course-navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.bnb-course-navigation__link {
	display: grid;
	gap: 5px;
	padding: 16px;
	border: 1px solid var(--bnb-hot-pink);
	border-radius: 20px;
	background: var(--bnb-pink-light);
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-course-navigation__link:hover,
.bnb-course-navigation__link:focus {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-navigation__link span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-course-navigation__link strong {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
}

.bnb-course-navigation__link--next {
	text-align: right;
}

@media (max-width: 1220px) {
	.bnb-course-module-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bnb-course-single__layout {
		grid-template-columns: 1fr;
	}

	.bnb-course-single__sidebar {
		position: static;
	}
}

@media (max-width: 840px) {
	.bnb-course-overview__top-grid,
	.bnb-course-module-grid,
	.bnb-course-navigation {
		grid-template-columns: 1fr;
	}

	.bnb-course-continue-card__inner,
	.bnb-course-current-lesson__inner,
	.bnb-course-strategy-note,
	.bnb-course-action-card {
		display: grid;
	}

	.bnb-course-action-card__links {
		justify-content: flex-start;
	}

	.bnb-course-lesson-tabs {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.bnb-course-overview__hero h1,
	.bnb-course-module-hero h1,
	.bnb-course-lesson-hero h1 {
		font-size: clamp(46px, 16vw, 72px);
	}

	.bnb-course-continue-card,
	.bnb-course-progress-card,
	.bnb-course-strategy-note,
	.bnb-course-current-lesson,
	.bnb-course-lessons-card,
	.bnb-course-audio-card,
	.bnb-course-action-card,
	.bnb-course-content,
	.bnb-course-sidebar-card {
		padding: 20px;
		border-radius: 24px;
	}
}


/* ==========================================================================
   Course refresh — images, progress, lesson states
   ========================================================================== */

.bnb-course-overview,
.bnb-course-single {
	display: grid;
	gap: 28px;
}

.bnb-course-overview-hero {
	padding: 0 0 4px;
}

.bnb-course-overview-hero h1,
.bnb-course-module-hero h1,
.bnb-course-lesson-hero h1 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(42px, 5vw, 62px);
	font-weight: 300;
	line-height: 0.86;
	letter-spacing: -0.05em;
}

.bnb-course-overview-hero p,
.bnb-course-module-hero > div > p,
.bnb-course-lesson-hero > p:not(.bnb-section-kicker) {
	max-width: 860px;
	margin: 12px 0 0;
	color: var(--bnb-dark);
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.25;
}

.bnb-course-overview__top-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr);
	gap: 16px;
}

.bnb-course-continue-card,
.bnb-course-progress-card,
.bnb-course-current-lesson,
.bnb-course-lessons-card,
.bnb-course-sidebar-card,
.bnb-course-player-card,
.bnb-course-audio-card,
.bnb-course-action-card,
.bnb-course-content,
.bnb-course-completion-card,
.bnb-course-resources-card,
.bnb-course-strategy-note {
	border: 1px solid var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background);
}

.bnb-course-continue-card,
.bnb-course-progress-card,
.bnb-course-current-lesson,
.bnb-course-lessons-card,
.bnb-course-sidebar-card,
.bnb-course-audio-card,
.bnb-course-action-card,
.bnb-course-content,
.bnb-course-completion-card,
.bnb-course-resources-card,
.bnb-course-strategy-note {
	padding: 22px;
}

.bnb-course-continue-card {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-continue-card__inner,
.bnb-course-current-lesson__inner {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
}

.bnb-course-continue-card__image,
.bnb-course-current-lesson__image,
.bnb-course-module-card__image,
.bnb-course-lesson-row__image,
.bnb-course-video__poster {
	overflow: hidden;
	background: var(--bnb-background-alt);
}

.bnb-course-continue-card__image,
.bnb-course-current-lesson__image {
	aspect-ratio: 16 / 10;
	border-radius: 14px;
}

.bnb-course-module-card__image {
	aspect-ratio: 1 / 1;
	border-radius: 14px;
}

.bnb-course-lesson-row__image {
	width: 72px;
	height: 54px;
	border-radius: 10px;
}

.bnb-course-continue-card__image img,
.bnb-course-current-lesson__image img,
.bnb-course-module-card__image img,
.bnb-course-lesson-row__image img,
.bnb-course-video__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bnb-course-continue-card__text span,
.bnb-course-current-lesson__inner span,
.bnb-course-module-card__top span:first-child {
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 12px;
	line-height: 1.2;
	text-transform: uppercase;
}

.bnb-course-continue-card__text h2,
.bnb-course-current-lesson__inner h2 {
	margin: 4px 0;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: clamp(28px, 3vw, 34px);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: -0.01em;
}

.bnb-course-continue-card__text p,
.bnb-course-current-lesson__inner p {
	margin: 0;
	color: var(--bnb-dark);
	font-size: 22px;
	line-height: 1.3;
}

.bnb-course-continue-card__text em {
	display: inline-block;
	margin-top: 12px;
	color: var(--bnb-muted);
	font-size: 14px;
	font-style: normal;
}

/* Progress card */

.bnb-course-progress-card {
	border-color: var(--bnb-green);
	background: var(--bnb-green-light);
}

.bnb-course-progress-card__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 22px;
	align-items: center;
}

.bnb-course-progress-ring {
	--bnb-course-progress: 0%;
	position: relative;
	display: grid;
	place-items: center;
	width: 132px;
	height: 132px;
	border-radius: 999px;
	background:
		radial-gradient(circle at center, var(--bnb-background) 0 54%, transparent 55%),
		conic-gradient(var(--bnb-green) var(--bnb-course-progress), rgba(21, 21, 21, 0.08) 0);
	text-align: center;
}

.bnb-course-progress-ring strong,
.bnb-course-progress-ring span {
	position: relative;
	z-index: 1;
}

.bnb-course-progress-ring {
	grid-template-rows: 1fr;
}

.bnb-course-progress-ring strong {
	display: block;
    margin: 0;
    color: var(--bnb-dark);
    font-size: 32px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: 0;
}

.bnb-course-progress-ring span {
	display: block;
	margin-top: 8px;
	color: var(--bnb-muted);
	font-size: 15px;
	line-height: 1;
}

.bnb-course-progress-card h2 {
	margin: 0 0 15px;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: clamp(28px, 3vw, 34px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.01em;
}

.bnb-course-progress-ring__content {
	display: grid;
	place-items: center;
	gap: 0px;
	transform: translateY(1px);
}

.bnb-course-overview__top-grid .bnb-section-kicker {
    color: var(--bnb-dark);
    font-size: 14px;
}

/* Course modules */

.bnb-course-section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 16px;
}

.bnb-course-section-heading h2 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.06em;
}

.bnb-course-section-heading p {
	margin: 0;
	color: var(--bnb-dark);
	font-size: 12px;
}

.bnb-course-module-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.bnb-course-module-card {

	border-radius: 28px;
	background: var(--bnb-background);
	overflow: hidden;
}


.bnb-course-module-card__link {
	display: grid;
	gap: 12px;
	height: 100%;
	padding: 18px;
	color: inherit;
	text-decoration: none;
}

.bnb-course-module-card__top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-course-progress-line {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: rgba(21, 21, 21, 0.08);
	overflow: hidden;
}

.bnb-course-progress-line span {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: inherit;
	background: var(--bnb-hot-pink);
}

.bnb-course-module-card__body {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
}

.bnb-course-module-card h3 {
	margin: 0;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.01em;
}

.bnb-course-module-card p {
	margin: 8px 0 0;
	color: var(--bnb-dark);
	font-size: 15px;
	line-height: 1.35;
}

.bnb-course-module-card__count {
	display: inline-block;
	margin-top: 14px;
	color: var(--bnb-muted);
	font-size: 14px;
}

.bnb-course-module-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

/* Strategy note */

.bnb-course-strategy-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-color: var(--bnb-lilac);
	background: var(--bnb-lilac-light);
}

.bnb-course-strategy-note h2 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.055em;
}

.bnb-course-strategy-note p {
	margin: 8px 0 0;
	color: var(--bnb-muted);
}

/* Module / lesson layout */

.bnb-course-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
	gap: 22px;
	align-items: start;
}

.bnb-course-single__main,
.bnb-course-single__sidebar {
	display: grid;
	gap: 20px;
}

.bnb-course-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
	color: var(--bnb-muted);
	font-size: 14px;
}

.bnb-course-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.bnb-course-module-hero__progress {
	display: grid;
	grid-template-columns: auto minmax(120px, 1fr) auto;
	gap: 28px;
	align-items: center;
	margin-top: 22px;
	width: 100%;
}

.bnb-course-module-hero__progress > span,
.bnb-course-module-hero__progress > strong {
	white-space: nowrap;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.bnb-course-module-hero__progress .bnb-course-progress-line {
	width: 100%;
	margin: 0;
}

.bnb-course-progress-line {
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: rgba(21, 21, 21, 0.08);
	overflow: hidden;
}

.bnb-course-progress-line span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--bnb-hot-pink);
}

/* Lesson list rows */

.bnb-course-lesson-list {
	display: grid;
	gap: 8px;
}

.bnb-course-lesson-row {
	display: grid;
	grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
	gap: 14px;
	align-items: center;
	min-height: 78px;
	padding: 10px 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	color: inherit;
	text-decoration: none;
}

.bnb-course-lesson-row:hover,
.bnb-course-lesson-row.is-current {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-lesson-row__status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(21, 21, 21, 0.18);
	border-radius: 999px;
	color: var(--bnb-muted);
}

.bnb-course-lesson-row.is-complete .bnb-course-lesson-row__status {
	border-color: var(--bnb-green);
	background: var(--bnb-green);
	color: var(--bnb-background);
}

.bnb-course-lesson-row.is-current .bnb-course-lesson-row__status {
	border-color: var(--bnb-hot-pink);
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
}

.bnb-course-lesson-row__number {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 11px;
}

.bnb-course-lesson-row__content {
	display: grid;
	gap: 4px;
}

.bnb-course-lesson-row__content strong {
	color: var(--bnb-dark);
	font-weight: 500;
	line-height: 1.25;
}

.bnb-course-lesson-row__content span {
	color: var(--bnb-muted);
	font-size: 13px;
}

.bnb-course-lesson-row__badge {
	display: inline-flex;
	justify-content: center;
	min-width: 92px;
	padding: 7px 10px;
	border-radius: 999px;
	color: var(--bnb-hot-pink);
	background: var(--bnb-pink-light);
	font-size: 12px;
	line-height: 1;
}

.bnb-course-lesson-row.is-complete .bnb-course-lesson-row__badge {
	color: var(--bnb-green);
	background: var(--bnb-green-light);
}

.bnb-course-lesson-row__arrow {
	color: var(--bnb-muted);
}

/* Compact lesson list */

.bnb-course-lesson-list--compact .bnb-course-lesson-row {
	grid-template-columns: auto minmax(0, 1fr) auto;
	min-height: 52px;
	padding: 9px 10px;
}

.bnb-course-lesson-list--compact .bnb-course-lesson-row__number,
.bnb-course-lesson-list--compact .bnb-course-lesson-row__image,
.bnb-course-lesson-list--compact .bnb-course-lesson-row__badge {
	display: none;
}

/* Video */

.bnb-course-player-card {
	padding: 0;
	overflow: hidden;
	border-color: var(--bnb-pink);
}

.bnb-course-video {
	position: relative;
	background: var(--bnb-dark);
}

.bnb-course-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.bnb-course-video--placeholder {
	aspect-ratio: 16 / 9;
}

.bnb-course-video__poster {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.bnb-course-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.bnb-course-video__play span {
	display: grid;
	place-items: center;
	width: 86px;
	height: 86px;
	border: 3px solid var(--bnb-background);
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	font-size: 34px;
}

.bnb-course-lesson-tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	padding: 8px;
	background: var(--bnb-background);
}

.bnb-course-lesson-tabs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	border-radius: 999px;
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-course-lesson-tabs a.is-active {
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
}

/* Completion */

.bnb-course-completion-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-completion-card.is-complete {
	border-color: var(--bnb-green);
	background: var(--bnb-green-light);
}

.bnb-course-completion-card h2 {
	margin: 0 0 8px;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: clamp(22px, 2vw, 35px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.01em;
}


.bnb-course-completion-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

/* Sidebar */

.bnb-course-sidebar-card__header {
	display: grid;
	gap: 8px;
	margin-bottom: 16px;
}

.bnb-course-sidebar-card h3 {
	margin: 0;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: clamp(22px, 2vw, 35px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.01em;
}


.bnb-course-sidebar-card__progress {
	display: grid;
	gap: 8px;
	margin-top: 6px;
}

.bnb-course-sidebar-card__progress span {
	color: var(--bnb-muted);
	font-size: 13px;
}

.bnb-course-sidebar-card--tools {
	border-color: var(--bnb-lilac);
	background: var(--bnb-lilac-light);
}

.bnb-course-sidebar-card--tools .bnb-section-kicker {
    color: #c8aade;
}

.bnb-course-sidebar-links,
.bnb-course-module-jump-list {
	display: grid;
	gap: 8px;
}

.bnb-course-sidebar-links a,
.bnb-course-module-jump-list a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--bnb-lilac);
	border-radius: 14px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-course-module-jump-list a {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.bnb-course-module-jump-list a.is-current {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-course-module-jump-list span,
.bnb-course-module-jump-list em {
	color: var(--bnb-muted);
	font-size: 13px;
	font-style: normal;
}

/* Resources */

.bnb-course-resource-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 14px;
}

.bnb-course-resource-grid a {
	display: grid;
	gap: 4px;
	padding: 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-course-resource-grid span {
	color: var(--bnb-muted);
	font-size: 13px;
}

/* Responsive */

@media (max-width: 1180px) {
	.bnb-course-overview__top-grid,
	.bnb-course-single__layout {
		grid-template-columns: 1fr;
	}

	.bnb-course-module-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.bnb-course-continue-card__inner,
	.bnb-course-current-lesson__inner {
		grid-template-columns: 1fr;
	}

	.bnb-course-progress-card__inner,
	.bnb-course-completion-card,
	.bnb-course-strategy-note {
		display: grid;
	}

	.bnb-course-module-card__body,
	.bnb-course-lesson-row {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.bnb-course-module-card__image,
	.bnb-course-lesson-row__number,
	.bnb-course-lesson-row__image,
	.bnb-course-lesson-row__badge {
		display: none;
	}

	.bnb-course-module-hero__progress,
	.bnb-course-resource-grid {
		grid-template-columns: 1fr;
	}

	.bnb-course-lesson-tabs {
		grid-template-columns: 1fr;
	}
}



/* ==========================================================================
   Perfect Person Profile
   ========================================================================== */

.bnb-perfect-person-page {
	display: grid;
	gap: 24px;
}

.bnb-perfect-person-form {
	display: grid;
	gap: 24px;
}

/* Header / section shells */

.bnb-perfect-person-hero {
    display: none;
}

.bnb-perfect-person-hero,
.bnb-perfect-person-snapshot,
.bnb-perfect-person-section {
	padding: 26px;
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-background);
}

.bnb-perfect-person-hero h2,
.bnb-perfect-person-snapshot h3,
.bnb-perfect-person-section h3 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.06em;
}


.bnb-perfect-person-snapshot {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-perfect-person-snapshot__header,
.bnb-perfect-person-section__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 20px;
}

.bnb-perfect-person-section__header h3 {
    margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 46px);
}

.bnb-perfect-person-snapshot__header > p {
	max-width: 340px;
	margin: 0;
	font-size: 14px;
}

/* Tabs */

.bnb-perfect-person-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
}

.bnb-perfect-person-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.bnb-perfect-person-tab:hover,
.bnb-perfect-person-tab:focus,
.bnb-perfect-person-tab.is-active {
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
}

.bnb-perfect-person-tab-panel {
	display: none;
}

.bnb-perfect-person-tab-panel.is-active {
	display: block;
}

/* At a glance summary */

.bnb-perfect-person-summary {
	display: grid;
	gap: 10px;
}

.bnb-perfect-person-summary__row {
	display: grid;
	grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	padding: 14px 0;
	border-top: 1px solid rgba(21, 21, 21, 0.08);
}

.bnb-perfect-person-summary__row:first-child {
	border-top: 0;
}

.bnb-perfect-person-summary__row span {
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 11px;
	line-height: 1.2;
	text-transform: uppercase;
}

.bnb-perfect-person-summary__row p {
	margin: 0;
	color: var(--bnb-dark);
	font-size: 17px;
	line-height: 1.35;
}

.bnb-perfect-person-summary__row p.is-empty {
	color: var(--bnb-muted);
	font-style: italic;
}

/* Research examples */

.bnb-perfect-person-research-list {
	display: grid;
	gap: 12px;
}

.bnb-perfect-person-research-card {
	border: 1px solid var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background-alt);
	overflow: hidden;
}

.bnb-perfect-person-research-card summary {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	min-height: 112px;
	padding: 14px;
	cursor: pointer;
	list-style: none;
}

.bnb-perfect-person-research-card summary::-webkit-details-marker {
	display: none;
}

.bnb-perfect-person-research-card summary::marker {
	content: "";
}

.bnb-perfect-person-research-card__summary-image {
	display: grid;
	place-items: center;
	width: 92px;
	height: 84px;
	overflow: hidden;
	border: 1px dashed var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-perfect-person-research-card__summary-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bnb-perfect-person-research-card__summary-text {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.bnb-perfect-person-research-card__summary-text span {
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 12px;
	text-transform: uppercase;
}

.bnb-perfect-person-research-card__summary-text strong {
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.bnb-perfect-person-research-card__summary-text em {
	color: var(--bnb-muted);
	font-size: 14px;
	font-style: normal;
	line-height: 1.3;
}

.bnb-perfect-person-research-card__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	font-size: 16px;
	line-height: 1;
}

.bnb-perfect-person-research-card[open] .bnb-perfect-person-research-card__toggle {
	transform: rotate(180deg);
}

.bnb-perfect-person-research-card__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 0 14px 16px;
}

.bnb-perfect-person-research-card__fields label {
	display: grid;
	gap: 7px;
}

.bnb-perfect-person-research-card__fields label span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 12px;
	text-transform: uppercase;
}

.bnb-perfect-person-research-card__fields input,
.bnb-perfect-person-research-card__fields select,
.bnb-perfect-person-research-card__fields textarea,
.bnb-perfect-person-pill-input,
.bnb-perfect-person-belief-prompts input {
	width: 100%;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font: inherit;
}

.bnb-perfect-person-research-card__fields input,
.bnb-perfect-person-research-card__fields select,
.bnb-perfect-person-pill-input,
.bnb-perfect-person-belief-prompts input {
	min-height: 48px;
	padding: 11px 14px;
}

.bnb-perfect-person-belief-prompts span {
    display: none;
}

.bnb-perfect-person-research-card__fields textarea {
	min-height: 96px;
	padding: 12px 14px;
	resize: vertical;
}

.bnb-perfect-person-research-card__fields label:nth-last-child(-n + 3) {
	grid-column: 1 / -1;
}

/* Pattern cards */

.bnb-perfect-person-pattern-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.bnb-perfect-person-pattern-card {
	display: grid;
	gap: 14px;
	align-content: start;
	padding: 18px;
	border: 1px solid var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background-alt);
}

.bnb-perfect-person-pattern-card h4 {
	margin: 0;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: clamp(28px, 1.5vw, 36px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

.bnb-perfect-person-pattern-card p {
	margin: 8px 0 0;
	color: var(--bnb-muted);
	font-size: 16px;
	line-height: 1.35;
}

.bnb-perfect-person-pattern-card__questions {
	display: grid;
	gap: 7px;
	padding: 12px;
	border: 1px solid rgba(21, 21, 21, 0.08);
	border-radius: 18px;
	background: var(--bnb-background);
}

.bnb-perfect-person-pattern-card__questions span {
	position: relative;
	padding-left: 18px;
	color: var(--bnb-dark);
	font-size: 14px;
	line-height: 1.3;
}

.bnb-perfect-person-pattern-card__questions span::before {
	content: "♡";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--bnb-hot-pink);
	font-size: 12px;
	line-height: 1.3;
}

/* Profile builder */

.bnb-perfect-person-pill-grid,
.bnb-perfect-person-profile-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.bnb-perfect-person-pill-card {
	display: grid;
	gap: 14px;
	align-content: start;
	min-height: 260px;
	padding: 25px;
	border: 1px solid var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background-alt);
}

.bnb-perfect-person-pill-card--pink {
	background: var(--bnb-pink-light);
}

.bnb-perfect-person-pill-card--orange {
	background: var(--bnb-orange-light);
}

.bnb-perfect-person-pill-card--lilac {
	background: var(--bnb-lilac-light);
}

.bnb-perfect-person-pill-card--green {
	background: var(--bnb-green-light);
}

.bnb-perfect-person-pill-card--blue {
	background: rgba(121, 167, 230, 0.14);
}

.bnb-perfect-person-pill-card--hot-pink {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-perfect-person-pill-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.bnb-perfect-person-pill-card h4 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: clamp(28px, 1.5vw, 36px);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.02em;
}

.bnb-perfect-person-pill-card p {
	margin: 8px 0 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-perfect-person-inspiration-button {
	flex: 0 0 auto;
	padding: 8px 12px;
	border: 1px solid var(--bnb-hot-pink);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
	cursor: pointer;
}

.bnb-perfect-person-inspiration-button:hover,
.bnb-perfect-person-inspiration-button:focus {
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
}

.bnb-perfect-person-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 44px;
}

.bnb-perfect-person-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 8px 10px 8px 13px;
	border: 1px solid rgba(21, 21, 21, 0.1);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font-size: 14px;
	line-height: 1.2;
}

.bnb-perfect-person-pill button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(21, 21, 21, 0.08);
	color: var(--bnb-dark);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.bnb-perfect-person-pill button:hover,
.bnb-perfect-person-pill button:focus {
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
}

.bnb-perfect-person-pill-input:focus,
.bnb-perfect-person-research-card__fields input:focus,
.bnb-perfect-person-research-card__fields select:focus,
.bnb-perfect-person-research-card__fields textarea:focus,
.bnb-perfect-person-belief-prompts input:focus {
	outline: 0;
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.12);
}

/* Use Your 3P */

.bnb-perfect-person-use-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 16px;
}

.bnb-perfect-person-use-card {
	padding: 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background-alt);
}

.bnb-perfect-person-use-card--large {
	border-color: var(--bnb-lilac);
	background: var(--bnb-lilac-light);
}

.bnb-perfect-person-use-card h4 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(34px, 4vw, 54px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.bnb-perfect-person-use-card ul {
	display: grid;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.bnb-perfect-person-use-card li {
	color: var(--bnb-dark);
	font-size: 15px;
	line-height: 1.4;
}

.bnb-perfect-person-use-card li strong {
	color: var(--bnb-hot-pink);
	font-weight: 500;
}

.bnb-perfect-person-use-list {
	display: grid;
	gap: 9px;
	margin-top: 18px;
}

.bnb-perfect-person-use-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
}

.bnb-perfect-person-use-item strong {
	display: block;
	color: var(--bnb-dark);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
}

.bnb-perfect-person-use-item p {
	margin: 4px 0 0;
	color: var(--bnb-muted);
	font-size: 13px;
	line-height: 1.35;
}

.bnb-perfect-person-use-item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
	text-decoration: none;
}

.bnb-perfect-person-use-item a:hover,
.bnb-perfect-person-use-item a:focus {
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
}

/* Save */

.bnb-perfect-person-save-bar {
	display: flex;
	justify-content: flex-start;
}

/* Inspiration modal */

.bnb-perfect-person-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: none;
}

.bnb-perfect-person-modal.is-open {
	display: block;
}

.bnb-perfect-person-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(21, 21, 21, 0.28);
}

.bnb-perfect-person-modal__panel {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	gap: 18px;
	width: min(760px, calc(100vw - 32px));
	max-height: min(760px, calc(100vh - 32px));
	overflow: auto;
	padding: 26px;
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-background);
	box-shadow: 0 30px 80px rgba(21, 21, 21, 0.18);
	transform: translate(-50%, -50%);
}

.bnb-perfect-person-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}

.bnb-perfect-person-modal__header h3 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(42px, 5vw, 68px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.06em;
}

.bnb-perfect-person-modal__header p {
	margin: 10px 0 0;
	color: var(--bnb-muted);
	font-size: 15px;
	line-height: 1.4;
}

.bnb-perfect-person-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-hot-pink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.bnb-perfect-person-modal__close:hover,
.bnb-perfect-person-modal__close:focus {
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
}

.bnb-perfect-person-inspiration-panels {
	display: grid;
}

.bnb-perfect-person-inspiration-panel {
	display: none;
}

.bnb-perfect-person-inspiration-panel.is-active {
	display: block;
}

.bnb-perfect-person-belief-prompts {
	display: grid;
	gap: 12px;
}

.bnb-perfect-person-belief-prompts label {
	display: grid;
	gap: 8px;
}

.bnb-perfect-person-belief-prompts label span {
	color: var(--bnb-dark);
	font-size: 15px;
	line-height: 1.3;
}

.bnb-perfect-person-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--bnb-border);
}

.bnb-perfect-person-modal__footer p {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.35;
}

/* Responsive */

@media (max-width: 1080px) {
	.bnb-perfect-person-pill-grid,
	.bnb-perfect-person-profile-grid,
	.bnb-perfect-person-pattern-grid,
	.bnb-perfect-person-use-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1040px) {
	.bnb-perfect-person-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-radius: 24px;
	}
}

@media (max-width: 720px) {
	.bnb-perfect-person-hero,
	.bnb-perfect-person-snapshot,
	.bnb-perfect-person-section,
	.bnb-perfect-person-modal__panel {
		padding: 22px;
		border-radius: 26px;
	}

	.bnb-perfect-person-snapshot__header,
	.bnb-perfect-person-section__header,
	.bnb-perfect-person-pill-card__header,
	.bnb-perfect-person-modal__header,
	.bnb-perfect-person-modal__footer {
		display: grid;
	}

	.bnb-perfect-person-tabs {
		grid-template-columns: 1fr;
		border-radius: 24px;
	}

	.bnb-perfect-person-summary__row,
	.bnb-perfect-person-research-card summary {
		grid-template-columns: 1fr;
	}

	.bnb-perfect-person-research-card__summary-image {
		width: 100%;
		height: 160px;
	}

	.bnb-perfect-person-research-card__fields {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   Perfect Person Profile — Refinements
   ========================================================================== */

.bnb-perfect-person-tab-panels .bnb-perfect-person-section {
	margin-top: 0;
}

.bnb-perfect-person-section--use {
	display: grid;
	gap: 20px;
}

.bnb-perfect-person-section--use .bnb-perfect-person-snapshot {
	padding: 22px;
	border-radius: 24px;
}

.bnb-perfect-person-research-card__open {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
	gap: 14px;
	padding: 0 14px 16px;
}

.bnb-perfect-person-research-card__open-image {
	display: grid;
	place-items: center;
	min-height: 100%;
	overflow: hidden;
	border: 1px dashed var(--bnb-border);
	border-radius: 22px;
	background: var(--bnb-background);
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

.bnb-perfect-person-research-card__open-image img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
}

.bnb-perfect-person-research-card__open .bnb-perfect-person-research-card__fields {
	padding: 0;
}

.bnb-perfect-person-task-list {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

.bnb-perfect-person-task {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	cursor: pointer;
}

.bnb-perfect-person-task input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--bnb-hot-pink);
}

.bnb-perfect-person-task span {
	display: grid;
	gap: 4px;
}

.bnb-perfect-person-task strong {
	color: var(--bnb-dark);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
}

.bnb-perfect-person-task em {
	color: var(--bnb-muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
}

.bnb-perfect-person-task:has(input:checked) {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-perfect-person-task:has(input:checked) strong {
	color: var(--bnb-hot-pink);
}

@media (max-width: 920px) {
	.bnb-perfect-person-research-card__open {
		grid-template-columns: 1fr;
	}

	.bnb-perfect-person-research-card__open-image img {
		min-height: 260px;
	}
}

@media (max-width: 720px) {
	.bnb-perfect-person-research-card__open {
		padding: 0 14px 16px;
	}

	.bnb-perfect-person-research-card__open-image {
		min-height: 220px;
	}
}

/* ==========================================================================
   Perfect Person — Use Your 3P split layout
   ========================================================================== */

.bnb-perfect-person-section--use {
	display: grid;
	gap: 22px;
}

.bnb-perfect-person-use-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.bnb-perfect-person-use-panel {
	display: grid;
	gap: 18px;
	padding: 22px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background-alt);
}

.bnb-perfect-person-use-panel--profile {
	background: var(--bnb-pink-light);
	border-color: var(--bnb-pink);
}

.bnb-perfect-person-use-panel--tasks {
	background: var(--bnb-background-alt);
}

.bnb-perfect-person-use-panel h4 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-body);
	font-size: clamp(28px, 1.5vw, 36px);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.02em;
}

/* 3P snapshot */

.bnb-perfect-person-snapshot-list {
	display: grid;
	gap: 12px;
}

.bnb-perfect-person-snapshot-row {
	display: grid;
	gap: 10px;
	padding: 15px;
	border: 1px solid rgba(21, 21, 21, 0.08);
	border-radius: 20px;
	background: var(--bnb-background);
}

.bnb-perfect-person-snapshot-row__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.bnb-perfect-person-snapshot-row__label > span:first-child {
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.bnb-perfect-person-snapshot-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bnb-perfect-person-snapshot-pills span {
	display: inline-flex;
	padding: 8px 11px;
	border: 1px solid rgba(21, 21, 21, 0.1);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font-size: 13px;
	line-height: 1.2;
}

.bnb-perfect-person-snapshot-empty {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 14px;
	font-style: italic;
	line-height: 1.35;
}

/* Tooltip */

.bnb-perfect-person-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(21, 21, 21, 0.12);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 11px;
	font-style: normal;
	line-height: 1;
	cursor: help;
}

.bnb-perfect-person-tooltip > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.bnb-perfect-person-tooltip em {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	z-index: 10;
	width: min(260px, 70vw);
	padding: 11px 12px;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: var(--bnb-dark);
	color: var(--bnb-background);
	font-family: var(--font-body);
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 14px 30px rgba(21, 21, 21, 0.18);
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.bnb-perfect-person-tooltip em::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 100%;
	width: 10px;
	height: 10px;
	background: var(--bnb-dark);
	transform: translateY(-5px) rotate(45deg);
}

.bnb-perfect-person-tooltip:hover em,
.bnb-perfect-person-tooltip:focus em,
.bnb-perfect-person-tooltip:focus-visible em {
	opacity: 1;
	transform: translateY(0);
}

/* Tasks */

.bnb-perfect-person-use-panel--tasks .bnb-perfect-person-task-list {
	margin-top: 0;
}

.bnb-perfect-person-use-panel--tasks .bnb-perfect-person-task {
	background: var(--bnb-background);
}

/* Remove old Use grid if still present elsewhere */

.bnb-perfect-person-use-grid {
	display: none;
}

/* Responsive */

@media (max-width: 980px) {
	.bnb-perfect-person-use-split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.bnb-perfect-person-use-panel {
		padding: 18px;
		border-radius: 24px;
	}

	.bnb-perfect-person-snapshot-row__label {
		align-items: flex-start;
	}
}


/* ==========================================================================
   Steady Sales Systems
   ========================================================================== */

.bnb-steady-sales-page {
	display: grid;
	gap: 24px;
}

.bnb-steady-sales-form {
	display: grid;
	gap: 24px;
}

.bnb-steady-sales-hero,
.bnb-steady-sales-section {
	padding: 26px;
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-background);
}

.bnb-steady-sales-hero {
    display: none;
}

.bnb-steady-sales-hero h2 {
	margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 46px);
}

.bnb-steady-sales-section h3 {
	margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 46px);
}

.bnb-steady-sales-section__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 20px;
}

/* Tabs */

.bnb-steady-sales-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
}

.bnb-steady-sales-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.bnb-steady-sales-tab:hover,
.bnb-steady-sales-tab:focus,
.bnb-steady-sales-tab.is-active {
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
}

.bnb-steady-sales-tab-panel {
	display: none;
}

.bnb-steady-sales-tab-panel.is-active {
	display: block;
}

/* Overview stats */

.bnb-steady-sales-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 22px;
}

.bnb-steady-sales-stat-card {
	position: relative;
	display: grid;
	gap: 12px;
	min-height: 150px;
	padding: 24px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background-alt);
}

.bnb-steady-sales-stat-card--pink {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-steady-sales-stat-card--lilac {
	border-color: var(--bnb-lilac);
	background: var(--bnb-lilac-light);
}

.bnb-steady-sales-stat-card--green {
	border-color: var(--bnb-green);
	background: var(--bnb-green-light);
}

.bnb-steady-sales-stat-card--blue {
	border-color: var(--bnb-blue);
	background: rgba(121, 167, 230, 0.14);
}

.bnb-steady-sales-stat-card span {
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 14px;
	line-height: 1.2;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.02em;
}

.bnb-steady-sales-stat-card strong {
	align-self: end;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: 0;
}

.bnb-steady-sales-stat-card a {
	position: absolute;
	top: 18px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	text-decoration: none;
}

/* Overview layout */

.bnb-steady-sales-overview-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 18px;
	align-items: start;
}

.bnb-steady-sales-intentions,
.bnb-steady-sales-compact-3p {
	padding: 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 26px;
	background: var(--bnb-background-alt);
}

.bnb-steady-sales-intentions h4,
.bnb-steady-sales-compact-3p h4,
.bnb-steady-sales-plan h4,
.bnb-steady-sales-reference h4,
.bnb-steady-sales-content-bank h4 {
	    margin: 0;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: clamp(28px, 1.5vw, 36px);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.bnb-steady-sales-overview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 18px;
}

.bnb-steady-sales-field {
	display: grid;
	gap: 7px;
}

.bnb-steady-sales-field span,
.bnb-steady-sales-content-card label span {
	color: var(--bnb-dark);
	font-weight: 500;
	line-height: 1.2;
}

.bnb-steady-sales-field em {
	color: var(--bnb-muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
}

.bnb-steady-sales-field textarea,
.bnb-steady-sales-pill-input,
.bnb-steady-sales-content-card input,
.bnb-steady-sales-content-card select,
.bnb-steady-sales-content-card textarea {
	width: 100%;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font: inherit;
}

.bnb-steady-sales-field textarea,
.bnb-steady-sales-content-card textarea {
	min-height: 96px;
	padding: 12px 14px;
	resize: vertical;
}

.bnb-steady-sales-pill-input,
.bnb-steady-sales-content-card input,
.bnb-steady-sales-content-card select {
	min-height: 48px;
	padding: 11px 14px;
}

.bnb-steady-sales-compact-3p__list {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

.bnb-steady-sales-compact-3p__list div {
	display: grid;
	gap: 5px;
	padding-top: 10px;
	border-top: 1px solid rgba(21, 21, 21, 0.08);
}

.bnb-steady-sales-compact-3p__list div:first-child {
	padding-top: 0;
	border-top: 0;
}

.bnb-steady-sales-compact-3p__list span {
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-steady-sales-compact-3p__list p {
	margin: 0;
	color: var(--bnb-dark);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-steady-sales-compact-3p__list p.is-empty {
	color: var(--bnb-muted);
	font-style: italic;
}

/* 3P reference */

.bnb-steady-sales-reference {
	display: grid;
	gap: 16px;
	margin-bottom: 20px;
	padding: 18px;
	border: 1px solid var(--bnb-pink);
	border-radius: 24px;
	background: var(--bnb-pink-light);
}

.bnb-steady-sales-reference__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.bnb-steady-sales-reference__item {
	display: grid;
	gap: 10px;
	padding: 14px;
	border: 1px solid rgba(21, 21, 21, 0.08);
	border-radius: 18px;
	background: var(--bnb-background);
}

.bnb-steady-sales-reference__item > span {
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-steady-sales-reference__item p {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-steady-sales-reference__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bnb-steady-sales-reference__pills em {
	display: inline-flex;
	padding: 8px 11px;
	border: 1px solid rgba(21, 21, 21, 0.1);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font-size: 13px;
	font-style: normal;
	line-height: 1.2;
}

/* Plan ideas */

.bnb-steady-sales-plan {
	display: grid;
	gap: 16px;
	margin-top: 20px;
}

.bnb-steady-sales-pill-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.bnb-steady-sales-pill-card {
	display: grid;
	gap: 14px;
	align-content: start;
	min-height: 260px;
	padding: 18px;
	border: 1px solid var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background-alt);
}

.bnb-steady-sales-pill-card--pink {
	background: var(--bnb-pink-light);
}

.bnb-steady-sales-pill-card--orange {
	background: var(--bnb-orange-light);
}

.bnb-steady-sales-pill-card--lilac {
	background: var(--bnb-lilac-light);
}

.bnb-steady-sales-pill-card--green {
	background: var(--bnb-green-light);
}

.bnb-steady-sales-pill-card--blue {
	background: rgba(121, 167, 230, 0.14);
}

.bnb-steady-sales-pill-card--hot-pink {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-steady-sales-pill-card h4 {
	margin: 0 0 20px;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.bnb-steady-sales-pill-card p {
	margin: 8px 0 0;
	color: var(--bnb-dark);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-steady-sales-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 44px;
}

.bnb-steady-sales-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 8px 10px 8px 13px;
	border: 1px solid rgba(21, 21, 21, 0.1);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font-size: 14px;
	line-height: 1.2;
}

.bnb-steady-sales-pill button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(21, 21, 21, 0.08);
	color: var(--bnb-dark);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

/* Content banks */

.bnb-steady-sales-content-bank {
	display: grid;
	gap: 16px;
	margin-top: 24px;
	padding: 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 26px;
	background: var(--bnb-background-alt);
}

.bnb-steady-sales-content-bank__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}

.bnb-steady-sales-content-bank__header p {
	max-width: 680px;
	margin: 10px 0;
	color: var(--bnb-muted);
	font-size: 15px;
	line-height: 1.4;
}

.bnb-steady-sales-content-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.bnb-steady-sales-content-card {
	display: grid;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 22px;
	background: var(--bnb-background);
}

.bnb-steady-sales-content-card label {
	display: grid;
	gap: 7px;
}

.bnb-steady-sales-content-card__remove {
	justify-self: start;
	padding: 7px 10px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
	cursor: pointer;
}

/* Focus */

.bnb-steady-sales-field textarea:focus,
.bnb-steady-sales-pill-input:focus,
.bnb-steady-sales-content-card input:focus,
.bnb-steady-sales-content-card select:focus,
.bnb-steady-sales-content-card textarea:focus {
	outline: 0;
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.12);
}

/* Save */

.bnb-steady-sales-save-bar {
	display: flex;
	justify-content: flex-start;
}

/* Responsive */

@media (max-width: 1180px) {
	.bnb-steady-sales-stat-grid,
	.bnb-steady-sales-content-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bnb-steady-sales-pill-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 980px) {
	.bnb-steady-sales-overview-layout,
	.bnb-steady-sales-overview-grid,
	.bnb-steady-sales-reference__grid {
		grid-template-columns: 1fr;
	}

	.bnb-steady-sales-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-radius: 24px;
	}
}

@media (max-width: 720px) {
	.bnb-steady-sales-hero,
	.bnb-steady-sales-section {
		padding: 22px;
		border-radius: 26px;
	}

	.bnb-steady-sales-section__header,
	.bnb-steady-sales-content-bank__header {
		display: grid;
	}

	.bnb-steady-sales-tabs,
	.bnb-steady-sales-stat-grid,
	.bnb-steady-sales-content-grid {
		grid-template-columns: 1fr;
	}

	.bnb-steady-sales-stat-card {
		min-height: 140px;
	}
}


/* Steady Sales — intention groups */

.bnb-steady-sales-intention-grid {
	display: grid;
	gap: 14px;
	margin-top: 18px;
}

.bnb-steady-sales-intention-card {
	display: grid;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background);
}

.bnb-steady-sales-intention-card--attract {
	background: var(--bnb-pink-light);
}

.bnb-steady-sales-intention-card--connect {
	background: var(--bnb-lilac-light);
}

.bnb-steady-sales-intention-card--book {
	background: var(--bnb-green-light);
}

.bnb-steady-sales-intention-card h5 {
	margin: 0;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: clamp(28px, 1.5vw, 36px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.bnb-steady-sales-intention-card .bnb-steady-sales-field {
	gap: 8px;
}

.bnb-steady-sales-intention-card .bnb-steady-sales-field span {
	font-size: 15px;
	line-height: 1.25;
}

.bnb-steady-sales-intention-card .bnb-steady-sales-field textarea {
	min-height: 88px;
	background: var(--bnb-background);
}



/* ==========================================================================
   Peaceful Processes
   ========================================================================== */

.bnb-processes-page,
.bnb-processes-form {
	display: grid;
	gap: 24px;
}

.bnb-processes-hero {
	margin-bottom: 0;
}

/* Tabs */

.bnb-process-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
}

.bnb-process-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.bnb-process-tab:hover,
.bnb-process-tab:focus,
.bnb-process-tab.is-active {
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
}

.bnb-process-tab-panel {
	display: none;
}

.bnb-process-tab-panel.is-active {
	display: block;
}

/* Section */

.bnb-process-section {
	padding: 26px;
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-background);
}

.bnb-process-section__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 22px;
}

.bnb-process-section h3 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}


.bnb-process-section__progress {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	min-width: 140px;
	min-height: 120px;
	padding: 16px;
	border: 1px solid var(--bnb-pink);
	border-radius: 24px;
	background: var(--bnb-pink-light);
	text-align: center;
}

.bnb-process-section__progress strong {
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: 48px;
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.bnb-process-section__progress span {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Cards */

.bnb-process-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.bnb-process-card {
	display: grid;
	gap: 16px;
	align-content: start;
	padding: 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 26px;
	background: var(--bnb-background-alt);
}

.bnb-process-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.bnb-process-card h4 {
	margin: 0;
    color: var(--bnb-dark);
    font-family: var(--font-body);
    font-size: clamp(28px, 1.5vw, 36px);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.bnb-process-card__goal {
	display: grid;
	gap: 6px;
	padding: 14px;
	border: 1px solid var(--bnb-pink);
	border-radius: 20px;
	background: var(--bnb-pink-light);
}

.bnb-process-card__goal span {
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	line-height: 1.2;
	text-transform: uppercase;
}

.bnb-process-card__goal p {
	margin: 0;
	color: var(--bnb-dark);
	font-weight: 500;
	line-height: 1.35;
}

.bnb-process-card__description {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 15px;
	line-height: 1.45;
}

.bnb-process-video-button {
	flex: 0 0 auto;
	padding: 9px 12px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

/* Tasks */

.bnb-process-task-list {
	display: grid;
	gap: 10px;
}

.bnb-process-task {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 12px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	cursor: pointer;
}

.bnb-process-task input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--bnb-hot-pink);
}

.bnb-process-task span {
	display: grid;
	gap: 5px;
}

.bnb-process-task em {
	justify-self: start;
	display: inline-flex;
	padding: 5px 8px;
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 9px;
	font-style: normal;
	line-height: 1;
	text-transform: uppercase;
}

.bnb-process-task strong {
	color: var(--bnb-dark);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
}

.bnb-process-task:has(input:checked) {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-process-task:has(input:checked) strong {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(21, 21, 21, 0.28);
}

/* Notes */

.bnb-process-notes {
	display: grid;
	gap: 8px;
}

.bnb-process-notes span {
	color: var(--bnb-dark);
	font-weight: 500;
	line-height: 1.2;
}

.bnb-process-notes textarea {
	width: 100%;
	min-height: 92px;
	padding: 12px 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font: inherit;
	resize: vertical;
}

.bnb-process-notes textarea:focus {
	outline: 0;
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.12);
}

/* Save */

.bnb-processes-save-bar {
	display: flex;
	justify-content: flex-start;
}

/* Video modal */

.bnb-process-video-open {
	overflow: hidden;
}

.bnb-process-video-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 24px;
}

.bnb-process-video-modal[hidden] {
	display: none;
}

.bnb-process-video-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(21, 21, 21, 0.48);
}

.bnb-process-video-modal__dialog {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 16px;
	width: min(920px, 100%);
	padding: 20px;
	border-radius: 28px;
	background: var(--bnb-background);
	box-shadow: 0 30px 80px rgba(21, 21, 21, 0.24);
}

.bnb-process-video-modal__dialog header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.bnb-process-video-modal__dialog h3 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.bnb-process-video-modal__dialog button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.bnb-process-video-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 20px;
	background: var(--bnb-dark);
}

.bnb-process-video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Responsive */

@media (max-width: 1080px) {
	.bnb-process-card-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 920px) {
	.bnb-process-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-radius: 24px;
	}

	.bnb-process-section__header {
		display: grid;
	}

	.bnb-process-section__progress {
		place-items: start;
		min-width: 0;
		min-height: 0;
		text-align: left;
	}
}

@media (max-width: 720px) {
	.bnb-process-tabs {
		grid-template-columns: 1fr;
	}

	.bnb-process-section {
		padding: 22px;
		border-radius: 26px;
	}

	.bnb-process-card {
		padding: 18px;
		border-radius: 24px;
	}

	.bnb-process-card__header {
		display: grid;
	}
}


/* ==========================================================================
   Confident Creative Expertise
   ========================================================================== */

.bnb-confidence-page,
.bnb-confidence-form {
	display: grid;
	gap: 24px;
}

.bnb-confidence-hero {
	margin-bottom: 0;
}

/* Tabs */

.bnb-confidence-tabs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
}

.bnb-confidence-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.bnb-confidence-tab:hover,
.bnb-confidence-tab:focus,
.bnb-confidence-tab.is-active {
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
}

.bnb-confidence-tab-panel {
	display: none;
}

.bnb-confidence-tab-panel.is-active {
	display: block;
}

/* Sections */

.bnb-confidence-section {
	padding: 26px;
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-background);
}

.bnb-confidence-section__header,
.bnb-confidence-bank-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 22px;
}

.bnb-confidence-section h3 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

/* Stats */

.bnb-confidence-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 22px;
}

.bnb-confidence-stat-card {
	display: grid;
	gap: 12px;
	min-height: 150px;
	padding: 22px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background-alt);
}

.bnb-confidence-stat-card--pink {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
}

.bnb-confidence-stat-card--lilac {
	border-color: var(--bnb-lilac);
	background: var(--bnb-lilac-light);
}

.bnb-confidence-stat-card--green {
	border-color: var(--bnb-green);
	background: var(--bnb-green-light);
}

.bnb-confidence-stat-card--blue {
	border-color: var(--bnb-blue);
	background: rgba(121, 167, 230, 0.14);
}

.bnb-confidence-stat-card span {
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 12px;
	line-height: 1.2;
	text-transform: uppercase;
}

.bnb-confidence-stat-card strong {
	align-self: end;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(34px, 3.6vw, 54px);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.055em;
}

/* Overview */

.bnb-confidence-overview-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 18px;
	align-items: start;
}

.bnb-confidence-overview-main,
.bnb-confidence-3p {
	padding: 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 26px;
	background: var(--bnb-background-alt);
}

.bnb-confidence-overview-main h4,
.bnb-confidence-3p h4,
.bnb-confidence-pill-card h4 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(34px, 4vw, 54px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.bnb-confidence-overview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 18px;
}

.bnb-confidence-field,
.bnb-confidence-notes,
.bnb-confidence-bank-card label {
	display: grid;
	gap: 7px;
}

.bnb-confidence-field span,
.bnb-confidence-notes span,
.bnb-confidence-bank-card label span {
	color: var(--bnb-dark);
	font-weight: 500;
	line-height: 1.2;
}

.bnb-confidence-field em {
	color: var(--bnb-muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
}

.bnb-confidence-field textarea,
.bnb-confidence-notes textarea,
.bnb-confidence-pill-input,
.bnb-confidence-bank-card input,
.bnb-confidence-bank-card select,
.bnb-confidence-bank-card textarea {
	width: 100%;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font: inherit;
}

.bnb-confidence-field textarea,
.bnb-confidence-notes textarea,
.bnb-confidence-bank-card textarea {
	min-height: 96px;
	padding: 12px 14px;
	resize: vertical;
}

.bnb-confidence-pill-input,
.bnb-confidence-bank-card input,
.bnb-confidence-bank-card select {
	min-height: 48px;
	padding: 11px 14px;
}

.bnb-confidence-3p__list {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

.bnb-confidence-3p__list div {
	display: grid;
	gap: 5px;
	padding-top: 10px;
	border-top: 1px solid rgba(21, 21, 21, 0.08);
}

.bnb-confidence-3p__list div:first-child {
	padding-top: 0;
	border-top: 0;
}

.bnb-confidence-3p__list span {
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-confidence-3p__list p {
	margin: 0;
	color: var(--bnb-dark);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-confidence-3p__list p.is-empty {
	color: var(--bnb-muted);
	font-style: italic;
}

/* Pill cards */

.bnb-confidence-pill-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.bnb-confidence-pill-grid--four {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bnb-confidence-pill-card {
	display: grid;
	gap: 14px;
	align-content: start;
	min-height: 260px;
	padding: 18px;
	border: 1px solid var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background-alt);
}

.bnb-confidence-pill-card--pink {
	background: var(--bnb-pink-light);
}

.bnb-confidence-pill-card--orange {
	background: var(--bnb-orange-light);
}

.bnb-confidence-pill-card--lilac {
	background: var(--bnb-lilac-light);
}

.bnb-confidence-pill-card--green {
	background: var(--bnb-green-light);
}

.bnb-confidence-pill-card--blue {
	background: rgba(121, 167, 230, 0.14);
}

.bnb-confidence-pill-card p {
	margin: 8px 0 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-confidence-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 44px;
}

.bnb-confidence-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 8px 10px 8px 13px;
	border: 1px solid rgba(21, 21, 21, 0.1);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font-size: 14px;
	line-height: 1.2;
}

.bnb-confidence-pill button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(21, 21, 21, 0.08);
	color: var(--bnb-dark);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.bnb-confidence-notes {
	margin-top: 16px;
}

/* Confidence bank */

.bnb-confidence-bank-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.bnb-confidence-bank-card {
	display: grid;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 22px;
	background: var(--bnb-background-alt);
}

.bnb-confidence-bank-card__remove {
	justify-self: start;
	padding: 7px 10px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
	cursor: pointer;
}

/* Focus */

.bnb-confidence-field textarea:focus,
.bnb-confidence-notes textarea:focus,
.bnb-confidence-pill-input:focus,
.bnb-confidence-bank-card input:focus,
.bnb-confidence-bank-card select:focus,
.bnb-confidence-bank-card textarea:focus {
	outline: 0;
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.12);
}

/* Save */

.bnb-confidence-save-bar {
	display: flex;
	justify-content: flex-start;
}

/* Responsive */

@media (max-width: 1180px) {
	.bnb-confidence-tabs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border-radius: 24px;
	}

	.bnb-confidence-stat-grid,
	.bnb-confidence-bank-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bnb-confidence-pill-grid,
	.bnb-confidence-pill-grid--four {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 980px) {
	.bnb-confidence-overview-layout,
	.bnb-confidence-overview-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.bnb-confidence-tabs,
	.bnb-confidence-stat-grid,
	.bnb-confidence-bank-grid {
		grid-template-columns: 1fr;
	}

	.bnb-confidence-section {
		padding: 22px;
		border-radius: 26px;
	}

	.bnb-confidence-section__header,
	.bnb-confidence-bank-header {
		display: grid;
	}
}


/* ==========================================================================
   Confident Creative Expertise — revised 3-tab layout
   ========================================================================== */

.bnb-confidence-tabs {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 3P reference */

.bnb-confidence-reference {
	display: grid;
	gap: 16px;
	margin-bottom: 22px;
	padding: 20px;
	border: 1px solid var(--bnb-pink);
	border-radius: 26px;
	background: var(--bnb-pink-light);
}

.bnb-confidence-reference h4,
.bnb-confidence-positioning-group h4,
.bnb-confidence-statement-card h4 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.bnb-confidence-pill-card__header h4 {
    font-family: var(--bnb-body);
    font-weight: 500;
    font-size: clamp(28px, 1.5vw, 36px);
    letter-spacing: -0.02em;
}

/* Fix single-pill vertical centering across strategy reference cards */

.bnb-confidence-reference__item,
.bnb-steady-sales-reference__item,
.bnb-perfect-person-snapshot-row {
	align-content: start;
	align-items: start;
}

.bnb-confidence-reference__pills,
.bnb-steady-sales-reference__pills,
.bnb-perfect-person-snapshot-pills {
	align-content: flex-start;
	align-items: flex-start;
	justify-content: flex-start;
}

.bnb-confidence-reference__pills em,
.bnb-steady-sales-reference__pills em,
.bnb-perfect-person-snapshot-pills span {
	align-self: flex-start;
}

.bnb-confidence-reference__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.bnb-confidence-reference__item {
	display: grid;
	gap: 10px;
	padding: 14px;
	border: 1px solid rgba(21, 21, 21, 0.08);
	border-radius: 18px;
	background: var(--bnb-background);
}

.bnb-confidence-reference__item > span {
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 10px;
	text-transform: uppercase;
}

.bnb-confidence-reference__item p {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 14px;
	line-height: 1.35;
}

.bnb-confidence-reference__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bnb-confidence-reference__pills em {
	display: inline-flex;
	padding: 8px 11px;
	border: 1px solid rgba(21, 21, 21, 0.1);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font-size: 13px;
	font-style: normal;
	line-height: 1.2;
}

/* Positioning groups */

.bnb-confidence-positioning-group,
.bnb-confidence-statement-card {
	display: grid;
	gap: 16px;
	margin-top: 20px;
	padding: 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 26px;
	background: var(--bnb-background-alt);
}

.bnb-confidence-statement-card {
	background: var(--bnb-green-light);
	border-color: var(--bnb-green);
}

.bnb-confidence-statement-card p {
	max-width: 760px;
	margin: 0;
	color: var(--bnb-muted);
	font-size: 15px;
	line-height: 1.4;
}

.bnb-confidence-statement-card .bnb-confidence-field {
	margin-top: 2px;
}

/* Proof grid */

.bnb-confidence-bank-grid {
	align-items: start;
}

/* 4As blocks */

.bnb-confidence-block-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: start;
}

.bnb-confidence-block-card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 24px;
	background: var(--bnb-background-alt);
}

.bnb-confidence-block-card label {
	display: grid;
	gap: 7px;
}

.bnb-confidence-block-card__main {
	grid-column: 1 / -1;
}

.bnb-confidence-block-card label span {
	color: var(--bnb-dark);
	font-weight: 500;
	line-height: 1.2;
}

.bnb-confidence-block-card label em {
	color: var(--bnb-muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
}

.bnb-confidence-block-card input,
.bnb-confidence-block-card textarea {
	width: 100%;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font: inherit;
}

.bnb-confidence-block-card input {
	min-height: 48px;
	padding: 11px 14px;
}

.bnb-confidence-block-card textarea {
	min-height: 96px;
	padding: 12px 14px;
	resize: vertical;
}

.bnb-confidence-block-card input:focus,
.bnb-confidence-block-card textarea:focus {
	outline: 0;
	border-color: var(--bnb-hot-pink);
	box-shadow: 0 0 0 3px rgba(244, 109, 166, 0.12);
}

.bnb-confidence-block-card .bnb-confidence-bank-card__remove {
	grid-column: 1 / -1;
}

/* Old layout safety */

.bnb-confidence-stat-grid,
.bnb-confidence-overview-layout {
	display: none;
}

/* Responsive */

@media (max-width: 1180px) {
	.bnb-confidence-tabs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.bnb-confidence-reference__grid,
	.bnb-confidence-block-grid,
	.bnb-confidence-block-card {
		grid-template-columns: 1fr;
	}

	.bnb-confidence-block-card__main,
	.bnb-confidence-block-card .bnb-confidence-bank-card__remove {
		grid-column: auto;
	}
}

@media (max-width: 720px) {
	.bnb-confidence-tabs {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   BNB Assist panel
   ========================================================================== */

.bnb-assist {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 80;
}

.bnb-assist__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 22px;
	border: 1px solid var(--bnb-lilac);
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
	font: inherit;
	font-weight: 600;
	box-shadow: 0 16px 42px rgba(21, 21, 21, 0.12);
	cursor: pointer;
}

.bnb-assist__panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	width: min(520px, calc(100vw - 36px));
	max-height: min(720px, calc(100vh - 130px));
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	border: 1px solid var(--bnb-lilac);
	border-radius: 28px;
	background: var(--bnb-background);
	box-shadow: 0 24px 70px rgba(21, 21, 21, 0.18);
	overflow: hidden;
}

.bnb-assist__header {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 22px 16px;
	border-bottom: 1px solid var(--bnb-border);
	background: var(--bnb-lilac-light);
}

.bnb-assist__header h3 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: 38px;
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.055em;
}

.bnb-assist__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background);
	color: var(--bnb-dark);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.bnb-assist__tabs {
	display: flex;
	gap: 6px;
	padding: 10px;
	border-bottom: 1px solid var(--bnb-border);
	background: var(--bnb-background);
	overflow-x: auto;
}

.bnb-assist__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--bnb-muted);
	font: inherit;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
}

.bnb-assist__tab.is-active {
	border-color: var(--bnb-pink);
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
}

.bnb-assist__body {
	overflow: auto;
	padding: 18px;
}

.bnb-assist-tab-content {
	display: grid;
	gap: 14px;
}

.bnb-assist-tab-content h4 {
	margin: 0;
	color: var(--bnb-dark);
	font-family: var(--font-heading);
	font-size: 34px;
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.055em;
}

.bnb-assist-tab-content p {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-assist-note-list,
.bnb-assist-link-list,
.bnb-assist-check-list,
.bnb-assist-action-list {
	display: grid;
	gap: 10px;
}

.bnb-assist-note,
.bnb-assist-empty,
.bnb-assist-action-item,
.bnb-assist-check-item,
.bnb-assist-support-placeholder {
	display: grid;
	gap: 8px;
	padding: 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background-alt);
}

.bnb-assist-note h4 {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

.bnb-assist-note a,
.bnb-assist-action-item a,
.bnb-assist-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	gap: 8px;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-background);
	font-weight: 600;
	text-decoration: none;
}

.bnb-assist-link-list a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	text-decoration: none;
}

.bnb-assist-link-list span {
	font-weight: 700;
	line-height: 1.25;
}

.bnb-assist-link-list em {
	color: var(--bnb-muted);
	font-size: 13px;
	font-style: normal;
}

.bnb-assist-check-item {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
}

.bnb-assist-check-item > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--bnb-green);
	color: var(--bnb-background);
	font-size: 13px;
}

.bnb-assist-embed {
	overflow: hidden;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-background-alt);
}

.bnb-assist-embed iframe {
	display: block;
	width: 100%;
	min-height: 520px;
	border: 0;
}

.bnb-assist__panel[hidden],
.bnb-assist__tab-panel[hidden] {
	display: none !important;
}

@media (max-width: 720px) {
	.bnb-assist {
		right: 16px;
		bottom: 16px;
		left: 16px;
	}

	.bnb-assist__toggle {
		width: 100%;
	}

	.bnb-assist__panel {
		right: 0;
		left: 0;
		width: 100%;
		max-height: calc(100vh - 110px);
	}

	.bnb-assist__header h3 {
		font-size: 32px;
	}
}


/*** 10. Support ****/

.bnb-support-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 28px;
}

.bnb-support-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
	padding: 8px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-background-alt);
	width: fit-content;
	max-width: 100%;
}

.bnb-support-tabs__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 999px;
	color: var(--bnb-dark);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: background 0.2s ease, transform 0.2s ease;
}

.bnb-support-tabs__item:hover,
.bnb-support-tabs__item:focus {
	background: var(--bnb-pink-light);
	color: var(--bnb-dark);
}

.bnb-support-tabs__item.is-active {
	background: var(--bnb-dark);
	color: var(--bnb-cream);
}

.bnb-support-feed {
	display: grid;
	gap: 18px;
	max-width: 860px;
}

.bnb-support-card {
	display: grid;
	gap: 12px;
	padding: clamp(22px, 3vw, 30px);
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-cream);
	box-shadow: 0 12px 38px rgba(21, 21, 21, 0.04);
}

.bnb-support-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bnb-support-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--bnb-background-alt);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
}

.bnb-support-badge--type {
	background: var(--bnb-lilac-light);
}

.bnb-support-badge--category {
	background: var(--bnb-green-light);
}

.bnb-support-badge--answered {
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
}

.bnb-support-badge--visibility {
	background: var(--bnb-orange-light);
}

.bnb-support-card h2 {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
	line-height: 1.05;
}

.bnb-support-card h2 a {
	color: inherit;
	text-decoration: none;
}

.bnb-support-card h2 a:hover,
.bnb-support-card h2 a:focus {
	color: var(--bnb-hot-pink);
}

.bnb-support-card__excerpt {
	color: var(--bnb-muted);
}

.bnb-support-card__excerpt p {
	margin: 0;
}

.bnb-support-card__video-note {
	margin: 0;
	padding: 12px 14px;
	border-radius: 18px;
	background: var(--bnb-pink-light);
	color: var(--bnb-dark);
	font-size: 0.92rem;
}

.bnb-support-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding-top: 12px;
	border-top: 1px solid var(--bnb-border);
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-support-card__author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: 1;
}

.bnb-support-card__author > span:last-child {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.bnb-support-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
	overflow: hidden;
	flex: 0 0 auto;
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bnb-support-card__footer > span:not(.bnb-support-card__author) {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

@media (max-width: 760px) {
	.bnb-support-tabs {
		width: 100%;
		border-radius: 24px;
	}

	.bnb-support-tabs__item {
		flex: 1 1 auto;
	}
}


.bnb-support-single {
	max-width: 900px;
}

.bnb-support-single__back {
	margin-bottom: 22px;
}

.bnb-support-single__back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bnb-dark);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-support-single__article {
	display: grid;
	gap: 24px;
	padding: clamp(26px, 4vw, 42px);
	border: 1px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-cream);
	box-shadow: 0 16px 44px rgba(21, 21, 21, 0.04);
}

.bnb-support-single__header {
	display: grid;
	gap: 16px;
}

.bnb-support-single__header h1 {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.6rem);
	line-height: 0.95;
}

.bnb-support-single__byline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-support-single__content {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--bnb-dark);
}

.bnb-support-single__content > *:first-child {
	margin-top: 0;
}

.bnb-support-single__content > *:last-child {
	margin-bottom: 0;
}

.bnb-support-single__video {
	padding-top: 10px;
}

.bnb-support-comments {
	display: grid;
	gap: 20px;
	margin-top: 28px;
	padding: clamp(24px, 4vw, 36px);
	border: 1px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-background-alt);
}

.bnb-support-comments__header {
	display: grid;
	gap: 4px;
}

.bnb-support-comments__header h2 {
	margin: 0;
}

.bnb-support-comments__list {
	display: grid;
	gap: 14px;
}

.bnb-support-comments__empty {
	padding: 18px;
	border-radius: 20px;
	background: var(--bnb-cream);
	color: var(--bnb-muted);
}

.bnb-support-comments__empty p {
	margin: 0;
}

.bnb-support-comment {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 12px;
	padding: 18px;
	border-radius: 24px;
	background: var(--bnb-cream);
	border: 1px solid var(--bnb-border);
}

.bnb-support-comment.is-cat-reply {
	background: var(--bnb-pink-light);
	border-color: rgba(244, 109, 166, 0.35);
}

.bnb-support-comment__avatar img {
	width: 42px;
	height: 42px;
	border-radius: 999px;
	display: block;
}

.bnb-support-comment__body {
	display: grid;
	gap: 8px;
}

.bnb-support-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.bnb-support-comment__meta strong {
	font-size: 0.95rem;
}

.bnb-support-comment__meta span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	font-family: var(--font-accent);
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-support-comment__meta small {
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-support-comment__content {
	color: var(--bnb-dark);
	line-height: 1.55;
}

.bnb-support-comment__content > *:first-child {
	margin-top: 0;
}

.bnb-support-comment__content > *:last-child {
	margin-bottom: 0;
}

.bnb-support-reply-form {
	display: grid;
	gap: 12px;
	margin-top: 8px;
	padding: 18px;
	border-radius: 24px;
	background: var(--bnb-cream);
	border: 1px solid var(--bnb-border);
}

.bnb-support-reply-form h3 {
	margin: 0;
	font-size: 1.2rem;
}

.bnb-support-reply-form textarea {
	width: 100%;
	min-height: 130px;
	padding: 14px 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: #fff;
	font: inherit;
	resize: vertical;
}

.bnb-support-reply-form textarea:focus {
	outline: 2px solid var(--bnb-hot-pink);
	outline-offset: 2px;
}

@media (max-width: 760px) {
	.bnb-support-comment {
		grid-template-columns: 1fr;
	}

	.bnb-support-comment__avatar {
		display: none;
	}
}

.bnb-support-new {
	max-width: 900px;
}

.bnb-support-form {
	display: grid;
	gap: 24px;
	padding: clamp(24px, 4vw, 38px);
	border: 1px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-cream);
	box-shadow: 0 16px 44px rgba(21, 21, 21, 0.04);
}

.bnb-support-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.bnb-support-form__field {
	display: grid;
	gap: 8px;
	margin: 0;
}

.bnb-support-form__field--full {
	grid-column: 1 / -1;
}

.bnb-support-form label {
	font-family: var(--font-accent);
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bnb-dark);
}

.bnb-support-form input[type="text"],
.bnb-support-form input[type="url"],
.bnb-support-form select,
.bnb-support-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: #fff;
	color: var(--bnb-dark);
	font: inherit;
}

.bnb-support-form textarea {
	min-height: 180px;
	resize: vertical;
}

.bnb-support-form input:focus,
.bnb-support-form select:focus,
.bnb-support-form textarea:focus {
	outline: 2px solid var(--bnb-hot-pink);
	outline-offset: 2px;
}

.bnb-support-choice-list {
	display: grid;
	gap: 12px;
}

.bnb-support-choice {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	padding: 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 22px;
	background: var(--bnb-background-alt);
	cursor: pointer;
}

.bnb-support-choice input {
	margin-top: 3px;
}

.bnb-support-choice span {
	display: grid;
	gap: 4px;
}

.bnb-support-choice strong {
	font-family: var(--font-body);
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
}

.bnb-support-choice small {
	color: var(--bnb-muted);
	line-height: 1.4;
}

.bnb-support-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding-top: 4px;
}

.bnb-support-form__footer p {
	margin: 0;
	max-width: 480px;
	color: var(--bnb-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

.bnb-notice {
	margin: 0 0 22px;
	padding: 16px 18px;
	border-radius: 20px;
	border: 1px solid var(--bnb-border);
	background: var(--bnb-background-alt);
}

.bnb-notice p {
	margin: 0;
}

.bnb-notice--success {
	background: var(--bnb-green-light);
}

@media (max-width: 760px) {
	.bnb-support-form__grid {
		grid-template-columns: 1fr;
	}
}


.bnb-support-card__author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bnb-support-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
	overflow: hidden;
	flex: 0 0 auto;
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bnb-support-avatar img {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.bnb-support-avatar__initial {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.bnb-support-avatar--fallback {
	width: 32px;
	height: 32px;
}

.bnb-support-badge--needs-reply {
	background: var(--bnb-orange-light);
	color: var(--bnb-orange);
}


.bnb-support-card[data-bnb-support-card] {
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bnb-support-card[data-bnb-support-card]:hover,
.bnb-support-card[data-bnb-support-card]:focus {
	transform: translateY(-2px);
	border-color: rgba(244, 109, 166, 0.35);
	box-shadow: 0 18px 48px rgba(21, 21, 21, 0.08);
	outline: none;
}

.bnb-assist-support {
	display: grid;
	gap: 16px;
}

.bnb-assist-support-form {
	display: grid;
	gap: 14px;
}

.bnb-assist-support-form__field {
	display: grid;
	gap: 7px;
	margin: 0;
}

.bnb-assist-support-form label {
	font-family: var(--font-accent);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bnb-dark);
}

.bnb-assist-support-form input[type="text"],
.bnb-assist-support-form textarea {
	width: 100%;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: #fff;
	color: var(--bnb-dark);
	font: inherit;
	font-size: 0.92rem;
	padding: 12px 13px;
}

.bnb-assist-support-form textarea {
	min-height: 120px;
	resize: vertical;
}

.bnb-assist-support-form input:focus,
.bnb-assist-support-form textarea:focus {
	outline: 2px solid var(--bnb-hot-pink);
	outline-offset: 2px;
}

.bnb-assist-support-form__choices {
	display: grid;
	gap: 8px;
}

.bnb-assist-support-form__choices label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: var(--bnb-background-alt);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 0.9rem;
	text-transform: none;
	letter-spacing: 0;
}

.bnb-assist-support-form__choices input {
	margin: 0;
}

.bnb-assist-support__note {
	padding: 12px 14px;
	border-radius: 16px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-muted);
	font-size: 0.86rem;
	line-height: 1.4;
}

.bnb-assist-support__note p {
	margin: 0;
}

.bnb-assist__notice {
	position: fixed;
	right: 24px;
	bottom: 104px;
	z-index: 90;
	max-width: 320px;
	padding: 13px 16px;
	border-radius: 999px;
	background: var(--bnb-green-light);
	color: var(--bnb-dark);
	box-shadow: 0 12px 36px rgba(21, 21, 21, 0.12);
	font-size: 0.88rem;
}

.bnb-assist-support__context-debug {
	margin: 0;
	padding: 10px 12px;
	border-radius: 14px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-muted);
	font-size: 0.84rem;
	line-height: 1.4;
}


.bnb-assist-support-form .bnb-assist-link-button,
button.bnb-assist-link-button {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
}

.bnb-assist-support-form .bnb-assist-link-button:hover,
.bnb-assist-support-form .bnb-assist-link-button:focus,
button.bnb-assist-link-button:hover,
button.bnb-assist-link-button:focus {
	color: var(--bnb-cream);
	transform: translateY(-1px);
}

.bnb-assist-support-form .bnb-assist-link-button:focus-visible,
button.bnb-assist-link-button:focus-visible {
	outline: 2px solid var(--bnb-hot-pink);
	outline-offset: 3px;
}

.bnb-call-calendar {
	max-width: 1040px;
}

.bnb-call-calendar__intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
	padding: clamp(22px, 3vw, 30px);
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-cream);
	box-shadow: 0 12px 38px rgba(21, 21, 21, 0.04);
}

.bnb-call-calendar__intro h2,
.bnb-call-calendar__note h2 {
	margin: 0 0 8px;
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
}

.bnb-call-calendar__intro p,
.bnb-call-calendar__note p {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.5;
}

.bnb-call-calendar__embed {
	position: relative;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-cream);
	box-shadow: 0 16px 44px rgba(21, 21, 21, 0.04);
}

.bnb-call-calendar__embed iframe {
	display: block;
	width: 100%;
	min-height: 680px;
	border: 0;
}

.bnb-call-calendar__note {
	margin-top: 24px;
	padding: clamp(20px, 3vw, 28px);
	border-radius: 28px;
	background: var(--bnb-lilac-light);
}

@media (max-width: 760px) {
	.bnb-call-calendar__intro {
		align-items: flex-start;
		flex-direction: column;
	}

	.bnb-call-calendar__embed iframe {
		min-height: 560px;
	}
}

.bnb-support-badge--review-status {
	background: var(--bnb-orange-light);
}

.bnb-video-review-details,
.bnb-video-review-ready,
.bnb-video-review-pending,
.bnb-video-review-complete-form {
	display: grid;
	gap: 16px;
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-background-alt);
}

.bnb-video-review-details h2,
.bnb-video-review-ready h2,
.bnb-video-review-complete-form h2 {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}

.bnb-video-review-details dl {
	display: grid;
	gap: 10px;
	margin: 0;
}

.bnb-video-review-details dl > div {
	display: grid;
	gap: 4px;
	padding: 12px 14px;
	border-radius: 18px;
	background: var(--bnb-cream);
}

.bnb-video-review-details dt {
	font-family: var(--font-accent);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bnb-muted);
}

.bnb-video-review-details dd {
	margin: 0;
	color: var(--bnb-dark);
}

.bnb-video-review-pending {
	background: var(--bnb-lilac-light);
	color: var(--bnb-muted);
}

.bnb-video-review-pending p,
.bnb-video-review-ready__date,
.bnb-video-review-complete-form__note p {
	margin: 0;
}

.bnb-video-review-ready {
	background: var(--bnb-green-light);
}

.bnb-video-review-ready__note {
	line-height: 1.55;
}

.bnb-video-review-ready__note > *:first-child {
	margin-top: 0;
}

.bnb-video-review-ready__note > *:last-child {
	margin-bottom: 0;
}

.bnb-video-review-complete-form {
	margin-top: 28px;
	background: var(--bnb-cream);
	box-shadow: 0 16px 44px rgba(21, 21, 21, 0.04);
}

.bnb-video-review-complete-form__header {
	display: grid;
	gap: 6px;
}

.bnb-video-review-complete-form__header p:last-child {
	margin: 0;
	color: var(--bnb-muted);
}

.bnb-video-review-complete-form .bnb-support-form__field {
	display: grid;
	gap: 8px;
	margin: 0;
}

.bnb-video-review-complete-form input[type="url"],
.bnb-video-review-complete-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: #fff;
	color: var(--bnb-dark);
	font: inherit;
}

.bnb-video-review-complete-form textarea {
	min-height: 120px;
	resize: vertical;
}

.bnb-video-review-complete-form__note {
	padding: 14px 16px;
	border-radius: 18px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-muted);
}


.bnb-replays {
	max-width: 980px;
}

.bnb-replays__actions {
	margin: 0 0 24px;
}

.bnb-replay-list {
	display: grid;
	gap: 14px;
	max-width: 920px;
}

.bnb-replay-card {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--bnb-border);
	border-radius: 26px;
	background: var(--bnb-cream);
	box-shadow: 0 12px 38px rgba(21, 21, 21, 0.04);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bnb-replay-card:hover,
.bnb-replay-card:focus {
	transform: translateY(-2px);
	border-color: rgba(244, 109, 166, 0.35);
	box-shadow: 0 18px 48px rgba(21, 21, 21, 0.08);
	outline: none;
}

.bnb-replay-card.is-watched {
	background: var(--bnb-pink-light);
	border-color: rgba(244, 109, 166, 0.28);
}

.bnb-replay-card__status span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 0.78rem;
}

.bnb-replay-card.is-watched .bnb-replay-card__status span {
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
}

.bnb-replay-card__content {
	display: grid;
	gap: 8px;
}

.bnb-replay-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-replay-card h2 {
	margin: 0;
	font-size: clamp(1.2rem, 2.3vw, 1.65rem);
	line-height: 1.1;
}

.bnb-replay-card h2 a {
	color: inherit;
	text-decoration: none;
}

.bnb-replay-card__summary {
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-replay-card__summary p {
	margin: 0;
}

.bnb-replay-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bnb-replay-topics span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-replay-card__arrow {
	font-size: 1.4rem;
	color: var(--bnb-muted);
}

.bnb-replay-single {
	max-width: 1220px;
}

.bnb-replay-single__back {
	margin-bottom: 22px;
}

.bnb-replay-single__back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bnb-dark);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-replay-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	gap: clamp(24px, 4vw, 42px);
	align-items: start;
}

.bnb-replay-single__main {
	display: grid;
	gap: 24px;
}

.bnb-replay-single__header {
	display: grid;
	gap: 12px;
}

.bnb-replay-single__date {
	margin: 0;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-replay-single__header h1 {
	margin: 0;
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 0.92;
}

.bnb-replay-single__summary {
	max-width: 760px;
	font-size: 1.1rem;
	line-height: 1.5;
}

.bnb-replay-single__summary p {
	margin: 0;
}

.bnb-replay-video {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 360px;
	overflow: hidden;
	border: 1px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-cream);
	box-shadow: 0 16px 44px rgba(21, 21, 21, 0.04);
}

.bnb-replay-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 420px;
	border: 0;
}

.bnb-replay-notes {
	display: grid;
	gap: 12px;
	padding: clamp(22px, 3vw, 30px);
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-cream);
	box-shadow: 0 12px 38px rgba(21, 21, 21, 0.04);
	line-height: 1.6;
}

.bnb-replay-notes > *:last-child {
	margin-bottom: 0;
}

.bnb-replay-single__sidebar {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 18px;
}

.bnb-replay-side-card {
	display: grid;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-cream);
	box-shadow: 0 12px 38px rgba(21, 21, 21, 0.04);
}

.bnb-replay-side-card--lilac {
	background: var(--bnb-lilac-light);
}

.bnb-replay-side-card h2 {
	margin: 0;
	font-size: 1.45rem;
	line-height: 1.05;
}

.bnb-replay-side-card p {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-replay-resources {
	line-height: 1.5;
}

.bnb-replay-resources > *:first-child {
	margin-top: 0;
}

.bnb-replay-resources > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 960px) {
	.bnb-replay-single__layout {
		grid-template-columns: 1fr;
	}

	.bnb-replay-single__sidebar {
		position: static;
	}
}

@media (max-width: 700px) {
	.bnb-replay-card {
		grid-template-columns: 1fr;
	}

	.bnb-replay-card__arrow {
		display: none;
	}

	.bnb-replay-video {
		min-height: 240px;
	}

	.bnb-replay-video iframe {
		min-height: 260px;
	}
}

.bnb-replay-video > div {
	width: 100%;
}

.bnb-replay-video iframe {
	max-width: 100%;
}

.bnb-replay-list {
	display: grid;
	gap: 18px;
	max-width: 980px;
}

.bnb-replay-month-heading {
	margin: 28px 0 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bnb-border);
}

.bnb-replay-month-heading:first-child {
	margin-top: 0;
}

.bnb-replay-month-heading h2 {
	margin: 0;
	font-size: clamp(1.45rem, 3vw, 2.1rem);
	line-height: 1;
}

.bnb-replay-card {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 22px;
	align-items: stretch;
	padding: 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-cream);
	box-shadow: 0 12px 38px rgba(21, 21, 21, 0.04);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bnb-replay-card:hover,
.bnb-replay-card:focus {
	transform: translateY(-2px);
	border-color: rgba(244, 109, 166, 0.35);
	box-shadow: 0 18px 48px rgba(21, 21, 21, 0.08);
	outline: none;
}

.bnb-replay-card.is-watched {
	background: var(--bnb-pink-light);
	border-color: rgba(244, 109, 166, 0.24);
}

.bnb-replay-card__media {
	position: relative;
	overflow: hidden;
	min-height: 170px;
	border-radius: 22px;
	background: var(--bnb-lilac-light);
}

.bnb-replay-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 170px;
	object-fit: cover;
}

.bnb-replay-card__media-placeholder {
	display: grid;
	place-items: center;
	min-height: 170px;
	padding: 24px;
	background:
		radial-gradient(circle at top left, rgba(244, 109, 166, 0.22), transparent 34%),
		radial-gradient(circle at bottom right, rgba(175, 199, 76, 0.26), transparent 34%),
		var(--bnb-lilac-light);
}

.bnb-replay-card__media-placeholder span {
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bnb-muted);
}

.bnb-replay-card__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.bnb-replay-card__play span {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	padding-left: 3px;
	border-radius: 999px;
	background: rgba(255, 252, 244, 0.92);
	color: var(--bnb-dark);
	box-shadow: 0 12px 28px rgba(21, 21, 21, 0.16);
	font-size: 1.1rem;
}

.bnb-replay-card__watched-pill {
	position: absolute;
	left: 12px;
	top: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 10px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	font-family: var(--font-accent);
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-replay-card__content {
	align-self: center;
	display: grid;
	gap: 10px;
	padding: 8px 8px 8px 0;
}

.bnb-replay-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-replay-card h2 {
	margin: 0;
	font-size: clamp(1.35rem, 2.6vw, 2rem);
	line-height: 1.02;
}

.bnb-replay-card h2 a {
	color: inherit;
	text-decoration: none;
}

.bnb-replay-card__summary {
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-replay-card__summary p {
	margin: 0;
}

.bnb-replays-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
}

.bnb-replays-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 8px 12px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: var(--bnb-cream);
	color: var(--bnb-dark);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bnb-replays-pagination .page-numbers.current {
	background: var(--bnb-dark);
	color: var(--bnb-cream);
	border-color: var(--bnb-dark);
}

.bnb-replays-pagination a.page-numbers:hover,
.bnb-replays-pagination a.page-numbers:focus {
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	border-color: var(--bnb-hot-pink);
}

@media (max-width: 760px) {
	.bnb-replay-card {
		grid-template-columns: 1fr;
	}

	.bnb-replay-card__content {
		padding: 0;
	}

	.bnb-replay-card__media,
	.bnb-replay-card__media img,
	.bnb-replay-card__media-placeholder {
		min-height: 210px;
	}
}

.bnb-replay-card {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 22px;
	align-items: center;
	padding: 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-cream);
	box-shadow: 0 12px 38px rgba(21, 21, 21, 0.04);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bnb-replay-card__media {
	position: relative;
	overflow: hidden;
	width: 260px;
	aspect-ratio: 16 / 10;
	border-radius: 22px;
	background: var(--bnb-lilac-light);
}

.bnb-replay-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bnb-replay-card__media-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 24px;
	background:
		radial-gradient(circle at top left, rgba(244, 109, 166, 0.22), transparent 34%),
		radial-gradient(circle at bottom right, rgba(175, 199, 76, 0.26), transparent 34%),
		var(--bnb-lilac-light);
}

@media (max-width: 760px) {
	.bnb-replay-card {
		grid-template-columns: 1fr;
	}

	.bnb-replay-card__media {
		width: 100%;
		aspect-ratio: 16 / 10;
	}

	.bnb-replay-card__content {
		padding: 0;
	}
}


.bnb-strategy-overview {
	max-width: 100%;
}

.bnb-strategy-overview__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: clamp(24px, 5vw, 52px);
	align-items: end;
	margin-bottom: clamp(36px, 6vw, 64px);
}

.bnb-strategy-overview__hero h1 {
	margin: 0;
	font-size: clamp(3.4rem, 8vw, 7rem);
	line-height: 0.88;
}

.bnb-strategy-overview__hero p {
	max-width: 740px;
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--bnb-muted);
}

.bnb-strategy-overview__section-heading {
	display: grid;
	gap: 8px;
	margin-bottom: 22px;
}

.bnb-strategy-overview__section-heading h2 {
	max-width: 720px;
	margin: 0;
	font-size: clamp(2rem, 4vw, 3.8rem);
	line-height: 0.95;
}

.bnb-strategy-progress-card {
	display: grid;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-lilac-light);
	box-shadow: 0 14px 44px rgba(21, 21, 21, 0.04);
}

.bnb-strategy-progress-card h2 {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	line-height: 1;
}

.bnb-strategy-progress-card p {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-strategy-progress-card__bar {
	overflow: hidden;
	height: 9px;
	border-radius: 999px;
	background: rgba(255, 252, 244, 0.8);
}

.bnb-strategy-progress-card__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--bnb-hot-pink);
}

.bnb-strategy-grid {
	display: grid;
	gap: 14px;
}

.bnb-strategy-card {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 20px;
	border: 1px solid var(--bnb-border);
	border-radius: 28px;
	background: var(--bnb-cream);
	box-shadow: 0 12px 38px rgba(21, 21, 21, 0.04);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bnb-strategy-card:hover,
.bnb-strategy-card:focus {
	transform: translateY(-2px);
	border-color: rgba(244, 109, 166, 0.35);
	box-shadow: 0 18px 48px rgba(21, 21, 21, 0.08);
	outline: none;
}

.bnb-strategy-card--complete {
	background: var(--bnb-pink-light);
	border-color: rgba(244, 109, 166, 0.24);
}

.bnb-strategy-card__number {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 0.72rem;
}

.bnb-strategy-card--complete .bnb-strategy-card__number {
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
}

.bnb-strategy-card--in_progress .bnb-strategy-card__number {
	background: var(--bnb-green);
	color: var(--bnb-dark);
}

.bnb-strategy-card__content {
	display: grid;
	gap: 8px;
}

.bnb-strategy-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-strategy-card h3 {
	margin: 0;
	font-size: clamp(1.35rem, 2.5vw, 2rem);
	line-height: 1.02;
}

.bnb-strategy-card h3 a {
	color: inherit;
	text-decoration: none;
}

.bnb-strategy-card p {
	max-width: 760px;
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-strategy-status-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-strategy-status-pill--complete {
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
}

.bnb-strategy-status-pill--in_progress {
	background: var(--bnb-green-light);
	color: var(--bnb-dark);
}

.bnb-strategy-card__arrow {
	color: var(--bnb-muted);
	font-size: 1.35rem;
}

@media (max-width: 900px) {
	.bnb-strategy-overview__hero {
		grid-template-columns: 1fr;
	}

	.bnb-strategy-overview__summary {
		max-width: 420px;
	}
}

@media (max-width: 680px) {
	.bnb-strategy-card {
		grid-template-columns: 1fr;
	}

	.bnb-strategy-card__arrow {
		display: none;
	}
}


.bnb-strategy-overview {
	max-width: 100%;
}

.bnb-strategy-overview__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: clamp(24px, 5vw, 52px);
	align-items: end;
	margin-bottom: clamp(36px, 6vw, 64px);
}

.bnb-strategy-overview__hero h1 {
	margin: 0;
	font-size: clamp(3.4rem, 8vw, 7rem);
	line-height: 0.88;
}

.bnb-strategy-overview__hero p {
	max-width: 740px;
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--bnb-muted);
}

.bnb-strategy-overview__section-heading {
	display: grid;
	gap: 8px;
	margin-bottom: 24px;
}

.bnb-strategy-overview__section-heading h2 {
	max-width: 760px;
	margin: 0;
	font-size: clamp(2rem, 4vw, 3.8rem);
	line-height: 0.95;
}

.bnb-strategy-progress-card {
	display: grid;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-lilac-light);
	box-shadow: 0 14px 44px rgba(21, 21, 21, 0.04);
}

.bnb-strategy-progress-card h2 {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	line-height: 1;
}

.bnb-strategy-progress-card p {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-strategy-progress-card__bar {
	overflow: hidden;
	height: 9px;
	border-radius: 999px;
	background: rgba(255, 252, 244, 0.8);
}

.bnb-strategy-progress-card__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--bnb-hot-pink);
}

.bnb-strategy-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.bnb-strategy-card {
	position: relative;
	display: grid;
	grid-template-rows: 150px 1fr;
	overflow: hidden;
	min-height: 420px;
	border: 1px solid var(--bnb-border);
	border-radius: 32px;
	background: var(--bnb-cream);
	box-shadow: 0 14px 42px rgba(21, 21, 21, 0.045);
	cursor: pointer;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.bnb-strategy-card:hover,
.bnb-strategy-card:focus {
	transform: translateY(-3px);
	border-color: rgba(244, 109, 166, 0.38);
	box-shadow: 0 20px 54px rgba(21, 21, 21, 0.085);
	outline: none;
}

.bnb-strategy-card--complete {
	background: var(--bnb-pink-light);
	border-color: rgba(244, 109, 166, 0.28);
}

.bnb-strategy-card--in_progress {
	border-color: rgba(175, 199, 76, 0.42);
}

.bnb-strategy-card__visual {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 20px;
	background:
		radial-gradient(circle at 16% 22%, rgba(255, 252, 244, 0.72), transparent 24%),
		radial-gradient(circle at 82% 82%, rgba(244, 109, 166, 0.22), transparent 30%),
		var(--bnb-lilac-light);
}

.bnb-strategy-card--complete .bnb-strategy-card__visual {
	background:
		radial-gradient(circle at 16% 22%, rgba(255, 252, 244, 0.74), transparent 24%),
		radial-gradient(circle at 82% 82%, rgba(244, 109, 166, 0.28), transparent 30%),
		var(--bnb-pink);
}

.bnb-strategy-card--in_progress .bnb-strategy-card__visual {
	background:
		radial-gradient(circle at 16% 22%, rgba(255, 252, 244, 0.74), transparent 24%),
		radial-gradient(circle at 82% 82%, rgba(175, 199, 76, 0.32), transparent 30%),
		var(--bnb-green-light);
}

.bnb-strategy-card__number {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--bnb-cream);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 0.78rem;
	box-shadow: 0 12px 28px rgba(21, 21, 21, 0.08);
}

.bnb-strategy-card--complete .bnb-strategy-card__number {
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
}

.bnb-strategy-card__shine {
	position: absolute;
	right: -28px;
	bottom: -34px;
	width: 130px;
	height: 130px;
	border-radius: 999px;
	background: rgba(255, 252, 244, 0.54);
}

.bnb-strategy-card__shine::before {
	content: "";
	position: absolute;
	inset: 26px;
	border-radius: inherit;
	border: 1px solid rgba(21, 21, 21, 0.08);
}

.bnb-strategy-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
}

.bnb-strategy-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--bnb-muted);
	font-family: var(--font-accent);
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-strategy-status-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 9px;
	border-radius: 999px;
	background: var(--bnb-lilac-light);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-strategy-status-pill--complete {
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
}

.bnb-strategy-status-pill--in_progress {
	background: var(--bnb-green);
	color: var(--bnb-dark);
}

.bnb-strategy-card h3 {
	margin: 0;
	font-size: clamp(1.45rem, 2.4vw, 2rem);
	line-height: 1;
}

.bnb-strategy-card h3 a {
	color: inherit;
	text-decoration: none;
}

.bnb-strategy-card p {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-strategy-card__footer {
	margin-top: auto;
	padding-top: 6px;
}

.bnb-strategy-card__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bnb-dark);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-strategy-card__button span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	transition: transform 0.2s ease;
}

.bnb-strategy-card:hover .bnb-strategy-card__button span,
.bnb-strategy-card:focus .bnb-strategy-card__button span {
	transform: translateX(3px);
}

@media (max-width: 1080px) {
	.bnb-strategy-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.bnb-strategy-overview__hero {
		grid-template-columns: 1fr;
	}

	.bnb-strategy-overview__summary {
		max-width: 420px;
	}
}

@media (max-width: 680px) {
	.bnb-strategy-grid {
		grid-template-columns: 1fr;
	}

	.bnb-strategy-card {
		min-height: 0;
		grid-template-rows: 130px 1fr;
	}
}


/* Strategy overview grid reset */
.bnb-strategy-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important;
	align-items: stretch !important;
}

/* Strategy cards */
.bnb-strategy-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 360px !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 1px solid var(--bnb-border) !important;
	border-radius: 32px !important;
	background: var(--bnb-cream) !important;
	box-shadow: 0 14px 42px rgba(21, 21, 21, 0.045) !important;
	cursor: pointer !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.bnb-strategy-card:hover,
.bnb-strategy-card:focus {
	transform: translateY(-3px) !important;
	border-color: rgba(244, 109, 166, 0.38) !important;
	box-shadow: 0 20px 54px rgba(21, 21, 21, 0.085) !important;
	outline: none !important;
}

.bnb-strategy-card--complete {
	background: var(--bnb-pink-light) !important;
	border-color: rgba(244, 109, 166, 0.35) !important;
}

.bnb-strategy-card--in_progress {
	border-color: rgba(175, 199, 76, 0.42) !important;
}

/* Top visual strip */
.bnb-strategy-card__visual {
	position: relative !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	height: 118px !important;
	min-height: 118px !important;
	padding: 18px !important;
	background:
		radial-gradient(circle at 18% 30%, rgba(255, 252, 244, 0.75), transparent 28%),
		radial-gradient(circle at 88% 84%, rgba(244, 109, 166, 0.2), transparent 34%),
		var(--bnb-lilac-light) !important;
}

.bnb-strategy-card--complete .bnb-strategy-card__visual {
	background:
		radial-gradient(circle at 18% 30%, rgba(255, 252, 244, 0.78), transparent 28%),
		radial-gradient(circle at 88% 84%, rgba(244, 109, 166, 0.28), transparent 34%),
		var(--bnb-pink) !important;
}

.bnb-strategy-card--in_progress .bnb-strategy-card__visual {
	background:
		radial-gradient(circle at 18% 30%, rgba(255, 252, 244, 0.78), transparent 28%),
		radial-gradient(circle at 88% 84%, rgba(175, 199, 76, 0.34), transparent 34%),
		var(--bnb-green-light) !important;
}

/* Number badge */
.bnb-strategy-card__number {
	position: relative !important;
	z-index: 2 !important;
	display: grid !important;
	place-items: center !important;
	width: 46px !important;
	height: 46px !important;
	border-radius: 999px !important;
	background: var(--bnb-cream) !important;
	color: var(--bnb-dark) !important;
	font-family: var(--font-accent) !important;
	font-size: 0.78rem !important;
	box-shadow: 0 12px 28px rgba(21, 21, 21, 0.08) !important;
}

.bnb-strategy-card--complete .bnb-strategy-card__number {
	background: var(--bnb-hot-pink) !important;
	color: var(--bnb-cream) !important;
}

/* Decorative circle */
.bnb-strategy-card__shine {
	position: absolute !important;
	right: -34px !important;
	bottom: -42px !important;
	width: 130px !important;
	height: 130px !important;
	border-radius: 999px !important;
	background: rgba(255, 252, 244, 0.5) !important;
	pointer-events: none !important;
}

.bnb-strategy-card__shine::before {
	content: "" !important;
	position: absolute !important;
	inset: 26px !important;
	border-radius: inherit !important;
	border: 1px solid rgba(21, 21, 21, 0.08) !important;
}

/* Card body */
.bnb-strategy-card__body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	gap: 12px !important;
	padding: 22px !important;
}

.bnb-strategy-card__meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	color: var(--bnb-muted) !important;
	font-family: var(--font-accent) !important;
	font-size: 0.66rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

.bnb-strategy-status-pill {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 6px 9px !important;
	border-radius: 999px !important;
	background: var(--bnb-lilac-light) !important;
	color: var(--bnb-dark) !important;
	font-family: var(--font-accent) !important;
	font-size: 0.62rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

.bnb-strategy-status-pill--complete {
	background: var(--bnb-hot-pink) !important;
	color: var(--bnb-cream) !important;
}

.bnb-strategy-status-pill--in_progress {
	background: var(--bnb-green) !important;
	color: var(--bnb-dark) !important;
}

.bnb-strategy-card h3 {
	margin: 0 !important;
	font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
	line-height: 1 !important;
}

.bnb-strategy-card h3 a {
	color: inherit !important;
	text-decoration: none !important;
}

.bnb-strategy-card p {
	margin: 0 !important;
	color: var(--bnb-muted) !important;
	line-height: 1.45 !important;
}

.bnb-strategy-card__footer {
	margin-top: auto !important;
	padding-top: 12px !important;
}

.bnb-strategy-card__button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: var(--bnb-dark) !important;
	text-decoration: none !important;
	font-family: var(--font-accent) !important;
	font-size: 0.72rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

.bnb-strategy-card__button span {
	display: grid !important;
	place-items: center !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 999px !important;
	background: var(--bnb-hot-pink) !important;
	color: var(--bnb-cream) !important;
	transition: transform 0.2s ease !important;
}

.bnb-strategy-card:hover .bnb-strategy-card__button span,
.bnb-strategy-card:focus .bnb-strategy-card__button span {
	transform: translateX(3px) !important;
}

/* Responsive */
@media (max-width: 1080px) {
	.bnb-strategy-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 680px) {
	.bnb-strategy-grid {
		grid-template-columns: 1fr !important;
	}

	.bnb-strategy-card {
		min-height: 0 !important;
	}

	.bnb-strategy-card__visual {
		height: 104px !important;
		min-height: 104px !important;
	}
}


/* Strategy card featured image panel */
.bnb-strategy-card__visual {
	position: relative !important;
	display: block !important;
	height: 190px !important;
	min-height: 190px !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: var(--bnb-lilac-light) !important;
}

.bnb-strategy-card__image {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.bnb-strategy-card__image-placeholder {
	display: grid !important;
	place-items: center !important;
	width: 100% !important;
	height: 100% !important;
	background:
		radial-gradient(circle at top left, rgba(244, 109, 166, 0.2), transparent 34%),
		radial-gradient(circle at bottom right, rgba(175, 199, 76, 0.24), transparent 34%),
		var(--bnb-lilac-light) !important;
}

.bnb-strategy-card__image-placeholder span {
	font-family: var(--font-accent) !important;
	font-size: 0.72rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--bnb-muted) !important;
}

/* Remove old decorative blob */
.bnb-strategy-card__shine,
.bnb-strategy-card__shine::before {
	display: none !important;
}

/* Number badge over image */
.bnb-strategy-card__number {
	position: absolute !important;
	left: 18px !important;
	top: 18px !important;
	z-index: 2 !important;
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 999px !important;
	background: var(--bnb-cream) !important;
	color: var(--bnb-dark) !important;
	font-family: var(--font-accent) !important;
	font-size: 0.76rem !important;
	box-shadow: 0 12px 28px rgba(21, 21, 21, 0.14) !important;
}

.bnb-strategy-card--complete .bnb-strategy-card__number {
	background: var(--bnb-hot-pink) !important;
	color: var(--bnb-cream) !important;
}

.bnb-strategy-card--in_progress .bnb-strategy-card__number {
	background: var(--bnb-green) !important;
	color: var(--bnb-dark) !important;
}

@media (max-width: 680px) {
	.bnb-strategy-card__visual {
		height: 170px !important;
		min-height: 170px !important;
	}
}

/* Keep support + help box at the bottom of the sidebar */
.bnb-sidebar__inner {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.bnb-sidebar__nav {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.bnb-sidebar__primary-nav {
	flex: 0 0 auto;
}

.bnb-sidebar__nav-group--support {
	margin-top: auto;
	padding-top: 32px;
}

.bnb-sidebar__footer {
	flex: 0 0 auto;
	margin-top: 18px;
}



.bnb-roadmap {
	max-width: 1220px;
}

.bnb-roadmap__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
	gap: clamp(24px, 5vw, 52px);
	align-items: end;
	margin-bottom: clamp(34px, 6vw, 58px);
}

.bnb-roadmap__hero h1 {
	margin: 0;
	font-size: clamp(3.4rem, 8vw, 7rem);
	line-height: 0.88;
}

.bnb-roadmap__hero p {
	max-width: 720px;
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--bnb-muted);
}

.bnb-roadmap__hero-card,
.bnb-roadmap-card,
.bnb-roadmap-side-card {
	border: 1px solid var(--bnb-border);
	border-radius: 30px;
	background: var(--bnb-cream);
	box-shadow: 0 14px 44px rgba(21, 21, 21, 0.04);
}

.bnb-roadmap__hero-card {
	display: grid;
	gap: 12px;
	padding: 24px;
	background: var(--bnb-lilac-light);
}

.bnb-roadmap__hero-card h2 {
	margin: 0;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 1;
}

.bnb-roadmap__hero-card p {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-roadmap__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: clamp(24px, 4vw, 40px);
	align-items: start;
}

.bnb-roadmap__main {
	display: grid;
	gap: 24px;
}

.bnb-roadmap__sidebar {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 18px;
}

.bnb-roadmap-card {
	display: grid;
	gap: 22px;
	padding: clamp(22px, 3vw, 30px);
}

.bnb-roadmap-card--recommendations {
	background: var(--bnb-pink-light);
	border-color: rgba(244, 109, 166, 0.24);
}

.bnb-roadmap-card__header {
	display: grid;
	gap: 8px;
}

.bnb-roadmap-card__header h2 {
	margin: 0;
	font-size: clamp(1.7rem, 3.4vw, 3rem);
	line-height: 0.98;
}

.bnb-roadmap-card__header p {
	max-width: 760px;
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-roadmap-focus-form {
	display: grid;
	gap: 18px;
}

.bnb-roadmap-focus-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.bnb-roadmap-focus-option {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--bnb-border);
	border-radius: 22px;
	background: var(--bnb-background-alt);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.bnb-roadmap-focus-option:hover,
.bnb-roadmap-focus-option:focus-within,
.bnb-roadmap-focus-option.is-selected {
	transform: translateY(-2px);
	border-color: rgba(244, 109, 166, 0.38);
	background: var(--bnb-pink-light);
}

.bnb-roadmap-focus-option input {
	margin-top: 4px;
	accent-color: var(--bnb-hot-pink);
}

.bnb-roadmap-focus-option span {
	display: grid;
	gap: 6px;
}

.bnb-roadmap-focus-option strong {
	font-size: 1rem;
	line-height: 1.2;
}

.bnb-roadmap-focus-option small {
	color: var(--bnb-muted);
	font-size: 0.88rem;
	line-height: 1.35;
}

.bnb-roadmap-tool-list {
	display: grid;
	gap: 10px;
}

.bnb-roadmap-tool-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 16px;
	border: 1px solid rgba(244, 109, 166, 0.24);
	border-radius: 20px;
	background: var(--bnb-cream);
	color: var(--bnb-dark);
	text-decoration: none;
	font-weight: 700;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.bnb-roadmap-tool-link:hover,
.bnb-roadmap-tool-link:focus {
	transform: translateY(-2px);
	border-color: rgba(244, 109, 166, 0.5);
	outline: none;
}

.bnb-roadmap-tool-link span:last-child {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
}

.bnb-roadmap-support-prompt {
	display: grid;
	gap: 10px;
	padding: 16px;
	border-radius: 22px;
	background: var(--bnb-cream);
}

.bnb-roadmap-support-prompt p {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-roadmap-support-prompt a {
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.bnb-roadmap-action-board {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.bnb-roadmap-action-column {
	display: grid;
	align-content: start;
	gap: 12px;
	min-height: 220px;
	padding: 14px;
	border-radius: 24px;
	background: var(--bnb-background-alt);
}

.bnb-roadmap-action-column h3 {
	margin: 0;
	font-family: var(--font-accent);
	font-size: 0.74rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bnb-muted);
}

.bnb-roadmap-action-list {
	display: grid;
	gap: 10px;
}

.bnb-roadmap-action-empty {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 0.92rem;
}

.bnb-roadmap-action {
	display: grid;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-cream);
}

.bnb-roadmap-action__content {
	display: grid;
	gap: 7px;
}

.bnb-roadmap-action__area {
	margin: 0;
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bnb-roadmap-action h4 {
	margin: 0;
	font-size: 1rem;
	line-height: 1.2;
}

.bnb-roadmap-action__notes {
	color: var(--bnb-muted);
	font-size: 0.92rem;
	line-height: 1.4;
}

.bnb-roadmap-action__notes > *:first-child {
	margin-top: 0;
}

.bnb-roadmap-action__notes > *:last-child {
	margin-bottom: 0;
}

.bnb-roadmap-action__forms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.bnb-roadmap-action select {
	max-width: 130px;
	padding: 8px 10px;
	border: 1px solid var(--bnb-border);
	border-radius: 999px;
	background: #fff;
	color: var(--bnb-dark);
	font: inherit;
	font-size: 0.84rem;
}

.bnb-roadmap-action__delete {
	padding: 8px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--bnb-pink-light);
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.bnb-roadmap-side-card {
	display: grid;
	gap: 14px;
	padding: 24px;
}

.bnb-roadmap-side-card--support {
	background: var(--bnb-lilac-light);
}

.bnb-roadmap-side-card h2 {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	line-height: 1;
}

.bnb-roadmap-side-card p {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-roadmap-add-action-form {
	display: grid;
	gap: 12px;
}

.bnb-roadmap-add-action-form p {
	display: grid;
	gap: 7px;
	margin: 0;
}

.bnb-roadmap-add-action-form label {
	font-family: var(--font-accent);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bnb-muted);
}

.bnb-roadmap-add-action-form input,
.bnb-roadmap-add-action-form textarea,
.bnb-roadmap-add-action-form select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 16px;
	background: #fff;
	color: var(--bnb-dark);
	font: inherit;
}

.bnb-roadmap-add-action-form textarea {
	min-height: 100px;
	resize: vertical;
}

@media (max-width: 1100px) {
	.bnb-roadmap__layout,
	.bnb-roadmap__hero {
		grid-template-columns: 1fr;
	}

	.bnb-roadmap__sidebar {
		position: static;
	}
}

@media (max-width: 760px) {
	.bnb-roadmap-focus-grid,
	.bnb-roadmap-action-board {
		grid-template-columns: 1fr;
	}
}

/* Roadmap revised layout */
.bnb-roadmap__hero {
	max-width: 760px;
	margin-bottom: clamp(28px, 5vw, 48px);
}

.bnb-roadmap__hero h1 {
	margin: 0;
	font-size: clamp(3.4rem, 8vw, 7rem);
	line-height: 0.88;
}

.bnb-roadmap__hero p {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 1.08rem;
	line-height: 1.5;
}

.bnb-roadmap__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
	gap: clamp(24px, 4vw, 40px);
	align-items: start;
}

.bnb-roadmap__main {
	display: grid;
	gap: 24px;
}

.bnb-roadmap__sidebar {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 18px;
}

.bnb-roadmap-current-focus {
	background: var(--bnb-lilac-light);
}

.bnb-roadmap-current-focus__view {
	display: grid;
	gap: 12px;
}

.bnb-roadmap-current-focus h2 {
	margin: 0;
	font-size: clamp(1.45rem, 2.4vw, 2rem);
	line-height: 1;
}

.bnb-roadmap-current-focus p {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-roadmap-edit-focus-button {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	padding: 9px 13px;
	border: 1px solid rgba(244, 109, 166, 0.25);
	border-radius: 999px;
	background: var(--bnb-cream);
	color: var(--bnb-hot-pink);
	font-family: var(--font-accent);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.bnb-roadmap-current-focus__edit {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(21, 21, 21, 0.08);
}

.bnb-roadmap-focus-compact {
	display: grid;
	gap: 16px;
}

.bnb-roadmap-focus-compact .bnb-roadmap-card__header h2 {
	font-size: 1.4rem;
}

.bnb-roadmap-focus-compact .bnb-roadmap-focus-grid {
	grid-template-columns: 1fr;
	gap: 8px;
}

.bnb-roadmap-focus-compact .bnb-roadmap-focus-option {
	padding: 12px;
	border-radius: 18px;
}

.bnb-roadmap-focus-compact .bnb-roadmap-focus-option small {
	display: none;
}

.bnb-roadmap-card--suggested-tasks {
	background: var(--bnb-green-light);
	border-color: rgba(175, 199, 76, 0.34);
}

.bnb-roadmap-suggested-task-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: roadmap-tasks;
}

.bnb-roadmap-suggested-task-list li {
	counter-increment: roadmap-tasks;
	position: relative;
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 12px;
	align-items: start;
	padding: 14px;
	border: 1px solid var(--bnb-border);
	border-radius: 18px;
	background: var(--bnb-cream);
	line-height: 1.4;
}

.bnb-roadmap-suggested-task-list li::before {
	content: counter(roadmap-tasks);
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--bnb-green);
	color: var(--bnb-dark);
	font-family: var(--font-accent);
	font-size: 0.72rem;
}

@media (max-width: 1100px) {
	.bnb-roadmap__layout {
		grid-template-columns: 1fr;
	}

	.bnb-roadmap__sidebar {
		position: static;
		order: -1;
	}
}


.bnb-dashboard-community-row,
.bnb-dashboard-replay-row {
	color: inherit;
	text-decoration: none;
}

.bnb-dashboard-community-row:hover strong,
.bnb-dashboard-replay-row:hover strong {
	color: var(--bnb-hot-pink);
}

.bnb-dashboard-replay-thumb {
	position: relative;
	overflow: hidden;
}

.bnb-dashboard-replay-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bnb-dashboard-replay-thumb span {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(255, 252, 244, 0.92);
	color: var(--bnb-hot-pink);
}

.bnb-dashboard-empty {
	margin: 0;
	color: var(--bnb-muted);
	line-height: 1.45;
}

.bnb-dashboard-continue {
	color: inherit;
	text-decoration: none;
}

.bnb-dashboard-continue:hover h2,
.bnb-dashboard-continue:focus h2 {
	color: var(--bnb-hot-pink);
}

.bnb-dashboard-empty-state {
	display: grid;
	gap: 10px;
}

.bnb-dashboard-empty-state h2,
.bnb-dashboard-empty-state p {
	margin: 0;
}

.bnb-dashboard-empty-state p {
	color: var(--bnb-muted);
}

.bnb-dashboard-empty-state a {
	color: var(--bnb-hot-pink);
	text-decoration: none;
	font-family: var(--font-accent);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}


.bnb-dashboard-schedule-preview {
	position: relative;
	display: grid;
	grid-template-columns: 44px repeat(var(--bnb-dashboard-schedule-columns), minmax(54px, 1fr));
	grid-template-rows: 30px repeat(var(--bnb-dashboard-schedule-slots), minmax(55px, auto));
	gap: 1px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.bnb-dashboard-schedule-preview__corner,
.bnb-dashboard-schedule-preview__date,
.bnb-dashboard-schedule-preview__slot,
.bnb-dashboard-schedule-preview__cell {
	border-radius: 0;
	font-family: var(--font-accent);
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0;
}

.bnb-dashboard-schedule-preview__corner,
.bnb-dashboard-schedule-preview__slot {
	display: grid;
	place-items: center;
	color: var(--bnb-background);
	background: var(--bnb-hot-pink);
}

.bnb-dashboard-schedule-preview__date {
	display: grid;
	place-items: center;
	color: var(--bnb-background);
	background: var(--bnb-hot-pink);
}

.bnb-dashboard-schedule-preview__cell {
	min-height: 42px;
}

.bnb-dashboard-schedule-preview__bar {
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 34px;
	margin: 4px;
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--bnb-dark);
	font-size: 0.78rem;
	line-height: 1.1;
	overflow: hidden;
}

.bnb-dashboard-schedule-preview__bar strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bnb-dashboard-schedule-preview__bar--project.is-pink {
	background: var(--bnb-pink);
}

.bnb-dashboard-schedule-preview__bar--project.is-lilac {
	background: var(--bnb-lilac);
}

.bnb-dashboard-schedule-preview__bar--holiday {
	z-index: 3;
	justify-content: center;
	background: var(--bnb-green);
	border-radius: 0;
}

.bnb-dashboard-schedule-preview__bar--holiday strong {
    transform: rotate(-90deg);
    overflow: visible;
    text-overflow: unset;
}

@media (max-width: 760px) {
	.bnb-dashboard-schedule-preview {
		grid-template-columns: 40px repeat(var(--bnb-dashboard-schedule-columns), 64px);
	}
}

.bnb-dashboard-continue--stacked {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	color: inherit;
	text-decoration: none;
}

.bnb-dashboard-continue__intro {
	display: grid;
	justify-items: start;
	gap: 8px;
	max-width: 100%;
}

.bnb-dashboard-continue__intro .bnb-dashboard-pill {
	margin: 0;
}

.bnb-dashboard-continue__intro h2 {
	margin: 0;
	font-size: clamp(1rem, 1.7vw, 2rem);
	line-height: 0.95;
}

.bnb-dashboard-continue__intro p:not(.bnb-dashboard-pill) {
	margin: 0;
	color: var(--bnb-muted);
	font-size: 1rem;
	line-height: 1.35;
}

.bnb-dashboard-continue__lower {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

.bnb-dashboard-continue__image {
	width: 140px;
	aspect-ratio: 4 / 5;
	border-radius: 22px;
	overflow: hidden;
}

.bnb-dashboard-continue__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bnb-dashboard-lesson-list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnb-dashboard-lesson-list li {
	position: relative;
	padding-left: 32px;
	font-size: clamp(0.6rem, 0.8vw, 1rem);
	font-weight: 700;
	line-height: 1.15;
}

.bnb-dashboard-lesson-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 22px;
	height: 22px;
	border: 2px solid var(--bnb-hot-pink);
	border-radius: 6px;
	background: transparent;
}

.bnb-dashboard-lesson-list li.is-complete::before {
	content: "✓";
	display: grid;
	place-items: center;
	background: var(--bnb-hot-pink);
	color: var(--bnb-cream);
	font-size: 0.8rem;
	line-height: 1;
}

.bnb-dashboard-continue:hover h2,
.bnb-dashboard-continue:focus h2 {
	color: var(--bnb-orange);
}

@media (max-width: 760px) {
	.bnb-dashboard-continue__lower {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.bnb-dashboard-continue__image {
		width: 100%;
		max-width: 240px;
	}
}

.bnb-dashboard-stat--progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	text-align: center;
}

.bnb-dashboard-stat--progress .bnb-dashboard-kicker {
	align-self: flex-start;
}

.bnb-dashboard-progress-ring {
	width: 156px;
	height: 156px;
	margin: 10px auto 0;
}

.bnb-dashboard-progress-ring strong {
	font-size: 2.5rem;
	line-height: 1;
}

.bnb-dashboard-progress-ring span {
	font-size: 0.8rem;
}

.bnb-dashboard-stat--progress > span {
	font-size: 1.15rem;
	line-height: 1.25;
	max-width: 260px;
}
