/*
 * Besecure marketing theme — design system.
 *
 * This palette deliberately BRIDGES two real brand systems rather than
 * inventing a third:
 *
 *   Befree Connect (the parent brand, befreeconnect.com) contributes the
 *   structural colour and the type. Read off its Elementor globals:
 *     primary #3230E0 · secondary #262184 · accent #230D4F · amber #FFAB57
 *     cream #F9F0E8 · text #101010 · Sora (display) + Noto Sans (body)
 *
 *   Besecure (the product) keeps its own identity where customers recognise
 *   it — the wordmark navy #00456A and, most importantly, the orange #FF7000
 *   that stays the primary call-to-action colour, so the site matches the app
 *   people actually log into.
 *
 * The ramp names are kept from the previous system so every existing component
 * inherits the new palette without being rewritten.
 */

:root {
	/* Indigo ramp — Befree Connect's structural colour. */
	--bs-brand-25: #f2f1fd;
	--bs-brand-50: #e4e3fb;
	--bs-brand-100: #c6c4f6;
	--bs-brand-200: #9c99ef;
	--bs-brand-300: #6f6be8;
	--bs-brand-400: #3230e0;
	--bs-brand-500: #262184;
	--bs-brand-600: #201b6e;
	--bs-brand-700: #230d4f;
	--bs-brand-800: #14103a;
	--bs-brand-900: #0a0631;
	--bs-brand-950: #050318;

	/* Besecure product identity. */
	--bs-navy: #00456a;
	--bs-orange: #ff7000;
	--bs-orange-600: #e05f00;
	--bs-orange-tint: #fff6ed;

	/* Befree Connect accents. */
	--bs-amber: #ffab57;
	--bs-cream: #f4f7fb;
	--bs-sky: #76caff;

	/*
	 * The page alternates dark and light bands, so these neutrals are the DARK
	 * set: a "surface" is a translucent panel floating on the deep indigo
	 * ground, and a "line" is a low-alpha white rule rather than a grey one.
	 * Light bands re-declare the same names with light values — see
	 * `.bs-section--paper` below — so components need no light-specific rules of
	 * their own beyond the handful that hardcode white.
	 *
	 * Text contrast is deliberately generous — #d3d0ea on #0a0631 is about 12:1,
	 * because long-form pages (blog posts, /features, legal) have to stay
	 * comfortable to read, which is where most dark designs fall over.
	 */
	--bs-ink: #f4f3fc;
	--bs-body: #d3d0ea;
	--bs-muted: #a29ecb;
	--bs-line: rgba(255, 255, 255, 0.12);
	--bs-line-soft: rgba(255, 255, 255, 0.07);
	--bs-seam: rgba(255, 255, 255, 0.16);

	/*
	 * Dark grounds. The steps between these are wide on purpose: closely-spaced
	 * tones (the 3% apart they used to be) read as one continuous slab however
	 * many sections you cut it into.
	 */
	--bs-midnight: #050318;
	--bs-dark: #0a0631;
	--bs-ground: #0d0836;
	--bs-dark-2: #120d3c;
	--bs-dark-3: #1a1148;
	--bs-surface: rgba(255, 255, 255, 0.045);
	--bs-surface-2: rgba(255, 255, 255, 0.075);

	/*
	 * Light grounds, for the bands between the dark ones. `--bs-cream` keeps
	 * the softer alternate-band role without the old beige cast; paper is the
	 * white neutral that carries the card-heavy sections.
	 */
	--bs-paper: #ffffff;
	--bs-paper-2: #eef3f8;

	/* Ink for light bands, kept here so both sets are legible side by side. */
	--bs-ink-on-light: #0a0631;
	--bs-body-on-light: #3f4358;
	--bs-muted-on-light: #667085;
	--bs-line-on-light: rgba(10, 6, 49, 0.13);

	--bs-on-dark: #d3d0ea;
	--bs-on-dark-soft: #a29ecb;

	/* Support colours. */
	--bs-success: #12b76a;
	--bs-warning: #fbc638;

	/* Reusable decorative pieces, so every section can carry some depth. */
	--bs-glow-indigo: radial-gradient(680px 340px at 12% 0%, rgba(50, 48, 224, 0.32), transparent 62%);
	--bs-glow-orange: radial-gradient(620px 320px at 90% 100%, rgba(255, 112, 0, 0.16), transparent 62%);
	--bs-grid: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);

	/* Shape and rhythm. */
	--bs-radius-sm: 8px;
	--bs-radius: 12px;
	--bs-radius-lg: 20px;
	--bs-radius-xl: 28px;
	--bs-shadow-sm: 0 1px 2px rgba(0, 45, 70, 0.06), 0 1px 3px rgba(0, 45, 70, 0.04);
	--bs-shadow: 0 4px 16px rgba(0, 45, 70, 0.07);
	--bs-shadow-lg: 0 18px 48px rgba(0, 45, 70, 0.11);
	--bs-shadow-premium: 0 1px 2px rgba(10, 6, 49, 0.05), 0 18px 46px rgba(10, 6, 49, 0.11);
	--bs-shadow-premium-hover: 0 2px 6px rgba(10, 6, 49, 0.07), 0 26px 64px rgba(10, 6, 49, 0.16);
	--bs-wrap: 1160px;
	--bs-wrap-narrow: 780px;

	/* Shared with the BeActive site, so motion feels the same across both. */
	--bs-ease-anim: cubic-bezier(0.18, 0.82, 0.41, 1);

	/* Type — both faces taken from the Befree Connect brand. */
	--bs-font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
	--bs-font-body: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------- reset */

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

/*
 * The `hidden` attribute is only `display: none` in the browser's own
 * stylesheet, so ANY author rule setting `display` beats it — and a component
 * laid out with `display: flex` then ignores `hidden` completely. Several
 * things here are shown and hidden by toggling that attribute from
 * assets/js/main.js (the cookie banner, the integrations directory cards, the
 * blog cards, the empty states), so this has to win outright.
 */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--bs-dark);
	color: var(--bs-body);
	font-family: var(--bs-font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

/*
 * Link colour is a lighter indigo than the brand's #3230E0. That value is a
 * fine link colour on white, but on the deep indigo ground it drops to roughly
 * 1.6:1 against the background — effectively unreadable. #a5a3f7 keeps the
 * brand hue and clears 7:1.
 */
a {
	color: #a5a3f7;
	text-decoration: none;
}

a:hover {
	color: var(--bs-amber);
	text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--bs-font-display);
	color: #ffffff;
	line-height: 1.12;
	letter-spacing: -0.03em;
	margin: 0 0 0.5em;
	font-weight: 600;
}

h1 {
	font-size: clamp(2.35rem, 1.3rem + 4vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.04em;
}

h2 {
	font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.9rem);
	font-weight: 700;
}

h3 {
	font-size: clamp(1.2rem, 1rem + 0.7vw, 1.45rem);
}

h4 {
	font-size: 1.05rem;
}

p {
	margin: 0 0 1.1em;
}

ul,
ol {
	margin: 0 0 1.1em;
	padding-left: 1.25em;
}

li {
	margin-bottom: 0.4em;
}

blockquote {
	margin: 1.5em 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--bs-orange);
	background: var(--bs-surface);
	border-radius: 0 var(--bs-radius) var(--bs-radius) 0;
	font-family: var(--bs-font-display);
	font-size: 1.1rem;
	color: var(--bs-brand-600);
}

blockquote p:last-child {
	margin-bottom: 0;
}

code,
pre {
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
	font-size: 0.9em;
}

code {
	background: rgba(255, 255, 255, 0.09);
	padding: 0.15em 0.4em;
	border-radius: 5px;
	color: var(--bs-amber);
}

pre {
	background: var(--bs-brand-900);
	color: #dbeaf1;
	padding: 1.25rem;
	border-radius: var(--bs-radius);
	overflow-x: auto;
}

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

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

hr {
	border: 0;
	border-top: 1px solid var(--bs-line);
	margin: 2.5rem 0;
}

:focus-visible {
	outline: 2px solid var(--bs-brand-400);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--bs-brand-500);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--bs-radius) 0;
}

.skip-link:focus {
	left: 0;
}

/* ------------------------------------------------------------- layout */

.bs-wrap {
	width: 100%;
	max-width: var(--bs-wrap);
	margin: 0 auto;
	padding: 0 24px;
}

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

.bs-section {
	position: relative;
	padding: clamp(3.5rem, 2rem + 5vw, 6rem) 0;
}

/*
 * A hairline seam at the top of each band, fading out at both edges so it reads
 * as a join rather than a border. It is drawn in the band's OWN `--bs-seam`, so
 * it is a pale rule on the dark bands and a dark one on the light bands.
 */
.bs-section + .bs-section::before,
.bs-section--ground::after,
.bs-section--tint::after,
.bs-section--cream::after,
.bs-section--paper::after,
.bs-section--paper-2::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--bs-seam) 22%, var(--bs-seam) 78%, transparent);
	z-index: 0;
}

.bs-section--tight {
	padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0;
}

/* ------------------------------------------------------------- dark bands */

/*
 * The dark grounds, spread across the full ramp rather than clustered within a
 * few percent of each other. Deep indigo is the default ground, midnight is the
 * anchor band carrying the security story, and the bright indigo band is the
 * one that has to hold its own with a light section on either side.
 */
.bs-section--ground {
	position: relative;
	isolation: isolate;
	background: var(--bs-ground);
	overflow: hidden;
}

.bs-section--ground::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bs-glow-indigo);
	opacity: 0.55;
}

.bs-section--tint {
	position: relative;
	isolation: isolate;
	background: var(--bs-dark-3);
	overflow: hidden;
}

.bs-section--tint::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bs-glow-orange);
	opacity: 0.7;
}

/*
 * The bright indigo band. Between two light sections it has to read as a
 * deliberate slab of brand colour, which #0a0631 is too close to black to do —
 * so this one takes the mid-ramp #262184 with the glows layered over it.
 */
.bs-section--dark {
	position: relative;
	isolation: isolate;
	background: var(--bs-brand-500);
	color: var(--bs-on-dark);
	overflow: hidden;
}

.bs-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(900px 420px at 12% 0%, rgba(111, 107, 232, 0.45), transparent 62%),
		radial-gradient(760px 380px at 92% 100%, rgba(255, 112, 0, 0.22), transparent 60%);
}

.bs-section--dark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%);
	pointer-events: none;
}

/*
 * Midnight: the deepest ground, with the faint technical grid. The genre uses
 * this for weight, so it reads as infrastructure rather than as a dark
 * rectangle — and it is the one band that should feel heavier than the hero.
 */
.bs-section--midnight {
	position: relative;
	isolation: isolate;
	background: var(--bs-midnight);
	color: var(--bs-on-dark);
	overflow: hidden;
}

.bs-section--midnight::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(900px 460px at 14% 0%, rgba(50, 48, 224, 0.38), transparent 64%),
		radial-gradient(700px 360px at 88% 100%, rgba(255, 112, 0, 0.15), transparent 60%);
}

.bs-section--midnight::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--bs-grid);
	background-size: 64px 64px;
	mask-image: radial-gradient(circle at 50% 40%, #000 18%, transparent 76%);
	-webkit-mask-image: radial-gradient(circle at 50% 40%, #000 18%, transparent 76%);
	pointer-events: none;
}

.bs-section--dark h2,
.bs-section--dark h3,
.bs-section--dark h4,
.bs-section--dark strong,
.bs-section--midnight h2,
.bs-section--midnight h3,
.bs-section--midnight h4,
.bs-section--midnight strong {
	color: #fff;
}

.bs-section--midnight .bs-section-head p {
	color: #a9c2cf;
}

.bs-section--midnight .bs-eyebrow {
	color: var(--bs-amber);
}

.bs-section--midnight .bs-card {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.14);
}

.bs-section--midnight .bs-card p {
	color: #a9c2cf;
}

.bs-section--midnight .bs-icon {
	background: rgba(255, 255, 255, 0.1);
	color: var(--bs-brand-100);
}

.bs-section--midnight .bs-check li::before {
	background-color: rgba(255, 255, 255, 0.12);
}

.bs-section--midnight .bs-stat strong {
	color: #fff;
}

/* ------------------------------------------------------------ light bands */

/*
 * The light bands are what give the page a rhythm. Each re-declares the neutral
 * tokens with light values, which is what lets every token-driven component —
 * cards, panels, rules, muted copy — invert without a light-specific rule of
 * its own. Only the components that hardcode white need the corrections below.
 */
.bs-section--cream,
.bs-section--paper,
.bs-section--paper-2 {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	--bs-ink: var(--bs-ink-on-light);
	--bs-body: var(--bs-body-on-light);
	--bs-muted: var(--bs-muted-on-light);
	--bs-line: var(--bs-line-on-light);
	--bs-line-soft: rgba(10, 6, 49, 0.07);
	--bs-seam: rgba(10, 6, 49, 0.1);
	--bs-surface: #ffffff;
	--bs-surface-2: #ffffff;
	--bs-on-dark: var(--bs-body-on-light);
	--bs-on-dark-soft: var(--bs-muted-on-light);

	color: var(--bs-body);
}

/* Soft light ground — the alternate band for human/editorial sections. */
.bs-section--cream {
	background: var(--bs-cream);
}

.bs-section--cream::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 38%),
		radial-gradient(760px 380px at 88% 4%, rgba(50, 48, 224, 0.07), transparent 62%),
		radial-gradient(620px 320px at 8% 100%, rgba(255, 112, 0, 0.05), transparent 65%);
}

/* Cool white ground — the card-heavy sections, where the cards need to float. */
.bs-section--paper {
	background: var(--bs-paper);
}

.bs-section--paper::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(244, 247, 251, 0), rgba(244, 247, 251, 0.74)),
		linear-gradient(rgba(10, 6, 49, 0.032) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10, 6, 49, 0.032) 1px, transparent 1px);
	background-repeat: no-repeat, repeat, repeat;
	background-size: auto, 62px 62px, 62px 62px;
	mask-image: radial-gradient(circle at 50% 24%, #000 4%, transparent 68%);
	-webkit-mask-image: radial-gradient(circle at 50% 24%, #000 4%, transparent 68%);
}

.bs-section--paper-2 {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0)),
		var(--bs-paper-2);
}

/* Headings and links, which hardcode white and a pale on-dark indigo. */
.bs-section--cream h1,
.bs-section--cream h2,
.bs-section--cream h3,
.bs-section--cream h4,
.bs-section--cream h5,
.bs-section--paper h1,
.bs-section--paper h2,
.bs-section--paper h3,
.bs-section--paper h4,
.bs-section--paper h5,
.bs-section--paper-2 h1,
.bs-section--paper-2 h2,
.bs-section--paper-2 h3,
.bs-section--paper-2 h4,
.bs-section--paper-2 h5 {
	color: var(--bs-ink-on-light);
}

.bs-section--cream a:not(.bs-btn),
.bs-section--paper a:not(.bs-btn),
.bs-section--paper-2 a:not(.bs-btn) {
	color: var(--bs-brand-500);
}

.bs-section--cream a:not(.bs-btn):hover,
.bs-section--paper a:not(.bs-btn):hover,
.bs-section--paper-2 a:not(.bs-btn):hover {
	color: var(--bs-orange-600);
}

/*
 * Cards on a light ground cannot use a translucent fill to separate themselves
 * from it, so they take a real shadow instead. The backdrop blur goes with it:
 * there is nothing behind them left to blur.
 */
.bs-section--cream .bs-card,
.bs-section--cream .bs-price,
.bs-section--cream .bs-quote-card,
.bs-section--cream .bs-faq details,
.bs-section--paper .bs-card,
.bs-section--paper .bs-price,
.bs-section--paper .bs-quote-card,
.bs-section--paper .bs-faq details,
.bs-section--paper-2 .bs-card,
.bs-section--paper-2 .bs-price,
.bs-section--paper-2 .bs-quote-card,
.bs-section--paper-2 .bs-faq details {
	backdrop-filter: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.94)),
		#fff;
	border-color: rgba(10, 6, 49, 0.1);
	box-shadow: var(--bs-shadow-premium);
}

.bs-section--cream .bs-card:hover,
.bs-section--paper .bs-card:hover,
.bs-section--paper-2 .bs-card:hover {
	background: #fff;
	border-color: rgba(50, 48, 224, 0.3);
	box-shadow: var(--bs-shadow-premium-hover);
}

.bs-section--cream .bs-card::after,
.bs-section--cream .bs-faq details::after,
.bs-section--paper .bs-card::after,
.bs-section--paper .bs-faq details::after,
.bs-section--paper-2 .bs-card::after,
.bs-section--paper-2 .bs-faq details::after {
	content: "";
	position: absolute;
	top: 0;
	left: 18px;
	right: 18px;
	height: 3px;
	border-radius: 0 0 999px 999px;
	background: linear-gradient(90deg, var(--bs-orange), var(--bs-sky), var(--bs-brand-300));
	opacity: 0.82;
}

.bs-section--cream .bs-faq details,
.bs-section--paper .bs-faq details,
.bs-section--paper-2 .bs-faq details {
	position: relative;
}

.bs-section--cream .bs-icon,
.bs-section--paper .bs-icon,
.bs-section--paper-2 .bs-icon {
	background:
		linear-gradient(150deg, rgba(50, 48, 224, 0.16), rgba(118, 202, 255, 0.08)),
		#fff;
	border-color: rgba(50, 48, 224, 0.2);
	color: var(--bs-brand-400);
	box-shadow: 0 8px 22px rgba(38, 33, 132, 0.12);
}

/* The ghost button is white on white here, so it becomes an indigo outline. */
.bs-section--cream .bs-btn--ghost,
.bs-section--paper .bs-btn--ghost,
.bs-section--paper-2 .bs-btn--ghost {
	background: #fff;
	border-color: rgba(50, 48, 224, 0.35);
	color: var(--bs-brand-400);
}

.bs-section--cream .bs-btn--ghost:hover,
.bs-section--paper .bs-btn--ghost:hover,
.bs-section--paper-2 .bs-btn--ghost:hover {
	background: var(--bs-brand-25);
	border-color: var(--bs-brand-400);
	color: var(--bs-brand-500);
}

/* Amber is an on-dark accent; on light it needs the orange it derives from. */
.bs-section--cream .bs-textlink,
.bs-section--cream .bs-price__amount--quote,
.bs-section--paper .bs-textlink,
.bs-section--paper .bs-price__amount--quote,
.bs-section--paper-2 .bs-textlink,
.bs-section--paper-2 .bs-price__amount--quote {
	color: var(--bs-orange-600);
}

/* The dotted step connector and the checklist ticks, both in white-alpha. */
.bs-section--cream .bs-step::after,
.bs-section--paper .bs-step::after,
.bs-section--paper-2 .bs-step::after {
	background-image: linear-gradient(90deg, rgba(10, 6, 49, 0.22) 0 6px, transparent 6px 12px);
}

.bs-section--cream .bs-check li::before,
.bs-section--paper .bs-check li::before,
.bs-section--paper-2 .bs-check li::before {
	background-color: rgba(50, 48, 224, 0.1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233230e0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/*
 * Everything else that hardcodes #fff for text on the dark ground. The quote
 * body is the one that matters most: it is the largest text in the band, and
 * white-on-light made it invisible.
 */
.bs-section--cream .bs-price__amount,
.bs-section--cream .bs-check__carry,
.bs-section--cream .bs-faq summary,
.bs-section--cream .bs-quote-card blockquote,
.bs-section--cream .bs-quote-card cite strong,
.bs-section--cream .bs-quote-card__who strong,
.bs-section--cream .bs-statband strong,
.bs-section--cream .bs-stat strong,
.bs-section--paper .bs-price__amount,
.bs-section--paper .bs-check__carry,
.bs-section--paper .bs-faq summary,
.bs-section--paper .bs-quote-card blockquote,
.bs-section--paper .bs-quote-card cite strong,
.bs-section--paper .bs-quote-card__who strong,
.bs-section--paper .bs-statband strong,
.bs-section--paper .bs-stat strong,
.bs-section--paper-2 .bs-price__amount,
.bs-section--paper-2 .bs-check__carry,
.bs-section--paper-2 .bs-faq summary,
.bs-section--paper-2 .bs-quote-card blockquote,
.bs-section--paper-2 .bs-quote-card cite strong,
.bs-section--paper-2 .bs-quote-card__who strong,
.bs-section--paper-2 .bs-statband strong,
.bs-section--paper-2 .bs-stat strong {
	color: var(--bs-ink-on-light);
}

.bs-section--cream .bs-price--featured,
.bs-section--paper .bs-price--featured,
.bs-section--paper-2 .bs-price--featured {
	background: #fff;
	border-color: var(--bs-brand-300);
	box-shadow: 0 0 0 3px rgba(50, 48, 224, 0.12), 0 24px 60px rgba(10, 6, 49, 0.12);
}

.bs-section--cream .bs-quote-card__mark,
.bs-section--paper .bs-quote-card__mark,
.bs-section--paper-2 .bs-quote-card__mark {
	color: rgba(10, 6, 49, 0.08);
}

.bs-section--cream .bs-quote-card:hover,
.bs-section--paper .bs-quote-card:hover,
.bs-section--paper-2 .bs-quote-card:hover {
	background: var(--bs-orange-tint);
	box-shadow: 0 0 0 1px rgba(255, 112, 0, 0.4), 0 18px 44px rgba(10, 6, 49, 0.12);
}

.bs-section--cream .bs-marquee__item,
.bs-section--paper .bs-marquee__item,
.bs-section--paper-2 .bs-marquee__item {
	background: #fff;
}

.bs-section--cream .bs-orbit__track,
.bs-section--paper .bs-orbit__track,
.bs-section--paper-2 .bs-orbit__track {
	border-color: rgba(10, 6, 49, 0.14);
}

.bs-section--cream .bs-orbit__icon,
.bs-section--paper .bs-orbit__icon,
.bs-section--paper-2 .bs-orbit__icon {
	background: #fff;
	box-shadow: 0 4px 16px rgba(10, 6, 49, 0.14);
}

.bs-section--cream code,
.bs-section--paper code,
.bs-section--paper-2 code {
	background: rgba(10, 6, 49, 0.06);
	color: var(--bs-brand-500);
}

/*
 * `.bs-cta` is a dark island: a deep indigo card that now sits on a light band.
 * It re-declares the dark token set so every token-driven component inside it
 * (the enquiry form included) stays correct, and the hardcoded-white rules the
 * light band corrected above are re-asserted back to white.
 */
.bs-section--cream .bs-cta,
.bs-section--paper .bs-cta,
.bs-section--paper-2 .bs-cta {
	--bs-ink: #f4f3fc;
	--bs-body: #d3d0ea;
	--bs-muted: #a29ecb;
	--bs-line: rgba(255, 255, 255, 0.12);
	--bs-line-soft: rgba(255, 255, 255, 0.07);
	--bs-surface: rgba(255, 255, 255, 0.045);
	--bs-surface-2: rgba(255, 255, 255, 0.075);
	--bs-on-dark: #d3d0ea;
	--bs-on-dark-soft: #a29ecb;

	color: var(--bs-on-dark);
	box-shadow: 0 30px 70px rgba(10, 6, 49, 0.22);
}

.bs-section--cream .bs-cta h1,
.bs-section--cream .bs-cta h2,
.bs-section--cream .bs-cta h3,
.bs-section--cream .bs-cta h4,
.bs-section--paper .bs-cta h1,
.bs-section--paper .bs-cta h2,
.bs-section--paper .bs-cta h3,
.bs-section--paper .bs-cta h4,
.bs-section--paper-2 .bs-cta h1,
.bs-section--paper-2 .bs-cta h2,
.bs-section--paper-2 .bs-cta h3,
.bs-section--paper-2 .bs-cta h4 {
	color: #fff;
}

.bs-section--cream .bs-cta a:not(.bs-btn),
.bs-section--paper .bs-cta a:not(.bs-btn),
.bs-section--paper-2 .bs-cta a:not(.bs-btn) {
	color: #a5a3f7;
}

.bs-section--cream .bs-cta .bs-check li::before,
.bs-section--paper .bs-cta .bs-check li::before,
.bs-section--paper-2 .bs-cta .bs-check li::before {
	background-color: rgba(255, 255, 255, 0.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffab57' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.bs-section--cream .bs-cta .bs-eyebrow,
.bs-section--paper .bs-cta .bs-eyebrow,
.bs-section--paper-2 .bs-cta .bs-eyebrow {
	color: var(--bs-amber);
}

/*
 * Shared inner-page components on light bands. The homepage already corrected
 * its own cards; these keep directories, archives, sidebars and long-form pages
 * in the same refreshed system.
 */
.bs-section--cream .bs-dir__label,
.bs-section--paper .bs-dir__label,
.bs-section--paper-2 .bs-dir__label {
	color: var(--bs-muted-on-light);
}

.bs-section--cream .bs-dir__list button,
.bs-section--cream .bs-dir__checks label,
.bs-section--paper .bs-dir__list button,
.bs-section--paper .bs-dir__checks label,
.bs-section--paper-2 .bs-dir__list button,
.bs-section--paper-2 .bs-dir__checks label {
	color: var(--bs-body-on-light);
}

.bs-section--cream .bs-dir__list button span,
.bs-section--paper .bs-dir__list button span,
.bs-section--paper-2 .bs-dir__list button span {
	color: var(--bs-muted-on-light);
}

.bs-section--cream .bs-dir__list button:hover,
.bs-section--cream .bs-dir__checks label:hover,
.bs-section--paper .bs-dir__list button:hover,
.bs-section--paper .bs-dir__checks label:hover,
.bs-section--paper-2 .bs-dir__list button:hover,
.bs-section--paper-2 .bs-dir__checks label:hover {
	background: rgba(50, 48, 224, 0.08);
	color: var(--bs-brand-500);
}

.bs-section--cream .bs-dir__list button[aria-pressed="true"],
.bs-section--paper .bs-dir__list button[aria-pressed="true"],
.bs-section--paper-2 .bs-dir__list button[aria-pressed="true"] {
	color: #fff;
}

.bs-section--cream .bs-caps__item,
.bs-section--paper .bs-caps__item,
.bs-section--paper-2 .bs-caps__item {
	background: #fff;
	color: var(--bs-body-on-light);
	box-shadow: 0 1px 2px rgba(10, 6, 49, 0.04);
}

.bs-section--cream .bs-dir__blurb,
.bs-section--paper .bs-dir__blurb,
.bs-section--paper-2 .bs-dir__blurb {
	color: var(--bs-muted-on-light);
}

.bs-section--cream .bs-int-card,
.bs-section--cream .bs-postcard,
.bs-section--cream .bs-aside,
.bs-section--cream .bs-notice,
.bs-section--paper .bs-int-card,
.bs-section--paper .bs-postcard,
.bs-section--paper .bs-aside,
.bs-section--paper .bs-notice,
.bs-section--paper-2 .bs-int-card,
.bs-section--paper-2 .bs-postcard,
.bs-section--paper-2 .bs-aside,
.bs-section--paper-2 .bs-notice {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96)),
		#fff;
	border-color: rgba(10, 6, 49, 0.1);
	backdrop-filter: none;
	overflow: hidden;
	box-shadow: var(--bs-shadow-premium);
}

.bs-section--cream .bs-int-card:hover,
.bs-section--cream .bs-postcard:hover,
.bs-section--paper .bs-int-card:hover,
.bs-section--paper .bs-postcard:hover,
.bs-section--paper-2 .bs-int-card:hover,
.bs-section--paper-2 .bs-postcard:hover {
	background: #fff;
	border-color: rgba(255, 112, 0, 0.42);
	box-shadow: var(--bs-shadow-premium-hover);
}

.bs-section--cream .bs-int-card h3,
.bs-section--cream .bs-postcard__body h3,
.bs-section--cream .bs-aside h3,
.bs-section--paper .bs-int-card h3,
.bs-section--paper .bs-postcard__body h3,
.bs-section--paper .bs-aside h3,
.bs-section--paper-2 .bs-int-card h3,
.bs-section--paper-2 .bs-postcard__body h3,
.bs-section--paper-2 .bs-aside h3 {
	color: var(--bs-ink-on-light);
}

.bs-section--cream .bs-postcard__body h3 a:hover,
.bs-section--paper .bs-postcard__body h3 a:hover,
.bs-section--paper-2 .bs-postcard__body h3 a:hover {
	color: var(--bs-orange-600);
}

.bs-section--cream .bs-int-card p,
.bs-section--cream .bs-postcard__body p,
.bs-section--cream .bs-postcard__meta,
.bs-section--paper .bs-int-card p,
.bs-section--paper .bs-postcard__body p,
.bs-section--paper .bs-postcard__meta,
.bs-section--paper-2 .bs-int-card p,
.bs-section--paper-2 .bs-postcard__body p,
.bs-section--paper-2 .bs-postcard__meta {
	color: var(--bs-muted-on-light);
}

.bs-section--cream .bs-postcard__meta > span:first-child,
.bs-section--paper .bs-postcard__meta > span:first-child,
.bs-section--paper-2 .bs-postcard__meta > span:first-child {
	color: var(--bs-orange-600);
}

.bs-section--cream .bs-postcard__meta > * + *::before,
.bs-section--paper .bs-postcard__meta > * + *::before,
.bs-section--paper-2 .bs-postcard__meta > * + *::before {
	background: rgba(10, 6, 49, 0.25);
}

.bs-section--cream .bs-aside dd,
.bs-section--paper .bs-aside dd,
.bs-section--paper-2 .bs-aside dd {
	color: var(--bs-ink-on-light);
}

.bs-section--cream .bs-badge,
.bs-section--paper .bs-badge,
.bs-section--paper-2 .bs-badge {
	background: rgba(50, 48, 224, 0.1);
	border-color: rgba(50, 48, 224, 0.22);
	color: var(--bs-brand-500);
}

.bs-section--cream .bs-badge--accent,
.bs-section--paper .bs-badge--accent,
.bs-section--paper-2 .bs-badge--accent {
	background: rgba(255, 112, 0, 0.12);
	border-color: rgba(255, 112, 0, 0.28);
	color: var(--bs-orange-600);
}

.bs-section--cream .bs-prose th,
.bs-section--paper .bs-prose th,
.bs-section--paper-2 .bs-prose th {
	background: rgba(10, 6, 49, 0.06);
	color: var(--bs-ink-on-light);
}

.bs-section--cream .bs-prose blockquote,
.bs-section--paper .bs-prose blockquote,
.bs-section--paper-2 .bs-prose blockquote {
	color: var(--bs-ink-on-light);
}

.bs-section-head {
	max-width: 720px;
	margin: 0 auto clamp(2rem, 1rem + 2vw, 3rem);
	text-align: center;
}

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

.bs-section-head p {
	font-size: 1.075rem;
	color: var(--bs-muted);
	margin-bottom: 0;
}

.bs-section--dark .bs-section-head p {
	color: #a9c2cf;
}

/* Eyebrow with a short leading rule — a genre convention that gives each
   section head a bit of engineering-drawing precision. */
.bs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--bs-font-body);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bs-brand-400);
	margin-bottom: 0.9rem;
}

.bs-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--bs-orange);
	flex-shrink: 0;
}

.bs-section-head:not(.bs-section-head--left) .bs-eyebrow::after {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--bs-orange);
	flex-shrink: 0;
}

.bs-section--dark .bs-eyebrow,
.bs-hero .bs-eyebrow {
	color: var(--bs-amber);
}

.bs-grid {
	display: grid;
	gap: 24px;
}

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

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

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

/* ------------------------------------------------------------ buttons */

.bs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--bs-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--bs-radius);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	text-decoration: none;
}

.bs-btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.bs-btn--primary {
	background: var(--bs-brand-400);
	border-color: var(--bs-brand-400);
	color: #fff;
	box-shadow: 0 4px 16px rgba(50, 48, 224, 0.26);
}

.bs-btn--primary:hover {
	background: var(--bs-brand-500);
	border-color: var(--bs-brand-500);
	color: #fff;
}

/* The primary conversion colour stays Besecure orange, so the site's main
   action matches the product people log into. */
.bs-btn--accent {
	background: var(--bs-orange);
	border-color: var(--bs-orange);
	color: #fff;
	box-shadow: 0 6px 20px rgba(255, 112, 0, 0.34);
}

.bs-btn--accent:hover {
	background: var(--bs-orange-600);
	border-color: var(--bs-orange-600);
	color: #fff;
}

.bs-btn--ghost {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.bs-btn--ghost:hover {
	border-color: rgba(255, 255, 255, 0.34);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.bs-btn--ondark {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

.bs-btn--ondark:hover {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.bs-btn--lg {
	padding: 1.05rem 1.9rem;
	font-size: 1rem;
}

/* On a narrow screen a long label like "Register your organisation" plus 1.9rem
   of side padding is wider than the viewport, so ease the padding and let the
   button wrap rather than push the page sideways. */
@media (max-width: 460px) {
	.bs-btn {
		max-width: 100%;
	}

	.bs-btn--lg {
		padding: 1rem 1.25rem;
		text-align: center;
	}
}

.bs-btn--block {
	width: 100%;
}

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

.bs-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	color: var(--bs-amber);
}

.bs-textlink::after {
	content: "→";
	transition: transform 0.15s ease;
}

.bs-textlink:hover {
	text-decoration: none;
}

.bs-textlink:hover::after {
	transform: translateX(3px);
}

/* ---------------------------------------------------------- notices */

/*
 * Placeholder banner. Deliberately loud: the build spec requires unconfirmed
 * copy, pricing and compliance claims to be unmistakable rather than subtle,
 * so nothing ships to production by accident.
 */
.bs-placeholder {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	background: repeating-linear-gradient(135deg, #fff9e8, #fff9e8 12px, #fff4d6 12px, #fff4d6 24px);
	border: 1px dashed #d8a800;
	border-radius: var(--bs-radius);
	padding: 0.9rem 1.1rem;
	margin: 0 0 1.5rem;
	color: #6b4e00;
	font-size: 0.9rem;
	line-height: 1.5;
}

.bs-placeholder strong {
	color: #4d3800;
}

.bs-placeholder p {
	margin: 0;
}

.bs-placeholder--band {
	max-width: var(--bs-wrap);
	margin: 1.25rem auto;
}

/* Neutral, visitor-facing notice — used where a section is genuinely pending
   and we say so plainly, rather than showing build scaffolding. */
.bs-notice {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.bs-notice h2 {
	margin-top: 0;
	font-size: 1.35rem;
}

.bs-notice p {
	color: var(--bs-body);
}

.bs-todo {
	display: inline-block;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.78rem;
	font-weight: 600;
	background: #fff4d6;
	border: 1px dashed #d8a800;
	color: #6b4e00;
	padding: 0.1rem 0.45rem;
	border-radius: 5px;
	white-space: nowrap;
}

/* ------------------------------------------------------------- header */

/*
 * Dark header throughout. It merges into the hero on the homepage and stays
 * consistent everywhere else, which is the genre convention — and it lets the
 * reversed Besecure wordmark carry the brand at full contrast.
 */
.bs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 6, 49, 0.92);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/*
 * Signed-in admins get WordPress's admin bar, which is fixed over the top of the
 * viewport — so a sticky header pinned to `top: 0` slides underneath it and the
 * wordmark is clipped. Offset by the bar's height, which core changes at 782px.
 * At 600px and below the bar stops being fixed and scrolls away, so the offset
 * has to be removed again or the header floats with a gap above it.
 */
body.admin-bar .bs-header {
	top: 32px;
}

body.admin-bar .bs-aside {
	top: 132px;
}

/* Anchor offset lives on the scrolling box, so it has to be set on `html`. */
html:has(body.admin-bar) {
	scroll-padding-top: 128px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .bs-header {
		top: 46px;
	}

	html:has(body.admin-bar) {
		scroll-padding-top: 142px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .bs-header {
		top: 0;
	}

	html:has(body.admin-bar) {
		scroll-padding-top: 96px;
	}
}

.bs-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 76px;
}

.bs-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.bs-logo img {
	display: block;
	height: 32px;
	width: auto;
}

.bs-logo:hover {
	text-decoration: none;
}

.bs-nav {
	margin-left: auto;
}

.bs-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.bs-nav a {
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: var(--bs-radius-sm);
	font-size: 0.94rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
}

.bs-nav a:hover {
	background: rgba(255, 255, 255, 0.09);
	color: #fff;
	text-decoration: none;
}

.bs-nav .current-menu-item > a,
.bs-nav .current-menu-parent > a,
.bs-nav .current-menu-ancestor > a {
	color: #fff;
	background: rgba(255, 255, 255, 0.11);
}

/* Dropdowns drop back to a light panel — long link lists read better on it. */
.bs-nav .sub-menu a {
	color: rgba(255, 255, 255, 0.8);
}

.bs-nav .sub-menu a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/*
 * A caret on anything with a dropdown. Without it the only way to discover a
 * submenu is to hover and find out, which keyboard and touch users never do.
 * Drawn as a border triangle so it needs no icon and inherits the link colour.
 */
.bs-nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.bs-nav .menu-item-has-children > a::after {
	content: "";
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-top-color: currentColor;
	border-bottom: 0;
	opacity: 0.65;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.bs-nav .menu-item-has-children:hover > a::after,
.bs-nav .menu-item-has-children:focus-within > a::after {
	opacity: 1;
	transform: rotate(180deg);
}

/*
 * The gap between a parent and its panel would otherwise drop the hover as the
 * pointer crosses it, closing the menu on the way down. This bridges it.
 */
.bs-nav .menu-item-has-children {
	position: relative;
}

.bs-nav .menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 10px;
}

/* Dropdowns */
.bs-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 240px;
	display: block;
	flex-direction: column;
	gap: 2px;
	background: #150f42;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--bs-radius);
	box-shadow: 0 24px 60px rgba(3, 2, 16, 0.7);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.bs-nav li:hover > .sub-menu,
.bs-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bs-nav .sub-menu a {
	padding: 0.55rem 0.75rem;
	font-size: 0.9rem;
}

.bs-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.bs-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-left: auto;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--bs-radius-sm);
	cursor: pointer;
	color: #fff;
}

@media (max-width: 1024px) {
	.bs-burger {
		display: inline-flex;
	}

	.bs-nav,
	.bs-header__actions {
		display: none;
	}

	.bs-header.is-open .bs-nav,
	.bs-header.is-open .bs-header__actions {
		display: block;
		width: 100%;
		margin: 0;
		padding-bottom: 16px;
	}

	.bs-header.is-open .bs-header__inner {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.bs-header.is-open .bs-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	/*
	 * No hover bridge below this width — submenus are inline here, so that
	 * invisible strip would sit over the first item and swallow taps.
	 */
	.bs-nav .menu-item-has-children::after {
		content: none;
	}

	.bs-header.is-open .bs-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: none;
		border: 0;
		border-left: 2px solid rgba(255, 255, 255, 0.16);
		border-radius: 0;
		margin: 2px 0 6px 12px;
		padding: 0 0 0 8px;
	}

	.bs-header.is-open .bs-nav .sub-menu a {
		color: rgba(255, 255, 255, 0.82);
	}

	.bs-header.is-open .bs-nav .sub-menu a:hover {
		background: rgba(255, 255, 255, 0.09);
		color: #fff;
	}

	.bs-header.is-open .bs-header__actions {
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		padding-top: 16px;
	}
}

/* --------------------------------------------------------------- hero */

/*
 * Dark hero. Deep indigo ground, an indigo glow behind the headline and a warm
 * Besecure-orange glow under the product panel, over a faint technical grid.
 * It carries the security-vendor weight the brief asked for while the body of
 * the site stays light and readable.
 */
.bs-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--bs-dark);
	color: var(--bs-on-dark);
	padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 clamp(3.5rem, 2rem + 5vw, 6rem);
}

.bs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(1000px 520px at 10% -5%, rgba(50, 48, 224, 0.5), transparent 62%),
		radial-gradient(780px 460px at 88% 55%, rgba(255, 112, 0, 0.2), transparent 62%),
		radial-gradient(620px 400px at 70% 110%, rgba(118, 202, 255, 0.12), transparent 60%);
}

.bs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 58px 58px;
	mask-image: radial-gradient(circle at 45% 35%, #000 15%, transparent 75%);
	-webkit-mask-image: radial-gradient(circle at 45% 35%, #000 15%, transparent 75%);
	pointer-events: none;
}

.bs-hero h1 {
	color: #fff;
}

.bs-hero h1 em {
	font-style: normal;
	color: var(--bs-amber);
}

.bs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	align-items: center;
}

@media (max-width: 900px) {
	.bs-hero__grid {
		grid-template-columns: 1fr;
	}
}

.bs-hero h1 {
	margin-bottom: 1rem;
}

.bs-hero__lede {
	font-size: clamp(1.05rem, 1rem + 0.45vw, 1.25rem);
	color: var(--bs-on-dark);
	max-width: 34em;
}

.bs-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	margin-top: 1.75rem;
	font-size: 0.875rem;
	color: var(--bs-on-dark-soft);
}

.bs-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.bs-hero__meta svg {
	color: var(--bs-amber) !important;
}

.bs-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	padding: 0.35rem 0.95rem 0.35rem 0.4rem;
	font-size: 0.8rem;
	font-weight: 500;
	margin-bottom: 1.4rem;
	backdrop-filter: blur(6px);
}

.bs-pill em {
	background: var(--bs-orange);
	color: #fff;
	font-style: normal;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Hero visual: an abstract app-launcher panel, drawn in CSS so it costs no
   image weight and stays crisp on every display. */
/* Glass panel so the app sits *in* the dark hero rather than on top of it. */
.bs-launcher {
	position: relative;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--bs-radius-xl);
	box-shadow: 0 30px 70px rgba(5, 3, 24, 0.55);
	backdrop-filter: blur(14px);
	padding: 22px;
}

.bs-launcher::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(150deg, rgba(255, 171, 87, 0.55), rgba(255, 255, 255, 0) 42%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.bs-launcher__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.bs-launcher__bar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
}

.bs-launcher__bar i:first-child {
	background: var(--bs-orange);
}

.bs-launcher__bar span {
	margin-left: auto;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.bs-launcher__apps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.bs-launcher__app {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--bs-radius);
	padding: 12px;
}

.bs-launcher__app img {
	max-height: 30px;
	width: auto;
}

.bs-launcher__app--ghost {
	background: rgba(255, 255, 255, 0.05);
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.18);
}

.bs-launcher__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
}

.bs-launcher__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(18, 183, 106, 0.18);
	border: 1px solid rgba(18, 183, 106, 0.4);
	color: #6ee7b0;
	border-radius: 999px;
	padding: 0.25rem 0.65rem;
	font-weight: 600;
	font-size: 0.75rem;
}

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

.bs-card {
	position: relative;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	padding: 28px;
	backdrop-filter: blur(10px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.bs-card:hover {
	background: var(--bs-surface-2);
	border-color: rgba(255, 255, 255, 0.2);
}

.bs-card > :last-child {
	margin-bottom: 0;
}

.bs-card--link:hover {
	border-color: var(--bs-brand-200);
	box-shadow: var(--bs-shadow);
	transform: translateY(-2px);
	text-decoration: none;
}

.bs-card h3 {
	margin-bottom: 0.4rem;
}

.bs-card p {
	color: var(--bs-muted);
	font-size: 0.95rem;
}

.bs-section--dark .bs-card {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.14);
}

.bs-section--dark .bs-card p {
	color: #a9c2cf;
}

.bs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--bs-radius);
	background: linear-gradient(150deg, rgba(50, 48, 224, 0.45), rgba(50, 48, 224, 0.12));
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #b9b6f5;
	margin-bottom: 1.1rem;
}

.bs-icon svg {
	width: 22px;
	height: 22px;
}

.bs-icon--accent {
	background: var(--bs-orange-tint);
	color: var(--bs-orange);
}

.bs-section--dark .bs-icon {
	background: rgba(255, 255, 255, 0.1);
	color: var(--bs-brand-100);
}

/* Numbered "how it works" steps, with a connecting rule between them. */
.bs-steps {
	counter-reset: bs-step;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.bs-step {
	position: relative;
	padding-top: 8px;
}

.bs-step::before {
	counter-increment: bs-step;
	content: counter(bs-step, decimal-leading-zero);
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: linear-gradient(140deg, var(--bs-brand-400), var(--bs-brand-600));
	color: #fff;
	font-family: var(--bs-font-display);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: -0.02em;
	margin-bottom: 1.1rem;
	box-shadow: 0 8px 20px rgba(38, 33, 132, 0.28);
}

/* The rule runs from each step's badge to the next one. Hidden on the last
   item and whenever the grid has wrapped to a single column. */
.bs-step::after {
	content: "";
	position: absolute;
	top: 31px;
	left: 58px;
	right: -24px;
	height: 2px;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 6px, transparent 6px 12px);
	background-size: 12px 2px;
}

.bs-step:last-child::after {
	display: none;
}

@media (max-width: 780px) {
	.bs-step::after {
		display: none;
	}
}

.bs-section--dark .bs-step::before {
	background: linear-gradient(140deg, var(--bs-orange), #ff9d45);
	box-shadow: 0 8px 22px rgba(255, 112, 0, 0.3);
}

.bs-section--dark .bs-step::after {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 6px, transparent 6px 12px);
}

.bs-step h3 {
	font-size: 1.1rem;
}

.bs-step p {
	color: var(--bs-muted);
	font-size: 0.95rem;
	margin-bottom: 0;
}

/* Checklist. */
.bs-check {
	list-style: none;
	padding: 0;
	margin: 0;
}

.bs-check li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
}

.bs-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 171, 87, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffab57' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.bs-section--dark .bs-check li::before {
	background-color: rgba(255, 255, 255, 0.12);
}

/* -------------------------------------------------- service cards (genre) */

/*
 * The security-vendor "services" card: a big ghosted number, an icon, and an
 * accent bar that fills across on hover.
 */
.bs-service {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--bs-surface);
	backdrop-filter: blur(10px);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	padding: 32px 28px 28px;
	/* The card is an <a>; without this every child inherits the link colour. */
	color: var(--bs-body);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.bs-service::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--bs-orange), var(--bs-amber));
	transition: width 0.28s ease;
}

.bs-service:hover {
	background: var(--bs-surface-2);
	border-color: rgba(255, 255, 255, 0.24);
	box-shadow: 0 22px 50px rgba(3, 2, 16, 0.55);
	transform: translateY(-3px);
	text-decoration: none;
}

.bs-service:hover::before {
	width: 100%;
}

.bs-service__num {
	position: absolute;
	top: 14px;
	right: 20px;
	font-family: var(--bs-font-display);
	font-size: 3.4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	color: rgba(255, 255, 255, 0.07);
	pointer-events: none;
}

.bs-service h3 {
	position: relative;
	margin-bottom: 0.5rem;
}

.bs-service p {
	position: relative;
	color: var(--bs-muted);
	font-size: 0.95rem;
	margin-bottom: 1.1rem;
}

.bs-service .bs-check {
	position: relative;
	font-size: 0.9rem;
	margin-bottom: 1.25rem;
}

.bs-service .bs-textlink {
	margin-top: auto;
	font-size: 0.9rem;
}

/* --------------------------------------------------------- stat band */

/* Dark strip of headline numbers — the genre's standard credibility band. */
.bs-statband {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--bs-radius-lg);
	overflow: hidden;
}

.bs-statband > div {
	background: rgba(255, 255, 255, 0.03);
	padding: 30px 26px;
}

.bs-statband strong {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var(--bs-font-display);
	font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: #fff;
	margin-bottom: 0.55rem;
}

/* The unit sits beside the figure at text size, so "4 protocols" reads as one
   phrase instead of stacking into two display-sized lines. */
.bs-statband strong span {
	font-family: var(--bs-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bs-amber);
	white-space: nowrap;
}

.bs-statband p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--bs-on-dark-soft);
}

/* Stat row. */
.bs-stats {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.bs-stat {
	text-align: center;
}

.bs-stat strong {
	display: block;
	font-family: var(--bs-font-display);
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
}

.bs-section--dark .bs-stat strong {
	color: #fff;
}

.bs-stat span {
	font-size: 0.9rem;
	color: var(--bs-muted);
}

.bs-section--dark .bs-stat span {
	color: #a9c2cf;
}

/* Logo strip / social proof. */
/*
 * Customer logo strip. Scrolls right to left on the same track the application
 * strip uses, so the theme has one scroller rather than two that can drift out
 * of step. Hovering pauses it — inherited from `.bs-marquee` — which matters
 * here, because a moving logo you cannot stop to read is just noise.
 *
 * A scroller also removes the orphan problem a wrapping row has: however many
 * logos marketing supplies, the strip stays a single continuous line.
 *
 * The marks are held back — desaturated and dimmed — and come forward on hover.
 * Customer logos are evidence, not decoration, and six competing brand palettes
 * shouting over the section heading is how this band usually goes wrong.
 */
.bs-marquee--logos .bs-marquee__track {
	gap: 0;
	animation-duration: 50s;
}

.bs-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 clamp(26px, 3vw, 48px);
}

/*
 * The marks are drawn 40px tall on a canvas trimmed to their own width, so this
 * ceiling lets them sit at their intended size rather than being scaled down by
 * a max-width that was really only there to stop overflow.
 */
.bs-logos__item img {
	width: auto;
	max-width: 100%;
	max-height: 40px;
	opacity: 0.55;
	filter: grayscale(1);
	transition: opacity 0.22s ease, filter 0.22s ease;
}

.bs-logos__item:hover img {
	opacity: 1;
	filter: grayscale(0);
}

.bs-kicker {
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}

/* Trust band shown in place of the logo strip until real customer logos are
   approved — statements that are true today rather than empty grey boxes. */
.bs-proofbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-proofbar li {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	padding: 0.6rem 1.1rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--bs-body);
}

/* ------------------------------------------------- integrations grid */

.bs-int-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 2rem;
}

.bs-int-filter button {
	font-family: var(--bs-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--bs-line);
	background: var(--bs-surface);
	color: var(--bs-body);
	cursor: pointer;
	transition: all 0.15s ease;
}

.bs-int-filter button:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: var(--bs-surface-2);
	color: #fff;
}

.bs-int-filter button[aria-pressed="true"] {
	background: var(--bs-brand-400);
	border-color: var(--bs-brand-400);
	color: #fff;
}

.bs-int-search {
	max-width: 420px;
	margin: 0 auto 1.5rem;
}

/*
 * Directory header: title and intro on the left, search on the right. It is
 * the first thing someone arriving at a directory reaches for, and putting it
 * here keeps it fixed while the results beneath it change — rather than having
 * it sit on top of the grid and move as sections collapse.
 */
.bs-pagehead--search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: end;
}

@media (max-width: 860px) {
	.bs-pagehead--search {
		grid-template-columns: 1fr;
		align-items: stretch;
	}
}

.bs-pagehead__search {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 0.35rem;
}

.bs-pagehead__search svg {
	position: absolute;
	left: 16px;
	color: var(--bs-on-dark-soft);
	pointer-events: none;
}

/* The icon sits inside the field, so the text starts clear of it. */
.bs-pagehead__search input[type="search"] {
	padding-left: 44px;
	height: 52px;
	font-size: 0.98rem;
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.16);
}

.bs-pagehead__search input[type="search"]::placeholder {
	color: var(--bs-on-dark-soft);
}

/*
 * Feature capability grid. A fixed two columns rather than the shared
 * `.bs-grid--2`, whose auto-fit `minmax(300px, 1fr)` fits three tracks at this
 * width — which left the fourth of four cards alone on its own row with two
 * empty slots beside it.
 *
 * Two columns divides four evenly, and reads better anyway: these cards carry
 * a paragraph each, and a third column squeezes them into narrow towers.
 */
.bs-points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	/* Cards stretch to match the tallest in their row. Left to size themselves,
	   a two-line card next to a four-line one leaves a ragged step between
	   them, and the pair stops reading as one object. */
	align-items: stretch;
}

@media (max-width: 760px) {
	.bs-points {
		grid-template-columns: 1fr;
	}
}

/*
 * The at-a-glance facts as a full-width strip, used on pages with no prose for
 * them to sit beside. Four across on desktop, two on tablet, one on a phone —
 * the fact count is fixed at four, so every breakpoint divides evenly and no
 * item is ever stranded alone on a row.
 */
.bs-glance {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 900px) {
	.bs-glance {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.bs-glance {
		grid-template-columns: 1fr;
	}
}

.bs-glance li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 18px 20px;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	font-size: 0.94rem;
	line-height: 1.45;
	color: var(--bs-on-dark);
}

.bs-glance svg {
	margin-top: 2px;
}

/* ------------------------------------------------- integrations directory */

/*
 * Filters in a sticky rail beside the results rather than a row of pills above
 * them. Once a directory carries more than a handful of apps the pills wrap to
 * two or three lines and push the results below the fold; a rail holds any
 * number of categories without moving the grid.
 */
.bs-dir {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: start;
}

@media (max-width: 900px) {
	.bs-dir {
		grid-template-columns: 1fr;
	}
}

.bs-dir__side {
	position: sticky;
	top: 108px;
}

@media (max-width: 900px) {
	.bs-dir__side {
		position: static;
	}
}

.bs-dir__group + .bs-dir__group {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bs-line);
}

.bs-dir__label {
	font-family: var(--bs-font-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bs-on-dark-soft);
	margin: 0 0 0.85rem;
}

.bs-dir__list,
.bs-dir__checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bs-dir__list button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 0.5rem 0.7rem;
	border: 0;
	border-radius: var(--bs-radius-sm);
	background: none;
	color: var(--bs-on-dark);
	font-family: var(--bs-font-body);
	font-size: 0.9rem;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bs-dir__list button span {
	font-size: 0.78rem;
	color: var(--bs-on-dark-soft);
	font-variant-numeric: tabular-nums;
}

.bs-dir__list button:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

/* The active filter is the one thing on this rail that should carry the accent. */
.bs-dir__list button[aria-pressed="true"] {
	background: var(--bs-orange);
	color: #fff;
	font-weight: 600;
}

.bs-dir__list button[aria-pressed="true"] span {
	color: rgba(255, 255, 255, 0.82);
}

.bs-dir__checks label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0.32rem 0.7rem;
	border-radius: var(--bs-radius-sm);
	font-size: 0.9rem;
	color: var(--bs-on-dark);
	cursor: pointer;
}

.bs-dir__checks label:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.bs-dir__checks input {
	accent-color: var(--bs-orange);
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* Group header on the features hub: icon beside the heading and its blurb. */
.bs-dir__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 1.25rem;
}

.bs-dir__head .bs-dir__blurb {
	margin: 0.2rem 0 0;
}

/*
 * Capability list. Two columns of short lines rather than one long column —
 * these are five-word statements, and a single column of them wastes most of
 * the width and makes a group look longer than it is.
 */
.bs-caps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 720px) {
	.bs-caps {
		grid-template-columns: 1fr;
	}
}

.bs-caps__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 14px;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-sm);
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--bs-on-dark);
}

.bs-caps__item svg {
	margin-top: 2px;
}

.bs-caps__more {
	margin: 1.1rem 0 0;
}

.bs-dir__section + .bs-dir__section {
	margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.bs-dir__heading {
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	margin: 0 0 0.35rem;
}

.bs-dir__blurb {
	margin: 0 0 1.1rem;
	font-size: 0.92rem;
	color: var(--bs-on-dark-soft);
	max-width: 62ch;
}

.bs-dir__heading + .bs-int-grid {
	margin-top: 1.1rem;
}

.bs-int-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.bs-int-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--bs-surface);
	backdrop-filter: blur(10px);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	padding: 22px;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bs-int-card:hover {
	background: var(--bs-surface-2);
	border-color: rgba(255, 255, 255, 0.24);
	box-shadow: 0 20px 46px rgba(3, 2, 16, 0.5);
	transform: translateY(-2px);
	text-decoration: none;
}

.bs-int-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--bs-radius);
	background: rgba(255, 255, 255, 0.93);
	border: 1px solid rgba(255, 255, 255, 0.2);
	overflow: hidden;
}

.bs-int-card__logo img {
	max-width: 28px;
	max-height: 28px;
	width: auto;
}

.bs-int-card__logo span {
	font-family: var(--bs-font-display);
	font-weight: 700;
	color: var(--bs-brand-500);
}

.bs-int-card h3 {
	font-size: 1.02rem;
	margin: 0;
}

.bs-int-card p {
	font-size: 0.875rem;
	color: var(--bs-muted);
	margin: 0;
}

.bs-int-empty {
	text-align: center;
	color: var(--bs-muted);
	padding: 3rem 0;
}

/* Protocol / meta badges. */
.bs-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-badges li {
	margin: 0;
}

.bs-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.22rem 0.55rem;
	border-radius: 6px;
	background: rgba(50, 48, 224, 0.22);
	border: 1px solid rgba(124, 122, 240, 0.42);
	color: #b9b6f5;
}

.bs-badge--accent {
	background: rgba(255, 112, 0, 0.18);
	border-color: rgba(255, 171, 87, 0.45);
	color: var(--bs-amber);
}

/* ------------------------------------------------------------ pricing */

.bs-price-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items: start;
}

.bs-price {
	display: flex;
	flex-direction: column;
	background: var(--bs-surface);
	backdrop-filter: blur(10px);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	padding: 28px;
	height: 100%;
}

.bs-price--featured {
	background: var(--bs-surface-2);
	border-color: rgba(124, 122, 240, 0.6);
	box-shadow: 0 0 0 3px rgba(50, 48, 224, 0.22), 0 24px 60px rgba(3, 2, 16, 0.5);
	position: relative;
}

.bs-price--featured::after {
	content: "Most popular";
	position: absolute;
	top: -11px;
	left: 28px;
	background: var(--bs-orange);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
}

.bs-price h3 {
	margin-bottom: 0.25rem;
}

.bs-price__blurb {
	font-size: 0.9rem;
	color: var(--bs-muted);
	min-height: 3em;
}

/*
 * Quote line, in place of a figure. Deliberately plain: this sits where the
 * eye expects a number, and dressing it up only draws attention to the absence.
 */
.bs-price__quote {
	font-size: 0.92rem;
	color: var(--bs-on-dark-soft);
	margin: 0.75rem 0 1.25rem;
	min-height: 2.6em;
}

/* Separates the action from the inclusions beneath it. */
.bs-price__rule {
	border: 0;
	border-top: 1px solid var(--bs-line);
	margin: 1.5rem 0 1.25rem;
}

/* "Everything in Essentials" heads the list rather than belonging to it. */
.bs-check__carry {
	font-weight: 600;
	color: #fff;
}

.bs-price__amount {
	font-family: var(--bs-font-display);
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	margin: 0.5rem 0 0.25rem;
	line-height: 1.1;
}

.bs-price__unit {
	font-size: 0.85rem;
	color: var(--bs-muted);
	margin-bottom: 1.25rem;
}

/* Quote-based pricing: the word carries less visual weight than a figure would,
   so it reads as a considered position rather than a missing number. */
.bs-price__amount--quote {
	font-size: 1.6rem;
	color: var(--bs-amber);
}

.bs-price .bs-check {
	margin-bottom: 1.5rem;
	font-size: 0.92rem;
}

.bs-price .bs-btn {
	margin-top: auto;
}

/*
 * Pricing cards on a light band are dark islands, the same trick `.bs-cta`
 * uses: three deep-indigo cards sitting on white. On a white ground a pale
 * outlined card gives the tiers nothing to stand on — going dark makes the set
 * read as the one thing on the page you are meant to compare, and gives the
 * band its own colour rather than repeating the section behind it.
 *
 * Each card re-declares the dark token set, so every token-driven part inside
 * it (blurb, unit, quote line, rules, checklist) is correct without a rule of
 * its own. Only the light-band corrections made earlier need reversing.
 */
.bs-section--cream .bs-price,
.bs-section--paper .bs-price,
.bs-section--paper-2 .bs-price {
	--bs-ink: #f4f3fc;
	--bs-body: #d3d0ea;
	--bs-muted: #a9a5d4;
	--bs-line: rgba(255, 255, 255, 0.14);
	--bs-line-soft: rgba(255, 255, 255, 0.08);
	--bs-on-dark: #d3d0ea;
	--bs-on-dark-soft: #a9a5d4;

	background: linear-gradient(168deg, var(--bs-dark-3), var(--bs-dark) 72%);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--bs-on-dark);
	box-shadow: 0 2px 4px rgba(10, 6, 49, 0.08), 0 20px 48px rgba(10, 6, 49, 0.16);
}

/* The featured tier takes the brighter mid-ramp indigo, so the three read as a
   set with one of them emphasised rather than as three unrelated blocks. */
.bs-section--cream .bs-price--featured,
.bs-section--paper .bs-price--featured,
.bs-section--paper-2 .bs-price--featured {
	background: linear-gradient(168deg, var(--bs-brand-500), var(--bs-brand-700) 78%);
	border-color: rgba(156, 153, 239, 0.55);
	box-shadow:
		0 0 0 3px rgba(50, 48, 224, 0.16),
		0 2px 4px rgba(10, 6, 49, 0.1),
		0 28px 64px rgba(10, 6, 49, 0.22);
}

/* Reverse the light-band text corrections inside the card. */
.bs-section--cream .bs-price h3,
.bs-section--cream .bs-price .bs-price__amount,
.bs-section--cream .bs-price .bs-check__carry,
.bs-section--paper .bs-price h3,
.bs-section--paper .bs-price .bs-price__amount,
.bs-section--paper .bs-price .bs-check__carry,
.bs-section--paper-2 .bs-price h3,
.bs-section--paper-2 .bs-price .bs-price__amount,
.bs-section--paper-2 .bs-price .bs-check__carry {
	color: #fff;
}

.bs-section--cream .bs-price .bs-price__amount--quote,
.bs-section--paper .bs-price .bs-price__amount--quote,
.bs-section--paper-2 .bs-price .bs-price__amount--quote {
	color: var(--bs-amber);
}

.bs-section--cream .bs-price .bs-check li::before,
.bs-section--paper .bs-price .bs-check li::before,
.bs-section--paper-2 .bs-price .bs-check li::before {
	background-color: rgba(255, 255, 255, 0.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffab57' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* The ghost button goes back to its on-dark treatment inside the card. */
.bs-section--cream .bs-price .bs-btn--ghost,
.bs-section--paper .bs-price .bs-btn--ghost,
.bs-section--paper-2 .bs-price .bs-btn--ghost {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.bs-section--cream .bs-price .bs-btn--ghost:hover,
.bs-section--paper .bs-price .bs-btn--ghost:hover,
.bs-section--paper-2 .bs-price .bs-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.bs-section--cream .bs-price a:not(.bs-btn),
.bs-section--paper .bs-price a:not(.bs-btn),
.bs-section--paper-2 .bs-price a:not(.bs-btn) {
	color: #a5a3f7;
}

.bs-compare {
	overflow-x: auto;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	background: var(--bs-surface);
}

.bs-compare table {
	min-width: 680px;
	font-size: 0.92rem;
}

.bs-compare th,
.bs-compare td {
	padding: 0.85rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid var(--bs-line-soft);
}

.bs-compare thead th {
	font-family: var(--bs-font-display);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	white-space: nowrap;
}

.bs-compare tbody tr:last-child td {
	border-bottom: 0;
}

.bs-compare td:not(:first-child),
.bs-compare th:not(:first-child) {
	text-align: center;
}

.bs-yes {
	color: var(--bs-success);
	font-weight: 700;
}

.bs-no {
	color: var(--bs-muted);
}

/* --------------------------------------------------------------- FAQ */

.bs-faq {
	max-width: var(--bs-wrap-narrow);
	margin: 0 auto;
}

/*
 * Two-column variant. Each column is an independent stack, so opening an
 * answer never displaces the questions in the other one — which is what
 * happens if the items share a single grid.
 */
.bs-faq--split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(1rem, 2vw, 1.75rem);
	align-items: start;
	max-width: none;
}

@media (max-width: 880px) {
	.bs-faq--split {
		grid-template-columns: 1fr;
		max-width: var(--bs-wrap-narrow);
	}
}

.bs-faq details {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	margin-bottom: 10px;
	overflow: hidden;
}

.bs-faq summary {
	cursor: pointer;
	padding: 1.05rem 1.25rem;
	font-family: var(--bs-font-display);
	font-size: 1.02rem;
	font-weight: 600;
	color: #fff;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
}

.bs-faq summary::-webkit-details-marker {
	display: none;
}

.bs-faq summary::after {
	content: "+";
	font-size: 1.3rem;
	color: var(--bs-brand-400);
	line-height: 1;
	flex-shrink: 0;
}

.bs-faq details[open] summary::after {
	content: "−";
}

.bs-faq details > div {
	padding: 0 1.25rem 1.15rem;
	color: var(--bs-muted);
	font-size: 0.95rem;
}

.bs-faq details > div > :last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------- register */

.bs-register {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}

@media (max-width: 900px) {
	.bs-register {
		grid-template-columns: 1fr;
	}
}

/* Mirrors the product's own auth screen: a rounded panel on a light ground,
   the wordmark top-left, the value proposition beneath it. */
.bs-register__aside {
	background: linear-gradient(160deg, rgba(50, 48, 224, 0.22), rgba(255, 255, 255, 0.04) 70%);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-xl);
	padding: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}

.bs-register__aside img {
	height: 30px;
	width: auto;
	margin-bottom: 1.5rem;
}

.bs-register__panel {
	background: var(--bs-surface);
	backdrop-filter: blur(10px);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-xl);
	box-shadow: 0 24px 60px rgba(3, 2, 16, 0.45);
	padding: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}

.bs-register__panel h2 {
	font-size: 1.6rem;
}

.bs-embed {
	position: relative;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	min-height: 520px;
}

.bs-embed iframe {
	display: block;
	width: 100%;
	height: 620px;
	border: 0;
}

/* ------------------------------------------------------------- forms */

/*
 * Two fields to a row. The gap does the spacing, so the fields themselves carry
 * no margin — a bottom margin inside a grid doubles up against the row gap and
 * the rhythm drifts down the form.
 */
.bs-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1rem;
	margin-bottom: 1.4rem;
}

/* Long answers, and a trailing odd field, take the whole row. */
.bs-field--wide {
	grid-column: 1 / -1;
}

/* One column on narrow screens: side-by-side inputs below this get too tight
   to type into comfortably, and the labels start wrapping. */
@media (max-width: 600px) {
	.bs-form-grid {
		grid-template-columns: 1fr;
	}
}

.bs-field {
	min-width: 0;
}

.bs-field label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: 0.35rem;
}

.bs-field .bs-req {
	color: var(--bs-orange);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
	width: 100%;
	font-family: var(--bs-font-body);
	font-size: 0.95rem;
	color: var(--bs-ink);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	padding: 0.7rem 0.9rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

/* --- Native control surfaces ---------------------------------------------
   The select inherits near-white text from the rule above, but the dropdown
   popup is drawn by the OS on its own default white background — so the
   options were white on white and effectively unreadable.

   `color-scheme` is the real fix: it tells the browser to paint the native
   popup, its scrollbar and the caret dark, which makes the inherited light
   text legible. The explicit option colours are the fallback for engines that
   ignore it. Ported from the BeActive theme, which hit this first.

   Every band on this site is dark, so unlike BeActive there is no light
   variant to flip back — add one here if a light section is ever introduced,
   or the same bug reappears the other way round. */
select {
	color-scheme: dark;
}

select option {
	background-color: var(--bs-dark-3);
	color: #fff;
}

/* Chrome paints its own pale fill on autofilled fields and ignores
   background-color. An inset shadow is the only way to cover it, and
   -webkit-text-fill-color the only way to recolour the text inside it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--bs-ink);
	-webkit-box-shadow: 0 0 0 1000px #19153d inset;
	box-shadow: 0 0 0 1000px #19153d inset;
	caret-color: var(--bs-ink);
	/* The fill rides a transition Chrome will not let you skip, so it is
	   pushed out far enough that it never arrives. */
	transition: background-color 100000s ease-in-out 0s;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: #7c7af0;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 0 3px rgba(50, 48, 224, 0.28);
}

.bs-field__hint {
	font-size: 0.8rem;
	color: var(--bs-muted);
	margin: 0.35rem 0 0;
}

.bs-form-note {
	font-size: 0.8rem;
	color: var(--bs-muted);
}

.bs-alert {
	border-radius: var(--bs-radius);
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
}

.bs-alert--ok {
	background: rgba(18, 183, 106, 0.16);
	border: 1px solid rgba(18, 183, 106, 0.45);
	color: #7ff0bb;
}

.bs-alert--err {
	background: rgba(240, 68, 56, 0.16);
	border: 1px solid rgba(240, 68, 56, 0.45);
	color: #ffb4ae;
}

/* ------------------------------------------------------------- pages */

.bs-pagehead {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(900px 440px at 10% -24%, rgba(50, 48, 224, 0.55), transparent 62%),
		radial-gradient(700px 340px at 92% 118%, rgba(255, 112, 0, 0.22), transparent 62%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 42%),
		var(--bs-dark);
	border-bottom: 1px solid var(--bs-line-soft);
	padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0;
}

.bs-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 58px 58px;
	mask-image: linear-gradient(to bottom, #000, transparent 78%);
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.bs-pagehead h1 {
	margin-bottom: 0.5rem;
	text-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.bs-pagehead p {
	font-size: 1.075rem;
	color: var(--bs-on-dark);
	max-width: 60ch;
	margin-bottom: 0;
}

.bs-breadcrumb {
	font-size: 0.82rem;
	color: var(--bs-muted);
	margin-bottom: 1rem;
}

.bs-breadcrumb a {
	color: var(--bs-muted);
}

.bs-breadcrumb span {
	margin: 0 0.4rem;
	opacity: 0.5;
}

/* Long-form prose (page/post content and CPT bodies). */
.bs-prose {
	max-width: 74ch;
}

.bs-prose h2 {
	margin-top: 2.25rem;
	font-size: 1.6rem;
}

.bs-prose h3 {
	margin-top: 1.75rem;
}

.bs-prose > :first-child {
	margin-top: 0;
}

.bs-prose img,
.bs-prose figure {
	border-radius: var(--bs-radius);
}

.bs-prose figure {
	margin: 1.75rem 0;
}

.bs-prose figcaption {
	font-size: 0.85rem;
	color: var(--bs-muted);
	margin-top: 0.5rem;
}

.bs-prose table {
	margin: 1.5rem 0;
	font-size: 0.93rem;
}

.bs-prose th,
.bs-prose td {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--bs-line);
	text-align: left;
}

.bs-prose th {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-family: var(--bs-font-display);
}

/* ------------------------------------------------------ single blog post */

.bs-posthero {
	position: relative;
	isolation: isolate;
	z-index: 1;
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem) 0 0;
	background:
		radial-gradient(800px 440px at 50% 16%, rgba(50, 48, 224, 0.28), transparent 68%),
		radial-gradient(520px 300px at 92% 74%, rgba(255, 112, 0, 0.12), transparent 70%),
		var(--bs-dark);
	border-bottom: 1px solid var(--bs-line-soft);
	overflow: visible;
}

.bs-posthero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: linear-gradient(to bottom, #000, transparent 78%);
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.bs-posthero__back {
	max-width: var(--bs-wrap);
	margin: 0 auto clamp(1.5rem, 1.15rem + 1vw, 2.25rem);
}

.bs-posthero__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--bs-muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.bs-posthero__back a:hover {
	color: #fff;
	text-decoration: none;
}

.bs-posthero__back svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.15s ease;
}

.bs-posthero__back a:hover svg {
	transform: translateX(-3px);
}

.bs-posthero__content {
	max-width: var(--bs-wrap);
	margin: 0 auto;
	text-align: center;
}

.bs-posthero__category {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid rgba(255, 171, 87, 0.3);
	border-radius: 999px;
	background: rgba(255, 112, 0, 0.08);
	color: var(--bs-amber);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1;
	text-transform: uppercase;
}

.bs-posthero__category:hover {
	border-color: rgba(255, 171, 87, 0.55);
	color: #ffd1a3;
	text-decoration: none;
}

.bs-posthero__category span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bs-orange);
	box-shadow: 0 0 0 4px rgba(255, 112, 0, 0.12);
}

.bs-posthero h1 {
	max-width: 22ch;
	margin: 0 auto;
	font-size: clamp(2.45rem, 1.65rem + 2.9vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.055em;
	text-wrap: balance;
}

.bs-posthero__dek {
	max-width: 680px;
	margin: 1rem auto 0;
	color: var(--bs-body);
	font-size: clamp(1.05rem, 0.97rem + 0.35vw, 1.25rem);
	line-height: 1.65;
	text-wrap: balance;
}

.bs-posthero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.4rem;
	margin-top: 1.15rem;
	color: var(--bs-muted);
	font-size: 0.875rem;
	font-weight: 500;
}

.bs-posthero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.bs-posthero__meta svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: var(--bs-amber);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bs-posthero__media {
	position: relative;
	max-width: var(--bs-wrap);
	margin: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem) auto -4rem;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: calc(var(--bs-radius-xl) + 2px);
	background: rgba(255, 255, 255, 0.075);
	box-shadow: 0 30px 80px rgba(2, 1, 17, 0.62);
}

.bs-posthero__media::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(120deg, rgba(112, 108, 255, 0.42), transparent 34%, transparent 70%, rgba(255, 112, 0, 0.28));
	filter: blur(22px);
	opacity: 0.6;
}

.bs-posthero__image {
	display: block;
	width: 100%;
	border-radius: var(--bs-radius-lg);
}

.bs-article__body {
	position: relative;
	z-index: 0;
	padding: clamp(4rem, 2.5rem + 4vw, 7rem) 0;
	background: var(--bs-ground);
}

.bs-article__body--with-cover {
	padding-top: clamp(5.5rem, 4.5rem + 2vw, 7rem);
}

.bs-article__wrap {
	max-width: 1120px;
}

.bs-article__prose {
	max-width: 1000px;
	margin: 0 auto;
	font-size: 1.075rem;
	line-height: 1.85;
}

.bs-article__prose > p:first-child {
	font-size: clamp(1.18rem, 1.08rem + 0.4vw, 1.35rem);
	line-height: 1.7;
	color: #eceaf8;
}

.bs-article__prose > p:first-child::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	color: var(--bs-orange);
	font-family: var(--bs-font-display);
	font-size: 3.35em;
	font-weight: 700;
	line-height: 0.82;
}

.bs-article__prose p,
.bs-article__prose li {
	color: #c7c4df;
}

.bs-article__prose h2 {
	margin-top: 3.25rem;
	font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.2rem);
	text-wrap: balance;
}

.bs-article__prose h3 {
	margin-top: 2.5rem;
	font-size: 1.35rem;
}

.bs-article__prose a {
	text-decoration: underline;
	text-decoration-color: rgba(165, 163, 247, 0.42);
	text-underline-offset: 0.2em;
}

.bs-article__prose a:hover {
	text-decoration-color: currentColor;
}

.bs-article__prose blockquote {
	margin: 2.5rem 0;
	padding: 1.5rem 1.75rem;
	color: #fff;
}

.bs-article__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	max-width: 1000px;
	margin: 3rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bs-line);
}

.bs-article__tags > span {
	margin-right: 0.25rem;
	color: var(--bs-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.bs-article__tags a {
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	color: var(--bs-body);
	font-size: 0.82rem;
}

.bs-article__tags a:hover {
	border-color: rgba(255, 171, 87, 0.5);
	color: var(--bs-amber);
	text-decoration: none;
}

.bs-related .bs-section-head {
	margin-bottom: 2rem;
}

@media (max-width: 700px) {
	.bs-posthero {
		padding-top: 1.5rem;
	}

	.bs-posthero__back {
		margin-bottom: 1.5rem;
	}

	.bs-posthero h1 {
		font-size: clamp(2.25rem, 11vw, 3.4rem);
		letter-spacing: -0.045em;
	}

	.bs-posthero__dek {
		font-size: 1rem;
	}

	.bs-posthero__media {
		margin-bottom: -2rem;
		padding: 6px;
		border-radius: var(--bs-radius-lg);
	}

	.bs-posthero__image {
		border-radius: calc(var(--bs-radius-lg) - 5px);
	}

	.bs-article__body--with-cover {
		padding-top: 4.5rem;
	}

	.bs-article__prose {
		font-size: 1rem;
	}

	.bs-article__prose > p:first-child {
		font-size: 1.125rem;
	}
}

.bs-with-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}

@media (max-width: 900px) {
	.bs-with-aside {
		grid-template-columns: 1fr;
	}
}

.bs-aside {
	position: sticky;
	top: 100px;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	padding: 22px;
	font-size: 0.9rem;
}

.bs-aside h3 {
	font-size: 1rem;
}

.bs-aside dl {
	margin: 0;
}

.bs-aside dt {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-muted);
	margin-top: 1rem;
}

.bs-aside dd {
	margin: 0.2rem 0 0;
	color: #fff;
	font-weight: 500;
}

/* ----------------------------------------------------------- blog index */

.bs-bloghead {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.25rem, 1.6rem + 2vw, 3.75rem) 0;
	background:
		radial-gradient(700px 340px at 8% 0%, rgba(50, 48, 224, 0.36), transparent 68%),
		radial-gradient(500px 280px at 90% 100%, rgba(255, 112, 0, 0.14), transparent 70%),
		var(--bs-dark);
	border-bottom: 1px solid var(--bs-line-soft);
}

.bs-bloghead::after {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -165px;
	width: 380px;
	height: 380px;
	border: 1px solid rgba(255, 171, 87, 0.12);
	border-radius: 50%;
	box-shadow: 0 0 0 54px rgba(255, 171, 87, 0.025), 0 0 0 108px rgba(255, 171, 87, 0.018);
	z-index: -1;
}

.bs-bloghead__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
	gap: clamp(2rem, 1rem + 5vw, 6rem);
	align-items: end;
}

.bs-bloghead .bs-eyebrow {
	color: var(--bs-amber);
}

.bs-bloghead h1 {
	margin: 0;
	font-size: clamp(2.85rem, 2rem + 3vw, 4.6rem);
	line-height: 0.98;
}

.bs-bloghead__intro {
	max-width: 47ch;
	margin: 0 0 0.4rem;
	padding-left: 1.4rem;
	border-left: 2px solid var(--bs-orange);
	color: var(--bs-body);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
	line-height: 1.7;
}

.bs-blog-index {
	background: var(--bs-dark);
}

.bs-blog-feature {
	padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
	padding-bottom: clamp(3rem, 2.25rem + 2vw, 4.5rem);
}

.bs-blog-sectionhead {
	display: flex;
	align-items: end;
	justify-content: space-between;
	max-width: none;
	margin-bottom: 1.25rem;
}

.bs-blog-sectionhead .bs-eyebrow {
	margin: 0;
}

.bs-blog-sectionhead h2 {
	margin: 0;
	font-size: clamp(1.8rem, 1.5rem + 1vw, 2.35rem);
}

.bs-blog-feature__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.bs-blog-feature__layout.has-recent {
	grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
}

.bs-blog-lead {
	position: relative;
	min-width: 0;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-xl);
	overflow: hidden;
	box-shadow: 0 22px 58px rgba(2, 1, 17, 0.34);
}

.bs-blog-lead__image {
	display: block;
	aspect-ratio: 16 / 8.4;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(50, 48, 224, 0.42), rgba(255, 112, 0, 0.16));
}

.bs-blog-lead__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s var(--bs-ease-anim);
}

.bs-blog-lead:hover .bs-blog-lead__image img {
	transform: scale(1.025);
}

.bs-blog-lead__body {
	padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem);
}

.bs-blog-lead__body h3 {
	max-width: 25ch;
	margin: 0 0 0.65rem;
	font-size: clamp(1.65rem, 1.35rem + 1.1vw, 2.35rem);
	line-height: 1.18;
	text-wrap: balance;
}

.bs-blog-lead__body h3 a {
	color: #fff;
}

.bs-blog-lead__body h3 a:hover {
	color: var(--bs-amber);
	text-decoration: none;
}

.bs-blog-lead__body > p:not(.bs-blog-meta) {
	max-width: 64ch;
	color: var(--bs-muted);
}

.bs-blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.8rem;
	color: var(--bs-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.045em;
	line-height: 1.4;
	text-transform: uppercase;
}

.bs-blog-meta > * + *::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 0.5rem 0.15rem 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
}

.bs-blog-meta > span:first-child {
	color: var(--bs-amber);
}

.bs-blog-recent {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0 24px;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-xl);
	background:
		radial-gradient(420px 220px at 100% 0%, rgba(50, 48, 224, 0.2), transparent 70%),
		rgba(255, 255, 255, 0.035);
}

.bs-blog-recent__head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--bs-line);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bs-blog-recent__head span:last-child {
	color: var(--bs-muted);
	font-size: 0.72rem;
}

.bs-blog-recent__item {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	min-height: 150px;
	padding: 1.5rem 3.25rem 1.5rem 0;
	border-bottom: 1px solid var(--bs-line-soft);
}

.bs-blog-recent__item:last-child {
	border-bottom: 0;
}

.bs-blog-recent__item h3 {
	margin: 0;
	font-size: clamp(1.05rem, 0.97rem + 0.3vw, 1.25rem);
	line-height: 1.35;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.bs-blog-recent__item h3 a {
	color: #fff;
}

.bs-blog-recent__item h3 a:hover {
	color: var(--bs-amber);
	text-decoration: none;
}

.bs-blog-recent__link {
	position: absolute;
	right: 0;
	top: 50%;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--bs-line);
	border-radius: 50%;
	color: var(--bs-amber);
	transform: translateY(-50%);
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.bs-blog-recent__link:hover {
	border-color: var(--bs-orange);
	background: rgba(255, 112, 0, 0.12);
	color: #fff;
	text-decoration: none;
	transform: translate(3px, -50%);
}

.bs-blog-recent__link svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bs-section--paper .bs-blog-lead,
.bs-section--cream .bs-blog-lead,
.bs-section--paper .bs-blog-recent,
.bs-section--cream .bs-blog-recent {
	background: #fff;
	border-color: rgba(10, 6, 49, 0.12);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10, 6, 49, 0.04), 0 16px 42px rgba(10, 6, 49, 0.08);
}

.bs-section--paper .bs-blog-lead__body h3 a,
.bs-section--cream .bs-blog-lead__body h3 a,
.bs-section--paper .bs-blog-recent__item h3 a,
.bs-section--cream .bs-blog-recent__item h3 a {
	color: var(--bs-ink-on-light);
}

.bs-section--paper .bs-blog-lead__body h3 a:hover,
.bs-section--cream .bs-blog-lead__body h3 a:hover,
.bs-section--paper .bs-blog-recent__item h3 a:hover,
.bs-section--cream .bs-blog-recent__item h3 a:hover {
	color: var(--bs-orange-600);
}

.bs-section--paper .bs-blog-lead__body > p:not(.bs-blog-meta),
.bs-section--cream .bs-blog-lead__body > p:not(.bs-blog-meta) {
	color: var(--bs-body-on-light);
}

.bs-section--paper .bs-blog-meta,
.bs-section--cream .bs-blog-meta,
.bs-section--paper .bs-blog-recent__head span:last-child,
.bs-section--cream .bs-blog-recent__head span:last-child {
	color: var(--bs-muted-on-light);
}

.bs-section--paper .bs-blog-meta > span:first-child,
.bs-section--cream .bs-blog-meta > span:first-child {
	color: var(--bs-orange-600);
}

.bs-section--paper .bs-blog-meta > * + *::before,
.bs-section--cream .bs-blog-meta > * + *::before {
	background: rgba(10, 6, 49, 0.24);
}

.bs-section--paper .bs-blog-recent__head,
.bs-section--cream .bs-blog-recent__head {
	border-color: rgba(10, 6, 49, 0.11);
	color: var(--bs-ink-on-light);
}

.bs-section--paper .bs-blog-recent__item,
.bs-section--cream .bs-blog-recent__item {
	border-color: rgba(10, 6, 49, 0.08);
}

.bs-section--paper .bs-blog-recent__link,
.bs-section--cream .bs-blog-recent__link {
	border-color: rgba(10, 6, 49, 0.14);
	color: var(--bs-brand-500);
}

.bs-section--paper .bs-blog-recent__link:hover,
.bs-section--cream .bs-blog-recent__link:hover {
	background: rgba(255, 112, 0, 0.1);
	border-color: rgba(255, 112, 0, 0.35);
	color: var(--bs-orange-600);
}

.bs-section--paper .bs-blog-lead::after,
.bs-section--paper .bs-blog-recent::after,
.bs-section--cream .bs-blog-lead::after,
.bs-section--cream .bs-blog-recent::after,
.bs-section--paper .bs-postcard::after,
.bs-section--paper .bs-int-card::after,
.bs-section--cream .bs-postcard::after,
.bs-section--cream .bs-int-card::after,
.bs-section--paper-2 .bs-postcard::after,
.bs-section--paper-2 .bs-int-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--bs-brand-400), var(--bs-sky), var(--bs-orange));
	opacity: 0.78;
}

.bs-blog-categories {
	padding: 1.5rem 0;
	border-top: 1px solid rgba(10, 6, 49, 0.08);
	border-bottom: 1px solid rgba(10, 6, 49, 0.08);
	background: var(--bs-paper-2);
}

.bs-blog-categories__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.bs-blog-categories__label {
	flex: 0 0 auto;
	color: var(--bs-ink-on-light);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bs-blog-categories__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.bs-blog-categories__list button {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0.45rem 0.9rem;
	border: 1px solid rgba(10, 6, 49, 0.12);
	border-radius: 999px;
	background: #fff;
	color: var(--bs-body-on-light);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

.bs-blog-categories__list button:hover,
.bs-blog-categories__list button.is-current,
.bs-blog-categories__list button[aria-pressed="true"] {
	border-color: rgba(255, 112, 0, 0.55);
	background: var(--bs-orange-tint);
	color: var(--bs-orange-600);
	text-decoration: none;
}

.bs-blog-filter-empty {
	margin: 0;
	padding: 2.5rem;
	border: 1px dashed var(--bs-line);
	border-radius: var(--bs-radius-lg);
	color: var(--bs-muted);
	text-align: center;
}

.bs-postcard[hidden] {
	display: none;
}

.bs-blog-latest {
	padding-top: clamp(1.5rem, 1.15rem + 1vw, 2.25rem);
}

.bs-blog-latest .bs-postgrid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
	.bs-blog-feature__layout.has-recent {
		grid-template-columns: 1fr;
	}

	.bs-blog-recent__item {
		min-height: 132px;
	}
}

@media (max-width: 760px) {
	.bs-bloghead__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.bs-bloghead__intro {
		max-width: 56ch;
	}

	.bs-blog-sectionhead {
		display: block;
	}

	.bs-blog-sectionhead .bs-eyebrow {
		margin-bottom: 0.75rem;
	}

	.bs-blog-categories__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.bs-blog-latest .bs-postgrid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------- posts / archive */

.bs-postgrid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.bs-postcard {
	display: flex;
	flex-direction: column;
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03));
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bs-postcard:hover {
	background: rgba(255, 255, 255, 0.075);
	border-color: rgba(255, 171, 87, 0.42);
	box-shadow: 0 20px 46px rgba(3, 2, 16, 0.5);
	transform: translateY(-2px);
}

.bs-postcard__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, rgba(50, 48, 224, 0.4), rgba(255, 112, 0, 0.18));
	overflow: hidden;
}

.bs-postcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--bs-ease-anim);
}

.bs-postcard:hover .bs-postcard__thumb img {
	transform: scale(1.025);
}

.bs-postcard__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.bs-postcard__body h3 {
	font-size: 1.15rem;
	line-height: 1.35;
	margin-bottom: 0.65rem;
}

.bs-postcard__body h3 a {
	color: inherit;
}

.bs-postcard__body h3 a:hover {
	color: var(--bs-amber);
	text-decoration: none;
}

.bs-postcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.55rem;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bs-muted);
	margin-bottom: 0.6rem;
	font-weight: 600;
}

.bs-postcard__meta > span:first-child {
	color: var(--bs-amber);
}

.bs-postcard__meta > * + *::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 0.5rem 0.15rem 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
}

.bs-postcard__body p {
	font-size: 0.92rem;
	color: var(--bs-muted);
}

.bs-postcard__body .bs-textlink {
	margin-top: auto;
	font-size: 0.9rem;
}

/*
 * Testimonials run as two tracks travelling against each other. Opposing
 * directions keep the eye moving across the band instead of being carried off
 * one edge, and they make a short set of quotes read as more than it is without
 * anybody inventing extra ones.
 */
.bs-marquee--quotes .bs-marquee__track {
	gap: 20px;
	align-items: stretch;
	animation-duration: 78s;
}

.bs-marquee--quotes + .bs-marquee--quotes {
	margin-top: 20px;
}

/* The second row plays the same keyframes backwards, so it starts held at -50%
   and travels left to right while the first travels right to left. */
.bs-marquee--reverse .bs-marquee__track {
	animation-direction: reverse;
}

.bs-quote-card {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.9rem;
	width: clamp(290px, 30vw, 405px);
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	padding: 26px 28px;
	overflow: hidden;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* The hover state is the whole point of pausing the track: it marks which card
   you stopped on, and lets the quote be read. */
.bs-quote-card:hover {
	border-color: var(--bs-orange);
	background: rgba(255, 112, 0, 0.05);
	box-shadow: 0 0 0 1px rgba(255, 112, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.34);
}

.bs-quote-card__mark {
	position: absolute;
	top: 4px;
	right: 20px;
	font-family: var(--bs-font-display);
	font-size: 5rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.07);
	pointer-events: none;
}

.bs-stars {
	display: flex;
	gap: 3px;
	color: var(--bs-orange);
}

.bs-quote-card__by {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--bs-line);
}

/*
 * Initials, not a stock headshot. These are fictional people until marketing
 * supplies real ones, and a photograph of someone who does not exist is a
 * different order of invention from a placeholder name.
 */
.bs-avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(150deg, rgba(255, 112, 0, 0.85), rgba(50, 48, 224, 0.75));
	font-family: var(--bs-font-display);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
}

.bs-quote-card__who {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
	min-width: 0;
}

.bs-quote-card__who strong {
	font-size: 0.94rem;
	color: #fff;
}

.bs-quote-card__who em {
	font-style: normal;
	font-size: 0.84rem;
	color: var(--bs-on-dark-soft);
}

.bs-quote-card blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	font-size: 1.05rem;
	color: #fff;
}

.bs-quote-card cite {
	font-style: normal;
	font-size: 0.85rem;
	color: var(--bs-muted);
	margin-top: auto;
}

.bs-quote-card cite strong {
	display: block;
	color: #fff;
	font-size: 0.92rem;
}

.bs-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 3rem;
}

.bs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-sm);
	background: var(--bs-surface);
	color: var(--bs-body);
	font-weight: 600;
	font-size: 0.9rem;
}

.bs-pagination .page-numbers:hover {
	background: var(--bs-surface-2);
	color: #fff;
	text-decoration: none;
}

.bs-pagination .page-numbers.current {
	background: var(--bs-brand-400);
	border-color: var(--bs-brand-400);
	color: #fff;
}

/* ----------------------------------------------------------- CTA band */

.bs-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(720px 360px at 15% 0%, rgba(50, 48, 224, 0.55), transparent 62%),
		radial-gradient(620px 320px at 88% 110%, rgba(255, 112, 0, 0.3), transparent 60%),
		var(--bs-dark);
	color: var(--bs-on-dark);
	border-radius: var(--bs-radius-xl);
	padding: clamp(2.5rem, 1.5rem + 3.5vw, 4rem);
	text-align: center;
}

/*
 * The homepage variant puts the enquiry form in the band instead of a button
 * pointing at one. Centred copy stops making sense once there are two columns,
 * so the split resets the alignment the base band sets.
 */
.bs-cta--split {
	display: grid;
	/* The form side takes the larger share: two fields to a row need the width,
	   and the copy beside it is three short lines and a checklist. */
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	gap: clamp(1.75rem, 1rem + 2.4vw, 3rem);
	/* Top-aligned, not centred: the copy is short and the form is not, and
	   centring left the headline floating in the middle of a tall column. */
	align-items: start;
	text-align: left;
}

/* The message box is optional context, not the main event — it does not need
   to be as tall here as it is on a dedicated contact page. */
.bs-cta__form textarea {
	min-height: 92px;
}

@media (max-width: 940px) {
	.bs-cta--split {
		grid-template-columns: 1fr;
	}
}

.bs-cta--split h2 {
	margin-bottom: 0.75rem;
}

.bs-cta__points {
	margin-top: 1.75rem;
	font-size: 0.95rem;
}

.bs-cta__form {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: var(--bs-radius-lg);
	padding: clamp(1.25rem, 1rem + 0.9vw, 1.65rem);
	backdrop-filter: blur(12px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

/* The band already carries its own heading, so the form does not need one. */
.bs-cta__form .bs-form-note {
	margin-bottom: 0;
}

.bs-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 52px 52px;
	mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 72%);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 72%);
}

.bs-cta h2 {
	color: #fff;
	max-width: 24ch;
	margin-left: auto;
	margin-right: auto;
}

.bs-cta p {
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
	color: var(--bs-on-dark);
}

.bs-cta .bs-btn-row {
	justify-content: center;
	margin-top: 1.75rem;
}

.bs-cta__note {
	margin: 1.25rem 0 0;
	font-size: 0.82rem;
	color: var(--bs-on-dark-soft);
}

/* -------------------------------------------------------------- footer */

.bs-footer {
	background: var(--bs-brand-950);
	color: var(--bs-on-dark-soft);
	padding: clamp(3rem, 2rem + 2vw, 4rem) 0 2rem;
	font-size: 0.92rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/*
 * The brand column asks for 240px and each link column for 150px. Below about
 * 760px those minimums add up to more than the viewport, and because grid track
 * minimums are hard floors the whole page gained ~56px of horizontal scroll.
 * Stepping the column count down explicitly is what keeps that from happening.
 */
.bs-footer__top {
	display: grid;
	grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
	gap: 32px;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 760px) {
	.bs-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.bs-footer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
}

.bs-footer__brand img {
	height: 30px;
	width: auto;
	margin-bottom: 1rem;
}

.bs-footer__brand p {
	max-width: 34ch;
	color: var(--bs-on-dark-soft);
	font-size: 0.9rem;
}

.bs-footer h4 {
	color: #fff;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

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

.bs-footer li {
	margin-bottom: 0.6rem;
}

.bs-footer a {
	color: var(--bs-on-dark-soft);
}

.bs-footer a:hover {
	color: var(--bs-amber);
	text-decoration: none;
}

.bs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 1.75rem;
	font-size: 0.82rem;
	color: #7a76a4;
}

.bs-footer__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.bs-footer__bottom li {
	margin: 0;
}

.bs-footer__befree {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.bs-footer__befree img {
	height: 22px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.75;
}

/* --------------------------------------------------------------- misc */

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

.bs-mt-0 {
	margin-top: 0;
}

.bs-mb-0 {
	margin-bottom: 0;
}

.bs-lede {
	font-size: 1.1rem;
	color: var(--bs-body);
}

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

.bs-nowrap {
	white-space: nowrap;
}

/* ------------------------------------------------------- reveal on scroll */

/*
 * The hidden state is scoped to `.bs-reveal-ready`, which main.js puts on <html>
 * only after it has decided to run the observer. With JavaScript off, or for a
 * crawler that never fires an IntersectionObserver, nothing is ever hidden —
 * the page simply renders. Nothing on this site is parked at opacity 0 waiting
 * for a scroll that may not come.
 */
/*
 * Timings, easing and the blur are matched to the BeActive site so the two
 * Befree properties move identically: 30px rise with a 3px blur clearing over
 * 400ms, staggered 90ms across a row.
 *
 * The transition lives on the revealed state, not the hidden one, so nothing
 * animates while the page is still settling.
 */
.bs-reveal-ready [data-bs-reveal] {
	opacity: 0;
	transform: translateY(30px);
	filter: blur(3px);
}

.bs-reveal-ready [data-bs-reveal].is-revealed {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity 0.4s var(--bs-ease-anim),
		transform 0.4s var(--bs-ease-anim),
		filter 0.4s var(--bs-ease-anim);
	transition-delay: var(--bs-reveal-delay, 0ms);
}

/*
 * Heading flip. Each character rotates up out of the page in its own
 * perspective context, staggered by index. Words stay inline-block so the
 * heading still wraps on word boundaries rather than mid-word.
 */
.bs-word {
	display: inline-block;
	perspective: 600px;
}

.bs-char {
	display: inline-block;
}

.bs-reveal-ready .bs-lettered .bs-char {
	opacity: 0;
	transform: translate3d(0, 10px, -8px) rotateX(-80deg);
}

.bs-reveal-ready .bs-lettered.is-revealed .bs-char {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.5s var(--bs-ease-anim),
		transform 0.5s var(--bs-ease-anim);
	transition-delay: calc(var(--bs-char-i, 0) * 18ms);
}

/* --------------------------------------------------------- logo marquee */

.bs-marquee {
	position: relative;
	overflow: hidden;
	padding: 6px 0;
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.bs-marquee__track {
	display: flex;
	align-items: center;
	gap: 18px;
	width: max-content;
	animation: bs-marquee 44s linear infinite;
}

.bs-marquee:hover .bs-marquee__track,
.bs-marquee:focus-within .bs-marquee__track {
	animation-play-state: paused;
}

@keyframes bs-marquee {
	to {
		transform: translateX(-50%);
	}
}

.bs-marquee__item {
	display: flex;
	align-items: center;
	gap: 11px;
	flex: 0 0 auto;
	padding: 13px 22px 13px 16px;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	background: rgba(255, 255, 255, 0.035);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--bs-on-dark);
	white-space: nowrap;
}

.bs-marquee__item img {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* -------------------------------------------------------- integration orbit */

/*
 * Besecure at the centre, applications in orbit. The two rings turn in opposite
 * directions on purpose — matched directions read as one spinning wheel, while
 * counter-rotation reads as depth.
 *
 * Each icon carries its ring's animation played backwards at the same duration,
 * which cancels the ring's rotation exactly and keeps every logo upright.
 */
.bs-orbit {
	--bs-orbit-size: clamp(300px, 60vw, 560px);
	--bs-orbit-icon: clamp(38px, 7vw, 54px);
	--bs-orbit-outer: calc(var(--bs-orbit-size) / 2 - var(--bs-orbit-icon) / 2);
	--bs-orbit-inner: calc(var(--bs-orbit-size) / 3.35);

	position: relative;
	width: var(--bs-orbit-size);
	height: var(--bs-orbit-size);
	margin: clamp(1.5rem, 3vw, 3rem) auto 0;
	isolation: isolate;
}

.bs-orbit__sweep {
	position: absolute;
	inset: 4%;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		rgba(255, 112, 0, 0.44),
		rgba(255, 112, 0, 0.12) 40deg,
		transparent 92deg
	);
	filter: blur(3px);
	animation: bs-orbit-cw 9s linear infinite;
}

.bs-orbit__track {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	border: 1px dashed rgba(255, 255, 255, 0.09);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.bs-orbit__track--outer {
	width: calc(var(--bs-orbit-outer) * 2);
	height: calc(var(--bs-orbit-outer) * 2);
}

.bs-orbit__track--inner {
	width: calc(var(--bs-orbit-inner) * 2);
	height: calc(var(--bs-orbit-inner) * 2);
}

.bs-orbit__ring {
	position: absolute;
	inset: 0;
}

.bs-orbit__ring--outer {
	animation: bs-orbit-cw 68s linear infinite;
}

.bs-orbit__ring--inner {
	animation: bs-orbit-ccw 44s linear infinite;
}

.bs-orbit__ring--outer .bs-orbit__icon {
	animation: bs-orbit-ccw 68s linear infinite;
}

.bs-orbit__ring--inner .bs-orbit__icon {
	animation: bs-orbit-cw 44s linear infinite;
}

.bs-orbit__ring--outer .bs-orbit__app {
	--bs-orbit-radius: var(--bs-orbit-outer);
}

.bs-orbit__ring--inner .bs-orbit__app {
	--bs-orbit-radius: var(--bs-orbit-inner);
}

.bs-orbit__app {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--bs-orbit-icon);
	height: var(--bs-orbit-icon);
	margin: calc(var(--bs-orbit-icon) / -2);
	transform: rotate(var(--bs-orbit-angle)) translateY(calc(-1 * var(--bs-orbit-radius)));
}

/* App marks are full-colour and drawn for light backgrounds, so the tile is
   light — the same treatment the hero launcher gives them. */
.bs-orbit__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.93);
	box-shadow: 0 6px 20px rgba(4, 2, 20, 0.45);
}

.bs-orbit__icon img {
	width: 58%;
	height: 58%;
	object-fit: contain;
}

.bs-orbit__core {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: clamp(76px, 15vw, 108px);
	height: clamp(76px, 15vw, 108px);
	border-radius: 50%;
	background: radial-gradient(circle at 32% 26%, #ff8a2b, #c24f00);
	box-shadow:
		0 0 0 10px rgba(255, 112, 0, 0.09),
		0 0 52px rgba(255, 112, 0, 0.42);
	transform: translate(-50%, -50%);
}

.bs-orbit__core img {
	width: 46%;
	height: auto;
}

@keyframes bs-orbit-cw {
	to {
		transform: rotate(360deg);
	}
}

@keyframes bs-orbit-ccw {
	to {
		transform: rotate(-360deg);
	}
}

/* ----------------------------------------------------- cookie consent */

.bs-cookie__banner {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1160px;
	margin: 0 auto;
	padding: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	color: #fff;
	background: #0a0631;
	box-shadow: 0 18px 60px rgba(10, 6, 49, 0.32);
}

.bs-cookie__copy {
	max-width: 680px;
}

.bs-cookie__copy h2,
.bs-cookie__dialog h2 {
	margin: 0 0 0.4rem;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.bs-cookie__copy p {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.92rem;
	line-height: 1.55;
}

.bs-cookie__copy a {
	color: #ffab57;
}

.bs-cookie__actions,
.bs-cookie__dialog-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.bs-cookie__banner .bs-btn,
.bs-cookie__dialog .bs-btn {
	white-space: nowrap;
}

.bs-cookie__banner .bs-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

.bs-cookie__backdrop {
	position: fixed;
	inset: 0;
	z-index: 1001;
	background: rgba(10, 6, 49, 0.66);
	backdrop-filter: blur(4px);
}

.bs-cookie__dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1002;
	width: min(620px, calc(100% - 2rem));
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: clamp(1.25rem, 4vw, 2rem);
	border-radius: 20px;
	color: #101010;
	background: #fff;
	box-shadow: 0 24px 80px rgba(10, 6, 49, 0.3);
	transform: translate(-50%, -50%);
}

.bs-cookie__dialog-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.bs-cookie__close {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #deddea;
	border-radius: 50%;
	color: #0a0631;
	background: #fff;
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
}

.bs-cookie__options {
	display: grid;
	gap: 0.75rem;
	margin: 1.5rem 0;
}

.bs-cookie__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	border: 1px solid #e5e4ee;
	border-radius: 14px;
	background: #faf9fd;
}

.bs-cookie__option span,
.bs-cookie__option strong,
.bs-cookie__option small {
	display: block;
}

.bs-cookie__option small {
	margin-top: 0.2rem;
	color: #625f75;
	line-height: 1.45;
}

.bs-cookie__option input {
	width: 20px;
	height: 20px;
	accent-color: var(--bs-indigo);
}

.bs-cookie__dialog-actions {
	justify-content: flex-end;
}

.bs-cookie-link {
	padding: 0;
	border: 0;
	color: inherit;
	background: transparent;
	cursor: pointer;
	font: inherit;
}

.bs-cookie-link:hover,
.bs-cookie-link:focus-visible {
	color: #fff;
	text-decoration: underline;
}

body.bs-cookie-open {
	overflow: hidden;
}

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

	.bs-cookie__actions,
	.bs-cookie__dialog-actions {
		flex-direction: column;
	}

	.bs-cookie__actions .bs-btn,
	.bs-cookie__dialog-actions .bs-btn {
		width: 100%;
	}
}

/* ----------------------------------------------------- surface polish */

/*
 * A one-pixel gradient rim, brightest along the top edge, on the panels that
 * carry content. It reads as a lit edge rather than a drawn border, which is
 * most of the difference between a flat card and an expensive-looking one.
 * Drawn with the mask-composite ring trick so it follows `border-radius`.
 */
.bs-card::before,
.bs-int-card::before,
.bs-postcard::before,
.bs-blog-lead::before,
.bs-blog-recent::before,
.bs-cta::before,
.bs-statband::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%),
		linear-gradient(110deg, rgba(50, 48, 224, 0.28), transparent 32%, transparent 70%, rgba(255, 112, 0, 0.2));
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.bs-int-card,
.bs-postcard,
.bs-blog-recent,
.bs-statband {
	position: relative;
}

/* The accent button gets the same lit top edge, so it belongs to the set. */
.bs-btn--accent {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%);
}

/* Counting digits change width as they tick; tabular figures stop the jitter. */
.bs-statband strong {
	font-variant-numeric: tabular-nums;
}

.bs-statband strong i {
	font-style: normal;
}

/*
 * A very slow drift on the hero's colour wash. Long enough that it reads as
 * depth rather than as an animation you are meant to notice.
 */
@media (prefers-reduced-motion: no-preference) {
	.bs-hero::before {
		animation: bs-hero-drift 28s ease-in-out infinite alternate;
	}
}

@keyframes bs-hero-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(-2%, 1.4%, 0) scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

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

	/*
	 * The blanket 0.01ms above would restart the marquee loop every frame rather
	 * than stop it, so it is switched off explicitly and the strip falls back to
	 * a static row that scrolls horizontally if it overflows.
	 */
	.bs-marquee__track {
		animation: none !important;
		transform: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}

	/*
	 * With the scroll stopped the track becomes a static wrapped row, so the
	 * copies that exist purely to make the loop continuous would show as the
	 * same logo over and over. Only the real list survives.
	 */
	.bs-logos__item--repeat,
	.bs-quote-card--repeat {
		display: none;
	}

	.bs-hero::before {
		animation: none !important;
	}

	/*
	 * The orbit stops where it is. The placement transforms are untouched, so
	 * it stays a legible arrangement of applications around the product rather
	 * than collapsing into the centre.
	 */
	.bs-orbit__sweep,
	.bs-orbit__ring,
	.bs-orbit__icon {
		animation: none !important;
	}
}

@media print {
	.bs-header,
	.bs-footer,
	.bs-cta,
	.bs-cookie {
		display: none;
	}
}