/* ============================================================
   VYREX — marketing & auth pages
   Direction: "Instrument". Paper ground, ink type, hairline
   rules, one signal colour.

   What this replaced, and why: the previous sheet was built on
   a #03060f ground with a violet #a557ff accent, radial glow
   blobs behind every section, translucent "glass" cards, a
   cursor-tracking glow and a 3D tilt on hover. That combination
   is the visual default of generated landing pages, which is
   exactly what it had started to look like. Depth here comes
   from 1px rules and two surface values instead. There is not a
   single gradient, blur or glow in this file, and that is a
   rule, not an accident.

   The --site-* custom properties keep their old names on
   purpose: docs.html, status.html, commands.html, support.html
   and privacy.html each carry an inline <style> block that
   reads them, so redefining the values here re-themes those
   pages too rather than leaving them stranded on the dark
   palette.
   ============================================================ */

/* Declared on both :root and body.site-body deliberately.
   The marketing pages used to load styles.css (the dashboard sheet)
   after this one, and its :root block sets --accent: #a557ff. At equal
   specificity the later sheet won, so the site's accent silently
   reverted to the retired violet -- which is what the first render of
   this rebuild actually showed. Those pages no longer load it at all
   (nothing outside the dashboard needed a class from it), but
   body.site-body outranks a bare :root, so the tokens hold even if
   something is linked in front of them again. */
:root,
body.site-body {
  /* surfaces — three values, no translucency */
  --paper:  #F3F0E9;
  --card:   #FFFFFF;
  --sunk:   #EDE9E0;

  /* ink */
  --ink:    #141310;
  --ink-2:  #5C584E;
  --ink-3:  #686251;   /* 5.0:1 on the sunk ground, 5.3 on paper, 6.1 on card */

  /* rules */
  --rule:   #DAD3C4;
  --rule-2: #EAE5DA;

  /* signal — at most twice per screen.
     Every value below was checked against both grounds: the first pass
     used #C6431C and #8E8879, which measured 4.4:1 and 3.1:1 on paper.
     Small mono labels carry a lot of this design, so they have to clear
     4.5:1, not look like they do. */
  --accent:      #BB3D18;   /* 4.9:1 on paper; white on it is 5.5:1 */
  --accent-ink:  #9A3315;
  --accent-soft: #FAEBE4;
  --accent-rule: #E9C2B3;

  /* state */
  --ok:   #2C6B4E;
  --warn: #7E5D10;
  --bad:  #A32A1E;

  --inv: #FAF8F3;

  /* typography */
  --site-font: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --site-display: var(--site-font);
  --site-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* motion — one duration, one curve, everywhere */
  --site-fast: 150ms;
  --site-med: 240ms;
  --site-ease: cubic-bezier(.4, 0, .2, 1);

  /* legacy names, kept so per-page inline styles still resolve */
  --site-bg: var(--paper);
  --site-card: var(--card);
  --site-border: var(--rule);
  --site-border-strong: var(--ink-3);
  --site-accent: var(--accent);
  --site-accent-2: var(--ink);
  --site-text: var(--ink);
  --site-muted: var(--ink-2);
  --site-dim: var(--ink-3);
  --brand-violet-hi: var(--accent);
  --brand-magenta-hi: var(--accent-ink);
  --brand-bloom: var(--accent-soft);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip; /* preferred: does not create a scroll container */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sunk); }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--sunk); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
* { scrollbar-width: thin; scrollbar-color: var(--rule) var(--sunk); }

::selection { background: var(--ink); color: var(--inv); }

/* A visible ink halo rather than a coloured glow. */
*:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

body.site-body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--site-font);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ── type ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--site-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.04;
  color: var(--ink);
}
h1 { font-size: clamp(38px, 5.4vw, 62px); }
h2 { font-size: clamp(27px, 3.2vw, 34px); letter-spacing: -.028em; }
h3 { font-size: 19px; letter-spacing: -.02em; line-height: 1.2; }
h4 { font-size: 15px; letter-spacing: -.012em; }
p  { margin: 0; color: var(--ink-2); }
a  { color: inherit; text-decoration: none; }
code, kbd, samp {
  overflow-wrap: break-word;
  font-family: var(--site-mono);
  font-size: .9em;
  background: var(--sunk);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  padding: 1px 5px;
}

/* The one mono utility every label on the site uses. */
.site-mono, .site-eyebrow, .site-stat-lbl, .site-footer-h, .site-pill,
.site-cmd-strip, .auth-pstat span:last-child {
  font-family: var(--site-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--inv);
  padding: 10px 16px; font-weight: 600; border-radius: 0 0 3px 0;
}
.skip-link:focus { left: 0; }

.hidden { display: none !important; }

.offline-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  background: var(--ink); color: var(--inv);
  text-align: center; padding: 8px 16px;
  font-family: var(--site-mono); font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase;
}

/* ── nav ──────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 28px;
  padding: 16px clamp(20px, 4vw, 40px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.site-brand { display: flex; align-items: center; gap: 11px; flex: none; }

/* The mark is the bot's own prefix. It was a violet hexagon
   reading "VX"; a > in an ink square says what the thing is. */
.site-hex {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--ink); color: var(--inv);
  border-radius: 3px;
  font-family: var(--site-mono); font-weight: 600; font-size: 15px;
  line-height: 1;
}
.site-brand-txt {
  font-family: var(--site-display); font-weight: 700;
  font-size: 21px; letter-spacing: -.05em; line-height: 1;
}
.site-brand-sub {
  font-family: var(--site-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 3px;
}

.site-nav-links { display: flex; align-items: center; gap: 24px; }
.site-nav-links a {
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  padding: 4px 0;
  transition: color var(--site-fast) var(--site-ease), box-shadow var(--site-fast) var(--site-ease);
}
.site-nav-links a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--rule); }
.site-nav-links a[aria-current="page"],
.site-nav-links a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

.site-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Shown only inside the mobile drawer, where the nav sheds its buttons. */
.site-nav-only-mobile { display: none; }

.site-live-ping {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--site-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 10px 0 0; border-right: 1px solid var(--rule);
}
.site-live-ping .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); flex: none;
}

.site-top-search, .site-hero-search, .docs-search, .cmd-search, .support-search {
  height: 34px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0 12px;
  font: 400 13.5px/32px var(--site-font);
  color: var(--ink);
  transition: border-color var(--site-fast) var(--site-ease);
}
.site-top-search { width: 190px; }
.site-top-search::placeholder, .site-hero-search::placeholder { color: var(--ink-3); }
.site-top-search:hover, .site-hero-search:hover { border-color: var(--ink-3); }

/* ── buttons ──────────────────────────────────────────────── */
.site-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border: 1px solid var(--ink); border-radius: 3px;
  background: var(--ink); color: var(--inv);
  font: 600 14px/1 var(--site-font); letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--site-fast) var(--site-ease),
              border-color var(--site-fast) var(--site-ease),
              color var(--site-fast) var(--site-ease),
              transform var(--site-fast) var(--site-ease);
}
.site-btn:hover { background: #000; border-color: #000; }
.site-btn:active { transform: translateY(1px); }

.site-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.site-btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.site-btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.site-btn-ghost:hover { background: var(--card); border-color: var(--ink-3); }

.site-btn[disabled], .site-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.site-menu-btn {
  display: none; width: 38px; height: 38px; flex: none;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--card); cursor: pointer;
  position: relative;
}
.site-menu-btn::before, .site-menu-btn::after {
  content: ""; position: absolute; left: 11px; width: 16px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--site-fast) var(--site-ease);
}
.site-menu-btn::before { top: 15px; }
.site-menu-btn::after  { top: 21px; }
.site-menu-btn[aria-expanded="true"]::before { transform: translateY(3px) rotate(45deg); }
.site-menu-btn[aria-expanded="true"]::after  { transform: translateY(-3px) rotate(-45deg); }

.site-nav-overlay {
  position: fixed; inset: 0; z-index: 88;
  background: rgba(20, 19, 16, .28);
  opacity: 0; pointer-events: none;
  transition: opacity var(--site-med) var(--site-ease);
}
.site-nav-overlay.show { opacity: 1; pointer-events: auto; }

/* ── layout ───────────────────────────────────────────────── */
.site-main { display: block; }

.site-section {
  padding: clamp(44px, 6vw, 64px) clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--rule);
}
.site-section > h2 + p { margin-top: 12px; max-width: 62ch; }

/* Sections lead with a numbered mono label rather than a
   centred heading over three equal cards. */
.site-eyebrow { display: block; color: var(--ink-3); margin-bottom: 12px; }
.site-eyebrow b { color: var(--accent); font-weight: 600; }

.site-split {
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}

.site-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--card); color: var(--ink-2);
}

/* ── hero ─────────────────────────────────────────────────── */
.site-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 512px;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(44px, 6vw, 76px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.site-hero h1 { margin-top: 14px; }
.site-hero-lead {
  font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.5;
  margin-top: 24px; max-width: 54ch;
}
.site-hero-search-wrap { margin-top: 26px; max-width: 460px; }
.site-hero-search { width: 100%; height: 42px; font-size: 15px; line-height: 40px; }
.site-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.site-cmd-strip { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; color: var(--ink-3); }
.site-cmd-strip .p { color: var(--ink); font-weight: 600; }
.site-cmd-strip .a { color: var(--ink-3); }

/* The console panel. Not chrome — it is the product. */
.site-console { background: var(--card); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }
.site-console-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; background: var(--sunk); border-bottom: 1px solid var(--rule);
  font-family: var(--site-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
}
.site-console-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.site-console-body {
  font-family: var(--site-mono); font-size: 12.5px; line-height: 1.85;
  padding: 16px; color: var(--ink-2);
  white-space: pre-wrap; overflow-x: auto;
}
.site-console-body .pr { color: var(--accent); }
.site-console-body .in { color: var(--ink); font-weight: 600; }
.site-console-body .ok { color: var(--ok); }

/* ── stats ────────────────────────────────────────────────── */
.site-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-bottom: 1px solid var(--rule);
}
.site-stat { padding: 24px clamp(20px, 3vw, 32px); border-right: 1px solid var(--rule-2); }
.site-stat:last-child { border-right: 0; }
.site-stat-val {
  display: block;
  font-family: var(--site-mono); font-variant-numeric: tabular-nums;
  font-size: 29px; font-weight: 700; letter-spacing: -.03em; color: var(--ink);
}
.site-stat-val em { color: var(--accent); font-style: normal; }
.site-stat-lbl { display: block; color: var(--ink-3); margin-top: 6px; }

/* ── cards ────────────────────────────────────────────────── */
.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }

/* Deliberately not a card: a rule, a heading, prose. The old
   .site-card was a translucent panel with a cursor glow and a
   hover tilt; both handlers are gone from index.html too. */
.site-card {
  border-top: 1px solid var(--rule);
  padding: 18px 0;
  background: none;
  transition: border-color var(--site-fast) var(--site-ease);
}
.site-card:hover { border-top-color: var(--ink); }
.site-card h3 { margin-bottom: 6px; }
.site-card p { font-size: 13.5px; }
.site-card .site-card-cmds {
  display: block; margin-top: 10px;
  font-family: var(--site-mono); font-size: 12.5px; color: var(--ink-3);
}

/* ── comparison ───────────────────────────────────────────── */
.site-compare {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: var(--card); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden;
}
.site-compare-col { padding: 20px; border-right: 1px solid var(--rule-2); }
.site-compare-col:last-child { border-right: 0; }
.site-compare-col h3 { font-size: 15px; letter-spacing: -.01em; }
.site-compare-col ul { list-style: none; margin: 14px 0 0; padding: 0; }
.site-compare-col li {
  padding: 9px 0; border-bottom: 1px solid var(--rule-2);
  font-size: 13.5px; color: var(--ink-2);
}
.site-compare-col li:last-child { border-bottom: 0; }
.site-compare-win { background: var(--accent-soft); }
.site-compare-win h3 { color: var(--accent-ink); }
.site-compare-win li { color: #7A3316; border-bottom-color: var(--accent-rule); }

/* A real table for tabular claims. */
.site-table { width: 100%; border-collapse: collapse; background: var(--card); }
.site-table th {
  font-family: var(--site-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  text-align: left; padding: 12px; border-bottom: 1px solid var(--rule);
}
.site-table th:last-child { color: var(--accent); }
.site-table td { padding: 11px 12px; border-bottom: 1px solid var(--rule-2); font-size: 13.5px; color: var(--ink-2); }
.site-table td:first-child { color: var(--ink); font-weight: 600; }
.site-table td:last-child { color: var(--ink); }
.site-table tr:last-child td { border-bottom: 0; }
/* Without a min-width the table squeezes four columns into 390px and
   every cell wraps to three lines. Let it scroll inside its own box
   instead -- the page itself never scrolls sideways. */
.site-table { min-width: 640px; }
.site-table-wrap { border: 1px solid var(--rule); border-radius: 5px; overflow-x: auto; }

/* ── steps ────────────────────────────────────────────────── */
.site-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
  counter-reset: step;
}
.site-steps li {
  counter-increment: step;
  border-top: 2px solid var(--ink);
  padding: 18px 0 0;
  font-size: 13.5px; color: var(--ink-2);
}
.site-steps li::before {
  content: "STEP 0" counter(step);
  display: block; margin-bottom: 8px;
  font-family: var(--site-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .09em; color: var(--accent);
}
.site-steps li strong { display: block; color: var(--ink); font-size: 15px; letter-spacing: -.012em; margin-bottom: 6px; }
.site-steps li em { font-style: normal; font-weight: 600; color: var(--ink); }

/* ── pricing ──────────────────────────────────────────────── */
.site-pricing-toggle { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; }
.site-pricing {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; align-items: start;
}
.site-price {
  background: var(--card); border: 1px solid var(--rule); border-radius: 5px;
  overflow: hidden; display: flex; flex-direction: column;
}
.site-price h3 {
  font-family: var(--site-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.site-price > div:first-child { padding: 18px 20px; border-bottom: 1px solid var(--rule); }
.site-price .amt {
  font-family: var(--site-mono); font-variant-numeric: tabular-nums;
  font-size: 38px; font-weight: 700; letter-spacing: -.04em; color: var(--ink);
}
.site-price .per { font-size: 14px; color: var(--ink-3); }
.site-price ul { list-style: none; margin: 0; padding: 0 20px; flex: 1; }
.site-price li {
  padding: 8px 0; border-bottom: 1px solid var(--rule-2);
  font-size: 13.5px; color: var(--ink-2);
}
.site-price li:last-child { border-bottom: 0; }
.site-price > p { padding: 0 20px; font-size: 12px; color: var(--ink-3); }
.site-price .site-btn { margin: 16px 20px 20px; }

/* The recommended tier is marked by an ink header, not a glow. */
.site-price.featured { border-color: var(--ink); }
.site-price.featured > div:first-child { background: var(--ink); border-bottom-color: var(--ink); }
.site-price.featured h3 { color: #C9C3B4; }
.site-price.featured .amt { color: var(--inv); }
.site-price.featured .per { color: #C9C3B4; }

/* ── FAQ ──────────────────────────────────────────────────── */
.site-faq { border-top: 1px solid var(--rule); max-width: 860px; }
.site-faq-item { border-bottom: 1px solid var(--rule); }
.site-faq-q {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 16px 0; background: none; border: 0; cursor: pointer;
  font: 600 15.5px/1.4 var(--site-font); letter-spacing: -.012em;
  color: var(--ink); text-align: left;
  transition: color var(--site-fast) var(--site-ease);
}
.site-faq-q:hover { color: var(--accent); }
.site-faq-ico {
  margin-left: auto; flex: none; width: 12px; height: 12px; position: relative;
}
.site-faq-ico::before, .site-faq-ico::after {
  content: ""; position: absolute; background: var(--ink-2);
  transition: transform var(--site-med) var(--site-ease), opacity var(--site-fast) var(--site-ease);
}
.site-faq-ico::before { left: 0; top: 5.5px; width: 12px; height: 1.5px; }
.site-faq-ico::after  { top: 0; left: 5.5px; width: 1.5px; height: 12px; }
.site-faq-item.open .site-faq-ico::after { transform: rotate(90deg); opacity: 0; }
.site-faq-a {
  max-height: 0; overflow: hidden;
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
  transition: max-height var(--site-med) var(--site-ease), padding var(--site-med) var(--site-ease);
}
.site-faq-item.open .site-faq-a { max-height: 460px; padding: 0 40px 18px 0; }
.site-faq-a a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── closing band ─────────────────────────────────────────── */
.site-cta-banner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 72px); align-items: end;
  background: var(--ink); color: var(--inv);
  padding: clamp(36px, 5vw, 60px) clamp(20px, 4vw, 40px);
  border-radius: 0;
}
.site-cta-banner h2 { color: var(--inv); }
.site-cta-sub { color: #B7B1A2; margin-top: 14px; max-width: 52ch; font-size: 16px; }
.site-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.site-cta-banner .site-btn-ghost { color: var(--inv); border-color: #413E36; }
.site-cta-banner .site-btn-ghost:hover { background: #23211C; border-color: #5B564B; }

/* ── footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--ink); color: #B7B1A2;
  padding: clamp(36px, 5vw, 52px) clamp(20px, 4vw, 40px) 26px;
}
.site-footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px; padding-bottom: 32px; border-bottom: 1px solid #2C2A24;
}
.site-footer .site-hex { background: var(--inv); color: var(--ink); }
.site-footer-desc { color: #8B8577; font-size: 13.5px; max-width: 42ch; }
.site-footer-h { color: var(--inv); margin-bottom: 12px; }
.site-footer a {
  display: block; padding: 5px 0; font-size: 13.5px; color: #B7B1A2;
  transition: color var(--site-fast) var(--site-ease);
}
.site-footer a:hover { color: var(--inv); }
.site-footer-copy {
  margin: 20px 0 0; color: #8B8577;   /* 5.1:1 on the ink footer */
  font-family: var(--site-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
}

/* ── reveal ───────────────────────────────────────────────── */
/* 12px and 240ms. The old sheet moved 18px over 700ms with a
   stagger, which reads as a template intro rather than a page
   settling. */
.site-reveal { transition: opacity var(--site-med) var(--site-ease), transform var(--site-med) var(--site-ease); }
.site-reveal-in { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .site-reveal { opacity: 1 !important; transform: none !important; }
}

/* ── toasts ───────────────────────────────────────────────── */
.toast-container {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px; max-width: 340px;
}
/* ui-lite.js injects `toast toast-<kind>`; these pages no longer load
   the dashboard sheet, so the variants have to live here. */
.toast, .toast-container > * {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--ink); color: var(--inv);
  border: 1px solid var(--ink); border-left-width: 3px;
  border-radius: 3px; padding: 11px 14px; font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 1px 2px rgba(20,19,16,.08), 0 10px 28px -14px rgba(20,19,16,.45);
  animation: toastIn 220ms var(--site-ease) both;
}
.toast-success { border-left-color: #4E9B76; }
.toast-error   { border-left-color: #D9714B; }
.toast-warn, .toast-warning { border-left-color: #C8A24A; }
.toast-info    { border-left-color: #7FA3C4; }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast-container > * { animation: none; } }

/* ============================================================
   Auth pages (login, register, oauth-callback)
   ============================================================ */
body.auth-body { background: var(--paper); }

.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.auth-panel { position: relative; }
.auth-panel-left {
  background: var(--ink); color: var(--inv);
  padding: clamp(32px, 5vw, 56px);
  display: flex; align-items: center;
  border-right: 1px solid var(--ink);
}
.auth-panel-right {
  background: var(--paper);
  padding: clamp(32px, 5vw, 56px);
  display: flex; align-items: center; justify-content: center;
}
.auth-panel-inner { width: 100%; max-width: 460px; margin: 0 auto; }

/* The two decorative blur blobs are retired: kept as no-op
   selectors so the markup on login.html and register.html does
   not need to change to remove them. */
.auth-glow, .auth-glow-1, .auth-glow-2 { display: none; }

.auth-logo-link, .auth-logo-mobile { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 32px; }
.auth-logo-mobile { display: none; }
.auth-logo-hex {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  background: var(--inv); color: var(--ink); border-radius: 3px;
  font-family: var(--site-mono); font-weight: 600; font-size: 15px; line-height: 1;
}
.auth-logo-name {
  font-family: var(--site-display); font-weight: 700;
  font-size: 21px; letter-spacing: -.05em; color: var(--inv);
}
.auth-panel-right .auth-logo-hex { background: var(--ink); color: var(--inv); }
.auth-panel-right .auth-logo-name { color: var(--ink); }

/* The left panel is an ink field. The global h1-h5 and p colours are ink
   as well, so anything not explicitly re-coloured here renders black on
   black -- which is exactly what .auth-panel-headline h2 was doing. */
.auth-panel-left h1, .auth-panel-left h2, .auth-panel-left h3,
.auth-panel-left h4, .auth-panel-left strong { color: var(--inv); }
.auth-panel-left p, .auth-panel-left span, .auth-panel-left li { color: #B7B1A2; }
.auth-panel-left a { color: var(--inv); }

.auth-panel-headline {
  font-family: var(--site-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; line-height: 1.06;
  color: var(--inv); margin-bottom: 16px;
}
.auth-panel-headline p {
  margin-top: 16px; font-size: 16px; font-weight: 400;
  letter-spacing: 0; line-height: 1.55; max-width: 44ch;
}

.auth-trust-list { list-style: none; margin: 28px 0 0; padding: 0; }
.auth-trust-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-top: 1px solid #2C2A24;
  color: #B7B1A2; font-size: 14px;
}
.auth-trust-icon {
  width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: 50%;
  background: var(--inv);
}
.auth-trust-green  { background: #4E9B76; }
.auth-trust-blue   { background: #7FA3C4; }
.auth-trust-violet { background: #D9714B; }

.auth-panel-stats { display: flex; align-items: center; gap: 20px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #2C2A24; }
.auth-pstat { display: flex; flex-direction: column; gap: 4px; }
/* The markup is <strong> then <span>, not two spans. */
.auth-pstat strong {
  font-family: var(--site-mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--inv);
}
.auth-pstat span {
  font-family: var(--site-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: #B7B1A2;
}
.auth-pstat-sep { width: 1px; height: 30px; background: #2C2A24; }

.auth-form-wrap { width: 100%; max-width: 400px; }
/* .auth-form-head wraps an <h1>; without this the global h1 clamp puts a
   62px headline on a 400px column. */
.auth-form-head h1 {
  font-family: var(--site-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 32px); letter-spacing: -.03em; line-height: 1.06;
}
.auth-sub { margin-top: 10px; font-size: 14.5px; font-weight: 400; color: var(--ink-2); line-height: 1.55; }

.auth-card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 5px; padding: 20px; margin-top: 24px;
}

.auth-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 44px; padding: 0 18px;
  background: var(--ink); color: var(--inv);
  border: 1px solid var(--ink); border-radius: 3px;
  font: 600 15px/1 var(--site-font); letter-spacing: -.01em; cursor: pointer;
  transition: background-color var(--site-fast) var(--site-ease), transform var(--site-fast) var(--site-ease);
}
.auth-discord:hover { background: #000; }
.auth-discord:active { transform: translateY(1px); }
.auth-discord-lg { height: 48px; font-size: 15.5px; }

.auth-oauth-note, .auth-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.auth-terms { margin-top: 24px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.auth-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.auth-link:hover { color: var(--accent-ink); }

.auth-alert {
  margin-top: 16px; padding: 11px 13px;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--card); font-size: 13.5px; color: var(--ink-2);
}
.auth-alert-error { border-color: #E3C0BB; background: #F9EEEC; color: #8A241A; }

/* ============================================================
   Shared page furniture used by docs / status / commands /
   support / privacy. Their own inline <style> blocks read the
   --site-* names above; these are the pieces worth owning here
   so the pages agree with each other.
   ============================================================ */
.doc-page, .legal-page, .status-page, .cmd-page, .support-page {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px) 72px;
}
.doc-lead, .legal-meta { color: var(--ink-2); font-size: 16px; margin-top: 12px; }
.doc-callout, .legal-highlight {
  border: 1px solid var(--rule); border-left: 2px solid var(--ink);
  background: var(--card); border-radius: 0 3px 3px 0;
  padding: 14px 16px; margin: 20px 0; font-size: 14px; color: var(--ink-2);
}
.doc-callout.warn { border-left-color: var(--warn); }
.doc-callout.tip  { border-left-color: var(--ok); }
.doc-callout.info { border-left-color: var(--accent); }
.doc-callout.req  { border-left-color: var(--bad); }

.status-badge, .cmd-badge {
  display: inline-block; padding: 2px 7px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--card);
  font-family: var(--site-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.status-badge.ok { color: var(--ok); border-color: #BFD6C8; background: #EDF4F0; }
.status-badge.checking { color: var(--warn); border-color: #DDCFA6; background: #F7F2E4; }
.cmd-badge.owner, .cmd-badge.admin { color: var(--bad); border-color: #E3C0BB; background: #F9EEEC; }
.cmd-badge.mod { color: var(--accent); border-color: var(--accent-rule); background: var(--accent-soft); }
.cmd-badge.prefix, .cmd-badge.slash { font-weight: 600; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .site-hero { grid-template-columns: minmax(0, 1fr); }
  .site-split { grid-template-columns: minmax(0, 1fr); }
  .auth-split { grid-template-columns: minmax(0, 1fr); }
  .auth-panel-left { display: none; }
  .auth-logo-mobile { display: inline-flex; }
  .site-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* The nav's natural minimum is about 1250px: brand, seven links, the
   status pill, the search field and two buttons. Below that the search
   goes first, and below 1180 the links move into the drawer -- measured,
   not guessed, because at 1024 the old 900px breakpoint left the bar
   overflowing by 227px with no scrollbar to reveal it. */
@media (max-width: 1320px) {
  .site-top-search { display: none; }
}

@media (max-width: 1180px) {
  .site-menu-btn { display: block; order: 3; }
  .site-nav { gap: 14px; }
  .site-nav-actions { margin-left: auto; }

  .site-nav-drawer {
    position: fixed; inset: 0 0 0 auto; z-index: 89;
    width: min(300px, 82vw);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-left: 1px solid var(--rule);
    padding: 76px 20px 20px;
    transform: translateX(100%);
    /* Hidden as well as translated: an off-canvas drawer that is merely
       transformed still contributes to scrollWidth, which is where the
       horizontal scrollbar on every phone came from. This also keeps its
       links out of the tab order while the drawer is shut. */
    visibility: hidden;
    transition: transform var(--site-med) var(--site-ease), visibility var(--site-med) var(--site-ease);
  }
  .site-nav-drawer.open { transform: translateX(0); visibility: visible; }
  .site-nav-drawer a {
    padding: 13px 0; border-bottom: 1px solid var(--rule-2);
    font-size: 15px; color: var(--ink);
  }
  .site-nav-drawer a:hover { box-shadow: none; color: var(--accent); }

  .site-cta-banner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .site-live-ping { display: none; }
  .site-nav { gap: 12px; }
  .site-nav-actions { gap: 8px; }
  .site-nav-only-mobile { display: block; }
}

@media (max-width: 640px) {
  body.site-body { font-size: 14.5px; }
  .site-stat { border-right: 0; border-bottom: 1px solid var(--rule-2); }
  .site-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .site-brand-sub { display: none; }
  .site-hero-cta .site-btn { flex: 1 1 100%; }
  /* Sign in moves into the drawer; the invite stays on the bar. */
  .site-nav-actions .site-btn-ghost { display: none; }

  /* Pages without a drawer (docs, status, commands, support, legal) put
     brand and links and two buttons on one bar, which does not fit at
     390px. Wrap the links onto their own row rather than overflow. */
  .site-nav { flex-wrap: wrap; row-gap: 10px; }
  .site-nav-links:not(.site-nav-drawer) {
    order: 3; width: 100%; gap: 18px;
    overflow-x: auto; padding-bottom: 2px;
    border-top: 1px solid var(--rule-2); padding-top: 10px;
  }
}

/* ============================================================
   Print — the docs and legal pages are read on paper often
   enough to be worth four rules.
   ============================================================ */
@media print {
  .site-nav, .site-footer, .site-cta-banner, .toast-container, .offline-banner, .skip-link { display: none !important; }
  body.site-body { background: #fff; color: #000; }
  .site-section { border-bottom: 0; padding: 12pt 0; }
}

/* ============================================================
   Hooks motion.js writes to.

   Kept deliberately quiet. The previous versions of these moved
   18px over 700ms with a 55ms stagger and parallaxed a glow
   behind the hero; at that amplitude a page announces itself
   instead of arriving. 10px, 220ms, one curve — and every one
   of them is off entirely under prefers-reduced-motion, which
   motion.js checks before it touches the DOM at all.
   ============================================================ */

/* Reading progress: a 2px ink hairline, not a coloured beam. */
.site-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 95;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0;
  transition: opacity var(--site-fast) var(--site-ease);
  pointer-events: none;
}

/* The nav gains a rule shadow once you leave the top, so the
   paper ground reads as scrolling under it. */
.site-nav.is-scrolled { box-shadow: 0 1px 0 var(--rule), 0 6px 20px -18px rgba(20, 19, 16, .5); }

.will-stagger { opacity: 0; transform: translateY(10px); transition: opacity 220ms var(--site-ease), transform 220ms var(--site-ease); }
.will-stagger.is-in { opacity: 1; transform: none; }

.hero-in { animation: heroIn 260ms var(--site-ease) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .will-stagger { opacity: 1 !important; transform: none !important; }
  .hero-in { animation: none !important; }
  .site-progress { display: none; }
}