/* ============================================================
   Steerly - INSTRUMENT design-system layer
   ------------------------------------------------------------
   The reusable half of the redesign. Tokens + primitives only,
   zero page composition. Every other marketing page can adopt
   this file and inherit the new register without being
   restructured.

   Register: defense-console precision. Rules, not shadows.
   Mono is structural, not decorative. Motion is mechanical -
   fast out, hard stop, never overshoot.
   ============================================================ */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root {
  /* Marketing stays dark regardless of system or saved app preferences. */
  color-scheme: only dark;
  /* ---- surface ---- */
  --bg: #08090b;
  --bg-lift: #0b0d10;
  --panel: #101317;
  --raised: #171b21;
  --sunken: #060709;

  /* ---- rules (instrument panels are defined by rules, not shadows) ---- */
  --rule: rgba(255, 255, 255, 0.07);
  --rule-strong: rgba(255, 255, 255, 0.14);
  --rule-live: color-mix(in oklch, var(--accent) 40%, transparent);

  /* ---- ink ---- */
  --text: #e8eaed;
  --dim: #8a8f98;
  --dimmer: #8b9099;
  --faint: #7c828b;

  /* ---- verdict palette: the only saturation on the page ---- */
  --accent: oklch(0.78 0.13 245);
  --allow: oklch(0.74 0.14 150);
  --allow-soft: oklch(0.74 0.14 150 / 0.14);
  --ask: oklch(0.8 0.13 78);
  --ask-soft: oklch(0.8 0.13 78 / 0.14);
  --deny: oklch(0.68 0.19 25);
  --deny-soft: oklch(0.68 0.19 25 / 0.16);

  /* ---- geometry: sharper than the old 8px. Instruments have corners. ---- */
  --on-accent: #06070a; /* label colour on an accent fill */

  --radius: 4px;
  --radius-sm: 2px;

  /* ---- type ---- */
  --display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* UI chrome - buttons, labels, chips, nav. Space Grotesk is already the
     brand wordmark, so the buttons now read as part of the mark rather
     than as terminal output. JetBrains Mono stays where monospacing does
     real work: terminal panes, commands, file paths, rule names, log
     timestamps and tabular figures. */
  --ui: "Space Grotesk", "Inter", system-ui, sans-serif;
  --wordmark: var(--ui);
  --num: tabular-nums slashed-zero; /* readouts must not jitter under CountUp */

  /* ---- motion: the core of the register ----
     No easing with overshoot exists in this system. No elastic,
     no bounce, no back, no cubic-bezier with a value outside 0-1.
     This is greppable, and is meant to be CI-enforced. */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1); /* default - decisive arrival */
  --ease-lin: cubic-bezier(0.4, 0, 0.6, 1); /* scrubbed / continuous */
  --dur-tick: 90ms; /* state flips: verdict chip, LED */
  --dur-move: 180ms; /* hover, focus, chip swap */
  --dur-panel: 320ms; /* panel enter, row stagger */ /* act transitions */

  /* ---- layout ---- */
  --wrap: 1240px;
  --gutter: 28px;
  --row-h: 34px;
}

/* ---------------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

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

/* box-shadow is banned in this register outside focus rings.
   Depth comes from rules and surface steps. */

/* ---------------------------------------------------------------
   3. TYPE SCALE
   --------------------------------------------------------------- */
/* Uppercase at 800. Caps need far less negative tracking than
   lowercase - at -0.035em the counters close up and it turns to mud -
   so the display scale drops to -0.012em and the line-height opens
   slightly, because cap-height lines sit closer than x-height lines. */
.t-display {
  font-family: var(--display);
  /* 700, not 800: Bricolage's counters clog at display size in caps.
     Caps also need POSITIVE tracking - the negative value tuned for
     lowercase welds AGENTS into one shape - and they carry more visual
     mass, so the size comes down while reading just as loud. */
  font-weight: 700;
  font-variation-settings: "opsz" 96;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.04;
  font-size: clamp(2.35rem, 6vw, 4.75rem);
  margin: 0;
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.02;
  font-size: clamp(1.9rem, 3.9vw, 3.1rem);
  margin: 0;
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0;
}

.t-lede {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.6;
  color: var(--dim);
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}

/* Mono is structural: every label, number, unit and timestamp. */
.t-label {
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dimmer);
  line-height: 1;
}

.t-mono {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: var(--num);
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   4. PRIMITIVE - .rule / hairline dividers
   --------------------------------------------------------------- */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ---------------------------------------------------------------
   5. PRIMITIVE - .panel
   Hairline-ruled container with a title bar carrying a mono label
   and a status LED. The atom of every instrument surface.
   --------------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  position: relative;
}

.panel__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--row-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-lift);
  border-radius: var(--radius) var(--radius) 0 0;
}

.panel__title {
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel__spacer {
  flex: 1;
}

.panel__body {
  padding: 18px;
}

/* ---------------------------------------------------------------
   6. PRIMITIVE - .led  (status indicator)
   A flat 10x2 segment bar, not a glowing bulb. The pulsing round
   dot it replaced is the single most overused "live data" cliche
   on software marketing pages, and it read as decoration rather
   than state. This reads as an instrument segment: no animation,
   no halo, and it only ever appears where it encodes something.
   --------------------------------------------------------------- */
.led {
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--dimmer);
  flex: none;
}

.led--live {
  background: var(--accent);
}
.led--allow {
  background: var(--allow);
}
.led--ask {
  background: var(--ask);
}
.led--deny {
  background: var(--deny);
}
.led--idle {
  background: var(--faint);
}

/* ---------------------------------------------------------------
   7. PRIMITIVE - .readout
   label / value / unit triple. The atom of every statistic.
   --------------------------------------------------------------- */
.readout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.readout__label {
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dimmer);
  line-height: 1;
}

.readout__value {
  font-family: var(--mono);
  font-variant-numeric: var(--num);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.readout__unit {
  font-family: var(--ui);
  font-size: 10.5px;
  color: var(--dimmer);
  letter-spacing: 0.05em;
}

.readout--allow .readout__value {
  color: var(--allow);
}
.readout--ask .readout__value {
  color: var(--ask);
}
.readout--deny .readout__value {
  color: var(--deny);
}

/* ---------------------------------------------------------------
   8. PRIMITIVE - .rail
   Horizontal strip of readouts, rule-separated.
   --------------------------------------------------------------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.rail > * {
  padding: 16px 18px;
  border-right: 1px solid var(--rule);
}

.rail > *:last-child {
  border-right: 0;
}

@media (max-width: 720px) {
  .rail {
    grid-auto-flow: row;
  }
  .rail > * {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .rail > *:last-child {
    border-bottom: 0;
  }
}

/* ---------------------------------------------------------------
   9. PRIMITIVE - .verdict  (allow / ask / deny chip)
   --------------------------------------------------------------- */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    background var(--dur-tick) var(--ease-snap),
    color var(--dur-tick) var(--ease-snap),
    border-color var(--dur-tick) var(--ease-snap);
}

.verdict::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.verdict--allow {
  color: var(--allow);
  background: var(--allow-soft);
  border-color: color-mix(in oklch, var(--allow) 26%, transparent);
}
.verdict--ask {
  color: var(--ask);
  background: var(--ask-soft);
  border-color: color-mix(in oklch, var(--ask) 26%, transparent);
}
.verdict--deny {
  color: var(--deny);
  background: var(--deny-soft);
  border-color: color-mix(in oklch, var(--deny) 30%, transparent);
}
.verdict--pending {
  color: var(--dimmer);
  background: transparent;
  border-color: var(--rule-strong);
}

/* ---------------------------------------------------------------
   10. PRIMITIVE - .trace
   Mono log line: timestamp · agent · command · verdict
   --------------------------------------------------------------- */
.trace {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  height: var(--row-h);
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: var(--num);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.trace:last-child {
  border-bottom: 0;
}

.trace__time {
  color: var(--faint);
  letter-spacing: -0.02em;
}

.trace__agent {
  color: var(--dim);
  min-width: 66px;
}

.trace__cmd {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------
   11. PRIMITIVE - .btn
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background var(--dur-move) var(--ease-snap),
    border-color var(--dur-move) var(--ease-snap),
    color var(--dur-move) var(--ease-snap);
}

.btn:hover {
  background: var(--raised);
  border-color: var(--rule-live);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.btn--primary:hover {
  background: color-mix(in oklch, var(--accent) 86%, #fff);
  border-color: color-mix(in oklch, var(--accent) 86%, #fff);
}

.btn--lg {
  height: 44px;
  padding: 0 20px;
  font-size: 12px;
}

.btn--icon {
  width: 34px;
  height: 34px;
  padding: 0;
}

/* ---------------------------------------------------------------
   12. PRIMITIVE - .gridfield  (canvas mount for the dot grid)
   --------------------------------------------------------------- */
.gridfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.gridfield canvas {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

/* ---------------------------------------------------------------
   13. LAYOUT HELPERS
   --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Section marker: the mono index that runs down the left edge of
   every act. Reads like a schematic callout. */
.marker {
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--faint);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   14. REDUCED MOTION
   Non-negotiable: every scroll-driven scene must be legible with
   motion disabled. JS reads this too (see instrument.js).
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===============================================================
   SHARED CHROME
   The nav, the footer and the FAQ disclosure appear on every page,
   so they belong in the shared layer rather than in the homepage's
   composition file. Document pages previously pulled in the whole
   of home.css just to style their header and footer.
   =============================================================== */

/* ---------------------------------------------------------------
   NAV
   Bigger wordmark, no decorative status readout, and a download
   button with real presence. It gains weight once the page is
   scrolled rather than sitting at full strength over the hero.
   --------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition:
    background var(--dur-panel) var(--ease-snap),
    border-color var(--dur-panel) var(--ease-snap);
}

.nav[data-scrolled="1"] {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color: var(--rule);
}

.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  padding: 9px 0;
}

.logo svg {
  width: 27px;
  height: 27px;
  color: var(--text);
}

.logo span {
  font-family: var(--wordmark);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.nav__links {
  display: flex;
  gap: 28px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}

.nav__links a {
  position: relative;
  padding: 6px 0;
  transition: color var(--dur-move) var(--ease-snap);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-move) var(--ease-snap);
}

.nav__links a:hover {
  color: var(--text);
}

.nav__links a:hover::after {
  transform: scaleX(1);
}

.nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav__signin {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color var(--dur-move) var(--ease-snap);
}

.nav__signin:hover {
  color: var(--text);
}

/* the download button carries the whole nav: taller, wider, heavier */
.btn--nav {
  height: 42px;
  padding: 0 22px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  gap: 9px;
}

.btn--nav svg {
  opacity: 0.85;
}

@media (max-width: 900px) {
  .nav__links,
  .nav__signin {
    display: none;
  }
  .nav__inner {
    height: 58px;
    gap: 14px;
  }
  .logo svg {
    width: 24px;
    height: 24px;
  }
  .logo span {
    font-size: 17px;
  }
  .btn--nav {
    height: 38px;
    padding: 0 16px;
  }
}


/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--rule-strong);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.015em;
  transition: color var(--dur-move) var(--ease-snap);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--ui);
  font-size: 16px;
  color: var(--dimmer);
  transition: transform var(--dur-move) var(--ease-snap);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq p {
  margin: 0 0 20px;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.65;
  max-width: 68ch;
}


.foot {
  border-top: 1px solid var(--rule);
  padding: 22px 0;
  position: relative;
  z-index: 1;
  background: var(--bg);
}

.foot__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.foot__inner a:hover {
  color: var(--text);
}

.foot__links {
  margin-left: auto;
  display: flex;
  gap: 20px;
}

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}