/* ChartVoyant — shared styles for standalone SEO/marketing pages.
   Brand tokens mirror the main landing + BRAND.md. Intentionally lightweight
   (no animation libraries) so these pages load fast and index cleanly. */
:root{
  --cv-blue:#00568B; --cv-blue-dark:#003C61; --cv-blue-deep:#002A45;
  --cv-grey:#6D6E6F; --cv-grey-light:#B6B6B7; --cv-white:#fff;
  --cv-ice:#F0F7FA; --cv-mist:#E2EDF2; --cv-slate:#64748B; --cv-charcoal:#1E293B;
  --cv-success:#10B981;
  --cv-font:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --cv-maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--cv-font);color:var(--cv-charcoal);
  background:var(--cv-white);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--cv-blue-dark);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
.container{max-width:var(--cv-maxw);margin:0 auto;padding:0 24px}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:8px;top:8px}

/* ---- Nav ---- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(0,42,69,.96);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,.08);
}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo img{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{color:#DCE9F2;font-size:14.5px;font-weight:500}
.nav-links a:hover{color:#fff;text-decoration:none}
.nav-cta{
  background:var(--cv-blue);color:#fff;padding:9px 18px;border-radius:9px;
  font-size:14.5px;font-weight:600
}
.nav-cta:hover{background:#0568a8;text-decoration:none}
@media(max-width:720px){.nav-links{display:none}}

/* ---- Hero ---- */
.hero{
  background:linear-gradient(160deg,#002A45 0%,#013a5e 55%,#00568B 130%);
  color:#fff;padding:72px 0 64px;position:relative;overflow:hidden
}
.hero .eyebrow{
  color:#8FC5E8;font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 14px
}
.hero h1{
  font-size:clamp(30px,5vw,50px);line-height:1.08;font-weight:600;
  margin:0 0 18px;letter-spacing:-.02em;max-width:16ch
}
.hero p.lede{font-size:clamp(17px,2.2vw,20px);color:#D3E4F0;max-width:60ch;margin:0 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15.5px;
  padding:13px 24px;border-radius:10px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .12s ease,background .12s ease
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-solid{background:var(--cv-blue);color:#fff}
.btn-solid:hover{background:#0568a8}
.btn-light{background:#fff;color:var(--cv-blue-deep)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.hero .note{margin:18px 0 0;font-size:13.5px;color:#9FC3DC}

/* ---- Sections ---- */
section{padding:60px 0}
.section-tint{background:var(--cv-ice)}
h2{font-size:clamp(23px,3.2vw,32px);font-weight:600;letter-spacing:-.015em;color:var(--cv-blue-deep);margin:0 0 14px}
h2+.sub{color:var(--cv-slate);font-size:17px;max-width:62ch;margin:0 0 30px}
.prose{max-width:70ch}
.prose p{margin:0 0 18px}
.prose h2{margin-top:8px}

/* ---- Feature grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:8px}
.card{
  background:#fff;border:1px solid var(--cv-mist);border-radius:14px;padding:24px;
  box-shadow:0 1px 2px rgba(0,42,69,.04)
}
.card h3{margin:0 0 8px;font-size:17.5px;color:var(--cv-blue-dark);font-weight:600}
.card p{margin:0;color:var(--cv-slate);font-size:15px}
.card .ic{
  width:40px;height:40px;border-radius:10px;background:var(--cv-ice);color:var(--cv-blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px
}
.card .ic svg{width:21px;height:21px}

/* ---- Checklist ---- */
.checks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;max-width:70ch}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.checks svg{flex:0 0 auto;width:22px;height:22px;color:var(--cv-success);margin-top:1px}
.checks b{color:var(--cv-blue-deep)}

/* ---- CTA band ---- */
.cta{background:linear-gradient(160deg,#002A45,#00568B);color:#fff;text-align:center;border-radius:20px;padding:52px 28px;margin:8px 0}
.cta h2{color:#fff}
.cta p{color:#D3E4F0;max-width:52ch;margin:0 auto 26px;font-size:17px}
.cta .hero-cta{justify-content:center}

/* ---- Cross links ---- */
.xlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:14px}
.xlink{display:block;background:#fff;border:1px solid var(--cv-mist);border-radius:12px;padding:18px 20px}
.xlink:hover{border-color:var(--cv-blue);text-decoration:none;box-shadow:0 4px 14px rgba(0,42,69,.07)}
.xlink span{display:block;color:var(--cv-blue-dark);font-weight:600;margin-bottom:3px}
.xlink small{color:var(--cv-slate);font-size:14px}

/* ---- Footer ---- */
.site-footer{background:var(--cv-blue-deep);color:#B9CEDD;padding:34px 0;font-size:14.5px}
.site-footer .container{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.site-footer a{color:#DCE9F2}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.breadcrumb{font-size:13.5px;color:var(--cv-slate);padding:18px 0 0}
.breadcrumb a{color:var(--cv-blue)}
