/* ===================================================================
   Design tokens, reset, typography and shared components.
   Section-specific rules live in sections.css.
   =================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------- */
  --paper:        #FAFAF9;  /* page background */
  --paper-sunk:   #F3F2EE;  /* ticker, hover rows, light bands */
  --dark:         #0B0B0D;  /* dark sections */
  --film:         #0a0b0e;  /* behind video, before first frame */
  --panel:        #101114;  /* simulation panels on dark */
  --panel-line:   #2a2c33;

  /* --- Ink ------------------------------------------------------ */
  --ink:          #141414;
  --ink-body:     #3d3c38;
  --ink-muted:    #6f6d66;
  --ink-faint:    #75736a;  /* 4.55:1 on --paper; only used on <13px text */
  --ink-on-dark:       #F3F2EE;
  --ink-on-dark-muted: #9a978e;
  --ink-on-dark-faint: #7b7970;  /* 4.51:1 on --dark; only used on <13px text */

  /* --- Lines ---------------------------------------------------- */
  --line:         #E1DFDB;
  --line-dark:    #25272D;

  /* --- Accent --------------------------------------------------- */
  --accent:       #F8CBAD;
  --accent-hover: #F5B98F;

  /* --- Data colours (simulation panels) ------------------------- */
  --data-free:      #35C79A;
  --data-taken:     #E8896B;
  --data-none:      #4a4d57;
  --data-bar-idle:  #26443a;

  /* --- Type ----------------------------------------------------- */
  --font-sans:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Tinos', Georgia, 'Times New Roman', serif;

  /* --- Layout --------------------------------------------------- */
  --shell-max:   1280px;
  --shell-pad:   48px;
  /* Fallback only. js/main.js measures the bar and overwrites this, since
     its height is padding plus a serif line box and so depends on the
     loaded font as well as the breakpoint. */
  --nav-height:  76px;
}

/* ===================================================================
   Reset
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }

/* Belt to the braces above: media is capped, but a too-wide flex row can
   still widen the document and take the whole page sideways with it.
   `clip`, not `hidden` — hidden makes this a scroll container, which
   silently breaks `position: sticky` on the nav. */
body { overflow-x: clip; }

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* The UA rule for [hidden] is display:none, but any author rule with a
   class selector outranks it — so an element styled .lightbox{display:flex}
   stays visible even while hidden. Several elements here are toggled by
   the hidden attribute, so state the intent with enough weight to win. */
[hidden] { display: none !important; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Anchor targets clear the sticky nav. scroll-padding on the scroller,
   not scroll-margin on every [id]: one rule, and it covers anchors added
   later without them having to know the nav exists. */
/* Minus one pixel so a section's first row tucks behind the opaque bar.
   .console and .databot open with a border-top in the same colour as the
   nav's border-bottom, and landing them flush stacks two identical
   hairlines with nothing between them, which reads as a stray line. It
   also absorbs the sub-pixel rounding of a fractional bar height. */
html { scroll-padding-top: calc(var(--nav-height) - 1px); }

/* ===================================================================
   Layout helpers
   =================================================================== */

/* Centred content column used by nearly every section. */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* The recurring "small uppercase label in the left gutter" layout. */
.shell--split {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

/* Full-bleed colour band; put a .shell inside it. */
.band { width: 100%; }
.band--dark { background: var(--dark); color: var(--ink-on-dark); }

/* ===================================================================
   Typography
   =================================================================== */

.eyebrow {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow--dark { color: var(--ink-on-dark-muted); }

/* Serif display headings. Three sizes cover the whole page. */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 68px);
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 30ch;
}
.display--lg {
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1.02;
  max-width: 20ch;
}
.display--xl {
  font-size: clamp(44px, 5vw, 80px);
  line-height: 1;
  max-width: none;
}

.lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 70ch;
}
.lead--dark   { color: #b5b2a8; }
.lead--narrow { max-width: 56ch; }

/* ===================================================================
   Buttons
   =================================================================== */

.btn {
  display: inline-block;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  padding: 13px 24px;
  transition: background-color .18s ease, color .18s ease;
}
.btn:hover { text-decoration: none; }

.btn--accent { background: var(--accent); color: var(--ink); font-size: 14px; padding: 11px 20px; }
.btn--accent:hover { background: var(--accent-hover); }

.btn--outline { border: 1px solid var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper-sunk); }

.btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 12px 22px;
}

/* Small uppercase tag, e.g. "Roadmap" in the products menu. */
.pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ===================================================================
   Shared motion
   =================================================================== */

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse   { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes float   { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-16px); } }

/* ===================================================================
   Responsive: collapse the label gutter on narrow screens.
   =================================================================== */

/* Matches the nav's own breakpoint in sections.css, not the layout one
   below: the bar loses height there, when it switches to padding-block:
   14px. Fallback only — js/main.js measures the real thing. */
@media (max-width: 960px) {
  :root { --nav-height: 60px; }
}

@media (max-width: 800px) {
  :root { --shell-pad: 24px; }
  .shell--split { grid-template-columns: 1fr; gap: 20px; }
}