/*
 * Frammer — components. Every value comes from tokens.css.
 * Used by the homepage AND rendered live on the design-system page.
 */

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--fr-black-1);
	color: var(--fr-text-1);
	font-family: var(--font-body);
	font-stretch: var(--body-stretch);
	font-size: var(--t-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img,
video {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
}
:focus-visible {
	outline: 2px solid var(--fr-text-1);
	outline-offset: 3px;
	border-radius: 2px;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* ---------- Type ---------- */
.display,
h1,
h2,
h3 {
	font-family: var(--font-display);
	font-stretch: var(--display-stretch);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-track);
	line-height: 1.06;
	margin: 0;
	text-wrap: balance;
}
/* The deck's headline device: the key word or phrase in red */
.hl {
	color: var(--fr-tally);
}
.t-hero {
	font-size: var(--t-hero);
	line-height: 1;
}
.t-h1 {
	font-size: var(--t-h1);
}
.t-h2 {
	font-size: var(--t-h2);
	line-height: 1.05;
}
.t-h3 {
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.lead {
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--fr-text-2);
	max-width: 36em;
	margin: 0;
	text-wrap: pretty;
}
.body-2 {
	color: var(--fr-text-2);
	margin: 0;
	text-wrap: pretty;
}
.mono {
	font-family: var(--font-label);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Eyebrow: the deck's wide-tracked uppercase label above every headline */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	font-family: var(--font-label);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fr-text-2);
	margin: 0 0 var(--s-4);
}
/* segment numbers belonged to the old "On air" rundown; the deck labels are plain */
.eyebrow__seg,
.eyebrow__rule {
	display: none;
}
/* Category line: SPORTS | ENTERTAINMENT | NEWS … with red pipes */
.cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-label);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fr-text-2);
}
/* the pipe trails each item, so a wrapped line never starts with one */
.cats li:not(:last-child)::after {
	content: '|';
	margin: 0 0.9em;
	color: var(--fr-tally);
	font-weight: 700;
}

/* ---------- Tally: the live signal ---------- */
.tally-dot {
	position: relative;
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fr-tally);
	flex: none;
}
.tally-dot::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--fr-tally);
	opacity: 0;
	animation: tally-pulse 1.8s var(--ease) infinite;
}
@keyframes tally-pulse {
	0% {
		transform: scale(0.6);
		opacity: 0.9;
	}
	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}
.live-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 5px 10px 5px 9px;
	border: 1px solid var(--fr-line-strong);
	border-radius: var(--r-pill);
	background: var(--fr-black-0);
	font-family: var(--font-label);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fr-text-1);
}

/* ---------- Buttons — always pills ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 48px;
	padding: 0 var(--s-5);
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}
.btn svg {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform var(--dur-fast) var(--ease);
}
.btn:hover svg {
	transform: translateX(3px);
}
.btn:active {
	transform: translateY(1px);
}
/* Every primary action, nav included: the site's red with a white label */
.btn--tally {
	background: var(--fr-btn);
	color: var(--fr-btn-ink);
}
.btn--tally:hover {
	background: var(--fr-btn-hover);
}
.btn--ghost {
	border-color: var(--fr-line-strong);
	color: var(--fr-text-1);
	background: transparent;
}
.btn--ghost:hover {
	border-color: var(--fr-text-2);
	background: var(--fr-black-2);
}
.btn--sm {
	min-height: 38px;
	padding: 0 var(--s-4);
	font-size: var(--t-small);
}
.btn--ink {
	background: var(--fr-ink-1);
	color: var(--fr-paper);
}
.btn--ink:hover {
	background: #000;
}
.text-link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--fr-text-1);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 1px solid var(--fr-line-strong);
	padding-bottom: 2px;
	transition: border-color var(--dur-fast) var(--ease);
}
.text-link:hover {
	border-color: var(--fr-text-1);
}
.text-link svg {
	width: 14px;
	height: 14px;
}

/* ---------- Monitor: real footage and screens in a rounded frame ---------- */
.monitor {
	position: relative;
	background: var(--fr-black-0);
	border-radius: var(--r-frame);
	outline: 1px solid rgba(255, 255, 255, 0.12);
	outline-offset: -1px;
	isolation: isolate;
}
.monitor > img,
.monitor > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-frame);
}
/* Corner brackets from the old "On air" theme — kept in the markup, hidden in this one */
.monitor__marks {
	display: none;
	position: absolute;
	inset: 10px;
	pointer-events: none;
	z-index: 2;
	--mk: rgba(243, 243, 241, 0.75);
	--len: 14px;
	background:
		linear-gradient(var(--mk), var(--mk)) top left / var(--len) 1px,
		linear-gradient(var(--mk), var(--mk)) top left / 1px var(--len),
		linear-gradient(var(--mk), var(--mk)) top right / var(--len) 1px,
		linear-gradient(var(--mk), var(--mk)) top right / 1px var(--len),
		linear-gradient(var(--mk), var(--mk)) bottom left / var(--len) 1px,
		linear-gradient(var(--mk), var(--mk)) bottom left / 1px var(--len),
		linear-gradient(var(--mk), var(--mk)) bottom right / var(--len) 1px,
		linear-gradient(var(--mk), var(--mk)) bottom right / 1px var(--len);
	background-repeat: no-repeat;
}
.monitor__label {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 5px 10px;
	border-radius: var(--r-chip);
	background: rgba(0, 0, 0, 0.66);
	font-family: var(--font-label);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fr-text-1);
}
.monitor__label--br {
	top: auto;
	left: auto;
	right: 18px;
	bottom: 18px;
}

/* Lower third: the broadcast caption, white plate with ink type */
.lower-third {
	position: absolute;
	left: 18px;
	bottom: 18px;
	z-index: 3;
	display: grid;
	max-width: calc(100% - 36px);
	border-left: 3px solid var(--fr-tally);
}
.lower-third__title {
	background: var(--fr-paper);
	color: var(--fr-ink-1);
	padding: 6px 12px 5px;
	font-family: var(--font-display);
	font-stretch: var(--display-stretch);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.lower-third__sub {
	background: var(--fr-ink-1);
	color: var(--fr-text-2);
	padding: 4px 12px;
	font-family: var(--font-label);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	justify-self: start;
}

/* ---------- Depth: 3D scenes (pointer tilt arrives from app.js as --tilt-x / --tilt-y) ---------- */
[data-tilt] {
	--tilt-x: 0deg;
	--tilt-y: 0deg;
}

/* Hero: two real monitors at two depths — the 16:9 source at the back, its Keep Graphics 9:16 in front */
.screens {
	perspective: var(--persp);
	perspective-origin: 40% 40%;
	/* the 9:16 hangs below the 16:9; the bottom padding keeps it inside the box */
	padding: 2% 0 15%;
}
.screens__group {
	position: relative;
	transform-style: preserve-3d;
	transform: rotateY(calc(-16deg + var(--tilt-y))) rotateX(calc(5deg + var(--tilt-x)));
	transition: transform var(--dur-slow) var(--ease);
}
.screen {
	margin: 0;
	/* canvas-colour ring cuts each screen out of the one behind it */
	box-shadow:
		0 0 0 5px var(--fr-black-1),
		var(--shadow-depth);
}
.screen--169 {
	width: 78%;
	aspect-ratio: 16 / 9;
	transform: var(--card-t);
}
.screen--916 {
	position: absolute;
	right: 0;
	top: 4%;
	width: 28%;
	aspect-ratio: 9 / 16;
	transform: translateZ(var(--depth-2)) var(--card-t);
}
/* Labels keep clear of the graphics Keep Graphics carries: a sports 9:16 gets its
   label bottom-right (scorebug on top), a news 9:16 top-right (strap at the foot),
   a paired 16:9 source top-right (its scorebug sits top-left), and the hero's
   16:9 bottom-left (its top-right corner sits behind the 9:16) */
.screens .screen--916 .monitor__label,
.phones .phone .monitor__label,
.pairs .pair__tall .monitor__label {
	top: auto;
	left: auto;
	bottom: 10px;
	right: 10px;
}
.sherpa3d .sherpa3d__out916 .monitor__label,
.pairs .pair__wide .monitor__label {
	left: auto;
	right: 10px;
}
.screens .screen--169 .monitor__label {
	top: auto;
	bottom: 10px;
}
/* ---------- Depth hover: lift and glare (layers built by js/depth.js on a card's first hover) ---------- */
/* Out of rendering entirely unless the card is hovered or easing back */
.card-shine {
	display: none;
}
[data-hover] > .card-shine {
	display: block;
}
/* A hovered card's effects stay inside it. No extra shadow: a blurred shadow in
   a tilted card's plane painted across the card beside it (owner, 2026-10-27).
   Cards never touch: the gaps and depth steps between them are wider than the
   hover's lift and tilt, so a hovered card can't cut into a neighbour's plane.
   Where siblings share a flat plane, the hovered one is raised above them. */
[data-hover] {
	z-index: 3;
}
/* Light on glass: clipped to the card's corners. No z-index and no opacity
   here, so the glare below blends with the picture itself. */
.card-shine {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
}
/* the glare: one large, very soft reflection of a light above the screen.
   soft-light brightens the picture under it without greying it. The one glow
   the system allows, and only while a pointer rests on a card. */
.card-shine__glare {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		rgba(255, 255, 255, var(--glare-peak)) 0%,
		rgba(255, 255, 255, calc(var(--glare-peak) * 0.85)) 25%,
		rgba(255, 255, 255, calc(var(--glare-peak) * 0.5)) 50%,
		rgba(255, 255, 255, calc(var(--glare-peak) * 0.18)) 75%,
		transparent 100%
	);
	mix-blend-mode: soft-light;
	opacity: 0;
}
/* the same glare in plain white at a few percent: soft-light cannot lift pure
   black, but light on glass shows over a black letterbox too */
.card-shine__floor {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		rgba(255, 255, 255, var(--glare-floor)) 0%,
		rgba(255, 255, 255, calc(var(--glare-floor) * 0.5)) 50%,
		transparent 100%
	);
	opacity: 0;
}
/* a faint diagonal glass sheen */
.card-shine__sheen {
	position: absolute;
	inset: 0 -75%;
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(255, 255, 255, calc(var(--sheen-peak) * 0.35)) 42%,
		rgba(255, 255, 255, var(--sheen-peak)) 50%,
		rgba(255, 255, 255, calc(var(--sheen-peak) * 0.35)) 58%,
		transparent 70%
	);
	opacity: 0;
}
/* a thin rim on the edge facing the light (the top) */
.card-shine__rim {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 0 0 1px rgba(255, 255, 255, 0.07);
	opacity: 0;
}
/* In a 3D scene the containers sit at depth 0, in front of cards pushed back
   in z, and would catch the pointer; only the cards take it */
.screens__group,
.sherpa3d__group,
.phones__row,
.phone,
.wall__grid {
	pointer-events: none;
}
.screens__group .monitor,
.sherpa3d__group .monitor,
.phones__row .monitor,
.wall__tile {
	pointer-events: auto;
}
/* labels and tags ride a touch further than the card they sit on (hovered cards only) */
[data-hover] .monitor__label,
[data-hover] .wall__tag,
[data-hover] .lower-third {
	translate: calc(var(--card-px) * var(--hover-inner-shift)) calc(var(--card-py) * var(--hover-inner-shift));
}

/* ---------- Depth: phones arc — a row of real 9:16 outputs, curved toward the viewer ---------- */
.phones {
	perspective: var(--persp);
	perspective-origin: 50% 20%;
	overflow-x: clip;
	/* side padding leaves room for the outer phones as they swing in */
	padding: var(--s-4) var(--s-6) var(--s-6);
}
.phones__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-5);
	max-width: 1040px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(calc(4deg + var(--tilt-x, 0deg))) rotateY(var(--tilt-y, 0deg));
	transition: transform var(--dur-slow) var(--ease);
}
.phones--5 .phones__row {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	max-width: 1180px;
}
.phones--3 .phones__row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 820px;
}
.phone {
	margin: 0;
	display: grid;
	align-content: start;
	gap: var(--s-3);
	transform-style: preserve-3d;
}
.phone > .monitor {
	aspect-ratio: 9 / 16;
	transform: var(--card-t);
	box-shadow:
		0 0 0 4px var(--fr-black-1),
		var(--shadow-depth);
}
/* outer phones swing in around their inner edge; the middle ones step forward */
.phones__row > .phone:first-child {
	transform-origin: right center;
	transform: rotateY(12deg) translateZ(-20px);
}
.phones__row > .phone:last-child {
	transform-origin: left center;
	transform: rotateY(-12deg) translateZ(-20px);
}
.phones--5 .phones__row > .phone:nth-child(3) {
	transform: translateZ(var(--depth-1));
}
.phones--5 .phones__row > .phone:first-child {
	transform: rotateY(8deg) translateZ(-20px);
}
.phones--5 .phones__row > .phone:last-child {
	transform: rotateY(-8deg) translateZ(-20px);
}
.phone__cap {
	display: grid;
	gap: 2px;
	font-size: var(--t-small);
	line-height: 1.35;
	color: var(--fr-text-2);
}
.phone__cap .mono {
	color: var(--fr-text-3);
}

/* ---------- Depth: the Sherpa scene — live programme at the back, the clip lifting off its
   timeline, the finished 16:9 and 9:16 in front ---------- */
.sherpa3d {
	perspective: var(--persp);
	perspective-origin: 30% 30%;
	padding: 2% 0 10%;
}
.sherpa3d__group {
	position: relative;
	transform-style: preserve-3d;
	transform: rotateY(calc(12deg + var(--tilt-y, 0deg))) rotateX(calc(4deg + var(--tilt-x, 0deg)));
	transition: transform var(--dur-slow) var(--ease);
}
.sherpa3d__pgm {
	width: 82%;
	margin: 0;
	transform: translateZ(-40px) var(--card-t);
	box-shadow: var(--shadow-depth);
}
.sherpa3d__pgm > img {
	/* sherpa-ui.jpg: Sherpa captured on staging 2026-10-27, transcript panel cropped off */
	aspect-ratio: var(--pgm-ratio, 1231 / 805);
}
/* the cut: an outlined span on the timeline that rises toward the viewer once, on first view */
.sherpa3d__clip {
	position: absolute;
	/* sits on the screenshot's thumbnail strip (group-relative: the monitor is 82% wide) */
	left: var(--clip-x, 34%);
	top: var(--clip-y, 78.5%);
	width: var(--clip-w, 15%);
	height: var(--clip-h, 9.5%);
	border: 2px solid var(--fr-text-1);
	border-radius: 3px;
	background: rgba(243, 243, 241, 0.12);
	transform: translateZ(-38px);
	opacity: 0;
	transition:
		transform 900ms var(--ease) 300ms,
		opacity 300ms var(--ease);
	pointer-events: none;
}
.sherpa3d__clip span {
	position: absolute;
	left: 0;
	bottom: calc(100% + 6px);
	white-space: nowrap;
	padding: 3px 7px;
	background: var(--fr-paper);
	color: var(--fr-ink-1);
	font-family: var(--font-label);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sherpa3d.is-in .sherpa3d__clip {
	opacity: 1;
	transform: translateZ(var(--depth-1)) translateY(-18%);
}
.sherpa3d__out169 {
	position: absolute;
	right: 4%;
	bottom: -8%;
	width: 42%;
	aspect-ratio: 16 / 9;
	margin: 0;
	transform: translateZ(var(--depth-2)) var(--card-t);
	box-shadow:
		0 0 0 5px var(--fr-black-1),
		var(--shadow-depth);
}
.sherpa3d__out916 {
	position: absolute;
	right: 10%;
	top: -6%;
	width: 17%;
	aspect-ratio: 9 / 16;
	margin: 0;
	transform: translateZ(var(--depth-2)) var(--card-t);
	box-shadow:
		0 0 0 5px var(--fr-black-1),
		var(--shadow-depth);
}
.sherpa3d__out169 .monitor__label,
.sherpa3d__out916 .monitor__label {
	top: 10px;
	left: 10px;
}
.sherpa3d__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	/* clears the 16:9 output, which hangs below the programme monitor */
	margin-top: 9%;
	color: var(--fr-text-3);
}

/* ---------- Nav: the page you are on ---------- */
.nav__links a[aria-current='page'] {
	color: var(--fr-text-1);
}

/* ---------- Chips ---------- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r-chip);
	border: 1px solid var(--fr-line);
	background: var(--fr-black-2);
	font-size: var(--t-small);
	color: var(--fr-text-2);
}

/* ---------- Nav ---------- */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--fr-black-1);
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--dur) var(--ease),
		background-color var(--dur) var(--ease);
}
.nav.is-scrolled {
	background: var(--fr-black-0);
	border-color: var(--fr-line);
}
.nav__inner {
	display: flex;
	align-items: center;
	gap: var(--s-6);
	height: 68px;
}
.nav__logo img {
	/* 26px on desktop (owner: bigger), easing down to 21px on a phone */
	height: clamp(21px, 18px + 0.6vw, 26px);
	width: auto;
}
.nav__links {
	display: flex;
	gap: var(--s-6);
	margin: 0 auto 0 var(--s-4);
	padding: 0;
	list-style: none;
}
.nav__links a {
	font-size: var(--t-small);
	color: var(--fr-text-2);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.nav__links a:hover {
	color: var(--fr-text-1);
}
.nav__actions {
	display: flex;
	align-items: center;
	gap: var(--s-5);
}
.nav__login {
	font-size: var(--t-small);
	color: var(--fr-text-2);
	text-decoration: none;
}
.nav__login:hover {
	color: var(--fr-text-1);
}
.nav__menu {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--fr-line-strong);
	border-radius: var(--r-pill);
	color: var(--fr-text-1);
	font: inherit;
	font-size: var(--t-small);
	padding: 8px 14px;
	cursor: pointer;
}
.nav__drawer {
	display: none;
}

/* ---------- Sections ---------- */
.section {
	padding: var(--section-y) 0;
}
/* Dark stage with the deck's deep-red glow in the bottom-right corner */
.section--deep {
	background:
		radial-gradient(55% 65% at 100% 100%, var(--fr-glow-dark), transparent 72%),
		var(--fr-black-0);
}
/* Split stage: black on the left, navy-black on the right */
.section--split {
	background: linear-gradient(90deg, var(--fr-black-0) 0 50%, var(--fr-navy) 50% 100%);
}
/* Light sheet: grey with a coral glow in the bottom-right corner */
.section--paper {
	background:
		radial-gradient(45% 60% at 100% 100%, var(--fr-glow-light), transparent 70%),
		var(--fr-paper);
	color: var(--fr-ink-1);
}
.section--paper .eyebrow,
.section--paper .cats {
	color: var(--fr-ink-2);
}
.section--paper .hl {
	color: var(--fr-tally-deep);
}
.section--paper .body-2,
.section--paper .lead {
	color: var(--fr-ink-2);
}
.section--paper .text-link {
	color: var(--fr-ink-1);
	border-color: var(--fr-paper-line);
}
/* Coral surface: the cover slide, full bleed */
.section--coral {
	background: var(--fr-coral);
	color: #ffffff;
}
.section--coral .eyebrow,
.section--coral .lead,
.section--coral .body-2,
.section--coral .mono {
	color: var(--fr-ink-on-coral);
}
.section--coral .hl {
	color: var(--fr-ink-on-coral);
}
.section--coral .btn--tally {
	background: var(--fr-ink-on-coral);
	color: #ffffff;
}
.section--coral .btn--tally:hover {
	background: #000000;
}
.section--coral .text-link {
	color: var(--fr-ink-on-coral);
	border-color: rgba(22, 3, 4, 0.35);
}
.section--coral .tally-dot,
.section--coral .tally-dot::after {
	background: #ffffff;
	border-color: #ffffff;
}
.section__head {
	max-width: 760px;
	margin-bottom: var(--s-8);
}
.section__head .lead {
	margin-top: var(--s-5);
}
.section__head .text-link {
	margin-top: var(--s-5);
}

/* ---------- Cards ---------- */
/* Maroon card on dark: a dark-red gradient with a thin dark-red edge */
.card {
	padding: var(--s-6);
	border-radius: var(--r-panel);
	border: 1px solid var(--fr-maroon-line);
	background: linear-gradient(180deg, var(--fr-maroon-top), var(--fr-maroon-bottom));
}
.card h3 {
	font-size: var(--t-h3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--s-4);
}
.card .body-2 {
	font-size: 0.9375rem;
}
/* White card on the light sheet */
.card--light {
	border: 0;
	background: var(--fr-card);
	box-shadow: var(--shadow-card);
	border-radius: var(--r-card);
	color: var(--fr-ink-1);
}
/* Benefit card: a real heading, first word in red, one plain line */
.benefit h3 {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	text-transform: none;
	letter-spacing: -0.025em;
	color: var(--fr-ink-1);
}
.benefit .body-2 {
	font-size: 1rem;
}
.card--light .body-2,
.card--light li {
	color: var(--fr-ink-2);
}
.cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-5);
}

/* ---------- Split: heading on the black half, content on the navy half ---------- */
.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-9);
	align-items: start;
}
.split .section__head {
	margin-bottom: 0;
}

/* ---------- Pillars: three columns of uppercase heads and short copy ---------- */
.pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-7);
}
.pillar h3 {
	font-size: var(--t-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: var(--s-4);
	padding-top: var(--s-4);
	border-top: 2px solid var(--fr-tally);
}
.pillar .body-2 {
	font-size: 0.9375rem;
}
.pillars--stack {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6);
}

/* ---------- Timeline: rounded chips on a red line (the deck's three-steps slide) ---------- */
.timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-5);
	margin-bottom: var(--s-5);
	padding-bottom: var(--s-6);
}
.timeline::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	height: 2px;
	background: var(--fr-coral);
}
.timeline__step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--s-4);
}
.timeline__chip {
	padding: 7px 18px;
	border-radius: var(--r-chip);
	background: var(--fr-card);
	box-shadow: var(--shadow-card);
	color: var(--fr-tally-deep);
	font-weight: 700;
	font-size: var(--t-small);
	letter-spacing: 0.04em;
}
.timeline__step::after {
	content: '';
	position: absolute;
	bottom: -27px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--fr-coral);
	box-shadow: 0 0 0 4px var(--fr-paper);
}
.steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-5);
	counter-reset: stage;
}
.steps .card {
	counter-increment: stage;
}
/* on one column the timeline goes; each card carries its own stage chip */
.steps .card::before {
	content: 'Stage ' counter(stage);
	display: none;
	width: max-content;
	margin-bottom: var(--s-4);
	padding: 5px 14px;
	border-radius: var(--r-chip);
	background: var(--fr-tally-deep);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.steps .card h3 {
	text-transform: none;
	letter-spacing: -0.01em;
	font-size: 1.25rem;
}
.steps ul {
	margin: 0;
	padding-left: 1.1em;
	display: grid;
	gap: var(--s-2);
	font-size: 0.9375rem;
}
.steps li::marker {
	color: var(--fr-tally-deep);
}

/* ---------- Red bar: one solid line for the key message ---------- */
.redbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--s-2) var(--s-4);
	margin-top: var(--s-6);
	padding: var(--s-4) var(--s-6);
	border-radius: 12px;
	background: var(--fr-tally-hover);
	color: #ffffff;
	text-align: center;
}
.redbar strong {
	font-size: var(--t-h3);
	font-weight: 700;
}
.redbar span {
	font-size: var(--t-small);
	color: rgba(255, 255, 255, 0.9);
}

/* ---------- Ingest chips ---------- */
.ingest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-6);
}
.ingest .mono {
	margin-right: var(--s-2);
	color: var(--fr-ink-2);
}
.ingest span:not(.mono) {
	padding: 6px 14px;
	border-radius: var(--r-chip);
	background: var(--fr-card);
	box-shadow: var(--shadow-card);
	font-size: var(--t-small);
	font-weight: 600;
	color: var(--fr-ink-1);
}

/* ---------- Rundown: numbered steps, as white cards on the light sheet ---------- */
.rundown {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-3);
}
.rundown__row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--s-6);
	align-items: baseline;
	padding: var(--s-5) var(--s-6);
	border-radius: var(--r-card);
	background: var(--fr-card);
	box-shadow: var(--shadow-card);
}
.rundown__seg {
	font-family: var(--font-label);
	font-size: var(--t-small);
	color: var(--fr-tally-deep);
	font-weight: 700;
}
.rundown__title {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	font-size: var(--t-h3);
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin: 0 0 var(--s-2);
}
.rundown__desc {
	margin: 0;
	color: var(--fr-ink-2);
	max-width: 30em;
}
.rundown__detail {
	font-family: var(--font-label);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fr-ink-2);
	line-height: 1.9;
}

/* ---------- Stats: big numerals ---------- */
.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--fr-line);
}
.stat {
	padding: var(--s-6) var(--s-5) 0 0;
	border-right: 1px solid var(--fr-line);
}
.stat + .stat {
	padding-left: var(--s-5);
}
.stat:last-child {
	border-right: 0;
}
.stat__num {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-stat);
	line-height: 0.9;
	letter-spacing: -0.045em;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--fr-text-1);
}
.stat__label {
	display: block;
	margin-top: var(--s-4);
	max-width: 16em;
	font-size: var(--t-small);
	color: var(--fr-text-2);
}

/* ---------- Logo strip ---------- */
.logos {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Two identical halves (the second aria-hidden), so -50% loops seamlessly.
   Spacing is a right margin, not gap, so both halves are exactly equal. */
.logos__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: logos-scroll 60s linear infinite;
}
.logos__dup {
	display: contents;
}
.logos:hover .logos__track {
	animation-play-state: paused;
}
/* Same box for every logo, so square marks and wide wordmarks carry equal weight */
.logos__track img {
	margin-right: var(--s-4);
	width: 168px;
	height: 76px;
	padding: 18px 26px;
	background: var(--fr-card);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	object-fit: contain;
}
@keyframes logos-scroll {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- Form field ---------- */
.field {
	display: grid;
	gap: var(--s-2);
}
.field label {
	font-family: var(--font-label);
	font-size: var(--t-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fr-text-2);
}
.field input,
.field textarea {
	height: 48px;
	padding: 0 var(--s-4);
	border-radius: var(--r-frame);
	border: 1px solid var(--fr-line-strong);
	background: var(--fr-black-0);
	color: var(--fr-text-1);
	font: inherit;
}
.field textarea {
	height: auto;
	min-height: 96px;
	padding: var(--s-3) var(--s-4);
	resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
	color: var(--fr-text-3);
}
.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--fr-text-1);
}
.field [aria-invalid='true'] {
	border-color: var(--fr-tally);
}
.field__opt {
	margin-left: var(--s-2);
	letter-spacing: 0;
	text-transform: none;
	color: var(--fr-text-3);
}
.field__error {
	font-size: var(--t-small);
	color: var(--fr-tally);
}

/* ---------- Book a demo (js/demo.js): a maroon card in a dialog, or inline on the contact page ---------- */
.demo {
	color: var(--fr-text-1);
}
/* the form, its thank-you and the error lines all switch with [hidden], which a display rule would override */
.demo [hidden] {
	display: none;
}
dialog.demo,
.demo--inline {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--fr-maroon-line);
	border-radius: var(--r-panel);
	background: linear-gradient(180deg, var(--fr-maroon-top), var(--fr-maroon-bottom));
}
dialog.demo {
	width: min(560px, calc(100vw - var(--s-6)));
	max-height: calc(100svh - var(--s-6));
	margin: auto;
	overflow: auto;
	box-shadow: var(--shadow-depth);
}
dialog.demo[open] {
	animation: demo-in var(--dur) var(--ease);
}
dialog.demo::backdrop {
	background: rgba(0, 0, 0, 0.72);
}
html:has(dialog.demo[open]) {
	overflow: hidden;
}
@keyframes demo-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}
.demo__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--fr-line-strong);
	background: transparent;
	color: var(--fr-text-1);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.demo__close:hover {
	background: var(--fr-black-3);
}
.demo__form,
.demo__done {
	display: grid;
	gap: var(--s-3);
}
.demo__form .field {
	gap: 6px;
}
.demo__form .field input {
	height: 44px;
}
.demo__form .field textarea {
	min-height: 72px;
}
.demo__done {
	justify-items: start;
}
.demo .eyebrow {
	margin: 0;
}
.demo__title {
	margin: 0;
	padding-right: var(--s-7);
	font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem);
	line-height: 1.05;
}
.demo__title:focus {
	outline: none;
}
.demo__lede {
	margin: 0 0 var(--s-2);
	color: var(--fr-text-2);
}
/* the bot trap: off screen, never read out */
.demo__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.demo__status {
	margin: 0;
	font-size: var(--t-small);
	color: var(--fr-text-2);
}
.demo__status:empty {
	display: none;
}
.demo__status.is-error {
	color: var(--fr-tally);
}
.demo__status a,
.demo__fine a {
	color: inherit;
	text-decoration: underline;
}
.demo__send {
	justify-self: start;
}
.demo__send:disabled {
	opacity: 0.6;
	cursor: progress;
}
.demo__fine {
	margin: 0;
	font-size: var(--t-small);
	color: var(--fr-text-3);
}

/* ---------- FAQ: native <details>, a red plus that turns into a cross ---------- */
.faq {
	max-width: 880px;
	border-top: 1px solid var(--fr-line);
}
.faq details {
	border-bottom: 1px solid var(--fr-line);
}
.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-5) 0;
	font-size: var(--t-h3);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: '+';
	flex: none;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	color: var(--fr-tally);
	transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after {
	transform: rotate(45deg);
}
.faq details p {
	max-width: 64ch;
	margin: 0 0 var(--s-5);
	color: var(--fr-text-2);
}

/* ---------- Legal pages: the live site's text, word for word, in a readable column ---------- */
.legal {
	max-width: 780px;
}
.legal__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: var(--s-5) 0 0;
}
.legal__tabs a[aria-current='page'] {
	border-color: var(--fr-text-1);
	color: var(--fr-text-1);
}
.legal__body {
	color: var(--fr-text-2);
	line-height: 1.7;
}
.legal__body p {
	margin: 0 0 var(--s-4);
}
.legal__body ol {
	display: grid;
	gap: var(--s-5);
	margin: var(--s-6) 0;
	padding-left: 1.5em;
}
.legal__body li::marker {
	font-weight: 700;
	color: var(--fr-text-1);
}
/* each section's first line is its title */
.legal__body li > p::first-line {
	font-weight: 600;
	color: var(--fr-text-1);
}
.legal__body a {
	color: var(--fr-text-1);
	text-decoration: underline;
	overflow-wrap: anywhere;
}

/* ---------- Contact ---------- */
.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--s-8);
	align-items: start;
}
.contact__grid h1 + .lead {
	margin-top: var(--s-5);
}
.contact__list {
	display: grid;
	gap: var(--s-6);
	margin: var(--s-7) 0 0;
}
.contact__list dt {
	font-family: var(--font-label);
	font-size: var(--t-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fr-text-3);
}
.contact__list dd {
	margin: var(--s-2) 0 0;
	font-size: var(--t-lead);
	line-height: 1.5;
}
.contact__list a {
	color: var(--fr-text-1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- About: the founders ---------- */
.founder__name {
	margin: 0;
	font-size: var(--t-h3);
	font-weight: 700;
}
.founder__role {
	margin: var(--s-2) 0 0;
	color: var(--fr-text-2);
}

/* words as well as numbers (SOC 2, 24×7): a step down from the stat size, one line each */
.stats--compact .stat__num {
	font-size: var(--t-h1);
	white-space: nowrap;
}

/* ---------- 404 ---------- */
.notfound {
	display: grid;
	justify-items: start;
	gap: var(--s-5);
	max-width: 640px;
}
.notfound .stat__num {
	color: var(--fr-tally);
}

/* ---------- Cookie choice (js/analytics.js): only where Google Analytics would run and consent is needed ---------- */
.consent {
	position: fixed;
	left: var(--s-4);
	bottom: var(--s-4);
	z-index: 70;
	display: grid;
	gap: var(--s-4);
	max-width: 420px;
	padding: var(--s-5);
	border: 1px solid var(--fr-line-strong);
	border-radius: var(--r-card);
	background: var(--fr-black-2);
	box-shadow: var(--shadow-depth);
}
.consent[hidden] {
	display: none;
}
.consent p {
	margin: 0;
	font-size: var(--t-small);
	color: var(--fr-text-2);
}
.consent a {
	color: var(--fr-text-1);
	text-decoration: underline;
}
.consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--dur-slow) var(--ease),
		transform var(--dur-slow) var(--ease);
}
.reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.screens__group {
		transition: none;
	}
	.phones__row,
	.sherpa3d__group,
	.sherpa3d__clip {
		transition: none;
	}
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.tally-dot::after {
		animation: none;
	}
	.logos__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
		row-gap: var(--s-6);
	}
	.logos__track [aria-hidden='true'] {
		display: none;
	}
	.logos {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.cards,
	.pillars,
	.steps {
		grid-template-columns: minmax(0, 1fr);
	}
	.pillars {
		gap: var(--s-6);
	}
	.timeline {
		display: none;
	}
	.steps .card::before {
		display: block;
	}
	.split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-7);
	}
	.section--split {
		background: var(--fr-black-0);
	}
	.contact__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-7);
	}
	.nav__links,
	.nav__actions {
		display: none;
	}
	.nav__menu {
		display: inline-flex;
	}
	.nav__drawer.is-open {
		display: grid;
		gap: var(--s-4);
		padding: var(--s-4) var(--gutter) var(--s-6);
		border-top: 1px solid var(--fr-line);
		background: var(--fr-black-0);
	}
	.nav__drawer a:not(.btn) {
		color: var(--fr-text-1);
		text-decoration: none;
		font-size: 1.0625rem;
		padding: var(--s-2) 0;
	}
	.rundown__row {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: var(--s-2) var(--s-4);
	}
	.rundown__detail {
		grid-column: 2;
	}
	.stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.stat:nth-child(2) {
		border-right: 0;
	}
	.stat:nth-child(3) {
		padding-left: 0;
	}
	.stat:nth-child(n + 3) {
		margin-top: var(--s-6);
		border-top: 1px solid var(--fr-line);
	}
}

@media (max-width: 600px) {
	.consent {
		right: var(--s-4);
		max-width: none;
	}
	.phones__row,
	.phones--5 .phones__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-4);
		transform: none;
	}
	.phones__row > .phone,
	.phones__row > .phone:first-child,
	.phones__row > .phone:last-child,
	.phones--5 .phones__row > .phone:nth-child(3) {
		transform: none;
	}
	.phones--5 .phones__row > .phone:nth-child(5) {
		display: none;
	}
	/* three phones stay in one row on a phone */
	.phones--3 .phones__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-2);
	}
	.phones--3 .phone__cap {
		font-size: 0.75rem;
	}
	.sherpa3d__group {
		transform: rotateY(6deg) rotateX(3deg);
	}
	.sherpa3d__clip span {
		font-size: 8.5px;
		padding: 2px 5px;
	}
	.sherpa3d__out169 .monitor__label,
	.sherpa3d__out916 .monitor__label {
		top: 6px;
		left: 6px;
		padding: 2px 5px;
		font-size: 8.5px;
	}
	.sherpa3d__meta {
		flex-direction: column;
		align-items: flex-start;
	}
	.screens__group {
		transform: rotateY(-9deg) rotateX(3deg);
	}
	.screen {
		box-shadow:
			0 0 0 3px var(--fr-black-1),
			0 24px 40px -16px rgba(0, 0, 0, 0.75);
	}
	.screen--916 .monitor__marks {
		inset: 6px;
		--len: 9px;
	}
	.screen .monitor__label {
		top: 8px;
		left: 8px;
		padding: 3px 5px;
		font-size: 8.5px;
		letter-spacing: 0.06em;
	}
	.label-long {
		display: none;
	}
}