/* verisible v6 — "the instrument", amber signal.
   Light lab surface: off-white, near-black ink. ONE signal color: phosphor
   amber, used only for data and the user's own position (chart trace, the
   "you" bar, live pulses, deltas). Interactive chrome is ink. Positive
   states are FILLED INK marks, absent is hollow/hatched, red is error only.
   Dark appears only where the machine itself is on screen. No green, no
   purple, no marker highlights. The measurement is the aesthetic.

   base.css = tokens + shared primitives (both marketing and app consume
   this layer). marketing.css and app.css build on it. */

@font-face {
	font-family: "Archivo";
	src: url("/static/fonts/archivo-var.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--bg: #fafaf9;
	--surface: #ffffff;
	--panel: #101317;      /* dark instrument panels: live feeds, demo dash */
	--panel2: #171b21;
	--ink: #16181c;
	--muted: #4f545b;
	--faint: #6e747c;
	--line: #e6e7e5;
	--line2: #d2d4d1;
	--pline: rgba(250, 250, 249, 0.1);   /* hairlines on panels */
	--pline2: rgba(250, 250, 249, 0.2);
	--pdim: rgba(250, 250, 249, 0.62);
	--pfaint: rgba(250, 250, 249, 0.38);
	--sig: #b45309;        /* signal amber on light surfaces */
	--sig-deep: #8a3d05;   /* amber for small text (~7:1 on bg) */
	--sig-soft: #f7ecdd;   /* amber wash: chips, selection, chart area */
	--sig-bright: #ffb224; /* amber phosphor on dark panels */
	--ink-ring: rgba(22, 24, 28, 0.08);
	--red: #b3372b;
	--red-bright: #ff7a6b; /* red on dark panels */
	--sans: Archivo, "Helvetica Neue", sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--sig-soft); color: var(--ink); }
html { scroll-behavior: smooth; }
body {
	background: var(--bg);
	color: var(--ink);
	font: 400 16.5px/1.65 var(--sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { max-width: 100%; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.hl { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--sig); text-decoration-thickness: 0.09em; text-underline-offset: 0.14em; }

/* ---------- header ---------- */
.site-head {
	position: sticky; top: 0; z-index: 60;
	background: rgba(250, 250, 249, 0.86);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; height: 62px; gap: 28px; }
.brand { font-weight: 780; font-size: 21px; letter-spacing: -0.03em; text-decoration: none; display: flex; align-items: flex-end; }
.brand i { width: 7px; height: 7px; background: var(--sig); border-radius: 50%; margin: 0 0 7px 4px; flex: none; }
.head-tag { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: 0.04em; border-left: 1px solid var(--line2); padding-left: 18px; white-space: nowrap; }
.site-nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.site-nav a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--muted); transition: color 0.15s; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.btn-solid { color: #fff; }

/* app shell topbar: same chrome as the marketing header, product nav */
.app-nav { margin-left: 0; }
.app-nav a.nav-on { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.app-id { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.app-email { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.app-id form { display: inline; }

/* ---------- buttons & fields ---------- */
.btn-solid {
	display: inline-block; background: var(--ink); color: #fff;
	font-weight: 700; font-size: 15.5px; padding: 14px 30px; white-space: nowrap;
	border: none; border-radius: 10px; cursor: pointer; text-decoration: none; font-family: inherit;
	transition: background 0.15s, transform 0.15s;
}
.btn-solid:hover { background: #000; transform: translateY(-1px); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-line {
	display: inline-block; background: transparent; color: var(--ink); font-weight: 650; font-size: 15px;
	padding: 12px 26px; border: 1px solid var(--line2); border-radius: 10px; text-decoration: none; cursor: pointer;
	font-family: inherit; text-align: center; white-space: nowrap;
	transition: border-color 0.15s, background 0.15s;
}
.btn-line:hover { border-color: var(--ink); background: var(--surface); }
.btn-ghost {
	display: inline-block; background: transparent; color: var(--ink); font-weight: 650; font-size: 15px;
	padding: 12px 26px; border: 1px solid var(--line2); border-radius: 10px; cursor: pointer; text-decoration: none;
	font-family: inherit; white-space: nowrap;
	transition: border-color 0.15s, background 0.15s;
}
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); }
.is-static { cursor: default; opacity: 0.55; }
.is-static:hover { border-color: var(--line2); background: transparent; transform: none; }
.field {
	border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); color: var(--ink);
	font: 500 16px/1.4 var(--sans); padding: 13px 16px; width: 100%;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-ring); }

/* shared micro-primitives */
.sub { color: var(--muted); }
.sub b { color: var(--ink); }
.fineprint { color: var(--faint); font-size: 13.5px; margin-top: 26px; }
.sec-lab { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 16px; }
.h1-md, .h1-lg { opacity: 1; }
.h1-md { font-size: clamp(32px, 5vw, 50px); font-weight: 760; letter-spacing: -0.035em; line-height: 1.02; }
.h1-lg { font-size: clamp(36px, 6vw, 62px); font-weight: 780; letter-spacing: -0.04em; line-height: 1.0; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dot-on { background: var(--sig); }
.dot-off { background: var(--faint); }

.delta { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.delta.up { color: var(--ink); background: var(--sig-soft); }
.delta.down { color: var(--red); background: rgba(179, 55, 43, 0.08); }

/* Verdict stamps. Light surface: filled INK = named, hollow = absent (form
   first, hue second). Dark panels override in the feed styles. */
.stamp {
	flex: none; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 3px 11px; border: 1px solid var(--line2); border-radius: 999px; color: var(--muted);
}
.stamp.hit { background: var(--ink); color: #fff; border-color: var(--ink); }
.stamp.miss { background: transparent; color: var(--faint); }

.pulse { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--sig); animation: pulse 0.9s infinite alternate; margin-right: 14px; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(0.6); opacity: 0.4; } }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 44px 0 56px; }
.site-foot .wrap { display: flex; gap: 40px; align-items: baseline; flex-wrap: wrap; }
.site-foot .fine { font-size: 13px; color: var(--faint); max-width: 62ch; }
.site-foot nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.site-foot nav a { font-size: 13.5px; color: var(--muted); text-decoration: none; }
.site-foot nav a:hover { color: var(--ink); }

/* ---------- reveals ---------- */
.reveal.in { animation: rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
	.reveal.in { animation: none; }
	.pulse { animation: none; }
	.btn-solid, .btn-solid:hover { transition: none; transform: none; }
}

@media (max-width: 980px) {
	.head-tag { display: none; }
}
@media (max-width: 640px) {
	/* Marketing nav collapses to the primary button; the app topbar keeps
	   its product nav (that IS the navigation). */
	.site-nav:not(.app-nav) a:not(.btn-solid) { display: none; }
	.site-nav:not(.app-nav) { gap: 0; }
	.app-nav { gap: 14px; }
	.app-email { display: none; }
	.site-foot nav { margin-left: 0; }
}