/* 6lock — showcase site
   Layout concept: a product-launch film. Full-bleed scenes alternate between
   night (ink) and daylight (paper); key ideas pin in place while the scroll
   drives them, the way a keynote holds a slide while it builds.

   Contents: tokens · base · type · surfaces · buttons · nav · motion primitives ·
   hero · proof strip · pinned scenes (threat, how, locks) · sections (quote,
   stakes, films, pillars, compare, bento, audiences, voices, report, finale) ·
   interior pages · film player · reduced motion */

/* ---------- tokens ---------- */
:root {
	--ink: #040a18; /* night ground */
	--ink-2: #0a1530; /* raised night surface */
	--navy: #00193e; /* brand dark blue */
	--blue: #0b34c7; /* brand bright blue */
	--signal: #4d84ff; /* brand blue lifted for night scenes */
	--ice: #aec0ff; /* brand light blue */
	--paper: #f4f6fb; /* daylight ground */
	--mist: #e9f0fa; /* brand extra-light blue */
	--fg: #f2f5ff;
	--fg-dim: #93a0bf;
	--ink-text: #0b1328;
	--ink-dim: #5b6680;
	--line: rgba(174, 192, 255, 0.14);
	--line-paper: rgba(11, 19, 40, 0.1);
	--ok: #3ddc97;
	--ok-ink: #05603f;
	--threat: #ff5a4e;

	--display: 'GT America', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--wrap: 1180px;
	--gutter: clamp(16px, 4vw, 40px);
	--section: clamp(88px, 11vw, 156px); /* vertical rhythm between sections */
	--head-gap: clamp(44px, 6vw, 80px); /* section heading to content */
	--nav-h: 60px;

	/* motion: one easing for every transition; loops breathe on a sine */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-loop: cubic-bezier(0.45, 0, 0.55, 1);
	--t-fast: 0.3s; /* hover, colour */
	--t-med: 0.6s; /* state changes inside scenes */
	--t-slow: 1s; /* reveals */
	color-scheme: dark;
}

@font-face {
	font-family: 'GT America';
	src: url('../fonts/gtamerica-light.woff2') format('woff2');
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: 'GT America';
	src: url('../fonts/gtamerica-regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'GT America';
	src: url('../fonts/gtamerica-medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'GT America';
	src: url('../fonts/gtamerica-bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
	margin: 0;
	background: var(--ink);
	color: var(--fg);
	font-family: var(--display);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img,
svg,
video,
canvas {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 3px;
	border-radius: 4px;
}
h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.04;
	text-wrap: balance;
}
p {
	margin: 0;
	text-wrap: pretty;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.narrow {
	max-width: 820px;
}
.stack {
	display: grid;
	gap: 18px;
	align-content: start;
}

/* ---------- type ---------- */
.t-mega {
	font-size: clamp(3.2rem, 11vw, 9.5rem);
	letter-spacing: -0.055em;
	line-height: 0.92;
}
.t-hero {
	font-size: clamp(2.6rem, 7.2vw, 6rem);
	letter-spacing: -0.045em;
	line-height: 0.98;
}
.t-1 {
	font-size: clamp(2.2rem, 5.4vw, 4.4rem);
	letter-spacing: -0.04em;
}
.t-2 {
	font-size: clamp(1.8rem, 3.6vw, 2.9rem);
	letter-spacing: -0.035em;
}
.t-3 {
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.lede {
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	line-height: 1.5;
	color: var(--fg-dim);
	max-width: 40ch;
}
.eyebrow {
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--signal);
	font-weight: 500;
}
.eyebrow.is-threat {
	color: var(--threat);
}
.eyebrow.is-white {
	color: #fff;
	opacity: 0.8;
}
.dim {
	color: var(--fg-dim);
}
.grad {
	background: linear-gradient(
		100deg,
		#fff 10%,
		var(--ice) 55%,
		var(--signal) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.blue {
	color: var(--signal);
}
.mono {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
}
.tabnum {
	font-variant-numeric: tabular-nums;
}
.ok {
	color: var(--ok);
}

/* ---------- surfaces ---------- */
.night {
	background: var(--ink);
	color: var(--fg);
}
.day {
	background: var(--paper);
	color: var(--ink-text);
	color-scheme: light;
}
.day .lede,
.day .dim {
	color: var(--ink-dim);
}
.day .eyebrow {
	color: var(--blue);
}
.day .grad {
	background-image: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%);
}
.day .blue {
	color: var(--blue);
}

.section {
	padding-block: var(--section);
	position: relative;
}
.section.flush {
	padding-top: 0;
}
.section-head {
	display: grid;
	gap: 20px;
	margin-bottom: var(--head-gap);
}
.center {
	text-align: center;
	justify-items: center;
}
.center .lede {
	margin-inline: auto;
}

/* ---------- buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding-inline: 22px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 0.98rem;
	letter-spacing: -0.01em;
	transition:
		transform var(--t-fast) var(--ease),
		background-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease);
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.btn-primary {
	background: var(--blue);
	color: #fff;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08) inset,
		0 10px 30px -10px rgba(11, 52, 199, 0.8);
}
.btn-primary:hover {
	background: #1a45e0;
	transform: translateY(-1px);
}
.btn-ghost {
	background: transparent;
	color: var(--fg);
	box-shadow: 0 0 0 1px var(--line) inset;
}
.btn-ghost:hover {
	box-shadow: 0 0 0 1px var(--ice) inset;
}
.day .btn-ghost {
	color: var(--ink-text);
	box-shadow: 0 0 0 1px var(--line-paper) inset;
}
.day .btn-ghost:hover {
	box-shadow: 0 0 0 1px var(--blue) inset;
}
.btn.magnetic {
	transform: translate(var(--mx, 0px), var(--my, 0px));
}
.link-arrow {
	color: var(--signal);
	font-weight: 500;
	display: inline-flex;
	gap: 6px;
	align-items: center;
}
.link-arrow::after {
	content: '›';
	font-size: 1.3em;
	line-height: 1;
	transition: transform var(--t-fast) var(--ease);
}
.link-arrow:hover::after {
	transform: translateX(4px);
}
.day .link-arrow {
	color: var(--blue);
}
.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}
.center .cta-row {
	justify-content: center;
}

/* ---------- announcement + nav ---------- */
.announce {
	display: flex;
	justify-content: center;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	padding: 10px var(--gutter);
	font-size: 0.85rem;
	color: var(--fg-dim);
	background: linear-gradient(
		90deg,
		transparent,
		rgba(77, 132, 255, 0.12),
		transparent
	);
	border-bottom: 1px solid var(--line);
	text-align: center;
}
.announce strong {
	color: var(--fg);
	font-weight: 500;
}
/* the bar takes its surface from whatever section is under it (site.js sets .is-day) */
.nav {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 50;
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	background: rgba(4, 10, 24, 0.66);
	border-bottom: 1px solid var(--line);
	color: #fff;
	transition:
		background-color var(--t-med) var(--ease),
		border-color var(--t-med) var(--ease),
		color var(--t-med) var(--ease);
}
.nav.is-day {
	background: rgba(244, 246, 251, 0.82);
	border-color: var(--line-paper);
	color: var(--ink-text);
}
.nav-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--nav-h);
}
.brand {
	display: flex;
	align-items: center;
	color: inherit;
}
.brand svg {
	height: 22px;
	width: auto;
}
.nav-links {
	display: flex;
	gap: 24px;
	font-size: 0.88rem;
	color: var(--fg-dim);
	margin-inline-start: auto;
}
.nav-links a {
	transition: color var(--t-fast) var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current='page'] {
	color: #fff;
}
.nav-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}
.nav-actions .btn {
	height: 34px;
	padding-inline: 16px;
	font-size: 0.85rem;
}
.nav-login {
	font-size: 0.88rem;
	color: var(--fg-dim);
	padding-inline: 8px;
	transition: color var(--t-fast) var(--ease);
}
.nav-login:hover {
	color: #fff;
}
.nav.is-day .nav-links,
.nav.is-day .nav-login {
	color: var(--ink-dim);
}
.nav.is-day .nav-links a:hover,
.nav.is-day .nav-links a[aria-current='page'],
.nav.is-day .nav-login:hover {
	color: var(--ink-text);
}
.nav-toggle {
	display: none;
	background: none;
	border: 0;
	color: inherit;
	width: 40px;
	height: 40px;
	margin-inline-start: auto;
	cursor: pointer;
}
.nav-toggle span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	margin: 5px auto;
	transition: transform var(--t-fast) var(--ease);
}
@media (max-width: 1040px) {
	.nav-toggle {
		display: block;
	}
	.nav-links,
	.nav-actions {
		display: none;
	}
	.nav.open {
		background: rgba(4, 10, 24, 0.97);
		color: #fff;
	}
	.nav.open .nav-links {
		display: flex;
		flex-direction: column;
		position: absolute;
		inset: var(--nav-h) 0 auto 0;
		gap: 0;
		background: rgba(4, 10, 24, 0.97);
		padding: 12px var(--gutter) 24px;
		margin: 0;
		font-size: 1.4rem;
		border-bottom: 1px solid var(--line);
	}
	.nav.open .nav-links a {
		padding-block: 12px;
		color: #fff;
		border-bottom: 1px solid var(--line);
	}
	.nav.open .nav-toggle span:first-child {
		transform: translateY(3.25px) rotate(45deg);
	}
	.nav.open .nav-toggle span:last-child {
		transform: translateY(-3.25px) rotate(-45deg);
	}
}
.progress-line {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	transform-origin: 0 50%;
	transform: scaleX(var(--sp, 0));
	background: linear-gradient(90deg, var(--blue), var(--signal), var(--ice));
	z-index: 60;
	pointer-events: none;
}

/* ---------- motion primitives ---------- */
.js .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity var(--t-slow) var(--ease),
		transform var(--t-slow) var(--ease);
	transition-delay: var(--d, 0s);
}
.js .reveal.in {
	opacity: 1;
	transform: none;
}
.d1 {
	--d: 0.15s;
}
.d2 {
	--d: 0.3s;
}
.d3 {
	--d: 0.45s;
}

/* split headline: each word rises out of its own mask. Gradient text keeps one
   continuous gradient across the phrase: site.js sizes and offsets every word's
   background to the whole phrase's box. */
.split-words .w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}
.split-words .w > span {
	display: inline-block;
}
.split-words .grad > .w > span,
.split-words .w > .grad {
	background-size: var(--gw, 100%) var(--gh, 100%);
	background-position: var(--gx, 0) var(--gy, 0);
	background-repeat: no-repeat;
}
.split-words .grad.is-split {
	background: none;
	color: inherit;
}
.js .split-words .w > span {
	transform: translateY(105%);
	transition: transform 1.1s var(--ease);
	transition-delay: calc(var(--wi) * 0.055s + var(--d, 0s));
}
.js .split-words.in .w > span {
	transform: none;
}

/* scrubbed text: words light up with scroll */
.scrub em {
	font-style: normal;
}
.scrub .sw {
	color: rgba(242, 245, 255, 0.16);
	transition: color var(--t-fast) var(--ease);
}
.scrub .sw.lit {
	color: inherit;
}
.day .scrub .sw {
	color: rgba(11, 19, 40, 0.14);
}
.day .scrub .sw.lit {
	color: var(--ink-text);
}
.scrub .sw.lit.hl {
	color: var(--signal);
}
.day .scrub .sw.lit.hl {
	color: var(--blue);
}

[data-parallax] {
	will-change: transform;
	transform: translate3d(0, var(--py, 0px), 0);
}

.js .stagger > * {
	opacity: 0;
	transform: translateY(24px) scale(0.985);
	transition:
		opacity 0.9s var(--ease),
		transform 0.9s var(--ease);
	transition-delay: calc(var(--si, 0) * 0.08s);
}
.js .stagger.in > * {
	opacity: 1;
	transform: none;
}

.tilt {
	transform-style: preserve-3d;
	transition:
		transform var(--t-med) var(--ease),
		box-shadow var(--t-med) var(--ease);
}
.tilt:hover {
	transition-duration: 0.15s;
}
.tilt .glare {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(
		400px circle at var(--gx, 50%) var(--gy, 50%),
		rgba(255, 255, 255, 0.12),
		transparent 45%
	);
	opacity: 0;
	transition: opacity var(--t-fast) var(--ease);
}
.tilt:hover .glare {
	opacity: 1;
}

@keyframes bob {
	50% {
		translate: 0 -8px;
	}
}
@keyframes pulse {
	50% {
		opacity: 0.35;
	}
}

/* pause/play for any looping background video (WCAG 2.2.2) */
.motion-toggle {
	position: absolute;
	z-index: 3;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: #fff;
	background: rgba(4, 10, 24, 0.45);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0.7;
	transition:
		opacity var(--t-fast) var(--ease),
		background-color var(--t-fast) var(--ease);
}
.motion-toggle:hover,
.motion-toggle:focus-visible {
	opacity: 1;
	background: rgba(4, 10, 24, 0.7);
}
.motion-toggle svg {
	width: 14px;
	height: 14px;
}
.motion-toggle .i-play,
.motion-toggle[aria-pressed='true'] .i-pause {
	display: none;
}
.motion-toggle[aria-pressed='true'] .i-play {
	display: block;
}

/* ---------- HERO ---------- */
.hero {
	--p: 0;
	position: relative;
	padding-top: clamp(80px, 11vw, 144px);
	overflow: clip;
}
.hero-bg {
	position: absolute;
	inset: 0 0 auto;
	height: min(100svh, 1000px);
	pointer-events: none;
	overflow: hidden;
}
.hero-bg video,
.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0%;
	opacity: calc(0.95 - var(--p) * 0.45);
	transform: scale(calc(1.02 + var(--p) * 0.08));
	transform-origin: 50% 0%;
}
.hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			60% 46% at 50% 34%,
			rgba(4, 10, 24, 0.72),
			rgba(4, 10, 24, 0.2) 70%,
			transparent
		),
		linear-gradient(
			180deg,
			rgba(4, 10, 24, 0.25) 0%,
			rgba(4, 10, 24, 0) 30%,
			rgba(4, 10, 24, 0.55) 70%,
			var(--ink) 100%
		);
}
.hero > .motion-toggle {
	top: 18px;
	right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}
.hero-copy {
	position: relative;
	display: grid;
	gap: 24px;
	justify-items: center;
	text-align: center;
}
.hero-copy .lede {
	text-align: center;
	max-width: 36ch;
	color: #b4bfda;
}
.hero-kicker {
	font-size: clamp(1.2rem, 2.4vw, 1.8rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: #c3cce3;
}
.hero-kicker b {
	color: #fff;
	font-weight: 500;
}
.hero-scene {
	position: relative;
}
.hero-stage {
	position: relative;
	margin-top: clamp(64px, 9vw, 112px);
	height: clamp(520px, 70vw, 720px);
	perspective: 1600px;
}
.hero-stage::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 30%;
	width: min(980px, 120vw);
	aspect-ratio: 1.6;
	transform: translate(-50%, -50%);
	background: radial-gradient(
		closest-side,
		rgba(11, 52, 199, 0.5),
		transparent
	);
	pointer-events: none;
}
.illustrative {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	color: var(--fg-dim);
	text-align: center;
	margin-top: 8px;
}

/* the transaction console (product hero) */
.console {
	position: absolute;
	left: 50%;
	top: 0;
	width: min(720px, 100%);
	transform: translateX(-50%) rotateX(calc((1 - var(--p)) * 18deg))
		scale(calc(0.9 + var(--p) * 0.1));
	transform-origin: 50% 0;
	background: linear-gradient(180deg, #0d1a3a 0%, #081128 100%);
	border-radius: 32px;
	padding: clamp(22px, 4vw, 40px);
	box-shadow:
		0 0 0 1px rgba(77, 132, 255, 0.45),
		0 40px 120px -20px rgba(11, 52, 199, 0.65),
		0 0 0 10px rgba(77, 132, 255, 0.04);
}
.console-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.console-label {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	color: var(--fg-dim);
}
.live-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	padding: 7px 14px;
	border-radius: 999px;
	box-shadow: 0 0 0 1px var(--line) inset;
	color: #fff;
}
.live-pill i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ok);
	box-shadow: 0 0 10px var(--ok);
	animation: pulse 2s var(--ease-loop) infinite;
}
.console h3 {
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	margin-block: 20px 26px;
	line-height: 1.06;
}
.ledger {
	border-radius: 18px;
	box-shadow: 0 0 0 1px var(--line) inset;
	padding: 6px 20px;
	background: rgba(255, 255, 255, 0.015);
}
.ledger-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 13px;
	font-size: 0.95rem;
}
.ledger-row + .ledger-row {
	border-top: 1px dashed var(--line);
}
.ledger-row span:first-child {
	color: var(--fg-dim);
}
.ledger-row span:last-child {
	text-align: end;
}
.check {
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ok);
	color: #fff;
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	vertical-align: -3px;
	margin-inline-end: 6px;
}
.flow {
	margin-top: 28px;
}
.flow-label {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	color: var(--fg-dim);
	margin-bottom: 16px;
}
.flow-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.flow-track::before,
.flow-track::after {
	content: '';
	position: absolute;
	top: 17px;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: var(--line);
}
.flow-track::after {
	background: var(--signal);
	right: auto;
	width: 75%;
	transform-origin: 0 50%;
	transform: scaleX(var(--flow, 0));
	box-shadow: 0 0 12px var(--signal);
	transition: transform var(--t-med) var(--ease);
}
.flow-node {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	color: var(--fg-dim);
	transition: color var(--t-med) var(--ease);
}
.flow-node b {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #0b1636;
	box-shadow: 0 0 0 1px var(--line) inset;
	color: transparent;
	font-size: 14px;
	transition:
		background-color var(--t-med) var(--ease),
		color var(--t-med) var(--ease),
		box-shadow var(--t-med) var(--ease);
}
.flow-node.on {
	color: #fff;
}
.flow-node.on b {
	background: var(--blue);
	color: #fff;
	box-shadow:
		0 0 0 4px rgba(77, 132, 255, 0.2),
		0 0 20px rgba(77, 132, 255, 0.6);
}

.float-chip {
	position: absolute;
	z-index: 2;
	display: flex;
	gap: 12px;
	align-items: center;
	background: rgba(13, 22, 48, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 999px;
	padding: 12px 22px 12px 12px;
	box-shadow:
		0 0 0 1px rgba(77, 132, 255, 0.35),
		0 24px 50px -16px rgba(0, 0, 0, 0.6);
	left: max(0px, calc(50% - 470px));
	top: calc(-44px + (1 - var(--p)) * 40px);
	animation: bob 6s var(--ease-loop) infinite;
}
.float-chip .badge {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--blue);
	color: #fff;
	font-size: 16px;
}
.float-chip b {
	display: block;
	font-weight: 500;
	font-size: 0.95rem;
}
.float-chip small {
	color: var(--fg-dim);
	font-size: 0.82rem;
}
.settle-card {
	position: absolute;
	z-index: 2;
	right: max(0px, calc(50% - 440px));
	bottom: calc(-10px + (1 - var(--p)) * 60px);
	width: min(330px, 70%);
	background: #fff;
	color: var(--ink-text);
	border-radius: 24px;
	padding: 22px 24px;
	box-shadow:
		0 30px 80px -20px rgba(77, 132, 255, 0.7),
		0 0 0 1px rgba(77, 132, 255, 0.2);
	animation: bob 7s var(--ease-loop) -2s infinite;
}
.settle-card small {
	color: var(--ink-dim);
}
.settle-card .tag {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	background: #ddf7ea;
	color: var(--ok-ink);
	font-size: 0.78rem;
	padding: 4px 10px;
	border-radius: 999px;
	margin-block: 8px 4px;
}
.settle-card .amt {
	font-size: 2.6rem;
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.1;
}
.settle-card .bar {
	height: 4px;
	border-radius: 4px;
	background: var(--mist);
	margin-block: 14px 8px;
	overflow: hidden;
}
.settle-card .bar i {
	display: block;
	height: 100%;
	background: var(--blue);
	transform-origin: 0 50%;
	transform: scaleX(var(--settle, 1));
	transition: transform var(--t-med) var(--ease);
}
.settle-card .meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--ink-dim);
}
@media (max-width: 640px) {
	.float-chip {
		top: -40px;
		left: 0;
		padding-right: 16px;
	}
	.settle-card {
		display: none;
	}
	.hero-stage {
		height: auto;
		padding-bottom: 40px;
	}
	.console {
		position: relative;
		transform: none;
		left: 0;
	}
}

/* ---------- proof strip (below the hero) ---------- */
.proof-strip {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: clamp(56px, 7vw, 88px);
	border-radius: 24px;
	background: rgba(10, 21, 48, 0.55);
	box-shadow: 0 0 0 1px var(--line) inset;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.proof {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: center;
	padding: 20px 22px;
	min-width: 0;
}
.proof + .proof {
	box-shadow: 1px 0 0 var(--line) inset;
}
.proof img {
	height: 52px;
	width: auto;
}
.proof .ico {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--signal);
	background: rgba(77, 132, 255, 0.1);
	box-shadow: 0 0 0 1px rgba(77, 132, 255, 0.25) inset;
}
.proof .ico svg {
	width: 22px;
	height: 22px;
}
.proof b {
	display: block;
	font-weight: 500;
	font-size: 0.98rem;
	letter-spacing: -0.01em;
}
.proof small {
	display: block;
	color: var(--fg-dim);
	font-size: 0.8rem;
	line-height: 1.35;
}
@media (max-width: 980px) {
	.proof-strip {
		grid-template-columns: 1fr 1fr;
	}
	.proof:nth-child(3) {
		box-shadow: 0 1px 0 var(--line) inset;
	}
	.proof:nth-child(4) {
		box-shadow:
			1px 0 0 var(--line) inset,
			0 1px 0 var(--line) inset;
	}
}
@media (max-width: 520px) {
	.proof-strip {
		grid-template-columns: 1fr;
	}
	.proof + .proof,
	.proof:nth-child(4) {
		box-shadow: 0 1px 0 var(--line) inset;
	}
}

/* ---------- PINNED SCENES ---------- */
.scene {
	position: relative;
	height: var(--scene-h, 400vh);
}
.scene-sticky {
	position: sticky;
	top: var(--nav-h);
	height: calc(100vh - var(--nav-h));
	height: calc(100svh - var(--nav-h));
	overflow: hidden;
	display: grid;
	align-items: center;
}

/* threat scene */
.threat {
	background: #000;
	--scene-h: 400vh;
}
.threat .scene-sticky {
	background:
		radial-gradient(
			60% 50% at 70% 50%,
			rgba(255, 90, 78, 0.07),
			transparent 70%
		),
		#000;
}
.threat-atmos {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.threat-atmos img {
	position: absolute;
	top: 50%;
	right: -8%;
	width: min(1180px, 90vw);
	height: auto;
	opacity: 0;
	transform: translateY(-50%) scale(1.08);
	transition:
		opacity 1.2s var(--ease),
		transform 1.6s var(--ease);
	-webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
	mask-image: radial-gradient(closest-side, #000 35%, transparent);
}
.threat-atmos img.on {
	opacity: 0.5;
	transform: translateY(-50%) scale(1);
}
.threat-atmos img.on.final {
	opacity: 0.4;
}
.threat-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}
.threat-lines {
	position: relative;
	min-height: 2.3em;
	margin-top: 22px;
	font-size: clamp(2rem, 4.6vw, 3.8rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.04;
}
.threat-lines p {
	position: absolute;
	inset: 0 0 auto 0;
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--t-med) var(--ease),
		transform var(--t-med) var(--ease);
}
.threat-lines p.on {
	opacity: 1;
	transform: none;
}
.threat-lines .final {
	color: var(--threat);
}
.threat-cap {
	margin-top: 28px;
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	color: var(--fg-dim);
	text-transform: uppercase;
	display: flex;
	gap: 16px;
}
.threat-cap span {
	transition: color var(--t-med) var(--ease);
}
.threat-cap span.on {
	color: var(--threat);
}

.fakes {
	position: relative;
	height: min(460px, 60vh);
}
.fake {
	position: absolute;
	inset: 0;
	margin: auto;
	width: min(440px, 100%);
	height: fit-content;
	background: rgba(12, 15, 23, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 22px;
	padding: 22px;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 40px 80px -30px rgba(0, 0, 0, 0.8);
	opacity: 0;
	transform: translateY(40px) scale(0.96);
	transition:
		opacity var(--t-med) var(--ease),
		transform var(--t-med) var(--ease),
		box-shadow var(--t-med) var(--ease);
	font-size: 0.92rem;
}
.fake.on {
	opacity: 1;
	transform: none;
}
.fake.past {
	opacity: 0.18;
	transform: translateY(-30px) scale(0.92);
}
.fake.exposed {
	box-shadow:
		0 0 0 1px var(--threat),
		0 0 60px -10px rgba(255, 90, 78, 0.5);
}
.fakes.fan .fake {
	opacity: 1;
}
.fakes.fan .fake:nth-child(1) {
	transform: translate(-9%, -16%) scale(0.8) rotate(-4deg);
}
.fakes.fan .fake:nth-child(2) {
	transform: translate(7%, -2%) scale(0.8) rotate(3deg);
}
.fakes.fan .fake:nth-child(3) {
	transform: translate(-3%, 16%) scale(0.8) rotate(-1deg);
}
.fake-head {
	display: flex;
	justify-content: space-between;
	color: var(--fg-dim);
	font-size: 0.78rem;
	font-family: var(--mono);
	letter-spacing: 0.06em;
	margin-bottom: 14px;
}
.fake-from {
	display: flex;
	gap: 12px;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3a4769, #1a2240);
	display: grid;
	place-items: center;
	font-weight: 500;
	flex: 0 0 auto;
}
.fake-from small {
	color: var(--fg-dim);
	display: block;
	font-size: 0.8rem;
}
.typo {
	color: #fff;
	border-radius: 3px;
	transition: background-color var(--t-med) var(--ease);
}
.fake.exposed .typo {
	background: rgba(255, 90, 78, 0.4);
}
.fake-body {
	padding-top: 14px;
	color: #d6dbe8;
	display: grid;
	gap: 10px;
}
.fake-body .acct {
	font-family: var(--mono);
	background: rgba(255, 255, 255, 0.04);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 0.82rem;
	color: #fff;
}
.wave {
	display: flex;
	align-items: center;
	gap: 3px;
	height: 64px;
	margin-block: 16px;
}
.wave i {
	flex: 1;
	background: var(--fg-dim);
	border-radius: 2px;
	height: calc(var(--h) * 1%);
	animation: wave 1.2s var(--ease-loop) infinite;
	animation-delay: calc(var(--i) * -0.09s);
	transition: background-color var(--t-med) var(--ease);
}
.fake.exposed .wave i {
	background: var(--threat);
}
@keyframes wave {
	50% {
		transform: scaleY(0.4);
	}
}
.call-actions {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-top: 8px;
}
.call-actions b {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 1.2rem;
}
.call-actions b:first-child {
	background: #e5484d;
}
.call-actions b:last-child {
	background: #30a46c;
}
/* the "LP on video" tile: a blurred, greyed synthetic head reads as a person on a
   bad connection; when the fakes are exposed the blur drops and the mesh shows */
.video-tile {
	aspect-ratio: 16/10;
	border-radius: 14px;
	background: radial-gradient(60% 70% at 50% 40%, #2a3350, #0b0e17);
	position: relative;
	overflow: hidden;
}
.video-tile video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(1.15) contrast(0.9) blur(7px);
	transform: scale(1.12);
	transition:
		filter 1.2s var(--ease),
		transform 1.2s var(--ease);
}
.fake.exposed .video-tile video {
	filter: none;
	transform: none;
}
.video-tile .scan {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent 0 3px,
		rgba(255, 255, 255, 0.04) 3px 4px
	);
}
.fake.exposed .video-tile .scan {
	background: repeating-linear-gradient(
		0deg,
		transparent 0 3px,
		rgba(255, 90, 78, 0.1) 3px 4px
	);
}
.video-tile .name {
	position: absolute;
	left: 12px;
	bottom: 10px;
	font-size: 0.78rem;
	background: rgba(0, 0, 0, 0.5);
	padding: 3px 9px;
	border-radius: 6px;
}
.verdict {
	margin-top: 14px;
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	color: var(--threat);
	opacity: 0;
	transition: opacity var(--t-med) var(--ease);
}
.fake.exposed .verdict {
	opacity: 1;
}
@media (max-width: 820px) {
	.threat-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		align-content: center;
	}
	.threat-lines {
		font-size: clamp(1.8rem, 8vw, 2.4rem);
	}
	.threat-atmos img {
		top: auto;
		bottom: -6%;
		right: -30%;
		width: 150vw;
		transform: scale(1.08);
	}
	.threat-atmos img.on {
		transform: none;
	}
	.fakes {
		height: 340px;
	}
	.fake {
		font-size: 0.82rem;
		padding: 16px;
	}
	.wave {
		height: 40px;
	}
	.fakes.fan .fake:nth-child(1) {
		transform: translate(-5%, -14%) scale(0.74) rotate(-4deg);
	}
	.fakes.fan .fake:nth-child(2) {
		transform: translate(5%, 0) scale(0.74) rotate(3deg);
	}
	.fakes.fan .fake:nth-child(3) {
		transform: translate(-2%, 14%) scale(0.74) rotate(-1deg);
	}
}

/* ---------- quote + stakes ---------- */
.quote-big {
	font-size: clamp(1.9rem, 4.8vw, 3.8rem);
	letter-spacing: -0.035em;
	line-height: 1.1;
	font-weight: 500;
	text-wrap: balance;
}
.quote-by {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 36px;
	font-size: 0.95rem;
}
.quote-by img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}
.quote-by small {
	display: block;
	color: var(--fg-dim);
}
.day .quote-by small {
	color: var(--ink-dim);
}
.center .quote-by {
	justify-content: center;
	text-align: start;
}
.stakes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--line);
}
.stake {
	padding: 40px 28px 8px 0;
	display: grid;
	gap: 14px;
	align-content: start;
}
.stake + .stake {
	padding-left: 28px;
	border-left: 1px solid var(--line);
}
.stake-num {
	font-size: clamp(3rem, 6.4vw, 5.6rem);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 0.95;
	font-variant-numeric: tabular-nums;
}
.stake p {
	color: var(--fg-dim);
	max-width: 22ch;
}
@media (max-width: 900px) {
	.stakes {
		grid-template-columns: 1fr 1fr;
	}
	.stake:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}
	.stake:nth-child(n + 3) {
		border-top: 1px solid var(--line);
	}
}
@media (max-width: 480px) {
	.stakes {
		grid-template-columns: 1fr;
	}
	.stake,
	.stake + .stake {
		padding-left: 0;
		border-left: 0;
	}
	.stake + .stake {
		border-top: 1px solid var(--line);
	}
}
/* big numbers get a soft vertical sheen */
.stake-num,
.tile .big,
.aud-stat b,
.voice-feature .metric b {
	background: linear-gradient(180deg, #fff 30%, var(--ice));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.tile-light .big {
	background-image: linear-gradient(180deg, var(--navy), var(--blue));
}

/* ---------- films ---------- */
.film-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.film-pair > * {
	display: grid;
}
.film-pair .film-card {
	height: 100%;
}
.film-col {
	gap: 18px;
	grid-template-rows: 1fr auto;
	justify-items: start;
}
.film-col > .link-arrow {
	padding-inline: 8px;
}
.film-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
/* cards scale up into place as they scroll in (site.js sets --g from 0 to 1) */
[data-grow] {
	transform: scale(calc(0.9 + var(--g, 1) * 0.1));
	transform-origin: 50% 100%;
}
.film-card {
	position: relative;
	display: grid;
	align-content: start;
	border-radius: 28px;
	overflow: hidden;
	background: var(--ink-2);
	box-shadow: 0 0 0 1px var(--line) inset;
	width: 100%;
}
.day .film-card {
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-paper);
}
.film-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}
.film-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.film-media::after {
	content: '';
	position: absolute;
	inset: 50% 0 0;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
	pointer-events: none;
}
.btn-film {
	position: absolute;
	z-index: 2;
	left: 16px;
	bottom: 16px;
	height: 48px;
	padding: 0 18px 0 7px;
	gap: 10px;
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}
.btn-film:hover {
	background: rgba(255, 255, 255, 0.26);
}
.btn-film svg {
	width: 34px;
	height: 34px;
	padding: 9px 8px 9px 10px;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	transition: transform var(--t-fast) var(--ease);
}
.btn-film:hover svg {
	transform: scale(1.08);
}
.btn-film small {
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	opacity: 0.75;
}
.film-media .motion-toggle {
	top: 14px;
	right: 14px;
}
.film-meta {
	display: grid;
	gap: 10px;
	padding: 22px 26px 28px;
}
.film-meta h3 {
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	line-height: 1.12;
}
.film-meta p {
	color: var(--fg-dim);
	font-size: 0.96rem;
}
.day .film-meta p {
	color: var(--ink-dim);
}
.film-card--feature .film-meta h3 {
	font-size: clamp(1.6rem, 2.8vw, 2.4rem);
}
.film-card--feature .film-meta {
	padding: 26px 30px 32px;
}
@media (max-width: 900px) {
	.film-pair,
	.film-grid {
		grid-template-columns: 1fr;
	}
}

/* "Watch the film" as a secondary CTA next to a primary button */
.btn-watch {
	padding-inline: 8px 20px;
}
.btn-watch svg {
	width: 30px;
	height: 30px;
	padding: 8px 7px 8px 9px;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
}
.btn-watch small {
	font-family: var(--mono);
	font-size: 0.74rem;
	opacity: 0.7;
}
.onboarding-film {
	max-width: 820px;
	margin: var(--head-gap) auto 0;
}

/* ---------- introducing VMM (day) ---------- */
.section-head .iconmark {
	width: clamp(84px, 9vw, 120px);
	height: auto;
	margin-block: -20px -24px;
	color: var(--blue);
}
.pillars {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}
.pillar {
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 0 0 1px var(--line-paper);
	padding: 30px 24px 34px;
	display: grid;
	gap: 10px;
	align-content: start;
}
.pillar svg {
	width: 30px;
	height: 30px;
	color: var(--blue);
	margin-bottom: 10px;
}
.pillar h3 {
	font-size: 1.12rem;
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.pillar p {
	font-size: 0.92rem;
	color: var(--ink-dim);
}
.night .pillar {
	background: var(--ink-2);
	box-shadow: 0 0 0 1px var(--line) inset;
}
.night .pillar p {
	color: var(--fg-dim);
}
@media (max-width: 980px) {
	.pillars {
		grid-template-columns: repeat(2, 1fr);
	}
	.pillar:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}
@media (max-width: 520px) {
	.pillars {
		grid-template-columns: 1fr;
	}
}

/* ---------- how it works (pinned) ---------- */
.how {
	--scene-h: 440vh;
	background: var(--ink);
}
.how .scene-sticky {
	background: radial-gradient(
		40% 60% at 72% 50%,
		rgba(11, 52, 199, 0.35),
		transparent 70%
	);
}
.how-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}
.how .t-2 {
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
}
.how-steps {
	display: grid;
	gap: 6px;
	margin-top: 12px;
}
.how-step {
	padding: 12px 0 12px 26px;
	position: relative;
	opacity: 0.32;
	transition: opacity var(--t-med) var(--ease);
}
.how-step::before,
.how-step::after {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 2px;
	border-radius: 2px;
}
.how-step::before {
	bottom: 12px;
	background: var(--line);
}
.how-step::after {
	height: calc(100% - 24px);
	transform-origin: 50% 0;
	transform: scaleY(var(--fill, 0));
	background: var(--signal);
	box-shadow: 0 0 10px var(--signal);
}
.how-step.on {
	opacity: 1;
}
.how-step .n {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	color: var(--signal);
}
.how-step h3 {
	font-size: clamp(1.2rem, 1.9vw, 1.55rem);
	line-height: 1.15;
	margin-top: 6px;
	transition: font-size var(--t-med) var(--ease);
}
.how-step.on h3 {
	font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.how-step p {
	color: var(--fg-dim);
	max-width: 44ch;
	max-height: 0;
	overflow: hidden;
	transition:
		max-height var(--t-med) var(--ease),
		margin var(--t-med) var(--ease);
}
.how-step.on p {
	max-height: 10em;
	margin-top: 10px;
}
.how-dots {
	display: none;
	justify-content: center;
	gap: 8px;
}
.how-dots i {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--line);
	transition:
		background-color var(--t-fast) var(--ease),
		width var(--t-fast) var(--ease);
}
.how-dots i.on {
	background: var(--signal);
	width: 20px;
}

/* phone: screens push like an app navigation stack — the new screen slides in
   over the old one, which drifts back a third and dims. No crossfade, no ghost. */
.phone {
	height: min(660px, calc(100svh - var(--nav-h) - 72px));
	aspect-ratio: 9 / 19;
	max-width: 78vw;
	margin-inline: auto;
	border-radius: 52px;
	padding: 12px;
	position: relative;
	background: linear-gradient(
		145deg,
		#3a4566,
		#0d1428 38%,
		#1b2440 70%,
		#4a5578
	);
	box-shadow:
		0 0 0 1.5px #4a5578,
		inset 0 0 0 1.5px rgba(255, 255, 255, 0.12),
		0 50px 120px -30px rgba(11, 52, 199, 0.75);
}
.phone::after {
	/* glass highlight along the frame edge */
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(
		125deg,
		rgba(255, 255, 255, 0.18),
		transparent 22%,
		transparent 78%,
		rgba(255, 255, 255, 0.08)
	);
}
.phone-screen {
	position: relative;
	height: 100%;
	border-radius: 42px;
	overflow: hidden;
	background: #f6f8fd;
	color: var(--ink-text);
	isolation: isolate;
}
.phone-screen::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 92px;
	height: 28px;
	border-radius: 20px;
	background: #000;
	z-index: 10;
}
.screen {
	position: absolute;
	inset: 0;
	padding: 58px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 0.82rem;
	background: #f6f8fd;
	transform: translateX(100%);
	transition:
		transform 0.7s var(--ease),
		filter 0.7s var(--ease);
}
.screen.on {
	transform: none;
}
.screen.prev {
	transform: translateX(-30%);
	filter: brightness(0.9);
}
.scr-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.72rem;
	color: var(--ink-dim);
}
.scr-top svg {
	height: 14px;
	width: auto;
	color: var(--ink-text);
}
.scr-kicker {
	color: var(--ink-dim);
}
.scr-title {
	font-size: 1.35rem;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.12;
	margin-top: 4px;
}
.scr-card {
	background: #fff;
	border-radius: 18px;
	padding: 14px 16px;
	box-shadow:
		0 1px 0 rgba(11, 19, 40, 0.04),
		0 0 0 1px rgba(11, 19, 40, 0.06);
	display: grid;
	gap: 8px;
}
.scr-card.is-center {
	text-align: center;
}
.scr-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.78rem;
}
.scr-row span:first-child {
	color: var(--ink-dim);
}
.scr-ok {
	color: var(--ok-ink);
}
.scr-btn {
	margin-top: auto;
	background: var(--blue);
	color: #fff;
	border-radius: 14px;
	text-align: center;
	padding: 13px;
	font-weight: 500;
}
.scr-btn.is-ok {
	background: var(--ok-ink);
}
.scr-note {
	text-align: center;
	font-size: 0.7rem;
	color: var(--ink-dim);
}
.timer {
	font-family: var(--mono);
	font-size: 2.4rem;
	letter-spacing: -0.04em;
	color: var(--blue);
}
.checklist {
	display: grid;
	gap: 10px;
}
.checklist div {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 0.8rem;
}
.checklist .tick {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--mist);
	color: transparent;
	font-size: 11px;
	font-weight: 700;
	transition:
		background-color var(--t-med) var(--ease),
		color var(--t-med) var(--ease);
	flex: 0 0 auto;
}
.screen.on .checklist .tick {
	background: #ddf7ea;
	color: var(--ok-ink);
	transition-delay: calc(var(--i) * 0.25s + 0.4s);
}
.faceid {
	width: 96px;
	height: 96px;
	margin: 8px auto;
	position: relative;
	color: var(--blue);
}
.faceid svg {
	width: 100%;
	height: 100%;
}
.faceid::after {
	content: '';
	position: absolute;
	left: 6px;
	right: 6px;
	height: 2px;
	background: var(--signal);
	box-shadow: 0 0 8px var(--signal);
	top: 10%;
	animation: scan 1.8s var(--ease-loop) infinite alternate;
}
@keyframes scan {
	to {
		top: 88%;
	}
}
.audit {
	display: grid;
	font-family: var(--mono);
	font-size: 0.66rem;
}
.audit div {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	padding-block: 9px;
	border-bottom: 1px solid var(--line-paper);
}
.audit time {
	color: var(--ink-dim);
}
.audit b {
	font-weight: 500;
	font-family: var(--display);
	font-size: 0.76rem;
}
.hash {
	color: var(--blue);
}
/* mobile: heading, then phone, then the active step and dots, all inside the pin */
@media (max-width: 820px) {
	.how-grid {
		grid-template-columns: 1fr;
		gap: 14px;
		align-content: center;
		justify-items: center;
		text-align: center;
	}
	.how-grid > .stack {
		display: contents;
	}
	.how .eyebrow {
		order: 1;
	}
	.how .t-2 {
		order: 2;
		font-size: clamp(1.25rem, 5.4vw, 1.5rem);
		max-width: 24ch;
	}
	.how .phone {
		order: 3;
		height: min(390px, 44svh);
		border-radius: 40px;
		padding: 9px;
	}
	.how-steps {
		order: 4;
		margin: 0;
		min-height: 9.5em;
	}
	.how-dots {
		order: 5;
		display: flex;
	}
	.how-step {
		display: none;
		padding: 0;
	}
	.how-step.on {
		display: block;
	}
	.how-step::before,
	.how-step::after {
		display: none;
	}
	.how-step h3,
	.how-step.on h3 {
		font-size: 1.2rem;
	}
	.how-step p {
		margin-inline: auto;
		font-size: 0.88rem;
	}
	.how-step.on p {
		margin-top: 6px;
	}
	.phone-screen {
		border-radius: 32px;
	}
	.phone-screen::before {
		width: 70px;
		height: 20px;
		top: 8px;
	}
	.screen {
		padding: 40px 12px 12px;
		font-size: 0.68rem;
		gap: 7px;
	}
	.scr-title {
		font-size: 1rem;
	}
	.scr-card {
		padding: 10px 12px;
		border-radius: 14px;
	}
	.scr-row {
		font-size: 0.66rem;
	}
	.scr-btn {
		padding: 10px;
		border-radius: 12px;
	}
	.timer {
		font-size: 1.7rem;
	}
	.faceid {
		width: 64px;
		height: 64px;
	}
	.checklist div {
		font-size: 0.68rem;
	}
}

/* ---------- six locks (pinned) ---------- */
.locks {
	--scene-h: 520vh;
	--k: 0; /* turn progress 0..1, eased by site.js */
	background: var(--ink);
}
.locks .scene-sticky {
	background: radial-gradient(
		45% 55% at 30% 50%,
		rgba(11, 52, 199, calc(0.18 + var(--k) * 0.2)),
		transparent 70%
	);
}
.locks-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}
.ring {
	position: relative;
	width: min(540px, 100%);
	aspect-ratio: 1;
	margin-inline: auto;
}
/* the vault: six bolts that rotate into line with the six locks as they close */
.vault {
	position: absolute;
	inset: 4%;
	width: 92%;
	height: 92%;
	border-radius: 50%;
	opacity: calc(0.42 + var(--k) * 0.5);
	filter: brightness(calc(0.55 + var(--k) * 0.55));
	transform: rotate(calc((1 - var(--k)) * -30deg));
	-webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent);
	mask-image: radial-gradient(closest-side, #000 86%, transparent);
}
.ring svg.orbit {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.ring .orbit circle {
	fill: none;
	stroke: var(--line);
	stroke-width: 0.6;
}
.ring .orbit .arc {
	stroke: var(--signal);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: calc(1 - var(--k));
	filter: drop-shadow(0 0 4px var(--signal));
}
.ring-core {
	position: absolute;
	inset: 29%;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: radial-gradient(
		circle,
		rgba(16, 32, 74, 0.92),
		rgba(4, 10, 24, 0.96) 72%
	);
	box-shadow:
		0 0 0 1px var(--line),
		0 0 calc(var(--locked, 0) * 90px)
			rgba(77, 132, 255, calc(var(--locked, 0) * 0.7));
	transition: box-shadow var(--t-med) var(--ease);
}
.ring-core > svg {
	width: 62%;
	color: #fff;
}
.ring-core canvas {
	position: absolute;
	inset: -12%;
	width: 124%;
	height: 124%;
	max-width: none; /* the base canvas cap would squash the frame and pull the 6 off-center */
	opacity: 0;
	transition:
		opacity var(--t-med) var(--ease),
		filter var(--t-slow) var(--ease);
}
.ring.has-3d .ring-core canvas {
	opacity: 1;
}
.ring.has-3d .ring-core > svg {
	opacity: 0;
}
.lock-node {
	position: absolute;
	width: 17%;
	aspect-ratio: 1;
	margin: -8.5% 0 0 -8.5%;
	border-radius: 50%;
	left: calc(50% + 41% * var(--x));
	top: calc(50% + 41% * var(--y));
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 50% 35%, #142251, #070f26);
	box-shadow:
		0 0 0 1px var(--line) inset,
		0 10px 30px -10px rgba(0, 0, 0, 0.8);
	color: var(--fg-dim);
	transition:
		box-shadow var(--t-med) var(--ease),
		transform var(--t-med) var(--ease);
}
.lock-node.on {
	box-shadow:
		0 0 0 1px rgba(77, 132, 255, 0.6) inset,
		0 0 0 4px rgba(77, 132, 255, 0.16),
		0 0 30px rgba(77, 132, 255, 0.55);
	transform: scale(1.05);
}
/* the lock moment: when the sixth lock closes the mark snaps home (site.js adds .is-locked as it lands).
   The 6 thunks into place, light flashes off it, a shockwave rolls out through the locks, the vault
   bolts clunk home, and everything holds a stronger glow until the scene scrolls away. */
.locks .scene-sticky::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		36% 52% at 27% 50%,
		rgba(77, 132, 255, 0.34),
		rgba(11, 52, 199, 0.12) 45%,
		transparent 72%
	);
	opacity: 0;
	transition: opacity var(--t-slow) var(--ease);
}
.locks.is-locked .scene-sticky::before {
	opacity: 1;
}
.locks-grid {
	position: relative;
}
.ring::after {
	/* shockwave */
	content: '';
	position: absolute;
	inset: 29%;
	border-radius: 50%;
	box-shadow:
		0 0 0 2px rgba(174, 192, 255, 0.9),
		0 0 30px 6px rgba(77, 132, 255, 0.7);
	opacity: 0;
	pointer-events: none;
}
.locks.is-locked .ring::after {
	animation: lockWave 1.3s var(--ease) both;
}
@keyframes lockWave {
	from {
		opacity: 0.95;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(2.6);
	}
}
.ring-core::after {
	/* flash off the mark */
	content: '';
	position: absolute;
	inset: -10%;
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		rgba(235, 242, 255, 0.95),
		rgba(120, 165, 255, 0.55) 40%,
		transparent 72%
	);
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
}
.locks.is-locked .ring-core::after {
	animation: lockFlash 1s var(--ease) both;
}
@keyframes lockFlash {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}
	14% {
		opacity: 0.78;
	}
	100% {
		opacity: 0;
		transform: scale(1.35);
	}
}
.locks.is-locked .ring-core {
	box-shadow:
		0 0 0 1.5px rgba(174, 192, 255, 0.8),
		0 0 44px 6px rgba(77, 132, 255, 0.85),
		0 0 140px 36px rgba(11, 52, 199, 0.65),
		inset 0 0 46px rgba(77, 132, 255, 0.4);
}
.locks.is-locked .ring-core canvas {
	filter: brightness(1.14) drop-shadow(0 0 10px rgba(150, 185, 255, 0.95))
		drop-shadow(0 0 28px rgba(77, 132, 255, 0.75));
	animation: markThunk 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes markThunk {
	0% {
		transform: scale(1.07);
	}
	45% {
		transform: scale(0.975);
	}
	100% {
		transform: scale(1);
	}
}
.locks.is-locked .vault {
	animation: boltsHome 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both;
	filter: brightness(1.3) saturate(1.2);
}
@keyframes boltsHome {
	0% {
		rotate: 3deg;
	}
	55% {
		rotate: -0.8deg;
	}
	100% {
		rotate: 0deg;
	}
}
.locks.is-locked .orbit .arc {
	stroke-width: 2;
	filter: drop-shadow(0 0 4px var(--signal)) drop-shadow(0 0 12px var(--signal));
}
.locks.is-locked .lock-node.on {
	box-shadow:
		0 0 0 1px rgba(174, 192, 255, 0.85) inset,
		0 0 0 5px rgba(77, 132, 255, 0.24),
		0 0 46px rgba(77, 132, 255, 0.85);
}
@media (max-width: 860px) {
	.locks .scene-sticky::before {
		background: radial-gradient(
			60% 34% at 50% 48%,
			rgba(77, 132, 255, 0.34),
			rgba(11, 52, 199, 0.12) 45%,
			transparent 72%
		);
	}
}

/* rendered padlock: a 24-frame sprite, stepped from open to closed */
.padlock {
	width: 74%;
	aspect-ratio: 1;
	background: url('../img/padlock-sprite.webp') 0 0 / 2400% 100% no-repeat;
	transition: background-position 0.9s steps(23);
	filter: brightness(0.75) saturate(0.7);
}
.lock-node.on .padlock {
	background-position: 100% 0;
	filter: none;
	transition:
		background-position 0.9s steps(23),
		filter var(--t-slow) var(--ease);
}
.lock-node svg {
	width: 44%;
	height: auto;
	overflow: visible;
}
.lock-node .shackle {
	transition: transform var(--t-med) var(--ease);
	transform: translateY(-3px);
}
.lock-node.on .shackle {
	transform: none;
}
.has-sprite .lock-node svg {
	display: none;
}
.lock-list {
	display: grid;
	gap: 4px;
}
.lock-item {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 6px 14px;
	padding-block: 12px;
	border-top: 1px solid var(--line);
	opacity: 0.35;
	transition: opacity var(--t-med) var(--ease);
}
.lock-item.on {
	opacity: 1;
}
.lock-item .k {
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--signal);
	padding-top: 4px;
}
.lock-item h4 {
	font-size: 1.15rem;
	letter-spacing: -0.02em;
}
.lock-item p {
	grid-column: 2;
	color: var(--fg-dim);
	font-size: 0.92rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--t-med) var(--ease);
}
.lock-item.cur p {
	max-height: 6em;
}
@media (max-width: 860px) {
	.locks-grid {
		grid-template-columns: 1fr;
		gap: 14px;
		align-content: center;
		justify-items: center;
		text-align: center;
	}
	.locks-grid > .stack {
		display: contents;
	}
	.locks .eyebrow {
		order: 1;
	}
	.locks .t-2 {
		order: 2;
		font-size: clamp(1.4rem, 6vw, 1.7rem);
	}
	.ring {
		order: 3;
		width: min(300px, 70vw, 40svh);
	}
	.lock-list {
		order: 4;
		gap: 0;
		min-height: 6.5em;
	}
	.lock-item {
		display: none;
		border: 0;
		grid-template-columns: 1fr;
	}
	.lock-item.cur {
		display: grid;
		opacity: 1;
	}
	.lock-item .k {
		padding: 0;
	}
	.lock-item p {
		grid-column: 1;
		max-height: none;
	}
}

/* ---------- before / after ---------- */
.compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.compare-col {
	border-radius: 28px;
	padding: clamp(26px, 4vw, 44px);
	display: grid;
	gap: 4px;
	align-content: start;
}
.compare-col h3 {
	font-size: 1.3rem;
	margin-bottom: 18px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.compare-col h3 small {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	font-weight: 400;
}
.compare ul {
	margin: 0;
	padding: 0;
}
.compare-col li {
	list-style: none;
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding-block: 12px;
	border-top: 1px solid var(--line-paper);
}
.before {
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-paper);
	color: var(--ink-dim);
}
.before h3 small {
	color: #c2412d;
}
.before li::before {
	content: '×';
	color: #c2412d;
	font-weight: 700;
}
.js .before li span {
	background: linear-gradient(currentColor, currentColor) 0 55% / 0% 1px
		no-repeat;
	transition: background-size 0.8s var(--ease);
	transition-delay: calc(var(--si, 0) * 0.12s + 0.4s);
}
.js .compare.in .before li span {
	background-size: 100% 1px;
}
.after {
	background: var(--navy);
	color: #fff;
	box-shadow: 0 30px 80px -30px rgba(11, 52, 199, 0.6);
}
.after h3 small {
	color: var(--ok);
}
.after li {
	border-color: rgba(255, 255, 255, 0.1);
}
.after li::before {
	content: '✓';
	color: var(--ok);
	font-weight: 700;
}
@media (max-width: 760px) {
	.compare {
		grid-template-columns: 1fr;
	}
}

/* ---------- bento ---------- */
.bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}
.tile {
	border-radius: 28px;
	padding: clamp(24px, 3.4vw, 40px);
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 12px;
	align-content: start;
	min-width: 0;
}
.tile h3 {
	font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.tile p {
	color: var(--fg-dim);
	max-width: 42ch;
}
.tile-dark {
	background: var(--ink-2);
	box-shadow: 0 0 0 1px var(--line) inset;
}
.tile-blue {
	background: linear-gradient(160deg, #1440e6, #0b2aa8 60%, #071d77);
	color: #fff;
}
.tile-blue p {
	color: rgba(255, 255, 255, 0.78);
}
.tile-light {
	background: #fff;
	color: var(--ink-text);
	box-shadow: 0 0 0 1px var(--line-paper);
}
.tile-light p {
	color: var(--ink-dim);
}
.span-6 {
	grid-column: span 6;
}
.span-4 {
	grid-column: span 4;
}
.span-3 {
	grid-column: span 3;
}
.span-2 {
	grid-column: span 2;
}
@media (max-width: 900px) {
	.span-4,
	.span-3,
	.span-2 {
		grid-column: span 6;
	}
}
.tile .big {
	font-size: clamp(3.4rem, 8vw, 6.4rem);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 0.95;
}
.tile-media {
	border-radius: 18px;
	margin: -8px -8px 4px;
	width: calc(100% + 16px);
	max-width: none;
	height: auto;
}
.tile-art {
	position: absolute;
	right: -6%;
	bottom: -10%;
	width: 46%;
	opacity: 0.95;
	pointer-events: none;
}
.tile-lloyds {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: 24px;
}
.tile-lloyds img {
	border-radius: 20px;
	width: 100%;
	height: auto;
}
@media (max-width: 700px) {
	.tile-lloyds {
		grid-template-columns: 1fr;
	}
}
.rails {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.rails span {
	font-family: var(--mono);
	font-size: 0.78rem;
	padding: 7px 12px;
	border-radius: 999px;
	box-shadow: 0 0 0 1px var(--line) inset;
	color: #fff;
}
.tile-light .rails span {
	color: var(--ink-text);
	box-shadow: 0 0 0 1px var(--line-paper) inset;
}
.marquee {
	margin-top: 14px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent,
		#000 12%,
		#000 88%,
		transparent
	);
	mask-image: linear-gradient(
		90deg,
		transparent,
		#000 12%,
		#000 88%,
		transparent
	);
}
.marquee-track {
	display: flex;
	gap: 14px;
	width: max-content;
	animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track {
	animation-play-state: paused;
}
.marquee-track span {
	font-family: var(--mono);
	font-size: 0.86rem;
	letter-spacing: 0.06em;
	padding: 10px 18px;
	border-radius: 999px;
	box-shadow: 0 0 0 1px var(--line) inset;
	color: var(--fg);
	white-space: nowrap;
}
.marquee-track span b {
	color: var(--ok);
	font-weight: 500;
	margin-inline-end: 8px;
}
@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- audiences ---------- */
.aud-tabs {
	position: relative;
	display: flex;
	gap: 6px;
	padding: 6px;
	border-radius: 999px;
	box-shadow: 0 0 0 1px var(--line) inset;
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
	margin-inline: auto;
	scrollbar-width: none;
}
.aud-tabs button {
	position: relative;
	z-index: 1;
	background: none;
	border: 0;
	color: var(--fg-dim);
	font: inherit;
	font-size: 0.92rem;
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}
.aud-tabs button[aria-selected='true'] {
	background: #fff;
	color: var(--ink-text);
}
.aud-tabs.has-slider button[aria-selected='true'] {
	background: transparent;
}
.aud-tabs .slider {
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 0;
	border-radius: 999px;
	background: #fff;
	transition:
		transform var(--t-med) var(--ease),
		width var(--t-med) var(--ease);
}
.aud-panel {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	margin-top: 56px;
	animation: panelIn var(--t-med) var(--ease);
}
.aud-panel[hidden] {
	display: none;
}
@keyframes panelIn {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}
.aud-panel h3 {
	font-size: clamp(1.9rem, 3.6vw, 3rem);
}
.aud-panel .lede {
	margin-block: 18px 26px;
}
.aud-stat {
	border-radius: 28px;
	padding: 36px;
	background: var(--ink-2);
	box-shadow: 0 0 0 1px var(--line) inset;
	display: grid;
	gap: 22px;
}
.aud-stat div {
	display: grid;
	gap: 4px;
}
.aud-stat div + div {
	border-top: 1px solid var(--line);
	padding-top: 22px;
}
.aud-stat b {
	font-size: clamp(2.4rem, 4.6vw, 3.6rem);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 1;
}
.aud-stat span {
	color: var(--fg-dim);
	font-size: 0.94rem;
}
@media (max-width: 820px) {
	.aud-panel {
		grid-template-columns: 1fr;
	}
	.aud-tabs {
		margin-inline: 0;
	}
}

/* ---------- testimonials ---------- */
.voices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.voice {
	border-radius: 28px;
	padding: 32px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-paper);
	display: grid;
	gap: 24px;
	align-content: space-between;
}
.voice blockquote {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--ink-text);
}
.voice .who {
	font-size: 0.88rem;
}
.voice .who b {
	display: block;
	font-weight: 500;
}
.voice .who span {
	color: var(--ink-dim);
}
.voice-feature {
	grid-column: span 3;
	background: var(--navy);
	color: #fff;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(24px, 5vw, 64px);
	align-items: center;
	padding: clamp(32px, 5vw, 56px);
}
.voice-feature blockquote {
	color: #fff;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	line-height: 1.3;
	letter-spacing: -0.025em;
}
.voice-feature .who span,
.voice-feature .link-arrow {
	color: var(--ice);
}
.voice-feature .metric b {
	display: block;
	font-size: clamp(4rem, 9vw, 7rem);
	font-weight: 500;
	letter-spacing: -0.06em;
	line-height: 0.9;
}
.voice-feature .metric span {
	color: var(--ice);
	font-size: 0.9rem;
	display: block;
	max-width: 14ch;
	margin-top: 8px;
}
@media (max-width: 900px) {
	.voices {
		grid-template-columns: 1fr;
	}
	.voice-feature {
		grid-column: auto;
		grid-template-columns: 1fr;
	}
}

/* ---------- report promo ---------- */
.report {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
	border-radius: 32px;
	padding: clamp(28px, 4vw, 48px);
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-paper);
	color: var(--ink-text);
}
.report img {
	border-radius: 18px;
	width: 100%;
	height: auto;
}
.report h3 {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	margin-block: 10px 14px;
}
.report .lede {
	color: var(--ink-dim);
	margin-bottom: 22px;
}
.report .eyebrow {
	color: var(--blue);
}
@media (max-width: 760px) {
	.report {
		grid-template-columns: 1fr;
	}
}

/* ---------- closing CTA ---------- */
.finale {
	text-align: center;
	overflow: clip;
	position: relative;
}
.finale::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 55%;
	width: 900px;
	height: 900px;
	max-width: 160vw;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(11, 52, 199, 0.5), transparent 62%);
	pointer-events: none;
}
.finale .wrap {
	position: relative;
	display: grid;
	gap: 28px;
	justify-items: center;
}
.finale .badge-img {
	width: 150px;
	height: auto;
	filter: drop-shadow(0 20px 40px rgba(11, 52, 199, 0.5));
	animation: floaty 6s var(--ease-loop) infinite;
}
@keyframes floaty {
	50% {
		transform: translateY(-10px) rotate(-1deg);
	}
}

/* ---------- footer ---------- */
.footer {
	border-top: 1px solid var(--line);
	padding-block: 64px 40px;
	font-size: 0.88rem;
	color: var(--fg-dim);
	background: var(--ink);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 32px;
}
.footer h5 {
	margin: 0 0 14px;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	font-weight: 500;
}
.footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.footer a {
	transition: color var(--t-fast) var(--ease);
}
.footer a:hover {
	color: #fff;
}
.footer .brand {
	color: #fff;
}
.footer .tag {
	margin-top: 16px;
	max-width: 30ch;
}
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-size: 0.8rem;
}
.footer-bottom nav {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
@media (max-width: 760px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	.footer-grid > :first-child {
		grid-column: 1 / -1;
	}
}

/* ---------- interior pages ---------- */
.page-hero {
	--p: 0;
	padding-block: clamp(88px, 12vw, 160px) clamp(56px, 8vw, 96px);
	position: relative;
	overflow: clip;
}
.page-hero::before {
	content: '';
	position: absolute;
	inset: -30% -20% auto;
	height: 130%;
	background: radial-gradient(
		45% 40% at 50% 30%,
		rgba(11, 52, 199, 0.45),
		transparent 70%
	);
	pointer-events: none;
}
.page-hero .wrap {
	position: relative;
	display: grid;
	gap: 24px;
}
.page-hero.center .wrap {
	justify-items: center;
	text-align: center;
}
/* page heroes with a generated visual or film loop behind the copy */
.page-hero.has-media {
	min-height: min(92svh, 900px);
	display: grid;
	align-items: end;
}
.page-hero.has-media::before {
	display: none;
}
.page-hero-media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.page-hero-media img,
.page-hero-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, 50% 50%);
	transform: scale(calc(1.04 + var(--p) * 0.06));
}
.page-hero-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(4, 10, 24, 0.7) 0%,
			rgba(4, 10, 24, 0.1) 35%,
			rgba(4, 10, 24, 0.35) 65%,
			var(--ink) 100%
		),
		linear-gradient(
			90deg,
			rgba(4, 10, 24, var(--side, 0)) 0%,
			rgba(4, 10, 24, calc(var(--side, 0) * 0.7)) 36%,
			transparent 64%
		);
}
.page-hero.has-media.top {
	align-items: start;
	min-height: 0;
	padding-bottom: 0;
}
/* the visual is a full-bleed band under the copy, fading in and out of the ground */
.page-hero.has-media.top .page-hero-media {
	position: relative;
	order: 2;
	justify-self: stretch;
	width: 100%;
	height: clamp(300px, 44vw, 640px);
	margin-top: clamp(-48px, -3vw, -12px);
	-webkit-mask-image: linear-gradient(
		180deg,
		transparent,
		#000 26%,
		#000 72%,
		transparent
	);
	mask-image: linear-gradient(
		180deg,
		transparent,
		#000 26%,
		#000 72%,
		transparent
	);
}
.page-hero.has-media.top .page-hero-media::after {
	display: none;
}
.page-hero.has-media.left .wrap {
	justify-items: start;
	text-align: left;
}
.page-hero.has-media.left .lede {
	margin-inline: 0;
}
/* phones: the visual sits on top, the copy below it on solid ground */
@media (max-width: 700px) {
	.page-hero.has-media {
		min-height: 0;
		padding-top: min(72vw, 52svh);
	}
	.page-hero.has-media.top {
		padding-top: clamp(88px, 12vw, 160px);
	}
	.page-hero.has-media.top .page-hero-media {
		height: 78vw;
	}
	.page-hero.has-media:not(.top) .page-hero-media {
		top: 0;
		bottom: auto;
		height: min(96vw, 64svh);
		-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
		mask-image: linear-gradient(180deg, #000 55%, transparent);
	}
	.page-hero-media::after {
		background: linear-gradient(
			180deg,
			rgba(4, 10, 24, 0.35),
			transparent 30%,
			transparent 50%,
			rgba(4, 10, 24, 0.9) 100%
		);
	}
	.page-hero-media img,
	.page-hero-media video {
		transform: none;
	}
}
.page-hero.has-media > .motion-toggle {
	top: 18px;
	right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}
.page-hero .iconmark {
	width: 96px;
	height: auto;
	color: #fff;
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 88px);
	align-items: center;
}
.split.top {
	align-items: start;
}
.split > * {
	min-width: 0;
}
.split-media img {
	border-radius: 28px;
	width: 100%;
	height: auto;
}
.split-media.is-product img {
	max-width: 860px;
	margin-inline: auto;
	border-radius: 0;
}
@media (max-width: 860px) {
	.split {
		grid-template-columns: 1fr;
	}
}
.feature-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 32px;
}
.feature-list > div {
	display: grid;
	gap: 10px;
	align-content: start;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}
.day .feature-list > div {
	border-color: var(--line-paper);
}
.feature-list h3 {
	font-size: 1.2rem;
	letter-spacing: -0.02em;
	line-height: 1.25;
}
.feature-list p {
	color: var(--fg-dim);
	font-size: 0.96rem;
}
.day .feature-list p {
	color: var(--ink-dim);
}
.feature-list .k {
	font-family: var(--mono);
	font-size: 0.72rem;
	color: var(--signal);
	letter-spacing: 0.12em;
}
.day .feature-list .k {
	color: var(--blue);
}
@media (max-width: 900px) {
	.feature-list {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.feature-list {
		grid-template-columns: 1fr;
	}
}
.steps-rail {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.steps-rail article {
	border-radius: 24px;
	padding: 28px;
	background: var(--ink-2);
	box-shadow: 0 0 0 1px var(--line) inset;
	display: grid;
	gap: 12px;
	align-content: start;
}
.day .steps-rail article {
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-paper);
}
.steps-rail .n {
	font-family: var(--mono);
	font-size: 0.72rem;
	color: var(--signal);
	letter-spacing: 0.14em;
}
.day .steps-rail .n {
	color: var(--blue);
}
.steps-rail h3 {
	font-size: 1.4rem;
}
.steps-rail p {
	color: var(--fg-dim);
	font-size: 0.94rem;
}
.day .steps-rail p {
	color: var(--ink-dim);
}
/* column overrides that still collapse on small screens */
.steps-rail[data-cols='3'] {
	grid-template-columns: repeat(3, 1fr);
}
.feature-list[data-cols='2'] {
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
	.steps-rail,
	.steps-rail[data-cols='3'] {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.feature-list[data-cols='2'] {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 520px) {
	.steps-rail,
	.steps-rail[data-cols='3'] {
		grid-template-columns: 1fr;
	}
}
.uses {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.uses article {
	border-radius: 24px;
	padding: 28px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-paper);
	display: grid;
	gap: 10px;
	align-content: start;
}
.uses h3 {
	font-size: 1.25rem;
}
.uses p {
	color: var(--ink-dim);
	font-size: 0.94rem;
}
@media (max-width: 900px) {
	.uses {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 520px) {
	.uses {
		grid-template-columns: 1fr;
	}
}
.faq {
	display: grid;
	max-width: 860px;
	margin-inline: auto;
}
.faq details {
	border-top: 1px solid var(--line);
	padding-block: 22px;
	/* the rotating + would otherwise add a few px of horizontal scroll on phones */
	overflow-x: clip;
	overflow-clip-margin: 6px;
}
.faq details:last-child {
	border-bottom: 1px solid var(--line);
}
.day .faq details,
.day .faq details:last-child {
	border-color: var(--line-paper);
}
.faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: '+';
	font-weight: 300;
	font-size: 1.6rem;
	line-height: 1;
	transition: transform var(--t-fast) var(--ease);
	color: var(--signal);
}
.day .faq summary::after {
	color: var(--blue);
}
.faq details[open] summary::after {
	transform: rotate(45deg);
}
.faq details p {
	margin-top: 14px;
	color: var(--fg-dim);
	max-width: 68ch;
}
.day .faq details p {
	color: var(--ink-dim);
}
.aud-section {
	scroll-margin-top: calc(var(--nav-h) + 56px);
}
.subnav {
	position: sticky;
	top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
	z-index: 40;
	background: rgba(4, 10, 24, 0.8);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--line);
}
.subnav .wrap {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: 10px;
}
.subnav a {
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 0.88rem;
	color: var(--fg-dim);
	white-space: nowrap;
	transition:
		background-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}
.subnav a:hover {
	color: #fff;
}
.subnav a.on {
	background: #fff;
	color: var(--ink-text);
}
.subnav-title {
	font-weight: 500;
	color: #fff;
	padding: 8px 16px 8px 0;
	margin-inline-end: auto;
	white-space: nowrap;
}
.subnav {
	transition:
		background-color var(--t-med) var(--ease),
		border-color var(--t-med) var(--ease);
}
.subnav.is-day {
	background: rgba(244, 246, 251, 0.86);
	border-color: var(--line-paper);
}
.subnav.is-day a {
	color: var(--ink-dim);
}
.subnav.is-day a:hover,
.subnav.is-day .subnav-title {
	color: var(--ink-text);
}
.subnav.is-day a.on {
	background: var(--navy);
	color: #fff;
}
.case {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.case > div {
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 28px;
	border-radius: 24px;
	background: var(--ink-2);
	box-shadow: 0 0 0 1px var(--line) inset;
}
.case h4 {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: var(--signal);
	font-weight: 500;
	text-transform: uppercase;
}
.case p {
	color: var(--fg-dim);
}
@media (max-width: 820px) {
	.case {
		grid-template-columns: 1fr;
	}
}
.people {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.person {
	border-radius: 28px;
	padding: clamp(28px, 4vw, 40px);
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-paper);
	display: grid;
	gap: 16px;
	align-content: start;
}
.person header {
	display: flex;
	gap: 16px;
	align-items: center;
}
.person .avatar-lg {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--mist);
	flex: 0 0 auto;
}
.person h3 {
	font-size: 1.4rem;
}
.person header span {
	color: var(--ink-dim);
	font-size: 0.9rem;
}
.person p {
	color: var(--ink-dim);
}
.person blockquote {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--line-paper);
	font-size: 1.05rem;
	color: var(--ink-text);
	letter-spacing: -0.01em;
}
@media (max-width: 820px) {
	.people {
		grid-template-columns: 1fr;
	}
}
.form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.form .full {
	grid-column: 1 / -1;
}
.field {
	display: grid;
	gap: 6px;
}
.field label {
	font-size: 0.82rem;
	color: var(--fg-dim);
}
.field input,
.field textarea,
.field select {
	font: inherit;
	font-size: 1rem;
	color: #fff;
	background: rgba(255, 255, 255, 0.03);
	border: 0;
	border-radius: 14px;
	padding: 14px 16px;
	box-shadow: 0 0 0 1px var(--line) inset;
	transition: box-shadow var(--t-fast) var(--ease);
	width: 100%;
}
.field textarea {
	min-height: 120px;
	resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
	outline: none;
	box-shadow: 0 0 0 1.5px var(--signal) inset;
}
.field select option {
	background: var(--ink-2);
}
.form-note {
	grid-column: 1 / -1;
	font-size: 0.82rem;
	color: var(--fg-dim);
}
.form-done {
	grid-column: 1 / -1;
	padding: 16px 18px;
	border-radius: 14px;
	background: rgba(61, 220, 151, 0.1);
	color: var(--ok);
	box-shadow: 0 0 0 1px rgba(61, 220, 151, 0.3) inset;
}
@media (max-width: 560px) {
	.form {
		grid-template-columns: 1fr;
	}
}
.contact-card {
	border-radius: 32px;
	padding: clamp(24px, 4vw, 44px);
	background: var(--ink-2);
	box-shadow: 0 0 0 1px var(--line) inset;
}
.marks {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.marks img {
	height: 88px;
	width: auto;
}
.pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.pill-list span {
	font-size: 0.86rem;
	padding: 8px 14px;
	border-radius: 999px;
	box-shadow: 0 0 0 1px var(--line-paper) inset;
}
.night .pill-list span {
	box-shadow: 0 0 0 1px var(--line) inset;
}

/* ---------- advisors ---------- */
.versus {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.versus figure {
	position: relative;
	margin: 0;
	border-radius: 28px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: #000;
}
.versus img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.versus figure::after {
	content: '';
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(180deg, transparent, rgba(4, 10, 24, 0.92));
}
.versus figcaption {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(22px, 3vw, 36px);
	display: grid;
	gap: 8px;
	color: #fff;
}
.versus figcaption b {
	font-size: clamp(1.8rem, 3.6vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1;
}
.versus figcaption span {
	color: #c3cce3;
}
.versus .is-before .eyebrow {
	color: #ff8a80;
}
.versus .is-before img {
	filter: saturate(0.6) brightness(0.85);
}
@media (max-width: 700px) {
	.versus {
		grid-template-columns: 1fr;
	}
	.versus figure {
		aspect-ratio: 4 / 3;
	}
}
.flow-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.flow-col {
	border-radius: 28px;
	padding: clamp(26px, 3.6vw, 40px);
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-paper);
	display: grid;
	gap: 18px;
	align-content: start;
}
.flow-col header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.flow-col h3 {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.flow-col header span {
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	color: var(--blue);
	text-transform: uppercase;
}
.flow-col ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	counter-reset: st;
}
.flow-col li {
	counter-increment: st;
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 4px 12px;
	padding-block: 14px;
	border-top: 1px solid var(--line-paper);
}
.flow-col li::before {
	content: counter(st, decimal-leading-zero);
	font-family: var(--mono);
	font-size: 0.74rem;
	color: var(--blue);
	padding-top: 3px;
}
.flow-col li b {
	font-weight: 500;
	letter-spacing: -0.01em;
}
.flow-col li span {
	grid-column: 2;
	color: var(--ink-dim);
	font-size: 0.94rem;
}
.flow-col.is-client {
	background: var(--navy);
	color: #fff;
	box-shadow: 0 30px 80px -30px rgba(11, 52, 199, 0.6);
}
.flow-col.is-client header span,
.flow-col.is-client li::before {
	color: var(--ice);
}
.flow-col.is-client li {
	border-color: rgba(255, 255, 255, 0.1);
}
.flow-col.is-client li span {
	color: #b4bfda;
}
@media (max-width: 820px) {
	.flow-cols {
		grid-template-columns: 1fr;
	}
}
.callouts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	border-radius: 24px;
	overflow: hidden;
	background: var(--line);
	box-shadow: 0 0 0 1px var(--line);
}
.callouts > div {
	background: var(--ink-2);
	padding: 26px 28px;
	display: grid;
	gap: 6px;
}
.callouts b {
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.callouts span {
	color: var(--fg-dim);
}
@media (max-width: 560px) {
	.callouts {
		grid-template-columns: 1fr;
	}
}
.source {
	font-size: 0.78rem;
	color: var(--fg-dim);
}

/* ---------- film player ---------- */
.film-dialog {
	width: min(1200px, calc(100vw - 32px));
	max-height: calc(100svh - 32px);
	padding: 0;
	border: 0;
	border-radius: 22px;
	overflow: hidden;
	background: #000;
	color: var(--fg);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.1),
		0 60px 160px -40px rgba(0, 0, 0, 0.9);
}
.film-dialog[open] {
	animation: filmIn var(--t-med) var(--ease);
}
.film-dialog::backdrop {
	background: rgba(2, 6, 16, 0.84);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
@keyframes filmIn {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.97);
	}
}
.film-dialog header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 12px 12px 12px 22px;
	background: #05080f;
}
.film-dialog h2 {
	font-size: 1rem;
	letter-spacing: -0.01em;
	font-weight: 500;
}
.film-dialog .close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	font-size: 1.2rem;
	line-height: 1;
	transition: background-color var(--t-fast) var(--ease);
}
.film-dialog .close:hover {
	background: rgba(255, 255, 255, 0.2);
}
.film-dialog video {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: calc(100svh - 120px);
	background: #000;
}
.film-dialog .film-missing {
	padding: 18px 22px;
	color: var(--fg-dim);
	font-size: 0.92rem;
}

/* ---------- theme toggle ---------- */
.theme-toggle {
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: inherit;
	background: transparent;
	box-shadow: 0 0 0 1px var(--line) inset;
	transition:
		background-color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease);
}
.theme-toggle:hover {
	background: rgba(127, 140, 180, 0.14);
}
.nav.is-day .theme-toggle {
	box-shadow: 0 0 0 1px var(--line-paper) inset;
}
.theme-toggle svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.theme-toggle .i-moon,
html[data-theme='light'] .theme-toggle .i-sun {
	display: none;
}
html[data-theme='light'] .theme-toggle .i-moon {
	display: block;
}
@media (max-width: 1040px) {
	.theme-toggle {
		margin-inline-start: auto;
	}
	.theme-toggle + .nav-toggle {
		margin-inline-start: 4px;
	}
}
/* media that only belongs to one theme */
html[data-theme='light'] .only-dark,
html:not([data-theme='light']) .only-light {
	display: none !important;
}

/* ---------- light mode ----------
   Dark is the default presentation; html[data-theme='light'] (the nav toggle, remembered per visitor)
   turns every night surface light. The two cinematic scenes (the threat and the six locks) stay dark
   islands, as do product surfaces that are dark by design (the hero console and its chip). */
html[data-theme='light'] {
	color-scheme: light;
}
html[data-theme='light'] body,
html[data-theme='light'] :is(.night, .how, .footer, .announce) {
	--fg: #0b1328;
	--fg-dim: #5b6680;
	--line: rgba(11, 19, 40, 0.1);
	--ink-2: #f5f7fb;
	--signal: #0b34c7;
}
html[data-theme='light'] body,
html[data-theme='light'] :is(.night, .how) {
	background: #fff;
	color: var(--fg);
}
html[data-theme='light']
	:is(.threat, .locks, .console, .float-chip, .nav.is-dark, .subnav.is-dark) {
	--fg: #f2f5ff;
	--fg-dim: #93a0bf;
	--line: rgba(174, 192, 255, 0.14);
	--ink-2: #0a1530;
	--signal: #4d84ff;
	color: var(--fg);
}
html[data-theme='light'] :is(.night, .how) .grad:not(.is-split) {
	background-image: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%);
}
html[data-theme='light']
	:is(.night, .how)
	:is(.stake-num, .tile:not(.tile-blue) .big, .aud-stat b) {
	background-image: linear-gradient(180deg, var(--navy), var(--blue));
}
html[data-theme='light'] .night .scrub .sw {
	color: rgba(11, 19, 40, 0.14);
}
html[data-theme='light'] .night .scrub .sw.lit {
	color: var(--ink-text);
}
html[data-theme='light'] .night .scrub .sw.lit.hl {
	color: var(--blue);
}
html[data-theme='light'] .btn-ghost:hover {
	box-shadow: 0 0 0 1px var(--blue) inset;
}

/* nav, sub-nav, announcement, footer */
html[data-theme='light'] .announce {
	background: linear-gradient(90deg, #fff, var(--mist), #fff);
}
html[data-theme='light'] .nav:not(.is-dark) {
	background: rgba(255, 255, 255, 0.82);
	border-color: var(--line-paper);
	color: var(--ink-text);
}
html[data-theme='light'] .nav:not(.is-dark) :is(.nav-links, .nav-login) {
	color: var(--ink-dim);
}
html[data-theme='light']
	.nav:not(.is-dark)
	:is(.nav-links a:hover, .nav-links a[aria-current='page'], .nav-login:hover) {
	color: var(--ink-text);
}
html[data-theme='light'] .nav:not(.is-dark) .theme-toggle {
	box-shadow: 0 0 0 1px var(--line-paper) inset;
}
@media (max-width: 1040px) {
	html[data-theme='light'] .nav.open,
	html[data-theme='light'] .nav.open .nav-links {
		background: rgba(255, 255, 255, 0.98);
		color: var(--ink-text);
		border-color: var(--line-paper);
	}
	html[data-theme='light'] .nav.open .nav-links a {
		color: var(--ink-text);
		border-color: var(--line-paper);
	}
}
html[data-theme='light'] .subnav:not(.is-dark) {
	background: rgba(255, 255, 255, 0.86);
	border-color: var(--line-paper);
}
html[data-theme='light'] .subnav:not(.is-dark) a {
	color: var(--ink-dim);
}
html[data-theme='light'] .subnav:not(.is-dark) :is(a:hover, .subnav-title) {
	color: var(--ink-text);
}
html[data-theme='light'] .subnav:not(.is-dark) a.on {
	background: var(--navy);
	color: #fff;
}
html[data-theme='light'] .footer {
	background: var(--paper);
}
html[data-theme='light'] .footer :is(h5, .brand, a:hover) {
	color: var(--ink-text);
}

/* hero */
html[data-theme='light'] .hero-bg::after {
	background:
		radial-gradient(
			60% 46% at 50% 34%,
			rgba(255, 255, 255, 0.8),
			rgba(255, 255, 255, 0.25) 70%,
			transparent
		),
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.3) 0%,
			rgba(255, 255, 255, 0) 30%,
			rgba(255, 255, 255, 0.6) 70%,
			#fff 100%
		);
}
html[data-theme='light'] :is(.hero-copy .lede, .hero-kicker) {
	color: var(--fg-dim);
}
html[data-theme='light'] .hero-kicker b {
	color: var(--ink-text);
}
html[data-theme='light'] .hero-stage::before {
	background: radial-gradient(
		closest-side,
		rgba(77, 132, 255, 0.22),
		transparent
	);
}
html[data-theme='light'] .console {
	box-shadow:
		0 0 0 1px rgba(77, 132, 255, 0.45),
		0 40px 100px -30px rgba(11, 52, 199, 0.45);
}
html[data-theme='light'] .proof-strip {
	background: rgba(255, 255, 255, 0.86);
	box-shadow:
		0 0 0 1px var(--line-paper) inset,
		0 24px 60px -36px rgba(11, 52, 199, 0.35);
}

/* soft glows that were sized for a dark ground */
html[data-theme='light'] .page-hero::before {
	background: radial-gradient(
		45% 40% at 50% 30%,
		rgba(77, 132, 255, 0.16),
		transparent 70%
	);
}
html[data-theme='light'] .finale::before {
	background: radial-gradient(
		circle,
		rgba(77, 132, 255, 0.18),
		transparent 62%
	);
}
html[data-theme='light'] .how .scene-sticky {
	background: radial-gradient(
		40% 60% at 72% 50%,
		rgba(77, 132, 255, 0.14),
		transparent 70%
	);
}
html[data-theme='light'] .phone {
	box-shadow:
		0 0 0 1.5px #4a5578,
		inset 0 0 0 1.5px rgba(255, 255, 255, 0.12),
		0 50px 100px -40px rgba(11, 19, 40, 0.45);
}

/* page heroes with a visual: a white wash instead of an ink one */
html[data-theme='light'] .page-hero-media::after {
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.7) 0%,
			rgba(255, 255, 255, 0.1) 35%,
			rgba(255, 255, 255, 0.35) 65%,
			#fff 100%
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, var(--side, 0)) 0%,
			rgba(255, 255, 255, calc(var(--side, 0) * 0.7)) 36%,
			transparent 64%
		);
}
html[data-theme='light'] .page-hero .iconmark {
	color: var(--navy);
}

/* cards and controls on a light ground */
html[data-theme='light'] .night .tile-light {
	background: var(--ink-2);
}
html[data-theme='light'] .night .aud-tabs .slider {
	background: var(--navy);
}
html[data-theme='light'] .night .aud-tabs button[aria-selected='true'] {
	color: #fff;
}
html[data-theme='light'] .rails span {
	color: var(--fg);
}
html[data-theme='light']
	.night
	:is(.field input, .field textarea, .field select) {
	color: var(--ink-text);
	background: #fff;
}

/* ---------- reduced motion: everything readable and still ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
	.js .reveal,
	.js .split-words .w > span,
	.js .stagger > * {
		opacity: 1;
		transform: none;
	}
	.scrub .sw,
	.day .scrub .sw {
		color: inherit;
	}
	.scrub .sw.hl {
		color: var(--signal);
	}
	.day .scrub .sw.hl {
		color: var(--blue);
	}
	[data-parallax],
	[data-grow],
	.hero-bg video,
	.hero-bg img,
	.page-hero-media img,
	.page-hero-media video {
		transform: none;
	}
	/* pinned scenes unpin and show their finished state */
	.scene {
		height: auto;
	}
	.scene-sticky {
		position: relative;
		top: 0;
		height: auto;
		min-height: 0;
		padding-block: var(--section);
		overflow: clip;
	}
	.threat-lines {
		min-height: 0;
		display: grid;
		gap: 0.4em;
	}
	.threat-lines p {
		position: static;
		opacity: 1;
		transform: none;
	}
	.how-step {
		display: block;
		opacity: 1;
	}
	.how-step p {
		max-height: none;
		margin-top: 10px;
	}
	.lock-item {
		opacity: 1;
	}
	.lock-item p {
		max-height: none;
	}
	.vault {
		transform: none;
	}
	.motion-toggle {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
	.how-step,
	.lock-item {
		display: grid;
	}
}