/* ClickUp PM Learn Hub - Core CSS
   Single file, BEM naming, c- prefix
   Visual treatment: matches ClickUp Hub design system
   ================================== */

:root {
  /* ── Core colors ── */
  --lh-bk: #202020;
  --lh-fg: #202020;
  --lh-fg-2: #333333;
  --lh-tx: #646464;
  --lh-cp: #737373;
  --lh-br: #E8E8E8;
  --lh-bg: #FAFAFA;
  --lh-bg2: #F0F0F0;
  --lh-bg-alt: #F9F8FF;
  --lh-wh: #ffffff;
  --lh-ac: #6647F0;
  --lh-ok: #30A46C;
  --lh-er: #d63031;
  --lh-wn: #D45A00;
  --lh-border-soft: #EBEBEB;
  --lh-br-light: #F3F3F3;
  --lh-br-hover: #d0d0d0;

  /* ── Domain colors ── */
  --lh-domain-pm: #6C5CE7;
  --lh-domain-ai: #0984E3;
  --lh-domain-task: #2D9CDB;
  --lh-domain-prod: #F59E0B;
  --lh-domain-product: #00B894;
  --lh-domain-ops: #E17055;
  --lh-domain-asset: #636E72;

  /* ── Layout ── */
  --lh-hdr-w: 1200px;
  --lh-cnt-w: 1080px;
  --lh-section-gap: 72px;
  --lh-last-gap: 64px;

  /* ── Typography scale ── */
  --lh-hero-h1: 44px;
  --lh-dir-h1: 36px;
  --lh-section-h2: 28px;
  --lh-prose-h2: 22px;
  --lh-card-title: 15px;
  --lh-hero-sub: 16px;
  --lh-hero-sub-opacity: 0.6;

  /* ── Font families ── */
  --lh-ff: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  --lh-ff-heading: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  --lh-mono: 'Sometype Mono', 'Sometype Mono Fallback', monospace;

  /* ── Cards ── */
  --lh-card-r: 14px;
  --lh-card-gap: 14px;
  --lh-card-pad: 20px 24px;
  --lh-carousel-w: 280px;

  /* ── Radius scale ── */
  --lh-radius-sm: 6px;
  --lh-radius-md: 8px;
  --lh-radius-lg: 14px;
  --lh-radius-xl: 16px;
  --lh-radius-full: 100px;
}

/* ---- Reset for plugin scope ---- */
.cplh-wrap {
  font-family: var(--lh-ff);
  color: var(--lh-fg);
  line-height: 1.7;
  font-size: 15px;
  max-width: var(--lh-cnt-w);
  margin: 0 auto;
  padding: 0 24px 48px;
}

.cplh-wrap *,
.cplh-wrap *::before,
.cplh-wrap *::after {
  box-sizing: border-box;
}

/* Override theme heading colors inside plugin scope */
.cplh-wrap h1,
.cplh-wrap h2,
.cplh-wrap h3,
.cplh-wrap h4 {
  color: var(--lh-bk);
  font-family: var(--lh-ff-heading);
}

/* Override theme link styles inside plugin scope */
.cplh-wrap a { text-decoration: none; color: var(--lh-ac); }
.cplh-wrap a:hover { text-decoration: underline; }
.cplh-wrap a:focus:not(:focus-visible) { outline: none; }

/* ---- Page ---- */
/* ---- Header Band (grey band with breadcrumb, H1, excerpt, byline) ---- */
.c-header-band {
  position: relative;
  border-bottom: 1px solid var(--lh-br);
  padding: 36px 0 32px;
}
.c-header-band::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: -1px; /* cover the border-bottom too */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--lh-bg);
  border-bottom: 1px solid var(--lh-br);
  z-index: 0;
}
.c-header-band > * {
  position: relative;
  z-index: 1;
}
.c-header-band .c-breadcrumb { margin-bottom: 14px; position: relative; z-index: 10; }
.c-header-band__title {
  font-family: var(--lh-ff-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--lh-bk);
  margin-bottom: 8px;
}
.c-header-band__excerpt {
  font-size: 15px;
  line-height: 1.7;
  color: var(--lh-fg);
  max-width: 620px;
  margin: 0;
}
.c-header-band__excerpt p { margin: 0; }
.c-header-band__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--lh-br);
  max-width: 480px;
}
.c-byline__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lh-bk);
  color: var(--lh-wh);
  font-family: var(--lh-ff-heading);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.c-byline__body { flex: 1; }
.c-byline__top {
  font-size: 14px;
  color: var(--lh-cp);
  line-height: 1.4;
}
.c-byline__top strong { color: var(--lh-bk); font-weight: 600; }
.c-byline__sep { margin: 0 3px; opacity: 0.3; }
.c-byline__date {
  font-size: 12px;
  color: var(--lh-cp);
  margin-top: 2px;
}
.c-header-band__meta {
  font-size: 12px;
  color: var(--lh-cp);
  margin-top: 14px;
}


.c-page { padding-top: 0; }
.aih-page .cplh-wrap .c-page { padding-top: 0 !important; }
.c-page__title {
  font-family: var(--lh-ff-heading);
  font-size: clamp(24px, 3vw, 28px);
  font-weight: 700;
  color: var(--lh-bk);
  margin: 12px 0 0;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

/* ---- Breadcrumb ---- */
.c-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--lh-tx);
  margin-bottom: 12px;
  line-height: 1.5;
}
.c-breadcrumb a { color: var(--lh-tx); text-decoration: none; transition: color 0.15s; }
.c-breadcrumb a:hover { color: var(--lh-ac); text-decoration: none; }
.c-breadcrumb__sep { margin: 0 8px; opacity: 0.4; }
.c-breadcrumb__current { color: var(--lh-bk); font-weight: 600; }

/* ---- Badges ---- */
.c-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--lh-ff);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--lh-radius-sm);
  border: 1px solid var(--lh-br);
  background: var(--lh-bg2);
  color: var(--lh-tx);
  line-height: 1;
  white-space: nowrap;
}
.c-badge--small { font-size: 11px; padding: 3px 8px; }
.c-badge--muted { background: var(--lh-bg2); color: var(--lh-tx); border-color: var(--lh-br); }

/* ---- Layout B: Content + Right Sidebar ---- */
.c-layout-b {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
  padding-top: 32px;
}
/* sidebar sticky position is set in FIX #1 section (top: 80px) */

/* ---- Layout A: Left Sidebar + Content ---- */
.c-layout-a {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
  padding-top: 32px;
}
.c-layout-a__sidebar {
  position: sticky;
  top: 80px;
  align-self: flex-start;
  max-width: 300px;
}

/* ---- Capsule (Answer Box) ---- */
.c-capsule {
  font-family: var(--lh-ff);
  font-size: 17px;
  line-height: 1.7;
  color: var(--lh-tx);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--lh-br);
  border-left: none;
  background: none;
  border-radius: 0;
}
.c-capsule__label {
  display: block;
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-ac);
  margin-bottom: 6px;
}
.c-capsule p { margin: 0; font-size: inherit; color: inherit; }

/* ---- Prose ---- */
.c-prose { margin-bottom: 32px; }
.c-prose h2 {
  font-family: var(--lh-ff-heading);
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--lh-bk);
  margin: 32px 0 16px;
  line-height: 1.25;
}
.c-prose h3 {
  font-family: var(--lh-ff-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 24px 0 10px;
}
.c-prose p { margin: 0 0 14px; }
.c-prose ul, .c-prose ol { margin: 0 0 14px; padding-left: 20px; }
.c-prose li { margin-bottom: 6px; }
.c-prose a { color: var(--lh-ac); text-decoration: none; }
.c-prose a:hover { text-decoration: underline; }

/* ---- Section ---- */
.c-section { margin-bottom: 32px; }
.c-section h2 {
  font-family: var(--lh-ff-heading);
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 16px;
  line-height: 1.25;
}

/* ---- Table ---- */
.c-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 14px;
}
.c-table th {
  background: var(--lh-bk);
  color: var(--lh-wh);
  text-align: left;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--lh-bk);
}
.c-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--lh-br-light);
  color: var(--lh-bk);
  word-break: break-word;
}
/* zebra striping removed per Change #73 */
.c-table__entity-link { color: var(--lh-ac); font-weight: 600; text-decoration: none; }
.c-table__entity-link:hover { text-decoration: underline; }

/* ---- Learning Path ---- */
.c-learning-path {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  overflow: hidden;
}
.c-learning-path__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--lh-br);
  transition: background 0.15s;
}
.c-learning-path__item:last-child {
  border-bottom: none;
}
.c-learning-path__item:hover {
  background: var(--lh-wh);
}
.c-learning-path__num {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lh-bg2);
  color: var(--lh-tx);
  border-radius: var(--lh-radius-md);
  font-size: 13px;
  font-weight: 700;
}
.c-learning-path__num--become {
  background: var(--lh-ac);
  color: var(--lh-wh);
}
.c-learning-path__num--excel {
  background: var(--lh-ok);
  color: var(--lh-wh);
}
.c-learning-path__link {
  font-weight: 600;
  font-size: 14px;
  color: var(--lh-bk);
  text-decoration: none;
  flex: 1;
}
.c-learning-path__link:hover { color: var(--lh-ac); }
.c-learning-path__type {
  font-family: var(--lh-mono);
  font-size: 11px;
  color: var(--lh-cp);
  padding: 2px 8px;
  border-radius: var(--lh-radius-sm);
  background: rgba(0,0,0,0.03);
  white-space: nowrap;
  flex-shrink: 0;
}
.c-learning-path__desc {
  font-size: 13px;
  color: var(--lh-fg-2);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ---- CTA Bar ---- */
.c-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--lh-bk);
  color: var(--lh-wh);
  padding: 24px 28px;
  border-radius: var(--lh-radius-lg);
  margin: 32px 0;
}
.c-cta-bar strong { color: var(--lh-wh); }
.c-cta-bar__text { font-size: 15px; font-family: var(--lh-ff-heading); }
.c-cta-bar__text strong { font-weight: 700; font-size: 16px; }
.c-cta-bar__btn {
  display: inline-flex;
  align-items: center;
  background: var(--lh-wh);
  color: var(--lh-bk) !important;
  padding: 12px 24px;
  border-radius: var(--lh-radius-md);
  font-family: var(--lh-ff-heading);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.c-cta-bar__btn:hover { opacity: 0.9; color: var(--lh-bk) !important; }

/* ---- FAQ ---- */
.c-faq__item {
  border-bottom: 1px solid var(--lh-br);
}
.c-faq__item:first-child {
  border-top: 1px solid var(--lh-br);
}
.c-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  min-height: 44px;
  font-family: var(--lh-ff);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  color: var(--lh-bk);
  transition: color 0.15s;
}
.c-faq__question:hover { color: var(--lh-ac); }
.c-faq__question::-webkit-details-marker { display: none; }
.c-faq__question::after {
  content: '\25BC';
  font-size: 10px;
  color: var(--lh-cp);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.c-faq__question::before { display: none; }
details[open] .c-faq__question::after { transform: rotate(180deg); }
.c-faq__answer {
  padding: 0 0 16px;
  color: var(--lh-fg);
  font-size: 14px;
  line-height: 1.7;
}

/* ---- Sidebar Facts ---- */
.c-sidebar-facts {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--lh-br-light);
  padding-bottom: 20px;
}
.c-sidebar-facts:last-child { border-bottom: none; }
.c-sidebar-facts__title {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--lh-cp);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
}
.c-sidebar-facts__list { margin: 0; }
.c-sidebar-facts__list dt {
  font-size: 12px;
  color: var(--lh-cp);
  font-weight: 500;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--lh-br-light);
}
.c-sidebar-facts__list dt:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.c-sidebar-facts__list dd {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
  margin: 2px 0 0;
}

/* ---- Sidebar Salary Highlight ---- */
.c-sidebar-salary {
  background: var(--lh-bk);
  color: var(--lh-wh);
  border-radius: var(--lh-radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
  text-align: center;
}
.c-sidebar-salary__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
}
.c-sidebar-salary__value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--lh-wh);
}

/* ---- Calculator ---- */
.c-calc { background: var(--lh-bg); border-radius: var(--lh-radius-md); padding: 20px; margin-bottom: 16px; }
.c-calc__field { margin-bottom: 12px; }
.c-calc__label { display: block; font-size: 13px; font-weight: 600; color: var(--lh-bk); margin-bottom: 4px; }
.c-calc__input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-sm);
  font-size: 14px;
  background: var(--lh-wh);
  color: var(--lh-tx);
}
.c-calc__input:focus { border-color: var(--lh-ac); outline: none; }
.c-calc__result {
  padding: 20px;
  background: var(--lh-bk);
  border: none;
  border-radius: var(--lh-radius-md);
  color: var(--lh-wh);
  min-height: 50px;
  margin-top: 16px;
}
.c-calc__result:empty::before {
  content: "Enter values above to see results";
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}
.c-calc__result-row {
  padding: 6px 0;
  font-size: 15px;
  color: var(--lh-wh);
}
.c-calc__result-row strong {
  color: var(--lh-wh);
}
.c-calc__result-row + .c-calc__result-row {
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* ---- Sidebar CTA ---- */
.c-sidebar-cta { margin-top: 24px; margin-bottom: 16px; }
.c-sidebar-cta__btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--lh-bk);
  color: var(--lh-wh) !important;
  padding: 11px 16px;
  border-radius: var(--lh-radius-md);
  font-family: var(--lh-ff-heading);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  transition: background 0.15s;
}
.c-sidebar-cta__btn:hover { background: #000000; color: var(--lh-wh) !important; }
.c-sidebar-cta__desc {
  font-size: 12px;
  color: var(--lh-cp);
  text-align: center;
  margin: 6px 0 0;
}

/* ---- Sidebar Section + Links ---- */
.c-sidebar-section { margin-bottom: 24px; }
.c-sidebar-section__title {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-cp);
  margin: 0 0 10px;
}
.c-sidebar-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--lh-br-light);
  text-decoration: none;
  color: var(--lh-bk);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
}
.c-sidebar-link:last-child { border-bottom: none; }
.c-sidebar-link:hover { color: var(--lh-ac); text-decoration: none; }
.c-sidebar-link__arrow { color: var(--lh-ac); font-size: 12px; }

/* ---- Related Links ---- */
.c-related { display: flex; flex-wrap: wrap; gap: 8px; }
.c-related__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  color: var(--lh-bk);
  font-weight: 500;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-related__link:hover {
  border-color: var(--lh-br-hover);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-decoration: none;
  color: var(--lh-bk);
}

/* ---- Hub Page ---- */
.c-hub__hero {
  background: linear-gradient(155deg, #14141a 0%, #1f1f27 60%, #282836 100%);
  color: var(--lh-wh);
  padding: 56px 32px 48px;
  border-radius: var(--lh-radius-lg);
  margin-bottom: 40px;
  text-align: center;
}
.c-hub__hero h1,
.c-hub__hero p { color: var(--lh-wh); }
.c-hub__kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #C084FC;
  margin: 0 0 8px;
  font-weight: 600;
}
.c-hub__title {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.2;
  color: var(--lh-wh);
}
.c-hub__tagline {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
.c-hub__stat {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin: 12px 0 0;
}

/* Hub sections */
.c-hub__section { margin-bottom: 40px; }
.c-hub__section h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 6px;
}
.c-hub__section-desc {
  font-size: 14px;
  color: var(--lh-cp);
  margin: 0 0 16px;
}

/* Intent pathfinder */
.c-hub__intents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.c-hub__intent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--lh-border-soft);
  border-radius: var(--lh-radius-lg);
  text-decoration: none;
  color: var(--lh-tx);
  background: var(--lh-wh);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-hub__intent:hover {
  border-color: var(--lh-br-hover);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  color: var(--lh-tx);
  text-decoration: none;
}
.c-hub__intent-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
}
.c-hub__intent strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
}
.c-hub__intent-desc {
  font-size: 13px;
  color: var(--lh-cp);
}

/* Domain grid */
.c-hub__domain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.c-hub__domain-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--lh-border-soft);
  border-radius: var(--lh-radius-lg);
  text-decoration: none;
  color: var(--lh-tx);
  background: var(--lh-wh);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-hub__domain-card:hover {
  border-color: var(--lh-br-hover);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  color: var(--lh-tx);
  text-decoration: none;
}
.c-hub__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.c-hub__domain-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.c-hub__domain-info strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
}
.c-hub__domain-desc {
  font-size: 12px;
  color: var(--lh-cp);
}
.c-hub__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--lh-cp);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Layout A content ---- */
.c-layout-a__content { min-width: 0; overflow-x: hidden; box-sizing: border-box; }

/* ---- Series Nav (Layout A sidebar) ---- */
.c-series-nav__back {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--lh-ac);
  text-decoration: none;
  margin-bottom: 16px;
}
.c-series-nav__back:hover { text-decoration: underline; }

.c-series-nav {
  background: var(--lh-wh);
  border: 1px solid var(--lh-border-soft);
  border-radius: var(--lh-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}
.c-series-nav__label {
  font-family: var(--lh-ff-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--lh-bk);
  margin: 0 0 4px;
}
.c-series-nav__progress {
  font-size: 12px;
  color: var(--lh-cp);
  margin: 0 0 8px;
}
.c-series-nav__bar {
  height: 3px;
  background: var(--lh-bg2);
  border-radius: 2px;
  margin-bottom: 14px;
  overflow: hidden;
}
.c-series-nav__fill {
  height: 100%;
  background: var(--lh-ac);
  border-radius: 2px;
}
.c-series-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}
.c-series-nav__item {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--lh-br);
}
.c-series-nav__item:last-child { border-bottom: none; }
.c-series-nav__num {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lh-radius-sm);
  font-size: 12px;
  font-weight: 700;
  background: var(--lh-bg2);
  color: var(--lh-tx);
}
.c-series-nav__item--active .c-series-nav__num {
  background: var(--lh-ac);
  color: var(--lh-wh);
}
.c-series-nav__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--lh-tx);
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.c-series-nav__link:hover { color: var(--lh-ac); }
.c-series-nav__current {
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-bk);
  flex: 1;
  min-width: 0;
}
.c-series-nav__item .c-badge { margin-top: 2px; }

/* ---- Steps ---- */
.c-steps { margin-bottom: 32px; }
.c-steps__item {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--lh-br);
}
.c-steps__item:last-child { border-bottom: none; }
.c-steps__num {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lh-bk);
  color: var(--lh-wh);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
}
.c-steps__body { flex: 1; min-width: 0; }
.c-steps__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 4px 0 8px;
}
.c-steps__content {
  font-size: 15px;
  color: var(--lh-tx);
  line-height: 1.7;
}
.c-steps__content p { margin: 0 0 12px; }
.c-steps__content p:last-child { margin-bottom: 0; }

/* ---- Tinted Box (How X Compares, sibling comparison) ---- */
.c-tinted-box {
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 32px;
}
.c-tinted-box h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 8px;
}
.c-tinted-box p {
  font-size: 14px;
  color: var(--lh-tx);
  margin: 0 0 8px;
}
.c-tinted-box__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-tinted-box__link:hover { text-decoration: underline; }

/* ---- Choose Blocks (Comparison "Which Should You Use?") ---- */
.c-choose-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.c-choose-blocks__item {
  border: 1px solid var(--lh-br);
  border-left-width: 4px;
  border-radius: 0 8px 8px 0;
  padding: 20px;
}
.c-choose-blocks__item h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 8px;
}
.c-choose-blocks__item p {
  font-size: 14px;
  color: var(--lh-tx);
  margin: 0 0 10px;
}
.c-choose-blocks__item a {
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-choose-blocks__item a:hover { text-decoration: underline; }

/* ---- Comparison Cards ---- */
.c-comp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}
.c-comp-cards__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  color: var(--lh-tx);
  transition: border-color 0.2s;
}
.c-comp-cards__card:hover { border-color: var(--lh-ac); }
.c-comp-cards__card strong {
  font-size: 15px;
  color: var(--lh-bk);
}
.c-comp-cards__card span {
  font-size: 13px;
  color: var(--lh-cp);
}

/* ---- Disclosure ---- */
.c-disclosure {
  font-size: 12px;
  color: var(--lh-cp);
  font-style: italic;
  padding: 12px 0;
  border-top: 1px solid var(--lh-br);
  margin: 24px 0;
}

/* ---- Directory Question Cards ---- */
.c-dir-questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.c-dir-questions__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
}
.c-dir-questions__q {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
}
.c-dir-questions__desc {
  font-size: 13px;
  color: var(--lh-cp);
}
.c-dir-questions__action {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

/* ---- Template Actions ---- */
.c-tmpl-actions { margin-bottom: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.c-tmpl-actions__btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: var(--lh-radius-sm);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.c-tmpl-actions__btn--primary { background: var(--lh-ok); color: var(--lh-wh); }
.c-tmpl-actions__btn--primary:hover { opacity: 0.9; color: var(--lh-wh); }
.c-tmpl-actions__btn--secondary { background: var(--lh-ac); color: var(--lh-wh); }
.c-tmpl-actions__btn--secondary:hover { opacity: 0.9; color: var(--lh-wh); }

/* ---- Static Checklist (template includes) ---- */
.c-checklist-static { list-style: none; padding: 0; margin: 0; }
.c-checklist-static__item {
  padding: 8px 0 8px 28px;
  border-bottom: 1px solid var(--lh-br);
  position: relative;
  font-size: 14px;
  color: var(--lh-tx);
}
.c-checklist-static__item::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--lh-ok);
  font-weight: 700;
}

/* ---- Who Grid ---- */
.c-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-who-grid__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
}
.c-who-grid__item strong { font-size: 14px; color: var(--lh-bk); }
.c-who-grid__item span { font-size: 13px; color: var(--lh-cp); }

/* ---- Example Box ---- */
.c-example-box {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  margin-bottom: 16px;
}
.c-example-box h2 { font-size: 1.15rem; font-weight: 700; color: var(--lh-bk); margin: 24px 0 8px; }
.c-example-box h2:first-child { margin-top: 0; }
.c-example-box h3 { font-size: 1rem; font-weight: 700; color: var(--lh-bk); margin: 16px 0 8px; }
.c-example-box h3:first-child { margin-top: 0; }
.c-example-box p { margin: 0 0 12px; font-size: 14px; }
.c-example-box table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.c-example-box th { background: var(--lh-bg); text-align: left; padding: 8px 10px; font-weight: 600; border-bottom: 1px solid var(--lh-br); }
.c-example-box td { padding: 8px 10px; border-bottom: 1px solid var(--lh-br); }

/* ---- Interactive Checklist ---- */
.c-checklist-progress { margin-bottom: 20px; }
.c-checklist-progress__text { font-size: 13px; color: var(--lh-cp); display: block; margin-bottom: 6px; }
.c-checklist-progress__bar { height: 6px; background: var(--lh-br); border-radius: 3px; overflow: hidden; }
.c-checklist-progress__fill { height: 100%; background: var(--lh-ok); border-radius: 3px; transition: width 0.3s; width: 0%; }

.c-checklist { display: flex; flex-direction: column; }
.c-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lh-br);
  cursor: pointer;
  transition: opacity 0.2s;
}
.c-checklist__input { display: none; }
.c-checklist__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--lh-br);
  border-radius: 4px;
  margin-top: 2px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.c-checklist__input:checked ~ .c-checklist__check { background: var(--lh-ok); border-color: var(--lh-ok); }
.c-checklist__input:checked ~ .c-checklist__check::after {
  content: '\2713';
  position: absolute;
  top: -1px;
  left: 3px;
  color: var(--lh-wh);
  font-size: 13px;
  font-weight: 700;
}
.c-checklist__input:checked ~ .c-checklist__body { opacity: 0.5; }
.c-checklist__input:checked ~ .c-checklist__body .c-checklist__task { text-decoration: line-through; }
.c-checklist__body { flex: 1; min-width: 0; }
.c-checklist__task { display: block; font-size: 14px; font-weight: 600; color: var(--lh-bk); }
.c-checklist__desc { display: block; font-size: 13px; color: var(--lh-cp); margin-top: 2px; }

/* ---- Rating Badge ---- */
.c-rating {
  display: inline-block;
  background: var(--lh-bg);
  color: var(--lh-ac);
  font-size: 14px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---- Pros and Cons ---- */
.c-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.c-proscons__col { border-radius: var(--lh-radius-md); padding: 16px; }
.c-proscons__heading { font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.c-proscons__heading--pro { color: #1a7a4a; }
.c-proscons__heading--con { color: #b91c1c; }
.c-proscons__col:has(.c-proscons__heading--pro) {
  background: rgba(48, 164, 108, 0.06);
  border: 1px solid rgba(48, 164, 108, 0.15);
}
.c-proscons__col:has(.c-proscons__heading--con) {
  background: rgba(214, 48, 49, 0.04);
  border: 1px solid rgba(214, 48, 49, 0.12);
}
.c-proscons__list { list-style: none; margin: 0; padding: 0; }
.c-proscons__item {
  padding: 6px 0 6px 20px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
}
.c-proscons__item::before { position: absolute; left: 0; font-weight: 700; }
.c-proscons__item--pro::before { content: '+'; color: #1a7a4a; }
.c-proscons__item--con::before { content: '\2212'; color: #b91c1c; }

/* ---- Ranked List (listicles + alternatives) ---- */
.c-ranked-list { margin-bottom: 32px; }
.c-ranked-list__item {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  margin-bottom: 20px;
}
.c-ranked-list__item--top { border-color: var(--lh-ac); border-width: 2px; }
.c-ranked-list__rank {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--lh-bk); color: var(--lh-wh);
  border-radius: 50%; font-size: 15px; font-weight: 700;
}
.c-ranked-list__item--top .c-ranked-list__rank { background: var(--lh-ac); }
.c-ranked-list__body { flex: 1; min-width: 0; }
.c-ranked-list__header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.c-ranked-list__name { font-size: 16px; color: var(--lh-bk); }
.c-ranked-list__price { font-size: 13px; color: var(--lh-cp); }
.c-ranked-list__desc { font-size: 14px; color: var(--lh-fg); margin: 6px 0 0; }
.c-ranked-list__proscons { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; }
.c-ranked-list__pro { color: var(--lh-ok); }
.c-ranked-list__pro::before { content: '+ '; font-weight: 700; }
.c-ranked-list__con { color: var(--lh-er); }
.c-ranked-list__con::before { content: '\2212 '; font-weight: 700; }

/* ---- Enhanced Listicle Cards (v5.16.0) ---- */

/* H3 tool name (semantic upgrade from <strong>) */
h3.c-ranked-list__name {
  font-size: 17px;
  font-weight: 700;
  font-family: var(--lh-ff-heading);
  color: var(--lh-bk);
  margin: 0;
  line-height: 1.3;
}
h3.c-ranked-list__name a { color: inherit; text-decoration: none; }
h3.c-ranked-list__name a:hover { text-decoration: underline; }

/* Overview (25-50 word tool identity) */
.c-ranked-list__overview {
  font-size: 14px;
  color: var(--lh-fg);
  line-height: 1.7;
  margin-bottom: 14px;
}

/* Screenshot strip */
.c-ranked-list__media {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.c-ranked-list__media::-webkit-scrollbar { display: none; }
.c-ranked-list__thumb {
  flex: 1 1 calc(50% - 5px);
  min-width: 0;
  max-width: calc(50% - 5px);
  aspect-ratio: 16 / 10;
  border-radius: var(--lh-radius-md);
  border: 1px solid var(--lh-br);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--lh-bg2);
  transition: border-color 0.15s;
}
/* When 3+ thumbnails: shrink to fixed width and scroll */
.c-ranked-list__thumb:nth-child(n+3) {
  flex: 0 0 220px;
  max-width: 220px;
}
.c-ranked-list__thumb:hover { border-color: var(--lh-ac); }
.c-ranked-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.c-ranked-list__thumb-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  font-size: 11px;
  color: var(--lh-wh);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* YouTube video embed (v5.18.1) */
.c-ranked-list__video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  margin-bottom: 16px;
  border-radius: var(--lh-radius-md);
  overflow: hidden;
  background: var(--lh-bg2);
}
.c-ranked-list__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Verdict (editorial prose) */
.c-ranked-list__verdict {
  font-size: 14px;
  color: var(--lh-tx);
  line-height: 1.7;
  margin-bottom: 16px;
}
.c-ranked-list__verdict p { margin: 0 0 10px; }
.c-ranked-list__verdict p:last-child { margin: 0; }
.c-ranked-list__verdict strong { color: var(--lh-bk); font-weight: 600; }

/* Strengths / Limitations labels */
.c-ranked-list__proscons-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.c-ranked-list__proscons-label--ok { color: var(--lh-ok); }
.c-ranked-list__proscons-label--er { color: var(--lh-er); }

/* Recent Updates (collapsed) */
.c-ranked-list__updates {
  margin-top: 16px;
}
.c-ranked-list__updates-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lh-cp);
  cursor: pointer;
  background: var(--lh-bg);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-sm);
  padding: 6px 12px;
  font-family: var(--lh-ff);
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.c-ranked-list__updates-toggle:hover {
  background: var(--lh-bg2);
  border-color: var(--lh-cp);
  color: var(--lh-cp);
}
.c-ranked-list__updates-toggle:focus {
  outline: 2px solid var(--lh-ac);
  outline-offset: 2px;
  color: var(--lh-cp);
  background: var(--lh-bg);
}
.c-ranked-list__updates-toggle:active,
.c-ranked-list__updates-toggle:hover:active {
  color: var(--lh-cp);
  background: var(--lh-bg2);
}
.c-ranked-list__updates-toggle[aria-expanded="true"] {
  background: var(--lh-bg2);
  border-color: var(--lh-cp);
}
.c-ranked-list__updates-toggle svg {
  width: 10px;
  height: 10px;
  transition: transform 0.2s;
}
.c-ranked-list__updates-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.c-ranked-list__updates-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.c-ranked-list__updates-panel--open {
  max-height: 500px;
}
.c-ranked-list__updates-inner {
  padding-top: 12px;
}
.c-ranked-list__updates-intro {
  font-size: 13px;
  color: var(--lh-fg);
  line-height: 1.7;
  margin-bottom: 10px;
}
.c-ranked-list__updates-grid {
  border-top: 1px solid var(--lh-br);
}
.c-ranked-list__updates-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lh-br);
}
.c-ranked-list__updates-row:last-child { border-bottom: none; }
.c-ranked-list__updates-date {
  flex-shrink: 0;
  width: 96px;
  font-family: var(--lh-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--lh-cp);
}
.c-ranked-list__updates-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--lh-bk);
}
.c-ranked-list__updates-outro {
  font-size: 12px;
  color: var(--lh-cp);
  line-height: 1.5;
  margin-top: 8px;
}

/* Updates header with link (v5.17.0) */
.c-ranked-list__updates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.c-ranked-list__updates-all-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.c-ranked-list__updates-all-link:hover { text-decoration: underline; }
.c-ranked-list__updates-all-link svg { flex-shrink: 0; }

/* Footer links (review + manual links) */
.c-ranked-list__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lh-br);
  flex-wrap: wrap;
}
.c-ranked-list__footer .c-ranked-list__review-link {
  margin-top: 0;
}
.c-ranked-list__footer-sep {
  width: 1px;
  height: 14px;
  background: var(--lh-br);
  flex-shrink: 0;
}
.c-ranked-list__footer-link {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--lh-cp);
  text-decoration: none;
  transition: color 0.15s;
}
.c-ranked-list__footer-link:hover {
  color: var(--lh-bk);
  text-decoration: underline;
}

/* ---- Limitation List ---- */
.c-limit-list { list-style: none; padding: 0; margin: 0; }
.c-limit-list__item {
  padding: 8px 0 8px 24px;
  border-bottom: 1px solid var(--lh-br);
  font-size: 14px;
  color: var(--lh-tx);
  position: relative;
}
.c-limit-list__item::before { content: '\2717'; position: absolute; left: 0; color: var(--lh-er); font-weight: 700; }

/* ---- Entity List (subcategory hub children) ---- */
.c-entity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.c-entity-list__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-border-soft);
  border-radius: var(--lh-radius-lg);
  text-decoration: none;
  color: var(--lh-tx);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-entity-list__item:first-child { border-top: none; }
.c-entity-list__item:hover {
  border-color: var(--lh-br-hover);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  background: var(--lh-wh);
  text-decoration: none;
}
.c-entity-list__info { flex: 1; min-width: 0; }
.c-entity-list__name {
  display: block;
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
}
.c-entity-list__item:hover .c-entity-list__name { color: var(--lh-ac); }
.c-entity-list__desc {
  display: block;
  font-size: 14px;
  color: var(--lh-tx);
  margin-top: 4px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-entity-list__meta {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
  margin-top: auto;
}

/* ---- Auto-link ---- */
a.cplh-auto-link {
  color: var(--lh-ac);
  text-decoration: none;
  border-bottom: 1px dotted var(--lh-ac);
}
a.cplh-auto-link:hover { border-bottom-style: solid; }

/* ---- Filter Pills (Reference page) ---- */
.c-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.c-filter-pills__btn {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--lh-br);
  border-radius: 20px;
  background: var(--lh-wh);
  color: var(--lh-tx);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.c-filter-pills__btn:hover { border-color: var(--lh-ac); color: var(--lh-ac); }
.c-filter-pills__btn--active {
  background: var(--lh-ac);
  color: var(--lh-wh);
  border-color: var(--lh-ac);
}

/* ---- Inline Facts Bar (Example page) ---- */
.c-facts-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px;
  background: var(--lh-bg);
  border-radius: var(--lh-radius-sm);
  margin-bottom: 24px;
  font-size: 13px;
}
.c-facts-bar__item strong { color: var(--lh-bk); }

/* ---- Card Grid (Related roles 2x2) ---- */
.c-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.c-card-grid__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  color: var(--lh-tx);
  transition: border-color 0.15s;
}
.c-card-grid__card:hover { border-color: var(--lh-ac); }
.c-card-grid__card strong { color: var(--lh-bk); font-size: 14px; }
.c-card-grid__card span { font-size: 13px; color: var(--lh-cp); }

/* ---- Step Jump Links (Guide sidebar) ---- */
.c-step-jumps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.c-step-jumps li {
  counter-increment: step;
  margin-bottom: 6px;
}
.c-step-jumps li::before {
  content: counter(step) ".";
  display: inline-block;
  width: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lh-cp);
}
.c-step-jumps a {
  font-size: 13px;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-step-jumps a:hover { text-decoration: underline; }

/* Guide TOC (inline, above content) */
.c-guide-toc {
  background: var(--lh-bg);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.c-guide-toc__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6e6e82;
  margin: 0 0 10px;
}
.c-guide-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-step;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
.c-guide-toc__list li {
  counter-increment: toc-step;
}
.c-guide-toc__list li::before {
  content: counter(toc-step) ".";
  display: inline-block;
  width: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #6e6e82;
}
.c-guide-toc__list a {
  font-size: 14px;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-guide-toc__list a:hover { text-decoration: underline; }
.c-guide-toc__list { counter-reset: toc-step; }

/* ---- Template Hero (green tinted) ---- */
.c-tmpl-hero {
  background: rgba(0, 184, 148, 0.04);
  border-left: 4px solid rgba(0, 184, 148, 0.3);
  padding: 24px 28px 28px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 28px;
}
.c-tmpl-hero__desc {
  font-size: 15px;
  color: var(--lh-tx);
  margin: 8px 0 16px;
}
.c-tmpl-hero__preview {
  max-width: 100%;
  border-radius: var(--lh-radius-sm);
  border: 1px solid var(--lh-br);
  margin-top: 16px;
}

/* ---- Two Column Layout (Role responsibilities + skills) ---- */
.c-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.c-two-col h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 10px;
}

/* ---- Tool Hero Row ---- */
.c-tool-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.c-tool-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.c-rating--large {
  font-size: 18px;
  font-weight: 700;
}
.c-tool-hero__price {
  font-size: 14px;
  color: var(--lh-cp);
  font-weight: 500;
}

/* ---- Image Gallery (Glossary identification images) ---- */
.c-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.c-image-gallery__item {
  margin: 0;
}
.c-image-gallery__item img {
  width: 100%;
  border-radius: var(--lh-radius-sm);
  border: 1px solid var(--lh-br);
}
.c-image-gallery__item figcaption {
  font-size: 12px;
  color: var(--lh-cp);
  margin-top: 6px;
  text-align: center;
}

/* ---- Output Summary Card (Example page) ---- */
.c-output-summary {
  background: var(--lh-bg);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.c-output-summary__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lh-cp);
  margin-bottom: 6px;
}
.c-output-summary__text {
  font-size: 15px;
  font-weight: 600;
  color: var(--lh-bk);
  margin: 0;
}

/* ---- Flow Diagram (Workflow visual stage diagram) ---- */
.c-flow-diagram {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.c-flow-diagram__stage {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  background: var(--lh-wh);
}
.c-flow-diagram__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lh-bg);
  font-size: 12px;
  font-weight: 700;
  color: var(--lh-cp);
  flex-shrink: 0;
}
.c-flow-diagram__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-bk);
}
.c-flow-diagram__arrow {
  color: var(--lh-cp);
  font-size: 18px;
}

/* ---- ClickUp Tip Callout (in guide steps content) ---- */
.c-clickup-tip {
  background: rgba(0, 184, 148, 0.06);
  border-left: 3px solid #00b894;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin: 12px 0;
  font-size: 13px;
}
.c-clickup-tip strong {
  color: #00b894;
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---- Responsive ---- */
/* Layout B/A collapse is handled at 1024px (FIX #2 section) */

/* ---- WP Admin Bar offset ---- */
.admin-bar .c-layout-b__sidebar,
.admin-bar .c-layout-a__sidebar { top: 112px; }

/* ---- CSS FIXES (batch) ---- */

/* Template hero: ensure buttons are visible and styled */
.c-tmpl-hero .c-tmpl-actions__btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--lh-radius-sm);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

/* Resource roundup: author on separate line, card spacing */
.c-ranked-list__body > span[style*="font-size:13px"] {
  display: block;
  margin-top: 2px;
  margin-bottom: 4px;
}

/* Ranked list cards: more defined borders and spacing */
.c-ranked-list__item {
  padding: 20px;
  border-radius: var(--lh-radius-md);
}

.c-ranked-list__proscons {
  gap: 20px;
  padding-top: 8px;
  border-top: 1px solid var(--lh-br);
}

/* Ensure all tables within prose match c-table styling */
.c-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 20px;
}
.c-prose table thead {
  background: var(--lh-bk);
  color: var(--lh-wh);
}
.c-prose table th,
.c-prose table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--lh-br);
}
.c-prose table th {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.c-prose table tbody tr:nth-child(even) {
  background: var(--lh-bg);
}

/* ---- Ranked List Author (Resource Roundup) ---- */
.c-ranked-list__author {
  font-size: 13px;
  color: var(--lh-cp);
  margin: 2px 0 6px;
}
.c-ranked-list__bestfor {
  margin: 4px 0 6px;
}

/* Sidebar section spacing fix */
.c-layout-b__sidebar .c-sidebar-facts + .c-sidebar-facts,
.c-layout-b__sidebar .c-sidebar-facts + .c-sidebar-cta,
.c-layout-a__sidebar .c-sidebar-facts + .c-sidebar-facts,
.c-layout-a__sidebar .c-sidebar-facts + .c-sidebar-cta,
.c-layout-a__sidebar .c-series-nav + .c-sidebar-facts,
.c-layout-a__sidebar .c-series-nav + .c-sidebar-cta {
  margin-top: 20px;
}
.c-layout-b__sidebar .c-sidebar-salary + .c-sidebar-facts {
  margin-top: 20px;
}

/* Page date */
.c-page__date {
  display: block;
  font-size: 13px;
  color: var(--lh-cp);
  margin-top: -4px;
  margin-bottom: 16px;
}

/* Expandable / progressive disclosure (glossary AI section, etc.) */
.c-expandable {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  margin-bottom: 20px;
  overflow: hidden;
}
.c-expandable__trigger {
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lh-bk);
  cursor: pointer;
  list-style: none;
  background: var(--lh-bg);
}
.c-expandable__trigger::-webkit-details-marker { display: none; }
.c-expandable__trigger::before {
  content: '+ ';
  color: var(--lh-ac);
  font-weight: 700;
}
.c-expandable[open] .c-expandable__trigger::before { content: '− '; }
.c-expandable__content {
  padding: 0 18px 16px;
}

/* ============================================
   CUSTOM HEADER (Logo + Topic Switcher + Nav)
   ============================================ */

/* Override ALL GP link styles within the header */
.cplh-header a,
.cplh-header a:hover,
.cplh-header a:focus,
.cplh-header a:active,
.cplh-header a:visited,
.cplh-header button,
.cplh-header button:hover,
.cplh-header button:focus {
  text-decoration: none !important;
}

.cplh-header {
  background: var(--lh-wh);
  border-bottom: 1px solid var(--lh-br);
  padding: 0 24px;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-sizing: border-box;
  line-height: 1;
}
.admin-bar .cplh-header { top: 32px; }
.cplh-header__inner {
  max-width: var(--lh-hdr-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  gap: 16px;
  padding: 0;
}

/* --- Left side: Logo + Topic Switcher --- */
.cplh-header__left {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.cplh-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.cplh-header__logo-img {
  height: 22px;
  width: auto;
  display: block;
}
.cplh-header__hub-badge {
  font-family: var(--lh-ff-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--lh-ac);
  background: rgba(102, 71, 240, 0.08);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.cplh-header__logo:hover .cplh-header__hub-badge {
  background: rgba(102, 71, 240, 0.14);
}

/* Separator between logo and topic */
.cplh-header__sep {
  width: 1px;
  height: 24px;
  background: var(--lh-br);
  margin: 0 16px;
  flex-shrink: 0;
}

/* --- Topic Switcher --- */
.cplh-header__topic-switcher {
  position: relative;
}
.cplh-header__topic-btn {
  background: none !important;
  border: 1px solid transparent !important;
  color: var(--lh-bk) !important;
  padding: 6px 10px;
  border-radius: var(--lh-radius-md);
  font-family: var(--lh-ff);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.cplh-header__topic-btn:hover,
.cplh-header__topic-btn:focus,
.cplh-header__topic-btn:active {
  background: var(--lh-bg) !important;
  border-color: var(--lh-br) !important;
  color: var(--lh-bk) !important;
}
.cplh-header__chevron {
  transition: transform 0.2s;
  opacity: 0.5;
}
.cplh-header__topic-btn[aria-expanded="true"] .cplh-header__chevron {
  transform: rotate(180deg);
}

/* Topic dropdown panel */
.cplh-header__topic-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  z-index: 1001;
}
.cplh-header__topic-dropdown > :first-child,
.cplh-header__topic-dropdown::before { content: none; }
.cplh-header__topic-switcher:hover .cplh-header__topic-dropdown,
.cplh-header__topic-btn[aria-expanded="true"] + .cplh-header__topic-dropdown {
  display: block;
}
.cplh-header__topic-panel {
  background: var(--lh-wh);
  border-radius: var(--lh-radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
  padding: 8px;
  width: 340px;
}
.cplh-header__topic-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--lh-radius-md);
  color: #3d3d56 !important;
  text-decoration: none !important;
  transition: background 0.15s;
}
.cplh-header__topic-item:hover {
  background: var(--lh-bg);
  color: #3d3d56 !important;
  text-decoration: none !important;
}
.cplh-header__topic-item:focus {
  color: #3d3d56 !important;
  text-decoration: none !important;
}
.cplh-header__topic-item--active {
  background: rgba(108, 92, 231, 0.06);
}
.cplh-header__topic-item > svg {
  flex-shrink: 0;
  margin-left: auto;
}
.cplh-header__domain-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.cplh-header__domain-ico svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
  margin: 0;
}
.cplh-header__domain-ico--sm {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.cplh-header__domain-ico--sm svg {
  width: 10px;
  height: 10px;
  display: block;
  margin: 0;
}
.cplh-header__topic-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cplh-header__topic-item-text strong {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e !important;
}
.cplh-header__topic-item-text span {
  font-size: 12px;
  color: #6e6e82 !important;
  line-height: 1.3;
}

/* --- Right side: Section nav with dropdowns --- */
.cplh-header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
.cplh-header__nav-item {
  position: relative;
}
.cplh-header__nav-link {
  font-size: 14px;
  font-weight: 400;
  color: #6e6e82 !important;
  text-decoration: none !important;
  padding: 6px 12px;
  border-radius: var(--lh-radius-sm);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cplh-header__nav-link:hover,
.cplh-header__nav-link:focus {
  background: var(--lh-bg);
  color: #1a1a2e !important;
  text-decoration: none !important;
}
.cplh-header__nav-link--active {
  background: rgba(108, 92, 231, 0.08);
  color: #6C5CE7 !important;
}
.cplh-header__nav-chevron {
  opacity: 0.4;
  flex-shrink: 0;
}

/* ---- Mega-menu trigger ---- */
.cplh-header__mega-item {
  position: static;
}
.cplh-header__mega-trigger {
  font-size: 14px;
  font-weight: 500;
  color: #6e6e82;
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: var(--lh-radius-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--lh-ff);
}
.cplh-header__mega-trigger:hover,
.cplh-header__mega-trigger[aria-expanded="true"] {
  background: var(--lh-bg);
  color: #1a1a2e;
}

/* ---- Mega-menu panel (full-width, anchored to header) ---- */
.cplh-header__mega-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--lh-wh);
  border-bottom: 1px solid var(--lh-br);
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
.cplh-header__mega-trigger[aria-expanded="true"] + .cplh-header__mega-panel {
  display: block;
}
.cplh-header__mega-cols {
  max-width: var(--lh-cnt-w);
  margin: 0 auto;
  padding: 32px 32px 28px;
  display: grid;
  gap: 8px 48px;
}
/* 3 columns: Concepts-style */
.cplh-header__mega-cols[data-mode="cols-3"] {
  grid-template-columns: 1fr 1fr 1fr;
}
/* 2 columns: Careers-style, centered + tighter */
.cplh-header__mega-cols[data-mode="cols-2"] {
  grid-template-columns: 1fr 1fr;
  max-width: 720px;
}
/* 1 column without featured card: centered, narrow */
.cplh-header__mega-cols[data-mode="cols-1"] {
  grid-template-columns: 1fr;
  max-width: 420px;
}
/* 1 column WITH featured card: link list + featured card side by side */
.cplh-header__mega-cols[data-mode="cols-1-feat"] {
  grid-template-columns: 1fr 320px;
  max-width: 900px;
  gap: 8px 40px;
  align-items: start;
}
/* When a 1-col-feat layout has the links column, render links in 2 sub-columns
   so a 5-10 item list fills the space comfortably. */
.cplh-header__mega-cols[data-mode="cols-1-feat"] .cplh-header__mega-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
  gap: 0 24px;
  align-content: start;
}
.cplh-header__mega-cols[data-mode="cols-1-feat"] .cplh-header__mega-col-title {
  grid-column: 1 / -1;
}
.cplh-header__mega-cols[data-mode="cols-1-feat"] .cplh-header__mega-viewall {
  grid-column: 1 / -1;
}
.cplh-header__mega-col {
  padding: 0 0 0 16px;
  border-left: 2px solid #f0f0f0;
}
.cplh-header__mega-col:first-child {
  border-left: none;
  padding-left: 0;
}
/* In cols-1-feat, the featured card is its own grid item — don't treat the link
   col as "first" for border purposes */
.cplh-header__mega-cols[data-mode="cols-1-feat"] .cplh-header__mega-col {
  border-left: none;
  padding-left: 0;
}
/* 2 columns WITH featured card: link columns + card as right rail */
.cplh-header__mega-cols[data-mode="cols-2-feat"] {
  grid-template-columns: 1fr 1fr 320px;
  max-width: var(--lh-cnt-w);
  gap: 8px 40px;
  align-items: start;
}
/* 3 columns WITH featured card: link columns + card as right rail */
.cplh-header__mega-cols[data-mode="cols-3-feat"] {
  grid-template-columns: 1fr 1fr 1fr 320px;
  max-width: var(--lh-cnt-w);
  gap: 8px 40px;
  align-items: start;
}
.cplh-header__mega-col-title {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a1a1aa;
  margin-bottom: 4px;
}
.cplh-header__mega-col-desc {
  display: none;
}
.cplh-header__mega-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px;
  border-radius: var(--lh-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: #3d3d56 !important;
  text-decoration: none !important;
  transition: background 0.12s;
}
.cplh-header__mega-link:hover {
  background: var(--lh-bg);
  color: #1a1a2e !important;
  text-decoration: none !important;
}
.cplh-header__mega-link-title {
  /* No truncation: titles wrap naturally */
}
.cplh-header__mega-link-count {
  font-family: var(--lh-mono);
  font-size: 10px;
  color: #a1a1aa;
  flex-shrink: 0;
  margin-left: 8px;
}
.cplh-header__mega-viewall {
  display: block;
  padding: 8px 8px 4px;
  margin-top: 6px;
  border-top: 1px solid #f3f3f3;
  font-size: 13px;
  font-weight: 500;
  color: #6C5CE7 !important;
  text-decoration: none !important;
}
.cplh-header__mega-viewall:hover {
  color: #534AB7 !important;
  text-decoration: none !important;
}

/* ═══ FEATURED CARD (1-col-feat layout only) ═══ */
.cplh-header__mega-featured {
  position: relative;
  display: block;
  background: linear-gradient(155deg, #14141a 0%, #1f1f27 60%, #282836 100%);
  border-radius: var(--lh-radius-lg);
  padding: 22px 22px 20px;
  color: var(--lh-wh) !important;
  overflow: hidden;
  text-decoration: none !important;
  min-height: 240px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.cplh-header__mega-featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(20, 20, 26, 0.25);
  color: var(--lh-wh) !important;
  text-decoration: none !important;
}
.cplh-header__mega-featured::before {
  content: "";
  position: absolute;
  inset: -40px auto auto -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.32), transparent 70%);
  pointer-events: none;
}
.cplh-header__mega-featured::after {
  content: "";
  position: absolute;
  inset: auto -60px -60px auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.16), transparent 70%);
  pointer-events: none;
}
.cplh-header__mega-featured-eyebrow {
  position: relative;
  display: block;
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 12px;
}
.cplh-header__mega-featured-title {
  position: relative;
  font-family: var(--lh-ff-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--lh-wh);
  margin: 0 0 10px;
}
.cplh-header__mega-featured-desc {
  position: relative;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 18px;
}
.cplh-header__mega-featured-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-wh);
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--lh-radius-md);
  transition: background 0.15s;
}
.cplh-header__mega-featured:hover .cplh-header__mega-featured-cta {
  background: rgba(255, 255, 255, 0.18);
}
.cplh-header__mega-footer {
  max-width: var(--lh-hdr-w);
  margin: 0 auto;
  display: flex;
  gap: 16px;
  padding: 12px 24px 16px;
  border-top: 1px solid #f3f3f3;
}
.cplh-header__mega-footer-link {
  font-size: 13px;
  font-weight: 500;
  color: #6C5CE7 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.cplh-header__mega-footer-link:hover {
  color: #534AB7 !important;
}

/* Hub page: Browse Topics button in right position */
.cplh-header__topic-switcher--hub {
  margin-left: auto;
}
.cplh-header__topic-switcher--hub .cplh-header__topic-dropdown {
  left: auto;
  right: 0;
  width: 340px;
}

/* --- Spacing below header --- */
/* Removed: padding-top: 24px was exposing the white body background
   between the sticky header and the var(--lh-bg) header-band.
   The header-band's own padding (36px 0 32px) provides adequate spacing. */

/* --- Responsive --- */

/* ============================================
   CUSTOM FOOTER (Dark)
   ============================================ */
/* ---- Footer (v5.1.0: blog-style white) ---- */
.cplh-footer {
  background: var(--lh-wh);
  border-top: 1px solid var(--lh-br);
  color: var(--lh-tx);
  padding: 0;
  margin-top: 0;
  clear: both;
  display: block;
  overflow-x: hidden;
}
.cplh-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 32px;
}

/* Trust strip */
.cplh-footer__trust {
  max-width: var(--lh-cnt-w);
  margin: 0 auto;
  padding: 40px 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cplh-footer__logo-img {
  height: 18px;
  width: auto;
}
.cplh-footer__hub-badge {
  background: rgba(102,71,240,0.08);
  color: var(--lh-ac);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  font-family: var(--lh-ff-heading);
}
.cplh-footer__tagline {
  color: #838383;
  font-size: 13px;
  margin-left: 8px;
}

/* 3-column nav */
.cplh-footer__nav {
  max-width: var(--lh-cnt-w);
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
}
/* G-004: 4-column footer variant */
.cplh-footer__nav--4col {
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.cplh-footer__nav--3col {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.cplh-footer__heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 12px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--lh-ff-heading);
}
.cplh-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cplh-footer__links li { margin-bottom: 6px; }
.cplh-footer__links a {
  color: #838383;
  text-decoration: none;
  font-size: 13px;
}
.cplh-footer__links a:hover { color: var(--lh-bk); text-decoration: none; }
.cplh-footer__link-placeholder {
  color: #ccc;
  font-size: 13px;
}

/* Divider */
.cplh-footer__divider {
  max-width: var(--lh-cnt-w);
  margin: 0 auto;
  padding: 0 24px;
  border: none;
}
.cplh-footer__divider::after {
  content: '';
  display: block;
  border-top: 1px solid var(--lh-br);
}

/* Copyright row */
.cplh-footer__copyright {
  max-width: var(--lh-cnt-w);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cplh-footer__social {
  display: flex;
  gap: 12px;
}
.cplh-footer__social-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #838383;
  border: 1px solid var(--lh-br);
  text-decoration: none;
  cursor: pointer;
}
.cplh-footer__social-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.cplh-footer__social-icon:hover {
  color: var(--lh-bk);
  border-color: var(--lh-cp);
  text-decoration: none;
}
.cplh-footer__legal {
  font-size: 13px;
  color: #838383;
  display: flex;
  gap: 16px;
  align-items: center;
}
.cplh-footer__legal a {
  color: #838383;
  text-decoration: none;
}
.cplh-footer__legal a:hover { color: var(--lh-bk); text-decoration: none; }

/* Rating bar */
.cplh-footer__rating {
  /* border moved to contained inner */
}
.cplh-footer__rating-inner {
  max-width: var(--lh-cnt-w);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--lh-br);
}
.cplh-footer__stars {
  display: flex;
  gap: 2px;
}
.cplh-footer__rating-score {
  font-size: 14px;
  font-weight: 700;
  color: var(--lh-bk);
}
.cplh-footer__rating-sep {
  color: #ccc;
}
.cplh-footer__rating-count {
  font-size: 13px;
  color: #838383;
}
.cplh-footer__rating-source {
  font-size: 13px;
  color: #838383;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cplh-footer__rating-source:hover { color: var(--lh-bk); }

/* ============================================
   GENERATEPRESS INTEGRATION
   GP header hidden on Learn Hub pages.
   Learn Hub header is the primary navigation.
   GP footer hidden (Learn Hub has its own).
   ============================================ */

/* Hide GP/GB header on Learn Hub pages */
body.single-learn .gb-site-header,
body.single-learn .site-header,
body.single-learn .main-navigation,
body.cplh-hub-page .gb-site-header,
body.cplh-hub-page .site-header,
body.cplh-hub-page .main-navigation {
  display: none !important;
}

/* Hide GP post metadata elements we don't use */
body.single-learn .site-info,
body.single-learn .top-bar,
body.single-learn .page-header,
body.single-learn .entry-header,
body.single-learn .entry-meta {
  display: none !important;
}

/* Hide GP footer shell (our footer renders via wp_footer) */
body.single-learn .site-footer:not(.cplh-footer),
body.cplh-hub-page .site-footer:not(.cplh-footer) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Zero padding on GP containers (full-width-content handles width) */
body.single-learn .inside-article,
body.single-learn .site-content,
body.single-learn #page,
body.single-learn article.post,
body.single-learn .entry-content,
body.single-learn #content {
  padding: 0 !important;
  margin-top: 0 !important;
  background: var(--lh-wh) !important;
}
/* Override GP's flex layout on site-content so our content centers properly */
body.single-learn .site-content,
body.cplh-hub-page .site-content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* White background on learn pages */
body.single-learn,
body.cplh-hub-page {
  background: var(--lh-wh) !important;
}

/* Wrapper constrains content width */
.cplh-wrap {
  max-width: var(--lh-hdr-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   AUTHOR BOX
   ============================================ */
.c-author-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: var(--lh-radius-md);
  margin-bottom: 24px;
  font-size: 14px;
}
.c-author-box__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-author-box__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6e6e82;
  font-weight: 600;
}
.c-author-box__name {
  font-size: 14px;
  color: #1a1a2e;
}
.c-author-box__title {
  font-size: 13px;
  color: #6e6e82;
}
.c-author-box__methodology {
  font-size: 13px;
  color: var(--lh-tx);
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--lh-br);
  line-height: 1.5;
}

/* ============================================
   HOW IT COMPARES (comparison discovery)
   ============================================ */
.c-how-compares {
  border-left: 3px solid #6C5CE7;
  background: rgba(108, 92, 231, 0.03);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.c-how-compares__title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 12px;
}
.c-how-compares__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-how-compares__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--lh-radius-sm);
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-how-compares__item:hover {
  border-color: #6C5CE7;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.1);
  text-decoration: none;
}
.c-how-compares__item strong {
  font-size: 14px;
  color: #1a1a2e;
}
.c-how-compares__item span {
  font-size: 13px;
  color: #6e6e82;
}

/* ============================================
   AFFILIATION DISCLOSURE (standardized)
   ============================================ */
/* Base .c-disclosure definition is at the Disclosure section above (border-top, italic) */
.c-disclosure__text {
  font-size: 13px;
  color: #6e6e82;
  line-height: 1.7;
  margin: 0;
}

/* ============================================
   INLINE FACTS (for Layout A templates
   that moved from Layout B and lost sidebar facts)
   ============================================ */
.c-inline-facts {
  background: #f8f9fa;
  border-radius: var(--lh-radius-md);
  padding: 14px 18px;
  margin-bottom: 24px;
}
.c-inline-facts__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px 24px;
  margin: 0;
}
.c-inline-facts__list dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6e6e82;
  font-weight: 600;
  margin: 0;
  padding-top: 6px;
}
.c-inline-facts__list dd {
  font-size: 14px;
  color: #1a1a2e;
  font-weight: 500;
  margin: 0 0 2px;
}

/* ============================================
   A-Z ALPHABET FILTER BAR
   Used on subcategory hub pages for sortable entity lists
   ============================================ */
.c-az-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  align-items: center;
}
.c-az-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--lh-br) !important;
  background: #FFFFFF !important;
  font-family: var(--lh-ff) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--lh-tx) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: border-color 0.15s, color 0.15s;
  line-height: 1;
}
.c-az-btn:hover {
  border-color: var(--lh-ac) !important;
  color: var(--lh-ac) !important;
}
.c-az-btn.is-active {
  background: var(--lh-ac) !important;
  color: #FFFFFF !important;
  border-color: var(--lh-ac) !important;
}
.c-az-btn--all {
  min-width: auto !important;
  padding: 0 12px !important;
}
.c-az-btn--disabled,
.c-az-btn[disabled] {
  opacity: 0.3 !important;
  pointer-events: none !important;
}
.c-az-results {
  font-size: 13px;
  color: var(--lh-cp);
  margin-bottom: 20px;
}

/* Entity cards in A-Z grid */
.c-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
a.c-entity-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-border-soft);
  border-radius: var(--lh-radius-lg);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-entity-card:hover {
  border-color: var(--lh-br-hover);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  text-decoration: none;
}
.c-entity-card__title {
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
}
.c-entity-card__def {
  font-size: 14px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-entity-card__footer {
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  margin-top: auto;
}

/* ============================================
   CATEGORY FILTER PILLS
   Matches theme glossary category style
   ============================================ */
.c-cat-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--lh-br);
  flex-wrap: wrap;
}
.c-cat-filter__label {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lh-cp);
  flex-shrink: 0;
}
.c-cat-filter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.c-cat-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  border: 1px solid var(--lh-br) !important;
  background: var(--lh-wh) !important;
  font-family: var(--lh-ff) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--lh-bk) !important;
  cursor: pointer !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1;
  white-space: nowrap;
}
.c-cat-pill:hover {
  border-color: var(--lh-br-hover) !important;
}
.c-cat-pill.is-active {
  background: var(--lh-ac) !important;
  color: var(--lh-wh) !important;
  border-color: var(--lh-ac) !important;
}

/* ── v4.5.4 fixes ──────────────────────────────────────────── */

/* Vertical divider between content and right sidebar */
.c-layout-b__content {
  border-right: 1px solid var(--lh-br-light);
  padding-right: 40px;
}


/* ── Step Overview (guide template) — compact list ──── */
.c-step-overview {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.c-step-overview__item {
  border-bottom: 1px solid var(--lh-br-light);
}
.c-step-overview__item:last-child { border-bottom: none; }
.c-step-overview__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--lh-bk);
  transition: color 0.15s;
}
.c-step-overview__link:hover { color: var(--lh-ac); }
.c-step-overview__num {
  width: 22px;
  height: 22px;
  border-radius: var(--lh-radius-sm);
  background: var(--lh-ac);
  color: var(--lh-wh);
  font-family: var(--lh-ff-heading);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.c-step-overview__text { flex: 1; }
.c-step-overview__text strong {
  display: inline;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
/* Description hidden — compact mode */
.c-step-overview__desc {
  display: none;
}

/* ── v4.5.7 Audit Fixes ─────────────────────────────────── */

/* Fix #2: First H2 alignment — reduce top gap after header */
.c-layout-b__content > h2:first-child,
.c-layout-b__content > .c-section:first-child h2,
.c-layout-a__content > h2:first-child,
.c-layout-a__content > .c-section:first-child h2 {
  margin-top: 0;
}

/* Fix #5: Template preview card */
.c-template-card {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  overflow: hidden;
  margin-bottom: 28px;
}
.c-template-card__preview {
  background: #F5F5F5;
  padding: 2rem;
  text-align: center;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-template-card__preview img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: var(--lh-radius-md);
}
.c-template-card__placeholder {
  color: var(--lh-cp);
  font-size: 14px;
  font-family: var(--lh-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.c-template-card__body {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.c-template-card__meta {
  font-size: 13px;
  color: var(--lh-cp);
  display: flex;
  align-items: center;
  gap: 8px;
}
.c-template-card__format {
  font-family: var(--lh-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--lh-bg2);
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--lh-tx);
}
.c-template-card__cta a {
  display: inline-block;
  background: var(--lh-bk);
  color: var(--lh-wh);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  white-space: nowrap;
}
.c-template-card__cta a:hover { opacity: 0.9; }

/* ── Template Gallery (collection mode) ── */
.c-template-gallery { margin-bottom: 32px; }
.c-template-gallery__card {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
  scroll-margin-top: 80px;
}
.c-template-gallery__card:first-child {
  border-color: var(--lh-ac);
  border-width: 2px;
}
.c-template-gallery__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.c-template-gallery__rank {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lh-bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--lh-bk);
}
.c-template-gallery__card:first-child .c-template-gallery__rank {
  background: var(--lh-ac);
  color: var(--lh-wh);
}
.c-template-gallery__title-group { flex: 1; min-width: 0; }
.c-template-gallery__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--lh-bk);
  margin: 0 0 4px;
}
.c-template-gallery__cta {
  flex-shrink: 0;
  display: inline-block;
  background: var(--lh-bk);
  color: var(--lh-wh) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--lh-radius-md);
  text-decoration: none !important;
  white-space: nowrap;
}
.c-template-gallery__cta:hover { opacity: 0.9; color: var(--lh-wh) !important; text-decoration: none !important; }
.c-template-gallery__preview {
  background: #F5F5F5;
  border-radius: var(--lh-radius-md);
  padding: 1rem;
  text-align: center;
  margin-bottom: 12px;
}
.c-template-gallery__preview img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: var(--lh-radius-sm);
}
.c-template-gallery__desc {
  font-size: 14px;
  color: var(--lh-tx);
  line-height: 1.7;
  margin: 0 0 12px;
}
.c-template-gallery__includes {
  border-top: 1px solid var(--lh-br);
  padding-top: 12px;
  margin-top: 4px;
}
.c-template-gallery__includes-label {
  font-family: var(--lh-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lh-cp);
  display: block;
  margin-bottom: 6px;
}
.c-template-gallery__includes .c-checklist-static li {
  font-size: 13px;
  padding: 2px 0 2px 28px;
}
.c-template-gallery__includes .c-checklist-static li:last-child {
  border-bottom: none;
}

/* Fix #6: Example content frame — visual treatments */
.c-example-frame {
  border: none;
  border-radius: 4px;
  padding: 32px 36px;
  margin: 20px 0 28px;
  background: #FDFCF8;
  box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  position: relative;
}
/* Paper: cream background, subtle shadow (default) */
.c-example-frame--paper {
  background: #FDFCF8;
}
/* Plain: white card with border */
.c-example-frame--plain {
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
}
/* Screen: browser chrome look */
.c-example-frame--screen {
  background: var(--lh-wh);
  border: 1px solid #D4D4D4;
  border-radius: var(--lh-radius-md);
  padding: 0;
  overflow: hidden;
}
.c-example-frame--screen .c-example-box {
  padding: 28px 32px;
}
/* Browser chrome bar */
.c-example-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
}
.c-example-chrome__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.c-example-chrome__dot--red { background: #FF5F57; }
.c-example-chrome__dot--yellow { background: #FFBD2E; }
.c-example-chrome__dot--green { background: #28C840; }
.c-example-chrome__url {
  margin-left: 10px;
  padding: 3px 10px;
  background: var(--lh-wh);
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  font-family: var(--lh-mono);
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}
.c-example-frame__label {
  font-family: var(--lh-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lh-cp);
  margin-bottom: 16px;
  display: block;
}

/* Methodology callout block (listicle) */
.c-methodology {
  background: var(--lh-bg);
  border-radius: var(--lh-radius-lg);
  padding: 20px 24px;
  margin-bottom: 28px;
}
.c-methodology__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.c-methodology__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--lh-radius-sm);
  background: var(--lh-ac);
  color: var(--lh-wh);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.c-methodology__title {
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
}
.c-methodology p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--lh-tx);
  margin: 0;
}

/* Scenario recommendations (listicle) */
.c-scenario-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lh-br-light);
  font-size: 14px;
}
.c-scenario-row:last-child { border-bottom: none; }
.c-scenario-label {
  font-weight: 600;
  color: var(--lh-bk);
  min-width: 170px;
  flex-shrink: 0;
}
.c-scenario-pick {
  color: var(--lh-ac);
  font-weight: 600;
}

/* Fix #10: Role skills bar indicators */
.c-skill-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--lh-br-light);
}
.c-skill-row:last-child { border-bottom: none; }
.c-skill-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
  min-width: 160px;
  flex-shrink: 0;
}
.c-skill-bar {
  flex: 1;
  height: 6px;
  background: var(--lh-bg2);
  border-radius: 3px;
  overflow: hidden;
}
.c-skill-bar__fill {
  height: 100%;
  border-radius: 3px;
}
.c-skill-bar__fill--critical { width: 100%; background: var(--lh-ac); }
.c-skill-bar__fill--high { width: 75%; background: #9B8AF8; }
.c-skill-bar__fill--medium { width: 50%; background: #D4D0F0; }
/* c-skill-level moved to v5.0.0 BEM components section */

/* Role responsibilities with left accent */
.c-role-responsibilities {
  border-left: 3px solid var(--lh-ac);
  padding-left: 20px;
  margin-bottom: 24px;
}
.c-role-responsibilities li {
  list-style: none;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--lh-tx);
}

/* Template includes as key-value grid */
.c-template-includes__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lh-br-light);
  font-size: 14px;
}
.c-template-includes__item:last-child { border-bottom: none; }
.c-template-includes__label {
  font-weight: 600;
  color: var(--lh-bk);
}
.c-template-includes__desc {
  color: var(--lh-cp);
}

/* Ranked list links row */
.c-ranked-list__links {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
}

/* Best-for badge on ranked items */
.c-badge--bestfor {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 99px;
  background: #F5F3FF;
  color: var(--lh-ac);
  margin-bottom: 2px;
}

/* Mobile adjustments for new components */

/* ── Domain Directory Redesign (v4.5.7) ────────────────── */

/* Intent pathfinding grid */
.c-intent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.c-intent-card {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  padding: 16px 20px;
  text-decoration: none;
  color: var(--lh-bk);
  display: block;
  transition: border-color 0.15s, box-shadow 0.25s, transform 0.25s;
}
.c-intent-card:hover {
  border-color: #D4D0F0;
  box-shadow: 0 4px 12px rgba(102,71,240,.06);
  text-decoration: none;
}
.c-intent-card__icon {
  width: 36px; height: 36px; border-radius: var(--lh-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 12px;
}
.c-intent-card__icon--purple { background: #F5F3FF; }
.c-intent-card__icon--green { background: #E6F9EE; }
.c-intent-card__icon--blue { background: #E8F4FD; }
.c-intent-card__icon--orange { background: #FFF3E6; }
.c-intent-card__icon--teal { background: #E6F7F5; }
.c-intent-card__icon--pink { background: #FDE8F0; }
.c-intent-card__title {
  font-family: var(--lh-ff-heading);
  font-size: 16px; font-weight: 700; color: var(--lh-bk); margin-bottom: 4px;
}
.c-intent-card__desc { font-size: 13px; color: var(--lh-cp); line-height: 1.5; margin-bottom: 6px; }
.c-intent-card__action {
  font-size: 13px; font-weight: 600; color: var(--lh-ac);
}

/* Hub preview cards */
.c-hub-preview {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  padding: 20px 24px;
  margin-bottom: 14px;
}
.c-hub-preview__header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.c-hub-preview__title {
  font-family: var(--lh-ff-heading);
  font-size: 17px; font-weight: 700; color: var(--lh-bk);
}
.c-hub-preview__title a { color: var(--lh-bk); text-decoration: none; }
.c-hub-preview__title a:hover { color: var(--lh-ac); }
.c-hub-preview__count {
  font-family: var(--lh-mono);
  font-size: 11px; color: var(--lh-cp); text-transform: uppercase; letter-spacing: 0.05em;
}
.c-hub-preview__desc { font-size: 14px; color: var(--lh-cp); line-height: 1.7; margin-bottom: 12px; }
.c-hub-preview__children { display: flex; flex-wrap: wrap; gap: 6px; }
.c-hub-preview__child {
  font-size: 13px; padding: 4px 12px; border-radius: var(--lh-radius-sm);
  border: 1px solid var(--lh-bg2); color: var(--lh-tx);
  text-decoration: none; transition: border-color 0.15s;
}
.c-hub-preview__child:hover { border-color: var(--lh-ac); color: var(--lh-ac); text-decoration: none; }

/* Featured content strip */
.c-featured-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.c-featured-item {
  border: 1px solid var(--lh-br); border-radius: var(--lh-radius-lg); padding: 16px 20px;
  text-decoration: none; color: var(--lh-bk);
  transition: border-color 0.15s, box-shadow 0.25s;
  display: block;
}
.c-featured-item:hover {
  border-color: #D4D0F0; box-shadow: 0 2px 12px rgba(102,71,240,0.06);
  text-decoration: none;
}
.c-featured-item__eyebrow {
  font-family: var(--lh-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--lh-ac); margin-bottom: 6px;
}
.c-featured-item__title { font-size: 14px; font-weight: 600; color: var(--lh-bk); margin-bottom: 4px; }
.c-featured-item__desc { font-size: 13px; color: var(--lh-cp); line-height: 1.5; }

/* ============================================================
   DOMAIN DIRECTORY v2 (Mockup B: Data-Forward Navigator)
   Single column, no sidebar, comparison table first, card grid
   ============================================================ */
.c-page--directory-v2 .c-layout-b,
.c-page--directory-v2 .c-layout-b__sidebar {
  display: none;
}
.c-directory-content {
  max-width: 100%;
  margin: 0 auto;
  padding: 32px 0 0;
}
.c-directory-content > .c-prose {
  max-width: 740px;
  margin-top: 8px;
  margin-bottom: 32px;
}

/* Hero pills */
.c-dir-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.c-dir-pill {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--lh-cp);
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  padding: 4px 12px;
  border-radius: var(--lh-radius-sm);
}

/* Section header with subtitle */
.c-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.c-section__header h2 {
  margin-bottom: 0;
}
.c-section__subtitle {
  font-size: 13px;
  color: var(--lh-cp);
}

/* Navigation card grid */
.c-dir-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.c-dir-nav-card {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  padding: 20px 24px;
  text-decoration: none;
  color: var(--lh-bk);
  transition: border-color 0.15s, box-shadow 0.15s;
  display: block;
}
.c-dir-nav-card:hover {
  border-color: #D4D0F0;
  box-shadow: 0 4px 12px rgba(102, 71, 240, 0.06);
  text-decoration: none;
}
.c-dir-nav-card__label {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lh-cp);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.c-dir-nav-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.c-dir-nav-card__title {
  font-family: var(--lh-ff-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--lh-bk);
  margin-bottom: 6px;
}
.c-dir-nav-card__desc {
  font-size: 13px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin-bottom: 8px;
}
.c-dir-nav-card__count {
  font-family: var(--lh-mono);
  font-size: 11px;
  color: var(--lh-cp);
  margin-top: auto;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Popular pages grid */
.c-dir-popular-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.c-dir-popular-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  color: var(--lh-bk);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.15s;
}
.c-dir-popular-link:hover {
  border-color: var(--lh-ac);
  color: var(--lh-ac);
  text-decoration: none;
}

/* ============================================================
   RESPONSIVE FIX PATCH (v4.7.3)
   Addresses 23 mobile/tablet issues found in responsive audit.
   ============================================================ */

/* ── C1/C5: Global table overflow + content wrapper ────────── */
/* Note: overflow-x: hidden is on .aih-page (outer wrapper), NOT on .cplh-wrap,
   because .cplh-wrap uses negative margins for full-width header band */
.c-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}
.c-table-wrap .c-table {
  margin-bottom: 0;
}
/* All tables within prose: constrain to container, scroll inside wrapper */
.c-prose table,
.c-section table {
  max-width: 100%;
}
/* Tables inside any section: prevent overflow */
.c-layout-b__content table,
.c-layout-a__content table,
.c-page table {
  max-width: 100%;
}

/* ── C3: Mobile hamburger nav ──────────────────────────────── */
.cplh-header__mobile-toggle {
  display: none !important;
  background: none;
  border: none;
  color: var(--lh-bk);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

/* ── C4: Hero stats responsive ─────────────────────────────── */
.aih-hero__stats {
  flex-wrap: wrap !important;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 16px;
}

/* ── C6: Homepage hero padding — handled in homepage component CSS ── */

/* ── C7: Decision/comparison tables mobile ─────────────────── */

/* ── H1: Ranked list proscons grid layout (v5.16.0 upgrade) ── */
.c-ranked-list__proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--lh-br);
  font-size: 13px;
}

/* ── H2: Hub entity list min-width fix ─────────────────────── */

/* ── H3: CTA bar button max-width ──────────────────────────── */

/* ── H7: Sidebar facts word-break ──────────────────────────── */
.c-sidebar-facts dd,
.c-sidebar-facts__value {
  word-break: break-word;
}

/* ── H9: Breadcrumb overflow ───────────────────────────────── */
.c-breadcrumbs {
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.c-breadcrumbs::-webkit-scrollbar {
  display: none;
}

/* ── M1: H2 scaling on mobile ──────────────────────────────── */

/* ── M2: Minimum tap target for interactive elements ───────── */
.c-expandable__trigger {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ── M4: Series nav collapse on mobile ─────────────────────── */

/* ── M5: Header topic label mobile ─────────────────────────── */

/* ── General: Prevent ALL horizontal overflow ──────────────── */
.aih-page {
  overflow-x: hidden;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.page-template-cplh-front-page .aih-page {
  padding-top: 0 !important;
}
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}
pre {
  overflow-x: auto;
  max-width: 100%;
}

/* ── Methodology block mobile ──────────────────────────────── */

/* ── Tool profile: pricing table on mobile ─────────────────── */

/* ── Feature overview: scroll only the wide detailed comparison table ── */
.c-page--feature-overview #detailed-comparison .c-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Ensure all feature-overview tables fill container width */
.c-page--feature-overview .c-table-wrap {
  width: 100%;
}
.c-page--feature-overview .c-table {
  width: 100%;
  table-layout: auto;
}

/* ── Homepage card grid mobile ─────────────────────────────── */

/* ── Additional mobile fixes (v4.7.4) ─────────────────────── */

/* Content prose: prevent long words/URLs from overflowing */
.c-prose,
.c-prose p,
.c-prose li,
.c-section p,
.c-section li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* All two-column grids stack on small mobile */

/* Entity cards: ensure they stack on narrow screens */

/* Step overview (guide template) on mobile */

/* Sidebar CTA button on mobile */

/* Ranked list items on mobile */

/* How It Compares box on mobile */

/* Author box on mobile */

/* Footer mobile handled in footer CSS block above */

/* ============================================================
   HOMEPAGE v3 — Mockup-aligned styles (translated from mockup)
   ============================================================ */

/* Homepage link reset — .aih-page is outside .cplh-wrap so the global a{text-decoration:none} doesn't reach */

/* ===== QUIZ (floating over hero/content boundary) ===== */
.cplh-hp-quiz-wrap{max-width: 680px;margin:-48px auto 0;padding:0 40px;position:relative;z-index:2}
.cplh-hp-quiz{background:#fff;border:1px solid var(--lh-br);border-radius:24px;padding:36px;box-shadow:0 24px 48px -12px rgba(0,0,0,.12)}
.cplh-hp-quiz__bar{display:flex;gap:6px;margin-bottom:20px}
.cplh-hp-quiz__dot{width:28px;height:3px;border-radius:2px;background:var(--lh-br);transition:background .2s}
.cplh-hp-quiz__dot.on{background:var(--lh-ac)}.cplh-hp-quiz__dot.done{background:var(--lh-bk)}
.cplh-hp-quiz__back{font-size:13px;color:var(--lh-cp);cursor:pointer;background:none;border:none;font-family:var(--lh-ff);padding:0;margin-bottom:14px}
.cplh-hp-quiz__back:hover{color:var(--lh-bk)}
.cplh-hp-quiz__q{font-family:var(--lh-ff-heading);font-size:20px;font-weight:800;margin-bottom:4px}
.cplh-hp-quiz__hint{font-size:13px;color:var(--lh-cp);margin-bottom:18px}
.cplh-hp-quiz__opts{display:flex;flex-direction:column;gap:6px}
.cplh-hp-quiz__o{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--lh-br);border-radius:var(--lh-radius-lg);cursor:pointer;transition:all .15s;background:#fff;font-family:var(--lh-ff);font-size:15px;color:var(--lh-bk);text-align:left}
.cplh-hp-quiz__o:hover{border-color:#C084FC;background:#faf5ff}
.cplh-hp-quiz__k{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--lh-mono);font-size:10px;font-weight:700;flex-shrink:0;border:1px solid var(--lh-br);color:var(--lh-cp);transition:all .15s}
.cplh-hp-quiz__o:hover .cplh-hp-quiz__k{background:var(--lh-ac);color:#fff;border-color:var(--lh-ac)}
.cplh-hp-quiz__ol{font-weight:600;display:block;margin-bottom:1px}.cplh-hp-quiz__od{font-size:12px;color:var(--lh-cp);display:block;line-height:1.4}
.cplh-hp-quiz__re{font-family:var(--lh-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--lh-ac);margin-bottom:6px}
.cplh-hp-quiz__rt{font-family:var(--lh-ff-heading);font-size:18px;font-weight:800;margin-bottom:4px}
.cplh-hp-quiz__rd{font-size:14px;color:var(--lh-cp);margin-bottom:14px}
.cplh-hp-quiz__results{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.cplh-hp-quiz__rc{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:1px solid var(--lh-br);border-radius:10px;transition:border-color .15s}
.cplh-hp-quiz__rc:hover{border-color:var(--lh-ac)}
.cplh-hp-quiz__rn{font-size:14px;font-weight:600}.cplh-hp-quiz__rl{font-family:var(--lh-mono);font-size:9px;color:var(--lh-cp);text-transform:uppercase;letter-spacing:.5px}
.cplh-hp-quiz__ra{color:var(--lh-cp);font-size:14px;transition:transform .15s}.cplh-hp-quiz__rc:hover .cplh-hp-quiz__ra{transform:translateX(3px);color:var(--lh-ac)}
.cplh-hp-quiz__restart{font-size:12px;color:var(--lh-ac);cursor:pointer;background:none;border:none;font-family:var(--lh-ff);font-weight:600;padding:0}

/* ============================================================
   v4.8.0 UX Audit Fixes
   ============================================================ */

/* ---- FIX #1: Sticky sidebar for Layout B ---- */
.c-layout-b__sidebar {
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

/* ---- FIX #2: Mobile reorder — sidebar (Quick Facts) above prose ---- */

/* ---- FIX #3: Back-to-parent link ---- */
.c-back-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--lh-ac);
  text-decoration: none;
  margin-bottom: 16px;
  padding: 4px 0;
}
.c-back-link:hover { text-decoration: underline; }

/* ---- FIX #4: Browse sidebar for hub pages ---- */
.c-browse-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-browse-sidebar__item {
  padding: 6px 0;
  border-bottom: 1px solid var(--lh-br-light);
  font-size: 13px;
}
.c-browse-sidebar__item:last-child { border-bottom: none; }
.c-browse-sidebar__item a {
  color: var(--lh-bk);
  text-decoration: none;
  font-weight: 500;
}
.c-browse-sidebar__item a:hover { color: var(--lh-ac); text-decoration: none; }
.c-browse-sidebar__item--active strong {
  color: var(--lh-ac);
  font-weight: 600;
}

/* ---- FIX #5: Empty state ---- */
.c-empty-state {
  padding: 32px 24px;
  border: 1px dashed var(--lh-br);
  border-radius: var(--lh-radius-lg);
  text-align: center;
  margin: 24px 0;
}
.c-empty-state__text {
  font-size: 15px;
  color: var(--lh-cp);
  margin: 0 0 12px;
}
.c-empty-state__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-empty-state__link:hover { text-decoration: underline; }

/* ---- FIX #6: See Also callout (BEM, replaces inline styles) ---- */
.c-see-also {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: var(--lh-bg);
  border-radius: var(--lh-radius-md);
  border-left: 3px solid var(--lh-ac);
}
.c-see-also__label {
  font-size: 13px;
  color: var(--lh-cp);
}
.c-see-also__link {
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-see-also__link:hover { text-decoration: underline; }

/* ---- FIX #7: Related Topics cross-domain section ---- */
.c-related-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.c-related-topics__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-related-topics__card:hover {
  border-color: var(--lh-br-hover);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-decoration: none;
}
.c-related-topics__header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.c-related-topics__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.c-related-topics__type {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lh-cp);
}
.c-related-topics__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
}
.c-related-topics__desc {
  font-size: 12px;
  color: var(--lh-cp);
  line-height: 1.5;
}

/* ---- FIX #8: Comparison table winner highlighting ---- */
.c-table__cell--winner {
  background: rgba(48, 164, 108, 0.08);
  font-weight: 600;
  color: var(--lh-bk);
}

/* ---- FIX #10: Search in header ---- */
.cplh-header__search {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 4px;
}
.cplh-header__search-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--lh-cp);
  transition: color 0.15s;
  line-height: 1;
}
.cplh-header__search-btn:hover { color: var(--lh-bk); }
.cplh-header__search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1000;
  padding: 8px;
}
.cplh-header__search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  font-family: var(--lh-ff);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.cplh-header__search-input:focus { border-color: var(--lh-ac); }
.cplh-header__search-results {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
}
.cplh-search-result {
  display: block;
  padding: 10px 12px;
  border-radius: var(--lh-radius-sm);
  text-decoration: none;
  transition: background 0.1s;
}
.cplh-search-result:hover { background: var(--lh-bg); text-decoration: none; }
.cplh-search-result__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
  display: block;
}
.cplh-search-result__meta {
  font-size: 11px;
  color: var(--lh-cp);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.cplh-search-result__type {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lh-ac);
}
.cplh-search-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--lh-cp);
  text-align: center;
}

/* ---- Header CTA Button ---- */
.cplh-header__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: var(--lh-bk);
  color: var(--lh-wh) !important;
  font-family: var(--lh-ff-heading);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--lh-radius-md);
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.cplh-header__cta:hover {
  background: #000000;
  color: var(--lh-wh) !important;
  text-decoration: none !important;
}

/* ---- Header Search: hidden until needed ---- */
.cplh-header__search {
  display: none !important;
}

/* ---- FIX #12: Entity card type badges on hub pages ---- */
.c-entity-list__type-badge {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lh-ac);
  padding: 2px 6px;
  border: 1px solid var(--lh-br);
  border-radius: 4px;
  white-space: nowrap;
}

/* ============================================
   v5.0.0 — New BEM Components from Audit
   ============================================ */

/* ---- Ranked Callout (Change #9) ---- */
.c-ranked-callout {
  background: var(--lh-bk);
  color: var(--lh-wh);
  border-radius: var(--lh-radius-lg);
  padding: 24px 28px;
  margin-bottom: 32px;
}
.c-ranked-callout__label {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-ac);
  margin-bottom: 6px;
  display: block;
}
.c-ranked-callout__title {
  font-family: var(--lh-ff-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--lh-wh);
  margin: 0 0 8px;
}
.c-ranked-callout__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 12px;
}
.c-ranked-callout__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-ranked-callout__link:hover { text-decoration: underline; }

/* ---- Sidebar Features (Change #14) ---- */
.c-sidebar-features { margin-bottom: 24px; }
.c-sidebar-features__title {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-cp);
  margin: 0 0 10px;
}
.c-sidebar-features__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-sidebar-features__item {
  border-bottom: 1px solid var(--lh-br-light);
}
.c-sidebar-features__item:last-child { border-bottom: none; }
.c-sidebar-features__link {
  display: block;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--lh-tx);
  text-decoration: none;
  transition: color 0.15s;
}
.c-sidebar-features__link:hover { color: var(--lh-ac); }
.c-sidebar-features__item--active .c-sidebar-features__link {
  color: var(--lh-bk);
  font-weight: 600;
}

/* ---- Sidebar Card (Change #14) ---- */
.c-sidebar-card {
  display: block;
  background: var(--lh-bg);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  padding: 16px 20px;
  margin-top: 16px;
  text-decoration: none;
}
.c-sidebar-card__label {
  display: block;
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lh-cp);
  margin-bottom: 5px;
}
.c-sidebar-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 4px;
}
.c-sidebar-card__desc {
  font-size: 13px;
  color: var(--lh-cp);
  margin: 0 0 10px;
}
.c-sidebar-card__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-sidebar-card__link:hover { text-decoration: underline; }

/* ---- AI Impact Card (Change #49) ---- */
.c-ai-impact {
  background: var(--lh-bk);
  border-radius: var(--lh-radius-lg);
  padding: 24px 28px;
  margin-bottom: 32px;
}
.c-ai-impact__icon {
  font-size: 20px;
  margin-bottom: 8px;
}
.c-ai-impact__title {
  font-family: var(--lh-ff-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--lh-wh);
  margin: 0 0 8px;
}
.c-ai-impact__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 12px;
  line-height: 1.7;
}
.c-ai-impact__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-ai-impact__link:hover { text-decoration: underline; }

/* ---- Section Group (Change #50) ---- */
.c-section-group {
  position: relative;
  padding: 32px 24px;
  margin: 32px -24px;
  border-radius: var(--lh-radius-lg);
}
.c-section-group > * { position: relative; z-index: 1; }
.c-section-group__label {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-cp);
  margin-bottom: 20px;
  display: block;
}
.c-section-group--assess { background: #F9F8FF; }
.c-section-group--trajectory { background: #F6FBF8; }

/* ---- Section Connector (Change #51) ---- */
.c-section-connector {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0;
  color: var(--lh-cp);
}
.c-section-connector::before,
.c-section-connector::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lh-br);
}
.c-section-connector__label {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ---- Eligibility Path (Change #63) ---- */
.c-eligibility-path {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  padding: 20px 24px;
}
.c-eligibility-path__title {
  font-family: var(--lh-ff-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 12px;
}
.c-eligibility-path__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-eligibility-path__item {
  padding: 6px 0 6px 20px;
  font-size: 14px;
  color: var(--lh-tx);
  position: relative;
}
.c-eligibility-path__item::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--lh-ok);
  font-weight: 700;
}

/* ---- Resource List (Change #66) ---- */
.c-resource-list { margin-bottom: 32px; }
.c-resource-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--lh-br);
  align-items: flex-start;
}
.c-resource-item:last-child { border-bottom: none; }
.c-resource-item__type {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lh-ac);
  padding: 3px 8px;
  border: 1px solid var(--lh-br);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.c-resource-item__body { flex: 1; min-width: 0; }
.c-resource-item__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--lh-bk);
  margin: 0 0 4px;
}
.c-resource-item__name a { color: var(--lh-bk); text-decoration: none; }
.c-resource-item__name a:hover { color: var(--lh-ac); }
.c-resource-item__desc {
  font-size: 14px;
  color: var(--lh-tx);
  margin: 0;
  line-height: 1.7;
}

/* ---- Capsule Formula Text (Change #81) ---- */
.c-capsule__formula-text {
  font-family: var(--lh-mono);
  font-size: 14px;
}

/* ---- Sidebar Facts Inline (Change #90) ---- */
.c-sidebar-facts--inline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  padding: 20px 24px;
  margin-bottom: 32px;
}
.c-sidebar-facts--inline .c-sidebar-facts__title {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}
.c-sidebar-facts--inline .c-sidebar-facts__list {
  display: contents;
}
.c-sidebar-facts--inline .c-sidebar-facts__list dt {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* ---- Workflow Hero Component (Change #92) ---- */
.c-workflow-hero {
  position: relative;
  background: var(--lh-bk);
  border-radius: var(--lh-radius-lg);
  padding: 32px 28px;
  margin-bottom: 32px;
  color: var(--lh-wh);
}
.c-workflow-hero::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--lh-bk);
  z-index: 0;
  border-radius: 0;
}
.c-workflow-hero > * { position: relative; z-index: 1; }
.c-workflow-hero__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.c-workflow-hero__title {
  font-family: var(--lh-ff-heading);
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--lh-wh);
  margin: 0;
}
.c-workflow-hero__count {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-ac);
  padding: 3px 10px;
  border: 1px solid rgba(102,71,240,0.3);
  border-radius: 4px;
  white-space: nowrap;
}
.c-workflow-hero__rail {
  position: relative;
  padding-left: 40px;
}
.c-workflow-hero__rail::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,0.15);
}
.c-workflow-hero__stage {
  position: relative;
  margin-bottom: 20px;
}
.c-workflow-hero__stage:last-child { margin-bottom: 0; }
.c-workflow-hero__node {
  position: absolute;
  left: -40px;
  top: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lh-ac);
  color: var(--lh-wh);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  z-index: 2;
}
.c-workflow-hero__stage-title {
  font-family: var(--lh-ff-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--lh-wh);
  margin: 0 0 8px;
}
.c-workflow-hero__stage-body {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
}
.c-workflow-hero__stage-body p { margin: 0 0 8px; color: inherit; }
.c-workflow-hero__stage-body p:last-child { margin-bottom: 0; }
.c-workflow-hero__tip {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--lh-ok);
  background: rgba(48,164,108,0.1);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.c-workflow-hero__tip-label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-ok);
  display: block;
  margin-bottom: 3px;
}

/* ---- Criteria Card (Change #95) ---- */
.c-criteria-card {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.c-criteria-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.c-criteria-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
}
.c-criteria-card__weight {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
}
.c-criteria-card__weight--critical { background: #F0ECFE; color: var(--lh-ac); }
.c-criteria-card__weight--high { background: #E8F5E9; color: var(--lh-ok); }
.c-criteria-card__weight--medium { background: #FFF3E0; color: var(--lh-wn); }
.c-criteria-card__desc {
  font-size: 14px;
  color: var(--lh-tx);
  margin: 0;
  line-height: 1.7;
}

/* ---- Red Flags (Change #96) ---- */
.c-red-flags {
  background: #FFF5F5;
  border: 1px solid #FFE0E0;
  border-left: 4px solid var(--lh-er);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin-bottom: 32px;
}
.c-red-flags__title {
  font-family: var(--lh-ff-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--lh-er);
  margin: 0 0 12px;
}
.c-red-flags__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-red-flags__item {
  padding: 6px 0 6px 20px;
  font-size: 14px;
  color: var(--lh-tx);
  position: relative;
}
.c-red-flags__item::before {
  content: '\26A0';
  position: absolute;
  left: 0;
  color: var(--lh-er);
}

/* ---- Skill Level Badges (Change #42, replaces c-skill-bar) ---- */
.c-skill-level {
  display: inline-block;
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 4px;
}
.c-skill-level--critical { background: #F0ECFE; color: var(--lh-ac); }
.c-skill-level--high { background: #E8F5E9; color: var(--lh-ok); }
.c-skill-level--medium { background: #FFF3E0; color: var(--lh-wn); }

/* ---- Skills Page: Tabs, Cards, Grid (career-guide/skills.php) ---- */
.c-skill-legend {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--lh-cp);
  margin-bottom: 16px;
}
.c-skill-legend__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.c-skill-legend__dot--essential { background: var(--lh-ok); }
.c-skill-legend__dot--important { background: var(--lh-ac); }
.c-skill-legend__dot--helpful { background: var(--lh-cp); }

.c-skill-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--lh-br);
  margin-bottom: 24px;
}
.c-skill-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  font-family: var(--lh-ff);
  font-size: 14px;
  font-weight: 500;
  color: var(--lh-cp);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.c-skill-tab:hover {
  color: var(--lh-bk);
  background: var(--lh-bg);
}
.c-skill-tab--active {
  color: var(--lh-ac);
  border-bottom-color: var(--lh-ac);
  font-weight: 600;
}
.c-skill-tab__count {
  font-size: 12px;
  color: var(--lh-cp);
  margin-left: 4px;
}

.c-skill-panel { display: none; }
.c-skill-panel--active { display: block; }

.c-skill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.c-skill-card {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  padding: 20px;
  transition: border-color 0.15s;
}
.c-skill-card:hover {
  border-color: #D4D0F0;
}
.c-skill-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.c-skill-card__name {
  font-family: var(--lh-ff-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--lh-bk);
}
.c-skill-card__desc {
  font-size: 14px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin-bottom: 10px;
}
.c-skill-card__develop {
  font-size: 13px;
  color: var(--lh-cp);
  line-height: 1.5;
}
.c-skill-card__develop strong {
  color: var(--lh-bk);
}

/* Importance badges */
.c-importance {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.c-importance--essential { background: rgba(48, 164, 108, 0.1); color: var(--lh-ok); }
.c-importance--important { background: rgba(102, 71, 240, 0.1); color: var(--lh-ac); }
.c-importance--helpful { background: rgba(100, 100, 100, 0.08); color: var(--lh-cp); }

/* ---- Ranked List Review Link (Change #17) ---- */
.c-ranked-list__review-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
  margin-top: 8px;
}
.c-ranked-list__review-link:hover { text-decoration: underline; }

/* ---- Ranked List Category Divider (Variation 18b-6) ---- */
.c-ranked-list__category {
  font-family: var(--lh-ff-heading);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: var(--lh-bk);
  margin: 32px 0 16px;
  padding-top: 24px;
  border-top: 2px solid var(--lh-br);
}
.c-ranked-list__category:first-child { border-top: none; padding-top: 0; }

/* ---- Best-For Badge (consistent purple, replaces inline cplh_rgba) ---- */
.c-badge--bestfor {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: #F5F3FF;
  color: var(--lh-ac);
  white-space: nowrap;
  margin-bottom: 12px;
}

/* ---- Browse All Link ---- */
.c-browse-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
  margin-top: 12px;
}
.c-browse-all:hover { text-decoration: underline; }

/* ---- Example Divider ---- */
.c-example-divider {
  border: none;
  border-top: 2px solid var(--lh-br);
  margin: 32px 0;
}

/* ---- Two Column Grid ---- */
.c-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ---- Table Link Variants ---- */
.c-table__link--primary { font-weight: 600; color: var(--lh-ac); text-decoration: none; }
.c-table__link--primary:hover { text-decoration: underline; }
.c-table__text--muted { font-size: 13px; color: var(--lh-cp); }
.c-table__link--muted { font-size: 13px; color: var(--lh-cp); text-decoration: none; white-space: nowrap; }
.c-table__link--muted:hover { color: var(--lh-ac); }

/* ---- Callout (info, insight) ---- */
.c-callout {
  margin-bottom: 24px;
  padding: 12px 16px;
  border-radius: var(--lh-radius-md);
}
.c-callout--info {
  background: var(--lh-bg);
  border-left: 3px solid var(--lh-ac);
}
.c-callout--insight {
  background: #F5F3FF;
  border-left: 3px solid var(--lh-ac);
}
.c-callout__text {
  font-size: 13px;
  color: var(--lh-cp);
}
.c-callout__link {
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
  margin-left: 6px;
}
.c-callout__link:hover { text-decoration: underline; }

/* ---- ClickUp Tip ---- */
.c-clickup-tip {
  border-left: 3px solid var(--lh-ok);
  padding: 10px 14px;
  margin: 12px 0;
  background: #F0FFF4;
  border-radius: 0 6px 6px 0;
}
.c-clickup-tip__label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-ok);
  display: block;
  margin-bottom: 3px;
}
.c-clickup-tip p { font-size: 13px; color: var(--lh-tx); margin: 0; }

/* ---- v5.0.0 Responsive additions ---- */
/* ============================================================
   CSS PATCH: Missing Components
   Add this entire block to the END of learn-hub.css
   (before the closing media queries if any)
   ============================================================ */

/* ── Fix: Homepage link underlines ──────────────────────────
   .aih-page is outside .cplh-wrap, so the global
   .cplh-wrap a { text-decoration: none } doesn't reach.   */
.aih-page a { text-decoration: none; color: inherit; }
.aih-page a:hover { text-decoration: none; }

/* ── NEW: c-workflow (renamed from c-workflow-hero) ─────────
   Source: MOCKUP-workflow-v4-hero-redesign.html              */
.c-workflow {
  background: var(--lh-bk);
  border-radius: var(--lh-radius-lg);
  padding: 32px 28px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.c-workflow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(108,92,231,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,92,231,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.c-workflow__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  position: relative;
}
.c-workflow__title {
  font-family: var(--lh-ff-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--lh-wh);
}
.c-workflow__count {
  font-family: var(--lh-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
}
.c-workflow__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.c-workflow__rail::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(to bottom, var(--lh-ac), rgba(108,92,231,0.2));
  border-radius: 1px;
}
.c-workflow__stage {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 16px 0;
}
.c-workflow__stage + .c-workflow__stage {
  border-top: 1px solid rgba(255,255,255,0.05);
}
.c-workflow__node {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lh-ac);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--lh-wh);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--lh-bk), 0 0 0 6px rgba(108,92,231,0.3);
  flex-shrink: 0;
}
.c-workflow__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--lh-radius-md);
  padding: 16px 20px;
  transition: background 0.2s, border-color 0.2s;
}
.c-workflow__card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(108,92,231,0.3);
}
.c-workflow__stage-name {
  font-family: var(--lh-ff-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--lh-wh);
  margin-bottom: 6px;
}
.c-workflow__stage-desc {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
}
.c-workflow__stage-desc p { margin: 0; }
.c-workflow__tip {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(48, 164, 108, 0.08);
  border-left: 2px solid var(--lh-ok);
  border-radius: 0 6px 6px 0;
}
.c-workflow__tip-label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-ok);
  margin-bottom: 3px;
  display: block;
}
.c-workflow__tip p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

/* ── NEW: c-hub-actions (hub-listicle action card grid) ─────
   Source: TEMPLATE-SPEC-hub-listicle.md                       */
.c-hub-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.c-hub-actions__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-hub-actions__card:hover {
  border-color: var(--lh-br-hover);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  text-decoration: none;
}
.c-hub-actions__type {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-cp);
}
.c-hub-actions__title {
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
}

/* ── NEW: c-dir-pathfinder (domain directory intent cards) ──
   Source: TEMPLATE-SPEC-domain-directory.md                   */
.c-dir-pathfinder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.c-dir-pathfinder__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-dir-pathfinder__card:hover {
  border-color: #D4D0F0;
  box-shadow: 0 4px 12px rgba(102, 71, 240, 0.06);
  text-decoration: none;
}
.c-dir-pathfinder__q {
  font-family: var(--lh-ff-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--lh-bk);
}
.c-dir-pathfinder__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lh-tx);
  flex: 1;
}
.c-dir-pathfinder__dest {
  font-family: var(--lh-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--lh-ac);
  margin-top: auto;
}

/* ── FIX: c-ai-impact__body (role profile AI impact card) ───
   Source: MOCKUP-role-profile.html                            */
.c-ai-impact__body { flex: 1; }

/* ── FIX: c-tinted-box extensions (industry/certification) ──
   Source: MOCKUP-industry-landing-v2.html                     */
.c-tinted-box__parent {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--lh-br);
  font-size: 12px;
  color: var(--lh-cp);
  text-decoration: none;
}
.c-tinted-box__parent:hover { color: var(--lh-ac); }
.c-tinted-box__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lh-tx);
  margin: 0;
}

/* ── Responsive: new components ─────────────────────────────── */

/* ── FIX: c-tinted-box__list (sibling industry links) ───────
   Source: MOCKUP-industry-landing-v2.html
   Without this, sibling links render as flat text run-on      */
.c-tinted-box__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-tinted-box__list-item {
  display: inline;
}
.c-tinted-box__list-item a {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-sm);
  display: inline-block;
  transition: border-color 0.15s, background 0.15s;
}
.c-tinted-box__list-item a:hover {
  border-color: var(--lh-br-hover);
  background: var(--lh-bg);
  text-decoration: none;
}

/* ── FIX: c-series-nav__item flex-wrap ──────────────────────
   flex-wrap: wrap causes number badges to stack above titles
   on narrow sidebars. Remove wrap to keep inline.             */


/* ==========================================================================
   Template-Scoped Overrides (Audit Batches 1-2, approved April 2026)
   These use .c-page--{template} scoping so they ONLY affect specific
   template types. No base rules are modified.
   ========================================================================== */

/* ── Tool Profile + Feature Review: compact table padding ── */
.c-page--tool-profile .c-table th,
.c-page--tool-profile .c-table td,
.c-page--feature-review .c-table th,
.c-page--feature-review .c-table td {
  padding: 10px 14px;
}

/* ── Tool Profile + Feature Review: light CTA bar ── */
.c-page--tool-profile .c-cta-bar,
.c-page--feature-review .c-cta-bar {
  background: var(--lh-bg);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  padding: 16px 20px;
  gap: 16px;
  margin: 0 0 28px;
}
.c-page--tool-profile .c-cta-bar__text,
.c-page--feature-review .c-cta-bar__text {
  color: var(--lh-bk);
  font-size: 14px;
}
.c-page--tool-profile .c-cta-bar__text strong,
.c-page--feature-review .c-cta-bar__text strong {
  color: var(--lh-bk);
}
.c-page--tool-profile .c-cta-bar__btn,
.c-page--feature-review .c-cta-bar__btn {
  background: var(--lh-bk);
  color: var(--lh-wh) !important;
  border-radius: var(--lh-radius-sm);
  padding: 10px 24px;
  font-weight: 600;
}

/* ── Tool Profile: step jumps muted ── */
.c-page--tool-profile .c-step-jumps a {
  color: var(--lh-cp);
}

/* ── Tool Profile: sidebar CTA ── */
.c-page--tool-profile .c-sidebar-cta__btn {
  padding: 12px 20px;
  border-radius: var(--lh-radius-sm);
  font-weight: 600;
  font-size: 14px;
}

/* ── Tool Profile: compact disclosure ── */
.c-page--tool-profile .c-disclosure {
  padding: 12px 0;
  margin: 0 0 24px;
}

/* ── Layout C templates: larger header band ── */
.c-page--buyers-guide .c-header-band__title,
.c-page--calculator .c-header-band__title,
.c-page--reference .c-header-band__title,
.c-page--resource-roundup .c-header-band__title,
.c-page--workflow .c-header-band__title {
  font-size: clamp(26px, 3.5vw, 34px);
}
.c-page--buyers-guide .c-header-band__excerpt,
.c-page--calculator .c-header-band__excerpt,
.c-page--reference .c-header-band__excerpt,
.c-page--resource-roundup .c-header-band__excerpt,
.c-page--workflow .c-header-band__excerpt {
  font-size: 16px;
  max-width: 680px;
}

/* ── Layout C templates: purple CTA button ── */
.c-page--buyers-guide .c-cta-bar__btn,
.c-page--calculator .c-cta-bar__btn,
.c-page--reference .c-cta-bar__btn,
.c-page--workflow .c-cta-bar__btn,
.c-page--buyers-guide .c-cta-bar__btn:hover,
.c-page--calculator .c-cta-bar__btn:hover,
.c-page--reference .c-cta-bar__btn:hover,
.c-page--workflow .c-cta-bar__btn:hover,
.c-page--buyers-guide .c-cta-bar__btn:focus,
.c-page--calculator .c-cta-bar__btn:focus,
.c-page--reference .c-cta-bar__btn:focus,
.c-page--workflow .c-cta-bar__btn:focus {
  background: var(--lh-ac);
  color: var(--lh-wh) !important;
}
/* Resource roundup: white button, black text (consistent with standard CTAs) */
.c-page--resource-roundup .c-cta-bar__btn {
  background: var(--lh-wh);
  color: var(--lh-bk);
}

/* Fix 1.4: Resource roundup Quick Picks — prevent Type column word wrapping */
.c-page--resource-roundup .c-table td:last-child,
.c-page--resource-roundup .c-table th:last-child {
  white-space: nowrap;
}

/* Fix 1.6: Nested listicle table — shrink rank column, give tools room */
.c-page--listicle .c-table th:first-child,
.c-page--listicle .c-table td:first-child {
  width: 40px;
  text-align: center;
}
.c-page--listicle .c-table td:nth-child(2) {
  white-space: nowrap;
}

/* ── Cluster hub: spacing between header and content ── */
.c-page--cluster-hub .c-callout--insight {
  margin: 24px 0 8px;
}
.c-page--cluster-hub .c-layout-b,
.c-page--cluster-hub .c-layout-a {
  padding-top: 32px;
}

/* ── Table links: always accent color ── */
.c-table td a {
  color: var(--lh-ac);
  font-weight: 600;
  text-decoration: none;
}
.c-table td a:hover {
  text-decoration: underline;
}

/* ── Tables: prevent column squeeze on mobile ── */
.c-table th:first-child,
.c-table td:first-child {
  min-width: 130px;
}

/* ── Calculator: stronger input field contrast ── */
.c-page--calculator .c-calc__input {
  border: 2px solid #D0D0D0;
  background: var(--lh-wh);
  font-size: 15px;
  padding: 10px 14px;
}
.c-page--calculator .c-calc__input:focus {
  border-color: var(--lh-ac);
}

/* ── Industry: Other Industries link layout ── */
.c-page--industry .c-tinted-box .c-tinted-box__link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-sm);
  margin: 4px 6px 4px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-bk);
  background: var(--lh-wh);
  transition: border-color 0.15s, color 0.15s;
}
.c-page--industry .c-tinted-box .c-tinted-box__link:hover {
  border-color: var(--lh-ac);
  color: var(--lh-ac);
  text-decoration: none;
}
.c-page--industry .c-tinted-box .c-tinted-box__parent {
  display: block;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--lh-br);
  font-size: 13px;
  color: var(--lh-cp);
}

/* ── Career Guide: badge spacing below header ── */
.c-page--career-guide .c-badge--guide-type {
  display: inline-block;
  margin: 12px 0 0;
}

/* ── Layout C: single-column full-width (hub-listicle) ── */
.c-layout-c {
  padding: 16px 0 0;
}
.c-layout-c__content {
  max-width: 100%;
  min-width: 0;
}

/* ── Section links: blue accent color ── */
.c-section__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-section__link:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   SESSION 2b: Design system fixes (April 14 PM)
   ══════════════════════════════════════════════════════════ */

/* ── Fix 4: Tables — ensure full width in all contexts ── */
.c-table-wrap .c-table,
.c-section .c-table,
.c-layout-b__content .c-table,
.c-layout-c .c-table {
  width: 100%;
}
/* Prose tables inside content area */
.c-layout-b__content .c-prose table {
  width: 100%;
}

/* ── Fix 5: Card and list link colors — accent blue ── */
.c-ranked-list__desc a,
.c-related__link,
.c-dir-nav-card__title,
/* Browse all link */
.c-browse-all a,
a.c-browse-all {
  color: var(--lh-ac);
  font-weight: 600;
}

/* ── Fix 6: Asana raw text — ensure c-prose wraps paragraphs ── */
.c-prose h3 + br,
.c-prose p + br {
  display: none;
}
/* Ensure raw text in prose gets proper spacing */
.c-layout-b__content .c-prose {
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════
   Fix 7: Domain Directory — full layout overhaul
   Problem: directory page had its own ad-hoc 1000px container
   that did not match the 1080px cplh-wrap used by every other
   page type. This caused visible misalignment, thin spacing,
   and inconsistent visual rhythm.
   Fix: remove the 1000px cap, use full cplh-wrap width, match
   the vertical spacing, section rhythm, and card density of
   hub-listicle and cluster-hub pages.
   ══════════════════════════════════════════════════════════ */

/* Section vertical rhythm: 48px between major blocks */
.c-directory-content .c-section {
  margin-bottom: 48px;
}
.c-directory-content .c-section:last-child {
  margin-bottom: 32px;
}

/* Section headings: match the system */
.c-directory-content .c-section h2 {
  font-family: var(--lh-ff-heading);
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--lh-bk);
  margin-bottom: 20px;
}

/* ── Decision table: full width ── */
.c-directory-content .c-table-wrap {
  margin-top: 0;
}
.c-directory-content .c-table {
  width: 100%;
}

/* ── FAQ inside directory ── */
.c-directory-content .c-faq {
  max-width: 740px;
}

/* ── Responsive ── */

/* ══════════════════════════════════════════════════════════
   Fix 8: Universal link color — all links accent blue
   All clickable links must be var(--lh-ac). No exceptions.
   ══════════════════════════════════════════════════════════ */

/* Override: tool-profile step-jumps were gray */
.c-page--tool-profile .c-step-jumps a {
  color: var(--lh-ac) !important;
}

/* Override: "Compare All Tools" muted links were gray */
.c-table__link--muted {
  color: var(--lh-ac) !important;
}

/* Nuclear: every <a> inside .cplh-wrap that is a real link gets accent */
.cplh-wrap a:not(.c-cta-bar__btn):not(.c-sidebar-cta__btn):not(.c-breadcrumb a):not([class*="btn"]):not([class*="cta"]):not(.c-keyword) {
  color: var(--lh-ac);
}

/* ══════════════════════════════════════════════════════════
   Fix 9: Tool-profile comprehensive cleanup
   Addresses: CTA button, author box, table styling, 
   table headers, table width, disclosure
   ══════════════════════════════════════════════════════════ */

/* 9a: CTA button styling for tool-profile/feature-review is at the Tool Profile section above */

/* 9c: Table headers — standard dark headers everywhere (remove light gray override) */
.c-page--tool-profile .c-table th,
.c-page--feature-review .c-table th {
  background: var(--lh-bk) !important;
  color: var(--lh-wh) !important;
  border-bottom: 2px solid var(--lh-bk) !important;
}

/* 9e: Tables — render normally within their wrappers */
.c-table-wrap .c-table,
.c-table-wrap table {
  table-layout: auto;
}

/* 9f: Disclosure — tool/feature review spacing adjustment */
.c-page--tool-profile .c-disclosure,
.c-page--feature-review .c-disclosure {
  padding: 16px 0;
  margin: 28px 0;
}

/* ══════════════════════════════════════════════════════════
   Fix 10: Template page + checklist + card CTA cleanup
   ══════════════════════════════════════════════════════════ */

/* 10b: Checklist static — target bare <li> since template doesn't add __item class */
.c-checklist-static li {
  padding: 8px 0 8px 28px;
  border-bottom: 1px solid var(--lh-br);
  position: relative;
  font-size: 14px;
  color: var(--lh-bk);
}
.c-checklist-static li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #00B894;
  font-weight: 700;
}

/* 10c: Ensure any bare <a> inside CTA containers gets correct colors */
/* Exclude .c-sidebar-cta__btn so it keeps its white color */
/* Exclude .c-template-card__cta a so it keeps white-on-black */
.c-sidebar-cta a:not(.c-sidebar-cta__btn),
.c-cta-bar a:not(.c-cta-bar__btn) {
  color: inherit !important;
}
.c-template-card__cta a {
  color: var(--lh-wh) !important;
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE v5.1.0 — cplh-home-* classes
   Uses design system tokens from :root
   ══════════════════════════════════════════════════════════════ */

/* Container (1080px, matches .cplh-wrap) */
.cplh-home-cnt {
  max-width: var(--lh-cnt-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Section spacing */
.cplh-home-section {
  margin-bottom: var(--lh-section-gap);
}

/* Kicker label (Sometype Mono, uppercase) */
.cplh-home-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--lh-ac);
  text-transform: uppercase;
  margin: 0 0 10px;
  font-family: var(--lh-mono);
}
.cplh-home-hero .cplh-home-kicker {
  color: #C084FC;
}

/* Section H2 */
.cplh-home-h2 {
  font-size: var(--lh-section-h2);
  font-weight: 700;
  font-family: var(--lh-ff-heading);
  margin: 0 0 8px;
  color: var(--lh-bk);
}

/* Section description */
.cplh-home-desc {
  font-size: 15px;
  color: var(--lh-tx);
  margin: 0 0 32px;
  line-height: 1.7;
}

/* Section label (same as kicker) */
.cplh-home-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--lh-ac);
  text-transform: uppercase;
  margin: 0 0 10px;
  font-family: var(--lh-mono);
}

/* Prose block */
.cplh-home-prose {
  font-size: 15px;
  color: var(--lh-tx);
  line-height: 1.7;
  margin-top: 20px;
}
.cplh-home-prose p {
  margin: 0 0 16px;
}
.cplh-home-prose p:last-child {
  margin-bottom: 0;
}

/* ── HERO ── */
.cplh-home-hero {
  background: linear-gradient(155deg, #14141a 0%, #1f1f27 60%, #282836 100%);
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}
.cplh-home-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.22), transparent 70%);
  pointer-events: none;
}
.cplh-home-hero::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.12), transparent 70%);
  pointer-events: none;
}
.cplh-home-hero__h1 {
  font-size: var(--lh-hero-h1);
  font-weight: 800;
  font-family: var(--lh-ff-heading);
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--lh-wh);
}
.cplh-home-hero__rotate {
  display: inline-block;
  transition: opacity 0.35s;
}
.cplh-home-hero__sub {
  font-size: var(--lh-hero-sub);
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 32px;
}
.cplh-home-hero__stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
}
.cplh-home-hero__stats strong {
  color: var(--lh-wh);
}

/* ── QUIZ ── */
.cplh-home-quiz-wrap {
  margin-top: -48px;
  margin-bottom: var(--lh-section-gap);
  position: relative;
  z-index: 10;
  padding: 0 24px;
}
.cplh-home-quiz {
  background: var(--lh-wh);
  border-radius: var(--lh-radius-xl);
  padding: 28px 32px;
  max-width: 680px;
  margin: 0 auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* ── SUBJECT TABS ── */
.cplh-home-tabs__bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.cplh-home-tabs__btn {
  padding: 8px 16px;
  border-radius: var(--lh-radius-md);
  border: none;
  cursor: pointer;
  background: var(--lh-bg2);
  color: var(--lh-tx);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--lh-ff);
  transition: background 0.15s, color 0.15s;
}
.cplh-home-tabs__btn:hover {
  background: var(--lh-br);
}
.cplh-home-tabs__btn--active {
  color: var(--lh-wh);
}
.cplh-home-tabs__panel {
  display: none;
}
.cplh-home-tabs__panel--active {
  display: block;
}
.cplh-home-tabs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cplh-home-tabs__detail {
  background: var(--lh-bg);
  border-radius: var(--lh-card-r);
  padding: 24px;
  border: 1px solid var(--lh-br);
}
.cplh-home-tabs__tag {
  padding: 4px 10px;
  border-radius: var(--lh-radius-sm);
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  font-size: 12px;
  color: var(--lh-tx);
  font-weight: 500;
}
.cplh-home-tabs__explore {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  border-radius: var(--lh-radius-md);
  color: var(--lh-wh);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.cplh-home-tabs__explore:hover {
  text-decoration: none;
  color: var(--lh-wh);
  opacity: 0.9;
}
/* Override .aih-page a { color: inherit } which beats single-class selectors */
.aih-page .cplh-home-tabs__explore,
.aih-page .cplh-home-tabs__explore:hover {
  color: var(--lh-wh);
}
.cplh-home-tabs__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cplh-home-tabs__link-row {
  padding: 14px 16px;
  border-radius: var(--lh-radius-md);
  border: 1px solid var(--lh-br);
  background: var(--lh-wh);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  color: var(--lh-bk);
  transition: border-color 0.15s;
}
.cplh-home-tabs__link-row:hover {
  border-color: var(--lh-cp);
}

/* ── AI CALLOUT ── */
.cplh-home-ai-card {
  background: var(--lh-bk);
  border-radius: var(--lh-radius-xl);
  padding: 36px 36px 32px;
}
.cplh-home-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}
.cplh-home-ai-item {
  padding: 14px 16px;
  border-radius: var(--lh-radius-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: background 0.15s;
}
.cplh-home-ai-item:hover {
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}
.cplh-home-ai-item__type {
  font-size: 11px;
  font-weight: 600;
  color: #0984E3;
  background: rgba(9,132,227,0.12);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 6px;
}
.cplh-home-ai-btn {
  display: inline-block;
  padding: 11px 24px;
  border-radius: var(--lh-radius-md);
  background: var(--lh-wh);
  color: var(--lh-bk);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.15s;
}
.cplh-home-ai-btn:hover {
  opacity: 0.9;
  text-decoration: none;
  color: var(--lh-bk);
}

/* ── POPULAR CARDS ── */
.cplh-home-pop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lh-card-gap);
}
.cplh-home-pop-card {
  padding: var(--lh-card-pad);
  border-radius: var(--lh-card-r);
  border: 1px solid var(--lh-br);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
.cplh-home-pop-card:hover {
  border-color: var(--lh-ac);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-1px);
  text-decoration: none;
}
.cplh-home-pop-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cplh-home-pop-card__domain {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}
.cplh-home-pop-card__type {
  font-size: 11px;
  color: var(--lh-cp);
  background: var(--lh-bg2);
  padding: 2px 8px;
  border-radius: 4px;
}
.cplh-home-pop-card__title {
  font-size: var(--lh-card-title);
  font-weight: 700;
  margin: 0 0 6px;
  font-family: var(--lh-ff-heading);
  color: var(--lh-bk);
  line-height: 1.3;
}
.cplh-home-pop-card__desc {
  font-size: 13px;
  color: var(--lh-tx);
  margin: 0;
  line-height: 1.5;
}

/* ── CTA BAR ── */
.cplh-home-cta {
  background: var(--lh-bk);
  border-radius: var(--lh-radius-xl);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cplh-home-cta__btn {
  padding: 12px 24px;
  border-radius: var(--lh-radius-md);
  background: var(--lh-wh);
  color: var(--lh-bk);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.cplh-home-cta__btn:hover {
  opacity: 0.9;
  text-decoration: none;
  color: var(--lh-bk);
}

/* ── HOMEPAGE: Extracted inline styles (audit fix P2) ── */
.cplh-home-hero__inner { text-align: center; padding-top: 80px; }
.cplh-home-noscript { padding: 24px; text-align: center; }
.cplh-home-noscript__text { margin: 0 0 16px; font-size: 15px; color: #646464; }
.cplh-home-noscript__links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cplh-home-noscript__link { padding: 8px 16px; background: #f0f0f0; border-radius: var(--lh-radius-sm); color: #1a1a1a; text-decoration: none; font-size: 14px; font-weight: 500; }
.cplh-home-tabs__domain-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cplh-home-tabs__domain-dot { width: 8px; height: 8px; border-radius: 50%; }
.cplh-home-tabs__domain-name { font-size: 18px; font-weight: 700; font-family: var(--lh-ff-heading); }
.cplh-home-tabs__count { font-size: 12px; color: var(--lh-cp); margin-left: auto; }
.cplh-home-tabs__domain-desc { font-size: 14px; color: var(--lh-tx); margin: 0 0 16px; line-height: 1.7; }
.cplh-home-tabs__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cplh-home-tabs__link-arrow { color: var(--lh-cp); }
.cplh-home-ai-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cplh-home-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: #0984E3; }
.cplh-home-ai-kicker { margin: 0; color: #0984E3; }
.cplh-home-ai-trending { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--lh-radius-lg); background: rgba(9,132,227,0.15); color: #38bdf8; }
.cplh-home-ai-card__title { font-size: 24px; font-weight: 700; font-family: var(--lh-ff-heading); color: var(--lh-wh); margin: 0 0 6px; }
.cplh-home-ai-card__desc { font-size: 14px; color: rgba(255,255,255,0.65); margin: 0 0 24px; max-width: 520px; line-height: 1.7; }
.cplh-home-ai-item__title { font-size: 14px; font-weight: 600; color: var(--lh-wh); margin-bottom: 3px; }
.cplh-home-ai-item__desc { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.4; }
.cplh-home-pop-card__dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cplh-home-about { border-top: 1px solid var(--lh-br); padding-top: 48px; }
.cplh-home-cta-section { max-width: var(--lh-cnt-w); margin: 0 auto var(--lh-last-gap); padding: 0 24px; }
.cplh-home-cta__title { font-size: 16px; font-weight: 700; color: var(--lh-wh); margin: 0 0 4px; font-family: var(--lh-ff-heading); }
.cplh-home-cta__desc { font-size: 14px; color: rgba(255,255,255,0.65); margin: 0; }

/* ── 404 PAGE (audit fix: P2) ── */
.c-page--404 .c-header-band { text-align: center; }
.c-404-body { max-width: 640px; margin: 48px auto; padding: 0 24px; }
.c-404-body h2 { font-size: 20px; font-weight: 700; font-family: var(--lh-ff-heading); margin: 0 0 16px; color: var(--lh-bk); }
.c-404-domains { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.c-404-domain-link { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--lh-bg); border-radius: var(--lh-radius-md); text-decoration: none; font-size: 14px; font-weight: 500; color: var(--lh-bk); transition: background 0.15s; }
.c-404-domain-link:hover { background: #eee; }
.c-404-domain-link__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.c-404-search { margin-top: 32px; }
.c-404-search__field { display: flex; gap: 8px; }
.c-404-search__input { flex: 1; padding: 10px 14px; border: 1px solid var(--lh-br); border-radius: var(--lh-radius-md); font-family: var(--lh-ff); font-size: 14px; outline: none; }
.c-404-search__input:focus { border-color: var(--lh-ac); }
.c-404-search__btn { padding: 10px 20px; background: var(--lh-ac); color: var(--lh-wh); border: none; border-radius: var(--lh-radius-md); font-family: var(--lh-ff); font-size: 14px; font-weight: 600; cursor: pointer; }
.c-404-search__btn:hover { opacity: 0.9; }

/* ── HOMEPAGE RESPONSIVE ── */

/* ── HOMEPAGE FIXES (v5.1.0 hotfix) ── */

/* Quiz: ensure text stays dark inside white quiz card */
.cplh-home-quiz .cplh-hp-quiz__o,
.cplh-home-quiz .cplh-hp-quiz__ol,
.cplh-home-quiz .cplh-hp-quiz__q,
.cplh-home-quiz .cplh-hp-quiz__rt {
  color: #09090b !important;
}
.cplh-home-quiz .cplh-hp-quiz__od,
.cplh-home-quiz .cplh-hp-quiz__hint,
.cplh-home-quiz .cplh-hp-quiz__rd {
  color: #71717a !important;
}
.cplh-home-quiz .cplh-hp-quiz__o:focus {
  outline: 2px solid var(--lh-ac);
  outline-offset: 2px;
}

/* Tab link rows as anchors */
a.cplh-home-tabs__link-row {
  text-decoration: none;
  color: var(--lh-bk);
}
a.cplh-home-tabs__link-row:hover {
  text-decoration: none;
  border-color: var(--lh-ac);
}

/* ══════════════════════════════════════
   PHASE 3: DOMAIN DIRECTORY REDESIGN
   Prefix: cplh-dir-*
   ══════════════════════════════════════ */

/* ── Shared container (matches .cplh-wrap inner width) ── */
/* Content sits inside .cplh-wrap which already provides max-width and padding.
   This container adds no extra constraint, so body aligns perfectly with
   .c-header-band on sibling templates. */
.cplh-dir-cnt {
  width: 100%;
}

/* ── Section spacing ── */
.cplh-dir-section {
  margin-bottom: 48px;
}
/* Spacing modifiers for end-of-page sections */
.cplh-dir-section--lg { margin-bottom: 64px; }
.cplh-dir-section--xl { margin-bottom: 80px; }
/* FAQ divider (border-top separator before FAQ block) */
.cplh-dir-faq-wrap {
  border-top: 1px solid var(--lh-br);
  padding-top: 48px;
}
/* First section after hero gets breathing room */
.cplh-dir-hero + .cplh-dir-section {
  margin-top: 48px;
}

/* ── Section label (Sometype Mono kicker) ── */
.cplh-dir-kicker {
  font-family: var(--lh-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* ── Section H2 ── */
.cplh-dir-h2 {
  font-family: var(--lh-ff-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 24px;
  line-height: 1.25;
}
.cplh-dir-h2--tight { margin-bottom: 0; }

/* ── Section description ── */
.cplh-dir-desc {
  font-size: 15px;
  color: var(--lh-tx);
  margin: 0 0 32px;
  line-height: 1.7;
}

/* ═══ 1. DARK HERO ═══ */
/* Uses ::before pseudo for full-bleed dark background while content stays
   at normal .cplh-wrap width. Same pattern as .c-header-band. */
.cplh-dir-hero {
  position: relative;
  padding: 36px 0 32px;
}
.cplh-dir-hero::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(155deg, #14141a 0%, #1f1f27 60%, #282836 100%);
  z-index: 0;
}
.cplh-dir-hero::after {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.cplh-dir-hero > * {
  position: relative;
  z-index: 1;
}
.cplh-dir-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cplh-dir-hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cplh-dir-hero__label {
  font-family: var(--lh-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cplh-dir-hero__badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--lh-radius-lg);
}
.cplh-dir-hero__h1 {
  font-family: var(--lh-ff-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--lh-wh);
  margin: 0 0 8px;
  max-width: 720px;
}
/* Override .cplh-wrap h1 which has higher specificity */
.cplh-dir-hero .cplh-dir-hero__h1 {
  color: var(--lh-wh);
}
/* Breadcrumbs inside dark hero */
.cplh-dir-hero__crumbs {
  margin-bottom: 14px;
}
.cplh-dir-hero .c-breadcrumb a,
.cplh-dir-hero .c-breadcrumb__sep {
  color: rgba(255,255,255,0.35);
}
.cplh-dir-hero .c-breadcrumb a:hover {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.cplh-dir-hero .c-breadcrumb__current {
  color: rgba(255,255,255,0.55);
}
.cplh-dir-hero__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.7;
  max-width: 640px;
}

/* ═══ 2. PATHFINDER ROWS ═══ */
.cplh-dir-pf {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cplh-dir-pf__row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: var(--lh-wh);
  text-decoration: none;
  border-bottom: 1px solid var(--lh-br);
  border-left: 1px solid var(--lh-br);
  border-right: 1px solid var(--lh-br);
  cursor: pointer;
  transition: background 0.15s;
}
.cplh-dir-pf__row--first {
  border-top: 1px solid var(--lh-br);
  border-radius: 14px 14px 0 0;
}
.cplh-dir-pf__row--last {
  border-radius: 0 0 14px 14px;
}
.cplh-dir-pf__row:hover {
  background: var(--lh-bg);
}
.cplh-dir-pf__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--lh-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
}
.cplh-dir-pf__icon svg {
  width: 16px;
  height: 16px;
}
.cplh-dir-pf__text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--lh-bk);
  line-height: 1.3;
}
.cplh-dir-pf__dest {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══ 3. EXPLORE CARDS ═══ */
.cplh-dir-explore {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cplh-dir-explore__card {
  padding: 20px 24px;
  border-radius: var(--lh-card-r, 14px);
  border: 1px solid var(--lh-br);
  text-decoration: none;
  color: var(--lh-bk);
  display: flex;
  flex-direction: column;
  background: var(--lh-wh);
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.cplh-dir-explore__card:hover {
  border-color: var(--lh-ac);
  box-shadow: 0 4px 16px rgba(102,71,240,0.08);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--lh-bk);
}
.cplh-dir-explore__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cplh-dir-explore__tag {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.cplh-dir-explore__count {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--lh-cp);
  margin-left: auto;
}
.cplh-dir-explore__title {
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
  margin-bottom: 4px;
  line-height: 1.3;
}
.cplh-dir-explore__desc {
  font-size: 13px;
  color: var(--lh-tx);
  line-height: 1.5;
}

/* ═══ 2b. FEATURED SECTION CALLOUT ═══ */
.c-dir-featured {
  display: block;
  padding: 28px 32px;
  border-radius: var(--lh-radius-lg);
  border: 1px solid var(--lh-br);
  background: linear-gradient(135deg, #F9F8FE 0%, #FFFFFF 100%);
  text-decoration: none;
  color: var(--lh-bk);
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
.c-dir-featured:hover {
  border-color: var(--lh-ac);
  box-shadow: 0 6px 24px rgba(102,71,240,0.1);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--lh-bk);
}
.c-dir-featured__badge {
  display: inline-block;
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.c-dir-featured__title {
  font-family: var(--lh-ff-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
}
.c-dir-featured__desc {
  font-size: 14px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin-bottom: 16px;
}
.c-dir-featured__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lh-br-light);
}
.c-dir-featured__count {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--lh-cp);
}
.c-dir-featured__cta {
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
}

/* ═══ 4. MOST VISITED CAROUSEL ═══ */
.cplh-dir-popular-band {
  position: relative;
  padding: 48px 0;
  margin-bottom: 48px;
}
.cplh-dir-popular-band::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--lh-bg);
  border-top: 1px solid var(--lh-br);
  border-bottom: 1px solid var(--lh-br);
  z-index: 0;
}
.cplh-dir-popular-band > * {
  position: relative;
  z-index: 1;
}
.cplh-dir-popular__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cplh-dir-popular__arrows {
  display: flex;
  gap: 6px;
}
.cplh-dir-popular__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--lh-br);
  background: var(--lh-wh);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lh-bk);
  font-size: 16px;
  transition: all 0.15s;
  font-family: inherit;
}
.cplh-dir-popular__arrow:disabled {
  background: var(--lh-bg2);
  color: #ccc;
  cursor: default;
}
.cplh-dir-popular__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.cplh-dir-popular__track::-webkit-scrollbar { display: none; }

.cplh-dir-popular__card {
  min-width: 260px;
  max-width: 260px;
  padding: 20px 22px;
  border-radius: var(--lh-radius-lg);
  border: 1px solid var(--lh-br);
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  background: var(--lh-wh);
  scroll-snap-align: start;
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.2s;
}
.cplh-dir-popular__card:hover {
  border-color: var(--lh-ac);
  box-shadow: 0 4px 12px rgba(102,71,240,0.06);
  text-decoration: none;
}
.cplh-dir-popular__type {
  font-size: 11px;
  color: var(--lh-cp);
  background: var(--lh-bg2);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  align-self: flex-start;
  margin-bottom: 10px;
}
.cplh-dir-popular__title {
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
  line-height: 1.3;
  margin-bottom: 6px;
}
.cplh-dir-popular__desc {
  font-size: 13px;
  color: var(--lh-tx);
  line-height: 1.5;
  flex: 1;
}
.cplh-dir-popular__read {
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
}

/* ═══ 7. RELATED TOPICS ═══ */
.cplh-dir-related__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cplh-dir-related__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  text-decoration: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cplh-dir-related__card:hover {
  border-color: var(--lh-cp);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
  text-decoration: none !important;
}
.cplh-dir-related__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}
.cplh-dir-related__body {
  flex: 1;
  min-width: 0;
}
.cplh-dir-related__title {
  font-family: var(--lh-ff-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 6px;
  line-height: 1.3;
}
.cplh-dir-related__desc {
  font-size: 14px;
  color: var(--lh-tx);
  margin: 0;
  line-height: 1.5;
}
.cplh-dir-related__arrow {
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
  align-self: center;
  transition: transform 0.15s ease;
}
.cplh-dir-related__card:hover .cplh-dir-related__arrow {
  transform: translateX(3px);
}

/* ═══ MOBILE ═══ */

/* ── Override old directory styles on v2 pages ── */
.c-page--directory-v2 .c-header-band { display: none; }
.c-page--directory-v2 .c-directory-content { max-width: none; margin: 0; padding: 0; }
/* Fix: eliminate white strip between header border and dark hero */
.c-page--directory-v2 .cplh-dir-hero::before { top: -4px; }
.c-page--directory-v2 { margin-top: 0; padding-top: 0; }

/* ═══════════════════════════════════════════════════════════════════
   v5.6.0: TOC SIDEBAR (subcategory hub + industry pages)
   Replaces the old "Other Topics" browse sidebar.
   ═══════════════════════════════════════════════════════════════════ */
.c-toc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.c-toc { padding: 0; }
.c-toc__title {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lh-cp);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lh-br);
}
.c-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-toc__item { margin: 0; padding: 0; list-style: none; }
.c-toc__link {
  display: block;
  padding: 6px 10px 6px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lh-tx) !important;
  text-decoration: none !important;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.c-toc__link:hover {
  color: var(--lh-ac) !important;
  border-left-color: var(--lh-ac);
  background: rgba(108, 92, 231, 0.04);
  text-decoration: none !important;
}
.c-toc__link.is-active {
  color: var(--lh-ac) !important;
  border-left-color: var(--lh-ac);
  font-weight: 600;
}

/* ═══ Sidebar CTA card (shown below TOC) ═══ */
.c-toc-cta {
  position: relative;
  background: linear-gradient(160deg, #14141a 0%, #1f1f27 60%, #282836 100%);
  border-radius: var(--lh-radius-lg);
  padding: 18px;
  color: var(--lh-wh);
  overflow: hidden;
}
.c-toc-cta::before {
  content: "";
  position: absolute;
  inset: -30px auto auto -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.3), transparent 70%);
  pointer-events: none;
}
.c-toc-cta__eyebrow {
  position: relative;
  display: block;
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
}
.c-toc-cta__headline {
  position: relative;
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lh-wh);
  margin-bottom: 14px;
}
.c-toc-cta__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 14px;
  background: var(--lh-wh);
  color: #14141a !important;
  border-radius: var(--lh-radius-md);
  font-family: var(--lh-ff-heading);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
  transition: transform 0.15s;
}
.c-toc-cta__btn:hover {
  transform: translateY(-1px);
  color: #14141a !important;
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v5.6.0: CLOSING CARD (after FAQ on nav pages)
   ═══════════════════════════════════════════════════════════════════ */
.c-closing-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: linear-gradient(155deg, #14141a 0%, #1f1f27 60%, #282836 100%);
  border-radius: var(--lh-radius-xl);
  padding: 28px 32px;
  margin: 40px 0 16px;
  color: var(--lh-wh);
  overflow: hidden;
}
.c-closing-card::before {
  content: "";
  position: absolute;
  inset: -60px auto auto -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.28), transparent 70%);
  pointer-events: none;
}
.c-closing-card::after {
  content: "";
  position: absolute;
  inset: auto -80px -80px auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.14), transparent 70%);
  pointer-events: none;
}
.c-closing-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.c-closing-card__eyebrow {
  display: block;
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
}
.c-closing-card__title {
  font-family: var(--lh-ff-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--lh-wh);
  margin: 0 0 8px;
}
.c-closing-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 540px;
}
.c-closing-card__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 14px 22px;
  background: var(--lh-wh);
  color: #14141a !important;
  border-radius: var(--lh-radius-md);
  font-family: var(--lh-ff-heading);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
}
.c-closing-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.3);
  color: #14141a !important;
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v5.6.0: INDUSTRY PAGE DEFENSIVE BUTTON COLORS
   ═══════════════════════════════════════════════════════════════════ */
.c-page--industry .c-sidebar-cta__btn,
.c-page--industry a.c-sidebar-cta__btn {
  background: var(--lh-bk) !important;
  color: var(--lh-wh) !important;
}
.c-page--industry .c-sidebar-cta__btn:hover {
  background: #000000 !important;
  color: var(--lh-wh) !important;
}
.c-page--industry .c-cta-bar__btn,
.c-page--industry a.c-cta-bar__btn {
  background: var(--lh-wh) !important;
  color: #14141a !important;
}
.c-page--industry .c-cta-bar__btn:hover {
  background: #f5f5f5 !important;
  color: #14141a !important;
}

/* Hide the old browse sidebar on cluster-hub pages if it ever renders */
.c-page--cluster-hub .c-browse-sidebar { display: none; }

/* Tighten TOC sidebar column width */
.c-page--cluster-hub .c-layout-b__sidebar,
.c-page--industry .c-layout-b__sidebar {
  max-width: 280px;
}

/* Mobile: TOC sidebar stacks below content */
/* ============================================
   v5.8.1 PATCH — Restores v5.7.1 fixes lost
   during mega menu CSS delivery.
   APPEND this to the bottom of learn-hub.css
   ============================================ */

/* FIX 2: FAQ last item divider line should be removed */
.c-faq__item:last-child {
  border-bottom: none;
}

/* FIX 4: Equal spacing below last content card before footer */
.c-layout-b__content > :last-child {
  margin-bottom: var(--lh-last-gap, 64px);
}
.c-layout-a__content > :last-child {
  margin-bottom: var(--lh-last-gap, 64px);
}

/* ═══════════════════════════════════════════════════════════════════
   v5.8.2 PATCH — Targeted component fixes
   ═══════════════════════════════════════════════════════════════════ */

/* FIX A: Certification sibling list — reset pill-row to vertical stack */
.c-page--certification .c-tinted-box__list {
  display: block;
  flex-wrap: unset;
  gap: 0;
}
.c-page--certification .c-tinted-box__list-item {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--lh-br);
}
.c-page--certification .c-tinted-box__list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.c-page--certification .c-tinted-box__list-item a {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  display: block;
  font-weight: 600;
  color: var(--lh-bk);
  text-decoration: none;
}
.c-page--certification .c-tinted-box__list-item a:hover {
  border: none;
  background: none;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-page--certification .c-tinted-box__desc {
  display: block;
  font-size: 13px;
  color: var(--lh-tx);
  margin-top: 3px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   v5.8.3 PATCH
   ═══════════════════════════════════════════════════════════════════ */

/* FIX B: Closing card — force white text
   Root cause: .cplh-wrap h3 { color: var(--lh-bk) } has specificity (0,1,1)
   which beats .c-closing-card__title (0,1,0). Two-class selector (0,2,0) wins. */
.c-closing-card .c-closing-card__eyebrow { color: rgba(255,255,255,0.72) !important; }
.c-closing-card .c-closing-card__title   { color: var(--lh-wh) !important; }
.c-closing-card .c-closing-card__desc    { color: rgba(255,255,255,0.88) !important; }

/* FIX C: TOC sidebar CTA headline dark — same root cause as closing card */
.c-toc-cta .c-toc-cta__headline { color: var(--lh-wh) !important; }
.c-toc-cta .c-toc-cta__eyebrow  { color: rgba(255,255,255,0.72) !important; }

/* ─────────────────────────────────────────────────────────────────
   STEP TRAIL: compact horizontal step overview for guide pages
   Replaces the vertical c-step-overview list.
   ───────────────────────────────────────────────────────────────── */
.c-step-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 0;
  margin: 0 0 32px;
  padding: 16px 18px;
  background: var(--lh-bg);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  list-style: none;
}
.c-step-trail__item {
  display: flex;
  align-items: center;
}
.c-step-trail__link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--lh-radius-md);
  text-decoration: none !important;
  transition: background 0.12s;
  color: var(--lh-bk) !important;
}
.c-step-trail__link:hover {
  background: rgba(102, 71, 240, 0.07);
  color: var(--lh-ac) !important;
}
.c-step-trail__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--lh-radius-sm);
  background: var(--lh-ac);
  color: var(--lh-wh);
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.c-step-trail__label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
  white-space: nowrap;
}
.c-step-trail__sep {
  width: 14px;
  height: 1px;
  background: var(--lh-br);
  margin: 0 2px;
  flex-shrink: 0;
  align-self: center;
}
/* G-012 FIX: Collapse step trail earlier (900px) so guides with
   6+ steps don't overflow on tablet portrait */

/* ═══════════════════════════════════════════════════════════════════
   AUDIT FIX BATCH — April 17, 2026
   All findings from the UX/UI Responsive Audit, applied in order.
   ═══════════════════════════════════════════════════════════════════ */

/* ── G-001: Hide duplicate GeneratePress theme header ─────────────
   The GP theme renders its own header/nav alongside the plugin
   header. This hides the theme header when the plugin header
   is present.
   ───────────────────────────────────────────────────────────────── */
body:has(.cplh-header) .site-header,
body:has(.cplh-header) #masthead,
body:has(.cplh-header) .main-navigation:not(.cplh-header__nav),
body:has(.cplh-header) > .inside-header {
  display: none !important;
}
/* Hide theme skip-to-content link (plugin has its own) */
body:has(.cplh-header) > a.screen-reader-text[href="#content"],
body:has(.cplh-header) > a.skip-link {
  display: none !important;
}
/* Fallback for browsers without :has() — target GP's generated class */
.cplh-header ~ .site-header,
.aih-page .site-header,
.aih-page #masthead {
  display: none !important;
}

/* ── G-005 (partial): CTA button color consolidation ──────────────
   Replaces the 3 separate definitions with one canonical rule.
   All CTA bar buttons: white bg, dark text. No exceptions needed
   because all CTA bars use dark backgrounds.
   ───────────────────────────────────────────────────────────────── */
.c-cta-bar__btn,
.c-cta-bar__btn:hover,
.c-cta-bar__btn:focus {
  background: var(--lh-wh);
  color: var(--lh-bk) !important;
  opacity: 1;
}

/* ── G-008: Mobile hamburger positioning with admin bar ────────── */

/* ── G-009: Homepage bento grid tablet intermediate ────────────── */

/* ── G-011: Breadcrumb overflow fade indicator ─────────────────── */

.c-breadcrumbs::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--lh-wh));
  pointer-events: none;
  z-index: 1;
}
/* On the header band (gray bg), use the band's bg color for the fade */
.c-header-band .c-breadcrumbs::after {
  background: linear-gradient(to right, rgba(250,250,250,0), var(--lh-bg));
}

/* ── T-001: Homepage hero stats intermediate breakpoint ──────── */

/* ── T-002: Quiz component iPhone SE adjustment ──────────────── */

/* ── T-007: A-Z glossary filter mobile overflow ──────────────── */
.c-az-filter,
.az-filter,
[class*="az-filter"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── T-008: Mobile mega menu link limit ──────────────────────── */

/* ── Component Consistency: CTA bar variants ──────────────────── */
/* Two explicit variants instead of 10+ template-scoped overrides */
.c-cta-bar--light {
  background: var(--lh-bg);
  border: 1px solid var(--lh-br);
}
.c-cta-bar--light .c-cta-bar__text,
.c-cta-bar--light .c-cta-bar__text strong {
  color: var(--lh-bk);
}
.c-cta-bar--dark {
  background: var(--lh-bk);
}
.c-cta-bar--dark .c-cta-bar__text,
.c-cta-bar--dark .c-cta-bar__text strong {
  color: var(--lh-wh);
}

/* ── Component Consistency: Sidebar sticky behavior ────────────── */
/* All sidebars share the same sticky, collapse, and max-width */
.c-layout-b__sidebar,
.c-layout-a__sidebar {
  position: sticky;
  top: 80px;
  align-self: flex-start;
  max-width: 300px;
}

/* ── Component Consistency: Card radius standardization ────────── */
/* Standard cards: 12px. Featured/hero cards: 14px. */
.c-dir-nav-card,
.c-related-topics__card,
.c-career-links__card,
.c-compare-card,

.c-ranked-callout,
.c-ai-impact,
.c-sidebar-card,
.c-lever-card,
.c-role-card,
.c-salary-hero,
.c-salary-compact {
  border-radius: var(--lh-radius-lg);
}

/* ── T-006: AI Risk Score gauge mobile defense ───────────────── */
/* Defensive rules for risk score components on career/role pages.
   Ensures gauge and score text fit within mobile viewport. */
.c-ai-risk,
[class*="ai-risk"],
[class*="risk-score"] {
  max-width: 100%;
  overflow: hidden;
}

/* ── G-007 (documentation): Canonical breakpoint reference ────── */
/*
   BREAKPOINT STANDARD (April 2026 audit):
   480px  — small mobile (iPhone SE, compact Android)
   768px  — tablet portrait (iPad mini, standard tablets)
   1024px — tablet landscape / small laptop
   640px  — optional tight-fit override for specific components
   900px  — optional intermediate for wide grids (bento, paths)
   960px  — legacy header breakpoint (consider migrating to 1024px)
*/
/* ═══════════════════════════════════════════════════════════════════
   TOOL PROFILE v5.0.0 — New Components
   Append to learn-hub.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── Verdict Summary (appears near top, after rating) ──────────── */
.c-verdict-summary {
  background: var(--lh-bg);
  border: 1px solid var(--lh-br);
  border-left: 3px solid var(--lh-ac);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.c-verdict-summary p {
  font-size: 15px;
  color: var(--lh-bk);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

/* ── Feature checklist: negative cell (No / missing feature) ───── */
.c-table__cell--negative {
  color: var(--lh-cp);
}

/* ═══════════════════════════════════════════════════════════════════
   TOOL PROFILE v5.0.0 — New Components
   Append to learn-hub.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── Verdict Summary (appears near top, after rating) ──────────── */
.c-verdict-summary {
  background: var(--lh-bg);
  border: 1px solid var(--lh-br);
  border-left: 3px solid var(--lh-ac);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.c-verdict-summary p {
  font-size: 15px;
  color: var(--lh-bk);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

/* ── Feature checklist: negative cell (No / missing feature) ───── */
.c-table__cell--negative {
  color: var(--lh-cp);
}

/* ═══════════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE FIX PATCH — v2 CORRECTED
   April 2026 — Fixes regression from v1 patch where overflow-x: auto
   on .c-prose and .c-section caused containers to expand.
   
   THIS REPLACES the entire previous patch block.
   Delete everything from "COMPREHENSIVE RESPONSIVE FIX PATCH" to
   the end of learn-hub.css, then paste this instead.
   ═══════════════════════════════════════════════════════════════════ */


/* ── FIX 1: Layout B content overflow (CRITICAL) ──────────────────
   a) min-width: 0 prevents grid child from overflowing
   b) overflow-x: hidden clips any content that escapes
   c) Remove border-right and padding-right on mobile
   ───────────────────────────────────────────────────────────────── */
.c-layout-b__content {
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}


/* ── Canonical table overflow rule (replaces Gen 1/2/3 conflicts) ──
   Tables inside .c-table-wrap scroll horizontally.
   Tables NOT in a wrapper are constrained to container width.
   ──────────────────────────────────────────────────────────────── */
.c-table-wrap .c-table,
.c-table-wrap table {
  min-width: 100%;
  table-layout: auto;
}
/* Scroll hint: fade gradient on right edge when table is wider than wrapper */
.c-table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.c-table-wrap--scrollable::after { opacity: 1; }
.c-table-wrap--scrolled-end::after { opacity: 0; }


/* ── FIX 2: Table mobile scroll (CRITICAL — v2 CORRECTED) ─────────
   v1 bug: adding overflow-x: auto to .c-prose and .c-section made
   those containers EXPAND to fit wide tables, causing body text to
   overflow past the right viewport edge.
   
   v2 fix: ONLY .c-table-wrap gets overflow-x: auto. Prose and
   section containers get max-width: 100% to prevent expansion.
   Tables NOT in .c-table-wrap get wrapped behavior via the
   content area's overflow-x: hidden.
   ───────────────────────────────────────────────────────────────── */

/* Prose and section containers: CONSTRAIN, do NOT scroll. */


/* ── FIX 3: Topic switcher dropdown positioning (HIGH) ─────────── */


/* ── FIX 4: Search panel overflow on mobile (HIGH) ─────────────── */


/* ── FIX 5: Layout A collapse at 1024px (HIGH) ────────────────── */


/* ── FIX 6: Series nav flex-wrap defense (HIGH) ───────────────── */


/* ── FIX 7: Card grid tablet intermediate (HIGH) ──────────────── */


/* ── FIX 8: Admin bar sidebar sticky offset (MEDIUM) ──────────── */


/* ── FIX 9: Sidebar max-width on mobile (MEDIUM) ──────────────── */


/* ── FIX 10: REMOVED ──────────────────────────────────────────────
   overflow-x: hidden on .cplh-wrap was clipping the ::before
   pseudo-elements that use width: 100vw for full-bleed hero
   backgrounds on .c-header-band and .cplh-dir-hero.
   Overflow containment is now on .c-layout-b and .c-layout-a
   at mobile widths (see Fix 1 mobile section).
   ───────────────────────────────────────────────────────────────── */


/* ── PHP-1 CSS: Hide GP theme header via body class ────────────── */
body.cplh-has-header .site-header,
body.cplh-has-header #masthead,
body.cplh-has-header .main-navigation:not(.cplh-header__nav),
body.cplh-has-header > .inside-header {
  display: none !important;
}
body.cplh-has-header > a.screen-reader-text[href="#content"],
body.cplh-has-header > a.skip-link {
  display: none !important;
}


/* ── FIX 11: Topic switcher hover keeps dropdown open on mobile ───
   The :hover CSS rule keeps the dropdown visible on touch devices
   even after the JS toggles aria-expanded to false. On mobile,
   only aria-expanded should control dropdown visibility.
   ───────────────────────────────────────────────────────────────── */


/* ── FIX 12: White space between GP theme shell and plugin content ─
   The hidden GP theme elements still occupy space via margins.
   Zero out everything so .aih-page sits directly below the header.
   ───────────────────────────────────────────────────────────────── */
#page.grid-container,
#page,
.site-content,
.content-area,
.site-main {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
body.cplh-has-header .site-header,
body.cplh-has-header #masthead {
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  min-height: 0 !important;
}


/* ── FIX 13: TOC sidebar cleanup on mobile without Quick Facts ────
   When sidebar collapses to single-column and only contains
   back-link + TOC + CTA (no Quick Facts), remove extra dividers.
   ───────────────────────────────────────────────────────────────── */

/* ── Related Posts Cards (global component, below FAQ) ── */
.c-related-posts { margin-top: 40px; }
.c-related-posts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.c-related-posts__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  color: var(--lh-bk);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-related-posts__card:hover {
  border-color: #D4D0F0;
  box-shadow: 0 4px 12px rgba(102, 71, 240, 0.06);
  text-decoration: none;
}
.c-related-posts__badge {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lh-cp);
}
.c-related-posts__title {
  font-family: var(--lh-ff-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--lh-bk);
}
.c-related-posts__desc {
  font-size: 13px;
  color: var(--lh-tx);
  line-height: 1.5;
}
.c-related-posts__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  margin-top: auto;
}

/* ═══════════════════════════════════════════════════════
   AUTHOR PROFILE (v5.21.0 redesign)
   ═══════════════════════════════════════════════════════ */

/* ── Hero ── */
.c-author-hero {
  background: var(--lh-bg);
  padding: 48px 24px 0;
  border-bottom: 1px solid var(--lh-br);
}
.c-author-hero__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.c-author-hero__photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--lh-wh);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.c-author-hero__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F3FF;
  color: var(--lh-ac);
  font-family: var(--lh-ff-heading);
  font-size: 40px;
  font-weight: 700;
  border: 2px solid #EEEDFE;
}
.c-author-hero__detail { flex: 1; min-width: 0; }
.c-author-hero__name {
  font-family: var(--lh-ff-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 4px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.c-author-hero__title {
  font-size: 15px;
  color: var(--lh-tx);
  margin: 0 0 16px;
}
.c-author-hero__stats {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.c-author-hero__stat {
  font-size: 14px;
  color: var(--lh-cp);
}
.c-author-hero__stat strong {
  color: var(--lh-bk);
  font-weight: 700;
}
.c-author-hero__links {
  display: flex;
  gap: 8px;
}
.c-author-hero__social {
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
  padding: 5px 14px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-sm);
  transition: border-color 0.15s;
}
.c-author-hero__social:hover {
  border-color: var(--lh-ac);
  text-decoration: none;
}

/* Expertise tags strip */
.c-author-hero__expertise {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 20px auto 0;
  padding: 20px 0;
  border-top: 1px solid var(--lh-br);
}
.c-author-hero__exp-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  background: #F5F3FF;
  color: #534AB7;
  white-space: nowrap;
}

/* ── Body container ── */
.c-author-body {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

/* ── Section label ── */
.c-author-section { margin-bottom: 36px; }
.c-author-section__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lh-cp);
  margin-bottom: 12px;
}

/* ── Featured content grid ── */
.c-author-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.c-author-feat-card {
  display: block;
  padding: 16px 20px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  text-decoration: none;
  transition: border-color 0.15s;
  background: var(--lh-wh);
}
.c-author-feat-card:hover {
  border-color: #D4D0F0;
  text-decoration: none;
}
.c-author-feat-card__badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}
.c-author-feat-card__title {
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--lh-bk);
  line-height: 1.35;
  margin-bottom: 4px;
}
.c-author-feat-card__desc {
  font-size: 13px;
  color: var(--lh-tx);
  line-height: 1.4;
}
.c-author-feat-card__label {
  font-size: 12px;
  color: var(--lh-ac);
  font-weight: 600;
  display: inline-block;
  margin-top: 8px;
}

/* ── Bio + Methodology side by side ── */
.c-author-bio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}
.c-author-bio-card {
  padding: 20px 24px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  background: var(--lh-wh);
}
.c-author-bio-card .c-prose p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--lh-bk);
  margin-bottom: 10px;
}
.c-author-bio-card .c-prose p:last-child { margin-bottom: 0; }

/* ── Experience timeline ── */
.c-author-timeline {
  position: relative;
  padding-left: 24px;
}
.c-author-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--lh-br);
}
.c-author-timeline__item {
  position: relative;
  padding-bottom: 24px;
}
.c-author-timeline__item:last-child { padding-bottom: 0; }
.c-author-timeline__dot {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--lh-ac);
  background: var(--lh-wh);
}
.c-author-timeline__item--current .c-author-timeline__dot {
  background: var(--lh-ac);
}
.c-author-timeline__year {
  font-size: 12px;
  color: var(--lh-cp);
  font-weight: 600;
  margin-bottom: 2px;
}
.c-author-timeline__role {
  font-size: 15px;
  font-weight: 600;
  color: var(--lh-bk);
}
.c-author-timeline__co {
  font-size: 13px;
  color: var(--lh-tx);
}
.c-author-timeline__desc {
  font-size: 13px;
  color: var(--lh-tx);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Credentials grid ── */
.c-author-cred-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.c-author-cred {
  padding: 14px 18px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  background: var(--lh-wh);
}
.c-author-cred__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
}
.c-author-cred__org {
  font-size: 13px;
  color: var(--lh-tx);
}
.c-author-cred__year {
  font-size: 12px;
  color: var(--lh-cp);
  margin-top: 2px;
}

/* ── Content library filters ── */
.c-author-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.c-author-filter-btn {
  font-family: var(--lh-ff);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--lh-radius-sm);
  border: 1px solid var(--lh-br);
  background: var(--lh-wh);
  color: var(--lh-tx);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.c-author-filter-btn:hover {
  border-color: var(--lh-br-hover);
}
.c-author-filter-btn--active {
  background: var(--lh-bk);
  color: var(--lh-wh);
  border-color: var(--lh-bk);
}

/* ── Content list ── */
.c-author-content-list {
  display: grid;
  gap: 8px;
}
.c-author-article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  transition: border-color 0.15s;
  background: var(--lh-wh);
}
.c-author-article:hover {
  border-color: #D4D0F0;
  text-decoration: none;
}
.c-author-article__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.c-author-article__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.c-author-article__domain {
  font-size: 12px;
  color: var(--lh-cp);
  white-space: nowrap;
}
.c-author-article__title {
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--lh-bk);
  flex: 1;
  min-width: 0;
}
.c-author-article__type {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--lh-bg);
  color: var(--lh-tx);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Author box name link (keep from original) */
.c-author-box__name-link {
  text-decoration: none;
  color: inherit;
}
.c-author-box__name-link:hover {
  color: var(--lh-ac);
  text-decoration: none;
}

/* 
══════════════════════════════════════════════════════════════
 CONSOLIDATED RESPONSIVE RULES
 Grouped by breakpoint. Largest max-width first.
══════════════════════════════════════════════════════════════ */


@media (max-width: 1024px) {
  .c-layout-b {
    display: flex;
    flex-direction: column;
  }
  .c-layout-b__sidebar {
    position: static;
    order: -1;
    margin-bottom: 24px;
  }
  .c-layout-b__content {
    order: 1;
  }
  .c-two-col { grid-template-columns: 1fr; }
  .c-sidebar-facts--inline { grid-template-columns: 1fr 1fr; }
  .c-section-connector { margin: 24px 0; }
  
  .c-layout-b__sidebar,
  .c-layout-a__sidebar {
    position: static;
    max-width: 100%;
  }
  /* At mobile, .c-layout-b switches to flex-direction: column.
     Flex children are NOT constrained to parent width by default,
     so wide tables expand the child beyond the container.
     width + max-width constrain it; overflow clips any remaining leak. */
  .c-layout-b,
  .c-layout-a {
    overflow-x: hidden;
  }
  .c-layout-b__content,
  .c-layout-a__content {
    border-right: none;
    padding-right: 0;
    max-width: 100%;
    width: 100%;
  }
  .c-layout-a {
    grid-template-columns: 1fr;
  }
  .c-layout-a__sidebar {
    position: static;
    order: -1;
    margin-bottom: 24px;
    max-width: 100% !important;
    width: 100%;
  }
  
  .c-layout-b__sidebar,
  .c-layout-a__sidebar {
    max-width: 100% !important;
    width: 100%;
  }
  /* Override line 6939 which adds border-top at 900px */
  .c-toc-sidebar {
    border-top: none !important;
    padding-top: 0;
  }
  .c-toc-sidebar .c-sidebar-facts {
    border-top: none;
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 0;
  }
  .c-toc-sidebar .c-sidebar-facts:first-child {
    margin-top: 0;
  }
}


@media (max-width: 960px) {
  .cplh-header__nav-link { font-size: 13px; padding: 6px 8px; }
  .cplh-header__nav-chevron { display: none; }
  .cplh-header__mega-trigger { font-size: 13px; padding: 6px 8px; }
  .cplh-header__mega-trigger .cplh-header__nav-chevron { display: none; }
  .cplh-header__mega-cols,
  .cplh-header__mega-cols[data-mode="cols-1"],
  .cplh-header__mega-cols[data-mode="cols-2"],
  .cplh-header__mega-cols[data-mode="cols-3"],
  .cplh-header__mega-cols[data-mode="cols-1-feat"] {
    grid-template-columns: repeat(2, 1fr);
    padding: 20px 20px 16px;
    max-width: 100%;
  }
  .cplh-header__mega-cols[data-mode="cols-1-feat"] .cplh-header__mega-col {
    grid-template-columns: 1fr;
  }
  .cplh-header__mega-featured { grid-column: 1 / -1; }
  .cplh-header__mega-col-desc { display: none; }
  .c-scenario-row { flex-direction: column; gap: 2px; }
  .c-scenario-label { min-width: 0; }
  .c-template-card__body { flex-direction: column; align-items: flex-start; }
  .c-template-gallery__header { flex-wrap: wrap; }
  .c-template-gallery__cta { margin-top: 8px; }
  .c-template-gallery__card { padding: 16px; }
  .c-skill-name { min-width: 120px; }
  .c-template-includes__item { grid-template-columns: 1fr; gap: 2px; }
}


@media (max-width: 900px) {
  .c-toc-sidebar {
    position: static;
    max-height: none;
    /* margin-top, border-top, padding-top handled by Fix 6 and 1024px rules */
  }
  .c-toc { margin-bottom: 16px; }
  .c-step-trail {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .c-step-trail__label { white-space: normal; }
  .c-step-trail__sep { display: none; }
}


@media (max-width: 782px) {
  
  .admin-bar .cplh-header { top: 46px; }
  
  .admin-bar .cplh-header__nav--mobile-open {
    top: 94px; /* 48px header + 46px WP admin bar (mobile size) */
  }
}


@media (max-width: 768px) {
   .c-proscons { grid-template-columns: 1fr; }
  .c-header-band__title { font-size: 24px; }
  .c-header-band__excerpt { font-size: 14px; }
  .c-page__title { font-size: 1.8rem; }
  .c-hub__title { font-size: 1.8rem; }
  .c-cta-bar { flex-direction: column; text-align: center; }
  .c-table { font-size: 13px; }
  .c-table th, .c-table td { padding: 8px 10px; }
  .c-steps__num { width: 28px; height: 28px; font-size: 13px; }
  .c-hub__intents { grid-template-columns: 1fr; }
  .c-hub__domain-grid { grid-template-columns: 1fr; }
  .c-dir-questions { grid-template-columns: 1fr; }

  /* Ranked list: stack number above content on mobile (v5.49.1) */
  .c-ranked-list__item {
    flex-direction: column;
    gap: 10px;
  }
  .c-comp-cards { grid-template-columns: 1fr; }
  .c-choose-blocks { grid-template-columns: 1fr; }
  .c-who-grid { grid-template-columns: 1fr; }
  .c-card-grid { grid-template-columns: 1fr; }
  .c-two-col { grid-template-columns: 1fr; }
  .c-tool-hero { flex-direction: column; }
  .c-tmpl-actions { flex-direction: column; }
  .c-flow-diagram { flex-direction: column; align-items: stretch; }
  .c-flow-diagram__arrow { text-align: center; transform: rotate(90deg); }
  .c-image-gallery { grid-template-columns: 1fr; }
  .cplh-header__inner { gap: 8px; }
  .cplh-header__sep { margin: 0 8px; }
  .cplh-header__nav { display: none; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--lh-wh); border-bottom: 1px solid var(--lh-br); box-shadow: 0 8px 24px rgba(0,0,0,0.08); z-index: 1000; padding: 8px; }
  .cplh-header__nav--mobile-open { display: flex; }
  .cplh-header__topic-dropdown { width: calc(100vw - 48px); left: -40px; }
  .cplh-header__topic-switcher--hub .cplh-header__topic-dropdown { left: auto; right: -24px; }
  .cplh-header__topic-label { font-size: 13px; }
  .cplh-header__mega-item { border-bottom: 1px solid #f3f3f3; }
  .cplh-header__mega-item:last-child { border-bottom: none; }
  .cplh-header__mega-trigger { width: 100%; justify-content: space-between; padding: 12px 8px; font-size: 15px; font-weight: 500; color: #1a1a2e; }
  .cplh-header__mega-trigger .cplh-header__nav-chevron { display: block; transition: transform 0.2s; }
  .cplh-header__mega-trigger[aria-expanded="true"] .cplh-header__nav-chevron { transform: rotate(180deg); }
  .cplh-header__mega-panel { position: static; padding-top: 0; border-bottom: none; box-shadow: none; }
  .cplh-header__mega-cols { display: flex; flex-direction: column; gap: 0; padding: 0 0 8px; }
  .cplh-header__mega-col { padding: 8px 0; border-left: none; border-bottom: 1px solid #f3f3f3; }
  .cplh-header__mega-col:first-child { padding-left: 0; }
  .cplh-header__mega-col:last-child { border-bottom: none; }
  .cplh-header__mega-col-desc { display: none; }
  .cplh-header__mega-link { padding: 10px 8px; }
  .cplh-header__mega-footer { flex-direction: column; gap: 4px; padding: 8px 0 4px; border-top: none; }
  .cplh-header__nav-link--mobile-home { display: block !important; padding: 12px 8px; font-size: 15px; font-weight: 500; }
  .cplh-header__search { order: -1; margin-bottom: 8px; }
  .cplh-footer__nav {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* G-004: 4-col footer becomes 2x2 on tablet, 1-col on small mobile */
  .cplh-footer__nav--4col {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .cplh-footer__nav--3col {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .cplh-footer__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px 24px;
  }
  .cplh-footer__copyright {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .cplh-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
  }
  .cplh-footer__trust {
    flex-direction: column;
    gap: 8px;
  }
  .cplh-footer__tagline {
    margin-left: 0;
  }
  
  .cplh-header__domain-badge { display: none; }
  .cplh-header__cta { display: none; }
  .c-dir-nav-grid {
    grid-template-columns: 1fr;
  }
  .c-dir-popular-grid {
    grid-template-columns: 1fr;
  }
  .c-dir-nav-card {
    padding: 16px;
  }
  .c-section__header {
    flex-direction: column;
    gap: 4px;
  }
  .c-intent-grid { grid-template-columns: 1fr; }
  .c-featured-strip { grid-template-columns: 1fr; }
  .cplh-header__mobile-toggle {
    display: block !important;
  }
  .cplh-header__nav--mobile-open {
    display: flex !important;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--lh-wh);
    flex-direction: column;
    padding: 16px;
    gap: 0;
    z-index: 99999;
    overflow-y: auto;
    border-top: 1px solid var(--lh-br);
  }
  .cplh-header__nav--mobile-open .cplh-header__nav-link {
    padding: 14px 16px;
    font-size: 16px;
    border-bottom: 1px solid var(--lh-br);
    border-radius: 0;
  }
  .cplh-header__nav--mobile-open .cplh-header__nav-link--mobile-home {
    display: block !important;
    border-top: 2px solid var(--lh-br);
    margin-top: 8px;
    padding-top: 14px;
    color: var(--lh-ac);
    font-weight: 600;
  }
  .admin-bar .cplh-header__nav--mobile-open {
    top: 94px; /* 48px header + 46px admin bar */
  }
  .aih-hero__stats {
    padding-left: 16px;
    padding-right: 16px;
    gap: 12px;
  }
  .aih-hero__stat {
    min-width: calc(50% - 8px);
  }
  .c-table th,
  .c-table td {
    padding: 8px 10px;
    font-size: 13px;
    word-break: break-word;
  }
  .c-table th {
    font-size: 11px;
  }
  
  .c-entity-list th[style*="min-width"],
  .c-entity-list td[style*="min-width"] {
    min-width: 0 !important;
  }
  
  .c-series-nav__list {
    max-height: 120px;
    overflow-y: auto;
    border-bottom: 1px solid var(--lh-br);
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .cplh-hp-quiz-wrap{padding:0 20px}
  .cplh-hp-quiz{padding:24px;border-radius:var(--lh-radius-xl)}
  .cplh-hp-quiz__q{font-size:18px}
  .c-sidebar-facts--inline { grid-template-columns: 1fr; padding: 16px 20px; }
  .c-workflow-hero { padding: 24px 20px; }
  .c-workflow-hero__rail { padding-left: 36px; }
  .c-workflow-hero__node { left: -36px; width: 28px; height: 28px; font-size: 12px; }
  .c-workflow-hero__rail::before { left: 11px; }
  .c-workflow-hero__stage-title { font-size: 15px; }
  .c-ranked-callout { padding: 20px; border-radius: var(--lh-radius-md); }
  .c-ranked-callout__title { font-size: 16px; }
  .c-ai-impact { padding: 20px; border-radius: var(--lh-radius-md); }
  .c-ai-impact__title { font-size: 15px; }
  .c-section-group { padding: 24px 0; margin: 24px 0; }
  .c-eligibility-path { padding: 16px 20px; }
  .c-red-flags { padding: 16px 20px; }
  .c-criteria-card { padding: 14px 16px; }
  .c-criteria-card__header { flex-wrap: wrap; }
  .c-resource-item { flex-direction: column; gap: 8px; }
  .c-section-connector { gap: 12px; margin: 20px 0; }
  .c-workflow { padding: 24px 16px; }
  .c-workflow__stage { grid-template-columns: 32px 1fr; gap: 12px; }
  .c-workflow__node { width: 32px; height: 32px; font-size: 13px; }
  .c-workflow__rail::before { left: 15px; }
  .c-dir-pathfinder { grid-template-columns: 1fr; }
  .c-hub-actions { grid-template-columns: 1fr; }
  /* G-003 FIX: Let simple tables flow naturally on mobile.
     Only force horizontal scroll on data-heavy comparison/feature tables. */
  .c-table {
    min-width: 0;
    width: 100%;
  }
  .c-page--comparison .c-table,
  .c-page--feature-overview .c-table {
    min-width: 600px;
  }
  .c-table th:first-child,
  .c-table td:first-child {
    min-width: 100px;
  }
  .c-directory-content {
    padding: 24px 0 0 !important;
  }
  .c-dir-popular-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .c-directory-content .c-section {
    margin-bottom: 36px;
  }
  .cplh-home-hero__h1 { font-size: 32px; }
  .cplh-home-hero__stats { flex-direction: column; gap: 8px; }
  .cplh-home-tabs__grid { grid-template-columns: 1fr; }
  .cplh-home-ai-grid { grid-template-columns: 1fr; }
  .cplh-home-pop-grid { grid-template-columns: 1fr; }
  .cplh-home-cta { flex-direction: column; text-align: center; }
  .cplh-home-quiz { padding: 20px 16px; }
  .cplh-dir-hero__h1 { font-size: 28px; }
  .cplh-dir-hero__sub { font-size: 15px; }
  .cplh-dir-explore { grid-template-columns: 1fr; }
  .cplh-dir-popular__card { min-width: 240px; max-width: 240px; }
  .cplh-dir-pf__dest { display: none; }
  .cplh-dir-related__grid { grid-template-columns: 1fr; }
  .c-closing-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
  }
  .c-closing-card__btn {
    width: 100%;
    justify-content: center;
  }
  .cplh-header__nav--mobile-open {
    top: 48px;
  }
  .admin-bar .cplh-header__nav--mobile-open {
    top: 94px; /* 48px header + 46px admin bar on mobile */
  }
  /* Limit visible links per column to first 5 on mobile */
  .cplh-header__mega-col .cplh-header__mega-link:nth-child(n+7) {
    display: none;
  }
  /* Always show "View all" link */
  .cplh-header__mega-viewall {
    display: block !important;
  }
  /* Cap mega panel height to prevent overwhelming scroll */
  .cplh-header__mega-panel {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Smaller featured card on mobile mega menu */
  .cplh-header__mega-featured {
    min-height: auto;
    padding: 16px;
    border-radius: var(--lh-radius-md);
    margin-top: 8px;
  }
  .cplh-header__mega-featured-title {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .cplh-header__mega-featured-desc {
    font-size: 12px;
    margin-bottom: 12px;
  }
  /* Tables inside wrappers: can be wider than viewport */
  .c-table-wrap .c-table,
  .c-table-wrap table {
    width: auto !important;
    min-width: 100%;
  }

  /* Bare tables in prose (not wrapped in .c-table-wrap):
     constrain to container width, allow horizontal scroll on the TABLE */
  .c-prose > table,
  .c-section > table,
  .c-layout-b__content > table,
  .c-layout-a__content > table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ACF-wrapped tables: readable min-widths so columns don't squeeze */
  .c-table-wrap table:has(th:nth-child(5)),
  .c-table-wrap table:has(td:nth-child(5)) {
    min-width: 600px;
  }

  .c-table-wrap table:has(th:nth-child(4)):not(:has(th:nth-child(5))),
  .c-table-wrap table:has(td:nth-child(4)):not(:has(td:nth-child(5))) {
    min-width: 500px;
  }
  .cplh-header__topic-dropdown {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    width: auto !important;
    margin-top: 8px;
    z-index: 10000;
  }
  .cplh-header__topic-panel {
    width: 100% !important;
  }
  .cplh-header__topic-switcher--hub .cplh-header__topic-dropdown {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
  }
  
  .cplh-header__search-panel {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    top: auto !important;
    margin-top: 8px;
    z-index: 10000;
  }
  .cplh-header__topic-switcher:hover .cplh-header__topic-dropdown {
    display: none !important;
  }
  .cplh-header__topic-btn[aria-expanded="true"] + .cplh-header__topic-dropdown {
    display: block !important;
  }
  .c-skill-grid { grid-template-columns: 1fr; }
  .c-related-posts__grid { grid-template-columns: 1fr; }
  .c-author-hero__inner { flex-direction: column; align-items: center; text-align: center; }
  .c-author-hero__stats { justify-content: center; }
  .c-author-hero__links { justify-content: center; }
  .c-author-hero__expertise { justify-content: center; }
  .c-author-bio-grid { grid-template-columns: 1fr; }
  .c-author-cred-grid { grid-template-columns: 1fr; }
  .c-author-featured { grid-template-columns: 1fr; }
  .c-author-article { flex-direction: column; align-items: flex-start; gap: 6px; }
  .c-author-article__type { align-self: flex-start; }
  .c-skill-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .c-skill-tab { white-space: nowrap; padding: 10px 14px; }
}


@media (max-width: 600px) {
  
  .c-guide-toc__list { grid-template-columns: 1fr; }
  .c-page--tool-profile .c-table {
    font-size: 12px;
  }
  .c-page--tool-profile .c-table th,
  .c-page--tool-profile .c-table td {
    padding: 6px 8px;
  }
  .c-choose-blocks { grid-template-columns: 1fr; }
  .c-comp-cards { grid-template-columns: 1fr; }
  .c-two-col { grid-template-columns: 1fr; }
  .c-who-grid { grid-template-columns: 1fr; }
  .c-proscons { grid-template-columns: 1fr; }
  
  .c-step-overview {
    grid-template-columns: 1fr;
  }
  
    grid-column: span 12;
  }
}


@media (max-width: 480px) {
  .cplh-wrap { padding: 0 16px 32px; }
  .c-page__title { font-size: 1.5rem; }
  .c-hub__hero { padding: 32px 20px; }
  
  .cplh-footer__nav--4col,
  .cplh-footer__nav--3col {
    grid-template-columns: 1fr;
  }
  .c-dir-pills {
    gap: 6px;
  }
  .c-dir-pill {
    font-size: 10px;
    padding: 3px 10px;
  }
  .aih-hero__stats {
    padding-left: 12px;
    padding-right: 12px;
  }
  .aih-hero__stat {
    min-width: 100%;
  }
  
  .c-table th,
  .c-table td {
    padding: 6px 8px;
    font-size: 12px;
  }
  
  .c-cta-bar__btn {
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .cplh-wrap h2 {
    font-size: 1.2rem;
  }
  .cplh-wrap h3 {
    font-size: 1.05rem;
  }
  
  .cplh-header__topic-label {
    font-size: 12px;
  }
  
  .c-methodology {
    padding: 14px;
  }
  
  .cplh-home-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .c-entity-card {
    padding: 14px;
  }
  .c-learning-path {
    border-radius: var(--lh-radius-md);
  }
  .c-learning-path__item {
    padding: 12px 14px;
  }
  
  .c-sidebar-cta__btn {
    font-size: 13px;
    padding: 10px 16px;
  }
  .c-ranked-list__item {
    padding: 14px 16px;
  }
  .c-ranked-list__rank {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .c-ranked-list__name {
    font-size: 15px;
  }
  .c-ranked-list__desc {
    font-size: 13px;
  }
  /* Enhanced card mobile (v5.16.0) */
  h3.c-ranked-list__name { font-size: 15px; }
  .c-ranked-list__overview { font-size: 13px; }
  .c-ranked-list__media { gap: 8px; }
  .c-ranked-list__thumb { flex: 1 1 100%; max-width: 100%; }
  .c-ranked-list__thumb:nth-child(n+3) { flex: 0 0 75vw; max-width: 75vw; }
  .c-ranked-list__verdict { font-size: 14px; }
  .c-ranked-list__proscons { grid-template-columns: 1fr; gap: 12px; }
  .c-ranked-list__updates-row { flex-direction: column; gap: 2px; }
  .c-ranked-list__updates-date { width: auto; }
  .c-ranked-list__updates-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .c-ranked-list__footer { gap: 10px; }

  /* News template responsive */
  .c-news-entry { flex-direction: column; gap: 4px; }
  .c-news-entry__date { width: auto; }
  .c-changelog__header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .c-news-stats { gap: 12px; }
  .c-how-compares {
    padding: 14px;
  }
  .c-tinted-box {
    padding: 14px;
  }
  
  .c-author-box {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .cplh-hp-quiz-wrap{padding:0 16px;margin-top:-36px}
  .cplh-hp-quiz{padding:20px;border-radius:14px}
  .cplh-hp-quiz__o{padding:12px 14px;gap:10px}
  
  .c-dir-popular-grid {
    grid-template-columns: 1fr;
  }
  .c-az-filter,
  .az-filter,
  [class*="az-filter"] {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .c-az-filter button,
  .az-filter button,
  .az-filter a,
  [class*="az-filter"] button,
  [class*="az-filter"] a {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 6px;
    font-size: 12px;
    flex-shrink: 0;
  }
  .c-ai-risk__gauge,
  [class*="risk-gauge"],
  [class*="ai-risk"] canvas,
  [class*="ai-risk"] svg {
    max-width: 100%;
    height: auto;
  }
  .c-ai-risk__score,
  [class*="risk-score__value"] {
    font-size: 28px;
  }
}


@media (max-width: 375px) {
  .cplh-hp-quiz__o {
    padding: 10px 12px;
    gap: 8px;
    font-size: 14px;
  }
  .cplh-hp-quiz__k {
    width: 22px;
    height: 22px;
    font-size: 9px;
    border-radius: var(--lh-radius-sm);
  }
  .cplh-hp-quiz__q {
    font-size: 16px;
  }
}


@media (max-width: 600px) and (min-width: 481px) {
    min-width: calc(50% - 8px);
  }
}


@media (min-width: 783px) {
  
  .admin-bar .cplh-header__nav--mobile-open {
    top: 80px; /* 48px header + 32px WP admin bar (desktop size) */
  }
}


@media (max-width: 900px) and (min-width: 601px) {
    grid-column: span 6;
  }
    grid-column: span 6;
  }
}


@media (max-width: 960px) and (min-width: 481px) {
  .c-card-grid,
  .c-intent-grid,
  .c-comp-cards,
  .c-choose-blocks,
  .c-who-grid,
  .c-proscons,
  .c-hub__intents,
  .c-hub__domain-grid,
  .c-dir-questions,
  .c-two-col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


@media (min-width: 1025px) {
  
  .admin-bar .c-layout-b__sidebar,
  .admin-bar .c-layout-a__sidebar {
    top: 112px;
  }
}


/* ================================================================
   RESEARCH HUB COMPONENTS (v5.9.1)
   Ported from old theme ai-stats.css + ai-changing-work.css
   + 4 new components for survey/insight pages
   v5.9.1: Spacing rhythm, data bar animation, stat hero polish,
           copy button hover, sources grouping, section wrapper
   ================================================================ */

/* ── Research Data Section Wrapper ── */
.c-research-data {
  margin: 32px 0;
}
.c-research-data > *:first-child { margin-top: 0; }
.c-research-data > *:last-child { margin-bottom: 0; }
.c-research-data--sources { margin-top: 0; }

/* ── Stat Cards Grid ── */
.c-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 16px 0 32px;
}
.c-stats-grid--2col { grid-template-columns: repeat(2, 1fr); }
.c-stats-grid--3col { grid-template-columns: repeat(3, 1fr); }

/* ── Stat Card ── */
.c-stats-card {
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  padding: 14px 16px;
}
.c-stats-card__value {
  font-family: var(--lh-ff-heading);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 3px;
  color: var(--lh-bk);
}
.c-stats-card__value--purple { color: var(--lh-ac); }
.c-stats-card__value--green { color: var(--lh-ok); }
.c-stats-card__value--orange { color: #E59500; }
.c-stats-card__value--blue { color: #3B82F6; }
.c-stats-card__value--teal { color: #0F9D8F; }
.c-stats-card__value--pink { color: #D4537E; }
.c-stats-card__desc {
  font-size: 12px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin-bottom: 4px;
}
.c-stats-card__source {
  font-size: 10px;
  color: var(--lh-cp);
  font-family: var(--lh-mono);
}

/* ── Copy Stat Button (v5.9.1 polish) ── */
.c-stats-card__copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--lh-mono);
  font-weight: 500;
  color: var(--lh-ac);
  background: #F5F3FF;
  border: 1px solid #D4D0F0;
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.c-stats-card__copy:hover {
  background: #ede9ff;
  transform: scale(1.03);
}
.c-stats-card__copy.is-copied {
  background: #e8f7f0;
  color: #30A46C;
  border-color: #b3e6cc;
}

/* ── Stats Label (section heading) ── */
.c-stats-label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lh-cp);
  margin: 24px 0 10px;
}
.c-stats-label:first-child { margin-top: 0; }

/* ── Data Bars (CSS horizontal bar chart with animation) ── */
.c-data-bars { margin: 24px 0 32px; }
.c-data-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  transition: background 0.15s ease;
  border-radius: var(--lh-radius-sm);
  padding: 2px 0;
}
.c-data-bar:hover { background: var(--lh-bg); }
.c-data-bar:hover .c-data-bar__label { font-weight: 600; color: var(--lh-bk); }
.c-data-bar:hover .c-data-bar__value { color: var(--lh-ac); }
.c-data-bar__label {
  font-size: 12px;
  color: var(--lh-tx);
  min-width: 90px;
  text-align: right;
  transition: font-weight 0.15s ease, color 0.15s ease;
}
.c-data-bar__track {
  flex: 1;
  height: 24px;
  background: #F5F5F5;
  border-radius: var(--lh-radius-sm);
  overflow: hidden;
}
.c-data-bar__fill {
  height: 100%;
  border-radius: var(--lh-radius-sm);
  width: 0;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.c-data-bar__fill.is-animated {
  /* width set via inline style, transition handles the animation */
}
.c-data-bar:hover .c-data-bar__fill {
  filter: brightness(1.08);
}
.c-data-bar__value {
  font-family: var(--lh-ff-heading);
  font-size: 12px;
  font-weight: 700;
  min-width: 36px;
  text-align: right;
  color: var(--lh-bk);
  transition: color 0.15s ease;
}

/* ── Chart Container (Chart.js) ── */
.c-chart {
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  padding: 16px 18px;
  margin: 24px 0 32px;
  min-height: 200px;
}
.c-chart__title {
  font-family: var(--lh-mono);
  font-size: 10px;
  color: var(--lh-cp);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.c-chart__placeholder {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lh-cp);
  font-size: 11px;
  font-family: var(--lh-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Stats Narrative (Our Take) ── */
.c-stats-narrative {
  margin: 32px 0;
  padding: 16px 20px;
  background: var(--lh-bg);
  border-left: 3px solid var(--lh-ac);
  border-radius: 0;
}
.c-stats-narrative__label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lh-ac);
  margin-bottom: 8px;
}
.c-stats-narrative p {
  font-size: 14px;
  color: var(--lh-tx);
  line-height: 1.7;
  margin-bottom: 8px;
}
.c-stats-narrative p:last-child { margin-bottom: 0; }

/* ── Stats Sources (v5.9.1: tighter grouping with data above) ── */
.c-stats-sources {
  font-size: 11px;
  color: var(--lh-cp);
  padding-top: 14px;
  border-top: 1px solid var(--lh-br-light);
  margin-top: 12px;
  margin-bottom: 40px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lh-br-light);
}
.c-stats-sources a { color: var(--lh-ac); text-decoration: none; }
.c-stats-sources a:hover { text-decoration: underline; }

/* ── Cross-Links (pill navigation) ── */
.c-xlinks {
  border-top: 1px solid var(--lh-br-light);
  padding-top: 16px;
  margin: 32px 0;
}
.c-xlinks__label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lh-cp);
  margin-bottom: 8px;
}
.c-xlinks__list { display: flex; flex-wrap: wrap; gap: 6px; }
.c-xlinks__link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  color: var(--lh-tx);
  background: #F5F5F5;
  border: 1px solid var(--lh-br);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.c-xlinks__link:hover {
  background: #F5F3FF;
  color: var(--lh-ac);
  border-color: #D4D0F0;
  text-decoration: none;
}

/* ── Stat Hero (v5.9.1: background tint, larger value, divider) ── */
.c-stat-hero {
  text-align: center;
  padding: 32px 24px;
  margin: 0 0 32px;
  background: #F9F8FE;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
}
.c-stat-hero__value {
  font-family: var(--lh-ff-heading);
  font-size: 56px;
  font-weight: 800;
  color: var(--lh-ac);
  line-height: 1;
}
.c-stat-hero__desc {
  font-size: 15px;
  color: var(--lh-tx);
  margin-top: 8px;
  line-height: 1.5;
}
.c-stat-hero__divider {
  width: 40px;
  height: 1px;
  background: var(--lh-br);
  margin: 12px auto;
}
.c-stat-hero__source {
  font-family: var(--lh-mono);
  font-size: 10px;
  color: var(--lh-cp);
  margin-top: 0;
  letter-spacing: 0.02em;
}

/* ── Survey Card (insight page preview on survey pages) ── */
.c-survey-card {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.c-survey-card:hover { border-color: var(--lh-ac); text-decoration: none; }
.c-survey-card__stat {
  font-family: var(--lh-ff-heading);
  font-size: 24px;
  font-weight: 800;
  color: var(--lh-ac);
  min-width: 52px;
  text-align: center;
  flex-shrink: 0;
}
.c-survey-card__body { flex: 1; min-width: 0; }
.c-survey-card__title {
  font-family: var(--lh-ff-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--lh-bk);
  margin-bottom: 2px;
}
.c-survey-card__desc { font-size: 11px; color: var(--lh-tx); }
.c-survey-card__arrow {
  color: var(--lh-br);
  font-size: 14px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.c-survey-card:hover .c-survey-card__arrow { color: var(--lh-ac); }

/* ── Jump Links in Series Nav ── */
.c-series-nav__jumps-label {
  font-family: var(--lh-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-cp);
  margin: 12px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--lh-br);
}
.c-series-nav__jumps { list-style: none; padding: 0; margin: 0; }
.c-series-nav__jumps li { margin-bottom: 1px; }
.c-series-nav__jumps a {
  display: block;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--lh-ac);
  text-decoration: none;
  border-radius: 4px;
}
.c-series-nav__jumps a:hover { background: #F5F3FF; }

/* ── Research Responsive ── */
@media (max-width: 768px) {
  .c-stats-grid,
  .c-stats-grid--2col,
  .c-stats-grid--3col { grid-template-columns: 1fr; }
  .c-data-bar__label { min-width: 70px; font-size: 11px; }
  .c-stat-hero__value { font-size: 40px; }
  .c-stat-hero { padding: 24px 16px; }
  .c-xlinks__list { flex-direction: column; }
  .c-research-data { margin: 24px 0; }
}
@media (max-width: 480px) {
  .c-stats-card { padding: 12px 14px; }
  .c-stats-card__value { font-size: 18px; }
  .c-stat-hero__value { font-size: 36px; }
}

/* ================================================================
   RESEARCH PORTAL COMPONENTS (v5.10.0)
   ================================================================ */

/* ── Portal Headline Numbers Strip ── */
.c-portal-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 8px 0 16px;
}
.c-portal-numbers__item {
  text-align: center;
  padding: 20px 16px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
}
.c-portal-numbers__value {
  font-family: var(--lh-ff-heading);
  font-size: 36px;
  font-weight: 800;
  color: var(--lh-ac);
  line-height: 1;
  margin-bottom: 4px;
}
.c-portal-numbers__value--purple { color: var(--lh-ac); }
.c-portal-numbers__value--green { color: var(--lh-ok); }
.c-portal-numbers__value--orange { color: #E59500; }
.c-portal-numbers__value--blue { color: #3B82F6; }
.c-portal-numbers__value--teal { color: #0F9D8F; }
.c-portal-numbers__value--pink { color: #D4537E; }
.c-portal-numbers__desc {
  font-size: 13px;
  color: var(--lh-tx);
  line-height: 1.4;
  margin-bottom: 2px;
}
.c-portal-numbers__source {
  font-family: var(--lh-mono);
  font-size: 10px;
  color: var(--lh-cp);
}

/* ── Portal Survey Cards ── */
.c-portal-surveys {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.c-portal-card {
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  border-radius: var(--lh-radius-lg);
  border: 1px solid var(--lh-br);
  background: var(--lh-wh);
  text-decoration: none;
  color: var(--lh-bk);
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
.c-portal-card:hover {
  border-color: var(--lh-ac);
  box-shadow: 0 6px 24px rgba(102,71,240,0.1);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--lh-bk);
}
.c-portal-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.c-portal-card__badge {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lh-ac);
  background: #F0EEFF;
  padding: 3px 8px;
  border-radius: 4px;
}
.c-portal-card__date {
  font-family: var(--lh-mono);
  font-size: 10px;
  color: var(--lh-cp);
}
.c-portal-card__title {
  font-family: var(--lh-ff-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--lh-bk);
  line-height: 1.3;
  margin-bottom: 6px;
}
.c-portal-card__desc {
  font-size: 14px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin-bottom: 16px;
}
.c-portal-card__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--lh-br-light);
}
.c-portal-card__stat {
  font-family: var(--lh-ff-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--lh-ac);
  line-height: 1;
}
.c-portal-card__meta {
  display: flex;
  gap: 12px;
  flex: 1;
}
.c-portal-card__sample,
.c-portal-card__insights {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--lh-cp);
}
.c-portal-card__arrow {
  font-size: 18px;
  color: var(--lh-br);
  transition: color 0.15s;
  flex-shrink: 0;
}
.c-portal-card:hover .c-portal-card__arrow { color: var(--lh-ac); }

/* When 2+ surveys exist, switch to 2-col grid */
.c-portal-surveys:has(.c-portal-card:nth-child(2)) {
  grid-template-columns: repeat(2, 1fr);
}

/* ── Callout Component ── */
.c-callout {
  padding: 16px 20px;
  border-radius: var(--lh-radius-md);
  margin: 24px 0;
}
.c-callout--default {
  background: var(--lh-bg);
  border-left: 3px solid var(--lh-br);
}
.c-callout--accent {
  background: #F5F3FF;
  border-left: 3px solid var(--lh-ac);
}
.c-callout--highlight {
  background: #FFFBEB;
  border-left: 3px solid #E59500;
}
.c-callout__text {
  font-size: 14px;
  color: var(--lh-bk);
  line-height: 1.7;
}
.c-callout__attr {
  font-family: var(--lh-mono);
  font-size: 10px;
  color: var(--lh-cp);
  margin-top: 6px;
}

/* ── Portal Responsive ── */
@media (max-width: 768px) {
  .c-portal-numbers { grid-template-columns: repeat(2, 1fr); }
  .c-portal-surveys,
  .c-portal-surveys:has(.c-portal-card:nth-child(2)) { grid-template-columns: 1fr; }
  .c-portal-card__stat { font-size: 22px; }
  .c-portal-numbers__value { font-size: 28px; }
}
@media (max-width: 480px) {
  .c-portal-numbers { grid-template-columns: 1fr; }
  .c-portal-card { padding: 18px 20px; }
  .c-portal-card__title { font-size: 17px; }
}

/* ── Author Profile Page ────────────────────────────────────── */
.c-author-profile { max-width: 720px; margin: 0 auto; padding: 48px 24px; }
.c-author-profile__main { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 48px; }
.c-author-profile__avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--lh-ac); color: var(--lh-wh);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--lh-ff-heading);
  font-size: 24px; font-weight: 700; flex-shrink: 0;
}
.c-author-profile__info { flex: 1; }
.c-author-profile__linkedin {
  display: inline-block; margin-top: 12px;
  font-size: 14px; font-weight: 600; color: var(--lh-ac); text-decoration: none;
}
.c-author-profile__linkedin:hover { text-decoration: underline; }

/* Byline link styling */
.c-byline__link { color: var(--lh-bk); text-decoration: none; }
.c-byline__link:hover { color: var(--lh-ac); text-decoration: underline; }
.c-author-box__name-link { color: var(--lh-bk); text-decoration: none; }
.c-author-box__name-link:hover { color: var(--lh-ac); text-decoration: underline; }

/* Entity list for author posts */
.c-entity-list { display: flex; flex-direction: column; gap: 8px; }
.c-entity-list__item {
  display: block; padding: 16px 20px;
  background: var(--lh-wh); border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md); text-decoration: none; color: var(--lh-bk);
  transition: border-color 0.15s;
}
.c-entity-list__item:hover { border-color: var(--lh-ac); }
.c-entity-list__name { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.c-entity-list__desc { font-size: 13px; color: var(--lh-tx); }

/* ═══════════════════════════════════════════════════════════════════
   CODE BLOCK + INSIGHT CALLOUT LABEL (migrated from ai-components.css)
   Uses --lh-* tokens. Originals in ai-components.css will be removed
   after stats-card conflict is resolved.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Prompt / Code Block ── */
.c-code-block {
  position: relative;
  background: var(--lh-bk);
  border-radius: var(--lh-radius-lg);
  padding: 24px;
  margin-bottom: 16px;
}
.c-code-block pre {
  font-family: var(--lh-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.c-code-block .c-var {
  color: #A78BFA;
  font-style: normal;
}
.c-code-block__copy {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  border-radius: var(--lh-radius-md);
  padding: 6px 14px;
  font-family: var(--lh-ff);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
}
.c-code-block__copy:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
.c-code-block__copy.is-copied {
  color: var(--lh-ok);
  border-color: rgba(48, 164, 108, 0.3);
}

/* ── Insight Callout Label ── */
.c-callout--insight .c-callout__label {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-ac);
  margin-bottom: 6px;
}

/* ── Code Block Responsive ── */
@media (max-width: 768px) {
  .c-code-block { padding: 16px; }
  .c-code-block__copy { position: static; display: block; margin-top: 12px; width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   TRENDS TEMPLATE (v5.11.0)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stat Card Grid ── */
.c-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.c-stat-card {
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c-stat-card__label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lh-cp);
}
.c-stat-card__value {
  font-family: var(--lh-ff-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--lh-bk);
  line-height: 1.15;
}
.c-stat-card__delta {
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.c-stat-card__delta--up { color: var(--lh-ok); }
.c-stat-card__delta--down { color: var(--lh-er); }
.c-stat-card__source {
  font-size: 11px;
  color: var(--lh-cp);
  margin-top: 2px;
}

/* ── Chart Wrapper ── */
.c-chart-wrap {
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  padding: 24px;
  margin-bottom: 8px;
}
.c-chart-wrap__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.c-chart-wrap__title {
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
}
.c-chart-wrap__source {
  font-size: 11px;
  color: var(--lh-cp);
  font-family: var(--lh-mono);
}
.c-chart-wrap canvas {
  width: 100% !important;
  max-height: 320px;
}

/* ── Category Tab Bar ── */
.c-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--lh-br);
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.c-tab {
  padding: 10px 16px;
  font-family: var(--lh-ff);
  font-size: 14px;
  font-weight: 500;
  color: var(--lh-tx);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.c-tab:hover { color: var(--lh-bk); }
.c-tab--active {
  color: var(--lh-ac);
  font-weight: 600;
  border-bottom-color: var(--lh-ac);
}

/* ── Trend Cards ── */
.c-trend-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
}
.c-trend-card {
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  padding: 22px 24px;
  transition: border-color 0.15s, box-shadow 0.25s;
}
.c-trend-card:hover {
  border-color: #D4D0F0;
  box-shadow: 0 4px 16px rgba(102, 71, 240, 0.08);
}
.c-trend-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.c-trend-card__number {
  font-family: var(--lh-ff-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--lh-br);
  line-height: 1;
  flex-shrink: 0;
}
.c-trend-card__meta { flex: 1; }
.c-trend-card__title {
  font-family: var(--lh-ff-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--lh-bk);
  line-height: 1.3;
  margin-bottom: 4px;
}
.c-trend-card__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.c-trend-card__badge {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--lh-radius-sm);
  border: 1px solid var(--lh-br);
}
.c-trend-card__badge--high { background: #e8f7f0; color: #1a7a4a; }
.c-trend-card__badge--medium { background: #fff0e6; color: #b35000; }
.c-trend-card__badge--emerging { background: #e0f0ff; color: #0062b3; }
.c-trend-card__badge--category { background: #f0eeff; color: #4a2db3; }

.c-trend-card__body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--lh-tx);
  margin-bottom: 4px;
}
.c-trend-card__body p { margin: 0 0 8px; }
.c-trend-card__body p:last-child { margin: 0; }

.c-trend-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--lh-cp);
  margin-top: 8px;
  padding: 4px 10px;
  background: var(--lh-bg);
  border-radius: var(--lh-radius-sm);
}
.c-trend-card__stat strong {
  color: var(--lh-bk);
  font-weight: 700;
}

.c-trend-card__impact-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.c-trend-card__impact-label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lh-cp);
  white-space: nowrap;
}
.c-trend-card__bar-track {
  flex: 1;
  height: 6px;
  background: var(--lh-bg2);
  border-radius: 3px;
  overflow: hidden;
}
.c-trend-card__bar-fill {
  height: 100%;
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
}
.c-trend-card__bar-fill--high { background: var(--lh-ok); }
.c-trend-card__bar-fill--medium { background: var(--lh-wn); }
.c-trend-card__bar-fill--emerging { background: #0091FF; }
.c-trend-card__bar-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--lh-bk);
  min-width: 28px;
}

/* ── Timeline ── */
.c-timeline {
  position: relative;
  margin: 0 0 8px;
  padding-left: 28px;
}
.c-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--lh-br);
}
.c-timeline__item {
  position: relative;
  padding: 0 0 28px;
}
.c-timeline__item:last-child { padding-bottom: 0; }
.c-timeline__dot {
  position: absolute;
  left: -28px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lh-wh);
  border: 3px solid var(--lh-ac);
  z-index: 1;
}
.c-timeline__dot--active { background: var(--lh-ac); }
.c-timeline__year {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lh-ac);
  margin-bottom: 4px;
}
.c-timeline__label {
  font-family: var(--lh-ff-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
  margin-bottom: 4px;
}
.c-timeline__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--lh-tx);
}
.c-timeline__item.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Trends Responsive ── */
@media (max-width: 768px) {
  .c-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .c-stat-card__value { font-size: 22px; }
  .c-trend-card { padding: 16px 18px; }
  .c-trend-card__number { font-size: 22px; }
  .c-trend-card__title { font-size: 15px; }
  .c-tab { padding: 10px 12px; font-size: 13px; }
  .c-chart-wrap { padding: 16px; }
}

/* ═══ v5.11.4 QA Fixes ═══════════════════════════════════════════ */

/* Fix Q1: Hero subtitle text on dark backgrounds — white instead of grey */
.cplh-dir-hero__sub {
  color: rgba(255,255,255,0.85);
}
.cplh-dir-hero .c-breadcrumb__current {
  color: rgba(255,255,255,0.7);
}
.cplh-dir-hero .c-breadcrumb a,
.cplh-dir-hero .c-breadcrumb__sep {
  color: rgba(255,255,255,0.5);
}
.cplh-home-hero__sub {
  color: rgba(255,255,255,0.85);
}

/* Fix Q2: Hub-listicle table — fix column widths so tool names don't break */
.c-page--hub-listicle .c-table th:first-child,
.c-page--hub-listicle .c-table td:first-child {
  width: 36px;
  min-width: 36px;
  max-width: 48px;
  text-align: center;
  white-space: nowrap;
}
.c-page--hub-listicle .c-table td:nth-child(2) {
  white-space: nowrap;
  min-width: 80px;
}
.c-page--hub-listicle .c-table td:nth-child(3) {
  min-width: 180px;
}
/* Also fix the base listicle table for the same issue */
.c-page--listicle .c-table th:first-child,
.c-page--listicle .c-table td:first-child {
  width: 36px;
  min-width: 36px;
  max-width: 48px;
}

/* Fix Q3: Pros/cons — replace bullet+icon with clean +/− per item */
.c-ranked-list__pro::before,
.c-ranked-list__con::before {
  content: none;
}
.c-ranked-list__pro ul,
.c-ranked-list__con ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-ranked-list__pro ul li,
.c-ranked-list__con ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 4px;
  line-height: 1.5;
}
.c-ranked-list__pro ul li::before {
  content: '+';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--lh-ok);
}
.c-ranked-list__con ul li::before {
  content: '\2212';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--lh-er);
}

/* Fix Q4: Prompt guide — explanation prose below code block */
.c-steps__content .c-code-block + p,
.c-steps__content .c-code-block + h3,
.c-steps__content .c-code-block + div {
  margin-top: 16px;
}

/* ================================================================
   COMPONENT BUILDER (v5.12.0)
   Universal shortcode-embeddable components via [lh_component id="N"]
   ================================================================ */

/* ── Component wrapper (reset margins for inline embedding) ── */
.c-component { margin: 24px 0; }
.c-component:first-child { margin-top: 0; }

/* ── 1. Tip Box ── */
.c-tip {
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  border-left: 3px solid var(--lh-ac);
  margin: 20px 0;
}
.c-tip--tip { background: #F0F4FF; border-left-color: #3B82F6; }
.c-tip--warning { background: #FFF8F0; border-left-color: var(--lh-wn); }
.c-tip--example { background: var(--lh-bg); border-left-color: var(--lh-br); }
.c-tip--clickup { background: #F0FFF4; border-left-color: var(--lh-ok); }
.c-tip__label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.c-tip--tip .c-tip__label { color: #3B82F6; }
.c-tip--warning .c-tip__label { color: var(--lh-wn); }
.c-tip--example .c-tip__label { color: var(--lh-cp); }
.c-tip--clickup .c-tip__label { color: var(--lh-ok); }
.c-tip__content { font-size: 14px; color: var(--lh-tx); line-height: 1.7; }
.c-tip__content p { margin: 0 0 8px; }
.c-tip__content p:last-child { margin-bottom: 0; }

/* ── 2. Data Point ── */
.c-data-point {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 20px;
  background: var(--lh-bg);
  border-radius: var(--lh-radius-md);
  margin: 20px 0;
}
.c-data-point__value {
  font-family: var(--lh-ff-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--lh-ac);
  line-height: 1;
  flex-shrink: 0;
}
.c-data-point__body { display: flex; flex-direction: column; gap: 2px; }
.c-data-point__label { font-size: 15px; font-weight: 600; color: var(--lh-bk); }
.c-data-point__context { font-size: 14px; color: var(--lh-tx); }
.c-data-point__source {
  font-size: 11px;
  color: var(--lh-cp);
  margin-top: 2px;
}
@media (max-width: 600px) {
  .c-data-point { flex-direction: column; gap: 6px; }
  .c-data-point__value { font-size: 28px; }
}

/* ── 3. Comparison Table ── */
.c-comp-table__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
  margin-bottom: 10px;
}
.c-comp-table { width: 100%; border-collapse: collapse; margin: 0 0 4px; }
.c-comp-table thead th {
  background: var(--lh-bg);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lh-bk);
  text-align: left;
  border-bottom: 2px solid var(--lh-br);
}
.c-comp-table thead th:first-child { color: var(--lh-cp); font-weight: 600; }
.c-comp-table tbody td {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--lh-tx);
  border-bottom: 1px solid var(--lh-br-light);
}
.c-comp-table__attr { font-weight: 600; color: var(--lh-bk); }

/* ── 4. Acronym Table ── */
.c-acronym-table__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
  margin-bottom: 10px;
}
.c-acronym-table { width: 100%; border-collapse: collapse; }
.c-acronym-table thead th {
  background: var(--lh-bg);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lh-bk);
  text-align: left;
  border-bottom: 2px solid var(--lh-br);
}
.c-acronym-table tbody td {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--lh-tx);
  border-bottom: 1px solid var(--lh-br-light);
}
.c-acronym-table__abbr {
  font-family: var(--lh-mono);
  font-weight: 700;
  color: var(--lh-ac);
  letter-spacing: 0.02em;
}

/* ── 5. Entity Cards ── */
.c-entity-cards__heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lh-cp);
  margin-bottom: 10px;
}
.c-entity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.c-entity-cards__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  text-decoration: none;
  color: var(--lh-tx);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-entity-cards__card:hover {
  border-color: var(--lh-ac);
  box-shadow: 0 2px 8px rgba(102, 71, 240, 0.08);
  text-decoration: none;
  color: var(--lh-tx);
}
.c-entity-cards__name { font-size: 14px; font-weight: 600; color: var(--lh-bk); }
.c-entity-cards__card:hover .c-entity-cards__name { color: var(--lh-ac); }
.c-entity-cards__def {
  font-size: 12px;
  color: var(--lh-cp);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 6. Pro / Con ── */
.c-pro-con__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
  margin-bottom: 12px;
}
.c-pro-con {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) { .c-pro-con { grid-template-columns: 1fr; } }
.c-pro-con__col {
  padding: 16px 18px;
  border-radius: var(--lh-radius-md);
}
.c-pro-con__col--pro { background: #F0FFF4; }
.c-pro-con__col--con { background: #FFF5F5; }
.c-pro-con__label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.c-pro-con__col--pro .c-pro-con__label { color: var(--lh-ok); }
.c-pro-con__col--con .c-pro-con__label { color: var(--lh-er); }
.c-pro-con__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-pro-con__col li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin-bottom: 6px;
}
.c-pro-con__col li:last-child { margin-bottom: 0; }
.c-pro-con__col--pro li::before {
  content: '+';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--lh-ok);
}
.c-pro-con__col--con li::before {
  content: '\2212';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--lh-er);
}

/* ── 7. Timeline ── */
.c-timeline__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--lh-bk);
  margin-bottom: 16px;
}
.c-timeline {
  position: relative;
  padding-left: 28px;
}
.c-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--lh-br);
}
.c-timeline__item {
  position: relative;
  padding-bottom: 20px;
}
.c-timeline__item:last-child { padding-bottom: 0; }
.c-timeline__marker {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lh-wh);
  border: 2px solid var(--lh-br);
}
.c-timeline__item--current .c-timeline__marker {
  background: var(--lh-ac);
  border-color: var(--lh-ac);
  box-shadow: 0 0 0 3px rgba(102, 71, 240, 0.15);
}
.c-timeline__date {
  font-family: var(--lh-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--lh-ac);
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.c-timeline__event {
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
}
.c-timeline__desc {
  font-size: 13px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin-top: 2px;
}

/* ── 12. ClickUp Feature Spotlight ── */
.c-cu-feature {
  border: 1px solid #E8E0FF;
  border-radius: var(--lh-radius-md);
  overflow: hidden;
  background: #FDFCFF;
  margin: 24px 0;
}
.c-cu-feature__badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--lh-ac);
  color: var(--lh-wh);
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0 0 8px 0;
}
.c-cu-feature__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--lh-bk);
  padding: 14px 20px 0;
}
.c-cu-feature__image {
  padding: 12px 20px;
}
.c-cu-feature__image img {
  width: 100%;
  height: auto;
  border-radius: var(--lh-radius-md);
  border: 1px solid var(--lh-br);
}
.c-cu-feature__caption {
  font-size: 11px;
  color: var(--lh-cp);
  margin-top: 6px;
  text-align: center;
}
.c-cu-feature__desc {
  padding: 0 20px;
  font-size: 14px;
  color: var(--lh-tx);
  line-height: 1.7;
}
.c-cu-feature__desc p { margin: 0 0 8px; }
.c-cu-feature__desc p:last-child { margin-bottom: 0; }
.c-cu-feature__cta {
  display: inline-block;
  margin: 12px 20px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-cu-feature__cta:hover { text-decoration: underline; }

/* ── 13. Use Case Spotlight ── */
.c-use-case {
  border-left: 3px solid var(--lh-ac);
  background: var(--lh-bg);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 20px 0;
}
.c-use-case__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.c-use-case__team {
  font-size: 14px;
  font-weight: 700;
  color: var(--lh-bk);
}
.c-use-case__tag {
  display: inline-block;
  padding: 2px 10px;
  background: #F5F3FF;
  color: var(--lh-ac);
  font-size: 11px;
  font-weight: 600;
  border-radius: 99px;
  border: 1px solid #E8E0FF;
}
.c-use-case__row {
  font-size: 13px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin-bottom: 4px;
}
.c-use-case__row:last-child { margin-bottom: 0; }
.c-use-case__row strong { color: var(--lh-bk); font-weight: 600; }
.c-use-case__row--result { color: var(--lh-ok); font-weight: 500; }
.c-use-case__row--result strong { color: var(--lh-ok); }

/* ── 14. Template Preview ── */
.c-tpl-preview {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  background: var(--lh-wh);
  margin: 20px 0;
  align-items: center;
  transition: border-color 0.15s;
}
.c-tpl-preview:hover { border-color: var(--lh-ok); }
.c-tpl-preview__image {
  flex-shrink: 0;
  width: 140px;
}
.c-tpl-preview__image img {
  width: 100%;
  height: auto;
  border-radius: var(--lh-radius-sm);
  border: 1px solid var(--lh-br-light);
}
.c-tpl-preview__body { flex: 1; min-width: 0; }
.c-tpl-preview__name { font-size: 15px; font-weight: 700; color: var(--lh-bk); }
.c-tpl-preview__desc { font-size: 13px; color: var(--lh-tx); margin-top: 4px; }
.c-tpl-preview__cta {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 18px;
  background: var(--lh-ok);
  color: var(--lh-wh);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--lh-radius-sm);
  text-decoration: none;
  transition: background 0.15s;
}
.c-tpl-preview__cta:hover { background: #268D5B; color: var(--lh-wh); text-decoration: none; }
@media (max-width: 500px) {
  .c-tpl-preview { flex-direction: column; }
  .c-tpl-preview__image { width: 100%; }
}

/* ── 15. Workflow Compare ── */
.c-wf-compare {
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-md);
  overflow: hidden;
  margin: 24px 0;
}
.c-wf-compare__task {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lh-bk);
  background: var(--lh-bg);
  border-bottom: 1px solid var(--lh-br);
}
.c-wf-compare__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) { .c-wf-compare__cols { grid-template-columns: 1fr; } }
.c-wf-compare__col { padding: 16px 18px; }
.c-wf-compare__col--manual {
  background: var(--lh-bg);
  border-right: 1px solid var(--lh-br);
}
@media (max-width: 600px) {
  .c-wf-compare__col--manual { border-right: none; border-bottom: 1px solid var(--lh-br); }
}
.c-wf-compare__col--clickup { background: #F0FFF4; }
.c-wf-compare__col-label {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.c-wf-compare__col--manual .c-wf-compare__col-label { color: var(--lh-cp); }
.c-wf-compare__col--clickup .c-wf-compare__col-label { color: var(--lh-ok); }
.c-wf-compare__col-content {
  font-size: 13px;
  color: var(--lh-tx);
  line-height: 1.7;
}
.c-wf-compare__col-content p { margin: 0 0 6px; }
.c-wf-compare__col-content p:last-child { margin-bottom: 0; }
.c-wf-compare__saved {
  padding: 10px 18px;
  background: var(--lh-ok);
  color: var(--lh-wh);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   SUBCATEGORY HUB — Featured Mode & Grouped Mode (v5.13.0)
   Three new display modes for heterogeneous subcategory hubs.
   ═══════════════════════════════════════════════════════════════ */

/* ── Featured Cards ──────────────────────────────────────────── */
.c-hub-featured {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.c-hub-featured__card {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-card-r, 14px);
  text-decoration: none;
  color: var(--lh-bk);
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.c-hub-featured__card:hover {
  border-color: var(--lh-ac);
  box-shadow: 0 4px 16px rgba(102,71,240,0.08);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--lh-bk);
}
.c-hub-featured__eyebrow {
  font-family: var(--lh-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lh-ac);
  margin-bottom: 8px;
}
.c-hub-featured__title {
  font-family: var(--lh-ff-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 8px;
  line-height: 1.3;
}
.c-hub-featured__card:hover .c-hub-featured__title {
  color: var(--lh-ac);
}
.c-hub-featured__desc {
  font-size: 14px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin-bottom: 12px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-hub-featured__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lh-border-soft);
}
.c-hub-featured__cta {
  font-family: var(--lh-ff-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  margin-left: auto;
}

/* ── Grouped Sections ────────────────────────────────────────── */
.c-hub-group {
  margin-bottom: 36px;
}
.c-hub-group__header {
  margin-bottom: 14px;
}
.c-hub-group__header h2 {
  margin-bottom: 4px;
}
.c-hub-group__desc {
  font-size: 14px;
  color: var(--lh-tx);
  line-height: 1.5;
  margin: 0;
}

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 768px) {
  .c-hub-featured {
    grid-template-columns: 1fr;
  }
  .c-hub-featured__card {
    padding: 16px 18px;
  }
  .c-hub-featured__title {
    font-size: 15px;
  }
}

/* ================================================================
   v5.13.1 — Mobile fixes
   ================================================================ */

/* Fix 6: Tighten TOC sidebar spacing on mobile (subcategory hubs without quick facts) */
@media (max-width: 1024px) {
  .c-layout-b__sidebar.c-toc-sidebar {
    margin-bottom: 16px;
    gap: 12px;
  }
  .c-toc-sidebar .c-back-link {
    margin-bottom: 0;
  }
  .c-toc-sidebar .c-sidebar-facts {
    margin-bottom: 0;
    padding-bottom: 12px;
  }
  /* Standardize: match Layout A sidebar spacing */
  .c-layout-a__sidebar {
    margin-bottom: 16px;
  }
}
@media (max-width: 900px) {
  .c-toc-sidebar {
    margin-top: 0 !important;
    padding-top: 0;
  }
}

/* Fix 7: Back to Top button — mobile only */
.cplh-btt {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9990;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lh-bk);
  color: var(--lh-wh);
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s;
  padding: 0;
}
.cplh-btt.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cplh-btt { display: flex; }

/* ═══════════════════════════════════════════════════════
   PREREQUISITES CARD (v5.13.5)
   ═══════════════════════════════════════════════════════ */
.c-prereq { margin-bottom: 32px; }
.c-prereq__header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.c-prereq__icon { width: 20px; height: 20px; border-radius: 6px; background: var(--lh-bg-alt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.c-prereq__icon svg { width: 12px; height: 12px; }
.c-prereq__label { font-family: var(--lh-mono); font-size: 12px; font-weight: 500; color: var(--lh-cp); letter-spacing: 0.01em; }
.c-prereq__count { font-family: var(--lh-ff); font-size: 12px; color: #bbb; margin-left: auto; }
.c-prereq__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.c-prereq__card { display: flex; flex-direction: column; padding: 16px 18px 14px; background: var(--lh-wh); border: 1px solid var(--lh-br); border-radius: var(--lh-radius-md); text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.c-prereq__card:hover { border-color: var(--lh-ac); }
.c-prereq__card:hover .c-prereq__name { color: var(--lh-ac); }
.c-prereq__card:hover .c-prereq__arrow { opacity: 1; transform: translateX(0); }
.c-prereq__name { display: block; font-family: var(--lh-ff-heading); font-size: 14px; font-weight: 600; color: var(--lh-fg); line-height: 1.35; margin-bottom: 6px; transition: color 0.15s; }
.c-prereq__def { font-size: 12.5px; line-height: 1.5; color: var(--lh-tx); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-prereq__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lh-br-light); }
.c-prereq__type { font-family: var(--lh-mono); font-size: 11px; color: #bbb; letter-spacing: 0.02em; }
.c-prereq__arrow { color: var(--lh-ac); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; }
.c-prereq__arrow svg { width: 14px; height: 14px; display: block; }

/* ═══════════════════════════════════════════════════════
   TOOL CHANGELOG (v5.13.5)
   ═══════════════════════════════════════════════════════ */
.c-changelog { margin: 32px 0; border-top: 1px solid var(--lh-br); padding-top: 24px; }
.c-changelog__title { font-family: var(--lh-ff); font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--lh-fg); }
.c-changelog__list { display: flex; flex-direction: column; gap: 8px; }
.c-changelog__entry { display: flex; gap: 12px; font-size: 13px; line-height: 1.5; padding: 8px 0; border-bottom: 1px solid var(--lh-br); }
.c-changelog__entry:last-child { border-bottom: none; }
.c-changelog__date { flex-shrink: 0; width: 100px; font-weight: 600; color: var(--lh-cp); font-family: var(--lh-mono, 'Sometype Mono', monospace); font-size: 12px; }
.c-changelog__note { color: var(--lh-fg); }

/* ── Changelog header with link (v5.17.0) ── */
.c-changelog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.c-changelog__narrative {
  font-size: 14px;
  line-height: 1.7;
  color: var(--lh-fg);
  margin-bottom: 16px;
}
.c-changelog__narrative strong { color: var(--lh-fg); font-weight: 600; }
.c-changelog__attribution {
  font-size: 12px;
  color: var(--lh-cp);
  line-height: 1.5;
  margin-top: 12px;
  font-style: italic;
}
.c-changelog__all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.c-changelog__all-link:hover { text-decoration: underline; }
.c-changelog__all-link svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
   TOOL NEWS TEMPLATE (v5.17.0)
   ═══════════════════════════════════════════════════════ */

/* Stats row */
.c-news-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lh-br);
}
.c-news-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-news-stat__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--lh-fg);
  font-family: var(--lh-ff);
}
.c-news-stat__label {
  font-size: 12px;
  color: var(--lh-cp);
}
.c-news-stat__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-ac);
  text-decoration: none;
}
.c-news-stat__link:hover { text-decoration: underline; }

/* Intro */
.c-news-intro { margin-bottom: 20px; }

/* Filter chips */
.c-news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}
.c-news-filter {
  font-size: 14px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 99px;
  border: 1px solid var(--lh-br);
  background: var(--lh-bg);
  color: var(--lh-fg-2);
  cursor: pointer;
  font-family: var(--lh-ff);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.c-news-filter:hover {
  border-color: var(--lh-bk);
  background: var(--lh-bg2);
  color: var(--lh-bk);
}
.c-news-filter--active {
  background: var(--lh-bk);
  color: var(--lh-wh);
  border-color: var(--lh-bk);
}
.c-news-filter--active:hover {
  background: var(--lh-fg-2);
  color: var(--lh-wh);
  border-color: var(--lh-fg-2);
}

/* Month group */
.c-news-month {
  margin-bottom: 28px;
}
.c-news-month__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lh-cp);
  font-family: var(--lh-mono, 'Sometype Mono', monospace);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lh-br);
}

/* Individual entry */
.c-news-entry {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lh-br);
}
.c-news-entry:last-child { border-bottom: none; }
.c-news-entry__date {
  flex-shrink: 0;
  width: 80px;
  font-size: 13px;
  font-family: var(--lh-mono, 'Sometype Mono', monospace);
  color: var(--lh-cp);
  padding-top: 2px;
}
.c-news-entry__body { flex: 1; min-width: 0; }
.c-news-entry__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.c-news-entry__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--lh-fg);
  line-height: 1.4;
}
.c-news-entry__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--lh-fg);
  margin-top: 6px;
}
.c-news-entry__impact {
  background: var(--lh-bg2, var(--lh-bg));
  border-radius: var(--lh-radius-md);
  padding: 10px 14px;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lh-fg);
}
.c-news-entry__impact strong {
  color: var(--lh-fg);
  font-weight: 600;
}

/* Category badges */
.c-news-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.c-news-badge--model   { background: #EEEDFE; color: #3C3489; }
.c-news-badge--feature { background: #E1F5EE; color: #085041; }
.c-news-badge--pricing { background: #FAEEDA; color: #633806; }
.c-news-badge--ui      { background: #E6F1FB; color: #0C447C; }
.c-news-badge--api     { background: #F1EFE8; color: #444441; }
.c-news-badge--major   { background: #FCEBEB; color: #791F1F; border: 1px solid #F7C1C1; font-size: 9px; }

/* Sources */
.c-news-sources {
  font-size: 14px;
  color: var(--lh-cp);
  line-height: 1.7;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--lh-br);
}
.c-news-sources a { color: var(--lh-ac); text-decoration: none; }
.c-news-sources a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════
   LEARNING PATH (v5.13.5)
   ═══════════════════════════════════════════════════════ */
.cplh-lp-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 64px; }
.cplh-lp-main { }
.cplh-lp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.cplh-lp-meta__badge { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 3px 10px; border-radius: 20px; }
.cplh-lp-meta__item { font-size: 13px; color: var(--lh-fg-2); }
.cplh-lp-meta__item::before { content: '·'; margin-right: 12px; color: var(--lh-br); }
.cplh-lp-meta__item:first-child::before,
.cplh-lp-meta__badge + .cplh-lp-meta__item::before { content: none; margin: 0; }
.cplh-lp-intro { margin-bottom: 32px; }
.cplh-lp-modules { display: flex; flex-direction: column; gap: 0; margin-bottom: 40px; }
.cplh-lp-module { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--lh-br); text-decoration: none; color: var(--lh-fg); transition: background 0.15s; }
.cplh-lp-module:first-child { border-top: 1px solid var(--lh-br); }
.cplh-lp-module:hover { background: rgba(0,0,0,0.015); }
.cplh-lp-module__num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; color: var(--lh-wh); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.cplh-lp-module__body { flex: 1; min-width: 0; }
.cplh-lp-module__type { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--lh-fg-2); margin-bottom: 2px; }
.cplh-lp-module__title { font-family: var(--lh-ff); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.cplh-lp-module__desc { font-size: 14px; line-height: 1.5; color: var(--lh-fg-2); margin: 0; }
.cplh-lp-module__arrow { flex-shrink: 0; font-size: 18px; color: var(--lh-fg-2); margin-top: 8px; }
.cplh-lp-module:hover .cplh-lp-module__arrow { color: var(--lh-cp); }

/* ═══════════════════════════════════════════════════════
   COMPARISON SNAPSHOT (v5.13.5)
   ═══════════════════════════════════════════════════════ */
.c-comp-snap { margin: 24px 0; }
.c-comp-snap__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .c-comp-snap__cards { grid-template-columns: 1fr; } }
.c-comp-snap__card { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px solid var(--lh-br); border-radius: var(--lh-radius-md); text-decoration: none; color: var(--lh-fg); transition: border-color 0.15s, box-shadow 0.15s; }
.c-comp-snap__card:hover { border-color: var(--lh-cp); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.c-comp-snap__name { font-family: var(--lh-ff); font-size: 16px; font-weight: 700; }
.c-comp-snap__rating { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.c-comp-snap__meta { font-size: 13px; color: var(--lh-fg-2); }
.c-comp-snap__best { font-size: 13px; color: var(--lh-fg-2); font-style: italic; }
.c-comp-snap__cta { font-size: 13px; font-weight: 600; color: var(--lh-cp); margin-top: 4px; }
.c-comp-snap__verdict { margin-top: 12px; padding: 12px 16px; background: var(--lh-bg-alt); border-radius: var(--lh-radius-md); font-size: 14px; color: var(--lh-fg-2); text-align: center; }

/* ═══════════════════════════════════════════════════════
   DOMAIN DIRECTORY INTRO (v5.13.5)
   ═══════════════════════════════════════════════════════ */
.cplh-dir-intro { padding-top: 8px; }
.cplh-dir-intro .c-prose { max-width: 720px; }

/* ═══════════════════════════════════════════════════════
   START HERE QUESTIONNAIRE (v5.13.5)
   ═══════════════════════════════════════════════════════ */
.cplh-sh { max-width: 680px; margin: 0 auto; padding: 20px 0 40px; }
.cplh-sh__step { display: none; }
.cplh-sh__step--active { display: block; animation: shFadeIn 0.25s ease; }
@keyframes shFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cplh-sh__q { font-family: var(--lh-ff); font-size: 22px; font-weight: 700; margin-bottom: 20px; color: var(--lh-fg); }
.cplh-sh__options { display: flex; flex-direction: column; gap: 8px; }
.cplh-sh__options--goals { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.cplh-sh__options--levels { flex-direction: row; gap: 10px; }
.cplh-sh__opt { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--lh-br); border-radius: var(--lh-radius-md); background: var(--lh-wh); cursor: pointer; text-align: left; font-family: var(--lh-ff); font-size: 14px; color: var(--lh-fg); transition: border-color 0.15s, box-shadow 0.15s; }
.cplh-sh__opt:hover { border-color: var(--lh-cp); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cplh-sh__options--goals .cplh-sh__opt,
.cplh-sh__options--levels .cplh-sh__opt { flex: 1; min-width: 120px; flex-direction: column; text-align: center; padding: 18px 14px; }
.cplh-sh__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cplh-sh__opt-text { display: flex; flex-direction: column; gap: 2px; }
.cplh-sh__opt-text strong { font-size: 15px; }
.cplh-sh__opt-text span { font-size: 13px; color: var(--lh-fg-2); }
.cplh-sh__emoji { font-size: 24px; }
.cplh-sh__result-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 2px solid var(--lh-cp); border-radius: var(--lh-radius-lg); text-decoration: none; color: var(--lh-fg); transition: box-shadow 0.15s; }
.cplh-sh__result-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.cplh-sh__result-card strong { font-size: 18px; font-family: var(--lh-ff); }
.cplh-sh__result-card span { font-size: 14px; color: var(--lh-fg-2); }
.cplh-sh__result-cta { font-weight: 600; color: var(--lh-cp) !important; margin-top: 4px; }
.cplh-sh__restart { margin-top: 16px; padding: 8px 16px; border: 1px solid var(--lh-br); border-radius: var(--lh-radius-md); background: var(--lh-wh); cursor: pointer; font-size: 13px; color: var(--lh-fg-2); }
.cplh-sh__restart:hover { border-color: var(--lh-cp); color: var(--lh-cp); }

/* ═══════════════════════════════════════════════════════
   TOOL OVERVIEW CARD (v5.13.5)
   ═══════════════════════════════════════════════════════ */
.c-tool-overview-card { border: 1px solid var(--lh-br); border-radius: var(--lh-radius-lg); padding: 24px 28px; margin-bottom: 28px; background: var(--lh-bg); }
.c-tool-overview-card__top { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.c-tool-overview-card__top .c-rating--large { font-size: 28px; font-weight: 800; color: var(--lh-cp); font-family: var(--lh-ff); }
.c-tool-overview-card__price { font-size: 15px; color: var(--lh-fg-2); font-weight: 500; }
.c-tool-overview-card__verdict { font-size: 15px; line-height: 1.7; color: var(--lh-fg); border-left: 3px solid var(--lh-cp); padding-left: 16px; }
/* Hide the old standalone elements if they somehow still render */
.c-tool-hero__meta + .c-verdict-summary { margin-top: 0; }
/* Disclosure tighter when directly after author box */
.c-author-box + .c-disclosure { margin-top: -8px; margin-bottom: 28px; }

/* ═══════════════════════════════════════════════════════
   AGENT CTA COMPONENT (v5.15.0)
   Placed via Component Builder + [lh_component id="N"]
   ═══════════════════════════════════════════════════════ */

/* ─── Brain Icon (CSS data URI — immune to wp_kses SVG stripping) ─── */
.c-agent-brain-icon {
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.131 12.542C-0.077 12.284-0.031 11.91 0.223 11.698L1.763 10.416C1.984 10.232 2.313 10.273 2.495 10.495C3.674 11.931 4.925 12.598 6.305 12.598C7.675 12.598 8.892 11.942 10.02 10.524C10.199 10.299 10.527 10.252 10.751 10.431L12.311 11.684C12.569 11.891 12.622 12.264 12.418 12.525C10.727 14.686 8.666 15.824 6.305 15.824C3.951 15.824 1.872 14.693 0.131 12.542Z' fill='url(%23b)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.443 4.125C6.347 4.037 6.201 4.037 6.105 4.125L2.406 7.517C2.196 7.71 1.867 7.688 1.684 7.469L0.353 5.871C0.182 5.665 0.202 5.362 0.4 5.182L5.937 0.131C6.128-0.043 6.42-0.043 6.611 0.131L12.149 5.186C12.347 5.366 12.367 5.67 12.196 5.875L10.861 7.472C10.678 7.691 10.35 7.713 10.14 7.52L6.443 4.125Z' fill='url(%23t)'/%3E%3Cdefs%3E%3ClinearGradient id='b' x1='-0.229' y1='7.865' x2='12.77' y2='7.865' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.226' stop-color='%236647F0'/%3E%3Cstop offset='0.793' stop-color='%230091FF'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='-0.229' y1='7.734' x2='12.77' y2='7.734' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF02F0'/%3E%3Cstop offset='0.779' stop-color='%23F76808'/%3E%3Cstop offset='1' stop-color='%23F76808'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
  vertical-align: middle;
}
.c-agent-brain-icon--18 { width: 18px; height: 22px; }
.c-agent-brain-icon--16 { width: 16px; height: 20px; }
.c-agent-brain-icon--14 { width: 14px; height: 17px; }
.c-agent-brain-icon--13 { width: 13px; height: 16px; }
.c-agent-brain-icon--11 { width: 11px; height: 14px; }

/* ─── Variant A: Inline Bar ─── */
.c-agent-bar {
  background: #0C0C0F;
  border-radius: var(--lh-radius-xl);
  overflow: hidden;
  position: relative;
}
.c-agent-bar__glow {
  position: absolute;
  top: -80px; right: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(102,71,240,0.12) 0%, rgba(0,145,255,0.06) 40%, transparent 70%);
  pointer-events: none;
}
.c-agent-bar__glow--bl {
  top: auto; right: auto;
  bottom: -60px; left: -40px;
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(255,2,240,0.06) 0%, transparent 60%);
}
.c-agent-bar__header {
  padding: 24px 28px 0;
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
}
.c-agent-bar__badge {
  display: flex; align-items: center; gap: 8px;
}
.c-agent-bar__badge span {
  color: rgba(255,255,255,0.7);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--lh-ff-heading);
}
.c-agent-bar__browse {
  color: rgba(255,255,255,0.5) !important;
  font-size: 12px; font-weight: 600;
  text-decoration: none !important;
  font-family: var(--lh-ff-heading);
  transition: color 0.2s;
}
.c-agent-bar__browse:hover { color: var(--lh-wh) !important; }
.c-agent-bar__headline {
  padding: 14px 28px 0;
  position: relative; z-index: 1;
}
.c-agent-bar__headline h3 {
  color: var(--lh-wh);
  font-size: 20px; font-weight: 800;
  margin: 0; letter-spacing: -0.01em; line-height: 1.3;
  font-family: var(--lh-ff-heading);
}
.c-agent-bar__headline p {
  color: rgba(255,255,255,0.6);
  font-size: 14px; margin: 5px 0 0; line-height: 1.5;
  font-family: var(--lh-ff-heading);
}
.c-agent-bar__grid {
  padding: 16px 28px 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  position: relative; z-index: 1;
}

/* ─── Agent Card (shared) ─── */
.c-agent-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--lh-radius-lg); padding: 16px;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s;
  display: flex; flex-direction: column; gap: 8px;
}
.c-agent-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}
.c-agent-card__top { display: flex; align-items: center; gap: 8px; }
.c-agent-card__icon {
  width: 28px; height: 28px; border-radius: var(--lh-radius-md);
  background: linear-gradient(135deg, rgba(102,71,240,0.25) 0%, rgba(0,145,255,0.15) 100%);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.c-agent-card__name {
  color: var(--lh-wh);
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2;
  font-family: var(--lh-ff-heading);
}
.c-agent-card__desc {
  color: rgba(255,255,255,0.65);
  font-size: 12px; line-height: 1.5; margin: 0;
  font-family: var(--lh-ff-heading);
}
.c-agent-card__cat {
  margin-top: auto; padding-top: 4px;
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.06);
  padding: 3px 8px; border-radius: 4px;
  align-self: flex-start;
  font-family: var(--lh-ff-heading);
}

/* ─── Variant B: Sidebar Card ─── */
.c-agent-sidebar {
  background: #0C0C0F;
  border-radius: var(--lh-radius-lg); padding: 22px 18px;
  position: relative; overflow: hidden;
}
.c-agent-sidebar__glow {
  position: absolute; top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(102,71,240,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.c-agent-sidebar__badge {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; position: relative; z-index: 1;
}
.c-agent-sidebar__badge span {
  color: rgba(255,255,255,0.6);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--lh-ff-heading);
}
.c-agent-sidebar__card {
  display: block;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--lh-radius-md); padding: 14px;
  text-decoration: none !important;
  transition: background 0.2s;
  margin-bottom: 12px; position: relative; z-index: 1;
}
.c-agent-sidebar__card:hover { background: rgba(255,255,255,0.1); }
.c-agent-sidebar__card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.c-agent-sidebar__card .c-agent-card__icon { width: 26px; height: 26px; border-radius: var(--lh-radius-md); }
.c-agent-sidebar__card .c-agent-card__name { font-size: 13px; }
.c-agent-sidebar__card .c-agent-card__desc { font-size: 12px; }
.c-agent-sidebar__btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--lh-radius-md); padding: 10px 16px;
  color: rgba(255,255,255,0.75) !important;
  font-size: 12px; font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
  position: relative; z-index: 1;
  font-family: var(--lh-ff-heading);
}
.c-agent-sidebar__btn:hover {
  background: rgba(255,255,255,0.14);
  color: var(--lh-wh) !important;
}

/* ─── Variant C: Simple CTA Bar ─── */
.c-agent-bar--simple { padding: 28px 32px; }
.c-agent-bar--simple .c-agent-bar__simple-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; position: relative; z-index: 1;
}
.c-agent-bar__powered {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(90deg, #6647F0, #0091FF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.c-agent-bar__simple-title {
  color: var(--lh-wh); font-size: 17px; font-weight: 800;
  margin: 0 0 4px; letter-spacing: -0.01em;
  font-family: var(--lh-ff-heading);
}
.c-agent-bar__simple-desc {
  color: rgba(255,255,255,0.6); font-size: 13px; margin: 0;
  font-family: var(--lh-ff-heading);
}
.c-agent-bar__simple-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lh-wh); color: #0C0C0F !important;
  font-size: 13px; font-weight: 700;
  padding: 12px 28px; border-radius: var(--lh-radius-md);
  white-space: nowrap; text-decoration: none !important;
  transition: opacity 0.15s; flex-shrink: 0;
  font-family: var(--lh-ff-heading);
}
.c-agent-bar__simple-btn:hover { opacity: 0.9; color: #0C0C0F !important; }

/* ─── Agent CTA responsive ─── */
@media (max-width: 768px) {
  .c-agent-bar__grid { grid-template-columns: 1fr; }
  .c-agent-bar__header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 20px 0; }
  .c-agent-bar__headline { padding: 12px 20px 0; }
  .c-agent-bar__headline h3 { font-size: 18px; }
  .c-agent-bar__grid { padding: 14px 20px 20px; }
  .c-agent-bar--simple .c-agent-bar__simple-inner { flex-direction: column; text-align: center; gap: 16px; }
  .c-agent-bar--simple { padding: 24px 20px; }
}
@media (max-width: 480px) {
  .c-agent-bar { border-radius: var(--lh-radius-lg); }
  .c-agent-bar__glow, .c-agent-bar__glow--bl { display: none; }
  .c-agent-bar__simple-btn { width: 100%; justify-content: center; padding: 12px 20px; }
}

/* ═══════════════════════════════════════════════════════
   INTEGRATION GRID COMPONENT (v5.15.1)
   Placed via Component Builder + [lh_component id="N"]
   ═══════════════════════════════════════════════════════ */
.c-ig {
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  padding: 28px;
}
.c-ig__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--lh-br);
}
.c-ig__title {
  font-family: var(--lh-ff-heading);
  font-size: 18px; font-weight: 800; color: var(--lh-bk);
  margin: 0 0 4px; letter-spacing: -0.01em;
}
.c-ig__desc {
  font-size: 13px; color: var(--lh-cp); margin: 0; line-height: 1.5;
}
.c-ig__count {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; padding: 8px 16px;
  background: var(--lh-bg); border-radius: var(--lh-radius-md);
}
.c-ig__count-num {
  font-family: var(--lh-ff-heading);
  font-size: 22px; font-weight: 800; color: var(--lh-ac);
  line-height: 1.1;
}
.c-ig__count-label {
  font-size: 10px; font-weight: 600; color: var(--lh-cp);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.c-ig__group { margin-bottom: 20px; }
.c-ig__group:last-child { margin-bottom: 0; }
.c-ig__group-label {
  font-family: var(--lh-mono);
  font-size: 11px; font-weight: 600; color: var(--lh-cp);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--lh-border-soft);
}
.c-ig__grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.c-ig__chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lh-bg);
  border: 1px solid var(--lh-border-soft);
  border-radius: var(--lh-radius-md); padding: 7px 12px;
  text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s;
}
a.c-ig__chip:hover {
  border-color: var(--lh-ac);
  background: var(--lh-bg2);
}
.c-ig__chip-name {
  font-size: 13px; font-weight: 600; color: var(--lh-bk);
  font-family: var(--lh-ff-heading);
  white-space: nowrap;
}

/* Connection type badges */
.c-ig-badge {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 4px;
  white-space: nowrap; line-height: 1.4;
}
.c-ig-badge--native {
  background: rgba(48,164,108,0.1); color: var(--lh-ok);
}
.c-ig-badge--zapier {
  background: rgba(255,74,26,0.08); color: #E84D0E;
}
.c-ig-badge--api {
  background: rgba(102,71,240,0.08); color: var(--lh-ac);
}
.c-ig-badge--marketplace {
  background: rgba(0,0,0,0.05); color: var(--lh-cp);
}

/* Responsive */
@media (max-width: 600px) {
  .c-ig { padding: 20px; }
  .c-ig__header { flex-direction: column; gap: 12px; }
  .c-ig__count { flex-direction: row; gap: 6px; padding: 6px 12px; }
  .c-ig__chip { padding: 6px 10px; }
}

/* ═══════════════════════════════════════════════════════
   BROWSE BY — MODIFIER LISTICLE NAVIGATION (v5.15.3)
   Renders on hub-listicle pages between ranked list and
   buying guides. Three manual ACF repeater sections.
   ═══════════════════════════════════════════════════════ */
.c-browse-by { margin-top: 32px; }
.c-browse-by__group { margin-bottom: 20px; }
.c-browse-by__group:last-child { margin-bottom: 0; }
.c-browse-by__group-label {
  font-family: var(--lh-mono);
  font-size: 11px; font-weight: 600;
  color: var(--lh-cp);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--lh-border-soft);
}
.c-browse-by__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 4px;
  border-radius: var(--lh-radius-md);
  background: var(--lh-bg);
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s;
}
.c-browse-by__row:hover {
  background: var(--lh-bg2);
  border-color: var(--lh-border-soft);
}
.c-browse-by__name {
  font-family: var(--lh-ff-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--lh-bk);
  white-space: nowrap;
  flex-shrink: 0;
}
.c-browse-by__desc {
  font-size: 13px;
  color: var(--lh-cp);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-browse-by__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--lh-cp);
  background: var(--lh-wh);
  border: 1px solid var(--lh-border-soft);
  border-radius: var(--lh-radius-md);
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.c-browse-by__arrow {
  font-size: 13px;
  color: var(--lh-cp);
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.c-browse-by__row:hover .c-browse-by__arrow {
  color: var(--lh-ac);
  transform: translateX(2px);
}

/* Responsive */
@media (max-width: 600px) {
  .c-browse-by__row { flex-wrap: wrap; gap: 4px; padding: 10px 12px; }
  .c-browse-by__name { width: 100%; }
  .c-browse-by__desc { width: 100%; white-space: normal; }
}

/* ═══════════════════════════════════════════
   Sidebar Entity Card
   ═══════════════════════════════════════════ */
.c-sidebar-entity__list {
  display: flex;
  flex-direction: column;
}
.c-sidebar-entity__row {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--lh-br-light);
  font-family: var(--lh-ff);
  font-size: 13px;
  font-weight: 500;
  color: var(--lh-cp);
  text-decoration: none;
  transition: color 0.15s;
}
.c-sidebar-entity__row:last-child {
  border-bottom: none;
}
a.c-sidebar-entity__row:hover {
  color: var(--lh-ac);
}
span.c-sidebar-entity__row {
  color: var(--lh-fg);
}

/* ═══════════════════════════════════════════
   Editorial Pick & Closing Verdict
   ═══════════════════════════════════════════ */
.c-editorial-pick {
  border-left: 3px solid var(--lh-cp);
  padding-left: 20px;
}
.c-closing-verdict {
  border-top: 1px solid var(--lh-border-soft);
  padding-top: var(--lh-section-gap, 32px);
}

/* ═══════════════════════════════════════════
   Comparison Media & Video
   ═══════════════════════════════════════════ */
.c-table__cat-row td {
  background: var(--lh-bg-alt);
  font-family: var(--lh-ff);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lh-fg);
  padding: 8px 12px;
}
.c-comp-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.c-comp-media__item {
  margin: 0;
}
.c-comp-media__item img {
  width: 100%;
  height: auto;
  border-radius: var(--lh-radius-md);
  border: 1px solid var(--lh-br);
}
.c-comp-media__caption {
  font-family: var(--lh-ff);
  font-size: 12px;
  color: var(--lh-fg);
  margin-top: 6px;
  text-align: center;
}
.c-video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--lh-radius-md);
}
.c-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ═══════════════════════════════════════════
   ALTERNATIVES SIDEBAR: Tool TOC + Related (v5.49.1)
   ═══════════════════════════════════════════ */

/* Tool jump links */
.c-alt-toc {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--lh-br-light);
}
.c-alt-toc__label {
  font-family: var(--lh-ff);
  font-size: 14px;
  font-weight: 800;
  color: var(--lh-bk);
  margin: 0 0 8px;
}
.c-alt-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-alt-toc__item {
  margin: 0;
}
.c-alt-toc__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  text-decoration: none;
  color: var(--lh-fg);
  font-family: var(--lh-ff);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
}
.c-alt-toc__link:hover {
  color: var(--lh-cp);
}
.c-alt-toc__num {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--lh-fg);
  background: var(--lh-bg);
  border-radius: 50%;
  flex-shrink: 0;
}
.c-alt-toc__link:hover .c-alt-toc__num {
  color: var(--lh-cp);
  background: var(--lh-bg-alt);
}
.c-alt-toc__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Related alternatives */
.c-alt-related {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--lh-br-light);
}
.c-alt-related__label {
  font-family: var(--lh-ff);
  font-size: 14px;
  font-weight: 800;
  color: var(--lh-bk);
  margin: 0 0 8px;
}
.c-alt-related__list {
  display: flex;
  flex-direction: column;
}
.c-alt-related__link {
  display: block;
  padding: 6px 0;
  border-bottom: 1px solid var(--lh-br-light);
  font-family: var(--lh-ff);
  font-size: 13px;
  font-weight: 500;
  color: var(--lh-cp);
  text-decoration: none;
  transition: color 0.15s;
}
.c-alt-related__link:last-child {
  border-bottom: none;
}
.c-alt-related__link:hover {
  color: var(--lh-ac);
}

/* ---- Breadcrumb Switcher (v5.50.0) ---- */
.c-bcs {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.c-bcs__trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: 100px;
  padding: 3px 9px 3px 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--lh-bk);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  line-height: 1;
  white-space: nowrap;
}
.c-bcs__trigger:hover {
  border-color: var(--lh-br-hover);
  background: var(--lh-bg2);
  color: var(--lh-bk);
}
.c-bcs__trigger[aria-expanded="true"] {
  border-color: var(--lh-ac);
  background: var(--lh-bg-alt);
  color: var(--lh-ac);
}
.c-bcs__chevron {
  width: 11px;
  height: 11px;
  opacity: 0.45;
  transition: transform 0.15s;
  flex-shrink: 0;
  margin-left: 1px;
}
.c-bcs__trigger[aria-expanded="true"] .c-bcs__chevron {
  transform: rotate(180deg);
  opacity: 0.7;
}
.c-bcs__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 232px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.03);
  z-index: 100;
  overflow: hidden;
}
.c-bcs__dropdown[hidden] { display: none; }
.c-bcs__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--lh-br-light);
}
.c-bcs__search-icon {
  width: 13px;
  height: 13px;
  color: #bbb;
  flex-shrink: 0;
}
.c-bcs__search-input {
  border: none;
  outline: none;
  font: inherit;
  font-size: 11.5px;
  color: var(--lh-bk);
  width: 100%;
  padding: 0;
  background: transparent;
}
.c-bcs__search-input::placeholder { color: #c0c0c0; }
.c-bcs__list {
  list-style: none;
  margin: 0;
  padding: 3px 0;
  max-height: 192px;
  overflow-y: auto;
}
.c-bcs__list::-webkit-scrollbar { width: 3px; }
.c-bcs__list::-webkit-scrollbar-track { background: transparent; }
.c-bcs__list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.c-bcs__item a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  font-size: 11.5px;
  color: var(--lh-fg-2);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
  line-height: 1.3;
}
.c-bcs__item a:hover { background: var(--lh-bg); text-decoration: none; }
.c-bcs__item--active a {
  background: #F5F3FF;
  color: var(--lh-ac);
  font-weight: 600;
}
.c-bcs__item--active a:hover { background: #F0ECFF; }
.c-bcs__initial {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
}
.c-bcs__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d0d0d0;
  flex-shrink: 0;
  margin: 0 6px;
}
.c-bcs__item--active .c-bcs__dot { background: var(--lh-ac); }
.c-bcs__name { flex: 1; min-width: 0; }
.c-bcs__check {
  width: 12px;
  height: 12px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--lh-ac);
}
.c-bcs__footer {
  font-size: 10px;
  color: var(--lh-cp);
  padding: 4px 9px 6px;
  border-top: 1px solid var(--lh-br-light);
}

/* ---- Homepage: Browse Tool Rankings [lh_hub_reviews] (v5.50.0) ---- */
.c-hub-reviews { padding: 48px 0 0; }
.c-hub-reviews__heading {
  font-family: var(--lh-ff-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 20px;
}
.c-hub-reviews__grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c-hub-reviews__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-hub-reviews__card:hover {
  border-color: var(--lh-br-hover);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  text-decoration: none;
}
.c-hub-reviews__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.c-hub-reviews__body { flex: 1; min-width: 0; }
.c-hub-reviews__domain {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--lh-cp);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.c-hub-reviews__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
  line-height: 1.3;
}
.c-hub-reviews__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.c-hub-reviews__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--lh-bk);
}
.c-hub-reviews__date {
  font-size: 11px;
  color: var(--lh-cp);
}

/* ---- Homepage: Latest Reviews [lh_hub_latest] (v5.50.0) ---- */
.c-hub-latest { padding: 48px 0 0; }
.c-hub-latest__heading {
  font-family: var(--lh-ff-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--lh-bk);
  margin: 0 0 20px;
}
.c-hub-latest__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.c-hub-latest__card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  background: var(--lh-wh);
  border: 1px solid var(--lh-br);
  border-radius: var(--lh-radius-lg);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-hub-latest__card:hover {
  border-color: var(--lh-br-hover);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  text-decoration: none;
}
.c-hub-latest__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.c-hub-latest__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.c-hub-latest__domain {
  font-size: 11px;
  font-weight: 600;
  color: var(--lh-cp);
}
.c-hub-latest__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--lh-bk);
  line-height: 1.35;
  margin-bottom: 8px;
}
.c-hub-latest__date {
  font-size: 11px;
  color: var(--lh-cp);
  margin-top: auto;
}
/* ══════════════════════════════════════════════════════════════
   HOMEPAGE: Tool Rankings + Content Gateways + Recently Updated
   v5.51.0 — Listicle Discovery System Build 2 (redesigned)
   ══════════════════════════════════════════════════════════════ */

/* ── Rankings: Dark tabbed panel ── */
.cplh-rk {
  background: var(--lh-bk);
  border-radius: var(--lh-radius-xl);
  padding: 40px 36px 36px;
  position: relative;
  overflow: hidden;
}
.cplh-rk::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
}
.cplh-rk__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; position: relative;
}
.cplh-rk__kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--lh-ac); text-transform: uppercase;
  font-family: 'Sometype Mono', monospace;
}
.cplh-rk__title {
  font-size: 22px; font-weight: 800; color: #fff;
  margin-bottom: 4px; position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cplh-rk__desc {
  font-size: 14px; color: rgba(255,255,255,0.4);
  margin-bottom: 24px; position: relative;
}

/* Domain pill tabs */
.cplh-rk-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; position: relative;
}
.cplh-rk-tab {
  padding: 7px 16px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent; color: rgba(255,255,255,0.45);
  font-size: 13px; font-weight: 500;
  font-family: 'Inter', -apple-system, sans-serif;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 6px;
}
.cplh-rk-tab:hover {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
}
.cplh-rk-tab--on {
  background: var(--lh-ac);
  border-color: var(--lh-ac);
  color: #fff; font-weight: 600;
}
.cplh-rk-tab__dot {
  width: 6px; height: 6px; border-radius: 50%;
}

/* Panel: split layout */
.cplh-rk-panel { display: none; position: relative; margin-top: 24px; }
.cplh-rk-panel--on {
  display: grid; grid-template-columns: 340px 1fr;
  gap: 32px; align-items: start;
}

/* Left: editorial + stats */
.cplh-rk-left__title {
  font-size: 18px; font-weight: 800; color: #fff;
  margin-bottom: 8px; font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.3;
}
.cplh-rk-left__desc {
  font-size: 13px; color: rgba(255,255,255,0.4);
  margin-bottom: 16px; line-height: 1.6;
}
.cplh-rk-left__stats { display: flex; gap: 20px; margin-bottom: 20px; }
.cplh-rk-left__stat-val {
  font-size: 20px; font-weight: 800; color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cplh-rk-left__stat-lbl {
  font-size: 11px; color: rgba(255,255,255,0.3);
  font-family: 'Sometype Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.cplh-rk-left__btn {
  display: inline-block; padding: 10px 22px; border-radius: var(--lh-radius-md);
  background: #fff; color: var(--lh-bk); font-size: 13px; font-weight: 700;
  text-decoration: none; transition: opacity 0.15s;
}
.cplh-rk-left__btn:hover { opacity: 0.9; text-decoration: none; }

/* Right: ranked list */
.cplh-rk-list { border-radius: 12px; overflow: hidden; }
.cplh-rk-list__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: none; border-radius: 12px 12px 0 0;
}
.cplh-rk-list__head-title {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cplh-rk-list__head-count {
  font-size: 11px; color: rgba(255,255,255,0.25);
  font-family: 'Sometype Mono', monospace;
}

.cplh-rk-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.06); border-top: none;
  background: rgba(255,255,255,0.02); transition: background 0.15s;
  text-decoration: none; cursor: pointer; color: inherit;
}
.cplh-rk-item:hover { background: rgba(255,255,255,0.05); text-decoration: none; }
.cplh-rk-item:last-child { border-radius: 0 0 12px 12px; }

.cplh-rk-item__rank {
  width: 26px; height: 26px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 12px;
  font-weight: 800; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif;
}
.cplh-rk-item__rank--1 { background: rgba(102,71,240,0.2); color: var(--lh-ac); }
.cplh-rk-item__rank--2 { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.cplh-rk-item__rank--3 { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
.cplh-rk-item__rank--4 { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.3); }
.cplh-rk-item__rank--5 { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.25); }

.cplh-rk-item__info { flex: 1; min-width: 0; }
.cplh-rk-item__name { font-size: 14px; font-weight: 600; color: #fff; }
.cplh-rk-item__verdict {
  font-size: 12px; color: rgba(255,255,255,0.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cplh-rk-item__rating {
  font-size: 12px; font-weight: 700; color: var(--lh-ac);
  background: rgba(102,71,240,0.12); padding: 3px 8px;
  border-radius: 6px; flex-shrink: 0; font-family: 'Sometype Mono', monospace;
}
.cplh-rk-item__arrow {
  color: rgba(255,255,255,0.15); font-size: 14px; flex-shrink: 0;
  transition: color 0.15s;
}
.cplh-rk-item:hover .cplh-rk-item__arrow { color: rgba(255,255,255,0.4); }


/* ── Content Type Gateways: 2x2 grid ── */
.cplh-ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lh-card-gap); }

.cplh-ex-card {
  padding: 28px 28px 24px; border-radius: var(--lh-card-r);
  border: 1px solid var(--lh-br); display: flex; flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.25s, transform 0.25s;
  text-decoration: none; color: inherit;
}
.cplh-ex-card:hover {
  border-color: #D4D0F0;
  box-shadow: 0 4px 16px rgba(102,71,240,0.08);
  transform: translateY(-2px); text-decoration: none;
}
.cplh-ex-card__icon {
  width: 36px; height: 36px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; margin-bottom: 14px;
  font-size: 18px; font-style: normal;
}
.cplh-ex-card__icon--rank    { background: rgba(102,71,240,0.08); color: var(--lh-ac); }
.cplh-ex-card__icon--alts    { background: rgba(233,61,130,0.08); color: #E93D82; }
.cplh-ex-card__icon--trends  { background: rgba(9,132,227,0.08); color: #0984E3; }
.cplh-ex-card__icon--compare { background: rgba(48,164,108,0.08); color: var(--lh-ok); }

.cplh-ex-card__title {
  font-size: 16px; font-weight: 700; color: var(--lh-bk);
  margin-bottom: 6px; font-family: 'Plus Jakarta Sans', sans-serif;
}
.cplh-ex-card__desc {
  font-size: 13px; color: var(--lh-tx); line-height: 1.5;
  margin-bottom: 14px; flex: 1;
}
.cplh-ex-card__meta { display: flex; align-items: center; gap: 12px; }
.cplh-ex-card__count {
  font-size: 11px; font-weight: 600; color: var(--lh-cp);
  font-family: 'Sometype Mono', monospace; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cplh-ex-card__link {
  font-size: 13px; font-weight: 600; color: var(--lh-ac); margin-left: auto;
}


/* ── Recently Updated: horizontal scroll ── */
.cplh-ru__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.cplh-ru__h3 {
  font-size: 16px; font-weight: 700; color: var(--lh-bk);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cplh-ru-scroll {
  display: flex; gap: 12px; overflow-x: auto;
  padding-bottom: 8px; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cplh-ru-scroll::-webkit-scrollbar { height: 4px; }
.cplh-ru-scroll::-webkit-scrollbar-track { background: transparent; }
.cplh-ru-scroll::-webkit-scrollbar-thumb { background: var(--lh-br); border-radius: 4px; }

.cplh-ru-card {
  flex: 0 0 260px; scroll-snap-align: start;
  padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--lh-br); display: flex; flex-direction: column;
  gap: 8px; text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.25s;
}
.cplh-ru-card:hover {
  border-color: #D4D0F0;
  box-shadow: 0 4px 16px rgba(102,71,240,0.08);
  text-decoration: none;
}
.cplh-ru-card__top { display: flex; align-items: center; gap: 6px; }
.cplh-ru-card__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cplh-ru-card__domain { font-size: 11px; font-weight: 600; }
.cplh-ru-card__type {
  font-size: 10px; color: var(--lh-cp); background: var(--lh-bg2);
  padding: 2px 7px; border-radius: 4px; margin-left: auto;
}
.cplh-ru-card__title {
  font-size: 14px; font-weight: 700; color: var(--lh-bk);
  font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.3;
}
.cplh-ru-card__date {
  font-size: 11px; color: var(--lh-cp);
  font-family: 'Sometype Mono', monospace;
}


/* ── Responsive ── */
@media (max-width: 768px) {
  .cplh-rk { padding: 28px 20px 24px; }
  .cplh-rk-panel--on { grid-template-columns: 1fr; }
  .cplh-rk-tabs { gap: 6px; }
  .cplh-rk-tab { padding: 6px 12px; font-size: 12px; }
  .cplh-rk__title { font-size: 20px; }
  .cplh-ex-grid { grid-template-columns: 1fr; }
}

/* ── COLOR FIX: dark panel text to match design system (0.65 body, 0.45 meta) ── */
.cplh-rk__desc { color: rgba(255,255,255,0.65); }
.cplh-rk-left__desc { color: rgba(255,255,255,0.65); }
.cplh-rk-left__stat-lbl { color: rgba(255,255,255,0.45); }
.cplh-rk-item__verdict { color: rgba(255,255,255,0.55); }
.cplh-rk-list__head-title { color: rgba(255,255,255,0.65); }
.cplh-rk-list__head-count { color: rgba(255,255,255,0.45); }
.cplh-rk-item__arrow { color: rgba(255,255,255,0.25); }
.cplh-rk-item:hover .cplh-rk-item__arrow { color: rgba(255,255,255,0.55); }

/* ── EXPLORE PAGE ── */
.cplh-xp-hero { background:var(--lh-bk); border-radius:var(--lh-radius-xl); padding:56px 48px; text-align:center; position:relative; overflow:hidden; margin-bottom:72px; }
.cplh-xp-hero::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); opacity:.06; pointer-events:none; }
.cplh-xp-hero__kicker { font-size:12px; font-weight:700; letter-spacing:1.5px; color:var(--lh-ac); text-transform:uppercase; font-family:'Sometype Mono',monospace; margin-bottom:12px; position:relative; }
.cplh-xp-hero__h1 { font-size:32px; font-weight:800; color:#fff; margin-bottom:12px; position:relative; line-height:1.2; font-family:'Plus Jakarta Sans',sans-serif; }
.cplh-xp-hero__desc { font-size:15px; color:rgba(255,255,255,0.65); max-width:560px; margin:0 auto 28px; position:relative; line-height:1.6; }
.cplh-xp-hero__stats { display:flex; justify-content:center; gap:36px; position:relative; }
.cplh-xp-hero__stat-val { font-size:22px; font-weight:800; color:#fff; font-family:'Plus Jakarta Sans',sans-serif; }
.cplh-xp-hero__stat-lbl { font-size:11px; color:rgba(255,255,255,0.45); font-family:'Sometype Mono',monospace; text-transform:uppercase; letter-spacing:0.5px; }
.cplh-xp-filters { position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); padding:16px 0; margin-bottom:36px; border-bottom:1px solid var(--lh-br); }
.cplh-xp-filters__inner { display:flex; gap:8px; flex-wrap:wrap; }
.cplh-xp-pill { padding:7px 16px; border-radius:100px; border:1px solid var(--lh-br); background:#fff; color:var(--lh-tx); font-size:13px; font-weight:500; font-family:'Inter',-apple-system,sans-serif; cursor:pointer; transition:all 0.15s; display:flex; align-items:center; gap:6px; }
.cplh-xp-pill:hover { border-color:var(--lh-ac); color:var(--lh-bk); }
.cplh-xp-pill--on { background:var(--lh-ac); border-color:var(--lh-ac); color:#fff; font-weight:600; }
.cplh-xp-pill__dot { width:6px; height:6px; border-radius:50%; }
.cplh-xp-pill__count { font-size:11px; opacity:0.6; font-family:'Sometype Mono',monospace; }
.cplh-xp-featured-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cplh-xp-featured-card { padding:24px; border-radius:14px; border:1px solid var(--lh-br); display:flex; flex-direction:column; transition:border-color 0.15s,box-shadow 0.25s,transform 0.25s; text-decoration:none; color:inherit; }
.cplh-xp-featured-card:hover { border-color:#D4D0F0; box-shadow:0 4px 16px rgba(102,71,240,0.08); transform:translateY(-2px); text-decoration:none; }
.cplh-xp-featured-card__badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--lh-ac); background:rgba(102,71,240,0.06); padding:3px 10px; border-radius:100px; margin-bottom:12px; align-self:flex-start; font-family:'Sometype Mono',monospace; text-transform:uppercase; letter-spacing:0.5px; }
.cplh-xp-featured-card__title { font-size:16px; font-weight:700; color:var(--lh-bk); margin-bottom:6px; line-height:1.3; font-family:'Plus Jakarta Sans',sans-serif; }
.cplh-xp-featured-card__desc { font-size:13px; color:var(--lh-tx); line-height:1.5; margin-bottom:14px; flex:1; }
.cplh-xp-featured-card__meta { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--lh-cp); font-family:'Sometype Mono',monospace; }
.cplh-xp-featured-card__meta-dot { width:3px; height:3px; border-radius:50%; background:var(--lh-br); }
.cplh-xp-featured-card__domain { display:flex; align-items:center; gap:4px; font-weight:600; }
.cplh-xp-section { margin-bottom:64px; }
.cplh-xp-section__h2 { font-size:20px; font-weight:800; margin-bottom:20px; font-family:'Plus Jakarta Sans',sans-serif; }
.cplh-xp-divider { height:1px; background:var(--lh-br); margin:8px 0 64px; border:none; }
.cplh-xp-domain-group { margin-bottom:20px; }
.cplh-xp-domain-group__label { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--lh-bk); margin-bottom:12px; font-family:'Plus Jakarta Sans',sans-serif; }
.cplh-xp-domain-group__dot { width:8px; height:8px; border-radius:50%; }
.cplh-xp-domain-group__count { font-size:11px; color:var(--lh-cp); font-weight:400; font-family:'Sometype Mono',monospace; margin-left:4px; }
.cplh-xp-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cplh-xp-grid--3col { grid-template-columns:repeat(3,1fr); }
.cplh-xp-card { padding:20px 22px; border-radius:12px; border:1px solid var(--lh-br); display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; transition:border-color 0.15s,box-shadow 0.25s; }
.cplh-xp-card:hover { border-color:#D4D0F0; box-shadow:0 4px 16px rgba(102,71,240,0.08); text-decoration:none; }
.cplh-xp-card__top { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.cplh-xp-card__dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.cplh-xp-card__domain { font-size:11px; font-weight:600; }
.cplh-xp-card__type { font-size:10px; font-weight:600; color:#fff; padding:2px 8px; border-radius:100px; margin-left:auto; text-transform:uppercase; letter-spacing:0.3px; }
.cplh-xp-card__type--rankings { background:var(--lh-ac); }
.cplh-xp-card__type--listicle { background:#8B5CF6; }
.cplh-xp-card__type--alts { background:#E93D82; }
.cplh-xp-card__type--trends { background:#0984E3; }
.cplh-xp-card__type--guide { background:var(--lh-ok); }
.cplh-xp-card__type--compare { background:#737373; }
.cplh-xp-card__title { font-size:15px; font-weight:700; color:var(--lh-bk); font-family:'Plus Jakarta Sans',sans-serif; line-height:1.3; }
.cplh-xp-card__excerpt { font-size:12px; color:var(--lh-tx); line-height:1.5; }
.cplh-xp-card__footer { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:8px; font-size:11px; color:var(--lh-cp); font-family:'Sometype Mono',monospace; }
.cplh-xp-card__footer-dot { width:3px; height:3px; border-radius:50%; background:var(--lh-br); }
@media (max-width:768px) {
  .cplh-xp-hero { padding:36px 24px; }
  .cplh-xp-hero__h1 { font-size:24px; }
  .cplh-xp-hero__stats { gap:20px; }
  .cplh-xp-featured-grid { grid-template-columns:1fr; }
  .cplh-xp-grid { grid-template-columns:1fr; }
  .cplh-xp-grid--3col { grid-template-columns:1fr; }
  .cplh-xp-filters__inner { gap:6px; }
  .cplh-xp-pill { padding:6px 12px; font-size:12px; }
}