/* ─── Tokens ─────────────────────────────────────────── */
:root {
	--ink: #112b2b;
	--ink-2: #3d5252;
	--ink-3: #5e6c6c; /* 4.8:1 on the lightest surfaces, 5.5:1 on white */
	--white: #ffffff;
	--surface: #f3f4f2;
	--surface-2: #e8ebe9;
	--blue: #1f78bd; /* summer sky: the hue of the hero photo's sky, lifted */
	--orange: #ff713d;
	--orange-hover: #ff8757;

	/* Spacing: one 4px scale. Every margin, padding and gap uses a step from it. */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-8: 32px;
	--s-10: 40px;
	--s-12: 48px;
	--s-16: 64px;
	--s-20: 80px;
	--s-24: 96px;
	--s-32: 128px;

	/* Type: one scale. Sizes and line heights both land on the 4px grid. */
	--t-12: 12px;
	--lh-12: 16px;
	--t-14: 14px;
	--lh-14: 20px;
	--t-16: 16px;
	--lh-16: 24px;
	--t-18: 18px;
	--lh-18: 28px;
	--t-20: 20px;
	--lh-20: 28px;
	--t-24: 24px;
	--lh-24: 32px;
	--t-28: 28px;
	--lh-28: 32px;
	--t-36: 36px;
	--lh-36: 44px;
	--t-48: 48px;
	--lh-48: 56px;
	--t-64: 64px;
	--lh-64: 64px;
	--t-88: 88px;
	--lh-88: 0.86; /* tight display leading: the g of "right" still clears "little" */

	/* Layout: a 12-column content grid, and two edges only.
     Text and UI sit on the content edge. Photo panels sit --inset from the screen edge. */
	--content: 1248px;
	--gutter: var(--s-12);
	--gap: var(--s-4);
	--inset: var(--s-4);
	--section: var(--s-32);
	--head-gap: var(--s-16);
	--edge: max(var(--gutter), (100vw - var(--content)) / 2);

	--radius-sm: 16px;
	--radius: 20px;
	--radius-lg: 28px;
	/* Nested corners are concentric: a box set inside another, close to its corner, has
     radius = the outer radius − the gap between them. Outer and inner curves then share a
     centre and the gap stays even all the way round. Containers carry their radius and
     padding as custom properties (--frame-r / --frame-pad, --glass-r / --glass-pad,
     --app-r) and what sits inside calculates from them rather than guessing. Where the gap
     is wider than the inner shape's own rounding the curves no longer read as a pair, and
     the design radius stands. */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--lift: cubic-bezier(0.34, 1.4, 0.64, 1); /* a small overshoot, so a lift feels physical */
	--out: cubic-bezier(0.16, 1, 0.3, 1); /* a fast start that settles: menus, sheets, glides */
}
@media (max-width: 1100px) {
	:root {
		--gutter: var(--s-10);
		--section: var(--s-24);
		--head-gap: var(--s-12);
		--t-88: 72px;
		--t-64: 56px;
		--lh-64: 56px;
		--t-48: 40px;
		--lh-48: 48px;
		--t-36: 32px;
		--lh-36: 40px;
	}
}
@media (max-width: 640px) {
	:root {
		--gutter: var(--s-6);
		--gap: var(--s-3);
		--inset: var(--s-3);
		--section: var(--s-20);
		--head-gap: var(--s-10);
		--t-88: 48px;
		--t-64: 40px;
		--lh-64: 44px;
		--t-48: 32px;
		--lh-48: 40px;
		--t-36: 28px;
		--lh-36: 36px;
		--t-28: 24px;
		--lh-28: 28px;
		--t-20: 18px;
		--lh-20: 28px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--s-20);
}
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--t-16);
	line-height: var(--lh-16);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
h1,
h2,
h3,
p,
blockquote,
figure {
	margin: 0;
}
em {
	font-style: normal;
}

.wrap {
	width: min(100% - 2 * var(--gutter), var(--content));
	margin-inline: auto;
}
/* Inside an inset panel the panel already took --inset, so content still lands on the page's content edge */
.close .wrap {
	width: min(100% - 2 * (var(--gutter) - var(--inset)), var(--content));
}
.nw {
	white-space: nowrap;
}
.grid-12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
}

/* Inline logo: wherever the copy says FUO, the wordmark appears in the text colour */
.fuo {
	display: inline-block;
	height: 0.92em;
	aspect-ratio: 2664 / 1571;
	vertical-align: -0.08em;
	margin: 0 0.04em;
	background: currentColor;
	-webkit-mask: url('assets/fuo-mark.svg') no-repeat left bottom / contain;
	mask: url('assets/fuo-mark.svg') no-repeat left bottom / contain;
}

/* ─── Type ───────────────────────────────────────────── */
.hero-title,
.display-2,
.moment-list button,
.tn-title,
.tn-time,
.close-title,
.road-name,
.road-same,
.app-hello,
.ahc-title,
.ahc-stats b,
.live-count span,
.ui-count b,
.ui-stats b {
	font-family: var(--display);
	font-weight: 500;
	letter-spacing: 0;
	word-spacing: 0.02em;
}
/* Large display sizes get a touch of negative tracking, scaled to size */
.hero-title,
.close-title,
.tn-time {
	letter-spacing: -0.012em;
}
.display-2 {
	letter-spacing: -0.008em;
}

/* Trim text boxes to cap height and baseline, so every gap is measured letter to letter */
.hero-kicker,
.hero-title,
.hero-lede,
.hero-body,
.display-2,
.section-lede,
.label,
.close-title,
.moment-text,
.road-same {
	text-box: trim-both cap alphabetic;
}
.hero-lede,
.display-2,
.close-title,
.road-same {
	text-wrap: balance;
}
.hero-body,
.section-lede,
.moment-text,
.faq-list details p {
	text-wrap: pretty;
}

.label {
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	color: var(--ink-3);
	margin-bottom: var(--s-6);
}
.label-accent {
	color: var(--blue);
}
.label-light {
	color: rgba(255, 255, 255, 0.72);
}

.display-2 {
	font-size: var(--t-64);
	line-height: var(--lh-64);
}
.display-2 em {
	color: var(--ink-3);
}

/* ─── Buttons: raised pills, lit from above ──────────── */
/* Each button is a small object: a top-lit gradient, a bright top edge, a soft
   darker lip at the bottom and a shadow tinted by its own colour. On hover it
   lifts and a band of light sweeps across once; on press it sinks. */
.btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	height: var(--s-12);
	padding: 0 var(--s-6);
	border-radius: 999px;
	font-family: var(--standard);
	font-size: var(--t-16);
	line-height: var(--lh-16);
	font-weight: 500;
	white-space: nowrap;
	transition:
		transform 0.4s var(--lift),
		box-shadow 0.35s var(--ease),
		filter 0.25s var(--ease);
}
.btn::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset-block: 0;
	left: -48%;
	width: 40%;
	background: linear-gradient(
		100deg,
		transparent,
		rgba(255, 255, 255, var(--sheen, 0.45)),
		transparent
	);
	transform: skewX(-18deg);
	pointer-events: none;
}
.btn-sm {
	height: var(--s-10);
	padding: 0 var(--s-4);
	font-size: var(--t-14);
	line-height: var(--lh-14);
}
.btn-arrow {
	width: var(--s-4);
	height: var(--s-4);
	margin-inline-end: -2px;
	flex: none;
	transition: transform 0.4s var(--lift);
}
.btn-arrow:dir(rtl) {
	scale: -1 1;
}
@media (hover: hover) {
	.btn:hover {
		transform: translateY(-1px);
	}
	.btn:hover::after {
		animation: sheen 0.8s cubic-bezier(0.4, 0, 0.3, 1);
	}
	.btn:hover .btn-arrow {
		transform: translateX(3px);
	}
	.btn:hover .btn-arrow:dir(rtl) {
		transform: translateX(-3px);
	}
}
@keyframes sheen {
	to {
		transform: translateX(370%) skewX(-18deg);
	}
} /* crosses the full width, exits just as it ends */
.btn:active {
	transform: translateY(0) scale(0.98);
	transition-duration: 0.08s;
}

.btn-primary {
	color: var(--white);
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(140, 40, 5, 0.4);
	background: linear-gradient(180deg, #ff8d58 0%, #f5692f 50%, #e8561e 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -2px 4px rgba(176, 56, 12, 0.22),
		0 1px 2px rgba(150, 50, 10, 0.25),
		0 6px 16px -6px rgba(255, 100, 45, 0.6);
}
.btn-primary:active {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		inset 0 2px 6px rgba(176, 56, 12, 0.3),
		0 1px 1px rgba(150, 50, 10, 0.2);
}

.btn-soft {
	--sheen: 0.9;
	color: var(--ink);
	background: linear-gradient(180deg, #ffffff 0%, #f1f3f1 55%, #e9ecea 100%);
	box-shadow:
		inset 0 1px 0 #fff,
		inset 0 -2px 3px rgba(17, 43, 43, 0.06),
		0 1px 2px rgba(17, 43, 43, 0.12),
		0 6px 14px -6px rgba(17, 43, 43, 0.2);
}
.btn-soft:active {
	box-shadow:
		inset 0 2px 5px rgba(17, 43, 43, 0.1),
		0 1px 1px rgba(17, 43, 43, 0.1);
}

.btn-dark {
	--sheen: 0.16;
	color: var(--white);
	background: linear-gradient(180deg, #2f4f4b 0%, #16302f 55%, #0c2323 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 -2px 4px rgba(0, 0, 0, 0.3),
		0 1px 2px rgba(0, 0, 0, 0.2),
		0 6px 16px -6px rgba(17, 43, 43, 0.55);
}
.btn-dark:active {
	box-shadow:
		inset 0 2px 6px rgba(0, 0, 0, 0.35),
		0 1px 1px rgba(0, 0, 0, 0.2);
}

.btn-ghost-light {
	--sheen: 0.35;
	color: var(--white);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.12) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -1px 2px rgba(255, 255, 255, 0.06),
		0 6px 16px -8px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
}
@media (hover: hover) {
	.btn-primary:hover {
		filter: brightness(1.04) saturate(1.06);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.6),
			inset 0 -2px 4px rgba(176, 56, 12, 0.2),
			0 2px 3px rgba(150, 50, 10, 0.22),
			0 12px 24px -8px rgba(255, 100, 45, 0.7);
	}
	.btn-soft:hover {
		box-shadow:
			inset 0 1px 0 #fff,
			inset 0 -2px 3px rgba(17, 43, 43, 0.06),
			0 2px 3px rgba(17, 43, 43, 0.12),
			0 10px 20px -8px rgba(17, 43, 43, 0.24);
	}
	.btn-dark:hover {
		filter: brightness(1.12);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.24),
			inset 0 -2px 4px rgba(0, 0, 0, 0.3),
			0 2px 3px rgba(0, 0, 0, 0.2),
			0 12px 24px -8px rgba(17, 43, 43, 0.6);
	}
	.btn-ghost-light:hover {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.4) 0%,
			rgba(255, 255, 255, 0.18) 100%
		);
	}
}

:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ─── Nav ────────────────────────────────────────────── */
.nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.76);
	backdrop-filter: blur(20px) saturate(1.8);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
}
.nav-inner {
	width: min(100% - 2 * var(--gutter), var(--content));
	margin-inline: auto;
	height: var(--s-16);
	display: flex;
	align-items: center;
	gap: var(--s-12);
}
.nav-mark {
	display: block;
	flex: none;
	height: 28px;
}
.nav-mark img {
	height: 100%;
	width: auto;
	transform: translateY(-1px); /* optical: sits the logo's baseline on the links' baseline */
}
.nav-links {
	display: flex;
	align-items: center;
	gap: var(--s-8);
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	color: var(--ink-2);
}
.nav-links a,
.nav-login {
	transition: color 0.2s;
}
.nav-links a:hover,
.nav-login:hover {
	color: var(--ink);
}
.nav,
.nav-links,
.nav-actions,
.nav-mark img {
	transition:
		background-color 0.4s var(--ease),
		color 0.4s var(--ease),
		filter 0.4s var(--ease),
		box-shadow 0.4s var(--ease);
}
/* Fully transparent: the nav floats on the photo; the section's top shade keeps it legible */
.nav.is-clear {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.nav.is-frost {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
} /* leaving the evening: frosted, barely tinted */
.nav.is-clear .nav-links,
.nav.is-clear .nav-actions,
.nav.is-frost .nav-links,
.nav.is-frost .nav-actions {
	color: rgba(255, 255, 255, 0.86);
}
.nav.is-clear .nav-links a:hover,
.nav.is-clear .nav-login:hover,
.nav.is-frost .nav-links a:hover,
.nav.is-frost .nav-login:hover,
.nav.is-clear .nav-trigger:hover,
.nav.is-clear .nav-trigger[aria-expanded='true'],
.nav.is-frost .nav-trigger:hover,
.nav.is-frost .nav-trigger[aria-expanded='true'] {
	color: var(--white);
}
.nav.is-clear .nav-mark img,
.nav.is-frost .nav-mark img {
	filter: brightness(0) invert(1);
}
.nav-actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: var(--s-6);
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	color: var(--ink-2);
}
/* Phone menu: hidden on wide screens */
.nav-menu,
.nav-sheet {
	display: none;
}

/* ─── Menus: a panel under the bar, one list and one picture ── */
/* Product and Company each open a panel: what is inside on the left, a preview on the right of
   whichever item the pointer or focus is on. One white card sits behind the open panel and glides
   to the next when the pointer moves across, so the two menus read as one surface changing
   shape. Card 24px round with 8px inside it, so the list highlight and the preview are 16. */
.nav-item {
	display: flex;
}
.nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--s-10);
	transition: color 0.2s;
}
.nav-trigger:hover,
.nav-trigger[aria-expanded='true'] {
	color: var(--ink);
}
.nav-chev {
	width: 10px;
	height: 10px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.55;
	transition:
		rotate 0.35s var(--out),
		opacity 0.2s;
}
.nav-trigger[aria-expanded='true'] .nav-chev {
	rotate: 180deg;
	opacity: 1;
}

.mega-bg,
.mega-panel {
	position: absolute;
	top: calc(100% + var(--s-2));
	left: 0;
}
.mega-bg {
	z-index: 1;
	width: var(--mw, 0);
	height: var(--mh, 0);
	translate: var(--mx, 0) 0;
	border-radius: 24px;
	background: var(--white);
	box-shadow:
		inset 0 1px 0 #fff,
		0 0 0 1px rgba(17, 43, 43, 0.05),
		0 8px 16px -12px rgba(17, 43, 43, 0.18),
		0 32px 64px -28px rgba(17, 43, 43, 0.4);
	transform-origin: var(--ox, 50%) 0;
	opacity: 0;
	scale: 0.97;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.18s var(--ease),
		scale 0.3s var(--out),
		visibility 0s 0.3s;
}
.nav.mega-open .mega-bg {
	opacity: 1;
	scale: 1;
	visibility: visible;
	transition:
		opacity 0.2s var(--ease),
		scale 0.45s var(--out),
		visibility 0s;
}
.nav.mega-open.mega-moving .mega-bg {
	transition:
		opacity 0.2s var(--ease),
		scale 0.45s var(--out),
		translate 0.5s var(--out),
		width 0.5s var(--out),
		height 0.5s var(--out),
		visibility 0s;
}

.mega-panel {
	z-index: 2;
	display: grid;
	grid-template-columns: 272px 400px;
	gap: var(--s-2);
	padding: var(--s-2);
	translate: var(--px, 0) 0;
	transform: translateX(var(--dx, 0px));
	font-family: var(--sans);
	font-weight: 400;
	color: var(--ink);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.12s var(--ease),
		transform 0.4s var(--out),
		visibility 0s 0.4s;
}
.mega-panel.is-open {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.28s var(--ease) 0.05s,
		transform 0.5s var(--out),
		visibility 0s;
}
/* A bridge over the gap under the bar, so the pointer can travel down without closing it */
.mega-panel::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: var(--s-6);
}

.mega-nav {
	position: relative;
}
.mega-list {
	position: relative;
	z-index: 1;
	display: grid;
}
.mega-list a {
	position: relative;
	display: grid;
	gap: 2px;
	padding: var(--s-3) var(--s-4);
	border-radius: 16px;
	outline-offset: -2px;
}
.mega-list b {
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	color: var(--ink);
}
.mega-list a > span {
	font-size: 13px;
	line-height: 16px;
	color: var(--ink-3);
}
/* The highlight travels to the item under the pointer instead of blinking between rows */
.mega-hl {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: var(--hh, 0);
	translate: 0 var(--hy, 0);
	border-radius: 16px;
	background: var(--surface);
	opacity: 0;
	transition:
		translate 0.3s var(--out),
		height 0.3s var(--out),
		opacity 0.2s var(--ease);
}
.mega-nav.has-hl .mega-hl {
	opacity: 1;
}

.mega-view {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 16px;
	background: var(--surface);
}
.mega-shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.35s var(--ease);
}
.mega-shot.is-on {
	opacity: 1;
}
.mega-shot > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	scale: 1.06;
	transition: scale 1.2s var(--out);
}
.mega-shot.is-on > img {
	scale: 1;
}
/* The product itself, small, in the page's glass: it rises a touch after the photo arrives */
.mega-ui {
	--frame-r: 20px;
	--frame-pad: 5px;
	position: absolute;
	inset-inline-start: var(--s-3);
	bottom: var(--s-3);
	width: 264px;
	opacity: 0;
	translate: 0 var(--s-2);
	transition:
		opacity 0.3s var(--ease) 0.06s,
		translate 0.6s var(--out) 0.06s;
}
.mega-shot.is-on .mega-ui {
	opacity: 1;
	translate: 0 0;
}
.mega-ui .ui-sheet {
	padding: var(--s-3);
	gap: 10px;
}
.mega-ui .i {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mega-k {
	font-size: var(--t-12);
	line-height: var(--lh-12);
	font-weight: 600;
	color: var(--ink);
}
.mega-ui .dboard-list li {
	grid-template-columns: 20px 48px 1fr 20px;
	gap: var(--s-2);
	padding: 6px;
	font-size: 13px;
	line-height: 16px;
}
.mega-ui .dboard-list img {
	width: 20px;
	height: 20px;
}
.mega-ui .checks p {
	font-size: 13px;
	line-height: 16px;
}
.mega-apps {
	display: flex;
	gap: 6px;
}
.mega-apps span {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #f6f7f5;
	color: var(--brand);
}
.mega-apps .bi {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mega-flow {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--t-12);
	line-height: var(--lh-12);
	color: var(--ink-2);
}
.mega-flow .i {
	width: 14px;
	height: 14px;
	stroke-width: 2.2;
	color: #1fbf6a;
}
.mega-letter {
	gap: var(--s-1);
	color: var(--ink-2);
}
.mega-dear {
	font-family: var(--display);
	font-weight: 500;
	font-size: var(--t-24);
	line-height: 28px;
	letter-spacing: -0.005em;
	color: var(--ink);
}
.org-badge.mega-ic {
	background: var(--blue);
}
.mega-ui:has(.mega-road) {
	width: 304px;
} /* the roadmap's longest row stays on one line */
.mega-road li {
	white-space: nowrap;
}
.mega-road {
	display: grid;
	gap: 2px;
}
.mega-road li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px var(--s-2);
	border-radius: 10px;
	font-weight: 500;
	color: var(--ink-3);
}
.mega-road li.is-on {
	background: #f6f7f5;
	color: var(--ink);
}
.mega-road i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
	box-shadow: inset 0 0 0 1.5px currentColor;
	opacity: 0.7;
}
.mega-road em {
	margin-inline-start: auto;
	font-size: 11px;
	color: var(--ink-3);
}
.mega-road li.is-on em {
	color: #137a42;
	font-weight: 600;
}
.org-badge.mega-ic .i {
	width: 14px;
	height: 14px;
}

/* ─── Shared photo texture ───────────────────────────── */
.grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	opacity: 0.08;
	mix-blend-mode: overlay;
}
.hero-shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0, 0, 0, 0.2) 45%,
		rgba(0, 0, 0, 0) 65%
	);
}

/* ─── Hero ───────────────────────────────────────────── */
/* Rhythm: nav · 48 · kicker · 24 · title · 40 · lede · 16 · body · 32 · button · 48 · photo
   (title → lede is wider than the title's own line gap, so the lede reads as its own step) */
.hero {
	padding-top: calc(var(--s-16) + var(--s-12));
}
.hero-head {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hero-kicker {
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	color: var(--blue);
}
.hero-title {
	font-size: var(--t-88);
	line-height: var(--lh-88);
}
/* V2: the last word of the title turns over, in the headline's second colour. Words share one
   cell and the box holds the widest word's width, so "built for" never moves. The clip reaches
   past the slant and below the baseline, so the period and descenders (g, p) are never cut. */
.rot {
	display: inline-grid;
	justify-items: start;
	vertical-align: top;
	font-style: normal; /* V3: upright, like the rest of the headline */
	color: var(--ink-3);
	box-sizing: content-box; /* the width set in main.js is the word's; the padding sits outside it */
	overflow: hidden;
	padding: 0 0.24em 0.16em 0.08em;
	margin: 0 -0.24em -0.16em -0.08em;
}
.rot-w {
	grid-area: 1 / 1;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(0.9em);
	transition:
		opacity 0.45s var(--ease),
		transform 0.7s var(--out);
}
.rot-w.is-on {
	opacity: 1;
	transform: none;
}
.rot-w.is-out {
	opacity: 0;
	transform: translateY(-0.9em);
}
/* V2: one subheader, one size, under the title */
.hero-lede {
	margin-top: var(--s-10);
	max-width: 48rem;
	font-size: var(--t-24);
	line-height: var(--lh-24);
	color: var(--ink); /* V2: the same near black as the headline */
}
@media (max-width: 640px) {
	.hero-lede {
		font-size: var(--t-20);
		line-height: var(--lh-20);
	}
}
/* Texture behind the headline: a fine dot grid in ink, full bleed, fading out in an ellipse
   so it gives the white page depth without reading as graph paper or touching the photo */
.hero {
	overflow-x: clip;
}
.hero-head {
	position: relative;
	isolation: isolate;
}
.hero-head::before {
	content: '';
	position: absolute;
	z-index: -1;
	pointer-events: none;
	inset: calc(-1 * (var(--s-16) + var(--s-12))) calc(50% - 50vw) calc(-1 * var(--s-12));
	background-image: radial-gradient(circle, rgba(17, 43, 43, 0.1) 1.1px, transparent 1.6px);
	background-size: 20px 20px;
	background-position: 50% 0;
	-webkit-mask-image: radial-gradient(
		ellipse 56% 64% at 50% 46%,
		#000 0%,
		rgba(0, 0, 0, 0.85) 38%,
		transparent 76%
	);
	mask-image: radial-gradient(
		ellipse 56% 64% at 50% 46%,
		#000 0%,
		rgba(0, 0, 0, 0.85) 38%,
		transparent 76%
	);
}
.hero-ctas {
	display: flex;
	gap: var(--s-3);
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--s-8);
}

/* The film frame: 16:9, V2 keeps it well inside the content edge */
.hero-media {
	position: relative;
	overflow: hidden;
	width: min(100% - 2 * var(--gutter), var(--content)); /* V3: the full content width */
	margin: var(--s-6) auto 0; /* matches the space above the label */
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	background: var(--blue);
}
.hero-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;
}

/* ─── Film: the hero photo is the poster of a film, with one clear way to play it ── */
.film-play {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	display: grid;
	justify-items: center;
	gap: var(--s-4);
	color: var(--white);
	isolation: isolate;
}
.film-play::before {
	/* a soft shade behind it, so it reads over any frame */
	content: '';
	position: absolute;
	z-index: -1;
	inset: -64px -112px;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(2, 12, 24, 0.34), rgba(2, 12, 24, 0));
}
.film-disc {
	position: relative;
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	/* lit glass on a breath of ink, so the white triangle reads over a white shirt or a bright sky */
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%),
		rgba(8, 20, 28, 0.24);
	backdrop-filter: blur(20px) saturate(1.6);
	-webkit-backdrop-filter: blur(20px) saturate(1.6);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		inset 0 0 0 1px rgba(255, 255, 255, 0.28),
		0 18px 40px -16px rgba(2, 16, 32, 0.6);
	transition:
		transform 0.45s var(--lift),
		background 0.3s var(--ease);
}
.film-disc svg {
	width: 34px;
	height: 34px;
	fill: var(--white);
	/* V3: no nudge. The path is already drawn with its centroid on the viewBox centre
	   (base at x 8.5, tip at 18.9: (8.5 + 8.5 + 18.9) / 3 ≈ 12), so its mass sits on the
	   disc's centre; the old 2px push on top of that landed it right of centre. */
	translate: 0 0;
	filter: drop-shadow(0 2px 6px rgba(2, 16, 32, 0.35));
}
.film-disc::after {
	/* a slow ring, now and then, so it reads as something that plays */
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
	animation: film-ring 3.2s var(--ease) infinite;
}
@keyframes film-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
	}
	60%,
	100% {
		box-shadow: 0 0 0 22px rgba(255, 255, 255, 0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.film-disc::after {
		animation: none;
	}
}
.film-label {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	text-shadow: 0 1px 12px rgba(2, 12, 24, 0.55);
}
.film-label b {
	font-family: var(--standard);
	font-size: var(--t-18);
	line-height: var(--lh-18);
	font-weight: 700;
}
.film-label small {
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: rgba(255, 255, 255, 0.8);
	font-variant-numeric: tabular-nums;
}
.film-label small::before {
	content: '·';
	margin-inline-end: var(--s-2);
}
@media (hover: hover) {
	.film-play:hover .film-disc {
		transform: scale(1.06);
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.16) 100%),
			rgba(8, 20, 28, 0.2);
	}
}
.film-play:active .film-disc {
	transform: scale(0.97);
	transition-duration: 0.1s;
}
.film-play:focus-visible {
	outline: none;
}
.film-play:focus-visible .film-disc {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 0 0 3px var(--white),
		0 18px 40px -16px rgba(2, 16, 32, 0.6);
}

/* The film plays in its own frame, in the page. The video lies over its first frame and
   shows once it is playing; the button and the grain step aside. The frame takes the film's
   own shape (--film-ratio, set on the element), so nothing is cropped. */
.hero-media[data-film] {
	aspect-ratio: var(--film-ratio, 16 / 9);
	background: #0b1516;
}
.hero-media > video,
.hero-media > iframe {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s var(--ease);
}
.hero-media.is-playing > video,
.hero-media.is-playing > iframe {
	opacity: 1;
	pointer-events: auto;
}
/* (named with the attribute as well, so the phone's corner button below, which sets its own
   display, cannot bring the button back over a playing film) */
.hero-media[data-film].is-playing > .film-play,
.hero-media[data-film].is-playing > .grain {
	display: none;
}
/* a portrait film (the homepage's is 4:5): a tall card in the middle, not a wide band */
.hero-media-tall {
	width: min(100% - 2 * var(--gutter), 520px);
}
/* the whole frame starts the film, not only the button */
.hero-media[data-film]:not(.is-playing) {
	cursor: pointer;
}
/* On a phone the frame is small: the button steps into the corner as one compact line, so
   the film's own first frame can be read. The same on every page (owner, 2026-10-11). */
@media (max-width: 640px) {
	.hero-media[data-film] .film-play {
		left: var(--s-3);
		top: auto;
		bottom: var(--s-3);
		translate: none;
		display: flex;
		align-items: center;
		gap: var(--s-2);
		padding: var(--s-1) var(--s-4) var(--s-1) var(--s-1);
		border-radius: 999px;
		background: rgba(8, 20, 28, 0.55);
		backdrop-filter: blur(12px);
	}
	.hero-media[data-film] .film-play::before {
		content: none;
	}
	.hero-media[data-film] .film-disc {
		width: 36px;
		height: 36px;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
	}
	.hero-media[data-film] .film-disc svg {
		width: 16px;
		height: 16px;
	}
	.hero-media[data-film] .film-label b {
		font-size: var(--t-14);
		line-height: var(--lh-14);
		font-weight: 600;
	}
	.hero-media[data-film] .film-label small {
		font-size: var(--t-12);
		line-height: var(--lh-12);
	}
}

/* ─── Product material, shared by every UI on the page ── */
/* Glass frame → white sheet. The same recipe as the dashboard window. */
.gframe {
	--frame-r: 26px;
	--frame-pad: 6px;
	padding: var(--frame-pad);
	border-radius: var(--frame-r);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.16) 100%);
	backdrop-filter: blur(24px) saturate(1.6);
	-webkit-backdrop-filter: blur(24px) saturate(1.6);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		inset 0 0 0 1px rgba(255, 255, 255, 0.2),
		0 40px 80px -36px rgba(2, 16, 32, 0.55),
		0 16px 32px -18px rgba(2, 16, 32, 0.3);
}
.sheet {
	background: var(--white);
	color: var(--ink);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}
.gframe > .sheet {
	border-radius: calc(var(--frame-r) - var(--frame-pad));
} /* concentric with its frame */
/* Widget header: badge or status · title and subtitle · meta */
.w-head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.w-head > div {
	min-width: 0;
}
.w-head b {
	display: block;
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.w-head small {
	display: block;
	font-size: 11px;
	line-height: 14px;
	color: var(--ink-3);
	white-space: nowrap;
}
.w-meta {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	line-height: 14px;
	color: var(--ink-3);
	white-space: nowrap;
}
.w-meta .i {
	width: 12px;
	height: 12px;
}
.org-badge {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	flex: none;
	background: var(--ink);
	color: var(--white);
	font-size: var(--t-12);
	font-weight: 600;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.w-dot {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	flex: none;
	background: #e3f6ea;
}
.w-live {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px 3px 7px;
	border-radius: 999px;
	background: #e3f6ea;
	color: #137a42;
	font-size: 11px;
	line-height: 14px;
	font-weight: 600;
}
.live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #1fbf6a;
	box-shadow: 0 0 0 0 rgba(31, 191, 106, 0.5);
	animation: pulse 2s infinite;
	flex: none;
}
@keyframes pulse {
	70% {
		box-shadow: 0 0 0 8px rgba(31, 191, 106, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(31, 191, 106, 0);
	}
}
/* People rows, as in the dashboard */
.rows {
	display: grid;
	gap: 2px;
}
.rows li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	border-radius: 12px;
}
.rows li > div {
	min-width: 0;
}
.rows b {
	display: block;
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
}
.rows small {
	display: block;
	font-size: 11px;
	line-height: 14px;
	color: var(--ink-3);
	white-space: nowrap;
}
.rows em {
	margin-inline-start: auto;
	font-size: 11px;
	color: var(--ink-3);
	white-space: nowrap;
}
.rows .av {
	width: 28px;
	height: 28px;
	font-size: 11px;
}
.rows li.is-new,
.rows li.is-hi {
	background: #f6f7f5;
}
.rows em.chip-ok {
	padding: 2px 8px;
	border-radius: 999px;
	background: #e3f6ea;
	color: #137a42;
	font-weight: 600;
}
.rows li.is-new {
	animation: slidein 0.7s var(--ease);
}
@keyframes slidein {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.stack {
	display: inline-flex;
	flex: none;
}
.stack img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1.5px var(--white);
}
.stack img + img {
	margin-inline-start: -6px;
}

/* Hero widget. Its trailing edge sits on the content edge. */
.live {
	position: absolute;
	z-index: 3;
	width: 312px;
	inset-inline-end: calc(var(--edge) - var(--inset) - 6px);
	top: var(--s-8);
}
.live-sheet {
	padding: var(--s-4);
}
.live-event {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-2);
	margin-top: var(--s-4);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 600;
}
.live-event span {
	font-size: 11px;
	font-weight: 400;
	color: var(--ink-3);
}
.live-count {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	margin: var(--s-1) 0 var(--s-3);
}
.live-count span {
	font-size: 52px;
	line-height: 1;
	color: var(--blue);
}
.live-count small {
	font-size: var(--t-12);
	color: var(--ink-3);
}
.live-feed {
	margin: 0 -6px -6px;
}

/* ─── Wristband: FUO's event band ───────────────────── */
.band {
	position: relative;
	z-index: 4;
	background: var(--orange);
	color: var(--ink);
	overflow: hidden;
}
.band-track {
	display: flex;
	align-items: center;
	gap: var(--s-6);
	width: max-content;
	padding: var(--s-4) 0 var(--s-4) var(--s-6);
	white-space: nowrap;
	animation: band 60s linear infinite;
}
.band span {
	font-family: var(--display);
	font-weight: 600;
	font-size: var(--t-20);
	line-height: var(--lh-20);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
/* separator: the diamond from the wordmark's full stop */
.band i {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--ink);
	transform: rotate(45deg);
	flex: none;
}
@keyframes band {
	to {
		transform: translateX(-50%);
	}
}
.band-hero {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
}

/* ─── Section rhythm ─────────────────────────────────── */
.dup,
.moments,
.product,
.next,
.pricing,
.faq {
	padding-top: var(--section);
}
.arc,
.close {
	margin-top: var(--section);
}

/* Section heads: headline on columns 1–8, lede on 9–12. Both trimmed, so bottoms meet on one baseline. */
.section-head {
	margin-bottom: var(--head-gap);
}
.section-head-split {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: end;
}
/* V2: the lede takes five columns instead of four, so it runs in fewer lines */
.section-head-split > .display-2 {
	grid-column: 1 / 8;
}
.section-head-split > .section-lede {
	grid-column: 8 / -1;
}
/* Under 1240 seven columns are too narrow for the longest headline, so the head stacks */
@media (max-width: 1240px) {
	.section-head-split > .display-2 {
		grid-column: 1 / -1;
	}
	.section-head-split > .section-lede {
		grid-column: 1 / 9;
		margin-top: var(--s-8);
	}
}
.section-lede {
	font-size: var(--t-18);
	line-height: var(--lh-18);
	color: var(--ink-2);
}

/* ─── Four moments ───────────────────────────────────── */
.moments-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: center;
}
.moment-stage {
	grid-column: 1 / 6;
	position: relative;
	aspect-ratio: 1;
	max-height: 72vh;
	width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface);
}
.moment-copy {
	grid-column: 7 / -1;
}
.moment {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.7s var(--ease);
}
.moment.is-on {
	opacity: 1;
}
.moment > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.03);
	transition: transform 1.4s var(--ease);
}
.moment.is-on > img {
	transform: none;
}

.ui {
	position: absolute;
	inset-inline: var(--s-6);
	bottom: var(--s-6);
	max-width: 392px;
	transform: translateY(10px);
	opacity: 0;
	transition:
		opacity 0.6s var(--ease) 0.15s,
		transform 0.8s var(--ease) 0.15s;
}
.moment.is-on .ui {
	transform: none;
	opacity: 1;
}
.ui-sheet {
	padding: var(--s-4);
	display: grid;
	gap: var(--s-3);
	font-size: 13px;
	line-height: var(--lh-12);
}
.ui-bar {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: 4px 4px 4px var(--s-3);
	border-radius: 12px;
	background: #f6f7f5;
}
.ui-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ui-link .i {
	width: 12px;
	height: 12px;
	color: var(--ink-3);
	flex: none;
}
.ui-btn {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 var(--s-3);
	border-radius: calc(12px - 4px);
	flex: none;
	font-size: var(--t-12);
	font-weight: 600;
	color: var(--white); /* inside the field: its 12px less the 4px it sits in */
	background: linear-gradient(180deg, #2f4f4b 0%, #16302f 55%, #0c2323 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 3px 8px -3px rgba(17, 43, 43, 0.5);
}
.ui-btn .i {
	width: 13px;
	height: 13px;
}
.ui-note {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--ink-2);
	font-size: var(--t-12);
	line-height: var(--lh-12);
}
.ui-note b {
	color: var(--ink);
	font-weight: 600;
}
.ui-count {
	display: flex;
	align-items: flex-end;
	gap: var(--s-2);
}
.ui-count b {
	font-size: 40px;
	line-height: 1;
	color: var(--blue);
}
.ui-count small {
	color: var(--ink-3);
	font-size: var(--t-12);
	padding-bottom: 3px;
}
.ui-bars {
	margin-inline-start: auto;
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 32px;
}
.ui-bars i {
	width: 6px;
	height: var(--h);
	border-radius: 3px;
	background: #cfe2f2;
}
.ui-bars i:last-child {
	background: var(--blue);
}
.ui-live-tag {
	display: grid;
	place-items: center;
	height: 28px;
	padding: 0 var(--s-2);
	border-radius: 8px;
	flex: none;
	background: #e5342a;
	color: var(--white);
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.ui-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-2);
}
.ui-stats div {
	display: grid;
	gap: 2px;
	padding: var(--s-3);
	border-radius: 12px;
	background: #f6f7f5;
}
.ui-stats b {
	font-size: 26px;
	line-height: 1;
}
.ui-stats small {
	color: var(--ink-3);
	font-size: var(--t-12);
}
.ui-stats .stack {
	margin-top: var(--s-2);
}
.ui-ok {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: var(--s-2);
	font-size: 11px;
	font-weight: 600;
	color: #137a42;
}
.ui-ok .i {
	width: 13px;
	height: 13px;
	stroke-width: 2;
}
.checks {
	display: grid;
	gap: 2px;
}
.checks li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	border-radius: 12px;
}
.checks p {
	font-weight: 500;
}
.checks em {
	margin-inline-start: auto;
	color: var(--ink-3);
	font-size: 11px;
	white-space: nowrap;
}
.checks .ck {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex: none;
	background: var(--blue);
	color: var(--white);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.checks .ck .i {
	width: 13px;
	height: 13px;
	stroke-width: 2.2;
}
.checks li.is-soft {
	background: #f6f7f5;
}
.checks li.is-soft .ck {
	background: #1fbf6a;
}

.moment-copy .label {
	margin-bottom: var(--s-6);
}
.moment-h {
	margin-bottom: var(--s-10);
}
.moment-list button {
	position: relative;
	display: flex;
	align-items: center;
	text-align: start;
	font-size: var(--t-36);
	line-height: var(--lh-36);
	color: rgba(17, 43, 43, 0.28);
	transition: color 0.3s var(--ease);
}
.moment-list button:hover {
	color: rgba(17, 43, 43, 0.55);
}
.moment-list button.is-on {
	color: var(--ink);
}
/* The marker hangs outside the text column, so every word starts on the same edge */
.moment-list i {
	position: absolute;
	inset-inline-start: calc(-1 * var(--s-6));
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--orange);
	transform: rotate(45deg) scale(0);
	transition: transform 0.4s var(--ease);
	flex: none;
}
.moment-list button.is-on i {
	transform: rotate(45deg) scale(1);
}
.moment-texts {
	display: grid;
	margin: var(--s-8) 0;
	max-width: 28rem;
}
.moment-text {
	grid-area: 1 / 1;
	font-size: var(--t-18);
	line-height: var(--lh-18);
	color: var(--ink-2);
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}
.moment-text.is-on {
	opacity: 1;
}

/* ─── Product: the app, floating in a glass frame on a photograph ─── */
/* Under the app: four columns on the page's grid, each an icon, a name and one line */
.feats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-10) var(--gap);
	margin-top: var(--s-16);
}
.feats li {
	display: grid;
	gap: var(--s-2);
	align-content: start;
}
.feat-ic {
	display: grid;
	place-items: center;
	width: var(--s-10);
	height: var(--s-10);
	margin-bottom: var(--s-2);
	border-radius: 12px;
	background: var(--surface);
	color: var(--ink);
}
.feat-ic .i {
	width: 18px;
	height: 18px;
	stroke-width: 1.7;
}
.feats h3 {
	font-family: var(--standard);
	font-size: var(--t-20);
	line-height: var(--lh-20);
	font-weight: 600;
}
.feats p {
	max-width: 22rem;
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: var(--ink-2);
	text-wrap: pretty;
}
@media (max-width: 1100px) {
	.feats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.feats {
		grid-template-columns: minmax(0, 1fr);
		margin-top: var(--s-12);
		gap: var(--s-8);
	}
}
.stage {
	position: relative;
	overflow: hidden;
	margin-inline: var(--inset);
	border-radius: var(--radius-lg);
	background: var(--white); /* V2: no photo, the dashboard sits on white */
	/* The frame's 10px glass rim sits just outside the content edge, so the app itself lands on it */
	padding: var(--s-20) calc(var(--edge) - var(--inset) - 10px);
}
.stage-bg {
	position: absolute;
	inset: 0;
}
.stage-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	transform: scale(1.04);
}
.stage-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.28) 100%),
		rgba(4, 20, 40, 0.08);
}

.glass {
	position: relative;
	z-index: 3;
	--glass-r: 30px;
	--glass-pad: 10px;
	padding: var(--glass-pad);
	border-radius: var(--glass-r);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.14) 100%);
	backdrop-filter: blur(28px) saturate(1.6);
	-webkit-backdrop-filter: blur(28px) saturate(1.6);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		/* light catching the top edge */ inset 0 0 0 1px rgba(255, 255, 255, 0.18),
		0 60px 120px -48px rgba(2, 16, 32, 0.6),
		0 24px 48px -24px rgba(2, 16, 32, 0.35);
}
.sprite {
	position: absolute;
	width: 0;
	height: 0;
}
.i {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.app {
	position: relative;
	display: grid;
	grid-template-columns: 216px 1fr;
	grid-template-rows: 44px 1fr;
	--app-r: calc(var(--glass-r, 30px) - var(--glass-pad, 10px));
	background: #eef0ee;
	color: var(--ink);
	border-radius: var(--app-r);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	font-size: 13px;
	line-height: var(--lh-12);
}
/* Window chrome */
.app-bar {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 0 var(--s-4);
}
.lights {
	display: flex;
	gap: 8px;
}
.lights i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff5f57;
	box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
}
.lights i:nth-child(2) {
	background: #febc2e;
}
.lights i:nth-child(3) {
	background: #28c840;
}
.app-url {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 300px;
	height: 28px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.75);
	color: var(--ink-3);
	font-size: var(--t-12);
	box-shadow: 0 1px 1px rgba(17, 43, 43, 0.05);
}
.app-url .i {
	width: 12px;
	height: 12px;
}
.app-bar-r {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--s-3);
	color: var(--ink-3);
}
.app-bar-r img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

/* Sidebar */
.app-side {
	padding: var(--s-2) var(--s-3) var(--s-3);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.app-org {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2);
	border-radius: 12px;
}
.app-org-badge {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--ink);
	color: var(--white);
	display: grid;
	place-items: center;
	font-weight: 600;
	font-size: var(--t-12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.app-org b {
	display: block;
	font-size: 13px;
	line-height: 16px;
}
.app-org small {
	color: var(--ink-3);
	font-size: 11px;
	line-height: 14px;
}
.app-org-sw {
	margin-inline-start: auto;
	color: var(--ink-3);
}
.app-search {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	height: 32px;
	padding: 0 var(--s-2) 0 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--ink-3);
	box-shadow: 0 1px 1px rgba(17, 43, 43, 0.04);
}
.app-search .i {
	width: 14px;
	height: 14px;
}
.app-search kbd {
	margin-inline-start: auto;
	font-family: inherit;
	font-size: 11px;
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--surface-2);
	color: var(--ink-3);
}
.app-nav {
	display: grid;
	gap: 2px;
}
.app-nav li,
.app-nav-single {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 32px;
	padding: 0 10px;
	border-radius: 10px;
	color: var(--ink-2);
	font-weight: 500;
}
.app-nav li .i,
.app-nav-single .i {
	color: var(--ink-3);
}
.app-nav em {
	margin-inline-start: auto;
	font-size: 11px;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
.app-nav li.is-on {
	background: var(--white);
	color: var(--ink);
	box-shadow:
		0 1px 2px rgba(17, 43, 43, 0.08),
		0 4px 10px -6px rgba(17, 43, 43, 0.15);
}
.app-nav li.is-on .i {
	color: var(--blue);
}
.app-side-foot {
	margin-top: auto;
	display: grid;
	gap: var(--s-2);
}
.app-user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--s-2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.55);
}
.app-user img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}
.app-user b {
	display: block;
	font-size: 13px;
	line-height: 16px;
}
.app-user small {
	color: var(--ink-3);
	font-size: 11px;
	line-height: 14px;
}

/* The content sheet: white, rounded, inset from the chrome */
.app-main {
	--app-gap: 8px;
	margin: 0 var(--app-gap) var(--app-gap) 0;
	padding: var(--s-6) var(--s-8) var(--s-8);
	border-radius: calc(var(--app-r) - var(--app-gap));
	background: var(--white);
	box-shadow:
		0 1px 2px rgba(17, 43, 43, 0.06),
		0 6px 20px -10px rgba(17, 43, 43, 0.14);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	min-width: 0;
}
.app-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4);
}
.app-kicker {
	color: var(--ink-3);
	font-size: var(--t-12);
	line-height: var(--lh-12);
	margin-bottom: var(--s-1);
}
.app-hello {
	font-size: var(--t-28);
	line-height: var(--lh-28);
}
.app-actions {
	display: flex;
	gap: var(--s-2);
}
.app-btn,
.app-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	white-space: nowrap;
	flex: none;
	padding: 0 var(--s-3);
	border-radius: 999px;
	font-weight: 600;
	font-size: var(--t-12);
	line-height: var(--lh-12);
}
.app-btn .i,
.app-pill .i {
	width: 14px;
	height: 14px;
}
.app-btn {
	color: var(--ink);
	background: linear-gradient(180deg, #fff 0%, #f1f3f1 100%);
	box-shadow:
		inset 0 1px 0 #fff,
		0 1px 2px rgba(17, 43, 43, 0.14),
		0 3px 8px -4px rgba(17, 43, 43, 0.2);
}
.app-pill {
	background: linear-gradient(180deg, #ff8d58 0%, #f5692f 50%, #e8561e 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 2px rgba(176, 56, 12, 0.2),
		0 3px 8px -3px rgba(255, 100, 45, 0.55);
	color: var(--white);
	text-shadow: 0 1px 1px rgba(140, 40, 5, 0.35);
}

/* Tonight's session: lit from the top right, with the week's registration curve */
.app-hero-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-sm);
	padding: var(--s-6);
	color: var(--white);
	background:
		radial-gradient(120% 160% at 88% -30%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, #2a87d0 0%, #1f78bd 55%, #1a6aa8 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 10px 24px -14px rgba(20, 90, 150, 0.7);
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--s-4) var(--s-8);
	align-items: end;
}
.ahc-tag {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-12);
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--s-2);
}
.ahc-title {
	font-size: 32px;
	line-height: 1;
}
.ahc-meta {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-3);
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--t-12);
}
.ahc-hosts {
	display: flex;
}
.ahc-hosts img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1.5px #1f78bd;
}
.ahc-hosts img + img {
	margin-inline-start: -6px;
}
.ahc-spark {
	position: relative;
	align-self: stretch;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.ahc-spark svg {
	width: 100%;
	height: 64px;
	overflow: visible;
}
.ahc-spark p {
	margin-top: var(--s-1);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.7);
}
.spark-dot {
	position: absolute;
	right: -4px;
	top: calc(100% - 64px - 20px + 3px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.ahc-stats {
	display: flex;
	gap: var(--s-6);
}
.ahc-stats b {
	display: block;
	font-size: 28px;
	line-height: 1;
	margin-bottom: var(--s-1);
}
.ahc-stats small {
	color: rgba(255, 255, 255, 0.75);
	font-size: 11px;
}
.ahc-bar {
	grid-column: 1 / -1;
	height: 6px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.2);
	overflow: hidden;
}
.ahc-bar span {
	display: block;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, #ff9a6b, #ff713d);
}

.app-cols {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--s-4);
}
.app-panel {
	background: #f6f7f5;
	border-radius: var(--radius-sm);
	padding: var(--s-4);
}
.app-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: var(--s-1) var(--s-2) var(--s-3);
}
.app-panel-head > span {
	font-size: var(--t-12);
	color: var(--ink-3);
}
.app-panel-title {
	font-weight: 600;
}
.app-trend {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px 8px 2px 6px;
	border-radius: 999px;
	background: #e3f6ea;
	color: #137a42 !important;
	font-weight: 600;
}
.app-trend .i {
	width: 12px;
	height: 12px;
}
.app-list li {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2);
	border-radius: 12px;
}
.app-list li:first-child {
	background: var(--white);
	box-shadow:
		0 1px 2px rgba(17, 43, 43, 0.06),
		0 4px 12px -8px rgba(17, 43, 43, 0.2);
}
.app-list b {
	display: block;
	font-weight: 600;
}
.app-list small {
	color: var(--ink-3);
	font-size: var(--t-12);
}
.app-list em {
	margin-inline-start: auto;
	color: var(--ink-3);
	font-size: var(--t-12);
}
.av {
	width: var(--s-8);
	height: var(--s-8);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 600;
	font-size: var(--t-12);
	flex: none;
}
.av1 {
	background: #dbeaf6;
	color: #1a6aa8;
}
.av2 {
	background: #e2e8e6;
	color: var(--ink);
}
.av3 {
	background: #ffe4d8;
	color: #b23d12;
}
.av4 {
	background: #ece9e2;
	color: #6f6656;
}
.app-team li {
	display: grid;
	grid-template-columns: 24px 56px 1fr 28px;
	align-items: center;
	gap: 10px;
	padding: var(--s-2);
}
.app-team img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}
.app-team span {
	color: var(--ink-2);
	font-weight: 500;
}
.app-team i {
	height: 6px;
	border-radius: 6px;
	background: var(--surface-2);
	position: relative;
	overflow: hidden;
}
.app-team i::after {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--w);
	border-radius: 6px;
	background: var(--ink);
}
.app-team li:first-child i::after {
	background: var(--blue);
}
.app-team b {
	text-align: end;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ─── Duplication: 1 you build it · 2 they send it · 3 you see it ── */
.dflow {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	grid-template-columns: 1fr 1.12fr 1fr;
	column-gap: var(--s-12);
	align-items: start;
	background: var(--surface);
	border-radius: var(--radius-lg);
	padding: var(--s-10);
}
/* A softly blurred photograph behind the flow, so the glass has light to catch */
.dflow-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.dflow-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(44px) saturate(1.35);
	transform: scale(1.25);
}
.dflow-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
}
.dstep {
	position: relative;
	display: grid;
	gap: var(--s-4);
}
/* Arrows between the steps sit centred in the gap */
.dstep + .dstep::before {
	content: '';
	position: absolute;
	inset-inline-start: calc(-1 * var(--s-12) / 2 - 14px);
	top: 240px; /* same line for both arrows */
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--white)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9.5M8.5 4 12.5 8l-4 4' fill='none' stroke='%23ff713d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")
		center / 14px no-repeat;
	box-shadow:
		0 1px 2px rgba(17, 43, 43, 0.08),
		0 4px 10px -4px rgba(17, 43, 43, 0.2);
}
.dstep + .dstep:dir(rtl)::before {
	transform: scaleX(-1);
}
.dstep-k {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 600;
	min-height: var(--s-8);
}
.dstep-n {
	display: grid;
	place-items: center;
	width: var(--s-6);
	height: var(--s-6);
	border-radius: 50%;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	background: var(--ink);
	color: var(--white);
	font-size: var(--t-12);
	line-height: 1;
}
.dcard .sheet {
	height: 100%;
}

/* 1 · the standard */
.std {
	padding: var(--s-6);
	display: grid;
	gap: var(--s-4);
}
.std-h {
	font-family: var(--display);
	font-weight: 500;
	font-size: var(--t-24);
	line-height: var(--lh-24);
}
.std-list {
	display: grid;
	gap: var(--s-2);
}
.std-list li {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3);
	border-radius: 12px;
	background: #f6f7f5;
}
.std-list b {
	display: block;
	font-weight: 600;
	font-size: var(--t-14);
	line-height: var(--lh-14);
}
.std-list small {
	color: var(--ink-3);
	font-size: var(--t-12);
	line-height: var(--lh-12);
}
.lock {
	width: var(--s-4);
	height: var(--s-4);
	flex: none;
	color: var(--ink);
}
.std-list .lock {
	width: var(--s-8);
	height: var(--s-8);
	padding: var(--s-2);
	border-radius: 10px;
	background: var(--white);
	color: var(--ink);
	stroke-width: 1.8;
	box-shadow: 0 1px 2px rgba(17, 43, 43, 0.08);
}
.std-foot {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-12);
	line-height: var(--lh-12);
	color: var(--ink-3);
}
.std-foot img {
	width: var(--s-6);
	height: var(--s-6);
	border-radius: 50%;
	object-fit: cover;
}

/* 2 · the member's own invitation */
.dmembers {
	display: flex;
	gap: var(--s-1);
	padding: var(--s-1);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
	width: max-content;
	max-width: 100%;
}
.dmembers button {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: var(--s-8);
	padding: 0 var(--s-3) 0 var(--s-1);
	border-radius: 999px;
	font-family: var(--standard);
	font-size: var(--t-14);
	font-weight: 500;
	color: var(--ink-3);
	transition:
		background-color 0.25s,
		color 0.25s,
		box-shadow 0.25s;
}
.dmembers button img {
	width: var(--s-6);
	height: var(--s-6);
	border-radius: 50%;
	object-fit: cover;
	filter: grayscale(1);
	opacity: 0.7;
	transition:
		filter 0.25s,
		opacity 0.25s;
}
.dmembers button:hover {
	color: var(--ink);
}
.dmembers button.is-on {
	background: var(--white);
	color: var(--ink);
	box-shadow:
		0 1px 2px rgba(17, 43, 43, 0.1),
		0 4px 10px -4px rgba(17, 43, 43, 0.2);
}
.dmembers button.is-on img {
	filter: none;
	opacity: 1;
}
.dinvite-img {
	position: relative;
	aspect-ratio: 16 / 9;
}
.dinvite-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dinvite-org {
	position: absolute;
	top: var(--s-3);
	inset-inline-start: var(--s-3);
	padding: var(--s-1) var(--s-2);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.92);
	font-size: 11px;
	line-height: var(--lh-12);
	font-weight: 700;
	letter-spacing: 0.14em;
}
.dinvite-body {
	padding: var(--s-5) var(--s-6) var(--s-6);
	display: grid;
	justify-items: start;
}
.dinvite-by {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1);
	border-radius: 999px;
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-2);
}
.dinvite-by img {
	width: var(--s-8);
	height: var(--s-8);
	border-radius: 50%;
	object-fit: cover;
}
.dinvite-by b {
	color: var(--ink);
	font-weight: 600;
}
.dinvite-title {
	margin-top: var(--s-3);
	font-family: var(--display);
	font-weight: 500;
	font-size: var(--t-28);
	line-height: var(--lh-28);
}
.dinvite-meta {
	margin-top: var(--s-2);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-3);
}
.dinvite-btn {
	display: inline-flex;
	align-items: center;
	height: var(--s-10);
	margin-top: var(--s-5);
	padding: 0 var(--s-5);
	border-radius: 999px;
	color: var(--white);
	font-size: var(--t-14);
	font-weight: 600;
	text-shadow: 0 1px 1px rgba(140, 40, 5, 0.35);
	background: linear-gradient(180deg, #ff8d58 0%, #f5692f 50%, #e8561e 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 2px rgba(176, 56, 12, 0.2),
		0 4px 10px -4px rgba(255, 100, 45, 0.55);
}
.dinvite-link {
	margin-top: var(--s-4);
	padding: var(--s-1) var(--s-3);
	border-radius: 8px;
	font-size: var(--t-12);
	line-height: var(--lh-12);
	color: var(--ink-3);
}
.dinvite-link b {
	color: #b23d12;
	font-weight: 600;
}
/* The parts that belong to the member are tinted, and flash when they change */
.theirs {
	background: #fff0e9;
}
.theirs.swap {
	animation: theirs 0.9s var(--ease);
}
@keyframes theirs {
	0% {
		background: #ffc7af;
		transform: scale(1.03);
	}
	100% {
		background: #fff0e9;
		transform: none;
	}
}

/* 3 · everything flows back */
.dboard {
	padding: var(--s-6);
	display: grid;
	gap: var(--s-4);
}
.dboard-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 600;
}
.dboard-total {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
}
.dboard-total b {
	font-family: var(--display);
	font-weight: 500;
	font-size: 48px;
	line-height: 1;
	color: var(--blue);
	font-variant-numeric: tabular-nums;
}
.dboard-total small {
	font-size: var(--t-12);
	color: var(--ink-3);
}
.dboard-list {
	display: grid;
	gap: var(--s-1);
}
.dboard-list li {
	display: grid;
	grid-template-columns: var(--s-6) 56px 1fr 24px;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2);
	border-radius: 12px;
	font-size: var(--t-14);
	line-height: var(--lh-14);
	transition: background-color 0.3s;
}
.dboard-list img {
	width: var(--s-6);
	height: var(--s-6);
	border-radius: 50%;
	object-fit: cover;
}
.dboard-list span {
	color: var(--ink-2);
	font-weight: 500;
}
.dboard-list i {
	position: relative;
	height: 6px;
	border-radius: 6px;
	background: var(--surface-2);
	overflow: hidden;
}
.dboard-list i::after {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--w);
	border-radius: 6px;
	background: var(--ink);
	transition: background-color 0.3s;
}
.dboard-list b {
	text-align: end;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.dboard-list li.is-on {
	background: #fff0e9;
}
.dboard-list li.is-on i::after {
	background: var(--orange);
}
.dboard-foot {
	font-size: var(--t-12);
	line-height: var(--lh-12);
	color: var(--ink-3);
}

/* Key under the flow */
.dkey {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4) var(--s-12);
	margin-top: var(--s-6);
	padding-inline: var(--s-2);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-2);
}
.dkey p {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.dkey b {
	color: var(--ink);
	font-weight: 600;
}
.dkey-sw {
	display: grid;
	place-items: center;
	width: var(--s-6);
	height: var(--s-6);
	border-radius: 8px;
	flex: none;
}
.dkey-yours {
	background: var(--surface);
}
.dkey-yours .lock {
	stroke-width: 1.8;
}
.dkey-yours .lock {
	width: 12px;
	height: 12px;
}
.dkey-theirs {
	background: #ffc7af;
}

/* ─── Tonight: what changes, told as one evening ─────── */
/* Full bleed: the evening takes the whole screen, edge to edge, under a clear nav */
.arc {
	position: relative;
	height: 480vh;
	overflow: clip;
	background: var(--ink);
	color: var(--white);
}
.arc-sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Photos lay down over each other as the evening goes on */
.tn-photos {
	position: absolute;
	inset: 0;
}
.arc-shot {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1);
}
.arc-shot.is-on {
	clip-path: inset(0);
}
.arc-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.08);
	transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.arc-shot.is-on img {
	transform: none;
}
.tn-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(4, 14, 20, 0.62) 0%,
		rgba(4, 14, 20, 0.18) 18%,
		rgba(4, 14, 20, 0) 34%,
		rgba(4, 14, 20, 0) 48%,
		rgba(4, 14, 20, 0.72) 100%
	);
}

.tn-grid {
	position: relative;
	z-index: 2;
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	row-gap: var(--s-8);
	padding-block: calc(var(--s-16) + var(--s-12)) var(--s-10);
}
.tn-title {
	font-size: var(--t-64);
	line-height: var(--lh-64);
	letter-spacing: -0.008em;
	text-wrap: balance;
}
.tn-title em {
	color: rgba(255, 255, 255, 0.72);
}
.tn-sub {
	margin-top: var(--s-5);
	max-width: 30rem;
	font-size: var(--t-18);
	line-height: var(--lh-18);
	color: rgba(255, 255, 255, 0.82);
	text-wrap: balance;
}
.w-head .av {
	width: 28px;
	height: 28px;
	font-size: 11px;
}

/* The moments share one cell; only the current one is shown */
.tn-moments {
	display: grid;
	align-items: end;
}
.tn-m {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: end;
	pointer-events: none;
}
.tn-m.is-on {
	pointer-events: auto;
}
.tn-time {
	grid-column: 1 / 8;
	font-size: clamp(88px, 11vw, 168px);
	line-height: 0.8;
	font-variant-numeric: tabular-nums;
}
.tn-line {
	grid-column: 1 / 7;
	margin-top: var(--s-5);
	font-size: var(--t-20);
	line-height: var(--lh-20);
	color: rgba(255, 255, 255, 0.92);
	text-wrap: balance;
}
.tn-card {
	grid-column: 8 / -1;
	grid-row: 1 / span 2;
	align-self: end;
	justify-self: end;
	width: 100%;
	max-width: 360px;
	zoom: 1.32; /* the product is the focal point of the frame; zoom keeps its layout crisp */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		inset 0 0 0 1px rgba(255, 255, 255, 0.2),
		0 60px 120px -40px rgba(0, 0, 0, 0.7),
		0 20px 40px -20px rgba(0, 0, 0, 0.45);
}
.tn-time,
.tn-line,
.tn-card {
	opacity: 0;
	transform: translateY(14px);
	filter: blur(6px);
	transform-origin: 70% 100%;
	transition:
		opacity 0.35s var(--ease),
		transform 0.5s var(--ease),
		filter 0.35s var(--ease);
}
.tn-m.is-on .tn-time,
.tn-m.is-on .tn-line,
.tn-m.is-on .tn-card {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1s cubic-bezier(0.16, 1, 0.3, 1),
		filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.tn-m.is-on .tn-line {
	transition-delay: 0.08s;
}
.tn-m.is-on .tn-card {
	transition-delay: 0.16s;
	transition-duration: 0.9s, 1.3s, 1s;
}
/* The card racks into focus: it arrives a touch larger and softer, then settles */
.tn-m:not(.is-on) .tn-card {
	transform: translateY(18px) scale(0.96);
	filter: blur(10px);
}

/* A drawn colon, since the display cut has none; it sits on the figures' optical centre */
.co {
	position: relative;
	display: inline-block;
	width: 0.2em;
	height: 0.72em;
	vertical-align: baseline;
}
.co::before,
.co::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 0.11em;
	height: 0.11em;
	margin-left: -0.055em;
	border-radius: 50%;
	background: currentColor;
}
.co::before {
	bottom: 0.43em;
}
.co::after {
	bottom: 0.05em;
}

/* The evening's timeline: four stops and how far into the night we are */
.tn-rail {
	display: grid;
	gap: var(--s-3);
}
.tn-rail ol {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.tn-rail li {
	color: rgba(255, 255, 255, 0.5);
	transition: color 0.4s var(--ease);
}
.tn-rail li.is-on,
.tn-rail li.is-past {
	color: var(--white);
}
.tn-track {
	position: relative;
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.2);
	overflow: hidden;
}
.tn-track i {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: calc(var(--arc-p, 0) * 100%);
	border-radius: 4px;
	background: var(--white);
}

/* ─── FAQ: one open at a time; the open answer lifts into a white sheet ── */
.faq-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: start;
}
/* V2: the heading centred on top, the questions in two columns under it */
.faq-side {
	grid-column: 1 / -1;
	text-align: center;
	margin-bottom: var(--head-gap);
}
.faq-ask {
	margin-top: var(--s-8);
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: var(--ink-2);
}
.faq-ask a {
	color: var(--ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(17, 43, 43, 0.25);
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
	transition: text-decoration-color 0.2s;
}
.faq-ask a:hover {
	text-decoration-color: var(--orange);
}
.faq-list {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-2) var(--gap);
	align-items: start;
}
.faq-col {
	display: grid;
	gap: var(--s-2);
}
.faq-list details {
	border-radius: var(--radius);
	background: var(--surface);
	transition:
		background-color 0.35s var(--ease),
		box-shadow 0.45s var(--ease);
}
.faq-list details:not([open]):hover {
	background: #eceeec;
}
/* .is-closing: the answer is folding away, so the card already turns back while it moves */
.faq-list details[open]:not(.is-closing) {
	background: var(--white);
	box-shadow:
		0 0 0 1px var(--surface-2),
		0 1px 2px rgba(17, 43, 43, 0.06),
		0 24px 48px -28px rgba(17, 43, 43, 0.3);
}
.faq-list summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-6);
	padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
	font-family: var(--standard);
	font-size: var(--t-20);
	line-height: var(--lh-20);
	font-weight: 500;
}
.faq-list summary::-webkit-details-marker {
	display: none;
}
.faq-list summary:focus-visible {
	outline-offset: -2px;
	border-radius: var(--radius);
}
/* Toggle: a plus in a small raised disc; open, it turns into a cross on ink */
.tog {
	position: relative;
	width: var(--s-8);
	height: var(--s-8);
	flex: none;
	border-radius: 50%;
	background: linear-gradient(180deg, #fff 0%, #f1f3f1 100%);
	box-shadow:
		inset 0 1px 0 #fff,
		0 1px 2px rgba(17, 43, 43, 0.14);
	transition:
		background 0.35s var(--ease),
		transform 0.45s var(--lift);
}
.tog::before,
.tog::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 1.8px;
	margin: -0.9px 0 0 -6px;
	border-radius: 2px;
	background: var(--ink);
	transition: background-color 0.35s var(--ease);
}
.tog::after {
	transform: rotate(90deg);
}
details[open]:not(.is-closing) .tog {
	transform: rotate(45deg);
	background: linear-gradient(180deg, #2f4f4b 0%, #16302f 55%, #0c2323 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 2px 6px -2px rgba(17, 43, 43, 0.4);
}
details[open]:not(.is-closing) .tog::before,
details[open]:not(.is-closing) .tog::after {
	background: var(--white);
}
/* Answer, V2: a line under the question, then one plain style for every paragraph */
.faq-list .a {
	margin-inline: var(--s-6);
	padding: 0 0 var(--s-6);
	display: grid;
	gap: var(--s-2);
}
.faq-list .a p {
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: var(--ink-2);
	text-wrap: pretty;
}
/* Open and close are animated in main.js, the same in every browser */

/* ─── Close: one centred ask on the brand light, ending on the wordmark ── */
.close {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-inline: var(--inset);
	border-radius: var(--radius-lg);
	background: #0b3a8c;
	color: var(--white);
	text-align: center;
}
.close-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.close-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
.close::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(70% 55% at 50% 38%, rgba(3, 18, 48, 0.34), rgba(3, 18, 48, 0) 70%);
}
.close-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: var(--s-32) var(--s-12);
}
.close-title {
	font-size: var(--t-64);
	line-height: var(--lh-64);
}
.close-title em {
	color: rgba(255, 255, 255, 0.74);
}
.close-sub {
	margin-top: var(--s-8);
	max-width: 34rem;
	font-size: var(--t-18);
	line-height: var(--lh-18);
	color: rgba(255, 255, 255, 0.9);
	text-wrap: balance;
}

/* Data facts under the ask: quiet frosted chips on the brand light */
.trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
	margin-top: var(--s-8);
	max-width: 760px;
}
.trust li {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: 32px;
	padding: 0 var(--s-3) 0 10px;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.9);
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(12px) saturate(1.4);
	-webkit-backdrop-filter: blur(12px) saturate(1.4);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.trust .i {
	width: 14px;
	height: 14px;
	stroke-width: 1.7;
}
/* The wordmark rises out of the bottom edge, like an end card */
.close-mark {
	display: block;
	width: min(100% - 2 * (var(--gutter) - var(--inset)), var(--content));
	height: auto;
	margin: var(--s-12) auto -2.2%;
	opacity: 0.96;
} /* the panel edge just grazes the baseline */

/* ─── Footer: light and quiet, on the page ──────────── */
.footer {
	padding: var(--s-20) 0 var(--s-8);
	color: var(--ink-2);
}
.footer-top {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	row-gap: var(--s-12);
	align-items: start;
}
.footer-brand {
	grid-column: 1 / 7;
	display: grid;
	gap: var(--s-4);
	justify-items: start;
}
.footer-brand .footer-co {
	margin-top: var(--s-3);
	font-size: var(--t-12);
	line-height: var(--lh-12);
	color: var(--ink-3);
}
.footer-brand img {
	width: 64px;
	height: auto;
}
.footer-brand p {
	font-size: var(--t-16);
	line-height: var(--lh-16);
}
.footer-cols {
	grid-column: 7 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--gap);
	font-size: var(--t-14);
	line-height: var(--lh-14);
}
.footer-cols ul {
	display: grid;
	gap: var(--s-3);
	align-content: start;
}
.footer-cols .h {
	color: var(--ink);
	font-weight: 600;
	margin-bottom: var(--s-1);
}
.footer-cols a {
	transition: color 0.2s;
}
.footer-cols a:hover {
	color: var(--ink);
}
.footer-base {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4) var(--s-8);
	flex-wrap: wrap;
	margin-top: var(--s-20);
	font-size: var(--t-12);
	line-height: var(--lh-12);
	color: var(--ink-3);
}
.footer-legal {
	display: flex;
	gap: var(--s-6);
}
.footer-legal a:hover {
	color: var(--ink);
}

/* ─── Motion: one signature moment ────────────────── */
/* The headline rises out of its own lines once, on load. Everything after it settles in quietly.
   Below the hero nothing fades in: only the product and the story move. */
.hero-title .line {
	display: block;
}
/* Where a line wraps (tablets, phones) it wraps balanced, and the first line hangs from the top
   rather than its last baseline, so the headline grows downward instead of up into the kicker */
.hero-title .line > span {
	text-wrap: balance;
}
.hero-title .line:first-child > span {
	vertical-align: top;
}
.hero-title .line > span {
	display: inline-block;
	animation: rise-soft 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-title .line:nth-child(2) > span {
	animation-delay: 0.12s;
}
/* Hold the entrance until Degular has loaded, so letters never swap font mid-rise */
.js:not(.is-ready) .hero-title .line > span,
.js:not(.is-ready) .intro {
	animation-play-state: paused;
}
@keyframes rise-soft {
	from {
		opacity: 0;
		transform: translateY(0.4em);
	}
}
@supports (overflow-clip-margin: 1px) {
	/* Where the browser can widen the clip past descenders, the lines rise from behind a mask */
	.hero-title .line {
		overflow: clip;
		overflow-clip-margin: 0.36em;
	}
	.hero-title .line > span {
		animation-name: rise;
	}
	@keyframes rise {
		from {
			transform: translateY(1.3em);
		}
	}
}
.intro {
	animation: settle 1s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: calc(0.55s + var(--i, 0) * 0.07s);
}
@keyframes settle {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}
.hero-media.intro {
	animation-name: media-in;
	animation-duration: 1.4s;
}
@keyframes media-in {
	from {
		opacity: 0;
		transform: translateY(32px) scale(0.985);
	}
}

/* The dashboard comes alive when it scrolls into view */
.js .app:not(.is-live) .ahc-bar span,
.js .app:not(.is-live) .app-team i::after {
	width: 0;
}
.ahc-bar span {
	width: var(--w);
	transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.app-team i::after {
	transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.app-team li:nth-child(2) i::after {
	transition-delay: 0.08s;
}
.app-team li:nth-child(3) i::after {
	transition-delay: 0.16s;
}
.app-team li:nth-child(4) i::after {
	transition-delay: 0.24s;
}
.ahc-stats b,
.live-count span {
	font-variant-numeric: tabular-nums;
}
.app-list li.is-new {
	animation: slidein 0.7s var(--ease);
}

/* ─── Responsive: breakpoints sit where the content stops fitting ── */
@media (max-width: 1180px) {
}
@media (max-width: 1100px) {
	.dflow {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--s-10);
	}
	.dstep:nth-child(3) {
		grid-column: 1 / -1;
	}
	.dstep:nth-child(3)::before {
		inset-inline-start: 50%;
		top: calc(-1 * var(--s-10) / 2 - 14px);
		transform: translateX(-50%) rotate(90deg);
	}
	.nav-links {
		gap: var(--s-6);
	}
	.app {
		grid-template-columns: 1fr;
	}
	.app-side {
		display: none;
	}
	.app-main {
		margin: 0 var(--app-gap) var(--app-gap);
	}
	.ahc-spark {
		display: none;
	}
	.app-hero-card {
		grid-template-columns: 1fr auto;
	}
	.section-head-split > .display-2 {
		grid-column: 1 / -1;
	}
	.section-head-split > .section-lede {
		grid-column: 1 / 9;
		margin-top: var(--s-8);
	}
	.footer-brand {
		grid-column: 1 / -1;
	}
	.footer-cols {
		grid-column: 1 / 9;
	}
}
@media (max-width: 900px) {
	/* Below 900: one card per row (two across on tablets); the FUO answer sits on its own white
     strip, the same idea as the desktop column, small */
	.dflow {
		grid-template-columns: 1fr;
		padding: var(--s-6);
	}
	.dstep:nth-child(3) {
		grid-column: auto;
	}
	.dstep + .dstep::before {
		inset-inline-start: 50%;
		top: calc(-1 * var(--s-10) / 2 - 14px);
		transform: translateX(-50%) rotate(90deg);
	}
	.nav-links,
	.nav-login {
		display: none;
	}
	/* A menu button opens a frosted sheet with the same links; Request access stays in the bar */
	.nav-actions {
		gap: var(--s-2);
	}
	.nav-menu {
		display: grid;
		place-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		margin-inline-end: -10px;
		border-radius: 50%;
		color: inherit;
	}
	.nav-menu i {
		display: block;
		width: 18px;
		height: 1.8px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.4s var(--lift);
	}
	.nav.menu-open .nav-menu i:first-child {
		transform: translateY(3.4px) rotate(45deg);
	}
	.nav.menu-open .nav-menu i:last-child {
		transform: translateY(-3.4px) rotate(-45deg);
	}
	.mega-bg {
		display: none;
	}
	.nav-sheet {
		display: grid;
		gap: 2px;
		position: absolute;
		top: calc(100% + var(--s-2));
		inset-inline: var(--s-3);
		padding: var(--s-2);
		max-height: calc(100dvh - var(--s-16) - var(--s-6));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 24px;
		background: var(
			--white
		); /* solid: inside the frosted bar, a translucent sheet let the headline ghost through */
		box-shadow:
			inset 0 1px 0 #fff,
			0 0 0 1px rgba(17, 43, 43, 0.05),
			0 24px 48px -20px rgba(17, 43, 43, 0.35);
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
		transform-origin: top right;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity 0.2s var(--ease),
			transform 0.4s var(--out),
			visibility 0s 0.4s;
	}
	.nav.menu-open .nav-sheet {
		opacity: 1;
		transform: none;
		visibility: visible;
		pointer-events: auto;
		transition:
			opacity 0.2s var(--ease),
			transform 0.4s var(--out),
			visibility 0s;
	}
	.nav-sheet > a,
	.sheet-toggle {
		display: flex;
		align-items: center;
		width: 100%;
		height: 52px;
		padding: 0 var(--s-4);
		border-radius: 16px;
		font-family: var(--standard);
		font-size: var(--t-18);
		line-height: var(--lh-18);
		font-weight: 500;
		color: var(--ink);
		text-align: start;
		transition: background-color 0.2s var(--ease);
	}
	.nav-sheet > a:focus-visible,
	.sheet-toggle:focus-visible,
	.sheet-sub a:focus-visible {
		background: var(--surface);
	}
	.nav-sheet > .sheet-login {
		color: var(--ink-3);
	}
	.sheet-toggle .nav-chev {
		width: 12px;
		height: 12px;
		margin-inline-start: auto;
	}
	.sheet-toggle[aria-expanded='true'] .nav-chev {
		rotate: 180deg;
		opacity: 1;
	}
	/* A group folds open under its name; its rows start on the same 16px edge as every name */
	.sheet-sub {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition:
			grid-template-rows 0.45s var(--out),
			visibility 0s 0.45s;
	}
	.sheet-group.is-open .sheet-sub {
		grid-template-rows: 1fr;
		visibility: visible;
		transition:
			grid-template-rows 0.45s var(--out),
			visibility 0s;
	}
	.sheet-sub > div {
		min-height: 0;
		overflow: hidden;
		display: grid;
		gap: 2px;
	}
	.sheet-sub > div::after {
		content: '';
		height: var(--s-2);
	}
	.sheet-sub a {
		display: flex;
		align-items: center;
		gap: var(--s-3);
		padding: var(--s-2) var(--s-4);
		border-radius: 16px;
		transition: background-color 0.2s var(--ease);
	}
	.sheet-sub img {
		width: 44px;
		height: 44px;
		flex: none;
		border-radius: 8px;
		object-fit: cover;
		background: var(--surface);
	} /* the row's 16 less the 8 above and below it */
	.sheet-sub span {
		min-width: 0;
	}
	.sheet-sub b {
		display: block;
		font-family: var(--standard);
		font-size: var(--t-16);
		line-height: 20px;
		font-weight: 500;
		color: var(--ink);
	}
	.sheet-sub small {
		display: block;
		font-size: 13px;
		line-height: 16px;
		color: var(--ink-3);
	}
	@media (hover: hover) {
		.nav-sheet > a:hover,
		.sheet-toggle:hover,
		.sheet-sub a:hover {
			background: var(--surface);
		}
	}
	.moment-stage,
	.moment-copy {
		grid-column: 1 / -1;
	}
	.moment-copy {
		order: -1;
		margin-bottom: var(--s-8);
	}
	.moment-stage {
		aspect-ratio: 4 / 4.4;
		max-height: none;
	}
	.app-cols {
		grid-template-columns: 1fr;
	}
	.app-hero-card {
		grid-template-columns: 1fr;
	}
	.faq-side,
	.faq-list {
		grid-column: 1 / -1;
	}
	.faq-list {
		grid-template-columns: minmax(0, 1fr);
	}
	.faq-ask {
		margin-top: var(--s-6);
	}
	.tn-m {
		grid-template-columns: 1fr;
		row-gap: var(--s-4);
	}
	.tn-time,
	.tn-line {
		grid-column: 1;
	}
	.tn-card {
		grid-column: 1;
		grid-row: auto;
		order: -1;
		justify-self: start;
		max-width: 400px;
		margin-bottom: var(--s-6);
		zoom: 1.12;
	}
	.tn-line {
		margin-top: 0;
		max-width: 28rem;
	}
}
@media (max-width: 640px) {
	.dflow {
		padding: var(--s-4);
	}
	.dmembers button {
		padding-inline-end: var(--s-2);
		font-size: 13px;
		gap: 6px;
	}
	.std,
	.dboard {
		padding: var(--s-4);
	}
	.dinvite-body {
		padding: var(--s-4);
	}
	.section-head-split > .section-lede {
		grid-column: 1 / -1;
	}
	.hero {
		padding-top: calc(var(--s-16) + var(--s-10));
	}
	.hero-title {
		margin-top: var(--s-6);
	}
	.hero-head::before {
		background-image: radial-gradient(circle, rgba(17, 43, 43, 0.08) 1px, transparent 1.5px);
		background-size: 16px 16px;
		-webkit-mask-image: radial-gradient(
			ellipse 80% 58% at 50% 44%,
			#000 0%,
			rgba(0, 0, 0, 0.85) 40%,
			transparent 78%
		);
		mask-image: radial-gradient(
			ellipse 80% 58% at 50% 44%,
			#000 0%,
			rgba(0, 0, 0, 0.85) 40%,
			transparent 78%
		);
	}
	.hero-lede {
		margin-top: var(--s-6);
	}
	.hero-media {
		margin-top: var(--s-6);
		aspect-ratio: 1;
	} /* square on phones: a 16:9 frame this narrow is too small to feel like a film */
	.hero-media > img {
		object-position: 50% 40%;
	}
	.film-play {
		gap: var(--s-3);
	}
	.film-disc {
		width: 76px;
		height: 76px;
	}
	.film-disc svg {
		width: 28px;
		height: 28px;
	}
	.film-label b {
		font-size: var(--t-16);
		line-height: var(--lh-16);
	}
	.moment-list i {
		inset-inline-start: calc(-1 * var(--s-4));
		width: 8px;
		height: 8px;
		border-radius: 2px;
	}
	.live {
		inset-inline: var(--s-3);
		width: auto;
		top: auto;
		bottom: calc(var(--s-12) + var(--s-3));
	}
	.live-sheet {
		padding: var(--s-3);
	}
	.live-event {
		margin-top: var(--s-3);
	}
	.live-feed li:nth-child(n + 2) {
		display: none;
	}
	.live-count span {
		font-size: 44px;
	}
	.band span {
		font-size: var(--t-16);
		line-height: var(--lh-16);
	}
	.band-track {
		padding-block: var(--s-3);
		gap: var(--s-4);
	}
	.ui {
		inset-inline: var(--s-3);
		bottom: var(--s-3);
		--frame-r: calc(var(--radius-lg) - var(--s-3));
	}
	.tn-grid {
		padding-block: calc(var(--s-16) + var(--s-6)) var(--s-6);
		row-gap: var(--s-6);
	}
	.tn-title {
		font-size: var(--t-48);
		line-height: var(--lh-48);
	}
	.tn-time {
		font-size: 72px;
	}
	.tn-line {
		font-size: var(--t-18);
		line-height: var(--lh-18);
	}
	.tn-card {
		margin-bottom: var(--s-4);
	}
	.ui-sheet {
		padding: var(--s-3);
	}
	.ui-bars {
		display: none;
	}
	.trust {
		gap: 6px;
	}
	.trust li {
		height: 30px;
		gap: 6px;
		padding: 0 10px 0 8px;
		font-size: 12px;
	} /* two to a row */
	.app-main {
		--app-gap: 6px;
		padding: var(--s-4);
		margin: 0 var(--app-gap) var(--app-gap);
	}
	.stage {
		padding: var(--s-10) calc(var(--gutter) - var(--inset) - 6px);
	}
	.glass {
		--glass-r: 22px;
		--glass-pad: 6px;
	}
	.app {
		grid-template-rows: 36px 1fr;
	}
	.app-url {
		width: auto;
		padding: 0 var(--s-3);
	}
	.app-bar-r,
	.app-btn {
		display: none;
	}
	.lights i {
		width: 10px;
		height: 10px;
	}
	.ahc-stats {
		gap: var(--s-4);
	}
	.faq-list summary {
		padding: var(--s-4) var(--s-3) var(--s-4) var(--s-4);
		gap: var(--s-4);
		font-size: var(--t-18);
		line-height: var(--lh-18);
	}
	.faq-list .a {
		margin-inline: var(--s-4);
		padding: 0 0 var(--s-4);
	}
	.close-inner {
		padding-block: var(--s-24) var(--s-8);
	}
	.close-sub {
		margin-top: var(--s-6);
		font-size: var(--t-16);
		line-height: var(--lh-16);
	}
	.close-mark {
		margin-top: var(--s-12);
	}
	.footer {
		padding-top: var(--s-16);
	}
	.footer-cols {
		grid-column: 1 / -1;
	}
	.footer-base {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-2);
		margin-top: var(--s-16);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}

/* ─── Founder letter: a sheet of paper in the glass frame, on a blurred photograph ── */
.letter-stage {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	justify-items: center;
	padding: var(--s-20) var(--s-6);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.letter-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.letter-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(40px) saturate(1.3);
	transform: scale(1.25);
}
.letter-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.22));
}
.letter-frame {
	width: min(100%, 720px);
}
.letter-sheet {
	padding: var(--s-16) var(--s-16) var(--s-12);
	display: grid;
	gap: var(--s-5);
	font-size: var(--t-18);
	line-height: var(--lh-18);
	color: var(--ink-2);
}
.letter-sheet p {
	text-wrap: pretty;
}
.letter-hi {
	font-family: var(--display);
	font-weight: 500;
	font-size: var(--t-36);
	line-height: var(--lh-36);
	color: var(--ink);
	letter-spacing: -0.008em;
	margin-bottom: var(--s-2);
}
.letter-lead {
	font-family: var(--standard);
	font-weight: 500;
	font-size: var(--t-24);
	line-height: var(--lh-24);
	color: var(--ink);
	text-wrap: balance;
}
.letter-close {
	font-family: var(--standard);
	font-weight: 500;
	font-size: var(--t-20);
	line-height: var(--lh-20);
	color: var(--ink);
	margin-top: var(--s-2);
}
.letter-sign {
	display: grid;
	justify-items: start;
	gap: var(--s-2);
	margin-top: var(--s-4);
}
.letter-sig {
	width: 250px;
	height: auto;
	fill: var(--ink);
	margin: 0 0 -14px -8px;
	transform: rotate(-3deg);
	transform-origin: left center;
} /* the drawing's own padding already spaces it from the name */
.letter-sign p {
	display: grid;
	gap: 2px;
	font-size: var(--t-16);
	line-height: var(--lh-16);
}
.letter-sign b {
	font-weight: 600;
	color: var(--ink);
}
.letter-sign small {
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-3);
}
@media (max-width: 900px) {
	.letter-stage {
		padding: var(--s-12) var(--s-4);
	}
	.letter-sheet {
		padding: var(--s-10) var(--s-8) var(--s-8);
	}
}
@media (max-width: 640px) {
	.letter-stage {
		padding: var(--s-3);
	}
	.letter-frame {
		--frame-r: calc(var(--radius-lg) - var(--s-3));
	}
	.letter-sheet {
		padding: var(--s-8) var(--s-5) var(--s-6);
		font-size: var(--t-16);
		line-height: var(--lh-16);
		gap: var(--s-4);
	}
	.letter-hi {
		font-size: var(--t-28);
		line-height: var(--lh-28);
	}
	.letter-lead {
		font-size: var(--t-20);
		line-height: var(--lh-20);
		text-wrap: pretty;
	}
	.letter-sig {
		width: 200px;
	}
}

/* ─── What's next: one photograph per kind of event; what is not here yet sits a step back ── */
.road {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
}
.road li {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	aspect-ratio: 4 / 5;
	padding: var(--s-6);
	border-radius: var(--radius-lg);
	background: var(--ink);
	color: var(--white);
}
.road img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--out);
}
.road li::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.28) 0%,
		rgba(0, 0, 0, 0) 30%,
		rgba(0, 0, 0, 0) 50%,
		rgba(0, 0, 0, 0.62) 100%
	);
}
.road li:not(.road-now) img {
	filter: saturate(0.3) brightness(0.8);
}
@media (hover: hover) {
	.road li:hover img {
		transform: scale(1.04);
	}
}
.road-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: var(--s-8);
	padding: 0 var(--s-3);
	border-radius: 999px;
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	background: rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.road-now .road-tag {
	background: var(--white);
	color: var(--ink);
	padding-inline-start: 10px;
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}
.road-name {
	font-size: var(--t-36);
	line-height: var(--lh-36);
	letter-spacing: -0.008em;
}
/* Names sit on one line across the cards, whether or not a card has a second line under it */
.road li > div {
	min-height: calc(var(--lh-36) + var(--s-2) + var(--lh-16));
}
.road-sub {
	margin-top: var(--s-2);
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: rgba(255, 255, 255, 0.86);
}
.road-same {
	margin-top: var(--s-16);
	text-align: center;
	font-size: var(--t-36);
	line-height: var(--lh-36);
	letter-spacing: -0.008em;
}
.road-same em {
	color: var(--ink-3);
}
@media (max-width: 900px) {
	.road {
		grid-template-columns: minmax(0, 1fr);
	}
	.road li {
		aspect-ratio: 16 / 10;
	}
}
@media (max-width: 640px) {
	.road li {
		aspect-ratio: 4 / 3;
		padding: var(--s-4);
	}
	.road-same {
		margin-top: var(--s-12);
	}
}

/* ─── Document pages: privacy, terms, contact ───────── */
/* One reading column beside a sticky contents list; tables are wells, never ruled lines. */
.doc {
	padding-block: calc(var(--s-16) + var(--s-16)) var(--s-24);
}
.doc-wrap {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: start;
}
.doc-head {
	grid-column: 1 / -1;
	margin-bottom: var(--s-16);
}
.doc-title {
	font-family: var(--display);
	font-weight: 500;
	font-size: var(--t-64);
	line-height: var(--lh-64);
	letter-spacing: -0.008em;
	word-spacing: 0.02em;
}
.doc-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-6);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-3);
}
.doc-flag {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 var(--s-3);
	border-radius: 999px;
	background: #fff1d9;
	color: #8a5300;
	font-size: 13px;
	font-weight: 600;
}
.doc-lede {
	margin-top: var(--s-6);
	max-width: 34rem;
	font-size: var(--t-20);
	line-height: var(--lh-20);
	color: var(--ink-2);
}
.doc-toc {
	grid-column: 1 / 4;
	position: sticky;
	top: calc(var(--s-16) + var(--s-8));
	display: grid;
	gap: 2px;
	font-size: var(--t-14);
	line-height: var(--lh-14);
}
.doc-toc a {
	padding: var(--s-2) var(--s-3);
	border-radius: 10px;
	color: var(--ink-3);
	transition:
		background-color 0.2s var(--ease),
		color 0.2s var(--ease);
}
.doc-toc a:hover {
	background: var(--surface);
	color: var(--ink);
}
.prose {
	grid-column: 4 / 11;
	font-size: var(--t-16);
	line-height: 1.7;
	color: var(--ink-2);
}
.prose > :first-child {
	margin-top: 0;
}
.prose h2 {
	margin: var(--s-16) 0 var(--s-4);
	font-family: var(--standard);
	font-weight: 600;
	font-size: var(--t-24);
	line-height: var(--lh-24);
	color: var(--ink);
	scroll-margin-top: calc(var(--s-16) + var(--s-8));
	text-wrap: balance;
}
.prose h3 {
	margin: var(--s-10) 0 var(--s-3);
	font-family: var(--standard);
	font-weight: 600;
	font-size: var(--t-18);
	line-height: var(--lh-18);
	color: var(--ink);
}
.prose p,
.prose ul,
.prose ol {
	margin: 0 0 var(--s-4);
	text-wrap: pretty;
}
.prose ul {
	list-style: disc;
	padding-inline-start: 1.25em;
}
.prose ol {
	list-style: decimal;
	padding-inline-start: 1.4em;
}
.prose li {
	margin-block: var(--s-1);
}
.prose li::marker {
	color: var(--ink-3);
}
.prose strong {
	color: var(--ink);
	font-weight: 600;
}
.prose em {
	color: var(--ink);
	font-weight: 500;
} /* emphasis without italics */
.prose em.note {
	display: block;
	padding: var(--s-3) var(--s-4);
	border-radius: 12px;
	background: #fff1d9;
	color: #8a5300;
	font-weight: 400;
} /* drafting notes, until the text is final */
.prose a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: rgba(17, 43, 43, 0.25);
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.prose a:hover {
	text-decoration-color: var(--orange);
}
.prose hr {
	display: none;
}
.prose code {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.88em;
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--surface);
	color: var(--ink);
}
.prose table {
	display: block;
	overflow-x: auto;
	width: 100%;
	margin: 0 0 var(--s-6);
	border-collapse: separate;
	border-spacing: 0 2px;
	font-size: var(--t-14);
	line-height: var(--lh-14);
}
.prose th,
.prose td {
	padding: var(--s-3) var(--s-4);
	text-align: start;
	vertical-align: top;
	background: var(--surface);
}
.prose th {
	background: var(--surface-2);
	color: var(--ink);
	font-weight: 600;
	white-space: nowrap;
}
.prose thead:not(:has(th:not(:empty))) {
	display: none;
} /* key-value tables written with an empty header row */
.prose tr > :first-child {
	border-start-start-radius: 12px;
	border-end-start-radius: 12px;
}
.prose tr > :last-child {
	border-start-end-radius: 12px;
	border-end-end-radius: 12px;
}

.contact {
	grid-column: 1 / -1;
	display: grid;
	gap: var(--s-8);
}
/* About: the founder's letter on its own page, then the same ask as Contact */
.doc-title em {
	color: var(--ink-3);
}
.about {
	grid-column: 1 / -1;
	display: grid;
	gap: var(--s-8);
}
.contact-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
}
.contact-grid li {
	display: grid;
	align-content: start;
	gap: var(--s-3);
	padding: var(--s-6);
	border-radius: var(--radius);
	background: var(--surface);
}
.contact-k {
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	color: var(--ink-3);
}
.contact-mail {
	font-family: var(--display);
	font-weight: 500;
	font-size: var(--t-24);
	line-height: var(--lh-24);
	color: var(--ink);
	overflow-wrap: anywhere;
	transition: color 0.2s var(--ease);
}
.contact-mail:hover {
	color: var(--orange);
}
.contact-grid li > p:last-child {
	color: var(--ink-2);
}
.contact-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-6);
	padding: var(--s-6) var(--s-6) var(--s-6) var(--s-8);
	border-radius: var(--radius-lg);
	background: var(--ink);
	color: rgba(255, 255, 255, 0.82);
}
.contact-cta b {
	color: var(--white);
	font-weight: 600;
}
.contact-co {
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-3);
}
@media (max-width: 900px) {
	.doc-toc {
		display: none;
	}
	.prose {
		grid-column: 1 / -1;
	}
	.contact-grid {
		grid-template-columns: 1fr;
	}
	.contact-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--s-6);
	}
}
@media (max-width: 640px) {
	.doc {
		padding-top: calc(var(--s-16) + var(--s-10));
	}
	.doc-title {
		font-size: var(--t-48);
		line-height: var(--lh-48);
	}
	.doc-head {
		margin-bottom: var(--s-10);
	}
}

/* V3 hero rhythm: title · 40 · lede · 40 · button · 16 · the small print · 48 · film. The
   button sits above the film, so on a 1440 × 900 laptop the whole ask is on the first screen
   and the film's play button is too. Phones take a smaller step of the same idea. */
@media (min-width: 1101px) {
	.hero {
		padding-top: calc(var(--s-24) + var(--s-6));
	}
}
.hero-lede {
	margin-top: var(--s-10);
}
.hero-ctas {
	margin-top: var(--s-10);
}
.hero-media {
	margin-top: var(--s-12);
}
@media (max-width: 640px) {
	.hero-lede {
		margin-top: var(--s-6);
	}
	.hero-ctas {
		margin-top: var(--s-8);
	}
	.hero-media {
		margin-top: var(--s-8);
	}
}

/* V3: the headline is two lines on phones too, "The webinar system / built for [word]". The
   longer line is about 8.5 times the font size, so the size follows the screen width and
   neither line ever wraps (about 39px on a 375 wide phone, 41px on iPhone 16 Pro). */
@media (max-width: 640px) {
	.hero-title {
		font-size: min(48px, (100vw - 2 * var(--gutter)) / 8.5);
	}
	.hero-title .line > span {
		white-space: nowrap;
	}
}

/* V2: phones show only the logo and the menu button in the header, no orange button */
@media (max-width: 640px) {
	.nav-actions .btn-primary {
		display: none;
	}
}

/* V2: the closing title is two sentences, one per line on phones too. Each needs about 10.8
   times the font size, so the size follows the screen width (about 32px on iPhone 16 Pro). */
@media (max-width: 640px) {
	.close-title {
		font-size: min(var(--t-48), (100vw - 2 * var(--gutter)) / 10.9);
		line-height: 1.15;
		white-space: nowrap; /* the break between the sentences is the only one */
	}
}

/* V2: on phones the four data facts stack one per line, all the width of the longest, centred */
@media (max-width: 640px) {
	.trust {
		display: grid;
		grid-template-columns: max-content;
		justify-content: center;
		gap: var(--s-2);
	}
	.trust li {
		justify-content: center;
		height: 36px;
		padding: 0 var(--s-4);
		font-size: 13px;
	}
}

/* V2: on phones the footer drops its wordmark (the big one just above already says fuo.), and
   the tagline and company line sit centred */
@media (max-width: 640px) {
	.footer-brand {
		justify-items: center;
		text-align: center;
	}
	.footer-brand img {
		display: none;
	}
	.footer-brand .footer-co {
		margin-top: 0;
	}
}
@media (max-width: 640px) {
	.footer-co > span {
		display: block;
	}
	.footer-co .footer-co-dot {
		display: none;
	}
}

/* ─── V2 How it works: the whole sales process as one connected line ─────────────
   Eight steps snake across two rows (left to right, then back), joined by one line drawn in
   main.js through the dots. A dashed loop runs from the last step back to step 02: every new
   seller starts the process again. That loop is the duplication. Phones: one vertical line. */
.flow {
	position: relative;
	padding-top: var(--s-20);
}
.flow-line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	color: var(--ink-3);
}
.flow-path {
	fill: none;
	stroke: rgba(17, 43, 43, 0.16);
	stroke-width: 2;
}
.flow-loop {
	fill: none;
	stroke: var(--ink-3);
	stroke-width: 1.6;
	stroke-dasharray: 3 6;
	stroke-linecap: round;
}
.flow-runner {
	fill: var(--orange);
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}
.flow.is-running .flow-runner {
	opacity: 1;
}
.flow-steps {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--gap);
	row-gap: var(--s-24);
	padding-inline: var(--s-12); /* room for the turn and the loop to pass outside the text */
}
/* The second row runs back from right to left, so the line can turn at the end of the first */
.flow-step:nth-child(5) {
	grid-area: 2 / 4;
}
.flow-step:nth-child(6) {
	grid-area: 2 / 3;
}
.flow-step:nth-child(7) {
	grid-area: 2 / 2;
}
.flow-step:nth-child(8) {
	grid-area: 2 / 1;
}
.flow-step {
	display: grid;
	justify-items: center;
	align-content: start;
	text-align: center;
}
/* Each dot is the same raised disc as the FAQ toggles; yours is ink, the new seller's is orange */
.flow-dot {
	display: grid;
	place-items: center;
	width: var(--s-12);
	height: var(--s-12);
	margin-bottom: var(--s-5);
	border-radius: 50%;
	color: var(--ink);
	background: linear-gradient(180deg, #fff 0%, #f1f3f1 100%);
	box-shadow:
		inset 0 1px 0 #fff,
		0 0 0 1px rgba(17, 43, 43, 0.06),
		0 1px 2px rgba(17, 43, 43, 0.12),
		0 8px 18px -10px rgba(17, 43, 43, 0.35);
	transition:
		transform 0.45s var(--lift),
		box-shadow 0.45s var(--ease);
}
.flow-dot .i {
	width: 20px;
	height: 20px;
}
.flow-step.is-you .flow-dot {
	color: var(--white);
	background: linear-gradient(180deg, #2f4f4b 0%, #16302f 55%, #0c2323 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 8px 18px -8px rgba(17, 43, 43, 0.5);
}
.flow-step.is-new .flow-dot {
	color: var(--white);
	background: linear-gradient(180deg, #ff8d58 0%, #f5692f 50%, #e8561e 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 8px 18px -8px rgba(255, 100, 45, 0.6);
}
/* The orange runner passing through a step lifts its dot for a moment */
.flow-step.is-lit .flow-dot {
	transform: translateY(-3px) scale(1.06);
}
.flow-n {
	font-size: var(--t-12);
	line-height: var(--lh-12);
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
.flow-t {
	margin-top: var(--s-1);
	font-family: var(--standard);
	font-size: var(--t-20);
	line-height: var(--lh-20);
	font-weight: 500;
	color: var(--ink);
}
.flow-s {
	margin-top: var(--s-1);
	max-width: 15rem;
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: var(--ink-3);
	text-wrap: balance;
}
/* The loop's label sits on the dashed line, placed by main.js */
.flow-tag {
	position: absolute;
	z-index: 2;
	left: var(--tx, 0);
	top: var(--ty, 0);
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: var(--s-8);
	padding: 0 var(--s-4) 0 var(--s-3);
	border-radius: 999px;
	background: var(--white);
	box-shadow: 0 0 0 1px var(--surface-2);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-2);
	white-space: nowrap;
}
.flow-tag .i {
	color: var(--orange);
}
@media (max-width: 900px) {
	.flow {
		padding-top: 0;
	}
	.flow-line {
		display: none;
	}
	.flow-steps {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-8);
		padding-inline: 0;
	}
	.flow-step:nth-child(n) {
		grid-area: auto;
	}
	/* One straight line down through the dots: each step draws it to the next, so it stops at 08 */
	.flow-step:not(:last-child)::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: calc(var(--s-12) / 2 - 1px);
		top: calc(var(--s-12) / 2);
		height: calc(100% + var(--s-8));
		width: 2px;
		background: rgba(17, 43, 43, 0.16);
	}
	.flow-s {
		max-width: none;
	}
	.flow-step {
		position: relative;
		grid-template-columns: var(--s-12) minmax(0, 1fr);
		column-gap: var(--s-4);
		justify-items: start;
		text-align: start;
	}
	.flow-dot {
		grid-row: 1 / span 3;
		margin-bottom: 0;
	}
	.flow-n {
		margin-top: 2px;
	}
	.flow-tag {
		position: static;
		transform: none;
		display: flex;
		width: fit-content;
		margin: var(--s-8) auto 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.flow-runner {
		display: none;
	}
}

/* V2 How it works on phones: each step is one compact row (dot, then title over one line),
   the dot centred on its text, and the line between dots. The step numbers stay on desktop. */
@media (max-width: 900px) {
	.flow-steps {
		row-gap: var(--s-6);
	}
	.flow-step {
		grid-template-columns: var(--s-10) minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-items: center;
	}
	.flow-dot {
		grid-row: 1 / span 2;
		width: var(--s-10);
		height: var(--s-10);
		align-self: center;
	}
	.flow-dot .i {
		width: 18px;
		height: 18px;
	}
	.flow-n {
		display: none;
	}
	.flow-t {
		margin-top: 0;
		font-size: var(--t-18);
		line-height: var(--lh-18);
	}
	.flow-s {
		margin-top: 0;
		font-size: var(--t-14);
		line-height: var(--lh-14);
	}
	.flow-step:not(:last-child)::after {
		left: calc(var(--s-10) / 2 - 1px);
		top: 50%;
		height: calc(100% + var(--s-6));
	}
	.flow-tag {
		margin-top: var(--s-6);
	}
}

/* ─── V2 Why fuo works: a team member's whole job is one link ─────────────────────
   Left, the only thing they touch: the link card in its glass frame on the brand gradient.
   Right, what they no longer do, each line crossed out in turn as the section arrives. */
.why {
	padding-top: var(--section);
}
.why-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: center;
}
.why-stage {
	grid-column: 1 / 7;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	place-items: center;
	align-content: center;
	gap: var(--s-6);
	aspect-ratio: 1 / 0.82;
	padding: var(--s-12) var(--s-8);
	border-radius: var(--radius-lg);
	background: #0b3a8c;
	text-align: center;
}
.why-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
.why-stage .grain {
	z-index: -1;
}
.why-k {
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	color: var(--ink-3);
}
.why-k-light {
	color: var(--white);
	text-shadow: 0 1px 10px rgba(2, 16, 32, 0.45);
}
/* The card is the same widget as everywhere on the page, drawn larger */
.why-card {
	width: 300px;
	zoom: 1.35;
	text-align: start;
}
.why-av {
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}
.why-done {
	font-family: var(--display);
	font-size: var(--t-28);
	line-height: var(--lh-28);
	font-weight: 500;
	color: var(--white);
	text-shadow: 0 2px 18px rgba(2, 16, 32, 0.5); /* holds the white on the light middle of the gradient */
}
.why-side {
	grid-column: 8 / -1;
}
.why-nots {
	display: grid;
	gap: var(--s-4);
	margin-top: var(--s-6);
}
.why-nots li {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--t-20);
	line-height: var(--lh-20);
	color: var(--ink-3);
}
.why-nots .i {
	width: 18px;
	height: 18px;
	padding: 3px;
	box-sizing: content-box;
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink-3);
}
/* The strike is a line that draws across, one item after another */
.why-nots s {
	text-decoration: none;
	background: linear-gradient(rgba(17, 43, 43, 0.45), rgba(17, 43, 43, 0.45)) no-repeat 0 55% / 0
		1.5px;
	transition: background-size 0.6s var(--out) calc(var(--k, 0) * 0.14s + 0.2s);
}
.why.is-in .why-nots s,
.no-js .why-nots s {
	background-size: 100% 1.5px;
}
.why-nots li:nth-child(2) {
	--k: 1;
}
.why-nots li:nth-child(3) {
	--k: 2;
}
.why-nots li:nth-child(4) {
	--k: 3;
}
.why-nots li:nth-child(5) {
	--k: 4;
}
.why-nots li:nth-child(6) {
	--k: 5;
}
.why-foot {
	margin-top: var(--s-8);
	font-family: var(--standard);
	font-size: var(--t-24);
	line-height: var(--lh-24);
	font-weight: 500;
	color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
	.why-nots s {
		transition: none;
		background-size: 100% 1.5px;
	}
}
@media (max-width: 1100px) {
	.why-stage,
	.why-side {
		grid-column: 1 / -1;
	}
	.why-stage {
		aspect-ratio: auto;
		padding-block: var(--s-16);
	}
	.why-side {
		margin-top: var(--s-12);
	}
}
@media (max-width: 640px) {
	.why-stage {
		padding: var(--s-12) var(--s-4);
	}
	.why-card {
		width: min(300px, 100%);
		zoom: 1.1;
	}
	.why-done {
		font-size: var(--t-24);
		line-height: var(--lh-24);
	}
	.why-nots li {
		font-size: var(--t-18);
		line-height: var(--lh-18);
	}
	.why-foot {
		font-size: var(--t-20);
		line-height: var(--lh-20);
	}
}

/* V2 Why fuo works, round 2: both columns open with the same subheadline at the same height;
   the gradient panel is shorter; the list is plain, in the page's dark ink. */
.why-grid {
	align-items: start;
}
.why-main {
	grid-column: 1 / 7;
}
.why-main .why-stage {
	grid-column: auto;
}
.why-h {
	font-family: var(--standard);
	font-size: var(--t-24);
	line-height: var(--lh-24);
	font-weight: 500;
	color: var(--ink);
	margin-bottom: var(--s-6);
}
.why-stage {
	aspect-ratio: 16 / 10;
	padding: var(--s-10) var(--s-8);
}
.why-nots {
	margin-top: 0;
}
.why-nots li {
	color: var(--ink);
}
.why-nots .i {
	color: var(--ink-2);
}
@media (max-width: 1100px) {
	.why-main {
		grid-column: 1 / -1;
	}
	.why-stage {
		aspect-ratio: auto;
		padding-block: var(--s-12);
	}
}
@media (max-width: 640px) {
	.why-h {
		font-size: var(--t-20);
		line-height: var(--lh-20);
		margin-bottom: var(--s-4);
	}
}

/* V2 Why fuo works, round 3: two panels of one height side by side. Each column is the
   subheadline over its panel; subgrid lines the two rows up across the columns. */
.why-grid {
	grid-template-rows: auto 1fr;
	align-items: stretch;
}
.why-main,
.why-side {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
}
.why-main {
	grid-column: 1 / 7;
}
.why-side {
	grid-column: 7 / -1;
}
.why-stage {
	aspect-ratio: auto;
	min-height: 400px;
	gap: var(--s-8);
}
/* Copy, Share, Done: three glass pills under the card */
.why-steps {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--white);
}
.why-steps span {
	display: inline-flex;
	align-items: center;
	height: var(--s-8);
	padding: 0 var(--s-4);
	border-radius: 999px;
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	background: rgba(2, 16, 32, 0.32);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(16px) saturate(1.4);
}
.why-steps .i {
	width: 14px;
	height: 14px;
	opacity: 0.8;
}
/* The list's panel: the page grey, same radius as the gradient beside it */
.why-panel {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
	padding: var(--s-8);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.why-nots {
	gap: var(--s-3);
}
.why-nots li {
	gap: var(--s-4);
	font-size: var(--t-18);
	line-height: var(--lh-18);
}
.why-nots .i {
	width: 14px;
	height: 14px;
	padding: 7px;
	color: var(--ink-2);
	background: linear-gradient(180deg, #fff 0%, #f1f3f1 100%);
	box-shadow:
		inset 0 1px 0 #fff,
		0 0 0 1px rgba(17, 43, 43, 0.06),
		0 1px 2px rgba(17, 43, 43, 0.12);
}
.why-foot {
	margin-top: auto;
	font-family: var(--display);
	font-size: var(--t-28);
	line-height: var(--lh-28);
}
@media (max-width: 1100px) {
	.why-main,
	.why-side {
		grid-column: 1 / -1;
		grid-row: auto;
		grid-template-rows: auto;
	}
	.why-grid {
		grid-template-rows: none;
	}
	.why-stage {
		min-height: 0;
	}
}
@media (max-width: 640px) {
	.why-panel {
		padding: var(--s-6) var(--s-5);
		gap: var(--s-6);
	}
	.why-foot {
		font-size: var(--t-24);
		line-height: var(--lh-24);
	}
}
/* The gradient sits in a picture element: a tall cut on phones, the wide one elsewhere */
.why-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
@media (max-width: 640px) {
	.why-bg img {
		object-position: 50% 60%;
	}
}

/* V2 dashboard section: no glass rim and no panel, just the dashboard, centred, with the
   headline and text centred right above it */
#product .stage {
	padding: 0 calc(var(--edge) - var(--inset));
	background: none;
	overflow: visible;
}
#product .glass {
	padding: 0;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}
#product .app {
	border-radius: 20px;
	box-shadow:
		0 0 0 1px rgba(17, 43, 43, 0.06),
		0 2px 4px rgba(17, 43, 43, 0.06),
		0 40px 80px -40px rgba(17, 43, 43, 0.35);
}
@media (max-width: 640px) {
	#product .app {
		border-radius: 16px;
	}
}

/* V2: the bar slides up out of view while reading down, and back on a deliberate scroll up
   (nav.js). It slides as one piece, open menus included. */
.nav {
	transition: transform 0.35s var(--out);
}
.nav.is-hidden {
	transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
	.nav {
		transition: none;
	}
}

/* V2: each subheadline sits centred over its own panel */
.why-h {
	text-align: center;
}

/* V2: more room between the section head and the two panel titles (padding, so it adds to
   the head's own gap instead of merging with it) */
.why-grid {
	padding-top: var(--s-12);
}
@media (max-width: 640px) {
	.why-grid {
		padding-top: var(--s-6);
	}
}

/* V3: the turning word in the hero is the design system blue (--blue, "summer sky"), with
   its period in the brand orange. Upright, so it needs no room for a slant. */
.rot-w {
	color: var(--blue);
}
.rot-dot {
	font-style: inherit;
	color: #dc5b3b;
}

/* V2 Why fuo works, the list, round 4: each thing they skip is its own white row, the text
   larger and in full ink, and the mark is a quiet "not needed" sign instead of a small x */
.why-nots {
	gap: var(--s-2);
}
.why-nots li {
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border-radius: 14px;
	background: var(--white);
	box-shadow: 0 0 0 1px rgba(17, 43, 43, 0.04), 0 1px 2px rgba(17, 43, 43, 0.05);
	font-size: var(--t-20);
	line-height: var(--lh-20);
	color: var(--ink);
}
.why-nots .i {
	width: 20px;
	height: 20px;
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--ink-3);
	stroke-width: 1.5;
}
.why-panel {
	padding: var(--s-6);
	gap: var(--s-6);
}
.why-foot {
	padding-inline: var(--s-2);
}
@media (max-width: 640px) {
	.why-nots li {
		font-size: var(--t-18);
		line-height: var(--lh-18);
		padding: var(--s-3);
	}
	.why-panel {
		padding: var(--s-4);
	}
}

/* V2: under Copy, Share, Done, the payoff in large white type: the system does the rest */
.why-stage {
	gap: var(--s-6);
}
.why-rest {
	margin-top: calc(-1 * var(--s-1));
	font-family: var(--display);
	font-size: var(--t-28);
	line-height: var(--lh-28);
	font-weight: 500;
	color: var(--white);
	text-shadow: 0 2px 18px rgba(2, 16, 32, 0.45);
}
@media (max-width: 640px) {
	.why-rest {
		font-size: var(--t-24);
		line-height: var(--lh-24);
	}
}


/* ─── V2 How it works as photo cards ─────────────────────────────────────────────
   Four cards, each a brand photo with a small glass step chip, a title and one line.
   Raised arrow discs join them; under the row a dashed line runs from the last card back to
   the second, labelled: every new seller starts again there. Phones: compact rows. */
.steps {
	position: relative;
}
.steps-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--s-8);
}
.step {
	position: relative;
}
.step-photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.step-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--out);
}
@media (hover: hover) {
	.step:hover .step-photo img {
		transform: scale(1.04);
	}
}
/* The step chip: glass on the photo, like the pills over the gradient */
.step-n {
	position: absolute;
	left: var(--s-3);
	top: var(--s-3);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--s-8);
	padding: 0 var(--s-3) 0 10px;
	border-radius: 999px;
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: 1;
	font-weight: 500;
	color: var(--white);
	background: rgba(2, 16, 32, 0.34);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	font-variant-numeric: tabular-nums;
}
.step-n .i {
	width: 14px;
	height: 14px;
}
.step-n.is-orange {
	background: linear-gradient(180deg, #ff8d58 0%, #f5692f 50%, #e8561e 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 12px -4px rgba(255, 100, 45, 0.6);
}
.step-t {
	margin-top: var(--s-5);
	font-family: var(--standard);
	font-size: var(--t-20);
	line-height: var(--lh-20);
	font-weight: 500;
	color: var(--ink);
}
.step-s {
	margin-top: var(--s-2);
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: var(--ink-2);
	text-wrap: pretty;
}
/* Arrow discs between the cards, centred in the gap and on the photos */
.step:not(.is-last)::after {
	content: '';
	position: absolute;
	z-index: 2;
	top: 0;
	right: calc(-1 * (var(--s-8) / 2) - 20px);
	margin-top: calc(62.5% - 20px); /* half the 4:5 photo; vertical margins resolve on width */
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9.5M8.5 4 12.5 8l-4 4' fill='none' stroke='%23112b2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")
			center / 16px no-repeat,
		linear-gradient(180deg, #fff 0%, #f1f3f1 100%);
	box-shadow:
		inset 0 1px 0 #fff,
		0 0 0 1px rgba(17, 43, 43, 0.06),
		0 8px 18px -8px rgba(17, 43, 43, 0.4);
}
/* The way back: a dashed U from under card 04 to under card 02 */
.steps-loop {
	position: relative;
	height: var(--s-12);
	margin-top: var(--s-8);
	margin-left: calc((100% - 3 * var(--s-8)) / 4 * 1.5 + var(--s-8));
	margin-right: calc((100% - 3 * var(--s-8)) / 8);
	border: 1.5px dashed rgba(17, 43, 43, 0.3);
	border-top: 0;
	border-radius: 0 0 28px 28px;
}
/* Arrowhead pointing up into card 02 */
.steps-loop::before {
	content: '';
	position: absolute;
	left: -6.5px;
	top: -10px;
	width: 10px;
	height: 10px;
	border-left: 1.5px solid rgba(17, 43, 43, 0.45);
	border-top: 1.5px solid rgba(17, 43, 43, 0.45);
	transform: rotate(45deg);
}
.steps-loop-tag {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: var(--s-8);
	padding: 0 var(--s-4) 0 var(--s-3);
	border-radius: 999px;
	background: var(--white);
	box-shadow: 0 0 0 1px var(--surface-2);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-2);
	white-space: nowrap;
}
.steps-loop-tag .i {
	color: var(--orange);
}
@media (max-width: 1100px) {
	.steps-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--s-12);
	}
	.step::after {
		display: none;
	}
	.steps-loop {
		height: auto;
		margin: var(--s-10) 0 0;
		border: 0;
		text-align: center;
	}
	.steps-loop::before {
		display: none;
	}
	.steps-loop-tag {
		position: static;
		transform: none;
	}
}
@media (max-width: 640px) {
	/* Phones: each step a row, photo on the left, with a small arrow down between them */
	.steps-row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-10);
	}
	.step {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: var(--s-4);
		align-content: center;
	}
	.step-photo {
		grid-row: 1 / span 2;
		aspect-ratio: 1;
		border-radius: var(--radius-sm);
	}
	.step-n {
		left: 6px;
		top: 6px;
		height: 24px;
		padding: 0 8px 0 6px;
		font-size: var(--t-12);
	}
	.step-n .i {
		width: 12px;
		height: 12px;
	}
	.step-t {
		margin-top: 0;
		align-self: end;
		font-size: var(--t-18);
		line-height: var(--lh-18);
	}
	.step-s {
		margin-top: var(--s-1);
		align-self: start;
		font-size: var(--t-14);
		line-height: var(--lh-14);
	}
	.step:not(.is-last)::after {
		display: block;
		right: auto;
		left: calc(56px - 14px);
		top: auto;
		bottom: calc(-1 * var(--s-10) / 2 - 14px);
		margin: 0;
		width: 28px;
		height: 28px;
		transform: rotate(90deg);
		background-size: 12px, auto;
	}
}

/* V2: eight benefits in two rows of four; titles in the page's medium weight, not bold */
.feats {
	row-gap: var(--s-12);
}
.feats h3 {
	font-weight: 500;
}
@media (max-width: 640px) {
	/* Phones: icon beside the words, so eight benefits stay a short list */
	.feats {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-6);
	}
	.feats li {
		grid-template-columns: var(--s-10) minmax(0, 1fr);
		column-gap: var(--s-4);
		row-gap: var(--s-1);
	}
	.feat-ic {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}
	.feats h3 {
		font-size: var(--t-18);
		line-height: var(--lh-18);
	}
	.feats p {
		font-size: var(--t-14);
		line-height: var(--lh-14);
	}
}

/* ─── V2: the benefits as white tiles on the page grey, like the list panel above; a raised
   arrow disc sits on the panel's edge and points at the sentence they add up to ─────── */
.feats-box {
	margin-top: var(--s-16);
	padding: var(--s-3);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.feats-box .feats {
	margin-top: 0;
	gap: var(--s-3);
}
.feats-box .feats li {
	padding: var(--s-5);
	border-radius: calc(var(--radius-lg) - var(--s-3));
	background: var(--white);
	box-shadow:
		0 0 0 1px rgba(17, 43, 43, 0.04),
		0 1px 2px rgba(17, 43, 43, 0.05);
}
/* ─── V2 Coming soon: in-person events ─────────────────────────────────────────
   Left, a photo with a glass ticket (QR code, who invited them); right, what events will do,
   as white tiles on the page grey, the same as the benefits above. Both panels one height. */
.ev-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: stretch;
}
.ev-stage {
	grid-column: 1 / 6;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	place-items: center;
	min-height: 440px;
	padding: var(--s-8);
	border-radius: var(--radius-lg);
	background: #1a1a1a;
}
.ev-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ev-stage::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(2, 16, 32, 0.1) 0%, rgba(2, 16, 32, 0.45) 100%);
}
.ev-tag {
	position: absolute;
	left: var(--s-4);
	top: var(--s-4);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: var(--s-8);
	padding: 0 var(--s-3) 0 10px;
	border-radius: 999px;
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: 1;
	font-weight: 500;
	color: var(--white);
	background: rgba(2, 16, 32, 0.34);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
}
/* The ticket: the page's glass frame around a white sheet, a QR code at the end */
.ev-ticket {
	width: min(100%, 360px);
}
.ev-sheet {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-5);
}
.ev-ticket-main {
	flex: 1;
	min-width: 0;
	padding-right: var(--s-4);
	border-right: 1.5px dashed rgba(17, 43, 43, 0.18);
}
.ev-k {
	font-size: var(--t-12);
	line-height: var(--lh-12);
	color: var(--ink-3);
}
.ev-name {
	margin-top: var(--s-1);
	font-family: var(--standard);
	font-size: var(--t-18);
	line-height: var(--lh-18);
	font-weight: 500;
	color: var(--ink);
}
.ev-meta {
	font-size: 13px;
	line-height: var(--lh-12);
	color: var(--ink-2);
}
.ev-by {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--s-3);
	font-size: var(--t-12);
	line-height: var(--lh-12);
	color: var(--ink-2);
}
.ev-by img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
}
.ev-qr {
	width: 76px;
	height: 76px;
	flex: none;
	fill: var(--ink);
	shape-rendering: crispEdges;
}
.ev-panel {
	grid-column: 6 / -1;
	padding: var(--s-3);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.ev-feats {
	height: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-3);
}
.ev-feats li {
	display: grid;
	gap: var(--s-2);
	align-content: start;
	padding: var(--s-5);
	border-radius: calc(var(--radius-lg) - var(--s-3));
	background: var(--white);
	box-shadow:
		0 0 0 1px rgba(17, 43, 43, 0.04),
		0 1px 2px rgba(17, 43, 43, 0.05);
}
.ev-feats h3 {
	font-family: var(--standard);
	font-size: var(--t-20);
	line-height: var(--lh-20);
	font-weight: 500;
	color: var(--ink);
}
.ev-feats p {
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: var(--ink-2);
}
@media (max-width: 1100px) {
	.ev-stage,
	.ev-panel {
		grid-column: 1 / -1;
	}
	.ev-stage {
		min-height: 380px;
	}
	.ev-panel {
		margin-top: var(--gap);
	}
}
@media (max-width: 640px) {
	.ev-stage {
		min-height: 320px;
		padding: var(--s-12) var(--s-4) var(--s-6);
	}
	.ev-sheet {
		padding: var(--s-4);
	}
	.ev-qr {
		width: 64px;
		height: 64px;
	}
	.ev-panel {
		padding: var(--s-2);
	}
	.ev-feats {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-2);
	}
	.ev-feats li {
		grid-template-columns: var(--s-10) minmax(0, 1fr);
		column-gap: var(--s-4);
		row-gap: var(--s-1);
		padding: var(--s-4);
		border-radius: calc(var(--radius-lg) - var(--s-2));
	}
	.ev-feats .feat-ic {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}
	.ev-feats h3 {
		font-size: var(--t-18);
		line-height: var(--lh-18);
	}
	.ev-feats p {
		font-size: var(--t-14);
		line-height: var(--lh-14);
	}
}

/* V2: no live blur over the event photo. A backdrop blur inside a clipped, rounded panel
   re-renders on every scroll frame and flickers; a fixed translucent rim looks the same and
   holds still. The panel gets its own compositing layer. */
.ev-stage {
	transform: translateZ(0);
}
.ev-ticket.gframe {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.24) 100%);
}
.ev-tag {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: rgba(2, 16, 32, 0.55);
}

/* V2: the dashboard to the left (two thirds), a brand photo to the right (one third), both the
   same height. The dashboard is drawn at its full design size and scaled to its column
   (main.js sets the zoom), so nothing inside it reflows or crowds. */
#product .prod-stage {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--gap);
	align-items: stretch;
	padding: 0 calc(var(--edge) - var(--inset));
}
#product .prod-stage .glass {
	min-width: 0;
}
#product .prod-stage .app {
	width: 1180px;
	zoom: var(--app-zoom, 1);
}
.prod-photo {
	position: relative;
	overflow: hidden;
	min-height: 100%;
	border-radius: 20px;
	background: var(--surface);
	box-shadow:
		0 0 0 1px rgba(17, 43, 43, 0.06),
		0 40px 80px -40px rgba(17, 43, 43, 0.35);
}
.prod-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 42% 40%;
}
@media (max-width: 1100px) {
	#product .prod-stage {
		grid-template-columns: minmax(0, 1fr);
	}
	#product .prod-stage .app {
		width: auto;
		zoom: 1;
	}
	.prod-photo {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
}
@media (max-width: 640px) {
	.prod-photo {
		border-radius: 16px;
	}
}

/* ─── V2 photo moments ────────────────────────────────────────────────────────── */
/* The photo wall: five brand photos as a mood board, one glass card in the middle */
.pwall {
	position: relative;
	width: min(100% - 2 * var(--gutter), var(--content));
	margin: var(--section) auto 0;
}
.pwall-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: 250px 250px;
	gap: var(--gap);
}
.pwall-grid figure {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.pwall-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pw1 { grid-column: 1 / 4; grid-row: 1 / 3; }
.pw2 { grid-column: 4 / 9; grid-row: 1; }
.pw3 { grid-column: 9 / 13; grid-row: 1 / 3; }
.pw4 { grid-column: 4 / 6; grid-row: 2; }
.pw5 { grid-column: 6 / 9; grid-row: 2; }
/* The card: the glass frame (a fixed rim, no live blur, so it holds still on scroll) */
.pwall-card {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(460px, 90%);
	--frame-r: 30px;
	--frame-pad: 8px;
	padding: var(--frame-pad);
	border-radius: var(--frame-r);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 40px 80px -36px rgba(2, 16, 32, 0.6),
		0 16px 32px -18px rgba(2, 16, 32, 0.35);
}
.pwall-sheet {
	padding: var(--s-8);
	border-radius: calc(var(--frame-r) - var(--frame-pad));
	background: var(--white);
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.pwall-t {
	font-family: var(--display);
	font-weight: 500;
	font-size: var(--t-36);
	line-height: var(--lh-36);
	letter-spacing: -0.008em;
	color: var(--ink);
}
.pwall-t em {
	color: var(--ink-3);
}
.pwall-s {
	margin-top: var(--s-3);
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: var(--ink-2);
}
/* The band: one full width photo, one line, a glass button */
.pband {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	place-items: center;
	margin: var(--section) var(--inset) 0;
	height: min(78vh, 680px);
	min-height: 460px;
	border-radius: var(--radius-lg);
	text-align: center;
	color: var(--white);
	transform: translateZ(0);
}
.pband-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}
.pband::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(2, 16, 32, 0.35) 0%, rgba(2, 16, 32, 0.6) 100%);
}
.pband-inner {
	display: grid;
	justify-items: center;
	gap: var(--s-8);
	padding: 0 var(--gutter);
}
.pband-t {
	font-family: var(--display);
	font-weight: 500;
	font-size: var(--t-64);
	line-height: var(--lh-64);
	letter-spacing: -0.008em;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(2, 16, 32, 0.35);
}
.pband-t em {
	color: rgba(255, 255, 255, 0.72);
}
/* the glass button, without a live blur so it holds still on scroll */
.pband-btn {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.14) 100%);
}
@media (max-width: 640px) {
	.pwall-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 180px 140px 180px;
	}
	.pw1 { grid-column: 1; grid-row: 1 / 3; }
	.pw2 { grid-column: 2; grid-row: 1; }
	.pw3 { grid-column: 2; grid-row: 2 / 4; }
	.pw4 { grid-column: 1; grid-row: 3; }
	.pw5 { display: none; }
	.pwall-sheet {
		padding: var(--s-5);
	}
	.pwall-t {
		font-size: var(--t-28);
		line-height: var(--lh-28);
	}
	.pband {
		height: 70vh;
		min-height: 420px;
	}
	.pband-t {
		font-size: var(--t-36);
		line-height: var(--lh-36);
	}
}

/* V2 photo band, round 2: shorter, a stronger wash behind the words, a brighter second line,
   and a clearer glass button whose label flows as one line of text (fuo. sits in it like a word) */
.pband {
	height: min(62vh, 520px);
	min-height: 400px;
}
.pband::after {
	background:
		radial-gradient(60% 55% at 50% 50%, rgba(2, 16, 32, 0.45) 0%, rgba(2, 16, 32, 0) 100%),
		linear-gradient(180deg, rgba(2, 16, 32, 0.4) 0%, rgba(2, 16, 32, 0.6) 100%);
}
.pband-t {
	text-shadow: 0 2px 28px rgba(2, 16, 32, 0.55);
}
.pband-t em {
	color: rgba(255, 255, 255, 0.86);
}
.pband-btn {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.18) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 0 0 1px rgba(255, 255, 255, 0.22),
		0 10px 24px -10px rgba(0, 0, 0, 0.5);
	text-shadow: 0 1px 2px rgba(2, 16, 32, 0.3);
}
.pband-btn-t {
	white-space: nowrap;
}
.pband-btn-t .fuo {
	margin: 0 0.12em;
}
@media (max-width: 640px) {
	.pband {
		height: 60vh;
		min-height: 360px;
	}
}

/* V2: the photo wall card ends with a next step */
.pwall-btn {
	margin-top: var(--s-5);
}

/* V2: the photo beside the dashboard carries a line: a live chip on top, a motivational line
   at the bottom over a soft fade (fixed transparency, no live blur) */
.prod-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2, 16, 32, 0.25) 0%, rgba(2, 16, 32, 0) 30%, rgba(2, 16, 32, 0) 45%, rgba(2, 16, 32, 0.7) 100%);
}
.prod-photo-copy {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: var(--s-5);
}
.prod-live {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: var(--s-8);
	padding: 0 var(--s-3) 0 10px;
	border-radius: 999px;
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: 1;
	font-weight: 500;
	color: var(--white);
	background: rgba(2, 16, 32, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.prod-photo-t {
	font-family: var(--display);
	font-size: var(--t-28);
	line-height: var(--lh-28);
	font-weight: 500;
	letter-spacing: -0.008em;
	color: var(--white);
	text-shadow: 0 2px 16px rgba(2, 16, 32, 0.45);
}
.prod-photo-t em {
	color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 640px) {
	.prod-photo-copy {
		padding: var(--s-4);
	}
	.prod-photo-t {
		font-size: var(--t-24);
		line-height: var(--lh-24);
	}
}

/* V2 step cards on phones: a 2 by 2 grid of bigger portrait photos with the words under them,
   no arrow discs between. Step chips are one style everywhere. */
@media (max-width: 640px) {
	.steps-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-3);
		row-gap: var(--s-8);
	}
	.step {
		display: block;
	}
	.step-photo {
		aspect-ratio: 4 / 5;
		border-radius: var(--radius);
	}
	.step:not(.is-last)::after {
		display: none;
	}
	.step-n {
		left: var(--s-2);
		top: var(--s-2);
		height: 26px;
		padding: 0 10px 0 8px;
		font-size: var(--t-12);
	}
	.step-t {
		margin-top: var(--s-3);
		font-size: var(--t-16);
		line-height: 22px;
	}
	.step-s {
		margin-top: var(--s-1);
		font-size: var(--t-14);
		line-height: var(--lh-14);
	}
}

/* V2 photo band on phones: as tall as its words need (no tall empty photo), with a bigger line */
@media (max-width: 640px) {
	.pband {
		height: auto;
		min-height: 0;
		padding: var(--s-20) 0;
	}
	.pband-t {
		font-size: 34px;
		line-height: 38px;
	}
	.pband-inner {
		gap: var(--s-6);
	}
}

/* V2: between the step cards, just a thin arrow in the gap, no disc */
.step:not(.is-last)::after {
	width: 24px;
	height: 12px;
	right: calc(-1 * (var(--s-8) / 2) - 12px);
	margin-top: calc(62.5% - 6px);
	border-radius: 0;
	box-shadow: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'><path d='M1 6h21M17 1.5 22 6l-5 4.5' fill='none' stroke='%235e6c6c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
		center / contain no-repeat;
}

/* V2 photo band on phones, round 2: a much bigger line and a bit more height around it */
@media (max-width: 640px) {
	.pband {
		padding: var(--s-24) 0;
	}
	.pband-t {
		font-size: 44px;
		line-height: 46px;
	}
	.pband-inner {
		gap: var(--s-8);
	}
}

/* V2 step cards on phones: one swipeable row in order. Each card is most of the screen wide,
   the next one peeks in from the right, and the chips read "Step 1" to "Step 4". */
.step-word {
	display: none;
}
@media (max-width: 640px) {
	.steps-row {
		display: flex;
		gap: var(--s-3);
		margin-inline: calc(-1 * var(--gutter));
		padding: 0 var(--gutter) var(--s-2);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.steps-row::-webkit-scrollbar {
		display: none;
	}
	.step {
		flex: 0 0 80%;
		scroll-snap-align: start;
		margin: 0;
	}
	.step-photo {
		aspect-ratio: 4 / 5;
		border-radius: var(--radius-lg);
	}
	.step-word {
		display: inline;
	}
	.step-n {
		left: var(--s-3);
		top: var(--s-3);
		height: var(--s-8);
		padding: 0 var(--s-3) 0 10px;
		font-size: var(--t-14);
	}
	.step-t {
		margin-top: var(--s-4);
		font-size: var(--t-20);
		line-height: var(--lh-20);
	}
	.step-s {
		margin-top: var(--s-2);
		font-size: var(--t-16);
		line-height: var(--lh-16);
	}
}

/* V2: the list panel's closing line centred; the photo wall card's line bigger everywhere */
.why-foot {
	text-align: center;
}
.pwall-card {
	width: min(580px, 92%);
}
.pwall-t {
	font-size: 44px;
	line-height: 50px;
}
@media (max-width: 640px) {
	.pwall-t {
		font-size: 32px;
		line-height: 36px;
	}
}

/* V2 phones: dashboard, photo and benefits stack with one even gap */
@media (max-width: 640px) {
	#product .prod-stage {
		gap: var(--s-6);
	}
	.feats-box {
		margin-top: var(--s-6);
	}
}

/* V2 phones: the event photo and its feature list keep the same 24px gap as the dashboard */
@media (max-width: 1100px) {
	.ev-panel {
		margin-top: var(--s-6);
	}
}


/* ═══ V3 ═══════════════════════════════════════════════════════════════════════════════
   The page as one story told from three sides: how it works, then the team member, the
   guest and you. Everything below either adds a part V3 introduced or adjusts V2 for it. */

/* Skip link: the first stop for a keyboard, out of sight until it is focused */
.skip {
	position: fixed;
	z-index: 100;
	top: var(--s-3);
	left: var(--s-3);
	padding: var(--s-2) var(--s-4);
	border-radius: 999px;
	background: var(--ink);
	color: var(--white);
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	translate: 0 -200%;
	transition: translate 0.25s var(--out);
}
.skip:focus-visible {
	translate: 0 0;
}
main:focus {
	outline: none;
}

/* The large button: the one ask, in the hero and at the close */
.btn-lg {
	height: 56px;
	padding: 0 var(--s-8);
	font-size: var(--t-18);
	line-height: var(--lh-18);
}
.btn-lg .btn-arrow {
	width: 18px;
	height: 18px;
}

/* Hero: a quiet film invitation, two headline lines, then the smaller supporting copy. */
.hero {
	padding-top: calc(var(--s-16) + var(--s-8));
}
.hero-video-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: var(--s-8);
	max-width: 100%;
	padding: var(--s-1) var(--s-4);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-2);
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	transition: background 0.2s var(--ease);
}
.hero-video-pill > span {
	white-space: nowrap;
}
.hero-video-pill .i {
	width: var(--t-14);
	height: var(--t-14);
	flex: none;
}
.hero-video-pill:hover {
	background: var(--surface-2);
}
.hero-video-pill:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: var(--s-1);
}
.hero-title {
	margin-top: var(--s-6);
}
.hero-lede {
	margin-top: var(--s-8);
	max-width: 42rem;
	text-wrap: balance;
	font-size: var(--t-20);
	line-height: var(--lh-20);
}
.hero-ctas {
	margin-top: var(--s-8);
}
.hero-media {
	margin-top: var(--s-10);
	border-radius: var(--radius);
}
.hero-fine {
	margin-top: var(--s-3);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-3);
}
/* The playbook, for somebody not ready for the waitlist: a quiet line under the hero's button
   and under the closing one. The link opens the playbook's dialog (exit.js). */
.hero-fine a {
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.hero-fine a:hover {
	color: var(--ink);
}
.close-alt {
	margin-top: var(--s-4);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: rgba(255, 255, 255, 0.86);
}
.close-alt a {
	font-weight: 600;
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 640px) {
	.hero {
		padding-top: calc(var(--s-16) + var(--s-6));
	}
	.hero-video-pill {
		font-size: var(--t-12);
		line-height: var(--lh-12);
		padding-inline: var(--s-3);
	}
	.hero-title {
		margin-top: var(--s-5);
	}
	.hero-lede,
	.hero-ctas {
		margin-top: var(--s-6);
	}
	.hero-media {
		margin-top: var(--s-6);
		border-radius: var(--radius-sm);
	}
}

/* Section eyebrows: whose side of the product a section shows. The royal blue of the hero's
   turning word. In a split head it takes the whole first row, above headline and lede. */
.eyebrow {
	font-family: var(--standard);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--blue);
	text-box: trim-both cap alphabetic;
	margin-bottom: var(--s-6);
}
.section-head-split > .eyebrow {
	grid-column: 1 / -1;
}

/* ─── V3 For your guests: the webinar as a guest sees it ──────────────────────────────
   An ink panel whose light pools behind the phone, never on it. The phone is drawn at a
   real phone's size, 393 × 852 inside an 11px bezel, and zoomed to its place (--pz), so the
   player's own sizes (14px messages, 34px buttons, 13px gaps) keep their true proportions at
   every width. On wide screens two notes stand on each side of it, at a quarter and three
   quarters of its height; below that they follow it. */
.guests {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: var(--section) var(--inset) 0;
	padding: var(--s-24) 0;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(40% 40% at 50% 66%, rgba(54, 112, 108, 0.5) 0%, rgba(54, 112, 108, 0) 100%),
		linear-gradient(180deg, #102827 0%, #0a1b1b 100%);
	color: var(--white);
}
.guests .wrap {
	width: min(100% - 2 * (var(--gutter) - var(--inset)), var(--content));
}
.guests-head {
	display: grid;
	justify-items: center;
	text-align: center;
	margin-bottom: var(--s-16);
}
.guests-head .display-2 em {
	color: rgba(255, 255, 255, 0.58);
}
.guests-head .section-lede {
	max-width: 34rem;
	margin-top: var(--s-8);
	color: rgba(255, 255, 255, 0.74);
	text-wrap: balance;
}
/* on the ink, the eyebrow takes the light end of the same blue */
.eyebrow-light {
	color: #8cc3ec; /* the design system blue for dark grounds */
}
.guests-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	column-gap: var(--s-16);
	align-items: stretch;
}
.gcall {
	display: grid;
	grid-template-rows: 1fr 1fr;
	align-items: center;
}
/* every note is one height, so the icons of a pair line up even when one title wraps */
.gcall li {
	display: grid;
	align-content: start;
	gap: var(--s-2);
	min-height: 11rem;
	max-width: 19rem;
}
/* the notes left of the phone align to it, so both columns read inward */
.gcall-start {
	justify-items: end;
	text-align: end;
}
.gcall-start li {
	justify-items: end;
}
.gcall-ic {
	display: grid;
	place-items: center;
	width: var(--s-10);
	height: var(--s-10);
	margin-bottom: var(--s-2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
	color: var(--white);
}
.gcall-ic .i {
	width: 18px;
	height: 18px;
	stroke-width: 1.7;
}
.gcall h3 {
	font-family: var(--standard);
	font-size: var(--t-20);
	line-height: var(--lh-20);
	font-weight: 500;
	color: var(--white);
	text-wrap: balance;
}
.gcall p {
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: rgba(255, 255, 255, 0.7);
	text-wrap: pretty;
}

/* The device: a dark bezel 11px around the screen, corners concentric (66 outside, 55 in),
   two volume keys on the left and the side key on the right */
.phone {
	--pz: 0.9;
	--metal: #1e2828;
	zoom: var(--pz);
	position: relative;
	width: 415px;
	height: 874px;
	padding: 11px;
	border-radius: 66px;
	background: linear-gradient(155deg, #3b4948 0%, #0d1515 30%, #0a1111 72%, #263231 100%);
	box-shadow:
		inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
		inset 0 2px 1px rgba(255, 255, 255, 0.18),
		0 2px 4px rgba(0, 0, 0, 0.35),
		0 60px 120px -40px rgba(0, 0, 0, 0.85);
}
.phone::before,
.phone::after {
	content: '';
	position: absolute;
	width: 3px;
	background: var(--metal);
}
.phone::before {
	left: -3px;
	top: 196px;
	height: 60px;
	border-radius: 2px 0 0 2px;
	box-shadow: 0 76px 0 var(--metal);
}
.phone::after {
	right: -3px;
	top: 236px;
	height: 96px;
	border-radius: 0 2px 2px 0;
}
.phone-screen {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 393px;
	height: 852px;
	border-radius: 55px;
	background: #000;
	color: #fff;
	font-family: var(--sans);
}
.phone-video {
	position: absolute;
	z-index: -1;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
/* the player's own top scrim: a breath of dark behind the bar, gone by a quarter down */
.phone-screen::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 26%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}
/* Status bar: the time in the left ear, signal, wifi and battery in the right */
.pm-status {
	position: absolute;
	z-index: 3;
	top: 0;
	inset-inline: 0;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 32px 0 52px;
}
.pm-time {
	font-family: var(--standard);
	font-size: 16px;
	line-height: 1;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.pm-sys {
	display: flex;
	align-items: center;
	gap: 6px;
}
.pm-sys svg {
	fill: currentColor;
}
.pm-signal {
	width: 18px;
	height: 12px;
}
.pm-wifi {
	width: 16px;
	height: 12px;
}
.pm-battery {
	width: 27px;
	height: 13px;
}
.phone-island {
	position: absolute;
	z-index: 4;
	top: 11px;
	left: 50%;
	width: 125px;
	height: 37px;
	translate: -50% 0;
	border-radius: 999px;
	background: #000;
}
/* The player's bar: 13px under the status bar and 13px in from each side */
.pm-top {
	position: absolute;
	z-index: 2;
	top: 67px;
	inset-inline: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pm-id {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
/* the host is the presenter on screen: their face, cropped from the same frame */
.pm-face {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: #2a2a2a url('assets/img/backstage.webp') no-repeat 50% 27% / 470%;
	outline: 1px solid rgba(255, 255, 255, 0.1);
}
.pm-id-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.pm-id b {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: var(--standard);
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	white-space: nowrap;
}
.pm-id small {
	font-size: 11px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.72);
	white-space: nowrap;
}
.pm-seal {
	width: 14px;
	height: 14px;
	flex: none;
	fill: #2b8ad3;
	translate: 0 0.5px;
}
.pm-seal .pm-tick {
	fill: none;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pm-pills {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
	flex: none;
}
.pm-live,
.pm-viewers {
	display: inline-flex;
	align-items: center;
	height: 24px;
	border-radius: 999px;
	font-family: var(--standard);
	line-height: 1;
}
.pm-live {
	gap: 6px;
	padding: 0 10px;
	background: linear-gradient(180deg, #f04a3f 0%, #d42e25 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 4px 12px -4px rgba(212, 46, 37, 0.7);
	font-size: 11.2px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.pm-live i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	animation: pm-pulse 2s ease-in-out infinite;
}
@keyframes pm-pulse {
	50% {
		opacity: 0.35;
	}
}
.pm-viewers {
	gap: 5px;
	padding: 0 13px 0 11px;
	background: rgba(6, 24, 24, 0.5);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.pm-viewers svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}
/* Reactions rise from a fifth of the way up, anywhere across the middle, as in the player */
.pm-floats {
	position: absolute;
	z-index: 1;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.pm-float {
	position: absolute;
	bottom: 18%;
	left: var(--x, 40%);
	font-size: 25.6px;
	line-height: 1;
	animation: pm-float 2.4s ease-out forwards;
}
@keyframes pm-float {
	0% {
		opacity: 0;
		translate: 0 0;
		scale: 0.6;
	}
	12% {
		opacity: 1;
		scale: 1;
	}
	100% {
		opacity: 0;
		translate: 0 -358px;
		scale: 1.15;
	}
}
/* The chat sheet brings its own ground, from just under the offer down to the edge */
.pm-chat {
	position: absolute;
	z-index: 2;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 13px 13px 47px;
	background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.6) 16%,
			rgba(0, 0, 0, 0.86) 52%,
			rgba(0, 0, 0, 0.94) 100%
		)
		no-repeat 0 100% / 100% calc(100% - 64px);
}
/* The offer: the player's white card, as wide as what it says */
.pm-offer {
	align-self: flex-start;
	max-width: 100%;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px;
	border-radius: 21px;
	background: #fff;
	color: #111;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 12px 34px rgba(0, 0, 0, 0.45);
	transition:
		opacity 0.5s var(--ease),
		translate 0.7s var(--out);
}
.phone.is-waiting .pm-offer {
	opacity: 0;
	translate: 0 14px;
}
.pm-offer img {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 8px;
	object-fit: cover;
	outline: 1px solid rgba(0, 0, 0, 0.1);
}
.pm-offer-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.pm-offer-copy small {
	font-size: 11px;
	line-height: 1;
	font-weight: 500;
	color: rgba(17, 43, 43, 0.62);
	white-space: nowrap;
}
.pm-offer-copy b {
	font-family: var(--standard);
	font-size: 14px;
	line-height: 1;
	font-weight: 700;
	color: #112b2b;
	white-space: nowrap;
}
.pm-go {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	margin-inline-start: 8px;
	border-radius: 50%;
	background: linear-gradient(180deg, #ff8d58 0%, #f5692f 50%, #e8561e 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -2px 4px rgba(176, 56, 12, 0.2),
		0 6px 16px -6px rgba(255, 100, 45, 0.6);
	color: #fff;
}
.pm-go svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* The newest message sits at the bottom; older ones leave over the top edge. Three
   one-line messages fill it exactly (3 × 34 + 2 × 13), with 8px of fade above them, so a
   still frame never shows half of a fourth. */
.pm-list {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 13px;
	height: 136px;
	overflow: hidden;
	mask-image: linear-gradient(180deg, transparent 0, #000 8px);
}
.pm-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex: none;
}
.pm-list li.is-new {
	animation: pm-rise 260ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes pm-rise {
	from {
		opacity: 0;
		translate: 0 8px;
	}
}
.pm-av {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	flex: none;
	padding-top: 1px;
	border-radius: 50%;
	background: hsl(var(--hue, 210) 45% 38%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
	font-size: 8.75px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-indent: 0.02em;
}
.pm-list li.is-host .pm-av {
	background: linear-gradient(180deg, #2f4f4b 0%, #112b2b 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.pm-bubble {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	max-width: 84%;
}
.pm-bubble b {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--standard);
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.pm-bubble > span {
	font-size: 14px;
	line-height: 1.272;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.97);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
	overflow-wrap: break-word;
}
.pm-q {
	display: inline-grid;
	place-items: center;
	width: 15px;
	height: 15px;
	margin-inline-end: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.9);
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	font-style: normal;
	translate: 0 1px;
}
/* The composer: the field, then ask, raise a hand and react */
.pm-bar {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pm-input {
	flex: 1;
	min-width: 0;
	padding: 13px 21px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
	font-size: 16px;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pm-btn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.pm-btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pm-btn .pm-dot {
	fill: currentColor;
	stroke: none;
}
.pm-home {
	position: absolute;
	z-index: 3;
	bottom: 8px;
	left: 50%;
	width: 134px;
	height: 5px;
	translate: -50% 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
}
@media (prefers-reduced-motion: reduce) {
	.pm-live i {
		animation: none;
	}
}
@media (max-width: 1100px) {
	.phone {
		--pz: 0.78;
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: center;
	}
	.guests-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-8);
		row-gap: var(--s-12);
	}
	.gcall {
		grid-template-rows: none;
		align-content: start;
		gap: var(--s-8);
	}
	.gcall li {
		min-height: 0;
	}
	.gcall-start,
	.gcall-start li {
		justify-items: start;
		text-align: start;
	}
}
@media (max-width: 640px) {
	.guests {
		padding: var(--s-16) 0;
	}
	.guests-head {
		margin-bottom: var(--s-10);
	}
	.guests-head .section-lede {
		margin-top: var(--s-6);
	}
	.guests-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-6);
	}
	.phone {
		--pz: 0.66;
		margin-bottom: var(--s-6);
	}
	.gcall {
		gap: var(--s-6);
	}
	.gcall li {
		grid-template-columns: var(--s-10) minmax(0, 1fr);
		column-gap: var(--s-4);
		row-gap: var(--s-1);
		max-width: none;
	}
	.gcall-ic {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}
	.gcall h3 {
		font-size: var(--t-18);
		line-height: var(--lh-18);
	}
	.gcall p {
		font-size: var(--t-14);
		line-height: var(--lh-14);
	}
}
@media (max-width: 360px) {
	.phone {
		--pz: 0.6;
	}
}

/* V3 For your guests on desktop: the whole section fits one screen, so nothing needs a
   scroll to read. The words stand on the left (eyebrow, headline, lede, then the four notes
   two by two), the phone on the right; main.js zooms the phone to the window's height, so
   panel and bar together never pass the bottom edge. */
@media (min-width: 1101px) {
	.guests {
		padding: var(--s-12) 0;
		background:
			radial-gradient(34% 58% at 76% 50%, rgba(54, 112, 108, 0.5) 0%, rgba(54, 112, 108, 0) 100%),
			linear-gradient(180deg, #102827 0%, #0a1b1b 100%);
	}
	.guests .wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: 1fr auto auto auto 1fr;
		grid-template-areas:
			'. phone'
			'head phone'
			'start phone'
			'end phone'
			'. phone';
		column-gap: var(--s-24);
	}
	.guests-grid {
		display: contents;
	}
	.guests-head {
		grid-area: head;
		justify-items: start;
		text-align: start;
		margin-bottom: var(--s-12);
	}
	.guests-head .section-lede {
		text-wrap: pretty;
	}
	.phone {
		grid-area: phone;
		align-self: center;
		margin-inline-end: var(--s-8);
	}
	.gcall {
		grid-template-rows: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-10);
		align-items: start;
	}
	.gcall-start {
		grid-area: start;
	}
	.gcall-end {
		grid-area: end;
		margin-top: var(--s-10);
	}
	.gcall-start,
	.gcall-start li {
		justify-items: start;
		text-align: start;
	}
	.gcall li {
		min-height: 0;
		max-width: 22rem;
	}
}

/* ─── V3 For you: the photo beside the dashboard carries one line, at its foot ── */
.prod-photo-copy {
	justify-content: flex-end;
}
.prod-photo::after {
	background: linear-gradient(180deg, rgba(2, 16, 32, 0) 42%, rgba(2, 16, 32, 0.72) 100%);
}
.prod-photo img {
	object-position: 50% 40%;
}
/* Six benefits, three across; two across on tablets, a list on phones */
.feats-box .feats {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
	.feats-box .feats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.feats-box {
		padding: var(--s-2);
	}
	.feats-box .feats {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-2);
	}
	.feats-box .feats li {
		padding: var(--s-4);
		border-radius: calc(var(--radius-lg) - var(--s-2));
	}
}

/* ─── V3 photo band: the film's second door, a glass button with its length ── */
.btn-play {
	width: 18px;
	height: 18px;
	flex: none;
	margin-inline-start: -4px;
	fill: currentColor;
}
.pband-btn-len {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.78);
	font-variant-numeric: tabular-nums;
}
.pband-btn-len::before {
	content: '·';
	margin-inline-end: var(--s-2);
}

/* ─── V3 Coming next: one photo with its ticket, and the copy beside it ─────── */
.next-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: center;
}
.next-grid .ev-stage {
	grid-column: 1 / 7;
	min-height: 440px;
}
.next-copy {
	grid-column: 8 / -1;
}
.next-t {
	font-family: var(--display);
	font-size: var(--t-48);
	line-height: var(--lh-48);
	font-weight: 500;
	letter-spacing: -0.008em;
	text-wrap: balance;
	text-box: trim-both cap alphabetic;
}
.next-t em {
	color: var(--ink-3);
}
.next-s {
	margin-top: var(--s-6);
	font-size: var(--t-18);
	line-height: var(--lh-18);
	color: var(--ink-2);
	text-wrap: pretty;
}
.next-list {
	display: grid;
	gap: var(--s-3);
	margin-top: var(--s-8);
}
.next-list li {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: var(--ink);
}
.next-list .i {
	width: 14px;
	height: 14px;
	padding: 5px;
	box-sizing: content-box;
	border-radius: 50%;
	background: var(--surface);
	color: var(--blue);
	stroke-width: 2.2;
}
@media (max-width: 1100px) {
	.next-grid .ev-stage,
	.next-copy {
		grid-column: 1 / -1;
	}
	.next-grid .ev-stage {
		min-height: 360px;
	}
	.next-copy {
		margin-top: var(--s-10);
	}
}
@media (max-width: 640px) {
	.next-grid .ev-stage {
		min-height: 300px;
		padding: var(--s-6) var(--s-4);
	}
	.next-copy {
		margin-top: var(--s-8);
	}
	.next-s {
		font-size: var(--t-16);
		line-height: var(--lh-16);
	}
}

/* ─── V3 FAQ: each answer leads with its verdict, a step darker than the rest ── */
.faq-list .a .a-v {
	color: var(--ink);
	font-weight: 500;
}

/* ─── V3 close: one sentence of terms, then the ask ───────────────────────── */
/* the four data facts fit on one line on a laptop */
.trust {
	max-width: 900px;
}
.close-sub {
	margin-top: var(--s-8);
}
.close-btn {
	margin-top: var(--s-10);
}

/* ─── V3 phone menu: the ask at the foot of the sheet ─────────────────────── */
.sheet-cta {
	padding: var(--s-2) 0 0;
}
.sheet-cta .btn {
	width: 100%;
}

/* ─── V3 menus: the pictures are back beside the lists (as on the first landing page).
   For your guests previews the one thing a guest does in the room: the offer card. ── */
.mega-offer {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.mega-offer > img {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 8px;
	object-fit: cover;
	outline: 1px solid rgba(0, 0, 0, 0.08);
}
.mega-offer-copy {
	display: grid;
	gap: 4px;
	flex: 1;
	min-width: 0;
}
.mega-offer-copy small {
	font-size: 12px;
	line-height: 1;
	color: var(--ink-3);
}
.mega-offer-copy b {
	font-family: var(--standard);
	font-size: 15px;
	line-height: 1;
	font-weight: 700;
	color: var(--ink);
}
.mega-go {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: linear-gradient(180deg, #ff8d58 0%, #f5692f 50%, #e8561e 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		0 6px 16px -6px rgba(255, 100, 45, 0.6);
	color: #fff;
}
.mega-go svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* V3 hero film: the play disc itself sits on the frame's exact centre (not the disc and
   its label together), and the label hangs under it. Half the disc: 48px, 38px on phones. */
.hero-media .film-play {
	translate: -50% -48px;
}
@media (max-width: 640px) {
	.hero-media .film-play {
		translate: -50% -38px;
	}
}

/* V3: the closing line is two sentences of different lengths now, so on phones it wraps
   (balanced) at the section size instead of shrinking to keep each on one line */
@media (max-width: 640px) {
	.close-title {
		/* one sentence over two lines; the second half wraps on a phone, balanced */
		font-size: min(40px, (100vw - 2 * var(--gutter)) / 8.4);
		line-height: 1.12;
		text-wrap: balance;
	}
	.close-sub {
		margin-top: var(--s-6);
		max-width: 20rem;
	}
}

/* Social proof: the 2021 course taught this system to 13,000+ sellers. Avatars, five stars and
   one line, under the hero's ask and again under the closing one. */
.proof {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	margin-top: var(--s-6);
}
.proof-avatars {
	display: flex;
}
.proof-avatars img {
	width: var(--s-8);
	height: var(--s-8);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--white);
}
.proof-avatars img + img {
	margin-inline-start: calc(-1 * var(--s-2));
}
.proof-text {
	text-align: start;
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-2);
}
.proof-text b {
	color: var(--ink);
	font-weight: 600;
}
.stars {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-bottom: var(--s-1);
}
.stars-note {
	font-size: var(--t-12);
	line-height: 1;
	font-weight: 500;
	color: var(--ink-3);
}
.close-proof .stars-note {
	color: rgba(255, 255, 255, 0.7);
}
.close-proof {
	margin-top: var(--s-6);
}
.close-proof .proof-text {
	color: rgba(255, 255, 255, 0.86);
}
.close-proof .proof-text b {
	color: var(--white);
}
.close-proof .proof-avatars img {
	box-shadow: 0 0 0 2px #0b3a8c;
}
@media (max-width: 640px) {
	.proof-avatars img {
		width: 28px;
		height: 28px;
	}
	.proof-x {
		display: none;
	}
}

/* Why teams stall: the problem as one centred statement between the film and the four steps */
.stall {
	padding-top: var(--section);
}
.stall-head {
	display: grid;
	justify-items: center;
	text-align: center;
}
.stall-head .display-2 {
	text-wrap: balance;
}
.stall-head .section-lede {
	max-width: 34rem;
	margin-top: var(--s-8);
	text-wrap: balance;
}

/* The two photo cards carry the eyebrow of the moment they show */
.pwall-sheet .eyebrow {
	margin-bottom: var(--s-4);
}
.pband-copy {
	display: grid;
	justify-items: center;
}
.pband-copy .eyebrow {
	margin-bottom: var(--s-5);
	text-shadow: 0 1px 12px rgba(2, 16, 32, 0.5);
}
.pband-s {
	margin-top: var(--s-5);
	max-width: 30rem;
	font-size: var(--t-18);
	line-height: var(--lh-18);
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 16px rgba(2, 16, 32, 0.5);
	text-wrap: balance;
}
@media (max-width: 640px) {
	.pband-s {
		font-size: var(--t-16);
		line-height: var(--lh-16);
	}
}

/* Copy pass 3: How it works takes eight columns for its headline (its lede is one short line). */
@media (min-width: 1241px) {
	.dup .section-head-split > .display-2 {
		grid-column: 1 / 9;
	}
	.dup .section-head-split > .section-lede {
		grid-column: 9 / -1;
	}
}

/* ─── V4 homepage ──────────────────────────────────────────────────────────────────────
   The homepage is the webinar page's parts, fewer of them: the four steps by name only
   (the dashed way back from V2 carries the loop), and a products row. */
.prods {
	padding-top: var(--section);
}
/* Products: two cards of one size. The image (a photo, or the events ticket) on top, then
   name, one line and, where it exists, the way in. The card that links lifts on hover. */
.prods-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
}
.prods-card {
	display: grid;
	grid-template-rows: auto 1fr;
	padding: var(--s-3);
	border-radius: var(--radius-lg);
	background: var(--surface);
	color: inherit;
	text-decoration: none;
	transition: background 0.2s var(--ease);
}
a.prods-card:hover {
	background: var(--surface-2);
}
a.prods-card:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}
.prods-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: calc(var(--radius-lg) - var(--s-3));
	background: #1a1a1a;
}
.prods-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	transition: scale 0.6s var(--ease);
}
a.prods-card:hover .prods-media > img {
	scale: 1.03;
}
.prods-media-ev .ev-stage {
	position: absolute;
	inset: 0;
	min-height: 0;
	border-radius: 0;
}
.prods-tag {
	position: absolute;
	top: var(--s-4);
	left: var(--s-4);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: 28px;
	padding: 0 var(--s-3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
	font-size: var(--t-12);
	line-height: 1;
	font-weight: 600;
}
.prods-copy {
	display: grid;
	align-content: start;
	gap: var(--s-2);
	padding: var(--s-6) var(--s-4) var(--s-4);
}
.prods-copy h3 {
	font-family: var(--display);
	font-size: var(--t-28);
	line-height: var(--lh-28);
	font-weight: 500;
	letter-spacing: -0.008em;
}
.prods-copy p {
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: var(--ink-2);
	text-wrap: pretty;
}
.prods-go {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-2);
	font-weight: 600;
	color: var(--blue);
}
.prods-go .btn-arrow {
	width: 14px;
	height: 14px;
	transition: translate 0.2s var(--ease);
}
a.prods-card:hover .prods-go .btn-arrow {
	translate: 3px 0;
}
@media (max-width: 900px) {
	.prods-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (prefers-reduced-motion: reduce) {
	.prods-media > img,
	.prods-go .btn-arrow {
		transition: none;
	}
}

/* The webinar card's glass sheet: tonight's screenings, as in the menu */
.prods-ui {
	--frame-r: 22px;
	--frame-pad: 6px;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: min(320px, 82%);
}
.prods-ui .ui-sheet {
	padding: var(--s-3);
}
.prods-ui .mega-road li {
	font-size: var(--t-14);
	line-height: var(--lh-14);
}

/* Phones: one big action. The way into the webinar page becomes a quiet link under it. */
@media (max-width: 640px) {
	.hero-ctas .btn-soft {
		height: auto;
		padding: var(--s-2) var(--s-4);
		background: none;
		box-shadow: none;
		font-size: var(--t-16);
		color: var(--ink-2);
		text-decoration: underline;
		text-decoration-color: var(--surface-2);
		text-decoration-thickness: 2px;
		text-underline-offset: 5px;
	}
	.hero-ctas .btn-soft::before,
	.hero-ctas .btn-soft::after {
		display: none;
	}
}

/* ─── V4 waitlist ──────────────────────────────────────────────────────────────────────
   One question per screen, the type of the site at a larger size, and nothing else on the
   page: the mark, how far along you are, and a way back. Screens stack in one grid cell
   and slide past each other (--dir: 1 forward, -1 back); under reduced motion they swap. */
.wl-page {
	--wl-err: #b42318; /* 6.1:1 on white */
	min-height: 100dvh;
}
.wl-bar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--s-16);
	padding: 0 var(--gutter);
	background: var(--white);
}
.wl-mark img {
	display: block;
	height: 26px;
	width: auto;
}
.wl-count {
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
.wl-progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: 21;
	height: 4px;
}
.wl-progress i {
	display: block;
	height: 100%;
	background: var(--blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--out);
}
.wl {
	display: grid;
	grid-template-rows: 1fr auto;
	justify-items: center;
	align-items: start;
	min-height: 100dvh;
	padding: clamp(112px, 20vh, 200px) var(--gutter) var(--s-6);
}
/* who is asking, at the foot of the questions: quiet, and always reachable */
.wl-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2) var(--s-6);
	margin-top: var(--s-16);
	font-size: var(--t-12);
	line-height: var(--lh-12);
	color: var(--ink-3);
}
.wl-foot a:hover {
	color: var(--ink);
}
.wl:focus {
	outline: none;
}
.wl-form {
	display: grid;
	width: min(100%, 640px);
}
.wl-step {
	grid-area: 1 / 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
/* the new screen waits for the old one to clear, so two questions never read as one */
.wl-step.is-in {
	animation: wl-in 0.55s var(--out) 0.16s both;
}
.wl-step.is-out {
	pointer-events: none;
	animation: wl-out 0.24s var(--ease) both;
}
@keyframes wl-in {
	from {
		opacity: 0;
		transform: translateY(calc(var(--dir, 1) * 28px));
	}
}
@keyframes wl-out {
	to {
		opacity: 0;
		transform: translateY(calc(var(--dir, 1) * -20px));
	}
}
.wl-eyebrow {
	margin-bottom: var(--s-4);
	font-family: var(--standard);
	font-size: var(--t-16);
	line-height: var(--lh-16);
	font-weight: 600;
	color: var(--blue);
}
.wl-q {
	display: block;
	width: 100%;
	padding: 0;
	font-family: var(--display);
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.12;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: balance;
}
.wl-q:focus {
	outline: none;
}
.wl-sub {
	margin-top: var(--s-3);
	font-size: var(--t-18);
	line-height: var(--lh-18);
	color: var(--ink-2);
	text-wrap: pretty;
}
.wl-input {
	display: block;
	width: 100%;
	height: var(--s-16);
	margin-top: var(--s-8);
	padding: 0 var(--s-5);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 22px; /* over 16px, so iOS does not zoom the page on focus */
	transition:
		background 0.2s var(--ease),
		box-shadow 0.2s var(--ease);
}
.wl-input::placeholder {
	color: var(--ink-3);
}
.wl-input:focus {
	outline: none;
	background: var(--white);
	box-shadow: inset 0 0 0 2px var(--blue);
}
.has-err .wl-input {
	box-shadow: inset 0 0 0 2px var(--wl-err);
}
.wl-phone {
	display: flex;
	gap: var(--s-2);
	margin-top: var(--s-8);
}
.wl-phone .wl-input {
	flex: 1;
	min-width: 0;
	margin-top: 0;
}
.wl-phone {
	position: relative;
}
.wl-cc {
	flex: none;
}
.wl-cc-btn {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	height: var(--s-16);
	padding: 0 var(--s-4);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--surface);
	font: inherit;
	font-size: 20px;
	color: var(--ink);
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s var(--ease);
}
.wl-cc-btn:hover,
.wl-cc-btn[aria-expanded='true'] {
	background: var(--surface-2);
}
.wl-cc-btn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--blue);
}
.wl-cc-chev {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: var(--ink-2);
	stroke-width: 1.6;
	transition: rotate 0.2s var(--ease);
}
.wl-cc-btn[aria-expanded='true'] .wl-cc-chev {
	rotate: 180deg;
}
/* the list opens under the whole phone row, as wide as it, and floats over what follows */
.wl-cc-pop {
	position: absolute;
	z-index: 30;
	top: calc(100% + var(--s-2));
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	padding: var(--s-2);
	border-radius: var(--radius-sm);
	background: var(--white);
	box-shadow:
		0 1px 2px rgba(17, 43, 43, 0.08),
		0 18px 48px -12px rgba(17, 43, 43, 0.28);
}
.wl-cc-pop[hidden] {
	display: none;
}
.wl-cc-search {
	height: 48px;
	padding: 0 var(--s-4);
	border: 0;
	border-radius: calc(var(--radius-sm) - 4px);
	background: var(--surface);
	font: inherit;
	font-size: 16px;
	color: var(--ink);
}
.wl-cc-search:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--blue);
}
.wl-cc-list {
	max-height: min(320px, 45dvh);
	margin: var(--s-2) 0 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}
.wl-cc-list [role='option'] {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 44px;
	padding: 0 var(--s-3);
	border-radius: calc(var(--radius-sm) - 6px);
	font-size: var(--t-16);
	color: var(--ink);
	cursor: pointer;
}
.wl-cc-list [role='option'].is-active {
	background: var(--surface);
}
.wl-cc-list [role='option'][aria-selected='true'] .wl-cc-name {
	font-weight: 600;
}
.wl-cc-flag {
	font-size: 20px;
	line-height: 1;
}
.wl-cc-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wl-cc-dial {
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
/* the likely countries come first; space, not a line, sets them apart */
.wl-cc-sep {
	height: var(--s-3);
}
.wl-cc-none {
	padding: var(--s-4) var(--s-3);
	font-size: var(--t-14);
	color: var(--ink-3);
}
.wl-err {
	margin-top: var(--s-2);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	font-weight: 500;
	color: var(--wl-err);
}
.wl-err:empty {
	display: none;
}
.wl-actions {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-6);
}
.wl-next.is-busy {
	pointer-events: none;
	filter: saturate(0.7);
}
.wl-hint {
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-3);
}
.wl-hint b {
	font-weight: 600;
	color: var(--ink-2);
}
@media (hover: none) {
	.wl-hint {
		display: none;
	}
}
.wl-skip,
.wl-back {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: var(--s-2) var(--s-3);
	border: 0;
	border-radius: 999px;
	background: none;
	font: inherit;
	font-weight: 500;
	color: var(--ink-2);
	cursor: pointer;
	transition: background 0.15s var(--ease);
}
.wl-skip:hover,
.wl-back:hover {
	background: var(--surface);
}
.wl-back[hidden] {
	display: none;
}
.wl-back {
	position: fixed;
	z-index: 20;
	top: calc(var(--s-16) + var(--s-2));
	left: calc(var(--gutter) - var(--s-3));
}
.wl-back svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.wl-consent {
	max-width: 34rem;
	margin-top: var(--s-8);
	font-size: 13px;
	line-height: 19px;
	color: var(--ink-3);
}
.wl-consent a {
	color: var(--ink-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wl-choices {
	display: grid;
	gap: var(--s-2);
	max-width: 460px;
	margin-top: var(--s-8);
}
.wl-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 58px;
	padding: var(--s-2) var(--s-4);
	border-radius: 14px;
	background: var(--surface);
	font-size: var(--t-18);
	line-height: var(--lh-18);
	cursor: pointer;
	transition:
		background 0.15s var(--ease),
		color 0.15s var(--ease),
		transform 0.25s var(--lift);
}
.wl-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.wl-choice kbd {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--white);
	font-family: var(--standard);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	transition:
		background 0.15s var(--ease),
		color 0.15s var(--ease);
}
.wl-choice:hover {
	background: var(--surface-2);
}
.wl-choice:active {
	transform: scale(0.98);
}
.wl-choice:has(input:checked) {
	background: var(--blue);
	color: var(--white);
}
.wl-choice:has(input:checked) kbd {
	background: rgba(2, 16, 32, 0.22); /* white on it stays above 6:1 */
	color: var(--white);
}
.wl-choice:has(input:focus-visible) {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}
.wl-done-mark {
	display: grid;
	place-items: center;
	width: var(--s-16);
	height: var(--s-16);
	margin-bottom: var(--s-6);
	border-radius: 50%;
	background: var(--blue);
}
.wl-done-mark svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: var(--white);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
}
.wl-done.is-in .wl-done-mark {
	animation: wl-pop 0.6s var(--lift) 0.1s both;
}
.wl-done.is-in .wl-done-mark svg {
	animation: wl-tick 0.45s var(--out) 0.35s forwards;
}
@keyframes wl-pop {
	from {
		transform: scale(0.6);
		opacity: 0;
	}
}
@keyframes wl-tick {
	to {
		stroke-dashoffset: 0;
	}
}
.wl-book {
	margin-top: var(--s-8);
}
.wl-book-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-4);
}
.wl-home {
	display: inline-block;
	margin-top: var(--s-8);
	color: var(--ink-2);
	text-decoration: underline;
	text-decoration-color: var(--surface-2);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.wl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.wl-noscript {
	max-width: 34rem;
	font-size: var(--t-18);
	line-height: var(--lh-18);
}
@media (max-width: 640px) {
	.wl-bar {
		height: 56px;
		padding: 0 var(--s-4);
	}
	.wl-back {
		top: 60px;
		left: var(--s-2);
	}
	.wl {
		padding: 112px var(--s-4) var(--s-6);
	}
	.wl-input,
	.wl-cc-btn {
		height: 58px;
	}
	.wl-cc-btn {
		padding: 0 var(--s-3);
		font-size: 18px;
	}
	.wl-input {
		font-size: 19px;
	}
	.wl-actions .btn-lg {
		flex: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wl-step.is-in,
	.wl-step.is-out,
	.wl-done.is-in .wl-done-mark {
		animation: none;
	}
	.wl-done-mark svg {
		stroke-dashoffset: 0;
	}
	.wl-done.is-in .wl-done-mark svg {
		animation: none;
	}
	.wl-progress i {
		transition: none;
	}
}

/* ─── The consent question (track.js; only when a pixel is configured) ─────────────────
   A card along the bottom for every visitor; the page stays readable and usable behind it.
   Heading, one sentence beside "Accept all" and "More choices" (which opens the detail and
   "Reject all" in place), and the privacy policy under them. */
.consent {
	position: fixed;
	z-index: 90;
	left: 50%;
	bottom: 0;
	width: min(680px, 100%);
	padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	animation: consent-rise 0.45s var(--out) 0.5s both;
}
.consent-card {
	padding: var(--s-5) var(--s-6) var(--s-4);
	border-radius: var(--radius);
	background: var(--white);
	box-shadow:
		0 0 0 1px rgba(17, 43, 43, 0.06),
		0 2px 4px rgba(17, 43, 43, 0.06),
		0 16px 40px -12px rgba(17, 43, 43, 0.28);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: var(--ink-2);
}
.consent-t {
	margin-bottom: var(--s-3);
	font-family: var(--standard);
	font-size: var(--t-18);
	line-height: var(--lh-18);
	font-weight: 600;
	color: var(--ink);
}
.consent-row {
	display: flex;
	align-items: center;
	gap: var(--s-6);
}
.consent-copy {
	flex: 1;
	min-width: 0;
	color: var(--ink);
}
.consent-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-2);
	flex: none;
}
.consent-card .btn {
	height: var(--s-10);
	padding-inline: var(--s-5);
	font-size: var(--t-14);
	white-space: nowrap;
}
.consent-detail {
	display: grid;
	justify-items: start;
	gap: var(--s-3);
	margin-top: var(--s-4);
	color: var(--ink-3);
}
.consent-detail[hidden] {
	display: none;
}
.consent-foot {
	margin-top: var(--s-4);
	text-align: center;
}
.consent-foot a {
	color: var(--ink);
	font-weight: 500;
}
.consent-foot a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@keyframes consent-rise {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(16px);
	}
}
@media (max-width: 640px) {
	.consent {
		padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom));
	}
	.consent-card {
		padding: var(--s-4) var(--s-4) var(--s-3);
	}
	.consent-t {
		margin-bottom: var(--s-2);
		font-size: var(--t-16);
		line-height: var(--lh-16);
	}
	.consent-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--s-3);
	}
	.consent-foot {
		margin-top: var(--s-3);
	}
}
@media (prefers-reduced-motion: reduce) {
	.consent {
		animation: none;
	}
}
.footer-consent {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.footer-consent:hover {
	color: var(--ink);
}

/* Wide screens: a photo panel beside the questions, inset like the site's photo panels,
   with the proof on a glass card. The questions centre in what is left. */
.wl-aside {
	display: none;
}
@media (min-width: 1100px) {
	.wl-page {
		--wl-aside: min(42vw, 640px);
	}
	.wl-aside {
		position: fixed;
		top: var(--inset);
		right: var(--inset);
		bottom: var(--inset);
		display: block;
		width: var(--wl-aside);
		overflow: hidden;
		border-radius: var(--radius-lg);
		background: var(--surface);
	}
	.wl-aside > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 30%;
	}
	.wl-bar,
	.wl-progress {
		right: calc(var(--wl-aside) + var(--inset));
	}
	.wl {
		padding-right: calc(var(--wl-aside) + var(--inset) + var(--gutter));
	}
	.wl-proof {
		--frame-r: 26px;
		--frame-pad: 6px;
		position: absolute;
		left: var(--s-6);
		right: var(--s-6);
		bottom: var(--s-6);
	}
	.wl-proof .ui-sheet {
		padding: var(--s-5);
	}
	.wl-proof .proof {
		justify-content: flex-start;
		margin-top: 0;
	}
	.wl-proof-line {
		margin-top: var(--s-4);
		font-size: var(--t-16);
		line-height: var(--lh-16);
		color: var(--ink-2);
		text-wrap: pretty;
	}
}

/* Narrow screens have no photo panel, so the first question carries the proof under it */
.wl-proof-m {
	justify-content: flex-start;
	margin-top: var(--s-10);
}
@media (min-width: 1100px) {
	.wl-proof-m {
		display: none;
	}
}

/* the ad's angle is on its way (angle.js): the hero waits a moment instead of flashing */
.angled .hero-title,
.angled .hero-lede {
	visibility: hidden;
}

/* ─── Fuo vs Zoom (webinars) ───────────────────────── */
/* One table on the page grey. Rows are a subgrid of the table, so every cell in a column
   shares one edge, and Fuo's column is a white sheet lifted behind its cells (.vs-hl).
   No lines between rows: the space separates them. On phones the label sits above its two
   cells and each Fuo cell carries its own sheet. */
.vs {
	padding-top: var(--section);
}
.vs-table {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
	grid-template-rows: repeat(11, auto);
	padding: var(--s-2);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.vs-hl {
	/* out of the flow, so the rows still fill rows 1–11, but sized by the grid area */
	position: absolute;
	inset: 0;
	grid-column: 3;
	grid-row: 1 / -1;
	z-index: -1;
	border-radius: calc(var(--radius-lg) - var(--s-2));
	background: var(--white);
	box-shadow:
		0 0 0 1px rgba(17, 43, 43, 0.04),
		0 1px 2px rgba(17, 43, 43, 0.06),
		0 16px 40px -16px rgba(17, 43, 43, 0.18);
}
.vs-row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: start;
}
.vs-row > * {
	padding: var(--s-4) var(--s-6);
}
.vs-k {
	font-size: var(--t-18);
	line-height: var(--lh-18);
	color: var(--ink);
}
.vs-o,
.vs-f {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	font-size: var(--t-16);
	line-height: var(--lh-18);
}
.vs-o {
	color: var(--ink-3);
}
.vs-f {
	color: var(--ink);
	font-weight: 500;
}
.vs-o .i,
.vs-f .i {
	margin-top: 6px;
	stroke-width: 2;
}
.vs-f .i {
	color: var(--blue);
}
.vs-head > * {
	padding-top: var(--s-6);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	letter-spacing: 0.02em;
	color: var(--ink-3);
}
.vs-head .vs-o {
	display: block;
}
.vs-head .vs-f {
	font-family: var(--display);
	font-size: var(--t-24);
	line-height: var(--lh-24);
	letter-spacing: 0;
	color: var(--ink);
}
.vs-foot {
	max-width: 40ch;
	margin-top: var(--s-10);
	font-family: var(--display);
	font-size: var(--t-28);
	line-height: var(--lh-28);
	color: var(--ink);
	text-wrap: balance;
}
/* Phones: the pattern phone apps use for plan comparisons (Chime, AllTrails, Speak). Each row
   is a title with Fuo's answer under it, then two narrow columns of icons only, Zoom's ✗ and
   Fuo's ✓, with Fuo's column the lifted band on the right. Zoom's words stay in the page for
   screen readers; on a phone the cross says it. */
.vs-sub,
.vs-who {
	display: none;
}
@media (max-width: 760px) {
	.vs-table {
		grid-template-columns: minmax(0, 1fr) 56px 64px;
		padding: var(--s-1);
	}
	.vs-hl {
		border-radius: calc(var(--radius-lg) - var(--s-1));
	}
	.vs-row {
		align-items: center;
	}
	.vs-row > * {
		padding: var(--s-3) var(--s-2);
	}
	.vs-k {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding-left: var(--s-4);
		font-size: var(--t-16);
		line-height: var(--lh-16);
		font-weight: 500;
	}
	.vs-sub {
		display: block;
		font-size: var(--t-14);
		line-height: var(--lh-14);
		font-weight: 400;
		color: var(--ink-3);
	}
	.vs-o,
	.vs-f {
		position: relative;
		justify-content: center;
	}
	/* the words, kept for screen readers */
	.vs-row:not(.vs-head) .vs-o > span,
	.vs-row:not(.vs-head) .vs-f > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.vs-who {
		display: inline;
	}
	.vs-o .i,
	.vs-f .i {
		margin: 0;
	}
	.vs-o .i {
		width: 22px;
		height: 22px;
		padding: 4px;
		box-sizing: border-box;
		border-radius: 50%;
		background: var(--surface-2);
		color: var(--ink-3);
		stroke-width: 2.2;
	}
	/* Fuo's tick: a filled disc, so the column reads as a wall of yeses at a glance */
	.vs-f .i {
		width: 22px;
		height: 22px;
		padding: 3px;
		box-sizing: border-box;
		border-radius: 50%;
		background: var(--blue);
		color: var(--white);
		stroke-width: 2.4;
	}
	.vs-head > * {
		padding-top: var(--s-4);
		padding-bottom: var(--s-1);
		text-align: center;
	}
	.vs-head .vs-o {
		font-size: var(--t-12);
		line-height: var(--lh-12);
	}
	.vs-head .vs-f {
		font-size: var(--t-18);
		line-height: var(--lh-18);
	}
	.vs-long {
		display: none;
	}
	.vs-foot {
		font-size: var(--t-24);
		line-height: var(--lh-24);
	}
}

/* ─── Follow-up kit (webinars): two groups of three, on the page itself ───────── */
/* No panel and no cards: a label on the left edge, three features across, each an icon,
   a title and two short lines. The two groups tell the story in order: the leads first,
   then the team. Phones: the label above, the features as a list with the icon beside. */
.kit {
	display: grid;
	gap: var(--s-16);
	margin-top: var(--s-20);
}
.kit-group {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
}
.kit-label {
	grid-column: 1 / 4;
	margin: 0;
	font-family: var(--display);
	font-size: var(--t-24);
	line-height: var(--lh-24);
	font-weight: 500;
	color: var(--ink);
}
.kit-list {
	grid-column: 4 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--s-10);
	margin: 0;
	padding: 0;
	list-style: none;
}
.kit-list li {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.kit-ic {
	width: 24px;
	height: 24px;
	margin-bottom: var(--s-3);
	color: var(--blue);
}
.kit-list h4 {
	margin: 0;
	font-size: var(--t-18);
	line-height: var(--lh-18);
	font-weight: 500;
	color: var(--ink);
}
.kit-list p {
	max-width: 34ch;
	margin: 0;
	font-size: var(--t-16);
	line-height: var(--lh-16);
	color: var(--ink-3);
	text-wrap: pretty;
}
@media (max-width: 1100px) {
	.kit-label {
		grid-column: 1 / -1;
		margin-bottom: var(--s-8);
	}
	.kit-list {
		grid-column: 1 / -1;
	}
}
@media (max-width: 640px) {
	.kit {
		gap: var(--s-12);
		margin-top: var(--s-16);
	}
	.kit-label {
		margin-bottom: var(--s-6);
		font-size: var(--t-20);
		line-height: var(--lh-20);
	}
	.kit-list {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-6);
	}
	.kit-list li {
		display: grid;
		grid-template-columns: 24px minmax(0, 1fr);
		column-gap: var(--s-4);
		row-gap: var(--s-1);
	}
	.kit-ic {
		grid-row: 1 / 3;
		margin: 0;
	}
	.kit-list h4 {
		font-size: var(--t-16);
		line-height: var(--lh-16);
	}
	.kit-list p {
		font-size: var(--t-14);
		line-height: var(--lh-14);
	}
}

/* The research under the prospects' headline: smaller and quieter than the lede, cited */
.guests-note {
	max-width: 34rem;
	margin-top: var(--s-6);
	font-size: var(--t-14);
	line-height: var(--lh-14);
	color: rgba(255, 255, 255, 0.58);
	text-wrap: pretty;
}
.guests-note a {
	color: #8cc3ec;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* ─── Phones: the waitlist button in reach ─────────────────────────── */
/* Slides up once the hero's button has scrolled away, and goes again when the closing call
   to action is on screen, so two never compete. */
.mcta {
	display: none;
}
@media (max-width: 760px) {
	.mcta {
		position: fixed;
		z-index: 40;
		inset-inline: 0;
		/* sits on top of the cookie bar while that is still open (track.js sets its height) */
		bottom: var(--consent-h, 0px);
		display: block;
		padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
		transform: translateY(110%);
		visibility: hidden;
		transition:
			transform 0.32s cubic-bezier(0.2, 0, 0, 1),
			visibility 0s linear 0.32s;
	}
	.mcta.is-on {
		transform: none;
		visibility: visible;
		transition:
			transform 0.32s cubic-bezier(0.2, 0, 0, 1),
			visibility 0s;
	}
	.mcta-btn {
		width: 100%;
		justify-content: center;
		box-shadow:
			0 1px 2px rgba(17, 43, 43, 0.16),
			0 10px 28px -8px rgba(17, 43, 43, 0.4);
	}
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
	.mcta,
	.mcta.is-on {
		transition: none;
	}
}

/* ─── FAQ, one column (webinars): three questions, then the rest on request ─────── */
/* One centred column so three cards sit as a set, not two and one. The other questions
   wait behind "Show 5 more questions", a quiet pill with the same + disc as the cards;
   without JS they are all simply there. */
.faq-list.faq-one {
	grid-column: 3 / 11;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	row-gap: var(--s-6);
}
.faq-one > .faq-col {
	width: 100%;
}
.faq-more[hidden] {
	display: none;
}
.faq-show {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: var(--standard);
	font-size: var(--t-16);
	line-height: var(--lh-16);
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.2s var(--ease);
}
.faq-show[hidden] {
	display: none;
}
.faq-show:hover {
	background: var(--surface);
}
.faq-show:hover .tog {
	transform: rotate(90deg);
}
.faq-show:focus-visible {
	outline-offset: 2px;
}
@media (max-width: 1100px) {
	.faq-list.faq-one {
		grid-column: 1 / -1;
	}
}

/* ─── Phones: the hero's words are there at once ──────────────────────────────────────
   On a phone the headline, the lede and the button used to wait for the fonts and then
   fade in, so for a second or more after the page had painted a visitor from an ad looked
   at an empty top of the page (and Chrome, which does not count what fades in from
   nothing, timed the cookie card as the page's main content). Here they are simply present
   from the first paint. The film frame keeps its entrance; wider screens keep all of it. */
@media (max-width: 640px) {
	.hero-title .line > span,
	.hero .intro:not(.hero-media) {
		animation: none;
	}
}

/* ─── Waitlist on a phone: the country list takes the screen ──────────────────────────
   Under the field it opened into the half of the screen the keyboard covers. As a sheet it
   is a title, a way out, the search, and the list: the likely countries first, one tap to
   choose. waitlist.js moves it to the body while it is open and keeps --cc-top / --cc-h to
   what can be seen, so a keyboard takes room from the list, never the list from view. */
.wl-cc-head {
	display: none;
}
@media (max-width: 640px) {
	.wl-cc-pop.is-sheet {
		position: fixed;
		z-index: 100; /* over the cookie card */
		top: var(--cc-top, 0px);
		left: 0;
		right: 0;
		height: var(--cc-h, 100dvh);
		padding: var(--s-2) var(--s-4) 0;
		border-radius: 0;
		box-shadow: none;
	}
	.is-sheet .wl-cc-head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		min-height: 52px;
	}
	.wl-cc-title {
		font-family: var(--standard);
		font-size: var(--t-18);
		line-height: var(--lh-18, 1.3);
		font-weight: 600;
		color: var(--ink);
	}
	.wl-cc-close {
		min-height: 44px;
		margin-inline-end: calc(-1 * var(--s-3));
		padding: 0 var(--s-3);
		border: 0;
		border-radius: 999px;
		background: transparent;
		font: inherit;
		font-family: var(--standard);
		font-size: var(--t-16);
		font-weight: 600;
		color: var(--blue);
		cursor: pointer;
	}
	.wl-cc-close:focus-visible {
		outline: none;
		box-shadow: inset 0 0 0 2px var(--blue);
	}
	.is-sheet .wl-cc-search {
		flex: none;
		height: 52px;
	}
	.is-sheet .wl-cc-list {
		flex: 1;
		min-height: 0;
		max-height: none;
		margin-top: var(--s-3);
		padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
	}
	.is-sheet .wl-cc-list [role='option'] {
		min-height: 52px;
		padding: 0 var(--s-2);
	}
	.is-sheet .wl-cc-flag {
		font-size: 24px;
	}
	/* the page behind stays where it is */
	.wl-cc-open,
	.wl-cc-open body {
		overflow: hidden;
	}
}