@font-face {
  font-family: Manrope;
  src: url("assets/fonts/Manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Spline Sans Mono";
  src: url("assets/fonts/SplineSansMono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Lets a <details> panel animate from 0 to its own height. */
  interpolate-size: allow-keywords;
  color-scheme: dark;
  --ink: #050607;
  --surface: #191B1E;
  --text: #F2F3F5;
  --secondary: #B3B6BA;
  --cobalt: #0854D1;
  --white: #FFFFFF;
  /* The brand kit's editorial accent. One use only: the warm light behind the
     symbol on the company page (owner's call, 2026-09-16). The website brief
     says "do not build on it" - nothing else takes it. */
  --copper: #C98259;
  /* Three derived tokens, all mixed from the five approved colours: a hairline
     border, the translucent panel that lets the halo rails light a card, and
     the header's own ground — opaque enough that a white report page cannot
     tint it (G3), which is why it is not the panel. */
  --hairline: rgb(255 255 255 / 12%);
  --panel: rgb(25 27 30 / 66%);
  --header-ground: var(--surface);
  /* One spacing scale for the whole site: section gap at wide / mid / phone. */
  --gap-1: 80px;
  --gap-2: 64px;
  --gap-3: 48px;
  --gap: var(--gap-3);
  --radius-card: 24px;
  --radius-pill: 999px;
  background: var(--ink);
  color: var(--text);
  font-family: Manrope, Arial, sans-serif;
  font-synthesis: none;
}

@media (min-width: 768px) { :root { --gap: var(--gap-2); } }
@media (min-width: 1200px) { :root { --gap: var(--gap-1); } }

* { box-sizing: border-box; }

body {
  isolation: isolate;
  margin: 0;
  min-width: 0;
  min-height: 100svh;
  background: var(--ink);
}

.halo {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.halo[hidden] { display: none; }
/* Below the hero the dome has left the viewport and only the side rails are
   still drawn; they read as smears over the captures, so the canvas gives way
   once the first beat has passed (G2). The dome itself is untouched. */
/* Two steps, not one: the rails are down to 40 % as soon as the ticker has
   gone (beat 1 sits under them), and out altogether once beat 2 has passed. */
.dim-hero .halo { opacity: 0.4; }
.past-hero .halo { opacity: 0; }

/* Document light runs continuously behind the content, without text cutouts. */
/* Transparent over the hero so the dome is whole; it takes a ground only
   after the hero has gone (site.js flips .is-scrolled on a sentinel). */
.site-header { padding: 20px 28px; }

.wordmark {
  display: block;
  width: 130px;
  height: auto;
  max-width: 100%;
}

.hero {
  position: relative;
  z-index: 1;
  padding: 40px 28px 48px;
}

.hero-copy { max-width: 820px; }

@media (min-width: 1200px) {
  .hero-copy { max-width: 1000px; }
  .next-clause { margin-inline-start: 6%; }
}

h1 {
  margin: 0;
  /* Measured: at 390 the column is 334 px and "Know your equipment." needs
     355 px even at 34 px, so clause one always takes two lines. 34 px is the
     largest size at which clause two still fits on one — three lines total. */
  font-size: 34px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

h1 span { display: block; text-wrap: balance; }
h1 { text-wrap: balance; }
.next-clause { margin-inline-start: 0; }

.hero p {
  margin: 28px 0 0;
  max-width: 510px;
  font-size: 17px;
  font-weight: 400;
  line-height: 27px;
  color: var(--secondary);
}

.demo-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  max-width: 100%;
  margin-top: 32px;
  padding: 12px 24px;
  border: 1px solid var(--cobalt);
  border-radius: var(--radius-pill);
  background: var(--cobalt);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
}

.demo-button:hover { border-color: var(--white); }
.demo-button:active { transform: translateY(1px); }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 5px;
}

@media (min-width: 768px) {
  .site-header, .hero { padding-inline: max(40px, calc((100vw - 1120px) / 2)); }
  .wordmark { width: 180px; }
  .hero { padding-top: 64px; padding-bottom: 72px; }
  h1 { font-size: clamp(60px, 6vw, 80px); letter-spacing: -0.015em; }
  .next-clause { margin-inline-start: 12%; }
  .hero p { margin-top: 32px; font-size: 18px; line-height: 29px; }
}

/* The halo also observes this preference in JS and freezes its composed scene. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .demo-button:active { transform: none; }
}