/* ===========================================================================
   Movegistics SEO Content — Sitewide-safe CSS
   ===========================================================================
   This bundle contains ONLY rules using unique class names (.hub-hero,
   .blog-card, .featured-card, .compare-grid, .comparison-table, etc.) —
   which only exist on the new blog hub, comp hub, and 9 article pages.

   No generic html/body/*/img/a/.container/.btn/.btn-primary/.site-header
   rules are present. Loading this sitewide will NOT affect any existing
   page on the site (homepage, /automation/, customer stories, etc.) —
   because none of them have elements with these class names.
   ===========================================================================
   Append this to Appearance → Customize → Additional CSS, AFTER any
   existing CSS already in that box. Do not replace existing CSS.
   =========================================================================== */

/* ===========================================================================
   Movegistics AI — SEO Content Site CSS Bundle
   Pasted into Appearance → Customize → Additional CSS
   Loads sitewide. Selectors only match the pages we built.
   =========================================================================== */

/* === SHARED SITE STYLES === */
/* ============================================
   Movegistics AI SEO Content Site - Stylesheet
   Standalone. Matches movegistics.com visual theme.
   Palette: Blue #0066CC | Orange #FF6B35 | Navy #1A1A1A
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ========== SITE HEADER ========== */

/* ========== BLOG HEADER (PAGE HERO) ========== */
.blog-header {
  background: linear-gradient(135deg, #1A1A1A 0%, #0A2540 100%);
  padding: 5rem 2rem 5rem;
  text-align: center;
  color: #fff;
}

.blog-header .category-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,107,53,.15);
  border: 1px solid rgba(255,107,53,.3);
  color: #FF8F61;
  padding: .4rem 1.2rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-family: 'Inter', sans-serif;
}

.blog-header .category-badge span.dot {
  width: 7px; height: 7px;
  background: #FF6B35;
  border-radius: 50%;
  display: inline-block;
}

.blog-header h1 {
  font-family: 'Geologica', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.25;
  max-width: 820px;
  margin: 0 auto 1.5rem;
  letter-spacing: -0.02em;
}

.blog-header .meta {
  font-size: .9rem;
  color: rgba(255,255,255,.7);
  font-family: 'Inter', sans-serif;
}

/* ========== ARTICLE CONTAINER ========== */
.blog-container {
  max-width: 820px;
  margin: -2rem auto 4rem;
  background: #fff;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  position: relative;
  z-index: 2;
}

.blog-container h2 {
  font-family: 'Geologica', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #1A1A1A;
  margin: 2.75rem 0 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.blog-container h3 {
  font-family: 'Geologica', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #0066CC;
  margin: 2rem 0 .75rem;
  letter-spacing: -0.01em;
}

.blog-container p { margin-bottom: 1.25rem; color: #2C3E50; }

.blog-container strong { color: #1A1A1A; font-weight: 700; }

.blog-container ul, .blog-container ol { margin: 1rem 0 1.5rem 1.5rem; color: #2C3E50; }

.blog-container li { margin-bottom: .6rem; padding-left: .25rem; }

.blog-container a { color: #0066CC; font-weight: 500; }

.blog-container a:hover { color: #004C99; }

@media (max-width: 768px) {
  .blog-container { padding: 2rem 1.25rem; margin: -1rem 1rem 2rem; }

  .blog-header { padding: 3rem 1rem 3rem; }

}
@media (max-width: 480px) {
  .blog-container { padding: 1.5rem 1rem; margin: -0.5rem 0.75rem 1.5rem; border-radius: 12px; }

  .blog-container h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }

  .blog-container h3 { font-size: 1.1rem; }

  .blog-header { padding: 2.5rem 1rem 2.5rem; }

}

/* ========== CALLOUT BOXES ========== */
.callout-box {
  background: linear-gradient(135deg, #F0F7FF 0%, #E5EEF8 100%);
  border-left: 4px solid #0066CC;
  border-radius: 0 12px 12px 0;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
}

.callout-box p { margin-bottom: .5rem; color: #0A2540; }

.callout-box p:last-child { margin-bottom: 0; }

.callout-orange {
  background: linear-gradient(135deg, #FFF5F0 0%, #FFEAD9 100%);
  border-left: 4px solid #FF6B35;
  border-radius: 0 12px 12px 0;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
}

.callout-orange p { margin-bottom: .5rem; color: #0A2540; }

.callout-orange p:last-child { margin-bottom: 0; }

.callout-quote {
  background: #fff;
  border-left: 4px solid #FF6B35;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  font-family: 'Geologica', sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #1A1A1A;
  line-height: 1.5;
}

.callout-quote .attribution {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-style: normal;
  color: #6B7280;
  margin-top: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ========== STAT CARDS ========== */
.stat-row { display: flex; gap: 1.25rem; margin: 2rem 0; flex-wrap: wrap; }

.stat-card {
  flex: 1; min-width: 160px;
  background: #F0F7FF;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  border: 1px solid #CFE2F5;
}

.stat-card .number {
  font-family: 'Geologica', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #0066CC;
  line-height: 1.2;
}

.stat-card .label { font-size: .85rem; color: #4A5565; margin-top: .25rem; }

/* ========== COMPARISON TABLE ========== */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: .93rem;
}

.comparison-table th {
  background: #1A1A1A;
  color: #fff;
  padding: .85rem 1rem;
  text-align: left;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
}

.comparison-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid #E5EEF8;
  color: #2C3E50;
  vertical-align: top;
  line-height: 1.5;
}

.comparison-table tr:nth-child(even) td { background: #F7FBFF; }

.comparison-table .highlight-cell { color: #0066CC; font-weight: 600; }

.comparison-table .verdict-cell { color: #1A1A1A; font-weight: 500; font-style: italic; }

@media (max-width: 640px) {
  .comparison-table { font-size: .85rem; }

  .comparison-table th, .comparison-table td { padding: .55rem .7rem; }

}

/* ========== CTA BOX ========== */
.blog-cta {
  background: linear-gradient(135deg, #0066CC 0%, #0A2540 100%);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  margin: 3rem 0 1rem;
  color: #fff;
}

.blog-cta h3 {
  font-family: 'Geologica', sans-serif;
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: .75rem;
  letter-spacing: -0.01em;
}

.blog-cta p { color: rgba(255,255,255,.82); margin-bottom: 1.5rem; font-size: 1rem; }

.blog-cta .cta-btn {
  display: inline-block;
  background: #FF6B35;
  color: #fff;
  padding: .9rem 2.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  transition: background .2s, transform .1s;
  font-family: 'Inter', sans-serif;
}

.blog-cta .cta-btn:hover { background: #E54E1A; color: #fff; text-decoration: none; transform: translateY(-1px); }

.blog-cta .micro {
  display: block;
  margin-top: .85rem;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  font-family: 'Inter', sans-serif;
}

/* ========== SOURCE NOTE ========== */
.source-note {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #E5EEF8;
  font-size: .82rem;
  color: #6B7280;
  line-height: 1.65;
  font-style: italic;
}

.source-note strong { color: #4A5565; font-weight: 700; }

/* ========== RELATED PAGES ========== */
.related-pages {
  margin-top: 3rem;
  padding: 2rem;
  background: #F0F7FF;
  border-radius: 12px;
}

.related-pages h3 {
  font-family: 'Geologica', sans-serif;
  font-size: 1.2rem;
  margin: 0 0 1rem;
  color: #1A1A1A;
}

.related-pages ul { list-style: none; margin: 0; padding: 0; }

.related-pages li { margin-bottom: .5rem; padding-left: 0; }

.related-pages li::before { content: "→"; color: #FF6B35; margin-right: .5rem; font-weight: 700; }

.related-pages a { color: #0066CC; font-weight: 500; }

/* ========== SITE FOOTER ========== */

/* ========== HUB / INDEX PAGE ========== */
.hub-hero {
  background: linear-gradient(135deg, #1A1A1A 0%, #0A2540 100%);
  padding: 6rem 1.5rem 6rem;
  text-align: center;
  color: #fff;
}

.hub-hero h1 {
  font-family: 'Geologica', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  max-width: 900px;
  margin: 0 auto 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hub-hero .hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.82);
  max-width: 720px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.hub-hero .cta-btn {
  display: inline-block;
  background: #FF6B35;
  color: #fff;
  padding: .9rem 2.25rem;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
}

.hub-hero .cta-btn:hover { background: #E54E1A; color: #fff; text-decoration: none; }

.hub-container {
  max-width: 1100px;
  margin: -3rem auto 5rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.compare-card {
  background: #fff;
  border: 1px solid #E5EEF8;
  border-radius: 14px;
  padding: 1.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(10,37,64,.04);
}

.compare-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10,37,64,.09);
  border-color: #CFE2F5;
  text-decoration: none;
  color: inherit;
}

.compare-card .card-tag {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  font-weight: 700;
  color: #FF6B35;
  margin-bottom: .75rem;
}

.compare-card h3 {
  font-family: 'Geologica', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: .6rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.compare-card p {
  color: #4A5565;
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}

.compare-card .card-cta {
  color: #0066CC;
  font-weight: 600;
  font-size: .9rem;
  font-family: 'Inter', sans-serif;
}

.hub-section {
  padding: 3rem 0;
}

.hub-section h2 {
  font-family: 'Geologica', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.hub-section p {
  color: #2C3E50;
  font-size: 1.02rem;
  max-width: 820px;
  margin-bottom: 1rem;
}

/* ========== UTILITIES ========== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.75);
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  margin-bottom: 1rem;
  text-decoration: none;
}

.back-link:hover { color: #FF6B35; text-decoration: none; }

/* ========== CHECKLIST ========== */
.checklist {
  list-style: none !important;
  margin: 1.5rem 0 2rem !important;
  padding: 0 !important;
}

.checklist li {
  position: relative;
  padding-left: 2rem !important;
  margin-bottom: .85rem !important;
  color: #2C3E50;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background: #0066CC;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
}

/* ========== HUB / INDEX PAGE ========== */
.hub-hero {
  background: linear-gradient(135deg, #003366 0%, #004D99 100%);
  padding: 6rem 1.5rem 6rem;
  text-align: center;
  color: #fff;
}

.hub-hero h1 {
  font-family: 'Geologica', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  max-width: 900px;
  margin: 0 auto 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hub-hero .hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.78);
  max-width: 720px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.hub-hero .cta-btn {
  display: inline-block;
  background: #FF6B35;
  color: #fff;
  padding: .9rem 2.25rem;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
}

.hub-hero .cta-btn:hover { background: #E55A25; color: #fff; text-decoration: none; }

.hub-container {
  max-width: 1100px;
  margin: -3rem auto 5rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.compare-card {
  background: #fff;
  border: 1px solid #D6E4F0;
  border-radius: 14px;
  padding: 1.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,51,102,.04);
}

.compare-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,51,102,.09);
  border-color: #0066CC;
  text-decoration: none;
  color: inherit;
}

.compare-card .card-tag {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  font-weight: 700;
  color: #0066CC;
  margin-bottom: .75rem;
}

.compare-card h3 {
  font-family: 'Geologica', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: .6rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.compare-card p {
  color: #555;
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}

.compare-card .card-cta {
  color: #0066CC;
  font-weight: 600;
  font-size: .9rem;
  font-family: 'Inter', sans-serif;
}

.hub-section {
  padding: 3rem 0;
}

.hub-section h2 {
  font-family: 'Geologica', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.hub-section p {
  color: #444;
  font-size: 1.02rem;
  max-width: 820px;
  margin-bottom: 1rem;
}

/* === PAGE-SPECIFIC STYLES (deduplicated across publish-ready files) === */

/* === Page-specific from 00-blog-hub.html === */
/* ─── Hub-specific upgrade styles (page-scoped) ─── */
  .hub-page { background: #FAFAFA; }

  /* Hero */
  .hub-hero {
    background: linear-gradient(135deg, #001A33 0%, #003366 50%, #004D99 100%);
    padding: 5.5rem 1.5rem 7rem;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
  }

  .hub-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 80%, rgba(0,102,204,.22) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(255,107,53,.14) 0%, transparent 50%);
    pointer-events: none;
  }

  .hub-hero > * { position: relative; z-index: 1; }

  .hub-hero .category-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,107,53,.15);
    border: 1px solid rgba(255,107,53,.35);
    color: #FF6B35;
    padding: .4rem 1.2rem;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }

  .hub-hero .category-badge .dot {
    width: 6px; height: 6px;
    background: #FF6B35;
    border-radius: 50%;
    display: inline-block;
  }

  .hub-hero h1 {
    font-family: 'Geologica', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    max-width: 880px;
    margin: 0 auto 1.25rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
  }

  .hub-hero h1 .accent { color: #FF6B35; }

  .hub-hero .hero-sub {
    font-size: 1.1rem;
    color: rgba(255,255,255,.74);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
    font-family: 'Manrope', sans-serif;
  }

  /* Filter bar */
  .filter-wrap {
    max-width: 1180px;
    margin: -3rem auto 0;
    padding: 0 1.5rem;
    position: relative;
    z-index: 5;
  }

  .filter-bar {
    background: #fff;
    border-radius: 14px;
    padding: .9rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0,26,51,.12);
    border: 1px solid #E5EEF8;
    font-family: 'Manrope', sans-serif;
  }

  .filter-label {
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6B7280;
    margin-right: .5rem;
    white-space: nowrap;
  }

  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #4A5565;
    transition: all .15s;
    user-select: none;
  }

  .filter-chip:hover { border-color: #0066CC; color: #0066CC; }

  .filter-chip.active {
    background: #0A2540;
    border-color: #0A2540;
    color: #fff;
  }

  .filter-chip .count {
    background: rgba(255,255,255,.18);
    color: inherit;
    padding: .1rem .45rem;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 700;
  }

  .filter-chip:not(.active) .count {
    background: #F3F4F6;
    color: #6B7280;
  }

  /* Container */
  .hub-container {
    max-width: 1180px;
    margin: 2rem auto 5rem;
    padding: 0 1.5rem;
    font-family: 'Manrope', sans-serif;
  }

  /* Featured card */
  .featured-card {
    display: grid;
    grid-template-columns: 1.05fr 1.4fr;
    gap: 0;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,26,51,.06);
    border: 1px solid #E5EEF8;
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
    color: inherit;
    margin-bottom: 3rem;
  }

  .featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,26,51,.12);
    text-decoration: none;
    color: inherit;
  }

  @media (max-width: 820px) {
    .featured-card { grid-template-columns: 1fr; }

  }
  .featured-art {
    background-color: #003366; /* MG blue fallback if image is missing */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 320px;
    position: relative;
    overflow: hidden;
  }

  .featured-art::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, rgba(0,26,51,.55) 0%, rgba(0,77,153,.25) 40%, rgba(0,0,0,0) 70%),
                      linear-gradient(0deg, rgba(0,26,51,.35) 0%, rgba(0,0,0,0) 40%);
    z-index: 1;
    pointer-events: none;
  }

  .featured-art .art-icon {
    width: 28px;
    height: 28px;
    color: #fff;
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 2;
    background: rgba(0,26,51,.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    padding: 8px;
    box-sizing: content-box;
  }

  .featured-content {
    padding: 2.5rem 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
  }

  .featured-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: linear-gradient(135deg, #FF6B35, #FB923C);
    color: #fff;
    padding: .3rem .75rem;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    align-self: flex-start;
  }

  .featured-content h2 {
    font-family: 'Geologica', sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-bottom: .85rem;
    color: #0A2540;
  }

  .featured-content p {
    font-size: 1.02rem;
    color: #4A5565;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    flex: 1;
  }

  .featured-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    flex-wrap: wrap;
  }

  .featured-meta .tag {
    color: #0066CC;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
  }

  .featured-meta .read-time {
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
  }

  .featured-meta .cta {
    margin-left: auto;
    color: #0A2540;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
  }

  .featured-card:hover .cta { color: #0066CC; }

  /* Card grid */
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.75rem;
  }

  .blog-card {
    background: #fff;
    border: 1px solid #E5EEF8;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    box-shadow: 0 2px 8px rgba(0,26,51,.04);
  }

  .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0,26,51,.10);
    border-color: #CFE2F5;
    text-decoration: none;
    color: inherit;
  }

  .card-art {
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .card-art::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .card-art .icon {
    width: 22px;
    height: 22px;
    color: #fff;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    background: rgba(0,26,51,.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    padding: 7px;
    box-sizing: content-box;
  }

  /* CRM Guides — MG blue overlay */
  .blog-card[data-category="crm-guides"] .card-art {
    background-color: #003366;
  }

  .blog-card[data-category="crm-guides"] .card-art::before {
    background-image: linear-gradient(135deg, rgba(0,26,51,.50) 0%, rgba(0,77,153,.22) 45%, rgba(0,0,0,0) 70%),
                      linear-gradient(0deg, rgba(0,26,51,.35) 0%, rgba(0,0,0,0) 45%);
  }

  /* Software & Buyer's Guides — orange-tinted overlay + orange icon badge */
  .blog-card[data-category="software-buyers-guide"] .card-art {
    background-color: #C2410C;
  }

  .blog-card[data-category="software-buyers-guide"] .card-art::before {
    background-image: linear-gradient(135deg, rgba(154,52,18,.52) 0%, rgba(234,88,12,.22) 45%, rgba(0,0,0,0) 70%),
                      linear-gradient(0deg, rgba(154,52,18,.35) 0%, rgba(0,0,0,0) 45%);
  }

  .blog-card[data-category="software-buyers-guide"] .card-art .icon {
    background: rgba(154,52,18,.55);
  }

  .card-body {
    padding: 1.5rem 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .card-tag {
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #0066CC;
    margin-bottom: .65rem;
  }

  .blog-card[data-category="software-buyers-guide"] .card-tag { color: #C2410C; }

  .card-body h3 {
    font-family: 'Geologica', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    color: #0A2540;
    margin-bottom: .65rem;
    letter-spacing: -0.01em;
  }

  .card-body p {
    font-size: .92rem;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex: 1;
  }

  .card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    margin-top: auto;
  }

  .card-meta .read-time {
    color: #9CA3AF;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
  }

  .card-meta .cta {
    color: #0066CC;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
  }

  .blog-card[data-category="software-buyers-guide"] .card-meta .cta { color: #C2410C; }

  .blog-card.hidden, .featured-card.hidden { display: none; }

  /* Responsive */
  @media (max-width: 720px) {
    .hub-hero { padding: 4rem 1.25rem 5.5rem; }

    .filter-bar { flex-direction: column; align-items: flex-start; }

    .filter-label { margin-bottom: .25rem; }

    .featured-content { padding: 2rem 1.5rem; }

  }
/* === Page-specific from 01-complete-guide-to-crm-for-moving-companies.html === */
/* ===== CRM Pipeline Visual ===== */
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .6rem;
  margin: 1.75rem 0 0;
}

@media (max-width: 680px) {
  .pipeline-grid { grid-template-columns: repeat(2, 1fr); }

}
.pipeline-stage {
  background: #F0F7FF;
  border: 1px solid #CFE2F5;
  border-radius: 10px;
  padding: .9rem .8rem .85rem;
  text-align: center;
  transition: box-shadow .15s, border-color .15s;
}

.pipeline-stage:hover { border-color: #0066CC; box-shadow: 0 4px 14px rgba(0,102,204,.1); }

.ps-num {
  background: #0066CC;
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  margin: 0 auto .55rem;
}

.ps-name {
  font-family: 'Geologica', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: #0A2540;
  margin-bottom: .3rem;
  line-height: 1.25;
}

.ps-key {
  font-size: .7rem;
  color: #4A5565;
  line-height: 1.35;
  font-family: 'Inter', sans-serif;
}

.pipeline-wrapper {
  background: #F7FBFF;
  border: 1px solid #CFE2F5;
  border-radius: 14px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.pipeline-wrapper-title {
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: #0A2540;
  margin-bottom: 1rem;
  text-align: center;
  letter-spacing: -.01em;
}

/* === Page-specific from 01-complete-guide-to-crm-for-moving-companies.html === */
.faq-block { margin: 2rem 0; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; }

.faq-block h2 { margin-top: 0; }

.faq-item { margin: 0.75rem 0; padding: 0.75rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; }

.faq-item summary { cursor: pointer; padding: 0.25rem 0; font-size: 1.05rem; }

.faq-item p { margin: 0.5rem 0 0 0; line-height: 1.6; color: #333; }

/* === Page-specific from 02-why-every-moving-company-needs-a-crm.html === */
.faq-block { margin: 2rem 0; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; }

.faq-block h2 { margin-top: 0; }

.faq-item { margin: 0.75rem 0; padding: 0.75rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; }

.faq-item summary { cursor: pointer; padding: 0.25rem 0; font-size: 1.05rem; }

.faq-item p { margin: 0.5rem 0 0 0; line-height: 1.6; color: #333; }

/* === Page-specific from 03-moving-crm-double-close-rate.html === */
/* ===== Close-Rate Compounding Visual ===== */
.compound-stack {
  background: #F7FBFF;
  border: 1px solid #CFE2F5;
  border-radius: 14px;
  padding: 1.75rem;
  margin: 2rem 0;
}

.compound-title {
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #0A2540;
  margin-bottom: .3rem;
  letter-spacing: -.01em;
}

.compound-note {
  font-size: .78rem;
  color: #6B7280;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.compound-bars { display: flex; flex-direction: column; gap: .75rem; }

.cbar-row { display: flex; align-items: center; gap: .85rem; }

.cbar-label {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: #4A5565;
  width: 175px;
  flex-shrink: 0;
  text-align: right;
  line-height: 1.3;
}

.cbar-label.final { color: #0066CC; }

.cbar-track {
  flex: 1;
  background: #E5EEF8;
  border-radius: 6px;
  height: 32px;
  overflow: hidden;
}

.cbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0066CC 0%, #3399FF 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: .65rem;
  min-width: 54px;
}

.cbar-fill.baseline { background: linear-gradient(90deg, #94A3B8 0%, #CBD5E1 100%); }

.cbar-fill.full { background: linear-gradient(90deg, #0A2540 0%, #0066CC 100%); }

.cbar-value {
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: #fff;
  white-space: nowrap;
}

.compound-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #CFE2F5;
  font-size: .83rem;
  color: #0066CC;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  text-align: center;
  letter-spacing: .01em;
}

@media (max-width: 500px) {
  .cbar-label { width: 115px; font-size: .72rem; }

}
/* === Page-specific from 03-moving-crm-double-close-rate.html === */
.faq-block { margin: 2rem 0; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; }

.faq-block h2 { margin-top: 0; }

.faq-item { margin: 0.75rem 0; padding: 0.75rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; }

.faq-item summary { cursor: pointer; padding: 0.25rem 0; font-size: 1.05rem; }

.faq-item p { margin: 0.5rem 0 0 0; line-height: 1.6; color: #333; }

/* === Page-specific from 04-best-moving-company-software-2026.html === */
/* ===== Growth Stage Cards ===== */
.stage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.75rem 0 2rem;
}

@media (max-width: 600px) {
  .stage-grid { grid-template-columns: 1fr; }

}
.stage-card {
  border: 1px solid #E5EEF8;
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
}

.stage-card.scale {
  border-color: #CFE2F5;
  background: #F7FBFF;
}

.stage-badge {
  display: inline-block;
  background: #0066CC;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .25rem .8rem;
  border-radius: 100px;
  margin-bottom: .8rem;
}

.stage-badge.dark { background: #0A2540; }

.stage-card h4 {
  font-family: 'Geologica', sans-serif;
  font-size: .98rem;
  font-weight: 600;
  color: #0A2540;
  margin-bottom: .5rem;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.stage-card p {
  font-size: .88rem;
  color: #4A5565;
  margin-bottom: .8rem;
  line-height: 1.6;
}

.stage-focus {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  color: #0066CC;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.4;
}

.stage-focus.dark { color: #0A2540; }

/* === Page-specific from 04-best-moving-company-software-2026.html === */
.faq-block { margin: 2rem 0; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; }

.faq-block h2 { margin-top: 0; }

.faq-item { margin: 0.75rem 0; padding: 0.75rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; }

.faq-item summary { cursor: pointer; padding: 0.25rem 0; font-size: 1.05rem; }

.faq-item p { margin: 0.5rem 0 0 0; line-height: 1.6; color: #333; }

/* === Page-specific from 05-top-5-moving-company-software-compared-2026.html === */
.faq-block { margin: 2rem 0; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; }

.faq-block h2 { margin-top: 0; }

.faq-item { margin: 0.75rem 0; padding: 0.75rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; }

.faq-item summary { cursor: pointer; padding: 0.25rem 0; font-size: 1.05rem; }

.faq-item p { margin: 0.5rem 0 0 0; line-height: 1.6; color: #333; }

/* === Page-specific from 01-movegistics-vs-smartmoving.html === */
/* ===== Page-specific enhancements ===== */
  .diff-section {
    border: 1px solid #E5EEF8;
    border-radius: 14px;
    overflow: hidden;
    margin: 2.5rem 0;
  }

  .diff-section-header {
    background: linear-gradient(135deg, #0A2540 0%, #0066CC 100%);
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .diff-section-header .diff-number {
    background: rgba(255,255,255,.15);
    color: #fff;
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .diff-section-header h3 {
    color: #fff !important;
    font-family: 'Geologica', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 !important;
    letter-spacing: -0.01em;
  }

  .diff-body {
    padding: 1.75rem;
    background: #fff;
  }

  .diff-body p { margin-bottom: 1rem; }

  .diff-body p:last-child { margin-bottom: 0; }

  .platform-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
  }

  @media (max-width: 620px) {
    .platform-split { grid-template-columns: 1fr; }

  }
  .platform-card {
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    font-size: .93rem;
  }

  .platform-card.mg {
    background: #F0F7FF;
    border: 1px solid #CFE2F5;
  }

  .platform-card.sm {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
  }

  .platform-card .platform-label {
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .75rem;
  }

  .platform-card.mg .platform-label { color: #0066CC; }

  .platform-card.sm .platform-label { color: #6B7280; }

  .platform-card ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .platform-card li {
    position: relative;
    padding-left: 1.4rem !important;
    margin-bottom: .5rem !important;
    color: #2C3E50;
    line-height: 1.5;
  }

  .platform-card.mg li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0066CC;
    font-weight: 700;
    font-size: .85rem;
  }

  .platform-card.sm li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: #9CA3AF;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.1;
  }

  .verdict-banner {
    background: linear-gradient(135deg, #FFF5F0 0%, #FFEAD9 100%);
    border: 1px solid rgba(255,107,53,.25);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin-top: 1.25rem;
    font-size: .92rem;
  }

  .verdict-banner strong { color: #C04010; }

  .profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.75rem 0;
  }

  @media (max-width: 620px) {
    .profile-grid { grid-template-columns: 1fr; }

  }
  .profile-card {
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
  }

  .profile-card.mg-profile {
    background: #F0F7FF;
    border: 1px solid #CFE2F5;
  }

  .profile-card.sm-profile {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
  }

  .profile-card h4 {
    font-family: 'Geologica', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
  }

  .profile-card.mg-profile h4 { color: #0066CC; }

  .profile-card.sm-profile h4 { color: #374151; }

  .profile-card ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .profile-card li {
    position: relative;
    padding-left: 1.5rem !important;
    margin-bottom: .65rem !important;
    color: #2C3E50;
    font-size: .92rem;
    line-height: 1.5;
  }

  .profile-card.mg-profile li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0066CC;
    font-weight: 700;
    font-size: .82rem;
  }

  .profile-card.sm-profile li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #6B7280;
    font-weight: 700;
    font-size: .82rem;
  }

  .toc {
    background: #F7FBFF;
    border: 1px solid #CFE2F5;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
  }

  .toc p {
    font-family: 'Inter', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4A5565;
    margin-bottom: .75rem !important;
  }

  .toc ol {
    margin: 0 !important;
    padding-left: 1.25rem !important;
  }

  .toc li {
    margin-bottom: .4rem !important;
    font-size: .92rem;
  }

  .toc a { color: #0066CC; font-weight: 500; }

/* === Page-specific from 02-movegistics-vs-supermove.html === */
/* ===== Page-specific enhancements ===== */
  .diff-section {
    border: 1px solid #E5EEF8;
    border-radius: 14px;
    overflow: hidden;
    margin: 2.5rem 0;
  }

  .diff-section-header {
    background: linear-gradient(135deg, #0A2540 0%, #0066CC 100%);
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .diff-section-header .diff-number {
    background: rgba(255,255,255,.15);
    color: #fff;
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .diff-section-header h3 {
    color: #fff !important;
    font-family: 'Geologica', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 !important;
    letter-spacing: -0.01em;
  }

  .diff-body {
    padding: 1.75rem;
    background: #fff;
  }

  .diff-body p { margin-bottom: 1rem; }

  .diff-body p:last-child { margin-bottom: 0; }

  .platform-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
  }

  @media (max-width: 620px) {
    .platform-split { grid-template-columns: 1fr; }

  }
  .platform-card {
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    font-size: .93rem;
  }

  .platform-card.mg {
    background: #F0F7FF;
    border: 1px solid #CFE2F5;
  }

  .platform-card.sm {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
  }

  .platform-card .platform-label {
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .75rem;
  }

  .platform-card.mg .platform-label { color: #0066CC; }

  .platform-card.sm .platform-label { color: #6B7280; }

  .platform-card ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .platform-card li {
    position: relative;
    padding-left: 1.4rem !important;
    margin-bottom: .5rem !important;
    color: #2C3E50;
    line-height: 1.5;
  }

  .platform-card.mg li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0066CC;
    font-weight: 700;
    font-size: .85rem;
  }

  .platform-card.sm li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: #9CA3AF;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.1;
  }

  .verdict-banner {
    background: linear-gradient(135deg, #FFF5F0 0%, #FFEAD9 100%);
    border: 1px solid rgba(255,107,53,.25);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin-top: 1.25rem;
    font-size: .92rem;
  }

  .verdict-banner strong { color: #C04010; }

  .profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.75rem 0;
  }

  @media (max-width: 620px) {
    .profile-grid { grid-template-columns: 1fr; }

  }
  .profile-card {
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
  }

  .profile-card.mg-profile {
    background: #F0F7FF;
    border: 1px solid #CFE2F5;
  }

  .profile-card.sm-profile {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
  }

  .profile-card h4 {
    font-family: 'Geologica', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
  }

  .profile-card.mg-profile h4 { color: #0066CC; }

  .profile-card.sm-profile h4 { color: #374151; }

  .profile-card ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .profile-card li {
    position: relative;
    padding-left: 1.5rem !important;
    margin-bottom: .65rem !important;
    color: #2C3E50;
    font-size: .92rem;
    line-height: 1.5;
  }

  .profile-card.mg-profile li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0066CC;
    font-weight: 700;
    font-size: .82rem;
  }

  .profile-card.sm-profile li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #6B7280;
    font-weight: 700;
    font-size: .82rem;
  }

  .toc {
    background: #F7FBFF;
    border: 1px solid #CFE2F5;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
  }

  .toc-title {
    font-family: 'Geologica', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #0066CC;
    margin-bottom: 1rem;
  }

  .toc ol {
    margin: 0;
    padding-left: 1.5rem;
    counter-reset: none;
  }

  .toc li {
    margin-bottom: .4rem;
    font-size: .91rem;
    color: #2C3E50;
  }

  .toc a {
    color: #0066CC;
    text-decoration: none;
  }

  .toc a:hover { text-decoration: underline; }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: #6B7280;
    text-decoration: none;
    margin-bottom: 1.5rem;
  }

  .back-link:hover { color: #0066CC; }

  .highlight-note {
    background: #EFF6FF;
    border-left: 4px solid #0066CC;
    padding: .9rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin: 1.25rem 0;
    font-size: .93rem;
    color: #1E3A5F;
  }

/* === Page-specific from 03-movegistics-vs-chariot.html === */
.diff-section { border: 1px solid #E5EEF8; border-radius: 14px; overflow: hidden; margin: 2.5rem 0; }

  .diff-section-header { background: linear-gradient(135deg, #0A2540 0%, #0066CC 100%); padding: 1.25rem 1.75rem; display: flex; align-items: center; gap: 1rem; }

  .diff-section-header .diff-number { background: rgba(255,255,255,.15); color: #fff; font-family: 'Geologica', sans-serif; font-weight: 700; font-size: 1.1rem; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

  .diff-section-header h3 { color: #fff !important; font-family: 'Geologica', sans-serif; font-size: 1.15rem; font-weight: 600; margin: 0 !important; letter-spacing: -0.01em; }

  .diff-body { padding: 1.75rem; background: #fff; }

  .diff-body p { margin-bottom: 1rem; }

  .diff-body p:last-child { margin-bottom: 0; }

  .platform-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.5rem 0; }

  @media (max-width: 620px) { .platform-split { grid-template-columns: 1fr; }
 }
  .platform-card { border-radius: 12px; padding: 1.25rem 1.5rem; font-size: .93rem; }

  .platform-card.mg { background: #F0F7FF; border: 1px solid #CFE2F5; }

  .platform-card.sm { background: #F9FAFB; border: 1px solid #E5E7EB; }

  .platform-card .platform-label { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .75rem; }

  .platform-card.mg .platform-label { color: #0066CC; }

  .platform-card.sm .platform-label { color: #6B7280; }

  .platform-card ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

  .platform-card li { position: relative; padding-left: 1.4rem !important; margin-bottom: .5rem !important; color: #2C3E50; line-height: 1.5; }

  .platform-card.mg li::before { content: "✓"; position: absolute; left: 0; color: #0066CC; font-weight: 700; font-size: .85rem; }

  .platform-card.sm li::before { content: "·"; position: absolute; left: 0; color: #9CA3AF; font-weight: 700; font-size: 1.2rem; line-height: 1.1; }

  .verdict-banner { background: linear-gradient(135deg, #FFF5F0 0%, #FFEAD9 100%); border: 1px solid rgba(255,107,53,.25); border-radius: 10px; padding: 1rem 1.5rem; margin-top: 1.25rem; font-size: .92rem; }

  .verdict-banner strong { color: #C04010; }

  .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.75rem 0; }

  @media (max-width: 620px) { .profile-grid { grid-template-columns: 1fr; }
 }
  .profile-card { border-radius: 14px; padding: 1.5rem 1.75rem; }

  .profile-card.mg-profile { background: #F0F7FF; border: 1px solid #CFE2F5; }

  .profile-card.sm-profile { background: #F9FAFB; border: 1px solid #E5E7EB; }

  .profile-card h4 { font-family: 'Geologica', sans-serif; font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: -0.01em; }

  .profile-card.mg-profile h4 { color: #0066CC; }

  .profile-card.sm-profile h4 { color: #374151; }

  .profile-card ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

  .profile-card li { position: relative; padding-left: 1.5rem !important; margin-bottom: .65rem !important; color: #2C3E50; font-size: .92rem; line-height: 1.5; }

  .profile-card.mg-profile li::before { content: "✓"; position: absolute; left: 0; color: #0066CC; font-weight: 700; font-size: .82rem; }

  .profile-card.sm-profile li::before { content: "✓"; position: absolute; left: 0; color: #6B7280; font-weight: 700; font-size: .82rem; }

  .toc { background: #F7FBFF; border: 1px solid #CFE2F5; border-radius: 12px; padding: 1.5rem 1.75rem; margin: 2rem 0; }

  .toc-title { font-family: 'Geologica', sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: #0066CC; margin-bottom: 1rem; }

  .toc ol { margin: 0; padding-left: 1.5rem; }

  .toc li { margin-bottom: .4rem; font-size: .91rem; color: #2C3E50; }

  .toc a { color: #0066CC; text-decoration: none; }

  .toc a:hover { text-decoration: underline; }

  .back-link { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: #6B7280; text-decoration: none; margin-bottom: 1.5rem; }

  .back-link:hover { color: #0066CC; }

  .highlight-note { background: #EFF6FF; border-left: 4px solid #0066CC; padding: .9rem 1.25rem; border-radius: 0 8px 8px 0; margin: 1.25rem 0; font-size: .93rem; color: #1E3A5F; }

/* === Page-specific from 04-movegistics-vs-moveitpro.html === */
.diff-section {
    border: 1px solid #E5EEF8;
    border-radius: 14px;
    overflow: hidden;
    margin: 2.5rem 0;
  }

  .diff-section-header {
    background: linear-gradient(135deg, #0A2540 0%, #0066CC 100%);
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .diff-section-header .diff-number {
    background: rgba(255,255,255,.15);
    color: #fff;
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .diff-section-header h3 {
    color: #fff !important;
    font-family: 'Geologica', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 !important;
    letter-spacing: -0.01em;
  }

  .diff-body { padding: 1.75rem; background: #fff; }

  .diff-body p { margin-bottom: 1rem; }

  .diff-body p:last-child { margin-bottom: 0; }

  .platform-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
  }

  @media (max-width: 620px) { .platform-split { grid-template-columns: 1fr; }
 }
  .platform-card { border-radius: 12px; padding: 1.25rem 1.5rem; font-size: .93rem; }

  .platform-card.mg { background: #F0F7FF; border: 1px solid #CFE2F5; }

  .platform-card.sm { background: #F9FAFB; border: 1px solid #E5E7EB; }

  .platform-card .platform-label {
    font-family: 'Inter', sans-serif;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: .75rem;
  }

  .platform-card.mg .platform-label { color: #0066CC; }

  .platform-card.sm .platform-label { color: #6B7280; }

  .platform-card ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

  .platform-card li {
    position: relative; padding-left: 1.4rem !important;
    margin-bottom: .5rem !important; color: #2C3E50; line-height: 1.5;
  }

  .platform-card.mg li::before { content: "✓"; position: absolute; left: 0; color: #0066CC; font-weight: 700; font-size: .85rem; }

  .platform-card.sm li::before { content: "·"; position: absolute; left: 0; color: #9CA3AF; font-weight: 700; font-size: 1.2rem; line-height: 1.1; }

  .verdict-banner {
    background: linear-gradient(135deg, #FFF5F0 0%, #FFEAD9 100%);
    border: 1px solid rgba(255,107,53,.25);
    border-radius: 10px; padding: 1rem 1.5rem; margin-top: 1.25rem; font-size: .92rem;
  }

  .verdict-banner strong { color: #C04010; }

  .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.75rem 0; }

  @media (max-width: 620px) { .profile-grid { grid-template-columns: 1fr; }
 }
  .profile-card { border-radius: 14px; padding: 1.5rem 1.75rem; }

  .profile-card.mg-profile { background: #F0F7FF; border: 1px solid #CFE2F5; }

  .profile-card.sm-profile { background: #F9FAFB; border: 1px solid #E5E7EB; }

  .profile-card h4 { font-family: 'Geologica', sans-serif; font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: -0.01em; }

  .profile-card.mg-profile h4 { color: #0066CC; }

  .profile-card.sm-profile h4 { color: #374151; }

  .profile-card ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

  .profile-card li { position: relative; padding-left: 1.5rem !important; margin-bottom: .65rem !important; color: #2C3E50; font-size: .92rem; line-height: 1.5; }

  .profile-card.mg-profile li::before { content: "✓"; position: absolute; left: 0; color: #0066CC; font-weight: 700; font-size: .82rem; }

  .profile-card.sm-profile li::before { content: "✓"; position: absolute; left: 0; color: #6B7280; font-weight: 700; font-size: .82rem; }

  .toc { background: #F7FBFF; border: 1px solid #CFE2F5; border-radius: 12px; padding: 1.5rem 1.75rem; margin: 2rem 0; }

  .toc-title { font-family: 'Geologica', sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: #0066CC; margin-bottom: 1rem; }

  .toc ol { margin: 0; padding-left: 1.5rem; }

  .toc li { margin-bottom: .4rem; font-size: .91rem; color: #2C3E50; }

  .toc a { color: #0066CC; text-decoration: none; }

  .toc a:hover { text-decoration: underline; }

  .back-link { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: #6B7280; text-decoration: none; margin-bottom: 1.5rem; }

  .back-link:hover { color: #0066CC; }

  .highlight-note { background: #EFF6FF; border-left: 4px solid #0066CC; padding: .9rem 1.25rem; border-radius: 0 8px 8px 0; margin: 1.25rem 0; font-size: .93rem; color: #1E3A5F; }


/* ===========================================================================
   POLISH FIX: .blog-header alignment (centers the badge + meta line)
   The earlier `.blog-header { text-align: center; ... }` rule near the
   top of this file is silently being dropped by the browser parser, so the
   badge and meta line render left-aligned. These higher-specificity rules
   at the end of the file consistently parse and apply, fixing all 9 article
   pages (4 compares + 5 blog posts) in one shot.
   =========================================================================== */
.entry .blog-header { text-align: center; }
.entry .blog-header .meta { text-align: center; }
.entry .blog-header .category-badge { margin-left: auto; margin-right: auto; }


/* ===========================================================================
   PHASE D: width tuning to match Movegistics site conventions
   --------------------------------------------------------------------------
   Site convention (sampled from /, /features/, /ai-coach/, /automation/):
     - 1140px dominant content width (Bootstrap .container)
     - Full-viewport (1920px) hero sections on homepage + automation
   --------------------------------------------------------------------------
   1) .hub-hero + .blog-header break out of #primary's 1140px container
      and span the full viewport (matches homepage hero pattern).
   2) .hub-container moved 1100 -> 1140 to match site content standard.
   3) .blog-container moved 820 -> 880 (modest readability-friendly bump
      while keeping line length comfortable for long-form prose).
   =========================================================================== */

.entry .hub-hero,
.entry .blog-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.entry .hub-container { max-width: 1140px; }

.entry .blog-container { max-width: 880px; }


/* ===========================================================================
   HERO IMAGES on individual blog posts + compare pages
   Image sits inside .blog-container at the top, edge-to-edge with rounded
   top corners that match the container's 16px border-radius. Negative
   margins escape the container's 3rem 2.5rem padding.
   =========================================================================== */
.entry .blog-container .hero-image {
  display: block;
  width: calc(100% + 5rem);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: -3rem -2.5rem 1.75rem;
  border-radius: 16px 16px 0 0;
}

@media (max-width: 768px) {
  .entry .blog-container .hero-image {
    width: calc(100% + 2rem);
    margin: -2rem -1rem 1.5rem;
    border-radius: 12px 12px 0 0;
  }
}


/* ===========================================================================
   HIDE btheme auto-banner for Featured Image
   --------------------------------------------------------------------------
   We set Featured Images on the 11 SEO pages so Yoast can use them as
   og:image for social sharing. But btheme automatically renders Featured
   Image as a giant banner (.page-thumbnail on Pages, .post-thumbnail on
   Posts) above the actual content — this clashes with our custom hero
   designs (.hub-hero on hubs, .blog-header on article pages).

   This rule hides those auto-banners only on our 11 SEO content pages
   (since seo-content.css is conditionally loaded only there). All other
   site pages keep their Featured Image banners intact.
   =========================================================================== */
/* NOTE: no .entry prefix — these elements live OUTSIDE .entry (they're at
   the #content level, before <article>). Since seo-content.css is
   conditionally enqueued only on the 11 SEO pages, this rule is already
   page-scoped at the file-load level — it cannot affect other site pages. */
.page-thumbnail,
.post-thumbnail {
  display: none !important;
}


/* ===========================================================================
   POLISH ROUND — bottom CTA color + comment hide + mid-article CTA
   =========================================================================== */

/* (1) Bottom CTA text color fix
   btheme's customization.css has `.entry h3 { color: #000 }` which loads after
   seo-content.css and wins by load order at equal specificity. Bumping to
   `.entry .blog-cta h3` (specificity 0,3,0) wins. Same for paragraphs. */
.entry .blog-cta,
.entry .blog-cta h3,
.entry .blog-cta p,
.entry .blog-cta strong,
.entry .blog-cta .micro {
  color: #fff;
}
.entry .blog-cta p {
  color: rgba(255,255,255,.85);
}
.entry .blog-cta .micro {
  color: rgba(255,255,255,.62);
}

/* (2) Hide WordPress comments section on the 11 SEO content pages.
   These are evergreen editorial pieces, not community discussion.
   NOTE: no .entry prefix because #comments sits OUTSIDE .entry in the DOM
   (it's a sibling of <article>, not a descendant). seo-content.css is
   conditionally enqueued only on the 11 SEO pages, so this rule is already
   page-scoped at the file-load level — cannot affect other site pages. */
#respond,
#comments,
.comments-area,
.comment-respond,
#commentform {
  display: none !important;
}

/* (3) Mid-article CTA — lighter inline variant of the bottom .blog-cta box.
   Goes inside .blog-container at roughly the 50% mark of long articles. */
.entry .blog-container .mid-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: linear-gradient(135deg, #0066CC 0%, #0A2540 100%);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin: 2.5rem 0;
  flex-wrap: wrap;
}
.entry .blog-container .mid-cta .mid-cta-text {
  flex: 1;
  min-width: 260px;
}
.entry .blog-container .mid-cta strong {
  display: block;
  font-family: 'Geologica', sans-serif;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: .35rem;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.entry .blog-container .mid-cta span {
  display: block;
  color: rgba(255,255,255,.78);
  font-size: .92rem;
  line-height: 1.5;
}
.entry .blog-container .mid-cta .yellow-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .entry .blog-container .mid-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.25rem;
  }
  .entry .blog-container .mid-cta .yellow-btn {
    align-self: stretch;
    text-align: center;
  }
}


/* ===========================================================================
   Yellow CTA button — force white text/icon on the orange background.
   --------------------------------------------------------------------------
   btheme's link colors and our own .blog-container a { color: #0066CC } rule
   were bleeding into the .yellow-btn text and turning it blue. This rule
   forces white at higher specificity for both the button and any nested
   icons (FontAwesome arrow). Applies on our 11 SEO pages only since the
   file is conditionally loaded.
   =========================================================================== */
.entry .yellow-btn,
.entry .yellow-btn:link,
.entry .yellow-btn:visited,
.entry .yellow-btn:hover,
.entry .yellow-btn:focus,
.entry .yellow-btn i,
.entry .yellow-btn .fa-arrow-right {
  color: #fff !important;
  text-decoration: none !important;
}