/* ============================================================
   Dealer Pulse — Marketing site design system
   Brand guide (2026): warm — teal + orange "pulse" on cream neutrals,
   matched to the live CRM. Palette: #1C485D / #315B70 teal · #D36B2F
   orange · #FFEAD8 peach · #FCFAF6 cream · #2B2521 ink · #554E49 slate.
   ============================================================ */

:root{
  /* surfaces */
  --canvas:        #FCFAF6;                 /* warm cream page bg */
  --canvas-2:      #F3EEE5;                 /* deeper cream wells */
  --surface:       #FFFFFF;
  --ink-bg:        #1C485D;                 /* dark teal hero/footer */
  --ink-bg-2:      #24586F;
  --border:        #E8E1D4;                 /* warm hairline */
  --border-2:      #D7CDBC;
  --border-ink:    #2E5E74;

  /* ink */
  --ink:    #2B2521;                        /* warm near-black headings/text */
  --ink-2:  #554E49;
  --muted:  #877E74;
  --faint:  #ABA193;
  --on-dark:    #F4EFE7;
  --on-dark-2:  #AFC1CB;

  /* brand */
  --primary:      #315B70;                  /* teal — buttons, links, structure */
  --primary-ink:  #1C485D;
  --primary-soft: #E4ECF0;
  --accent:       #D36B2F;                  /* orange — energy / "Pulse" */
  --accent-ink:   #B0551F;
  --accent-soft:  #FFEAD8;
  --signal:       #D36B2F;                  /* orange — the live pulse */
  --signal-ink:   #B0551F;
  --signal-soft:  #FFEAD8;
  --gold:         #D99A33;

  --r-sm: 9px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --sh-sm: 0 1px 2px oklch(0.3 0.02 250/.07), 0 1px 1px oklch(0.3 0.02 250/.05);
  --sh-md: 0 4px 14px oklch(0.3 0.02 250/.08), 0 2px 6px oklch(0.3 0.02 250/.05);
  --sh-lg: 0 18px 50px oklch(0.28 0.03 250/.16), 0 6px 16px oklch(0.28 0.03 250/.08);
  --sh-pop: 0 30px 80px oklch(0.24 0.04 250/.28), 0 8px 20px oklch(0.24 0.04 250/.14);

  --font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; line-height:1.08; letter-spacing:-.025em; font-weight:800; color:var(--ink); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.mono{ font-family:var(--mono); }
.tnum{ font-variant-numeric:tabular-nums; }
::selection{ background:var(--signal-soft); }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:96px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary-ink);
}
.eyebrow.on-dark{ color:var(--signal); }
/* every eyebrow dot is a "we're live" indicator — pulsating green ring */
.eyebrow .dot{ width:11px; height:11px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:livePulse 1.8s cubic-bezier(.66,0,0,1) infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6); } 70%{ box-shadow:0 0 0 10px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion:reduce){ .eyebrow .dot{ animation:none; box-shadow:0 0 0 3px rgba(34,197,94,.28); } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:15.5px; font-weight:700; cursor:pointer;
  padding:13px 22px; border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:transform .14s ease, background .14s, box-shadow .14s, border-color .14s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--sh-md); }
.btn-primary:hover{ background:var(--accent-ink); }
.btn-dark{ background:var(--ink); color:var(--canvas); }
.btn-dark:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border-2); }
.btn-ghost:hover{ background:var(--canvas-2); border-color:var(--faint); }
.btn-ghost.on-dark{ color:var(--on-dark); border-color:var(--border-ink); }
.btn-ghost.on-dark:hover{ background:oklch(1 0 0/.07); }
.btn-lg{ font-size:16.5px; padding:15px 28px; }

/* ---------- top nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:oklch(0.986 0.006 85/.82);
  backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner{ display:flex; align-items:center; gap:14px; height:70px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px; letter-spacing:-.03em; }
.brand-mark{ height:42px; width:auto; flex-shrink:0; display:block; }
.brand-wm{ display:inline-flex; flex-direction:column; line-height:1.02; }
.brand b{ color:var(--accent); }
.brand-tag{ font-style:normal; font-weight:600; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.brand--dark .brand-tag{ color:var(--on-dark-2); }
.nav-tabs{ display:flex; gap:4px; margin-left:18px; }
.nav-tabs a{
  padding:9px 15px; border-radius:var(--r-pill); font-size:15px; font-weight:650; color:var(--ink-2);
  transition:background .12s, color .12s;
}
.nav-tabs a:hover{ background:var(--canvas-2); color:var(--ink); }
.nav-tabs a.active{ background:var(--primary-soft); color:var(--primary-ink); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-login{ font-weight:700; font-size:15px; padding:9px 16px; border-radius:var(--r-pill); color:var(--ink); white-space:nowrap; }
.nav-login:hover{ background:var(--canvas-2); }

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--ink-bg); color:var(--on-dark); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1100px 520px at 78% -10%, oklch(0.5 0.09 232/.55), transparent 60%),
    radial-gradient(800px 480px at 8% 110%, oklch(0.64 0.15 47/.28), transparent 60%);
  pointer-events:none;
}
.hero .wrap{ position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; padding:78px 0 96px; }
.hero h1{ color:#fff; font-size:clamp(38px,5vw,62px); letter-spacing:-.03em; }
.hero h1 .hl{ color:var(--signal); }
.hero-sub{ margin-top:22px; font-size:20px; line-height:1.55; color:var(--on-dark-2); max-width:540px; }
.hero-cta{ margin-top:34px; display:flex; gap:13px; flex-wrap:wrap; }
.hero-trust{ margin-top:30px; display:flex; align-items:center; gap:18px; color:var(--on-dark-2); font-size:14px; flex-wrap:wrap; }
.hero-trust .sep{ width:1px; height:16px; background:var(--border-ink); }

/* ---------- product mock (browser frame) ---------- */
.mock{
  border-radius:var(--r-lg); overflow:hidden; background:var(--surface); color:var(--ink);
  box-shadow:var(--sh-pop); border:1px solid oklch(1 0 0/.1);
}
.mock-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--canvas-2); border-bottom:1px solid var(--border); }
.mock-bar .d{ width:11px; height:11px; border-radius:50%; }
.mock-bar .u{ margin-left:12px; font-family:var(--mono); font-size:11.5px; color:var(--muted); background:var(--surface); padding:4px 12px; border-radius:99px; border:1px solid var(--border); }
.mock-body{ padding:0; }

/* The product mockups depict the REAL CRM, which keeps its own warm palette
   (slate-teal primary + terracotta "orange" accent, warm neutrals). The new blue
   brand is for the marketing site itself — so inside any mockup we re-pin the
   design tokens to the live CRM's actual colors. Real PNG screenshots are raster
   and unaffected; this only recolors the CSS mockups so they match the app. */
.mock, .r-media, .media-slot{
  --canvas:        oklch(0.985 0.006 80);   /* warm off-white */
  --canvas-2:      oklch(0.965 0.008 80);
  --surface:       oklch(1 0 0);
  --border:        oklch(0.915 0.008 75);
  --border-2:      oklch(0.86 0.01 75);
  --ink:    oklch(0.27 0.012 60);
  --ink-2:  oklch(0.43 0.012 60);
  --muted:  oklch(0.58 0.011 60);
  --faint:  oklch(0.70 0.010 60);
  --primary:      oklch(0.45 0.058 232);    /* CRM slate-teal primary */
  --primary-ink:  oklch(0.38 0.06 232);
  --primary-soft: oklch(0.95 0.022 232);
  --accent:       oklch(0.64 0.15 47);      /* CRM terracotta — the orange */
  --accent-ink:   oklch(0.52 0.15 45);
  --accent-soft:  oklch(0.95 0.035 60);
  --signal:       oklch(0.72 0.13 178);     /* CRM live/pulse teal-green */
  --signal-ink:   oklch(0.5 0.1 182);
  --signal-soft:  oklch(0.94 0.04 180);
  --gold:         oklch(0.74 0.13 85);
}

/* generic card */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:99px; font-size:12.5px; font-weight:700; }

/* ---------- section headers ---------- */
.sec-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
.sec-head h2{ font-size:clamp(30px,3.6vw,44px); margin-top:14px; }
.sec-head p{ margin-top:16px; font-size:18.5px; color:var(--muted); }

/* ---------- feature grid ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:26px; transition:transform .16s, box-shadow .16s, border-color .16s;
}
.feat:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--border-2); }
.feat .ico{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.feat h3{ font-size:20px; letter-spacing:-.02em; }
.feat p{ margin-top:9px; color:var(--muted); font-size:15.5px; line-height:1.55; }

/* tone helpers */
.t-primary{ background:var(--primary-soft); color:var(--primary-ink); }
.t-accent{ background:var(--accent-soft); color:var(--accent-ink); }
.t-signal{ background:var(--signal-soft); color:var(--signal-ink); }
.t-gold{ background:oklch(0.95 0.05 85); color:oklch(0.5 0.1 75); }

/* ---------- alternating feature rows ---------- */
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:58px; align-items:center; }
.row2 + .row2{ margin-top:88px; }
.row2.flip .r-media{ order:-1; }
.r-copy h2{ font-size:clamp(26px,2.8vw,36px); margin-top:14px; }
.r-copy p.lead{ margin-top:16px; font-size:18px; color:var(--ink-2); }
.r-list{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px; }
.r-list li{ display:flex; gap:11px; align-items:flex-start; font-size:16px; color:var(--ink-2); }
.r-list .tick{ width:22px; height:22px; border-radius:50%; background:var(--signal-soft); color:var(--signal-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }

/* ---------- metrics band ---------- */
.band{ background:var(--ink-bg); color:var(--on-dark); }
.band-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.stat .n{ font-size:clamp(34px,4vw,52px); font-weight:800; letter-spacing:-.03em; color:#fff; }
.stat .n .u{ color:var(--signal); }
.stat .l{ margin-top:6px; color:var(--on-dark-2); font-size:15px; }

/* ---------- logos / social proof ---------- */
.proof{ display:flex; align-items:center; justify-content:center; gap:38px; flex-wrap:wrap; opacity:.85; }
.proof .logo-txt{ font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--muted); }

/* ---------- testimonial ---------- */
.quote{ max-width:860px; margin:0 auto; text-align:center; }
.quote .q{ font-size:clamp(22px,2.6vw,30px); font-weight:650; letter-spacing:-.02em; line-height:1.4; color:var(--ink); }
.quote .by{ margin-top:22px; display:flex; align-items:center; justify-content:center; gap:12px; }
.avatar{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; background:var(--ink-bg); color:#fff; border-radius:var(--r-xl); overflow:hidden; padding:64px 48px; text-align:center; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(700px 360px at 50% -30%, oklch(0.5 0.09 232/.6), transparent 65%); }
.cta-band > *{ position:relative; }
.cta-band h2{ color:#fff; font-size:clamp(30px,3.4vw,42px); }
.cta-band p{ margin-top:14px; font-size:19px; color:var(--on-dark-2); }

/* ---------- pricing ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.tier{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px; display:flex; flex-direction:column; }
.tier.feat-tier{ border:2px solid var(--primary); box-shadow:var(--sh-lg); position:relative; }
.tier .badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; font-size:12.5px; font-weight:700; padding:5px 14px; border-radius:99px; }
.tier h3{ font-size:21px; }
.tier .price{ margin:16px 0 4px; font-size:46px; font-weight:800; letter-spacing:-.03em; }
.tier .price span{ font-size:16px; font-weight:600; color:var(--muted); letter-spacing:0; }
.tier .desc{ color:var(--muted); font-size:15px; min-height:44px; }
.tier ul{ list-style:none; padding:0; margin:22px 0 26px; display:flex; flex-direction:column; gap:12px; }
.tier li{ display:flex; gap:10px; font-size:15px; color:var(--ink-2); }
.tier li .tick{ color:var(--signal-ink); flex-shrink:0; }
.tier .btn{ margin-top:auto; width:100%; }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin:0 auto; }
.qa{ border-bottom:1px solid var(--border); padding:22px 0; }
.qa h4{ font-size:18.5px; }
.qa p{ margin-top:9px; color:var(--muted); font-size:16px; }

/* ---------- footer ---------- */
.footer{ background:var(--ink-bg); color:var(--on-dark-2); padding:60px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.footer h5{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; font-weight:700; }
.footer a{ display:block; padding:6px 0; color:var(--on-dark-2); font-size:15px; }
.footer a:hover{ color:#fff; }
.footer-bot{ margin-top:44px; padding-top:24px; border-top:1px solid var(--border-ink); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:14px; }

/* ---------- AI summary highlight ---------- */
.ai-highlight-grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; }

/* reveal on scroll — only hides when JS is active (html.js), so no-JS / SEO
   bots / a failed observer all still show content. */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
html.js .reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; padding:56px 0 64px; }
  .row2{ grid-template-columns:1fr; gap:30px; }
  .row2.flip .r-media{ order:0; }
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .ai-highlight-grid{ grid-template-columns:1fr; }
  .price-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .band-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .section{ padding:64px 0; }
  .wrap{ padding:0 18px; }
  .nav-tabs{ display:none; }
  /* tighten the nav so "Log in" + "Book a demo" fit on one line */
  .nav-inner{ gap:8px; }
  .nav-cta{ gap:8px; }
  .nav-login{ padding:8px 10px; font-size:14px; }
  .nav .brand span{ font-size:18px; }
  /* center the hero CTA buttons on phones */
  .hero-cta{ justify-content:center; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; max-width:340px; }
  .feat-grid{ grid-template-columns:1fr; }
  .band-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cta-band{ padding:46px 24px; }
}

/* ---- Screenshot slots: show a real screenshot when present, else the mockup ----
   Drop an image at the src path and it swaps in automatically (img onload adds
   .has-shot, which hides the styled-mockup siblings); a missing file 404s and
   the mockup stays visible. No code change needed to fill a slot later. */
.media-slot > .shot{ display:none; width:100%; height:auto; border-radius:14px; border:1px solid var(--border); box-shadow:0 14px 38px rgba(20,22,44,.12); }
.media-slot.has-shot > .shot{ display:block; }
.media-slot.has-shot > :not(.shot){ display:none; }