/* The Zaronex demo's clothes for the public form (leadsdev.zaronex.ai).
   Loaded AFTER styles.css by the demo build (scripts/build-lead-brand.js),
   so it only has to restate what differs: the tokens, and the logo tile.
   Values are the CRM's Zaronex scheme (frontEnd/crm/src/brands/zaronex):
   change a colour there, change it here. This file is served to the
   browser, so it names no other brand — the build refuses one that does. */
:root {
  --bg: #f5f7ff;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-soft: #55617a;
  --ink-faint: #94a0b8;
  --line: #e3e8f5;
  --navy: #2563eb;
  --navy-soft: #e8efff;
  --navy-bright: #b6f09c;
  --rust: #d92d20;
  --rust-soft: #fdecea;
  /* The badge on the dark panel is the only thing painted gold, and the
     lime spark reads there where the CRM's pink would not. */
  --gold: #b6f09c;
  --gold-soft: #fce7f3;
  --sidebar-bg: #0f172a;
  --panel-line: #22304d;
  --on-dark: #a3aecb;
  --on-dark-soft: #7c87a3;
}

/* styles.css sizes a tall mark in a square tile. Zaronex's is a wide
   lockup (symbol + "ZARONEX AI", 2.8:1), which a square would shrink to a
   sliver — so the tile gives way to the artwork's own shape, sized by width. */
.pitch .brand-mark {
  width: clamp(260px, 28vw, 420px);
  height: auto;
  padding: 0;
  background: transparent;
}
.pitch .brand-mark img { width: 100%; height: auto; }

@media (max-width: 1023px) {
  /* On the light card the white artwork still needs a dark ground. */
  .card-brand .brand-mark {
    width: 240px;
    height: auto;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--sidebar-bg);
  }
  .card-brand .brand-mark img { width: 100%; height: auto; }
}