/*
Theme Name: BrandsTrack
Theme URI: https://brandstrack.com/
Author: BrandsTrack
Author URI: https://brandstrack.com/
Description: Marketing and editorial theme for BrandsTrack — an AI visibility and reputation intelligence platform. Ships the console page template, structured data, and a dark, accessible design system. Built to pair with the BrandsTrack Intelligence Engine plugin.
Version: 2.3.1
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brandstrack-theme
Tags: one-column, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks
*/

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */

:root {
	/* Surfaces */
	--bs-bg: #0E1526;
	--bs-surface: #16203A;
	--bs-surface-2: #202C4D;
	--bs-border: #212C48;
	--bs-border-strong: #2B3656;

	/* Ink — warm off-white rather than cool white, matching the homepage's
	   editorial tone. Contrast checked against the new navy background:
	   #CBC6B8 body copy and #8D93A8 faint text both clear AA. */
	--bs-text: #F4F1E9;
	--bs-text-muted: #CBC6B8;
	--bs-text-faint: #8D93A8;

	/* Accent — warm gold, matching the homepage ring/CTA color, replacing
	   the old sky-blue accent everywhere it's used via these tokens. */
	--bs-accent: #CD9B47;
	--bs-accent-bright: #E4C079;
	--bs-accent-ink: #241704;

	/* Semantic */
	--bs-pos: #34d399;
	--bs-neg: #CC6250;
	--bs-warn: #fbbf24;

	/* Type */
	--bs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bs-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--bs-step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--bs-step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--bs-step-1: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
	--bs-step-2: clamp(1.375rem, 1.27rem + 0.5vw, 1.625rem);
	--bs-step-3: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
	--bs-step-4: clamp(2.25rem, 1.8rem + 2.2vw, 3.25rem);
	--bs-step-5: clamp(2.75rem, 2rem + 3.6vw, 4.5rem);

	/* Space */
	--bs-space-1: 0.5rem;
	--bs-space-2: 0.75rem;
	--bs-space-3: 1rem;
	--bs-space-4: 1.5rem;
	--bs-space-5: 2rem;
	--bs-space-6: 3rem;
	--bs-space-7: 4.5rem;
	--bs-space-8: 6rem;

	/* Shape */
	--bs-radius: 12px;
	--bs-radius-sm: 8px;
	--bs-shadow: 0 20px 50px -24px rgba(2, 6, 23, 0.9);

	/* Layout */
	--bs-measure: 68ch;
	--bs-container: 1180px;
	--bs-container-narrow: 760px;
	--bs-container-wide: 1320px;
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--bs-bg);
	color: var(--bs-text);
	font-family: var(--bs-font);
	font-size: var(--bs-step-0);
	line-height: 1.65;
	margin: 0;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body::before {
	background:
		radial-gradient(60rem 32rem at 12% -8%, rgba(56, 189, 248, 0.11), transparent 60%),
		radial-gradient(48rem 28rem at 92% 4%, rgba(56, 189, 248, 0.06), transparent 60%);
	content: "";
	inset: 0 0 auto;
	height: 60rem;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 680;
	letter-spacing: -0.022em;
	line-height: 1.18;
	margin: 0 0 var(--bs-space-3);
	text-wrap: balance;
}

h1 {
	font-size: var(--bs-step-4);
}

h2 {
	font-size: var(--bs-step-3);
}

h3 {
	font-size: var(--bs-step-2);
}

h4 {
	font-size: var(--bs-step-1);
}

h5,
h6 {
	font-size: var(--bs-step-0);
}

p,
ul,
ol,
dl,
blockquote,
pre,
figure,
table {
	margin: 0 0 var(--bs-space-3);
}

a {
	color: var(--bs-accent);
	text-decoration-color: rgba(56, 189, 248, 0.4);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 140ms ease, text-decoration-color 140ms ease;
}

a:hover,
a:focus-visible {
	color: var(--bs-accent-bright);
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: 2px solid var(--bs-accent);
	outline-offset: 3px;
}

img,
svg,
video,
iframe,
embed,
object {
	display: block;
	height: auto;
	max-width: 100%;
}

figure img {
	border-radius: var(--bs-radius-sm);
}

figcaption {
	color: var(--bs-text-muted);
	font-size: var(--bs-step--1);
	margin-top: var(--bs-space-1);
}

blockquote {
	border-left: 3px solid var(--bs-accent);
	color: var(--bs-text);
	font-size: var(--bs-step-1);
	margin-inline: 0;
	padding: var(--bs-space-1) 0 var(--bs-space-1) var(--bs-space-4);
}

blockquote cite {
	color: var(--bs-text-muted);
	display: block;
	font-size: var(--bs-step--1);
	font-style: normal;
	margin-top: var(--bs-space-2);
}

code,
kbd,
samp {
	background: var(--bs-surface-2);
	border-radius: 4px;
	font-family: var(--bs-font-mono);
	font-size: 0.875em;
	padding: 0.15em 0.4em;
}

pre {
	background: var(--bs-surface);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-sm);
	overflow-x: auto;
	padding: var(--bs-space-3);
}

pre code {
	background: none;
	padding: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--bs-border);
	margin: var(--bs-space-6) 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border-bottom: 1px solid var(--bs-border);
	padding: var(--bs-space-2) var(--bs-space-3);
	text-align: left;
}

th {
	color: var(--bs-text-muted);
	font-size: var(--bs-step--1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   3. Accessibility utilities
   ------------------------------------------------------------------------- */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	background: var(--bs-accent);
	border-radius: 0 0 var(--bs-radius-sm) 0;
	color: var(--bs-accent-ink);
	font-weight: 650;
	left: 0;
	padding: var(--bs-space-2) var(--bs-space-3);
	position: absolute;
	top: -100px;
	transition: top 140ms ease;
	z-index: 999;
}

.skip-link:focus {
	color: var(--bs-accent-ink);
	top: 0;
}

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */

.bs-container {
	margin-inline: auto;
	max-width: var(--bs-container);
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	width: 100%;
}

.bs-container--narrow {
	max-width: var(--bs-container-narrow);
}

/*
 * Wide pages exist for embedded app UI — the plan comparison, the console and
 * the auth screens. Their internals do their own column work and need the room.
 */
.bs-container--wide {
	max-width: var(--bs-container-wide);
}

.bs-section {
	padding-block: var(--bs-space-7);
}

.bs-section--tight {
	padding-block: var(--bs-space-6);
}

.bs-section__head {
	margin-bottom: var(--bs-space-5);
	max-width: var(--bs-measure);
}

.bs-eyebrow {
	color: var(--bs-accent);
	font-size: var(--bs-step--1);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 var(--bs-space-2);
	text-transform: uppercase;
}

.bs-lead {
	color: var(--bs-text-muted);
	font-size: var(--bs-step-1);
	line-height: 1.6;
	margin: 0 0 var(--bs-space-4);
	max-width: var(--bs-measure);
}

.bs-main {
	display: block;
}

.bs-grid {
	display: grid;
	gap: var(--bs-space-4);
}

.bs-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.bs-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.bs-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.bs-layout {
	display: grid;
	gap: var(--bs-space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
	.bs-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

/* -------------------------------------------------------------------------
   5. Header
   ------------------------------------------------------------------------- */

.bs-header {
	backdrop-filter: blur(12px);
	background: rgba(2, 6, 23, 0.82);
	border-bottom: 1px solid var(--bs-border);
	position: sticky;
	top: 0;
	z-index: 50;
}

.bs-header__inner {
	align-items: center;
	display: flex;
	gap: var(--bs-space-4);
	justify-content: space-between;
	min-height: 68px;
}

.bs-brand {
	align-items: center;
	display: inline-flex;
	gap: var(--bs-space-2);
	flex-shrink: 0;
	text-decoration: none;
}

.bs-brand:hover,
.bs-brand:focus-visible {
	text-decoration: none;
}

.bs-brand__mark {
	background: linear-gradient(140deg, var(--bs-accent-bright), var(--bs-accent));
	border-radius: 9px;
	color: var(--bs-accent-ink);
	display: grid;
	font-size: 0.9375rem;
	font-weight: 800;
	height: 32px;
	letter-spacing: -0.03em;
	place-items: center;
	width: 32px;
}

.bs-brand__name {
	color: var(--bs-text);
	font-size: var(--bs-step-1);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.bs-brand__tagline {
	color: var(--bs-text-muted);
	display: block;
	/* 12px floor — 0.6875rem rendered at 11px and failed the legibility check. */
	font-size: 0.75rem;
	font-weight: 550;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.bs-brand img {
	max-height: 40px;
	width: auto;
}

.bs-header__nav {
	display: none;
}

@media (min-width: 900px) {
	.bs-header__nav {
		display: block;
		flex: 1 1 auto;
	}
}

.bs-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bs-space-1);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-menu li {
	margin: 0;
	position: relative;
}

.bs-menu a {
	border-radius: var(--bs-radius-sm);
	color: var(--bs-text-muted);
	display: block;
	font-size: 0.9375rem;
	font-weight: 550;
	padding: 8px 12px;
	text-decoration: none;
	white-space: nowrap;
}

.bs-menu a:hover,
.bs-menu a:focus-visible {
	background: var(--bs-surface-2);
	color: var(--bs-text);
}

.bs-menu .current-menu-item > a,
.bs-menu .current_page_item > a,
.bs-menu .current-menu-ancestor > a {
	color: var(--bs-text);
}

.bs-menu .sub-menu {
	background: var(--bs-surface-2);
	border: 1px solid var(--bs-border-strong);
	border-radius: var(--bs-radius-sm);
	box-shadow: var(--bs-shadow);
	display: none;
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 200px;
	padding: 6px;
	position: absolute;
	top: calc(100% + 6px);
	z-index: 60;
}

.bs-menu li:hover > .sub-menu,
.bs-menu li:focus-within > .sub-menu {
	display: block;
}

.bs-header__actions {
	align-items: center;
	display: flex;
	gap: var(--bs-space-2);
	flex-shrink: 0;
}

/* The header CTAs are hidden on narrow screens; the drawer carries them
   instead, so nothing is unreachable and the bar cannot overflow. The
   selector is deliberately two classes deep so it outranks `.bs-btn`,
   which sets `display: inline-block` further down the sheet. */
.bs-header__actions .bs-header__cta {
	display: none;
}

@media (min-width: 620px) {
	.bs-header__actions .bs-header__cta {
		display: inline-block;
	}
}

.bs-toggle {
	background: var(--bs-surface-2);
	border: 1px solid var(--bs-border-strong);
	border-radius: var(--bs-radius-sm);
	color: var(--bs-text);
	cursor: pointer;
	display: grid;
	height: 40px;
	place-items: center;
	width: 40px;
}

@media (min-width: 900px) {
	.bs-toggle {
		display: none;
	}
}

.bs-toggle__bars,
.bs-toggle__bars::before,
.bs-toggle__bars::after {
	background: currentColor;
	border-radius: 2px;
	content: "";
	display: block;
	height: 2px;
	transition: transform 160ms ease, opacity 160ms ease;
	width: 18px;
}

.bs-toggle__bars::before {
	transform: translateY(-6px);
}

.bs-toggle__bars::after {
	transform: translateY(4px);
}

.bs-toggle[aria-expanded="true"] .bs-toggle__bars {
	background: transparent;
}

.bs-toggle[aria-expanded="true"] .bs-toggle__bars::before {
	transform: rotate(45deg);
}

.bs-toggle[aria-expanded="true"] .bs-toggle__bars::after {
	transform: rotate(-45deg) translateY(0);
}

.bs-drawer {
	border-top: 1px solid var(--bs-border);
	display: none;
	padding-block: var(--bs-space-3);
}

.bs-drawer.is-open {
	display: block;
}

@media (min-width: 900px) {
	.bs-drawer,
	.bs-drawer.is-open {
		display: none;
	}
}

.bs-drawer__cta {
	border-top: 1px solid var(--bs-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bs-space-2);
	margin-top: var(--bs-space-3);
	padding-top: var(--bs-space-3);
}

.bs-drawer__cta .bs-btn {
	flex: 1 1 12rem;
	text-align: center;
}

.bs-drawer .bs-menu {
	flex-direction: column;
	justify-content: flex-start;
}

.bs-drawer .bs-menu a {
	padding: 10px 12px;
}

.bs-drawer .sub-menu {
	background: none;
	border: 0;
	box-shadow: none;
	display: block;
	padding: 0 0 0 var(--bs-space-3);
	position: static;
}

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */

.bs-btn,
.wp-block-button__link,
input[type="submit"],
button.bs-btn {
	background: var(--bs-accent);
	border: 1px solid var(--bs-accent);
	border-radius: var(--bs-radius-sm);
	color: var(--bs-accent-ink);
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 650;
	line-height: 1.3;
	padding: 11px 20px;
	text-align: center;
	text-decoration: none;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.bs-btn:hover,
.bs-btn:focus-visible,
.wp-block-button__link:hover,
input[type="submit"]:hover {
	background: var(--bs-accent-bright);
	border-color: var(--bs-accent-bright);
	color: var(--bs-accent-ink);
	text-decoration: none;
	transform: translateY(-1px);
}

.bs-btn--ghost {
	background: transparent;
	border-color: var(--bs-border-strong);
	color: var(--bs-text);
}

.bs-btn--ghost:hover,
.bs-btn--ghost:focus-visible {
	background: var(--bs-surface-2);
	border-color: var(--bs-accent);
	color: var(--bs-text);
}

.bs-btn--lg {
	font-size: 1.0625rem;
	padding: 14px 26px;
}

.bs-btn--sm {
	font-size: 0.875rem;
	padding: 8px 14px;
}

.bs-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bs-space-2);
}

/* -------------------------------------------------------------------------
   7. Cards and surfaces
   ------------------------------------------------------------------------- */

.bs-card {
	background: var(--bs-surface);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: var(--bs-space-4);
	transition: border-color 160ms ease, transform 160ms ease;
}

.bs-card--link:hover,
.bs-card--link:focus-within {
	border-color: var(--bs-border-strong);
	transform: translateY(-2px);
}

.bs-card__num {
	color: var(--bs-accent);
	font-size: var(--bs-step--1);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 var(--bs-space-2);
}

.bs-card__title {
	font-size: var(--bs-step-1);
	margin: 0 0 var(--bs-space-2);
}

.bs-card__body {
	color: var(--bs-text-muted);
	margin: 0;
}

.bs-panel {
	background: linear-gradient(160deg, var(--bs-surface-2), var(--bs-surface));
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: clamp(1.5rem, 4vw, 3rem);
}

/* -------------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------------- */

.bs-hero {
	padding-block: clamp(3rem, 9vw, 7rem) var(--bs-space-7);
}

.bs-hero__badge {
	background: var(--bs-surface-2);
	border: 1px solid var(--bs-border-strong);
	border-radius: 999px;
	color: var(--bs-accent);
	display: inline-block;
	font-size: var(--bs-step--1);
	font-weight: 650;
	letter-spacing: 0.01em;
	margin-bottom: var(--bs-space-2);
	padding: 6px 14px;
}

.bs-hero__tagline {
	color: var(--bs-text-muted);
	font-size: var(--bs-step--1);
	margin-bottom: var(--bs-space-4);
	max-width: 46ch;
}

.bs-hero__title {
	font-size: var(--bs-step-5);
	margin-bottom: var(--bs-space-4);
	max-width: 22ch;
}

.bs-hero__title em {
	color: var(--bs-accent);
	font-style: normal;
}

.bs-hero__lead {
	font-size: var(--bs-step-1);
	color: var(--bs-text-muted);
	margin-bottom: var(--bs-space-5);
	max-width: 60ch;
}

.bs-capability-strip {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bs-space-3) var(--bs-space-4);
	margin-top: var(--bs-space-4);
}

.bs-capability-group {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bs-space-1) 6px;
}

.bs-capability-group__label {
	color: var(--bs-accent);
	font-size: var(--bs-step--1);
	font-weight: 650;
	letter-spacing: 0.02em;
	margin-right: 2px;
	text-transform: uppercase;
}

.bs-capability-strip__arrow {
	color: var(--bs-text-faint);
	font-size: var(--bs-step-1);
	line-height: 1;
}

.bs-pill {
	background: var(--bs-surface-2);
	border: 1px solid var(--bs-border-strong);
	border-radius: 999px;
	color: var(--bs-text-muted);
	display: inline-block;
	font-size: var(--bs-step--1);
	padding: 4px 11px;
	white-space: nowrap;
}

.bs-stats {
	border-top: 1px solid var(--bs-border);
	display: grid;
	gap: var(--bs-space-4);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin-top: var(--bs-space-6);
	padding-top: var(--bs-space-4);
}

.bs-stat__value {
	font-size: var(--bs-step-3);
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0;
}

.bs-stat__label {
	color: var(--bs-text-muted);
	font-size: var(--bs-step--1);
	margin: var(--bs-space-1) 0 0;
}

/* -------------------------------------------------------------------------
   9. Steps
   ------------------------------------------------------------------------- */

.bs-steps {
	counter-reset: bs-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-steps li {
	border-top: 1px solid var(--bs-border);
	counter-increment: bs-step;
	display: grid;
	gap: var(--bs-space-1) var(--bs-space-4);
	grid-template-columns: 2.5rem 1fr;
	padding-block: var(--bs-space-4);
}

.bs-steps li::before {
	color: var(--bs-accent);
	content: counter(bs-step, decimal-leading-zero);
	font-size: var(--bs-step-1);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	grid-row: span 2;
}

.bs-steps h3 {
	font-size: var(--bs-step-1);
	margin: 0;
}

.bs-steps p {
	color: var(--bs-text-muted);
	margin: 0;
	max-width: var(--bs-measure);
}

/* -------------------------------------------------------------------------
   10. Entry / posts
   ------------------------------------------------------------------------- */

.bs-entry {
	max-width: none;
}

.bs-entry__header {
	margin-bottom: var(--bs-space-5);
}

.bs-entry__title {
	margin-bottom: var(--bs-space-3);
}

.bs-entry__meta {
	color: var(--bs-text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--bs-step--1);
	gap: var(--bs-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-entry__meta li {
	margin: 0;
}

.bs-entry__thumb {
	border-radius: var(--bs-radius);
	margin-bottom: var(--bs-space-5);
	overflow: hidden;
}

.bs-entry__content {
	max-width: var(--bs-measure);
}

/*
 * A reading measure is the right default for an article, but it is a second,
 * less obvious cap on top of the container: widening the wrapper alone left the
 * plan table narrow. Wide pages opt out of both.
 */
.bs-wide-page .bs-entry__content {
	max-width: none;
}

.bs-pricing-page .bs-entry__header {
	text-align: center;
}

.bs-pricing-page .bs-entry__content > * {
	margin-bottom: 0;
}

.bs-entry__content > * {
	margin-bottom: var(--bs-space-4);
}

.bs-entry__content h2 {
	font-size: var(--bs-step-2);
	margin-top: var(--bs-space-6);
}

.bs-entry__content h3 {
	font-size: var(--bs-step-1);
	margin-top: var(--bs-space-5);
}

.bs-entry__content ul,
.bs-entry__content ol {
	padding-left: var(--bs-space-4);
}

.bs-entry__content li {
	margin-bottom: var(--bs-space-1);
}

.bs-entry__content .alignwide {
	max-width: var(--bs-container);
}

.bs-entry__footer {
	border-top: 1px solid var(--bs-border);
	margin-top: var(--bs-space-6);
	padding-top: var(--bs-space-4);
}

.bs-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bs-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-taglist a {
	background: var(--bs-surface-2);
	border: 1px solid var(--bs-border-strong);
	border-radius: 999px;
	color: var(--bs-text-muted);
	display: inline-block;
	font-size: var(--bs-step--1);
	padding: 3px 12px;
	text-decoration: none;
}

.bs-taglist a:hover,
.bs-taglist a:focus-visible {
	border-color: var(--bs-accent);
	color: var(--bs-text);
}

.bs-postlist {
	display: grid;
	gap: var(--bs-space-4);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-postcard {
	background: var(--bs-surface);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 160ms ease, transform 160ms ease;
}

.bs-postcard:hover,
.bs-postcard:focus-within {
	border-color: var(--bs-border-strong);
	transform: translateY(-2px);
}

.bs-postcard__thumb img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.bs-postcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--bs-space-4);
}

.bs-postcard__title {
	font-size: var(--bs-step-1);
	margin: 0 0 var(--bs-space-2);
}

.bs-postcard__title a {
	color: var(--bs-text);
	text-decoration: none;
}

.bs-postcard__title a:hover,
.bs-postcard__title a:focus-visible {
	color: var(--bs-accent);
}

.bs-postcard__excerpt {
	color: var(--bs-text-muted);
	flex: 1 1 auto;
	font-size: 0.9375rem;
	margin: 0 0 var(--bs-space-3);
}

.bs-postcard__meta {
	color: var(--bs-text-faint);
	font-size: var(--bs-step--1);
	margin: 0;
}

.bs-archive__head {
	border-bottom: 1px solid var(--bs-border);
	margin-bottom: var(--bs-space-5);
	padding-bottom: var(--bs-space-4);
}

/* -------------------------------------------------------------------------
   11. Pagination and comments
   ------------------------------------------------------------------------- */

.bs-pagination {
	border-top: 1px solid var(--bs-border);
	margin-top: var(--bs-space-6);
	padding-top: var(--bs-space-4);
}

.bs-pagination .nav-links,
.bs-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bs-space-1);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-pagination a.page-numbers,
.bs-pagination span.page-numbers {
	border: 1px solid var(--bs-border-strong);
	border-radius: var(--bs-radius-sm);
	color: var(--bs-text-muted);
	display: inline-block;
	font-variant-numeric: tabular-nums;
	min-width: 40px;
	padding: 7px 12px;
	text-align: center;
	text-decoration: none;
}

.bs-pagination a.page-numbers:hover,
.bs-pagination a.page-numbers:focus-visible {
	border-color: var(--bs-accent);
	color: var(--bs-text);
}

.bs-pagination .page-numbers.current {
	background: var(--bs-accent);
	border-color: var(--bs-accent);
	color: var(--bs-accent-ink);
	font-weight: 700;
}

.bs-comments {
	border-top: 1px solid var(--bs-border);
	margin-top: var(--bs-space-6);
	max-width: var(--bs-measure);
	padding-top: var(--bs-space-5);
}

.bs-comments__title {
	font-size: var(--bs-step-2);
}

.comment-list {
	list-style: none;
	margin: 0 0 var(--bs-space-5);
	padding: 0;
}

.comment-list ol.children {
	list-style: none;
	margin: var(--bs-space-3) 0 0;
	padding-left: var(--bs-space-4);
}

.comment-body {
	background: var(--bs-surface);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	margin-bottom: var(--bs-space-3);
	padding: var(--bs-space-4);
}

.comment-author {
	align-items: center;
	display: flex;
	gap: var(--bs-space-2);
	margin-bottom: var(--bs-space-2);
}

.comment-author img {
	border-radius: 50%;
}

.comment-metadata {
	color: var(--bs-text-faint);
	font-size: var(--bs-step--1);
	margin-bottom: var(--bs-space-2);
}

.comment-respond {
	background: var(--bs-surface);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: var(--bs-space-4);
}

/* -------------------------------------------------------------------------
   12. Forms
   ------------------------------------------------------------------------- */

label {
	display: block;
	font-size: var(--bs-step--1);
	font-weight: 650;
	margin-bottom: var(--bs-space-1);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	background: var(--bs-bg);
	border: 1px solid var(--bs-border-strong);
	border-radius: var(--bs-radius-sm);
	color: var(--bs-text);
	font: inherit;
	font-size: 0.9375rem;
	padding: 10px 12px;
	width: 100%;
}

input::placeholder,
textarea::placeholder {
	color: var(--bs-text-faint);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--bs-accent);
	outline: none;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

.bs-searchform {
	display: flex;
	gap: var(--bs-space-2);
}

.bs-searchform label {
	flex: 1 1 auto;
	margin: 0;
}

/* -------------------------------------------------------------------------
   13. Sidebar
   ------------------------------------------------------------------------- */

.bs-sidebar {
	display: grid;
	gap: var(--bs-space-4);
}

.bs-widget {
	background: var(--bs-surface);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: var(--bs-space-4);
}

.bs-widget__title {
	font-size: var(--bs-step-0);
	letter-spacing: 0.04em;
	margin-bottom: var(--bs-space-3);
	text-transform: uppercase;
}

.bs-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-widget li {
	border-top: 1px solid var(--bs-border);
	padding-block: var(--bs-space-1);
}

.bs-widget li:first-child {
	border-top: 0;
}

.bs-widget a {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------------- */

.bs-footer {
	border-top: 1px solid var(--bs-border);
	margin-top: var(--bs-space-8);
	padding-block: var(--bs-space-6) var(--bs-space-4);
}

.bs-footer__top {
	display: grid;
	gap: var(--bs-space-5);
	grid-template-columns: 1fr;
	margin-bottom: var(--bs-space-5);
}

@media (min-width: 780px) {
	.bs-footer__top {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.bs-footer__pitch {
	color: var(--bs-text-muted);
	font-size: 0.9375rem;
	margin: var(--bs-space-3) 0 0;
	max-width: 44ch;
}

.bs-footer__heading {
	font-size: var(--bs-step--1);
	letter-spacing: 0.1em;
	margin-bottom: var(--bs-space-2);
	text-transform: uppercase;
}

.bs-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-footer__list li {
	margin-bottom: var(--bs-space-1);
}

.bs-footer__list a {
	color: var(--bs-text-muted);
	font-size: 0.9375rem;
	text-decoration: none;
}

.bs-footer__list a:hover,
.bs-footer__list a:focus-visible {
	color: var(--bs-text);
}

.bs-footer__bottom {
	align-items: center;
	border-top: 1px solid var(--bs-border);
	color: var(--bs-text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--bs-step--1);
	gap: var(--bs-space-3);
	justify-content: space-between;
	padding-top: var(--bs-space-4);
}

.bs-footer__bottom p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   15. Console page template
   ------------------------------------------------------------------------- */

.bs-app-page {
	padding-block: var(--bs-space-5) var(--bs-space-7);
}

.bs-app-page .bs-container {
	max-width: 1320px;
}

/* -------------------------------------------------------------------------
   16. WordPress core classes
   ------------------------------------------------------------------------- */

.alignleft {
	float: left;
	margin: 0 var(--bs-space-4) var(--bs-space-3) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--bs-space-3) var(--bs-space-4);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
}

.sticky .bs-postcard__title::after {
	color: var(--bs-accent);
	content: " ★";
}

.bypostauthor > .comment-body {
	border-color: var(--bs-border-strong);
}

.gallery {
	display: grid;
	gap: var(--bs-space-2);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.gallery-item {
	margin: 0;
}

/* -------------------------------------------------------------------------
   17. Motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}

	.bs-btn:hover,
	.bs-card--link:hover,
	.bs-postcard:hover {
		transform: none;
	}
}

@media print {
	.bs-header,
	.bs-footer,
	.bs-sidebar,
	.skip-link {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}

.bs-btn-row--spaced {
	margin-top: var(--bs-space-4);
}

/* -------------------------------------------------------------------------
   19. Front page — centred marketing layout

   Scoped to body.home so article and archive pages keep their left-aligned
   reading measure, where centred body copy would hurt legibility.
   ------------------------------------------------------------------------- */

body.home .bs-hero,
body.home .bs-section {
	text-align: center;
}

/* Every constrained block re-centres itself, since the base rules only cap
   width and would otherwise leave the block hugging the left edge. */
body.home .bs-section__head,
body.home .bs-lead,
body.home .bs-hero__lead,
body.home .bs-hero__title,
body.home .bs-steps p,
body.home .bs-card__body {
	margin-inline: auto;
}

body.home .bs-btn-row {
	justify-content: center;
}

/* --- Hero ---------------------------------------------------------------- */

body.home .bs-hero {
	overflow: hidden;
	position: relative;
}

/* One soft light source behind the headline, so the fold reads as depth
   instead of flat black. Decorative only. */
body.home .bs-hero::before {
	background: radial-gradient(58% 46% at 50% 6%, rgba(56, 189, 248, 0.18), transparent 72%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

body.home .bs-hero > * {
	position: relative;
	z-index: 1;
}

body.home .bs-hero__title {
	letter-spacing: -0.035em;
	line-height: 1.06;
	max-width: 26ch;
	text-wrap: balance;
}

body.home .bs-hero__lead {
	max-width: 56ch;
	text-wrap: pretty;
}

@media (max-width: 540px) {
	body.home .bs-capability-strip {
		flex-direction: column;
		align-items: flex-start;
	}

	body.home .bs-capability-group__label {
		flex-basis: 100%;
		margin-bottom: 4px;
	}

	body.home .bs-capability-strip__arrow {
		display: none;
	}
}

.bs-cta-inline {
	align-items: center;
	border-top: 1px solid var(--bs-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bs-space-3);
	justify-content: space-between;
	margin-top: var(--bs-space-6);
	padding-top: var(--bs-space-5);
}

.bs-cta-inline p {
	color: var(--bs-text);
	font-size: var(--bs-step-1);
	font-weight: 650;
	margin: 0;
	max-width: 46ch;
}

@media (max-width: 640px) {
	.bs-cta-inline {
		flex-direction: column;
		align-items: stretch;
	}

	.bs-cta-inline .bs-btn {
		text-align: center;
	}
}

/* --- Stat strip -------------------------------------------------------- */

body.home .bs-stats {
	border-top: 0;
	gap: var(--bs-space-3);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-top: var(--bs-space-7);
	padding-top: 0;
	text-align: center;
}

body.home .bs-stat {
	background: linear-gradient(180deg, var(--bs-surface-2), var(--bs-surface));
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: var(--bs-space-4) var(--bs-space-3);
}

body.home .bs-stat__value {
	background: linear-gradient(180deg, var(--bs-text), #b6cfe0);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--bs-text);
}

body.home .bs-stat__label {
	margin-inline: auto;
	max-width: 24ch;
}

/* --- Section headings -------------------------------------------------- */

body.home .bs-section__head {
	max-width: 62ch;
}

body.home .bs-section__head h2 {
	letter-spacing: -0.025em;
	text-wrap: balance;
}

/* --- Feature cards ----------------------------------------------------- */

body.home .bs-card {
	align-items: center;
	display: flex;
	flex-direction: column;
	text-align: center;
}

body.home .bs-card__num {
	align-items: center;
	background: rgba(56, 189, 248, 0.1);
	border: 1px solid rgba(56, 189, 248, 0.32);
	border-radius: 999px;
	display: inline-flex;
	height: 34px;
	justify-content: center;
	letter-spacing: 0.04em;
	margin-bottom: var(--bs-space-3);
	width: 34px;
}

body.home .bs-card__body {
	max-width: 34ch;
}

body.home #capabilities .bs-card {
	padding: var(--bs-space-5) var(--bs-space-4);
}

body.home #capabilities .bs-card:hover {
	border-color: var(--bs-border-strong);
}

/* --- Steps ------------------------------------------------------------- */

/* The default two-column number-beside-text layout cannot be centred
   convincingly, so on the home page each step becomes its own centred cell
   with the number badge stacked above the heading. */
body.home .bs-steps {
	display: grid;
	gap: var(--bs-space-5) var(--bs-space-4);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	text-align: center;
}

body.home .bs-steps li {
	border-top: 0;
	display: block;
	padding-block: 0;
}

body.home .bs-steps li::before {
	align-items: center;
	background: rgba(56, 189, 248, 0.1);
	border: 1px solid rgba(56, 189, 248, 0.32);
	border-radius: 999px;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	margin-bottom: var(--bs-space-3);
	width: 40px;
}

body.home .bs-steps h3 {
	margin-bottom: var(--bs-space-2);
}

body.home .bs-steps p {
	max-width: 32ch;
}

/* --- Post cards -------------------------------------------------------- */

body.home .bs-postcard__body {
	align-items: center;
	display: flex;
	flex-direction: column;
	text-align: center;
}

body.home .bs-postcard__excerpt {
	max-width: 38ch;
}

/* --- Editor content on the front page ---------------------------------- */

/* Headings centre with the rest of the page; paragraphs and list items stay
   left-aligned inside a centred column, because centred multi-line prose and
   centred bullets are genuinely harder to read. */
body.home .bs-entry__content {
	margin-inline: auto;
	max-width: var(--bs-measure);
	text-align: left;
}

body.home .bs-entry__content h2,
body.home .bs-entry__content h3,
body.home .bs-entry__content blockquote {
	text-align: center;
}

/* --- Closing panel ----------------------------------------------------- */

body.home .bs-panel {
	position: relative;
}

body.home .bs-panel .bs-section__head:last-of-type {
	margin-bottom: var(--bs-space-4);
}

/* --- Small screens ----------------------------------------------------- */

@media (max-width: 600px) {
	body.home .bs-hero {
		padding-block: clamp(2.25rem, 8vw, 3.5rem) var(--bs-space-6);
	}

	body.home .bs-hero__title {
		max-width: 100%;
		font-size: clamp(2rem, 1.5rem + 3vw, 2.75rem);
	}

	body.home .bs-stats {
		grid-template-columns: 1fr 1fr;
		margin-top: var(--bs-space-5);
	}

	body.home .bs-stat {
		padding: var(--bs-space-3);
	}

	body.home .bs-section {
		padding-block: var(--bs-space-6);
	}

	/* Full-width stacked buttons read better than two cramped pills. */
	body.home .bs-btn-row {
		flex-direction: column;
	}

	body.home .bs-btn-row .bs-btn {
		width: 100%;
	}
}

@media (max-width: 380px) {
	body.home .bs-stats {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Pricing card variations for Phase 6
   ------------------------------------------------------------------------- */

.bs-card--featured {
	background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent) 100%);
	border: 2px solid var(--bs-accent-bright);
	color: var(--bs-accent-ink);
	position: relative;
	transform: scale(1.02);
}

.bs-card--featured .bs-card__title,
.bs-card--featured .bs-card__body,
.bs-card--featured .bs-card__price,
.bs-card--featured .bs-card__features,
.bs-card--featured .bs-card__note {
	color: var(--bs-accent-ink);
}

.bs-card--featured .bs-card__num,
.bs-card--featured .bs-card__badge {
	color: var(--bs-accent-ink);
}

.bs-card--featured .bs-btn {
	background-color: var(--bs-accent-ink);
	color: var(--bs-accent);
	font-weight: 700;
}

.bs-card--featured .bs-btn:hover {
	background-color: rgba(4, 32, 46, 0.85);
}

.bs-card--highlight {
	background: var(--bs-surface);
	border: 1px solid var(--bs-border);
}

.bs-card__badge {
	background-color: var(--bs-accent);
	color: var(--bs-accent-ink);
	display: inline-block;
	font-size: var(--bs-step--1);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0 0 var(--bs-space-3);
	padding: var(--bs-space-1) var(--bs-space-2);
	border-radius: var(--bs-radius-sm);
	text-transform: uppercase;
}

.bs-card__price {
	font-size: var(--bs-step-3);
	font-weight: 700;
	margin: var(--bs-space-3) 0 var(--bs-space-2);
	color: var(--bs-accent);
}

.bs-card--featured .bs-card__price {
	color: var(--bs-accent-ink);
}

.bs-card__period {
	font-size: var(--bs-step--1);
	font-weight: 400;
	color: var(--bs-text-muted);
	margin-left: 0.25em;
}

.bs-card--featured .bs-card__period {
	color: var(--bs-accent-ink);
	opacity: 0.85;
}

.bs-card__features {
	list-style: none;
	padding: var(--bs-space-4) 0;
	margin: 0;
	border-top: 1px solid var(--bs-border);
	border-bottom: 1px solid var(--bs-border);
}

.bs-card--featured .bs-card__features {
	border-top-color: rgba(4, 32, 46, 0.3);
	border-bottom-color: rgba(4, 32, 46, 0.3);
}

.bs-card__features li {
	color: var(--bs-text-muted);
	font-size: var(--bs-step-0);
	line-height: 1.8;
	margin-bottom: var(--bs-space-2);
}

.bs-card__features li:last-child {
	margin-bottom: 0;
}

.bs-card--featured .bs-card__features li {
	color: var(--bs-accent-ink);
}

.bs-card__note {
	color: var(--bs-text-muted);
	font-size: var(--bs-step--1);
	margin-top: var(--bs-space-3);
	font-style: italic;
}

.bs-card--featured .bs-card__note {
	color: var(--bs-accent-ink);
	opacity: 0.9;
}

.bs-btn--full {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: var(--bs-space-4);
}

/* Ensure pricing cards stack nicely on mobile */
@media (max-width: 768px) {
	.bs-card--featured {
		transform: scale(1);
	}

	#pricing-tiers .bs-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* Reputation Optimization section */
#reputation-optimization .bs-card__num {
	font-size: var(--bs-step-0);
	color: var(--bs-accent-bright);
	margin-bottom: var(--bs-space-3);
}

/* =========================================================================
   HOMEPAGE — dedicated design system.
   Scoped entirely to body.home with its own bs-h- prefixed classes so
   nothing here touches any other template. Mobile-first: base rules target
   a phone, min-width queries add layout for wider screens.
   ========================================================================= */

body.home {
	--h-ink: #0E1526;
	--h-ink-2: #16203A;
	--h-ink-3: #202C4D;
	--h-line: #2B3656;
	--h-paper: #F4F1E9;
	--h-paper-dim: #CBC6B8;
	--h-muted: #8D93A8;
	--h-gold: #CD9B47;
	--h-gold-soft: #E4C079;
	--h-signal: #CC6250;
	--h-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
	--h-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	background: var(--h-ink);
}

body.home .bs-main {
	background: var(--h-ink);
	color: var(--h-paper);
	font-family: var(--h-sans);
	overflow-x: hidden;
}

body.home .bs-header {
	background: rgba(14, 21, 38, 0.88);
	border-bottom-color: var(--h-line);
}

body.home .bs-footer {
	background: var(--h-ink);
	border-top-color: var(--h-line);
}

.bs-h-wrap {
	margin-inline: auto;
	max-width: 1180px;
	padding-inline: 20px;
}

.bs-h-section {
	padding-block: 52px;
}

.bs-h-section--divided {
	border-top: 1px solid var(--h-line);
}

/* ---- Kicker (replaces the all-caps eyebrow pattern site-wide default) -- */

.bs-h-kicker {
	align-items: center;
	color: var(--h-gold);
	display: flex;
	font-family: var(--h-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	margin-bottom: 14px;
}

.bs-h-kicker::before {
	background: var(--h-gold);
	border-radius: 1px;
	content: "";
	display: inline-block;
	height: 2px;
	width: 22px;
}

/* ---- Hero --------------------------------------------------------------- */

.bs-h-hero {
	padding-block: 48px 40px;
}

.bs-h-hero__grid {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.bs-h-hero__content {
	text-align: center;
}

.bs-h-hero__title {
	color: var(--h-paper);
	font-family: var(--h-serif);
	font-size: clamp(2.1rem, 7vw, 3.6rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin: 0 auto 20px;
	max-width: 16ch;
	text-wrap: balance;
}

.bs-h-hero__lead {
	color: var(--h-paper-dim);
	font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
	line-height: 1.6;
	margin: 0 auto 28px;
	max-width: 52ch;
}

.bs-h-btn-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	justify-content: center;
}

.bs-h-btn {
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--h-sans);
	font-size: 1rem;
	font-weight: 600;
	padding: 13px 24px;
	text-decoration: none;
	transition: transform 0.15s ease, background 0.15s ease;
	-webkit-background-clip: initial;
	background-clip: initial;
}

.bs-h-btn:focus-visible {
	outline: 2px solid var(--h-gold-soft);
	outline-offset: 3px;
}

.bs-h-btn--primary,
.bs-h-btn--primary:hover,
.bs-h-btn--primary:focus,
.bs-h-btn--primary:active {
	-webkit-text-fill-color: #241704;
}

.bs-h-btn--primary {
	background: var(--h-gold);
	color: #241704;
}

.bs-h-btn--primary:hover {
	background: var(--h-gold-soft);
}

.bs-h-btn--ghost {
	background: transparent;
	border: 1px solid var(--h-line);
	color: var(--h-paper);
	-webkit-text-fill-color: var(--h-paper);
}

.bs-h-btn--ghost:hover {
	border-color: var(--h-gold);
	color: var(--h-gold-soft);
	-webkit-text-fill-color: var(--h-gold-soft);
}

.bs-h-link {
	color: var(--h-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--h-line);
	text-underline-offset: 3px;
}

.bs-h-link:hover {
	color: var(--h-paper);
	text-decoration-color: var(--h-gold);
}

@media (prefers-reduced-motion: reduce) {
	.bs-h-btn {
		transition: none;
	}
}

/* ---- Hero product preview (the one bold visual moment) ------------------ */

.bs-h-preview {
	background: var(--h-ink-2);
	border: 1px solid var(--h-line);
	border-radius: 14px;
	overflow: hidden;
	width: 100%;
}

.bs-h-preview__bar {
	align-items: center;
	border-bottom: 1px solid var(--h-line);
	display: flex;
	gap: 6px;
	padding: 12px 16px;
}

.bs-h-preview__dot {
	background: var(--h-line);
	border-radius: 50%;
	height: 8px;
	width: 8px;
}

.bs-h-preview__label {
	color: var(--h-muted);
	font-size: 0.75rem;
	margin-left: 6px;
}

.bs-h-preview__body {
	padding: 20px;
}

.bs-h-preview__row {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 18px;
}

.bs-h-preview__name {
	color: var(--h-paper);
	font-family: var(--h-serif);
	font-size: 1.1rem;
}

.bs-h-preview__role {
	color: var(--h-muted);
	display: block;
	font-family: var(--h-sans);
	font-size: 0.8125rem;
	margin-top: 2px;
}

.bs-h-preview__score {
	text-align: right;
}

.bs-h-preview__score-num {
	color: var(--h-signal);
	font-family: var(--h-serif);
	font-size: 2rem;
	line-height: 1;
}

.bs-h-preview__score-label {
	color: var(--h-muted);
	font-size: 0.75rem;
}

.bs-h-preview__spark {
	display: block;
	margin: 4px 0 18px;
	width: 100%;
}

.bs-h-preview__chip {
	background: var(--h-ink-3);
	border-radius: 999px;
	color: var(--h-paper-dim);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	padding: 6px 12px;
}

.bs-h-preview__chip::before {
	background: var(--h-gold);
	border-radius: 50%;
	content: "";
	height: 6px;
	width: 6px;
}

/* ---- Proof strip ---------------------------------------------------------- */

.bs-h-proof {
	border-top: 1px solid var(--h-line);
	border-bottom: 1px solid var(--h-line);
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	padding-block: 28px;
}

.bs-h-proof__item {
	border-top: 2px solid var(--h-gold);
	padding-top: 12px;
	text-align: center;
}

.bs-h-proof__num {
	color: var(--h-paper);
	display: block;
	font-family: var(--h-serif);
	font-size: 1.75rem;
	line-height: 1.1;
}

.bs-h-proof__label {
	color: var(--h-muted);
	font-size: 0.875rem;
	margin-top: 2px;
}

/* ---- Section heading block ------------------------------------------------ */

.bs-h-head {
	margin-bottom: 32px;
	margin-inline: auto;
	max-width: 62ch;
	text-align: center;
}

.bs-h-head h2 {
	color: var(--h-paper);
	font-family: var(--h-serif);
	font-size: clamp(1.5rem, 4vw, 2.125rem);
	font-weight: 500;
	line-height: 1.18;
	margin: 0 0 12px;
	text-wrap: balance;
}

.bs-h-head p {
	color: var(--h-paper-dim);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0;
}

/* ---- Two pillars ----------------------------------------------------------- */

.bs-h-pillars {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
}

.bs-h-pillar {
	border-top: 1px solid var(--h-line);
	padding-top: 20px;
	text-align: center;
}

.bs-h-pillar h3 {
	color: var(--h-paper);
	font-family: var(--h-serif);
	font-size: 1.3rem;
	font-weight: 500;
	margin: 0 0 10px;
}

.bs-h-pillar p {
	color: var(--h-paper-dim);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

/* ---- Problem statement (bridges hero to the pillars) ----------------------- */

.bs-h-problem {
	margin-inline: auto;
	max-width: 56ch;
	text-align: center;
}

.bs-h-problem p:first-child {
	color: var(--h-paper);
	font-family: var(--h-serif);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 14px;
	text-wrap: balance;
}

.bs-h-problem p:last-child {
	color: var(--h-paper-dim);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0;
}

/* ---- Proof / illustrative demo -------------------------------------------- */

.bs-h-demo__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bs-h-demo__tabs {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.bs-h-demo__tab {
	cursor: pointer;
	padding: 10px 22px;
	border-radius: 999px;
	border: 1px solid var(--h-line);
	color: var(--h-paper-dim);
	font-size: 0.9375rem;
	font-weight: 600;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
	user-select: none;
}

.bs-h-demo__panel {
	display: none;
}

#bs-h-demo-1:checked ~ #bs-h-panel-1,
#bs-h-demo-2:checked ~ #bs-h-panel-2,
#bs-h-demo-3:checked ~ #bs-h-panel-3 {
	display: block;
}

#bs-h-demo-1:checked ~ .bs-h-demo__tabs .bs-h-demo__tab[for="bs-h-demo-1"],
#bs-h-demo-2:checked ~ .bs-h-demo__tabs .bs-h-demo__tab[for="bs-h-demo-2"],
#bs-h-demo-3:checked ~ .bs-h-demo__tabs .bs-h-demo__tab[for="bs-h-demo-3"] {
	background: var(--h-gold);
	border-color: var(--h-gold);
	color: var(--h-ink);
}

.bs-h-demo__card {
	background: var(--h-ink-2);
	border: 1px solid var(--h-line);
	border-radius: 14px;
	padding: 32px;
	max-width: 640px;
	margin-inline: auto;
}

.bs-h-demo__cardhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 22px;
}

.bs-h-demo__badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.bs-h-demo__badge--flag,
.bs-h-demo__badge--risk {
	background: rgba(204, 98, 80, 0.15);
	color: var(--h-signal);
}

.bs-h-demo__badge--rival {
	background: rgba(205, 155, 71, 0.15);
	color: var(--h-gold);
}

.bs-h-demo__score {
	font-family: var(--h-serif);
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--h-paper);
	text-align: right;
}

.bs-h-demo__score small {
	display: block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--h-paper-dim);
	text-transform: none;
	letter-spacing: normal;
}

.bs-h-demo__claim {
	font-size: 1.0625rem;
	color: var(--h-paper);
	font-style: italic;
	margin: 0 0 12px;
	line-height: 1.5;
}

.bs-h-demo__verdict {
	color: var(--h-paper-dim);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

.bs-h-demo__note {
	text-align: center;
	color: var(--h-paper-dim);
	font-size: 0.8125rem;
	margin: 24px 0 0;
	font-style: italic;
}

/* ---- Built for (roles list) ------------------------------------------------ */

.bs-h-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.bs-h-role {
	background: var(--h-ink-2);
	border: 1px solid var(--h-line);
	border-radius: 999px;
	color: var(--h-paper-dim);
	display: inline-block;
	font-size: 0.9375rem;
	padding: 8px 18px;
}

/* ---- About page ------------------------------------------------------- */

.bs-h-hero--about {
	padding-bottom: 0;
}

.bs-h-hero__content--wide {
	max-width: 72ch;
}

.bs-h-hero__title--about {
	max-width: 20ch;
}

.bs-h-hero__lead--about {
	max-width: 62ch;
}

.bs-h-head--left {
	margin-inline: 0;
	text-align: left;
}

.bs-h-about-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
}

.bs-h-about-text {
	color: var(--h-paper-dim);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 16px;
}

.bs-h-about-grid .bs-h-btn {
	margin-top: 4px;
}

/* ---- Sequence (how it works — a genuine ordered process) ------------------ */

.bs-h-sequence {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.bs-h-step {
	border-top: 2px solid var(--h-gold);
	padding-top: 18px;
	text-align: center;
}

.bs-h-step__num {
	color: var(--h-gold);
	display: block;
	font-family: var(--h-serif);
	font-size: 0.9375rem;
	margin-bottom: 4px;
}

.bs-h-step h3 {
	color: var(--h-paper);
	font-family: var(--h-serif);
	font-size: 1.2rem;
	font-weight: 500;
	margin: 0 0 6px;
}

.bs-h-step p {
	color: var(--h-paper-dim);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin-inline: auto;
	max-width: 46ch;
}

/* ---- Monitor / Optimize — plain list, not chips, never "packed" ----------- */

.bs-h-flow {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
}

.bs-h-flow__col {
	background: var(--h-ink-2);
	border: 1px solid var(--h-line);
	border-radius: 12px;
	padding: 24px;
	text-align: center;
}

.bs-h-flow__label {
	color: var(--h-gold);
	font-family: var(--h-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0 0 14px;
}

.bs-h-flow__list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-h-flow__list li {
	color: var(--h-paper-dim);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.bs-h-flow__list li::before {
	color: var(--h-gold);
	content: "— ";
}

/* ---- Inline CTA between sections ------------------------------------------ */

.bs-h-cta {
	align-items: center;
	border-top: 1px solid var(--h-line);
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 40px;
	padding-top: 28px;
	text-align: center;
}

.bs-h-cta p {
	color: var(--h-paper);
	font-family: var(--h-serif);
	font-size: 1.25rem;
	margin: 0;
	max-width: 40ch;
}

/* ---- Newsroom -------------------------------------------------------------- */

.bs-h-posts {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-h-post {
	border-top: 1px solid var(--h-line);
	padding-top: 16px;
}

.bs-h-post a {
	color: var(--h-paper);
	font-family: var(--h-serif);
	font-size: 1.1875rem;
	line-height: 1.3;
	text-decoration: none;
}

.bs-h-post a:hover {
	color: var(--h-gold-soft);
}

.bs-h-post time {
	color: var(--h-muted);
	display: block;
	font-size: 0.8125rem;
	margin-top: 8px;
}

/* ---- Closing panel ---------------------------------------------------------- */

.bs-h-close {
	background: var(--h-ink-2);
	border-radius: 18px;
	padding: 44px 24px;
	text-align: center;
}

.bs-h-close .bs-h-head {
	margin-bottom: 26px;
}

/* =========================================================================
   Progressive enhancement — tablet and up
   ========================================================================= */

@media (min-width: 640px) {
	.bs-h-wrap {
		padding-inline: 32px;
	}

	.bs-h-section {
		padding-block: 68px;
	}

	.bs-h-proof {
		grid-template-columns: repeat(4, 1fr);
	}

	.bs-h-pillars {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}

	.bs-h-about-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bs-h-flow {
		grid-template-columns: repeat(2, 1fr);
	}

	.bs-h-sequence {
		display: grid;
		gap: 32px 28px;
		grid-template-columns: repeat(2, 1fr);
	}

	.bs-h-step p {
		max-width: none;
	}

	.bs-h-cta {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	.bs-h-close {
		padding: 56px 48px;
	}
}

/* =========================================================================
   Progressive enhancement — desktop
   ========================================================================= */

@media (min-width: 1000px) {
	.bs-h-hero {
		padding-block: 72px 56px;
	}

	.bs-h-hero__grid {
		align-items: center;
		flex-direction: row;
		gap: 64px;
	}

	.bs-h-hero__content {
		flex: 0 0 54%;
		text-align: left;
	}

	.bs-h-hero__content.bs-h-hero__content--wide {
		flex: 1 1 100%;
		max-width: 72ch;
	}

	.bs-h-hero__content .bs-h-kicker {
		justify-content: flex-start;
	}

	.bs-h-hero__title,
	.bs-h-hero__lead {
		margin-inline: 0;
	}

	.bs-h-hero__content .bs-h-btn-row {
		justify-content: flex-start;
	}

	.bs-h-proof__item {
		border-left: 2px solid var(--h-gold);
		border-top: 0;
		padding-left: 14px;
		padding-top: 0;
		text-align: left;
	}

	.bs-h-preview {
		flex: 0 0 40%;
		margin-left: auto;
		max-width: 380px;
	}

	.bs-h-pillars--four {
		grid-template-columns: repeat(4, 1fr);
	}

	.bs-h-section--roles .bs-h-head {
		max-width: 900px;
	}

	.bs-h-section--roles .bs-h-head h2 {
		font-size: 1.75rem;
		letter-spacing: -0.01em;
		white-space: nowrap;
	}

	/* ---- Premium boxed treatment (desktop only) --------------------------- */

	.bs-h-problem {
		background: var(--h-ink-2);
		border: 1px solid var(--h-line);
		border-radius: 14px;
		max-width: 780px;
		padding: 44px 48px;
		text-align: left;
	}

	.bs-h-problem p:first-child {
		font-size: 1.5rem;
		letter-spacing: -0.01em;
		white-space: nowrap;
	}

	.bs-h-problem p:last-child {
		text-align: justify;
		text-justify: inter-word;
	}

	.bs-h-pillar {
		background: var(--h-ink-2);
		border: 1px solid var(--h-line);
		border-top: 2px solid var(--h-gold);
		border-radius: 14px;
		padding: 32px 28px 28px;
		text-align: center;
		transition: border-color 0.2s ease, transform 0.2s ease;
	}

	.bs-h-pillar:hover {
		border-color: var(--h-gold);
		transform: translateY(-3px);
	}

	.bs-h-pillar h3 {
		text-align: center;
	}

	.bs-h-pillar p {
		text-align: center;
	}

	.bs-h-sequence {
		grid-template-columns: repeat(4, 1fr);
	}
}