/* ============================================================
   AZIMUTH — one stylesheet, ordered the way the page reads:
   tokens, primitives, header, hero, demo, then each section.
   ============================================================ */

:root {
  --paper: #f2f4ef;
  --paper-2: #ecefe6;
  /* Panels are veils, not walls: the footage runs behind the whole page,
     so every surface lets a little of it through. */
  --card: rgba(255, 255, 255, 0.92);
  --card-solid: #ffffff;
  --ink: #111311;
  --ink-2: #2c332c;
  --mist: #5f665f;
  --mist-2: #868d86;

  /* The accent is white. These names are kept because a hundred rules
     reference them; every one now resolves to black-and-white chrome.
     Colour survives only where it carries meaning — risk bands, status
     dots, price direction — and those are written literally. */
  --lime: #ffffff;
  --lime-soft: rgba(255, 255, 255, 0.85);
  --lime-deep: #ffffff;
  --lime-text: #ffffff;

  --line: rgba(17, 19, 17, 0.10);
  --line-soft: rgba(17, 19, 17, 0.06);
  --chip: rgba(17, 19, 17, 0.05);
  --hover: rgba(17, 19, 17, 0.04);

  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  --shadow-sm: 0 1px 2px rgba(20, 30, 10, 0.06), 0 4px 12px rgba(20, 30, 10, 0.05);
  --shadow: 0 1px 2px rgba(20, 30, 10, 0.06), 0 8px 24px rgba(20, 30, 10, 0.07),
            0 24px 48px rgba(20, 30, 10, 0.05);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --pad: clamp(20px, 5vw, 40px);
  --gap: clamp(16px, 2.4vw, 28px);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

/* display:flex on a component beats the UA sheet's [hidden] rule */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: #ffffff; color: #111311; }

:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- primitives ------------------------------------ */

.wrap { width: min(1120px, 100% - 2 * var(--pad)); margin-inline: auto; }

.section { padding-block: clamp(64px, 9vw, 120px); }
.section + .section { padding-top: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime-text);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime-deep);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45);
}

h1, h2, h3 { margin: 0; font-weight: 620; letter-spacing: -0.03em; line-height: 1.08; }

h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: 18px; letter-spacing: -0.02em; line-height: 1.3; }

.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.lede {
  margin: 14px 0 0;
  color: var(--mist);
  font-size: clamp(15px, 1.5vw, 18px);
  max-width: 56ch;
}

.head { max-width: 62ch; }
.head .lede { margin-top: 16px; }
.head + * { margin-top: clamp(28px, 4vw, 48px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 570;
  white-space: nowrap;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.btn:active { transform: translateY(1px); }

/* Buttons are black and white throughout — solid white for the action
   you are meant to take, outlined for everything beside it. Colour is
   reserved for meaning (risk bands, status dots), never for chrome. */

.btn-lime {
  background: #ffffff;
  color: #111311;
  border-color: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 12, 8, 0.24), 0 6px 18px rgba(8, 12, 8, 0.2);
}
.btn-lime:hover { background: #eef1ea; border-color: #eef1ea; }

.btn-primary {
  background: #111311;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: #000000; border-color: #ffffff; }

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #ffffff; }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: inherit; }

.btn-sm { height: 34px; padding-inline: 14px; font-size: 13px; }

.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.grid { display: grid; gap: var(--gap); }

.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -0.01em; }

/* ---------- header ---------------------------------------- */

.site-header {
  /* Fixed, not sticky: sticky reserves its height in the flow, which pushed
     the hero grade down and left a hard line across the footage under the bar. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding-top: 14px;
  padding-bottom: 6px;
  background: linear-gradient(180deg, rgba(242, 244, 239, 0), rgba(242, 244, 239, 0));
  transition: background 0.35s ease;
}

/* The bar used to turn light once the content scrolled under it, from
   when that content sat on paper. It sits on the footage now, so the
   bar is dark glass the whole way down. */
.site-header .nav {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(18, 24, 16, 0.5), rgba(18, 24, 16, 0.34));
  box-shadow: 0 8px 32px rgba(8, 12, 8, 0.22);
  color: #fff;
}

.site-header .nav-links a { color: rgba(244, 247, 240, 0.82); }
.site-header .nav-links a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.site-header .wordmark span { color: rgba(244, 247, 240, 0.6); }

.site-header .nav-toggle {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 58px;
  padding: 0 10px 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: var(--shadow-sm);
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand .mark { width: 26px; height: 26px; }

.wordmark { font-size: 15px; letter-spacing: 0.06em; font-weight: 640; }
.wordmark span { font-weight: 400; color: var(--mist); }

.nav-links { display: flex; align-items: center; gap: 4px; }

.nav-links a {
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--ink-2);
  transition: background 0.15s, color 0.15s;
}
.nav-links a:hover { background: var(--hover); color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: 8px; }

.nav-toggle { display: none; }

/* The dropped-down menu is its own white card, dark bar or not. */
.site-header .nav-links.open a { color: var(--ink-2); }
.site-header .nav-links.open a:hover { background: var(--hover); color: var(--ink); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.open {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    box-shadow: var(--shadow);
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--card);
  }
  .site-header .wrap { position: relative; }
}

/* ---------- hero ------------------------------------------ */

/* ---------- backdrop --------------------------------------
   The footage is fixed to the viewport; the hero sits on it and
   .surface scrolls up over it. The layer carries a dark fallback
   colour so a missing video never leaves light text on light.
   ---------------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #12180f;
  pointer-events: none;
}

.backdrop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The grade: lift the greens, hold the blacks, no muddiness. */
  filter: saturate(1.08) contrast(1.04) brightness(0.97);
}

/* Even, viewport-wide: this one is under the whole page, so anything
   gradient-shaped here would drag a vignette down the scroll. */
.backdrop-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 16, 11, 0.26);
}

/* The cinematic grade belongs to the hero alone, and scrolls away with it. */
.hero-band {
  position: relative;
  z-index: 1;
}

/* Vertical only, and it must reach zero at the bottom edge: a radial
   vignette here ended at half opacity and stopped dead, drawing a line
   across the video where the band finished. */
.hero-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 16, 11, 0.58) 0%,
    rgba(12, 16, 11, 0.44) 45%,
    rgba(12, 16, 11, 0.18) 78%,
    rgba(12, 16, 11, 0) 100%
  );
  pointer-events: none;
}

/* Everything below the hero rides straight over the footage. No veil, no
   blur, no tint — the video IS the background, at full clarity, the whole
   way down. Contrast lives in the panels and in the type colour. */
.surface {
  position: relative;
  z-index: 2;
  background: transparent;
}

/* The type that floats between the panels is restyled for footage at the
   end of this file, after the components it overrides. */

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Pills stay pill-shaped: stretch would blow the inline-flex ones
     out to the full column width. */
  align-items: center;
  min-height: min(900px, 94svh);
  padding-top: clamp(56px, 9vw, 104px);
  padding-bottom: clamp(96px, 13vw, 170px);
  text-align: center;
}

.hero > * { position: relative; z-index: 1; max-width: 100%; }
.hero h1, .hero .lede { width: 100%; }

/* ---------- hero, on footage ------------------------------- */

.hero h1,
.hero .wordmark { color: #fff; }

.hero h1 { text-shadow: 0 2px 30px rgba(8, 12, 8, 0.45); }

.hero .lede {
  color: rgba(244, 247, 240, 0.86);
  text-shadow: 0 1px 16px rgba(8, 12, 8, 0.5);
}

.hero .eyebrow { color: var(--lime); }
.hero .eyebrow::before {
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
}

.hero .btn-primary {
  background: #ffffff;
  color: #111311;
  border-color: #ffffff;
}
.hero .btn-primary:hover { background: #eef1ea; }

.hero .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  box-shadow: none;
}
.hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.hero .ca {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(18, 24, 16, 0.42);
  color: rgba(244, 247, 240, 0.92);
  box-shadow: none;
}
.hero .ca-label { color: rgba(244, 247, 240, 0.6); }
.hero .ca button { background: rgba(255, 255, 255, 0.14); color: #fff; }
.hero .ca button:hover { background: var(--lime); color: var(--ink); }

.hero .marquee-note {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(18, 24, 16, 0.42);
  color: rgba(244, 247, 240, 0.9);
}


.hero h1 {
  margin-top: 18px;
  font-size: clamp(40px, 7.4vw, 78px);
  letter-spacing: -0.04em;
}

.hero h1 .serif { display: block; }

.hero .lede { margin-inline: auto; text-align: center; max-width: 54ch; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.ca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-sm);
}

.ca-label {
  font-size: 11px;
  font-weight: 640;
  letter-spacing: 0.09em;
  color: var(--mist);
}

.ca-value { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ca button {
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--chip);
  font-size: 12.5px;
  font-weight: 570;
  transition: background 0.15s;
}
.ca button:hover { background: var(--lime); }

.marquee-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.24);
  font-size: 13px;
  color: var(--ink-2);
}

/* ---------- demo ------------------------------------------ */

.demo-shell {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.demo-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(250, 251, 247, 0.36));
}

.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dots i:first-child { background: #ffbdb0; }
.dots i:nth-child(2) { background: #ffe0a3; }
.dots i:nth-child(3) { background: #c3e8a8; }

.omnibox {
  flex: 1;
  min-width: 0;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--mist);
  font-family: var(--mono);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--chip);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mist);
}

.live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mist-2);
}

.live.on { background: rgba(255, 255, 255, 0.34); color: var(--lime-text); }
.live.on i { background: var(--lime-deep); animation: pulse 1.4s ease-out infinite; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

.demo-body { display: grid; grid-template-columns: 1.05fr 1fr; }
.demo-body > * + * { border-left: 1px solid var(--line-soft); }

@media (max-width: 880px) {
  .demo-body { grid-template-columns: 1fr; }
  .demo-body > * + * { border-left: 0; border-top: 1px solid var(--line-soft); }
}

.demo-left, .demo-right { padding: clamp(18px, 2.4vw, 26px); }

.run-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.run-chip {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 13px;
  font-weight: 540;
  color: var(--mist);
  transition: all 0.15s;
}
.run-chip:hover { border-color: var(--lime-deep); color: var(--ink); }
.run-chip[aria-selected='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.task-label {
  font-size: 11px;
  font-weight: 640;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-2);
}

.task {
  margin: 8px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.45;
}

.task::before { content: '“'; color: var(--lime-deep); }
.task::after { content: '”'; color: var(--lime-deep); }

.steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 9px 4px;
  border-radius: var(--r-sm);
  /* Idle, the list reads as the plan the agent is about to follow;
     each step brightens as it is actually taken. */
  opacity: 0.42;
  transition: opacity 0.35s, background 0.2s;
}

.step.in { opacity: 1; }
.step.now { background: rgba(255, 255, 255, 0.22); }

.step-n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--chip);
  font-size: 11px;
  font-weight: 640;
  color: var(--mist);
}

.step.done .step-n { background: var(--lime); color: var(--ink); }
.step.now .step-n { background: var(--ink); color: var(--paper); }

.step-act {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lime-text);
}

.step-arg { font-size: 14.5px; }

.demo-actions { display: flex; gap: 8px; margin-top: 20px; }

.progress {
  height: 4px;
  margin-top: 16px;
  border-radius: var(--r-pill);
  background: var(--chip);
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--lime-deep);
  transition: width 0.4s ease;
}

.demo-right { background: linear-gradient(180deg, rgba(251, 252, 248, 0.5), rgba(255, 255, 255, 0.32)); }

.agent-log { display: grid; gap: 10px; min-height: 132px; }

.agent-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--card);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
  animation: rise 0.4s ease both;
}

@keyframes rise {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

.agent-tag {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--lime);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.7;
}

.caret::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-left: 3px;
  translate: 0 2px;
  background: var(--ink);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.report {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.14);
  animation: rise 0.45s ease both;
}

.report h4 { margin: 0 0 12px; font-size: 15.5px; letter-spacing: -0.02em; }

.report table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.report td { padding: 7px 0; border-top: 1px solid rgba(17, 19, 17, 0.08); vertical-align: top; }
.report tr:first-child td { border-top: 0; }
.report td:first-child { font-weight: 570; white-space: nowrap; padding-right: 14px; }
.report td:nth-child(2) { font-family: var(--mono); white-space: nowrap; padding-right: 14px; }
.report td:last-child { color: var(--mist); }

.sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 19, 17, 0.08);
}

.sources span {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.8);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mist);
}

.empty { color: var(--mist-2); font-size: 14px; }

.demo-caption {
  margin: 14px 2px 0;
  font-size: 13px;
  color: rgba(244, 247, 240, 0.72);
  text-shadow: 0 1px 3px rgba(8, 12, 8, 0.6);
}

/* ---------- features -------------------------------------- */

.features { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

.feature {
  padding: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.feature .ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--lime);
}
.feature .ico svg { width: 20px; height: 20px; }

.feature p { margin: 8px 0 0; color: var(--mist); font-size: 14.5px; }

/* ---------- steps ----------------------------------------- */

.how { grid-template-columns: repeat(3, 1fr); counter-reset: step; }
@media (max-width: 800px) { .how { grid-template-columns: 1fr; } }

.how-step { position: relative; padding: 26px 24px; }

.how-step .n {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--lime-text);
}

.how-step h3 { margin: 14px 0 8px; font-size: 22px; }
.how-step p { margin: 0; color: var(--mist); font-size: 14.5px; }

/* No connector stubs between the cards: on footage they read as stray
   scratches on the video rather than as a join. */

/* ---------- use cases ------------------------------------- */

.tabs { display: flex; gap: 6px; padding: 5px; border-radius: var(--r-pill); background: var(--chip); }

.tab {
  padding: 9px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 14px;
  font-weight: 560;
  color: var(--mist);
  transition: background 0.18s, color 0.18s;
}
.tab[aria-selected='true'] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }

.case-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 28px; }
.case-blurb { color: var(--mist); font-size: 15px; }

.cases { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }

.case { padding: 24px; animation: rise 0.35s ease both; }
.case h3 { margin-bottom: 8px; }
.case p { margin: 0; color: var(--mist); font-size: 14.5px; }

.case-ex {
  display: block;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--paper);
  font-size: 13.5px;
  color: var(--ink-2);
  text-align: left;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.case-ex:hover { border-color: var(--lime-deep); background: rgba(255, 255, 255, 0.18); }
.case-ex b { font-weight: 600; color: var(--lime-text); }

/* ---------- token ----------------------------------------- */

.token-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap); align-items: end; }
@media (max-width: 900px) { .token-head { grid-template-columns: 1fr; } }

.market {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: 1px;
  border-radius: var(--r);
  background: var(--line-soft);
  overflow: hidden;
}

.market div { padding: 14px 16px; background: var(--card); }
.market dt { font-size: 11px; font-weight: 620; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist-2); }
.market dd { margin: 4px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.market .up { color: var(--lime-text); }
.market .down { color: #b4472f; }

.tiers { grid-template-columns: repeat(4, 1fr); margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }

.tier {
  display: flex;
  flex-direction: column;
  padding: 24px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.tier.featured { border-color: rgba(255, 255, 255, 0.4); box-shadow: var(--shadow); }
.tier.you { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), var(--shadow); }

.tier-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.tier-badge {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--chip);
  font-size: 10.5px;
  font-weight: 640;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mist);
}
.tier.you .tier-badge { background: var(--lime); color: var(--ink); }

.tier-min { margin-top: 16px; font-family: var(--mono); font-size: 13px; color: var(--lime-text); }

.tier-runs { margin-top: 4px; font-size: 34px; font-weight: 640; letter-spacing: -0.035em; }
.tier-runs small { font-size: 13px; font-weight: 500; color: var(--mist); letter-spacing: 0; }

.tier ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }

.tier li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 9px;
  font-size: 14px;
  color: var(--mist);
}

.tier li::before {
  content: '';
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: inset 0 0 0 3px var(--card-solid);
}

.gate {
  display: grid;
  gap: 14px;
  padding: 22px;
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55));
}

.gate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gate label { font-size: 14px; font-weight: 560; }

.gate-addr {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
}

.gate output {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
}

.gate-result { font-size: 15px; color: var(--mist); }
.gate-result b { color: var(--ink); font-weight: 620; }

/* ---------- vote ------------------------------------------ */

.votes { display: grid; gap: 10px; }

.vote {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--card);
  text-align: left;
  overflow: hidden;
  transition: border-color 0.18s, transform 0.18s;
}

.vote:hover { border-color: var(--lime-deep); transform: translateX(2px); }
.vote[aria-pressed='true'] { border-color: var(--ink); }

.vote .bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vote > * { position: relative; }
.vote h3 { font-size: 16px; }
.vote p { margin: 4px 0 0; color: var(--mist); font-size: 14px; }

.vote-num { text-align: right; }
.vote-share { font-size: 20px; font-weight: 640; letter-spacing: -0.02em; }
.vote-count { font-size: 12px; color: var(--mist-2); }

.vote-note { margin-top: 14px; font-size: 13.5px; color: var(--mist); }

/* ---------- faq ------------------------------------------- */

.faq { display: grid; gap: 8px; max-width: 800px; }

.faq details {
  padding: 18px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--card);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 570;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--lime-text);
  transition: rotate 0.2s;
}
.faq details[open] summary::after { rotate: 45deg; }

.faq p { margin: 12px 0 0; color: var(--mist); font-size: 14.5px; max-width: 68ch; }

/* ---------- cta + footer ---------------------------------- */

.cta {
  position: relative;
  padding: clamp(44px, 6vw, 76px) var(--pad);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--ink), #232a23 60%, #384234);
  color: var(--paper);
  text-align: center;
  overflow: hidden;
}

.cta::after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -60%;
  left: 50%;
  translate: -50% 0;
  width: 620px;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.3), transparent 70%);
  pointer-events: none;
}

.cta > * { position: relative; z-index: 2; }

/* Same footage as the hero, bookending the page. */
.cta-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(165deg, rgba(17, 19, 17, 0.84), rgba(30, 38, 28, 0.7) 60%, rgba(44, 54, 40, 0.66));
}

.cta h2 { font-size: clamp(28px, 4vw, 44px); }
.cta p { margin: 14px auto 0; max-width: 46ch; color: rgba(242, 244, 239, 0.7); }
.cta .hero-cta { margin-top: 28px; }
.cta .btn-ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: var(--paper); }
.cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }

/* Sits over the fixed backdrop like .surface does, or the footage
   would paint straight over it. */
.site-footer {
  position: relative;
  z-index: 2;
  padding-block: 48px 40px;
  border-top: 1px solid var(--line);
  margin-top: 0;
  border-top: 0; /* a rule across the footage reads as a scratch */
  background: transparent; /* matches .surface: footage, uncovered */
}

.footer-top { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--mist); }
.footer-links a:hover { color: var(--ink); }

.disclaimer {
  margin: 26px 0 0;
  max-width: 76ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(244, 247, 240, 0.78); /* on footage, like the rest of the footer */
}

/* ---------- on footage -------------------------------------
   Last on purpose: these override the component defaults above,
   which assume a paper background.

   The palette is rebound rather than each component restyled —
   every panel, border and label above is written in terms of
   these tokens, so flipping them here turns the whole page to
   glass in one place. Boxes are transparent, never blurred.
   ----------------------------------------------------------- */

.surface,
.site-footer {
  --card: rgba(16, 22, 14, 0.34);
  --card-solid: rgba(16, 22, 14, 0.6);
  --ink: #ffffff;
  --ink-2: rgba(244, 247, 240, 0.92);
  --mist: rgba(244, 247, 240, 0.78);
  --mist-2: rgba(244, 247, 240, 0.6);
  --line: rgba(255, 255, 255, 0.2);
  --line-soft: rgba(255, 255, 255, 0.14);
  --chip: rgba(255, 255, 255, 0.14);
  --hover: rgba(255, 255, 255, 0.12);
  --paper: rgba(255, 255, 255, 0.08);
  --paper-2: rgba(255, 255, 255, 0.1);
  --lime-text: #ffffff;
  --shadow-sm: 0 1px 2px rgba(6, 10, 6, 0.3), 0 6px 18px rgba(6, 10, 6, 0.22);
  --shadow: 0 2px 8px rgba(6, 10, 6, 0.32), 0 18px 44px rgba(6, 10, 6, 0.28);
  color: rgba(244, 247, 240, 0.86);
}

/* Panels that were painted white by hand rather than through --card. */
.surface .demo-bar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
}
.surface .demo-right {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
.surface .gate {
  background: linear-gradient(180deg, rgba(16, 22, 14, 0.42), rgba(16, 22, 14, 0.28));
}
.surface .report td,
.surface .sources { border-color: rgba(255, 255, 255, 0.16); }

/* Lime and white chips keep dark type — the one thing that must not
   follow the palette flip. */
.surface .btn-lime,
.surface .btn-primary,
.surface .step.done .step-n,
.surface .step.now .step-n,
.surface .agent-tag,
.surface .tier.you .tier-badge,
.surface .run-chip[aria-selected='true'],
.surface .tab[aria-selected='true'],
.surface .gate output,
.surface .sources span { color: var(--ink-solid, #111311); }

.surface .btn-primary,
.surface .step.now .step-n { background: #ffffff; }
.surface .run-chip[aria-selected='true'] { background: #ffffff; border-color: #ffffff; }
.surface .tab[aria-selected='true'] { background: rgba(255, 255, 255, 0.92); }
.surface .gate output { background: rgba(255, 255, 255, 0.92); }
.surface .sources span { background: rgba(255, 255, 255, 0.8); }
.surface .task::before,
.surface .task::after { color: var(--lime); }

/* The CTA card sets its own dark ground, so it keeps paper-coloured type —
   and its gradient is written in literals, because --ink is white in here. */
.surface .cta {
  color: #f2f4ef;
  background: linear-gradient(165deg, #111311, #232a23 60%, #384234);
}

.surface .head h2,
.site-footer .wordmark { color: #fff; }

.surface .head .lede,
.case-blurb,
.vote-note,
.footer-links a { color: rgba(244, 247, 240, 0.86); }

.surface .eyebrow { color: var(--lime); }
.surface .eyebrow::before {
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.surface .head h2,
.surface .head .lede,
.surface .eyebrow,
.case-blurb,
.vote-note,
.disclaimer,
.footer-links a,
.site-footer .wordmark {
  text-shadow: 0 1px 3px rgba(8, 12, 8, 0.6), 0 2px 24px rgba(8, 12, 8, 0.45);
}

.footer-links a:hover { color: #fff; }
.site-footer .wordmark span { color: rgba(244, 247, 240, 0.62); }

/* The tab rail floats on the footage too. */
.tabs { background: rgba(18, 24, 16, 0.44); }
.tab { color: rgba(244, 247, 240, 0.82); }
.tab:hover { color: #fff; }
.tab[aria-selected='true'] { color: var(--ink); }

/* ---------- radar ------------------------------------------ */

/* Sub-pages have no hero, so they start below the fixed bar. */
.page { padding-top: 86px; }
.page .head h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.035em; }

.radar-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: clamp(24px, 4vw, 40px) 0 22px;
}

.radar-meta {
  margin: 0;
  font-size: 13.5px;
  color: rgba(244, 247, 240, 0.78);
  text-shadow: 0 1px 3px rgba(8, 12, 8, 0.6);
}

.radar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap);
}

.launch { display: flex; flex-direction: column; padding: 22px; }

.launch-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.launch-top h3 { font-size: 17px; }
.launch-sym { margin-top: 3px; color: var(--lime-text); font-weight: 500; }

.risk {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 7px 12px;
  border-radius: var(--r);
  background: var(--chip);
  text-align: center;
  white-space: nowrap;
}

.risk-band { font-size: 10px; font-weight: 640; letter-spacing: 0.06em; text-transform: uppercase; }
.risk-score { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; line-height: 1; }

.risk-low { background: rgba(150, 220, 90, 0.18); color: #cdea9a; }
.risk-medium { background: rgba(255, 205, 90, 0.2); color: #ffd98a; }
.risk-high { background: rgba(255, 120, 100, 0.2); color: #ffb3a6; }

.launch-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--mist);
}

.tag-grad, .tag-new {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tag-grad { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tag-new { background: rgba(255, 255, 255, 0.14); color: var(--mist); }

.launch-desc {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mist);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.launch-notes {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.launch-notes li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--mist);
}

.note-pts { font-size: 11px; text-align: right; }
.note-risk .note-pts { color: #ffc98a; }
.note-ok .note-pts { color: var(--lime-text); }

.launch-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 12px;
}

.launch-foot > * + * { margin-left: 0; }
.launch-link { color: var(--lime-text); font-weight: 550; }
.launch-link:hover { text-decoration: underline; }
.launch-addr { margin-left: auto; color: var(--mist-2); }
.launch-verified { color: var(--lime-text); font-size: 11px; }
.launch-unverified { color: #ffb3a6; font-size: 11px; }

.radar-foot {
  margin: clamp(28px, 4vw, 44px) 0 0;
  max-width: 76ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(244, 247, 240, 0.7);
  text-shadow: 0 1px 3px rgba(8, 12, 8, 0.6);
}

/* ---------- buying a tier ----------------------------------- */

.tier-buy { margin-top: 18px; width: 100%; }

.tier-have {
  display: grid;
  place-items: center;
  height: 34px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.2);
  font-size: 12.5px;
  font-weight: 570;
  color: var(--lime-text);
}

.buy-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #171d15, #10150f);
  color: rgba(244, 247, 240, 0.9);
  box-shadow: 0 30px 80px rgba(4, 8, 4, 0.6);
}
.buy-dialog::backdrop { background: rgba(6, 10, 6, 0.62); }

.buy-body { padding: 26px 26px 22px; }
.buy-head h3 { font-size: 20px; color: #fff; }
.buy-head p { margin: 6px 0 0; font-size: 13px; color: rgba(244, 247, 240, 0.62); }

.buy-rows { margin-top: 18px; display: grid; gap: 1px; }

.buy-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: rgba(244, 247, 240, 0.72);
}
.buy-row:first-child { border-top: 0; }
.buy-row b { color: #fff; font-weight: 600; }
.buy-row b.muted { color: rgba(244, 247, 240, 0.55); font-weight: 500; }
.buy-row b.short { color: #ffb3a6; }

.buy-status { margin: 16px 0 0; font-size: 13.5px; color: rgba(244, 247, 240, 0.8); }
.buy-status.warn { color: #ffb3a6; }

.buy-fine {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(244, 247, 240, 0.5);
}

.buy-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.buy-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(244, 247, 240, 0.9);
}

.buy-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 247, 240, 0.4);
}
.buy-card i { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); }

.buy-cardbox { margin-top: 14px; }

.buy-cardhead {
  font-size: 14px;
  font-weight: 570;
  color: rgba(244, 247, 240, 0.92);
}

.buy-cardbox .buy-fine { margin-top: 6px; }
.buy-cardbox .buy-fine b { color: rgba(244, 247, 240, 0.85); }
.buy-cardbox .buy-actions { margin-top: 12px; }

.buy-status.ready { color: #ffffff; }

.buy-hash {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  color: var(--lime);
  word-break: break-all;
}

.buy-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(244, 247, 240, 0.8);
  font-size: 18px;
  line-height: 1;
}
.buy-close:hover { background: rgba(255, 255, 255, 0.2); }

.buy-dialog { position: relative; }

/* ---------- console ---------------------------------------- */

.console {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: var(--gap);
  margin-top: clamp(24px, 4vw, 40px);
  align-items: start;
}

@media (max-width: 980px) { .console { grid-template-columns: 1fr; } }

.console-side { display: grid; gap: var(--gap); }
.console-main { display: grid; gap: var(--gap); }

.compose, .playbooks, .history { padding: 20px; }

.compose textarea {
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  resize: vertical;
}
.compose textarea:focus { outline: 2px solid var(--lime-deep); outline-offset: 1px; }

.compose-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.quota { font-size: 11.5px; color: var(--mist); }

.console-banner {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--r);
  background: rgba(18, 24, 16, 0.5);
  font-size: 13.5px;
  color: rgba(244, 247, 240, 0.9);
}
.banner-warn { border-color: rgba(255, 160, 120, 0.4); }

/* Four tabs in a 380px column: let them wrap rather than stack the
   emoji above its own label. */
.playbooks .tabs { flex-wrap: wrap; margin-top: 10px; }
.playbooks .tab { padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }

.playbook-list { display: grid; gap: 8px; margin-top: 12px; }

.playbook {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--paper);
  text-align: left;
  font-size: 13px;
  color: var(--mist);
  transition: border-color 0.15s, background 0.15s;
}
.playbook:hover { border-color: var(--lime-deep); background: rgba(255, 255, 255, 0.14); }
.playbook strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.playbook span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  background: rgba(10, 14, 9, 0.55);
  overflow: hidden;
}

.viewport img { width: 100%; height: 100%; object-fit: contain; display: block; }

.viewport-idle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--mist-2);
}

.console-below { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 760px) { .console-below { grid-template-columns: 1fr; } }

.run-steps, .run-agent { padding: 18px 20px; }
.run-steps .steps { max-height: 300px; overflow-y: auto; margin-top: 10px; }
.run-agent .agent-log { max-height: 300px; overflow-y: auto; margin-top: 10px; }
.step-note { margin-top: 2px; font-size: 12px; color: var(--mist-2); }

.history-row {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 10px 4px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: none;
  text-align: left;
}
.history-row:first-of-type { border-top: 0; }
.history-row:hover .history-task { color: var(--ink); }

.history-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--mist-2); }
.dot-done { background: #b6f13c; }
.dot-running { background: #ffcb63; }
.dot-failed, .dot-stopped { background: #ff8a75; }

.history-task {
  font-size: 13px;
  color: var(--mist);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.history-meta { margin-top: 2px; font-size: 11.5px; color: var(--mist-2); }

.report .sources a {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.8);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.report .sources a:hover { background: var(--lime); }

/* ---------- status ----------------------------------------- */

.status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(24px, 4vw, 40px) 0 20px;
}

.status-verdict {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 620;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(8, 12, 8, 0.6);
}
.verdict-ok { color: #cdea9a; }
.verdict-warn { color: #ffd98a; }
.verdict-down { color: #ffb3a6; }

.status-list { display: grid; gap: 8px; }

.status-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--card);
}

.status-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-ok { background: #b6f13c; box-shadow: 0 0 0 4px rgba(182, 241, 60, 0.18); }
.dot-warn { background: #ffcb63; box-shadow: 0 0 0 4px rgba(255, 203, 99, 0.16); }
.dot-down { background: #ff8a75; box-shadow: 0 0 0 4px rgba(255, 138, 117, 0.16); }
.dot-off { background: rgba(255, 255, 255, 0.28); }

.status-label { font-size: 15px; font-weight: 570; }
.status-detail { margin-top: 2px; font-size: 13px; color: var(--mist); }

.status-right { display: flex; align-items: center; gap: 12px; }

.status-word {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.word-ok { background: rgba(150, 220, 90, 0.18); color: #cdea9a; }
.word-warn { background: rgba(255, 205, 90, 0.2); color: #ffd98a; }
.word-down { background: rgba(255, 120, 100, 0.2); color: #ffb3a6; }
.word-off { background: rgba(255, 255, 255, 0.12); color: var(--mist-2); }

.status-ms { color: var(--mist-2); font-size: 11.5px; min-width: 54px; text-align: right; }

@media (max-width: 560px) {
  .status-right { flex-direction: column; align-items: flex-end; gap: 4px; }
}

/* ---------- reveal ---------------------------------------- */

[data-reveal] { opacity: 0; translate: 0 14px; transition: opacity 0.6s ease, translate 0.6s ease; }
[data-reveal].seen { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; translate: 0 0; }
  html { scroll-behavior: auto; }
}