/* =============================================================================
Attestra — Colors & Type
Verifiable, attested web3 events. Brand: blue / white / black.
Load Google Fonts in your HTML alongside this file:
============================================================================= */
:root {
/* ---------------------------------------------------------------------------
1. CORE PALETTE — blue / ink (cool near-black) / white
--------------------------------------------------------------------------- */
/* Brand blue — "verification blue". Confident, digital, trustworthy. */
--blue-50: #EEF3FF;
--blue-100: #DCE6FF;
--blue-200: #BACCFF;
--blue-300: #8FAAFF;
--blue-400: #5C82FB; /* PRIMARY brand blue */
--blue-500: #2F62F4; /* hover / pressed */
--blue-600: #1E5BFF; /* deep variant for contrast-critical fills */
--blue-700: #1A4AD6;
--blue-800: #1A3CA8;
--blue-900: #182F7C;
--blue-950: #0F1E50;
/* Ink — neutral charcoal (the "black" + greys). Essentially zero hue at the dark end so
chrome reads as true black/charcoal, never navy; blue appears ONLY as an accent. */
--ink-950: #0B0B0C; /* app background (dark console) */
--ink-900: #141416; /* sidebar / topbar / inspector / panels */
--ink-850: #19191B; /* dark surface / card */
--ink-800: #222225; /* dark elevated surface */
--ink-700: #2F2F33; /* dark borders */
--ink-600: #45454A;
--ink-500: #6A6A72; /* muted text on light */
--ink-400: #91919B;
--ink-300: #BBBBC2;
--ink-200: #DBDBE0; /* light borders */
--ink-150: #E7E7EB;
--ink-100: #EFEFF2; /* light surface tint */
--ink-50: #F6F6F8; /* light app background */
--white: #FFFFFF;
/* ---------------------------------------------------------------------------
2. SEMANTIC STATUS COLORS — mirror the engine's trust model
tentative → confirmed → finalized, with reorged as the correction.
A deliberate trust gradient: amber (caution) → blue (attested) →
green (irreversible), red for a correction.
--------------------------------------------------------------------------- */
/* tentative — seen, not yet trusted */
--status-tentative: #C98A04;
--status-tentative-bg: #FBF1D8;
--status-tentative-fg: #7A5300;
--status-tentative-dot: #E8A60B;
/* confirmed — quorum met + buried deep (the brand blue) */
--status-confirmed: #1E5BFF;
--status-confirmed-bg: #E4ECFF;
--status-confirmed-fg: #16348F;
--status-confirmed-dot: #2F62F4;
/* finalized — terminal, irreversible */
--status-finalized: #0E9F6E;
--status-finalized-bg: #DBF4E9;
--status-finalized-fg: #08603F;
--status-finalized-dot: #12B981;
/* reorged — the correction; previously-sent event left canonical chain */
--status-reorged: #E0392B;
--status-reorged-bg: #FCE3E1;
--status-reorged-fg: #8F1810;
--status-reorged-dot: #F0473A;
/* ---------------------------------------------------------------------------
3. SEMANTIC SURFACE TOKENS — LIGHT (marketing site default)
--------------------------------------------------------------------------- */
--bg: var(--ink-50);
--surface: var(--white);
--surface-2: var(--ink-100);
--surface-sunk: var(--ink-50);
--fg1: var(--ink-950); /* primary text / headlines */
--fg2: var(--ink-600); /* secondary text */
--fg3: var(--ink-500); /* muted / captions / labels */
--fg-inverse: var(--white);
--border: var(--ink-200);
--border-strong: var(--ink-300);
--border-subtle: var(--ink-150);
--accent: var(--blue-400);
--accent-hover: var(--blue-500);
--accent-fg: var(--white);
--accent-soft: var(--blue-50);
--ring: color-mix(in srgb, var(--blue-400) 50%, transparent);
/* ---------------------------------------------------------------------------
4. TYPE FAMILIES
--------------------------------------------------------------------------- */
--font-display: "Space Grotesk", "Schibsted Grotesk", system-ui, sans-serif;
--font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
--font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
/* ---------------------------------------------------------------------------
5. TYPE SCALE — tuned for product + marketing. (px @ 16 root)
--------------------------------------------------------------------------- */
--text-display: 600 clamp(44px, 6vw, 76px)/1.02 var(--font-display);
--text-h1: 600 clamp(34px, 4.4vw, 52px)/1.06 var(--font-display);
--text-h2: 600 clamp(26px, 3vw, 36px)/1.12 var(--font-display);
--text-h3: 600 22px/1.25 var(--font-display);
--text-h4: 600 18px/1.3 var(--font-display);
--text-lead: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--font-sans);
--text-body: 400 16px/1.6 var(--font-sans);
--text-sm: 400 14px/1.55 var(--font-sans);
--text-xs: 500 12px/1.4 var(--font-sans);
--text-mono: 500 14px/1.5 var(--font-mono);
--text-mono-sm: 500 12px/1.5 var(--font-mono);
/* eyebrow / overline / data label — uppercase mono tracking */
--text-label: 600 12px/1.3 var(--font-mono);
--tracking-label: 0.12em;
/* ---------------------------------------------------------------------------
6. RADII / SHADOW / SPACING
--------------------------------------------------------------------------- */
--r-xs: 4px;
--r-sm: 7px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-pill: 999px;
/* Shadows — restrained, cool-tinted. Infra brand: crisp, not fluffy. */
--shadow-xs: 0 1px 2px rgba(10,14,26,0.06);
--shadow-sm: 0 1px 2px rgba(10,14,26,0.05), 0 2px 6px rgba(10,14,26,0.05);
--shadow-md: 0 2px 4px rgba(10,14,26,0.05), 0 8px 24px rgba(10,14,26,0.08);
--shadow-lg: 0 12px 40px rgba(10,14,26,0.12), 0 2px 8px rgba(10,14,26,0.06);
--shadow-blue: 0 8px 28px rgba(30,91,255,0.28);
/* 4px base spacing scale */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
}
/* =============================================================================
DARK THEME — the stream console / app. Apply .theme-dark on a wrapper or :root.
============================================================================= */
.theme-dark {
--bg: var(--ink-950);
--surface: var(--ink-850);
--surface-2: var(--ink-800);
--surface-sunk: var(--ink-900);
--fg1: #F5F5F7;
--fg2: #ABABB3;
--fg3: #76767E;
--fg-inverse: var(--ink-950);
--border: var(--ink-700);
--border-strong: var(--ink-600);
--border-subtle: var(--ink-800);
--accent: var(--blue-400);
--accent-hover: var(--blue-300);
--accent-fg: var(--ink-950);
--accent-soft: color-mix(in srgb, var(--blue-500) 20%, var(--ink-900));
--ring: color-mix(in srgb, var(--blue-400) 55%, transparent);
/* status backgrounds re-tinted for dark surfaces */
--status-tentative-bg: color-mix(in srgb, #E8A60B 16%, var(--ink-900));
--status-tentative-fg: #F3C44E;
--status-confirmed-bg: color-mix(in srgb, #2F62F4 20%, var(--ink-900));
--status-confirmed-fg: #8FAAFF;
--status-finalized-bg: color-mix(in srgb, #12B981 16%, var(--ink-900));
--status-finalized-fg: #4ED9A4;
--status-reorged-bg: color-mix(in srgb, #F0473A 16%, var(--ink-900));
--status-reorged-fg: #FF8077;
}
/* =============================================================================
SEMANTIC ELEMENT STYLES — opt-in helpers
============================================================================= */
.at-display { font: var(--text-display); letter-spacing: -0.025em; color: var(--fg1); }
.at-h1 { font: var(--text-h1); letter-spacing: -0.02em; color: var(--fg1); }
.at-h2 { font: var(--text-h2); letter-spacing: -0.015em; color: var(--fg1); }
.at-h3 { font: var(--text-h3); letter-spacing: -0.01em; color: var(--fg1); }
.at-h4 { font: var(--text-h4); color: var(--fg1); }
.at-lead { font: var(--text-lead); color: var(--fg2); }
.at-body { font: var(--text-body); color: var(--fg2); }
.at-sm { font: var(--text-sm); color: var(--fg2); }
.at-mono { font: var(--text-mono); color: var(--fg1); }
.at-label {
font: var(--text-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--fg3);
}
code, .at-code {
font: var(--text-mono-sm);
background: var(--surface-2);
border: 1px solid var(--border-subtle);
border-radius: var(--r-xs);
padding: 0.1em 0.4em;
color: var(--fg1);
}
/* =============================================================================
Attestra — Landing page styles. Builds on assets/colors_and_type.css tokens.
============================================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--fg1);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.mono { font-family: var(--font-mono); }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: color-mix(in srgb, var(--blue-400) 30%, transparent); }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 8px;
font: 600 14px/1 var(--font-sans);
padding: 11px 17px; border-radius: var(--r-md);
cursor: pointer; border: 1px solid transparent;
transition: background .15s cubic-bezier(.2,0,0,1), border-color .15s, color .15s, transform .08s, box-shadow .15s;
white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: var(--blue-700); }
.btn-secondary { background: var(--surface); color: var(--fg1); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--ink-400); background: var(--surface-2); }
.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-ghost-light:hover { background: rgba(255,255,255,.15); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
/* ---------- header ---------- */
.head {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--surface) 80%, transparent);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border-subtle);
}
.head-inner { max-width: 1200px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; font: 600 19px/1 var(--font-display); letter-spacing: -0.02em; }
.nav { display: flex; gap: 26px; margin-left: 6px; }
.nav a { font: 500 14.5px/1 var(--font-sans); color: var(--fg2); transition: color .15s; }
.nav a:hover { color: var(--fg1); }
.head-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.link { font: 500 14.5px/1 var(--font-sans); color: var(--fg2); transition: color .15s; white-space: nowrap; }
.link:hover { color: var(--fg1); }
/* ---------- shared atoms ---------- */
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font: 600 12.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
color: var(--accent); margin-bottom: 20px;
}
.eyebrow .ast { color: var(--accent); font-size: 1.1em; }
.eyebrow.on-dark { color: var(--blue-300); }
.badge {
display: inline-flex; align-items: center; gap: 7px;
font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
padding: 6px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.badge-tentative { background: var(--status-tentative-bg); color: var(--status-tentative-fg); } .badge-tentative .badge-dot { background: var(--status-tentative-dot); }
.badge-confirmed { background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); } .badge-confirmed .badge-dot { background: var(--status-confirmed-dot); }
.badge-finalized { background: var(--status-finalized-bg); color: var(--status-finalized-fg); } .badge-finalized .badge-dot { background: var(--status-finalized-dot); }
.badge-reorged { background: var(--status-reorged-bg); color: var(--status-reorged-fg); } .badge-reorged .badge-dot { background: var(--status-reorged-dot); }
/* generic section */
.sec { max-width: 1200px; margin: 0 auto; padding: 96px 32px; }
.sec-head { max-width: 720px; margin-bottom: 48px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.seclabel {
display: inline-flex; align-items: center; gap: 8px;
font: 600 12.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
color: var(--accent); margin-bottom: 18px;
}
.seclabel .ast { font-size: 1.1em; }
.sec h2 { font: 600 clamp(28px, 3.6vw, 42px)/1.1 var(--font-display); letter-spacing: -0.022em; }
.sec-lead { font: 400 18px/1.55 var(--font-sans); color: var(--fg2); margin-top: 18px; }
/* reveal-on-scroll — only hides when JS is active, so content stays visible if JS fails */
.reveal { transition: opacity .6s cubic-bezier(.2,0,0,1), transform .6s cubic-bezier(.2,0,0,1); }
.js .reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; }
/* =============================================================================
HERO
============================================================================= */
.hero { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink-950) 7%, transparent) 1px, transparent 0);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(900px 520px at 72% 18%, #000, transparent 78%);
mask-image: radial-gradient(900px 520px at 72% 18%, #000, transparent 78%);
}
.hero-bg::after {
content: ""; position: absolute; top: -120px; right: -60px; width: 760px; height: 560px;
background: radial-gradient(620px 420px at 70% 28%, color-mix(in srgb, var(--blue-400) 20%, transparent), transparent 70%);
}
.hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 88px 32px 84px;
display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 60px; align-items: center; }
.hero h1 { font: 600 clamp(40px, 5.2vw, 66px)/1.03 var(--font-display); letter-spacing: -0.03em; color: var(--fg1); }
.hero h1 .grad { background: linear-gradient(96deg, var(--blue-600), var(--blue-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font: 400 19px/1.55 var(--font-sans); color: var(--fg2); margin: 24px 0 32px; max-width: 530px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1 var(--font-sans); color: var(--fg3); }
.hero-meta svg { color: var(--accent); }
/* hero live card (dark) */
.livecard {
background: var(--ink-900); border: 1px solid var(--ink-800); border-radius: var(--r-xl);
padding: 20px; box-shadow: var(--shadow-lg); color: #F2F5FC; position: relative; overflow: hidden;
}
.livecard::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(420px 200px at 80% -10%, color-mix(in srgb, var(--blue-500) 24%, transparent), transparent 70%);
}
.lc-head { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-mono); color: var(--ink-400); padding-bottom: 15px; border-bottom: 1px solid var(--ink-800); position: relative; z-index: 1; }
.lc-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-finalized-dot); box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-finalized-dot) 60%, transparent); animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-finalized-dot) 50%, transparent); } 50% { opacity: .55; box-shadow: 0 0 0 5px transparent; } }
.lc-quorum { margin-left: auto; color: var(--ink-500); }
.lc-rows { position: relative; z-index: 1; }
.lc-row { display: grid; grid-template-columns: 118px 1fr auto; align-items: center; gap: 14px;
padding: 13px 4px; border-bottom: 1px solid var(--ink-850); }
.lc-row:last-child { border-bottom: none; }
.lc-row.fresh { animation: rowin .42s cubic-bezier(.2,0,0,1); }
@keyframes rowin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lc-sig { font: 600 14px/1.2 var(--font-display); }
.lc-sub { font: 500 11px/1.3 var(--font-mono); color: var(--ink-500); margin-top: 4px; }
.lc-block { font: 500 11px/1 var(--font-mono); color: var(--ink-400); text-align: right; }
.lc-badge { justify-self: start; }
.lc-foot { display: flex; align-items: center; gap: 8px; padding-top: 15px; margin-top: 4px; border-top: 1px solid var(--ink-800); position: relative; z-index: 1; }
.lc-srcs { display: flex; gap: 7px; }
.lc-src { font: 500 11px/1 var(--font-mono); padding: 6px 10px; border-radius: var(--r-pill); background: var(--ink-850); color: var(--ink-500); border: 1px solid var(--ink-700); transition: all .4s; }
.lc-src.on { background: color-mix(in srgb, var(--blue-400) 16%, var(--ink-900)); color: #8FAAFF; border-color: color-mix(in srgb, var(--blue-400) 40%, transparent); }
.lc-conf { margin-left: auto; font: 500 11px/1 var(--font-mono); color: var(--ink-400); }
.lc-conf b { color: var(--status-finalized-fg); }
/* ---------- source strip ---------- */
.strip { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--surface); }
.strip-inner { max-width: 1200px; margin: 0 auto; padding: 26px 32px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.strip-label { font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); max-width: 180px; }
.strip-sources { display: flex; gap: 14px; flex-wrap: wrap; flex: 1; }
.strip-src { display: inline-flex; align-items: center; gap: 9px; font: 500 15px/1 var(--font-sans); color: var(--fg1); padding: 9px 15px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.strip-src svg { color: var(--fg3); }
.strip-src .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-finalized-dot); }
/* =============================================================================
GUARANTEE — trust model
============================================================================= */
.trustbar { height: 6px; border-radius: var(--r-pill); margin-bottom: 36px; overflow: hidden;
background: linear-gradient(90deg, var(--status-tentative-dot) 0%, var(--status-confirmed-dot) 46%, var(--status-finalized-dot) 86%); }
.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.status-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; background: var(--surface); position: relative; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.status-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.status-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.sc-tentative::before { background: var(--status-tentative-dot); }
.sc-confirmed::before { background: var(--status-confirmed-dot); }
.sc-finalized::before { background: var(--status-finalized-dot); }
.sc-reorged::before { background: var(--status-reorged-dot); }
.sc-step { font: 500 11px/1 var(--font-mono); color: var(--fg3); float: right; }
.status-card p { font: 400 14px/1.55 var(--font-sans); color: var(--fg2); margin: 16px 0 0; }
.crit-rule { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
.crit-rule > svg { color: var(--accent); flex: none; margin-top: 2px; }
.crit-rule div { font: 400 15.5px/1.6 var(--font-sans); color: var(--fg1); }
.crit-rule code { font: 500 13px/1 var(--font-mono); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 2px 6px; }
/* =============================================================================
EXPLAINER — scroll-driven pipeline
============================================================================= */
.explainer { background: var(--bg); color: #F2F5FC; position: relative; }
.explainer-track { position: relative; padding: 24px 0; }
.explainer-sticky {
position: sticky; top: 88px; height: min(900px, calc(100vh - 104px)); min-height: 0;
width: min(1480px, calc(100% - 48px)); margin: 0 auto;
display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;
background: var(--ink-950); border: 1px solid var(--ink-800);
border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}
.exp-glow { position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(1200px 720px at 50% 100%, color-mix(in srgb, var(--blue-600) 30%, transparent), transparent 72%); }
.exp-head { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; width: 100%; padding: 26px 40px 0; }
.exp-head h2 { font: 600 clamp(24px, 2.8vw, 34px)/1.1 var(--font-display); letter-spacing: -0.02em; color: #F2F5FC; }
.exp-stage { position: relative; z-index: 1; flex: 1; min-height: 0; max-width: 1400px; width: 100%; margin: 0 auto; padding: 0 40px;
display: grid; grid-template-columns: 360px 1fr; gap: 30px; align-items: center; }
.exp-steps { display: flex; flex-direction: column; gap: 6px; }
.exp-step { padding: 10px 14px; border-radius: var(--r-md); border: 1px solid transparent; transition: all .3s cubic-bezier(.2,0,0,1); opacity: .4; }
.exp-step.active { opacity: 1; background: color-mix(in srgb, var(--blue-500) 12%, var(--ink-900)); border-color: color-mix(in srgb, var(--blue-400) 30%, transparent); }
.exp-step-n { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--blue-300); }
.exp-step h3 { font: 600 15.5px/1.2 var(--font-display); margin: 6px 0 4px; color: #F2F5FC; }
.exp-step p { font: 400 12.5px/1.45 var(--font-sans); color: var(--ink-300); margin: 0; }
.exp-canvas { width: 100%; height: 100%; max-height: 540px; }
.exp-progress { position: relative; z-index: 2; max-width: 1400px; width: 100%; margin: 0 auto; padding: 12px 40px 18px; display: flex; align-items: center; gap: 14px; }
.exp-progress-track { flex: 1; height: 3px; background: var(--ink-800); border-radius: var(--r-pill); overflow: hidden; }
.exp-progress-fill { height: 100%; background: var(--blue-400); border-radius: var(--r-pill); }
.exp-progress-label { font: 500 11px/1 var(--font-mono); color: var(--ink-500); letter-spacing: .08em; }
/* SVG diagram element styles */
.dg-box { fill: var(--ink-850); stroke: var(--ink-600); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.dg-box.live { fill: color-mix(in srgb, var(--blue-600) 16%, var(--ink-900)); stroke: color-mix(in srgb, var(--blue-400) 55%, transparent); }
.dg-box.engine { fill: color-mix(in srgb, var(--blue-600) 14%, var(--ink-900)); stroke: color-mix(in srgb, var(--blue-400) 26%, transparent); }
.dg-box.engine.live { stroke: var(--blue-400); }
.dg-label { font: 600 14px var(--font-mono); fill: #E6ECFF; }
.dg-sub { font: 500 11px var(--font-mono); fill: var(--ink-400); }
.dg-wire { fill: none; stroke: var(--ink-700); stroke-width: 2; }
.dg-wire-on { fill: none; stroke: var(--blue-400); stroke-width: 2.5; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--blue-400) 60%, transparent)); }
.dg-token { fill: var(--blue-300); filter: drop-shadow(0 0 5px var(--blue-400)); }
.dg-out { font: 600 13px var(--font-mono); fill: #4ED9A4; }
/* =============================================================================
REORG demo
============================================================================= */
.reorg { max-width: 1200px; margin: 0 auto; padding: 96px 32px; }
.reorg-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: center; }
.reorg-panel { background: var(--ink-900); border: 1px solid var(--ink-800); border-radius: var(--r-xl); padding: 22px; box-shadow: var(--shadow-lg); color: #F2F5FC; }
.reorg-panel-head { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-mono); color: var(--ink-400); padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--ink-800); }
/* dot + cursor stay grouped on line 1; on narrow screens the tag wraps below them */
.rr-head-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.rr-cursor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* tag pill is always one line at its natural width — never wraps (which used to
grow the head height as the label text changed across the episode) */
.reorg-step-tag { margin-left: auto; flex: none; white-space: nowrap; padding: 4px 10px; border-radius: var(--r-pill); font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--ink-850); color: var(--ink-300); border: 1px solid var(--ink-700); transition: all .3s; }
.reorg-step-tag.alert { background: var(--status-reorged-bg); color: var(--status-reorged-fg); border-color: color-mix(in srgb, var(--status-reorged-dot) 45%, transparent); }
.rr-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 6px; border-bottom: 1px solid var(--ink-850); transition: background .3s, opacity .3s; }
.rr-row:last-child { border-bottom: none; }
.rr-row.flash { animation: rrflash 1s cubic-bezier(.2,0,0,1); }
@keyframes rrflash { 0%,100% { background: transparent; } 25% { background: color-mix(in srgb, var(--status-reorged-dot) 22%, transparent); } }
.rr-row.dropped { opacity: .4; }
.rr-row.correction { background: color-mix(in srgb, var(--status-reorged-dot) 10%, transparent); border-radius: var(--r-sm); }
.rr-sig { font: 600 14px/1.2 var(--font-display); }
.rr-sub { font: 500 11px/1.3 var(--font-mono); color: var(--ink-500); margin-top: 4px; }
.rr-strike { text-decoration: line-through; text-decoration-color: var(--status-reorged-dot); }
.reorg-replay { margin-top: 18px; display: flex; gap: 10px; }
.reorg-replay button { font: 600 12px/1 var(--font-sans); padding: 9px 14px; border-radius: var(--r-sm); border: 1px solid var(--ink-700); background: var(--ink-850); color: #E6ECFF; cursor: pointer; transition: all .15s; }
.reorg-replay button:hover { border-color: var(--ink-500); }
.reorg-steps-list { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.reorg-sl { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); transition: all .3s; }
.reorg-sl.active { border-color: color-mix(in srgb, var(--status-reorged-dot) 45%, transparent); box-shadow: var(--shadow-sm); }
.reorg-sl-ic { width: 34px; height: 34px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex: none; background: var(--surface-2); color: var(--fg3); transition: all .3s; }
.reorg-sl.active .reorg-sl-ic { background: var(--status-reorged-bg); color: var(--status-reorged); }
.reorg-sl-t { font: 600 15px/1.3 var(--font-display); }
.reorg-sl-d { font: 400 13.5px/1.5 var(--font-sans); color: var(--fg2); margin-top: 3px; }
/* =============================================================================
WIRE FORMAT
============================================================================= */
.wire { background: var(--surface); border-top: 1px solid var(--border-subtle); }
.wire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.code-card { background: var(--ink-950); border: 1px solid var(--ink-800); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.code-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--ink-800); background: var(--ink-900); }
.code-dot { width: 11px; height: 11px; border-radius: 50%; }
.code-title { margin-left: 10px; font: 500 12px/1 var(--font-mono); color: var(--ink-400); }
.code-body { padding: 20px 22px; font: 500 13px/1.7 var(--font-mono); color: #C9D3EA; overflow-x: auto; }
.code-body .ln { display: block; white-space: pre; }
.tk-key { color: #8FAAFF; }
.tk-str { color: #4ED9A4; }
.tk-num { color: #F3C44E; }
.tk-punc { color: var(--ink-500); }
.tk-cmt { color: var(--ink-500); font-style: italic; }
.tk-hl { background: color-mix(in srgb, var(--blue-500) 22%, transparent); border-radius: 3px; padding: 0 3px; }
.wire-fields { display: flex; flex-direction: column; gap: 4px; }
.wire-field { display: grid; grid-template-columns: 168px 1fr; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--border); }
.wire-field:last-child { border-bottom: none; }
.wire-field code { font: 600 13px/1.4 var(--font-mono); color: var(--accent); align-self: start; }
.wire-field p { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--fg2); }
/* =============================================================================
DEPLOYMENT
============================================================================= */
.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 0 auto; }
.model-card { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px; background: var(--surface); display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; }
.model-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.model-card.is-feat { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: var(--shadow-md); }
.model-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.model-ic { width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.model-tag { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 11px; }
.model-card h3 { font: 600 25px/1.1 var(--font-display); letter-spacing: -0.01em; }
.model-blurb { font: 400 15px/1.55 var(--font-sans); color: var(--fg2); margin: 12px 0 22px; }
.model-points { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; flex: 1; }
.model-points li { display: flex; align-items: flex-start; gap: 10px; font: 500 14px/1.45 var(--font-sans); color: var(--fg1); }
.model-points svg { color: var(--accent); flex: none; margin-top: 1px; }
/* =============================================================================
PRICING
============================================================================= */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; background: var(--surface); display: flex; flex-direction: column; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; }
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.price-card.is-feat { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--shadow-md); }
.price-flag { position: absolute; top: -11px; left: 28px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--blue-600); padding: 6px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.price-name { font: 600 19px/1.2 var(--font-display); }
.price-sub { font: 400 13.5px/1.5 var(--font-sans); color: var(--fg2); margin: 8px 0 20px; min-height: 40px; }
.price-amt { display: flex; align-items: baseline; gap: 6px; }
.price-amt .num { font: 600 40px/1 var(--font-display); letter-spacing: -0.02em; }
.price-amt .per { font: 500 13px/1.3 var(--font-mono); color: var(--fg3); }
.price-amt.custom .num { font-size: 30px; }
.price-divider { height: 1px; background: var(--border); margin: 22px 0; }
.price-points { display: flex; flex-direction: column; gap: 11px; flex: 1; margin-bottom: 24px; }
.price-points li { display: flex; align-items: flex-start; gap: 10px; font: 500 13.5px/1.45 var(--font-sans); color: var(--fg1); }
.price-points svg { color: var(--accent); flex: none; margin-top: 1px; }
.price-note { font: 400 12px/1.5 var(--font-sans); color: var(--fg3); text-align: center; margin-top: 28px; }
/* =============================================================================
QUICKSTART
============================================================================= */
.qs { background: var(--ink-950); color: #F2F5FC; }
.qs-inner { max-width: 1100px; margin: 0 auto; padding: 96px 32px; }
.qs-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.qs-head h2 { font: 600 clamp(28px,3.4vw,40px)/1.1 var(--font-display); letter-spacing: -0.02em; color: #F2F5FC; }
.qs-head p { font: 400 18px/1.55 var(--font-sans); color: var(--ink-300); margin-top: 16px; }
.qs-tabs { display: flex; gap: 6px; margin-bottom: -1px; }
.qs-tab { font: 600 13px/1 var(--font-mono); padding: 11px 16px; border: 1px solid transparent; border-bottom: none; border-radius: var(--r-md) var(--r-md) 0 0; color: var(--ink-400); background: transparent; cursor: pointer; transition: all .15s; }
.qs-tab.active { color: #E6ECFF; background: var(--ink-900); border-color: var(--ink-800); }
.qs-tab:hover:not(.active) { color: var(--ink-200); }
.qs-codewrap { border: 1px solid var(--ink-800); border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg); background: var(--ink-900); overflow: hidden; }
/* =============================================================================
FAQ
============================================================================= */
.faq-grid { max-width: 840px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 24px 4px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font: 600 18px/1.35 var(--font-display); color: var(--fg1); letter-spacing: -0.01em; }
.faq-q svg { color: var(--fg3); flex: none; transition: transform .25s cubic-bezier(.2,0,0,1); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .3s cubic-bezier(.2,0,0,1); }
.faq-a-inner { padding: 0 4px 24px; font: 400 16px/1.65 var(--font-sans); color: var(--fg2); max-width: 700px; }
.faq-a-inner code { font: 500 13px/1 var(--font-mono); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-xs); padding: 2px 6px; }
/* =============================================================================
CTA + FOOTER
============================================================================= */
.cta-band { background: linear-gradient(180deg, var(--ink-900), var(--ink-950)); color: #fff; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(640px 320px at 50% 0%, color-mix(in srgb, var(--blue-500) 22%, transparent), transparent 70%); }
.cta-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 96px 32px; text-align: center; }
.cta-band h2 { font: 600 clamp(30px, 3.8vw, 46px)/1.06 var(--font-display); letter-spacing: -0.022em; }
.cta-band p { font: 400 18px/1.55 var(--font-sans); color: var(--ink-300); margin: 18px 0 34px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.foot { background: var(--ink-950); color: #F2F5FC; border-top: 1px solid var(--ink-800); }
.foot-inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px 40px; display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; }
.foot-brand .logo { color: #fff; }
.foot-brand p { font: 400 14px/1.55 var(--font-sans); color: var(--ink-400); margin: 16px 0 0; max-width: 260px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot-h { font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 16px; }
.foot-col a { display: block; font: 500 14px/1 var(--font-sans); color: var(--ink-300); margin-bottom: 13px; transition: color .15s; }
.foot-col a:hover { color: #fff; }
.foot-base { max-width: 1200px; margin: 0 auto; padding: 22px 32px; border-top: 1px solid var(--ink-800); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 12px/1 var(--font-mono); color: var(--ink-500); }
/* =============================================================================
RESPONSIVE
============================================================================= */
@media (max-width: 1000px) {
.hero-inner, .wire-grid, .reorg-grid { grid-template-columns: 1fr; gap: 40px; }
.price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
.exp-stage { grid-template-columns: 1fr; gap: 16px; }
.exp-canvas { max-height: 360px; }
}
@media (max-width: 820px) {
.nav, .head-cta .link { display: none; }
.status-grid { grid-template-columns: 1fr 1fr; }
.model-grid, .foot-inner { grid-template-columns: 1fr; }
.sec { padding: 64px 24px; }
.wrap, .head-inner, .hero-inner, .strip-inner, .foot-inner, .foot-base { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 540px) {
.status-grid { grid-template-columns: 1fr; }
.foot-cols { grid-template-columns: 1fr 1fr; }
}
/* Small screens: let the hero / reorg / wire columns shrink so the dark stream
and code cards never push the page wider than the viewport. The code block then
scrolls inside its card instead of touching the edge; mono signatures truncate. */
@media (max-width: 1000px) {
.hero-inner > div, .reorg-grid > div, .wire-grid > div { min-width: 0; }
.lc-row > div, .rr-row > div { min-width: 0; }
.lc-sig, .rr-sig { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* replay-cursor head: keep the cursor on one line and drop the status pill to a
second line, so the head height never changes as the pill label changes */
.reorg-panel-head { flex-wrap: wrap; }
.rr-head-main { flex: 1 1 100%; }
.reorg-step-tag { margin-left: 0; }
}
/* The scroll-driven sticky pipeline stage needs both width and height to fit.
When the viewport is too narrow (<1000px) OR too short (<760px) for the
animated diagram, the explainer collapses to a clean stacked list of steps;
the diagram and progress scrubber (desktop-only flourishes) are hidden. */
@media (max-width: 1000px), (max-height: 840px) {
.explainer-track { height: auto !important; }
.explainer-sticky { position: static; width: auto; height: auto; min-height: 0; }
.exp-stage { display: block; padding: 4px 24px 30px; }
.exp-canvas, .exp-progress { display: none; }
.exp-head { padding: 26px 24px 0; }
.exp-steps { gap: 10px; }
.exp-step { opacity: 1; }
}
/* Large screens: by default the sticky stage caps at 1480px wide / 1400px content,
so on a 1440p+ display it sits as a small island with huge side margins and a
shrunken diagram. When there's room (wide AND tall enough for the sticky layout),
scale the panel, content area, steps column, and diagram up to fill the space. */
@media (min-width: 1700px) and (min-height: 841px) {
.explainer-sticky { width: min(2160px, calc(100% - 200px)); height: min(1080px, calc(100vh - 104px)); }
.exp-head, .exp-stage { max-width: none; }
.exp-stage { grid-template-columns: 400px 1fr; gap: 40px; }
.exp-canvas { max-height: 780px; }
}
/* =============================================================================
REDUCED MOTION
============================================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.lc-livedot, .lc-row.fresh, .rr-row.flash, .rr-row.rr-appear { animation: none !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}
/* =============================================================================
STATIC-PAGE BEHAVIOR — small additions that replace React-managed state.
============================================================================= */
/* header scroll shadow (was an inline style toggled in React) */
.head.scrolled { box-shadow: var(--shadow-sm); }
/* FAQ accordion: the open answer is visible without JS (CSS fallback height);
with JS, app.js sets the exact scrollHeight inline for a smooth transition. */
.faq-item.open .faq-a { max-height: 600px; }
/* reorg correction / re-attested rows: kept in the layout (visibility:hidden) so the
panel's height is fixed across the episode — it never reflows the page as rows come
and go. They animate in (fill-mode both avoids a flash) when JS reveals them. */
.rr-row.rr-reserved { visibility: hidden; }
.rr-row.rr-appear { animation: rowin .4s cubic-bezier(.2,0,0,1) both; }
/* The transfer row's badge flips between "confirmed" and "reorged" (different widths).
That changed the text column width, which re-wrapped the sub line and changed the
row height. A stable badge width keeps the column — and the row height — constant. */
#rrBadge { min-width: 100px; justify-content: center; }
/* quickstart tabs: show only the active code pane (all three live in the DOM) */
.qs-pane { display: none; }
.qs-pane.active { display: block; }
/* force-hide elements with the hidden attribute (beats .rr-row's display:grid) */
[hidden] { display: none !important; }