/* ==========================================================================
   Cobalt Aurora - global design system
   Buy Cloud Products
   --------------------------------------------------------------------------
   Base rules are scoped to .bcp (on <body>) so they beat Astra's inline
   dynamic CSS without !important. Colour rules on links/buttons are
   anchor-qualified for the same reason.
   ========================================================================== */

/* 1. Self-hosted variable faces -------------------------------------------- */

@font-face {
	font-family: "Cabinet Grotesk";
	src: url("../fonts/cabinet-grotesk-variable.woff2") format("woff2-variations"),
		url("../fonts/cabinet-grotesk-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Satoshi";
	src: url("../fonts/satoshi-variable.woff2") format("woff2-variations"),
		url("../fonts/satoshi-variable.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

/* 2. Tokens ----------------------------------------------------------------- */

:root {
	/* Astra derives a root font-size from its own body setting, which would
	   rescale every rem token. :root outranks its `html` rule. */
	font-size: 100%;

	--bcp-bg: #f5f7ff;
	--bcp-surface: #ffffff;
	--bcp-sunken: #edf0ff;
	--bcp-tint-cyan: #e6f6fb;
	--bcp-tint-violet: #f1ecfe;
	--bcp-deep: #080f2a;
	--bcp-deep-alt: #101a3d;

	--bcp-ink: #101936;
	--bcp-ink-inverse: #f4f7ff;
	--bcp-muted: #526080;
	--bcp-muted-inverse: #a9b4da;
	--bcp-line: #dee5f7;
	--bcp-line-inverse: #27316a;

	--bcp-accent: #315bff;
	--bcp-accent-ink: #ffffff;
	--bcp-accent-deep: #1f3fd6;
	--bcp-accent-soft: #e4eaff;
	--bcp-indigo: #5b3df5;
	--bcp-violet: #853bfa;
	--bcp-cyan: #16d9f5;
	--bcp-positive: #0e9f6e;
	--bcp-caution: #b45309;
	/* Explicit tints rather than color-mix(): Chrome computes color-mix to
	   color(srgb ...), which contrast tooling cannot read reliably. */
	--bcp-caution-wash: #fdf4ec;
	--bcp-caution-line: #efd8c2;

	/* The signature gradient and its data variant. */
	/* Light tints, used only for gradient text on the deep grounds, where the
	   base accent colours would not reach AA contrast. */
	--bcp-sky-tint: #7cc5ff;
	--bcp-violet-tint: #c4b5fd;
	--bcp-cyan-tint: #67e8f9;

	--bcp-grad: linear-gradient(135deg, #315bff 0%, #853bfa 100%);
	/*
	 * A deeper cut of the signature gradient, for the full-bleed CTA panel.
	 * The standard gradient carries white button labels fine (5.16:1), but it
	 * is too light to hold a paragraph of body text once a decorative layer
	 * lightens it further: #f4f7ff over the accent stop plus the light sweep
	 * measures 3.99:1. These stops leave headroom - 5.51:1 under the sweep and
	 * 6.04:1 under the violet mesh field - so the panel can carry both the
	 * effects and its copy.
	 */
	--bcp-grad-cta: linear-gradient(135deg, #2441d8 0%, #6a2bd4 100%);
	--bcp-grad-cyan: linear-gradient(135deg, #16d9f5 0%, #315bff 100%);
	--bcp-grad-deep: linear-gradient(140deg, #080f2a 0%, #101a3d 100%);

	--bcp-font-display: "Cabinet Grotesk", "Satoshi", system-ui, -apple-system, sans-serif;
	--bcp-font-body: "Satoshi", system-ui, -apple-system, sans-serif;

	--bcp-text-xs: 0.8125rem;
	--bcp-text-sm: 0.9375rem;
	--bcp-text-base: 1.0625rem;
	--bcp-text-lg: 1.1875rem;
	--bcp-text-xl: 1.5rem;
	--bcp-text-2xl: 1.875rem;
	--bcp-text-3xl: 2.375rem;
	--bcp-text-4xl: clamp(2.25rem, 4vw, 3.25rem);

	--bcp-lh-display: 1.02;
	--bcp-lh-heading: 1.15;
	--bcp-lh-body: 1.65;
	--bcp-measure: 740px;

	--bcp-xs: 4px;
	--bcp-sm: 8px;
	--bcp-md: 16px;
	--bcp-lg: 32px;
	--bcp-xl: 64px;
	--bcp-xxl: 104px;

	--bcp-r-sm: 10px;
	--bcp-r-md: 16px;
	--bcp-r-lg: 24px;
	--bcp-r-pill: 999px;

	/* Blue-tinted, never black. */
	--bcp-shadow: 0 1px 2px rgba(16, 25, 54, 0.04), 0 10px 30px rgba(49, 91, 255, 0.1);
	--bcp-shadow-lift: 0 2px 4px rgba(16, 25, 54, 0.05), 0 18px 44px rgba(49, 91, 255, 0.16);
	--bcp-shadow-panel: 0 2px 6px rgba(16, 25, 54, 0.05), 0 24px 60px rgba(49, 91, 255, 0.18);

	--bcp-container: 1240px;
	--bcp-gutter: 24px;

	--bcp-t: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Motion system. Interaction stays in the 180-400ms band; decorative
	   background motion runs over tens of seconds so it reads as ambient
	   rather than as something demanding attention. */
	--bcp-t-fast: 180ms;
	--bcp-t-mid: 260ms;
	--bcp-t-slow: 400ms;
	--bcp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--bcp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--bcp-fx-drift: 32s;
	--bcp-fx-sweep: 9s;
	--bcp-fx-rise: 18s;
}

@media (max-width: 767px) {
	:root {
		--bcp-gutter: 16px;
		--bcp-xxl: 64px;
		--bcp-xl: 44px;
	}
}

/* 3. Resets ----------------------------------------------------------------- */

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

:where(.bcp h1, .bcp h2, .bcp h3, .bcp h4, .bcp h5, .bcp h6, .bcp p, .bcp figure, .bcp blockquote, .bcp dl, .bcp dd) {
	margin: 0;
}

:where(.bcp ul, .bcp ol) {
	margin: 0;
	padding: 0;
}

:where(.bcp img, .bcp video) {
	display: block;
	max-width: 100%;
	height: auto;
}

/* SVG excluded above: height:auto collapses an attribute-sized icon to zero. */
:where(.bcp svg) {
	display: block;
}

/* 4. Base typography -------------------------------------------------------- */

body.bcp {
	background: var(--bcp-bg);
	color: var(--bcp-ink);
	font-family: var(--bcp-font-body);
	font-size: var(--bcp-text-base);
	font-weight: 400;
	line-height: var(--bcp-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.bcp h1,
.bcp h2,
.bcp h3,
.bcp h4,
.bcp h5,
.bcp h6 {
	font-family: var(--bcp-font-display);
	font-weight: 800;
	color: var(--bcp-ink);
	letter-spacing: -0.02em;
	line-height: var(--bcp-lh-heading);
	text-wrap: balance;
}

.bcp h1 {
	font-size: var(--bcp-text-4xl);
	line-height: var(--bcp-lh-display);
	letter-spacing: -0.034em;
}

.bcp h2 {
	font-size: var(--bcp-text-2xl);
	letter-spacing: -0.028em;
}

.bcp h3 {
	font-size: var(--bcp-text-xl);
	letter-spacing: -0.022em;
}

.bcp h4 {
	font-size: var(--bcp-text-lg);
}

.bcp a {
	color: var(--bcp-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--bcp-t);
}

.bcp a:hover {
	color: var(--bcp-accent-deep);
}

.bcp [class*="price"],
.bcp .bcp-num,
.bcp table td,
.bcp table th {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* One gradient display phrase per page. */
.bcp-grad-text {
	background: var(--bcp-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* Italic descenders need headroom at display line-heights. */
	padding-bottom: 0.06em;
}

.bcp-eyebrow {
	display: inline-block;
	font-size: var(--bcp-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bcp-accent-deep);
}

/*
 * The eyebrow's default is a light-ground colour. `.bcp-section--deep` and
 * `.bcp-phero` already flip it, but the category head was missed, so the
 * Blog and Compare eyebrows rendered #1f3fd6 on navy at 2.21:1.
 */
.bcp-cathead .bcp-eyebrow {
	color: var(--bcp-cyan);
}

.bcp-lede {
	font-size: var(--bcp-text-lg);
	color: var(--bcp-muted);
	max-width: 58ch;
}

.bcp :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--bcp-accent);
	outline-offset: 2px;
	border-radius: var(--bcp-r-sm);
}

.bcp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* 5. Layout ----------------------------------------------------------------- */

.bcp-wrap {
	width: 100%;
	max-width: var(--bcp-container);
	margin-inline: auto;
	padding-inline: var(--bcp-gutter);
}

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

.bcp-section {
	padding-block: var(--bcp-xxl);
}

.bcp-section--tight {
	padding-block: var(--bcp-xl);
}

/* Deliberately alternating grounds: no page is a field of plain white. */
.bcp-section--surface {
	background: var(--bcp-surface);
}

.bcp-section--tint {
	background: var(--bcp-sunken);
}

.bcp-section--cyan {
	background: var(--bcp-tint-cyan);
}

.bcp-section--violet {
	background: var(--bcp-tint-violet);
}

.bcp-section--deep {
	position: relative;
	background: var(--bcp-grad-deep);
	color: var(--bcp-ink-inverse);
	/* Contains the decorative background layer. */
	overflow: hidden;
}

.bcp-section--deep > .bcp-wrap {
	position: relative;
	z-index: 1;
}

.bcp-section--deep :is(h1, h2, h3, h4) {
	color: var(--bcp-ink-inverse);
}

.bcp-section--deep .bcp-eyebrow {
	color: var(--bcp-cyan);
}

.bcp-section--deep p {
	color: var(--bcp-muted-inverse);
}

/*
 * `.bcp-section-head p` and `.bcp-prose p` both set the light-ground muted
 * colour at the same specificity (0,1,1) and are declared later, so they were
 * winning inside the deep sections and painting #526080 on navy at 2.7:1.
 * Qualify by the section so the inverse colour wins on merit rather than on
 * source order.
 */
.bcp-section--deep .bcp-section-head p,
.bcp-section--deep .bcp-prose p,
.bcp-section--deep .bcp-prose li,
.bcp-section--deep .bcp-prose blockquote {
	color: var(--bcp-muted-inverse);
}

.bcp-section--deep .bcp-prose :is(h2, h3, h4),
.bcp-section--deep .bcp-prose strong {
	color: var(--bcp-ink-inverse);
}

.bcp-rule {
	border: 0;
	border-top: 1px solid var(--bcp-line);
	margin: 0;
}

.bcp-section-head {
	margin-bottom: var(--bcp-lg);
	max-width: 68ch;
}

.bcp-section-head .bcp-eyebrow {
	margin-bottom: var(--bcp-sm);
}

.bcp-section-head p {
	margin-top: var(--bcp-md);
	color: var(--bcp-muted);
}

.bcp-section-head--center {
	margin-inline: auto;
	text-align: center;
}

/* Astra's container is neutralised where our templates own the layout.
   display:block matters: Astra makes it a flex container, leaving <main>
   sized to its content so nested .bcp-wrap has nothing to centre within. */
.bcp-fullwidth #content > .ast-container {
	display: block;
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

.bcp-fullwidth #content > .ast-container > main {
	width: 100%;
}

/* Astra's inline dynamic CSS adds a 60px margin above and below the content
   wrapper:
       .ast-plain-container.ast-no-sidebar #primary { margin: 60px 0 }
   On these views our own templates own all vertical rhythm, so that margin
   showed as an empty band between the header and the hero (and another before
   the footer). Astra's selector is (1,2,0) and lands in an inline <style>, so
   this is qualified with body to win outright rather than relying on order. */
body.bcp.bcp-fullwidth #primary,
body.bcp.bcp-fullwidth #content .site-main {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.bcp-fullwidth #content {
	background: var(--bcp-bg);
}

/* 6. Header: three rows ------------------------------------------------------ */

.bcp-topbar {
	background: var(--bcp-grad);
	color: #fff;
	font-size: var(--bcp-text-xs);
}

.bcp-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bcp-md);
	min-height: 40px;
	padding-block: 7px;
}

.bcp-topbar__msg {
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: 500;
}

.bcp-topbar__links {
	display: flex;
	align-items: center;
	gap: var(--bcp-md);
}

.bcp .bcp-topbar a,
.bcp .bcp-topbar a:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	opacity: 0.94;
}

.bcp .bcp-topbar a:hover {
	color: #fff;
	opacity: 1;
	text-decoration: underline;
}

.bcp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(1.7) blur(12px);
	border-bottom: 1px solid var(--bcp-line);
}

.bcp-header__main {
	display: flex;
	align-items: center;
	gap: var(--bcp-lg);
	min-height: 76px;
}

.bcp a.bcp-brand,
.bcp a.bcp-brand:visited,
.bcp a.bcp-brand:hover {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--bcp-font-display);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.035em;
	color: var(--bcp-ink);
	text-decoration: none;
	white-space: nowrap;
	flex: none;
}

.bcp-brand__mark {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	background: var(--bcp-grad);
	border-radius: 11px;
	box-shadow: 0 6px 16px rgba(49, 91, 255, 0.3);
	color: #fff;
}

.bcp-brand__name em {
	font-style: normal;
	background: var(--bcp-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Prominent search in the main row. */
.bcp-hsearch {
	flex: 1 1 auto;
	max-width: 520px;
}

.bcp-hsearch__form {
	position: relative;
	display: flex;
	align-items: center;
}

.bcp-hsearch__icon {
	position: absolute;
	left: 15px;
	color: var(--bcp-muted);
	pointer-events: none;
}

.bcp .bcp-hsearch__input {
	width: 100%;
	padding: 12px 16px 12px 46px;
	font-family: inherit;
	font-size: var(--bcp-text-sm);
	color: var(--bcp-ink);
	background: var(--bcp-sunken);
	border: 1px solid transparent;
	border-radius: var(--bcp-r-pill);
	transition: background-color var(--bcp-t), border-color var(--bcp-t);
}

.bcp .bcp-hsearch__input::placeholder {
	color: var(--bcp-muted);
}

.bcp .bcp-hsearch__input:focus {
	background: var(--bcp-surface);
	border-color: var(--bcp-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--bcp-accent-soft);
}

.bcp-header__actions {
	display: flex;
	align-items: center;
	gap: var(--bcp-sm);
	margin-inline-start: auto;
	flex: none;
}

.bcp-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-pill);
	background: var(--bcp-surface);
	color: var(--bcp-ink);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--bcp-t), color var(--bcp-t), box-shadow var(--bcp-t);
}

/* Astra repaints any <button> on hover/focus with its accent background via a
   (0,1,1) selector, which beat the (0,1,0) component background above and left
   accent-blue text on a dark blue fill. Pin background and colour together. */
.bcp a.bcp-iconbtn,
.bcp a.bcp-iconbtn:visited,
.bcp button.bcp-iconbtn,
.bcp button.bcp-iconbtn:focus,
.bcp button.bcp-iconbtn:active {
	color: var(--bcp-ink);
	background-color: var(--bcp-surface);
	background-image: none;
}

.bcp a.bcp-iconbtn:hover,
.bcp button.bcp-iconbtn:hover,
.bcp button.bcp-iconbtn:focus-visible {
	color: var(--bcp-accent);
	background-color: var(--bcp-surface);
	background-image: none;
	border-color: var(--bcp-accent);
	box-shadow: 0 0 0 3px var(--bcp-accent-soft);
}

.bcp-cart__count {
	min-width: 22px;
	padding-inline: 6px;
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 22px;
	text-align: center;
	color: #fff;
	background: var(--bcp-grad);
	border-radius: var(--bcp-r-pill);
	font-variant-numeric: tabular-nums;
}

.bcp-cart__count.is-empty {
	color: var(--bcp-muted);
	background: var(--bcp-sunken);
}

/* Navigation row */
.bcp-navbar {
	background: var(--bcp-surface);
	border-bottom: 1px solid var(--bcp-line);
}

.bcp-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bcp-md);
	min-height: 54px;
}

.bcp-nav__list {
	display: flex;
	align-items: center;
	gap: var(--bcp-lg);
	list-style: none;
}

.bcp-nav__list > li {
	position: relative;
}

.bcp .bcp-nav__list a,
.bcp .bcp-nav__list a:visited {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-block: 15px;
	font-size: var(--bcp-text-sm);
	font-weight: 600;
	color: var(--bcp-ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.bcp .bcp-nav__list a:hover,
.bcp .bcp-nav__list .current-menu-item > a,
.bcp .bcp-nav__list .current_page_item > a {
	color: var(--bcp-accent);
	border-bottom-color: var(--bcp-accent);
}

/* Products mega dropdown */
.bcp-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: -16px;
	z-index: 120;
	display: grid;
	grid-template-columns: repeat(2, minmax(220px, 1fr));
	gap: 2px;
	padding: 10px;
	list-style: none;
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	box-shadow: var(--bcp-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--bcp-t), transform var(--bcp-t), visibility var(--bcp-t);
}

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

.bcp .bcp-nav__list .sub-menu a {
	display: block;
	padding: 10px 13px;
	font-weight: 500;
	border-bottom: 0;
	border-radius: var(--bcp-r-sm);
}

.bcp .bcp-nav__list .sub-menu a:hover {
	background: var(--bcp-accent-soft);
	color: var(--bcp-accent-deep);
}

.bcp-navbar__aside {
	display: flex;
	align-items: center;
	gap: var(--bcp-md);
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted);
}

.bcp-burger {
	display: none;
}

/* The hidden attribute means "closed drawer", which only exists below 980px. */
@media (min-width: 980px) {
	.bcp-nav[hidden] {
		display: block;
	}
}

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

	.bcp-hsearch {
		order: 3;
		flex-basis: 100%;
		max-width: none;
		margin-bottom: var(--bcp-md);
	}

	.bcp-header__main {
		flex-wrap: wrap;
		gap: var(--bcp-md);
		padding-top: var(--bcp-md);
	}

	.bcp-navbar__aside {
		display: none;
	}

	/* The nav row carries nothing below 980px: the links live in the drawer and
	   the burger sits in the main row. Collapse it so it leaves no empty band,
	   while staying the drawer's anchor. */
	.bcp-navbar {
		border-bottom: 0;
	}

	.bcp-navbar__inner {
		min-height: 0;
		padding-block: 0;
	}

	.bcp-nav {
		position: absolute;
		left: 0;
		right: 0;
		padding: var(--bcp-sm) var(--bcp-gutter) var(--bcp-lg);
		background: var(--bcp-surface);
		border-bottom: 1px solid var(--bcp-line);
		box-shadow: var(--bcp-shadow-lift);
		max-height: 70vh;
		overflow-y: auto;
		z-index: 110;
	}

	.bcp-nav[hidden] {
		display: none;
	}

	.bcp-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.bcp-nav__list > li {
		border-bottom: 1px solid var(--bcp-line);
	}

	.bcp .bcp-nav__list a {
		padding: 14px 0;
		font-size: var(--bcp-text-base);
		border-bottom: 0;
	}

	/* Submenus stay open in the drawer: there is no hover on touch. */
	.bcp-nav__list .sub-menu {
		position: static;
		display: block;
		opacity: 1;
		visibility: visible;
		transform: none;
		margin: 0 0 var(--bcp-sm);
		padding: 0 0 0 var(--bcp-md);
		border: 0;
		box-shadow: none;
		background: none;
	}

	.bcp .bcp-nav__list .sub-menu a {
		padding: 9px 0;
		font-size: var(--bcp-text-sm);
		color: var(--bcp-muted);
	}
}

/* 6b. Provider ticker -------------------------------------------------------- */

/*
 * Seamless CSS marquee. The track holds the provider list twice, so animating
 * it to -50% of its own width lands exactly where the first copy started and
 * the loop has no visible jump. No JavaScript and no cloning at runtime.
 *
 * Only the first copy is reachable: the duplicate is aria-hidden and its links
 * are taken out of the tab order, so a keyboard user meets 12 links, not 24.
 */
.bcp-ticker {
	position: relative;
	background: var(--bcp-deep);
	border-bottom: 1px solid var(--bcp-line-inverse);
	overflow: hidden;
}

.bcp-ticker__viewport {
	overflow: hidden;
	/* Items fade in and out at the ends instead of popping at a hard edge. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.bcp-ticker__track {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
	animation: bcp-ticker-run 52s linear infinite;
}

@keyframes bcp-ticker-run {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Hovering or tabbing into the strip stops it, so an item can be read or
   clicked without chasing it. */
.bcp-ticker:hover .bcp-ticker__track,
.bcp-ticker:focus-within .bcp-ticker__track {
	animation-play-state: paused;
}

.bcp-ticker__item {
	display: flex;
	align-items: center;
}

.bcp .bcp-ticker__item a,
.bcp .bcp-ticker__item a:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	font-size: var(--bcp-text-xs);
	font-weight: 600;
	line-height: 1.2;
	color: var(--bcp-ink-inverse);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--bcp-r-pill);
}

.bcp .bcp-ticker__item a:hover,
.bcp .bcp-ticker__item a:focus-visible {
	color: #fff;
	background: rgba(49, 91, 255, 0.22);
}

.bcp-ticker__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--bcp-cyan);
	box-shadow: 0 0 6px rgba(22, 217, 245, 0.8);
	flex: none;
}

.bcp-ticker__price {
	font-weight: 700;
	color: var(--bcp-cyan);
}

/* WooCommerce wraps prices in its own spans; keep them on the accent colour. */
.bcp-ticker__price :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi) {
	color: inherit;
	font-weight: inherit;
}

.bcp-ticker__sep {
	width: 1px;
	height: 14px;
	background: var(--bcp-line-inverse);
	flex: none;
}

@media (max-width: 767px) {
	.bcp .bcp-ticker__item a {
		padding: 7px 13px;
	}

	.bcp-ticker__track {
		animation-duration: 38s;
	}
}

/*
 * Reduced motion: the strip stops moving entirely and becomes a normal
 * horizontally scrollable list, so every provider is still reachable.
 */
@media (prefers-reduced-motion: reduce) {
	.bcp-ticker__track {
		animation: none;
	}

	.bcp-ticker__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* 7. Buttons ----------------------------------------------------------------- */

.bcp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bcp-sm);
	padding: 14px 26px;
	font-family: var(--bcp-font-body);
	font-size: var(--bcp-text-sm);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--bcp-r-pill);
	cursor: pointer;
	transition: transform var(--bcp-t), box-shadow var(--bcp-t), background-color var(--bcp-t),
		border-color var(--bcp-t), color var(--bcp-t), filter var(--bcp-t);
}

.bcp a.bcp-btn--primary,
.bcp button.bcp-btn--primary,
.bcp a.bcp-btn--primary:visited {
	color: var(--bcp-accent-ink);
	background: var(--bcp-grad);
	box-shadow: 0 8px 22px rgba(49, 91, 255, 0.28);
}

.bcp a.bcp-btn--primary:hover,
.bcp button.bcp-btn--primary:hover {
	color: var(--bcp-accent-ink);
	filter: saturate(1.1) brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 12px 30px rgba(49, 91, 255, 0.34);
}

.bcp a.bcp-btn--secondary,
.bcp button.bcp-btn--secondary,
.bcp a.bcp-btn--secondary:visited {
	color: var(--bcp-ink);
	background: var(--bcp-surface);
	border-color: var(--bcp-line);
}

.bcp a.bcp-btn--secondary:hover,
.bcp button.bcp-btn--secondary:hover {
	color: var(--bcp-accent-deep);
	border-color: var(--bcp-accent);
	box-shadow: 0 0 0 3px var(--bcp-accent-soft);
}

/* On deep grounds. */
.bcp a.bcp-btn--ghost,
.bcp a.bcp-btn--ghost:visited {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.28);
}

.bcp a.bcp-btn--ghost:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.5);
}

.bcp-btn:active {
	transform: translateY(1px);
}

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

.bcp-btn--lg {
	padding: 17px 32px;
	font-size: var(--bcp-text-base);
}

.bcp-btn[aria-disabled="true"],
.bcp-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.bcp-icon {
	flex: none;
	width: 18px;
	height: 18px;
}

/* 8. Cards -------------------------------------------------------------------- */

.bcp-card {
	display: flex;
	flex-direction: column;
	gap: var(--bcp-md);
	padding: var(--bcp-lg);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	box-shadow: var(--bcp-shadow);
	transition: border-color var(--bcp-t), box-shadow var(--bcp-t), transform var(--bcp-t);
}

.bcp a.bcp-card,
.bcp a.bcp-card:visited {
	color: inherit;
	text-decoration: none;
}

.bcp a.bcp-card:hover {
	color: inherit;
	border-color: rgba(49, 91, 255, 0.45);
	box-shadow: var(--bcp-shadow-lift);
	transform: translateY(-3px);
}

/* Gradient icon tile heading a feature card. */
.bcp-tile {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	color: #fff;
	background: var(--bcp-grad);
	border-radius: 13px;
	box-shadow: 0 8px 20px rgba(49, 91, 255, 0.26);
}

.bcp-tile--cyan {
	background: var(--bcp-grad-cyan);
	box-shadow: 0 8px 20px rgba(22, 217, 245, 0.28);
}

.bcp-tile .bcp-icon {
	width: 22px;
	height: 22px;
}

.bcp-grid {
	display: grid;
	gap: var(--bcp-md);
}

.bcp-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bcp-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bcp-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.bcp-grid--3,
	.bcp-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Declared collapse. */
@media (max-width: 767px) {
	.bcp-grid--2,
	.bcp-grid--3,
	.bcp-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* 9. Hero ---------------------------------------------------------------------- */

.bcp-hero {
	position: relative;
	background: var(--bcp-grad-deep);
	color: var(--bcp-ink-inverse);
	overflow: hidden;
}

/* Two on-palette aurora fields, not a rainbow mesh. */
.bcp-hero::before,
.bcp-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.bcp-hero::before {
	width: 760px;
	height: 760px;
	top: -320px;
	right: -200px;
	background: radial-gradient(circle, rgba(133, 59, 250, 0.5), transparent 62%);
}

.bcp-hero::after {
	width: 680px;
	height: 680px;
	bottom: -380px;
	left: -220px;
	background: radial-gradient(circle, rgba(22, 217, 245, 0.33), transparent 64%);
}

.bcp-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: var(--bcp-xl);
	padding-block: clamp(var(--bcp-xl), 7vw, 108px);
}

.bcp .bcp-hero__title {
	color: #fff;
	font-size: clamp(2.125rem, 3.6vw, 3.125rem);
}

.bcp-hero__title .bcp-grad-text {
	background: linear-gradient(135deg, var(--bcp-sky-tint) 0%, var(--bcp-violet-tint) 50%, var(--bcp-cyan-tint) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bcp-hero__sub {
	margin-top: var(--bcp-md);
	max-width: 52ch;
	font-size: var(--bcp-text-lg);
	color: var(--bcp-muted-inverse);
}

.bcp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bcp-sm);
	margin-top: var(--bcp-lg);
}

.bcp-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bcp-lg);
	margin-top: var(--bcp-lg);
	padding-top: var(--bcp-lg);
	border-top: 1px solid var(--bcp-line-inverse);
}

.bcp-hero__stat strong {
	display: block;
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-2xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.bcp-hero__stat span {
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted-inverse);
}

/* wc_price() nests .amount/<bdi>, which bring their own type. Target only
   WooCommerce's own classes: a blanket `span` would also catch sibling labels
   such as .bcp-panel__from. */
.bcp-hero__stat strong :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi),
.bcp-summary__val :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi),
.bcp-phero__fact strong :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi),
.bcp-panel__price :is(.price, .woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi),
.bcp-provider__price strong :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi) {
	font: inherit;
	color: inherit;
	background: none;
	-webkit-text-fill-color: currentColor;
}

/* The provider card's price keeps its gradient fill. */
.bcp-provider__price strong :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi) {
	-webkit-text-fill-color: transparent;
}

/* Glass price summary */
.bcp-summary {
	padding: var(--bcp-lg);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--bcp-r-lg);
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px rgba(4, 7, 24, 0.45);
}

.bcp-summary__title {
	font-size: var(--bcp-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bcp-cyan);
	margin-bottom: var(--bcp-md);
}

.bcp-summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bcp-md);
	padding-block: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bcp-summary__row:last-of-type {
	border-bottom: 0;
}

.bcp-summary__key {
	font-size: var(--bcp-text-sm);
	color: var(--bcp-muted-inverse);
}

.bcp-summary__val {
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.025em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.bcp-summary__note {
	margin-top: var(--bcp-md);
	padding-top: var(--bcp-md);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted-inverse);
}

@media (max-width: 979px) {
	.bcp-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--bcp-lg);
	}
}

/* 10. Provider cards ------------------------------------------------------------ */

.bcp-provider__head {
	display: flex;
	align-items: flex-start;
	gap: var(--bcp-md);
}

.bcp-mark {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: none;
	font-family: var(--bcp-font-display);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	background: var(--bcp-grad);
	border-radius: 13px;
	box-shadow: 0 8px 18px rgba(49, 91, 255, 0.24);
}

.bcp-provider__head .bcp-eyebrow {
	display: block;
	margin-bottom: 2px;
	letter-spacing: 0.06em;
}

.bcp .bcp-provider__title {
	font-size: var(--bcp-text-lg);
	letter-spacing: -0.022em;
}

.bcp-provider__blurb {
	font-size: var(--bcp-text-sm);
	color: var(--bcp-muted);
	margin-top: auto;
}

.bcp-provider__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bcp-md);
	padding-top: var(--bcp-md);
	border-top: 1px solid var(--bcp-line);
}

.bcp-provider__price .bcp-eyebrow {
	display: block;
	margin-bottom: 1px;
	font-size: 0.6875rem;
	color: var(--bcp-muted);
	letter-spacing: 0.07em;
}

.bcp-provider__price strong {
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-xl);
	font-weight: 800;
	letter-spacing: -0.025em;
	background: var(--bcp-grad-cyan);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-variant-numeric: tabular-nums;
}

.bcp-chip {
	display: inline-block;
	padding: 5px 11px;
	font-size: var(--bcp-text-xs);
	font-weight: 600;
	color: var(--bcp-accent-deep);
	background: var(--bcp-accent-soft);
	border-radius: var(--bcp-r-pill);
	white-space: nowrap;
}

/*
 * A chip that is a link picks up the global link colour, which is (0,1,1) and
 * beats `.bcp-chip` at (0,1,0): #315bff on #e4eaff measures 4.30:1. Qualifying
 * by the element restores the deeper tone, which measures 6.39:1.
 */
.bcp a.bcp-chip,
.bcp a.bcp-chip:visited {
	color: var(--bcp-accent-deep);
}

/* 11. Steps (How it works) ------------------------------------------------------ */

.bcp-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bcp-md);
	counter-reset: bcp-step;
}

.bcp-step {
	position: relative;
	padding: var(--bcp-lg);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	box-shadow: var(--bcp-shadow);
}

.bcp-step__num {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--bcp-md);
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-lg);
	font-weight: 800;
	color: #fff;
	background: var(--bcp-grad);
	border-radius: 12px;
	box-shadow: 0 8px 18px rgba(49, 91, 255, 0.26);
	font-variant-numeric: tabular-nums;
}

.bcp .bcp-step h3 {
	font-size: var(--bcp-text-lg);
	letter-spacing: -0.02em;
}

.bcp-step p {
	margin-top: var(--bcp-sm);
	font-size: var(--bcp-text-sm);
	color: var(--bcp-muted);
}

@media (max-width: 1023px) {
	.bcp-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.bcp-steps {
		grid-template-columns: 1fr;
	}
}

/* 12. FAQ accordion -------------------------------------------------------------- */

.bcp-faq {
	display: grid;
	gap: var(--bcp-sm);
	max-width: 900px;
}

.bcp-faq__item {
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	overflow: hidden;
	transition: border-color var(--bcp-t), box-shadow var(--bcp-t);
}

.bcp-faq__item[open] {
	border-color: rgba(49, 91, 255, 0.4);
	box-shadow: var(--bcp-shadow);
}

.bcp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bcp-md);
	padding: var(--bcp-md) var(--bcp-lg);
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-base);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--bcp-ink);
	cursor: pointer;
	list-style: none;
}

.bcp-faq__q::-webkit-details-marker {
	display: none;
}

.bcp-faq__q::after {
	content: "";
	width: 11px;
	height: 11px;
	flex: none;
	border-right: 2px solid var(--bcp-accent);
	border-bottom: 2px solid var(--bcp-accent);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--bcp-t);
}

.bcp-faq__item[open] .bcp-faq__q::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.bcp-faq__a {
	padding: 0 var(--bcp-lg) var(--bcp-md);
	color: var(--bcp-muted);
	font-size: var(--bcp-text-sm);
}

.bcp-faq__a p + p {
	margin-top: var(--bcp-sm);
}

/* 13. CTA band --------------------------------------------------------------------- */

.bcp-cta {
	position: relative;
	padding: clamp(var(--bcp-xl), 6vw, 88px) var(--bcp-lg);
	background: var(--bcp-grad-cta);
	border-radius: var(--bcp-r-lg);
	color: #fff;
	text-align: center;
	overflow: hidden;
	box-shadow: 0 28px 70px rgba(49, 91, 255, 0.3);
}

.bcp-cta::after {
	content: "";
	position: absolute;
	width: 620px;
	height: 620px;
	top: -300px;
	right: -160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(103, 232, 249, 0.38) /* --bcp-cyan-tint */, transparent 62%);
	pointer-events: none;
}

.bcp-cta > * {
	position: relative;
	z-index: 1;
}

.bcp .bcp-cta h2 {
	color: #fff;
	font-size: var(--bcp-text-3xl);
	max-width: 22ch;
	margin-inline: auto;
}

.bcp-cta p {
	margin: var(--bcp-md) auto 0;
	max-width: 58ch;
	/* Was rgba(255,255,255,.9), which composites to #eaefff over the accent
	   stop and measures 4.49:1 - a hundredth short of AA. Opaque, so the
	   value is exactly what gets measured. */
	color: var(--bcp-ink-inverse);
}

.bcp-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bcp-sm);
	margin-top: var(--bcp-lg);
}

.bcp .bcp-cta a.bcp-btn--primary {
	color: var(--bcp-accent-deep);
	background: #fff;
	box-shadow: 0 10px 26px rgba(4, 7, 24, 0.22);
}

.bcp .bcp-cta a.bcp-btn--primary:hover {
	color: var(--bcp-accent-deep);
	filter: none;
	background: #fff;
}

/* 13b. Shared content components (used on home and product pages) -------------- */

.bcp-feature h3 {
	font-size: var(--bcp-text-lg);
	letter-spacing: -0.02em;
}

.bcp-feature p {
	font-size: var(--bcp-text-sm);
	color: var(--bcp-muted);
}

.bcp-feature p + p {
	margin-top: var(--bcp-sm);
}

/* On a deep ground the cards invert rather than punching white holes. */
.bcp-section--deep .bcp-card {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--bcp-line-inverse);
	box-shadow: none;
}

.bcp-section--deep .bcp-card p {
	color: var(--bcp-muted-inverse);
}

/* Feature rows: a two-up alternative to the card grid. */
.bcp-rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bcp-lg) var(--bcp-xl);
}

.bcp-row {
	display: flex;
	align-items: flex-start;
	gap: var(--bcp-md);
}

.bcp-row__aside {
	flex: none;
}

.bcp-row__body h3 {
	font-size: var(--bcp-text-lg);
	letter-spacing: -0.02em;
	margin-bottom: var(--bcp-sm);
}

.bcp-row__body p {
	font-size: var(--bcp-text-sm);
	color: var(--bcp-muted);
}

.bcp-row__body p + p {
	margin-top: var(--bcp-sm);
}

@media (max-width: 767px) {
	.bcp-rows {
		grid-template-columns: 1fr;
	}
}

/* Long-form prose at a measured width. */
.bcp-prose p {
	color: var(--bcp-muted);
}

.bcp-prose p + p {
	margin-top: var(--bcp-md);
}

.bcp-prose h3 {
	margin-top: var(--bcp-lg);
	margin-bottom: var(--bcp-sm);
	font-size: var(--bcp-text-lg);
}

.bcp-psec__lead {
	margin-bottom: var(--bcp-lg);
}

/* Data tables. */
.bcp-tablewrap {
	overflow-x: auto;
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	box-shadow: var(--bcp-shadow);
}

.bcp .bcp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bcp-text-sm);
}

.bcp .bcp-table th {
	padding: 14px var(--bcp-md);
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-xs);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	color: var(--bcp-muted);
	background: var(--bcp-sunken);
	border-bottom: 1px solid var(--bcp-line);
	white-space: nowrap;
}

.bcp .bcp-table td {
	padding: 14px var(--bcp-md);
	border-top: 1px solid var(--bcp-line);
	vertical-align: middle;
}

.bcp .bcp-table tbody tr:first-child td {
	border-top: 0;
}

.bcp .bcp-table tbody tr:hover {
	background: var(--bcp-accent-soft);
}

.bcp .bcp-table .is-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bcp .bcp-table td a {
	font-weight: 600;
	text-decoration: none;
}

.bcp .bcp-table td a:hover {
	text-decoration: underline;
}

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

.bcp-footer {
	position: relative;
	background: var(--bcp-grad-deep);
	color: var(--bcp-muted-inverse);
	padding-block: var(--bcp-xl) var(--bcp-lg);
	/* Contains the decorative background layer. */
	overflow: hidden;
}

.bcp-footer > .bcp-wrap {
	position: relative;
	z-index: 1;
}

.bcp-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: var(--bcp-lg);
	padding-bottom: var(--bcp-lg);
	border-bottom: 1px solid var(--bcp-line-inverse);
}

.bcp .bcp-footer a.bcp-brand,
.bcp .bcp-footer a.bcp-brand:visited,
.bcp .bcp-footer a.bcp-brand:hover {
	color: #fff;
}

.bcp-footer__about p {
	margin-top: var(--bcp-md);
	max-width: 42ch;
	font-size: var(--bcp-text-sm);
	color: var(--bcp-muted-inverse);
}

.bcp .bcp-footer__heading {
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-sm);
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #fff;
	margin-bottom: var(--bcp-md);
}

.bcp-footer__list {
	list-style: none;
	display: grid;
	gap: 9px;
}

.bcp .bcp-footer__list a,
.bcp .bcp-footer__list a:visited {
	font-size: var(--bcp-text-sm);
	color: var(--bcp-muted-inverse);
	text-decoration: none;
}

.bcp .bcp-footer__list a:hover {
	color: var(--bcp-cyan);
}

.bcp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bcp-md);
	padding-top: var(--bcp-lg);
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted-inverse);
}

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

@media (max-width: 599px) {
	.bcp-footer__top {
		grid-template-columns: 1fr;
	}
}

/* 15. Breadcrumbs --------------------------------------------------------------------- */

.bcp-breadcrumbs {
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted);
	padding-block: var(--bcp-md);
}

.bcp .bcp-breadcrumbs a,
.bcp .bcp-breadcrumbs a:visited {
	color: var(--bcp-muted);
	text-decoration: none;
}

.bcp .bcp-breadcrumbs a:hover {
	color: var(--bcp-accent);
}

/* 16. Reduced motion ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bcp *,
	.bcp *::before,
	.bcp *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.bcp a.bcp-card:hover,
	.bcp a.bcp-btn--primary:hover,
	.bcp-btn:active {
		transform: none;
	}
}

/* ==========================================================================
   17. Archive chrome, shared by the catalog, blog and compare archives
   Previously lived in bcp-catalog.css, which only loads on shop views, so the
   blog and compare heroes rendered unstyled.
   ========================================================================== */

/* 1. Compact header --------------------------------------------------------
   The dead space above the title came from Astra's #primary margin and is now
   neutralised for every .bcp-fullwidth view in bcp.css, so it is handled once
   rather than per template.
   -------------------------------------------------------------------------- */

.bcp-cathead {
	position: relative;
	padding-bottom: var(--bcp-lg);
	background: var(--bcp-grad-deep);
	color: var(--bcp-ink-inverse);
	overflow: hidden;
}

.bcp-cathead::before {
	content: "";
	position: absolute;
	width: 640px;
	height: 640px;
	top: -340px;
	right: -140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(133, 59, 250, 0.42), transparent 64%);
	pointer-events: none;
}

.bcp-cathead > .bcp-wrap {
	position: relative;
	z-index: 1;
}

.bcp-cathead .bcp-breadcrumbs,
.bcp-cathead .bcp-breadcrumbs a {
	color: var(--bcp-muted-inverse);
}

.bcp .bcp-cathead .bcp-breadcrumbs a:hover {
	color: var(--bcp-cyan);
}

.bcp-cathead__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bcp-lg);
	padding-bottom: var(--bcp-lg);
}

.bcp .bcp-cathead__title {
	color: #fff;
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
	margin-bottom: var(--bcp-sm);
}

.bcp-cathead__sub {
	max-width: 62ch;
	color: var(--bcp-muted-inverse);
	font-size: var(--bcp-text-base);
}

.bcp-cathead__stats {
	display: flex;
	gap: var(--bcp-lg);
	flex: none;
}

.bcp-cathead__stat strong {
	display: block;
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-2xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.bcp-cathead__stat strong :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi) {
	font: inherit;
	color: inherit;
}

.bcp-cathead__stat span {
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted-inverse);
}

/* 2. Search and sort -------------------------------------------------------- */

.bcp-cathead__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bcp-sm);
	padding-top: var(--bcp-md);
	border-top: 1px solid var(--bcp-line-inverse);
}

.bcp-catsearch {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--bcp-sm);
	flex: 1 1 380px;
}

.bcp-catsearch__icon {
	position: absolute;
	left: 16px;
	color: var(--bcp-muted-inverse);
	pointer-events: none;
}

.bcp .bcp-catsearch__input {
	flex: 1 1 auto;
	width: 100%;
	padding: 13px 16px 13px 46px;
	font-family: inherit;
	font-size: var(--bcp-text-sm);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--bcp-r-pill);
}

.bcp .bcp-catsearch__input::placeholder {
	color: var(--bcp-muted-inverse);
}

.bcp .bcp-catsearch__input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--bcp-cyan);
	box-shadow: 0 0 0 3px rgba(22, 217, 245, 0.25);
}

.bcp-catsearch__go {
	flex: none;
}

.bcp-catsort {
	flex: none;
}

.bcp-catsort .woocommerce-ordering {
	margin: 0;
}

/* WooCommerce ordering select, restyled for the dark header.
   Astra pins bare selects to a 40px height, which is shorter than this
   padding plus the label needs, and `overflow: clip` then cuts the text. */
.bcp .bcp-catsort select,
.bcp .bcp-catsort .orderby {
	height: auto;
	min-height: 48px;
	line-height: 1.2;
	padding: 13px 38px 13px 16px;
	font-family: inherit;
	font-size: var(--bcp-text-sm);
	font-weight: 600;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
	background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
		linear-gradient(135deg, #fff 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--bcp-r-pill);
	appearance: none;
	cursor: pointer;
}

.bcp .bcp-catsort select option {
	color: var(--bcp-ink);
	background: #fff;
}

/* 3. Provider filters -------------------------------------------------------- */

.bcp-catfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding-top: var(--bcp-md);
}

.bcp a.bcp-chip--filter,
.bcp a.bcp-chip--filter:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	font-size: var(--bcp-text-xs);
	font-weight: 600;
	color: var(--bcp-ink-inverse);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--bcp-r-pill);
	text-decoration: none;
	transition: background-color var(--bcp-t), border-color var(--bcp-t), color var(--bcp-t);
}

.bcp a.bcp-chip--filter:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.4);
}

.bcp a.bcp-chip--filter.is-active {
	color: #fff;
	background: var(--bcp-grad);
	border-color: transparent;
	box-shadow: 0 6px 18px rgba(49, 91, 255, 0.34);
}

.bcp-chip__count {
	font-variant-numeric: tabular-nums;
	opacity: 0.72;
}


/* 6. Empty state ---------------------------------------------------------------- */

.bcp-empty {
	padding: var(--bcp-xl) var(--bcp-lg);
	text-align: center;
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
}

.bcp-empty p {
	margin: var(--bcp-sm) 0 var(--bcp-md);
	color: var(--bcp-muted);
}

/* 7. Pagination ------------------------------------------------------------------ */

.bcp .woocommerce-pagination {
	margin-top: var(--bcp-lg);
}

.bcp .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	border: 0;
	padding: 0;
}

.bcp .woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
}

.bcp .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 12px;
	font-size: var(--bcp-text-sm);
	font-weight: 700;
	color: var(--bcp-ink);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-pill);
	text-decoration: none;
}

.bcp .woocommerce-pagination .page-numbers.current {
	color: #fff;
	background: var(--bcp-grad);
	border-color: transparent;
}

@media (max-width: 767px) {
	.bcp-cathead__top {
		align-items: flex-start;
	}

	.bcp-cathead__stats {
		gap: var(--bcp-md);
	}

	.bcp-catsearch {
		flex: 1 1 100%;
	}

	.bcp-catsort,
	.bcp-catsort .woocommerce-ordering,
	.bcp .bcp-catsort select {
		width: 100%;
	}
}

/* 18. Product / page hero -------------------------------------------------- */

/*
 * Moved here from bcp-product.css. `.bcp-phero` is used by four templates -
 * the product page, the contact page, single posts and single comparisons -
 * but the commerce sheet only loads on WooCommerce views, so on the other
 * three the hero had no background and no inverse text colour at all: it
 * rendered as dark ink on white. It belongs in the global sheet.
 */

.bcp-phero {
	position: relative;
	background: var(--bcp-grad-deep);
	color: var(--bcp-ink-inverse);
	overflow: hidden;
}

.bcp-phero::before {
	content: "";
	position: absolute;
	width: 720px;
	height: 720px;
	top: -340px;
	right: -180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(133, 59, 250, 0.45), transparent 62%);
	pointer-events: none;
}

.bcp-phero::after {
	content: "";
	position: absolute;
	width: 560px;
	height: 560px;
	bottom: -320px;
	left: -180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(22, 217, 245, 0.3), transparent 64%);
	pointer-events: none;
}

.bcp-phero > .bcp-wrap {
	position: relative;
	z-index: 1;
}

.bcp-phero .bcp-breadcrumbs,
.bcp-phero .bcp-breadcrumbs a {
	color: var(--bcp-muted-inverse);
}

.bcp .bcp-phero .bcp-breadcrumbs a:hover {
	color: var(--bcp-cyan);
}

.bcp-phero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: center;
	gap: var(--bcp-xl);
	padding-bottom: var(--bcp-xl);
	padding-top: var(--bcp-md);
}

.bcp-phero__provider {
	display: flex;
	align-items: center;
	gap: var(--bcp-sm);
	margin-bottom: var(--bcp-md);
}

/*
 * Scoped to `.bcp-phero`, not just `.bcp-phero__provider`: the contact page's
 * eyebrow sits directly in `.bcp-phero__copy`, so it kept the light-ground
 * default and rendered #1f3fd6 on navy at 2.21:1.
 */
.bcp-phero .bcp-eyebrow {
	color: var(--bcp-cyan);
}

.bcp .bcp-phero__title {
	color: #fff;
	font-size: clamp(2rem, 3.4vw, 2.875rem);
}

.bcp-phero__sub {
	margin-top: var(--bcp-md);
	max-width: 56ch;
	font-size: var(--bcp-text-lg);
	color: var(--bcp-muted-inverse);
}

.bcp-phero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bcp-lg);
	margin-top: var(--bcp-lg);
	padding-top: var(--bcp-lg);
	border-top: 1px solid var(--bcp-line-inverse);
}

.bcp-phero__fact strong {
	display: block;
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-2xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.bcp-phero__fact span {
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted-inverse);
}

/* Provider graphic: a real image when one exists, otherwise a composed
   on-palette card. Never a stock photo standing in for a product shot. */
.bcp-phero__art {
	margin: 0;
}

.bcp-phero__img {
	width: 100%;
	border-radius: var(--bcp-r-lg);
	box-shadow: 0 24px 60px rgba(4, 7, 24, 0.45);
}

.bcp-artcard {
	display: grid;
	place-items: center;
	gap: var(--bcp-md);
	aspect-ratio: 4 / 3;
	padding: var(--bcp-lg);
	background: linear-gradient(140deg, rgba(49, 91, 255, 0.28), rgba(133, 59, 250, 0.28));
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--bcp-r-lg);
	backdrop-filter: blur(10px);
	box-shadow: 0 24px 60px rgba(4, 7, 24, 0.4);
}

.bcp-artcard__mark {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	font-family: var(--bcp-font-display);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #fff;
	background: var(--bcp-grad);
	border-radius: 22px;
	box-shadow: 0 14px 34px rgba(49, 91, 255, 0.4);
}

.bcp-artcard__name {
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-xl);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #fff;
	text-align: center;
}

@media (max-width: 979px) {
	.bcp-phero__grid {
		grid-template-columns: 1fr;
		gap: var(--bcp-lg);
	}

	/* Declared collapse: the graphic follows the copy. */
	.bcp-phero__art {
		order: 2;
	}
}