/* EvolveCX brand system. docs/rebrand/02-design-system.md
   Light-first, graphite + violet. No gradients, no cyan/magenta, no glow. */

:root{
  /* Core */
  --graphite:#1F1F23; --violet:#6C5CE7; --violet-press:#5a4bd4; --white:#FFFFFF;
  /* Neutral system */
  --light-bg:#F7F7F9; --border:#E5E7EB; --secondary:#6B7280; --muted:#9CA3AF;
  /* Functional — status only */
  --success:#16A34A; --warning:#F59E0B; --error:#DC2626; --info:#64748B;
  /* Data-viz */
  --dv-1:#6C5CE7; --dv-2:#10B981; --dv-3:#F59E0B; --dv-4:#DC2626; --dv-5:#3B82F6; --dv-6:#8B5CF6; --dv-7:#94A3B8;
  /* Type */
  --font-head:'Montserrat',sans-serif; --font-body:'Inter',sans-serif;
  /* Spacing (8px base) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --radius:10px; --maxw:1160px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-body); color:var(--graphite); background:var(--white);
  font-size:16px; line-height:1.56; -webkit-font-smoothing:antialiased; }

h1,h2,h3,h4{ font-family:var(--font-head); color:var(--graphite); font-weight:800;
  line-height:1.15; letter-spacing:-0.01em; text-align:left; }
h1{ font-size:clamp(34px,5vw,56px); }
h2{ font-size:clamp(26px,3.4vw,38px); }
h3{ font-size:20px; }
p{ color:var(--graphite); } p.sub{ color:var(--secondary); }
small,.meta{ color:var(--muted); }
a{ color:var(--violet); text-decoration:none; }
a:hover{ color:var(--violet-press); }

.eyebrow{ font:600 12px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--secondary); }
.eyebrow--violet{ color:var(--violet); }

/* Layout */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s3); }
.section{ padding:var(--s7) 0; }
.band{ background:var(--light-bg); }
.divider{ height:1px; background:var(--border); border:0; margin:var(--s5) 0; }
.stat{ font-family:var(--font-head); font-weight:800; color:var(--violet); }

/* Content lists — brand violet bullet (review G-list). Scoped to unclassed
   content lists inside .wrap, so nav/footer (list-style:none) are untouched. */
.wrap ul:not([class]) > li::marker{ color:var(--violet); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; font:600 14px var(--font-body);
  padding:12px 20px; border-radius:8px; cursor:pointer; border:1px solid transparent;
  background:var(--violet); color:var(--white); transition:background .15s; }
.btn:hover{ background:var(--violet-press); color:var(--white); }
.btn--secondary{ background:transparent; color:var(--graphite); border-color:var(--graphite); }
.btn--secondary:hover{ background:var(--light-bg); color:var(--graphite); }
.btn--sm{ padding:9px 14px; font-size:13px; }

/* Cards */
.card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--s3); box-shadow:0 1px 2px rgba(16,24,40,.04); }
.card--selected{ border-color:var(--violet); box-shadow:0 0 0 1px var(--violet); }
.card .label{ color:var(--secondary); }
.grid{ display:grid; gap:var(--s3); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:820px){
  .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:560px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; }
}

/* Nav */
.nav{ display:flex; align-items:center; gap:var(--s3); max-width:var(--maxw);
  margin:0 auto; padding:14px var(--s3); border-bottom:1px solid var(--border); background:var(--white); }
.nav__logo{ display:inline-flex; }
.nav__logo img, .nav__logo svg{ height:34px; width:auto; display:block; }   /* review G1: was 28px; inline vector logo (partials/logo.njk) */
.nav__links{ list-style:none; display:flex; align-items:center; gap:var(--s3); margin-left:auto; }
.nav__link{ color:var(--graphite); font-size:14px; padding-bottom:2px; border-bottom:2px solid transparent; }
.nav__link:hover{ color:var(--violet-press); }
.nav__link.is-active{ color:var(--violet); border-bottom-color:var(--violet); }
.nav__cta{ margin-left:var(--s1); }
.nav__hamburger{ display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; }
.nav__hamburger span{ width:20px; height:2px; background:var(--graphite); display:block; }
@media(max-width:820px){
  .nav{ position:relative; }
  .nav__links{ display:none; }
  /* review (mobile blocker): the hamburger toggles .is-open; drop the links as a panel
     below the bar. Previously there was no open state and no JS, so the menu never opened. */
  .nav__links.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:0; margin-left:0;
    position:absolute; top:100%; left:0; right:0; z-index:50;
    background:var(--white); border-bottom:1px solid var(--border);
    box-shadow:0 10px 28px rgba(16,24,40,.10); padding:var(--s1) var(--s3) var(--s2);
  }
  .nav__links.is-open .nav__link{ display:block; font-size:16px; padding:13px 0; border-bottom:1px solid var(--border); }
  .nav__links.is-open li:last-child .nav__link{ border-bottom:0; }
  .nav__hamburger{ display:flex; margin-left:auto; }
  /* review G8: keep the nav CTA a >=44px touch target on mobile */
  .nav__cta{ padding-top:12px; padding-bottom:12px; }
}

/* Footer */
.footer{ border-top:1px solid var(--border); background:var(--light-bg); margin-top:var(--s7); }
.footer__inner{ max-width:var(--maxw); margin:0 auto; padding:var(--s5) var(--s3) var(--s3); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s4); }
.footer__brand img, .footer__brand svg{ height:30px; margin-bottom:10px; display:block; }   /* review G1: was 28px */
.footer__tagline{ font-size:12.5px; color:var(--secondary); max-width:240px; }
.footer__col h4{ font:700 12px var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--graphite); margin-bottom:10px; }
.footer__col ul{ list-style:none; }
.footer__col li{ margin-bottom:9px; }
.footer__col a{ font-size:13px; color:var(--secondary); }
.footer__col a:hover{ color:var(--violet-press); }
.footer__bottom{ margin-top:var(--s4); padding-top:var(--s2); border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
@media(max-width:820px){ .footer__grid{ grid-template-columns:1fr 1fr; } }

/* Product lockup (logo only — the product logos carry their own wordmark; review G5) */
.lockup{ display:inline-flex; align-items:center; gap:12px; }
.lockup__logo{ width:auto; display:block; }
.lockup__name{ font-family:var(--font-head); font-weight:800; color:var(--graphite); }
.lockup--hero .lockup__logo{ height:44px; }
.lockup--hero .lockup__name{ font-size:28px; }
.lockup--card .lockup__logo{ height:34px; }   /* index: squint-test minimum */
.lockup--card .lockup__name{ font-size:18px; }

/* Intelligence Loop */
.loop{ display:block; max-width:100%; height:auto; }
.loop--hero{ margin:var(--s3) 0; }
.loop--divider{ margin:var(--s4) auto; opacity:.9; }
.loop--mark{ height:16px; width:auto; }

/* Status chip (functional, e.g. Wevn "in development") */
.chip{ display:inline-flex; align-items:center; gap:6px; font:600 12px var(--font-body);
  white-space:nowrap;   /* review G3: keep multi-word labels on one line so the pill never clips */
  padding:4px 10px; border-radius:999px; border:1px solid var(--border); color:var(--info); background:var(--white); }