/* marketing.css — shared styling for the CarDealerCMS content pages.
   Extracted 10 Sep 2026 from dealer-website-providers-compared.php, which
   carried it inline; a third copy was about to be made for the pricing page.
   Brand colours live in brand-theme.css — load that first. The older content
   pages still have their own inline copy; migrate them to this file. */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f8fafc;color:#1e293b;line-height:1.6}

/* NAV */
.nav{background:#fff;border-bottom:1px solid #e2e8f0;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{color:var(--cd-navy);font-size:20px;font-weight:900;text-decoration:none;letter-spacing:-.4px}
.nav-logo span{color:var(--cd-accent)}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{color:#475569;font-size:14px;text-decoration:none;font-weight:500}
.nav-links a:hover{color:var(--cd-navy)}
.nav-cta{background:var(--cd-accent)!important;color:#fff!important;padding:8px 20px;border-radius:8px;font-weight:700!important}
.nav-cta:hover{background:var(--cd-accent-dark)!important}

/* HERO */
.hero{background:#fff;padding:80px 24px 96px;text-align:center;position:relative;overflow:hidden}
.hero-inner{max-width:860px;margin:0 auto;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--cd-accent);color:var(--cd-accent);font-size:12px;font-weight:700;padding:6px 16px;border-radius:20px;letter-spacing:.6px;margin-bottom:22px;text-transform:uppercase}
.hero h1{font-size:clamp(30px,5vw,54px);font-weight:900;color:var(--cd-navy);line-height:1.1;margin-bottom:18px;letter-spacing:-.5px}
.hero h1 em{color:var(--cd-accent);font-style:normal}
.hero-sub{font-size:18px;color:#64748b;max-width:620px;margin:0 auto 38px;line-height:1.75}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-add{display:inline-block;background:var(--cd-accent);color:#fff;padding:15px 30px;border-radius:10px;font-size:15px;font-weight:800;text-decoration:none;transition:.15s;border:none;cursor:pointer}
.btn-add:hover{background:var(--cd-accent-dark);transform:translateY(-1px)}
.btn-ghost{display:inline-block;background:transparent;color:var(--cd-navy);padding:15px 30px;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;border:1.5px solid var(--cd-navy);transition:.15s}
.btn-ghost:hover{background:#f8fafc}

/* TRUST BAR */
.trust-bar{background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 24px}
/* 10 Sep 2026: centred flex items wrapped into a ragged second row that did not
   line up with the first. An even grid keeps every tick in a column. */
.trust-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 24px;align-items:center}
@media(max-width:820px){.trust-inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.trust-inner{grid-template-columns:1fr}}
.trust-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;color:#475569;line-height:1.4}
.trust-item i{color:var(--cd-accent);font-size:14px;flex-shrink:0;margin-top:2px}

/* SECTIONS */
.section{max-width:1080px;margin:0 auto;padding:72px 24px}
.section-label{font-size:11px;font-weight:800;color:var(--cd-accent);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px}
.section-title{font-size:clamp(26px,4vw,40px);font-weight:900;color:#0a1f3d;margin-bottom:16px;line-height:1.15}
.section-title em{color:var(--cd-accent);font-style:normal}
.section-body{font-size:16px;color:#64748b;max-width:620px;line-height:1.8}
.section-bg{background:#fff;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}
.section-dark{background:#0a1f3d}

/* COMPARISON */
.compare-table{width:100%;border-collapse:collapse;margin-top:40px;border-radius:14px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.compare-table th{padding:16px 20px;text-align:left;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.compare-table th:first-child{background:#f8fafc;color:#64748b;width:30%}
.compare-table th.cd{background:var(--cd-accent);color:#fff}
.compare-table th.at{background:#e63946;color:#fff}
.compare-table th.mot{background:#1d3557;color:#fff}
.compare-table th.ebay{background:#6b21a8;color:#fff}
.compare-table td{padding:14px 20px;font-size:14px;border-top:1px solid #f1f5f9}
.compare-table td:first-child{font-weight:600;color:#374151;background:#fafafa}
.compare-table td.cd{background:var(--cd-accent-light);color:var(--cd-accent-darker);font-weight:700}
.compare-table td.at{background:#fff5f5;color:#7f1d1d}
.compare-table td.mot{background:#f0f4ff;color:#1e3a5f}
.compare-table td.ebay{background:#faf5ff;color:#581c87}
.compare-table .tick{color:#10b981;font-size:16px}
.compare-table .cross{color:#ef4444;font-size:16px}
.compare-note{margin-top:16px;font-size:13px;color:#94a3b8;font-style:italic}

/* WHY OWN VS RENT */
.rent-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.rent-card{border-radius:16px;padding:32px;border:2px solid}
.rent-card.bad{border-color:#fecaca;background:#fff5f5}
.rent-card.good{border-color:#bfdbfe;background:#eff6ff}
.rent-card h3{font-size:17px;font-weight:800;margin-bottom:14px}
.rent-card.bad h3{color:#991b1b}
.rent-card.good h3{color:#1e3a8a}
.rent-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.rent-list li{font-size:14px;display:flex;align-items:flex-start;gap:9px;line-height:1.6}
.rent-card.bad .rent-list li i{color:#ef4444;margin-top:3px;flex-shrink:0}
.rent-card.good .rent-list li i{color:#10b981;margin-top:3px;flex-shrink:0}
.rent-card.bad .rent-list li{color:#7f1d1d}
.rent-card.good .rent-list li{color:#1e3a5f}

/* PRICING */
.pricing-wrap{background:linear-gradient(135deg,#0a1f3d,#0f2e58);border-radius:20px;padding:48px;margin-top:0;color:#fff;text-align:center}
.pricing-wrap .price-amount{font-size:56px;font-weight:900;color:#fff}
.pricing-wrap .price-amount span{font-size:18px;color:rgba(255,255,255,.6);font-weight:500}
.pricing-wrap .price-desc{font-size:15px;color:rgba(255,255,255,.75);max-width:480px;margin:10px auto 28px}
.price-list{list-style:none;display:flex;flex-direction:column;gap:10px;max-width:400px;margin:0 auto 32px;text-align:left}
.price-list li{font-size:14px;color:rgba(255,255,255,.9);display:flex;align-items:flex-start;gap:9px}
.price-list li i{color:#4ade80;margin-top:2px;flex-shrink:0}
.pricing-cta{display:inline-block;background:#fff;color:var(--cd-accent);padding:15px 34px;border-radius:10px;font-weight:800;text-decoration:none;font-size:16px}
.pricing-note{margin-top:16px;font-size:12px;color:rgba(255,255,255,.5)}

/* FAQ */
.faq-list{margin-top:40px;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;overflow:hidden}
.faq-q{padding:18px 22px;font-weight:700;font-size:15px;color:#0a1f3d;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q:hover{background:#f8fafc}
.faq-q i{color:var(--cd-accent);transition:.2s;flex-shrink:0}
.faq-a{padding:0 22px 18px;font-size:14px;color:#64748b;line-height:1.75;display:none}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q i{transform:rotate(45deg)}

/* FINAL CTA */
.final-cta{background:#0a1f3d;padding:72px 24px;text-align:center}
.final-cta h2{color:#fff;font-size:clamp(24px,3.5vw,36px);font-weight:900;margin-bottom:14px}
.final-cta p{color:rgba(255,255,255,.7);font-size:15px;margin-bottom:28px}

/* FOOTER */
.footer{background:#0a1f3d;color:rgba(255,255,255,.5);padding:32px 24px;text-align:center;font-size:13px;border-top:1px solid rgba(255,255,255,.08)}
.footer a{color:rgba(255,255,255,.5);text-decoration:none}
.footer a:hover{color:#a21caf}

@media(max-width:900px){
  /* 10 Sep 2026: the header had no mobile rules at all — below about 900px the
     links wrapped onto three lines and pushed the trial button off the top of
     the page on every content page. Let the bar grow and wrap tidily instead. */
  .nav{height:auto;flex-wrap:wrap;padding:10px 16px;gap:8px}
  .nav-logo{font-size:18px}
  .nav-links{flex-wrap:wrap;gap:10px 14px;width:100%;justify-content:flex-start}
  .nav-links a{font-size:13px}
  .nav-cta{padding:7px 14px;font-size:13px}
}
@media(max-width:700px){
  .compare-table{font-size:12px}
  .compare-table th,.compare-table td{padding:10px}
  .rent-grid{grid-template-columns:1fr}
  .pricing-wrap{padding:28px 20px}
  .hero{padding:48px 18px 56px}
  .hero-ctas{flex-wrap:wrap}
}