/* ============================================================
   site.css — the public pages' shared layer (owner, 2026-11-01)
   ============================================================
   Loaded before each page's own <style>, by the home, /agents, the legal
   pages and the blog. It holds what must be the same everywhere: the colours,
   the logo, the one button with its one hover, the footer, the icons.

   Type scale: multiples of 4 only, 48px at most (12 · 16 · 20 · 24 · 28 · 32 ·
   36 · 48). tests/test_site_design.py checks every page's CSS for it.

   The owner's palette (2026-11-01): #030811 #E49E49 #112B58 #488079 #FFFFFF.
   One orange. What sits on it is near black (--on-signal, 8.9:1; white would be
   2.3:1), and a button under the pointer turns white, not a second orange. Small
   teal text is a tint (--good, --signal2-ink): #488079 on a card is 3.3:1. Cards keep
   their earlier navy, the owner's call over #112B58. The public
   pages are dark only, whatever the device or the console's theme says;
   tests/test_site_design.py and tests/test_palette.py hold all this.
   ============================================================ */
:root {
  color-scheme: dark;
  --page:#030811; --surface:#0F1B2E; --card:#142743; --border:#223A5E;
  --strong:#FFFFFF; --text:#D6DEEA; --muted:#A9B5C9;
  --signal:#E49E49; --on-signal:#030811;
  --signal2:#488079; --on-signal2:#FFFFFF; --signal2-ink:#7FB3AB;
  --neutral-fill:#475569; --on-neutral:#FFFFFF;
  --good:#7FB3AB; --bad:#EF5B5B; --bad-ink:#FF9A9A; --blue:#A9B9D6; --blue-ink:#A9B9D6;
  --logo:#FFFFFF;
  --nav-bg:rgba(3,8,17,.92); --line-soft:rgba(34,58,94,.5); --row-hover:rgba(255,255,255,.02);
  --hero-glow:rgba(228,158,73,.10); --hero-glow-2:rgba(72,128,121,.10);
  --shadow-card:0 30px 70px rgba(3,8,17,.5); --shadow-mock:0 22px 50px rgba(3,8,17,.45);
  --h1:48px; --h2:36px; --h3:32px;
  --ic-tick:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22m5 14l3.5 3.5L19 6.5%22/%3E%3C/svg%3E"); --ic-cancel:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M18 6L6 18m12 0L6 6%22/%3E%3C/svg%3E"); --ic-plus:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M12 4v16m8-8H4%22/%3E%3C/svg%3E");
}
@media (max-width:820px) { :root { --h1:36px; --h2:28px; --h3:24px; } }

/* ── Icons: Hugeicons, /static/assets/icons.svg, one set for the site and the console ── */
.ic { width:1em; height:1em; display:inline-block; vertical-align:-.15em; flex:none; }

/* A pseudo-element as an icon, in its own colour (a tick in a list). */
.mark-tick::before, .mark-cancel::before { content:''; flex:none; display:inline-block; width:16px; height:16px;
  background:currentColor; -webkit-mask:var(--ic-tick) center/contain no-repeat; mask:var(--ic-tick) center/contain no-repeat; }

/* ── The logo: white, no tile. ── */
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { display:block; width:44px; height:40px; flex:none; background:var(--logo);
  -webkit-mask:url(/static/assets/logo-mark.png) center/contain no-repeat;
  mask:url(/static/assets/logo-mark.png) center/contain no-repeat; }

/* ── One button, two looks at rest, ONE look on hover: whichever it was, a
      button under the pointer lifts and turns white. ── */
.btn-primary, .btn-ghost, .btn, .contact-form button, .nav-links a.nav-cta, .nav-links a.nav-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 28px; border:1px solid transparent; border-radius:8px;
  font-family:inherit; font-size:16px; font-weight:600; line-height:24px; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.nav-links a.nav-cta, .nav-links a.nav-ghost { min-height:40px; padding:8px 16px; }
.btn-primary, .contact-form button, .nav-links a.nav-cta { background:var(--signal); color:var(--on-signal); }
.btn-ghost, .nav-links a.nav-ghost { background:transparent; border-color:var(--border); color:var(--strong); }
.btn-primary:hover, .btn-ghost:hover, .btn:hover, .contact-form button:hover,
.nav-links a.nav-cta:hover, .nav-links a.nav-ghost:hover {
  background:var(--strong); border-color:var(--strong); color:var(--page);
  transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(255,255,255,.35); }
.btn-primary:active, .btn-ghost:active, .btn:active, .contact-form button:active,
.nav-links a.nav-cta:active, .nav-links a.nav-ghost:active { transform:none; box-shadow:none; }
.btn-primary:focus-visible, .btn-ghost:focus-visible, .btn:focus-visible, .contact-form button:focus-visible,
.nav-links a.nav-cta:focus-visible, .nav-links a.nav-ghost:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }

/* ── The footer: the same on every public page ── */
.site-footer { border-top:1px solid var(--border); padding:48px; color:var(--muted); }
.sf-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; }
.sf-brand { align-self:start; }
.sf-col { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.sf-h { font-size:12px; font-weight:600; line-height:16px; color:var(--muted); }
.sf-col a { display:inline-flex; align-items:center; gap:8px; color:var(--text); font-size:16px; line-height:24px; text-decoration:none; transition:color .16s ease; }
.sf-col a:hover { color:var(--signal); }
.sf-col a .ic { font-size:16px; color:var(--muted); transition:color .16s ease; }
.sf-col a:hover .ic { color:inherit; }
.sf-copy { grid-column:1 / -1; border-top:1px solid var(--border); padding-top:24px; padding-inline-end:88px; /* the chat bubble */
  font-size:12px; line-height:20px; color:var(--muted); }
@media (max-width:820px) {
  .site-footer { padding:32px 16px 96px; }
  .sf-grid { grid-template-columns:1fr 1fr; gap:32px 16px; }
  .sf-brand { grid-column:1 / -1; }
  .sf-copy { padding-inline-end:0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-ghost:hover, .btn:hover, .contact-form button:hover,
  .nav-links a.nav-cta:hover, .nav-links a.nav-ghost:hover { transform:none; }
}