/*
 * Design tokens, the reset, the page's background field, and the few
 * primitives every section uses: the shell, section rhythm, headings and
 * buttons. Nothing here belongs to one section.
 */

/*
 * Six small files, no framework and no build step. The site claims the product
 * is small enough to audit; shipping a megabyte of CSS to say so would undercut
 * it.
 *
 * The palette is the panel's, so the product and the page selling it do not
 * look like two different products. Amber rather than the green every other
 * tool in this space uses.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #07090c;
  --surface: #0d1014;
  --surface-2: #13171d;
  --line: #1c2028;
  --line-bright: #2a303a;
  --text: #e9ebf0;
  --text-dim: #949cab;
  --text-faint: #646c7c;
  --amber: #fbbf24;
  --amber-dim: #8a6a1a;
  --danger: #f87171;
  --safe: #4ade80;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --shell: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  position: relative;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* A faint sonar grid behind everything, and one amber source of light at the
   top. Fixed, so scrolling moves the page across the light rather than the
   light travelling with it. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 560px at 72% -8%, rgba(251,191,36,.10), transparent 68%),
    radial-gradient(700px 500px at 8% 34%, rgba(251,191,36,.035), transparent 70%);
}
/* --- Background field ---------------------------------------------------
   Out-of-focus bubbles from the same world as the hero, scrolling with the
   document so each section gets its own light. Deliberately close to
   invisible: it should register as depth, not as decoration. */
.field {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.field i {
  position: absolute;
  top: var(--t); left: var(--l);
  width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%,
    rgba(168,188,214,.075), rgba(168,188,214,.022) 46%, rgba(168,188,214,.006) 72%, transparent 88%);
  filter: blur(26px);
  animation: float calc(34s + var(--i) * 3s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -2.4s);
}
/* A few carry the accent, so the amber in the hero does not stop at the fold. */
.field i.a {
  background: radial-gradient(circle at 38% 34%,
    rgba(251,191,36,.085), rgba(251,191,36,.025) 44%, rgba(251,191,36,.007) 70%, transparent 88%);
}
@keyframes float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -3.5%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .field i { animation: none; } }

body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 12%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 12%, transparent 72%);
}
header, main, footer, .ticker { position: relative; z-index: 1; }

a { color: inherit; }
code { font-family: var(--mono); font-size: .92em; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }

/* Small uppercase mono labels do a lot of work here: they mark every section
   and keep the page feeling like an instrument rather than a brochure. */
.label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.label .on { color: var(--amber); }

/* The dot is a status light, so it breathes rather than flashes: a hard blink
   reads as an error, and this is only saying the thing is running. */
.label .live {
  display: inline-block;
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 1;   text-shadow: 0 0 8px rgba(251,191,36,.75); }
  50%      { opacity: .32; text-shadow: 0 0 2px rgba(251,191,36,.25); }
}
@media (prefers-reduced-motion: reduce) { .label .live { animation: none; } }

.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 6px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-lg svg { width: 19px; height: 19px; }
.btn-primary { background: var(--amber); color: #0a0b0e; font-weight: 600; }
.btn-primary:hover { background: #fdd34f; }
.btn-ghost {
  color: var(--text); border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.05); backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: rgba(255,255,255,.5); }

/* --- Sections ----------------------------------------------------------- */

section { padding: 78px 0; border-top: 1px solid var(--line); position: relative; }
/* No per-section tint: it stepped visibly across the background bubbles, and
   the field behind the page already gives the scroll its rhythm. */

/* The label gets a short amber rule — the same tick marks as the panel. */
.label { position: relative; }
section > .shell > .label::before,
section > .shell.split > div > .label::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 18px; height: 1px; background: var(--amber);
  margin-right: 11px; opacity: .8;
}

h2 {
  font-size: clamp(23px, 2.5vw, 31px);
  letter-spacing: -.028em; line-height: 1.12;
  font-weight: 600; margin: 15px 0 16px;
  max-width: 21ch;
}
.shell > h2 { max-width: 24ch; }
h2 em { font-style: normal; color: var(--amber); }
.section-lede { color: var(--text-dim); max-width: 58ch; margin-bottom: 44px; }

/* Full-width sections centre their header block; only the two-column ones
   keep a left-hand column, so nothing is left hanging against a void. */
section > .shell:not(.split) {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
section > .shell:not(.split) > h2 { max-width: 20ch; }
section > .shell:not(.split) > .section-lede { margin-bottom: 44px; }
/* The content blocks stay full width and left-aligned inside themselves. */
section > .shell:not(.split) > .spec,
section > .shell:not(.split) > .grid-table,
section > .shell:not(.split) > .faq,
section > .shell:not(.split) > .flow,
section > .shell:not(.split) > .chain-grid,
section > .shell:not(.split) > .readout,
section > .shell:not(.split) > .install,
section > .shell:not(.split) > .ca,
section > .shell:not(.split) > .aside,
section > .shell:not(.split) > .wide-shot,
section > .shell:not(.split) > .vs-note { width: 100%; text-align: left; }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.04fr); gap: 52px; align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 38px; }
  .split.flip > :first-child { order: 0; }
}
.split p { color: var(--text-dim); max-width: 56ch; font-size: 15.4px; }
.split p + p { margin-top: 14px; }

/* --- Desktop-only notices ------------------------------------------------
   Shown only when the document carries .no-ext, which the head script sets on
   a browser that cannot install an extension. Hidden by default rather than
   shown by default, so a reader on a desktop is never told something untrue
   for the moment before the script runs. */
.deskonly { display: none; }
html.no-ext .deskonly { display: block; }

/* In the hero it is one more line of the same mono note, but amber, because
   it is the one line there that changes what the reader should do.
   Two classes, because .hero-note sets its own colour in a later stylesheet
   and a single class here loses the tie. */
.hero-note.desk-flag {
  color: var(--amber); margin-top: 20px;
  padding-left: 11px; border-left: 2px solid var(--amber);
}
.desk-flag + .hero-note { margin-top: 10px; }

/* In the install block it stands in front of the button it is qualifying. */
.desk-banner {
  margin-bottom: 18px; padding: 14px 16px;
  border: 1px solid rgba(251,191,36,.28); border-radius: 10px;
  background: rgba(251,191,36,.06);
  font-size: 13.5px; line-height: 1.55; color: var(--text-dim);
}
.desk-banner b { color: var(--amber); font-weight: 600; }