/* ─────────────────────────────────────────────────────────────────────────
   Scoutmon brand — shared by every public page, loaded after each page's
   own <style> so it overrides the old navy-and-electric-blue look.

   Near-black and graphite, with Australian green and gold:
   - gold   #e8b923  primary accent: buttons, links, highlights
                     (10.6:1 on the background; dark text on gold is 10.6:1)
   - green  #3fb27f  eucalyptus, for text-sized green (7.3:1)
   - green  #00843d  the official Australian green — decoration only, it's
                     too dark for body text on black (4.0:1)
   Type: IBM Plex Sans, with Plex Mono for tags, codes and figures.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --bg: #0c0d0c;
  --surface: #141614;
  --card: #1b1e1b;
  --border: rgba(236, 235, 228, .09);
  --text: #ecebe4;
  --muted: #a3a69d;
  --accent: #e8b923;
  --accent2: #3fb27f;
  --green: #3fb27f;
  --aus-green: #00843d;
  --gold: #e8b923;
  --amber: #e8b923;
  --red: #e5644e;
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: var(--mono);
}

body { background: var(--bg); color: var(--text); font-family: var(--font); }
::selection { background: var(--gold); color: #0c0d0c; }

/* A thin green-and-gold line across the top of every page */
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: linear-gradient(90deg, var(--aus-green) 0 50%, var(--gold) 50% 100%);
}

nav { background: rgba(12, 13, 12, .94) !important; border-bottom: 1px solid var(--border) !important; }
a { color: inherit; }

/* Headings: plain and confident, no oversized display face */
h1, h2, h3, .section-title, .hero h1 {
  font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.02em !important;
}

/* Buttons: gold with dark text, square-ish, no glow or lift */
.btn-primary, .btn-nav, .btn-plan, .btn-submit, button.btn-primary {
  background: var(--gold) !important; color: #0c0d0c !important; border-radius: 6px !important;
  box-shadow: none !important; transform: none !important; font-weight: 600;
}
.btn-primary:hover, .btn-nav:hover, .btn-plan:hover { background: #f3cd45 !important; opacity: 1 !important; }
.btn-secondary { border-radius: 6px !important; border-color: rgba(236, 235, 228, .2) !important; }
.btn-secondary:hover { border-color: var(--gold) !important; }

/* ── Template tropes removed ── */
/* glowing gradient behind the hero */
.hero::before, .hero::after, .page-header::before, .page-header::after { display: none !important; }
/* uppercase coloured labels above every section */
.section-label, .ind-eyebrow { display: none !important; }
/* the pill above the headline: kept as plain text */
.hero-badge {
  background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important;
  color: var(--muted) !important; font-family: var(--mono); font-size: 12px !important; letter-spacing: .02em;
}
/* the "Everything included" pill on the price card */
.pricing-card::before { display: none !important; }
.pricing-card { border-color: rgba(232, 185, 35, .45) !important; border-radius: 10px !important; }
/* cards: flat, smaller radius, no lift on hover */
.feature-card, .step, .ind-panel, .vendor-card, .card { border-radius: 10px !important; }
.feature-card:hover { transform: none !important; border-color: rgba(232, 185, 35, .35) !important; }
/* scroll fade-ins: always visible (landing.js no longer adds them; this is a backstop) */
.reveal { opacity: 1 !important; transform: none !important; }

/* Hero: left-aligned like a statement, not centred like a template */
.hero { text-align: left !important; padding-top: 72px !important; max-width: 1180px; margin: 0 auto; }
.hero h1 { max-width: 19ch; margin-left: 0 !important; margin-right: 0 !important; letter-spacing: -0.03em !important; }
.hero h1 span { color: var(--gold) !important; background: none !important; -webkit-text-fill-color: currentColor; }
.hero p { margin-left: 0 !important; margin-right: 0 !important; }
.hero-cta { justify-content: flex-start !important; }

/* Figures in the stats row read like a register: monospaced */
.proof-item > div:first-child { font-family: var(--mono) !important; letter-spacing: -0.02em !important; color: var(--gold) !important; }

/* Mock app windows: neutral chrome instead of macOS traffic lights */
.browser-dot { background: rgba(236, 235, 228, .18) !important; }
.browser-url { font-family: var(--mono); }

/* Code, tags and inline references */
code, pre, .inline-code, .param-name, .endpoint-path { font-family: var(--mono) !important; }
.toc-link.active, .sidebar-link.active { background: rgba(232, 185, 35, .1) !important; color: var(--gold) !important; }

/* Links inside body text */
.section p a, .doc-section p a, .section-content a, .callout a { color: var(--gold); }

/* ── Phones: a menu button for the nav links (see brand.js) ── */
.nav-menu-btn { display: none; }
@media (max-width: 860px) {
  .nav-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--border);
    background: transparent; color: var(--text); font: 600 13px var(--font); cursor: pointer;
  }
  nav { flex-wrap: nowrap !important; gap: 10px; }
  nav .btn-nav { margin: 0 !important; white-space: nowrap; flex-shrink: 0; }
  .nav-menu-btn { width: auto; padding: 0 12px; flex-shrink: 0; }
  nav.nav-open .nav-links {
    display: flex !important; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 5% 16px; gap: 4px;
  }
  nav.nav-open .nav-links a { padding: 10px 0; font-size: 15px; }
}

/* Pages whose own CSS doesn't hide the nav links on phones */
@media (max-width: 860px) {
  nav:not(.nav-open) .nav-links { display: none !important; }
  nav.nav-open .nav-links { position: fixed; top: var(--nav-bottom, 64px); z-index: 999; }
}
/* The screenshots are hidden on small phones, so hide their arrows and dots too
   (they used to sit on the page with nothing above them) */
@media (max-width: 480px) { .carousel-nav { display: none !important; } }

/* Leftover navy and blue-purple washes */
.mockup-glow { display: none !important; }
.cta-section { background: var(--surface) !important; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dash-nav-item.active { background: rgba(232, 185, 35, .1) !important; color: var(--gold) !important; }
.dash-search { background: var(--card) !important; }
.dash-nav-section, .dash-search-text { color: var(--muted) !important; }
.vendor-row { background: transparent !important; }

/* Docs pages: badges, callouts and code in the new palette */
.nav-logo-badge { background: rgba(232, 185, 35, .12) !important; color: var(--gold) !important; border-color: rgba(232, 185, 35, .3) !important; }
.callout.tip, .callout.note, .alert-info {
  background: rgba(63, 178, 127, .07) !important; border-color: rgba(63, 178, 127, .35) !important;
}
.cta-box { background: var(--surface) !important; border-color: rgba(232, 185, 35, .35) !important; }
code { background: rgba(236, 235, 228, .07) !important; color: var(--text) !important; }
pre code { background: none !important; }
.badge-blue, .tag-user { background: rgba(232, 185, 35, .12) !important; color: var(--gold) !important; }
.badge-purple { background: rgba(63, 178, 127, .12) !important; color: var(--green) !important; }

/* Docs on phones: long code lines scroll inside their block instead of
   widening the whole page */
.main, .content, .doc-section { min-width: 0; }
pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 768px) { .inline-code, code { overflow-wrap: anywhere; } table { display: block; overflow-x: auto; } }
@media (max-width: 420px) { .nav-logo-badge { display: none !important; } nav { padding-left: 12px !important; padding-right: 12px !important; } }