/* ══════════════════════════════════════════════════════════════════════════
   RevenueOS — shared design system.  SINGLE SOURCE OF TRUTH.

   Loaded last by index.html, pricing.html and proof.html, so it overrides
   each page's legacy inline <style>.  Edit design HERE, never in a page.
   The same token values are mirrored in src/revenueos/panel.py (STYLE) so
   the marketing site and the customer's dashboard read as one product.

   Language: Apple product-stage.
     · surfaces #000 → #111 → #1d1d1f → #f5f5f7 → #fff
     · radii restricted to 10 / 28 / 36 / 980 — never another value
     · NO shadows: depth is surface contrast only
     · tracking tightens as type grows; #0071e3 is the only filled CTA
     · #f56900 marks category eyebrows, never body text
   ══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;
  --black:#000; --carbon:#111; --obsidian:#1d1d1f; --graphite:#333336;
  --frost:#f5f5f7; --paper:#fff;
  --platinum:#86868b; --smoke:#424245; --silver:#ccc; --hairline:#d2d2d7;
  --blue:#0071e3; --link:#0066cc; --halo:#2997ff; --orange:#f56900;
  --green:#30d158;
  --r-link:10px; --r-card:28px; --r-btn:36px; --r-pill:980px;
  --ease:cubic-bezier(.32,.72,0,1); --t-fast:140ms; --t-base:300ms; --t-slow:560ms;
  --gut:clamp(20px,5vw,40px);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* legacy names the existing markup still references, remapped */
  --bg:var(--black); --panel:var(--obsidian); --ink:var(--frost);
  --ink-soft:var(--platinum); --muted:var(--platinum); --border:var(--smoke);
  --accent:var(--blue); --accent-ink:#fff; --accent-soft:rgba(0,113,227,.14);
  --good:var(--green); --good-soft:rgba(48,209,88,.14); --warn:#ffd60a;
  --code-bg:var(--obsidian); --code-ink:var(--frost);
  --radius:var(--r-card); --shadow:none;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:78px}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--black);color:var(--frost);
  font:400 17px/1.47 var(--sans);letter-spacing:-.022em;
  padding-inline:0;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
img,svg,video{max-width:100%;height:auto;display:block}
pre,table{max-width:100%;overflow-x:auto;min-width:0}
.wrap>*,section>*{min-width:0}

/* ── type: tracking tightens as size grows ────────────────────────────── */
h1{font-size:clamp(40px,6.6vw,72px);font-weight:700;line-height:1.06;letter-spacing:-.012em;margin:0 0 20px;color:var(--frost)}
h2{font-size:clamp(30px,4.4vw,48px);font-weight:700;line-height:1.08;letter-spacing:-.015em;margin:0 0 14px;color:var(--frost)}
h3{font-size:21px;font-weight:600;line-height:1.19;letter-spacing:-.013em;margin:0 0 8px;color:var(--frost)}
.eyebrow{
  font-size:15px;font-weight:600;line-height:1.24;letter-spacing:-.011em;
  text-transform:none;color:var(--orange);margin:0 0 12px;
}
/* A lede introduces; it is not a body paragraph. The markup reuses .lede for
   both, and one instance carries 422 characters, so the size sits between an
   intro and body and the measure is capped to Apple's readable range (45-75
   characters). 21px over 130 characters per line is not a hierarchy, it is a
   wall. */
.lede{font-size:clamp(17px,1.7vw,19px);line-height:1.5;letter-spacing:-.014em;color:var(--platinum);max-width:60ch;margin:0 0 28px}
.hero .lede{font-size:clamp(19px,2.1vw,21px);line-height:1.47;max-width:46ch}
.install-notes,.evidence-links,.loop-legend,.brief-box pre+*{max-width:72ch}
/* a link is already blue; a dashed rule under it reads as a placeholder */
.todo-link{border-bottom:0}
.todo-link:hover{text-decoration:underline}
p{color:var(--platinum)}
a{color:var(--halo);text-decoration:none}
a:hover{text-decoration:underline}
code,pre,.mono{font-family:var(--mono);letter-spacing:0}
:where(a,button,.cta-btn):focus-visible{outline:2px solid var(--halo);outline-offset:3px;border-radius:var(--r-link)}

/* ── stages: alternating dark surfaces, generous gaps ─────────────────── */
section{padding-block:clamp(72px,10vw,112px);background:var(--black)}
section.tight{padding-block:clamp(56px,8vw,88px)}
section:nth-of-type(even){background:var(--carbon)}

/* ── chrome: translucent, content scrolls beneath ─────────────────────── */
header.topnav{
  position:sticky;top:0;z-index:40;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-base) var(--ease);
  padding-top:env(safe-area-inset-top);
}
header.topnav.is-scrolled{border-bottom-color:var(--smoke)}
.topnav .row{display:flex;align-items:center;gap:16px;padding-block:12px;flex-wrap:nowrap}
.brand{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--frost);gap:9px}
/* The mark is masked, not drawn: it takes `currentColor`, so it is frost on this black
   header and ink anywhere the ground is light — one file, both semantics, no second asset.
   logo-mark.svg is the 8-element cut; the full 24-element logo.svg turns to mush under
   about 40px, the same optical-size reasoning type gets. */
.brand .dot{
  width:20px;height:20px;border-radius:0;background:currentColor;
  -webkit-mask:url(logo-mark.svg) center/contain no-repeat;
  mask:url(logo-mark.svg) center/contain no-repeat;
}
nav.links{display:flex;gap:2px;margin-inline:auto;flex-wrap:nowrap}
nav.links a{
  font-size:12px;font-weight:400;letter-spacing:-.01em;color:var(--frost);opacity:.82;
  padding:8px 11px;border-radius:var(--r-pill);white-space:nowrap;
  transition:opacity var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
nav.links a:hover{opacity:1;background:rgba(255,255,255,.08);text-decoration:none;color:var(--frost)}
nav.links a[aria-current="true"]{opacity:1;background:rgba(255,255,255,.12)}

/* ── buttons: 36px radius; exactly one filled blue per viewport ───────── */
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;border:1px solid var(--blue);
  padding:12px 22px;min-height:44px;border-radius:var(--r-btn);
  font-size:14px;font-weight:600;letter-spacing:-.016em;line-height:1.2;
  white-space:normal;text-align:center;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.cta-btn:hover{background:#0077ed;text-decoration:none}
.cta-btn:active{transform:scale(.97)}
.cta-btn.ghost{background:transparent;color:var(--frost);border-color:var(--smoke)}
.cta-btn.ghost:hover{background:transparent;border-color:var(--silver)}
.cta-btn.small{padding:9px 16px;font-size:13px;border-radius:var(--r-btn)}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(64px,9vw,104px);text-align:left}
.hero .lede{margin-inline:0}
.hero-ctas{justify-content:flex-start;gap:12px;margin-top:8px}
.hero-note{font-size:13px;color:var(--platinum);margin-inline:0;max-width:56ch;margin-top:20px}

/* ── evidence ─────────────────────────────────────────────────────────── */
.brief-box{
  background:var(--obsidian);color:var(--frost);
  border:1px solid var(--smoke);border-radius:var(--r-card);padding:26px 28px;box-shadow:none;
}
.brief-box .title{color:var(--orange);font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.brief-box pre{font-size:14px;line-height:1.7}
.chip{
  font-size:12px;padding:6px 13px;border-radius:var(--r-pill);
  border:1px solid var(--smoke);color:var(--platinum);
}
ul.plain li{color:var(--platinum);font-size:17px;line-height:1.47;margin-bottom:16px}
ul.plain li b{color:var(--frost);font-weight:600}
.tick{
  width:20px;height:20px;border-radius:var(--r-pill);
  background:transparent;color:var(--green);font-weight:700;font-size:14px;
}
.evidence-shots img{
  border-radius:var(--r-card);border:1px solid var(--smoke);box-shadow:none;
}
.evidence-shots figcaption{margin-top:14px;font-size:14px;color:var(--platinum)}
.evidence-links{color:var(--platinum);font-size:15px}
.todo-link{border-bottom:1px dashed var(--smoke)}

/* ── the loop: a rhythm, not a card grid ──────────────────────────────── */
.loop{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(32px,5vw,52px);border-top:1px solid var(--smoke)}
.loop-step{
  background:transparent;border:0;border-bottom:1px solid var(--smoke);border-radius:0;
  padding:26px 0 26px 68px;position:relative;
}
.loop-step .n{
  position:absolute;left:0;top:31px;
  font:600 13px/1 var(--mono);color:var(--orange);letter-spacing:.04em;
}
.loop-step .label{font-size:21px;font-weight:600;letter-spacing:-.013em;margin:0 0 6px;color:var(--frost)}
.loop-step p{font-size:17px;line-height:1.47;color:var(--platinum);max-width:64ch}
.loop-legend{margin-top:20px;font-size:15px;color:var(--platinum)}

/* ── pricing: 28px cards, 28px padding, no shadow ─────────────────────── */
.price-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(32px,5vw,52px)}
.price-card{
  background:var(--obsidian);border:1px solid transparent;border-radius:var(--r-card);
  padding:28px;box-shadow:none;min-width:0;
  transition:border-color var(--t-base) var(--ease);
}
.price-card:hover{border-color:var(--smoke)}
.price-card.feat{border-color:var(--blue);box-shadow:none}
.price-card .tier{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--frost)}
.price-card .price{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:10px 0 2px;color:var(--frost)}
.price-card .price small{font-size:14px;font-weight:400;color:var(--platinum)}
.price-card .blurb,.price-card .tier-note{color:var(--platinum);font-size:14px;line-height:1.43}
.price-card li{font-size:14px;line-height:1.43;color:var(--platinum);padding-left:22px}
.price-card li::before{color:var(--green);font-weight:600}
.price-card .cta-btn{width:100%}

/* ── button craft (Apple: a label, not a sentence) ────────────────────── */
/* Card content reads left-aligned; centred lists force the eye to re-find
   the left edge on every line. Only the price block stays optically centred
   by its own margin, not by text-align. */
.price-card,.price-card li,.price-card .blurb,.price-card .tier-note{text-align:left}
.price-card ul{margin-bottom:20px}
.price-card li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;padding-left:0}
.price-card li::before{position:static;color:var(--green);font-weight:600;line-height:1.43}
/* one line, one job — the explanation lives in .tier-note above */
.cta-btn{white-space:nowrap;padding-inline:24px}
.price-card .cta-btn{white-space:normal}
.cta-btn.block{width:100%}
/* Inline code, every page. Each page's legacy inline style paints it for a light
   background — proof.html sets color:#28299e on var(--accent-soft), and that token
   now remaps to a translucent blue over black, so the HTTP table read as dark ink on
   a dark chip (about 1.3:1). One treatment here instead of a per-section override,
   so a new page or a new table cannot inherit the light-theme colours again. The
   second line keeps code inside a pre or a terminal block unchipped. */
code{
  background:rgba(255,255,255,.08);color:var(--frost);
  border-radius:6px;padding:2px 6px;font-size:.92em;
}
pre code,.code-block code,.audit-out code,.loopdemo code{
  background:none;color:inherit;padding:0;border-radius:0;font-size:inherit;
}

/* inline code inside a tier must not read as a highlighted link */
.price-card code,.tier-note code,ul.plain code{
  background:rgba(255,255,255,.07);color:var(--frost);
  border-radius:6px;padding:2px 6px;font-size:13px;
}
.see-all{margin-top:28px;font-size:17px}

/* ── code ─────────────────────────────────────────────────────────────── */
.code-block{
  background:var(--obsidian);border:1px solid var(--smoke);
  border-radius:var(--r-card);padding:28px;box-shadow:none;
}
.code-block pre{font-size:14px;line-height:1.85;color:var(--frost)}
.code-block .c1{color:var(--platinum)}
.install-notes{font-size:15px;color:var(--platinum)}
.install-notes code{background:rgba(255,255,255,.08);color:var(--halo);border-radius:6px;padding:2px 7px;font-size:13px}

/* ── tables ───────────────────────────────────────────────────────────────
   pricing.html hardcodes light hex for its zebra and group rows
   (tbody tr:nth-child(odd){background:#fcfcfd}; .group-row th{#f4f4fb}).
   Token remapping cannot reach a literal, and those selectors outrank a bare
   td/th, so each is overridden explicitly at matching specificity. Row
   separation here is a hairline, not a fill — alternating light/dark bands
   strobe against a dark page.                                             */
.table-wrap{
  background:var(--obsidian);border:1px solid var(--smoke);
  border-radius:var(--r-card);overflow:hidden;
}
.table-wrap table{border-collapse:collapse;width:100%;background:transparent}
.table-wrap thead th{
  background:transparent;color:var(--frost);
  font-size:12px;font-weight:600;letter-spacing:-.01em;
  padding:18px;border-bottom:1px solid var(--smoke);
}
.table-wrap thead .tierprice{color:var(--platinum);font-weight:400;font-size:13px}
.table-wrap tbody th{
  color:var(--frost);font-weight:400;font-size:15px;letter-spacing:-.016em;
  text-transform:none;padding:14px 18px;border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06));
}
.table-wrap tbody td{
  color:var(--platinum);font-size:15px;text-align:center;padding:14px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;
}
.table-wrap tbody tr:nth-child(odd){background:transparent}
.table-wrap tbody tr:hover{background:rgba(255,255,255,.03)}
.table-wrap .group-row th{
  background:var(--carbon);color:var(--orange);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 18px;
}
.table-wrap tbody tr:last-child th,.table-wrap tbody tr:last-child td{border-bottom:0}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{background:var(--obsidian);color:var(--platinum);font-size:13px;padding-block:44px}
footer a{color:var(--platinum)}
footer a:hover{color:var(--frost)}

/* ── mobile navigation: a sheet, built at body level ──────────────────── */
.navbtn{
  display:none;position:relative;width:44px;height:44px;margin-left:auto;
  border:0;background:transparent;cursor:pointer;z-index:42;-webkit-tap-highlight-color:transparent;
}
.navbtn span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--frost);border-radius:2px;
  transition:transform var(--t-base) var(--ease),opacity var(--t-fast) var(--ease)}
.navbtn span:nth-child(1){top:16px}.navbtn span:nth-child(2){top:22px}.navbtn span:nth-child(3){top:28px}
.navbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.navscrim{position:fixed;inset:0;z-index:38;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity var(--t-base) var(--ease)}
body.nav-open .navscrim{opacity:1;pointer-events:auto}
.navsheet{
  position:fixed;top:0;right:0;bottom:0;z-index:39;width:min(86vw,340px);
  display:flex;flex-direction:column;gap:2px;margin:0;
  padding:calc(env(safe-area-inset-top) + 74px) 20px calc(env(safe-area-inset-bottom) + 28px);
  background:var(--obsidian);border-left:1px solid var(--smoke);
  transform:translate3d(100%,0,0);transition:transform var(--t-base) var(--ease);
  overflow-y:auto;overscroll-behavior:contain;visibility:hidden;
}
body.nav-open .navsheet{transform:none;visibility:visible}
.navsheet a{font-size:17px;font-weight:500;color:var(--frost);padding:14px;border-radius:12px;min-height:44px;display:flex;align-items:center}
.navsheet a:active{background:rgba(255,255,255,.08)}
.navsheet .cta-btn{margin-top:12px;color:#fff}
body.nav-open{overflow:hidden}
@media (max-width:900px){
  .navbtn{display:block}
  nav.links,.nav-cta{display:none}
  body.nav-open header.topnav{z-index:41}
}
@media (min-width:901px){ .navsheet,.navscrim{display:none} }

/* ── cross-document transitions ───────────────────────────────────────────
   index -> pricing -> proof now cross-fade instead of hard-cutting. One
   declaration; browsers without support simply navigate as before.        */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-base);animation-timing-function:var(--ease)}
/* the chrome is continuous across pages, so it must not cross-fade with the body */
header.topnav{view-transition-name:chrome}

/* ── micro-interactions: every interactive surface responds on press ──────
   Apple's rule is feedback on pointer-DOWN, not on release. These were on
   .cta-btn only; a link or a chip that stays inert while a button reacts
   reads as two different products.                                        */
a,button,summary,.chip,.tick,.txtlink{
  -webkit-tap-highlight-color:transparent;
  transition:opacity var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
a:active,summary:active{opacity:.62}
.chip:hover{border-color:var(--silver);color:var(--frost)}
.evidence-shots figure{transition:transform var(--t-base) var(--ease)}
.evidence-shots figure:hover{transform:translateY(-2px)}
.see-all:hover,.evidence-links a:hover{color:var(--frost)}
/* a moving element gets its own layer only while motion is imminent */
.cta-btn,.price-card,.evidence-shots figure{will-change:transform}

/* ── motion ───────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translate3d(0,24px,0)}
.rv.in{opacity:1;transform:none;transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.loop.in .loop-step,.price-grid.in .price-card,.evidence-shots.in figure{animation:riseIn 620ms var(--ease) both}
.loop.in .loop-step:nth-child(1),.price-grid.in .price-card:nth-child(1),.evidence-shots.in figure:nth-child(1){animation-delay:40ms}
.loop.in .loop-step:nth-child(2),.price-grid.in .price-card:nth-child(2),.evidence-shots.in figure:nth-child(2){animation-delay:110ms}
.loop.in .loop-step:nth-child(3),.price-grid.in .price-card:nth-child(3){animation-delay:180ms}
.loop.in .loop-step:nth-child(4),.price-grid.in .price-card:nth-child(4){animation-delay:250ms}
.loop.in .loop-step:nth-child(5){animation-delay:320ms}
@keyframes riseIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .evidence-shots img,.brief-box{animation:driftIn linear both;animation-timeline:view();animation-range:entry 4% entry 76%}
    @keyframes driftIn{from{opacity:0;transform:translate3d(0,44px,0) scale(.978);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
  }
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1040px){ .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .price-grid{grid-template-columns:minmax(0,1fr)}
  .hero-ctas{flex-wrap:wrap}
  .hero-ctas .cta-btn{flex:1 1 100%}
  .loop-step{padding-left:52px}
  .code-block{padding:20px}
  .brief-box{padding:20px}
}

/* ── accessibility: three independent signals ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .cta-btn:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  header.topnav{background:var(--black);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--smoke)}
}
@media (prefers-contrast:more){
  :root{--platinum:#c7c7cc;--smoke:#6e6e73}
  .price-card,.brief-box,.code-block{border-color:var(--silver)}
}

/* ══ The loop, demonstrated ════════════════════════════════════════════════
   The section used to be a headline describing motion. It now performs it:
   a terminal types the real command, streams the real output from the
   2026-09-13 plausible.io run, and drives the five stage chips through to a
   measured green state. Every line below is transcript, not copywriting.   */
.loopdemo{margin-top:clamp(36px,5vw,56px);display:grid;gap:20px}
.stages{display:flex;flex-wrap:wrap;gap:8px}
.stage-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:var(--r-pill);
  border:1px solid var(--smoke);background:transparent;
  font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--platinum);
  transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.stage-chip i{
  width:6px;height:6px;border-radius:var(--r-pill);background:var(--smoke);display:block;
  transition:background-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.stage-chip[data-state="active"]{color:var(--frost);border-color:var(--halo);transform:translateY(-1px)}
.stage-chip[data-state="active"] i{background:var(--halo)}
.stage-chip[data-state="done"]{color:var(--frost);border-color:var(--smoke)}
.stage-chip[data-state="done"] i{background:var(--green)}

.term{
  background:var(--obsidian);border:1px solid var(--smoke);border-radius:var(--r-card);
  overflow:hidden;min-width:0;
}
.term-bar{
  display:flex;align-items:center;gap:10px;padding:13px 20px;
  border-bottom:1px solid var(--smoke);
  font:500 12px/1 var(--mono);color:var(--platinum);letter-spacing:0;
}
.term-bar b{font-weight:500;color:var(--platinum)}
.term-body{
  padding:20px;font:400 13.5px/1.85 var(--mono);letter-spacing:0;color:var(--frost);
  min-height:300px;white-space:pre-wrap;word-break:break-word;
}
.term-line{display:block;opacity:0;animation:lineIn 300ms var(--ease) forwards}
@keyframes lineIn{from{opacity:0;transform:translate3d(0,4px,0)}to{opacity:1;transform:none}}
.term .p{color:var(--halo)}            /* prompt  */
.term .ok{color:var(--green)}          /* success */
.term .dim{color:var(--platinum)}      /* comment */
.term .warn{color:#ffd60a}
.caret{
  display:inline-block;width:7px;height:15px;vertical-align:-2px;
  background:var(--halo);margin-left:2px;animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* the approval card the terminal hands off to */
.demo-card{
  margin-top:14px;border:1px solid var(--smoke);border-radius:var(--r-link);
  padding:16px;display:grid;gap:12px;
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.demo-card.show{opacity:1;transform:none}
.demo-card.done{border-color:rgba(48,209,88,.45)}
.demo-card .k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.demo-card .t{font:500 14px/1.4 var(--sans);letter-spacing:-.016em;color:var(--frost)}
.demo-row{display:flex;gap:8px;flex-wrap:wrap}
.demo-btn{
  font:600 13px/1 var(--sans);letter-spacing:-.016em;
  padding:10px 16px;min-height:38px;border-radius:var(--r-btn);
  border:1px solid var(--smoke);background:transparent;color:var(--frost);cursor:default;
  transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.demo-btn.fill{background:var(--blue);border-color:var(--blue);color:#fff}
.demo-btn.pressed{transform:scale(.96)}
.demo-btn.gone{opacity:0;transform:scale(.96)}
.measured{
  display:inline-flex;align-items:center;gap:8px;
  font:500 13px/1 var(--mono);letter-spacing:0;color:var(--green);
  padding:9px 14px;border-radius:var(--r-pill);
  border:1px solid rgba(48,209,88,.35);background:rgba(48,209,88,.08);
  opacity:0;transform:scale(.94);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.measured.show{opacity:1;transform:none}
.replay{
  justify-self:start;font:500 13px/1 var(--sans);letter-spacing:-.016em;
  background:transparent;border:1px solid var(--smoke);color:var(--platinum);
  padding:9px 15px;border-radius:var(--r-btn);cursor:pointer;opacity:0;
  transition:opacity var(--t-base) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.replay.show{opacity:1}
.replay:hover{color:var(--frost);border-color:var(--silver)}
.replay:active{transform:scale(.96)}

@media (max-width:640px){
  .term-body{font-size:12px;padding:16px;min-height:260px}
  .stage-chip{font-size:12px;padding:8px 13px}
}
/* Reduced motion: no typing, no streaming — the finished transcript is
   rendered immediately and the stage chips show their end state. */
@media (prefers-reduced-motion:reduce){
  .term-line{animation:none;opacity:1}
  .caret{display:none;animation:none}
  .demo-card{opacity:1;transform:none}
  .measured{opacity:1;transform:none}
  .replay{display:none}
}

/* ══ Benchmark gaps closed (vs get-ryze.ai, crawled 2026-09-13) ═══════════
   Their homepage captures a lead in the first viewport, shows the stack it
   integrates with, answers objections in an FAQ, and closes with a final
   stage. Ours did none of those. What is deliberately NOT copied: their
   "Wall of Love" and customer case study — we have zero customers, and
   inventing either is the exact fraud this product refuses to commit.     */

/* ── the audit: a lead magnet we can actually deliver ─────────────────── */
.audit{
  border:1px solid var(--smoke);border-radius:var(--r-card);
  background:var(--obsidian);padding:clamp(24px,4vw,40px);margin-top:clamp(28px,4vw,40px);
  display:grid;gap:20px;
}
.audit-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.audit-input{
  flex:1 1 300px;min-width:0;
  background:rgba(255,255,255,.06);border:1px solid var(--smoke);
  border-radius:var(--r-btn);color:var(--frost);
  font:400 16px/1 var(--sans);letter-spacing:-.016em;padding:14px 20px;min-height:48px;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.audit-input::placeholder{color:var(--platinum)}
.audit-input:focus{outline:none;border-color:var(--halo);background:rgba(255,255,255,.09)}
.audit-out{
  background:var(--black);border:1px solid var(--smoke);border-radius:var(--r-link);
  padding:16px 18px;font:400 13.5px/1.7 var(--mono);letter-spacing:0;color:var(--frost);
  overflow-x:auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.audit-out code{white-space:pre;color:var(--frost)}
.audit-out .p{color:var(--halo)}
.copy{
  flex:0 0 auto;font:600 12px/1 var(--sans);letter-spacing:-.01em;
  background:transparent;border:1px solid var(--smoke);color:var(--platinum);
  padding:8px 13px;border-radius:var(--r-btn);cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.copy:hover{color:var(--frost);border-color:var(--silver)}
.copy:active{transform:scale(.95)}
.copy[data-done="1"]{color:var(--green);border-color:rgba(48,209,88,.4)}
.audit-note{font-size:14px;color:var(--platinum);margin:0}

/* ── the stack it reads, stated plainly ───────────────────────────────── */
.stack{display:grid;gap:14px;margin-top:clamp(28px,4vw,40px)}
.stack-row{display:flex;flex-wrap:wrap;gap:8px}
.stack-tag{
  font:500 13px/1 var(--sans);letter-spacing:-.01em;color:var(--platinum);
  border:1px solid var(--smoke);border-radius:var(--r-pill);padding:9px 15px;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.stack-tag:hover{color:var(--frost);border-color:var(--silver);transform:translateY(-1px)}
.stack-tag.on{color:var(--frost);border-color:var(--smoke)}
.stack-tag.off{opacity:.55}

/* ── numbered reason cards ────────────────────────────────────────────── */
.reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,44px)}
.reason{
  border:1px solid var(--smoke);border-radius:var(--r-card);padding:28px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;
  transition:border-color var(--t-base) var(--ease);
}
.reason:hover{border-color:var(--silver)}
.reason .num{font:700 34px/1 var(--sans);letter-spacing:-.02em;color:var(--graphite)}
.reason h3{margin:0 0 10px}
.reason ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.reason li{display:grid;grid-template-columns:7px minmax(0,1fr);gap:11px;align-items:start;font-size:15px;line-height:1.45;color:var(--platinum)}
.reason li::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:var(--halo);margin-top:8px}
.reason li:nth-child(2)::before{background:var(--orange)}

/* ── FAQ: answers objections without a support ticket ─────────────────── */
.faq{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--smoke)}
.faq details{border-bottom:1px solid var(--smoke)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font:600 19px/1.3 var(--sans);letter-spacing:-.015em;color:var(--frost);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--platinum);border-bottom:1.5px solid var(--platinum);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--t-base) var(--ease),border-color var(--t-fast) var(--ease);
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg);border-color:var(--frost)}
.faq summary:hover::after{border-color:var(--frost)}
.faq p{margin:0 0 24px;font-size:17px;line-height:1.5;color:var(--platinum);max-width:70ch}
.faq details[open] p{animation:faqIn 320ms var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}

/* ── closing stage ────────────────────────────────────────────────────── */
.closer{text-align:center;display:grid;gap:24px;justify-items:center}
.closer .hero-h,.closer h2{max-width:18ch}
.closer .lede{margin-inline:auto;text-align:center}

@media (max-width:820px){ .reasons{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){
  .audit-form .cta-btn{flex:1 1 100%}
  .audit-out{flex-wrap:wrap}
  .reason{padding:22px;grid-template-columns:minmax(0,1fr);gap:12px}
  .faq summary{font-size:17px;padding-right:36px}
}
@media (prefers-reduced-motion:reduce){
  .faq details[open] p{animation:none}
  .stack-tag:hover,.copy:active{transform:none}
}

/* ── hero recording (page content owns the <video>; design owns its frame) ── */
.wire-video{margin:0;max-width:100%}
.hero-video{width:100%;height:auto;display:block;border-radius:28px;border:1px solid #424245;background:#000}
#connects .wire{max-width:900px;margin:28px auto 0}


/* ── the loop diagram (index #connects) ───────────────────────────────────
   One figure, one claim: nothing acts before the customer's yes, and whatever
   does act is measured. Two hand-authored SVGs — a left-to-right band, and a
   stacked one for phones, where a 1020-wide viewBox would shrink a 13px label to
   about 4px. Colour carries exactly one meaning: blue is the gate and the edge
   leaving it. No looping animation — this is a reference, not an ornament. */
.wire{margin:0;max-width:100%}
.wire svg{width:100%;height:auto;display:block}
.wire svg.narrow{display:none}
.wire .node rect{fill:var(--obsidian);stroke:var(--smoke);stroke-width:1}
.wire .node text{text-anchor:middle}
.wire .node .ttl{fill:var(--frost);font:600 15px var(--sans);letter-spacing:-.012em}
.wire .node .sub{fill:var(--platinum);font:400 11.5px var(--sans);letter-spacing:0}
.wire .gate rect{fill:var(--blue);stroke:none}
.wire .gate .ttl{fill:#fff}
.wire .gate .sub{fill:rgba(255,255,255,.86)}
.wire .edge line,.wire .edge path{stroke:var(--smoke);stroke-width:1.5;fill:none}
.wire .edge .go{stroke:var(--blue)}
.wire .head{fill:var(--smoke)}
.wire .head.go{fill:var(--blue)}
.wire .lab text{fill:var(--platinum);font:400 11.5px var(--sans);text-anchor:middle;letter-spacing:0}
.wire .lab .go{fill:var(--halo)}
.wire .chip text{fill:var(--platinum);font:400 11.5px var(--sans);text-anchor:middle;letter-spacing:0}
.wire figcaption{font-size:15px;line-height:1.55;color:var(--platinum);margin-top:18px;max-width:62ch}
.wire figcaption b{color:var(--frost);font-weight:600}
@media (max-width:760px){
  .wire svg.wide{display:none}
  .wire svg.narrow{display:block;max-width:320px;margin-inline:auto}
  #connects .wire figcaption{margin-inline:auto}
}

/* The footer is the one place with room for the full 24-element mark: masked like the
   header's, so it too is currentColor and needs no light-ground twin. */
.foot-mark{
  display:block;width:56px;height:56px;margin-bottom:16px;
  background:currentColor;opacity:.7;
  -webkit-mask:url(logo.svg) center/contain no-repeat;
  mask:url(logo.svg) center/contain no-repeat;
}