/*
 * VeloCRM website — 2026 brand layer (VeloTech Suite Brand Guidelines, Oct 2026).
 *
 * Loaded AFTER each page's own <style> blocks, so every override for the new
 * edition is reviewable in this one file (same pattern as the VeloLedger site).
 * Page styles keep their structure; their old hex values were swapped onto the
 * crm-* ramp (primary = L 0.55 #1c73c5). This file then:
 *   - swaps the VC monogram for the stroke wordmark + CSS halo (nav + footer)
 *   - turns the dark navy bands, CTA band and footer light (crm-50 + halo)
 *   - makes buttons soft-strong (crm-200 fill / crm-800 ink, hover crm-300; no
 *     gradients, no lift), eyebrows Josefin Sans, cards plain-bordered
 * Never put white text on a light brand fill. Halos only behind the logo,
 * headlines and the light bands.
 */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

:root {
  --crm-50: #eef6ff; --crm-100: #d8eaff; --crm-200: #bbdbff; --crm-300: #8cc2ff;
  --crm-400: #67a9f0; --crm-600: #287ccf; --crm-700: #1c5fa1; --crm-800: #144678;
  --crm-primary: #1c73c5;          /* L 0.55 — links, active, accents (4.9:1 on white) */
  --crm-button: var(--crm-200); --crm-on-button: var(--crm-800); --crm-button-hover: var(--crm-300);
  --velo-ink: #211c2b; --tagline: #6e6a7c; --muted-fg: #5d5d5d; --border: #dedede; --canvas: #f5f5f5;
  --halo: 187, 219, 255;           /* crm-halo (stop 200) as an RGB triplet */
  --halo-stops: rgba(var(--halo), .5), rgba(var(--halo), .42) 35%, rgba(var(--halo), .28) 60%,
                rgba(var(--halo), .13) 80%, rgba(var(--halo), .04) 93%, rgba(var(--halo), 0);
  --eyebrow-font: 'Josefin Sans', 'Plus Jakarta Sans', sans-serif;
}

/* ---------- Logo: stroke wordmark + halo (8.74 x cap height ≈ 169px) ---------- */
.vt-logo { position: relative; isolation: isolate; gap: 0; }
.vt-logo::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 169px; height: 169px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo-stops)); pointer-events: none;
}
.vt-wordmark { display: block; height: 22px; width: auto; }
.vt-mark, .vt-word { display: none; }  /* retired monogram markup, if any remains */

/* ---------- Nav ---------- */
.vt-nav { background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--border); overflow: visible; }
.vt-links a { color: #454150; }
.vt-links a:hover, .vt-links a.active { color: var(--crm-primary); }
.vt-cta { background: var(--crm-button); color: var(--crm-on-button); border-radius: 8px; box-shadow: none; font-weight: 600; }
.vt-cta:hover { background: var(--crm-button-hover); transform: none; }

/* ---------- Footer: light crm-50 band with a centred halo ---------- */
.vt-footer {
  position: relative; overflow: hidden; color: var(--muted-fg); border-top: 1px solid var(--border);
  background: radial-gradient(circle 520px at 50% 0%, var(--halo-stops)), var(--crm-50);
}
.vt-foot-brand .vt-logo { color: inherit; }
.vt-foot-brand p, .vt-footer li a { color: var(--muted-fg); }
.vt-footer li a:hover { color: var(--crm-primary); }
.vt-footer h5 { color: var(--velo-ink); }
.vt-foot-bottom { border-top-color: var(--border); color: var(--tagline); }

/* ---------- TL;DR (GEO summary box): plain border, no coloured left rule ---------- */
.vt-tldr { background: var(--crm-50); border: 1px solid var(--crm-100); border-radius: 8px; }
.vt-tldr .vt-tldr-l { font-family: var(--eyebrow-font); font-weight: 400; letter-spacing: .3em; color: var(--crm-700); }

/* ---------- Buttons: soft-strong, flat, 8px ---------- */
.btn { border-radius: 8px; }
.btn-primary, .btn-white {
  background: var(--crm-button); color: var(--crm-on-button); border-color: transparent; box-shadow: none;
}
.btn-primary:hover, .btn-white:hover { background: var(--crm-button-hover); transform: none; box-shadow: none; }
.btn-ghost, .btn-outline-white { background: #fff; color: var(--velo-ink); border-color: var(--border); }
.btn-ghost:hover, .btn-outline-white:hover { background: #fff; border-color: var(--crm-primary); color: var(--crm-primary); }

/* ---------- Eyebrows / section labels: Josefin Sans, wide tracking, crm-700 ---------- */
.eyebrow {
  background: none; border: 0; padding: 0; border-radius: 0;
  font-family: var(--eyebrow-font); font-weight: 400; font-size: .8rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--crm-700);
}
.eyebrow .dot { display: none; }
.kicker { font-family: var(--eyebrow-font); font-weight: 400; letter-spacing: .3em; color: var(--crm-700); }

/* ---------- Heroes: white with a halo behind the headline ---------- */
.hero { background: radial-gradient(circle 440px at 24% 42%, var(--halo-stops)), #fff; }
.hero.center-hero, .center-hero.hero { background: radial-gradient(circle 460px at 50% 38%, var(--halo-stops)), #fff; }
.hero h1, .h-head h2, .card h3, .price-name, .price-tag, .suite-node h4, .flowcard h4, .faq summary { color: var(--velo-ink); }
.hero .sub, .h-head p, .card p { color: var(--muted-fg); }

/* ---------- Cards: plain border, no lift, no coloured accents ---------- */
.card { border-radius: 8px; }
.card:hover { border-color: var(--crm-300); box-shadow: none; transform: none; }
.card .ic { background: var(--crm-50); color: var(--crm-primary); border-radius: 8px; border: 1px solid var(--crm-100); }
.card .ic .vt-ic, .vt-ic { width: 22px; height: 22px; display: block; }
.deal { border-left: 1px solid var(--border); }
.pipeline-card { border-radius: 12px; box-shadow: none; }
.intg:hover { transform: none; }

/* ---------- Former dark navy bands → light crm-50 with a centred halo ---------- */
section.dark {
  color: var(--velo-ink);
  background: radial-gradient(circle 560px at 50% 18%, var(--halo-stops)), var(--crm-50);
  border-top: 1px solid var(--crm-100); border-bottom: 1px solid var(--crm-100);
}
.dark .h-head h2, .dark .card h3 { color: var(--velo-ink); }
.dark .h-head p, .dark .card p { color: var(--muted-fg); }
.dark .card ul li { color: #454150; }
.dark .kicker { color: var(--crm-700); }
.dark .card { background: #fff; border-color: var(--border); }
.dark .card .ic { background: var(--crm-50); color: var(--crm-primary); }

/* ---------- Final CTA band → light ---------- */
.final {
  color: var(--velo-ink); border: 1px solid var(--crm-100); border-radius: 12px;
  background: radial-gradient(circle 420px at 50% 30%, var(--halo-stops)), var(--crm-50);
}
.final h2 { color: var(--velo-ink); }
.final p { color: var(--muted-fg); }

/* ---------- Pricing + comparison tables ---------- */
.price-card { border-radius: 12px; }
.price-card.feat { border: 2px solid var(--crm-primary); box-shadow: none; }
.badge { background: var(--crm-button); color: var(--crm-on-button); }
.tbl { border-radius: 8px; }
.tbl th { background: var(--crm-100); color: var(--crm-800); }
.tbl .vc { background: var(--crm-50); color: var(--crm-700); }

/* ---------- Velo suite map: VeloCRM blue here, siblings in their own colours ---------- */
.suite-node { border-radius: 8px; }
.suite-node.here { border: 2px solid var(--crm-primary); background: var(--crm-50); }
.suite-node .tag { font-family: var(--eyebrow-font); font-weight: 400; letter-spacing: .24em; }
.suite-node.node-ledger .tag { color: #007044; }   /* ledger-700, hue 158 */
.suite-node.node-pulse .tag { color: #4f53a2; }    /* pulse-700, hue 278 */
.suite-node.node-expense .tag { color: #006881; }  /* expense-700, hue 222 */

/* ---------- Resource articles ---------- */
.cta-section {
  color: var(--velo-ink); border: 1px solid var(--crm-100); border-radius: 12px;
  background: radial-gradient(circle 380px at 50% 30%, var(--halo-stops)), var(--crm-50);
}
.cta-section h2, .cta-section h3 { color: var(--velo-ink); }
.cta-section p { color: var(--muted-fg); }
.cta-button, .cta-section .cta-button, .cta-button-large, nav .cta-button, .nav-cta {
  background: var(--crm-button); background-color: var(--crm-button); color: var(--crm-on-button);
  border-radius: 8px; box-shadow: none;
}
.cta-button:hover, .cta-section .cta-button:hover, .cta-button-large:hover, nav .cta-button:hover, .nav-cta:hover {
  background: var(--crm-button-hover); background-color: var(--crm-button-hover); color: var(--crm-on-button); transform: none; box-shadow: none;
}
.callout, .highlight, .highlight-box, .intro {
  background: var(--crm-50); border: 1px solid var(--crm-100); border-radius: 8px;
}
.pros, .cons { border-left-width: 1px; border-radius: 8px; }
.pricing-table th, .comparison-matrix th, thead, th { background-color: var(--crm-100); color: var(--crm-800); }
.winner { background-color: var(--crm-100); color: var(--crm-800); }
.back-link { color: var(--crm-primary); }