/* =============================================================================
   CrowdHandler marketing site — canonical stylesheet.
   Extracted from refs/crowdhandler-html.html. Hand-maintained — do NOT regenerate
   via `npm run build` (webpack would overwrite with the legacy Bulma output).
   ============================================================================= */

/* ─────────────────────────────────────────────
   TOKENS
───────────────────────────────────────────── */
:root {
	--bg: #ffffff;
	--surface: #eef1f7;
	--border: #e2e2ec;
	--accent: #426dad;
	--text: #0f0f1a;
	--muted: #6b6b8a;

	--font-body: 'Avenir Next', 'Avenir', 'Nunito Sans', sans-serif;
	--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 99px;

	--shadow-card: 0 8px 24px rgba(0, 0, 0, 0.08);
	--shadow-phone: 0 40px 100px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.06),
		inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	--shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.10);

	--section-padding: 96px 0;
	--section-padding-sm: 80px 0;
}

/* ─────────────────────────────────────────────
   RESET
───────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	background: var(--bg);
	color: var(--text);
	line-height: 1.5;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

/* ─────────────────────────────────────────────
   LAYOUT UTILITIES
───────────────────────────────────────────── */
.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

.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;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY UTILITIES
───────────────────────────────────────────── */
.mono {
	font-family: var(--font-mono);
}

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

.text-accent {
	color: var(--accent);
}

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

.text-upper {
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.text-sm {
	font-size: 12px;
}

.text-xs {
	font-size: 11px;
}

/* ─────────────────────────────────────────────
   SECTION UTILITIES
───────────────────────────────────────────── */
.section {
	padding: var(--section-padding);
}

.section--sm {
	padding: var(--section-padding-sm);
}

/* Tighter top padding — for a .section that directly follows a .page-header,
   whose own 32px bottom padding already provides the header-to-content gap. */
.section--tight-top {
	padding-top: 24px;
}

.section--surface {
	background: var(--surface);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.section--surface-top {
	background: var(--surface);
	border-top: 1px solid var(--border);
}

.section--bordered {
	border-top: 1px solid var(--border);
}

.section-header {
	margin-bottom: 64px;
}

.section-header--row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 48px;
}

.section-title {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: 16px;
}

.section-title--center {
	text-align: center;
}

/* Inline Lucide icon inside .product-sales__card-title. Stroke uses
   currentColor so tuning the colour is just a color: change here. */
.product-sales__card-icon {
	display: inline-flex;
	align-items: center;
	margin-right: 0.4em;
	vertical-align: -0.15em;
	color: var(--accent);
}

.product-sales__card-icon svg {
	width: 1em;
	height: 1em;
}

.section-body {
	color: var(--muted);
	font-size: 17px;
	max-width: 520px;
}

.section-body--center {
	margin: 0 auto;
	text-align: center;
}

/* ─────────────────────────────────────────────
   EYEBROW
   Small uppercase label used above hero / section titles.
   Plain text — no pill, no background. Also applied to heading
   elements (e.g. <h1>) on hero sections for SEO, with explicit
   font-weight and margin resets so browser heading defaults don't leak.
───────────────────────────────────────────── */
.eyebrow {
	display: inline-block;
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	margin: 0 0 12px 0;
	padding: 0;
	background: transparent;
	border: 0;
}

/* ─────────────────────────────────────────────
   BADGE
   Pill-styled label. Use when a distinct boxed badge is wanted
   (not for section eyebrows — use .eyebrow for those).
───────────────────────────────────────────── */
.badge {
	display: inline-block;
	background: rgba(66, 109, 173, 0.12);
	color: var(--accent);
	border: 1px solid rgba(66, 109, 173, 0.25);
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 4px 12px;
	margin: 0 0 16px 0;
}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-family: inherit;
	border: none;
	transition: opacity 0.15s;
}

.btn:hover {
	opacity: 0.88;
}

.btn--ghost {
	background: none;
	color: var(--muted);
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
}

.btn--primary {
	background: var(--accent);
	color: #fff;
	padding: 0 20px;
	height: 36px;
	font-size: 13px;
}

.btn--primary-lg {
	background: var(--accent);
	color: #fff;
	padding: 0 28px;
	height: 48px;
	font-size: 15px;
}

.btn--primary-xl {
	background: var(--accent);
	color: #fff;
	padding: 0 32px;
	height: 52px;
	font-size: 16px;
}

.btn--outline-lg {
	background: none;
	border: 1px solid var(--border);
	color: var(--text);
	padding: 0 28px;
	height: 48px;
	font-size: 15px;
	font-weight: 500;
}

.btn--outline-xl {
	background: none;
	border: 1px solid var(--border);
	color: var(--text);
	padding: 0 32px;
	height: 52px;
	font-size: 16px;
	font-weight: 500;
}

.btn--full {
	width: 100%;
	border-radius: var(--radius-sm);
	height: 44px;
	font-size: 15px;
}

/* ─────────────────────────────────────────────
   DIVIDER
───────────────────────────────────────────── */
.divider {
	height: 1px;
	background: var(--border);
}

/* ─────────────────────────────────────────────
   FADE-IN
   Gated behind `.js` so JS-disabled browsers (or cases where site.js fails
   to run) show content at full opacity. The inline <script> in Page.ss sets
   the `.js` class on <html> before this stylesheet loads.
───────────────────────────────────────────── */
.js .fade-in {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.js .fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js .fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ─────────────────────────────────────────────
   NAV
───────────────────────────────────────────── */
.nav {
	position: sticky;
	top: 0;
	z-index: 150;
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid var(--border);
	height: 60px;
}

.nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: 32px;
}

.nav__left {
	display: flex;
	align-items: center;
	gap: 27px;
}

.nav__logo {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.3px;
}

.nav__logo span {
	color: var(--accent);
}

.nav__logo svg {
	display: block;
	height: 17px;
	width: auto;
	shape-rendering: geometricPrecision;
}

.nav__menu {
	display: flex;
	gap: 4px;
	list-style: none;
}

.nav__item {
	position: relative;
}

/* Bridge gap between trigger and dropdown */
.nav__item::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 8px;
}

.nav__trigger {
	background: none;
	border: none;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 4px;
	transition: color 0.15s;
}

.nav__trigger:hover,
.nav__item:hover .nav__trigger {
	color: var(--text);
}

.nav__chevron {
	font-size: 10px;
	display: inline-block;
	transition: transform 0.15s;
}

.nav__item:hover .nav__chevron {
	transform: rotate(180deg);
}

.nav__dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 8px;
	min-width: 240px;
	box-shadow: var(--shadow-dropdown);
	z-index: 100;
}

.nav__item:hover .nav__dropdown {
	display: block;
}

.nav__dropdown a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	transition: background 0.12s;
}

.nav__dropdown a:hover {
	background: var(--surface);
}

.nav__dropdown-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 2px;
}

.nav__dropdown-desc {
	font-size: 12px;
	color: var(--muted);
}

.nav__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.nav__hamburger {
	display: none;
	background: none;
	border: none;
	font-size: 22px;
	color: var(--text);
	padding: 8px;
}

/* Mobile nav */
.nav__mobile {
	display: none;
	position: fixed;
	top: 60px;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--bg);
	z-index: 200;
	overflow-y: auto;
	padding: 16px 24px 40px;
}

.nav__mobile.open {
	display: block;
}

.nav__mobile-item {
	border-bottom: 1px solid var(--border);
}

.nav__mobile-trigger {
	width: 100%;
	background: none;
	border: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}

.nav__mobile-sub {
	display: none;
	padding-bottom: 12px;
}

.nav__mobile-sub.open {
	display: block;
}

.nav__mobile-sub a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
}

.nav__mobile-sub-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.nav__mobile-sub-desc {
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px;
}

.nav__mobile-actions {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */
.hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
}

.hero__content {
	flex: 0 1 480px;
}

/* Right column takes the remaining space and centres the phone within it, so the
   phone sits in the middle of the space left of the copy rather than hard-right. */
.hero__demo {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero__title {
	font-size: clamp(36px, 5vw, 60px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -1.5px;
	margin-bottom: 24px;
}

.hero__body {
	color: var(--muted);
	font-size: 18px;
	line-height: 1.7;
	margin-bottom: 36px;
	max-width: 480px;
}

.hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

/* Hero trust bar: checkmark row + rating stats row */
.hero__trust-bar {
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(66, 109, 173, 0.15);
	border-radius: 12px;
	padding: 16px 24px;
	margin-top: 36px;
	max-width: 560px;
	/* Two columns: the stat (first) and the trust checkmarks (second). */
	display: flex;
	align-items: center;
}

.hero__trust-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	list-style: none;
	margin: 0;
	padding: 0 0 0 24px;
	font-size: 14px;
	color: var(--muted);
	/* Second column: fill remaining width, divider on its left edge. */
	flex: 1;
	border-left: 1px solid rgba(66, 109, 173, 0.12);
}

.hero__trust-checks li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hero__trust-checks li::before {
	content: '✓';
	color: var(--accent);
	font-weight: 700;
}

.hero__stats {
	display: flex;
	gap: 0;
	flex-wrap: wrap;
	margin: 0;
	/* First column: sized to the stat, with a gutter before the divider. */
	flex: 0 0 auto;
	padding-right: 24px;
}

.hero__stat {
	flex: 1 1 0;
	min-width: 110px;
	padding: 0 20px;
	border-left: 1px solid rgba(66, 109, 173, 0.12);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hero__stat:first-child {
	border-left: 0;
	padding-left: 0;
}

.hero__stat-value {
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	margin: 0;
}

.hero__stat-stars {
	color: #ff7a00;
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 1;
}

.hero__stat-label {
	font-size: 13px;
	color: var(--muted);
	font-weight: 400;
	margin: 0;
}

/* Linked hero stat — the <a> wraps the value/stars/label so the whole stat
   content is clickable. Inherits the existing flex layout from .hero__stat. */
.hero__stat__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: inherit;
	text-decoration: none;
}

.hero__stat__link:focus-visible {
	outline: 2px solid var(--accent, #426dad);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (max-width: 540px) {
	/* Stack the two columns back into rows on narrow screens. */
	.hero__trust-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__stats {
		flex-direction: column;
		padding-right: 0;
		padding-bottom: 14px;
	}

	.hero__trust-checks {
		border-left: 0;
		border-top: 1px solid rgba(66, 109, 173, 0.12);
		padding: 14px 0 0 0;
	}

	.hero__stat {
		border-left: 0;
		border-top: 1px solid rgba(66, 109, 173, 0.12);
		padding: 12px 0 0 0;
	}

	.hero__stat:first-child {
		border-top: 0;
		padding-top: 0;
	}
}

/* ─────────────────────────────────────────────
   PHONE DEMO
───────────────────────────────────────────── */
.phone {
	width: 270px;
	background: #0a0a0f;
	border-radius: 52px;
	padding: 6px;
	box-shadow: var(--shadow-phone);
	position: relative;
}

/* Homepage hero: render the phone demo ~20% larger than the base component.
   Uses transform so every fixed-px internal scales uniformly (no distortion).
   Scoped to the hero so other future uses of .phone are unaffected. */
.hero__demo .phone {
	transform-origin: center;
}

/* Large desktop only: render the phone ~20% larger. On tablet it stays at its
   natural size so it doesn't force the hero to wrap; below 768px it's hidden. */
@media (min-width: 1024px) {
	.hero__demo .phone {
		transform: scale(1.2);
	}
}

/* Tablet hero fit (769–1023px): tighten the gap and text column so the
   natural-size phone sits beside the copy without forcing a wrap. The tablet
   grid overrides live further down, after the base grid rules, so they win. */
@media (min-width: 769px) and (max-width: 1023px) {
	.hero__inner {
		gap: 32px;
	}

	.hero__content {
		flex-basis: 360px;
	}
}

.phone__btn {
	position: absolute;
	background: #1a1a1a;
}

.phone__btn--vol1 {
	left: -3px;
	top: 80px;
	width: 3px;
	height: 32px;
	border-radius: 2px 0 0 2px;
}

.phone__btn--vol2 {
	left: -3px;
	top: 124px;
	width: 3px;
	height: 52px;
	border-radius: 2px 0 0 2px;
}

.phone__btn--vol3 {
	left: -3px;
	top: 188px;
	width: 3px;
	height: 52px;
	border-radius: 2px 0 0 2px;
}

.phone__btn--power {
	right: -3px;
	top: 120px;
	width: 3px;
	height: 72px;
	border-radius: 0 2px 2px 0;
}

.phone__screen {
	background: var(--bg);
	border-radius: 46px;
	overflow: hidden;
	min-height: 480px;
	display: flex;
	flex-direction: column;
}

.phone__header {
	padding: 48px 16px 32px;
	transition: background 0.6s ease;
	text-align: center;
}

.phone__brand {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.3px;
	color: #fff;
	margin-bottom: 4px;
}

.phone__tagline {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.75);
}

.phone__curve {
	height: 20px;
	position: relative;
	margin-bottom: -1px;
	transition: background 0.6s ease;
}

.phone__curve::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20px;
	background: var(--bg);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.phone__body {
	padding: 8px 20px 24px;
	flex: 1;
}

.phone__position-label {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	text-align: center;
	margin-bottom: 2px;
}

.phone__position-number {
	font-family: var(--font-mono);
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1;
	text-align: center;
	color: var(--text);
	margin-bottom: 4px;
}

.phone__position-sub {
	font-size: 12px;
	color: var(--muted);
	text-align: center;
	margin-bottom: 20px;
}

.phone__progress-track {
	background: var(--border);
	border-radius: var(--radius-pill);
	height: 6px;
	margin-bottom: 16px;
}

.phone__progress-fill {
	height: 100%;
	border-radius: var(--radius-pill);
	transition: width 1s ease, background 0.6s ease;
}

.phone__wait {
	display: flex;
	justify-content: center;
}

.phone__wait-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--radius-pill);
	padding: 6px 12px;
	border: 1px solid;
	transition: background 0.6s ease, border-color 0.6s ease;
}

.phone__wait-text {
	font-size: 12px;
	font-weight: 600;
	transition: color 0.6s ease;
}

.phone__footer {
	padding: 0 20px 24px;
}

.phone__home {
	width: 100px;
	height: 5px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-pill);
	margin: 8px auto 4px;
}

/* ─────────────────────────────────────────────
   PHONE — photographic backdrop variant
   When applyVertical() finds a `backdrop` image on the active vertical, it
   adds .phone--has-backdrop to the root. The photo (with branding baked in)
   covers the whole .phone element; the only HTML overlays are the position
   number, progress bar, and wait pill — positioned to land where the design
   mockup placed them inside the photo.
───────────────────────────────────────────── */
.phone__backdrop {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.6s ease, filter 0.2s ease;
	filter: brightness(1.2) grayscale(1);

}

/* Defensive: empty-src backdrop layers never render their broken-image box. */
.phone__backdrop:not([src]) {
	display: none !important;
}

.phone__backdrop.is-active {
	opacity: 1;
	filter: brightness(1) grayscale(0);
}

.phone--has-backdrop {
	background: transparent;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}

.phone--has-backdrop .phone__backdrop {
	display: block;
}

/* Elements baked into the photo — hidden in backdrop mode. */
.phone--has-backdrop .phone__btn,
.phone--has-backdrop .phone__home,
.phone--has-backdrop .phone__header,
.phone--has-backdrop .phone__curve,
.phone--has-backdrop .phone__brand,
.phone--has-backdrop .phone__tagline,
.phone--has-backdrop .phone__footer,
.phone--has-backdrop .phone__position-label,
.phone--has-backdrop .phone__position-sub {
	display: none;
}

/* The screen no longer has its own painted background or scroll; it just
   hosts the overlay elements positioned over the photo. */
.phone--has-backdrop .phone__screen {
	background: #000;
	position: relative;
	min-height: 0;
	aspect-ratio: 448 / 876;
	overflow: hidden;
	box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.14);
	border-radius: 46px;
	overflow: hidden;
}

.phone--has-backdrop .phone__body {
	position: absolute;
	inset: 0;
	padding: 0;
	z-index: 1;
	pointer-events: none;
}

/* Shared overlay layout for ALL backdrop verticals — positions, sizes,
   typography. Per-vertical blocks below override only the colour/contrast
   values that need to change against each backdrop. */
.phone--has-backdrop .phone__position-number,
.phone--has-backdrop .phone__wait,
.phone--has-backdrop .phone__progress-track {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.05s ease, transform 0.5s ease;
	/* controls fade up and fade down. Update phone-demo.js FADE_MS too*/
}

/* Once the first backdrop image has loaded, JS adds .phone--ready and the
   overlay (number, progress, wait) fades into view. Stays opaque thereafter
   except for the brief .phone--cycling dip on each slide change. */
.phone--has-backdrop.phone--ready .phone__position-number,
.phone--has-backdrop.phone--ready .phone__wait,
.phone--has-backdrop.phone--ready .phone__progress-track {
	opacity: 1;
	transform: scale(1);
}

.phone--has-backdrop.phone--ready.phone--cycling .phone__position-number,
.phone--has-backdrop.phone--ready.phone--cycling .phone__wait,
.phone--has-backdrop.phone--ready.phone--cycling .phone__progress-track {
	opacity: 0;
	transform: scale(1.5);
}

.phone--has-backdrop .phone__position-number {
	top: 35%;
	font-family: inherit;
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.5px;
	font-variant-numeric: tabular-nums;
}

.phone__count-digit {
	display: inline-block;
	width: 1ch;
	text-align: center;
}

.phone--has-backdrop .phone__wait {
	top: 44%;
	justify-content: center;
}

.phone--has-backdrop .phone__wait-pill {
	background: transparent !important;
	border-color: transparent !important;
	padding: 0;
}

.phone--has-backdrop .phone__wait-pill svg {
	display: none;
}

.phone--has-backdrop .phone__wait-text {
	font-size: 14px;
	font-weight: 500;
}

/* Shared progress-track anchoring — only position lives here. Height,
   shape, fill and edge treatment move to the per-vertical blocks below. */
.phone--has-backdrop .phone__progress-track {
	left: 12%;
	right: 12%;
	top: 53%;
}

/* ─────────────────────────────────────────────
   Per-vertical colour overrides
   Position/size are shared across all backdrops. Each slug only adjusts
   colours so the overlay stays legible against its backdrop palette.
───────────────────────────────────────────── */
.phone--bbc-proms .phone__position-number {
	color: #fff;
}

.phone--bbc-proms .phone__wait-pill {
	color: rgba(255, 255, 255, 0.85);
}

.phone--bbc-proms .phone__wait-text {
	color: rgba(255, 255, 255, 0.85) !important;
}

.phone--bbc-proms .phone__progress-track {
	height: 18px;
	border-radius: var(--radius-pill);
	background: linear-gradient(180deg, #4a1414 0%, #4a4a4a 100%);
	border: 1px solid rgba(255, 255, 255, 0.28);
	padding: 1px;
	box-sizing: border-box;
	overflow: hidden;
}

.phone--bbc-proms .phone__progress-fill {
	height: 100%;
	border-radius: var(--radius-pill);
	background: linear-gradient(180deg, #d63b3b 0%, #b82323 50%, #951a1a 100%) !important;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.phone--dropkick .phone__position-number {
	color: #fff;
	text-shadow:
		1px 1px 1px rgba(0, 0, 0, 0.55),
		1px 1px 3px rgba(0, 0, 0, 0.4);
}

.phone--dropkick .phone__wait-pill {
	color: #fff;
}

.phone--dropkick .phone__wait-text {
	color: #fff !important;
}

.phone--dropkick .phone__progress-track {
	height: 18px;
	border-radius: var(--radius-pill);
	background: linear-gradient(180deg, rgb(0 0 0 / 23%) 0%, rgb(255 255 255 / 51%) 100%);
	border: 1px solid #afafaf;
	padding: 1px;
	box-sizing: border-box;
	overflow: hidden;
}

.phone--dropkick .phone__progress-fill {
	height: 100%;
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, #ffffff 0%, #afafaf 100%) !important;
	box-shadow: inset 0 0 0 1px #6b6b6b;
}

.phone--varsity .phone__position-number {
	color: #fff;
	text-shadow:
		1px 1px 1px rgba(0, 0, 0, 0.55),
		1px 1px 3px rgba(0, 0, 0, 0.4);
}

.phone--varsity .phone__wait-pill {
	color: rgba(255, 255, 255, 0.85);
}

.phone--varsity .phone__wait-text {
	color: rgba(255, 255, 255, 0.85) !important;
}

.phone--varsity .phone__progress-track {
	height: 18px;
	border-radius: var(--radius-pill);
	background: linear-gradient(180deg, #1583C7 0%, #4bb7f3 100%);
	border: 1px solid #1197ef;
	padding: 1px;
	box-sizing: border-box;
	overflow: hidden;
}

.phone--varsity .phone__progress-fill {
	height: 100%;
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, #d7d7d7 0%, #fdfdfd 100%) !important;
	box-shadow: inset 0 0 0 1px #ffffff;
}

/* Phone CTA variants */
.phone-cta-stock {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 16px 14px;
	text-align: center;
}

.phone-cta-stock__number {
	font-family: var(--font-mono);
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 4px;
	transition: color 0.6s ease;
}

.phone-cta-stock__label {
	font-size: 11px;
	color: var(--muted);
}

.phone-cta-field p {
	font-size: 11px;
	color: var(--muted);
	margin-bottom: 6px;
}

.phone-cta-field__row {
	display: flex;
	gap: 6px;
}

.phone-cta-field__input {
	flex: 1;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	font-size: 12px;
	color: var(--text);
	background: var(--surface);
	outline: none;
	min-width: 0;
	font-family: inherit;
}

.phone-cta-field__send {
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s;
}

.phone-cta-field__send:hover {
	opacity: 0.85;
}

.phone-cta-captcha {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.phone-cta-captcha__check {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	border: 2px solid;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: border-color 0.6s ease;
}

.phone-cta-captcha__text {
	font-size: 12px;
	color: var(--text);
	flex: 1;
}

.phone-cta-captcha__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.phone-cta-captcha__brand span {
	font-size: 8px;
	color: var(--muted);
	letter-spacing: 0.3px;
}

/* ─────────────────────────────────────────────
   LOGO RIBBON
───────────────────────────────────────────── */
.ribbon {
	padding: 32px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.ribbon__label {
	text-align: center;
	color: var(--muted);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.ribbon__track {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.ribbon__inner {
	display: flex;
	align-items: center;
	width: max-content;
	animation: ribbon-scroll 55s linear infinite;
}

.ribbon__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	/* Spacing lives on each logo (not a flex `gap`) so every item — including the
	   one at the seam — has equal trailing space. This makes the strip perfectly
	   periodic, so the translateX(-50%) loop is exactly seamless. */
	margin-right: 56px;
}

.ribbon__logo img {
	height: 72px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	opacity: 0.6;
	filter: grayscale(100%);
	transition: opacity 0.15s ease, filter 0.15s ease;
}

.ribbon__logo img:hover {
	opacity: 1;
	filter: grayscale(0);
}

.ribbon__logo-fallback {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--muted);
	letter-spacing: 1px;
	white-space: nowrap;
	display: none;
}

@keyframes ribbon-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* ─────────────────────────────────────────────
   PRODUCT SALES — 3-column image + markdown cards
   Wider than the default .container — uses its own wrapper.
───────────────────────────────────────────── */
.product-sales__wrap {
	max-width: 1400px;
	margin: 48px auto 0;
	padding: 0 24px;
}

.product-sales__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 40px;
}

.product-sales__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.product-sales__card-image {
	aspect-ratio: 4 / 3;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: var(--surface, #f4f6fa);
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-sales__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-sales__card-title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.3px;
	margin: 0;
}

.product-sales__card-body {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.7;
}

.product-sales__card-body p {
	margin: 0 0 12px 0;
}

.product-sales__card-body p:last-child {
	margin-bottom: 0;
}

.product-sales__card-body ul,
.product-sales__card-body ol {
	margin: 0 0 12px 20px;
	padding: 0;
}

.product-sales__card-body a {
	color: var(--accent);
}

.product-sales__card-actions {
	margin-top: auto;
}

.product-sales__card-actions .btn {
	display: inline-flex;
}

@media (max-width: 900px) {
	.product-sales__wrap {
		max-width: 560px;
	}

	.product-sales__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.product-sales__card {
		align-items: center;
		text-align: center;
	}

	.product-sales__card-body {
		text-align: center;
	}
}

/* ─────────────────────────────────────────────
   TESTIMONIAL CARDS
───────────────────────────────────────────── */
.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.testimonial-card {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 28px;
	display: flex;
	flex-direction: column;
}

.testimonial-card__quote {
	color: var(--text);
	font-size: 16px;
	line-height: 1.7;
	flex: 1;
	margin-bottom: 24px;
}

.testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

.testimonial-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}

.testimonial-card__name {
	font-weight: 600;
	font-size: 14px;
}

.testimonial-card__role {
	color: var(--muted);
	font-size: 13px;
}

/* ─────────────────────────────────────────────
   INTEGRATION TILES
───────────────────────────────────────────── */
.integrations__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 2px;
}

.integration-tile {
	background: transparent;
	border: 0;
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	transition: transform 150ms ease, opacity 150ms ease;
}

a.integration-tile:hover {
	transform: translateY(-2px);
	opacity: 0.85;
}

.integration-tile img {
	height: 36px;
	width: auto;
	object-fit: contain;
}

.integration-tile__fallback {
	display: none;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background: var(--border);
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	font-weight: 700;
}

.integration-tile__name {
	font-size: 10px;
	color: var(--muted);
	font-weight: 500;
	text-align: center;
}

/* ─────────────────────────────────────────────
   FAQ
───────────────────────────────────────────── */
.faq__list {
	max-width: 720px;
	margin: 0 auto;
}

.faq__item {
	border-bottom: 1px solid var(--border);
}

.faq__question {
	width: 100%;
	background: none;
	border: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 0;
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	gap: 16px;
	font-family: inherit;
}

.faq__icon {
	color: var(--muted);
	font-size: 18px;
	flex-shrink: 0;
	transition: transform 0.2s;
	display: inline-block;
}

.faq__item[open] .faq__icon {
	transform: rotate(45deg);
}

/* Native <details>/<summary> — hide default disclosure marker */
.faq__question {
	list-style: none;
	cursor: pointer;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::marker {
	display: none;
}

.faq__answer {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.7;
	padding-bottom: 18px;
}


/* ─────────────────────────────────────────────
   NEWS CARDS
───────────────────────────────────────────── */
.news__all {
	font-size: 14px;
	color: var(--accent);
	font-weight: 600;
	transition: opacity 0.15s;
}

.news__all:hover {
	opacity: 0.75;
}

.news__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

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

.news-card {
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--border);
	transition: box-shadow 0.2s;
}

.news-card:hover {
	box-shadow: var(--shadow-card);
}

.news__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin: 64px auto 16px;
	flex-wrap: wrap;
}

.news-card__link {
	display: block;
	color: inherit;
}

.news-card__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	overflow: hidden;
	background: var(--surface);
}

.news-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform-origin: center;
	transition: transform 0.4s ease;
}

/* Hover: gently zoom the thumbnail from its centre (clipped by the thumb's
   overflow:hidden), alongside the card's drop shadow and title-colour change. */
.news-card:hover .news-card__thumb img {
	transform: scale(1.05);
}

.news-card__body {
	padding: 16px;
}

.news-card__date {
	font-size: 11px;
	color: var(--muted);
	display: block;
	margin-bottom: 6px;
}

.news-card__title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--text);
	margin: 0 0 8px;
	transition: color 0.15s;
}

.news-card:hover .news-card__title {
	color: var(--accent);
}

.news-card__excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─────────────────────────────────────────────
   ARTICLE — single article page layout (PostPage, etc.)
───────────────────────────────────────────── */
.article {
	padding-bottom: 80px;
}

.article__hero {
	margin: 0 0 32px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--surface);
	aspect-ratio: 16 / 9;
}

.article__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.article__container {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px 0;
}

.article__back {
	display: inline-block;
	color: var(--muted);
	font-size: 14px;
	text-decoration: none;
	margin-bottom: 32px;
}

.article__back:hover {
	color: var(--accent);
}

.article__author-block {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--border);
}

.article__author-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.article__author-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.article__author-name {
	font-weight: 600;
	font-size: 15px;
	color: var(--text);
}

.article__author-role {
	font-size: 13px;
	color: var(--muted);
}

.article__date {
	color: var(--muted);
	font-size: 14px;
	flex-shrink: 0;
}

.article__title {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.5px;
	margin: 0 0 20px;
}

.article__excerpt {
	font-size: 19px;
	line-height: 1.55;
	color: var(--muted);
	margin: 0 0 36px;
}

.article__body {
	font-size: 17px;
	line-height: 1.75;
}

.article__blocks {
	margin-top: 56px;
}

.article__nav {
	display: flex;
	gap: 16px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--border);
}

.article__nav-link {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	text-decoration: none;
	color: var(--text);
	transition: border-color 0.15s, transform 0.15s;
}

.article__nav-link:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.article__nav-link--next {
	text-align: right;
}

.article__nav-label {
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.article__nav-title {
	font-weight: 600;
}

@media (max-width: 640px) {
	.article__author-block {
		flex-wrap: wrap;
	}

	.article__date {
		flex-basis: 100%;
		margin-left: 62px;
		margin-top: 4px;
	}

	.article__nav {
		flex-direction: column;
	}
}

/* ─────────────────────────────────────────────
   MARKDOWN BODY — shared across docs, news, solutions
   Apply the `.markdown-body` class to any container that holds rendered
   markdown HTML (CommonMark/GFM output from MarkdownRenderer).
───────────────────────────────────────────── */
.markdown-body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text);
}

.markdown-body>* {
	max-width: 100%;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body pre,
.markdown-body table,
.markdown-body figure {
	margin: 0 0 20px;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5 {
	font-weight: 700;
	line-height: 1.3;
	margin: 36px 0 12px;
	scroll-margin-top: 80px;
	letter-spacing: -0.3px;
}

.markdown-body h1 {
	font-size: 34px;
	letter-spacing: -0.8px;
}

.markdown-body h2 {
	font-size: 28px;
	padding-bottom: 8px;
}

.markdown-body h3 {
	font-size: 22px;
}

.markdown-body h4 {
	font-size: 18px;
}

.markdown-body h5 {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--muted);
}

.markdown-body .heading-anchor {
	opacity: 0;
	margin-left: 6px;
	color: var(--muted);
	text-decoration: none;
	font-weight: 400;
	transition: opacity 0.15s ease;
}

.markdown-body .heading-anchor:hover {
	color: var(--accent);
}

.markdown-body h2:hover .heading-anchor,
.markdown-body h3:hover .heading-anchor,
.markdown-body h4:hover .heading-anchor {
	opacity: 1;
}

.markdown-body a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.markdown-body a:hover {
	text-decoration-thickness: 2px;
}

/* page:ID internal link whose target page is missing/unpublished. Rendered as
   non-navigating text by App\Support\StableLinkListener; greyed so editors can spot it. */
.markdown-body .broken-internal-link {
	color: var(--text-muted, #888);
	text-decoration: line-through;
	cursor: not-allowed;
}

.markdown-body strong {
	font-weight: 700;
}

.markdown-body em {
	font-style: italic;
}

.markdown-body del,
.markdown-body s {
	color: var(--muted);
}

.markdown-body ul,
.markdown-body ol {
	padding-left: 24px;
}

.markdown-body li {
	margin: 4px 0;
}

.markdown-body li>ul,
.markdown-body li>ol {
	margin: 4px 0;
}

/* GFM task lists */
.markdown-body ul li input[type="checkbox"] {
	margin: 0 8px 0 -20px;
	vertical-align: baseline;
}

.markdown-body code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background: var(--surface);
	padding: 2px 6px;
	border-radius: 4px;
	border: 1px solid var(--border);
}

/* Higher-specificity selector on pre ensures our rules beat Prism's theme
   (which ships `pre[class*="language-"] { font-size: 1em; line-height: 1.5 }`
   and loads after our stylesheet). `font-size: 1em` would otherwise inherit
   from the surrounding context (e.g. solution-hero intro at 19px). */
.markdown-body pre,
.markdown-body pre[class*="language-"] {
	background: #0f1b26;
	color: #e6edf3;
	padding: 16px 20px;
	border-radius: var(--radius-md);
	overflow-x: auto;
	font-size: 12px;
	line-height: 1.65;
	border: 1px solid var(--border);
}

.markdown-body pre code,
.markdown-body pre code[class*="language-"] {
	background: none;
	padding: 0;
	border: none;
	border-radius: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Prism toolbar polish — language badge + copy button sit above the code.
   Prism wraps our <pre> in <div class="code-toolbar"> when its toolbar plugin
   is loaded; style so the controls feel like part of the block, not pasted on. */
.markdown-body .code-toolbar {
	position: relative;
	margin: 0 0 20px;
}

.markdown-body .code-toolbar>pre {
	margin: 0;
}

.markdown-body .code-toolbar>.toolbar {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 8px;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.markdown-body .code-toolbar:hover>.toolbar,
.markdown-body .code-toolbar:focus-within>.toolbar {
	opacity: 1;
}

.markdown-body .code-toolbar>.toolbar>.toolbar-item {
	display: flex;
}

.markdown-body .code-toolbar>.toolbar>.toolbar-item>span,
.markdown-body .code-toolbar>.toolbar>.toolbar-item>button,
.markdown-body .code-toolbar>.toolbar>.toolbar-item>a {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: rgba(230, 237, 243, 0.75);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.12s ease, background 0.12s ease;
}

.markdown-body .code-toolbar>.toolbar>.toolbar-item>button:hover,
.markdown-body .code-toolbar>.toolbar>.toolbar-item>a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
}

/* The show-language plugin emits a <span> (non-interactive) — dim it further */
.markdown-body .code-toolbar>.toolbar>.toolbar-item>span {
	cursor: default;
}

.markdown-body blockquote {
	border-left: 3px solid var(--border);
	padding: 4px 16px;
	color: var(--muted);
	font-style: italic;
}

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

.markdown-body hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 32px 0;
}

.markdown-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.markdown-body th,
.markdown-body td {
	padding: 10px 14px;
	border: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

.markdown-body th {
	background: var(--surface);
	font-weight: 600;
}

.markdown-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.markdown-body iframe {
	max-width: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--radius-md);
}

/* Callouts — variants: --note (default), --tip, --warning, --info */
.markdown-body .callout {
	padding: 16px 20px;
	border-radius: var(--radius-md);
	margin: 20px 0;
	border-left: 4px solid var(--accent);
	background: rgba(66, 109, 173, 0.08);
}

.markdown-body .callout>*:last-child {
	margin-bottom: 0;
}

.markdown-body .callout--warning {
	border-left-color: #d97706;
	background: rgba(217, 119, 6, 0.08);
}

.markdown-body .callout--tip {
	border-left-color: #16a34a;
	background: rgba(22, 163, 74, 0.08);
}

.markdown-body .callout--info {
	border-left-color: #2563eb;
	background: rgba(37, 99, 235, 0.08);
}

/* ─────────────────────────────────────────────
   SOLUTION HERO
───────────────────────────────────────────── */
.solution-hero {
	padding: 96px 0 80px;
}

/* Break out of the default 1100px .container so the hero feels generous —
   matches .product-sales__wrap (1400px max). Scoped to .solution-hero so
   no other sections widen. */
.solution-hero .container {
	max-width: 1400px;
}

.solution-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
}

/* 40 / 60 split between content (left) and visual (right). Flex-grow ratios
   2:3 → visual takes 60% of free space after basis allocation. */
.solution-hero__content {
	flex: 2 1 360px;
}

.solution-hero__visual {
	flex: 3 1 480px;
	display: flex;
	justify-content: center;
}

.solution-hero__visual img {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
}

.solution-hero__pill {
	margin-bottom: 20px;
}

.solution-hero__title {
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -1.5px;
	margin: 0 0 24px;
}

.solution-hero__intro {
	font-size: 19px;
	line-height: 1.65;
}

.solution-hero__intro p {
	margin: 0 0 1em;
}

.solution-hero__intro p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.solution-hero {
		padding: 64px 0 56px;
	}

	.solution-hero__visual {
		order: 2;
	}
}

/* ─────────────────────────────────────────────
   MARKDOWN SECTION (free-placement markdown block)
───────────────────────────────────────────── */
.markdown-section {
	padding: var(--section-padding-sm);
}

.markdown-section__inner {
	max-width: 760px;
}

.markdown-section__heading {
	font-size: clamp(26px, 3.5vw, 36px);
	font-weight: 800;
	letter-spacing: -0.8px;
	margin: 0 0 20px;
}

/* ─────────────────────────────────────────────
   MEDIA BLOCK (alternating image/text)
───────────────────────────────────────────── */
.media-block {
	padding: var(--section-padding-sm);
}

/* When media blocks stack (product sub-pages, solutions), collapse the bottom
   padding on every block except the last in the run — the gap between two
   blocks then comes from a single block's padding, not both stacked. The last
   block keeps its bottom padding as spacing before the following section. */
.element.mediablockelement:has(+ .element.mediablockelement) .media-block {
	padding-bottom: 0;
}

.media-block__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.media-block--image-right .media-block__media {
	order: 2;
}

.media-block__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	display: block;
}

.media-block__eyebrow {
	font-family: var(--font-mono);
	color: var(--accent);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.media-block__heading {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.2;
	margin: 0 0 16px;
}

.media-block__text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text);
}

.media-block__text p {
	margin: 0 0 1em;
}

.media-block__text p:last-child {
	margin-bottom: 0;
}

.media-block__cta {
	margin-top: 24px;
}

/* ─────────────────────────────────────────────
   LOGO GRID (tile grid, distinct from the scrolling ribbon)
───────────────────────────────────────────── */
.logo-grid {
	padding: var(--section-padding-sm);
}

.logo-grid__header {
	text-align: center;
	margin-bottom: 40px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.logo-grid__heading {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	letter-spacing: -0.5px;
	margin: 0 0 12px;
}

.logo-grid__intro {
	color: var(--muted);
	font-size: 16px;
	margin: 0;
}

.logo-grid__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 32px;
	align-items: center;
	justify-items: center;
}

.logo-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	min-height: 120px;
}

.logo-grid__list--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.logo-grid__list--cols-8 {
	grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 900px) {
	.logo-grid__list--cols-8 {
		grid-template-columns: repeat(4, 1fr);
	}

	.logo-grid__list--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {

	.logo-grid__list--cols-4,
	.logo-grid__list--cols-8 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.logo-grid__item img {
	max-height: 84px;
	width: auto;
	filter: grayscale(100%);
	opacity: 0.65;
	transition: opacity 0.15s ease, filter 0.15s ease;
}

.logo-grid__item a:hover img,
.logo-grid__item img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* ─────────────────────────────────────────────
   RELATED RESOURCES
───────────────────────────────────────────── */
.related-resources {
	padding: var(--section-padding-sm);
	background: var(--surface);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.related-resources__header {
	margin-bottom: 32px;
}

.related-resources__heading {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	letter-spacing: -0.5px;
	margin: 0 0 12px;
}

.related-resources__intro {
	color: var(--muted);
	font-size: 16px;
	margin: 0;
	max-width: 640px;
}

.related-resources__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.related-resources__card {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	text-decoration: none;
	color: var(--text);
	transition: box-shadow 0.2s ease;
	height: 100%;
}

/* Identical to .news-card:hover — shadow only (plus the title-colour and
   thumbnail-zoom rules below). No outline or upward lift. */
.related-resources__card:hover {
	box-shadow: var(--shadow-card);
}

.related-resources__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--surface);
}

.related-resources__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform-origin: center;
	transition: transform 0.4s ease;
}

/* Match the news-card behaviour: gently zoom the thumbnail from centre on hover
   (clipped by the thumb's overflow:hidden). */
.related-resources__card:hover .related-resources__thumb img {
	transform: scale(1.05);
}

.related-resources__thumb--empty {
	background: linear-gradient(135deg, rgba(66, 109, 173, 0.08), rgba(66, 109, 173, 0.02));
}

.related-resources__body {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.related-resources__title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	color: var(--text);
}

.related-resources__card:hover .related-resources__title {
	color: var(--accent);
}

.related-resources__excerpt {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.5;
}

/* ─────────────────────────────────────────────
   CTA BANNER
───────────────────────────────────────────── */
.cta__box {
	text-align: center;
	background: linear-gradient(135deg, rgba(66, 109, 173, 0.1) 0%, var(--surface) 100%);
	border: 1px solid rgba(66, 109, 173, 0.2);
	border-radius: var(--radius-lg);
	padding: 72px 40px;
}

.cta__title {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: 16px;
}

.cta__body {
	color: var(--muted);
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 36px;
}

.cta__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.footer {
	border-top: 1px solid var(--border);
	padding: 48px 0 32px;
}

/* Adaptive footer: intro sits on its own full-width row, then the columns live
   in their own auto-fit grid so they fill the width evenly and adapt to any
   number of CMS columns (as many per row as fit at ≥150px, wrapping beyond). */
.footer__grid {
	margin-bottom: 48px;
}

.footer__intro {
	max-width: 420px;
	margin-bottom: 24px;
}

.footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 32px 40px;
}

.footer__logo {
	font-weight: 700;
	font-size: 16px;
	display: block;
	margin-bottom: 16px;
}

.footer__logo span {
	color: var(--accent);
}

.footer__tagline {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.7;
	max-width: 260px;
}

.footer__col-heading {
	color: #374151;
	font-weight: 600;
	font-size: 0.875rem;
	margin-bottom: 12px;
}

.footer__col-heading:not(:first-child) {
	margin-top: 24px;
}

.footer__col {
	min-width: 0;
}

.footer__link {
	display: block;
	color: #374151;
	font-size: 0.875rem;
	line-height: 1.4;
	margin-bottom: 10px;
	overflow-wrap: break-word;
	transition: color 0.15s;
}

.footer__link:hover {
	color: var(--text);
}

.footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}

.footer__socials {
	display: flex;
	gap: 16px;
	align-items: center;
}

.footer__social {
	color: var(--muted);
	display: flex;
	align-items: center;
	transition: color 0.15s;
}

.footer__social:hover {
	color: var(--text);
}

.footer__legal {
	display: flex;
	gap: 24px;
}

.footer__legal a {
	color: var(--muted);
	font-size: 13px;
	transition: color 0.15s;
}

.footer__legal a:hover {
	color: var(--text);
}

/* ─────────────────────────────────────────────
   COOKIE BANNER
───────────────────────────────────────────── */
.cookie-banner {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 1000;
	max-width: 360px;
	padding: 16px 18px;
	background: var(--text);
	color: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-dropdown);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.cookie-banner[hidden] {
	display: none;
}

.cookie-banner__text {
	margin: 0 0 12px;
}

.cookie-banner__link {
	color: #fff;
	text-decoration: underline;
}

.cookie-banner__link:hover {
	opacity: 0.85;
}

.cookie-banner__actions {
	display: flex;
	justify-content: flex-end;
}

.cookie-banner__accept {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	color: #fff;
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 8px 16px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.cookie-banner__accept:hover,
.cookie-banner__accept:focus-visible {
	background: #355893;
	border-color: #355893;
	outline: none;
}

@media (max-width: 480px) {
	.cookie-banner {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
	}
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */

/* Tablet tier (769–1023px): a 2-column step between desktop and the 768px
   mobile collapse below. Placed after the base grid rules so these win.
   (Hero gap/column fit for this range is set up near the hero rules above.) */
@media (min-width: 769px) and (max-width: 1023px) {
	.testimonials__grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

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

@media (max-width: 768px) {

	.nav__menu,
	.nav__actions {
		display: none;
	}

	.nav__hamburger {
		display: block;
	}

	.hero__demo {
		display: none;
	}

	.feature-card__inner,
	.feature-card__inner--reverse {
		flex-direction: column;
	}

	.feature-card__icon {
		display: none;
	}

	.feature-card__body {
		padding: 32px 24px;
	}

	.testimonials__grid {
		grid-template-columns: 1fr;
	}

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

	.news__grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer__cols {
		gap: 24px 32px;
	}

	.cta__box {
		padding: 48px 24px;
	}

	.media-block__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.media-block--image-right .media-block__media {
		order: 0;
	}

	.related-resources__grid {
		grid-template-columns: 1fr 1fr;
	}

	.solution-hero {
		padding: 64px 0 48px;
	}
}

@media (max-width: 480px) {
	.related-resources__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.news__grid {
		grid-template-columns: 1fr;
	}
}

/* ─────────────────────────────────────────────
   SIGN-UP PAGE — wrapper around the React app.
   The form internals (and the Stripe iframe) are styled by the
   React app's own bundle and Stripe's injected styles. We only
   own the page header, the elemental blocks band, and font inheritance.
───────────────────────────────────────────── */
.signup-page__header {
	text-align: center;
	margin: 0 auto 40px;
	max-width: 640px;
}

.signup-page__title {
	font-size: clamp(32px, 4.4vw, 48px);
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1.1;
	margin: 0 0 16px;
	color: var(--text);
}

.signup-page__intro {
	color: var(--muted);
	font-size: 17px;
	line-height: 1.55;
}

.signup-page__intro p:last-child {
	margin-bottom: 0;
}

.signup-page__blocks {
	margin: 0 auto 32px;
	max-width: 720px;
}

/* Force the React form to use the site's body font rather than the
   system-ui stack baked into its Tailwind bundle. Specificity (0,2,0)
   beats Tailwind's .font-sans (0,1,0) which loads after styles.css. */
.signup-page .signup-app,
.signup-page .signup-app * {
	font-family: var(--font-body);
}

.signup-page .signup-app code,
.signup-page .signup-app pre,
.signup-page .signup-app kbd,
.signup-page .signup-app samp {
	font-family: var(--font-mono);
}

/* Stripe card field wrapper — copied from production
   (resolved Tailwind: appearance-none block w-full bg-gray-200 text-gray-700
    border rounded-md py-3 px-2 leading-tight focus:outline-none focus:bg-white) */
.signup-page #card-element {
	appearance: none;
	display: block;
	width: 100%;
	background-color: rgba(237, 242, 247, 1);
	color: #374151;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	padding: 0.75rem 0.5rem;
	margin-bottom: 1rem;
	line-height: 1.25;
}

.signup-page #card-element:focus {
	outline: none;
	background-color: #ffffff;
}

/* Soften MUI validation messages — by default the React app renders them as
   <h6 subtitle2 colorError> which inherits site h6 weight + a heavy MUI red. */
.signup-page .MuiTypography-colorError {
	text-transform: none;
	font-weight: 400;
	letter-spacing: normal;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #f44336;
	margin-top: 4px;
}

/* Form elements — match the #card-element treatment so the form reads as one
   coherent surface. Scoped under .signup-page; specificity (0,1,1) beats
   Tailwind utility classes (0,1,0) in the React bundle. */
.signup-page input[type="text"],
.signup-page input[type="email"],
.signup-page input[type="password"],
.signup-page input[type="tel"],
.signup-page input[type="number"],
.signup-page input[type="search"],
.signup-page select,
.signup-page textarea {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(237, 242, 247, 1);
	color: #374151;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	padding: 0.9rem 1rem;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.signup-page input[type="text"]::placeholder,
.signup-page input[type="email"]::placeholder,
.signup-page input[type="password"]::placeholder,
.signup-page input[type="tel"]::placeholder,
.signup-page textarea::placeholder {
	color: #9ca3af;
	opacity: 1;
}

.signup-page input[type="text"]:hover,
.signup-page input[type="email"]:hover,
.signup-page input[type="password"]:hover,
.signup-page input[type="tel"]:hover,
.signup-page input[type="number"]:hover,
.signup-page select:hover,
.signup-page textarea:hover {
	border-color: #b8bdc7;
}

.signup-page input[type="text"]:focus,
.signup-page input[type="email"]:focus,
.signup-page input[type="password"]:focus,
.signup-page input[type="tel"]:focus,
.signup-page input[type="number"]:focus,
.signup-page select:focus,
.signup-page textarea:focus {
	outline: none;
	background-color: #ffffff;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(66, 109, 173, 0.15);
}

.signup-page textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.55;
}

.signup-page select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b8a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px 7px;
	padding-right: 36px;
	cursor: pointer;
}

.signup-page label {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 6px;
	letter-spacing: 0.1px;
}

/* Primary submit / CTA buttons */
.signup-page button[type="submit"] {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 14px 28px;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.signup-page button[type="submit"]:hover:not(:disabled) {
	background: #355893;
	border-color: #355893;
}

.signup-page button[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Secondary buttons (back / skip / cancel) */
.signup-page button[type="button"] {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--muted);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 12px 22px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.signup-page button[type="button"]:hover {
	color: var(--text);
	border-color: #b8bdc7;
}

/* MUI TextField/OutlinedInput uses a wrapper that paints its own border —
   cancel that so our element-level input styling shows through. */
.signup-page .MuiOutlinedInput-root,
.signup-page .MuiOutlinedInput-notchedOutline {
	border: none !important;
	background: transparent !important;
}

.signup-page .MuiInputBase-root {
	font-family: var(--font-body) !important;
}

.signup-page .MuiFormHelperText-root {
	font-family: var(--font-body);
	font-size: 12px;
	margin-top: 4px;
	color: var(--muted);
}

/* MUI v4 renders its input element with its own padding + font-size on
   .MuiInputBase-input / .MuiOutlinedInput-input. Zero those so the outer
   element-level rule above owns the visible padding, and pin font to ours. */
.signup-page .MuiInputBase-input,
.signup-page .MuiOutlinedInput-input {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.4;
	padding: 0;
	height: auto;
	box-sizing: border-box;
}

/* MUI Select renders as <div role="button"> not a native <select>, so the
   .signup-page select rule above never matches it. Give it the same surface
   treatment so selects read as selects, not as inputs. */
.signup-page .MuiSelect-root.MuiSelect-outlined {
	display: flex;
	align-items: center;
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(237, 242, 247, 1);
	color: #374151;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	padding: 0.9rem 2.25rem 0.9rem 1rem;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.4;
	min-height: 0;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.signup-page .MuiSelect-root.MuiSelect-outlined:hover {
	border-color: #b8bdc7;
}

.signup-page .MuiInputBase-root.Mui-focused .MuiSelect-root.MuiSelect-outlined,
.signup-page .MuiSelect-root.MuiSelect-outlined:focus {
	outline: none;
	background-color: #ffffff;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(66, 109, 173, 0.15);
}

.signup-page .MuiSelect-icon {
	color: var(--muted);
	right: 12px;
}

/* While the Select has no value (native hidden input is empty), render the
   placeholder-like label in the input placeholder colour so selects and text
   fields read as visually consistent. Once a value is picked, MUI re-renders
   the selected option label and the default dark colour applies. */
.signup-page .MuiInputBase-root:has(> .MuiSelect-nativeInput[value=""]) .MuiSelect-root.MuiSelect-outlined {
	color: #9ca3af;
}

/* Domain field uses a start adornment ("https://"). Paint the wrapper as one
   cohesive box (instead of just the inner input) so the prefix and value
   share a single visual surface, then make the input transparent inside. */
.signup-page .MuiInputAdornment-positionStart {
	margin-right: 8px;
	color: var(--muted);
}

.signup-page .MuiInputBase-adornedStart.MuiOutlinedInput-root {
	background-color: rgba(237, 242, 247, 1) !important;
	border: 1px solid #d1d5db !important;
	border-radius: 0.375rem;
	padding-left: 1rem;
	padding-right: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.signup-page .MuiInputBase-adornedStart.MuiOutlinedInput-root:hover {
	border-color: #b8bdc7 !important;
}

.signup-page .MuiInputBase-adornedStart.MuiOutlinedInput-root.Mui-focused {
	background-color: #ffffff !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(66, 109, 173, 0.15);
}

.signup-page .MuiInputBase-adornedStart .MuiInputBase-input {
	background: transparent;
	border: none;
	padding-left: 0;
	padding-right: 0;
}

/* The wrapper now owns the focus ring for adorned inputs — kill the inner
   input's own focus/hover shadow + border so it doesn't overlap the wrapper. */
.signup-page .MuiInputBase-adornedStart .MuiInputBase-input:hover,
.signup-page .MuiInputBase-adornedStart .MuiInputBase-input:focus {
	background: transparent;
	border: none;
	box-shadow: none;
	outline: none;
}

/* Give the inline required-field error label a little breathing room. */
.signup-page .MuiTypography-subtitle2.MuiTypography-colorError {
	margin: 6px 0 4px;
}

/* MUI Select opens its menu via a Portal mounted on document.body, so it
   sits outside .signup-page and our scoped rules can't reach it. Target the
   menu classes at root level — the only MUI menus on this site are the
   signup app's selects, so the unscoped reach is fine. */
.MuiMenu-paper {
	font-family: var(--font-body);
}

.MuiMenu-paper .MuiMenuItem-root {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text);
}

.MuiMenu-paper .MuiMenuItem-root.Mui-selected {
	background-color: rgba(66, 109, 173, 0.08);
}

.MuiMenu-paper .MuiMenuItem-root.Mui-selected:hover,
.MuiMenu-paper .MuiMenuItem-root:hover {
	background-color: rgba(66, 109, 173, 0.12);
}

/* Terms-of-Service checkbox row — keep the box and label on one line.
   The default <p> margins inside .MuiFormControlLabel-label push the text
   onto a visual second row even though the label is inline-flex. */
.signup-page .MuiFormControlLabel-root {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin: 8px 0 0;
}

.signup-page .MuiFormControlLabel-label,
.signup-page .MuiFormControlLabel-label p {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

/* ─────────────────────────────────────────────
   CONTACT PAGE — header, demo card, elemental form/blocks band
───────────────────────────────────────────── */
.page-header {
	padding: 80px 0 32px;
	text-align: center;
}

.page-header h1 {
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 800;
	letter-spacing: -1.5px;
	line-height: 1.05;
	margin: 0 0 16px;
	color: var(--text);
}

.page-header__body {
	max-width: 640px;
	margin: 0 auto;
	color: var(--muted);
	font-size: 18px;
	line-height: 1.55;
}

.page-header__body p:last-child {
	margin-bottom: 0;
}

/* ── Elemental blocks band ── */
.contact-blocks {
	padding: 24px 0 96px;
}

/* ── Contact blocks (ContactElement / ContactDetailsElement / ContactFormElement)
   All three share a media-block-style two-column layout: image (or React form)
   on one side, copy on the other. ImageLeft toggle controls the side. ── */
.contact-block {
	padding: var(--section-padding-sm);
}

.contact-block__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.contact-block--media-right .contact-block__media {
	order: 2;
}

.contact-block--constrained .contact-block__inner {
	max-width: 880px;
	margin: 0 auto;
}

.contact-block__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	display: block;
}

.contact-block__body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text);
}

.contact-block__body h2,
.contact-block__title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.2;
	margin: 0 0 20px;
	color: var(--text);
}

.contact-block__body p {
	margin: 0 0 1em;
}

.contact-block__body p:last-child {
	margin-bottom: 0;
}

/* Form-block variant: the "media" slot holds the React mount, styled as a
   surface-tinted panel so it reads as a deliberate form area. */
.contact-block__form {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 32px;
}

/* Stacked variant — image is dominant, card floats over it on one side.
   ImageLeft toggle pins the image to the left or right of the container. */
.contact-block--stacked .contact-block__stack {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	min-height: 460px;
}

.contact-block--stacked .contact-block__media--full {
	width: 68%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.contact-block--stacked.contact-block--media-left .contact-block__media--full {
	margin-right: auto;
}

.contact-block--stacked.contact-block--media-right .contact-block__media--full {
	margin-left: auto;
}

.contact-block--stacked .contact-block__media--full img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
}

.contact-block--stacked .contact-block__card {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52%;
	z-index: 1;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 44px 48px;
	text-align: left;
}

.contact-block--stacked.contact-block--media-left .contact-block__card {
	right: 0;
}

.contact-block--stacked.contact-block--media-right .contact-block__card {
	left: 0;
}

.contact-block--stacked .contact-block__card .contact-block__title {
	margin: 0 0 16px;
}

.contact-block--stacked .contact-block__card .contact-block__body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--text);
}

.contact-block--stacked .contact-block__card .contact-block__body p {
	margin: 0 0 1em;
}

.contact-block--stacked .contact-block__card .contact-block__body p:last-child {
	margin-bottom: 0;
}

.contact-block--stacked .contact-block__card .btn {
	margin-top: 8px;
}

@media (max-width: 880px) {
	.contact-block--stacked .contact-block__stack {
		min-height: 0;
	}

	.contact-block--stacked .contact-block__media--full,
	.contact-block--stacked.contact-block--media-left .contact-block__media--full,
	.contact-block--stacked.contact-block--media-right .contact-block__media--full {
		width: 100%;
		margin: 0;
		aspect-ratio: 16 / 9;
	}

	.contact-block--stacked .contact-block__card,
	.contact-block--stacked.contact-block--media-left .contact-block__card,
	.contact-block--stacked.contact-block--media-right .contact-block__card {
		position: static;
		transform: none;
		width: calc(100% - 32px);
		max-width: 640px;
		margin: -60px auto 0;
		padding: 28px 24px;
	}
}

.contact-form-element__mount {
	min-height: 200px;
}

/* React contact form internals — selectors scoped to .contact-form-element__mount
   to avoid leaking to other forms. The React app renders <div class="ContactForm">
   with placeholder-driven inputs (visually hidden labels) plus a reCAPTCHA. */
.contact-form-element__mount .ContactForm form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	max-width: none;
}

.contact-form-element__mount .form-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.contact-form-element__mount .required-message {
	font-size: 12px;
	color: var(--muted);
	font-style: italic;
	text-align: right;
	margin: 0 0 4px;
}

.contact-form-element__mount .feedback-input,
.contact-form-element__mount .feedback-textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	margin: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.contact-form-element__mount .feedback-input::placeholder,
.contact-form-element__mount .feedback-textarea::placeholder {
	color: var(--muted);
	opacity: 1;
}

.contact-form-element__mount .feedback-input:hover,
.contact-form-element__mount .feedback-textarea:hover {
	border-color: #c9c9d6;
}

.contact-form-element__mount .feedback-input:focus,
.contact-form-element__mount .feedback-textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(66, 109, 173, 0.15);
}

.contact-form-element__mount .feedback-textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.55;
}

.contact-form-element__mount .category {
	width: 100%;
}

.contact-form-element__mount .category select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b8a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 10px 7px;
	padding-right: 40px;
	cursor: pointer;
}

.contact-form-element__mount .g-recaptcha {
	margin: 4px 0;
}

.contact-form-element__mount .actions {
	display: flex;
	gap: 12px;
	margin-top: 4px;
}

.contact-form-element__mount .submit-button,
.contact-form-element__mount .reset-button {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--radius-sm);
	padding: 14px 24px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.contact-form-element__mount .submit-button {
	flex: 1;
	color: #fff;
	background: var(--accent);
	border: 1px solid var(--accent);
}

.contact-form-element__mount .submit-button:hover:not(:disabled) {
	opacity: 0.9;
}

.contact-form-element__mount .submit-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.contact-form-element__mount .reset-button {
	color: var(--muted);
	background: transparent;
	border: 1px solid var(--border);
}

.contact-form-element__mount .reset-button:hover {
	color: var(--text);
	border-color: #c9c9d6;
}

/* ── Responsive ── */
@media (max-width: 880px) {
	.contact-block__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* On mobile, ignore the left/right toggle — media always sits above copy. */
	.contact-block--media-right .contact-block__media {
		order: 0;
	}

	.contact-block__form {
		padding: 24px;
	}
}

@media (max-width: 480px) {
	.page-header {
		padding: 56px 0 24px;
	}

	.contact-blocks {
		padding: 16px 0 64px;
	}
}

@media (max-width: 640px) {
	.signup-page__header {
		margin-bottom: 28px;
	}
}