/* =========================================================
   CERTIFICATION GURU — MAIN STYLESHEET
   Bootstrap 5 + Custom Design System
   Mobile-First | SEO-Optimized | Core Web Vitals Ready
   ========================================================= */

/* ── 1. CSS Custom Properties ── */
:root {
  --cg-navy:       #0F172A;
  --cg-blue:       #3B82F6;
  --cg-orange:     #F97316;
  --cg-green:      #10B981;
  --cg-purple:     #8B5CF6;
  --cg-red:        #EF4444;
  --cg-amber:      #F59E0B;
  --cg-surface:    #F8FAFC;
  --cg-card:       #FFFFFF;
  --cg-text:       #0F172A;
  --cg-muted:      #64748B;
  --cg-border:     #E2E8F0;
  --cg-font:       "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --cg-mono:       "JetBrains Mono", "Fira Code", monospace;
  --cg-radius:     12px;
  --cg-radius-sm:  8px;
  --cg-radius-lg:  16px;
  --cg-shadow:     0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --cg-shadow-md:  0 4px 12px rgba(0,0,0,.1), 0 8px 32px rgba(0,0,0,.08);
  --cg-shadow-lg:  0 8px 24px rgba(0,0,0,.12), 0 16px 48px rgba(0,0,0,.1);
  --cg-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. Base Reset & Typography ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--cg-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--cg-text);
  background-color: var(--cg-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a { color: var(--cg-blue); transition: color var(--cg-transition); }
a:hover { color: #2563EB; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cg-font);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

code, kbd, pre, samp { font-family: var(--cg-mono); }

.fw-800 { font-weight: 800 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-500 { font-weight: 500 !important; }
.ls-wide { letter-spacing: 0.08em; }
.lh-relaxed { line-height: 1.8; }
.text-orange { color: var(--cg-orange) !important; }
.text-blue   { color: var(--cg-blue)   !important; }
.text-green  { color: var(--cg-green)  !important; }
.text-muted  { color: var(--cg-muted)  !important; }
.text-white-70  { color: rgba(255,255,255,.7); }
.text-white-50  { color: rgba(255,255,255,.5); }
.bg-surface     { background-color: var(--cg-surface) !important; }
.bg-dark-navy   { background-color: var(--cg-navy) !important; }
.bg-blue-tint   { background-color: #EFF6FF !important; }
.bg-blue        { background-color: var(--cg-blue) !important; }
.bg-red         { background-color: var(--cg-red) !important; }
.bg-sap         { background-color: #0070F3 !important; }
.text-sap       { color: #0070F3 !important; }

/* Skip link */
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  background: var(--cg-navy);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}

/* ── 3. Navigation ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--cg-border);
  transition: box-shadow var(--cg-transition);
}
.site-header.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.1); }

.logo-text { font-weight: 800; font-size: 1.2rem; line-height: 1; }
.dot, .dot-blue { color: var(--cg-blue); }
.guru, .guru-orange { color: var(--cg-orange); }
.logo-text-lg { font-size: 1.5rem; }

.navbar-nav .nav-link {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--cg-text);
  padding: 0.5rem 0.75rem;
  border-radius: var(--cg-radius-sm);
  transition: background var(--cg-transition), color var(--cg-transition);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background: var(--cg-surface);
  color: var(--cg-blue);
}
.navbar-nav .nav-link.active { color: var(--cg-blue); }

/* Mega Menu */
.mega-menu {
  width: 560px;
  border-radius: var(--cg-radius);
  margin-top: 8px;
  box-shadow: var(--cg-shadow-lg);
}
.mega-menu-item {
  border-radius: var(--cg-radius-sm);
  transition: background var(--cg-transition);
}
.mega-menu-item:hover { background: var(--cg-surface); }
.mega-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--domain-color) 12%, transparent);
  font-size: 18px;
  flex-shrink: 0;
}

/* Nav Search */
.nav-search-wrapper { position: relative; max-width: 400px; }
.nav-search-wrapper .input-group-text,
.nav-search-wrapper .form-control {
  border-color: var(--cg-border);
  border-radius: 50px !important;
  height: 40px;
  font-size: 0.875rem;
}
.nav-search-wrapper .form-control:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
  border-color: var(--cg-blue);
  outline: none;
}
.nav-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow-lg);
  border: 1px solid var(--cg-border);
  z-index: 1050;
  max-height: 400px;
  overflow-y: auto;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--cg-text);
  border-bottom: 1px solid var(--cg-border);
  transition: background var(--cg-transition);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--cg-surface); }
.search-result-code {
  font-family: var(--cg-mono);
  font-size: 0.75rem;
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--cg-muted);
  white-space: nowrap;
}

/* Breadcrumbs */
.breadcrumb-wrapper { padding: 6px 0; background: #fff; }
.certguru-breadcrumb .breadcrumb { font-size: 0.8rem; }
.certguru-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--cg-border); }
.certguru-breadcrumb .breadcrumb-item a { color: var(--cg-muted); text-decoration: none; }
.certguru-breadcrumb .breadcrumb-item a:hover { color: var(--cg-blue); }
.certguru-breadcrumb .breadcrumb-item.active { color: var(--cg-text); font-weight: 600; }

/* ── 4. Buttons ── */
.btn-cta {
  background: var(--cg-orange);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 12px 28px;
  transition: background var(--cg-transition), transform var(--cg-transition), box-shadow var(--cg-transition);
}
.btn-cta:hover {
  background: #EA6B10;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(249,115,22,.35);
}
.btn-cta:active { transform: translateY(0); }
.btn-cta:focus-visible { outline: 3px solid var(--cg-orange); outline-offset: 3px; }

.btn-outline-blue {
  background: transparent;
  color: var(--cg-blue);
  border: 2px solid var(--cg-blue);
  border-radius: 50px;
  font-weight: 600;
  padding: 10px 24px;
  transition: all var(--cg-transition);
}
.btn-outline-blue:hover { background: var(--cg-blue); color: #fff; }

.btn-outline-hero {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 50px;
  font-weight: 600;
  padding: 12px 28px;
  transition: all var(--cg-transition);
}
.btn-outline-hero:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.7); }

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50px;
  font-weight: 600;
  padding: 12px 28px;
  transition: all var(--cg-transition);
  text-decoration: none;
  display: inline-block;
}
.btn-outline-white:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.6); }

/* ── 5. Hero Section ── */
.hero-section {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 55%, #0F172A 100%);
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Hero Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(249,115,22,.15);
  border: 1px solid rgba(249,115,22,.3);
  color: #FDBA74;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 50px;
  transition: background var(--cg-transition);
}
.hero-badge:hover { background: rgba(249,115,22,.22); color: #FED7AA; }

.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cg-orange);
  flex-shrink: 0;
  animation: pulse-anim 2s infinite;
}
@keyframes pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.3); }
}

/* Hero H1 */
.hero-h1 {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
}

.hero-subtitle { font-size: clamp(1rem, 2vw, 1.2rem); max-width: 560px; }

/* Hero Search */
.hero-search-form { position: relative; max-width: 640px; }
.hero-search {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 50px;
  padding: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.hero-search-icon { padding: 0 12px 0 16px; display: flex; align-items: center; flex-shrink: 0; }
.hero-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--cg-font);
  font-size: 1rem;
  color: var(--cg-text);
  background: transparent;
  padding: 14px 8px;
  min-width: 0;
}
.hero-search-input::placeholder { color: var(--cg-muted); }
.hero-search-btn {
  background: var(--cg-orange);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 24px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--cg-transition);
}
.hero-search-btn:hover { background: #EA6B10; }

/* Hero search results dropdown */
.hero-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow-lg);
  border: 1px solid var(--cg-border);
  z-index: 1040;
  overflow: hidden;
  max-height: 360px;
  overflow-y: auto;
}

/* Popular tags */
.popular-tag {
  display: inline-block;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.75);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 50px;
  text-decoration: none;
  transition: all var(--cg-transition);
  margin-right: 6px;
  margin-bottom: 6px;
}
.popular-tag:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4); }

/* Hero trust stats */
.hero-trust-stats { margin-top: 1.5rem; }

/* Floating cert cards */
.hero-floating-cards {
  position: relative;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.floating-card {
  position: absolute;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--cg-radius);
  padding: 16px 20px;
  min-width: 200px;
  box-shadow: var(--cg-shadow);
}
.fc-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.fc-name { color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.fc-salary { font-size: 0.875rem; font-weight: 700; }
.fc-1 { top: 20px; left: 10%; animation: float1 4s ease-in-out infinite; }
.fc-2 { top: 50%; right: 5%; transform: translateY(-50%); animation: float2 5s ease-in-out infinite 0.5s; }
.fc-3 { bottom: 20px; left: 15%; animation: float3 4.5s ease-in-out infinite 1s; }
@keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes float2 { 0%,100%{transform:translateY(-50%)} 50%{transform:translateY(calc(-50% - 10px))} }
@keyframes float3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@media (prefers-reduced-motion: reduce) {
  .floating-card { animation: none !important; }
  .pulse-dot { animation: none !important; }
}

/* ── 6. Section Common ── */
.section-title { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.02em; }
.section-sub { font-size: 1.05rem; }

/* ── 7. Domain Cards ── */
.domains-section { background: var(--cg-surface); }

.domains-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
}
@media (min-width: 576px) { .domains-grid { gap: 20px; grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .domains-grid { grid-template-columns: repeat(4, 1fr); } }

.domain-card {
  display: block;
  position: relative;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  overflow: hidden;
  transition: transform var(--cg-transition), box-shadow var(--cg-transition), border-color var(--cg-transition);
}
/* Top gradient accent bar */
.domain-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--domain-color, var(--cg-blue)), color-mix(in srgb, var(--domain-color, var(--cg-blue)) 50%, #fff));
  opacity: 0.85;
  transition: opacity var(--cg-transition), height var(--cg-transition);
}
.domain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--domain-color) 12%, transparent), 0 4px 12px rgba(0,0,0,.06);
  border-color: color-mix(in srgb, var(--domain-color) 30%, var(--cg-border));
  text-decoration: none;
}
.domain-card:hover::before { opacity: 1; height: 4px; }
.domain-card:focus-visible {
  outline: 3px solid var(--domain-color, var(--cg-blue));
  outline-offset: 3px;
  text-decoration: none;
}

.domain-card-inner { padding: 20px; position: relative; }

/* Head row: icon left, arrow right */
.domain-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.domain-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--domain-color) 15%, transparent), color-mix(in srgb, var(--domain-color) 8%, transparent));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--domain-color) 8%, transparent);
  transition: background var(--cg-transition), transform var(--cg-transition);
  flex-shrink: 0;
}
.domain-card:hover .domain-icon-wrap {
  background: linear-gradient(135deg, color-mix(in srgb, var(--domain-color) 22%, transparent), color-mix(in srgb, var(--domain-color) 12%, transparent));
  transform: scale(1.05);
}
.domain-icon { font-size: 24px; line-height: 1; }

/* Arrow indicator — slides in on hover */
.domain-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--cg-surface);
  color: var(--cg-muted);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--cg-transition), transform var(--cg-transition), background var(--cg-transition), color var(--cg-transition);
  flex-shrink: 0;
}
.domain-card:hover .domain-arrow {
  opacity: 1;
  transform: translate(0, 0);
  background: color-mix(in srgb, var(--domain-color) 12%, transparent);
  color: var(--domain-color);
}

.domain-name {
  font-size: 0.95rem;
  color: var(--cg-text);
  line-height: 1.3;
  margin-bottom: 4px;
  transition: color var(--cg-transition);
}
.domain-card:hover .domain-name { color: var(--domain-color); }

.domain-count {
  font-size: 0.78rem;
  color: var(--cg-muted);
  font-weight: 500;
  display: block;
  margin-bottom: 12px;
}

.domain-certs { display: flex; flex-wrap: wrap; gap: 4px; }

.cert-pill {
  display: inline-block;
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  color: var(--cg-muted);
  transition: border-color var(--cg-transition), color var(--cg-transition), background var(--cg-transition);
}
.domain-card:hover .cert-pill {
  border-color: color-mix(in srgb, var(--domain-color) 25%, var(--cg-border));
  color: color-mix(in srgb, var(--domain-color) 70%, var(--cg-text));
  background: color-mix(in srgb, var(--domain-color) 5%, var(--cg-surface));
}

/* Domain cards — mobile */
@media (max-width: 575.98px) {
  .domain-card-inner { padding: 16px; }
  .domain-icon-wrap { width: 44px; height: 44px; border-radius: 12px; }
  .domain-icon { font-size: 20px; }
  .domain-name { font-size: 0.85rem; }
  .domain-arrow { width: 28px; height: 28px; }
}

/* ── 8. Trending Cards ── */
.trending-section { position: relative; }

.trending-scroll-wrapper {
  overflow: hidden;
  position: relative;
}
/* Right-side fade gradient — hints at scrollability */
.trending-scroll-wrapper::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95));
  pointer-events: none;
  z-index: 2;
}

.trending-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 60px 16px 4px;
}
.trending-scroll::-webkit-scrollbar { display: none; }

.trending-card {
  flex: 0 0 290px;
  min-width: 290px;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-left: 3px solid var(--tc-color, var(--cg-blue));
  border-radius: var(--cg-radius);
  padding: 24px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--cg-transition), box-shadow var(--cg-transition), border-color var(--cg-transition);
}
.trending-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--tc-color) 10%, transparent), 0 4px 12px rgba(0,0,0,.06);
}

/* Rank badge — navy square, top-right */
.tc-rank {
  position: absolute;
  top: 16px; right: 16px;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--cg-navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
}

/* Domain tag pill */
.tc-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--tc-color) 10%, transparent);
  color: var(--tc-color);
  margin-bottom: 12px;
  align-self: flex-start;
}

/* Cert name */
.tc-name {
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 10px;
  padding-right: 36px;
}
.tc-name a { color: var(--cg-text); transition: color var(--cg-transition); }
.tc-name a:hover { color: var(--tc-color); }

/* Difficulty with visual dot bar */
.tc-difficulty-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.tc-diff-bar {
  display: flex;
  gap: 4px;
  align-items: center;
}
.tc-diff-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cg-border);
  transition: background var(--cg-transition);
}
.tc-diff-dot.active {
  background: var(--tc-color, var(--cg-blue));
}

/* Difficulty badges */
.difficulty-new    { background: #FFF7ED; color: #C2410C; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; display: inline-block; }
.difficulty-easy   { background: #F0FDF4; color: #166534; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; display: inline-block; }
.difficulty-medium { background: #FFFBEB; color: #92400E; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; display: inline-block; }
.difficulty-hard   { background: #FEF2F2; color: #991B1B; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; display: inline-block; }

/* Salary hero block — the conversion driver */
.tc-salary-hero {
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
  border: 1px solid #D1FAE5;
  border-radius: var(--cg-radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tc-salary-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #065F46;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  display: block;
  margin-bottom: -2px;
}
.tc-salary-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #065F46;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tc-salary-trend { color: #10B981; flex-shrink: 0; }

/* Exam cost meta */
.tc-meta {
  padding: 10px 0;
  border-top: 1px solid var(--cg-border);
  margin-bottom: 14px;
}
.tc-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tc-meta-label {
  font-size: 0.78rem;
  color: var(--cg-muted);
  font-weight: 500;
}
.tc-meta-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cg-text);
}

/* Full-width CTA button */
.tc-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: var(--cg-navy);
  color: #fff;
  border-radius: var(--cg-radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  margin-top: auto;
  transition: background var(--cg-transition), transform var(--cg-transition), box-shadow var(--cg-transition);
}
.tc-cta-btn:hover {
  background: color-mix(in srgb, var(--tc-color) 85%, var(--cg-navy));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tc-color) 25%, transparent);
}
.tc-cta-btn:focus-visible {
  outline: 3px solid var(--tc-color, var(--cg-blue));
  outline-offset: 3px;
}
.tc-cta-btn svg { transition: transform var(--cg-transition); }
.tc-cta-btn:hover svg { transform: translateX(3px); }

/* Trending cards — mobile */
@media (max-width: 575.98px) {
  .trending-card { flex: 0 0 270px; min-width: 270px; padding: 20px; }
  .tc-salary-value { font-size: 1.2rem; }
  .trending-scroll-wrapper::after { width: 40px; }
  .trending-scroll { padding-right: 40px; gap: 14px; }
}

/* Reduced motion — all animated components */
@media (prefers-reduced-motion: reduce) {
  .domain-card, .trending-card, .domain-arrow, .domain-icon-wrap,
  .tc-cta-btn, .tc-cta-btn svg, .cert-pill, .domain-name {
    transition: none !important;
  }
  .domain-card:hover, .trending-card:hover { transform: none; }
}

/* ── 9. Definition Box (Featured Snippet) ── */
.definition-box {
  background: #EFF6FF;
  border-left: 4px solid var(--cg-blue);
  border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0;
  padding: 20px 24px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #1E3A5F;
}

/* ── Info Box (green left-border — Pro Tips) ── */
.info-box {
  background: #F0FDF4;
  border-left: 4px solid var(--cg-green);
  border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #065F46;
}
.info-box strong { color: #047857; }

/* ── Warning Box (amber left-border — Important notices) ── */
.warning-box {
  background: #FFFBEB;
  border-left: 4px solid var(--cg-amber);
  border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #78350F;
}
.warning-box strong { color: #92400E; }

/* ── Salary Highlight (green card — salary callout in body copy) ── */
.salary-highlight {
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  border: 1px solid var(--cg-green);
  border-radius: var(--cg-radius);
  padding: 16px 20px;
  margin: 20px 0;
  font-weight: 600;
  color: #065F46;
}

/* ── 10. Salary Section ── */
.salary-section { background: var(--cg-navy); }
.salary-stat-card {
  background: #1E293B;
  border: 1px solid #334155;
  border-radius: var(--cg-radius);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.salary-stat-number { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1; }
.salary-stat-cert { font-size: 0.9rem; }
.salary-geo-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.salary-table { display: flex; flex-direction: column; gap: 2px; }
.salary-row {
  background: #1E293B;
  border-radius: var(--cg-radius-sm);
  padding: 12px 16px;
}
.salary-rank {
  width: 24px; height: 24px;
  background: rgba(249,115,22,.2);
  color: var(--cg-orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.salary-cert-name { font-size: 0.875rem; }
.salary-amount, .salary-uplift { font-size: 0.8rem; white-space: nowrap; }

/* ── 11. Compare Section ── */
.compare-slot {
  background: var(--cg-card);
  border: 2px dashed var(--cg-border);
  border-radius: var(--cg-radius);
  padding: 32px 24px;
  text-align: center;
  transition: border-color var(--cg-transition);
}
.compare-slot:hover { border-color: var(--cg-blue); }
.compare-add-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cg-surface);
  border: 2px dashed var(--cg-border);
  font-size: 1.5rem;
  color: var(--cg-muted);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-weight: 300;
}
.compare-slot-label { color: var(--cg-muted); font-weight: 500; }
.vs-badge {
  width: 52px; height: 52px;
  background: var(--cg-navy);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  box-shadow: var(--cg-shadow);
}

/* Compare Table */
.compare-table { font-size: 0.875rem; border-radius: var(--cg-radius); overflow: hidden; box-shadow: var(--cg-shadow); }
.compare-table thead { background: var(--cg-navy); color: #fff; }
.compare-table thead th { padding: 14px 20px; font-weight: 700; border: none; }
.compare-table tbody tr:nth-child(even) { background: var(--cg-surface); }
.compare-table tbody td { padding: 12px 20px; border-color: var(--cg-border); }
.compare-table tbody td:first-child { font-weight: 600; color: var(--cg-muted); }

/* ── 12. Country Grid ── */
.country-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0; padding: 0;
}
@media (min-width: 576px) { .country-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .country-grid { grid-template-columns: repeat(9, 1fr); } }

.country-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  text-align: center;
  transition: transform var(--cg-transition), box-shadow var(--cg-transition), border-color var(--cg-transition);
}
.country-card:hover { transform: translateY(-3px); box-shadow: var(--cg-shadow-md); border-color: var(--cg-blue); text-decoration: none; }
.country-flag { font-size: 2rem; display: block; }
.country-name { font-size: 0.8rem; font-weight: 700; color: var(--cg-text); }
.country-sub { font-size: 0.68rem; line-height: 1.3; }

/* ── 13. Editorial Spotlight ── */
.editorial-card { position: relative; }
.editorial-badge {
  display: inline-block;
  background: rgba(249,115,22,.2);
  border: 1px solid rgba(249,115,22,.4);
  color: #FDBA74;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  letter-spacing: 0.06em;
}
.editorial-title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
.editorial-graphic {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--cg-radius-lg);
  padding: 32px;
  text-align: center;
}
.eg-badge {
  background: #0070F3;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  padding: 12px 28px;
  border-radius: var(--cg-radius);
  display: inline-block;
  margin-bottom: 20px;
}
.eg-old { color: #EF4444; font-weight: 700; font-size: 1rem; }
.eg-arrow { color: rgba(255,255,255,.4); font-size: 1.5rem; margin: 8px 0; }
.eg-new { color: var(--cg-green); font-weight: 700; font-size: 1.1rem; }
.eg-year { color: var(--cg-orange); font-size: 2rem; font-weight: 800; margin-top: 16px; }

/* ── 14. Blog Grid ── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  overflow: hidden;
  transition: transform var(--cg-transition), box-shadow var(--cg-transition), border-left-color var(--cg-transition);
  border-left: 4px solid transparent;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cg-shadow-md);
  border-left-color: var(--cg-orange);
}
.blog-card-img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; }
.blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.blog-card:hover .blog-card-img { transform: scale(1.03); }
.blog-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-domain-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--cg-surface);
  color: var(--cg-muted);
  border: 1px solid var(--cg-border);
  padding: 3px 10px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blog-card-title { font-size: 1rem; line-height: 1.4; flex: 1; }
.blog-card-title a:hover { color: var(--cg-blue) !important; }
.blog-card-excerpt { font-size: 0.875rem; flex: 1; }
.blog-card-meta { padding-top: 12px; border-top: 1px solid var(--cg-border); margin-top: auto; }

/* ── 15. Roadmap Cards ── */
.roadmap-card {
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  border-top: 4px solid var(--rm-color, var(--cg-blue));
  transition: transform var(--cg-transition), box-shadow var(--cg-transition);
}
.roadmap-card:hover { transform: translateY(-3px); box-shadow: var(--cg-shadow-md); }
.rm-icon { font-size: 2rem; }
.rm-path { display: flex; flex-direction: column; gap: 0; }
.rm-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--cg-surface);
  border-radius: var(--cg-radius-sm);
}
.rm-step-num {
  width: 26px; height: 26px;
  background: var(--rm-color, var(--cg-blue));
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rm-step-name { font-size: 0.875rem; font-weight: 600; }
.rm-arrow { text-align: center; color: var(--cg-border); font-size: 0.875rem; padding: 2px 0; }
.btn-outline-domain {
  border: 2px solid var(--rm-color, var(--cg-blue));
  color: var(--rm-color, var(--cg-blue));
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 10px 20px;
  transition: all var(--cg-transition);
  text-decoration: none;
  display: block;
  text-align: center;
}
.btn-outline-domain:hover {
  background: var(--rm-color, var(--cg-blue));
  color: #fff;
}

/* ── 16. FAQ Section ── */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--cg-card); border: 1px solid var(--cg-border); border-radius: var(--cg-radius); overflow: hidden; }
.faq-details summary { list-style: none; }
.faq-details summary::-webkit-details-marker { display: none; }
.faq-question {
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
  font-size: 0.975rem;
  transition: background var(--cg-transition);
}
.faq-question:hover { background: var(--cg-surface); }
.faq-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--cg-muted);
  transition: transform var(--cg-transition), background var(--cg-transition);
  font-style: normal;
}
.faq-details[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--cg-blue);
  border-color: var(--cg-blue);
  color: #fff;
}
.faq-answer {
  padding: 0 20px 18px;
  border-top: 1px solid var(--cg-border);
  margin-top: 0;
}
.faq-answer p {
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--cg-muted);
}

/* ── 17. Newsletter ── */
.newsletter-bell { font-size: 2.5rem; }
.newsletter-input-group {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  padding: 4px;
  overflow: hidden;
}
.newsletter-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--cg-font);
  font-size: 0.95rem;
  padding: 12px 16px;
  min-width: 0;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.4); }
.newsletter-btn {
  background: var(--cg-orange);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 24px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--cg-transition);
}
.newsletter-btn:hover { background: #EA6B10; }
.newsletter-response .alert { border-radius: 50px; font-size: 0.875rem; }

/* ── 18. Footer ── */
.site-footer { background: var(--cg-navy); }
.footer-heading { letter-spacing: 0.08em; font-size: 0.72rem !important; opacity: 0.6; }
.footer-link {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--cg-transition);
  display: block;
}
.footer-link:hover { color: rgba(255,255,255,.9); }
.footer-link-sm {
  color: rgba(255,255,255,.4);
  text-decoration: none;
  font-size: 0.75rem;
  transition: color var(--cg-transition);
}
.footer-link-sm:hover { color: rgba(255,255,255,.7); }
.footer-social-link {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all var(--cg-transition);
}
.footer-social-link:hover { background: rgba(255,255,255,.15); color: #fff; transform: translateY(-2px); }

/* Mobile domain link */
.mobile-domain-link { transition: background var(--cg-transition); }
.mobile-domain-link:hover { background: var(--cg-surface); }

/* ── 19. Mobile Bottom Nav ── */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--cg-border);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  z-index: 1020;
  justify-content: space-around;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.mobile-nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  background: none;
  border: none;
  padding: 4px 8px;
  text-decoration: none;
  color: var(--cg-muted);
  font-family: var(--cg-font);
  font-size: 0.65rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--cg-transition);
  min-height: 48px;
  justify-content: center;
}
.mobile-nav-tab.active,
.mobile-nav-tab:hover { color: var(--cg-orange); }
.mobile-nav-tab.active svg,
.mobile-nav-tab:hover svg { stroke: var(--cg-orange); }

/* ── 20. Back to Top ── */
.back-to-top {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 44px; height: 44px;
  background: var(--cg-navy);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--cg-transition), transform var(--cg-transition);
  z-index: 1010;
  box-shadow: var(--cg-shadow-md);
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--cg-blue); transform: translateY(-2px); }

/* ══════════════════════════════════════════════════════════════
   CERTIFICATION PAGE — Salesforcetutorial.com look & feel
   Tokens are re-scoped to the cert page wrappers only, so every
   cert component (which consumes --cg-* tokens) adopts the Inter +
   navy/blue palette without disturbing the shared header/footer.
   ══════════════════════════════════════════════════════════════ */
.cert-breadcrumb-bar,
.cert-pagehead,
.cert-body {
  --cg-font:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cg-navy:       #032D60;   /* sft navy   */
  --cg-blue:       #0176D3;   /* sft blue   */
  --cg-green:      #2E844A;   /* sft success */
  --cg-muted:      #5C5C5C;   /* sft muted  */
  --cg-border:     #E5E5E5;   /* sft border */
  --cg-card:       #FFFFFF;
  --cg-radius:     12px;
  --cg-radius-sm:  6px;
  --cg-radius-lg:  20px;
  --cg-shadow:     0 1px 2px rgba(16,24,40,.06);
  --cg-shadow-md:  0 4px 12px rgba(16,24,40,.08);
  --cg-shadow-lg:  0 12px 32px rgba(16,24,40,.12);
  font-family: var(--cg-font);
}
/* Body typography — Salesforce reading rhythm */
.cert-body { color: #2E2E2E; }
.cert-body .entry-content p,
.cert-body .entry-content li,
.cert-pagehead-sub { line-height: 1.65; }
.cert-pagehead-title,
.cert-body h2,
.cert-body h3,
.cert-body h4 { letter-spacing: -0.015em; color: var(--cg-navy); }
.cert-body .entry-content { font-size: 1.0625rem; color: #2E2E2E; }

/* ─── Content readability: paragraph & list rhythm ─── */
.cert-body .entry-content p { margin: 0 0 1.25rem; }
.cert-body .entry-content ul,
.cert-body .entry-content ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.cert-body .entry-content li { margin-bottom: 0.7rem; line-height: 1.75; }
.cert-body .entry-content li:last-child { margin-bottom: 0; }
.cert-body .entry-content li > ul,
.cert-body .entry-content li > ol { margin: 0.7rem 0 0; }

/* Heading rhythm — clearer separation between sections */
.cert-body .entry-content h2 { margin: 2.75rem 0 1rem; }
.cert-body .entry-content h3 { margin: 2.25rem 0 0.75rem; }
.cert-body .entry-content h4 { margin: 1.75rem 0 0.5rem; }
.cert-body .entry-content > *:first-child { margin-top: 0; }

/* First paragraph after a heading begins with a tab indent */
.cert-body .entry-content h2 + p,
.cert-body .entry-content h3 + p,
.cert-body .entry-content h4 + p { text-indent: 2em; }

/* Numbered step list — formatter outputs <ol class="steps-list"><li> */
.cert-body .entry-content .steps-list {
  counter-reset: steps;
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.5rem;
}
.cert-body .entry-content .steps-list > li {
  counter-increment: steps;
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 1.5rem;
  line-height: 1.75;
}
.cert-body .entry-content .steps-list > li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 2rem;
  height: 2rem;
  background: var(--cg-blue);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-body .entry-content .steps-list > li:last-child { margin-bottom: 0; }
.cert-body .entry-content .steps-list > li > strong:first-child {
  color: var(--cg-navy);
  font-size: 1.0625rem;
}

/* ── 21. Inner Page: Certification Guide — LIGHT PAGE HEADER ── */
.cert-pagehead {
  padding: 0 0 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--cg-border);
}
/* Full-width breadcrumb bar (under the site nav, above content) */
.cert-breadcrumb-bar {
  background: #F8FAFC;
  border-bottom: 1px solid var(--cg-border);
}
.cert-breadcrumb-bar .breadcrumb {
  margin: 0;
  padding: 0.65rem 0;
  flex-wrap: nowrap;            /* keep it on one clean line */
  white-space: nowrap;
  overflow-x: auto;            /* long titles scroll instead of wrapping */
  scrollbar-width: none;
}
.cert-breadcrumb-bar .breadcrumb::-webkit-scrollbar { display: none; }
.cert-breadcrumb .breadcrumb-item,
.cert-breadcrumb .breadcrumb-item a { color: var(--cg-muted); }
.cert-breadcrumb .breadcrumb-item a:hover { color: var(--cg-blue); }
.cert-breadcrumb .breadcrumb-item.active { color: var(--cg-navy); font-weight: 600; }
.cert-pagehead-title {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.18;
  color: var(--cg-navy);
  max-width: 24ch;
}
.cert-pagehead-sub {
  max-width: 65ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--cg-muted);
}

/* Key stats strip in the page header */
.cert-head-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.cert-head-stat {
  min-width: 104px;
  padding: 0.7rem 1.1rem;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-sm);
  box-shadow: var(--cg-shadow);
  text-align: center;
}
.cert-head-stat-value { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.cert-head-stat-label {
  font-size: 0.7rem;
  color: var(--cg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

/* Page-header CTAs */
.cert-head-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cert-head-cta .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
  .cert-pagehead { padding: 0 0 1.25rem; margin-bottom: 1.25rem; }
  .cert-head-stat { flex: 1 1 calc(50% - 0.75rem); min-width: 0; }
  .cert-head-cta .btn { flex: 1 1 100%; text-align: center; }
}

/* Salary section: avg + range on one line under #salary-cert-heading */
.salary-summary-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-sm);
  font-size: 0.95rem;
  line-height: 1.5;
}
.salary-summary-item { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
.salary-summary-k { color: var(--cg-muted); font-weight: 600; }
.salary-summary-v { font-weight: 800; color: var(--cg-navy); }
.salary-summary-sep { color: var(--cg-muted); font-weight: 700; user-select: none; }
@media (max-width: 575.98px) {
  .salary-summary-line { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .salary-summary-sep { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   IN-PAGE TABLE OF CONTENTS (moved out of the sidebar)
   ═══════════════════════════════════════════════════════════ */
.cert-toc {
  margin: 0 0 2rem;
  padding: 1.1rem 1.35rem;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-left: 4px solid var(--domain-color, var(--cg-blue));
  border-radius: var(--cg-radius-sm);
  box-shadow: var(--cg-shadow);
}
.cert-toc-title {
  margin: 0 0 0.65rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cg-muted);
}
.cert-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1.5rem;
}
.cert-toc-list li { counter-increment: toc; }
.cert-toc-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cg-navy);
  text-decoration: none;
  transition: color var(--cg-transition);
}
.cert-toc-link::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--domain-color, var(--cg-blue));
  font-variant-numeric: tabular-nums;
}
.cert-toc-link:hover { color: var(--domain-color, var(--cg-blue)); }
@media (max-width: 575.98px) {
  .cert-toc-list { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ═══════════════════════════════════════════════════════════
   QUICK FACTS (moved out of the sidebar)
   ═══════════════════════════════════════════════════════════ */
.cert-quick-facts {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow);
}
.cert-quick-facts-title {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cg-muted);
}
.cert-quick-facts-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
}
.cert-quick-fact {
  padding: 0.9rem 1rem;
  background: var(--cg-bg, #F8FAFC);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-sm);
}
.cert-quick-fact dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cg-muted);
  margin-bottom: 0.25rem;
}
.cert-quick-fact dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--cg-navy);
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════
   RELATED CERTIFICATIONS (moved out of the sidebar)
   ═══════════════════════════════════════════════════════════ */
.cert-related { margin-top: 3rem; }
.cert-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.cert-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.2rem;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow);
  text-decoration: none;
  transition: transform var(--cg-transition), box-shadow var(--cg-transition), border-color var(--cg-transition);
}
.cert-related-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cg-shadow-md);
  border-color: var(--domain-color, var(--cg-blue));
}
.cert-related-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--cg-navy);
  line-height: 1.35;
}
.cert-related-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}
.cert-related-issuer { font-size: 0.82rem; color: var(--cg-muted); }
.cert-related-salary { font-size: 0.85rem; font-weight: 800; color: var(--cg-green); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — LATEST CERTIFICATIONS WIDGET
   ═══════════════════════════════════════════════════════════ */
.cert-latest {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-lg);
  box-shadow: var(--cg-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--cg-border) transparent;
}
/* Thin, unobtrusive scrollbar for the sidebar panel */
.cert-latest::-webkit-scrollbar { width: 8px; }
.cert-latest::-webkit-scrollbar-track { background: transparent; }
.cert-latest::-webkit-scrollbar-thumb {
  background: var(--cg-border);
  border-radius: 999px;
  border: 2px solid var(--cg-card);
}
.cert-latest::-webkit-scrollbar-thumb:hover { background: var(--cg-muted); }
.cert-latest-title {
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--cg-navy);
  border-bottom: 1px solid var(--cg-border);
}
.cert-latest-list { list-style: none; margin: 0; padding: 0; }
.cert-latest-item + .cert-latest-item { border-top: 1px solid var(--cg-border); }
.cert-latest-link {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 0;
  text-decoration: none;
}
.cert-latest-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 54px;
  border-radius: var(--cg-radius-sm);
  overflow: hidden;
  display: flex;
}
.cert-latest-thumb img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--cg-radius-sm);
}
.cert-latest-thumb-fallback {
  width: 72px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  border-radius: var(--cg-radius-sm);
  background: linear-gradient(135deg, var(--lc-color, var(--cg-blue)), color-mix(in srgb, var(--lc-color, var(--cg-blue)) 60%, #000));
}
.cert-latest-body { min-width: 0; }
.cert-latest-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--cg-navy);
  transition: color var(--cg-transition);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cert-latest-link:hover .cert-latest-name { color: var(--domain-color, var(--cg-blue)); }
.cert-latest-meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--cg-muted);
}
@media (max-width: 991.98px) {
  .cert-latest { position: static; margin-top: 2rem; max-height: none; overflow: visible; }
}

/* Step-by-step guide */
.steps-list { counter-reset: steps; list-style: none; padding: 0; }
.step-item {
  counter-increment: steps;
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.step-item::before {
  content: counter(steps);
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--cg-blue);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}

/* Author bio */
.author-bio {
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 40px;
}
.author-bio img { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.last-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EFF6FF;
  color: #1D4ED8;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid #BFDBFE;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ECFDF5;
  color: #065F46;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid #A7F3D0;
}

/* Table of Contents */
.toc-box {
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-left: 4px solid var(--cg-blue);
  border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0;
  padding: 20px 24px;
  margin-bottom: 32px;
}
.toc-box ol { margin: 0; padding-left: 20px; }
.toc-box li { margin-bottom: 6px; }
.toc-box a { color: var(--cg-blue); font-size: 0.9rem; text-decoration: none; }
.toc-box a:hover { text-decoration: underline; }

/* Sources section */
.sources-section {
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-sm);
  padding: 16px 20px;
  margin-top: 32px;
}

/* ── 22. Utility ── */
.container-xl { max-width: 1280px; padding-left: 20px; padding-right: 20px; }

/* ── 23. Accessibility ── */
:focus-visible {
  outline: 3px solid var(--cg-blue);
  outline-offset: 3px;
  border-radius: 4px;
}
*:focus:not(:focus-visible) { outline: none; }

/* ── 24. Print ── */
@media print {
  .site-header, .mobile-bottom-nav, .back-to-top, .footer-stats { display: none !important; }
  body { font-size: 12pt; }
  a::after { content: " (" attr(href) ")"; }
}

/* ── 25. Mobile-only padding for bottom nav ── */
@media (max-width: 991.98px) {
  body { padding-bottom: 80px; }
  .hero-ctas .btn { width: 100%; text-align: center; }
  .newsletter-input-group { flex-direction: column; border-radius: var(--cg-radius); padding: 12px; gap: 8px; }
  .newsletter-btn { border-radius: 50px; padding: 14px; }
  .newsletter-input { padding: 8px 4px; }
}

/* ── 26. Wordpress Core Classes ── */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }
.wp-block-image img { border-radius: var(--cg-radius-sm); }
.screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute;
}

/* ═══════════════════════════════════════════════════════════
   27. SKILLS PILLS — "Skills You'll Gain" section
   ═══════════════════════════════════════════════════════════ */
.skills-section { margin: 2rem 0; }
.skills-section h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cg-muted); margin-bottom: 12px; }
.skills-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: 600;
  background: color-mix(in srgb, var(--domain-color, var(--cg-blue)) 10%, transparent);
  color: var(--domain-color, var(--cg-blue));
  border: 1px solid color-mix(in srgb, var(--domain-color, var(--cg-blue)) 20%, transparent);
  transition: all var(--cg-transition);
}
.skill-pill:hover {
  background: color-mix(in srgb, var(--domain-color, var(--cg-blue)) 18%, transparent);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   28. EXAM DETAIL VISUAL CARDS
   ═══════════════════════════════════════════════════════════ */
.exam-detail-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 1.5rem 0;
}
@media (min-width: 768px) { .exam-detail-grid { grid-template-columns: repeat(3, 1fr); } }
.exam-detail-card {
  background: var(--cg-card); border: 1px solid var(--cg-border); border-radius: var(--cg-radius);
  padding: 20px; text-align: center; transition: all var(--cg-transition); position: relative;
}
.exam-detail-card:hover { border-color: color-mix(in srgb, var(--domain-color, var(--cg-blue)) 40%, transparent); transform: translateY(-2px); box-shadow: var(--cg-shadow); }
.exam-detail-icon {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--domain-color, var(--cg-blue)) 10%, transparent);
  color: var(--domain-color, var(--cg-blue)); margin-bottom: 10px; font-size: 1.1rem;
}
.exam-detail-value { font-size: 1.35rem; font-weight: 800; color: var(--cg-text); line-height: 1.2; }
.exam-detail-label { font-size: 0.75rem; color: var(--cg-muted); margin-top: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

/* Cost breakdown special card */
.cost-breakdown-card {
  grid-column: span 2; background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
  border-color: color-mix(in srgb, var(--cg-orange) 25%, transparent);
}
@media (min-width: 768px) { .cost-breakdown-card { grid-column: span 3; } }
.cost-breakdown-inner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cost-breakdown-item { text-align: center; }
.cost-breakdown-plus, .cost-breakdown-equals { font-size: 1.25rem; font-weight: 700; color: var(--cg-muted); }
.cost-breakdown-total { color: var(--cg-orange); }

/* ═══════════════════════════════════════════════════════════
   29. PASS RATE RING (conic-gradient)
   ═══════════════════════════════════════════════════════════ */
.pass-rate-ring {
  width: 80px; height: 80px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--cg-green) calc(var(--rate, 0) * 1%), var(--cg-border) 0);
  position: relative; margin: 0 auto 8px;
}
.pass-rate-ring::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--cg-card);
}
.pass-rate-ring .rate-value {
  position: relative; z-index: 1; font-size: 1.1rem; font-weight: 800; color: var(--cg-green);
}

/* Study hours bar */
.study-hours-bar { width: 100%; height: 8px; border-radius: 4px; background: var(--cg-border); overflow: hidden; margin: 8px 0; }
.study-hours-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--domain-color, var(--cg-blue)), color-mix(in srgb, var(--domain-color, var(--cg-blue)) 60%, var(--cg-green)));
  transition: width 0.8s ease;
}

/* ═══════════════════════════════════════════════════════════
   30. WHO'S HIRING
   ═══════════════════════════════════════════════════════════ */
.hiring-section { margin: 2.5rem 0; }
.hiring-logos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hiring-logo {
  background: var(--cg-surface); border: 1px solid var(--cg-border); border-radius: var(--cg-radius-sm);
  padding: 8px 16px; font-weight: 700; font-size: 0.82rem; color: var(--cg-text);
  transition: all var(--cg-transition); white-space: nowrap;
}
.hiring-logo:hover { border-color: var(--cg-blue); background: color-mix(in srgb, var(--cg-blue) 5%, white); transform: translateY(-1px); }
.hiring-logo--india { border-left: 3px solid var(--cg-orange); }

/* ═══════════════════════════════════════════════════════════
   31. CAREER PROGRESSION TIMELINE
   ═══════════════════════════════════════════════════════════ */
.career-timeline { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 16px 0; position: relative; }
.career-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 140px; position: relative; flex-shrink: 0;
}
.career-step-dot {
  width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--cg-border);
  background: var(--cg-card); position: relative; z-index: 2; transition: all var(--cg-transition);
}
.career-step--current .career-step-dot {
  width: 22px; height: 22px; border-color: var(--domain-color, var(--cg-blue));
  background: var(--domain-color, var(--cg-blue)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--domain-color, var(--cg-blue)) 20%, transparent);
}
.career-step--past .career-step-dot { background: var(--cg-green); border-color: var(--cg-green); }
.career-step--future .career-step-dot { border-style: dashed; border-color: var(--cg-muted); }
.career-connector {
  position: absolute; top: 8px; left: calc(50% + 12px); right: calc(-50% + 12px);
  height: 2px; background: var(--cg-border); z-index: 1;
}
.career-step--current ~ .career-step .career-connector { border-top: 2px dashed var(--cg-border); background: none; }
.career-step-name {
  font-size: 0.8rem; font-weight: 700; margin-top: 10px; color: var(--cg-text);
  max-width: 120px; line-height: 1.3;
}
.career-step--current .career-step-name { color: var(--domain-color, var(--cg-blue)); font-size: 0.85rem; }
.career-step-salary { font-size: 0.7rem; color: var(--cg-green); font-weight: 600; margin-top: 2px; }
.career-step a { text-decoration: none; color: inherit; }
.career-step a:hover .career-step-name { text-decoration: underline; }
@media (max-width: 767.98px) {
  .career-timeline { flex-direction: column; align-items: flex-start; padding-left: 24px; }
  .career-step { flex-direction: row; min-width: auto; text-align: left; gap: 12px; padding: 8px 0; }
  .career-connector { top: auto; left: 7px; right: auto; width: 2px; height: calc(100% + 0px); }
  .career-step-name { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   32. SALARY RANGE BARS
   ═══════════════════════════════════════════════════════════ */
.salary-range-section { margin: 2rem 0; }
.salary-bar-row { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
@media (min-width: 768px) { .salary-bar-row { grid-template-columns: 1fr 1fr; } }
.salary-bar-wrapper { background: var(--cg-card); border: 1px solid var(--cg-border); border-radius: var(--cg-radius); padding: 20px; }
.salary-bar-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cg-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.salary-bar-label .geo-flag { font-size: 1rem; }
.salary-range-bar {
  height: 14px; border-radius: 7px; background: var(--cg-border); position: relative; overflow: visible; margin: 12px 0 8px;
}
.salary-range-fill {
  height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, var(--cg-amber), var(--cg-green));
  width: var(--fill, 50%); transition: width 1s ease; position: relative;
}
.salary-range-marker {
  position: absolute; top: -6px; width: 3px; height: 26px; background: var(--cg-navy);
  border-radius: 2px; left: var(--avg-pos, 50%); transform: translateX(-50%);
}
.salary-range-marker::after {
  content: attr(data-label); position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: 0.7rem; font-weight: 700; color: var(--cg-navy); white-space: nowrap;
}
.salary-bar-values { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--cg-muted); font-weight: 600; }
.salary-bar-avg { font-size: 1.5rem; font-weight: 800; color: var(--cg-green); line-height: 1; }

/* Experience tier bars */
.exp-tiers { margin-top: 16px; }
.exp-tier { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.exp-tier-label { font-size: 0.72rem; font-weight: 600; color: var(--cg-muted); width: 60px; flex-shrink: 0; }
.exp-tier-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--cg-border); overflow: hidden; }
.exp-tier-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease; }
.exp-tier-fill--entry { background: var(--cg-amber); }
.exp-tier-fill--mid { background: color-mix(in srgb, var(--cg-amber) 50%, var(--cg-green)); }
.exp-tier-fill--senior { background: var(--cg-green); }
.exp-tier-value { font-size: 0.72rem; font-weight: 700; color: var(--cg-text); width: 50px; flex-shrink: 0; text-align: right; }

/* ═══════════════════════════════════════════════════════════
   33. STUDY TIMELINE
   ═══════════════════════════════════════════════════════════ */
.study-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 1.5rem 0; }
@media (max-width: 575.98px) { .study-timeline { grid-template-columns: 1fr; } }
.study-phase {
  background: var(--cg-card); border: 1px solid var(--cg-border); border-radius: var(--cg-radius);
  padding: 20px; text-align: center; position: relative; border-top: 3px solid var(--phase-color, var(--cg-blue));
}
.study-phase-num {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--phase-color, var(--cg-blue)) 12%, transparent);
  color: var(--phase-color, var(--cg-blue)); font-size: 0.75rem; font-weight: 800; margin-bottom: 8px;
}
.study-phase-title { font-size: 0.9rem; font-weight: 700; color: var(--cg-text); margin-bottom: 4px; }
.study-phase-duration { font-size: 0.75rem; color: var(--cg-muted); font-weight: 500; }
.study-phase--learn { --phase-color: var(--cg-blue); }
.study-phase--practice { --phase-color: #8B5CF6; }
.study-phase--exam { --phase-color: var(--cg-green); }

.study-calculator {
  background: var(--cg-surface); border: 1px solid var(--cg-border); border-radius: var(--cg-radius);
  padding: 20px; margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.study-calc-label { font-size: 0.85rem; font-weight: 600; color: var(--cg-text); }
.study-calc-input {
  width: 70px; padding: 8px 12px; border: 2px solid var(--cg-border); border-radius: var(--cg-radius-sm);
  font-size: 1rem; font-weight: 700; text-align: center; color: var(--cg-text); background: var(--cg-card);
  transition: border-color var(--cg-transition);
}
.study-calc-input:focus { outline: none; border-color: var(--cg-blue); }
.study-calc-result {
  font-size: 1rem; font-weight: 800; color: var(--cg-green); margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════
   34. STICKY SIDEBAR TOC + SCROLL SPY
   ═══════════════════════════════════════════════════════════ */
.sidebar-toc { position: sticky; top: 90px; }

/* Single sticky container for the whole cert sidebar — prevents the
   TOC and the Latest widget (both formerly sticky) from overlapping */
.sidebar-sticky-wrap {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.sidebar-sticky-wrap::-webkit-scrollbar { display: none; }
.sidebar-sticky-wrap .sidebar-toc { position: static; }
.sidebar-sticky-wrap .cert-latest { position: static; max-height: none; overflow: visible; }
@media (max-width: 991.98px) {
  .sidebar-sticky-wrap { position: static; max-height: none; overflow: visible; }
}
.sidebar-progress {
  height: 3px; background: var(--cg-blue); border-radius: 2px; width: 0%;
  transition: width 0.15s linear; margin-bottom: 16px;
}
.sidebar-toc-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-toc-item {
  display: block; padding: 8px 0 8px 14px; font-size: 0.82rem; font-weight: 500;
  color: var(--cg-muted); border-left: 2px solid var(--cg-border);
  text-decoration: none; transition: all var(--cg-transition); cursor: pointer;
}
.sidebar-toc-item:hover { color: var(--cg-blue); }
.sidebar-toc-item.active {
  border-left-color: var(--cg-blue); color: var(--cg-blue); font-weight: 700;
  background: color-mix(in srgb, var(--cg-blue) 4%, transparent);
}
.sidebar-action-card {
  background: var(--cg-card); border: 1px solid var(--cg-border); border-radius: var(--cg-radius);
  padding: 20px; margin-top: 20px; border-top: 3px solid var(--domain-color, var(--cg-blue));
}
.sidebar-action-card .btn { width: 100%; margin-bottom: 8px; font-size: 0.85rem; }
.sidebar-action-card .btn:last-child { margin-bottom: 0; }

/* Social proof badge in hero */
.cert-social-proof {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: rgba(255,255,255,.65); font-weight: 500;
}
.cert-social-proof svg { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════
   35. FILTER CHIPS (ARCHIVE)
   ═══════════════════════════════════════════════════════════ */
.filter-chips-wrap { padding: 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filter-chips-wrap::-webkit-scrollbar { display: none; }
.filter-chips { display: flex; gap: 8px; flex-wrap: nowrap; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 50px; font-size: 0.78rem; font-weight: 600;
  border: 1.5px solid var(--cg-border); background: var(--cg-card); color: var(--cg-text);
  text-decoration: none; white-space: nowrap; transition: all var(--cg-transition); cursor: pointer;
}
.filter-chip:hover { border-color: var(--cg-blue); color: var(--cg-blue); transform: translateY(-1px); }
.filter-chip.active { background: var(--cg-blue); color: #fff; border-color: var(--cg-blue); }
.filter-chip.active:hover { background: color-mix(in srgb, var(--cg-blue) 85%, black); }
.chip-emoji { font-size: 0.9rem; line-height: 1; }
.chip-count {
  background: rgba(0,0,0,.08); padding: 1px 7px; border-radius: 50px; font-size: 0.68rem; font-weight: 700;
}
.filter-chip.active .chip-count { background: rgba(255,255,255,.25); }
.filter-chip--clear { border-color: var(--cg-red); color: var(--cg-red); }
.filter-chip--clear:hover { background: var(--cg-red); color: #fff; border-color: var(--cg-red); }
.filter-chip--level::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--level-color, var(--cg-muted));
}

/* ═══════════════════════════════════════════════════════════
   36. SORT BAR (ARCHIVE)
   ═══════════════════════════════════════════════════════════ */
.sort-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.sort-bar-label { font-size: 0.78rem; font-weight: 600; color: var(--cg-muted); }
.sort-pill {
  padding: 5px 12px; border-radius: 50px; font-size: 0.73rem; font-weight: 600;
  border: 1.5px solid var(--cg-border); background: var(--cg-card); color: var(--cg-muted);
  text-decoration: none; transition: all var(--cg-transition);
}
.sort-pill:hover { border-color: var(--cg-navy); color: var(--cg-navy); }
.sort-pill.active { background: var(--cg-navy); color: #fff; border-color: var(--cg-navy); }

/* ═══════════════════════════════════════════════════════════
   37. ENHANCED CERT CARDS (ARCHIVE)
   ═══════════════════════════════════════════════════════════ */
.cg-cert-card { transition: transform var(--cg-transition), box-shadow var(--cg-transition); border-left: 3px solid transparent !important; position: relative; }
.cg-cert-card:hover { transform: translateY(-4px); box-shadow: var(--cg-shadow-md); border-left-color: var(--domain-color, var(--cg-blue)) !important; }
.cg-card-ribbon {
  position: absolute; top: 14px; right: -8px; background: var(--cg-orange); color: #fff;
  font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 12px 3px 8px; border-radius: 4px 0 0 4px; z-index: 2;
}
.cg-card-ribbon::after {
  content: ''; position: absolute; top: 100%; right: 0;
  border: 4px solid transparent; border-top-color: color-mix(in srgb, var(--cg-orange) 70%, black); border-right-color: color-mix(in srgb, var(--cg-orange) 70%, black);
}
.cg-salary-mini-bar { height: 4px; border-radius: 2px; background: var(--cg-border); width: 80px; display: inline-block; vertical-align: middle; margin-left: 6px; }
.cg-salary-mini-fill { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--cg-amber), var(--cg-green)); }
.cg-compare-check {
  position: absolute; top: 12px; right: 12px; width: 22px; height: 22px;
  border: 2px solid var(--cg-border); border-radius: 5px; cursor: pointer; z-index: 3;
  appearance: none; -webkit-appearance: none; background: var(--cg-card); transition: all var(--cg-transition);
}
.cg-compare-check:checked { background: var(--cg-blue); border-color: var(--cg-blue); }
.cg-compare-check:checked::after {
  content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.7rem; font-weight: 800;
}
.cg-compare-check:hover { border-color: var(--cg-blue); }

/* ═══════════════════════════════════════════════════════════
   38. COMPARE FAB
   ═══════════════════════════════════════════════════════════ */
.compare-fab {
  position: fixed; bottom: 100px; right: 20px;
  background: var(--cg-navy); color: #fff; border-radius: 50px; padding: 12px 24px;
  font-weight: 700; font-size: 0.85rem; box-shadow: var(--cg-shadow-lg); z-index: 1010;
  display: none; align-items: center; gap: 8px; text-decoration: none;
  transition: transform var(--cg-transition), box-shadow var(--cg-transition);
}
.compare-fab.visible { display: flex; }
.compare-fab:hover { transform: scale(1.05); color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.compare-fab-count {
  background: var(--cg-orange); width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════
   39. COMPARISON BARS (COMPARE PAGE)
   ═══════════════════════════════════════════════════════════ */
.compare-metric-row {
  padding: 20px 0; border-bottom: 1px solid var(--cg-border);
}
.compare-metric-row:last-child { border-bottom: none; }
.compare-metric-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cg-muted); margin-bottom: 12px; }
.compare-bars { display: flex; gap: 16px; align-items: center; }
.compare-bar-col { flex: 1; }
.compare-bar-value { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.compare-bar-track { height: 10px; border-radius: 5px; background: var(--cg-border); overflow: hidden; }
.compare-bar-fill {
  height: 100%; border-radius: 5px; transition: width 0.8s ease;
}
.compare-bar-fill--winner { background: var(--cg-green); }
.compare-bar-fill--loser { background: color-mix(in srgb, var(--cg-muted) 40%, var(--cg-border)); }
.compare-winner-badge {
  background: #ECFDF5; color: #065F46; font-size: 0.65rem; font-weight: 800;
  padding: 2px 8px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.03em;
}
.compare-diff-label { font-size: 0.7rem; color: var(--cg-muted); font-weight: 600; }
.compare-vs-divider { width: 1px; background: var(--cg-border); align-self: stretch; flex-shrink: 0; }
@media (max-width: 767.98px) {
  .compare-bars { flex-direction: column; gap: 12px; }
  .compare-vs-divider { width: 100%; height: 1px; }
}

/* Compare header cards */
.compare-header-card {
  background: var(--cg-card); border: 1px solid var(--cg-border); border-radius: var(--cg-radius);
  padding: 20px; text-align: center; border-top: 4px solid var(--cert-color, var(--cg-blue));
}
.compare-header-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.compare-header-card .cert-pill { font-size: 0.7rem; }
.compare-preview-card {
  background: var(--cg-card); border: 1px solid var(--cg-border); border-radius: var(--cg-radius-sm);
  padding: 12px 16px; margin-top: 8px; font-size: 0.82rem;
}

/* ═══════════════════════════════════════════════════════════
   40. DYNAMIC VERDICT (COMPARE PAGE)
   ═══════════════════════════════════════════════════════════ */
.verdict-card {
  background: var(--cg-surface); border: 1px solid var(--cg-border); border-radius: var(--cg-radius-lg);
  padding: 32px; margin: 2rem 0;
}
.verdict-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 20px; text-align: center; }
.verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 575.98px) { .verdict-grid { grid-template-columns: 1fr; } }
.verdict-col {
  background: var(--cg-card); border: 1px solid var(--cg-border); border-radius: var(--cg-radius);
  padding: 20px; border-top: 3px solid var(--cert-color, var(--cg-blue));
}
.verdict-col h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; color: var(--cert-color, var(--cg-blue)); }
.verdict-col ul { list-style: none; padding: 0; margin: 0; }
.verdict-col li { padding: 4px 0; font-size: 0.82rem; color: var(--cg-text); }
.verdict-col li::before { content: '✓ '; color: var(--cg-green); font-weight: 700; }
.verdict-roi {
  text-align: center; margin-top: 20px; padding: 16px;
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5); border-radius: var(--cg-radius); border: 1px solid color-mix(in srgb, var(--cg-green) 20%, transparent);
}
.verdict-roi-value { font-size: 1.5rem; font-weight: 800; color: var(--cg-green); }
.verdict-roi-label { font-size: 0.75rem; color: var(--cg-muted); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   41. RADAR CHART (COMPARE PAGE)
   ═══════════════════════════════════════════════════════════ */
.radar-chart-container { max-width: 380px; margin: 2rem auto; position: relative; }
.radar-chart-container svg { width: 100%; height: auto; }
.radar-polygon { fill-opacity: 0.25; stroke-width: 2; transition: fill-opacity 0.3s ease; }
.radar-polygon:hover { fill-opacity: 0.4; }
.radar-grid-line { stroke: var(--cg-border); stroke-width: 1; fill: none; }
.radar-axis { stroke: var(--cg-border); stroke-width: 1; }
.radar-label { font-size: 11px; font-weight: 600; fill: var(--cg-muted); text-anchor: middle; }
.radar-legend { display: flex; justify-content: center; gap: 24px; margin-top: 12px; }
.radar-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; }
.radar-legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* ═══════════════════════════════════════════════════════════
   42. SALARY GUIDE BARS
   ═══════════════════════════════════════════════════════════ */
.sg-bar-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cg-border) 50%, transparent);
}
.sg-bar-row:last-child { border-bottom: none; }
.sg-rank {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; background: var(--cg-surface); color: var(--cg-muted); flex-shrink: 0;
}
.sg-rank--gold { background: #FEF3C7; color: #92400E; }
.sg-rank--silver { background: #F1F5F9; color: #475569; }
.sg-rank--bronze { background: #FED7AA; color: #9A3412; }
.sg-name { width: 180px; flex-shrink: 0; }
.sg-name-title { font-size: 0.85rem; font-weight: 700; color: var(--cg-text); line-height: 1.3; }
.sg-name-domain { font-size: 0.68rem; color: var(--cg-muted); }
.sg-bar-track { flex: 1; height: 22px; border-radius: 11px; background: var(--cg-border); position: relative; overflow: hidden; }
.sg-bar-fill {
  height: 100%; border-radius: 11px;
  background: linear-gradient(90deg, var(--cg-amber), var(--cg-green));
  transition: width 1s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
}
.sg-bar-value { font-size: 0.72rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); white-space: nowrap; }
.sg-yoy { width: 70px; text-align: right; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.sg-yoy--up { color: var(--cg-green); }
.sg-yoy--down { color: var(--cg-red); }
@media (max-width: 767.98px) {
  .sg-bar-row { flex-wrap: wrap; }
  .sg-name { width: 100%; order: 1; display: flex; align-items: center; gap: 8px; }
  .sg-rank { order: 0; }
  .sg-bar-track { width: 100%; order: 2; flex: none; }
  .sg-yoy { order: 3; width: auto; }
}

/* ═══════════════════════════════════════════════════════════
   43. COUNTRY TOGGLE TABS (SALARY GUIDE)
   ═══════════════════════════════════════════════════════════ */
.country-tabs {
  display: inline-flex; gap: 4px; background: var(--cg-surface); padding: 4px;
  border-radius: 50px; border: 1px solid var(--cg-border); margin: 0 auto 32px; width: fit-content;
}
.country-tab {
  padding: 8px 16px; border-radius: 50px; font-size: 0.82rem; font-weight: 600;
  color: var(--cg-muted); cursor: pointer; transition: all var(--cg-transition);
  border: none; background: none; white-space: nowrap;
}
.country-tab:hover { color: var(--cg-text); }
.country-tab.active { background: var(--cg-navy); color: #fff; }
.country-panel { display: none; }
.country-panel.active { display: block; }

/* ═══════════════════════════════════════════════════════════
   44. ROI CALCULATOR (SALARY GUIDE)
   ═══════════════════════════════════════════════════════════ */
.roi-calculator {
  background: var(--cg-card); border: 2px solid var(--cg-blue); border-radius: var(--cg-radius-lg);
  padding: 32px;
}
.roi-calculator .form-label { font-size: 0.82rem; font-weight: 600; color: var(--cg-text); }
.roi-calculator .form-control { border: 2px solid var(--cg-border); border-radius: var(--cg-radius-sm); font-weight: 600; }
.roi-calculator .form-control:focus { border-color: var(--cg-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cg-blue) 15%, transparent); }
.roi-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 575.98px) { .roi-result-grid { grid-template-columns: 1fr; } }
.roi-result-card {
  text-align: center; padding: 20px; background: var(--cg-surface); border-radius: var(--cg-radius); border: 1px solid var(--cg-border);
}
.roi-result-value { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1.2; }
.roi-result-label { font-size: 0.75rem; color: var(--cg-muted); font-weight: 600; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════
   45. SALARY GUIDE — EXPERIENCE BREAKDOWN
   ═══════════════════════════════════════════════════════════ */
.sg-bar-info { width: 180px; flex-shrink: 0; }
.sg-bar-name { font-size: 0.85rem; font-weight: 700; color: var(--cg-text); line-height: 1.3; }
.sg-exp-row {
  display: flex; gap: 16px; padding: 16px 0; align-items: flex-start;
  border-bottom: 1px solid color-mix(in srgb, var(--cg-border) 50%, transparent);
}
.sg-exp-row:last-child { border-bottom: none; }
.sg-exp-label { width: 160px; flex-shrink: 0; padding-top: 6px; font-size: 0.85rem; }
.sg-exp-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sg-exp-tier { display: flex; align-items: center; gap: 8px; }
.sg-exp-tier-label { width: 65px; flex-shrink: 0; text-align: right; font-size: 0.7rem; }
.sg-bar-track--sm { flex: 1; height: 16px; border-radius: 8px; background: var(--cg-border); position: relative; overflow: hidden; }
.sg-bar-fill--entry { background: color-mix(in srgb, var(--cg-blue) 70%, white); }
.sg-bar-fill--mid { background: linear-gradient(90deg, var(--cg-blue), var(--cg-green)); }
.sg-bar-fill--senior { background: linear-gradient(90deg, var(--cg-amber), var(--cg-green)); }
.sg-bar-track--sm .sg-bar-value { font-size: 0.65rem; padding-right: 6px; }
@media (max-width: 767.98px) {
  .sg-exp-row { flex-direction: column; gap: 8px; }
  .sg-exp-label { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   46. REDUCED MOTION — ALL NEW COMPONENTS
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pass-rate-ring, .salary-range-fill, .study-hours-fill, .sg-bar-fill,
  .compare-bar-fill, .exp-tier-fill, .skill-pill, .hiring-logo,
  .exam-detail-card, .career-step-dot, .cg-cert-card, .filter-chip,
  .sort-pill, .country-tab { transition: none !important; animation: none !important; }
}


/* ═══ ADDITIONS v1.2.0 — ad slots, mobile gutter fix, content tables, hub pages ═══ */

/* g-5 rows apply -24px side margins but our containers pad only 20px,
   bleeding 4px past the viewport whenever the container spans the full
   viewport (phones AND viewports at exactly the container max-width).
   Cap the horizontal gutter to 2.5rem (-20px margins = flush) globally. */
.row.g-5 { --bs-gutter-x: 2.5rem; }

/* ── Ad Slots — reserved-height containers (zero CLS) ──
   Heights are fixed BEFORE the ad loads; never animate these
   and never overlay content near them. */
.cg-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 28px auto;
  width: 100%;
}
.cg-ad-slot::before {
  content: 'Advertisement';
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cg-muted);
  opacity: 0.7;
  margin-bottom: 6px;
}
.cg-ad-slot--leaderboard { min-height: 118px; } /* 100px ad + label */
.cg-ad-slot--rect        { min-height: 268px; } /* 250px ad + label */
.cg-ad-slot .widget { margin-bottom: 0 !important; width: 100%; display: flex; justify-content: center; }

/* ── Content tables — scroll within container, never page overflow ── */
.cert-body .entry-content table,
.single-post .entry-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.cert-body .entry-content table th,
.cert-body .entry-content table td,
.single-post .entry-content table th,
.single-post .entry-content table td {
  padding: 10px 14px;
  border: 1px solid var(--cg-border);
  white-space: nowrap;
}
.cert-body .entry-content table th,
.single-post .entry-content table th {
  background: var(--cg-surface);
  font-weight: 700;
  color: var(--cg-navy);
}

/* ── Domain hub pages — sticky sub-nav, meta pills, level badges ── */
.cg-subnav {
  position: sticky;
  top: 68px;            /* sits directly under the sticky site header */
  z-index: 1020;
}
.cg-filter-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.cg-filter-scroll::-webkit-scrollbar { display: none; }
.cg-filter-scroll .btn { white-space: nowrap; flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; }

.cg-meta-pill {
  display: inline-block;
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  color: var(--cg-muted);
  white-space: nowrap;
}
.cg-meta-pill.cg-meta-green {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}

.cg-level-badge { font-size: 0.68rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; }
.cg-level-beginner,
.cg-level-foundational { background: #F0FDF4; color: #166534; }
.cg-level-intermediate,
.cg-level-associate    { background: #FFFBEB; color: #92400E; }
.cg-level-advanced,
.cg-level-professional { background: #FEF2F2; color: #991B1B; }
.cg-level-expert,
.cg-level-specialty    { background: #F5F3FF; color: #5B21B6; }

/* ═══════════════════════════════════════════════════════════
   DOMAIN HUB v2 — light editorial redesign (Coursera-grade)
   All classes prefixed dh-*. Consumes --domain-color set
   inline by taxonomy-cert_domain.php.
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.dh-hero {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--domain-color) 6%, #fff) 0%, var(--cg-surface) 100%);
  border-bottom: 1px solid var(--cg-border);
  padding: 48px 0 0;
  overflow: hidden;
}
.dh-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cg-muted);
}
.dh-kicker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  font-size: 17px;
  background: color-mix(in srgb, var(--domain-color) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--domain-color) 22%, transparent);
}
.dh-kicker-label { color: var(--domain-color); }
.dh-kicker-sep { color: var(--cg-border); }
.dh-title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--cg-navy);
  margin-bottom: 14px;
  max-width: 22ch;
}
.dh-sub {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.65;
  color: var(--cg-muted);
  max-width: 62ch;
  margin-bottom: 22px;
}
.dh-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.dh-trustline { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }

/* Definition card — white action-card treatment */
.dh-definition {
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-top: 4px solid var(--domain-color);
  border-radius: var(--cg-radius-lg);
  box-shadow: var(--cg-shadow-md);
  padding: 26px 26px 24px;
}
.dh-definition-icon { font-size: 1.9rem; display: block; margin-bottom: 10px; }
.dh-definition-title {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cg-navy);
  margin-bottom: 10px;
}
.dh-definition-body { font-size: 0.92rem; line-height: 1.7; color: var(--cg-muted); margin: 0; }

/* At-a-glance stat strip — floating card with dividers */
.dh-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-lg);
  box-shadow: var(--cg-shadow-md);
  margin: 32px 0 28px;        /* in-flow on mobile/tablet */
  position: relative;
  z-index: 2;
}
.dh-hero .dh-stats { margin-bottom: 36px; }
.dh-stat {
  padding: 20px 24px;
  text-align: left;
  border-top: 1px solid var(--cg-border);
}
.dh-stat:nth-child(-n+2) { border-top: none; }
.dh-stat:nth-child(odd) { border-right: 1px solid var(--cg-border); }
.dh-stat dd {
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cg-navy);
  line-height: 1.1;
  margin: 0 0 2px;
  font-variant-numeric: tabular-nums;
}
.dh-stat dd.dh-stat--green { color: #047857; }
.dh-stat dd.dh-stat--plain { color: var(--cg-navy); }
.dh-stat dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cg-muted);
}
@media (min-width: 768px) {
  .dh-stats { grid-template-columns: repeat(4, 1fr); }
  .dh-stat { border-top: none !important; border-right: 1px solid var(--cg-border); }
  .dh-stat:last-child { border-right: none; }
}

/* ── Sticky filter sub-nav clearance (stat strip overlaps) ── */
.dh-subnav { padding-top: 4px; background: var(--cg-surface); border-bottom: 1px solid var(--cg-border); }
.dh-subnav .filter-chips-wrap { padding: 10px 0 14px; }

/* ── Body & grid ── */
.dh-body { background: var(--cg-surface); }
.dh-grid-heading {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cg-navy);
}
.dh-grid-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cg-muted);
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: 50px;
  padding: 4px 12px;
}
.dh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) { .dh-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* ── Cert card ── */
.dh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  padding: 22px 22px 18px;
  transition: transform var(--cg-transition), box-shadow var(--cg-transition), border-color var(--cg-transition);
}
.dh-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--cg-radius) var(--cg-radius) 0 0;
  background: linear-gradient(90deg, var(--domain-color), color-mix(in srgb, var(--domain-color) 45%, #fff));
  opacity: 0.9;
}
.dh-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--domain-color) 35%, var(--cg-border));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--domain-color) 10%, transparent), 0 4px 12px rgba(0,0,0,.06);
}
.dh-card:focus-within { outline: 3px solid var(--domain-color); outline-offset: 2px; }
.dh-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dh-card-code {
  font-family: var(--cg-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cg-muted);
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: 5px;
  padding: 2px 8px;
}
.dh-card-dots { display: inline-flex; gap: 3px; margin-left: auto; }
.dh-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cg-border);
  display: inline-block;
}
.dh-dot.active { background: var(--domain-color); }
.dh-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.dh-card-title a {
  color: var(--cg-navy);
  text-decoration: none;
  transition: color var(--cg-transition);
}
.dh-card:hover .dh-card-title a { color: var(--domain-color); }
.dh-card-issuer { font-size: 0.78rem; font-weight: 600; color: var(--cg-muted); margin-bottom: 8px; }
.dh-card-excerpt { font-size: 0.85rem; line-height: 1.6; color: var(--cg-muted); margin-bottom: 14px; flex: 1; }

.dh-card-salary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
  border: 1px solid #D1FAE5;
  border-radius: var(--cg-radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.dh-card-salary-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #065F46;
}
.dh-card-salary-value { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: #047857; white-space: nowrap; }

.dh-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--cg-border);
}
.dh-card-meta-item { display: flex; align-items: baseline; gap: 5px; }
.dh-card-meta-k { font-size: 0.7rem; font-weight: 600; color: var(--cg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dh-card-meta-v { font-size: 0.85rem; font-weight: 700; color: var(--cg-navy); }
.dh-card-arrow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  color: var(--cg-muted);
  background: var(--cg-surface);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--cg-transition), transform var(--cg-transition), color var(--cg-transition), background var(--cg-transition);
}
.dh-card:hover .dh-card-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--domain-color);
  background: color-mix(in srgb, var(--domain-color) 10%, transparent);
}

/* ── Empty state ── */
.dh-empty {
  text-align: center;
  background: var(--cg-card);
  border: 1px dashed var(--cg-border);
  border-radius: var(--cg-radius-lg);
  padding: 56px 24px;
}
.dh-empty-icon { font-size: 2.6rem; display: block; margin-bottom: 12px; }
.dh-empty-title { font-size: 1.15rem; font-weight: 800; color: var(--cg-navy); margin-bottom: 6px; }
.dh-empty-sub { color: var(--cg-muted); font-size: 0.92rem; margin-bottom: 20px; }

/* ── Compare CTA band ── */
.dh-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  padding: 26px 28px;
  border-radius: var(--cg-radius-lg);
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--domain-color) 26%, transparent) 0%, transparent 55%),
    var(--cg-navy);
}
.dh-cta-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin-bottom: 4px; }
.dh-cta-sub { font-size: 0.88rem; color: rgba(255,255,255,.65); margin: 0; }

/* ── Sidebar cards ── */
.dh-side-card {
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-lg);
  box-shadow: var(--cg-shadow);
  padding: 22px;
  margin-bottom: 20px;
}
.dh-side-card--dark {
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(249,115,22,.18) 0%, transparent 55%),
    var(--cg-navy);
  border: none;
}
.dh-side-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--cg-navy); margin-bottom: 14px; }
.dh-side-title--light { color: #fff; }
.dh-side-sub { font-size: 0.85rem; color: rgba(255,255,255,.65); margin-bottom: 16px; line-height: 1.6; }
.dh-side-domains { list-style: none; margin: 0; padding: 0; }
.dh-side-domain {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--cg-radius-sm);
  text-decoration: none;
  transition: background var(--cg-transition);
}
.dh-side-domain:hover { background: color-mix(in srgb, var(--domain-color) 7%, transparent); }
.dh-side-domain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  font-size: 15px;
  background: color-mix(in srgb, var(--domain-color) 11%, transparent);
  flex-shrink: 0;
}
.dh-side-domain-name { font-size: 0.86rem; font-weight: 600; color: var(--cg-text); line-height: 1.3; }
.dh-side-domain:hover .dh-side-domain-name { color: var(--domain-color); }
.dh-side-domain-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cg-muted);
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: 50px;
  padding: 1px 8px;
}

/* ── Pagination polish ── */
.dh-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 12px;
  margin: 0 3px;
  border-radius: 10px;
  border: 1px solid var(--cg-border);
  background: var(--cg-card);
  color: var(--cg-text);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all var(--cg-transition);
}
.dh-pagination .page-numbers:hover { border-color: var(--domain-color); color: var(--domain-color); }
.dh-pagination .page-numbers.current { background: var(--cg-navy); border-color: var(--cg-navy); color: #fff; }

/* ── Mobile refinements ── */
@media (max-width: 575.98px) {
  .dh-hero { padding-top: 32px; }
  .dh-hero-ctas .btn { flex: 1 1 100%; text-align: center; }
  .dh-stats { margin-top: 28px; }
  .dh-cta-band { padding: 22px 20px; }
  .dh-cta-band .btn { width: 100%; text-align: center; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .dh-card, .dh-card-arrow, .dh-side-domain { transition: none !important; }
  .dh-card:hover { transform: none; }
}

/* ═══ Archive catalog page — light hero + grouped filter panel ═══ */
.dh-hero-search {
  box-shadow: 0 2px 12px rgba(15,23,42,.08);
  border: 1px solid var(--cg-border);
  max-width: 560px;
}
.dh-filter-panel { padding: 8px 0 14px; }
.filter-chip-label {
  display: inline-flex;
  align-items: center;
  min-width: 64px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cg-muted);
  flex-shrink: 0;
}
.filter-chip-count {
  background: rgba(0,0,0,.07);
  padding: 1px 7px;
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 700;
}
.filter-chip.active .filter-chip-count { background: rgba(255,255,255,.25); }
.dh-filter-panel .filter-chips-wrap { display: flex; align-items: center; gap: 8px; }
/* Level chip color dots via data-level */
.filter-chip[data-level] { padding-left: 12px; }
.filter-chip[data-level]::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cg-muted);
  margin-right: 2px;
}
.filter-chip[data-level="beginner"]::before,
.filter-chip[data-level="foundational"]::before { background: #10B981; }
.filter-chip[data-level="associate"]::before    { background: #3B82F6; }
.filter-chip[data-level="intermediate"]::before { background: #F59E0B; }
.filter-chip[data-level="professional"]::before,
.filter-chip[data-level="advanced"]::before     { background: #F97316; }
.filter-chip[data-level="expert"]::before       { background: #EF4444; }
.filter-chip[data-level="specialty"]::before    { background: #8B5CF6; }
/* Domain chips pick up their domain color */
.filter-chip[style*="--chip-color"]:hover,
.filter-chip[style*="--chip-color"].active {
  border-color: var(--chip-color);
}
.filter-chip[style*="--chip-color"].active {
  background: var(--chip-color);
  color: #fff;
}
@media (max-width: 575.98px) {
  .dh-filter-panel { padding-top: 42px; }
  .filter-chip-label { min-width: 100%; margin-bottom: -4px; }
  .dh-filter-panel .filter-chips-wrap { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   CARD REDESIGN v2 — "ghost numeral" domain cards (homepage)
   + "exam ticket" cert cards (domain hubs)
   ═══════════════════════════════════════════════════════════ */

/* ── Homepage domain cards: the cert COUNT becomes the visual.
      Oversized tabular numeral in the domain color bleeds off the
      corner; a radial color-wash breathes in on hover. ── */
.domain-card { overflow: hidden; }              /* clip the ghost numeral */
.domain-card-inner { position: relative; z-index: 1; }

.domain-ghost {
  position: absolute;
  right: -8px;
  bottom: -30px;
  font-size: 6.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--domain-color, var(--cg-blue));
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity var(--cg-transition), transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.domain-card:hover .domain-ghost {
  opacity: 0.15;
  transform: translate(-4px, -6px) scale(1.04);
}

/* Radial color wash — breathes in from the bottom-right on hover */
.domain-card-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130% 110% at 100% 100%,
    color-mix(in srgb, var(--domain-color, var(--cg-blue)) 10%, transparent) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}
.domain-card:hover .domain-card-inner::after { opacity: 1; }

/* Head row: icon left, arrow right (arrow slides in on hover) */
.domain-card .domain-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* Pills get a touch more presence */
.domain-card .cert-pill { backdrop-filter: none; background: #fff; }

/* ── Hub cert cards v2: "exam ticket".
      A perforated tear-line with side notches separates the card
      body from the stub (cost · pass rate · go). ── */
.dh-card { overflow: visible; }
.dh-card-meta {
  position: relative;
  margin: 0 -22px -18px;                 /* stretch stub to card edges */
  padding: 14px 22px 16px;
  border-top: 1.5px dashed color-mix(in srgb, var(--cg-border) 80%, var(--cg-muted));
  background: color-mix(in srgb, var(--domain-color, var(--cg-blue)) 3%, var(--cg-surface));
  border-radius: 0 0 var(--cg-radius) var(--cg-radius);
}
/* Ticket notches — punched circles on the tear line */
.dh-card-meta::before,
.dh-card-meta::after {
  content: '';
  position: absolute;
  top: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  transform: translateY(-50%);
}
.dh-card-meta::before { left: -9px; }
.dh-card-meta::after  { right: -9px; }

/* Salary = hero number of the ticket */
.dh-card-salary { padding: 12px 16px; }
.dh-card-salary-value {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Stub content slightly bolder */
.dh-card-meta-v { font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.dh-card-arrow { background: #fff; border: 1px solid var(--cg-border); }
.dh-card:hover .dh-card-arrow { border-color: transparent; }

/* Exam-code chip reads like a ticket serial */
.dh-card-code { letter-spacing: 0.05em; text-transform: uppercase; }

/* Focus ring respects the notched silhouette */
.dh-card:focus-within { outline-offset: 4px; border-radius: var(--cg-radius); }

@media (max-width: 575.98px) {
  .domain-ghost { font-size: 5rem; bottom: -24px; }
}
@media (prefers-reduced-motion: reduce) {
  .domain-ghost, .domain-card-inner::after { transition: none !important; }
  .domain-card:hover .domain-ghost { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   COMPARE PAGE v2 — head-to-head table
   Replaces the old (unstyled) stacked bars. Scrolls within its
   wrapper on phones — never overflows the page.
   ═══════════════════════════════════════════════════════════ */
.cmp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
}
.cmp-table {
  width: 100%;
  min-width: 600px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
}
.cmp-table th, .cmp-table td { padding: 14px 18px; vertical-align: top; }

/* Header: cert names with domain-color dots */
.cmp-table thead th {
  background: var(--cg-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  position: sticky;
  top: 0;
}
.cmp-th-metric { width: 26%; }
.cmp-th-cert { width: 37%; }
.cmp-th-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cert-color, var(--cg-blue));
  margin-right: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cert-color, var(--cg-blue)) 30%, transparent);
}

/* Metric column */
.cmp-table tbody th.cmp-metric,
.cmp-table tfoot th.cmp-metric {
  background: var(--cg-surface);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--cg-navy);
  border-top: 1px solid var(--cg-border);
}
.cmp-metric-hint {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cg-muted);
  margin-top: 3px;
}

/* Value cells */
.cmp-cell {
  border-top: 1px solid var(--cg-border);
  background: #fff;
}
.cmp-cell--winner {
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
  box-shadow: inset 3px 0 0 var(--cg-green);
}
.cmp-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cg-navy);
  font-variant-numeric: tabular-nums;
}
.cmp-cell--winner .cmp-value { color: #065F46; }

/* Mini proportional bar under each value */
.cmp-minibar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--cg-border);
  margin-top: 8px;
  overflow: hidden;
}
.cmp-minibar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--cert-color, var(--cg-blue));
}
.cmp-cell--winner .cmp-minibar-fill { background: var(--cg-green); }

/* Tally footer */
.cmp-cell--tally { border-top: 2px solid var(--cg-navy); }
.cmp-tally { font-size: 1.3rem; font-weight: 800; color: var(--cg-navy); font-variant-numeric: tabular-nums; }
.cmp-cell--winner .cmp-tally { color: #065F46; }
.cmp-tally-of { font-size: 0.85rem; font-weight: 600; color: var(--cg-muted); margin-left: 2px; }

@media (max-width: 575.98px) {
  .cmp-table { min-width: 540px; font-size: 0.85rem; }
  .cmp-table th, .cmp-table td { padding: 11px 12px; }
  .cmp-value { font-size: 0.95rem; }
}