/* AROK Straylight: "Night Valley"
   A valley of city lights seen from a dark hill: near-black ground, warm sand
   text, and one ember accent taken from the sunset photographs. The light that
   escapes is the point; everything else stays dark.
   Gloock (editorial serif) for display, Albert Sans (light grotesk) for text,
   JetBrains Mono for small technical captions and the wire view only.

   Rules: one accent (ember) for action and focus; moss only means "verified";
   flat surfaces, no shadows, no blur; photos square-cornered; the hero, the
   wire plate and the closing band stay night in both themes.
   Contrast checked: body text 15.4:1+, text-3 5.4:1+, ember 5.1:1+,
   control borders 3.4:1+. */

:root,
:root[data-theme="dark"] {
	--ground: #0c0b0a;
	--raised: #15130f;
	--raised-2: #1d1a16;
	--line: #2a2621;
	--line-strong: #716a5e;
	--text: #eee6d8;
	--text-2: #b6ac9c;
	--text-3: #8f8676;
	--ember: #f0603a;
	--ember-hover: #ff7a55;
	--on-ember: #1a0a05;
	--moss: #a3b18a;
	color-scheme: dark;
}
:root[data-theme="light"] {
	--ground: #f3ede3;
	--raised: #ebe3d6;
	--raised-2: #e1d7c8;
	--line: #d6cbba;
	--line-strong: #8a7e6c;
	--text: #1a1612;
	--text-2: #4a4238;
	--text-3: #645a4d;
	--ember: #b13a17;
	--ember-hover: #922e10;
	--on-ember: #fff4ee;
	--moss: #3f6b3a;
	color-scheme: light;
}
/* Night surfaces keep the dark tokens whatever the page theme. */
.night {
	--ground: #0c0b0a;
	--raised: #15130f;
	--raised-2: #1d1a16;
	--line: #2a2621;
	--line-strong: #716a5e;
	--text: #eee6d8;
	--text-2: #b6ac9c;
	--text-3: #8f8676;
	--ember: #f0603a;
	--ember-hover: #ff7a55;
	--on-ember: #1a0a05;
	--moss: #a3b18a;
	color: var(--text);
}
:root {
	--display: "Gloock", Georgia, "Times New Roman", serif;
	--sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
	--wrap: 1240px;
	--gutter: clamp(20px, 5vw, 64px);
	--r: 2px;
	--scrim: rgba(8, 7, 6, 0.86);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--ground);
	color: var(--text);
	font: 300 17px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 600; color: var(--text); }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ember); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 1px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ember); color: var(--on-ember); padding: 10px 14px; z-index: 20; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
.kicker, .mono, .nav-a, .theme-btn, .foot, .caption, .stage small, .tag {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.kicker { color: var(--ember); }
h1, h2, .display {
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: -0.015em;
}
h1 { font-size: clamp(58px, 10.5vw, 168px); line-height: 0.9; max-width: 11ch; }
h2 { font-size: clamp(40px, 6vw, 88px); line-height: 0.98; max-width: 16ch; }
h1 .lit, h2 .lit { color: var(--ember); }
h3 { font: 600 19px/1.3 var(--sans); letter-spacing: -0.005em; }
.lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 54ch; }
.lead strong { font-weight: 600; }
.body { color: var(--text-2); max-width: 64ch; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 600 15.5px/1 var(--sans);
	text-decoration: none;
	padding: 16px 24px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .18s cubic-bezier(.25,1,.5,1), color .18s cubic-bezier(.25,1,.5,1), border-color .18s cubic-bezier(.25,1,.5,1);
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--text); color: var(--ground); }
.btn-primary:hover { background: var(--ember); color: var(--on-ember); }
.btn-quiet { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-quiet:hover { border-color: var(--text); color: var(--text); }
.btn-ember { background: var(--ember); color: var(--on-ember); }
.btn-ember:hover { background: var(--ember-hover); color: var(--on-ember); }

/* ---------- header ---------- */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.brand svg { width: 26px; height: 26px; flex: none; color: var(--text); }
.brand b { font: 600 17px/1 var(--sans); letter-spacing: 0.01em; }
.brand b span { color: var(--text-3); font-weight: 400; margin-right: 6px; }
.site-nav { display: flex; align-items: center; gap: 2px; }
.nav-a { color: var(--text-2); text-decoration: none; padding: 10px 12px; }
.nav-a:hover { color: var(--text); }
.theme-btn {
	margin-left: 10px;
	background: none;
	color: var(--text-2);
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	padding: 8px 13px;
	cursor: pointer;
}
.theme-btn:hover { color: var(--text); border-color: var(--text-2); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(640px, 100svh); display: flex; flex-direction: column; overflow: hidden; background: var(--ground); }
.hero-photo { position: absolute; inset: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero::after {
	/* scrim: dark from the hill up, so type sits on the hillside, not the lights */
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(0deg, rgba(8,7,6,.96) 0%, rgba(8,7,6,.72) 34%, rgba(8,7,6,.26) 62%, rgba(8,7,6,.38) 100%);
}
.hero-body { position: relative; z-index: 2; margin-top: auto; padding-bottom: clamp(40px, 7vh, 84px); padding-top: 140px; }
.hero h1 { margin-top: 22px; }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; margin-top: 34px; }
.hero .lead { color: var(--text-2); }
.hero .caption { color: var(--text-3); text-align: right; }

/* ---------- sections ---------- */
.section { padding: clamp(96px, 13vw, 168px) 0; border-top: 1px solid var(--line); }
.section.tight { padding: clamp(64px, 8vw, 104px) 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head h2 { margin-top: 18px; }
.section-head .lead { justify-self: end; }

/* ---------- 01 on the wire ---------- */
.wire { background: var(--ground); }
.wire-plate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); border: 1px solid var(--line); }
.wire-pane { padding: 28px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wire-pane + .wire-pane { border-left: 1px solid var(--line); }
.wire-pane header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wire-pane header .mono { color: var(--text-3); }
.wire-pane h3 { font-size: 17px; }
.wire textarea {
	width: 100%;
	min-height: 220px;
	flex: 1;
	resize: vertical;
	background: var(--raised);
	color: var(--text);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	padding: 16px;
	font: 300 18px/1.5 var(--sans);
}
.wire textarea:focus-visible { outline-offset: 0; }
.transit { background: #070606; }
.hex {
	flex: 1;
	min-height: 220px;
	max-height: 300px;
	overflow: hidden;
	font: 400 12.5px/1.75 var(--mono);
	color: var(--text-3);
	word-break: break-all;
	position: relative;
	-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
	mask-image: linear-gradient(180deg, #000 62%, transparent);
}
.hex .hot { color: var(--ember); }
.meter { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding-top: 14px; gap: 16px; }
.meter div b { display: block; font: 400 30px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.meter div span { display: block; margin-top: 8px; font: 400 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.reads {
	flex: 1;
	min-height: 220px;
	background: var(--raised);
	border-radius: var(--r);
	padding: 16px;
	font: 300 18px/1.5 var(--sans);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	color: var(--text);
}
.reads.empty { color: var(--text-3); }
.reads.rejected { color: var(--ember); }
.wire-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wire-tools .btn { padding: 11px 16px; font-size: 14px; }
.status-line { font: 400 12px/1.5 var(--mono); letter-spacing: .08em; color: var(--text-3); }
.status-line.ok::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); margin-right: 9px; vertical-align: 1px; }
.status-line.bad::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); margin-right: 9px; vertical-align: 1px; }
.wire-note { margin-top: 22px; color: var(--text-3); font-size: 14.5px; max-width: 86ch; }

/* ---------- 02 how it stays yours ---------- */
.pillars { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 64px); }
.pillar img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pillar.lead-pillar { grid-row: span 2; }
.pillar.lead-pillar img { aspect-ratio: 4 / 5; object-position: 50% 72%; }
.pillar .num { display: block; font: 400 44px/1 var(--display); color: var(--ember); margin: 24px 0 14px; }
.pillar h3 { font-size: 22px; margin-bottom: 10px; }
.pillar p { color: var(--text-2); max-width: 46ch; }

/* ---------- 03 verify ---------- */
.verify { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.verify h2 { margin-top: 18px; }
.verify .lead { margin-top: 26px; }
.sn {
	border: 1px solid var(--line);
	background: var(--raised);
	padding: clamp(24px, 3.5vw, 44px);
}
.sn-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.sn-top .mono { color: var(--text-3); }
.badge { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); color: var(--moss); }
.badge svg { width: 17px; height: 17px; }
.sn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; padding: 30px 0; }
.sn-grid span { font: 400 clamp(20px, 2.2vw, 28px)/1 var(--mono); letter-spacing: .06em; color: var(--text); font-variant-numeric: tabular-nums; }
.sn-foot { color: var(--text-3); font-size: 14.5px; border-top: 1px solid var(--line); padding-top: 18px; }

/* ---------- 04 where we're at ---------- */
.track { display: grid; grid-template-columns: repeat(6, 1fr); margin: 8px 0 clamp(64px, 8vw, 96px); }
.stage { position: relative; padding-right: 16px; }
.stage::before { content: ""; position: absolute; top: 15px; left: 32px; right: 0; height: 1px; background: var(--line); }
.stage.done::before { background: var(--moss); }
.stage:last-child::before { display: none; }
.dot { position: relative; z-index: 1; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--ground); font: 400 12px/1 var(--mono); color: var(--text-3); }
.stage.done .dot { background: var(--moss); border-color: var(--moss); color: var(--ground); }
.stage.now .dot { border-color: var(--ember); }
.stage.now .dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ember); }
.dot svg { width: 15px; height: 15px; }
.stage h3 { font-size: 16px; margin-top: 18px; }
.stage small { display: block; margin-top: 6px; color: var(--text-3); font-size: 10.5px; }
.stage.done small { color: var(--moss); }
.stage.now small { color: var(--ember); }

.shipped { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); }
.shipped h3.label { margin-bottom: 24px; }
.log li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); }
.log li:last-child { border-bottom: 1px solid var(--line); }
.log .when b { display: block; font: 400 26px/1 var(--display); }
.log .when span { display: block; margin-top: 8px; font-size: 13px; color: var(--text-3); }
.log h3 { font-size: 17px; margin-bottom: 6px; }
.log p { color: var(--text-2); font-size: 15.5px; }
.figs li { padding: 26px 0; border-top: 1px solid var(--line); }
.figs li:last-child { border-bottom: 1px solid var(--line); }
.figs b { display: block; font: 400 clamp(52px, 6vw, 84px)/0.9 var(--display); font-variant-numeric: tabular-nums; }
.figs span { display: block; margin-top: 12px; font-size: 14px; color: var(--text-3); }

/* ---------- 05 roadmap ---------- */
.lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.lane-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); margin-bottom: 4px; }
.tag { display: inline-block; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text); font-size: 10.5px; }
.tag.now { background: var(--ember); border-color: var(--ember); color: var(--on-ember); }
.lane-head .mono { color: var(--text-3); font-size: 10.5px; }
.lane li { padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 15.5px; }
.lane li strong { font-weight: 600; }

/* ---------- 06 what won't change ---------- */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.promises li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; color: var(--text-2); font-size: 15.5px; }
.promises svg { width: 20px; height: 20px; color: var(--ember); margin-top: 3px; }

/* ---------- closing band ---------- */
.closing { position: relative; overflow: hidden; padding: clamp(120px, 16vw, 220px) 0; background: var(--ground); }
.closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.closing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,7,6,.94) 0%, rgba(8,7,6,.78) 46%, rgba(8,7,6,.2) 100%); }
.closing .wrap { position: relative; z-index: 1; }
.closing .lead { margin-top: 24px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 56px; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.foot-note { color: var(--text-3); font-size: 14px; max-width: 62ch; margin-top: 14px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { text-decoration: none; color: var(--text-2); font-size: 14px; }
.foot-links a:hover { color: var(--ember); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
	.section-head { grid-template-columns: 1fr; gap: 22px; }
	.section-head .lead { justify-self: start; }
	.wire-plate { grid-template-columns: 1fr; }
	.wire-pane + .wire-pane { border-left: 0; border-top: 1px solid var(--line); }
	.pillars { grid-template-columns: 1fr; }
	.pillar.lead-pillar { grid-row: auto; }
	.pillar.lead-pillar img { aspect-ratio: 16 / 10; }
	.verify { grid-template-columns: 1fr; }
	.track { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
	.stage:nth-child(3)::before { display: none; }
	.shipped { grid-template-columns: 1fr; }
	.lanes { grid-template-columns: 1fr 1fr; row-gap: 48px; }
	.promises { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.opt { display: none; }
	.hero-foot { grid-template-columns: 1fr; }
	.hero .caption { text-align: left; }
	.track { grid-template-columns: 1fr 1fr; }
	.stage:nth-child(3)::before { display: block; }
	.stage:nth-child(2n)::before { display: none; }
	.log li { grid-template-columns: 1fr; gap: 10px; }
	.lanes, .promises { grid-template-columns: 1fr; }
	.sn-grid { grid-template-columns: repeat(2, 1fr); }
	.wire-pane { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}