:root {
	color-scheme: dark;
	--bg: #101310;
	--panel: #1b211a;
	--ink: #f1f1e7;
	--muted: #a4ad9f;
	--lime: #c9ef91;
	--line: #30392c;
	font:
		16px/1.55 system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	scroll-behavior: smooth;
}
* {
	box-sizing: border-box;
}
.feature-strip span {
	display: flex;
	align-items: center;
	gap: 10px;
}
.feature-strip svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--lime);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
}
a {
	color: inherit;
	text-underline-offset: 4px;
}
button,
input,
select {
	font: inherit;
}
img {
	max-width: 100%;
}
.wrap {
	width: min(1200px, calc(100% - 96px));
	margin-inline: auto;
}
.skip {
	position: absolute;
	top: -100px;
	left: 20px;
	background: var(--lime);
	color: var(--bg);
	padding: 14px;
	z-index: 3;
}
.skip:focus {
	top: 10px;
}
.masthead {
	display: flex;
	align-items: center;
	gap: 34px;
	padding-block: 26px;
	border-bottom: 1px solid var(--line);
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font:
		800 28px/1 'Trebuchet MS',
		system-ui,
		sans-serif;
	letter-spacing: -1.4px;
	text-decoration: none;
	white-space: nowrap;
}
.brand img {
	flex: none;
}
.brand-tv {
	display: inline-block;
	margin-left: 8px;
	padding: 5px 6px;
	border-radius: 6px;
	font:
		800 11px/1 system-ui,
		sans-serif;
	letter-spacing: 0.5px;
	background: var(--lime);
	color: var(--bg);
	vertical-align: middle;
}
nav {
	display: flex;
	gap: 28px;
	margin-left: auto;
	font-size: 14px;
}
nav a {
	color: var(--muted);
	text-decoration: none;
}
nav a:hover {
	color: var(--ink);
}
.button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 22px;
	padding: 15px 23px;
	background: var(--lime);
	border: 1px solid var(--lime);
	border-radius: 10px;
	color: #17210f;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}
.button:hover {
	background: #dcffad;
}
.button.small {
	padding: 11px 17px;
	font-size: 13px;
	gap: 15px;
}
.button.secondary {
	background: transparent;
	border-color: #657456;
	color: var(--ink);
}
.button.secondary:hover {
	background: #293321;
}
.button:disabled {
	opacity: 0.6;
	cursor: wait;
}
:is(a, button, input, select, summary):focus-visible {
	outline: 3px solid var(--lime);
	outline-offset: 5px;
}
.hero {
	padding-block: 68px 52px;
}
.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--lime);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	margin: 0 0 20px;
}
.status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lime);
}
h1 {
	font-size: clamp(56px, 7.4vw, 104px);
	font-weight: 660;
	line-height: 1.02;
	letter-spacing: -5px;
	margin: 0;
}
h1 > span {
	color: var(--lime);
}
.hero-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 28px;
	gap: 24px;
}
.hero-bottom p {
	color: var(--muted);
	font-size: 20px;
	line-height: 1.6;
	margin: 0;
}
.text-link {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
	border-bottom: 1px solid #647c4c;
	padding-block: 8px;
}
.content-notice {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 26px;
	font-size: 12px;
	color: var(--muted);
}
.content-notice strong {
	color: #c2cab9;
	font-weight: 550;
}
.showcase {
	border-top: 1px solid var(--line);
	padding-top: 42px;
	scroll-margin-top: 24px;
}
.section-title {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
}
.section-title .eyebrow {
	margin-bottom: 10px;
}
h2 {
	font-size: clamp(32px, 3.5vw, 46px);
	font-weight: 620;
	line-height: 1.15;
	letter-spacing: -1.8px;
	margin: 0;
}
.section-title > p {
	text-align: right;
	color: var(--muted);
	font-size: 14px;
	margin: 0;
}
.screen {
	margin: 0;
	min-width: 0;
}
.tv-frame {
	background: #060805;
	padding: 9px;
	border: 1px solid #3b4535;
	border-radius: 19px;
	box-shadow: 0 16px 50px #0005;
}
.screen img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
}
figcaption {
	font-size: 11px;
	color: var(--muted);
	padding-top: 10px;
}
.feature-strip {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid var(--line);
	padding: 28px 0 32px;
}
.feature-strip > span {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #d2dcc7;
}
.feature-strip svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: var(--lime);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}
.library-showcase {
	display: grid;
	grid-template-columns: 0.8fr 1.3fr;
	align-items: center;
	gap: 60px;
	padding-block: 66px;
}
.library-copy > p:not(.eyebrow) {
	color: var(--muted);
	max-width: 320px;
	font-size: 15px;
	line-height: 1.8;
	margin: 20px 0;
}
.relay {
	display: flex;
	align-items: center;
	gap: 32px;
	background: var(--panel);
	border: 1px solid #37442e;
	border-radius: 20px;
	padding: 34px 36px;
	scroll-margin-top: 24px;
}
.relay-mark {
	flex: none;
	width: 80px;
	height: 90px;
}
.relay-mark svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--lime);
	stroke-width: 2.2;
	stroke-linejoin: round;
}
.relay-mark svg path + path {
	fill: var(--lime);
	stroke: none;
}
.relay .eyebrow {
	font-size: 10px;
	margin-bottom: 10px;
}
.relay h2 {
	font-size: 34px;
}
.relay p:not(.eyebrow) {
	color: var(--muted);
	font-size: 14px;
	margin-bottom: 0;
}
.relay .button {
	margin-left: auto;
	flex: none;
	font-size: 13px;
}
.beta {
	display: grid;
	grid-template-columns: 1fr 0.8fr;
	gap: 110px;
	padding-block: 80px 50px;
	scroll-margin-top: 28px;
}
.beta-copy > p:not(.eyebrow) {
	color: var(--muted);
	font-size: 16px;
	max-width: 350px;
	line-height: 1.8;
}
.beta-note {
	font-size: 12px;
	color: var(--lime);
}
form > label {
	display: block;
	font-size: 13px;
	margin: 0 0 8px;
}
form > input,
form > select {
	display: block;
	width: 100%;
	background: #181e16;
	border: 1px solid #48543f;
	border-radius: 9px;
	padding: 13px 15px;
	color: var(--ink);
	margin-bottom: 20px;
	min-height: 49px;
}
.consent {
	display: flex;
	align-items: start;
	gap: 9px;
	color: var(--muted);
	font-size: 12px;
	margin-block: 20px;
}
.consent input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--lime);
	flex: none;
}
form .button {
	width: 100%;
	justify-content: space-between;
}
.trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#beta-status {
	color: var(--lime);
	font-size: 13px;
}
#beta-status:empty {
	display: none;
}
.terms-section {
	padding-block: 10px 34px;
}
.terms-section summary {
	font-size: 12px;
	color: var(--muted);
	cursor: pointer;
	width: fit-content;
}
.terms-copy {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.85;
	max-width: 780px;
	padding-block: 18px;
}
.terms-copy h3 {
	color: var(--ink);
	font-size: 15px;
	margin: 22px 0 7px;
}
.terms-copy p {
	margin: 0 0 12px;
}
.terms-date,
.terms-credit {
	font-size: 11px;
}
footer {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-block: 24px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 11px;
}
footer .brand {
	font-size: 22px;
	color: var(--ink);
}
footer > span {
	margin-right: auto;
}
footer > a:not(.brand) {
	text-decoration: none;
}
@media (max-width: 900px) {
	.wrap {
		width: calc(100% - 48px);
	}
	nav {
		gap: 18px;
	}
	.masthead {
		gap: 20px;
	}
	.library-showcase {
		gap: 30px;
	}
	.beta {
		gap: 50px;
	}
	.relay {
		gap: 20px;
		padding: 28px;
	}
	.relay-mark {
		width: 55px;
	}
	.feature-strip {
		gap: 16px;
	}
	.feature-strip > span {
		font-size: 12px;
		gap: 8px;
	}
}
@media (max-width: 640px) {
	.wrap {
		width: calc(100% - 36px);
	}
	.masthead {
		padding-block: 18px;
		gap: 14px;
	}
	.brand {
		font-size: 23px;
	}
	.brand img {
		width: 34px;
		height: 34px;
	}
	.brand-tv {
		margin-left: 5px;
		font-size: 9px;
	}
	nav {
		display: none;
	}
	.masthead > .button {
		margin-left: auto;
		padding: 10px 12px;
		gap: 12px;
		font-size: 12px;
	}
	.hero {
		padding-block: 42px 34px;
	}
	h1 {
		font-size: clamp(43px, 10.5vw, 67px);
		letter-spacing: -2.5px;
	}
	.eyebrow {
		font-size: 9px;
		letter-spacing: 1.1px;
		margin-bottom: 16px;
	}
	.hero-bottom {
		align-items: start;
		margin-top: 24px;
		gap: 15px;
	}
	.hero-bottom p {
		font-size: 14px;
	}
	.text-link {
		gap: 12px;
		font-size: 12px;
		white-space: nowrap;
	}
	.content-notice {
		font-size: 10px;
		align-items: start;
		line-height: 1.7;
		gap: 7px;
	}
	.content-notice img {
		margin-top: 2px;
		flex: none;
	}
	.showcase {
		padding-top: 30px;
	}
	.section-title {
		display: block;
		margin-bottom: 20px;
	}
	h2 {
		font-size: 33px;
		letter-spacing: -1.3px;
	}
	.section-title > p {
		text-align: left;
		margin-top: 12px;
		font-size: 13px;
	}
	.section-title > p br {
		display: none;
	}
	.tv-frame {
		padding: 4px;
		border-radius: 10px;
	}
	.screen img {
		border-radius: 6px;
	}
	figcaption {
		font-size: 9px;
	}
	.feature-strip {
		display: grid;
		gap: 17px;
		padding-block: 22px;
	}
	.feature-strip > span {
		font-size: 13px;
		gap: 11px;
	}
	.library-showcase {
		grid-template-columns: 1fr;
		gap: 25px;
		padding-block: 36px;
	}
	.library-copy > p:not(.eyebrow) {
		max-width: 100%;
		font-size: 14px;
		margin-block: 15px;
	}
	.library-copy h2 br {
		display: none;
	}
	.relay {
		display: grid;
		grid-template-columns: 44px 1fr;
		align-items: start;
		gap: 18px;
		padding: 22px;
		border-radius: 14px;
	}
	.relay-mark {
		width: 44px;
		height: 58px;
		margin-top: 20px;
	}
	.relay h2 {
		font-size: 28px;
	}
	.relay .eyebrow {
		font-size: 8px;
		letter-spacing: 0.8px;
	}
	.relay p:not(.eyebrow) {
		font-size: 13px;
	}
	.relay .button {
		grid-column: 2;
		margin: 0;
		justify-self: start;
		padding: 11px 16px;
	}
	.beta {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-block: 45px 30px;
	}
	.beta-copy > p:not(.eyebrow) {
		max-width: 100%;
		font-size: 14px;
		margin-block: 15px;
	}
	.beta-copy h2 br {
		display: none;
	}
	footer {
		flex-wrap: wrap;
		gap: 18px;
		font-size: 10px;
	}
	footer .brand {
		font-size: 20px;
	}
	footer > span {
		margin: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	:root {
		scroll-behavior: auto;
	}
}

.phone-showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px 56px;align-items:center;padding:48px 0 72px}
.phone-showcase h2{font-size:clamp(32px,4vw,52px);line-height:1.1;letter-spacing:-1.5px;margin:12px 0 18px}
.phone-showcase p{color:var(--muted);max-width:440px}
.phone-screens{display:flex;align-items:flex-start;justify-content:center;gap:18px}
.phone-screens figure{margin:0;width:min(46%,250px)}
.phone-screens img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 48px #0006}
.phone-screens figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:10px}
.phone-caption{grid-column:2;font-size:13px;text-align:center;justify-self:center}
@media(max-width:760px){.phone-showcase{grid-template-columns:1fr;gap:24px;padding:32px 0 48px}.phone-caption{grid-column:1}.phone-screens{gap:12px}.phone-screens img{border-radius:16px}}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 18px}.beta-caption{font-size:14px;color:var(--muted);max-width:640px}.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:38px 0 80px}.benefit-grid article{padding-top:22px;border-top:1px solid var(--line)}.benefit-grid h3{font-size:23px;line-height:1.25;margin:12px 0}.benefit-grid p{font-size:16px;color:var(--muted)}.feature-number{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--lime)}.relay-section{border-block:1px solid var(--line);padding:72px 0}.relay-intro{font-size:clamp(22px,3vw,34px);max-width:760px;color:var(--ink)}.relay-path{display:flex;align-items:center;gap:20px;padding:24px;background:#1d291c;border-radius:18px;flex-wrap:wrap;margin:34px 0}.relay-path strong{color:var(--lime)}
.relay-match{max-width:840px;color:var(--muted);margin:18px 0 0;line-height:1.7}
.relay-match strong{color:var(--ink)}
.relay-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:26px 0 0}
.relay-compare article{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.relay-compare h3{margin:0 0 8px;font-size:20px}
.relay-compare p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.relay-compare .is-relay{border-color:#4d6638;background:linear-gradient(135deg,#26351f,#182016)}
@media(max-width:760px){.relay-teaser{flex-direction:column;align-items:flex-start}.relay-compare{grid-template-columns:1fr}}.relay-details{max-width:840px;color:var(--muted)}.relay-details summary{color:var(--ink);cursor:pointer}.beta-pill{display:inline-block;padding:6px 12px;background:#2a3a20;color:var(--lime);border:1px solid #526c39;border-radius:30px;font-size:12px;letter-spacing:1px;font-weight:700}.download-options{display:grid;gap:20px}.download-options article{padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:20px}.download-options h3{font-size:25px}.download-options .button{margin:6px 0 10px}.download-options .text-link{display:block;font-size:14px}.install-page{padding-top:70px}.install-page h1{font-size:clamp(40px,6vw,72px);line-height:1.08;letter-spacing:-2px;max-width:800px}.install-lead{font-size:22px;color:var(--muted)}.install-section{padding:64px 0;border-bottom:1px solid var(--line);max-width:900px;scroll-margin-top:24px}.step-marker{font-size:13px;letter-spacing:2px;color:var(--lime)}.install-section h2{font-size:clamp(30px,5vw,44px);margin:14px 0 24px;line-height:1.15}.install-steps{padding-left:30px;counter-reset:none;max-width:760px}.install-steps li{padding-left:16px;margin:30px 0 40px}.install-steps li::marker{color:var(--lime);font-size:24px;font-weight:700}.install-steps h3{font-size:22px;margin:0 0 10px}.install-steps p,.install-note{color:var(--muted)}.install-note{font-size:14px;max-width:760px}.tv-address{display:block;padding:22px;background:#1d291c;color:var(--lime);font-size:clamp(17px,4vw,27px);border:1px solid #425f33;border-radius:14px;overflow-wrap:anywhere;margin:18px 0}.copy-status{font-size:14px}.install-section details{padding:14px 0}.install-section summary{cursor:pointer}.install-page+.wrap{margin-top:50px}
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:28px;font-size:13px;color:var(--muted)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--ink)}
.seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:30px 0}
.seo-grid article{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:18px}
.seo-grid h3{margin:0 0 10px;font-size:21px;line-height:1.3}
.seo-grid p{margin:0;color:var(--muted);font-size:15px}
.seo-cta{margin:44px 0 64px;padding:34px;background:linear-gradient(160deg,#1b271c,#151e17);border:1px solid #37442e;border-radius:20px}
.seo-cta h2{font-size:clamp(28px,4vw,40px);margin-bottom:12px}
.seo-cta p{color:var(--muted);max-width:720px}
.seo-cta .button{margin-top:10px;margin-right:10px}
.faq-list{margin:28px 0 10px;max-width:900px}
.faq-list details{border-top:1px solid var(--line);padding:18px 0}
.faq-list summary{cursor:pointer;font-weight:650}
.faq-list p{color:var(--muted);margin:12px 0 0}
.contact-form{display:grid;gap:18px;max-width:680px;margin:28px 0}
.contact-form label{display:grid;gap:8px;font-size:14px;color:var(--ink)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:14px 16px;background:#1d291c;border:1px solid #425f33;border-radius:12px;color:var(--ink);font:inherit}
.contact-form textarea{min-height:160px;resize:vertical}
.contact-form .check{display:flex;align-items:flex-start;gap:10px;color:var(--muted)}
.contact-form .check input{width:auto;margin-top:4px}
.contact-form button{justify-self:start}
.contact-form [data-contact-status]{min-height:1.5em;color:var(--lime);margin:0}
.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.compare-wrap{overflow-x:auto;margin:28px 0;border:1px solid var(--line);border-radius:16px}
.compare-table{width:100%;min-width:760px;border-collapse:collapse;font-size:14px}
.compare-table th,.compare-table td{padding:15px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare-table thead th{background:#1b211a;color:var(--ink);font-size:12px;letter-spacing:.4px;text-transform:uppercase}
.compare-table tbody th{color:var(--ink);font-weight:650}
.compare-table td{color:var(--muted)}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:0}
.compare-featured th,.compare-featured td{background:#1c2a1d}
.compare-featured th{color:var(--lime)}
.compare-callout{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:24px 0;padding:22px 24px;background:linear-gradient(160deg,#1b271c,#151e17);border:1px solid #37442e;border-radius:18px}
.compare-callout div{display:grid;gap:6px;max-width:760px}
.compare-callout span{color:var(--muted);font-size:14px}
.compare-callout .button{margin:0;flex:none}
@media(max-width:760px){.compare-callout{flex-direction:column;align-items:flex-start}}
@media(max-width:760px){.seo-grid{grid-template-columns:1fr}.seo-cta{padding:24px}.breadcrumbs{padding-top:20px}}
@media(max-width:760px){.benefit-grid{grid-template-columns:1fr;gap:22px;margin-bottom:40px}.relay-section{padding:42px 0}.relay-path{gap:14px;font-size:14px}.hero-actions .button{width:100%;text-align:center}.install-page{padding-top:40px}.install-steps{padding-left:23px}.install-steps li{padding-left:8px}.install-section{padding:40px 0}.masthead nav a[href="#the-app"]{display:none}.download-options article{padding:22px}}

/* Homepage plans */
.plans-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:34px 0 22px}
.plan-card{display:flex;flex-direction:column;gap:12px;padding:24px;background:linear-gradient(160deg,#1b271c,#151e17);border:1px solid var(--line);border-radius:18px;min-width:0}
.plan-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.plan-card h3{margin:0;font-size:20px;line-height:1.2;color:var(--ink)}
.plan-badge{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid #4d6638;border-radius:999px;background:#26351f;color:var(--lime);font-size:10px;font-weight:700;letter-spacing:.8px;white-space:nowrap}
.plan-price{display:flex;align-items:baseline;gap:8px;margin:0;color:var(--ink)}
.plan-price strong{font-size:38px;line-height:1;letter-spacing:-1.6px;font-weight:650;color:var(--ink)}
.plan-price span{font-size:12px;color:var(--muted)}
.plan-devices{margin:0;font-size:13px;color:var(--lime);font-weight:600}
.plan-card p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.plan-link{margin-top:auto;padding-top:8px;font-size:14px;font-weight:650;color:var(--lime);text-decoration:none}
.plan-link:hover{text-decoration:underline}
.plans-note{font-size:14px;color:var(--muted);max-width:100%;margin:0}
.plan-price .local-price{display:block;margin-top:4px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted);white-space:normal}
.price-disclaimer{font-size:13px;color:var(--muted);max-width:100%;margin:10px 0 0}
@media(max-width:1050px){.plans-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.plans-grid{grid-template-columns:1fr;gap:12px}.plan-card{padding:20px}}
