/* =====================================================================
   Bantu Plaza brand layer - sits on top of Astra.
   Tokens mirror the prototype's palette so the brand reads identically
   across screens without re-importing Tailwind. All rules below are
   low-specificity helpers that inherit Astra's body/container/buttons.
   ===================================================================== */

:root {
	--bp-cream:        #FFFBF4;
	--bp-cream-deep:   #FFF5E1;
	--bp-ink:          #1A1410;
	--bp-ink-soft:     rgba(26, 20, 16, 0.75);
	--bp-line:         rgba(26, 20, 16, 0.08);

	--bp-brand-100:    #FFEFD2;
	--bp-brand-500:    #E97C18;
	--bp-brand-600:    #C95F0E;
	--bp-brand-700:    #9F4710;

	--bp-forest-600:   #059669;
	--bp-amber-50:     #FFFBEB;
	--bp-amber-700:    #B45309;

	/* Elephant sage — secondary accent (UX spec 0.1). Fill/accent ONLY, always
	   paired with --bp-ink text; never used as text on cream/white (AA). */
	--bp-sage:         #9EC0BC;
	--bp-sage-deep:    #6E9E99;
	--bp-sage-soft:    #EAF3F1;

	--bp-radius:       16px;
	--bp-radius-lg:    20px;
	--bp-shadow-soft:  0 6px 20px -10px rgba(26, 20, 16, 0.18);
	--bp-shadow-card:  0 14px 38px -22px rgba(26, 20, 16, 0.25);

	--bp-font-body:    'Ubuntu', system-ui, -apple-system, sans-serif;
	--bp-font-head:    'Ubuntu', system-ui, -apple-system, sans-serif;
}

body.bantu-plaza,
body.bantu-plaza .ast-container,
body.bantu-plaza #content {
	background-color: var(--bp-cream);
	color: var(--bp-ink);
	font-family: var(--bp-font-body);
}

body.bantu-plaza h1,
body.bantu-plaza h2,
body.bantu-plaza h3,
body.bantu-plaza h4,
body.bantu-plaza h5 {
	font-family: var(--bp-font-head);
	color: var(--bp-ink);
}

/* ---------- Primitive: container ---------- */
.bp-section { padding: 32px 0; }
.bp-section + .bp-section { padding-top: 0; }
.bp-section:first-child,
.entry-content > .bp-section:first-of-type { padding-top: 16px; }
.bp-wrap    { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- Legal / policy document prose ----------
   The body copy of the Legal hub and its policy siblings (Terms, Privacy,
   Cookies, Refund, Code of Conduct). The page title + intro are lifted into
   a gradient hero by template-parts/legal-document.php; this styles the
   plain HTML that remains inside the white content card so its headings,
   paragraphs, lists and links read like the rest of Bantu Plaza. */
.bp-legal {
	color: var(--bp-ink);
	font-size: 16px;
	line-height: 1.75;
}
.bp-legal > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.bp-legal > :last-child { margin-bottom: 0; }
.bp-legal h2,
.bp-legal h3,
.bp-legal h4 { font-family: var(--bp-font-head); color: var(--bp-ink); letter-spacing: -0.01em; }
.bp-legal h2 { font-size: 25px; line-height: 1.2; margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--bp-line); }
.bp-legal h3 { font-size: 19px; line-height: 1.3; margin: 30px 0 8px; }
.bp-legal h4 { font-size: 16px; margin: 22px 0 6px; }
.bp-legal p { margin: 0 0 16px; color: var(--bp-ink-soft); }
.bp-legal strong { color: var(--bp-ink); font-weight: 700; }
.bp-legal ul,
.bp-legal ol { margin: 0 0 18px; padding-left: 22px; color: var(--bp-ink-soft); }
.bp-legal li { margin: 0 0 8px; line-height: 1.6; }
.bp-legal li::marker { color: var(--bp-brand-500); }
.bp-legal a {
	color: var(--bp-brand-700);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(159, 71, 16, 0.35);
}
.bp-legal a:hover { color: var(--bp-brand-600); text-decoration-color: currentColor; }
.bp-legal code {
	background: var(--bp-brand-100);
	color: var(--bp-brand-700);
	padding: 1px 6px;
	border-radius: 6px;
	font-size: 13px;
}
.bp-legal em { color: var(--bp-ink-soft); }
.bp-legal hr { border: 0; border-top: 1px solid var(--bp-line); margin: 32px 0; }
.bp-legal table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14px; }
.bp-legal th,
.bp-legal td { text-align: left; padding: 10px 12px; border: 1px solid var(--bp-line); vertical-align: top; line-height: 1.5; }
.bp-legal thead th {
	background: var(--bp-amber-50);
	font-family: var(--bp-font-head);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bp-ink-soft);
}
.bp-legal tbody td { color: var(--bp-ink-soft); }
.bp-legal tbody td:first-child { color: var(--bp-ink); }
.bp-legal table code { font-size: 12px; }

/* Segmented policy sections - each <h3> becomes its own card with an icon
   header, so a long document reads as a stack of digestible cards rather
   than one wall of text. */
.bp-doc-intro { margin-bottom: 22px; font-size: 17px; }
.bp-doc-intro p:last-child { margin-bottom: 0; }
.bp-doc-sections { display: flex; flex-direction: column; gap: 16px; }
/* Legal hub: its sections are short, independent reference items, so lay
   them out as a card grid (like the policy tiles) instead of a tall stack.
   Each card is a compact summary that opens its full text in a modal, so the
   cards stay uniform and a plain equal-height grid works well. */
@media (min-width: 700px) {
	.bp-doc-sections--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 1000px) {
	.bp-doc-sections--grid { grid-template-columns: repeat(3, 1fr); }
}
.bp-doc-card {
	background: #fff;
	border: 1px solid var(--bp-line);
	border-radius: var(--bp-radius-lg);
	box-shadow: var(--bp-shadow-soft);
	padding: 24px 26px;
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.bp-doc-card:hover { box-shadow: var(--bp-shadow-card); border-color: rgba(233, 124, 24, 0.28); }
.bp-doc-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bp-doc-card-icon {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 12px;
	background: var(--bp-brand-100);
	color: var(--bp-brand-700);
	display: inline-grid;
	place-items: center;
	font-size: 20px;
	line-height: 1;
}
.bp-doc-card-icon .lucide { width: 20px; height: 20px; }
.bp-doc-card-title {
	font-family: var(--bp-font-head);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--bp-ink);
	margin: 0;
}
@media (max-width: 600px) {
	.bp-doc-card { padding: 20px; }
	.bp-doc-card-head { gap: 10px; margin-bottom: 12px; }
	.bp-doc-card-icon { width: 38px; height: 38px; }
}

/* Icon tile that leads each related-policy card. */
.bp-policy-tile > span:first-child { margin-bottom: 12px; }

/* Clickable section cards (Legal hub): a compact summary that opens the full
   section text in a modal. Full text is present but hidden (crawlable, and
   restored inline by the <noscript> fallback when JS is unavailable). */
.bp-doc-card--clickable { cursor: pointer; display: flex; flex-direction: column; text-align: left; }
.bp-doc-card--clickable:focus-visible { outline: 2px solid var(--bp-brand-500); outline-offset: 2px; }
.bp-doc-card-teaser { color: var(--bp-ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.bp-doc-card-more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--bp-font-head);
	font-weight: 700;
	font-size: 13px;
	color: var(--bp-brand-700);
}
.bp-doc-card-more .lucide,
.bp-doc-card-more svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.bp-doc-card--clickable:hover .bp-doc-card-more svg { transform: translateX(3px); }
.bp-doc-card-full { display: none; }

/* Document modal */
.bp-modal[hidden] { display: none; }
.bp-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 16px;
	overflow-y: auto;
}
.bp-modal-backdrop { position: fixed; inset: 0; background: rgba(26, 20, 16, 0.55); }
.bp-modal-panel {
	position: relative;
	background: var(--bp-cream);
	border: 1px solid var(--bp-line);
	border-radius: var(--bp-radius-lg);
	box-shadow: var(--bp-shadow-card);
	max-width: 660px;
	width: 100%;
	padding: 30px 32px 32px;
	animation: bpModalIn 0.18s ease;
}
@keyframes bpModalIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bp-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid var(--bp-line);
	background: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--bp-ink-soft);
}
.bp-modal-close:hover { background: var(--bp-brand-100); color: var(--bp-brand-700); border-color: var(--bp-brand-500); }
.bp-modal-close .lucide,
.bp-modal-close svg { width: 18px; height: 18px; }
.bp-modal-head { display: flex; align-items: center; gap: 12px; margin: 0 40px 18px 0; padding-bottom: 18px; border-bottom: 1px solid var(--bp-line); }
.bp-modal-icon {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 13px;
	background: var(--bp-brand-100);
	color: var(--bp-brand-700);
	display: inline-grid;
	place-items: center;
	font-size: 22px;
	line-height: 1;
}
.bp-modal-icon .lucide,
.bp-modal-icon svg { width: 22px; height: 22px; }
.bp-modal-title { font-family: var(--bp-font-head); font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--bp-ink); margin: 0; }
.bp-modal-body { font-size: 15.5px; }
body.bp-modal-open { overflow: hidden; }

/* Tutor quick-view preview (find-tutors modal). */
.bp-tpv-panel { max-width: 600px; }
.bp-tpv-loading { text-align: center; color: var(--bp-ink-soft); padding: 36px 0; font-size: 15px; }
.bp-tpv-head { display: flex; gap: 14px; align-items: flex-start; margin: 0 36px 14px 0; }
.bp-tpv-head .bp-avatar { width: 72px; height: 72px; font-size: 28px; }
.bp-tpv-name { font-family: var(--bp-font-head); font-weight: 800; font-size: 21px; line-height: 1.2; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bp-tpv-meta { color: var(--bp-ink-soft); font-size: 13px; margin: 0 0 6px; }
.bp-tpv-langs { font-size: 14px; margin: 0; }
.bp-tpv-video { margin: 0 0 14px; border-radius: 14px; overflow: hidden; box-shadow: var(--bp-shadow-soft); }
.bp-tpv-video iframe,
.bp-tpv-video embed,
.bp-tpv-video object { display: block; width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; border: 0; }
.bp-tpv-bio { color: var(--bp-ink-soft); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.bp-tpv-avail { font-size: 14px; display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.bp-tpv-avail .lucide { color: var(--bp-brand-600); }
.bp-tpv-prices { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 16px; font-size: 14px; color: var(--bp-ink-soft); }
.bp-tpv-prices strong { color: var(--bp-ink); font-family: var(--bp-font-head); }
.bp-tpv-cta { width: 100%; }

/* ---------- Buttons (inherit Astra but rebadge) ---------- */
.bp-btn,
.bp-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	min-height: 44px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.bp-btn-primary {
	background: var(--bp-brand-600);
	color: #fff;
}
.bp-btn-primary:hover { background: var(--bp-brand-700); color: #fff; }
.bp-btn-ghost {
	background: #fff;
	color: var(--bp-ink);
	border-color: var(--bp-line);
}
.bp-btn-ghost:hover { background: var(--bp-brand-100); border-color: var(--bp-brand-500); color: var(--bp-brand-700); }
.bp-btn-pill { border-radius: 999px; }
.bp-btn:active { transform: translateY(1px); }

/* ---------- Cards ---------- */
.bp-card {
	background: #fff;
	border: 1px solid rgba(26, 20, 16, 0.16);
	border-radius: var(--bp-radius);
	box-shadow: var(--bp-shadow-soft);
	padding: 20px;
}
.bp-card-lg { border-radius: var(--bp-radius-lg); padding: 28px; box-shadow: var(--bp-shadow-card); }

/* ---------- Tutor cards / grid ---------- */
.bp-tutor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	align-items: stretch;
}
.bp-tutor-card { display: flex; flex-direction: column; gap: 14px; }
/* Base avatar - rounded "squircle" everywhere (profile, dashboards, cards),
   so tutor/student profile pics never render as hard squares. Works for both
   the initials <span> and the photo <img> variant. */
.bp-avatar { border-radius: 20%; flex-shrink: 0; }
span.bp-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-family: var(--bp-font-head);
	overflow: hidden;
}
img.bp-avatar { object-fit: cover; }
.bp-tutor-card .bp-avatar {
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 700; font-family: var(--bp-font-head);
}
.bp-tutor-head { display: flex; align-items: center; gap: 12px; }
.bp-tutor-name { font-weight: 700; font-size: 17px; margin: 0; }
.bp-tutor-meta { color: var(--bp-ink-soft); font-size: 13px; }
.bp-tutor-bio  { font-size: 14px; color: var(--bp-ink-soft); line-height: 1.5; min-height: 42px; }
.bp-tutor-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-tag {
	font-size: 11px; padding: 4px 10px; border-radius: 999px;
	background: var(--bp-brand-100); color: var(--bp-brand-700);
}
.bp-badge {
	font-size: 11px; padding: 4px 10px; border-radius: 999px;
	background: var(--bp-amber-50); color: var(--bp-amber-700); font-weight: 600;
}
.bp-badge-kids {
	background: #ECFDF5; color: var(--bp-forest-600);
}
/* §A.5 Certified Tutor - a distinct teaching-ability signal. */
.bp-badge-certified {
	background: #FEF9C3; color: #854D0E;
}
/* UX 2.2: verified native/near-native speaker — the lead trust signal. Sage
   accent with ink text (AA-safe) + a border so it reads as primary above the
   ID/qualification/trained badges. */
.bp-badge-native {
	background: var(--bp-sage-soft); color: var(--bp-ink);
	border: 1px solid var(--bp-sage-deep); font-weight: 700;
}
.bp-tutor-price-unit { font-weight: 600; color: var(--bp-ink-soft); font-size: 0.82em; }
.bp-tutor-price { font-weight: 700; color: var(--bp-ink); }
.bp-tutor-rate-hint { font-size: 12px; color: var(--bp-ink-soft); }
.bp-tutor-cta { display: flex; gap: 10px; margin-top: auto; }
.bp-tutor-card .bp-tutor-cta .bp-btn { flex: 1; }
/* Equal-height cards in the grid + tidy the name/badge row so badges never break mid-word. */
.bp-tutor-card { height: 100%; }
.bp-tutor-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bp-badge { white-space: nowrap; }
.bp-tag:empty, .bp-tutor-tags:empty { display: none; }
/* Friendly, visible "New tutor" badge (stands out from the neutral tags) */
.bp-tag-new { background: var(--bp-forest-600); color: #fff; font-weight: 700; }
/* Prominent "New tutor" flag pinned to the top of the card (sits above the
   avatar/name row), so brand-new tutors stand out instead of hiding in the
   stats line. */
.bp-tutor-newflag {
	display: inline-flex; align-items: center; gap: 5px; width: fit-content;
	font-size: 12px; font-weight: 800; letter-spacing: .01em;
	padding: 5px 12px; border-radius: 999px;
	background: var(--bp-forest-600); color: #fff;
}

/* ---------- Star rating ---------- */
.bp-stars { color: #F59E0B; letter-spacing: 1px; font-size: 14px; }
.bp-stars-num { font-weight: 700; color: var(--bp-ink); }

/* ---------- Filters bar (find tutors) ---------- */
.bp-filters {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr) auto;
	gap: 12px;
	background: #fff;
	padding: 16px;
	border-radius: var(--bp-radius);
	border: 1px solid var(--bp-line);
	box-shadow: var(--bp-shadow-soft);
	margin-bottom: 24px;
}
.bp-filters input,
.bp-filters select {
	width: 100%;
	border: 1px solid var(--bp-line);
	border-radius: 10px;
	padding: 10px 12px;
	background: #fff;
	color: var(--bp-ink);
	/* 16px floor: iOS Safari auto-zooms when an input is < 16px on focus,
	   which disrupts the find-tutor flow. Stay at or above the threshold. */
	font-size: 16px;
	min-height: 44px;
}
.bp-filters .bp-btn { padding: 10px 18px; min-height: 44px; }
@media (max-width: 900px) {
	.bp-filters { grid-template-columns: 1fr 1fr; }
	.bp-filters .bp-btn { grid-column: span 2; }
}
@media (max-width: 640px) {
	.bp-filters { grid-template-columns: 1fr; }
	.bp-filters .bp-btn { grid-column: span 1; }
}

/* ---------- Language tiles ---------- */
.bp-lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.bp-lang-tile {
	background: #fff; border-radius: var(--bp-radius); padding: 18px;
	border: 1px solid var(--bp-line); display: flex; flex-direction: column; gap: 8px;
	text-decoration: none; color: inherit; box-shadow: var(--bp-shadow-soft);
	transition: transform .12s ease, box-shadow .12s ease;
}
.bp-lang-tile:hover { transform: translateY(-2px); box-shadow: var(--bp-shadow-card); }
.bp-lang-flag { font-size: 28px; }
.bp-lang-name { font-weight: 700; font-size: 18px; }
.bp-lang-meta { font-size: 13px; color: var(--bp-ink-soft); }
.bp-lang-tile .bp-tag { width: max-content; }
/* §C.3 featured launch languages lead the grid with a warm accent edge. */
.bp-lang-tile--featured { border-color: var(--bp-brand, #9F4710); box-shadow: 0 0 0 1px var(--bp-brand, #9F4710) inset, var(--bp-shadow-soft); }
/* Under-supplied languages (<2 live tutors) read as waitlist, not available. */
.bp-lang-tile--soon { opacity: .82; }
.bp-tag--soon { background: var(--bp-line, #e5e0d8); color: var(--bp-ink-soft, #6b6258); }
/* §C.3 contextual trial badge on tutor cards. */
.bp-tutor-trial-badge { margin: 6px 0 0; }
.bp-tag-trial { background: #ECFDF5; color: var(--bp-forest-600, #059669); font-weight: 700; }

/* ---------- Hero ---------- */
.bp-hero {
	background:
		radial-gradient(circle at 12% -10%, rgba(233, 124, 24, 0.18), transparent 55%),
		radial-gradient(circle at 105% 110%, rgba(5, 150, 105, 0.15), transparent 60%),
		var(--bp-cream-deep);
	border-radius: 28px;
	padding: 56px 40px;
	display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
	margin: 32px 0;
}
.bp-hero h1 { font-size: 34px; line-height: 1.15; margin: 0 0 12px; }
.bp-hero p.bp-hero-lead { font-size: 16px; color: var(--bp-ink-soft); margin: 0 0 20px; max-width: 540px; }
.bp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.bp-hero-side { background: #fff; border-radius: var(--bp-radius-lg); padding: 24px; box-shadow: var(--bp-shadow-card); }
.bp-hero-side h3 { margin: 0 0 12px; }
@media (max-width: 900px) {
	.bp-hero { grid-template-columns: 1fr; padding: 36px 22px; }
	.bp-hero h1 { font-size: 26px; }
}

/* ---------- Dashboard ---------- */
.bp-dash { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin: 32px 0; }
.bp-dash-nav {
	background: #fff; border-radius: var(--bp-radius); padding: 12px;
	border: 1px solid var(--bp-line); box-shadow: var(--bp-shadow-soft);
	display: flex; flex-direction: column; gap: 4px; height: max-content;
}
.bp-dash-nav a {
	display: block; padding: 12px 14px; border-radius: 10px;
	color: var(--bp-ink); text-decoration: none; font-weight: 500; font-size: 14px;
	min-height: 44px; box-sizing: border-box;
}
.bp-dash-nav a:hover { background: var(--bp-brand-100); color: var(--bp-brand-700); }
.bp-dash-nav a.is-active { background: var(--bp-brand-600); color: #fff; }
.bp-dash-main { display: flex; flex-direction: column; gap: 18px; }
.bp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.bp-stat { background: #fff; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 18px; }
.bp-stat-label { font-size: 12px; color: var(--bp-ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.bp-stat-num { font-size: 28px; font-weight: 700; font-family: var(--bp-font-head); margin-top: 4px; }
.bp-stat-sub { font-size: 12px; color: var(--bp-ink-soft); margin-top: 4px; }
@media (max-width: 900px) {
	.bp-dash { grid-template-columns: 1fr; }
	.bp-dash-nav { flex-direction: row; flex-wrap: wrap; }
}
/* Mobile: horizontal-scroll tab strip so 6–7 dashboard tabs don't
   collapse into a tall multi-row stack that hides the actual content
   below the fold. */
@media (max-width: 640px) {
	.bp-dash-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding: 8px;
	}
	.bp-dash-nav a {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* ---------- Tables ---------- */
.bp-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--bp-radius); overflow: hidden; }
.bp-table th, .bp-table td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--bp-line); }
.bp-table th { background: var(--bp-cream-deep); font-weight: 600; }
.bp-table tr:last-child td { border-bottom: 0; }

/* ---------- Forms ---------- */
.bp-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.bp-form-row { display: flex; flex-direction: column; gap: 4px; }
.bp-form label { font-size: 14px; font-weight: 500; color: var(--bp-ink-soft); }
.bp-form input,
.bp-form select,
.bp-form textarea {
	border: 1px solid var(--bp-line); border-radius: 10px; padding: 12px 12px;
	background: #fff; color: var(--bp-ink); font-size: 16px; font-family: inherit;
	min-height: 44px; box-sizing: border-box;
}
.bp-form textarea { min-height: 110px; resize: vertical; }
.bp-form .bp-btn { align-self: flex-start; margin-top: 4px; }
.bp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .bp-form-grid { grid-template-columns: 1fr; } .bp-form { max-width: 100%; } }

/* ---------- Pricing ---------- */
.bp-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.bp-price-card { background: #fff; border-radius: var(--bp-radius); border: 1px solid var(--bp-line); padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--bp-shadow-soft); }
.bp-price-card.is-popular { border-color: var(--bp-brand-500); box-shadow: var(--bp-shadow-card); position: relative; }
.bp-price-card.is-popular::after {
	content: 'Most popular'; position: absolute; top: -12px; right: 16px;
	background: var(--bp-brand-600); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.bp-price-num { font-family: var(--bp-font-head); font-size: 32px; font-weight: 700; }
.bp-price-unit { font-size: 13px; color: var(--bp-ink-soft); }

/* ---------- FAQ ---------- */
.bp-faq details { background: #fff; border: 1px solid var(--bp-line); border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; }
.bp-faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.bp-faq summary::after { content: '+'; color: var(--bp-brand-600); font-size: 22px; line-height: 1; }
.bp-faq details[open] summary::after { content: '–'; }
.bp-faq p { margin: 10px 0 0; color: var(--bp-ink-soft); }

/* ---------- Reviews ---------- */
.bp-review { background: #fff; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 18px; margin-bottom: 14px; }
.bp-review-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.bp-review-author { font-weight: 600; }
.bp-review-meta { font-size: 12px; color: var(--bp-ink-soft); }

/* ---------- Availability grid (tutor profile) ---------- */
.bp-avail-grid { display: grid; grid-template-columns: 60px repeat(7, 1fr); gap: 2px; font-size: 11px; }
.bp-avail-grid .bp-avail-head { background: var(--bp-cream-deep); padding: 6px 4px; text-align: center; font-weight: 600; }
.bp-avail-cell { background: #fff; padding: 4px 0; text-align: center; }
.bp-avail-cell.is-on { background: var(--bp-brand-100); color: var(--bp-brand-700); font-weight: 600; }
.bp-avail-cell.is-off { color: rgba(26,20,16,.3); }

/* ---------- Notices ---------- */
.bp-notice { border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 14px; border: 1px solid; }
.bp-notice-info  { background: var(--bp-brand-100); border-color: var(--bp-brand-500); color: var(--bp-brand-700); }
.bp-notice-warn  { background: var(--bp-amber-50);  border-color: var(--bp-amber-700); color: var(--bp-amber-700); }
.bp-notice-ok    { background: #ECFDF5;             border-color: var(--bp-forest-600); color: var(--bp-forest-600); }

/* ---------- Footer / spacing helpers ---------- */
.bp-mt-0 { margin-top: 0; }
.bp-mt-1 { margin-top: 8px; }
.bp-mt-2 { margin-top: 16px; }
.bp-mt-3 { margin-top: 24px; }
.bp-mt-4 { margin-top: 32px; }
.bp-flex { display: flex; }
.bp-gap-2 { gap: 16px; }
.bp-gap-3 { gap: 24px; }
.bp-between { justify-content: space-between; }
.bp-center { align-items: center; }
.bp-muted { color: var(--bp-ink-soft); }

/* Visually-hidden label utility - keeps text available to screen readers
   without affecting layout (WCAG 2.1 1.3.1 + 3.3.2 compliance). */
.bp-visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* =====================================================================
   Header - single horizontal row, LOGO ON LEFT (with breathing room).
   Row shape: [logo + wordmark, left margin] · · · [menu] [CTA button]
   ===================================================================== */

/* Zero the top padding on the header AND on every wrapper that sits
   between the header and our first .bp-section, so there is no white
   gap between the navigation bar and the hero. Astra v4 stamps inline
   padding via the customiser - override on every BP-touched class. */
.site-header,
.ast-primary-header-bar,
.ast-main-header-bar,
.main-header-bar,
.main-header-container,
.ast-above-header-bar,
.ast-below-header-bar {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: auto;
}
/* The container that actually lays out the bar - keep vertical
   centering and a small 8px gap each side so the menu text doesn't
   touch the viewport edges. */
.main-header-container,
.ast-flex.main-header-container,
.ast-main-header-bar-alignment {
	align-items: center;
	padding-top: 8px;
	padding-bottom: 8px;
}

.site-header .site-branding,
.site-header .ast-site-identity {
	display: flex;
	align-items: center;
	/* Breathing room from the left viewport edge so the logo isn't
	   flush against the gutter on wide screens. */
	padding-left: 24px;
}
@media (max-width: 921px) {
	.site-header .site-branding,
	.site-header .ast-site-identity {
		padding-left: 16px;
	}
}
.custom-logo-link {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
}
.custom-logo-link .custom-logo {
	max-height: 40px;
	max-width: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.bp-header-wordmark {
	font-family: var(--bp-font-head);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.01em;
	color: var(--bp-ink);
	white-space: nowrap;
	line-height: 1;
}
.bp-header-wordmark-accent { color: var(--bp-brand-600); }

/* Primary menu links - vertical centre + comfortable spacing */
.site-header .main-header-menu > li > .menu-link {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-weight: 500;
	color: var(--bp-ink-soft);
	border-radius: 10px;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.site-header .main-header-menu > li > .menu-link:hover,
.site-header .main-header-menu > li.current-menu-item > .menu-link {
	background: var(--bp-brand-100);
	color: var(--bp-brand-700);
}

/* "Home" menu item is hidden on desktop (the logo already links home);
   it stays visible in the mobile drawer, where the logo may not be the
   first thing a user sees. The bp-home-menu-item class is added by the
   nav_menu_css_class filter in bantu-plaza-core.php. */
@media (min-width: 922px) {
	.site-header li.bp-home-menu-item,
	.site-header .menu-item.bp-home-menu-item {
		display: none !important;
	}
}

/* Astra "header right" custom button reused as Log in / Sign up CTA.
   Pill-style, brand-coloured, sits flush against the menu. */
.ast-masthead-custom-menu-items.button-custom-menu-item .ast-custom-button-link {
	margin-left: 8px;
}
.ast-masthead-custom-menu-items.button-custom-menu-item .ast-button {
	background: var(--bp-brand-600);
	color: #fff;
	padding: 9px 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1;
	border: 1px solid var(--bp-brand-600);
	transition: background 0.12s ease, border-color 0.12s ease;
}
.ast-masthead-custom-menu-items.button-custom-menu-item:hover .ast-button {
	background: var(--bp-brand-700);
	border-color: var(--bp-brand-700);
	color: #fff;
}
/* Astra duplicates the button label as a hidden `.menu-link` - hide it
   so screen readers and tab order only hit the styled CTA. */
.ast-masthead-custom-menu-items.button-custom-menu-item > a.menu-link {
	display: none !important;
}

/* Hide the duplicate Astra page-title H1 on every page that renders its own
   BP hero so the in-page H1 is the only top-level heading. */
body.page-id-1692 .entry-header,
body.page-id-1693 .entry-header,
body.page-id-1694 .entry-header,
body.page-id-1695 .entry-header,
body.page-id-1696 .entry-header,
body.page-id-1697 .entry-header,
body.page-id-1698 .entry-header,
body.page-id-1699 .entry-header,
body.page-id-1700 .entry-header,
body.page-id-1701 .entry-header,
body.page-id-1702 .entry-header,
body.page-id-1703 .entry-header,
body.page-id-1704 .entry-header,
body.page-id-1705 .entry-header,
body.page-id-1706 .entry-header,
body.page-id-1707 .entry-header,
body.page-id-1708 .entry-header { display: none; }

/* Astra wraps standard pages in a narrow container with vertical white space.
   Our BP sections handle their own padding so collapse the wrapper gap. */
body.page-id-1692 .ast-container,
body.page-id-1693 .ast-container,
body.page-id-1694 .ast-container,
body.page-id-1695 .ast-container,
body.page-id-1700 .ast-container,
body.page-id-1701 .ast-container,
body.page-id-1702 .ast-container,
body.page-id-1703 .ast-container,
body.page-id-1704 .ast-container,
body.page-id-1705 .ast-container,
body.page-id-1706 .ast-container,
body.page-id-1707 .ast-container,
body.page-id-1708 .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; }
body.page-id-1692 #primary,
body.page-id-1693 #primary,
body.page-id-1694 #primary,
body.page-id-1695 #primary,
body.page-id-1700 #primary,
body.page-id-1701 #primary,
body.page-id-1702 #primary,
body.page-id-1703 #primary,
body.page-id-1704 #primary,
body.page-id-1705 #primary,
body.page-id-1706 #primary,
body.page-id-1707 #primary,
body.page-id-1708 #primary { padding: 0; }

/* Generalised: on every BP-branded page, completely collapse the gap
   between the Astra header bar and our first hero/section.
   body.bantu-plaza is set by the plugin's body_class filter (scoped,
   see bantu-plaza-core.php). Aggressive !important here because Astra
   theme + customizer often inject vertical padding/margin via inline
   <style> blocks or higher-specificity selectors. */
body.bantu-plaza .site-content,
body.bantu-plaza .ast-container,
body.bantu-plaza .site-content > .ast-container,
body.bantu-plaza #primary,
body.bantu-plaza #primary > article,
body.bantu-plaza .ast-article-post,
body.bantu-plaza .ast-article-single,
body.bantu-plaza .entry-content,
body.bantu-plaza .ast-section-above-builder-area,
body.bantu-plaza .ast-section-below-builder-area {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
body.bantu-plaza #primary,
body.bantu-plaza #primary > article,
body.bantu-plaza .ast-article-post,
body.bantu-plaza .ast-article-single,
body.bantu-plaza .entry-content { padding-bottom: 0 !important; }
body.bantu-plaza .entry-header { display: none !important; }

/* The first BP section on a page sits directly below the header bar -
   give it just enough internal padding so the hero card isn't flush
   against the navigation. Subsequent sections keep their default. */
body.bantu-plaza .bp-section:first-child,
body.bantu-plaza .entry-content > .bp-section:first-of-type { padding-top: 24px !important; }

/* Astra's "Separate container" body class wraps each article in a white
   card (background:#fff + box-shadow + padding) which created a thick
   white stripe between the header and our hero. On BP pages, dissolve
   the card so the cream body background flows continuously into the
   hero's gradient and nothing visually separates the menu from the
   content. */
body.bantu-plaza .ast-article-single,
body.bantu-plaza .ast-article-single:not(.ast-related-post),
body.bantu-plaza .ast-article-post,
body.bantu-plaza.ast-separate-container .ast-article-single,
body.bantu-plaza.ast-separate-container .ast-article-single:not(.ast-related-post) {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* And kill the horizontal gutter Astra adds via the inner ast-container. */
body.bantu-plaza.ast-separate-container #content .ast-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* =====================================================================
   4-column branded footer (rendered by [bp_footer_columns])
   ===================================================================== */
.bp-footer {
	background: var(--bp-cream);
	color: var(--bp-ink);
	font-family: var(--bp-font-body);
	border-top: 1px solid var(--bp-line);
	padding: 56px 24px 24px;
	margin-top: 32px;
}
.bp-footer-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 36px;
	text-align: left;
}
@media (max-width: 900px) {
	.bp-footer-inner { grid-template-columns: 1fr 1fr; }
	.bp-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
	.bp-footer-inner { grid-template-columns: 1fr; }
}

.bp-footer-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.bp-footer-logo img {
	height: 40px;
	width: auto;
	object-fit: contain;
}
.bp-wordmark {
	font-family: var(--bp-font-head);
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: 0.01em;
	color: var(--bp-ink);
}
.bp-wordmark-accent { color: var(--bp-brand-600); }

.bp-footer-tagline {
	font-size: 0.9rem;
	color: var(--bp-ink-soft);
	margin: 0 0 16px;
	max-width: 28rem;
	line-height: 1.55;
}
.bp-footer-contact {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	font-size: 0.88rem;
}
.bp-footer-contact li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 3px 0;
	color: var(--bp-ink-soft);
}
.bp-footer-contact a {
	color: var(--bp-ink-soft);
	text-decoration: none;
}
.bp-footer-contact a:hover { color: var(--bp-brand-700); }
.bp-footer-icon {
	color: var(--bp-brand-600);
	font-size: 0.95rem;
	line-height: 1.4;
	min-width: 1em;
}
.bp-footer-social {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}
.bp-footer-social-link {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bp-brand-100);
	color: var(--bp-brand-700);
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}
.bp-footer-social-link:hover {
	background: var(--bp-brand-500);
	color: #fff;
}

.bp-footer-col h4.bp-footer-h {
	font-family: var(--bp-font-head);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: var(--bp-ink);
	margin: 0 0 14px;
	text-transform: none;
}
.bp-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.88rem;
}
.bp-footer-col li { padding: 4px 0; }
.bp-footer-col a {
	color: var(--bp-ink-soft);
	text-decoration: none;
	transition: color 0.12s ease;
}
.bp-footer-col a:hover { color: var(--bp-brand-700); }
.bp-footer-safeguard {
	color: #be123c !important;
	font-weight: 600;
}

.bp-footer-bottom {
	max-width: 1180px;
	margin: 32px auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--bp-line);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 0.78rem;
	color: var(--bp-ink-soft);
}
.bp-footer-bottom-links {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.bp-footer-bottom-links a {
	color: var(--bp-ink-soft);
	text-decoration: none;
}
.bp-footer-bottom-links a:hover { color: var(--bp-brand-700); }

/* Astra's footer copyright text wraps this whole shortcode in a <div
   class="ast-small-footer-section-1"> - kill its centred layout so our
   grid takes over. */
.ast-small-footer { padding: 0; }
.ast-small-footer .ast-small-footer-wrap,
.ast-small-footer .ast-small-footer-section,
.ast-small-footer .ast-row { display: block; }
.ast-small-footer .ast-small-footer-section-2 { display: none; }
.ast-small-footer .bp-footer + .ast-small-footer-section { display: none; }

/* =====================================================================
   Prototype helpers - small utilities so plugin templates can render the
   landing / pricing / teach / faq layouts from the prototype without
   pulling in Tailwind. All utilities are namespaced `.bp-` so they don't
   collide with Astra/Elementor.
   ===================================================================== */
.bp-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
	background: var(--bp-brand-100); color: var(--bp-brand-700);
	border: 1px solid var(--bp-brand-100);
}
.bp-chip-ghost { background: #fff; border-color: var(--bp-line); color: var(--bp-brand-700); }
.bp-chip-ink { background: var(--bp-ink); color: var(--bp-cream); border-color: var(--bp-ink); }
.bp-chip-forest { background: #ECFDF5; color: var(--bp-forest-600); border-color: #BBF7D0; }

.bp-eyebrow {
	font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--bp-brand-700);
}

.bp-h1 { font-family: var(--bp-font-head); font-weight: 800; font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem); line-height: 1.15; margin: 0; }
.bp-h2 { font-family: var(--bp-font-head); font-weight: 800; font-size: clamp(1.35rem, 1.5vw + 0.75rem, 1.85rem); line-height: 1.2; margin: 0; }
.bp-h3 { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.15rem; margin: 0; }
.bp-lead { font-size: 1.1rem; color: var(--bp-ink-soft); line-height: 1.55; }
.bp-accent { color: var(--bp-brand-600); }
.bp-accent-forest { color: var(--bp-forest-600); }
.bp-text-center { text-align: center; }

.bp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .bp-grid-2, .bp-grid-3, .bp-grid-4 { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1100px) { .bp-grid-3, .bp-grid-4 { grid-template-columns: repeat(2, 1fr); } }

.bp-hero-warm {
	background:
		radial-gradient(circle at 12% -10%, rgba(233,124,24,0.18), transparent 55%),
		radial-gradient(circle at 105% 110%, rgba(5,150,105,0.12), transparent 60%),
		var(--bp-cream-deep);
	border-radius: 28px;
	padding: 56px 40px;
	margin: 24px 0;
}
.bp-hero-warm .bp-hero-grid {
	display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
}
@media (max-width: 900px) { .bp-hero-warm { padding: 36px 22px; } .bp-hero-warm .bp-hero-grid { grid-template-columns: 1fr; } }

.bp-trust-row {
	display: flex; flex-wrap: wrap; gap: 18px 28px;
	margin-top: 18px; font-size: 0.9rem; color: var(--bp-ink-soft);
}
.bp-trust-row .bp-trust-item { display: inline-flex; align-items: center; gap: 8px; }
.bp-trust-row .bp-trust-dot {
	display: inline-block; width: 8px; height: 8px; border-radius: 999px;
	background: var(--bp-forest-600);
}

.bp-stat-bar { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 32px; }
@media (max-width: 900px) { .bp-stat-bar { grid-template-columns: repeat(2, 1fr); } }
.bp-stat-bar .bp-stat { box-shadow: var(--bp-shadow-soft); }
.bp-stat .bp-stat-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bp-ink-soft); }
.bp-stat .bp-stat-big { font-family: var(--bp-font-head); font-weight: 800; font-size: 1.85rem; margin-top: 6px; }

.bp-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 32px; }
@media (max-width: 900px) { .bp-step-grid { grid-template-columns: 1fr; } }
.bp-step-card {
	position: relative; background: #fff; border: 1px solid var(--bp-line); border-radius: var(--bp-radius);
	padding: 24px; box-shadow: var(--bp-shadow-soft);
}
.bp-step-card .bp-step-num {
	position: absolute; top: -14px; left: 18px;
	width: 36px; height: 36px; border-radius: 999px;
	background: var(--bp-brand-600); color: #fff;
	display: inline-grid; place-items: center;
	font-family: var(--bp-font-head); font-weight: 800;
	box-shadow: var(--bp-shadow-soft);
}
.bp-step-card .bp-step-icon {
	width: 44px; height: 44px; border-radius: 12px;
	background: var(--bp-brand-100); color: var(--bp-brand-700);
	display: inline-grid; place-items: center; font-size: 1.2rem;
}
.bp-step-card h3 { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.15rem; margin: 14px 0 6px; }
.bp-step-card p { color: var(--bp-ink-soft); font-size: 0.92rem; line-height: 1.5; margin: 0; }

/* Reusable tier card (commission / pricing) */
.bp-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
@media (max-width: 900px) { .bp-tier-grid { grid-template-columns: 1fr; } }
.bp-tier {
	background: #fff; border: 1px solid var(--bp-line); border-radius: 24px;
	padding: 28px; box-shadow: var(--bp-shadow-soft);
	display: flex; flex-direction: column; gap: 14px; position: relative;
}
.bp-tier-dark { background: var(--bp-ink); color: var(--bp-cream); }
.bp-tier-dark .bp-tier-meta,
.bp-tier-dark .bp-tier-sub { color: rgba(255,251,244,0.6); }
.bp-tier-warm { background: linear-gradient(160deg, var(--bp-brand-100), #ffffff); border-color: rgba(233,124,24,0.25); }
.bp-tier .bp-tier-name { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.2rem; }
.bp-tier .bp-tier-meta { font-size: 0.9rem; color: var(--bp-ink-soft); }
.bp-tier .bp-tier-price { font-family: var(--bp-font-head); font-weight: 800; font-size: 2.4rem; color: var(--bp-forest-600); line-height: 1; }
.bp-tier-dark .bp-tier-price { color: #FFD8A8; }
.bp-tier-warm .bp-tier-price { color: var(--bp-brand-700); }
.bp-tier .bp-tier-sub { font-size: 0.85rem; color: var(--bp-ink-soft); }
.bp-tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; }
.bp-tier ul li::before { content: "✓"; color: var(--bp-forest-600); margin-right: 8px; font-weight: 700; }
.bp-tier-dark ul li::before { color: #FFD8A8; }
.bp-tier .bp-tier-tag {
	position: absolute; top: -12px; right: 22px;
	padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
	background: var(--bp-brand-500); color: #fff;
}
.bp-tier .bp-tier-tag-forest { background: var(--bp-forest-600); }
.bp-tier .bp-tier-tag-warm { background: var(--bp-brand-100); color: var(--bp-brand-700); }

/* Earnings calculator */
.bp-calc {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; margin-top: 40px;
}
@media (max-width: 900px) { .bp-calc { grid-template-columns: 1fr; } }
.bp-calc-controls { background: linear-gradient(160deg, var(--bp-brand-100), var(--bp-amber-50)); border: 1px solid rgba(233,124,24,0.25); border-radius: 24px; padding: 28px; box-shadow: var(--bp-shadow-soft); }
.bp-calc-result { background: var(--bp-ink); color: var(--bp-cream); border-radius: 24px; padding: 28px; box-shadow: var(--bp-shadow-card); position: relative; overflow: hidden; }
.bp-calc-result::after { content: ""; position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; background: rgba(233,124,24,0.18); filter: blur(48px); border-radius: 999px; pointer-events: none; }
.bp-calc-row { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.bp-calc-row-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; font-weight: 600; }
.bp-calc-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bp-calc-tiers button {
	border: 1px solid var(--bp-line); background: #fff; color: var(--bp-ink);
	padding: 10px 8px; border-radius: 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
	text-align: left; line-height: 1.25;
}
.bp-calc-tiers button[data-active="1"] { border-color: var(--bp-brand-500); box-shadow: 0 0 0 2px rgba(233,124,24,0.25); }
.bp-calc-tiers button small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--bp-ink-soft); margin-top: 2px; }
.bp-calc input[type="range"] { width: 100%; accent-color: var(--bp-brand-600); }
.bp-calc-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--bp-ink-soft); margin-top: 4px; }
.bp-calc-result .bp-calc-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 700; color: rgba(255,251,244,0.6); }
.bp-calc-result .bp-calc-monthly { font-family: var(--bp-font-head); font-weight: 800; font-size: 3rem; line-height: 1; margin-top: 8px; }
.bp-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; font-size: 0.85rem; }
.bp-calc-grid > div { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 14px; }
.bp-calc-grid .bp-calc-label { color: rgba(255,251,244,0.55); font-size: 0.75rem; }
.bp-calc-grid .bp-calc-value { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.2rem; margin-top: 4px; }
.bp-calc-result .bp-btn { width: 100%; margin-top: 22px; }

/* Dual CTA + final CTA */
.bp-dual-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 48px; }
@media (max-width: 900px) { .bp-dual-cta { grid-template-columns: 1fr; } }
.bp-cta-warm { background: linear-gradient(160deg, var(--bp-brand-100) 0%, var(--bp-amber-50) 50%, #fff 100%); border: 1px solid rgba(233,124,24,0.25); border-radius: 28px; padding: 36px; box-shadow: var(--bp-shadow-soft); }
.bp-cta-dark { background: linear-gradient(160deg, var(--bp-forest-600) 0%, #064E3B 60%, var(--bp-ink) 100%); color: var(--bp-cream); border-radius: 28px; padding: 36px; box-shadow: var(--bp-shadow-card); }
.bp-cta-dark .bp-lead { color: rgba(255,251,244,0.7); }
.bp-cta-dark .bp-chip { background: rgba(255,255,255,0.1); color: var(--bp-cream); border-color: rgba(255,255,255,0.18); }
.bp-cta-ink { background: var(--bp-ink); color: var(--bp-cream); border-radius: 28px; padding: 40px; text-align: center; margin-top: 48px; }
.bp-cta-ink .bp-lead { color: rgba(255,251,244,0.7); }
.bp-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.bp-btn-cream { background: var(--bp-brand-500); color: var(--bp-ink); }
.bp-btn-cream:hover { background: #ffb15a; color: var(--bp-ink); }
.bp-btn-onink { background: rgba(255,255,255,0.1); color: var(--bp-cream); border: 1px solid rgba(255,255,255,0.18); }
.bp-btn-onink:hover { background: rgba(255,255,255,0.18); color: var(--bp-cream); }

/* Testimonials */
.bp-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
@media (max-width: 900px) { .bp-testimonial-grid { grid-template-columns: 1fr; } }
.bp-testimonial { background: #fff; border: 1px solid var(--bp-line); border-radius: 20px; padding: 24px; box-shadow: var(--bp-shadow-soft); position: relative; }
.bp-testimonial::after { content: "“"; position: absolute; top: 6px; right: 18px; font-family: var(--bp-font-head); font-size: 4rem; color: var(--bp-brand-100); line-height: 1; pointer-events: none; }
.bp-testimonial-stars { color: #F59E0B; letter-spacing: 1px; font-size: 14px; margin-bottom: 8px; }
.bp-testimonial p { color: var(--bp-ink); font-size: 0.95rem; line-height: 1.55; margin: 0 0 16px; }
.bp-testimonial-author { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.bp-testimonial-avatar { width: 36px; height: 36px; border-radius: 999px; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--bp-font-head); font-size: 0.85rem; }

/* Why / value grid (e.g. landing "why African languages" panel) */
.bp-why { background: var(--bp-ink); color: var(--bp-cream); border-radius: 28px; padding: 48px 36px; margin: 48px 0; }
.bp-why .bp-eyebrow { color: #FFD8A8; }
.bp-why h2, .bp-why h3 { color: var(--bp-cream); }
.bp-why .bp-lead { color: rgba(255,251,244,0.7); }
.bp-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
.bp-why-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 18px; }
.bp-why-card .bp-why-icon { font-size: 1.6rem; }
.bp-why-card h4 { font-family: var(--bp-font-head); font-weight: 700; font-size: 1rem; margin: 8px 0 4px; color: var(--bp-cream); }
.bp-why-card p { font-size: 0.85rem; color: rgba(255,251,244,0.65); margin: 0; }
@media (max-width: 700px) { .bp-why-grid { grid-template-columns: 1fr; } .bp-why { padding: 32px 22px; } }

/* Email cards (contact) */
.bp-email-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
@media (max-width: 700px) { .bp-email-grid { grid-template-columns: 1fr; } }
.bp-email-card { display: block; background: #fff; border: 1px solid var(--bp-line); border-radius: 18px; padding: 18px; text-decoration: none; color: var(--bp-ink); box-shadow: var(--bp-shadow-soft); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.bp-email-card:hover { transform: translateY(-2px); box-shadow: var(--bp-shadow-card); color: var(--bp-ink); }
.bp-email-card .bp-email-title { font-family: var(--bp-font-head); font-weight: 700; font-size: 1rem; }
.bp-email-card p { font-size: 0.88rem; color: var(--bp-ink-soft); margin: 4px 0 6px; }
.bp-email-card .bp-email-addr { font-size: 0.85rem; font-weight: 600; color: var(--bp-brand-700); }

/* Policy hub tiles */
.bp-policy-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
@media (max-width: 900px) { .bp-policy-hub { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bp-policy-hub { grid-template-columns: 1fr; } }
.bp-policy-tile { display: block; background: #fff; border: 1px solid var(--bp-line); border-radius: 18px; padding: 22px; text-decoration: none; color: var(--bp-ink); box-shadow: var(--bp-shadow-soft); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.bp-policy-tile:hover { transform: translateY(-2px); box-shadow: var(--bp-shadow-card); color: var(--bp-ink); }
.bp-policy-tile .bp-policy-title { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.05rem; margin: 10px 0 4px; }
.bp-policy-tile p { font-size: 0.88rem; color: var(--bp-ink-soft); margin: 0; }

/* =====================================================================
   Photographic image helpers - used by hero / About / Teach / FAQ etc.
   to drop in real photography without breaking the brand's soft-cream
   shadow language. All photo wrappers crop with object-fit: cover and
   keep a generous radius + soft shadow.
   ===================================================================== */
.bp-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--bp-radius-lg);
}

/* Hero photo block - landing & teach hero side */
.bp-hero-photo {
	position: relative;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: var(--bp-shadow-card);
	min-height: 360px;
	background: var(--bp-cream-deep);
}
.bp-hero-photo > img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.bp-hero-photo::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(26,20,16,0) 55%, rgba(26,20,16,0.55) 100%);
	pointer-events: none;
}
.bp-hero-photo .bp-hero-photo-card {
	position: absolute; left: 16px; bottom: 16px; right: 16px;
	background: rgba(255,251,244,0.94);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 18px;
	padding: 14px 16px;
	display: flex; align-items: center; gap: 12px;
	box-shadow: var(--bp-shadow-soft);
}
.bp-hero-photo .bp-hero-photo-card .bp-hero-photo-emoji {
	width: 44px; height: 44px; border-radius: 999px;
	background: var(--bp-brand-100); color: var(--bp-brand-700);
	display: inline-grid; place-items: center; font-size: 1.1rem; flex-shrink: 0;
}
.bp-hero-photo .bp-hero-photo-card strong { display: block; font-family: var(--bp-font-head); font-size: 0.95rem; }
.bp-hero-photo .bp-hero-photo-card span { font-size: 0.78rem; color: var(--bp-ink-soft); }

/* Inline feature image - sits inside a card / panel */
.bp-feature-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--bp-radius);
	overflow: hidden;
	background: var(--bp-cream-deep);
	box-shadow: var(--bp-shadow-soft);
	margin-bottom: 14px;
}
.bp-feature-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Two-column image+text panel (About / mission) */
.bp-photo-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: center;
	margin: 32px 0;
}
.bp-photo-split.bp-photo-split-reverse { direction: rtl; }
.bp-photo-split.bp-photo-split-reverse > * { direction: ltr; }
.bp-photo-split .bp-photo-frame {
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--bp-shadow-card);
}
.bp-photo-split .bp-photo-frame img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 800px) {
	.bp-photo-split { grid-template-columns: 1fr; }
	.bp-photo-split.bp-photo-split-reverse { direction: ltr; }
}

/* Step card photo - top-of-card visual */
.bp-step-card.has-photo { padding-top: 0; overflow: hidden; }
.bp-step-card.has-photo .bp-step-photo {
	margin: -1px -24px 16px;
	height: 160px;
	overflow: hidden;
	background: var(--bp-cream-deep);
}
.bp-step-card.has-photo .bp-step-photo img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.bp-step-card.has-photo .bp-step-num { top: 12px; left: 18px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }

/* Tier card with photo banner */
.bp-tier.has-photo { padding-top: 0; overflow: hidden; }
.bp-tier.has-photo .bp-tier-photo {
	margin: -1px -28px 18px;
	height: 150px;
	overflow: hidden;
}
.bp-tier.has-photo .bp-tier-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-tier.has-photo .bp-tier-tag { top: 14px; }

/* Why-card with photo (landing dark section) */
.bp-why-photo {
	border-radius: 24px; overflow: hidden;
	aspect-ratio: 4 / 5;
	box-shadow: var(--bp-shadow-card);
	background: rgba(255,255,255,0.05);
}
.bp-why-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-why .bp-photo-split { margin: 0; }
.bp-why .bp-photo-split .bp-photo-frame { aspect-ratio: 4 / 5; }

/* Featured-strip - two large landscape photos under the dual CTA */
.bp-feature-strip {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 18px;
	margin: 32px 0;
}
.bp-feature-strip .bp-feature-strip-card {
	border-radius: 24px; overflow: hidden; position: relative;
	min-height: 280px; box-shadow: var(--bp-shadow-card);
}
.bp-feature-strip .bp-feature-strip-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-feature-strip .bp-feature-strip-card::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(26,20,16,0.05) 30%, rgba(26,20,16,0.7) 100%);
}
.bp-feature-strip .bp-feature-strip-text {
	position: absolute; left: 22px; right: 22px; bottom: 22px;
	color: var(--bp-cream); z-index: 1;
}
.bp-feature-strip .bp-feature-strip-text .bp-eyebrow { color: #FFD8A8; }
.bp-feature-strip .bp-feature-strip-text h3 { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.4rem; margin: 6px 0 2px; color: var(--bp-cream); }
.bp-feature-strip .bp-feature-strip-text p { font-size: 0.9rem; color: rgba(255,251,244,0.85); margin: 0; }
@media (max-width: 800px) { .bp-feature-strip { grid-template-columns: 1fr; } }

/* Contact-page hero side photo */
.bp-contact-photo {
	border-radius: 24px; overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--bp-shadow-soft);
	margin-top: 16px;
}
.bp-contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- A11y: visible keyboard focus everywhere ----------
   Brand layer ships no focus rings; relying on UA defaults means keyboard
   users have no indication of where they are. One low-specificity rule covers
   every interactive surface the brand exposes. :focus-visible keeps mouse
   users from seeing rings on click. */
.bp-btn:focus-visible,
.bp-form input:focus-visible,
.bp-form select:focus-visible,
.bp-form textarea:focus-visible,
.bp-filters input:focus-visible,
.bp-filters select:focus-visible,
.bp-dash-nav a:focus-visible,
.bp-lang-tile:focus-visible,
.bp-faq summary:focus-visible,
.bp-footer-social-link:focus-visible,
.bp-tutor-card a:focus-visible {
	outline: 2px solid var(--bp-brand-600);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =====================================================================
   Complianz cookie banner - re-skinned to match Bantu Plaza palette so
   the legal hub feels uniform. Touches: consent banner, accept/deny
   buttons, revoke link, cookie-table on /cookies/.
   ===================================================================== */
.cmplz-cookiebanner,
.cmplz-cookiebanner.banner-1,
.cmplz-cookiebanner.banner-1.cmplz-categories {
	background: var(--bp-cream, #FFFBF4) !important;
	color: var(--bp-ink, #1A1410) !important;
	border: 1px solid var(--bp-line, rgba(26,20,16,0.08)) !important;
	border-radius: 16px !important;
	box-shadow: 0 18px 40px -20px rgba(26,20,16,0.25), 0 4px 12px -4px rgba(26,20,16,0.08) !important;
	font-family: inherit !important;
}
.cmplz-cookiebanner .cmplz-header .cmplz-title,
.cmplz-cookiebanner .cmplz-title {
	color: var(--bp-ink, #1A1410) !important;
	font-family: var(--bp-font-head, inherit) !important;
	font-weight: 800 !important;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner p {
	color: var(--bp-ink-soft, rgba(26,20,16,0.75)) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}
.cmplz-cookiebanner a,
.cmplz-cookiebanner .cmplz-links a {
	color: var(--bp-brand-700, #9F4710) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}
.cmplz-cookiebanner a:hover {
	color: var(--bp-brand-600, #C95F0E) !important;
}
.cmplz-cookiebanner .cmplz-buttons button,
.cmplz-cookiebanner .cmplz-accept,
.cmplz-cookiebanner .cmplz-deny,
.cmplz-cookiebanner .cmplz-accept-preferences,
.cmplz-cookiebanner .cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-view-preferences {
	border-radius: 12px !important;
	font-weight: 600 !important;
	padding: 10px 18px !important;
	min-height: 44px !important;
	font-family: inherit !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.cmplz-cookiebanner .cmplz-accept,
.cmplz-cookiebanner .cmplz-accept-all,
.cmplz-cookiebanner .cmplz-save-preferences {
	background: var(--bp-brand-600, #C95F0E) !important;
	color: #fff !important;
	border: 1px solid var(--bp-brand-600, #C95F0E) !important;
}
.cmplz-cookiebanner .cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-accept-all:hover,
.cmplz-cookiebanner .cmplz-save-preferences:hover {
	background: var(--bp-brand-700, #9F4710) !important;
	border-color: var(--bp-brand-700, #9F4710) !important;
}
.cmplz-cookiebanner .cmplz-deny {
	background: transparent !important;
	color: var(--bp-ink, #1A1410) !important;
	border: 1px solid var(--bp-line, rgba(26,20,16,0.15)) !important;
}
.cmplz-cookiebanner .cmplz-deny:hover {
	background: var(--bp-cream-deep, #FFF5E1) !important;
}
.cmplz-cookiebanner .cmplz-view-preferences {
	background: transparent !important;
	color: var(--bp-brand-700, #9F4710) !important;
	border: 1px solid var(--bp-brand-100, #FFEFD2) !important;
}
.cmplz-cookiebanner .cmplz-view-preferences:hover {
	background: var(--bp-brand-100, #FFEFD2) !important;
}
.cmplz-cookiebanner .cmplz-categories input[type="checkbox"] + .cmplz-slider {
	background: var(--bp-line, rgba(26,20,16,0.2)) !important;
}
.cmplz-cookiebanner .cmplz-categories input[type="checkbox"]:checked + .cmplz-slider {
	background: var(--bp-brand-600, #C95F0E) !important;
}

/* Cookie-table shortcode on /cookies/ */
.cmplz-cookies,
.cmplz-cookies-overview,
.cmplz-document {
	font-family: inherit !important;
	color: var(--bp-ink) !important;
}
.cmplz-cookies th,
.cmplz-cookies-overview th {
	background: var(--bp-cream-deep, #FFF5E1) !important;
	color: var(--bp-ink, #1A1410) !important;
	font-family: var(--bp-font-head, inherit) !important;
	font-weight: 700 !important;
	border-bottom: 1px solid var(--bp-line, rgba(26,20,16,0.1)) !important;
}
.cmplz-cookies td,
.cmplz-cookies-overview td {
	border-bottom: 1px solid var(--bp-line, rgba(26,20,16,0.05)) !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	color: var(--bp-ink-soft, rgba(26,20,16,0.75)) !important;
}
.cmplz-cookies-overview {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--bp-line, rgba(26,20,16,0.08));
}

/* Inline revoke link (when used on /legal/ + /cookies/) */
.cmplz-manage-consent,
.cmplz-revoke-link,
a.cmplz-manage-consent,
a.cmplz-revoke-link {
	display: inline-block !important;
	padding: 10px 16px !important;
	border-radius: 10px !important;
	background: var(--bp-cream-deep, #FFF5E1) !important;
	color: var(--bp-brand-700, #9F4710) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border: 1px solid var(--bp-brand-100, #FFEFD2) !important;
	transition: background .15s ease, color .15s ease !important;
	cursor: pointer !important;
}
.cmplz-manage-consent:hover,
.cmplz-revoke-link:hover {
	background: var(--bp-brand-100, #FFEFD2) !important;
	color: var(--bp-brand-600, #C95F0E) !important;
}

/* =====================================================================
   Complianz cookie banner - re-skin to match Bantu Plaza brand palette.
   Targets the consent banner + revoke-link + cookie-table shortcodes so
   the legal hub feels uniform with the rest of the site.
   ===================================================================== */
.cmplz-cookiebanner,
.cmplz-cookiebanner.banner-1,
.cmplz-cookiebanner.banner-1.cmplz-categories {
	background: var(--bp-cream, #FFFBF4) !important;
	color: var(--bp-ink, #1A1410) !important;
	border: 1px solid var(--bp-line, rgba(26,20,16,0.08)) !important;
	border-radius: 16px !important;
	box-shadow: 0 18px 40px -20px rgba(26,20,16,0.25), 0 4px 12px -4px rgba(26,20,16,0.08) !important;
	font-family: inherit !important;
}
.cmplz-cookiebanner .cmplz-header .cmplz-title,
.cmplz-cookiebanner .cmplz-title {
	color: var(--bp-ink, #1A1410) !important;
	font-family: var(--bp-font-head, inherit) !important;
	font-weight: 800 !important;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner p {
	color: var(--bp-ink-soft, rgba(26,20,16,0.75)) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}
.cmplz-cookiebanner a,
.cmplz-cookiebanner .cmplz-links a,
.cmplz-revoke-link {
	color: var(--bp-brand-700, #9F4710) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}
.cmplz-cookiebanner a:hover,
.cmplz-revoke-link:hover {
	color: var(--bp-brand-600, #C95F0E) !important;
}
.cmplz-cookiebanner .cmplz-buttons button,
.cmplz-cookiebanner .cmplz-accept,
.cmplz-cookiebanner .cmplz-deny,
.cmplz-cookiebanner .cmplz-accept-preferences,
.cmplz-cookiebanner .cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-view-preferences {
	border-radius: 12px !important;
	font-weight: 600 !important;
	padding: 10px 18px !important;
	min-height: 44px !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.cmplz-cookiebanner .cmplz-accept {
	background: var(--bp-brand-600, #C95F0E) !important;
	color: #fff !important;
	border: 1px solid var(--bp-brand-600, #C95F0E) !important;
}
.cmplz-cookiebanner .cmplz-accept:hover {
	background: var(--bp-brand-700, #9F4710) !important;
	border-color: var(--bp-brand-700, #9F4710) !important;
}
.cmplz-cookiebanner .cmplz-deny {
	background: transparent !important;
	color: var(--bp-ink, #1A1410) !important;
	border: 1px solid var(--bp-line, rgba(26,20,16,0.15)) !important;
}
.cmplz-cookiebanner .cmplz-deny:hover {
	background: var(--bp-cream-deep, #FFF5E1) !important;
}
.cmplz-cookiebanner .cmplz-view-preferences {
	background: transparent !important;
	color: var(--bp-brand-700, #9F4710) !important;
	border: 1px solid var(--bp-brand-100, #FFEFD2) !important;
}
.cmplz-cookiebanner .cmplz-view-preferences:hover {
	background: var(--bp-brand-100, #FFEFD2) !important;
}
.cmplz-cookiebanner .cmplz-categories input[type="checkbox"] + .cmplz-slider {
	background: var(--bp-line, rgba(26,20,16,0.2)) !important;
}
.cmplz-cookiebanner .cmplz-categories input[type="checkbox"]:checked + .cmplz-slider {
	background: var(--bp-brand-600, #C95F0E) !important;
}

/* Cookie-table shortcode on /cookies/ */
.cmplz-cookies,
.cmplz-cookies-overview,
.cmplz-document {
	font-family: inherit !important;
}
.cmplz-cookies th,
.cmplz-cookies-overview th {
	background: var(--bp-cream-deep, #FFF5E1) !important;
	color: var(--bp-ink, #1A1410) !important;
	font-family: var(--bp-font-head, inherit) !important;
	font-weight: 700 !important;
	border-bottom: 1px solid var(--bp-line, rgba(26,20,16,0.1)) !important;
}
.cmplz-cookies td,
.cmplz-cookies-overview td {
	border-bottom: 1px solid var(--bp-line, rgba(26,20,16,0.05)) !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	color: var(--bp-ink-soft, rgba(26,20,16,0.75)) !important;
}
.cmplz-cookies-overview { border-radius: 12px; overflow: hidden; border: 1px solid var(--bp-line, rgba(26,20,16,0.08)); }

/* Inline revoke link (when used as a regular anchor on /legal/ + /cookies/) */
.cmplz-manage-consent,
.cmplz-revoke-link {
	display: inline-block !important;
	padding: 8px 14px !important;
	border-radius: 10px !important;
	background: var(--bp-cream-deep, #FFF5E1) !important;
	color: var(--bp-brand-700, #9F4710) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border: 1px solid var(--bp-brand-100, #FFEFD2) !important;
	transition: background 0.15s ease !important;
}
.cmplz-manage-consent:hover,
.cmplz-revoke-link:hover {
	background: var(--bp-brand-100, #FFEFD2) !important;
	color: var(--bp-brand-600, #C95F0E) !important;
}

/* =====================================================================
 * WooCommerce brand alignment (2026-05-25 audit: WC-1, WC-2, WC-4)
 *
 * The cart / checkout / my-account flows render through WC's default
 * templates, which ship a generic purple/blue button palette. We override
 * just enough to keep these pages visually consistent with the rest of
 * Bantu Plaza (warm cream background + brand-orange CTAs + forest accent),
 * without rewriting WC's templates.
 *
 * Scoped via the `.bantu-plaza` body class (added by the body_class filter
 * in bantu-plaza-core.php) so the overrides cannot leak into admin or
 * non-BP pages on multisite installs.
 * ================================================================== */

.bantu-plaza.woocommerce a.button,
.bantu-plaza.woocommerce-page a.button,
.bantu-plaza.woocommerce button.button,
.bantu-plaza.woocommerce-page button.button,
.bantu-plaza.woocommerce input.button,
.bantu-plaza.woocommerce-page input.button,
.bantu-plaza.woocommerce #respond input#submit,
.bantu-plaza.woocommerce-page #respond input#submit,
.bantu-plaza.woocommerce #place_order,
.bantu-plaza.woocommerce-page #place_order {
	background-color: var(--bp-brand-600, #C95F0E) !important;
	color: #fff !important;
	border-radius: 12px !important;
	border: 1px solid rgba(95, 43, 18, 0.25) !important;
	padding: 12px 20px !important;
	font-weight: 600 !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: 14px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: 0 2px 6px rgba(20, 15, 10, 0.10) !important;
	transition: background-color 0.18s ease, box-shadow 0.22s ease, transform 0.18s ease !important;
}
.bantu-plaza.woocommerce a.button:hover,
.bantu-plaza.woocommerce-page a.button:hover,
.bantu-plaza.woocommerce button.button:hover,
.bantu-plaza.woocommerce-page button.button:hover,
.bantu-plaza.woocommerce input.button:hover,
.bantu-plaza.woocommerce-page input.button:hover,
.bantu-plaza.woocommerce #respond input#submit:hover,
.bantu-plaza.woocommerce-page #respond input#submit:hover,
.bantu-plaza.woocommerce #place_order:hover,
.bantu-plaza.woocommerce-page #place_order:hover {
	background-color: var(--bp-brand-700, #9F4710) !important;
	box-shadow: 0 6px 20px rgba(201, 95, 14, 0.28), 0 2px 6px rgba(20, 15, 10, 0.10) !important;
	transform: translateY(-1px);
}

/* "Place order" should be the most prominent - slightly larger + forest
   confirmation tint on hover, so users know this is the commit action. */
.bantu-plaza.woocommerce #place_order,
.bantu-plaza.woocommerce-page #place_order {
	padding: 14px 28px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
}

/* Form inputs: cream background, brand-orange focus ring - match the
   rest of the site so the checkout doesn't feel like a different app. */
.bantu-plaza.woocommerce form .form-row input.input-text,
.bantu-plaza.woocommerce form .form-row textarea,
.bantu-plaza.woocommerce form .form-row select,
.bantu-plaza.woocommerce-page form .form-row input.input-text,
.bantu-plaza.woocommerce-page form .form-row textarea,
.bantu-plaza.woocommerce-page form .form-row select {
	border-radius: 12px !important;
	border: 2px solid #FDD9A0 !important;
	background-color: #fff !important;
	padding: 10px 14px !important;
	font-family: inherit !important;
	transition: border-color 0.18s ease, box-shadow 0.22s ease !important;
}
.bantu-plaza.woocommerce form .form-row input.input-text:focus,
.bantu-plaza.woocommerce form .form-row textarea:focus,
.bantu-plaza.woocommerce form .form-row select:focus,
.bantu-plaza.woocommerce-page form .form-row input.input-text:focus,
.bantu-plaza.woocommerce-page form .form-row textarea:focus,
.bantu-plaza.woocommerce-page form .form-row select:focus {
	border-color: var(--bp-brand-500, #E97C18) !important;
	outline: none !important;
	box-shadow: 0 0 0 4px rgba(233, 124, 24, 0.18) !important;
}

/* Notices: brand-tinted, with room for WC's status icon (left) and a dismiss
   button (right) so neither overlaps the message text. The padding override
   used to drop WC's left gutter, which left the icon sitting on the words. */
.bantu-plaza.woocommerce .woocommerce-message,
.bantu-plaza.woocommerce-page .woocommerce-message,
.bantu-plaza.woocommerce .woocommerce-info,
.bantu-plaza.woocommerce-page .woocommerce-info,
.bantu-plaza.woocommerce .woocommerce-error,
.bantu-plaza.woocommerce-page .woocommerce-error {
	position: relative !important;
	border-radius: 12px !important;
	color: #1A1410 !important;
	padding: 15px 46px 15px 52px !important;
	line-height: 1.6 !important;
}
.bantu-plaza.woocommerce .woocommerce-message::before,
.bantu-plaza.woocommerce-page .woocommerce-message::before,
.bantu-plaza.woocommerce .woocommerce-info::before,
.bantu-plaza.woocommerce-page .woocommerce-info::before,
.bantu-plaza.woocommerce .woocommerce-error::before,
.bantu-plaza.woocommerce-page .woocommerce-error::before {
	left: 18px !important;
	top: 16px !important;
	margin: 0 !important;
}
.bantu-plaza.woocommerce .woocommerce-message,
.bantu-plaza.woocommerce-page .woocommerce-message {
	background-color: var(--bp-brand-50, #FFF8EC) !important;
	border-top-color: var(--bp-brand-600, #C95F0E) !important;
}
.bantu-plaza.woocommerce .woocommerce-info,
.bantu-plaza.woocommerce-page .woocommerce-info {
	background-color: #FFF5E1 !important;
	border-top-color: var(--bp-brand-500, #E97C18) !important;
}
.bantu-plaza.woocommerce .woocommerce-error,
.bantu-plaza.woocommerce-page .woocommerce-error {
	border-top-color: #B91C1C !important;
}
/* "Undo" / action button on a notice keeps to the right, not full width. */
.bantu-plaza.woocommerce .woocommerce-message a.button,
.bantu-plaza.woocommerce-page .woocommerce-message a.button {
	float: right;
	margin: -4px 0 0 12px;
}
/* JS-injected dismiss button (see BP_WooCommerce::notice_dismiss_script). */
.bp-notice-dismiss {
	position: absolute;
	top: 11px;
	right: 12px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bp-ink-soft, rgba(26,20,16,0.55));
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
	border-radius: 6px;
}
.bp-notice-dismiss:hover { background: rgba(26,20,16,0.08); color: var(--bp-ink, #1A1410); }

/* Cart + checkout table cells: tighter typography, brand line color. */
.bantu-plaza.woocommerce table.shop_table,
.bantu-plaza.woocommerce-page table.shop_table {
	border-radius: 16px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: 1px solid #FFEFD2 !important;
	overflow: hidden;
}
.bantu-plaza.woocommerce table.shop_table th,
.bantu-plaza.woocommerce-page table.shop_table th {
	background-color: var(--bp-brand-50, #FFF8EC) !important;
	color: var(--bp-brand-700, #9F4710) !important;
	font-family: 'Plus Jakarta Sans', Inter, system-ui !important;
	font-size: 13px !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* My-account navigation: tab-like pills in brand colors. */
.bantu-plaza.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 24px !important;
}
.bantu-plaza.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px !important;
	border-radius: 10px !important;
	color: rgba(26, 20, 16, 0.72) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin-bottom: 4px;
	transition: background 0.18s ease, color 0.18s ease !important;
}
.bantu-plaza.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.bantu-plaza.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--bp-brand-50, #FFF8EC) !important;
	color: var(--bp-brand-700, #9F4710) !important;
}

/* Constrain cart / checkout / account to a centered, readable column - the
   theme's page.php renders the WC shortcode full-bleed otherwise. */
.bantu-plaza.woocommerce-cart .site-main > .woocommerce,
.bantu-plaza.woocommerce-checkout .site-main > .woocommerce,
.bantu-plaza.woocommerce-account .site-main > .woocommerce {
	max-width: 1080px;
	margin: 36px auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Cart totals + checkout order-review as branded cards. */
.bantu-plaza.woocommerce .cart_totals,
.bantu-plaza.woocommerce #order_review {
	background: #fff;
	border: 1px solid var(--bp-line);
	border-radius: var(--bp-radius-lg);
	box-shadow: var(--bp-shadow-soft);
	padding: 22px 24px;
}
.bantu-plaza.woocommerce .cart_totals h2,
.bantu-plaza.woocommerce #order_review_heading {
	font-family: var(--bp-font-head);
	font-size: 18px;
	margin-top: 0;
}
.bantu-plaza.woocommerce .order-total .woocommerce-Price-amount,
.bantu-plaza.woocommerce .cart_totals .order-total td {
	color: var(--bp-brand-700);
	font-weight: 800;
}
/* Proceed-to-checkout = full-width primary CTA on the cart. */
.bantu-plaza.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	font-size: 16px !important;
}
.bantu-plaza.woocommerce-cart .cart-empty { font-size: 16px; }
/* Make the in-line cart-item links (tutor name, "Change time or tutor") read
   as links so students can click back to the profile. */
.bantu-plaza.woocommerce td.product-name dl.variation a,
.bantu-plaza.woocommerce .woocommerce-checkout-review-order-table dl.variation a {
	color: var(--bp-brand-700) !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* Lessons / bundles are virtual (no image) - drop the empty thumbnail column. */
.bantu-plaza.woocommerce-cart table.cart td.product-thumbnail,
.bantu-plaza.woocommerce-cart table.cart th.product-thumbnail { display: none; }
/* Checkout: give the two columns breathing room on wide screens. */
@media (min-width: 769px) {
	.bantu-plaza.woocommerce-checkout #customer_details { padding-right: 8px; }
}

/* ---------- Prepaid hour bundles ---------- */
.bp-bundle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-top: 14px;
}
.bp-bundle-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px;
	border: 1px solid var(--bp-line);
	border-radius: var(--bp-radius);
	background: #fff;
	box-shadow: var(--bp-shadow-soft);
	text-decoration: none;
	color: var(--bp-ink);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.bp-bundle-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--bp-shadow-card);
	border-color: var(--bp-brand-500);
	color: var(--bp-ink);
}
.bp-bundle-hours { font-family: var(--bp-font-head); font-weight: 700; font-size: 15px; }
.bp-bundle-price { font-family: var(--bp-font-head); font-weight: 800; font-size: 22px; color: var(--bp-brand-700); }
.bp-bundle-meta  { font-size: 12px; color: var(--bp-ink-soft); }

/* Bundle weekly scheduler */
.bp-bsched { background: var(--bp-cream-deep, #FFF5E1); border: 1px solid var(--bp-line); border-radius: var(--bp-radius-lg); padding: 18px; margin-top: 14px; }
.bp-bsched-row { margin-bottom: 16px; }
.bp-bsched-row:last-of-type { margin-bottom: 12px; }
.bp-bsched-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bp-ink-soft); margin-bottom: 8px; }
.bp-bsched-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-bsched-pill { padding: 9px 15px; border: 1px solid var(--bp-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1; color: var(--bp-ink); cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.bp-bsched-pill:hover { border-color: var(--bp-brand-500); }
.bp-bsched-pill.is-on { background: var(--bp-brand-600); border-color: var(--bp-brand-600); color: #fff; }
.bp-bsched-grid { display: grid; grid-template-columns: 52px repeat(7, 1fr); gap: 3px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--bp-line); border-radius: 12px; padding: 8px; }
.bp-bsched-dhead { text-align: center; font-size: 11px; font-weight: 700; color: var(--bp-ink-soft); padding: 2px 0; }
.bp-bsched-hhead { font-size: 11px; color: var(--bp-ink-soft); display: flex; align-items: center; }
.bp-bsched-cell { min-height: 30px; border-radius: 7px; border: 2px solid rgb(233 124 24); background: #fdecd6; cursor: pointer; padding: 0; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.bp-bsched-cell:not(.is-off):hover { border-color: rgb(201 95 14); background: #fbdcb5; }
.bp-bsched-cell.is-sel { background: linear-gradient(180deg, rgb(233 124 24), rgb(201 95 14)) !important; border-color: rgb(201 95 14) !important; box-shadow: 0 2px 7px rgba(201,95,14,.45); }
.bp-bsched-cell.is-off { border: 0; background: transparent; color: rgba(26,20,16,0.25); text-align: center; cursor: default; min-height: 26px; line-height: 26px; }
.bp-bsched-summary { font-size: 14px; margin: 2px 0 10px; }
.bp-bsched-summary:empty { display: none; }
.bp-bsched-error { margin: 2px 0 10px; }
.bp-bsched-add { width: 100%; }

/* =====================================================================
   Tutor booking page - 2-column layout with a sticky booking card, and a
   polished slot picker (branded selects, tap-friendly time pills, segmented
   funding toggle). Makes booking the clear primary action on the profile.
   ===================================================================== */
/* Scoped to the booking/profile layout only (the grid that holds the sticky
   aside). Without :has() this rule shared the .bp-tutor-grid name with the
   tutor-CARD grid and overrode it everywhere with align-items:start, making
   the homepage/find-tutors cards unequal heights. */
.bp-tutor-grid:has(> .bp-tutor-aside) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 32px;
	align-items: start;
	margin-top: 24px;
}
.bp-tutor-main { min-width: 0; }
.bp-tutor-aside { position: sticky; top: 24px; }
@media (max-width: 980px) {
	.bp-tutor-grid:has(> .bp-tutor-aside) { grid-template-columns: 1fr; gap: 20px; }
	/* On narrow screens drop the booking card to the top so it's the first
	   thing a student sees, and let it scroll with the page. */
	.bp-tutor-aside { position: static; order: -1; }
}

/* The booking card itself */
.bp-booking-picker {
	background: #fff;
	border: 1px solid var(--bp-line);
	border-radius: var(--bp-radius-lg);
	box-shadow: var(--bp-shadow-card);
	padding: 22px 22px 24px;
}
.bp-booking-picker > h3 {
	font-family: var(--bp-font-head);
	font-weight: 800;
	font-size: 19px;
	margin: 0;
	letter-spacing: -0.01em;
}
.bp-booking-picker .bp-form-row { gap: 7px; margin-top: 16px; }
.bp-booking-picker .bp-form-row > label,
.bp-picker-funding-row > label:first-child {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bp-ink-soft);
	margin: 0;
}

/* Branded selects (lesson type / day) - the picker isn't inside .bp-form,
   so it needs its own control styling. */
.bp-booking-picker select {
	width: 100%;
	min-height: 46px;
	padding: 11px 38px 11px 14px;
	border: 1px solid var(--bp-line);
	border-radius: 12px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	color: var(--bp-ink);
	font-size: 15px;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.bp-booking-picker select:focus {
	outline: none;
	border-color: var(--bp-brand-500);
	box-shadow: 0 0 0 3px var(--bp-brand-100);
}

/* Time slots - tappable pills (native radio hidden). */
.bp-picker-time-group { display: flex; flex-wrap: wrap; gap: 8px; max-height: 168px; overflow-y: auto; }
.bp-picker-time {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	padding: 9px 12px;
	border: 2px solid rgb(233 124 24);
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--bp-ink);
	cursor: pointer;
	user-select: none;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.bp-picker-time input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bp-picker-time:hover { border-color: var(--bp-brand-500); background: var(--bp-brand-100); }
.bp-picker-time:has(input:checked) { background: var(--bp-brand-600); border-color: var(--bp-brand-600); color: #fff; }
.bp-picker-time:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--bp-brand-100); }

/* "Pay with" funding toggle (bundle vs pay-per-lesson) as a segmented set. */
.bp-picker-funding-row { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bp-picker-funding-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--bp-line);
	border-radius: 10px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}
.bp-picker-funding-opt:has(input:checked) { border-color: var(--bp-brand-500); background: var(--bp-brand-100); }
.bp-picker-funding-opt input { width: 16px; height: 16px; accent-color: var(--bp-brand-600); margin: 0; }
.bp-picker-funding-opt input:disabled + span { color: var(--bp-ink-soft); opacity: 0.6; }

/* Summary line + full-width primary CTA. */
.bp-booking-picker .bp-picker-summary { font-size: 13px; margin-top: 14px; font-style: normal; }
.bp-booking-picker .bp-picker-book { width: 100%; margin-top: 12px; padding: 14px; font-size: 16px; }

/* ===== Dashboard polish (2026-06-06): cards, buttons, stats, tabs ===== */
.bp-card{ border-radius: var(--bp-radius-lg); box-shadow: var(--bp-shadow-soft); transition: box-shadow .2s ease, transform .2s ease; }
.bp-card:hover{ box-shadow: var(--bp-shadow-card); }
.bp-btn{ padding: 12px 22px; box-shadow: 0 1px 2px rgba(26,20,16,0.06); transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease; }
.bp-btn:active{ transform: translateY(1px); }
.bp-btn-primary{ background: linear-gradient(180deg, var(--bp-brand-500), var(--bp-brand-600)); border-color: var(--bp-brand-600); box-shadow: 0 8px 18px -8px rgba(201,95,14,0.5); }
.bp-btn-primary:hover{ background: linear-gradient(180deg, var(--bp-brand-600), var(--bp-brand-700)); box-shadow: 0 12px 24px -8px rgba(201,95,14,0.55); transform: translateY(-1px); color: #fff; }
.bp-btn-ghost{ box-shadow: none; }
.bp-btn-ghost:hover{ background: var(--bp-brand-50, #FFF8EC); border-color: var(--bp-brand-500); color: var(--bp-brand-700); transform: translateY(-1px); }
.bp-stat{ background: #fff; border: 1px solid var(--bp-line); border-top: 3px solid var(--bp-brand-500); border-radius: var(--bp-radius-lg); padding: 18px 20px; box-shadow: var(--bp-shadow-soft); transition: box-shadow .2s ease, transform .2s ease; }
.bp-stat:hover{ box-shadow: var(--bp-shadow-card); transform: translateY(-2px); }
.bp-dash-nav a{ transition: background-color .15s ease, color .15s ease; }
.bp-dash-nav a:hover{ background: var(--bp-brand-50, #FFF8EC); color: var(--bp-brand-700); }
.bp-dash-nav a.is-active{ box-shadow: inset 3px 0 0 var(--bp-brand-600); font-weight: 600; }
.bp-tag{ font-weight: 600; }
.bp-eyebrow{ color: var(--bp-brand-700); }
/* ===== Level tabs (CSS-only, 2026-06-06) ===== */
.bp-leveltabs{ margin:10px 0 0; }
.bp-leveltabs > input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.bp-leveltabs-nav{ display:flex; flex-wrap:wrap; gap:2px; margin-bottom:18px; border-bottom:2px solid var(--bp-line); }
.bp-leveltabs-nav label{ cursor:pointer; padding:10px 18px; font-weight:600; font-size:14px; color:var(--bp-ink-soft); background:transparent; border:0; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .15s ease, border-color .15s ease; }
.bp-leveltabs-nav label:hover{ color:var(--bp-brand-700); border-bottom-color:var(--bp-brand-100); }
.bp-leveltab-panel{ display:none; background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-radius-lg); padding:18px 20px; }
.bp-leveltabs > input:nth-of-type(1):checked ~ .bp-panels > .bp-leveltab-panel:nth-of-type(1),
.bp-leveltabs > input:nth-of-type(2):checked ~ .bp-panels > .bp-leveltab-panel:nth-of-type(2),
.bp-leveltabs > input:nth-of-type(3):checked ~ .bp-panels > .bp-leveltab-panel:nth-of-type(3),
.bp-leveltabs > input:nth-of-type(4):checked ~ .bp-panels > .bp-leveltab-panel:nth-of-type(4),
.bp-leveltabs > input:nth-of-type(5):checked ~ .bp-panels > .bp-leveltab-panel:nth-of-type(5),
.bp-leveltabs > input:nth-of-type(6):checked ~ .bp-panels > .bp-leveltab-panel:nth-of-type(6){ display:block; }
.bp-leveltabs > input:nth-of-type(1):checked ~ .bp-leveltabs-nav > label:nth-of-type(1),
.bp-leveltabs > input:nth-of-type(2):checked ~ .bp-leveltabs-nav > label:nth-of-type(2),
.bp-leveltabs > input:nth-of-type(3):checked ~ .bp-leveltabs-nav > label:nth-of-type(3),
.bp-leveltabs > input:nth-of-type(4):checked ~ .bp-leveltabs-nav > label:nth-of-type(4),
.bp-leveltabs > input:nth-of-type(5):checked ~ .bp-leveltabs-nav > label:nth-of-type(5),
.bp-leveltabs > input:nth-of-type(6):checked ~ .bp-leveltabs-nav > label:nth-of-type(6){ color:var(--bp-brand-700); border-bottom-color:var(--bp-brand-600); font-weight:700; }
.bp-leveltabs > input:focus-visible ~ .bp-leveltabs-nav label{ outline:none; }
/* ===== Syllabus level tiles (collapsible, colour-coded) 2026-06-06 ===== */
.bp-syl-level{ margin:0 0 10px; border:1px solid var(--bp-line); border-radius:var(--bp-radius-lg); overflow:hidden; background:#fff; box-shadow:var(--bp-shadow-soft); }
.bp-syl-tile{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:14px 18px; }
.bp-syl-tile::-webkit-details-marker{ display:none; }
.bp-syl-tile::marker{ content:''; }
.bp-syl-code{ font-weight:800; font-size:15px; padding:7px 13px; border-radius:10px; min-width:30px; text-align:center; letter-spacing:.5px; }
.bp-syl-meta{ display:flex; flex-direction:column; flex:1; min-width:0; }
.bp-syl-name{ font-weight:700; font-size:15px; }
.bp-syl-count{ font-size:12px; color:var(--bp-ink-soft); }
.bp-syl-chev{ font-size:26px; line-height:1; color:var(--bp-ink-soft); transition:transform .2s ease; }
.bp-syl-level[open] .bp-syl-chev{ transform:rotate(90deg); }
.bp-syl-body{ padding:14px 20px 20px; }