/* ============================================
   CRM Compass — Main Stylesheet
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:        #1b3a5c;
  --navy-dark:   #0f2440;
  --navy-light:  #264d7a;
  --accent:      #e85d04;
  --accent-h:    #c94d02;
  --gold:        #d97706;
  --success:     #16a34a;
  --info:        #2563eb;
  --gray-50:     #f8fafc;
  --gray-100:    #f1f5f9;
  --gray-200:    #e2e8f0;
  --gray-300:    #cbd5e1;
  --gray-400:    #94a3b8;
  --gray-500:    #64748b;
  --gray-600:    #475569;
  --gray-700:    #334155;
  --gray-800:    #1e293b;
  --text:        #1e293b;
  --text-muted:  #64748b;
  --border:      #e2e8f0;
  --white:       #ffffff;
  --radius:      8px;
  --radius-lg:   14px;
  --shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 12px rgba(0,0,0,.09);
  --shadow-lg:   0 10px 24px rgba(0,0,0,.11);
  --font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --max-w:       1100px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--text); background: var(--white); line-height: 1.65; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent); }

/* Typography */
h1,h2,h3,h4,h5,h6 { line-height: 1.25; font-weight: 700; color: var(--gray-800); }
h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }
p  { margin-bottom: 1rem; }
ul,ol { padding-left: 1.5rem; }
li { margin-bottom: .35rem; }
strong { font-weight: 600; }

/* Layout */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }
.section    { padding: 3rem 0; }
.section-lg { padding: 4.5rem 0; }
.section-sm { padding: 1.5rem 0; }

/* ===================== HEADER ===================== */
.site-header {
  background: var(--navy);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.nav-inner {
  display: flex; align-items: center; gap: 1.5rem;
  height: 64px; position: relative;
}
.logo {
  font-size: 1.25rem; font-weight: 800;
  color: var(--white); text-decoration: none; white-space: nowrap;
  display: flex; align-items: center; gap: .4rem;
}
.logo:hover { color: var(--white); opacity: .92; }
.logo .accent { color: #f97316; }
.nav-links { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.nav-links > a {
  color: rgba(255,255,255,.82);
  font-size: .88rem; font-weight: 500;
  padding: .45rem .75rem;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-links > a:hover { background: rgba(255,255,255,.12); color: var(--white); }
/* Dropdown */
.nav-drop { position: relative; }
.nav-drop-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.82); font-size: .88rem; font-weight: 500;
  padding: .45rem .75rem; border-radius: var(--radius);
  display: flex; align-items: center; gap: .25rem;
  transition: background .15s, color .15s; white-space: nowrap;
  font-family: inherit;
}
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn { background: rgba(255,255,255,.12); color: var(--white); }
.drop-arrow { font-size: .7rem; opacity: .7; }
.nav-drop-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: .4rem 0; min-width: 210px; z-index: 300;
}
.nav-drop-menu a {
  display: block; padding: .5rem 1.1rem;
  color: var(--navy) !important; font-size: .88rem; font-weight: 500;
  text-decoration: none; white-space: nowrap; background: none !important;
  border-radius: 0; transition: background .12s;
}
.nav-drop-menu a:hover { background: var(--gray-100) !important; color: var(--accent) !important; }
.nav-drop:hover .nav-drop-menu,
.nav-drop.open .nav-drop-menu { display: block; }
/* Language flags */
.lang-switcher { display: flex; gap: .2rem; align-items: center; margin: 0 .3rem; }
.lang-switcher a { font-size: 1.25rem; text-decoration: none; opacity: .75; line-height:1; transition: opacity .15s; }
.lang-switcher a:hover { opacity: 1; }
/* CTA */
.nav-cta {
  background: var(--accent) !important; color: var(--white) !important;
  margin-left: .4rem; padding: .45rem 1rem !important;
}
.nav-cta:hover { background: var(--accent-h) !important; }
.nav-toggle {
  display: none; background: none; border: none;
  color: white; font-size: 1.5rem; cursor: pointer;
  padding: .4rem; margin-left: auto;
}

/* ===================== BREADCRUMB ===================== */
.breadcrumb {
  background: var(--gray-50); border-bottom: 1px solid var(--border);
  padding: .55rem 0; font-size: .82rem; color: var(--text-muted);
}
.breadcrumb ol { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.3rem; }
.breadcrumb li+li::before { content:'/'; margin-right:.3rem; color:var(--gray-400); }
.breadcrumb a { color: var(--navy); }
.breadcrumb li:last-child { color: var(--gray-600); }

/* ===================== HERO ===================== */
.hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%);
  color: var(--white); padding: 4rem 0 3.5rem; text-align: center;
}
.hero h1 { color: var(--white); margin-bottom: .75rem; }
.hero .subtitle { color: rgba(255,255,255,.8); font-size: 1.1rem; max-width: 640px; margin: 0 auto 1.5rem; }
.hero-meta { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; font-size:.83rem; color:rgba(255,255,255,.65); margin-top:.5rem; }
.hero-meta span::before { content:'✓ '; color:#4ade80; }

/* Page hero (review / category pages) */
.page-hero {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-light));
  color: white; padding: 2.5rem 0;
}
.page-hero-inner { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.crm-icon {
  width:72px; height:72px; background:white;
  border-radius:var(--radius-lg); display:flex; align-items:center;
  justify-content:center; font-size:2rem; flex-shrink:0;
  box-shadow: var(--shadow-md);
}
.page-hero-info h1 { color:white; margin-bottom:.2rem; }
.page-hero-info .tagline { color:rgba(255,255,255,.75); margin:.1rem 0 .75rem; font-size:1.05rem; }
.page-hero-scores { display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:.75rem; }
.score-pill {
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  border-radius:50px; padding:.3rem .95rem; font-size:.84rem; color:white;
}
.score-pill strong { color:#fcd34d; }

/* ===================== BUTTONS ===================== */
.btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.68rem 1.45rem; border-radius:var(--radius);
  font-weight:600; font-size:.93rem; text-decoration:none;
  cursor:pointer; border:none; transition:transform .1s, box-shadow .15s, background .15s;
  white-space:nowrap;
}
.btn:active { transform:translateY(1px); }
.btn-primary  { background:var(--accent); color:white; box-shadow:0 2px 8px rgba(232,93,4,.32); }
.btn-primary:hover { background:var(--accent-h); color:white; box-shadow:0 4px 14px rgba(232,93,4,.42); }
.btn-outline { background:transparent; border:2px solid var(--navy); color:var(--navy); }
.btn-outline:hover { background:var(--navy); color:white; }
.btn-white { background:white; color:var(--navy); }
.btn-white:hover { background:var(--gray-100); color:var(--navy); }
.btn-lg { padding:.85rem 2rem; font-size:1rem; }
.btn-sm { padding:.4rem .9rem; font-size:.83rem; }
.btn-block { width:100%; justify-content:center; }

/* ===================== BADGES ===================== */
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.28rem .72rem; border-radius:50px;
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.badge-gold   { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.badge-navy   { background:var(--navy); color:white; }
.badge-green  { background:#dcfce7; color:#166534; }
.badge-orange { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.badge-blue   { background:#dbeafe; color:#1e40af; }
.badge-gray   { background:var(--gray-100); color:var(--gray-700); }

/* ===================== SCORE DISPLAYS ===================== */
.score-bar-row { display:flex; align-items:center; gap:.75rem; padding:.5rem 0; }
.score-bar-label { width: 38%; font-size:.88rem; font-weight:500; color:var(--gray-700); flex-shrink:0; }
.score-bar-track { flex:1; height:8px; background:var(--gray-200); border-radius:4px; overflow:hidden; }
.score-bar-fill  { height:100%; border-radius:4px; background:var(--navy); transition:width .3s; }
.score-bar-fill.green  { background:var(--success); }
.score-bar-fill.gold   { background:var(--gold); }
.score-bar-fill.red    { background:#ef4444; }
.score-bar-val { font-size:.88rem; font-weight:700; color:var(--gray-800); min-width:2.8rem; text-align:right; }

/* ===================== CRM CARDS (homepage picks) ===================== */
.pick-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1.25rem; }
.pick-card {
  background:white; border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  box-shadow:var(--shadow); transition:box-shadow .15s;
  position:relative;
}
.pick-card:hover { box-shadow:var(--shadow-md); }
.pick-card.featured { border-color:var(--accent); border-width:2px; }
.pick-card.featured::before {
  content:'⭐ Editor\'s Choice';
  position:absolute; top:-1px; right:1.25rem;
  background:var(--accent); color:white;
  font-size:.7rem; font-weight:700; padding:.2rem .65rem;
  border-radius:0 0 var(--radius) var(--radius);
  text-transform:uppercase; letter-spacing:.04em;
}
.pick-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.pick-icon { width:46px; height:46px; border-radius:10px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.pick-name { font-weight:700; font-size:1.05rem; line-height:1.2; }
.pick-tagline { font-size:.82rem; color:var(--text-muted); }
.pick-score { font-size:2.1rem; font-weight:800; color:var(--navy); line-height:1; }
.pick-score-denom { font-size:1rem; font-weight:400; color:var(--text-muted); }
.pick-stars { color:#f59e0b; font-size:.88rem; margin:.25rem 0 .75rem; }
.pick-desc { font-size:.88rem; color:var(--gray-600); margin-bottom:1rem; }
.pick-price { font-size:.83rem; color:var(--text-muted); margin-top:.5rem; }
.pick-price strong { color:var(--gray-800); }

/* ===================== COMPARISON TABLE ===================== */
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); }
.compare-table {
  width:100%; border-collapse:collapse; font-size:.875rem; min-width:740px;
}
.compare-table th {
  background:var(--navy); color:white;
  padding:.8rem 1rem; text-align:left; font-weight:600;
  font-size:.82rem; white-space:nowrap;
}
.compare-table th.hl { background:var(--accent); }
.compare-table th:first-child { min-width:170px; }
.compare-table td { padding:.72rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.compare-table tr:last-child td { border-bottom:none; }
.compare-table tr:nth-child(even) td { background:var(--gray-50); }
.compare-table tr:hover td { background:#eff6ff; }
.compare-table td.hl { background:#fff7f5; font-weight:500; }
.compare-table tr:nth-child(even) td.hl { background:#fff0eb; }
.compare-table .row-label { font-weight:600; color:var(--gray-700); }
.chk  { color:var(--success); font-size:1.1rem; }
.crs  { color:#ef4444; font-size:1.1rem; }
.ptl  { color:var(--gold); font-size:.85rem; font-weight:600; }

/* ===================== RANKING LIST ===================== */
.rank-list { display:flex; flex-direction:column; gap:1.1rem; }
.rank-card {
  display:grid; grid-template-columns:2.5rem 52px 1fr auto;
  align-items:center; gap:1.15rem;
  background:white; border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.1rem 1.4rem;
  box-shadow:var(--shadow); transition:box-shadow .15s;
}
.rank-card:hover { box-shadow:var(--shadow-md); }
.rank-card.top { border-color:var(--accent); border-width:2px; }
.rank-num { font-size:1.35rem; font-weight:800; color:var(--gray-300); text-align:center; }
.rank-num.gold { color:var(--gold); }
.rank-icon { width:52px; height:52px; background:var(--gray-100); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.65rem; flex-shrink:0; }
.rank-info h3 { font-size:1rem; margin-bottom:.2rem; }
.rank-info p  { font-size:.85rem; color:var(--gray-600); margin:0; }
.rank-meta { text-align:right; flex-shrink:0; }
.rank-score { font-size:1.65rem; font-weight:800; color:var(--navy); line-height:1; }
.rank-score-lbl { font-size:.72rem; color:var(--text-muted); }
.rank-stars { color:#f59e0b; font-size:.82rem; }

/* ===================== PROS / CONS ===================== */
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin:1.5rem 0; }
.pros-box, .cons-box { padding:1.2rem 1.4rem; border-radius:var(--radius-lg); }
.pros-box { background:#f0fdf4; border:1px solid #bbf7d0; }
.cons-box { background:#fef2f2; border:1px solid #fecaca; }
.pros-box h4 { color:#166534; margin-bottom:.65rem; }
.cons-box h4 { color:#991b1b; margin-bottom:.65rem; }
.pros-list, .cons-list { list-style:none; padding:0; }
.pros-list li, .cons-list li { padding:.28rem 0; font-size:.9rem; }
.pros-list li::before { content:'✓ '; color:var(--success); font-weight:700; }
.cons-list li::before { content:'✗ '; color:#ef4444; font-weight:700; }

/* ===================== FEATURE CARDS ===================== */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1rem; margin:1.5rem 0; }
.feature-card { padding:1.2rem; background:var(--gray-50); border-radius:var(--radius); border:1px solid var(--border); }
.feature-icon { font-size:1.5rem; margin-bottom:.5rem; }
.feature-card h4 { margin-bottom:.35rem; font-size:.95rem; }
.feature-card p  { font-size:.85rem; color:var(--gray-600); margin:0; }

/* ===================== PRICING CARDS ===================== */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin:1.5rem 0; }
.pricing-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.4rem 1.25rem; text-align:center; }
.pricing-card.hl { border-color:var(--accent); border-width:2px; background:#fff7f5; }
.plan-name  { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:.4rem; }
.plan-price { font-size:1.9rem; font-weight:800; color:var(--navy); line-height:1.1; }
.plan-price em { font-size:.88rem; font-weight:400; font-style:normal; color:var(--text-muted); }
.plan-desc  { font-size:.83rem; color:var(--gray-600); margin-top:.5rem; }

/* ===================== CTA BLOCKS ===================== */
.cta-banner {
  background:linear-gradient(135deg, var(--navy-dark), var(--navy-light));
  color:white; border-radius:var(--radius-lg); padding:2.5rem 2rem; text-align:center; margin:2.5rem 0;
}
.cta-banner h2 { color:white; margin-bottom:.65rem; }
.cta-banner p  { color:rgba(255,255,255,.8); max-width:540px; margin:0 auto 1.5rem; }
.cta-inline {
  display:flex; align-items:center; gap:1.5rem;
  background:#fff7f5; border:2px solid #fed7aa;
  border-radius:var(--radius-lg); padding:1.25rem 1.5rem; margin:1.75rem 0;
}
.cta-inline .cta-ico { font-size:2rem; flex-shrink:0; }
.cta-inline p { margin:0; font-size:.9rem; color:var(--gray-700); }
.cta-inline .btn { flex-shrink:0; }

/* ===================== FAQ (details/summary) ===================== */
.faq-list { display:flex; flex-direction:column; gap:.65rem; }
details.faq-item { border:1px solid var(--border); border-radius:var(--radius); }
details.faq-item summary {
  padding:.95rem 1.25rem;
  font-size:.93rem; font-weight:600; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
  background:var(--gray-50); border-radius:var(--radius);
  user-select:none;
}
details.faq-item summary::-webkit-details-marker { display:none; }
details.faq-item summary::after { content:'+'; font-size:1.2rem; color:var(--navy); flex-shrink:0; }
details.faq-item[open] summary { border-radius:var(--radius) var(--radius) 0 0; }
details.faq-item[open] summary::after { content:'−'; }
.faq-body { padding:.75rem 1.25rem 1.1rem; font-size:.9rem; color:var(--gray-600); line-height:1.65; }
.faq-body p { margin-bottom:.65rem; }
.faq-body p:last-child { margin-bottom:0; }

/* ===================== VERDICT / INFO BOXES ===================== */
.verdict-box { background:var(--navy); color:white; border-radius:var(--radius-lg); padding:1.75rem; margin:2rem 0; }
.verdict-box h3 { color:white; margin-bottom:.6rem; }
.verdict-box p  { color:rgba(255,255,255,.85); margin:0; }
.info-box    { background:#eff6ff; border-left:4px solid var(--info); padding:1rem 1.25rem; margin:1.25rem 0; font-size:.9rem; color:var(--gray-700); border-radius:0 var(--radius) var(--radius) 0; }
.warning-box { background:#fff7ed; border-left:4px solid var(--accent); padding:1rem 1.25rem; margin:1.25rem 0; font-size:.9rem; color:var(--gray-700); border-radius:0 var(--radius) var(--radius) 0; }

/* ===================== REVIEW PAGE LAYOUT ===================== */
.review-layout { display:grid; grid-template-columns:1fr 300px; gap:2rem; align-items:start; }
.review-sidebar { position:sticky; top:80px; }
.sidebar-card { background:white; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:1rem; box-shadow:var(--shadow); }
.sidebar-card h4 { margin-bottom:.65rem; font-size:.88rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); border-bottom:1px solid var(--border); padding-bottom:.5rem; }
.sidebar-score { text-align:center; padding:.5rem 0; }
.sidebar-big   { font-size:3.2rem; font-weight:800; color:var(--navy); line-height:1; }
.sidebar-stars { color:#f59e0b; font-size:1.1rem; margin:.3rem 0 .2rem; }
.sidebar-lbl   { font-size:.78rem; color:var(--text-muted); }
.sidebar-link  { display:block; text-align:center; margin-top:1rem; }

/* ===================== ARTICLE ===================== */
.article-body h2 { margin:2.25rem 0 .9rem; padding-top:1.25rem; border-top:1px solid var(--border); font-size:1.4rem; }
.article-body h2:first-of-type { border-top:none; padding-top:0; margin-top:0; }
.article-body h3 { margin:1.5rem 0 .65rem; font-size:1.1rem; }
.article-body ul, .article-body ol { margin-bottom:1rem; }

/* ===================== TOC ===================== */
.toc { background:var(--gray-50); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.4rem; margin:1.5rem 0; }
.toc h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); margin-bottom:.6rem; }
.toc ol  { padding-left:1.25rem; margin:0; }
.toc li  { font-size:.88rem; margin-bottom:.28rem; }
.toc a   { color:var(--navy); }

/* ===================== SECTION LABELS ===================== */
.section-hd { text-align:center; margin-bottom:2.5rem; }
.section-hd h2 { margin-bottom:.5rem; }
.section-hd p  { color:var(--text-muted); max-width:600px; margin:0 auto; }
.eyebrow { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:.4rem; }

/* ===================== FOOTER ===================== */
.site-footer { background:var(--navy-dark); color:rgba(255,255,255,.7); padding:3.5rem 0 2rem; margin-top:5rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.5rem; }
.footer-brand .logo { margin-bottom:.75rem; display:inline-flex; }
.footer-brand p { font-size:.85rem; line-height:1.65; }
.footer-col h5 { color:white; font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.9rem; }
.footer-col ul { list-style:none; padding:0; }
.footer-col li { margin-bottom:.45rem; }
.footer-col a  { color:rgba(255,255,255,.6); font-size:.86rem; }
.footer-col a:hover { color:white; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.25rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; font-size:.8rem; }
.disclaimer { font-size:.76rem; color:rgba(255,255,255,.38); margin-top:1.5rem; line-height:1.55; }

/* ===================== UTILS ===================== */
.text-center { text-align:center; }
.text-muted  { color:var(--text-muted); }
.mb-0 { margin-bottom:0; }
.mb-1 { margin-bottom:.5rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.d-flex { display:flex; }
.gap-1  { gap:.5rem; }
.gap-2  { gap:1rem; }
.flex-wrap { flex-wrap:wrap; }
.align-center { align-items:center; }
.divider { border:none; border-top:1px solid var(--border); margin:2rem 0; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .review-layout { grid-template-columns:1fr; }
  .review-sidebar { position:static; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-links { display:none; flex-direction:column; position:absolute; top:64px; left:0; right:0; background:var(--navy); padding:1rem; gap:0; z-index:300; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:block; }
  .nav-drop { width:100%; }
  .nav-drop-btn { width:100%; justify-content:space-between; padding:.55rem .75rem; border-radius:var(--radius); }
  .nav-drop-menu { position:static; border:none; box-shadow:none; background:rgba(255,255,255,.08); border-radius:var(--radius); margin:.2rem 0 .2rem .5rem; padding:.2rem 0; min-width:0; display:none; }
  .nav-drop.open .nav-drop-menu { display:block; }
  .nav-drop:hover .nav-drop-menu { display:none; }
  .nav-drop.open .nav-drop-btn { background:rgba(255,255,255,.12); }
  .nav-drop-menu a { color:rgba(255,255,255,.8) !important; padding:.4rem 1rem; }
  .nav-drop-menu a:hover { background:rgba(255,255,255,.1) !important; color:white !important; }
  .lang-switcher { justify-content:center; padding:.4rem 0; }
  .nav-cta { margin:.5rem 0 0; padding:.65rem 1rem !important; text-align:center; }
  .hero { padding:2.5rem 0; }
  .pros-cons { grid-template-columns:1fr; }
  .rank-card { grid-template-columns:52px 1fr auto; }
  .rank-num { display:none; }
  .footer-grid { grid-template-columns:1fr; }
  .page-hero-inner { flex-direction:column; }
  .cta-inline { flex-direction:column; text-align:center; }
  .footer-bottom { flex-direction:column; text-align:center; }
}