/* ============================================================
   shared-theme.css — ONE design system for every static page.
   Loaded LAST so it overrides blog/styles.css, solutions.css,
   recs.css, glossary.css. Tokens mirror the React homepage:
   bg #08080f · text #ededef · accent #7C6AEF (purple) ·
   WhatsApp green #25D366 reserved for WhatsApp elements only.
   ============================================================ */

:root{
  --bg:#08080f;
  --accent:#7C6AEF;
  --accent-dim:#6A58E0;
  --wa:#25D366;
}

body{background:var(--bg)}

/* ---- Legacy accent cleanups ---------------------------------- */
/* Blog CTA block: was yellow gradient — now homepage purple */
.cta-block{
  background:linear-gradient(135deg,#7C6AEF 0%,#5B4BD8 100%) !important;
  color:#fff !important;
}
.cta-block .cta-button{
  background:#08080f !important;
  color:#fff !important;
}
/* Solutions TL;DR card: was yellow — now purple-tinted surface */
.tldr-card{
  background:rgba(124,106,239,.08) !important;
  border:1px solid rgba(124,106,239,.35) !important;
  color:var(--text,#ededef) !important;
}
.tldr-label{color:#A99BFF !important;background:transparent !important}
/* WhatsApp elements stay green regardless of accent */
.wa-float,.btn-wa{background:var(--wa) !important;color:#08080f !important}
.nav-wa{color:var(--wa) !important}

/* recs.css (blog listicles + /vs/) hardcoded greens → homepage purple */
.rec-hero .eyebrow,.eyebrow{color:#A99BFF !important}
.rec-tldr{border-left:3px solid var(--accent) !important;background:rgba(124,106,239,.07) !important}
.rank-item.top{border-color:rgba(124,106,239,.5) !important}
.rank-item.top .rank-num{background:var(--accent) !important;color:#fff !important}
.rank-pros-cons .pros h4{color:#A99BFF !important}
.cmp-table .col-us{background:rgba(124,106,239,.09) !important;color:#EDEDEF !important}
.stat-num{color:var(--accent) !important}
.about-avatar{background:linear-gradient(135deg,var(--accent),#5B4BD8) !important}
.about-quote{border-left-color:var(--accent) !important}
.rec-btn-primary{background:var(--accent) !important;color:#fff !important}
.rec-btn-primary:hover{background:var(--accent-dim) !important}
.author-avatar{background:linear-gradient(135deg,var(--accent),#5B4BD8) !important}

/* solutions.css hardcoded greens → purple */
.sol-hero{background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(124,106,239,.14),transparent) !important}
.compare-table .col-highlight{background:rgba(124,106,239,.09) !important}
.contact-card::before{background:linear-gradient(90deg,var(--accent),#5B4BD8) !important}

/* ---- Typography normalization --------------------------------
   Inner pages shipped with 56px heroes and 17-18px body text while
   the homepage runs 34px/15px. Bring every template to one scale. */
body{font-size:16px}
.hero h1,.sol-hero h1{font-size:38px !important;line-height:1.15 !important}
.rec-hero h1{font-size:clamp(30px,3vw,38px) !important;line-height:1.15 !important}
article h1,main h1{font-size:38px;line-height:1.15}
article h2,.sol-h2,.rec-contact h2{font-size:25px !important;line-height:1.25 !important}
article h3{font-size:19px !important}
article p,article li{font-size:16px !important;line-height:1.7 !important}
.lede,.sol-sub,.sol-hero-sub,.rec-hero .lede{font-size:17px !important;line-height:1.6 !important}
.sol-main p,.sol-main li{font-size:16px;line-height:1.7}
.stat{font-size:30px !important}
.stat-block .stat,.stat-num{font-size:30px !important}
.rank-num{font-size:26px !important}
@media (max-width:640px){
  .hero h1,.sol-hero h1,.rec-hero h1,article h1,main h1{font-size:29px !important}
  article h2,.sol-h2{font-size:22px !important}
}

/* ---- Canonical navbar (nav2) --------------------------------- */
.nav2{
  position:sticky;top:0;z-index:200;
  background:rgba(17,17,19,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.nav2-in{
  max-width:1200px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:28px;
}
.nav2-logo{
  display:flex;align-items:center;gap:9px;
  font-weight:800;font-size:19px;color:#ededef;text-decoration:none;
  white-space:nowrap;
}
.nav2-dot{
  width:11px;height:11px;border-radius:4px;flex:0 0 auto;
  background:var(--accent);box-shadow:0 0 14px var(--accent);
}
.nav2-links{
  display:flex;align-items:center;gap:24px;margin-left:auto;
}
.nav2-links > a,.nav2-drop > a{
  color:#d0d0d4;text-decoration:none;font-size:14.5px;font-weight:500;
  transition:color .15s;
}
.nav2-links > a:hover,.nav2-drop > a:hover{color:#fff}
.nav2-car{font-size:10px;margin-left:5px;opacity:.65}

/* dropdowns — pure CSS, keyboard-friendly via :focus-within */
.nav2-drop{position:relative}
.nav2-menu{
  position:absolute;top:100%;left:-14px;padding-top:12px;
  display:none;min-width:250px;
}
.nav2-drop:hover .nav2-menu,
.nav2-drop:focus-within .nav2-menu{display:block}
.nav2-menu-in{
  background:#131316;border:1px solid rgba(255,255,255,.09);
  border-radius:12px;padding:8px;
  box-shadow:0 18px 48px rgba(0,0,0,.55);
}
.nav2-menu-in a{
  display:block;padding:9px 12px;border-radius:8px;
  color:#d0d0d4;text-decoration:none;font-size:14px;font-weight:500;
  white-space:nowrap;
}
.nav2-menu-in a:hover{background:rgba(124,106,239,.14);color:#fff}
.nav2-menu-in a.nav2-all{color:#A99BFF}

.nav2-cta{
  background:var(--accent);color:#fff !important;text-decoration:none;
  font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:8px;
  white-space:nowrap;transition:background .15s;
}
.nav2-cta:hover{background:var(--accent-dim)}

/* mobile: dropdown menus need tap — :hover won't fire reliably, so
   the trigger links themselves go to the hub pages; menus hidden */
@media (max-width:760px){
  .nav2-in{padding:12px 16px;gap:14px;overflow-x:auto;scrollbar-width:none}
  .nav2-in::-webkit-scrollbar{display:none}
  .nav2-links{gap:16px}
  .nav2-menu{display:none !important}
  .nav2-car{display:none}
  .nav2-logo{font-size:17px}
  .nav2-cta{padding:8px 12px;font-size:12.5px}
}