/*
Theme Name: BrainTrainr
Theme URI: https://braintrainr.ai
Description: BrainTrainr block theme. Design tokens in theme.json, reusable section layouts in patterns/, page content stays editable in WordPress.
Author: BrainTrainr
Version: 0.13.1
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: braintrainr
*/

/* =========================================================================
   BrainTrainr stylesheet
   -------------------------------------------------------------------------
   Standalone block theme as of v0.9.0 (was a child of hostinger-ai-theme).

   Page content is real Gutenberg blocks stored in WordPress, so this file
   styles BOTH:
     - our own `bt-*` hooks, set via each block's `className` attribute
     - the wrappers Gutenberg generates around them (.wp-block-columns,
       .wp-block-column, .wp-block-button__link, .wp-block-image, …)

   That pairing is deliberate. Do not strip the .wp-block-* selectors: they
   are the actual elements on the page. The bt-* class alone is just a hook.

   Catalogue and how-to: web/docs/COMPONENTS.md
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Token aliases over the theme.json presets
   ------------------------------------------------------------------------- */
:root {
	--bt-text: var(--wp--preset--color--text, #000000);
	--bt-bg: var(--wp--preset--color--background, #ffffff);
	--bt-primary: var(--wp--preset--color--primary, #815ef8);
	--bt-secondary: var(--wp--preset--color--secondary, #5021e6);
	--bt-accent: var(--wp--preset--color--accent, #ff914d);
	--bt-accent-hover: #f07a33;
	--bt-tint: var(--wp--preset--color--tint, #d7caff);
	--bt-lilac: var(--wp--preset--color--lilac, #efe8ff);
	--bt-surface: var(--wp--preset--color--surface, #f7f5fa);
	--bt-border: var(--wp--preset--color--border, #e7e2f2);
	--bt-muted: var(--wp--preset--color--muted, #5c5566);

	--bt-hero-from: var(--wp--custom--hero--from, #eee2fa);
	--bt-hero-via: var(--wp--custom--hero--via, #f6effd);
	--bt-hero-to: var(--wp--custom--hero--to, #ffffff);

	/* Figma-only accents. Not in the style guide palette, so they live here
	   rather than in theme.json: the violet-to-tangerine sweep on the nav pill
	   and the footer rule, and the wash behind a testimonial card. */
	--bt-sweep-from: rgba(151, 71, 255, 0.2);
	--bt-sweep-to: rgba(248, 97, 45, 0.2);
	--bt-rule-from: #bb5bff;
	--bt-rule-to: #f8612d;
	--bt-quote-bg: rgba(193, 153, 199, 0.1);

	/*
	 * Feature-band palette, straight from the Figma page designs. These are
	 * v2-era hexes, NOT the six style-guide colours — they are here because
	 * Richard pointed at these exact bands and asked for them. The style guide
	 * still owns text, buttons and the editor's colour picker; nothing below
	 * redefines --bt-primary/secondary/accent.
	 */
	--bt-ink: #020102;            /* "Find the Missing Link" band */
	--bt-vision-from: #3c3ee9;    /* "Our Vision" gradient, left */
	--bt-vision-to: #82368b;      /* "Our Vision" gradient, right */
	--bt-plum: #82368b;           /* media-hero overlay */
	--bt-periwinkle: #90a5fa;     /* partner band */
	--bt-orange: #f8612d;         /* big CTA fill */
	--bt-outline: #be5cf6;        /* outline-button ring on dark */
	--bt-white: #fffbff;          /* the design's off-white, not pure #fff */

	--bt-tex-violet: url("assets/images/texture-waves-violet.png");
	--bt-tex-dark: url("assets/images/texture-waves-dark.png");
	--bt-tex-orange: url("assets/images/texture-waves-orange.png");

	/*
	 * Band side padding. Figma insets 180px at 1440. That is 47% of a 768px
	 * tablet, so it has to shrink — every band uses this instead of a
	 * hard-coded value.
	 */
	--bt-band-inline: clamp(20px, 6vw, 88px);

	--bt-content: var(--wp--style--global--content-size, 1200px);
	--bt-radius-card: var(--wp--custom--radius--card, 20px);
	--bt-radius-input: var(--wp--custom--radius--input, 8px);
	--bt-radius-pill: var(--wp--custom--radius--pill, 60px);
	--bt-radius-nav: var(--wp--custom--radius--nav, 45px);
	--bt-font: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
	--bt-gutter: 24px;
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */

/*
 * Font + heading-scale overrides.
 *
 * These existed because WordPress's compiled global-styles output was
 * decoupled from theme.json for `typography.fontFamily` and the h1-h6 size
 * scale - proven in the 2026-08-08 session by shipping a build with
 * "Montserrat" removed entirely and getting the identical served CSS back.
 * The suspected cause was the hostinger-ai-theme parent injecting a stored
 * font choice after the theme.json merge.
 *
 * v0.9.0 dropped that parent and it changed NOTHING - verified live, with
 * user global styles confirmed empty. The cause is almost certainly a
 * Hostinger must-use plugin filtering the theme.json data.
 *
 * As of v0.10.0 the brand typeface IS Montserrat (official style guide), so
 * the compiled value now happens to agree with us. These rules still stay:
 * the size scale is ignored regardless, and the day the typeface changes
 * again theme.json alone will not move it.
 */
:where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
	font-family: var(--bt-font) !important;
}

:where(body) {
	font-family: var(--bt-font) !important;
}

/* Figma text styles: section titles 48px, H3 24px, body 16/30. */
h1 { font-size: clamp(34px, 3.8vw, 48px); }
h2 { font-size: clamp(32px, 3.6vw, 48px); }
h3 { font-size: 24px; }
h4 { font-size: 22px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }

h1, h2 { letter-spacing: -0.03em; }

body {
	background: var(--bt-bg);
	color: var(--bt-text);
	font-weight: 400;
}

img { max-width: 100%; height: auto; }

/* -------------------------------------------------------------------------
   3. Bands — the full-bleed section wrapper
   Each section is a core/group with align:full, a constrained inner layout,
   and one of these classes. Gutenberg's constrained layout centres the
   children at 1200px; the band only supplies background and rhythm.
   ------------------------------------------------------------------------- */
.bt-band {
	padding-block: var(--wp--custom--section--padding, 88px);
	padding-inline: var(--bt-band-inline);
}

.bt-band--tight { padding-block: 56px; }

/* The light-purple wash. Home hero and every interior page banner share it,
   so the whole site reads as one system. */
.bt-band--lilac {
	background: linear-gradient(48deg, var(--bt-hero-from) 1.4%, var(--bt-hero-to) 60.36%);
}

.bt-band--surface { background: var(--bt-surface); }

/* Home hero. Figma pads 220px from the top of the frame, but that number
   includes its 182px header instance; ours is a separate sticky element, so
   the band only owns what is left. */
.bt-band--hero { padding-block: 56px 76px; }

/* -------------------------------------------------------------------------
   3b. Feature bands (Figma page designs)
   Four full-bleed treatments that carry most of the site's visual identity.
   Each is a core/group wearing the class — no custom blocks.
   ------------------------------------------------------------------------- */

/* "Our Vision" (0:591): indigo-to-plum sweep under a 50% wave texture. */
.bt-band--vision {
	background-color: var(--bt-vision-from);
	background-image: var(--bt-tex-violet),
		linear-gradient(90deg, var(--bt-vision-from) 0%, var(--bt-vision-to) 100%);
	background-size: 1024px 1024px, auto;
	background-blend-mode: soft-light, normal;
	color: var(--bt-white);
}

/* "Find the Missing Link" (0:598): near-black under the same wave motif. */
.bt-band--dark {
	background-color: var(--bt-ink);
	background-image: var(--bt-tex-dark);
	background-size: cover;
	background-position: center;
	color: var(--bt-white);
}

/* Partner strip (0:613). Periwinkle is off the style-guide palette and was
   swapped out once for --bt-surface; Richard asked for the Figma band back. */
.bt-band--partners { background: var(--bt-periwinkle); }

/* Page hero over photography (0:1637): image at 70% under a plum wash. The
   text-shadow is in the design and it is doing real work — without it the
   headline fails contrast wherever the photo goes light. */
.bt-band--media {
	position: relative;
	isolation: isolate;
	background: var(--bt-plum);
	color: var(--bt-white);
	text-align: center;
	padding-block: 96px;
}

/* One class per photographic hero. The URL has to live in CSS because a
   pattern's inline style would not survive a round-trip through the editor. */
.bt-band--media-programs { --bt-hero-photo: url("assets/images/photo-hero-programs.jpg"); }

.bt-band--media .bt-lead--hero {
	max-width: 720px;
	margin-inline: auto;
	color: var(--bt-white);
}

.bt-band--media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(rgba(130, 54, 139, 0.6), rgba(130, 54, 139, 0.6)),
		var(--bt-hero-photo, none);
	background-size: cover;
	background-position: center;
}

/* Everything inside a dark band inherits the off-white, including headings
   and the muted/lead helpers that are grey on light backgrounds. */
.bt-band--vision :is(h1, h2, h3, h4, h5, h6, p, li),
.bt-band--dark :is(h1, h2, h3, h4, h5, h6, p, li),
.bt-band--media :is(h1, h2, h3, h4, h5, h6, p, li) {
	color: var(--bt-white);
}

.bt-band--media :is(h1, h2, p) {
	text-shadow: 1px 3px 4px rgba(0, 0, 0, 0.4);
}

/* Vision band: heading left, statement right, stacking on narrow screens. */
.bt-vision {
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.bt-vision > h2 {
	flex: 0 0 286px;
	margin: 0;
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.1;
}

.bt-vision > p {
	flex: 1 1 420px;
	margin: 0;
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 600;
	line-height: 30px;
}

/* Dark CTA band: title row above, buttons below, per Figma's space-between. */
.bt-dark-cta { display: flex; flex-direction: column; gap: 40px; }

.bt-dark-cta__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 30px;
}

.bt-dark-cta__head > h2 {
	margin: 0;
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.1;
}

.bt-dark-cta__head > p {
	margin: 0;
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 800;
}

.bt-dark-cta .wp-block-buttons {
	justify-content: flex-end;
	gap: 20px 30px;
}

/* The outline button sits on black here, so its label is white, not black. */
.bt-band--dark .bt-btn-ghost .wp-block-button__link {
	color: var(--bt-white);
	border-color: var(--bt-outline);
}

.bt-band--dark .bt-btn-ghost .wp-block-button__link:hover {
	background: var(--bt-outline);
	color: var(--bt-ink);
}

/* Figma's "Download Pitch Deck" is deliberately chunkier than a normal CTA. */
.bt-btn-xl .wp-block-button__link {
	background: var(--bt-orange);
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 800;
	padding: 22px 60px;
}

.bt-btn-xl .wp-block-button__link:hover { background: #e04f1d; }

/* -------------------------------------------------------------------------
   3c. Dark feature card (Figma p&s-main-card)
   Black panel, orange wave motif, star-bulleted list, image, big CTA.
   ------------------------------------------------------------------------- */
.bt-feature {
	background-color: var(--bt-ink);
	background-image: var(--bt-tex-orange);
	background-size: 620px;
	background-position: center;
	border-radius: 40px;
	padding: clamp(28px, 4vw, 56px);
	color: var(--bt-white);
}

.bt-feature :is(h2, h3, p, li) { color: var(--bt-white); }

.bt-feature__cols {
	display: flex;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	flex-wrap: wrap;
}

.bt-feature__cols > * { flex: 1 1 320px; min-width: 0; }

.bt-feature .wp-block-image img {
	border-radius: 24px;
	width: 100%;
}

/* Star bullets: the design uses a filled orange asterisk, not a disc. */
.bt-feature ul { list-style: none; padding: 0; margin: 0; }

.bt-feature li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 18px;
	font-size: clamp(15px, 1.3vw, 17px);
	font-weight: 600;
	line-height: 1.5;
}

.bt-feature li::before {
	content: "\2731";
	position: absolute;
	left: 0;
	top: -1px;
	color: var(--bt-orange);
	font-size: 18px;
	line-height: 1.4;
}

/* Editor parity: the block editor renders sections without the front-end
   body wrapper, so give them the same rhythm there. */
.editor-styles-wrapper .bt-band { padding-inline: var(--bt-band-inline); }

/* -------------------------------------------------------------------------
   4. Type helpers (applied via className on heading/paragraph blocks)
   ------------------------------------------------------------------------- */
.bt-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px !important;
	font-weight: 700;
	color: var(--bt-primary);
	margin-bottom: 8px;
}

.bt-lead {
	font-size: 18px;
	line-height: 30px;
	color: var(--bt-muted);
}

.bt-muted { color: var(--bt-muted); }

/*
 * Hero headline. The Figma light landing sets the emphasis with WEIGHT, not
 * colour: "Empowering" / "Through" are light, "Social Impact" /
 * "AI-Powered Learning" are heavy, and all of it stays black. An earlier
 * build coloured the emphasised words violet - that was wrong, and it also
 * broke the style guide's rule that violet is an accent, not body text.
 */
.bt-display {
	font-size: clamp(36px, 4.2vw, 56px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--bt-text);
	text-wrap: balance;
}

.bt-display strong,
.bt-display b {
	font-weight: 700;
	color: inherit;
}

/* Hero sub-headline: Figma sets 20px SemiBold on black, not the muted grey
   used elsewhere for lead paragraphs. */
.bt-lead--hero {
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
	color: var(--bt-text);
	max-width: 494px;
}

/*
 * Section titles. Figma's "Our Mission" / "Featured Offerings" / "Testimonials"
 * are 48px at REGULAR weight - lighter than a normal h2, which is what gives
 * the page its airy feel. Applied via className so an editor still sees a
 * plain Heading block.
 */
.bt-section-title {
	font-size: clamp(32px, 3.6vw, 48px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--bt-text);
}

.bt-prose p {
	color: var(--bt-muted);
	font-size: 16px;
	line-height: 30px;
}

.bt-narrow {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.bt-crumbs {
	font-size: 13.5px !important;
	color: var(--bt-muted);
}

.bt-crumbs a { font-weight: 600; text-decoration: none; }
.bt-crumbs a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   5. Buttons — theme.json styles the base; these are the variants
   ------------------------------------------------------------------------- */
.wp-block-button__link { border-radius: var(--bt-radius-pill); }

/*
 * Outline variant (Figma btn-3, the "Learn More" under the mission): 3px
 * violet ring, no fill, BLACK label. The label is deliberately not violet -
 * in the style guide violet is an accent, and black reads better at 16px.
 */
.bt-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--bt-text);
	border: 3px solid var(--bt-primary);
	padding: 9px 57px;
}

.bt-btn-ghost .wp-block-button__link:hover {
	background: var(--bt-primary);
	color: #fff;
}

/* Full-width button, used inside cards so a row of CTAs lines up.
   Figma's card CTA is a squatter pill: indigo, 30px radius, 8px/20px. */
.bt-btn-block,
.bt-btn-block .wp-block-button,
.bt-btn-block .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.bt-btn-block .wp-block-button__link {
	background: var(--bt-secondary);
	color: #fff;
	border: 0;
	border-radius: 30px;
	padding: 10px 20px;
}

.bt-btn-block .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--bt-secondary) 84%, #000);
	color: #fff;
}

/* -------------------------------------------------------------------------
   6. Images
   Every image slot ships a real core/image block pointing at a labelled SVG
   placeholder, so an editor swaps it with Replace -> Upload. Nothing here
   assumes a placeholder: the same rules style the real photo.
   ------------------------------------------------------------------------- */
.wp-block-image.bt-media img {
	width: 100%;
	border-radius: var(--bt-radius-card);
	display: block;
}

.wp-block-image.bt-media { margin: 0; }

.bt-media--cover img { object-fit: cover; }

/* Hero: wider gutter between copy and art than the default block gap. */
.wp-block-columns.bt-hero { gap: 56px; }

/*
 * Decorative art (the Figma 3D shapes). Square corners, no card frame - these
 * are transparent PNGs that must read as floating on the wash, not as a photo.
 * Still a real core/image block, so the team can swap or delete them.
 */
.wp-block-image.bt-art { margin: 0; }

.wp-block-image.bt-art img {
	width: 100%;
	border-radius: 0;
	display: block;
}

.bt-art--hero img { max-width: 460px; margin-inline: auto; }

/* Second copy of the shapes, mirrored, behind the testimonials. Decorative
   only: it must never intercept a click or show up to a screen reader. */
.bt-decor {
	position: absolute;
	right: -80px;
	top: 40px;
	width: 520px;
	opacity: 0.55;
	transform: scaleX(-1);
	pointer-events: none;
	z-index: 0;
}

.bt-decor img { width: 100%; display: block; }

/* Chips row under the hero copy (the 4 Rs). */
.bt-chips { margin-top: 34px; gap: 10px; }

.bt-chip {
	margin: 0;
	font-size: 13px !important;
	font-weight: 600;
	color: var(--bt-primary);
	background: color-mix(in srgb, var(--bt-primary) 11%, transparent);
	border-radius: var(--bt-radius-pill);
	padding: 7px 14px;
}

/* Core's grid layout supplies the columns; this is the gutter. */
.bt-grid-2, .bt-grid-3, .bt-grid-4 { gap: 28px; }

/* -------------------------------------------------------------------------
   7. Cards — core/columns + core/column
   ------------------------------------------------------------------------- */
.wp-block-columns.bt-cards {
	gap: 28px;
	align-items: stretch;
}

.bt-cards > .wp-block-column.bt-card {
	display: flex;
	flex-direction: column;
	background: var(--bt-bg);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-card);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bt-cards > .wp-block-column.bt-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(2, 1, 2, 0.09);
}

/* The card's image sits flush at the top: square off the shared radius.
   Figma crops it at 545x232. */
.bt-card > .wp-block-image.bt-media img {
	border-radius: 0;
	aspect-ratio: 545 / 232;
	object-fit: cover;
}

.bt-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px;
}

/*
 * Figma card variant: indigo hairline, 32px body inset, and a metadata row
 * ("5-Week Masterclass", "3 hours video") ruled off from the title below it.
 * Kept separate from the plain .bt-card used on the interior pages so this
 * change stays confined to Home.
 */
.bt-cards > .wp-block-column.bt-card--figma {
	border-color: var(--bt-secondary);
}

.bt-card--figma .bt-card__body {
	padding: 0 32px 32px;
	gap: 20px;
}

/* Selector has to out-specify `.bt-card__body > p:not(.bt-card__kicker)`
   further up, which would otherwise grey this row out. */
.bt-card--figma .bt-card__body > p.bt-card__meta {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid #dee8f2;
	font-size: 16px !important;
	font-weight: 400;
	line-height: 1.4;
	color: var(--bt-text);
}

.bt-card--figma .bt-card__body > h3 {
	font-size: 24px;
	font-weight: 700;
	margin: 0;
}

/* Title + one-line subtitle sit tighter to each other (8px) than to the rest
   of the card body (20px), so they need their own group. */
.bt-card__titles { display: flex; flex-direction: column; gap: 8px; }

.bt-card--figma .bt-card__titles > p {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--bt-text);
}

.bt-card__kicker {
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--bt-secondary);
	margin-bottom: 8px;
}

.bt-card__body > h3 {
	font-size: 21px;
	margin: 0 0 10px;
}

.bt-card__body > p:not(.bt-card__kicker) {
	color: var(--bt-muted);
	font-size: 15px;
	line-height: 1.65;
	margin: 0 0 20px;
}

/* Push each card's CTA to the bottom so a row lines up. */
.bt-card__body > .wp-block-buttons { margin-top: auto; }

/* -------------------------------------------------------------------------
   8. Grid tiles — core/group with a grid layout
   ------------------------------------------------------------------------- */
.bt-value {
	background: var(--bt-bg);
	border: 1px solid var(--bt-border);
	border-left: 3px solid var(--bt-accent);
	border-radius: 12px;
	padding: 24px;
}

.bt-value > h3 { font-size: 18px; margin: 0 0 8px; }

.bt-value > p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bt-muted);
}

.bt-tile {
	background: var(--bt-bg);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-card);
	padding: 26px 24px;
}

.bt-tile > h3 { font-size: 18px; margin: 0 0 8px; }

.bt-tile > p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--bt-muted);
}

.bt-tile__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 0 14px !important;
	border-radius: var(--bt-radius-pill);
	background: color-mix(in srgb, var(--bt-primary) 14%, transparent);
	color: var(--bt-primary);
	font-weight: 900;
	font-size: 15px !important;
}

/* Key-facts strip on the partner pages. */
.bt-fact {
	border-left: 3px solid var(--bt-primary);
	padding-left: 16px;
}

.bt-fact__label {
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--bt-muted);
	margin: 0 0 6px;
}

.bt-fact__value {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   9. Team
   ------------------------------------------------------------------------- */
.bt-team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--bt-bg);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-card);
	padding: 32px 24px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bt-team-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(2, 1, 2, 0.09);
}

.bt-team-card .wp-block-image img {
	width: 96px;
	height: 96px;
	border-radius: var(--bt-radius-pill);
	object-fit: cover;
	margin-bottom: 4px;
}

.bt-team-name {
	font-size: 18px;
	font-weight: 900;
	margin: 0 0 4px;
}

.bt-team-title {
	color: var(--bt-primary);
	font-weight: 600;
	font-size: 14px !important;
	margin: 0 0 12px;
}

.bt-team-link {
	margin: auto 0 0;
	font-size: 13px !important;
	font-weight: 700;
}

/*
 * Figma team row (about-sec-3): an oval portrait in a 4px indigo ring, with
 * the name / role / bio stacked beside it. Two per row. Portraits are
 * greyscale in the design; hover restores colour so the page still feels
 * alive without breaking the look.
 */
.bt-people { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* Each member sits in a white card with a lilac hairline, per the About page
   design — not a bare row. */
.bt-person {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--bt-bg);
	border: 1px solid var(--bt-tint);
	border-radius: var(--bt-radius-card);
	padding: 24px;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.bt-person:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(80, 33, 230, 0.10);
}

.bt-person > .wp-block-image { margin: 0; flex: 0 0 200px; }

.bt-person > .wp-block-image img {
	width: 200px;
	height: 280px;
	object-fit: cover;
	border-radius: 120px;
	border: 4px solid var(--bt-secondary);
	filter: grayscale(1);
	transition: filter 0.25s ease;
}

.bt-person:hover > .wp-block-image img { filter: grayscale(0); }

.bt-person__body { display: flex; flex-direction: column; gap: 10px; }

/* Name carries an orange asterisk and an indigo-to-tangerine gradient, both
   from the design. The star is a ::before so it never ends up in the copied
   text or read out twice by a screen reader. */
.bt-person__name {
	position: relative;
	margin: 0;
	padding-left: 30px;
	font-size: clamp(19px, 1.7vw, 24px);
	font-weight: 800;
	line-height: 1.2;
	background: linear-gradient(90deg, var(--bt-vision-from) 0%, var(--bt-rule-to) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bt-person__name::before {
	content: "\2731";
	position: absolute;
	left: 0;
	top: 1px;
	font-size: 18px;
	color: var(--bt-orange);
	-webkit-text-fill-color: var(--bt-orange);
}

.bt-person__role {
	margin: 0;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 26px;
	color: var(--bt-text);
}

.bt-person__bio {
	margin: 0;
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	color: var(--bt-text);
}

/* -------------------------------------------------------------------------
   9c. Partner logo strip (Figma partner-banner)
   ------------------------------------------------------------------------- */
.bt-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px 48px;
}

.bt-logos .wp-block-image { margin: 0; }

.bt-logos .wp-block-image img {
	height: 62px;
	width: auto;
	max-width: 210px;
	object-fit: contain;
	border-radius: 0;
	transition: transform 0.25s ease;
}

/*
 * On the periwinkle band the marks run in FULL COLOUR, as the design shows —
 * the earlier dark-silhouette treatment existed only because they were sitting
 * on a near-white surface. The one white-on-transparent mark (Human Feedback)
 * reads fine against #90a5fa; a white plate behind each logo would fight the
 * band, so none is used.
 */
.bt-band--partners .bt-logos .wp-block-image img { filter: none; opacity: 1; }

.bt-logos .wp-block-image:hover img { transform: translateY(-2px); }

/* -------------------------------------------------------------------------
   9b. Testimonials (Figma landing-sec-5)
   Two columns of soft lilac cards, deliberately unequal so the pair
   staggers the way the design does.
   ------------------------------------------------------------------------- */
.bt-band--quotes {
	position: relative;
	overflow: hidden;
}

/* Lift the real content above the decoration - but NOT the decoration itself,
   which must keep its own `position: absolute` or it lands in the flow and
   opens a 500px hole in the middle of the page. */
.bt-band--quotes > *:not(.bt-decor) { position: relative; z-index: 1; }

.wp-block-columns.bt-quotes { gap: 32px; align-items: flex-start; }

.bt-quotes .wp-block-column { gap: 32px; }

.bt-quote {
	background: var(--bt-quote-bg);
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 32px;
}

.bt-quote--raised {
	background: #ffffff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}

.bt-quote__head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 24px;
}

.bt-quote__head .wp-block-image { margin: 0; }

.bt-quote__head .wp-block-image img {
	width: 86px;
	height: 86px;
	border-radius: var(--bt-radius-pill);
	object-fit: cover;
}

.bt-quote__name {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
}

.bt-quote__role {
	margin: 0;
	font-size: 16px !important;
	font-weight: 500;
	color: var(--bt-primary);
}

.bt-quote__text {
	margin: 0;
	font-size: 17px;
	line-height: 30px;
	font-weight: 500;
	color: var(--bt-text);
}

/* -------------------------------------------------------------------------
   10. CTA bands
   ------------------------------------------------------------------------- */
.bt-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var(--bt-surface);
	border-radius: var(--bt-radius-card);
	padding: 28px 32px;
}

.bt-cta > p {
	margin: 0;
	font-weight: 600;
	max-width: 52ch;
	flex: 1 1 320px;
}

.bt-newsletter {
	background: linear-gradient(135deg, var(--bt-hero-from), var(--bt-hero-to));
	border: 1px solid var(--bt-border);
}

/* -------------------------------------------------------------------------
   11. FAQ — core/details
   ------------------------------------------------------------------------- */
.wp-block-details.bt-faq__item {
	border: 1px solid var(--bt-border);
	border-radius: 12px;
	background: var(--bt-bg);
	padding: 4px 20px;
	margin-bottom: 12px;
}

.wp-block-details.bt-faq__item[open] {
	border-color: color-mix(in srgb, var(--bt-primary) 45%, transparent);
}

.wp-block-details.bt-faq__item > summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 16.5px;
	padding: 16px 0;
}

.wp-block-details.bt-faq__item > p {
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--bt-muted);
}

/* -------------------------------------------------------------------------
   12. Forms
   Authored as core/html blocks: WordPress has no core form block, and the
   Kadence form block cannot be safely hand-written (its field IDs and email
   routing are assigned server-side through its own UI). These are VISUAL
   ONLY - no action, no backend, every submission is dropped. Replace with a
   real forms plugin before publishing. See docs/COMPONENTS.md.
   ------------------------------------------------------------------------- */
.bt-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 560px;
}

.bt-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.bt-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bt-form-row label { font-weight: 600; font-size: 14px; }

.bt-form-row input,
.bt-form-row select,
.bt-form-row textarea {
	font-family: inherit;
	font-size: 16px;
	padding: 11px 14px;
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-input);
	background: var(--bt-bg);
	color: var(--bt-text);
}

.bt-form-row input:focus,
.bt-form-row select:focus,
.bt-form-row textarea:focus {
	outline: 2px solid var(--bt-primary);
	outline-offset: 1px;
}

.bt-form button {
	align-self: flex-start;
	border: none;
	border-radius: var(--bt-radius-pill);
	padding: 13px 32px;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	background: var(--bt-accent);
	cursor: pointer;
}

.bt-form button:hover { background: var(--bt-accent-hover); }

.bt-form-note { font-size: 14px; color: var(--bt-muted); }

.bt-form--card {
	max-width: 720px;
	margin-inline: auto;
	background: var(--bt-bg);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-card);
	padding: 32px;
}

/* Scaffold flag - anything wearing this is unfinished and must not be
   treated as working. Search the content for it to list what's outstanding. */
.bt-scaffold {
	display: block;
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px dashed var(--bt-accent);
	background: color-mix(in srgb, var(--bt-accent) 8%, transparent);
	color: var(--bt-text);
	font-size: 13.5px !important;
	line-height: 1.55;
}

/* -------------------------------------------------------------------------
   13. Header (template part)
   ------------------------------------------------------------------------- */
/*
 * Figma's header is a floating pill, not a full-width bar: a rounded
 * lavender-to-white capsule inset from the top, sitting over the hero wash.
 * It stays sticky so it survives scrolling, which the static Figma frame
 * doesn't have to answer for.
 */
.bt-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-block: 22px;
	/* Figma's header has no fill of its own - it is a 50px backdrop blur over
	   whatever it floats on. Sticky needs a little help once white content
	   scrolls underneath, hence the fading lavender tint. */
	background: linear-gradient(180deg, rgba(238, 226, 250, 0.92) 0%, rgba(238, 226, 250, 0) 100%);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.bt-container {
	max-width: var(--bt-content);
	margin-inline: auto;
	padding-inline: var(--bt-gutter);
}

/*
 * The nav pill. Figma stacks two gradients: a flat 50% white veil over a
 * violet-to-tangerine 20% sweep. That warm-to-cool undertone is what makes it
 * read as the BrainTrainr navbar rather than a generic white capsule.
 */
.bt-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	max-width: 1100px;
	padding: 14px 32px 14px 28px;
	border-radius: var(--bt-radius-nav);
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%),
		linear-gradient(90deg, var(--bt-sweep-from) 0%, var(--bt-sweep-to) 100%);
	box-shadow: 0 8px 30px rgba(80, 33, 230, 0.10);
}

.bt-logo img { display: block; height: 42px; width: auto; }

.bt-nav { display: flex; align-items: center; gap: 4px; }

/* Figma nav items are Bold 16/30 in 20px-radius hit areas. */
.bt-nav a {
	color: var(--bt-text);
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	line-height: 30px;
	padding: 4px 20px;
	border-radius: 20px;
	white-space: nowrap;
	transition: background 0.16s ease, color 0.16s ease;
}

.bt-nav a:hover {
	color: var(--bt-secondary);
	background: rgba(255, 255, 255, 0.75);
}

.bt-nav a[aria-current="page"] {
	color: var(--bt-secondary);
	background: #ffffff;
}

/*
 * Dark pill, for pages that open on a photographic hero (Programs). The
 * header is a global template part and cannot know what the page contains, so
 * the page tells it: :has() looks forward from <body> to the media band and
 * restyles the pill. No JS, no per-page template.
 */
body:has(.bt-band--media) .bt-header {
	background: linear-gradient(180deg, rgba(2, 1, 2, 0.35) 0%, rgba(2, 1, 2, 0) 100%);
}

body:has(.bt-band--media) .bt-header-inner {
	background: rgba(43, 12, 47, 0.55);
	box-shadow: 0 8px 30px rgba(2, 1, 2, 0.25);
}

body:has(.bt-band--media) .bt-nav a { color: var(--bt-white); }

body:has(.bt-band--media) .bt-nav a:hover,
body:has(.bt-band--media) .bt-nav a[aria-current="page"] {
	color: var(--bt-ink);
	background: var(--bt-white);
}

/*
 * The logo keeps its own colours on the dark pill and gets a light plate
 * instead. Inverting it was tried first and mangles the mark — the wordmark
 * and the brain glyph invert in opposite directions, so half of it vanishes.
 * Figma's `logo-white` symbol exports with a grey backing rect and
 * surrounding canvas art, so it is not usable either without hand-editing.
 */
body:has(.bt-band--media) .bt-logo {
	display: inline-flex;
	padding: 6px 12px;
	border-radius: var(--bt-radius-pill);
	background: var(--bt-white);
}

body:has(.bt-band--media) .bt-nav-toggle span { background: var(--bt-white); }

.bt-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}

.bt-nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--bt-text);
}

/* -------------------------------------------------------------------------
   14. Footer (template part)
   ------------------------------------------------------------------------- */
/* Flat lavender, as the page designs show — not the gradient the landing
   frame used. The orange rule sits BELOW the copyright row, so it reads as
   the page's bottom edge rather than a divider inside the footer. */
.bt-footer {
	background: var(--bt-hero-from);
	padding-block: 45px 0;
}

.bt-footer-top {
	display: grid;
	grid-template-columns: repeat(4, 1fr) auto;
	gap: 32px;
	padding-bottom: 40px;
}

.bt-footer-col { display: flex; flex-direction: column; gap: 8px; }

.bt-footer-heading {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 4px;
	color: var(--bt-text);
}

.bt-footer-col a {
	color: var(--bt-text);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

.bt-footer-legal a {
	color: var(--bt-text);
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
}

.bt-footer-col a:hover,
.bt-footer-legal a:hover { color: var(--bt-primary); }

.bt-footer-social { display: flex; align-items: flex-start; gap: 12px; }

.bt-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--bt-radius-pill);
	background: var(--bt-bg);
	color: var(--bt-text);
	text-decoration: none;
	font-size: 11px;
	font-weight: 700;
}

.bt-footer-social a:hover { background: var(--bt-primary); color: #fff; }

/* The violet-to-tangerine rule. Figma ships it as a 4px SVG line with round
   caps; CSS does the same job with no asset to keep in sync. */
.bt-footer-rule {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--bt-rule-from) 0%, var(--bt-rule-to) 100%);
}

.bt-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 8px 40px;
}

.bt-footer-bottom p {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--bt-text);
}

.bt-footer-legal { display: flex; gap: 10px; }

/* -------------------------------------------------------------------------
   15. Post list (blog fallback)
   ------------------------------------------------------------------------- */
.bt-postlist .wp-block-post-title { margin-bottom: 4px; }
.bt-postlist .wp-block-post-date { color: var(--bt-muted); font-size: 14px; }

/* -------------------------------------------------------------------------
   16. Mobile
   Gutenberg stacks core/columns below 782px on its own; the grid layouts
   need explicit help.
   ------------------------------------------------------------------------- */
/*
 * Tablet, 783–1024px. Gutenberg only stacks core/columns below 782px, so
 * everything between a laptop and a phone was previously running the desktop
 * layout in far less room — five nav items colliding with the logo, two
 * 200px portraits plus text in a half-width card, three cards at ~230px each.
 */
@media (max-width: 1024px) {
	.bt-header-inner { max-width: 100%; padding: 12px 20px 12px 18px; }

	.bt-nav { gap: 0; }

	.bt-nav a { padding-inline: 12px; font-size: 15px; }

	.bt-people { grid-template-columns: 1fr; }

	.bt-person > .wp-block-image img { width: 168px; height: 236px; }

	.bt-quotes .wp-block-column { gap: 24px; }

	.bt-quote { padding: 32px 28px; }

	.bt-decor { width: 340px; right: -120px; opacity: 0.4; }

	.bt-card--figma .bt-card__body { padding: 0 22px 22px; gap: 16px; }

	.bt-dark-cta .wp-block-buttons { justify-content: flex-start; }

	.bt-feature { border-radius: 28px; }
}

/* Below 900 the nav has run out of room whatever the type size — hand over
   to the burger early rather than letting it wrap behind the logo. */
@media (max-width: 900px) {
	.bt-grid-3, .bt-grid-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.bt-nav-toggle { display: flex; }

	.bt-nav {
		position: absolute;
		top: calc(100% + 8px);
		left: var(--bt-band-inline);
		right: var(--bt-band-inline);
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		background: var(--bt-bg);
		border: 1px solid var(--bt-border);
		border-radius: 20px;
		box-shadow: 0 14px 32px rgba(2, 1, 2, 0.12);
		padding: 12px 16px;
		display: none;
	}

	.bt-nav.is-open { display: flex; }

	.bt-nav a { width: 100%; padding-block: 10px; font-size: 16px; }

	body:has(.bt-band--media) .bt-nav a { color: var(--bt-text); }

	.bt-header { position: relative; }
}

/* Phone. The burger and the drop-down panel are already handled at 900px. */
@media (max-width: 782px) {
	.bt-grid-2, .bt-grid-3, .bt-grid-4 {
		grid-template-columns: 1fr !important;
	}

	.bt-form-grid { grid-template-columns: 1fr; }

	.bt-footer-top { grid-template-columns: 1fr 1fr; }

	.bt-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.bt-band { padding-block: 56px; }

	.bt-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 28px 24px;
	}

	/* The pill has to give up its inner padding before the logo and the
	   burger start colliding. */
	.bt-header-inner { padding: 10px 14px 10px 18px; }

	.bt-logo img { height: 34px; }

	.bt-decor { display: none; }

	.bt-art--hero img { max-width: 300px; }

	.bt-quote { padding: 28px 24px; }

	.bt-quote__head .wp-block-image img { width: 64px; height: 64px; }

	.bt-quote__name { font-size: 19px; }

	.bt-people { grid-template-columns: 1fr; gap: 36px; }

	.bt-person { flex-direction: column; align-items: flex-start; }

	.bt-person > .wp-block-image { flex: 0 0 auto; }

	.bt-person > .wp-block-image img { width: 160px; height: 224px; }

	.bt-logos { gap: 20px 28px; }

	.bt-logos .wp-block-image img { height: 46px; max-width: 150px; }

	/* 60px of side padding is wider than a 375px screen can spare. */
	.wp-block-button__link { padding-inline: 32px; }
	.bt-btn-ghost .wp-block-button__link { padding-inline: 29px; }
	.bt-btn-block .wp-block-button__link { padding-inline: 20px; }
}