/* Picto.Video rival comparison pages: one system, five accents. Light by default, dark via media query or data-theme. */
:root {
	color-scheme: light;
	--bg: #f4f1f8;
	--bg-2: #ebe6f2;
	--elev: #ffffff;
	--surface: #e4ddef;
	--text: #130c1f;
	--muted: #564c6a;
	--faint: #877d99;
	--line: rgba(19, 12, 31, .09);
	--line-hi: rgba(19, 12, 31, .17);
	--theirs: #e9e5ef;
	--theirs-ink: #675f7b;
	--theirs-line: rgba(19, 12, 31, .14);
	--shadow: 0 30px 70px -38px rgba(48, 22, 90, .5), 0 0 0 1px var(--line);
	--glow-a: 14%;
	--ink-mix: #1d1030;
	--ink-pct: 52%;
	--grain: .028;

	--violet: #8b31ff;
	--violet-hot: #c04dff;
	--gold: #f5b83d;
	--cyan: #3dd6f5;
	--coral: #ff6b5e;
	--rose: #f07ac2;
	--mint: #3fdcaa;
	--lilac: #b89bff;

	--font-display: 'Unbounded', 'Arial Black', 'Helvetica Neue', sans-serif;
	--font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

	--r-xl: 32px;
	--r-lg: 24px;
	--r-md: 16px;
	--r-sm: 10px;
	--gutter: clamp(16px, 4vw, 48px);
	--max: 1280px;
	--section: clamp(80px, 10vw, 150px);
	--ease: cubic-bezier(.2, .7, .1, 1);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #0a0710;
		--bg-2: #0f0a17;
		--elev: #120c1c;
		--surface: #191026;
		--text: #f4effa;
		--muted: #b3a8cc;
		--faint: #7d7299;
		--line: rgba(244, 239, 250, .1);
		--line-hi: rgba(244, 239, 250, .2);
		--theirs: #110c1a;
		--theirs-ink: #968cad;
		--theirs-line: rgba(244, 239, 250, .12);
		--shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--line);
		--glow-a: 22%;
		--ink-mix: #ffffff;
		--ink-pct: 88%;
		--grain: .045;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0a0710;
	--bg-2: #0f0a17;
	--elev: #120c1c;
	--surface: #191026;
	--text: #f4effa;
	--muted: #b3a8cc;
	--faint: #7d7299;
	--line: rgba(244, 239, 250, .1);
	--line-hi: rgba(244, 239, 250, .2);
	--theirs: #110c1a;
	--theirs-ink: #968cad;
	--theirs-line: rgba(244, 239, 250, .12);
	--shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--line);
	--glow-a: 22%;
	--ink-mix: #ffffff;
	--ink-pct: 88%;
	--grain: .045;
}

/* page accents: the one colour each rival page owns */
body { --accent: var(--violet-hot); }
body.r-canva { --accent: var(--gold); }
body.r-firefly { --accent: var(--mint); }
body.r-openart { --accent: var(--rose); }
body.r-higgsfield { --accent: var(--cyan); }
body.r-pollo { --accent: var(--coral); }
body { --accent-ink: color-mix(in oklab, var(--accent) var(--ink-pct), var(--ink-mix)); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.55;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
body::after {
	content: "";
	position: fixed; inset: 0;
	pointer-events: none;
	z-index: 100;
	opacity: var(--grain);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.media { position: relative; overflow: hidden; background: var(--surface); }
.media video, .media img { width: 100%; height: 100%; object-fit: cover; }

/* cinema = hero and final CTA; dark in both themes so the clips glow */
.cinema {
	--text: #f4effa; --muted: #c9bfdc; --line: rgba(244, 239, 250, .12);
	--surface: #191026;
	--accent-ink: color-mix(in oklab, var(--accent) 88%, #fff);
	color: var(--text);
	background: #050309;
}

/* ============ BUTTONS ============ */
.pill {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
	height: 58px; padding: 0 10px 0 28px;
	border-radius: 999px;
	font-family: var(--font-body); font-weight: 600; font-size: 1.08rem;
	transition: transform .25s var(--ease), box-shadow .25s;
}
.pill .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: transform .35s var(--ease); }
.pill .ico svg { width: 18px; height: 18px; }
.pill:hover .ico { transform: translateX(3px); }
.pill-white {
	background: #fff; color: #0b0712;
	box-shadow: 0 0 0 1px rgba(19, 12, 31, .08), 0 14px 44px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.pill-white .ico { background: #0b0712; color: var(--accent); }
.pill-white:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(19, 12, 31, .08), 0 20px 56px -10px color-mix(in srgb, var(--accent) 85%, transparent); }
.pill-sm { height: 42px; padding: 0 8px 0 18px; font-size: .92rem; gap: 10px; }
.pill-sm .ico { width: 28px; height: 28px; }
.pill-sm .ico svg { width: 14px; height: 14px; }
.nosub {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--text);
}
.nosub i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #0b0712; }
.nosub i svg { width: 11px; height: 11px; }

/* ============ HEADER ============ */
.topbar {
	position: absolute; top: 0; left: 0; right: 0; z-index: 20;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 22px var(--gutter);
	color: #f4effa;
}
.topbar.on-page { position: relative; color: var(--text); }
.wordmark { font-family: var(--font-display); font-weight: 900; font-size: 1.36rem; letter-spacing: -.03em; }
.wordmark span { background: linear-gradient(90deg, var(--violet-hot), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar nav { display: flex; align-items: center; gap: 4px; }
.nav-link { padding: 10px 15px; border-radius: 999px; font-size: .94rem; font-weight: 500; opacity: .8; transition: opacity .2s, background .2s; }
.nav-link:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.topbar .pill { margin-left: 8px; }

/* ============ HERO ============ */
.hero {
	position: relative;
	height: clamp(700px, 100svh, 920px);
	overflow: hidden;
	isolation: isolate;
	border-radius: 0 0 clamp(26px, 4vw, 52px) clamp(26px, 4vw, 52px);
}
.wall {
	position: absolute; inset: -40px -10px 0;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
	z-index: -2;
}
.wall-col {
	display: flex; flex-direction: column; gap: 12px;
	animation: drift var(--dur, 46s) ease-in-out infinite alternate;
	animation-delay: var(--delay, 0s);
	will-change: transform;
}
.wall-col:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(var(--travel, -26%)); } }
.wall .tile { border-radius: var(--r-md); aspect-ratio: var(--ar); flex: none; }
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(ellipse 60% 54% at 50% 50%, rgba(5, 3, 9, .9) 0%, rgba(5, 3, 9, .74) 52%, rgba(5, 3, 9, .38) 100%),
		linear-gradient(180deg, rgba(5, 3, 9, .85) 0%, rgba(5, 3, 9, 0) 18%, rgba(5, 3, 9, 0) 70%, rgba(5, 3, 9, .9) 100%);
}
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(860px 420px at 50% 64%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
	mix-blend-mode: screen;
}
.hero-copy {
	position: relative; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center;
	padding: 96px var(--gutter) 56px;
}
.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 7px 15px 7px 10px; border-radius: 999px;
	background: rgba(18, 12, 28, .6);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
	font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(244, 239, 250, .85);
	margin-bottom: clamp(20px, 2.6vw, 30px);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
h1 {
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(2.7rem, 7.4vw, 7.4rem);
	line-height: .92; letter-spacing: -.055em;
	max-width: 13ch;
	text-wrap: balance;
	text-shadow: 0 6px 60px rgba(5, 3, 9, .7);
}
.hl {
	display: inline-block; padding-right: .04em;
	color: transparent;
	background: linear-gradient(100deg, #fff 0%, var(--accent) 34%, color-mix(in oklab, var(--accent) 55%, var(--violet-hot)) 66%, #fff 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text; background-clip: text;
	animation: sheen 5.5s ease-in-out infinite;
	filter: drop-shadow(0 0 38px color-mix(in srgb, var(--accent) 45%, transparent));
}
@keyframes sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.hero-sub {
	margin-top: clamp(22px, 2.6vw, 32px);
	max-width: 40ch;
	font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.5;
	color: rgba(244, 239, 250, .84);
	text-wrap: balance;
}
.hero-ctas { margin-top: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero .nosub { color: rgba(244, 239, 250, .9); }

.rise { animation: rise 1s var(--ease) both; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .2s; } .rise.d3 { animation-delay: .34s; } .rise.d4 { animation-delay: .48s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ============ RAIL ============ */
.rail-section { padding: clamp(28px, 4vw, 48px) 0 0; }
.rail {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rail-track {
	display: flex; gap: 14px; width: max-content; padding: 6px var(--gutter);
	animation: rail 70s ease-in-out infinite alternate;
}
.rail:hover .rail-track { animation-play-state: paused; }
@keyframes rail { to { transform: translateX(calc(-100% + 100vw)); } }
.rail-item {
	position: relative;
	height: clamp(230px, 24vw, 340px);
	aspect-ratio: var(--ar);
	border-radius: var(--r-md);
	box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .6);
}
.rail-item::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: linear-gradient(180deg, transparent 62%, rgba(5, 3, 9, .66));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.tag {
	position: absolute; left: 12px; bottom: 12px; z-index: 1;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 5px 11px 5px 9px; border-radius: 999px;
	background: rgba(5, 3, 9, .55);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: #fff;
}
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--accent)); }

/* ============ SECTION HEADS ============ */
.section { padding: var(--section) 0; }
.kicker {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent-ink);
	margin-bottom: 18px;
}
.kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
h2 {
	font-family: var(--font-display); font-weight: 700;
	font-size: clamp(2.1rem, 4.8vw, 4.4rem);
	line-height: .98; letter-spacing: -.045em;
	text-wrap: balance;
}
.head { margin-bottom: clamp(36px, 5vw, 64px); max-width: 18ch; }
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; margin-bottom: clamp(32px, 4.4vw, 56px); }
.stamp {
	font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--faint);
	padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-hi);
}

/* ============ FLOW: their way vs ours ============ */
.theirs {
	position: relative;
	display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 44px);
	align-items: center;
	padding: clamp(20px, 2.6vw, 34px);
	border-radius: var(--r-xl);
	background: var(--theirs);
	box-shadow: inset 0 0 0 1px var(--theirs-line);
	overflow: hidden;
}
.theirs-label {
	font-family: var(--font-mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--theirs-ink); margin-bottom: 14px;
}
.sig { position: relative; }
.sig-big {
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(3rem, 5.4vw, 4.8rem); line-height: .9; letter-spacing: -.06em;
	color: var(--accent-ink);
}
.sig-big.long { font-size: clamp(2.3rem, 3.8vw, 3.4rem); }
.sig-small { margin-top: 10px; color: var(--theirs-ink); font-size: .98rem; max-width: 24ch; }
.sig-vis { margin-top: 18px; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px; }
.chip {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 15px 9px 10px;
	border-radius: 999px;
	background: var(--bg);
	box-shadow: inset 0 0 0 1px var(--theirs-line);
	color: var(--theirs-ink);
	font-size: .94rem; font-weight: 500; line-height: 1.25;
}
.chip svg { width: 18px; height: 18px; opacity: .8; }
.chip.cost { color: var(--text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.chip.cost svg { color: var(--accent-ink); opacity: 1; }
.chips .sep { color: var(--theirs-ink); opacity: .5; display: inline-grid; }
.chips .sep svg { width: 14px; height: 14px; }

.ours-label {
	display: flex; align-items: center; gap: 14px;
	margin: clamp(44px, 6vw, 80px) 0 clamp(20px, 2.6vw, 30px);
	font-family: var(--font-mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent-ink);
}
.ours-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent); }
.steps {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 28px);
	counter-reset: step;
}
.step { position: relative; display: flex; flex-direction: column; gap: 18px; }
.step-head { display: flex; align-items: baseline; gap: 14px; }
.step-n {
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: .8; letter-spacing: -.06em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--accent-ink);
}
.step h3 {
	font-family: var(--font-display); font-weight: 700;
	font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.05; letter-spacing: -.035em;
}
.frame {
	position: relative;
	aspect-ratio: var(--ar);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--surface);
	box-shadow: var(--shadow);
}
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame.upload { box-shadow: none; outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 8px; margin: 10px; }
.badge {
	position: absolute; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 13px 7px 8px; border-radius: 999px;
	background: rgba(5, 3, 9, .62);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
	color: #fff;
}
.badge i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #0b0712; }
.badge i svg { width: 13px; height: 13px; }
.badge.tl { left: 12px; top: 12px; }
.badge.bl { left: 12px; bottom: 12px; }
.badge.live i { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.frame.dim img { filter: saturate(.85) brightness(.82); }
.say {
	position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
	padding: 14px 16px 15px;
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .94);
	color: #130c1f;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
	font-family: var(--font-mono); font-size: .9rem; line-height: 1.45;
}
.say .k {
	display: inline-block; margin-bottom: 6px;
	font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
	color: color-mix(in oklab, var(--accent) 50%, #1d1030);
}
.say .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: color-mix(in oklab, var(--accent) 60%, #1d1030); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.frame.out { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 34px 80px -28px color-mix(in srgb, var(--accent) 60%, transparent); }
.arrow {
	position: absolute; top: 50%; right: calc(-1 * clamp(14px, 2vw, 28px) / 2); z-index: 3;
	translate: 50% 0;
	display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--text); color: var(--bg);
	box-shadow: 0 0 0 6px var(--bg);
}
.arrow svg { width: 18px; height: 18px; }

/* signature visuals */
.meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 240px; }
.meter span { aspect-ratio: 1; border-radius: 4px; background: var(--accent); opacity: .85; animation: drain 6s var(--ease) infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes drain { 0%, 30% { opacity: .9; transform: none; } 60%, 100% { opacity: .14; transform: scale(.7); } }
.dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 220px; }
.dots span { aspect-ratio: 1; border-radius: 3px; background: var(--theirs-ink); opacity: .28; }
.dots span:nth-child(7n+3) { background: var(--accent); opacity: .95; animation: pick 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
@keyframes pick { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.lock { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.lock i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #0b0712; }
.lock i svg { width: 14px; height: 14px; }
.slider { position: relative; max-width: 240px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent)); }
.slider::after { content: ""; position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--elev); box-shadow: 0 0 0 3px var(--accent), 0 6px 14px rgba(0, 0, 0, .3); animation: slide 4.5s ease-in-out infinite alternate; }
@keyframes slide { 0% { left: 4%; } 100% { left: 96%; } }
.slider-scale { display: flex; justify-content: space-between; max-width: 240px; margin-top: 10px; font-family: var(--font-mono); font-size: .72rem; color: var(--theirs-ink); }
.month { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 220px; }
.month span { aspect-ratio: 1; border-radius: 3px; background: var(--accent); animation: lapse 7s linear infinite; animation-delay: calc(var(--i) * .1s); }
@keyframes lapse { 0%, 40% { opacity: .9; } 70%, 100% { opacity: .1; } }

/* ============ ROWS ============ */
.rows { border-top: 1px solid var(--line-hi); }
.rows-head, .row {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 12px clamp(18px, 3vw, 44px);
	align-items: center;
}
.rows-head {
	padding: 16px 0;
	font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--faint);
	border-bottom: 1px solid var(--line-hi);
}
.rows-head .us { color: var(--accent-ink); }
.row { padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line-hi); }
.row .q { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.18rem, 1.9vw, 1.6rem); line-height: 1.1; letter-spacing: -.035em; }
.row .them { color: var(--theirs-ink); font-size: 1rem; display: flex; gap: 10px; align-items: flex-start; }
.row .them::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .55em; border-radius: 50%; background: var(--theirs-ink); opacity: .45; }
.row .us {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 16px 18px;
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--accent) var(--glow-a), var(--elev));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
	font-weight: 600; font-size: 1.06rem; line-height: 1.4;
}
.row .us i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #0b0712; margin-top: -1px; }
.row .us i svg { width: 13px; height: 13px; }
.row .lbl { display: none; }

/* ============ BENTO ============ */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 14px; }
.cell {
	position: relative;
	display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
	padding: clamp(22px, 2.4vw, 34px);
	border-radius: var(--r-xl);
	background: var(--elev);
	box-shadow: inset 0 0 0 1px var(--line);
	overflow: hidden; isolation: isolate;
}
.cell .q { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.cell .q .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); }
.cell .q .ic svg { width: 18px; height: 18px; }
.cell .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.2vw, 3rem); line-height: .95; letter-spacing: -.05em; }
.cell .a { color: var(--muted); max-width: 34ch; font-size: 1.02rem; margin-top: 14px; }
.cell::after {
	content: ""; position: absolute; z-index: -1;
	width: 320px; height: 320px; right: -120px; top: -140px; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) var(--glow-a), transparent), transparent 70%);
}
.cell-lg { grid-column: span 7; grid-row: span 2; min-height: 540px; }
.cell-lg .big { font-size: clamp(2.8rem, 4.8vw, 4.8rem); max-width: 8ch; }
.cell-lg .a { max-width: 24ch; }
.cell-lg .bg { position: absolute; top: 0; right: 0; bottom: 0; left: 42%; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%); }
.cell-lg .bg video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); }
.cell-lg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 420px at 0% 100%, color-mix(in srgb, var(--accent) var(--glow-a), transparent), transparent 70%); }
.cell-sm { grid-column: span 5; }
.cell-hf { grid-column: span 6; }
.need {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 12px 18px 12px 12px; border-radius: 999px;
	background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-hi);
	font-family: var(--font-mono); font-size: clamp(.86rem, 1.4vw, 1.02rem); color: var(--text);
}
.need i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #0b0712; }
.need i svg { width: 15px; height: 15px; }
.need b { color: var(--accent-ink); font-weight: 600; }
.cell-lg .need { font-size: clamp(1rem, 1.8vw, 1.3rem); }

/* ============ FAQ ============ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 110px); align-items: start; }
.faq-side { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 36px; }
.faq-clip { width: min(100%, 360px); aspect-ratio: var(--ar); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.faq-list { border-top: 1px solid var(--line-hi); }
.faq-list details { border-bottom: 1px solid var(--line-hi); }
.faq-list summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 26px 0;
	font-size: clamp(1.12rem, 1.6vw, 1.36rem); font-weight: 500; letter-spacing: -.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-hi); transition: background .3s, box-shadow .3s; }
.pm svg { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; }
.pm .v { transition: transform .4s var(--ease); transform-origin: center; }
.faq-list summary:hover .pm { box-shadow: inset 0 0 0 1px var(--accent); }
.faq-list details[open] .pm { background: var(--text); color: var(--bg); box-shadow: none; }
.faq-list details[open] .pm .v { transform: scaleY(0); }
.answer { padding: 0 64px 28px 0; color: var(--muted); font-size: 1.06rem; max-width: 64ch; }
.faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }

/* ============ FINAL ============ */
.final {
	position: relative;
	min-height: clamp(560px, 64vw, 800px);
	margin: 0 clamp(0px, 1.4vw, 18px);
	display: grid; place-items: center;
	overflow: hidden; isolation: isolate;
	border-radius: clamp(26px, 4vw, 52px);
	text-align: center;
}
.final-wall {
	position: absolute; inset: -8%; z-index: -2;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
	align-content: center;
	transform: rotate(-5deg) scale(1.06);
}
.final-wall .tile { aspect-ratio: var(--ar); border-radius: var(--r-md); align-self: center; }
.final-wall .tile:nth-child(odd) { translate: 0 -10%; }
.final::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(ellipse 62% 54% at 50% 50%, rgba(5, 3, 9, .9), rgba(5, 3, 9, .7) 60%, rgba(5, 3, 9, .42));
}
.final::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(700px 360px at 50% 60%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
	mix-blend-mode: screen;
}
.final-copy { padding: 64px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 3.4vw, 40px); }
.final h2 { font-size: clamp(2.3rem, 6vw, 6rem); max-width: 14ch; font-weight: 800; letter-spacing: -.055em; line-height: .94; }
.final .nosub { color: rgba(244, 239, 250, .9); margin-top: -10px; }

/* ============ FOOTER ============ */
footer { padding: clamp(64px, 8vw, 110px) 0 0; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.foot-about p { color: var(--muted); margin-top: 16px; max-width: 32ch; font-size: .98rem; }
.foot-col h3 { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.foot-col a { display: block; padding: 4px 0; font-size: .94rem; color: var(--muted); transition: color .2s; }
.foot-col a:hover, .foot-col a[aria-current="page"] { color: var(--text); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 60px; padding: 24px 0; border-top: 1px solid var(--line); font-size: .86rem; color: var(--faint); }
.giant {
	display: block;
	font-family: var(--font-display); font-weight: 900;
	font-size: 14.2vw; line-height: 1.3; letter-spacing: -.07em; padding-right: .07em;
	text-align: center; white-space: nowrap;
	color: transparent;
	background: linear-gradient(180deg, color-mix(in srgb, var(--text) 18%, transparent) 12%, color-mix(in srgb, var(--text) 1.5%, transparent) 96%);
	-webkit-background-clip: text; background-clip: text;
	user-select: none;
}
.giant span { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, transparent) 12%, color-mix(in srgb, var(--accent) 3%, transparent) 96%); -webkit-background-clip: text; background-clip: text; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
	.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.theirs { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wall-col:nth-child(n+5) { display: none; }
	.steps { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 56px; }
	.arrow { top: auto; bottom: -28px; right: 50%; translate: 50% 50%; rotate: 90deg; }
	.rows-head { display: none; }
	.row { grid-template-columns: 1fr; gap: 12px; }
	.row .lbl { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
	.row .them { order: 3; }
	.row .them::before { display: none; }
	.row .them > div, .row .us > div { min-width: 0; }
	.bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cell-lg { grid-column: span 6; grid-row: span 1; min-height: 460px; }
	.cell-sm, .cell-hf { grid-column: span 3; }
	.faq-grid { grid-template-columns: 1fr; }
	.faq-side { position: static; }
	.faq-clip { display: none; }
	.final-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.final-wall .tile:nth-child(n+7) { display: none; }
	.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot-about { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.topbar { padding: 16px var(--gutter); }
	.topbar .pill, .nav-link.hide-sm { display: none; }
	.nav-link { padding: 8px 10px; font-size: .88rem; }
	.wordmark { font-size: 1.16rem; }
	.hero { height: auto; min-height: 740px; }
	.wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; inset: -30px -8px 0; }
	.wall-col { gap: 8px; --travel: -12%; }
	.wall-col:nth-child(n+4) { display: none; }
	.wall .tile { border-radius: var(--r-sm); }
	.hero-copy { padding: 116px var(--gutter) 64px; justify-content: flex-start; }
	h1 { font-size: clamp(2.5rem, 11.6vw, 4rem); }
	.eyebrow { font-size: .66rem; }
	.pill { height: 54px; font-size: 1.02rem; }
	.hero-ctas { width: 100%; max-width: 340px; }
	.hero-ctas .pill { width: 100%; }
	.rail-item { height: 220px; }
	.theirs { padding: 18px; border-radius: var(--r-lg); }
	.chips { gap: 8px 4px; }
	.chip { font-size: .88rem; padding: 8px 13px 8px 9px; }
	.bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
	.cell-lg, .cell-sm, .cell-hf { grid-column: auto; }
	.cell { border-radius: var(--r-lg); }
	.cell-lg { min-height: 500px; }
	.cell-lg .bg { left: 0; top: 0; bottom: 34%; -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 22%, #000 60%, transparent); mask-image: linear-gradient(180deg, transparent 2%, #000 22%, #000 60%, transparent); }
	.cell-lg .big { max-width: none; }
	.faq-list summary { padding: 22px 0; }
	.pm { width: 34px; height: 34px; }
	.answer { padding-right: 0; }
	.final { margin: 0; border-radius: var(--r-lg); }
	.final h2 { font-size: clamp(2.1rem, 10vw, 3.3rem); }
	.foot-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
	.rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ============ LATE OVERRIDES ============ */
@supports (color: oklch(from red l c h)) {
	:root { --ink-l: .5; }
	@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-l: .84; } }
	:root[data-theme="dark"] { --ink-l: .84; }
	body { --accent-ink: oklch(from var(--accent) var(--ink-l) calc(c * 1.05) h); }
	.cinema { --accent-ink: oklch(from var(--accent) .84 c h); }
}
.head { max-width: none; }
.head h2 { max-width: 15ch; }
.step-head { min-height: clamp(3.2rem, 4.6vw, 4.2rem); align-items: flex-end; }
.step h3 { font-size: clamp(1.1rem, 1.6vw, 1.42rem); }
.row .us {
	background: var(--accent);
	color: #0b0712;
	box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--accent) 90%, transparent);
}
.row .us i { background: #0b0712; color: var(--accent); }
.row .us .lbl { color: rgba(11, 7, 18, .6); }
.cell-lg .bg { left: 48%; }
@media (max-width: 640px) {
	.cell-lg .bg { top: 74px; bottom: 30%; left: 0; }
	.step-head { min-height: 0; }
}

.cell-lg { justify-content: space-between; }
.cell-lg .big { max-width: none; font-size: clamp(2.6rem, 4.4vw, 4.4rem); }
.cell-lg .a { max-width: 36ch; }
.cell-lg .bg {
	top: 0; right: 0; bottom: 26%; left: 30%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 32%), linear-gradient(180deg, #000 55%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 32%), linear-gradient(180deg, #000 55%, transparent);
	mask-composite: intersect;
}
@media (max-width: 640px) {
	h1 { font-size: clamp(2.3rem, 10.2vw, 3.6rem); }
	.cell-lg .bg { top: 74px; bottom: 30%; left: 0; }
}
.cell-lg .bg { top: 76px; }
.month span:nth-child(n+19) { opacity: .18; animation: none; }