/* ===== Self-hosted font: Inter Variable (Latin + Latin-Extended) =====
   Files under /fonts/inter, SIL Open Font License 1.1 — see OFL-LICENSE.txt.
   Self-hosted (no external CDN) so it works under a strict CSP. */
@font-face {
	font-family: 'Inter Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: 'Inter Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ===== Theme clair par defaut ===== */
:root {
	--bs-body-bg: #ffffff;
	--bs-body-color: #1f2d3d;
	--bs-card-bg: #fff;
	--bs-dropdown-bg: #fff;
	--bs-dropdown-color: #1f2d3d;
	--bs-dropdown-link-hover-bg: #f2f6fa;
	--bs-border-color: #dde4ec;
	/* Brand cyan (logo). Used as an accent only: white text on it fails contrast. */
	--bs-msl-blue: #04A3ED;
	--bs-msl-blue-dark: #0382be;
	--bs-msl-blue-deeper: #025f8b;
	/* Interactive blue: links, buttons, active states (4.9:1 on white) */
	--msl-primary: #0271ae;
	--msl-primary-hover: #025a8a;
	--msl-ink: #0e1c2c;          /* headings */
	--msl-muted: #5b6b7c;
	--msl-surface: #f5f7fa;      /* section / header strip backgrounds */
	--msl-code: #0b4f7a;
	--msl-header-bg: #ffffff;
	--msl-footer-bg: #0e1c2c;
	--msl-radius: 8px;
	--msl-transition: 0.15s ease;
	--msl-font-sans: 'Inter Variable', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--msl-font-mono: Consolas, 'SFMono-Regular', Menlo, monospace;
}

/* ===== Mode sombre automatique ===== */
@media (prefers-color-scheme: dark) {
	:root {
		--bs-body-bg: #0d1117;
		--bs-body-color: #e6edf3;
		--bs-card-bg: #161b22;
		--bs-dropdown-bg: #1c2128;
		--bs-dropdown-color: #e6edf3;
		--bs-dropdown-link-hover-bg: #21262d;
		--bs-border-color: #30363d;
		--msl-primary: #4cbcf0;
		--msl-primary-hover: #7fd0f5;
		--msl-ink: #f0f4f8;
		--msl-muted: #9aa7b4;
		--msl-surface: #161b22;
		--msl-code: #8fd1f5;
		--msl-header-bg: #0d1117;
		--msl-footer-bg: #090c10;
		/* Bootstrap 5.3 derived colors (captions, form text, secondary surfaces) */
		--bs-body-color-rgb: 230, 237, 243;
		--bs-body-bg-rgb: 13, 17, 23;
		--bs-emphasis-color: #ffffff;
		--bs-secondary-color: rgba(230, 237, 243, 0.7);
		--bs-secondary-bg: #21262d;
		--bs-tertiary-color: rgba(230, 237, 243, 0.5);
		--bs-tertiary-bg: #161b22;
		color-scheme: dark;
	}
}

/* ===== Base Typography ===== */
body {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	font-family: var(--msl-font-sans);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--msl-ink);
}

h1 {
	font-size: 2.1rem;
	margin-bottom: 1.25rem;
}

h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

/* More air above headings that follow flowing content */
h2:not(:first-child) { margin-top: 2.25rem; }
h3:not(:first-child) { margin-top: 1.75rem; }

/* Page title: the first h1 of the content area, with a full-width rule */
.content-container > h1:first-child {
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--bs-border-color);
}

p { margin-bottom: 1.1rem; }

a {
	color: var(--msl-primary);
	text-decoration: none;
	transition: color var(--msl-transition);
}

a:hover {
	color: var(--msl-primary-hover);
	text-decoration: underline;
}

.lead {
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.65;
	color: var(--bs-body-color);
}

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

/* Inline code and code blocks: calm, readable, no Bootstrap pink */
code {
	color: var(--msl-code);
	font-family: var(--msl-font-mono);
	font-size: 0.86em;
	background-color: rgba(14, 28, 44, 0.05);
	padding: 0.1em 0.35em;
	border-radius: 4px;
	overflow-wrap: anywhere;
}

pre {
	font-family: var(--msl-font-mono);
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--bs-body-color);
	background-color: var(--msl-surface) !important;
	border: 1px solid var(--bs-border-color) !important;
	border-radius: 6px !important;
	padding: 0.9rem 1rem;
	overflow-x: auto;
}

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

@media (prefers-color-scheme: dark) {
	code { background-color: rgba(255, 255, 255, 0.06); }

	/* Content pages use Bootstrap's light-only .bg-light on code blocks and
	   notes: its class + !important beats the pre rule above, so remap it. */
	.bg-light {
		background-color: var(--msl-surface) !important;
		color: var(--bs-body-color);
	}
}

/* ===== Site shell ===== */
.site-skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1100;
	padding: 0.5rem 1rem;
	background: var(--msl-primary);
	color: #fff;
	border-radius: 6px;
}

/* ===== Header: logo, menu, actions on one sticky row ===== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background-color: var(--msl-header-bg);
	border-bottom: 1px solid var(--bs-border-color);
	transition: box-shadow var(--msl-transition);
}

.site-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(14, 28, 44, 0.08);
}

.site-navbar {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

.site-brand img {
	height: 44px;
	width: auto;
	display: block;
}

@media (prefers-color-scheme: dark) {
	/* The logo is black text on transparent: invert it on dark backgrounds */
	.site-brand img { filter: invert(1) hue-rotate(180deg); }
}

.site-navbar .navbar-nav .nav-link {
	color: var(--bs-body-color);
	font-weight: 500;
	font-size: 0.93rem;
	padding: 0.5rem 0.85rem;
	border-radius: 6px;
	transition: color var(--msl-transition), background-color var(--msl-transition);
}

.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link:focus,
.site-navbar .navbar-nav .nav-link.show {
	color: var(--msl-primary);
	background-color: var(--bs-dropdown-link-hover-bg);
}

.site-navbar .navbar-nav .nav-link.active {
	color: var(--msl-primary);
	font-weight: 600;
}

.site-navbar .navbar-toggler {
	border-color: var(--bs-border-color);
}

/* The navbar has no navbar-light/-dark theme class, so draw the icon here */
.site-navbar .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2831, 45, 61, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
	.site-navbar .navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230, 237, 243, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}
}

.site-nav-actions {
	align-items: center;
	gap: 0.25rem;
}

.site-nav-cta {
	margin-left: 0.5rem;
	padding: 0.4rem 0.95rem;
}

@media (min-width: 992px) {
	.site-navbar .navbar-nav:first-child { margin-left: 1.5rem; }
}

@media (max-width: 991.98px) {
	.site-navbar .navbar-collapse { padding: 0.75rem 0 0.5rem; }
	.site-nav-actions { align-items: flex-start; }
	.site-nav-cta { margin: 0.5rem 0 0 0.85rem; }
}

/* ===== Dropdowns ===== */
.dropdown-menu {
	background-color: var(--bs-dropdown-bg);
	color: var(--bs-dropdown-color);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--msl-radius);
	box-shadow: 0 10px 30px rgba(14, 28, 44, 0.12), 0 2px 6px rgba(14, 28, 44, 0.06);
	padding: 0.4rem;
	min-width: 260px;
}

.dropdown-item {
	color: var(--bs-dropdown-color);
	font-size: 0.9rem;
	padding: 0.5rem 0.85rem;
	border-radius: 6px;
	transition: background-color var(--msl-transition), color var(--msl-transition);
	white-space: normal;
	line-height: 1.4;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--bs-dropdown-link-hover-bg);
	color: var(--msl-primary);
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--bs-dropdown-link-hover-bg);
	color: var(--msl-primary);
	font-weight: 600;
}

.dropdown-item.active .text-muted { color: var(--msl-muted) !important; }

/* ===== Cards =====
   Flat panels with a hairline border. overflow:hidden on .card clips the
   header corners, so sub-elements carry no radius of their own. */
.card {
	background-color: var(--bs-card-bg);
	color: var(--bs-body-color);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--msl-radius);
	box-shadow: none;
	overflow: hidden;
}

/* Section header of a content card: neutral strip, ink text, brand-blue icon */
.card-header {
	background-color: var(--msl-surface);
	color: var(--msl-ink);
	border-bottom: 1px solid var(--bs-border-color);
	border-radius: 0 !important;
	padding: 0.8rem 1.25rem;
	font-size: 1rem;
	font-weight: 650;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.card-header svg { color: var(--msl-primary); flex-shrink: 0; }

.card-body {
	background-color: var(--bs-card-bg);
	color: var(--bs-body-color);
	padding: 1.5rem;
}

/* Legacy "blue" card border class used across content pages: neutral now */
.card.border-pc-blue { border-color: var(--bs-border-color) !important; }

/* ===== Product CTA cards ===== */
.product-cta-card {
	border: 1px solid var(--bs-border-color) !important;
	border-radius: var(--msl-radius) !important;
	transition: border-color var(--msl-transition);
}

.product-cta-card:hover {
	border-color: var(--msl-primary) !important;
}

.product-cta-card .cta-icon {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.75rem;
}

/* ===== Screenshot thumbnails ===== */
.screenshot-thumb {
	cursor: zoom-in;
	border: 1px solid var(--bs-border-color);
	border-radius: 6px;
	transition: border-color var(--msl-transition);
	display: block;
}

.screenshot-thumb:hover {
	border-color: var(--msl-primary);
}

/* ===== Forms ===== */
.form-control,
.form-select {
	background-color: var(--bs-card-bg);
	color: var(--bs-body-color);
	border-color: var(--bs-border-color);
	border-radius: 6px;
	padding: 0.5rem 0.85rem;
	transition: border-color var(--msl-transition), box-shadow var(--msl-transition);
}

.form-control:focus,
.form-select:focus {
	background-color: var(--bs-card-bg);
	color: var(--bs-body-color);
	border-color: var(--msl-primary);
	box-shadow: 0 0 0 3px rgba(2, 113, 174, 0.15);
}

/* ===== Buttons ===== */
.btn {
	border-radius: 6px;
	font-weight: 600;
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
	color: #fff;
	background-color: var(--msl-primary);
	border-color: var(--msl-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary {
	color: #fff;
	background-color: var(--msl-primary-hover);
	border-color: var(--msl-primary-hover);
}

.btn-outline-primary {
	color: var(--msl-primary);
	border-color: var(--msl-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
	color: #fff;
	background-color: var(--msl-primary);
	border-color: var(--msl-primary);
}

.btn-primary:focus,
.btn-outline-primary:focus {
	box-shadow: 0 0 0 3px rgba(2, 113, 174, 0.25);
}

@media (prefers-color-scheme: dark) {
	.btn-primary,
	.btn-primary:hover,
	.btn-primary:focus,
	.btn-primary:active,
	.btn-outline-primary:hover,
	.btn-outline-primary:focus,
	.btn-outline-primary:active {
		color: #0d1117;
	}
}

/* ===== Pagination ===== */
.pagination .page-link {
	background-color: var(--bs-card-bg);
	color: var(--bs-body-color);
	border-color: var(--bs-border-color);
}

.pagination .page-link:hover,
.pagination .page-link:focus {
	background-color: var(--bs-dropdown-link-hover-bg);
	color: var(--msl-primary);
}

.pagination .active .page-link {
	background-color: var(--msl-primary);
	border-color: var(--msl-primary);
	color: #fff;
}

.pagination .page-item.disabled .page-link {
	background-color: var(--bs-card-bg);
	color: var(--bs-body-color);
	opacity: 0.5;
}

/* ===== List groups ===== */
.list-group-item {
	background-color: var(--bs-card-bg);
	color: var(--bs-body-color);
	border-color: var(--bs-border-color);
}

.list-group-item .text-muted {
	color: var(--bs-body-color) !important;
	opacity: 0.65;
}

/* ===== Modals ===== */
.modal-content {
	background-color: var(--bs-card-bg);
	color: var(--bs-body-color);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--msl-radius);
	box-shadow: 0 20px 60px rgba(0,0,0,0.2);
	overflow: hidden;
}

.modal-header,
.modal-footer { border-color: var(--bs-border-color); }

/* ===== Tables ===== */
.table {
	color: var(--bs-body-color);
	background-color: var(--bs-card-bg);
}

.table th,
.table td {
	color: var(--bs-body-color);
	background-color: var(--bs-card-bg);
	border-color: var(--bs-border-color);
	padding: 0.65rem 0.85rem;
}

.table thead th {
	background-color: var(--msl-surface);
	color: var(--msl-muted);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--bs-border-color);
}

/* ===== Content area ===== */
.content-container {
	padding-top: 2.5rem;
	padding-bottom: 3.5rem;
}

/* ===== Footer ===== */
.site-footer {
	background-color: var(--msl-footer-bg);
	color: rgba(255, 255, 255, 0.68);
	padding: 3rem 0 1.5rem;
	font-size: 0.9rem;
}

.site-footer-brand {
	color: #ffffff;
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

.site-footer-about {
	max-width: 340px;
	line-height: 1.6;
}

.site-footer-heading {
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.85rem;
}

.site-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer-links li { margin-bottom: 0.45rem; }

.site-footer a {
	color: rgba(255, 255, 255, 0.68);
}

.site-footer a:hover {
	color: #ffffff;
	text-decoration: none;
}

.site-footer-bottom {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ===== Color utilities ===== */
.font-pc-blue {
	color: var(--msl-primary);
	font-family: var(--msl-font-sans);
}

/* Highlighted block (e.g. the recommended plan): solid interactive blue */
.bg-pc-blue,
.card-header.bg-pc-blue {
	background-color: var(--msl-primary) !important;
	color: #ffffff;
	border-bottom-color: var(--msl-primary);
}

.card-header.bg-pc-blue svg { color: #ffffff; }

.border-pc-blue { border-color: var(--msl-primary) !important; }

/* ===== Misc ===== */
.tooltip-wide { max-width: 100%; min-width: 80%; }
.preserve-newlines { white-space: pre-line; }
.email-address { unicode-bidi: bidi-override; direction: rtl; }

.badge {
	font-weight: 600;
	letter-spacing: 0.03em;
}

.alert {
	border-radius: 6px;
	border-left-width: 4px;
}

/* ===== Homepage hero ===== */
/* Full-width dark band holding the page title, the calls to action and the
   rotating canvas scenes (js/hero-*.js), which size themselves on the band.
   The gradients below double as the no-JS fallback. */
.homepage-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 45% 90% at 72% 50%, rgba(4, 163, 237, 0.26) 0%, rgba(4, 163, 237, 0) 70%),
		linear-gradient(115deg, #021726 0%, #03304b 48%, #054e77 100%);
	isolation: isolate;
}

/* Faint dot matrix, fading out toward the globe */
.homepage-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.3px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%);
	mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%);
}

/* Hairline highlight along the bottom edge */
.homepage-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(4, 163, 237, 0.9) 55%, transparent 100%);
}

.homepage-hero canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Scene rotation (js/hero-rotator.js): stacked canvases cross-fade */
.homepage-hero .hero-scene {
	opacity: 0;
	transition: opacity 1s ease;
}

.homepage-hero .hero-scene.is-active {
	opacity: 1;
}

/* Scene selector: small progress bars, bottom right. The fill duration is
   set from JS (--hero-slot) so it always matches the rotation timer. */
.hero-dots {
	position: absolute;
	right: 14px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	gap: 6px;
}

.hero-dot {
	position: relative;
	width: 22px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.25);
	cursor: pointer;
	overflow: hidden;
}

/* Larger hit area than the visible bar */
.hero-dot::before {
	content: "";
	position: absolute;
	inset: -8px -3px;
}

.hero-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 0;
	border-radius: 2px;
	background: #ffffff;
}

.hero-dot.is-active::after {
	animation: msl-hero-progress var(--hero-slot, 10s) linear forwards;
}

.hero-dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* In the flow (the band is as tall as its copy); the scrim keeps the text
   readable over the scenes. Only the copy takes pointer events. */
.homepage-hero-overlay {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(460px, 62vh, 600px);
	padding: 4.5rem 0 4.25rem;
	background: linear-gradient(90deg, rgba(2, 23, 38, 0.88) 0%, rgba(2, 23, 38, 0.55) 42%, rgba(2, 23, 38, 0) 68%);
	pointer-events: none;
}

.homepage-hero-copy {
	max-width: 620px;
	pointer-events: auto;
}

.homepage-hero-eyebrow {
	color: #7fd3f7;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.homepage-hero-title {
	color: #ffffff;
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	font-weight: 750;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-wrap: balance;
	margin: 0 0 1.25rem;
}

.homepage-hero-lead {
	color: rgba(255, 255, 255, 0.84);
	font-size: 1.15rem;
	line-height: 1.6;
	max-width: 34rem;
	margin: 0 0 2rem;
}

.homepage-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.homepage-hero-actions .btn-lg,
.cta-band-actions .btn-lg {
	font-size: 1rem;
	padding: 0.7rem 1.5rem;
	border-radius: 7px;
}

.homepage-hero-actions .btn-light {
	color: #03304b;
	background-color: #ffffff;
	border-color: #ffffff;
}

.homepage-hero-actions .btn-light:hover,
.homepage-hero-actions .btn-light:focus {
	color: #021726;
	background-color: #dff3fd;
	border-color: #dff3fd;
}

.homepage-hero-actions .btn-outline-light {
	border-color: rgba(255, 255, 255, 0.45);
}

.homepage-hero a:focus-visible {
	outline-color: #ffffff;
}

.homepage-hero-note {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.85rem;
	margin: 1.1rem 0 0;
}

/* ===== Download page item rows ===== */
.download-item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--bs-border-color);
}

.download-item:last-child { border-bottom: none; }

.download-item-icon {
	color: var(--bs-msl-blue);
	flex-shrink: 0;
	margin-top: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
	.content-container { padding-top: 1.5rem; padding-bottom: 2.5rem; }
	h1 { font-size: 1.6rem; }
	.homepage-hero-overlay {
		min-height: 0;
		padding: 3rem 0 3.25rem;
		background: linear-gradient(90deg, rgba(2, 23, 38, 0.9) 0%, rgba(2, 23, 38, 0.78) 60%, rgba(2, 23, 38, 0.55) 100%);
	}
	.homepage-hero-lead { font-size: 1.05rem; }
	.home-band { padding: 3.25rem 0; }
	.cta-band { padding: 1.75rem 1.5rem; }
}

/* ===== Motion / animations ===== */

@keyframes msl-dropdown-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes msl-hero-progress {
	from { width: 0; }
	to { width: 100%; }
}

/* Dropdown menus — animate in instead of an instant toggle. Using an
   animation (not a transition) so it still plays correctly from
   display:none, which Bootstrap toggles via its own .show class. */
.dropdown-menu.show {
	animation: msl-dropdown-in 0.2s ease both;
}

/* Client logos: a calm static row (grayscale until hovered) */
.logo-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem 3rem;
}

.logo-strip img {
	height: 44px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter var(--msl-transition), opacity var(--msl-transition);
}

.logo-strip a:hover img {
	filter: none;
	opacity: 1;
}

/* ===== Product pages ===== */
/* Header: identity + calls to action on the left, fact sheet on the right */
.product-hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 1rem;
	padding: 2.75rem 2.75rem 2.5rem;
	border: 1px solid var(--bs-border-color);
	border-radius: 12px;
	background-color: var(--msl-surface);
	background-image: radial-gradient(circle at 100% 0%, rgba(4, 163, 237, 0.12), rgba(4, 163, 237, 0) 45%);
}

.product-hero-eyebrow {
	color: var(--msl-primary);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.6rem;
}

.product-hero-title {
	font-size: 2.6rem;
	letter-spacing: -0.025em;
	margin-bottom: 0.75rem;
}

.product-hero-tagline {
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--msl-muted);
	max-width: 36rem;
	margin-bottom: 1.75rem;
}

.product-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.product-hero-actions .btn-lg {
	font-size: 1rem;
	padding: 0.65rem 1.4rem;
	border-radius: 7px;
}

.product-hero-note {
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	color: var(--msl-muted);
}

.product-glance {
	padding: 1.25rem 1.5rem 0.5rem;
	border: 1px solid var(--bs-border-color);
	border-radius: 10px;
	background-color: var(--bs-card-bg);
	box-shadow: 0 10px 30px rgba(14, 28, 44, 0.07);
}

.product-glance-title {
	color: var(--msl-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}

.product-glance-list { margin: 0; }

.product-glance-row {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 1rem;
	padding: 0.7rem 0;
	border-top: 1px solid var(--bs-border-color);
}

.product-glance-row:first-child { border-top: 0; }

.product-glance-row dt {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--msl-muted);
}

.product-glance-row dd {
	margin: 0;
	font-size: 0.93rem;
	font-weight: 500;
	color: var(--msl-ink);
}

/* Sections: an editorial flow (heading + rule) instead of stacked boxes */
.product-page > .card {
	margin-top: 3.5rem !important;
	border: 0 !important;
	border-radius: 0;
	background: none;
	overflow: visible;
}

.product-page > .card > .card-header {
	padding: 0 0 0.8rem;
	background: none;
	border-bottom: 1px solid var(--bs-border-color);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	gap: 0.75rem;
}

.product-page > .card > .card-header svg {
	width: 22px;
	height: 22px;
}

.product-page > .card > .card-body {
	padding: 1.5rem 0 0;
	background: none;
}

@media (max-width: 767.98px) {
	.product-hero { padding: 1.75rem 1.25rem; }
	.product-hero-title { font-size: 2rem; }
	.product-glance-row { grid-template-columns: 6.5rem 1fr; }
}

/* ===== Homepage sections ===== */
/* The homepage is full width (ViewData["FullWidth"]): a stack of bands, each
   with its own .container. */
.content-full { padding: 0; }

.home-band { padding: 5rem 0; }

.home-band-tint {
	background-color: var(--msl-surface);
	border-top: 1px solid var(--bs-border-color);
	border-bottom: 1px solid var(--bs-border-color);
}

.section-eyebrow {
	color: var(--msl-primary);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.home-band .home-h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	letter-spacing: -0.022em;
	line-height: 1.18;
	text-wrap: balance;
	max-width: 24em;
	margin: 0 0 1rem;
}

.home-intro {
	color: var(--msl-muted);
	font-size: 1.1rem;
	max-width: 44rem;
	margin-bottom: 2.5rem;
}

.home-prose .lead {
	color: var(--msl-ink);
	font-size: 1.2rem;
	font-weight: 500;
}

.home-more {
	display: inline-block;
	margin-top: 2rem;
	font-weight: 600;
}

.home-after {
	color: var(--msl-muted);
	margin: 2.5rem 0 0;
}

/* Proof: four figures, then the customer logos */
.home-proof { padding: 0 0 3.5rem; }

.home-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	border-bottom: 1px solid var(--bs-border-color);
}

.home-stat {
	padding: 2.25rem 1.75rem 2.25rem 0;
}

.home-stat + .home-stat {
	padding-left: 1.75rem;
	border-left: 1px solid var(--bs-border-color);
}

.home-stat dt {
	color: var(--msl-ink);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-bottom: 0.4rem;
}

.home-stat dd {
	color: var(--msl-muted);
	font-size: 0.92rem;
	line-height: 1.5;
	margin: 0;
}

.home-clients {
	padding-top: 2.75rem;
	text-align: center;
}

.home-clients-label {
	color: var(--msl-muted);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

.home-clients .home-more {
	margin-top: 1.75rem;
	font-size: 0.92rem;
}

@media (max-width: 991.98px) {
	.home-stats { grid-template-columns: repeat(2, 1fr); }
	.home-stat { padding: 1.5rem 1.25rem 1.5rem 0; }
	.home-stat + .home-stat { padding-left: 0; border-left: 0; }
	.home-stat:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--bs-border-color); }
	.home-stat:nth-child(n+3) { border-top: 1px solid var(--bs-border-color); }
	.home-stat dt { font-size: 1.3rem; }
}

/* Product tiles: the whole tile is the link */
.product-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem;
	background-color: var(--bs-card-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: 12px;
	color: var(--bs-body-color);
	transition: border-color var(--msl-transition), box-shadow var(--msl-transition), transform var(--msl-transition);
}

.product-tile:hover,
.product-tile:focus-visible {
	color: var(--bs-body-color);
	text-decoration: none;
	border-color: var(--msl-primary);
	box-shadow: 0 12px 32px rgba(14, 28, 44, 0.1);
	transform: translateY(-2px);
}

.product-tile-scene {
	display: block;
	margin-bottom: 1.35rem;
	border-radius: 8px;
	background-color: rgba(4, 163, 237, 0.07);
	transition: background-color 0.3s ease;
}

.product-tile:hover .product-tile-scene { background-color: rgba(4, 163, 237, 0.12); }

.product-tile-situation {
	color: var(--msl-primary);
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.product-tile-name {
	color: var(--msl-ink);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin-bottom: 0.6rem;
}

.product-tile-text {
	color: var(--msl-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	flex-grow: 1;
}

.product-tile-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bs-border-color);
}

.product-tile-tag {
	color: var(--msl-muted);
	font-size: 0.8rem;
	font-weight: 600;
}

.product-tile-tag.is-paid { color: var(--msl-ink); }

.product-tile-arrow {
	color: var(--msl-primary);
	font-size: 1.1rem;
	transition: transform var(--msl-transition);
}

.product-tile:hover .product-tile-arrow { transform: translateX(4px); }

/* Research: an always-dark band (same family as the hero and the footer) */
.home-band-dark {
	background-color: #0a1724;
	background-image: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(4, 163, 237, 0.14), rgba(4, 163, 237, 0) 70%);
	color: rgba(255, 255, 255, 0.76);
}

.home-band-dark .section-eyebrow { color: #7fd3f7; }
.home-band-dark .home-h2 { color: #ffffff; }
.home-band-dark a:focus-visible { outline-color: #ffffff; }

.home-talks {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.85rem;
	font-weight: 500;
	margin: 1.5rem 0 1.75rem;
}

.research-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.research-list a {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	column-gap: 1.5rem;
	padding: 1.35rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: inherit;
}

.research-list a:hover { text-decoration: none; }

.research-kind {
	grid-row: span 2;
	color: #7fd3f7;
	font-size: 0.8rem;
	font-weight: 600;
	padding-top: 0.25rem;
}

.research-title {
	color: #ffffff;
	font-size: 1.1rem;
	font-weight: 650;
	line-height: 1.35;
	transition: color var(--msl-transition);
}

.research-list a:hover .research-title { color: #7fd3f7; }

.research-text {
	color: rgba(255, 255, 255, 0.64);
	font-size: 0.93rem;
	line-height: 1.55;
	margin-top: 0.3rem;
}

@media (max-width: 575.98px) {
	.research-list a { grid-template-columns: 1fr; }
	.research-kind { grid-row: auto; padding: 0 0 0.25rem; }
}

/* Services: three plain columns under a rule */
.home-service {
	position: relative;
}

.home-service h3 {
	font-size: 1.1rem;
	margin: 0 0 0.6rem;
	padding-top: 1.1rem;
	border-top: 2px solid var(--msl-ink);
}

.home-service p {
	color: var(--msl-muted);
	font-size: 0.95rem;
	margin: 0;
}

/* Closing call to action: homepage and product pages (_ProductCta) */
.home-band-cta { padding-top: 0; }

.cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	padding: 2.5rem 2.75rem;
	border: 1px solid var(--bs-border-color);
	border-radius: 14px;
	background-color: var(--msl-surface);
	background-image: radial-gradient(circle at 100% 0%, rgba(4, 163, 237, 0.14), rgba(4, 163, 237, 0) 50%);
}

.cta-band > div:first-child { flex: 1 1 22rem; }

.cta-band .cta-band-title {
	font-size: 1.6rem;
	letter-spacing: -0.02em;
	margin: 0 0 0.4rem;
}

.cta-band-text {
	color: var(--msl-muted);
	max-width: 38rem;
	margin: 0;
}

.cta-band-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.product-page > .cta-band { margin-top: 4rem; }

/* Main menu entries with a description line */
.nav-item-name {
	display: block;
	font-weight: 600;
}

.nav-item-desc {
	display: block;
	color: var(--msl-muted);
	font-size: 0.8rem;
}

.site-footer-meta {
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	margin: 0;
}

/* ===== Decorative motion (js/motion.js) ===== */
/* Scroll reveal: the script adds .reveal-pending to elements still below the
   viewport and removes it when they come into view. No script, no hiding. */
.reveal {
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--reveal-delay, 0ms);
}

.reveal-pending {
	opacity: 0;
	transform: translateY(22px);
}

/* Hero copy: each line rises in turn on page load (CSS only) */
@keyframes msl-rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.homepage-hero-copy > * {
	animation: msl-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.homepage-hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.homepage-hero-copy > :nth-child(3) { animation-delay: 0.18s; }
.homepage-hero-copy > :nth-child(4) { animation-delay: 0.28s; }
.homepage-hero-copy > :nth-child(5) { animation-delay: 0.38s; }

/* Figures keep their width while they count up */
.home-stat dt { font-variant-numeric: tabular-nums; }

/* Product tiles: a soft highlight follows the pointer (--mx / --my) */
.product-tile {
	position: relative;
	overflow: hidden;
}

.product-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(4, 163, 237, 0.13), rgba(4, 163, 237, 0) 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.product-tile:hover::before { opacity: 1; }

.product-tile > * { position: relative; }

/* Research list: the row slides and an arrow appears */
.research-list a { transition: padding-left 0.25s ease; }
.research-list a:hover { padding-left: 0.6rem; }

.research-title::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.5rem;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.research-list a:hover .research-title::after {
	opacity: 1;
	transform: translateX(0);
}

/* Text links ending with an arrow, and primary buttons: a small lift */
.home-more { transition: color var(--msl-transition), letter-spacing 0.25s ease; }
.home-more:hover { letter-spacing: 0.01em; text-decoration: none; }

.btn-lg { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color var(--msl-transition), border-color var(--msl-transition), color var(--msl-transition); }
.btn-lg:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(2, 23, 38, 0.18); }
.btn-lg:active { transform: translateY(0); box-shadow: none; }

/* ===== Product overview: short lead, key points, numbered steps ===== */
.overview-lead {
	color: var(--msl-ink);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.01em;
}

.overview-points {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.overview-points li {
	position: relative;
	padding: 0.3rem 0 0.3rem 1.9rem;
	font-weight: 500;
}

.overview-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55rem;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: rgba(4, 163, 237, 0.14) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230382be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4.5 8.2l2.3 2.3 4.7-5'/%3e%3c/svg%3e") center / 0.8rem no-repeat;
}

.product-page .logon-scene { margin: 0 auto; }

.step-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem 2rem;
	list-style: none;
	margin: 2.5rem 0 1.5rem;
	padding: 0;
	counter-reset: step;
}

.step-row li {
	counter-increment: step;
	padding-top: 1rem;
	border-top: 2px solid var(--bs-border-color);
	color: var(--msl-muted);
	font-size: 0.93rem;
}

.step-row li::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	color: var(--msl-primary);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 0.2rem;
}

.step-row-title {
	display: block;
	color: var(--msl-ink);
	font-size: 1.05rem;
	font-weight: 650;
	margin-bottom: 0.3rem;
}

@media (max-width: 767.98px) {
	.step-row { grid-template-columns: 1fr; }
	.overview-lead { font-size: 1.15rem; }
}

/* ===== Product scenes (_ProductScene.cshtml) ===== */
/* Line drawings, in the "before" state at rest and playing to the "after"
   state when the tile is hovered or focused. On touch screens (no hover) they
   show the "after" state. */
.product-scene {
	display: block;
	width: 100%;
	height: 104px;
	fill: none;
	stroke: var(--msl-primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.product-scene .sc-soft { stroke: var(--msl-muted); opacity: 0.75; }
.product-scene .sc-fill { fill: var(--bs-card-bg); }
.product-scene .sc-dash { stroke-dasharray: 3 5; }

.product-scene .sc-move-r,
.product-scene .sc-move-ur { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

.product-scene .sc-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.45s ease 0.3s;
}

.product-scene .sc-show { opacity: 0; transition: opacity 0.35s ease 0.35s; }
.product-scene .sc-hide { transition: opacity 0.25s ease 0.15s; }
.product-scene .sc-late { transition-delay: 0.6s; }

.product-tile:hover .sc-move-r,
.product-tile:focus-visible .sc-move-r { transform: translateX(46px); }

.product-tile:hover .sc-move-ur,
.product-tile:focus-visible .sc-move-ur { transform: translate(46px, -22px); }

.product-tile:hover .sc-draw,
.product-tile:focus-visible .sc-draw { stroke-dashoffset: 0; }

.product-tile:hover .sc-show,
.product-tile:focus-visible .sc-show { opacity: 1; }

.product-tile:hover .sc-hide,
.product-tile:focus-visible .sc-hide { opacity: 0; }

@media (hover: none) {
	.product-scene .sc-move-r { transform: translateX(46px); }
	.product-scene .sc-move-ur { transform: translate(46px, -22px); }
	.product-scene .sc-draw { stroke-dashoffset: 0; }
	.product-scene .sc-show { opacity: 1; }
	.product-scene .sc-hide { opacity: 0; }
}

/* ===== Logon scene (_LogonScene.cshtml) ===== */
/* One 10 s loop shared by every part: card in (6-14 %), PIN typed (22-40 %),
   session opened (46-88 %), card out (88-96 %). */
.logon-scene {
	max-width: 440px;
	margin: 2rem 0 0;
}

.logon-scene svg {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--msl-font-sans);
}

.logon-scene figcaption {
	color: var(--msl-muted);
	font-size: 0.88rem;
	margin-top: 0.9rem;
}

.logon-scene .ls-bezel { fill: #0a1724; stroke: var(--bs-border-color); }
.logon-scene .ls-base { fill: var(--msl-surface); stroke: var(--bs-border-color); stroke-linejoin: round; }
.logon-scene .ls-glow { fill: #04a3ed; opacity: 0; }
.logon-scene .ls-white { fill: #ffffff; }
.logon-scene .ls-avatar { fill: rgba(255, 255, 255, 0.14); stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }
.logon-scene .ls-name { fill: #ffffff; font-size: 14px; font-weight: 600; }
.logon-scene .ls-field { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.55); }
.logon-scene .ls-placeholder { fill: rgba(255, 255, 255, 0.55); font-size: 11px; }
.logon-scene .ls-hint { fill: rgba(255, 255, 255, 0.72); font-size: 11px; }
.logon-scene .ls-title { fill: #ffffff; font-size: 17px; font-weight: 650; }
.logon-scene .ls-ring { fill: rgba(127, 211, 247, 0.14); stroke: #7fd3f7; stroke-width: 2; }
.logon-scene .ls-check { fill: none; stroke: #ffffff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.logon-scene .ls-card-body { fill: var(--bs-card-bg); stroke: var(--msl-primary); stroke-width: 1.5; }
.logon-scene .ls-card-chip { fill: rgba(4, 163, 237, 0.2); stroke: var(--msl-primary); }
.logon-scene .ls-card-line { fill: none; stroke: var(--bs-border-color); stroke-width: 2; stroke-linecap: round; }
.logon-scene .ls-reader { fill: var(--msl-surface); stroke: var(--bs-border-color); stroke-width: 1.5; }
.logon-scene .ls-cable { fill: none; stroke: var(--bs-border-color); stroke-width: 2; }
.logon-scene .ls-led { fill: #2fbf71; }

/* Final state, also the one shown with "reduce motion" */
.logon-scene .ls-lock { opacity: 0; }
.logon-scene .ls-card { transform: translateX(84px); }

@media (prefers-reduced-motion: no-preference) {
	.logon-scene .ls-card { animation: ls-card 10s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
	.logon-scene .ls-led { animation: ls-led 10s linear infinite; }
	.logon-scene .ls-lock { animation: ls-lock 10s linear infinite; }
	.logon-scene .ls-open { animation: ls-open 10s linear infinite; }
	.logon-scene .ls-glow { animation: ls-glow 10s linear infinite; }
	.logon-scene .ls-check { animation: ls-check 10s ease-out infinite; }
	.logon-scene .ls-hint-insert { animation: ls-hint-insert 10s linear infinite; }
	.logon-scene .ls-hint-found { animation: ls-hint-found 10s linear infinite; }
	.logon-scene .ls-placeholder { animation: ls-placeholder 10s linear infinite; }
	/* backwards: a dot stays hidden while it waits for its delay */
	.logon-scene .ls-dot { animation: ls-dot 10s linear infinite backwards; }
	.logon-scene .ls-dot-2 { animation-delay: 0.3s; }
	.logon-scene .ls-dot-3 { animation-delay: 0.6s; }
	.logon-scene .ls-dot-4 { animation-delay: 0.9s; }
	.logon-scene .ls-dot-5 { animation-delay: 1.2s; }
	.logon-scene .ls-dot-6 { animation-delay: 1.5s; }
}

@keyframes ls-card {
	0%, 6% { transform: translateX(0); }
	14%, 88% { transform: translateX(84px); }
	96%, 100% { transform: translateX(0); }
}

@keyframes ls-led {
	0%, 13% { fill: #7d8894; }
	15%, 88% { fill: #2fbf71; }
	90%, 100% { fill: #7d8894; }
}

@keyframes ls-lock {
	0%, 43% { opacity: 1; }
	47%, 92% { opacity: 0; }
	97%, 100% { opacity: 1; }
}

@keyframes ls-open {
	0%, 46% { opacity: 0; }
	51%, 88% { opacity: 1; }
	93%, 100% { opacity: 0; }
}

@keyframes ls-glow {
	0%, 46% { opacity: 0; }
	54%, 86% { opacity: 0.2; }
	93%, 100% { opacity: 0; }
}

@keyframes ls-check {
	0%, 49% { stroke-dashoffset: 1; }
	57%, 100% { stroke-dashoffset: 0; }
}

@keyframes ls-hint-insert {
	0%, 12% { opacity: 1; }
	15%, 100% { opacity: 0; }
}

@keyframes ls-hint-found {
	0%, 14% { opacity: 0; }
	17%, 100% { opacity: 1; }
}

@keyframes ls-placeholder {
	0%, 21% { opacity: 1; }
	22%, 100% { opacity: 0; }
}

@keyframes ls-dot {
	0%, 21.9% { opacity: 0; }
	22%, 70% { opacity: 1; }
	71%, 100% { opacity: 0; }
}

/* Respect reduced-motion preferences: disable decorative motion */
@media (prefers-reduced-motion: reduce) {
	.dropdown-menu.show {
		animation: none;
	}

	.homepage-hero .hero-scene {
		transition: none;
	}

	.product-tile,
	.product-tile-arrow {
		transition: none;
	}

	.product-tile:hover,
	.product-tile:hover .product-tile-arrow {
		transform: none;
	}

	.reveal,
	.research-list a,
	.research-title::after,
	.btn-lg {
		transition: none;
	}

	.reveal-pending {
		opacity: 1;
		transform: none;
	}

	.homepage-hero-copy > * {
		animation: none;
	}

	.btn-lg:hover {
		transform: none;
	}

	.hero-dot.is-active::after {
		animation: none;
		width: 100%;
	}
}

/* Unified keyboard-focus ring */
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.diagram-ctrl-btn:focus-visible,
.screenshot-thumb:focus-visible {
	outline: 2px solid var(--msl-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background-color: rgba(4, 163, 237, 0.22);
	color: inherit;
}

/* ===== Service page: smart card stack diagram (inline SVG, follows the theme) ===== */
.svc-dg {
	--svc-warn: #b45309;
	margin-left: 0;
	margin-right: 0;
}

@media (prefers-color-scheme: dark) {
	.svc-dg { --svc-warn: #f0a830; }
}

/* Keep the labels readable on phones: scroll instead of shrinking */
.svc-dg-scroll { overflow-x: auto; }
.svc-dg svg { display: block; width: 100%; min-width: 720px; height: auto; }

.svc-dg text { font-family: var(--msl-font-sans); }
.svc-dg .h { fill: var(--msl-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.svc-dg .t { fill: var(--msl-ink); font-size: 13px; font-weight: 600; }
.svc-dg .t-key { fill: var(--msl-primary); }
.svc-dg .s { fill: var(--msl-muted); font-size: 11px; }

.svc-dg .layer { fill: var(--bs-card-bg); stroke: var(--bs-border-color); }
.svc-dg .layer-key { fill: rgba(4, 163, 237, 0.12); stroke: var(--msl-primary); stroke-width: 1.5; }
.svc-dg .caller { fill: var(--msl-surface); stroke: var(--bs-border-color); }
.svc-dg .risk { fill: var(--bs-card-bg); stroke: var(--svc-warn); stroke-opacity: 0.55; }
.svc-dg .domain { fill: none; stroke: var(--bs-border-color); stroke-dasharray: 5 4; }

.svc-dg .stack-links path { stroke: var(--bs-border-color); stroke-width: 2; }
.svc-dg .links path { fill: none; stroke: var(--msl-primary); stroke-width: 1.25; }
.svc-dg .dots circle { fill: var(--msl-primary); }
.svc-dg .risk-links path { fill: none; stroke: var(--svc-warn); stroke-width: 1.25; stroke-dasharray: 4 3; }
.svc-dg .num { fill: var(--svc-warn); }
.svc-dg .num-t { fill: var(--bs-body-bg); font-size: 11px; font-weight: 700; }

/* ===== Accordions (product FAQs): follow the theme, Bootstrap's defaults are light-only ===== */
.accordion {
	--bs-accordion-bg: var(--bs-card-bg);
	--bs-accordion-color: var(--bs-body-color);
	--bs-accordion-border-color: var(--bs-border-color);
	--bs-accordion-btn-bg: var(--bs-card-bg);
	--bs-accordion-btn-color: var(--bs-body-color);
	--bs-accordion-active-bg: var(--bs-card-bg);
	--bs-accordion-active-color: var(--msl-primary);
}

@media (prefers-color-scheme: dark) {
	.accordion {
		--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa7b4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
		--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234cbcf0' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
	}
}

/* ===== Admin mode ===== */
:root { --msl-admin: #d9730d; }

.site-header.is-admin { border-top: 3px solid var(--msl-admin); }

.site-section-tag {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	margin-left: 0.75rem;
	padding: 0.1rem 0 0.1rem 0.9rem;
	border-left: 1px solid var(--bs-border-color);
	text-decoration: none;
}
.site-section-tag-top { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--msl-muted); }
.site-section-tag-name { font-weight: 600; color: var(--msl-ink); }
.site-section-tag-admin .site-section-tag-name { color: var(--msl-admin); }

.site-admin-lock {
	margin-left: 0.75rem;
	opacity: 0.25;
	text-decoration: none;
	font-size: 0.8rem;
}
.site-admin-lock:hover { opacity: 0.8; }

/* Anchors land below the sticky header */
.home-band[id] { scroll-margin-top: 4.5rem; }