/* SmartAppend Brand Styles v1 */
:root{
  --cobalt:#3B82F6;
  --teal:#3CA8E0;
  --charcoal:#2D2D2D;
  --gray:#E5E7EB;
  --muted:#6B7280;
  --white:#FFFFFF;
  --maxw:1200px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--charcoal);
  background:var(--white);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

.btn{
  display:inline-block;
  padding:14px 20px;
  border-radius:12px;
  font-weight:600;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cobalt);color:var(--white)}
.btn-secondary{background:var(--white);color:var(--cobalt);border-color:var(--cobalt)}
.tag{display:inline-block;background:rgba(59,130,246,.1);color:var(--cobalt);padding:6px 10px;border-radius:9999px;font-size:12px;font-weight:600}

.header{
  position:sticky;top:0;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #f2f2f2;
  z-index:50;
}

/* Base nav styles from original build */
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .brand img{height:34px}
.nav a{margin:0 12px;color:#111827;font-weight:600}

/* Hamburger & mobile panel (base) */
.hamburger{
  display:none;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer
}

/* Content blocks */
.hero{padding:70px 0 40px 0;background:linear-gradient(180deg, #fff, #fafbff)}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:1.1fr .9fr}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}

h1{font-family:Poppins,Inter,sans-serif;font-weight:800;letter-spacing:-0.3px;font-size:40px;margin:0 0 12px}
h2{font-family:Poppins,Inter,sans-serif;font-weight:700;letter-spacing:-0.2px;font-size:28px;margin:0 0 10px}
h3{font-family:DM Sans,Inter,sans-serif;font-weight:600;font-size:20px;margin:0 0 6px}
.lead{font-size:18px;color:#374151;max-width:58ch}
.card{background:var(--white);border:1px solid #eef0f6;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.kpi{background:#fff;border:1px dashed #e5e7eb;border-radius:12px;padding:14px;text-align:center}
.kpi strong{display:block;font-size:26px}

.features{padding:40px 0}
.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.feature-list{grid-template-columns:1fr} .kpis{grid-template-columns:repeat(2,1fr)}}

.section{padding:50px 0}
.badge{font-weight:700;color:var(--cobalt)}
.cta{padding:60px 0;background:linear-gradient(180deg, rgba(59,130,246,.06), rgba(60,168,224,.06))}

.footer{border-top:1px solid #edf0f5;padding:30px 0;color:#6b7280;font-size:14px}
.footer .columns{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
@media(max-width:900px){.footer .columns{grid-template-columns:1fr 1fr}}
.notice{font-size:12px;color:#6b7280;margin-top:8px}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.pricing{grid-template-columns:1fr}}
.price{font-size:36px;font-weight:800;color:#111827}
.hr{height:1px;background:#eef0f6;margin:20px 0}
.faq dt{font-weight:700;margin-top:10px}
.faq dd{margin:0 0 10px 0;color:#374151}

/* -------------------------------------------------
   HEADER & NAV LAYOUT + ACTIVE STATE (final rules)
   ------------------------------------------------- */

/* Keep header row compact + centered */
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Desktop main nav (id="mainnav"): keep items together */
#mainnav {
  display: flex;
  gap: 24px;
  flex: 0 0 auto;   /* prevent stretching */
}

/* Cancel wide margins from .nav a */
#mainnav a {
  margin: 0;
  color: #111827;
  font-weight: 600;
  text-decoration: none;
}

/* Current-page highlight (JS adds .is-current or aria-current=page) */
#mainnav a.is-current,
#mainnav a[aria-current="page"] {
  color: #2563eb;
  font-weight: 700;
}
#mainnav a.is-current::after,
#mainnav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  background: #2563eb;
  border-radius: 2px;
  margin-top: 6px;
}

/* Mobile panel default: HIDDEN on desktop */
.mobile { display: none; }
.mobile.open { display: block; }

/* Mobile panel link highlight mirrors desktop */
#mobileNav a.is-current,
#mobileNav a[aria-current="page"] {
  color: #2563eb;
  font-weight: 700;
}

/* Responsive: show hamburger, hide desktop links */
@media (max-width: 900px) {
  .hamburger { display: block; }
  #mainnav { display: none; }
  /* basic mobile panel styling */
  .mobile {
    position: fixed;
    top: 70px; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: var(--shadow);
    padding: 16px;
  }
  .mobile a {
    display: block;
    padding: 12px 8px;
    color: #111827;
  }
}

/* === Prevent blue-on-blue text for active button links === */
.btn.btn-primary.is-current,
.btn.btn-primary[aria-current="page"] {
  color: #fff !important;
}

/* --- Force-hide mobile menu by default; show only when toggled --- */
#mobileNav { display: none !important; }
#mobileNav.open { display: block !important; }

/* --- Active page highlight (desktop) --- */
#mainnav a.is-current,
#mainnav a[aria-current="page"] {
  color: #2563eb;
  font-weight: 700;
}
#mainnav a.is-current::after,
#mainnav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  background: #2563eb;
  border-radius: 2px;
  margin-top: 6px;
}

/* --- Active page highlight (mobile list) --- */
#mobileNav a.is-current,
#mobileNav a[aria-current="page"] {
  color: #2563eb;
  font-weight: 700;
}

/* Keep the Contact CTA text white */
#mainnav .btn.btn-primary { color: #fff !important; }

/* Ensure desktop nav doesn’t stretch/slide */
header .container.nav { display: flex; align-items: center; justify-content: space-between; }
#mainnav { display: flex; gap: 24px; flex: 0 0 auto; }
#mainnav a { margin: 0; } /* cancel any global margins on nav links */

/* --- FORCE-hide mobile menu by default (shows only when .open) --- */
#mobileNav { display: none !important; }
#mobileNav.open { display: block !important; }

/* --- Active page highlight (desktop) --- */
#mainnav a.is-current,
#mainnav a[aria-current="page"] {
  color: #2563eb;
  font-weight: 700;
}
#mainnav a.is-current::after,
#mainnav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  background: #2563eb;
  border-radius: 2px;
  margin-top: 6px;
}

/* --- Active page highlight (mobile) --- */
#mobileNav a.is-current,
#mobileNav a[aria-current="page"] {
  color: #2563eb;
  font-weight: 700;
}

/* Keep Contact CTA white */
#mainnav .btn.btn-primary { color: #fff !important; }

/* Lock desktop layout so links don’t slide */
header .container.nav { display: flex; align-items: center; justify-content: space-between; }
#mainnav { display: flex; gap: 24px; flex: 0 0 auto; }
#mainnav a { margin: 0; }

/* --- GUARD: if any stray links are direct children of the header container, hide them --- */
header .container.nav > a:not(.btn) { display: none !important; }


/* Allow the logo to scale properly */
.logo {
  height: 100px;
  width: auto;
  max-height: 120px;
}

/* Ensure the nav bar allows more vertical space */
header .container.nav {
  align-items: center;
  min-height: 120px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ---- Logo sizing (high specificity) ---- */
header .container.nav .brand picture,
header .container.nav .brand img {
  display: block;
}

header .container.nav .brand img.logo {
  height: 100px !important;   /* try 80–100px */
  width: auto !important;
  max-height: none !important;
}

/* Let the header be tall enough for the logo */
header .container.nav {
  display: flex;
  align-items: center;
  min-height: 110px;           /* adjust with logo height */
  padding-top: 8px;
  padding-bottom: 8px;
}
/* allow header to be tall enough */
header .container.nav {
  display: flex;
  align-items: center;
  min-height: 110px;
  padding-block: 8px;
}

/* strongest rules for the logo inside the header */
header .container.nav .brand picture,
header .container.nav .brand img {
  display: block;
}

header .container.nav .brand img.logo {
  height: 100px !important;
  width: auto !important;
  max-height: none !important;
}

/* last-resort breaker for any stray max-height */
header img { max-height: none !important; }

/* ===== SmartAppend: responsive logo ===== */
.logo {
  height: 120px;
  max-width: 100%;
}

/* Tablets */
@media (max-width: 1024px) {
  .logo { height: 90px; }
}

/* Large phones */
@media (max-width: 768px) {
  .logo { height: 70px; }
}

/* Small phones */
@media (max-width: 480px) {
  .logo { height: 55px; }
}

/* Mobile drawer behavior (if not already present) */
.header .mobile {
  display: none;
}
.header .mobile.open {
  display: block;
}