/*
 * Self-hosted type: DM Sans, the typeface of the Frammer deck (variable:
 * weight 100-1000, optical size 9-40). SIL Open Font License 1.1, licence text
 * in assets/fonts/OFL-DMSans.txt. The FRAMMER AI wordmark stays an image
 * (assets/img/logo-frammer.png): its Futura Bold is not licensed for web use.
 */

/* dm-sans-var-italic-latin-ext */
@font-face {
	font-family: 'DM Sans';
	font-style: italic;
	font-weight: 100 1000;
	font-display: swap;
	src: url('/assets/fonts/dm-sans-var-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* dm-sans-var-italic-latin */
@font-face {
	font-family: 'DM Sans';
	font-style: italic;
	font-weight: 100 1000;
	font-display: swap;
	src: url('/assets/fonts/dm-sans-var-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* dm-sans-var-normal-latin-ext */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('/assets/fonts/dm-sans-var-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* dm-sans-var-normal-latin */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('/assets/fonts/dm-sans-var-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Frammer design system — "Studio", taken from the Frammer deck (2026-10).
 *
 * Coral as a full-bleed brand surface, near-black stages with a deep-red glow
 * in one corner, light-grey sheets with soft white cards, and a red keyword
 * device in headlines. DM Sans throughout; the FRAMMER AI wordmark stays an
 * image. Colours were sampled from the deck at full resolution.
 *
 * This file is the single source of truth. Every page reads these tokens —
 * change a value here, not in a page. Older token names are kept where the
 * meaning carried over, so the components re-skinned without new class names.
 */

:root {
	/* Dark stage */
	--fr-black-0: #000000; /* page canvas, nav, footer */
	--fr-black-1: #000000; /* section canvas */
	--fr-black-2: #0b0b10; /* panel on dark */
	--fr-black-3: #15151c; /* raised, hover */
	--fr-navy: #06070c; /* right half of a split section */
	--fr-shade: #111117; /* darkest grey: every other dark section on the homepage */
	--fr-line: rgba(255, 255, 255, 0.1);
	--fr-line-strong: rgba(255, 255, 255, 0.22);

	/* Type on dark */
	--fr-text-1: #ffffff;
	--fr-text-2: #c3c4cb;
	--fr-text-3: #8e8f98; /* 6.1:1 on black */

	/* Reds — sampled from the deck */
	--fr-coral: #fe595d; /* cover surface, timeline line and dots */
	--fr-tally: #ff1a2e; /* keyword red on dark, live signals (5.4:1 on black) */
	--fr-tally-hover: #ff3b4e; /* the deck's solid key-message bar */
	--fr-tally-deep: #d0101c; /* keyword red on light (4.5:1 on #e8e8e8) */
	--fr-btn: #e0141e; /* every primary button, nav included: the site's red, a touch deeper so white passes AA */
	--fr-btn-hover: #f02430;
	--fr-btn-ink: #ffffff; /* white label on every red button (4.9:1) */
	--fr-tally-ink: #ffffff; /* label on a red live signal */
	--fr-ink-on-coral: #160304; /* text on the coral surface (6.5:1) */

	/* Maroon cards on dark */
	--fr-maroon-top: #22030a;
	--fr-maroon-bottom: #080102;
	--fr-maroon-line: #4a1219;
	--fr-glow-dark: rgba(214, 0, 24, 0.5); /* corner glow on dark */
	--fr-glow-light: rgba(254, 89, 93, 0.5); /* corner glow on light */

	/* Light sheet */
	--fr-paper: #e8e8e8;
	--fr-paper-2: #f6f6f6;
	--fr-paper-line: rgba(0, 0, 0, 0.1);
	--fr-card: #ffffff;
	--fr-ink-1: #111114;
	--fr-ink-2: #55565c; /* 6.2:1 on #e8e8e8 */
	--fr-line-ink: rgba(17, 17, 20, 0.14); /* hairline on the light sheet */

	/* Type — DM Sans everywhere, as in the deck */
	--font-display: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
	--font-label: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; /* tracked uppercase eyebrows */
	--display-stretch: 100%;
	--display-weight: 700;
	--display-track: -0.025em;
	--body-stretch: 100%;

	/* Type scale — fluid, phone to desktop */
	--t-hero: clamp(2.75rem, 1.7rem + 4.4vw, 6rem); /* 44px at 375, ~88px at 1440 */
	--t-h1: clamp(2.125rem, 1.45rem + 3vw, 4.25rem);
	--t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 3rem);
	--t-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--t-stat: clamp(3.5rem, 2.2rem + 5.6vw, 7.5rem);
	--t-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem); /* 19px at 375, 24px from ~1310 (was 17→20px; owner, 2026-11-02: bigger everywhere) */
	--t-body: 1rem;
	--t-small: 0.875rem;
	--t-label: 0.75rem;

	/* Space — one ladder, nothing off it */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 72px;
	--s-9: 112px;
	--section-y: clamp(36px, 4vw, 60px); /* owner, 2026-10-31: less empty space between sections */
	--container: 1240px;
	--gutter: clamp(16px, 4vw, 48px);
	--nav-h: 68px;

	/* Radius */
	--r-frame: 12px; /* video, images, inputs */
	--r-chip: 999px; /* chips and tags */
	--r-panel: 18px; /* maroon cards and panels on dark */
	--r-card: 14px; /* white cards on light */
	--r-pill: 999px; /* every button */

	/* Shadow */
	--shadow-card: 0 12px 32px -12px rgba(17, 17, 20, 0.18);

	/* Motion */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur-fast: 160ms;
	--dur: 280ms;
	--dur-slow: 640ms;

	/* Depth — 3D scenes are real monitors in a room, never decoration */
	--persp: 1600px;
	--depth-1: 60px;
	--depth-2: 140px;
	--shadow-depth: 0 40px 80px -24px rgba(0, 0, 0, 0.75);

	/* Depth hover (js/depth.js). Static at rest: nothing moves until a fine
	   pointer rests on a card. Then the card turns to face the pointer, lifts,
	   and catches a glare from one light fixed above the screen. */
	--hover-tilt: 11deg;
	--hover-lift: 1.04;
	--hover-inner-shift: 6px; /* labels move this much further than the card, for depth */
	--glare-radius: 1.5; /* the glare's radius, in card diagonals: large and very soft */
	--glare-travel: 0.9; /* how far it slides against the tilt, in card widths/heights */
	--glare-peak: 0.9; /* white at the glare's centre, soft-light blended: lifts a mid tone by ~20% at most, never greys it */
	--glare-floor: 0.05; /* a plain-white copy of the glare, so it still shows over black, where soft-light cannot lift */
	--sheen-peak: 0.07; /* the faint diagonal glass band */

	/* What depth.js writes on a hovered card; the defaults keep every card flat
	   and 2D at rest, so resting cards cost the compositor nothing extra */
	--card-t: translate(0, 0);
	--card-px: 0;
	--card-py: 0;
}

/*
 * 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%;
}
img {
	height: auto;
}
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);
}
/* keeps a hyphenated word or a short phrase on one line inside a feature tile ("auto-dubbing", never "auto- / dubbing") */
.nw {
	white-space: nowrap;
}
/* one clause of a feature tile: the line breaks between clauses first, inside one only when it must */
.cl {
	display: inline-block;
}
.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);
}
/* A homepage section's link to its own page, under its sample videos: a solid white pill, so it
   reads as a button while Book a demo keeps the red (owner, 2026-11-02) */
.btn--light {
	background: var(--fr-text-1);
	color: var(--fr-black-0);
}
.btn--light:hover {
	background: var(--fr-text-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);
}
/* A hero video's poster, as a plain image under it: the browser paints it at once and
   counts it as the page's main picture. The video stays clear until it plays, then
   fades in over it (js/app.js); with reduced motion it never plays, so the still stays. */
.monitor > .monitor__still {
	position: absolute;
	inset: 0;
}
.monitor > .monitor__still + video {
	position: relative;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}
.monitor > .monitor__still + video.is-playing {
	opacity: 1;
}
/* 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;
}
/* Flat cards that tilt on hover (data-hover-card, js/depth.js): their own
   perspective(), since nothing around them is 3D. Not data-tilt: that marks the
   3D groups on the product pages. */
[data-hover-card] {
	position: relative;
	transform: perspective(var(--persp)) var(--card-t);
}
/* ---------- 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: 660px;
}
.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);
}
/* the homepage Microdrama section's button, under its three phones, lined up with the row's left edge */
.phones__more {
	max-width: 660px;
	margin: var(--s-6) auto 0;
}

/* ---------- 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__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);
}
/* Darkest-grey stage: alternates with black so each section reads apart (owner, 2026-10-31) */
.section--shade {
	background-color: var(--fr-shade);
}
.section--deep.section--shade {
	background:
		radial-gradient(55% 65% at 100% 100%, var(--fr-glow-dark), transparent 72%),
		var(--fr-shade);
}
/* 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-6);
}
.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;
}
/* a numbered list of one-line statements, no description or detail column
   (Microdrama "Multi-modal Analysis with Agents", owner, 2026-11-02) */
.rundown--plain .rundown__row {
	grid-template-columns: 56px minmax(0, 1fr);
}
.rundown--plain .rundown__title {
	margin: 0;
}

/* ---------- 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 ---------- */
/* Still, not scrolling (Suparna, 2026-10-28): every logo in view at once,
   wrapped and centred. 19 logos (2026-11-01) can't take two rows at a
   readable size, so the strip is narrowed to give three even rows (6/7/6)
   instead of two full rows and an orphan pair */
.logos__track {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-4);
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
/* Each card is as wide as its logo needs: one height for every logo, so long
   wordmarks (The Hindu, Mathrubhumi) stay readable next to square marks */
.logos__track img {
	box-sizing: content-box;
	width: auto;
	max-width: 150px;
	height: 28px;
	min-width: 60px;
	padding: 16px 18px;
	background: var(--fr-card);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	object-fit: contain;
}
/* near-square marks get more height in the same 60px card, to match the wordmarks' weight */
.logos__track .logo--mark {
	height: 40px;
	padding: 10px 18px;
}
@media (max-width: 640px) {
	.logos__track {
		gap: var(--s-2);
	}
	.logos__track img {
		height: 18px;
		max-width: 104px;
		min-width: 0;
		padding: 11px 12px;
	}
	.logos__track .logo--mark {
		height: 28px;
		padding: 6px 12px;
	}
}

/* ---------- 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 ---------- */
/* photo card: the portrait fills the top of the card, name and role below */
.cards.founders {
	max-width: 1040px;
}
.founder {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.founder__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
}
.founder figcaption {
	padding: var(--s-5) var(--s-6) var(--s-6);
}
.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);
}

/* About: two text columns under the heading, first paragraph of each in bold */
.about__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-5) var(--s-9);
	margin-top: var(--s-7);
}
.about__cols p {
	margin: 0 0 var(--s-4);
	max-width: 34em;
	color: var(--fr-text-2);
	text-wrap: pretty;
}
.about__cols .about__first {
	font-size: var(--t-lead);
	font-weight: 600;
	color: var(--fr-text-1);
}
.about__list {
	margin: var(--s-2) 0 0;
	padding-left: 1.25em;
}
.stats--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: var(--s-8);
}

/* About: press list, one row per article, full width of the column */
.press {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fr-line-ink);
}
.press li {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) auto;
	gap: var(--s-5);
	align-items: baseline;
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--fr-line-ink);
}
.press__source {
	font-weight: 700;
	color: var(--fr-ink-1);
}
.press__title {
	color: var(--fr-ink-1);
	text-decoration: underline;
	text-decoration-color: var(--fr-line-ink);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--dur-fast) var(--ease);
}
.press__title:hover {
	text-decoration-color: currentColor;
}
.press__date {
	font-size: var(--t-small);
	color: var(--fr-ink-2);
	white-space: nowrap;
}

/* Sports page: the full list of sports, a step bigger than a category line */
.sports-list {
	font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.0625rem);
	letter-spacing: 0.16em;
	max-width: 960px;
}

/* 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;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.about__cols {
		grid-template-columns: minmax(0, 1fr);
	}
	.cards.founders {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-4);
	}
	.founder figcaption {
		padding: var(--s-4);
	}
	.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;
	}
}

/* founders on a phone: one row each, portrait on the left */
@media (max-width: 640px) {
	.press li {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-1);
	}
	.cards.founders {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-3);
	}
	.founder {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		align-items: center;
	}
	.founder figcaption {
		padding: var(--s-4);
	}
}

/* Homepage layout. Components and tokens come from site.css / tokens.css. */

/* ---------- Hero: dark stage, the tagline (its red panel comes up on hover), copy beside the three screens, a little under one viewport tall ---------- */
/* The stage lights up on load: the deck's red corner glow (the same gradient as
   .section--deep) grows out of the bottom-right corner and brightens. Then it
   breathes, slowly, for as long as the hero is on screen (owner, 2026-10-27):
   dims a little and draws back toward the corner, 9s a breath. Opacity and
   transform only, on one layer behind the content; paused off screen (app.js). */
.hero {
	position: relative;
	isolation: isolate;
	background: var(--fr-black-0);
	display: grid;
	align-content: center;
	/* no min-height: the copy sets the height, so the screens never float in
	   black above and below (owner, 2026-10-31: less empty space; was 72svh,
	   and 100svh before Suparna's 2026-10-28 "every section thinner") */
	padding: clamp(28px, 3.5vw, 48px) 0;
	/* 3D screens project past their box; clip so they never widen the page */
	overflow-x: clip;
}
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(55% 65% at 100% 100%, var(--fr-glow-dark), transparent 72%);
	transform-origin: 100% 100%;
	animation:
		hero-light-up 2.2s var(--ease) 0.15s both,
		hero-glow-breathe 4.5s ease-in-out 2.35s infinite alternate;
	pointer-events: none;
}
.hero.is-offscreen::before {
	animation-play-state: paused;
}
@keyframes hero-light-up {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	45% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
/* starts where the light-up ends, so the hand-over doesn't jump */
@keyframes hero-glow-breathe {
	from {
		opacity: 1;
		transform: none;
	}
	to {
		opacity: 0.55;
		transform: scale(0.9);
	}
}
.matchday {
	overflow-x: clip;
}
.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--s-7);
	align-items: center;
}
/* The tagline (owner, 2026-10-27): plain on the dark stage at rest, white
   headline and a keyword-red claim. On hover its panel fades in behind it, in
   the site's red (the buttons' red), and turns toward the pointer like the
   screens (js/depth.js); the claim goes to ink so it reads on the red. The
   panel is shifted left by its own padding, so at rest the words line up with
   the eyebrow and copy, and its inner width is what it was as an always-on
   panel. Its own perspective(), since nothing around it is 3D. Touch screens
   never show the panel. */
.hero__tag {
	--tag-pad-x: clamp(20px, 2.4vw, 36px);
	--tag-pad-y: clamp(16px, 1.8vw, 24px);
	position: relative;
	margin: var(--s-4) var(--tag-pad-x) var(--s-4) calc(-1 * var(--tag-pad-x));
	padding: var(--tag-pad-y) var(--tag-pad-x) calc(var(--tag-pad-y) + 4px);
	border-radius: var(--r-panel);
	transform: perspective(var(--persp)) var(--card-t);
	transition:
		background-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.hero__tag:hover {
		background-color: var(--fr-btn);
		box-shadow: var(--shadow-depth);
	}
	.hero__tag:hover .hl {
		color: var(--fr-ink-on-coral);
	}
}
/* the headline rides a touch further than the panel, like a card's label */
.hero__tag[data-hover] .hero__title {
	translate: calc(var(--card-px) * var(--hover-inner-shift)) calc(var(--card-py) * var(--hover-inner-shift));
}
.hero__title {
	margin: var(--s-5) 0 var(--s-5);
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.hero__tag .hero__title {
	margin: 0;
	/* sized so "<30 seconds" holds one line inside the panel */
	font-size: clamp(2.375rem, 1.3rem + 3.5vw, 4.5rem);
	line-height: 1;
	color: #ffffff;
}
.hero__tag .hl {
	color: var(--fr-tally);
	transition: color var(--dur) var(--ease);
}
/* the claim sits on its own line under "From Live to Social" */
.hero__claim {
	display: block;
	white-space: nowrap;
}
/* the positioning line, much bigger than body copy (Suparna, 2026-10-28) */
.hero__sub {
	font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.375rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: var(--s-4);
	text-wrap: balance;
}
.hero__copy .lead {
	font-size: 1.125rem;
	max-width: 32em;
}
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-5);
	margin-top: var(--s-6);
}
/* the screens never outgrow the first screen: height is about 0.6 x width */
.hero__visual {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: max(320px, calc((100svh - var(--nav-h) - 180px) / 0.62));
	justify-self: end;
}

/* ---------- 02 Wall: a curved 3D multiviewer that settles flat as you scroll ---------- */
.wallsec {
	overflow: hidden;
}
.wall {
	perspective: var(--persp);
	perspective-origin: 50% 20%;
	padding: 0 var(--gutter);
	--wall-rx: 20deg;
	--wall-s: 0.92;
}
.wall__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	max-width: 1400px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform-origin: 50% 0;
	transform: rotateX(var(--wall-rx)) scale(var(--wall-s));
}
.wall__tile {
	margin: 0;
	aspect-ratio: 16 / 9;
	box-shadow: var(--shadow-depth);
}
/* outer columns swing toward the viewer around their inner edge: a concave wall */
/* the card turn (--card-t, hover) is wrapped in half-width shifts so it pivots
   on the tile's own centre, not on the edge the tile swings from */
.wall__tile:nth-child(4n + 1) {
	transform-origin: right center;
	transform: rotateY(16deg) translateX(-50%) var(--card-t) translateX(50%);
}
.wall__tile:nth-child(4n + 2) {
	transform-origin: right center;
	transform: rotateY(5deg) translateX(-50%) var(--card-t) translateX(50%);
}
.wall__tile:nth-child(4n + 3) {
	transform-origin: left center;
	transform: rotateY(-5deg) translateX(50%) var(--card-t) translateX(-50%);
}
.wall__tile:nth-child(4n) {
	transform-origin: left center;
	transform: rotateY(-16deg) translateX(50%) var(--card-t) translateX(-50%);
}
.wall__tag {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border-radius: var(--r-chip);
	background: #ffffff;
	color: var(--fr-ink-1);
	font-family: var(--font-label);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}
.wall__tag--goal {
	background: var(--fr-tally-deep);
	color: #ffffff;
}
.wall__tag--goal .tally-dot,
.wall__tag--goal .tally-dot::after {
	background: #ffffff;
	border-color: #ffffff;
}
.wall__tag--cam {
	background: rgba(8, 9, 10, 0.82);
	color: var(--fr-text-1);
	border-left-color: transparent;
}
.wall.is-live .wall__tag {
	opacity: 1;
	transform: none;
}
.wall.is-live .wall__tile:nth-child(2) .wall__tag {
	transition-delay: 300ms;
}
.wall.is-live .wall__tile:nth-child(3) .wall__tag {
	transition-delay: 700ms;
}
.wall.is-live .wall__tile:nth-child(5) .wall__tag {
	transition-delay: 1000ms;
}
.wall.is-live .wall__tile:nth-child(6) .wall__tag {
	transition-delay: 1300ms;
}
.wall.is-live .wall__tile:nth-child(7) .wall__tag {
	transition-delay: 1600ms;
}
.wall__note {
	margin: var(--s-6) 0 0;
	color: var(--fr-text-3);
}

/* ---------- 04 Match day: 3D pitch + match log ---------- */
.matchday__grid {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
	gap: var(--s-7);
	align-items: start;
	margin-bottom: var(--s-8);
}
.pitch-stage {
	position: relative;
	aspect-ratio: 16 / 8.4;
	perspective: var(--persp);
	perspective-origin: 50% 0%;
	--pitch-rx: 56deg;
}
.pitch {
	position: absolute;
	left: 7%;
	right: 7%;
	top: 8%;
	aspect-ratio: 105 / 68;
	transform-style: preserve-3d;
	transform-origin: 50% 40%;
	transform: rotateX(calc(var(--pitch-rx) + var(--tilt-x))) rotateZ(calc(var(--tilt-y) * -1));
	transition: transform var(--dur-slow) var(--ease);
	/* mown stripes in two studio blacks; the pitch stays monochrome, like a telestrator */
	background: repeating-linear-gradient(
		90deg,
		var(--fr-black-2) 0,
		var(--fr-black-2) 9.0909%,
		var(--fr-black-1) 9.0909%,
		var(--fr-black-1) 18.1818%
	);
	box-shadow: var(--shadow-depth);
}
/* the pitch has a thickness: a front face folded down from its near edge */
.pitch::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 18px;
	background: var(--fr-black-0);
	border-top: 1px solid var(--fr-line-strong);
	transform-origin: top center;
	transform: rotateX(-90deg);
}
.pitch__lines,
.pitch__trail {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.pitch__lines {
	fill: none;
	stroke: rgba(243, 243, 241, 0.4);
	stroke-width: 3;
}
.pitch__lines .dot {
	fill: rgba(243, 243, 241, 0.5);
	stroke: none;
}
.pitch__lines .goal {
	stroke: rgba(243, 243, 241, 0.7);
}
.pitch__trail path {
	fill: none;
	stroke: var(--fr-text-1);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: var(--trail-len, 700);
	stroke-dashoffset: var(--trail-len, 700);
	transition: stroke-dashoffset 1.4s var(--ease);
}
.pitch.is-goal .pitch__trail path {
	stroke-dashoffset: 0;
}

/* Pins stand up off the pitch: .pin__up undoes the pitch tilt so the flag faces the camera */
.pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 0;
	height: 0;
	transform-style: preserve-3d;
}
.pin__base {
	position: absolute;
	left: -9px;
	top: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--fr-text-2);
	opacity: 0;
	transform: scale(0.3);
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}
.pin__up {
	position: absolute;
	left: 0;
	bottom: 0;
	transform-origin: bottom center;
	transform: rotateX(calc((var(--pitch-rx) + var(--tilt-x)) * -1));
	transform-style: preserve-3d;
}
.pin__grow {
	--fx: -50%; /* horizontal anchor of the flag over its stem */
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateX(var(--fx)) scaleY(0);
	transform-origin: bottom center;
	transition: transform 420ms var(--ease);
}
.pin__flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	padding: 4px 8px 3px;
	background: var(--fr-paper);
	color: var(--fr-ink-1);
	font-family: var(--font-label);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.6);
}
.pin__stem {
	width: 1px;
	height: 48px;
	background: var(--fr-text-2);
}
.pin.is-on .pin__base {
	opacity: 1;
	transform: none;
}
.pin.is-on .pin__grow {
	transform: translateX(var(--fx)) scaleY(1);
}
.pin--goal .pin__flag {
	background: var(--fr-tally);
	color: var(--fr-tally-ink);
}
.pin--goal .pin__flag .tally-dot {
	background: var(--fr-tally-ink);
}
.pin--goal .pin__flag .tally-dot::after {
	border-color: var(--fr-tally-ink);
}
.pin--goal .pin__base {
	border-color: var(--fr-tally);
}
.pin--goal .pin__stem {
	height: 72px;
	background: var(--fr-tally);
}

/* Match clock under the pitch */
.clock {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-5);
}
.clock__min {
	color: var(--fr-text-1);
	font-size: var(--t-small);
}
.clock__bar {
	position: relative;
	height: 2px;
	background: var(--fr-line-strong);
}
.clock__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--fr-text-1);
}
.clock__tick {
	position: absolute;
	left: var(--at);
	top: -5px;
	width: 1px;
	height: 12px;
	background: var(--fr-text-3);
}
.clock__tick--goal {
	background: var(--fr-tally);
}

/* Match log */
.log {
	border-top: 1px solid var(--fr-line-strong);
}
.log__head {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: var(--s-3) 0;
	color: var(--fr-text-3);
	border-bottom: 1px solid var(--fr-line);
}
.log__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.log__list li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--s-2);
	padding: 9px 0;
	border-bottom: 1px solid var(--fr-line);
	font-size: var(--t-small);
	color: var(--fr-text-3);
	transition: color var(--dur) var(--ease);
}
.log__list li > span:last-child {
	display: grid;
	gap: 2px;
}
.log__list em {
	font-style: normal;
	font-family: var(--font-label);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fr-text-3);
}
.log__list li.is-on {
	color: var(--fr-text-1);
}
.log__list li.is-goal.is-on {
	font-weight: 600;
}
.log__list li.is-goal.is-on em {
	color: var(--fr-text-2);
}

/* ---------- Trusted by: light sheet, heading + category line over the logo strip ---------- */
.trusted {
	padding: clamp(40px, 4vw, 60px) 0;
}
.trusted__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4) var(--s-7);
	margin-bottom: var(--s-6);
}
/* the category line, big enough to read at a glance (Suparna, 2026-10-28) */
.trusted .cats {
	font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.0625rem);
	letter-spacing: 0.16em;
}
/* Three client quotes under the logos, word for word from the live frammer.com;
   black cards on the light sheet, bright text (owner, 2026-10-31) */
.quotes {
	margin-top: var(--s-7);
}
.quote {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: var(--s-5);
	margin: 0;
	border: 0;
	border-radius: var(--r-card);
	background: var(--fr-black-0);
	box-shadow: var(--shadow-card);
	color: var(--fr-text-1);
}
.quote blockquote {
	margin: 0;
}
.quote blockquote p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--fr-text-1);
	text-wrap: pretty;
}
.quote blockquote p::before {
	content: '\201C';
	display: block;
	font-size: 2.75rem;
	line-height: 0.8;
	font-weight: 700;
	color: var(--fr-tally);
}
.quote figcaption {
	display: grid;
	gap: 2px;
	padding-top: var(--s-4);
	border-top: 1px solid var(--fr-line-strong);
	font-size: var(--t-small);
	color: var(--fr-text-2);
}
.quote figcaption strong {
	font-size: 1rem;
	color: var(--fr-text-1);
}
.quote figcaption .mono {
	margin-top: var(--s-2);
	color: var(--fr-text-2);
}

/* ---------- 03 Recorded: follows the wall on the same black, so no second band of padding ---------- */
.wallsec + #recorded {
	padding-top: 0;
}
#recorded .feature__grid {
	align-items: start;
}

/* ---------- 02b Key Moments, its own section after the wall: the copy beside a Golf, a Microdrama and a News
   9:16, the News one an interview stacked two thirds over one third (owner, 2026-10-31) ---------- */
.more-sports {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--s-7);
	align-items: center;
}
.more-sports__head {
	display: grid;
	justify-items: start;
	gap: var(--s-5);
}
.more-sports__head .feats {
	width: 100%;
	margin: 0;
}
.formats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-4);
}
.formats__card {
	aspect-ratio: 9 / 16;
	margin: 0;
}
.formats .monitor__label {
	top: auto;
	left: auto;
	bottom: 10px;
	right: 10px;
}

/* ---------- 05 Live: copy beside the Sherpa scene, scene gets the wider column ---------- */
.feature--sherpa .feature__grid {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* ---------- 08 Who: titles link to the category pages ---------- */
.who__link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--fr-line-strong);
	transition: border-color var(--dur-fast) var(--ease);
}
.who__link:hover {
	border-color: var(--fr-text-1);
}

/* ---------- Feature rows ---------- */
/* even split: keeps feature body text at ~60 characters a line */
.feature__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s-8);
	align-items: center;
}
.feature--flip .feature__copy {
	order: 2;
}
.feature__lede {
	margin: var(--s-5) 0 var(--s-6);
	font-size: var(--t-lead); /* the same size as every other subtitle (owner, 2026-11-02) */
	line-height: 1.5;
	max-width: 36em; /* ≈70 characters at 16px */
}

/* ---------- Microdrama: the copy and its three phones side by side ---------- */
/* owner, 2026-10-31: under the copy, the phones left black on both sides */
.md-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s-7);
	align-items: center;
}
.md-split .section__head {
	margin-bottom: 0;
}
.md-split .phones {
	padding-top: 0;
}

/* ---------- Ticks: a short list of what a product does, each line led by a red check ---------- */
.ticks {
	display: grid;
	gap: var(--s-3) var(--s-6);
	margin: 0 0 var(--s-6);
	padding: 0;
	list-style: none;
	max-width: 40em;
}
.section__head .ticks {
	margin-top: var(--s-5);
	margin-bottom: 0;
}
.ticks--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ticks li {
	position: relative;
	padding-left: 1.6em;
	line-height: 1.4;
	color: var(--fr-text-1);
}
.ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.85em;
	height: 0.45em;
	border-left: 2px solid var(--fr-tally);
	border-bottom: 2px solid var(--fr-tally);
	transform: rotate(-45deg);
}
@media (max-width: 640px) {
	.ticks--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Feature tiles: each feature in its own tile, no icon
   (owner, 2026-10-31: a stronger showcase than a tick list) ---------- */
.feats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-3);
	margin: var(--s-5) 0 var(--s-6);
	padding: 0;
	list-style: none;
}
.feat {
	display: flex;
	align-items: center;
	padding: var(--s-4) var(--s-5);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--fr-line);
	border-radius: var(--r-frame);
	color: var(--fr-text-1);
	font-size: 1.125rem; /* owner, 2026-11-02: bigger on every page (was 15px) */
	line-height: 1.35;
	/* lines of even length, so a tile never ends on one stray word (Suparna's box sheet, 2026-11-02) */
	text-wrap: balance;
	transition:
		border-color var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease);
}
.feat:hover {
	border-color: var(--fr-line-strong);
	background: rgba(255, 255, 255, 0.07);
}
/* stacked list: hairline rows, each led by a short red rule */
.feats--list {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
.feats--list .feat {
	gap: var(--s-4);
	padding: var(--s-4) 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--fr-line);
	border-radius: 0;
	font-size: 1.25rem;
}
.feats--list .feat:first-child {
	border-top: 1px solid var(--fr-line);
}
.feats--list .feat::before {
	content: '';
	flex: none;
	width: 20px;
	height: 2px;
	background: var(--fr-tally);
}
.feats--list .feat:hover {
	background: none;
}
/* News and Microdrama: tiles with a red top edge and a faint red wash
   (owner picked option D from the design pack, 2026-11-01) */
.feats--tiles .feat {
	padding: var(--s-4) 18px;
	background: linear-gradient(180deg, rgba(255, 26, 46, 0.13), rgba(255, 26, 46, 0.02));
	border: 1px solid rgba(255, 26, 46, 0.22);
	border-top: 2px solid var(--fr-tally);
	font-weight: 600;
}
.feats--tiles .feat:hover {
	border-color: rgba(255, 26, 46, 0.36);
	border-top-color: var(--fr-tally);
	background: linear-gradient(180deg, rgba(255, 26, 46, 0.2), rgba(255, 26, 46, 0.04));
}
/* an odd last tile takes the whole row */
.feats:not(.feats--list) .feat:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
.section__head .feats {
	margin-bottom: 0;
}
.section__head .btn {
	margin-top: var(--s-6);
}
/* Three across (owner, 2026-11-02: Sports "Every Sport – in every format", the homepage platform points).
   A last tile takes the whole row only when it is alone on it: 3n+1 at three across, odd at two */
.feats--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feats.feats--3 .feat:last-child:nth-child(odd) {
	grid-column: auto;
}
.feats.feats--3 .feat:last-child:nth-child(3n + 1) {
	grid-column: 1 / -1;
}
@media (max-width: 960px) {
	.feats--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.feats.feats--3 .feat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}
@media (max-width: 640px) {
	.feats,
	.feats--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Enterprise: API-first and SOC-2 as two stats beside the live tools as red-edged tiles
   (owner, 2026-11-01). Each tile now carries a spec line, so on a phone they go one across ---------- */
.enterprise .stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.enterprise .stat__num {
	font-size: var(--t-h2);
	white-space: nowrap;
}
.enterprise .feats {
	margin: 0;
}
/* "make it tighter" (owner, 2026-11-02): less air between the lede, the stats, the chip rows and the tiles */
.enterprise .feature__grid {
	gap: var(--s-7);
}
.enterprise .feature__lede {
	margin: var(--s-4) 0 var(--s-5);
}
.enterprise .stat {
	padding-top: var(--s-5);
}
.enterprise .stat__label {
	margin-top: var(--s-3);
}
/* "more tech heavy" (owner, 2026-11-02): each tile carries its spec line under the name,
   and the protocols sit under the stats as chip rows */
.enterprise .feat {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
}
.feat__name {
	font-size: 1.1875rem;
}
.feat__spec {
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--fr-text-2);
	text-wrap: balance;
}
.specs {
	margin: var(--s-5) 0 0;
	border-top: 1px solid var(--fr-line);
}
.specs__row {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: var(--s-4);
	align-items: baseline;
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--fr-line);
}
.specs dt {
	color: var(--fr-text-3);
}
.specs dd {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
}
.specs .chip {
	padding: 4px 10px;
	font-size: 0.8125rem;
	color: var(--fr-text-1);
}
@media (max-width: 640px) {
	.enterprise .feats {
		grid-template-columns: minmax(0, 1fr);
	}
	.feat__name {
		font-size: 1.125rem;
	}
	.specs__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-2);
	}
}

/* ---------- The solution: the three markets over a still of the live editor, darkened so the cards read ---------- */
.solution {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.88)),
		url('/assets/img/sherpa-live.webp') center 30% / cover no-repeat,
		var(--fr-black-0);
}
.solution .section__head {
	max-width: none;
}
/* the categories line (red, with a white "and"), then "One platform. End-to-end." on its own line */
.solution__cats {
	display: block;
}
/* the three platform points are feature tiles now (owner, 2026-11-02), on a dark base so they read over the still */
.solution .feats {
	margin: var(--s-6) 0 0;
}
.solution .feat {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	background:
		linear-gradient(180deg, rgba(255, 26, 46, 0.13), rgba(255, 26, 46, 0.02)),
		linear-gradient(180deg, rgba(34, 3, 10, 0.88), rgba(8, 1, 2, 0.92));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
/* each platform point: its header, then the line under it (owner, 2026-11-02) */
.solution .feat__name {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}
.solution .feat__spec {
	font-size: 1.0625rem;
}
/* stacked cards make the section tall: the still covers only the top and fades to black,
   so the editor's timeline never shows under the cards */
@media (max-width: 960px) {
	.solution {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.7) 25%, var(--fr-black-0) 55%),
			url('/assets/img/sherpa-live.webp') center top / auto 62% no-repeat,
			var(--fr-black-0);
	}
}
.facts {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--fr-line);
}
.facts li {
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--fr-line);
	font-size: 1.125rem; /* the feature tiles' size (owner, 2026-11-02: feature lists bigger everywhere; was 15px) */
}
.feature__media {
	margin: 0;
}
.feature__media--sherpa {
	aspect-ratio: 1600 / 1312;
}

/* Key moments panel (illustration) */
.moments {
	background: var(--fr-black-2);
	border: 1px solid var(--fr-line);
	border-radius: var(--r-panel);
	padding: var(--s-5);
}
.moments__head {
	display: flex;
	justify-content: space-between;
	gap: var(--s-4);
	padding-bottom: var(--s-4);
	margin-bottom: var(--s-3);
	border-bottom: 1px solid var(--fr-line);
	color: var(--fr-text-2);
}
.moments__head > span:first-child {
	white-space: nowrap;
}
.moments__count {
	color: var(--fr-text-3);
	text-align: right;
}
.moments__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-1);
}
.moment {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) auto;
	gap: var(--s-4);
	align-items: center;
	padding: var(--s-3);
	border: 1px solid transparent;
	border-radius: var(--r-card);
}
.moment.is-active {
	background: var(--fr-black-3);
	border-color: var(--fr-line-strong);
}
.moment img,
.moment video {
	width: 120px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--r-frame);
	background: var(--fr-black-0);
}
.moment__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}
.moment__tc {
	color: var(--fr-text-3);
}
.moment__title {
	font-weight: 600;
	line-height: 1.3;
}
.moment__fmt {
	color: var(--fr-text-3);
	white-space: nowrap;
}

/* Signal-flow panel */
.router {
	background: var(--fr-black-1);
	border: 1px solid var(--fr-line);
	border-radius: var(--r-panel);
	padding: var(--s-5) var(--s-6);
}
.router__in {
	display: grid;
	justify-items: start;
	gap: var(--s-2);
	padding-bottom: var(--s-4);
}
.router__name {
	font-family: var(--font-display);
	font-stretch: var(--display-stretch);
	font-weight: var(--display-weight);
	font-size: var(--t-h3);
	letter-spacing: -0.015em;
}
.router__spec {
	color: var(--fr-text-3);
}
.router__outs {
	list-style: none;
	margin: 0 0 0 12px;
	padding: 0;
	border-left: 1px solid var(--fr-line-strong);
}
.router__outs li {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-2) 0 var(--s-2) var(--s-7);
	border-bottom: 1px solid var(--fr-line);
}
.router__outs li:last-child {
	border-bottom: 0;
}
.router__outs li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 28px;
	height: 1px;
	background: var(--fr-line-strong);
}
.router__outs li::after {
	content: '';
	position: absolute;
	left: 28px;
	top: calc(50% - 2.5px);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--fr-text-2);
}
.router__outs .mono {
	color: var(--fr-text-3);
}

/* ---------- 06 Sports ---------- */
.sports__more {
	margin: var(--s-7) 0 0;
}

/* ---------- 07 Who ---------- */
.who__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-6);
}
.who__list li {
	border-top: 1px solid var(--fr-line-strong);
	padding-top: var(--s-5);
}
.who__list h3 {
	margin-bottom: var(--s-3);
}
.who__list .body-2 {
	font-size: 0.9375rem;
}

/* ---------- CTA: coral, like the deck's cover ---------- */
.cta__inner {
	display: grid;
	justify-items: start;
	gap: var(--s-5);
}
.cta__inner h2 {
	max-width: 14ch;
}
.cta__inner .btn {
	margin-top: var(--s-3);
}

/* ---------- Footer ---------- */
.footer {
	background: var(--fr-black-0);
	border-top: 1px solid var(--fr-line);
	padding: var(--s-8) 0 var(--s-6);
}
.footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: var(--s-6);
}
.footer__brand img {
	height: 16px;
	width: auto;
	margin-bottom: var(--s-4);
}
.footer__brand .body-2 {
	font-size: var(--t-small);
}
.footer__col {
	display: grid;
	align-content: start;
	gap: var(--s-3);
}
.footer__col .mono {
	margin: 0 0 var(--s-1);
	color: var(--fr-text-3);
}
.footer__col .footer__sub {
	margin-top: var(--s-4);
}
.footer__col a {
	color: var(--fr-text-2);
	text-decoration: none;
	font-size: var(--t-small);
}
.footer__col a:hover {
	color: var(--fr-text-1);
}
.footer__base {
	display: flex;
	justify-content: space-between;
	gap: var(--s-4);
	margin-top: var(--s-8);
	padding-top: var(--s-5);
	border-top: 1px solid var(--fr-line);
	color: var(--fr-text-3);
}
.footer__base a {
	color: var(--fr-text-3);
	text-decoration: none;
}
.footer__base a:hover {
	color: var(--fr-text-1);
}

@media (prefers-reduced-motion: reduce) {
	/* the stage is simply lit */
	.hero::before {
		animation: none;
	}
	.pitch,
	.pin__grow,
	.pin__base,
	.pitch__trail path,
	.wall__tag {
		transition: none;
	}
	/* depth stays, movement goes: the wall holds a gentle fixed tilt */
	.wall {
		--wall-rx: 8deg;
		--wall-s: 0.97;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.hero__grid,
	.md-split,
	.more-sports,
	.feature__grid,
	.feature--flip .feature__grid,
	.feature--sherpa .feature__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-7);
	}
	.feature--flip .feature__copy {
		order: 0;
	}
	.who__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--s-7);
	}
	.matchday__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.log__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-5);
	}
	.footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	/* phones: four feeds in two columns, a gentler curve */
	.wall__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.wall__tile:nth-child(n + 5) {
		display: none;
	}
	.wall__tile:nth-child(odd) {
		transform-origin: right center;
		transform: rotateY(8deg) translateX(-50%) var(--card-t) translateX(50%);
	}
	.wall__tile:nth-child(even) {
		transform-origin: left center;
		transform: rotateY(-8deg) translateX(50%) var(--card-t) translateX(-50%);
	}
	.wall__tag {
		left: 6px;
		bottom: 6px;
		padding: 3px 6px;
		font-size: 9px;
	}
	.pitch-stage {
		aspect-ratio: 16 / 10;
		--pitch-rx: 50deg;
	}
	.pitch {
		left: 4%;
		right: 4%;
	}
	.pin__flag {
		font-size: 8.5px;
		padding: 2px 5px;
	}
	/* phones: pins show the minute only; the match log below names each event */
	.pin__name {
		display: none;
	}
	.pin--goal .pin__grow {
		--fx: -84%;
	}
	.pin__stem {
		height: 26px;
	}
	.pin--goal .pin__stem {
		height: 40px;
	}
	.log__list {
		grid-template-columns: minmax(0, 1fr);
	}
	.moment {
		grid-template-columns: 88px minmax(0, 1fr);
	}
	.moment img {
		width: 88px;
	}
	.moment__fmt {
		display: none;
	}
	.moment__title {
		font-size: 0.9375rem;
	}
	.router {
		padding: var(--s-5);
	}
	.who__list {
		grid-template-columns: minmax(0, 1fr);
	}
	.footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer__base {
		flex-direction: column;
	}
}