/* =============================================================================
   Minineo WordPress Theme — main.css
   Brand: minineo.com
   Author: Minineo
   Version: 1.0.0
   ============================================================================= */

/* =============================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================= */

:root {
  /* Brand — Primary (Minimal Clean: near-black) */
  --mn-primary:        #09090b;
  --mn-primary-hover:  #27272a;
  --mn-primary-light:  #f4f4f5;

  /* Ink Neutrals */
  --mn-ink-900: #0f172a;
  --mn-ink-800: #1e293b;
  --mn-ink-700: #334155;
  --mn-ink-600: #475569;
  --mn-ink-500: #64748b;
  --mn-ink-400: #94a3b8;
  --mn-ink-300: #cbd5e1;
  --mn-ink-200: #e2e8f0;
  --mn-ink-100: #f1f5f9;
  --mn-ink-50:  #f8fafc;
  --mn-ink-0:   #ffffff;

  /* Semantic colours */
  --mn-positive: #059669;
  --mn-caution:  #d97706;
  --mn-critical: #dc2626;

  /* Typography */
  --mn-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mn-font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Font sizes (fluid) */
  --mn-text-xs:   0.75rem;   /* 12px */
  --mn-text-sm:   0.875rem;  /* 14px */
  --mn-text-base: 1rem;      /* 16px */
  --mn-text-lg:   1.125rem;  /* 18px */
  --mn-text-xl:   1.25rem;   /* 20px */
  --mn-text-2xl:  1.5rem;    /* 24px */
  --mn-text-3xl:  1.875rem;  /* 30px */
  --mn-text-4xl:  2.25rem;   /* 36px */
  --mn-text-5xl:  3rem;      /* 48px */
  --mn-text-6xl:  3.75rem;   /* 60px */

  /* Font weights */
  --mn-font-normal:    400;
  --mn-font-medium:    500;
  --mn-font-semibold:  600;
  --mn-font-bold:      700;
  --mn-font-extrabold: 800;
  --mn-font-black:     900;

  /* Line heights */
  --mn-leading-tight:  1.25;
  --mn-leading-snug:   1.375;
  --mn-leading-normal: 1.5;
  --mn-leading-relaxed:1.625;

  /* Border radius */
  --mn-radius-sm:    6px;
  --mn-radius-btn:   10px;
  --mn-radius-card:  16px;
  --mn-radius-badge: 9999px;
  --mn-radius-lg:    24px;

  /* Shadows */
  --mn-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --mn-shadow-md: 0 4px 8px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);
  --mn-shadow-lg: 0 10px 24px rgba(0, 0, 0, .10), 0 4px 8px rgba(0, 0, 0, .06);

  /* Spacing */
  --mn-space-1:  0.25rem;
  --mn-space-2:  0.5rem;
  --mn-space-3:  0.75rem;
  --mn-space-4:  1rem;
  --mn-space-5:  1.25rem;
  --mn-space-6:  1.5rem;
  --mn-space-8:  2rem;
  --mn-space-10: 2.5rem;
  --mn-space-12: 3rem;
  --mn-space-16: 4rem;
  --mn-space-20: 5rem;
  --mn-space-24: 6rem;

  /* Layout */
  --mn-container-max: 1200px;
  --mn-header-h: 68px;

  /* Transitions */
  --mn-transition: 200ms ease;
  --mn-transition-slow: 350ms ease;
}

/* =============================================================================
   2. CSS RESET (Modern, Minimal)
   ============================================================================= */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-base);
  line-height: var(--mn-leading-normal);
  color: var(--mn-ink-800);
  background-color: var(--mn-ink-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
}

/* =============================================================================
   3. SKIP LINK (Accessibility)
   ============================================================================= */

.skip-link {
  position: absolute;
  top: -999px;
  left: var(--mn-space-4);
  background: var(--mn-primary);
  color: var(--mn-ink-0);
  padding: var(--mn-space-2) var(--mn-space-4);
  border-radius: var(--mn-radius-btn);
  font-weight: var(--mn-font-semibold);
  font-size: var(--mn-text-sm);
  z-index: 10000;
  text-decoration: none;
  transition: top var(--mn-transition);
}

.skip-link:focus {
  top: var(--mn-space-4);
}

/* =============================================================================
   4. BASE TYPOGRAPHY
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mn-font-sans);
  font-weight: var(--mn-font-bold);
  line-height: var(--mn-leading-tight);
  color: var(--mn-ink-900);
}

h1 { font-size: var(--mn-text-4xl); font-weight: var(--mn-font-extrabold); }
h2 { font-size: var(--mn-text-3xl); }
h3 { font-size: var(--mn-text-2xl); }
h4 { font-size: var(--mn-text-xl); }
h5 { font-size: var(--mn-text-lg); }
h6 { font-size: var(--mn-text-base); }

@media (min-width: 768px) {
  h1 { font-size: var(--mn-text-5xl); }
  h2 { font-size: var(--mn-text-4xl); }
  h3 { font-size: var(--mn-text-3xl); }
}

p {
  color: var(--mn-ink-700);
  line-height: var(--mn-leading-relaxed);
}

a {
  color: var(--mn-primary);
  transition: color var(--mn-transition);
}

a:hover {
  color: var(--mn-primary-hover);
}

strong, b { font-weight: var(--mn-font-semibold); }
em, i      { font-style: italic; }

small {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-500);
}

/* Focus visible — global */
:focus-visible {
  outline: 3px solid var(--mn-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================================
   5. LAYOUT UTILITIES
   ============================================================================= */

.container {
  width: 100%;
  max-width: var(--mn-container-max);
  margin-inline: auto;
  padding-inline: var(--mn-space-4);
}

@media (min-width: 640px)  { .container { padding-inline: var(--mn-space-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--mn-space-8); } }

.section {
  padding-block: var(--mn-space-16);
}

@media (min-width: 768px) {
  .section { padding-block: var(--mn-space-24); }
}

.section-title {
  font-size: var(--mn-text-3xl);
  font-weight: var(--mn-font-extrabold);
  color: var(--mn-ink-900);
  margin-bottom: var(--mn-space-4);
}

@media (min-width: 768px) {
  .section-title { font-size: var(--mn-text-4xl); }
}

.section-subtitle {
  font-size: var(--mn-text-lg);
  color: var(--mn-ink-600);
  max-width: 600px;
  line-height: var(--mn-leading-relaxed);
}

.section-header {
  text-align: center;
  margin-bottom: var(--mn-space-12);
}

.section-header .section-subtitle {
  margin-inline: auto;
}

/* Grid utilities */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--mn-space-6);
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Text alignment helpers */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Flex helpers */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2        { gap: var(--mn-space-2); }
.gap-4        { gap: var(--mn-space-4); }
.gap-6        { gap: var(--mn-space-6); }

/* Visibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   6. NAVIGATION / SITE HEADER
   ============================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  width: 100%;
  height: var(--mn-header-h);
  background: var(--mn-ink-0);
  border-bottom: 1px solid var(--mn-ink-200);
  transition: box-shadow var(--mn-transition), border-color var(--mn-transition);
}

.site-header.scrolled {
  box-shadow: var(--mn-shadow-md);
  border-bottom-color: transparent;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--mn-space-2);
  text-decoration: none;
  color: var(--mn-ink-900);
  font-weight: var(--mn-font-extrabold);
  font-size: var(--mn-text-xl);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.nav-logo img {
  height: 32px;
  width: auto;
}

.nav-logo-text span {
  color: var(--mn-primary);
}

/* Desktop nav */
.nav-menu {
  display: none;
  align-items: center;
  gap: var(--mn-space-1);
}

@media (min-width: 1024px) {
  .nav-menu { display: flex; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--mn-space-1);
  list-style: none;
}

.nav-links a {
  display: block;
  padding: var(--mn-space-2) var(--mn-space-3);
  font-size: var(--mn-text-sm);
  font-weight: var(--mn-font-medium);
  color: var(--mn-ink-700);
  border-radius: var(--mn-radius-sm);
  transition: color var(--mn-transition), background var(--mn-transition);
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a.current-menu-item,
.nav-links a[aria-current="page"] {
  color: var(--mn-primary);
  background: var(--mn-primary-light);
}

.nav-links li.current-menu-item > a,
.nav-links li.current-menu-ancestor > a {
  color: var(--mn-primary);
  background: var(--mn-primary-light);
}

/* Nav CTA */
.nav-cta {
  display: none;
  align-items: center;
  gap: var(--mn-space-3);
  margin-left: var(--mn-space-6);
}

@media (min-width: 1024px) {
  .nav-cta { display: flex; }
}

.nav-cta .mn-btn {
  font-size: var(--mn-text-sm);
  padding: var(--mn-space-2) var(--mn-space-4);
}

/* Hamburger button */
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: var(--mn-radius-sm);
  cursor: pointer;
  padding: 0;
  color: var(--mn-ink-700);
  transition: background var(--mn-transition), color var(--mn-transition);
}

.hamburger:hover {
  background: var(--mn-ink-100);
  color: var(--mn-ink-900);
}

@media (min-width: 1024px) {
  .hamburger { display: none; }
}

.hamburger-icon,
.hamburger-close {
  display: block;
  pointer-events: none;
}

.hamburger .hamburger-close { display: none; }
.hamburger[aria-expanded="true"] .hamburger-icon { display: none; }
.hamburger[aria-expanded="true"] .hamburger-close { display: block; }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  top: var(--mn-header-h);
  z-index: 800;
  background: var(--mn-ink-0);
  padding: var(--mn-space-6) var(--mn-space-4);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--mn-transition-slow);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

.mobile-menu .nav-links {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-bottom: var(--mn-space-6);
}

.mobile-menu .nav-links a {
  font-size: var(--mn-text-base);
  padding: var(--mn-space-3) var(--mn-space-2);
  border-bottom: 1px solid var(--mn-ink-100);
  border-radius: 0;
}

.mobile-menu .nav-cta,
.nav-cta--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
  margin-left: 0;
}

.mobile-menu .mn-btn,
.mn-btn-full {
  width: 100%;
  justify-content: center;
}

/* Body scroll lock */
body.menu-open {
  overflow: hidden;
}

/* =============================================================================
   7. BUTTONS
   ============================================================================= */

.mn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mn-space-2);
  padding: 0.625rem var(--mn-space-5);
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-base);
  font-weight: var(--mn-font-semibold);
  line-height: 1;
  border-radius: var(--mn-radius-btn);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--mn-transition),
    border-color var(--mn-transition),
    color var(--mn-transition),
    box-shadow var(--mn-transition),
    transform var(--mn-transition);
  white-space: nowrap;
  user-select: none;
}

.mn-btn:focus-visible {
  outline: 3px solid var(--mn-primary);
  outline-offset: 3px;
}

.mn-btn:active {
  transform: translateY(1px);
}

/* Primary */
.mn-btn-primary {
  background: var(--mn-primary);
  border-color: var(--mn-primary);
  color: var(--mn-ink-0);
}

.mn-btn-primary:hover {
  background: var(--mn-primary-hover);
  border-color: var(--mn-primary-hover);
  color: var(--mn-ink-0);
  box-shadow: var(--mn-shadow-md);
}

/* Outline */
.mn-btn-outline {
  background: transparent;
  border-color: var(--mn-primary);
  color: var(--mn-primary);
}

.mn-btn-outline:hover {
  background: var(--mn-primary-light);
  color: var(--mn-primary-hover);
}

/* Ghost */
.mn-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--mn-ink-700);
}

.mn-btn-ghost:hover {
  background: var(--mn-ink-100);
  color: var(--mn-ink-900);
}

/* Sizes */
.mn-btn-lg {
  font-size: var(--mn-text-lg);
  padding: 0.875rem var(--mn-space-8);
}

.mn-btn-sm {
  font-size: var(--mn-text-sm);
  padding: 0.375rem var(--mn-space-3);
}

/* =============================================================================
   8. CARDS
   ============================================================================= */

.mn-card {
  background: var(--mn-ink-0);
  border-radius: var(--mn-radius-card);
  border: 1px solid var(--mn-ink-200);
  padding: var(--mn-space-6);
  transition: box-shadow var(--mn-transition), transform var(--mn-transition);
}

.mn-card-raised {
  background: var(--mn-ink-0);
  border-radius: var(--mn-radius-card);
  border: 1px solid var(--mn-ink-100);
  padding: var(--mn-space-6);
  box-shadow: var(--mn-shadow-md);
  transition: box-shadow var(--mn-transition), transform var(--mn-transition);
}

.mn-card-raised:hover {
  box-shadow: var(--mn-shadow-lg);
  transform: translateY(-2px);
}

.mn-card-flat {
  background: var(--mn-ink-50);
  border-radius: var(--mn-radius-card);
  border: 1px solid var(--mn-ink-100);
  padding: var(--mn-space-6);
}

/* =============================================================================
   9. BADGES
   ============================================================================= */

.mn-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mn-space-1);
  padding: 0.25rem 0.625rem;
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-semibold);
  line-height: 1;
  border-radius: var(--mn-radius-badge);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mn-badge-brand {
  background: var(--mn-primary-light);
  color: var(--mn-primary);
}

.mn-badge-pos {
  background: #d1fae5;
  color: #065f46;
}

.mn-badge-warn {
  background: #fef3c7;
  color: #92400e;
}

.mn-badge-neu {
  background: var(--mn-ink-100);
  color: var(--mn-ink-600);
}

/* =============================================================================
   10. HERO SECTION
   ============================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--mn-space-16) var(--mn-space-20);
  background: linear-gradient(165deg, var(--mn-primary-light) 0%, var(--mn-ink-0) 55%);
}

@media (min-width: 768px) {
  .hero { padding-block: var(--mn-space-24); }
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mn-space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr 1fr;
    gap: var(--mn-space-16);
  }
}

.hero-content {
  max-width: 600px;
}

@media (min-width: 1024px) {
  .hero-content { max-width: none; }
}

.hero-eyebrow {
  margin-bottom: var(--mn-space-4);
}

.hero-headline {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: var(--mn-font-black);
  line-height: var(--mn-leading-tight);
  color: var(--mn-ink-900);
  margin-bottom: var(--mn-space-6);
  letter-spacing: -0.03em;
}

.hero-headline em {
  font-style: normal;
  color: var(--mn-primary);
}

.hero-sub {
  font-size: var(--mn-text-lg);
  color: var(--mn-ink-600);
  line-height: var(--mn-leading-relaxed);
  margin-bottom: var(--mn-space-8);
  max-width: 520px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mn-space-3);
  margin-bottom: var(--mn-space-8);
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: var(--mn-space-3);
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-500);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--mn-space-1);
}

.hero-trust-item svg {
  color: var(--mn-positive);
}

/* Hero Visual — CSS Mockup */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-mockup {
  width: 100%;
  max-width: 480px;
  background: var(--mn-ink-0);
  border-radius: var(--mn-radius-lg);
  border: 1px solid var(--mn-ink-200);
  box-shadow: var(--mn-shadow-lg);
  overflow: hidden;
}

.hero-mockup-bar {
  background: var(--mn-ink-50);
  border-bottom: 1px solid var(--mn-ink-200);
  padding: var(--mn-space-3) var(--mn-space-4);
  display: flex;
  align-items: center;
  gap: var(--mn-space-2);
}

.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mockup-dot-red   { background: #fc5753; }
.mockup-dot-amber { background: #fdbc40; }
.mockup-dot-green { background: #34c749; }

.hero-mockup-body {
  padding: var(--mn-space-6);
}

/* Score rings row */
.mockup-scores {
  display: flex;
  justify-content: space-around;
  margin-bottom: var(--mn-space-6);
}

.score-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mn-space-2);
}

.score-ring-svg {
  width: 72px;
  height: 72px;
}

.score-ring-circle-bg {
  fill: none;
  stroke: var(--mn-ink-100);
  stroke-width: 6;
}

.score-ring-circle {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.score-ring--green  .score-ring-circle { stroke: var(--mn-positive); stroke-dasharray: 172 200; }
.score-ring--amber  .score-ring-circle { stroke: var(--mn-caution);  stroke-dasharray: 120 200; }
.score-ring--brand  .score-ring-circle { stroke: var(--mn-primary);  stroke-dasharray: 150 200; }

.score-ring-label {
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-ink-500);
  text-align: center;
}

.score-ring-value {
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-bold);
  fill: var(--mn-ink-800);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Content list in mockup */
.mockup-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-2);
}

.mockup-list-item {
  display: flex;
  align-items: center;
  gap: var(--mn-space-3);
  padding: var(--mn-space-2) var(--mn-space-3);
  border-radius: var(--mn-radius-sm);
  background: var(--mn-ink-50);
  border: 1px solid var(--mn-ink-100);
}

.mockup-list-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.mockup-list-icon--green  { background: #d1fae5; }
.mockup-list-icon--amber  { background: #fef3c7; }
.mockup-list-icon--brand  { background: var(--mn-primary-light); }

.mockup-list-text {
  flex: 1;
  min-width: 0;
}

.mockup-list-title {
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-ink-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-list-sub {
  font-size: 11px;
  color: var(--mn-ink-500);
}

.mockup-list-score {
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-bold);
  color: var(--mn-positive);
  flex-shrink: 0;
}

/* =============================================================================
   11. FEATURES GRID
   ============================================================================= */

.features-section {
  background: var(--mn-ink-0);
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mn-space-6);
}

@media (min-width: 640px)  { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
  padding: var(--mn-space-6);
  border-radius: var(--mn-radius-card);
  border: 1px solid var(--mn-ink-200);
  background: var(--mn-ink-0);
  transition: box-shadow var(--mn-transition), transform var(--mn-transition), border-color var(--mn-transition);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--mn-primary-light) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--mn-transition);
  pointer-events: none;
}

.feature-card:hover {
  box-shadow: var(--mn-shadow-md);
  transform: translateY(-3px);
  border-color: var(--mn-ink-100);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--mn-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--mn-space-4);
  color: var(--mn-primary);
  flex-shrink: 0;
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature-title {
  font-size: var(--mn-text-lg);
  font-weight: var(--mn-font-bold);
  color: var(--mn-ink-900);
  margin-bottom: var(--mn-space-2);
}

.feature-desc {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  line-height: var(--mn-leading-relaxed);
  margin-bottom: var(--mn-space-4);
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mn-space-1);
  font-size: var(--mn-text-sm);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-primary);
  text-decoration: none;
  transition: gap var(--mn-transition), color var(--mn-transition);
}

.feature-link:hover {
  gap: var(--mn-space-2);
  color: var(--mn-primary-hover);
}

/* =============================================================================
   12. STEPS SECTION
   ============================================================================= */

.steps-section {
  background: var(--mn-ink-50);
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--mn-space-6); }
}

.step {
  position: relative;
  padding: var(--mn-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}

/* Connector line between steps */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  background: var(--mn-ink-200);
}

@media (max-width: 767px) {
  .step:not(:last-child)::after {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: var(--mn-space-6);
  }
}

@media (min-width: 768px) {
  .step:not(:last-child)::after {
    top: 28px;
    right: calc(-1 * var(--mn-space-3));
    width: var(--mn-space-6);
    height: 2px;
    transform: none;
  }
}

.step-number,
.step__number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mn-primary);
  color: var(--mn-ink-0);
  font-size: var(--mn-text-xl);
  font-weight: var(--mn-font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 0 var(--mn-space-4) 0;
  box-shadow: 0 0 0 8px var(--mn-primary-light);
}

@media (min-width: 768px) {
  .step-number,
  .step__number {
    margin: 0 var(--mn-space-5) 0 0;
  }
}

/* Step content wrapper (BEM variant) */
.step__content {
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-2);
}

.step-title,
.step__title {
  font-size: var(--mn-text-lg);
  font-weight: var(--mn-font-bold);
  color: var(--mn-ink-900);
  margin-bottom: var(--mn-space-2);
}

.step-desc,
.step__desc {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  line-height: var(--mn-leading-relaxed);
}

/* =============================================================================
   13. ALTERNATING SPLIT SECTIONS
   ============================================================================= */

.split-section {
  padding-block: var(--mn-space-16);
}

@media (min-width: 768px) {
  .split-section { padding-block: var(--mn-space-20); }
}

.split-section .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mn-space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .split-section .container {
    grid-template-columns: 1fr 1fr;
    gap: var(--mn-space-16);
  }
  .split-section.split-reverse .split-content {
    order: 2;
  }
  .split-section.split-reverse .split-visual {
    order: 1;
  }
}

.split-content .mn-badge {
  margin-bottom: var(--mn-space-4);
}

.split-content h2 {
  margin-bottom: var(--mn-space-4);
}

.split-content p {
  margin-bottom: var(--mn-space-6);
}

.split-content ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
  margin-bottom: var(--mn-space-8);
}

.split-content ul li {
  display: flex;
  align-items: flex-start;
  gap: var(--mn-space-3);
  font-size: var(--mn-text-base);
  color: var(--mn-ink-700);
}

.split-content ul li::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mn-positive);
  flex-shrink: 0;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 10 3.5 3.5L15 7'/%3E%3C/svg%3E");
  background-size: cover;
}

.split-visual {
  border-radius: var(--mn-radius-card);
  overflow: hidden;
  background: var(--mn-ink-50);
  border: 1px solid var(--mn-ink-200);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================================
   14. TESTIMONIALS
   ============================================================================= */

.testimonials-section {
  background: var(--mn-ink-50);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mn-space-6);
}

@media (min-width: 768px)  { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
  background: var(--mn-ink-0);
  border-radius: var(--mn-radius-card);
  border: 1px solid var(--mn-ink-200);
  padding: var(--mn-space-6);
  box-shadow: var(--mn-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-4);
  transition: box-shadow var(--mn-transition), transform var(--mn-transition);
}

.testimonial-card:hover {
  box-shadow: var(--mn-shadow-md);
  transform: translateY(-2px);
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  color: #f59e0b;
  font-size: var(--mn-text-sm);
}

.testimonial-quote {
  font-size: var(--mn-text-base);
  color: var(--mn-ink-700);
  line-height: var(--mn-leading-relaxed);
  flex: 1;
  font-style: italic;
}

.testimonial-quote::before {
  content: '\201C';
  font-size: var(--mn-text-2xl);
  color: var(--mn-primary);
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 2px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--mn-space-3);
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--mn-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--mn-font-bold);
  color: var(--mn-primary);
  font-size: var(--mn-text-sm);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-name {
  font-size: var(--mn-text-sm);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-ink-900);
}

.testimonial-company {
  font-size: var(--mn-text-xs);
  color: var(--mn-ink-500);
}

/* =============================================================================
   15. PRICING
   ============================================================================= */

.pricing-section {
  background: var(--mn-ink-0);
}

/* Pricing toggle */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mn-space-4);
  margin-bottom: var(--mn-space-12);
}

.pricing-toggle-label {
  font-size: var(--mn-text-sm);
  font-weight: var(--mn-font-medium);
  color: var(--mn-ink-600);
  cursor: pointer;
}

.pricing-toggle-label.active {
  color: var(--mn-ink-900);
  font-weight: var(--mn-font-semibold);
}

.pricing-save-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #d1fae5;
  color: #065f46;
  font-size: 11px;
  font-weight: var(--mn-font-semibold);
  border-radius: var(--mn-radius-badge);
  margin-left: var(--mn-space-1);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: var(--mn-radius-badge);
  background: var(--mn-ink-300);
  transition: background var(--mn-transition);
}

.toggle-switch input:checked + .toggle-track {
  background: var(--mn-primary);
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mn-ink-0);
  box-shadow: var(--mn-shadow-sm);
  transition: transform var(--mn-transition);
}

.toggle-switch input:checked ~ .toggle-thumb {
  transform: translateX(22px);
}

/* Pricing grid */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mn-space-6);
  align-items: stretch;
}

/* pricing-grid: 1-col on mobile/tablet, 3-col only on desktop (3 cards need room) */
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.pricing-card {
  background: var(--mn-ink-0);
  border-radius: var(--mn-radius-card);
  border: 2px solid var(--mn-ink-200);
  padding: var(--mn-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-6);
  transition: box-shadow var(--mn-transition), transform var(--mn-transition);
  position: relative;
}

.pricing-card:hover {
  box-shadow: var(--mn-shadow-md);
  transform: translateY(-2px);
}

.pricing-card.pricing-featured {
  border-color: var(--mn-primary);
  box-shadow: 0 0 0 1px var(--mn-primary), var(--mn-shadow-lg);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mn-primary);
  color: var(--mn-ink-0);
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-bold);
  padding: 4px 14px;
  border-radius: var(--mn-radius-badge);
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


.pricing-plan {
  font-size: var(--mn-text-sm);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--mn-space-2);
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--mn-space-1);
  margin-bottom: var(--mn-space-2);
}

.pricing-currency {
  font-size: var(--mn-text-xl);
  font-weight: var(--mn-font-bold);
  color: var(--mn-ink-700);
}

.pricing-amount {
  font-size: var(--mn-text-5xl);
  font-weight: var(--mn-font-black);
  color: var(--mn-ink-900);
  line-height: 1;
  letter-spacing: -0.03em;
}

.pricing-period {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-500);
}

.pricing-desc {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
}

/* Period-based price display */
[data-period="monthly"] .price-annual,
[data-period="annual"]  .price-monthly {
  display: none;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--mn-space-2);
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-700);
}

.pricing-features li .feature-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mn-positive);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 18'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4.5 9 3 3L13.5 6'/%3E%3C/svg%3E");
  background-size: cover;
}

.pricing-features li.feature-na {
  color: var(--mn-ink-400);
}

.pricing-features li.feature-na .feature-check {
  background: var(--mn-ink-200);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 18'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-width='2' d='M5 9h8'/%3E%3C/svg%3E");
}

.pricing-cta {
  width: 100%;
  justify-content: center;
}

/* =============================================================================
   16. FAQ
   ============================================================================= */

.faq-section {
  background: var(--mn-ink-50);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-2);
  max-width: 760px;
  margin-inline: auto;
}

.faq-item {
  background: var(--mn-ink-0);
  border-radius: var(--mn-radius-card);
  border: 1px solid var(--mn-ink-200);
  overflow: hidden;
  transition: border-color var(--mn-transition), box-shadow var(--mn-transition);
}

.faq-item.is-open {
  border-color: var(--mn-primary);
  box-shadow: 0 0 0 3px var(--mn-primary-light);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mn-space-4);
  padding: var(--mn-space-5) var(--mn-space-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-base);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-ink-900);
  transition: color var(--mn-transition);
}

.faq-question:hover {
  color: var(--mn-primary);
}

.faq-item.is-open .faq-question {
  color: var(--mn-primary);
}

.faq-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mn-ink-100);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mn-ink-600);
  transition: background var(--mn-transition), color var(--mn-transition), transform var(--mn-transition);
}

.faq-item.is-open .faq-icon {
  background: var(--mn-primary-light);
  color: var(--mn-primary);
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer-inner {
  padding: 0 var(--mn-space-6) var(--mn-space-5);
  font-size: var(--mn-text-base);
  color: var(--mn-ink-700);
  line-height: var(--mn-leading-relaxed);
}

/* =============================================================================
   17. BLOG ARCHIVE
   ============================================================================= */

.blog-section {
  background: var(--mn-ink-0);
}

.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mn-space-8);
}

@media (min-width: 640px)  { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  background: var(--mn-ink-0);
  border-radius: var(--mn-radius-card);
  border: 1px solid var(--mn-ink-200);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--mn-transition), transform var(--mn-transition);
}

.post-card:hover {
  box-shadow: var(--mn-shadow-md);
  transform: translateY(-3px);
}

.post-card-image {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--mn-ink-100);
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-card:hover .post-card-image img {
  transform: scale(1.04);
}

.post-card-body {
  padding: var(--mn-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
  flex: 1;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: var(--mn-space-3);
  font-size: var(--mn-text-xs);
  color: var(--mn-ink-500);
}

.post-card-meta time,
.post-card-meta .post-read-time {
  display: flex;
  align-items: center;
  gap: var(--mn-space-1);
}

.post-card-category {
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-primary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-card-title {
  font-size: var(--mn-text-lg);
  font-weight: var(--mn-font-bold);
  color: var(--mn-ink-900);
  line-height: var(--mn-leading-snug);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-title:hover {
  color: var(--mn-primary);
}

.post-card-excerpt {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  line-height: var(--mn-leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--mn-space-3);
  border-top: 1px solid var(--mn-ink-100);
}

.post-card-author {
  display: flex;
  align-items: center;
  gap: var(--mn-space-2);
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-medium);
  color: var(--mn-ink-700);
}

.post-card-author img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.post-card-read-more {
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-primary);
  text-decoration: none;
}

/* =============================================================================
   18. BLOG SINGLE POST
   ============================================================================= */

.single-post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mn-space-12);
  align-items: start;
  padding-block: var(--mn-space-12);
}

@media (min-width: 1024px) {
  .single-post-layout {
    grid-template-columns: 1fr 280px;
    gap: var(--mn-space-16);
  }
}

/* Post header */
.post-header {
  margin-bottom: var(--mn-space-8);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mn-space-4);
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-500);
  margin-bottom: var(--mn-space-5);
}

.post-meta a {
  color: var(--mn-primary);
  font-weight: var(--mn-font-medium);
  text-decoration: none;
}

.post-meta .sep {
  color: var(--mn-ink-300);
}

.post-title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: var(--mn-font-extrabold);
  color: var(--mn-ink-900);
  line-height: var(--mn-leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--mn-space-6);
}

.post-lead {
  font-size: var(--mn-text-xl);
  color: var(--mn-ink-600);
  line-height: var(--mn-leading-relaxed);
  margin-bottom: var(--mn-space-6);
}

.post-featured-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--mn-radius-card);
  margin-bottom: var(--mn-space-10);
}

/* Post content typography */
.post-content {
  font-size: var(--mn-text-base);
  line-height: var(--mn-leading-relaxed);
  color: var(--mn-ink-800);
}

@media (min-width: 768px) {
  .post-content { font-size: var(--mn-text-lg); }
}

.post-content h2,
.post-content h3,
.post-content h4 {
  font-weight: var(--mn-font-bold);
  color: var(--mn-ink-900);
  margin-top: var(--mn-space-10);
  margin-bottom: var(--mn-space-4);
  scroll-margin-top: calc(var(--mn-header-h) + 16px);
}

.post-content h2 {
  font-size: var(--mn-text-2xl);
  padding-bottom: var(--mn-space-3);
  border-bottom: 2px solid var(--mn-ink-100);
}

@media (min-width: 768px) {
  .post-content h2 { font-size: var(--mn-text-3xl); }
}

.post-content h3 { font-size: var(--mn-text-xl); }
.post-content h4 { font-size: var(--mn-text-lg); }

.post-content p {
  margin-bottom: var(--mn-space-5);
  color: var(--mn-ink-700);
}

.post-content ul,
.post-content ol {
  margin-bottom: var(--mn-space-5);
  padding-left: var(--mn-space-6);
}

.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }

.post-content li {
  margin-bottom: var(--mn-space-2);
  color: var(--mn-ink-700);
  line-height: var(--mn-leading-relaxed);
}

.post-content blockquote {
  border-left: 4px solid var(--mn-primary);
  background: var(--mn-primary-light);
  border-radius: 0 var(--mn-radius-sm) var(--mn-radius-sm) 0;
  padding: var(--mn-space-4) var(--mn-space-6);
  margin-block: var(--mn-space-8);
  font-style: italic;
  color: var(--mn-ink-700);
  font-size: var(--mn-text-lg);
}

.post-content blockquote p {
  margin: 0;
}

.post-content code {
  font-family: var(--mn-font-mono);
  font-size: 0.875em;
  background: var(--mn-ink-50);
  border: 1px solid var(--mn-ink-200);
  border-radius: 4px;
  padding: 0.15em 0.4em;
  color: var(--mn-primary);
}

.post-content pre {
  background: var(--mn-ink-900);
  border-radius: var(--mn-radius-sm);
  padding: var(--mn-space-5);
  overflow-x: auto;
  margin-block: var(--mn-space-6);
}

.post-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: #e2e8f0;
  font-size: var(--mn-text-sm);
  border-radius: 0;
}

.post-content a {
  color: var(--mn-primary);
  text-decoration: underline;
  text-decoration-color: rgba(79, 70, 229, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--mn-transition), color var(--mn-transition);
}

.post-content a:hover {
  color: var(--mn-primary-hover);
  text-decoration-color: var(--mn-primary-hover);
}

.post-content img {
  border-radius: var(--mn-radius-card);
  margin-block: var(--mn-space-6);
  max-width: 100%;
  height: auto;
}

.post-content hr {
  border: none;
  border-top: 2px solid var(--mn-ink-100);
  margin-block: var(--mn-space-10);
}

/* Author box */
.author-box {
  display: flex;
  gap: var(--mn-space-5);
  padding: var(--mn-space-6);
  border-radius: var(--mn-radius-card);
  border: 1px solid var(--mn-ink-200);
  background: var(--mn-ink-50);
  margin-top: var(--mn-space-12);
}

.author-box-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--mn-primary-light);
}

.author-box-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-box-name {
  font-size: var(--mn-text-base);
  font-weight: var(--mn-font-bold);
  color: var(--mn-ink-900);
  margin-bottom: var(--mn-space-1);
}

.author-box-role {
  font-size: var(--mn-text-sm);
  color: var(--mn-primary);
  font-weight: var(--mn-font-medium);
  margin-bottom: var(--mn-space-2);
}

.author-box-bio {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  line-height: var(--mn-leading-relaxed);
}

/* Related posts */
.related-posts {
  margin-top: var(--mn-space-16);
}

.related-posts h3 {
  font-size: var(--mn-text-2xl);
  margin-bottom: var(--mn-space-6);
}

/* Inline CTA banner */
.post-cta-box {
  background: linear-gradient(135deg, var(--mn-primary) 0%, var(--mn-primary-hover) 100%);
  border-radius: var(--mn-radius-card);
  padding: var(--mn-space-8);
  text-align: center;
  margin-block: var(--mn-space-10);
  color: var(--mn-ink-0);
}

.post-cta-box h3 {
  font-size: var(--mn-text-2xl);
  color: var(--mn-ink-0);
  margin-bottom: var(--mn-space-3);
}

.post-cta-box p {
  color: rgba(255,255,255,.8);
  margin-bottom: var(--mn-space-6);
}

.post-cta-box .mn-btn {
  background: var(--mn-ink-0);
  color: var(--mn-primary);
  border-color: var(--mn-ink-0);
}

.post-cta-box .mn-btn:hover {
  background: var(--mn-primary-light);
}

/* Share buttons */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mn-space-3);
  margin-top: var(--mn-space-8);
  padding-top: var(--mn-space-6);
  border-top: 1px solid var(--mn-ink-200);
}

.share-label {
  font-size: var(--mn-text-sm);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-ink-600);
  margin-right: var(--mn-space-1);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mn-space-2);
  padding: var(--mn-space-2) var(--mn-space-3);
  font-size: var(--mn-text-sm);
  font-weight: var(--mn-font-medium);
  border-radius: var(--mn-radius-btn);
  border: 1px solid var(--mn-ink-200);
  background: var(--mn-ink-0);
  color: var(--mn-ink-700);
  cursor: pointer;
  transition: background var(--mn-transition), border-color var(--mn-transition), color var(--mn-transition);
  text-decoration: none;
}

.share-btn:hover {
  background: var(--mn-ink-50);
  border-color: var(--mn-ink-300);
  color: var(--mn-ink-900);
}

.share-btn.copied {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}

/* =============================================================================
   19. BREADCRUMBS
   ============================================================================= */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mn-space-1);
  padding-block: var(--mn-space-4);
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-500);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--mn-space-1);
}

.breadcrumb-item:not(:last-child)::after {
  content: '/';
  color: var(--mn-ink-300);
  margin-left: var(--mn-space-1);
}

.breadcrumb-item a {
  color: var(--mn-ink-500);
  text-decoration: none;
  transition: color var(--mn-transition);
}

.breadcrumb-item a:hover {
  color: var(--mn-primary);
}

.breadcrumb-item:last-child {
  color: var(--mn-ink-700);
  font-weight: var(--mn-font-medium);
}

/* =============================================================================
   20. TABLE OF CONTENTS (TOC)
   ============================================================================= */

.toc {
  position: sticky;
  top: calc(var(--mn-header-h) + var(--mn-space-6));
}

.toc-nav {
  background: var(--mn-ink-0);
  border: 1px solid var(--mn-ink-200);
  border-radius: var(--mn-radius-card);
  padding: var(--mn-space-5);
}

.toc-title {
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-bold);
  color: var(--mn-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--mn-space-3);
}

.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.toc-item {
  border-left: 2px solid var(--mn-ink-100);
  transition: border-color var(--mn-transition);
}

.toc-item.is-active {
  border-left-color: var(--mn-primary);
}

.toc-link {
  display: block;
  padding: var(--mn-space-1) var(--mn-space-3);
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  text-decoration: none;
  line-height: var(--mn-leading-snug);
  transition: color var(--mn-transition);
  border-radius: 0 4px 4px 0;
}

.toc-link:hover {
  color: var(--mn-primary);
}

.toc-item.is-active .toc-link {
  color: var(--mn-primary);
  font-weight: var(--mn-font-semibold);
}

/* h3 nested TOC items */
.toc-item--h3 .toc-link {
  padding-left: var(--mn-space-6);
  font-size: var(--mn-text-xs);
}

/* Mobile TOC — horizontal scrollable pill row */
.toc-mobile {
  display: block;
  overflow-x: auto;
  padding-block: var(--mn-space-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--mn-ink-100);
  margin-bottom: var(--mn-space-6);
}

.toc-mobile::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
  .toc-mobile { display: none; }
}

.toc-mobile-list {
  display: flex;
  gap: var(--mn-space-2);
  list-style: none;
  padding-inline: var(--mn-space-4);
  white-space: nowrap;
}

.toc-mobile-link {
  display: inline-block;
  padding: var(--mn-space-1) var(--mn-space-3);
  font-size: var(--mn-text-xs);
  font-weight: var(--mn-font-medium);
  color: var(--mn-ink-600);
  border-radius: var(--mn-radius-badge);
  border: 1px solid var(--mn-ink-200);
  text-decoration: none;
  transition: background var(--mn-transition), color var(--mn-transition), border-color var(--mn-transition);
}

.toc-mobile-link:hover,
.toc-mobile-link.is-active {
  background: var(--mn-primary-light);
  color: var(--mn-primary);
  border-color: var(--mn-primary);
}

/* =============================================================================
   21. SITE FOOTER
   ============================================================================= */

.site-footer {
  background: #09090b;
  color: rgba(255,255,255,.5);
  padding-top: var(--mn-space-16);
  border-top: 1px solid #27272a;
}

@media (min-width: 768px) {
  .site-footer { padding-top: var(--mn-space-20); }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mn-space-10);
  padding-bottom: var(--mn-space-12);
}

@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--mn-space-2);
  font-size: var(--mn-text-xl);
  font-weight: var(--mn-font-extrabold);
  color: var(--mn-ink-0);
  text-decoration: none;
  margin-bottom: var(--mn-space-4);
}

.footer-logo img {
  height: 28px;
  filter: brightness(0) invert(1);
}

.footer-tagline {
  font-size: var(--mn-text-sm);
  line-height: var(--mn-leading-relaxed);
  margin-bottom: var(--mn-space-5);
  color: var(--mn-ink-500);
}

.footer-social {
  display: flex;
  gap: var(--mn-space-3);
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--mn-radius-sm);
  background: var(--mn-ink-800);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mn-ink-400);
  transition: background var(--mn-transition), color var(--mn-transition);
}

.footer-social a:hover {
  background: var(--mn-primary);
  color: var(--mn-ink-0);
}

.footer-col-title {
  font-size: var(--mn-text-sm);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-ink-0);
  margin-bottom: var(--mn-space-4);
  letter-spacing: 0.02em;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
}

.footer-links a {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-500);
  text-decoration: none;
  transition: color var(--mn-transition);
}

.footer-links a:hover {
  color: var(--mn-ink-0);
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid var(--mn-ink-800);
  padding-block: var(--mn-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mn-space-4);
}

.footer-copy {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
}

.footer-legal-links {
  display: flex;
  gap: var(--mn-space-5);
  list-style: none;
}

.footer-legal-links a {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  text-decoration: none;
  transition: color var(--mn-transition);
}

.footer-legal-links a:hover {
  color: var(--mn-ink-0);
}

/* =============================================================================
   22. FORMS
   ============================================================================= */

.mn-form {
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-5);
}

.mn-field {
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-1);
}

.mn-label {
  font-size: var(--mn-text-sm);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-ink-800);
}

.mn-label .required {
  color: var(--mn-critical);
  margin-left: 2px;
}

.mn-input,
.mn-textarea,
.mn-select {
  width: 100%;
  padding: var(--mn-space-3) var(--mn-space-4);
  font-family: var(--mn-font-sans);
  font-size: var(--mn-text-base);
  color: var(--mn-ink-900);
  background: var(--mn-ink-0);
  border: 1.5px solid var(--mn-ink-300);
  border-radius: var(--mn-radius-btn);
  transition: border-color var(--mn-transition), box-shadow var(--mn-transition);
  -webkit-appearance: none;
  appearance: none;
}

.mn-input::placeholder,
.mn-textarea::placeholder {
  color: var(--mn-ink-400);
}

.mn-input:hover,
.mn-textarea:hover {
  border-color: var(--mn-ink-400);
}

.mn-input:focus,
.mn-textarea:focus,
.mn-select:focus {
  outline: none;
  border-color: var(--mn-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.mn-input.is-error,
.mn-textarea.is-error {
  border-color: var(--mn-critical);
}

.mn-input.is-error:focus,
.mn-textarea.is-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.mn-textarea {
  resize: vertical;
  min-height: 120px;
}

.mn-field-error {
  font-size: var(--mn-text-xs);
  color: var(--mn-critical);
  display: none;
}

.mn-field.has-error .mn-field-error {
  display: block;
}

.mn-field-hint {
  font-size: var(--mn-text-xs);
  color: var(--mn-ink-500);
}

.mn-submit {
  align-self: flex-start;
}

/* =============================================================================
   23. LEGAL PAGE
   ============================================================================= */

.legal-page {
  padding-block: var(--mn-space-16);
}

.legal-content {
  max-width: 720px;
  margin-inline: auto;
}

.legal-content h1 {
  font-size: var(--mn-text-3xl);
  margin-bottom: var(--mn-space-2);
}

.legal-content .legal-updated {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-500);
  margin-bottom: var(--mn-space-10);
}

.legal-content h2 {
  font-size: var(--mn-text-xl);
  margin-top: var(--mn-space-10);
  margin-bottom: var(--mn-space-4);
  padding-top: var(--mn-space-4);
  border-top: 1px solid var(--mn-ink-100);
}

.legal-content h3 {
  font-size: var(--mn-text-lg);
  margin-top: var(--mn-space-6);
  margin-bottom: var(--mn-space-3);
}

.legal-content p,
.legal-content li {
  font-size: var(--mn-text-base);
  color: var(--mn-ink-700);
  line-height: var(--mn-leading-relaxed);
  margin-bottom: var(--mn-space-4);
}

.legal-content ul,
.legal-content ol {
  padding-left: var(--mn-space-6);
  margin-bottom: var(--mn-space-4);
}

.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }

.legal-content a {
  color: var(--mn-primary);
}

/* =============================================================================
   24. 404 PAGE
   ============================================================================= */

.error-404 {
  min-height: calc(100vh - var(--mn-header-h) - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--mn-space-16) var(--mn-space-4);
}

.error-404-inner {
  max-width: 480px;
}

.error-404-code {
  font-size: 7rem;
  font-weight: var(--mn-font-black);
  color: var(--mn-primary-light);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: var(--mn-space-2);
}

.error-404-title {
  font-size: var(--mn-text-3xl);
  margin-bottom: var(--mn-space-4);
}

.error-404-desc {
  color: var(--mn-ink-600);
  margin-bottom: var(--mn-space-8);
}

.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-3);
  justify-content: center;
}

/* =============================================================================
   25. BACK TO TOP BUTTON
   ============================================================================= */

.back-to-top {
  position: fixed;
  bottom: var(--mn-space-8);
  right: var(--mn-space-6);
  z-index: 500;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mn-primary);
  color: var(--mn-ink-0);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mn-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--mn-transition), visibility var(--mn-transition), transform var(--mn-transition), background var(--mn-transition);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--mn-primary-hover);
  box-shadow: var(--mn-shadow-lg);
}

/* =============================================================================
   26. SCROLL-TRIGGERED ANIMATIONS
   ============================================================================= */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll[data-delay="100"] { transition-delay: 0.1s; }
.animate-on-scroll[data-delay="200"] { transition-delay: 0.2s; }
.animate-on-scroll[data-delay="300"] { transition-delay: 0.3s; }
.animate-on-scroll[data-delay="400"] { transition-delay: 0.4s; }
.animate-on-scroll[data-delay="500"] { transition-delay: 0.5s; }

/* Fade in up keyframe (alternative via class) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   27. UTILITY / SPACING
   ============================================================================= */

.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--mn-space-4); }
.mt-6  { margin-top: var(--mn-space-6); }
.mt-8  { margin-top: var(--mn-space-8); }
.mt-12 { margin-top: var(--mn-space-12); }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--mn-space-4); }
.mb-6  { margin-bottom: var(--mn-space-6); }
.mb-8  { margin-bottom: var(--mn-space-8); }

/* =============================================================================
   28. RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* Helpers for conditional visibility */
.hide-mobile  { display: none; }
.hide-desktop { display: block; }

@media (min-width: 768px) {
  .hide-mobile  { display: block; }
  .hide-desktop { display: none; }
}

/* Section alt background */
.section-alt {
  background: var(--mn-ink-50);
}

/* =============================================================================
   29. PRINT STYLES
   ============================================================================= */

@media print {
  .site-header,
  .site-footer,
  .hamburger,
  .mobile-menu,
  .back-to-top,
  .toc,
  .toc-mobile,
  .share-buttons,
  .post-cta-box,
  .related-posts,
  .nav-cta {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .post-content {
    max-width: 100%;
  }
}

/* =============================================================================
   30. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================================
   COMPATIBILITY LAYER
   Maps template BEM class names to existing CSS so templates work without
   a full rewrite. Also adds missing section/component styles.
   ============================================================================= */

/* ── Button aliases ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-family:var(--mn-font-sans);font-size:var(--mn-text-base);font-weight:var(--mn-font-semibold);line-height:1;border-radius:var(--mn-radius-btn);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--mn-transition),border-color var(--mn-transition),color var(--mn-transition),box-shadow var(--mn-transition),transform var(--mn-transition);white-space:nowrap;user-select:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--mn-primary);outline-offset:3px}
.btn--primary{background:var(--mn-primary);border-color:var(--mn-primary);color:#fff}
.btn--primary:hover{background:var(--mn-primary-hover);border-color:var(--mn-primary-hover);color:#fff;box-shadow:var(--mn-shadow-md)}
.btn--outline{background:transparent;border-color:var(--mn-primary);color:var(--mn-primary)}
.btn--outline:hover{background:var(--mn-primary-light);color:var(--mn-primary-hover)}
.btn--ghost{background:transparent;border-color:transparent;color:var(--mn-ink-700)}
.btn--ghost:hover{background:var(--mn-ink-100);color:var(--mn-ink-900)}
.btn--white{background:#fff;border-color:#fff;color:var(--mn-primary)}
.btn--white:hover{background:var(--mn-primary-light);color:var(--mn-primary-hover)}
.btn--ghost-white{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn--ghost-white:hover{background:rgba(255,255,255,.12)}
.btn--lg{font-size:var(--mn-text-lg);padding:.875rem 2rem}
.btn--sm{font-size:var(--mn-text-sm);padding:.45rem .9rem}
.btn--full{width:100%;justify-content:center}

/* ── Badge aliases ──────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .625rem;font-size:var(--mn-text-xs);font-weight:var(--mn-font-semibold);line-height:1;border-radius:var(--mn-radius-badge);letter-spacing:.02em}
.badge--brand{background:var(--mn-primary-light);color:var(--mn-primary)}
.badge--positive{background:#d1fae5;color:#065f46}
.badge--caution{background:#fef3c7;color:#92400e}
.badge--critical{background:#fee2e2;color:#991b1b}
.badge--neu{background:var(--mn-ink-100);color:var(--mn-ink-600)}

/* ── Typography helpers ─────────────────────────────────────────────────── */
.text-gradient{background:linear-gradient(135deg,var(--mn-primary) 0%,#818cf8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section--alt{background:var(--mn-ink-50)}
.section-eyebrow{display:inline-block;font-size:var(--mn-text-sm);font-weight:var(--mn-font-semibold);color:var(--mn-primary);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.75rem}

/* ── Page hero ──────────────────────────────────────────────────────────── */
.page-hero{padding-block:var(--mn-space-16) var(--mn-space-12);background:linear-gradient(165deg,var(--mn-primary-light) 0%,var(--mn-ink-0) 60%)}
.page-hero--centered{text-align:center}
.page-hero__title{font-size:clamp(2rem,4vw,3rem);font-weight:var(--mn-font-extrabold);color:var(--mn-ink-900);letter-spacing:-.035em;margin-bottom:1rem}
.page-hero__subtitle{font-size:var(--mn-text-lg);color:var(--mn-ink-600);max-width:580px;line-height:var(--mn-leading-relaxed)}
.page-hero--centered .page-hero__subtitle{margin-inline:auto}

/* ── Social proof ───────────────────────────────────────────────────────── */
.social-proof{padding-block:var(--mn-space-8);border-block:1px solid var(--mn-ink-100);background:var(--mn-ink-0);text-align:center}
.social-proof__label{font-size:var(--mn-text-sm);color:var(--mn-ink-500);margin-bottom:var(--mn-space-4)}
.social-proof__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mn-space-3);margin-bottom:var(--mn-space-6)}
.logo-pill{padding:.375rem .875rem;background:var(--mn-ink-50);border:1px solid var(--mn-ink-200);border-radius:var(--mn-radius-badge);font-size:var(--mn-text-sm);font-weight:var(--mn-font-semibold);color:var(--mn-ink-600)}
.social-proof__stats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--mn-space-8)}
.stat{text-align:center}
.stat__number{display:block;font-size:var(--mn-text-3xl);font-weight:var(--mn-font-black);color:var(--mn-ink-900);letter-spacing:-.03em}
.stat__label{font-size:var(--mn-text-sm);color:var(--mn-ink-500)}

/* ── Hero BEM (front-page.php) ──────────────────────────────────────────── */
.hero__inner{display:grid;grid-template-columns:1fr;gap:var(--mn-space-12);align-items:center}
@media(min-width:1024px){.hero__inner{grid-template-columns:1fr 1fr;gap:var(--mn-space-16)}}
.hero__content{max-width:600px}
.hero__badge{margin-bottom:var(--mn-space-4)}
.hero__title{font-size:clamp(2rem,5vw,3.75rem);font-weight:900;line-height:1.1;color:var(--mn-ink-900);margin-bottom:var(--mn-space-6);letter-spacing:-.03em}
.hero__subtitle{font-size:var(--mn-text-lg);color:var(--mn-ink-600);line-height:var(--mn-leading-relaxed);margin-bottom:var(--mn-space-8);max-width:520px}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mn-space-3);margin-bottom:var(--mn-space-5)}
.hero__footnote{font-size:var(--mn-text-sm);color:var(--mn-ink-500)}
.hero__pillars{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.hero__pillars span{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;color:#3f3f46;background:#f4f4f5;border:1px solid #e4e4e7;padding:.3rem .75rem;border-radius:9999px;letter-spacing:.01em}
.hero__visual{display:flex;justify-content:center;align-items:center}
.hero__app-preview{width:100%;max-width:440px;background:var(--mn-ink-0);border-radius:var(--mn-radius-lg);border:1px solid var(--mn-ink-200);box-shadow:var(--mn-shadow-lg);overflow:hidden}
.app-preview__bar{background:var(--mn-ink-50);border-bottom:1px solid var(--mn-ink-200);padding:.625rem 1rem;display:flex;gap:.5rem}
.app-preview__bar span{width:10px;height:10px;border-radius:50%;background:var(--mn-ink-300)}
.app-preview__bar span:nth-child(1){background:#fc5753}
.app-preview__bar span:nth-child(2){background:#fdbc40}
.app-preview__bar span:nth-child(3){background:#34c749}
.app-preview__content{padding:0;overflow:hidden}
.score-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:8px;border:1px solid var(--mn-ink-200);margin-bottom:.5rem;margin-right:.5rem}
.score-chip span{font-size:.75rem;color:var(--mn-ink-500)}
.score-chip strong{font-size:1.125rem;font-weight:800}
.score-chip--good strong{color:var(--mn-positive)}
.score-chip--mid strong{color:var(--mn-caution)}
.preview-post{margin-top:.75rem;padding:.75rem;background:var(--mn-ink-50);border-radius:8px;border:1px solid var(--mn-ink-100)}
.preview-post__tag{font-size:.65rem;font-weight:700;color:var(--mn-primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.375rem}
.preview-post__title{font-size:.875rem;font-weight:600;color:var(--mn-ink-800);line-height:1.4;margin-bottom:.375rem}
.preview-post__meta{display:flex;gap:.75rem;font-size:.75rem;color:var(--mn-positive)}

/* ── Features BEM ───────────────────────────────────────────────────────── */
.features__grid{display:grid;grid-template-columns:1fr;gap:var(--mn-space-6)}
@media(min-width:640px){.features__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.features__grid{grid-template-columns:repeat(3,1fr)}}
.feature-card--featured{border-color:var(--mn-primary)!important;box-shadow:0 0 0 1px var(--mn-primary)!important}
.feature-card__icon{font-size:1.75rem;margin-bottom:var(--mn-space-4)}
.feature-card__title{font-size:var(--mn-text-xl);font-weight:700;color:var(--mn-ink-900);margin-bottom:var(--mn-space-3)}
.feature-card__desc{font-size:var(--mn-text-sm);color:var(--mn-ink-600);line-height:var(--mn-leading-relaxed);margin-bottom:var(--mn-space-4)}
.feature-card__link{font-size:var(--mn-text-sm);font-weight:600;color:var(--mn-primary);text-decoration:none}
.feature-card__link:hover{color:var(--mn-primary-hover)}

/* ── Steps BEM ──────────────────────────────────────────────────────────── */
.step__number{width:3rem;height:3rem;border-radius:50%;background:var(--mn-primary);color:#fff;font-size:var(--mn-text-xl);font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:var(--mn-space-4)}
@media(min-width:768px){.step__number{margin-bottom:0;margin-right:var(--mn-space-5)}}
.step__title{font-size:var(--mn-text-xl);font-weight:700;color:var(--mn-ink-900);margin-bottom:var(--mn-space-2)}
.step__desc{color:var(--mn-ink-600);line-height:var(--mn-leading-relaxed)}

/* ── Testimonials BEM ───────────────────────────────────────────────────── */
.testimonials__grid{display:grid;grid-template-columns:1fr;gap:var(--mn-space-6)}
@media(min-width:768px){.testimonials__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.testimonials__grid{grid-template-columns:repeat(3,1fr)}}
.testimonial{background:var(--mn-ink-0);border-radius:var(--mn-radius-card);border:1px solid var(--mn-ink-200);padding:var(--mn-space-6);margin:0}
.testimonial__text{color:var(--mn-ink-700);line-height:var(--mn-leading-relaxed);margin-bottom:var(--mn-space-5);font-style:italic}
.testimonial__footer{display:flex;align-items:center;gap:var(--mn-space-3)}
.testimonial__avatar{width:40px;height:40px;border-radius:50%;background:var(--mn-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;flex-shrink:0}
.testimonial__name{display:block;font-weight:600;color:var(--mn-ink-900);font-style:normal}
.testimonial__role{display:block;font-size:var(--mn-text-sm);color:var(--mn-ink-500)}

/* ── Pricing page ───────────────────────────────────────────────────────── */
.billing-toggle{display:flex;align-items:center;gap:var(--mn-space-3);justify-content:center;margin-top:var(--mn-space-6)}
.billing-toggle__label{font-size:var(--mn-text-sm);color:var(--mn-ink-500);cursor:pointer;display:flex;align-items:center;gap:var(--mn-space-2)}
.billing-toggle__label--active,.billing-toggle__label.billing-toggle__label--active{color:var(--mn-ink-900);font-weight:600}
.billing-toggle__switch{width:44px;height:24px;background:var(--mn-ink-200);border:none;border-radius:12px;cursor:pointer;position:relative;transition:background var(--mn-transition)}
.billing-toggle__switch[aria-checked="true"]{background:var(--mn-primary)}
.billing-toggle__knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--mn-transition);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.billing-toggle__switch[aria-checked="true"] .billing-toggle__knob{transform:translateX(20px)}
.pricing-grid{display:grid;grid-template-columns:1fr;gap:var(--mn-space-6);align-items:start}
/* 3 pricing cards — only go multi-col when there's enough room for all 3 */
@media(min-width:1024px){.pricing-grid{grid-template-columns:repeat(3,1fr)}}
.pricing-card--featured{border-color:var(--mn-primary)!important;box-shadow:0 0 0 2px var(--mn-primary),var(--mn-shadow-lg)!important;position:relative}
.pricing-card__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--mn-primary);color:#fff;font-size:var(--mn-text-xs);font-weight:700;padding:.25rem .875rem;border-radius:var(--mn-radius-badge);letter-spacing:.04em;text-transform:uppercase}
.pricing-card__tier{font-size:var(--mn-text-xl);font-weight:700;color:var(--mn-ink-900);margin-bottom:var(--mn-space-1)}
.pricing-card__price-wrap{margin-block:var(--mn-space-4)}
.pricing-card__amount{font-size:var(--mn-text-4xl);font-weight:900;color:var(--mn-ink-900)}
.pricing-card__period{font-size:var(--mn-text-sm);color:var(--mn-ink-500)}
.pricing-card__billing-note{font-size:var(--mn-text-xs);color:var(--mn-ink-400);margin-top:.25rem}
.pricing-card__desc{font-size:var(--mn-text-sm);color:var(--mn-ink-600);margin-bottom:var(--mn-space-5)}
.pricing-card__features{list-style:none;margin-block:var(--mn-space-5);display:flex;flex-direction:column;gap:var(--mn-space-2)}
.pricing-card__feature{display:flex;align-items:center;gap:var(--mn-space-2);font-size:var(--mn-text-sm);color:var(--mn-ink-700)}
.pricing-card__feature svg{flex-shrink:0}
.pricing-card__feature--yes svg{color:var(--mn-positive)}
.pricing-card__feature--no{color:var(--mn-ink-400)}
.pricing-card__feature--no svg{color:var(--mn-ink-300)}
.comparison-table-wrap{overflow-x:auto}
.comparison-table{width:100%;border-collapse:collapse}
.comparison-table th,.comparison-table td{padding:var(--mn-space-3) var(--mn-space-4);text-align:left;border-bottom:1px solid var(--mn-ink-100);font-size:var(--mn-text-sm)}
.comparison-table th{font-weight:600;color:var(--mn-ink-900);background:var(--mn-ink-50)}
.comparison-table__featured{background:var(--mn-primary-light);color:var(--mn-primary);font-weight:600}
.trust-grid{display:grid;grid-template-columns:1fr;gap:var(--mn-space-6)}
@media(min-width:480px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
.trust-item{text-align:center}
.trust-item__icon{font-size:2rem;margin-bottom:var(--mn-space-3)}
.trust-item h3{font-size:var(--mn-text-base);font-weight:600;margin-bottom:var(--mn-space-1)}
.trust-item p{font-size:var(--mn-text-sm);color:var(--mn-ink-500)}

/* ── FAQ template selectors ─────────────────────────────────────────────── */
.faq-item__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;padding:var(--mn-space-4) var(--mn-space-5);font-family:var(--mn-font-sans);font-size:var(--mn-text-base);font-weight:600;color:var(--mn-ink-800);text-align:left;gap:var(--mn-space-4)}
.faq-item__trigger:hover{color:var(--mn-primary)}
.faq-item__icon{flex-shrink:0;transition:transform 300ms ease;color:var(--mn-ink-400)}
.faq-item.is-open .faq-item__icon{transform:rotate(180deg);color:var(--mn-primary)}
.faq-item__answer{overflow:hidden;transition:max-height 300ms ease}
.faq-item__answer p{padding:0 var(--mn-space-5) var(--mn-space-4);color:var(--mn-ink-600);line-height:var(--mn-leading-relaxed)}

/* ── Yoast / block-editor FAQ accordion (inside post content) ───────────── */
.wp-block-yoast-faq-block,
.schema-faq {
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
  margin-block: 2rem;
}
.schema-faq-section {
  background: var(--mn-ink-0);
  border-radius: var(--mn-radius-card);
  border: 1px solid var(--mn-ink-200);
  overflow: hidden;
  transition: border-color var(--mn-transition), box-shadow var(--mn-transition);
}
.schema-faq-section.is-open {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px #eef2ff;
}
.schema-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--mn-space-5) var(--mn-space-6);
  font-size: var(--mn-text-base);
  font-weight: var(--mn-font-semibold);
  color: var(--mn-ink-900);
  cursor: pointer;
  gap: var(--mn-space-4);
  user-select: none;
  transition: color var(--mn-transition);
}
.schema-faq-question:hover { color: var(--mn-primary); background: var(--mn-ink-50, #fafafa); }
.schema-faq-section.is-open .schema-faq-question { color: #4f46e5; }
/* Icon circle — matches .faq-icon on homepage */
.yoast-faq__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mn-ink-100);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mn-ink-500);
  transition: background var(--mn-transition), color var(--mn-transition);
}
.schema-faq-section.is-open .yoast-faq__icon {
  background: #eef2ff;
  color: #4f46e5;
}
.yoast-faq__chevron {
  transition: transform 300ms ease;
}
.schema-faq-section.is-open .yoast-faq__chevron {
  transform: rotate(180deg);
}
.schema-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease, padding 300ms ease;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--mn-space-6);
  padding-right: var(--mn-space-6);
  color: var(--mn-ink-600);
  line-height: var(--mn-leading-relaxed);
  font-size: var(--mn-text-base);
}
.schema-faq-section.is-open .schema-faq-answer {
  max-height: 2000px;
  padding-top: .375rem;
  padding-bottom: var(--mn-space-5);
}
/* Fallback: if answer is a wrapper div containing <p>/<li> children */
.schema-faq-answer p,
.schema-faq-answer li {
  padding: 0 var(--mn-space-6) var(--mn-space-5);
  color: var(--mn-ink-600);
  line-height: var(--mn-leading-relaxed);
  font-size: var(--mn-text-base);
}
.schema-faq-answer p:first-child { padding-top: .375rem; }

/* ── CTA Banner ─────────────────────────────────────────────────────────── */
.cta-banner{background:linear-gradient(135deg,var(--mn-primary) 0%,#4338ca 100%);color:#fff}
.cta-banner__inner{display:flex;flex-direction:column;gap:var(--mn-space-6);align-items:flex-start}
@media(min-width:768px){.cta-banner__inner{flex-direction:row;align-items:center;justify-content:space-between}}
.cta-banner__title{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:var(--mn-space-2)}
.cta-banner__subtitle{font-size:var(--mn-text-lg);color:rgba(255,255,255,.8)}
.cta-banner__actions{display:flex;gap:var(--mn-space-3);flex-wrap:wrap}

/* ── Archive page ───────────────────────────────────────────────────────── */
.page-wrapper{padding-block:var(--mn-space-8) var(--mn-space-16)}
.archive-header{margin-bottom:var(--mn-space-8)}
.archive-header__title{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--mn-ink-900);margin-bottom:var(--mn-space-3)}
.archive-header__desc{font-size:var(--mn-text-lg);color:var(--mn-ink-600);max-width:600px}
.category-filter{display:flex;flex-wrap:wrap;gap:var(--mn-space-2);margin-bottom:var(--mn-space-8)}
.category-pill{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .875rem;border-radius:var(--mn-radius-badge);font-size:var(--mn-text-sm);font-weight:500;color:var(--mn-ink-600);background:var(--mn-ink-100);border:1px solid transparent;text-decoration:none;transition:background var(--mn-transition),color var(--mn-transition)}
.category-pill:hover,.category-pill--active{background:var(--mn-primary-light);color:var(--mn-primary);border-color:var(--mn-primary)}
.category-pill__count{font-size:var(--mn-text-xs);opacity:.7}
.post-grid{display:grid;grid-template-columns:1fr;gap:var(--mn-space-6)}
@media(min-width:640px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-grid--3{display:grid;grid-template-columns:1fr;gap:var(--mn-space-6)}
@media(min-width:640px){.post-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.post-grid--3{grid-template-columns:repeat(3,1fr)}}
.post-card--featured{grid-column:1/-1}
@media(min-width:1024px){.post-card--featured{grid-column:span 2}}
.post-card__thumb-link{display:block;overflow:hidden;border-radius:var(--mn-radius-card) var(--mn-radius-card) 0 0}
.post-card__thumb{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform var(--mn-transition-slow)}
.post-card:hover .post-card__thumb{transform:scale(1.04)}
.post-card__body{padding:var(--mn-space-5)}
.post-card__cats{display:flex;gap:.375rem;flex-wrap:wrap;margin-bottom:var(--mn-space-3)}
.post-card__title{font-size:var(--mn-text-xl);font-weight:700;color:var(--mn-ink-900);line-height:var(--mn-leading-snug);margin-bottom:var(--mn-space-2)}
.post-card__title a{color:inherit;text-decoration:none}
.post-card__title a:hover{color:var(--mn-primary)}
.post-card__title--sm{font-size:var(--mn-text-lg)}
.post-card__excerpt{font-size:var(--mn-text-sm);color:var(--mn-ink-600);line-height:var(--mn-leading-relaxed);margin-bottom:var(--mn-space-4);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card__footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--mn-space-2)}
.post-card__author{display:flex;align-items:center;gap:var(--mn-space-2);font-size:var(--mn-text-sm);color:var(--mn-ink-600)}
.post-card__avatar{width:28px;height:28px;border-radius:50%}
.post-card__meta{display:flex;align-items:center;gap:var(--mn-space-2);font-size:var(--mn-text-xs);color:var(--mn-ink-400)}
.no-results{text-align:center;padding:var(--mn-space-16) var(--mn-space-4)}
.no-results__icon{font-size:3rem;margin-bottom:var(--mn-space-4)}
.no-results__title{font-size:var(--mn-text-2xl);font-weight:700;margin-bottom:var(--mn-space-3)}

/* ── Single post ────────────────────────────────────────────────────────── */
.single-layout{display:grid;grid-template-columns:1fr;gap:var(--mn-space-8);padding-block:var(--mn-space-6) var(--mn-space-16);align-items:start}
@media(min-width:1100px){.single-layout{grid-template-columns:1fr 280px}}
.single-post__hero{border-radius:var(--mn-radius-lg);overflow:hidden;margin-bottom:var(--mn-space-8)}
.single-post__hero-img-wrap{border-radius:16px;overflow:hidden;margin-bottom:var(--mn-space-6);aspect-ratio:2/1;background:#f4f4f5}
.single-post__hero-img{width:100%;height:100%;object-fit:cover;display:block}
.single-post__inner{min-width:0}
.single-post__header{margin-bottom:var(--mn-space-8)}
.single-post__cats{display:flex;gap:.375rem;flex-wrap:wrap;margin-bottom:var(--mn-space-4)}
.single-post__title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;color:var(--mn-ink-900);letter-spacing:-.035em;line-height:var(--mn-leading-tight);margin-bottom:var(--mn-space-5)}
.single-post__meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--mn-space-4);padding-block:var(--mn-space-4);border-block:1px solid var(--mn-ink-100)}
.single-post__author-meta{display:flex;align-items:center;gap:var(--mn-space-3)}
.single-post__avatar{width:40px;height:40px;border-radius:50%}
.single-post__author-name{display:block;font-weight:600;color:var(--mn-ink-900)}
.single-post__date-row{display:flex;align-items:center;gap:var(--mn-space-2);font-size:var(--mn-text-sm);color:var(--mn-ink-500)}
.single-post__date,.single-post__read-time{font-size:var(--mn-text-sm);color:var(--mn-ink-500)}
.single-post__body{font-size:var(--mn-text-lg);line-height:var(--mn-leading-relaxed);color:var(--mn-ink-800)}
.single-post__body h2,.single-post__body h3{margin-block:var(--mn-space-8) var(--mn-space-3)}
.single-post__body p{margin-bottom:var(--mn-space-5)}
.single-post__body ul,.single-post__body ol{margin-bottom:var(--mn-space-5);padding-left:1.5rem}
.single-post__body ul{list-style:disc}
.single-post__body ol{list-style:decimal}
.single-post__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mn-space-2);margin-top:var(--mn-space-6);padding-top:var(--mn-space-6);border-top:1px solid var(--mn-ink-100)}
.single-post__tags-label{font-size:var(--mn-text-sm);color:var(--mn-ink-500)}
.share-buttons--top{display:flex;gap:var(--mn-space-2)}
.share-bottom{margin-top:var(--mn-space-8);padding-top:var(--mn-space-6);border-top:1px solid var(--mn-ink-100)}
.share-bottom__label{font-size:var(--mn-text-sm);color:var(--mn-ink-500);margin-bottom:var(--mn-space-3)}
.share-btn{display:inline-flex;align-items:center;gap:var(--mn-space-2);padding:.375rem .75rem;border-radius:var(--mn-radius-btn);border:1px solid var(--mn-ink-200);font-size:var(--mn-text-sm);font-weight:500;cursor:pointer;text-decoration:none;transition:background var(--mn-transition),color var(--mn-transition),border-color var(--mn-transition);background:var(--mn-ink-0);color:var(--mn-ink-700)}
.share-btn:hover{border-color:var(--mn-ink-400);background:var(--mn-ink-50)}
.share-btn--twitter{color:var(--mn-ink-700)}
.share-btn--linkedin{color:var(--mn-ink-700)}
.share-btn--lg{padding:.625rem 1.25rem}
.share-btn.copied{background:var(--mn-positive);color:#fff;border-color:var(--mn-positive)}
.post-cta-box{display:flex;flex-direction:column;gap:var(--mn-space-4);background:var(--mn-primary-light);border:1px solid var(--mn-primary);border-radius:var(--mn-radius-card);padding:var(--mn-space-6);margin-block:var(--mn-space-8);align-items:flex-start}
@media(min-width:640px){.post-cta-box{flex-direction:row;align-items:center}}
.post-cta-box__icon{font-size:2rem;flex-shrink:0}
.post-cta-box__content{flex:1}
.post-cta-box__title{font-size:var(--mn-text-lg);font-weight:700;color:var(--mn-ink-900);margin-bottom:var(--mn-space-1)}
.post-cta-box p{font-size:var(--mn-text-sm);color:var(--mn-ink-600);margin:0}
.author-box{display:flex;gap:var(--mn-space-5);padding:var(--mn-space-6);background:var(--mn-ink-50);border-radius:var(--mn-radius-card);border:1px solid var(--mn-ink-200);margin-top:var(--mn-space-8);align-items:flex-start}
.author-box__avatar{width:72px;height:72px;border-radius:50%;flex-shrink:0}
.author-box__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.author-box__name{font-size:var(--mn-text-lg);font-weight:700;color:var(--mn-ink-900);text-decoration:none;display:block}
.author-box__name:hover{color:var(--mn-primary)}
.author-box__job{font-size:.75rem;font-weight:600;color:#6366f1;margin:.1rem 0 0}
.author-box__bio{font-size:var(--mn-text-sm);color:var(--mn-ink-600);line-height:var(--mn-leading-relaxed);margin-bottom:var(--mn-space-3)}
.author-box__link{font-size:var(--mn-text-sm);font-weight:600;color:var(--mn-primary);text-decoration:none}
.author-box__socials{margin-top:0}
.related-posts__title{font-size:var(--mn-text-2xl);font-weight:700;margin-bottom:var(--mn-space-6)}

/* TOC widget (PHP generates .toc-widget) */
.toc-widget{background:var(--mn-ink-50);border:1px solid var(--mn-ink-200);border-radius:var(--mn-radius-card);padding:var(--mn-space-5)}
.toc-widget .toc-title{font-size:var(--mn-text-sm);font-weight:600;color:var(--mn-ink-900);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--mn-space-3)}
.toc-widget .toc-list{list-style:none}
.toc-widget .toc-link{display:block;padding:.375rem .5rem;font-size:var(--mn-text-sm);color:var(--mn-ink-600);text-decoration:none;border-radius:4px;border-left:2px solid transparent;transition:all var(--mn-transition)}
.toc-widget .toc-link:hover,.toc-widget .toc-link.is-active{color:var(--mn-primary);background:var(--mn-primary-light);border-left-color:var(--mn-primary)}
.toc-widget .toc-sub .toc-link{padding-left:1.25rem;font-size:.8125rem}
.toc-mobile{margin-bottom:var(--mn-space-6);border:1px solid var(--mn-ink-200);border-radius:var(--mn-radius-card)}
.toc-mobile__trigger{display:flex;align-items:center;gap:var(--mn-space-3);width:100%;background:none;border:none;cursor:pointer;padding:var(--mn-space-4);font-weight:600;color:var(--mn-ink-800);font-family:var(--mn-font-sans);font-size:var(--mn-text-sm)}
.toc-mobile__chevron{margin-left:auto;transition:transform 250ms}
.toc-mobile__trigger[aria-expanded="true"] .toc-mobile__chevron{transform:rotate(180deg)}
.toc-mobile__content{padding:var(--mn-space-4);padding-top:0}
@media(min-width:1100px){.toc-mobile{display:none}}
.single-sidebar{display:none}
@media(min-width:1100px){.single-sidebar{display:block;align-self:start}}
.single-sidebar__sticky{position:sticky;top:calc(var(--mn-header-h) + 1.5rem);max-height:calc(100vh - var(--mn-header-h) - 3rem);overflow-y:auto;overscroll-behavior:contain}
.reading-progress{margin-top:var(--mn-space-4)}
.reading-progress__label{font-size:var(--mn-text-xs);color:var(--mn-ink-500);margin-bottom:.375rem}
.reading-progress__bar{height:4px;background:var(--mn-ink-100);border-radius:9999px;overflow:hidden}
.reading-progress__fill{height:100%;background:var(--mn-primary);border-radius:9999px;width:0%;transition:width .1s linear}

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.breadcrumbs{padding-block:var(--mn-space-4)}
.breadcrumbs__list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--mn-space-2);list-style:none}
.breadcrumbs__item{display:flex;align-items:center;gap:var(--mn-space-2);font-size:var(--mn-text-sm);color:var(--mn-ink-500)}
.breadcrumbs__item:not(:last-child)::after{content:'/';color:var(--mn-ink-300)}
.breadcrumbs__link{color:var(--mn-ink-600);text-decoration:none}
.breadcrumbs__link:hover{color:var(--mn-primary)}
.breadcrumbs__current{color:var(--mn-ink-400)}

/* ── Legal page ─────────────────────────────────────────────────────────── */
.legal-layout{max-width:760px;margin-inline:auto;padding-block:var(--mn-space-8) var(--mn-space-16)}
.legal-content__header{margin-bottom:var(--mn-space-8);padding-bottom:var(--mn-space-6);border-bottom:1px solid var(--mn-ink-100)}
.legal-content__title{font-size:clamp(2rem,4vw,2.75rem);font-weight:800;margin-bottom:var(--mn-space-3)}
.legal-content__meta{font-size:var(--mn-text-sm);color:var(--mn-ink-500);margin-bottom:var(--mn-space-2)}
.legal-content__intro{font-size:var(--mn-text-sm);color:var(--mn-ink-600)}
.legal-content__body{font-size:var(--mn-text-lg)}
@media(max-width:639px){.legal-content__body{font-size:var(--mn-text-base)}}
.legal-content__footer{margin-top:var(--mn-space-10);padding-top:var(--mn-space-6);border-top:1px solid var(--mn-ink-100);font-size:var(--mn-text-sm);color:var(--mn-ink-500)}
.legal-content__footer a{color:var(--mn-primary)}

/* ── Page / generic ─────────────────────────────────────────────────────── */
.page-layout{max-width:760px}
.page-content__header{margin-bottom:var(--mn-space-8)}
.page-content__title{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.035em}
.page-content__body{font-size:var(--mn-text-lg)}

/* ── About page ─────────────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--mn-space-6)}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-block{text-align:center;padding:var(--mn-space-6);background:var(--mn-ink-0);border-radius:var(--mn-radius-card);border:1px solid var(--mn-ink-100)}
.stat-block__number{display:block;font-size:var(--mn-text-3xl);font-weight:900;color:var(--mn-primary);letter-spacing:-.03em;margin-bottom:var(--mn-space-1)}
.stat-block__label{font-size:var(--mn-text-sm);color:var(--mn-ink-500)}
.values-grid{display:grid;grid-template-columns:1fr;gap:var(--mn-space-6)}
@media(min-width:640px){.values-grid{grid-template-columns:repeat(2,1fr)}}
.value-card{padding:var(--mn-space-6);background:var(--mn-ink-0);border-radius:var(--mn-radius-card);border:1px solid var(--mn-ink-100)}
.value-card__icon{font-size:1.75rem;margin-bottom:var(--mn-space-3)}
.value-card h3{font-size:var(--mn-text-lg);font-weight:700;margin-bottom:var(--mn-space-2)}
.value-card p{font-size:var(--mn-text-sm);color:var(--mn-ink-600)}

/* ── Contact page ───────────────────────────────────────────────────────── */
.contact-layout{display:grid;grid-template-columns:1fr;gap:var(--mn-space-10)}
@media(min-width:768px){.contact-layout{grid-template-columns:1fr 2fr}}
.contact-channels{display:flex;flex-direction:column;gap:var(--mn-space-6)}
.contact-channel{padding:var(--mn-space-5);background:var(--mn-ink-50);border-radius:var(--mn-radius-card);border:1px solid var(--mn-ink-100)}
.contact-channel__icon{font-size:1.75rem;margin-bottom:var(--mn-space-3)}
.contact-channel__title{font-size:var(--mn-text-lg);font-weight:700;margin-bottom:var(--mn-space-1)}
.contact-channel p{font-size:var(--mn-text-sm);color:var(--mn-ink-600);margin-bottom:var(--mn-space-2)}
.contact-channel__link{font-size:var(--mn-text-sm);font-weight:600;color:var(--mn-primary);text-decoration:none}
.contact-form-wrap__title{font-size:var(--mn-text-2xl);font-weight:700;margin-bottom:var(--mn-space-6)}
.form-row--2{display:grid;grid-template-columns:1fr;gap:var(--mn-space-4)}
@media(min-width:640px){.form-row--2{grid-template-columns:repeat(2,1fr)}}
.form-field{margin-bottom:var(--mn-space-4)}
.form-label{display:block;font-size:var(--mn-text-sm);font-weight:500;color:var(--mn-ink-700);margin-bottom:var(--mn-space-1)}
.form-input{width:100%;padding:.625rem .875rem;border:1px solid var(--mn-ink-200);border-radius:var(--mn-radius-btn);font-family:var(--mn-font-sans);font-size:var(--mn-text-base);color:var(--mn-ink-900);background:var(--mn-ink-0);transition:border-color var(--mn-transition),box-shadow var(--mn-transition)}
.form-input:focus{outline:none;border-color:#09090b;box-shadow:0 0 0 3px rgba(9,9,11,.1)}
.form-textarea{min-height:140px;resize:vertical}
.form-error{display:none;margin-top:.3rem;font-size:.8125rem;color:#dc2626;font-weight:500}
.form-input.is-error{border-color:#dc2626;background:#fef2f2}
.form-input.is-error:focus{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}

/* ── Feature page ───────────────────────────────────────────────────────── */
.feature-hero{padding-block:var(--mn-space-16) var(--mn-space-12);background:linear-gradient(165deg,var(--mn-primary-light) 0%,var(--mn-ink-0) 60%)}
.feature-hero__inner{display:grid;grid-template-columns:1fr;gap:var(--mn-space-12);align-items:center}
@media(min-width:1024px){.feature-hero__inner{grid-template-columns:1fr 1fr}}
.feature-hero__badge{margin-bottom:var(--mn-space-4)}
.feature-hero__title{font-size:clamp(2rem,4vw,3.25rem);font-weight:800;color:var(--mn-ink-900);letter-spacing:-.035em;line-height:var(--mn-leading-tight);margin-bottom:var(--mn-space-5)}
.feature-hero__subtitle{font-size:var(--mn-text-lg);color:var(--mn-ink-600);line-height:var(--mn-leading-relaxed);margin-bottom:var(--mn-space-8)}
.feature-hero__actions{display:flex;flex-wrap:wrap;gap:var(--mn-space-3)}
.feature-hero__visual{display:flex;justify-content:center}
.feature-hero__screen{width:100%;max-width:500px;background:var(--mn-ink-0);border-radius:var(--mn-radius-lg);border:1px solid var(--mn-ink-200);box-shadow:var(--mn-shadow-xl,0 20px 60px rgba(0,0,0,.15));overflow:hidden}
.feature-hero__screen-bar{background:var(--mn-ink-50);border-bottom:1px solid var(--mn-ink-200);padding:.625rem 1rem;display:flex;gap:.5rem}
.feature-hero__screen-bar span{width:10px;height:10px;border-radius:50%;background:var(--mn-ink-300)}
.feature-hero__screen-bar span:nth-child(1){background:#fc5753}
.feature-hero__screen-bar span:nth-child(2){background:#fdbc40}
.feature-hero__screen-bar span:nth-child(3){background:#34c749}
.feature-hero__screen-content{padding:0;overflow:hidden}
.social-proof-bar{background:var(--mn-ink-50);border-block:1px solid var(--mn-ink-100);padding:var(--mn-space-3) 0}
.social-proof-bar .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mn-space-4);font-size:var(--mn-text-sm);color:var(--mn-ink-500)}
.benefits__grid{display:grid;grid-template-columns:1fr;gap:var(--mn-space-5)}
@media(min-width:640px){.benefits__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.benefits__grid{grid-template-columns:repeat(3,1fr)}}
.benefit-card{padding:var(--mn-space-5);background:var(--mn-ink-0);border-radius:var(--mn-radius-card);border:1px solid var(--mn-ink-100)}
.benefit-card__icon{font-size:1.75rem;margin-bottom:var(--mn-space-3)}
.benefit-card__title{font-size:var(--mn-text-lg);font-weight:700;margin-bottom:var(--mn-space-2)}
.benefit-card__desc{font-size:var(--mn-text-sm);color:var(--mn-ink-600);line-height:var(--mn-leading-relaxed)}
.preview-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:var(--mn-radius-badge);font-size:.75rem;font-weight:600;background:var(--mn-ink-100);color:var(--mn-ink-600);margin-bottom:.375rem;margin-right:.375rem}
.preview-chip--active{background:var(--mn-primary-light);color:var(--mn-primary)}
.preview-title{font-size:.875rem;font-weight:600;color:var(--mn-ink-800);line-height:1.4;margin-top:.5rem}
.preview-bar{height:4px;background:var(--mn-primary);border-radius:9999px;margin-top:.5rem;opacity:.6}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.not-found{text-align:center;padding:var(--mn-space-24) var(--mn-space-4)}
.not-found__code{font-size:clamp(4rem,20vw,8rem);font-weight:900;color:var(--mn-ink-100);line-height:1;margin-bottom:var(--mn-space-4)}
.not-found__title{font-size:var(--mn-text-3xl);font-weight:700;color:var(--mn-ink-900);margin-bottom:var(--mn-space-3)}
.not-found__desc{font-size:var(--mn-text-lg);color:var(--mn-ink-600);margin-bottom:var(--mn-space-6)}
.not-found__search{max-width:400px;margin:0 auto var(--mn-space-6)}
.not-found__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--mn-space-3)}
.search-form__inner{display:flex;gap:var(--mn-space-2)}
.search-form__input{flex:1;padding:.625rem .875rem;border:1px solid var(--mn-ink-200);border-radius:var(--mn-radius-btn);font-size:var(--mn-text-base)}
.search-form__input:focus{outline:none;border-color:#09090b;box-shadow:0 0 0 3px rgba(9,9,11,.1)}
.search-form__btn{padding:.625rem .875rem;background:var(--mn-primary);color:#fff;border:none;border-radius:var(--mn-radius-btn);cursor:pointer;display:flex;align-items:center;min-height:44px}
.search-form__btn:hover{background:var(--mn-primary-hover)}

/* ── Footer BEM ─────────────────────────────────────────────────────────── */
.site-footer__logo{display:inline-flex;align-items:center;text-decoration:none;margin-bottom:var(--mn-space-4)}
.site-footer__grid{display:grid;grid-template-columns:1fr;gap:var(--mn-space-8);padding-block:var(--mn-space-12)}
@media(min-width:640px){.site-footer__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.site-footer__grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.site-footer__tagline{font-size:var(--mn-text-sm);color:rgba(255,255,255,.6);line-height:var(--mn-leading-relaxed);margin-bottom:var(--mn-space-5);max-width:260px}
.site-footer__social{display:flex;gap:var(--mn-space-3)}
.social-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);text-decoration:none;transition:background .2s,color .2s}
.social-link:hover{background:rgba(255,255,255,.18);color:#fff}
.site-footer__col-title{font-size:var(--mn-text-sm);font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--mn-space-4)}
.site-footer__links{list-style:none}
.site-footer__links li{margin-bottom:var(--mn-space-2)}
.site-footer__links a{font-size:var(--mn-text-sm);color:rgba(255,255,255,.6);text-decoration:none;transition:color var(--mn-transition)}
.site-footer__links a:hover{color:#fff}
.site-footer__bottom{display:flex;flex-direction:column;gap:var(--mn-space-2);padding-block:var(--mn-space-4);border-top:1px solid rgba(255,255,255,.08)}
@media(min-width:640px){.site-footer__bottom{flex-direction:row;justify-content:space-between;align-items:center}}
.site-footer__copy,.site-footer__legal-note{font-size:var(--mn-text-xs);color:rgba(255,255,255,.4);margin:0}

/* ── Misc ───────────────────────────────────────────────────────────────── */
.pricing-teaser__grid{display:grid;grid-template-columns:1fr;gap:var(--mn-space-6);align-items:start}
@media(min-width:768px){.pricing-teaser__grid{grid-template-columns:repeat(3,1fr)}}
.faq-section__inner{max-width:800px;margin-inline:auto}
.pagination{margin-top:var(--mn-space-10)}
.pagination ul{display:flex;flex-wrap:wrap;gap:var(--mn-space-2);list-style:none}
.pagination ul a,.pagination ul span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:.25rem .625rem;border-radius:var(--mn-radius-btn);font-size:var(--mn-text-sm);font-weight:500;border:1px solid var(--mn-ink-200);color:var(--mn-ink-700);text-decoration:none;transition:background var(--mn-transition)}
.pagination ul a:hover{background:var(--mn-primary-light);color:var(--mn-primary);border-color:var(--mn-primary)}
.pagination ul .current span{background:var(--mn-primary);color:#fff;border-color:var(--mn-primary)}
.comments-section{margin-top:var(--mn-space-10);padding-top:var(--mn-space-8);border-top:1px solid var(--mn-ink-100)}
.page-links{margin-top:var(--mn-space-6)}
/* ═══════════════════════════════════════════════════════════════════════════
   Blog & Single Post Improvements
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Key Takeaways box ─────────────────────────────────────────────────── */
.key-takeaways {
  background: #fafafa;
  border-left: 4px solid #09090b;
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.key-takeaways__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #09090b;
  margin-bottom: 0.625rem;
}
.key-takeaways__text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #374151;
  margin: 0;
}

/* ── Last updated date ─────────────────────────────────────────────────── */
.single-post__updated {
  font-size: 0.8125rem;
  color: #6b7280;
}

/* ── Post navigation ───────────────────────────────────────────────────── */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}
.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.post-nav__item:hover {
  border-color: #a1a1aa;
  background: #fafafa;
}
.post-nav__item--next {
  text-align: right;
}
.post-nav__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.post-nav__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 600px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__item--next { text-align: left; }
}

/* ── Blog hero (home.php) ──────────────────────────────────────────────── */
.page-hero--blog {
  padding-block: 4rem 3rem;
}
.page-hero--blog .page-hero__subtitle {
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 2rem;
}
.blog-search {
  max-width: 540px;
  margin-inline: auto;
}
.blog-search .search-form__inner {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
}

/* ── Featured hero post card ───────────────────────────────────────────── */
.post-card--hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  margin-bottom: 3rem;
  background: #fff;
}
@media (min-width: 768px) {
  .post-card--hero {
    grid-template-columns: 1fr 1fr;
  }
}
.post-card--hero .post-card__thumb-link {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
}
@media (min-width: 768px) {
  .post-card--hero .post-card__thumb-link {
    aspect-ratio: auto;
    height: 100%;
  }
}
.post-card--hero .post-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.post-card--hero:hover .post-card__thumb {
  transform: scale(1.03);
}
.post-card--hero .post-card__body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.post-card__title--hero {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
.post-card__title--hero a {
  color: #111827;
  text-decoration: none;
}
.post-card__title--hero a:hover {
  color: #09090b;
  text-decoration: underline;
}

/* ── Blog CTA strip (inside post grid) ────────────────────────────────── */
.blog-cta-strip {
  background: #09090b;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  margin-block: 2rem;
}
.blog-cta-strip__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .blog-cta-strip__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.blog-cta-strip__inner .section-eyebrow {
  color: rgba(255,255,255,.7);
  margin-bottom: 0.375rem;
}
.blog-cta-strip__inner h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}
.blog-cta-strip__inner p {
  font-size: 0.9375rem;
  color: rgba(255,255,255,.8);
  margin: 0;
  max-width: 480px;
}
.blog-cta-strip__inner .btn--primary {
  background: #fff;
  color: #09090b;
  border-color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.blog-cta-strip__inner .btn--primary:hover {
  background: #f4f4f5;
  border-color: #f4f4f5;
}

/* ── Archive search bar ────────────────────────────────────────────────── */
.archive-search {
  margin-top: 1rem;
  max-width: 480px;
}

/* ── Post grid 3-col ───────────────────────────────────────────────────── */
.post-grid--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .post-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .post-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================================
   FEATURE PAGE — New sections (Intro, Use Cases, Deep Dive,
   Integrations Strip, Related Features)
   ============================================================================= */

/* ── Feature Intro ──────────────────────────────────────────────────────────── */
.feature-intro {
  background: var(--mn-ink-0);
}
.feature-intro__inner {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .feature-intro__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}
.feature-intro__text h2 {
  font-size: var(--mn-text-3xl);
  font-weight: 700;
  color: var(--mn-ink-900);
  margin: 0 0 1rem;
}
.feature-intro__text p {
  font-size: var(--mn-text-lg);
  color: var(--mn-ink-600);
  line-height: 1.75;
  margin: 0 0 1rem;
}
.feature-intro__text p:last-child { margin-bottom: 0; }

.feature-intro__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.feature-intro__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--mn-text-base);
  color: var(--mn-ink-700);
  font-weight: 500;
  line-height: 1.5;
}
.feature-intro__list li svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--mn-positive);
}

/* ── Use Cases ──────────────────────────────────────────────────────────────── */
.use-cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) {
  .use-cases__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .use-cases__grid { grid-template-columns: repeat(3, 1fr); }
}
.use-case-card {
  background: var(--mn-ink-0);
  border: 1px solid var(--mn-ink-200);
  border-radius: 1rem;
  padding: 1.75rem;
  transition: box-shadow .2s, transform .2s;
}
.use-case-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.use-case-card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.875rem;
}
.use-case-card__persona {
  font-size: var(--mn-text-base);
  font-weight: 700;
  color: var(--mn-ink-900);
  margin: 0 0 0.625rem;
}
.use-case-card__desc {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  line-height: 1.7;
  margin: 0;
}

/* ── Deep Dive ──────────────────────────────────────────────────────────────── */
.deep-dive__articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .deep-dive__articles { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.deep-dive__item {
  border-left: 3px solid var(--mn-primary);
  padding-left: 1.25rem;
}
.deep-dive__item-title {
  font-size: var(--mn-text-lg);
  font-weight: 700;
  color: var(--mn-ink-900);
  margin: 0 0 0.75rem;
  line-height: 1.4;
}
.deep-dive__item-body {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  line-height: 1.8;
  margin: 0;
}

/* ── Integrations Strip ─────────────────────────────────────────────────────── */
.integrations-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}
.integration-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--mn-ink-0);
  border: 1px solid var(--mn-ink-200);
  border-radius: 2rem;
  padding: 0.5rem 1.125rem;
  font-size: var(--mn-text-sm);
  font-weight: 600;
  color: var(--mn-ink-800);
  transition: border-color .2s, box-shadow .2s;
}
.integration-chip:hover {
  border-color: var(--mn-primary);
  box-shadow: 0 0 0 3px var(--mn-primary-light);
}
.integration-chip__icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* ── Related Features ───────────────────────────────────────────────────────── */
/* .related-features uses existing .features__grid and .feature-card styles from front-page section */

/* =============================================================================
   FEATURES OVERVIEW PAGE (/features/)
   ============================================================================= */

/* ── Page Hero — features variant ──────────────────────────────────────────── */
.page-hero--features {
  background: linear-gradient(135deg, var(--mn-primary-light) 0%, #f0f4ff 100%);
  padding: 5rem 0 4rem;
  text-align: center;
}
.page-hero__inner {
  max-width: 760px;
  margin-inline: auto;
}
.page-hero__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--mn-ink-900);
  margin: 0.5rem 0 1.25rem;
}
.page-hero__subtitle {
  font-size: var(--mn-text-lg);
  color: var(--mn-ink-600);
  line-height: 1.7;
  margin: 0 0 2rem;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.page-hero__footnote {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-500);
  margin: 0;
}

/* ── Feature Hub Cards ──────────────────────────────────────────────────────── */
.features-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) {
  .features-hub__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .features-hub__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Make the 5th card (Analytics) span to centre when in 3-col */
@media (min-width: 1024px) {
  .features-hub__grid > article:nth-child(4) { grid-column: 1 / 2; }
  .features-hub__grid > article:nth-child(5) { grid-column: 2 / 3; }
}

.feature-hub-card {
  background: var(--mn-ink-0);
  border: 1px solid var(--mn-ink-200);
  border-radius: 1rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.feature-hub-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  border-color: #a1a1aa;
  transform: translateY(-2px);
}
.feature-hub-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}
.feature-hub-card__icon {
  font-size: 2.25rem;
  line-height: 1;
}
.feature-hub-card__eyebrow {
  font-size: var(--mn-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mn-primary);
  margin: 0;
}
.feature-hub-card__title {
  font-size: var(--mn-text-lg);
  font-weight: 700;
  color: var(--mn-ink-900);
  margin: 0.25rem 0 0.5rem;
  line-height: 1.35;
}
.feature-hub-card__desc {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  line-height: 1.7;
  margin: 0 0 0.75rem;
}
.feature-hub-card__list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.feature-hub-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-700);
  line-height: 1.5;
}
.feature-hub-card__list li svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--mn-positive);
}
.feature-hub-card__link {
  align-self: flex-start;
  margin-top: auto;
}

/* ── Workflow Steps ─────────────────────────────────────────────────────────── */
.workflow-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
  position: relative;
}
@media (min-width: 768px) {
  .workflow-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .workflow-steps::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: calc(12.5% + 1rem);
    right: calc(12.5% + 1rem);
    height: 2px;
    background: var(--mn-ink-200);
    z-index: 0;
  }
}
.workflow-step {
  position: relative;
  z-index: 1;
  text-align: center;
}
.workflow-step__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.workflow-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--mn-primary);
  color: #fff;
  font-size: var(--mn-text-sm);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.workflow-step__title {
  font-size: var(--mn-text-base);
  font-weight: 700;
  color: var(--mn-ink-900);
  margin: 0 0 0.5rem;
}
.workflow-step__desc {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  line-height: 1.7;
  margin: 0;
}

/* ── SEO/GEO/AEO Pillars ────────────────────────────────────────────────────── */
.seo-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .seo-pillars { grid-template-columns: repeat(3, 1fr); }
}
.seo-pillar {
  border: 1px solid var(--mn-ink-200);
  border-radius: 1rem;
  padding: 1.75rem;
  background: var(--mn-ink-0);
}
.seo-pillar__badge {
  display: inline-block;
  font-size: var(--mn-text-xs);
  font-weight: 800;
  letter-spacing: .08em;
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  margin-bottom: 1rem;
}
.seo-pillar__badge--seo  { background: #dbeafe; color: #1d4ed8; }
.seo-pillar__badge--geo  { background: #d1fae5; color: #065f46; }
.seo-pillar__badge--aeo  { background: #ede9fe; color: #5b21b6; }
.seo-pillar__title {
  font-size: var(--mn-text-base);
  font-weight: 700;
  color: var(--mn-ink-900);
  margin: 0 0 0.625rem;
}
.seo-pillar__desc {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-600);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.seo-pillar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.seo-pillar__list li {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-700);
  padding-left: 1rem;
  position: relative;
}
.seo-pillar__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--mn-primary);
  font-weight: 700;
}

/* ── Integrations — large variant ───────────────────────────────────────────── */
.integrations-grid--large {
  gap: 1rem;
  margin-top: 2rem;
}
.integration-chip--lg {
  gap: 0.875rem;
  padding: 0.875rem 1.25rem;
  border-radius: 0.75rem;
  flex-direction: row;
  align-items: center;
}
.integration-chip--lg .integration-chip__icon { font-size: 1.75rem; }
.integration-chip--lg strong {
  display: block;
  font-size: var(--mn-text-sm);
  font-weight: 700;
  color: var(--mn-ink-900);
}
.integration-chip--lg span {
  display: block;
  font-size: var(--mn-text-xs);
  color: var(--mn-ink-500);
}
.features-integrations__export {
  text-align: center;
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-500);
  margin-top: 1.75rem;
}

/* ── Plan Comparison Table ──────────────────────────────────────────────────── */
.plan-compare-table-wrap {
  overflow-x: auto;
  margin-top: 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--mn-ink-200);
}
.plan-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mn-text-sm);
  min-width: 560px;
}
.plan-compare-table thead th {
  padding: 1rem 1.25rem;
  text-align: center;
  font-weight: 700;
  background: var(--mn-ink-50);
  color: var(--mn-ink-700);
  border-bottom: 1px solid var(--mn-ink-200);
}
.plan-compare-table thead th:first-child { text-align: left; }
.plan-compare-table__highlight {
  background: var(--mn-primary-light) !important;
  color: var(--mn-primary) !important;
}
.plan-compare-table__price {
  display: block;
  font-size: var(--mn-text-xs);
  font-weight: 500;
  color: var(--mn-primary);
  margin-top: 0.25rem;
}
.plan-compare-table tbody tr:nth-child(even) td { background: var(--mn-ink-50); }
.plan-compare-table tbody td {
  padding: 0.875rem 1.25rem;
  color: var(--mn-ink-700);
  border-bottom: 1px solid var(--mn-ink-100);
  text-align: center;
}
.plan-compare-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--mn-ink-900);
}
.plan-compare-table tfoot td {
  padding: 1rem 1.25rem;
  text-align: center;
  background: var(--mn-ink-50);
}
.plan-compare-table tfoot td:first-child { text-align: left; }

/* =============================================================================
   APP SCREEN / DASHBOARD PANEL SYSTEM  (as-* prefix)
   Used in: feature page heroes, homepage hero
   ============================================================================= */

/* ── Float animation on all screen wrappers ─────────────────────────────────── */
.feature-hero__screen,
.hero__app-preview {
  animation: mn-float 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes mn-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── Panel wrapper ───────────────────────────────────────────────────────────── */
.as-panel {
  overflow: hidden;
  animation: mn-panel-in .5s .1s ease-out both;
}
@keyframes mn-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── URL bar (sits below browser chrome dots) ───────────────────────────────── */
.as-url-bar {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.as-url-bar__addr {
  flex: 1;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 9px;
  color: #64748b;
  font-family: ui-monospace, 'Fira Code', monospace;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Panel body = sidebar + main ─────────────────────────────────────────────── */
.as-panel__body {
  display: flex;
  min-height: 230px;
}

/* ── Sidebar nav ─────────────────────────────────────────────────────────────── */
.as-panel__sidebar {
  width: 90px;
  flex-shrink: 0;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.as-nav {
  padding: 5px 7px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.as-nav--on {
  background: #f4f4f5;
  color: #09090b;
  font-weight: 700;
}

/* ── Main content area ───────────────────────────────────────────────────────── */
.as-panel__main {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
}

/* ── Label ───────────────────────────────────────────────────────────────────── */
.as-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
  line-height: 1;
}

/* ── Input row ───────────────────────────────────────────────────────────────── */
.as-input-row {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 10px;
  color: #1e293b;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

/* ── Blinking cursor ─────────────────────────────────────────────────────────── */
.as-cursor {
  display: inline-block;
  width: 1.5px;
  height: 11px;
  background: #09090b;
  vertical-align: middle;
  margin-left: 1px;
  flex-shrink: 0;
  animation: mn-blink .9s step-end infinite;
}
@keyframes mn-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Animated progress bar ───────────────────────────────────────────────────── */
.as-progress-wrap {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.as-progress-fill {
  height: 100%;
  background: #09090b;
  border-radius: 3px;
  animation: mn-progress 2.5s ease-in-out infinite alternate;
}
@keyframes mn-progress {
  from { width: 12%; }
  to   { width: 83%; }
}

/* ── Chips / badges ──────────────────────────────────────────────────────────── */
.as-chip-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}
.as-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 8.5px;
  font-weight: 700;
  background: #f4f4f5;
  color: #3f3f46;
  white-space: nowrap;
}
.as-chip--green  { background: #d1fae5; color: #059669; }
.as-chip--orange { background: #fef3c7; color: #d97706; }
.as-chip--red    { background: #fee2e2; color: #dc2626; }

/* ── Skeleton / shimmer lines ────────────────────────────────────────────────── */
.as-skeleton { display: flex; flex-direction: column; gap: 5px; }
.as-skel {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: mn-shimmer 1.8s linear infinite;
}
.as-skel--title { height: 11px; width: 72%; }
.as-skel--sm    { width: 52%; }
@keyframes mn-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Action buttons ──────────────────────────────────────────────────────────── */
.as-btn-row {
  display: flex;
  gap: 6px;
  margin-top: auto;
  flex-wrap: wrap;
}
.as-btn {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  cursor: default;
  white-space: nowrap;
  flex-shrink: 0;
}
.as-btn--p { background: #09090b; color: #fff; }
.as-btn--g { background: transparent; border: 1px solid #e2e8f0; color: #475569; }

/* ── Metric cards ────────────────────────────────────────────────────────────── */
.as-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.as-metric {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
}
.as-metric__val   { font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1; }
.as-metric__label { font-size: 8px; color: #94a3b8; margin-top: 2px; }
.as-metric__up    { font-size: 8px; color: #059669; font-weight: 600; }
.as-metric__dn    { font-size: 8px; color: #dc2626; font-weight: 600; }

/* ── Mini bar chart ──────────────────────────────────────────────────────────── */
.as-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
  padding-bottom: 1px;
  border-bottom: 1px solid #e2e8f0;
}
.as-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: #e4e4e7;
  transform-origin: bottom;
  animation: mn-bar-grow .55s ease-out both;
}
.as-bar:nth-child(1) { animation-delay: .00s; height: 38%; }
.as-bar:nth-child(2) { animation-delay: .07s; height: 54%; }
.as-bar:nth-child(3) { animation-delay: .14s; height: 44%; }
.as-bar:nth-child(4) { animation-delay: .21s; height: 68%; }
.as-bar:nth-child(5) { animation-delay: .28s; height: 58%; }
.as-bar:nth-child(6) { animation-delay: .35s; height: 80%; }
.as-bar:nth-child(7) { animation-delay: .42s; height: 96%; }
.as-bar--hi { background: #09090b; }
@keyframes mn-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── Score circles ───────────────────────────────────────────────────────────── */
.as-scores {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.as-score {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.as-score span   { font-size: 7px; font-weight: 600; margin-top: 1px; }
.as-score--good  { border-color: #059669; color: #059669; }
.as-score--mid   { border-color: #d97706; color: #d97706; }

/* ── Issues list (audit) ─────────────────────────────────────────────────────── */
.as-issues { display: flex; flex-direction: column; gap: 4px; }
.as-issue {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: #f8fafc;
  border-radius: 4px;
  border-left: 2.5px solid;
  font-size: 9px;
  color: #334155;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.as-issue--ok   { border-color: #059669; }
.as-issue--warn { border-color: #d97706; }
.as-issue--err  { border-color: #dc2626; }

/* ── Pulse dot (live indicator) ──────────────────────────────────────────────── */
.as-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #059669;
  flex-shrink: 0;
  position: relative;
  vertical-align: middle;
}
.as-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(5,150,105,.3);
  animation: mn-pulse 1.4s ease-out infinite;
}
@keyframes mn-pulse {
  0%   { transform: scale(.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Social post cards ───────────────────────────────────────────────────────── */
.as-post {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 9px 10px;
}
.as-post + .as-post { margin-top: 7px; }
.as-post__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.as-post__ava {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0077b5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.as-post__ava--x    { background: #0f172a; font-size: 10px; }
.as-post__platform  { font-size: 9px; font-weight: 700; color: #0f172a; }
.as-post__text {
  font-size: 9px;
  color: #334155;
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.as-post__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.as-post__sched { font-size: 8px; color: #94a3b8; }
.as-post__pub {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 7px;
  background: #09090b;
  color: #fff;
  border-radius: 4px;
}
.as-post__pub--live { background: #059669; }

/* ── Page sections list (page creator) ───────────────────────────────────────── */
.as-page-sections {
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 8px;
}
.as-section-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #334155;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.as-section-row:last-child { border-bottom: none; }

/* ── Screen show / hide (multi-screen carousel) ──────────────────────────────── */
.as-screen {
  display: none;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  animation: mn-screen-in .32s ease-out both;
}
.as-screen--active {
  display: flex;
}
@keyframes mn-screen-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Screen label (small title above content) ────────────────────────────────── */
.as-screen-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 1px;
}

/* ── Input row label + value parts ──────────────────────────────────────────── */
.as-input-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  margin-right: 6px;
  flex-shrink: 0;
}
.as-input-val {
  font-size: 9.5px;
  color: #1e293b;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Generation progress track (blog generator) ──────────────────────────────── */
.as-gen-track {
  height: 5px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.as-gen-bar {
  height: 100%;
  background: #09090b;
  border-radius: 3px;
  animation: mn-gen 2.8s ease-in-out infinite alternate;
}
@keyframes mn-gen {
  from { width: 28%; }
  to   { width: 90%; }
}

/* ── Blog preview block ──────────────────────────────────────────────────────── */
.as-blog-preview {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.as-blog-title {
  font-size: 10px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

/* ── Skeleton text lines ─────────────────────────────────────────────────────── */
.as-lines { display: flex; flex-direction: column; gap: 4px; }
.as-line {
  height: 7px;
  background: #e2e8f0;
  border-radius: 3px;
  width: 100%;
  animation: mn-shimmer 1.8s linear infinite;
  background-size: 200% 100%;
  background-image: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
}
.as-line--short { width: 55%; }

/* ── SEO checklist ───────────────────────────────────────────────────────────── */
.as-checklist { display: flex; flex-direction: column; gap: 4px; }
.as-check {
  font-size: 9px;
  color: #64748b;
  padding: 4px 8px;
  background: #f8fafc;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}
.as-check--done {
  color: #059669;
  border-color: #bbf7d0;
  background: #f0fdf4;
  font-weight: 600;
}

/* ── Social platform tabs ────────────────────────────────────────────────────── */
.as-platform-tabs {
  display: flex;
  gap: 4px;
}
.as-tab {
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  background: #f4f4f5;
  cursor: default;
  border: 1px solid #e4e4e7;
}
.as-tab--on {
  background: #09090b;
  color: #fff;
  border-color: #09090b;
}

/* ── Social post preview ─────────────────────────────────────────────────────── */
.as-post-preview {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.as-post-line {
  height: 7px;
  background: #cbd5e1;
  border-radius: 3px;
  width: 100%;
}
.as-post-line--short { width: 62%; }
.as-hashtags {
  font-size: 8px;
  color: #6366f1;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Schedule row ────────────────────────────────────────────────────────────── */
.as-schedule-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 5px 8px;
}
.as-schedule-icon { font-size: 11px; flex-shrink: 0; }
.as-schedule-time { font-size: 9px; color: #475569; flex: 1; }

/* ── Audit domain pill ───────────────────────────────────────────────────────── */
.as-audit-domain {
  font-size: 10px;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 5px 9px;
  font-family: ui-monospace, 'Fira Code', monospace;
}

/* ── Additional chip colour variants ─────────────────────────────────────────── */
.as-chip--dark   { background: #e4e4e7; color: #3f3f46; }
.as-chip--blue   { background: #dbeafe; color: #2563eb; }
.as-chip--purple { background: #ede9fe; color: #7c3aed; }

/* ── Additional score colour variant ────────────────────────────────────────── */
.as-score--low { border-color: #dc2626; color: #dc2626; }

/* ── Hero carousel dot indicators ───────────────────────────────────────────── */
.hero-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4d4d8;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.hero-dot--active {
  background: #09090b;
  transform: scale(1.35);
}

/* =============================================================================
   DESIGN — Minimal Clean (Option A)
   Near-black accent. Pure white. No color. No glows.
   ============================================================================= */

/* ── Hero — pure white, no gradients or orbs ─────────────────────────────────── */
.hero {
  background: #ffffff;
}

/* ── Section eyebrow — neutral uppercase pill ───────────────────────────────── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  padding: .25rem .875rem;
  border-radius: 999px;
  font-size: var(--mn-text-xs);
  font-weight: 700;
  color: #52525b;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .875rem;
}

/* ── Text gradient — solid black on homepage ────────────────────────────────── */
.text-gradient {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #09090b;
  background-clip: unset;
  color: #09090b;
}

/* ── Section title — tighter tracking ──────────────────────────────────────── */
.section-title {
  letter-spacing: -0.025em;
}

/* ── Hero title — tighter tracking ─────────────────────────────────────────── */
.hero__title {
  letter-spacing: -0.04em;
}

/* ── Primary button — solid near-black, no gradient, no glow ────────────────── */
.btn--primary {
  background: #09090b;
  border-color: #09090b;
  box-shadow: none;
}
.btn--primary:hover {
  background: #27272a;
  border-color: #27272a;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* ── Ghost button — clean neutral border ────────────────────────────────────── */
.btn--ghost {
  border: 1.5px solid #d4d4d8;
  color: #52525b;
}
.btn--ghost:hover {
  border-color: #a1a1aa;
  background: #f4f4f5;
  color: #09090b;
}

/* ── CTA banner — light grey surface, dark text ─────────────────────────────── */
.cta-banner {
  background: #f4f4f5;
}
.cta-banner__title {
  color: #09090b;
}
.cta-banner__subtitle {
  color: #52525b;
}

/* Buttons on light-grey CTA — override the dark-bg white button styles */
.cta-banner .btn--white {
  background: #09090b;
  border-color: #09090b;
  color: #fff;
}
.cta-banner .btn--white:hover {
  background: #27272a;
  border-color: #27272a;
  color: #fff;
}
.cta-banner .btn--ghost-white {
  background: transparent;
  border-color: #d4d4d8;
  color: #52525b;
}
.cta-banner .btn--ghost-white:hover {
  border-color: #a1a1aa;
  background: #e4e4e7;
  color: #09090b;
}

/* ── Blog CTA strip — same near-black ──────────────────────────────────────── */
.blog-cta-strip {
  background: #09090b;
}

/* ── Header — clean white with subtle border ────────────────────────────────── */
.site-header {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #e4e4e7;
  box-shadow: none;
}

/* ── Hero visual — no glow orb, clean shadow ────────────────────────────────── */
.hero__visual {
  position: relative;
}
.hero__visual::before {
  display: none;
}
.hero__app-preview {
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 16px 48px rgba(0,0,0,.08);
}

/* ── Feature hero — no tinted gradient ─────────────────────────────────────── */
.feature-hero {
  background: #fafafa;
}

/* ── Page hero — clean light grey ──────────────────────────────────────────── */
.page-hero {
  background: #fafafa;
}
.page-hero--features {
  background: #fafafa;
}

/* ── Section alt — flat light grey ─────────────────────────────────────────── */
.section--alt {
  background: #fafafa;
}

/* ── Feature hero visual — clean shadow only, no glow orb ──────────────────── */
.feature-hero__visual {
  position: relative;
}
.feature-hero__visual::before {
  display: none;
}
.feature-hero__screen {
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 16px 48px rgba(0,0,0,.09);
}

/* ── Step number circle — solid near-black ──────────────────────────────────── */
.step-number,
.step__number {
  background: #09090b;
  box-shadow: 0 0 0 6px #f4f4f5;
}

/* ── Badge brand — neutral grey pill ────────────────────────────────────────── */
.badge--brand {
  background: #f4f4f5;
  color: #3f3f46;
  border: 1px solid #e4e4e7;
}

/* ── Feature cards — Option A clean hover ───────────────────────────────────── */

/* Kill the gradient tint overlay that fires on hover */
.feature-card::before { display: none; }

/* Reset base hover (base rule uses var(--mn-ink-100) border which is too light) */
.feature-card {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.feature-card:hover {
  border-color: #a1a1aa !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.07) !important;
  transform: translateY(-2px);
}

/* Remove the !important indigo ring on the featured card */
.feature-card--featured {
  border-color: var(--mn-ink-200) !important;
  box-shadow: none !important;
}

/* ── Benefit cards ──────────────────────────────────────────────────────────── */
.benefit-card {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.benefit-card:hover {
  border-color: #a1a1aa;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

/* ── Feature hub cards ──────────────────────────────────────────────────────── */
.feature-hub-card {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.feature-hub-card:hover {
  border-color: #a1a1aa;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

/* ── Pricing cards redesign ─────────────────────────────────────────────────── */

/* Equal height cards — extra top padding gives badge room to breathe */
.pricing-grid {
  align-items: stretch !important;
  padding-top: 1rem !important; /* space for the absolute-positioned badge */
}
.pricing-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
/* Push features to bottom so header/price/cta stays flush */
.pricing-card__features {
  flex: 1 !important;
}

/* Tighten internal spacing — reduce the gap between card sections */
.pricing-card__header {
  margin-bottom: 0 !important;
}
.pricing-card__desc {
  margin-bottom: 0 !important;
  margin-top: .375rem;
}
.pricing-card__price-wrap {
  margin-block: 0 !important;
  padding-block: .25rem;
}

/* Card divider line */
.pricing-card__divider {
  border: none;
  border-top: 1px solid #e4e4e7;
  margin: 1rem 0 0;
}
.pricing-card__divider--featured {
  border-top-color: rgba(255,255,255,.12);
}

/* Non-featured hover */
.pricing-card:not(.pricing-card--featured):hover {
  border-color: #a1a1aa;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

/* ── Featured card — rich dark indigo/slate gradient ───────────────────────── */
/* NO overflow:hidden — badge needs to sit above the card border */
.pricing-card--featured {
  background: linear-gradient(155deg, #1e1b4b 0%, #0f172a 55%, #09090b 100%) !important;
  border: 1.5px solid rgba(99,102,241,.35) !important;
  /* inset top-stripe via box-shadow — no need for ::before + overflow:hidden */
  box-shadow:
    inset 0 3px 0 0 #818cf8,
    0 0 0 1px rgba(99,102,241,.15),
    0 20px 55px rgba(15,23,42,.45) !important;
  color: rgba(255,255,255,.9);
  position: relative;
}
.pricing-card--featured:hover {
  box-shadow:
    inset 0 3px 0 0 #818cf8,
    0 0 0 1px rgba(99,102,241,.3),
    0 28px 70px rgba(15,23,42,.55) !important;
  transform: translateY(-3px);
}
.pricing-card--featured .pricing-card__tier,
.pricing-card--featured .pricing-card__amount,
.pricing-card--featured .pricing-card__feature { color: #fff; }
.pricing-card--featured .pricing-card__period,
.pricing-card--featured .pricing-card__billing-note,
.pricing-card--featured .pricing-card__desc { color: rgba(255,255,255,.55); }

/* Featured CTA — bright white pill */
.pricing-card--featured .btn--primary,
.pricing-card--featured .btn--outline {
  background: #fff !important;
  border-color: #fff !important;
  color: #0f172a !important;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.pricing-card--featured .btn--primary:hover,
.pricing-card--featured .btn--outline:hover {
  background: #e0e7ff !important;
  border-color: #e0e7ff !important;
  transform: none;
}

/* ── Pricing badge — gradient pill, sits above card ─────────────────────────── */
.pricing-card--featured .pricing-card__badge {
  background: linear-gradient(90deg, #6366f1, #a855f7) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(99,102,241,.45);
  white-space: nowrap;
}

/* Feature check/cross colours inside featured */
.pricing-card--featured .pricing-card__feature--yes svg { color: #86efac; }
.pricing-card--featured .pricing-card__feature--no { color: rgba(255,255,255,.35); }
.pricing-card--featured .pricing-card__feature--no svg { color: rgba(255,255,255,.2); }

/* ── App preview bar — traffic light dots ───────────────────────────────────── */
.app-preview__bar span:nth-child(1) { background: #fc5753; }
.app-preview__bar span:nth-child(2) { background: #fdbc40; }
.app-preview__bar span:nth-child(3) { background: #34c749; }

/* ── FAQ items — clean card style ───────────────────────────────────────────── */
.faq-item {
  border: 1px solid var(--mn-ink-200);
  border-radius: var(--mn-radius-card);
  overflow: hidden;
  margin-bottom: .5rem;
  transition: border-color .2s;
}
.faq-item:hover {
  border-color: #71717a;
}
.faq-item__trigger {
  background: var(--mn-ink-0);
}
.faq-item__trigger:hover {
  background: #fafafa;
  color: #09090b;
}

/* ── Use case cards ─────────────────────────────────────────────────────────── */
.use-case-card {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.use-case-card:hover {
  border-color: #a1a1aa;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

/* ── Deep dive items — neutral left border ──────────────────────────────────── */
.deep-dive__item {
  border-left-color: #d4d4d8;
}

/* ── Integration chips ──────────────────────────────────────────────────────── */
.integration-chip {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.integration-chip:hover {
  border-color: #a1a1aa;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

/* ── SEO pillars — neutral grey badges ──────────────────────────────────────── */
.seo-pillar__badge--seo { background: #f4f4f5; color: #3f3f46; border: 1px solid #e4e4e7; }
.seo-pillar__badge--geo { background: #f4f4f5; color: #3f3f46; border: 1px solid #e4e4e7; }
.seo-pillar__badge--aeo { background: #f4f4f5; color: #3f3f46; border: 1px solid #e4e4e7; }

/* ── Workflow step numbers — solid near-black ───────────────────────────────── */
.workflow-step__num {
  background: #09090b;
  box-shadow: 0 0 0 4px #f4f4f5;
}

/* ── Post cards ─────────────────────────────────────────────────────────────── */
.post-card {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.post-card:hover {
  border-color: #a1a1aa;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

/* ── Key takeaways — solid dark left border ─────────────────────────────────── */
.key-takeaways {
  border-left: 4px solid #09090b;
  border-image: none;
}

/* ── Reading progress bar — solid dark fill ─────────────────────────────────── */
#reading-progress-bar {
  background: rgba(0,0,0,.04);
}
.reading-progress__fill {
  background: #09090b;
}

/* =============================================================================
   UI POLISH — Features & Pricing pages
   ============================================================================= */

/* ── Feature hub card icon — styled box ─────────────────────────────────────── */
.feature-hub-card__icon {
  width: 48px;
  height: 48px;
  background: #f4f4f5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Feature hub eyebrow — muted dark, not primary ──────────────────────────── */
.feature-hub-card__eyebrow {
  color: #71717a;
  font-size: 0.7rem;
  letter-spacing: .08em;
}

/* ── Featured feature card — top accent stripe ──────────────────────────────── */
.feature-hub-card:has(.badge--brand) {
  border-top: 2.5px solid #09090b;
}

/* ── Feature hub "Learn more" link — stronger contrast ─────────────────────── */
.feature-hub-card__link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #09090b;
  border-color: #d4d4d8;
}
.feature-hub-card__link:hover {
  border-color: #09090b;
  background: #09090b;
  color: #fff;
}

/* ── SEO / GEO / AEO pillars — colored top border + distinct badges ─────────── */
.seo-pillar:nth-child(1) { border-top: 3px solid #09090b; }
.seo-pillar:nth-child(2) { border-top: 3px solid #16a34a; }
.seo-pillar:nth-child(3) { border-top: 3px solid #ea580c; }

.seo-pillar__badge--seo { background: #09090b;    color: #fff;    border: none; }
.seo-pillar__badge--geo { background: #f0fdf4;    color: #15803d; border: 1px solid #bbf7d0; }
.seo-pillar__badge--aeo { background: #fff7ed;    color: #c2410c; border: 1px solid #fed7aa; }

/* ── Workflow steps — connecting line neutral grey ──────────────────────────── */
.workflow-steps::before { background: #e4e4e7; }

/* ── Features-hub grid — 5th card centers on 3-col ─────────────────────────── */
@media (min-width: 1024px) {
  .features-hub__grid > article:nth-child(4) { grid-column: auto; }
  .features-hub__grid > article:nth-child(5) { grid-column: auto; }
  .features-hub__grid {
    /* center the odd bottom row */
    grid-template-columns: repeat(3, 1fr);
  }
  .features-hub__grid > article:nth-child(4),
  .features-hub__grid > article:nth-child(5) {
    /* shift bottom 2 to appear centered under the top 3 */
    grid-column: auto;
  }
}

/* ── Pricing card base typography ───────────────────────────────────────────── */
.pricing-card__tier {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.pricing-card__amount {
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
}

/* ── Comparison table — full redesign ──────────────────────────────────────── */
.comparison-table-wrap {
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  overflow: hidden;        /* clips border-radius corners */
  overflow-x: auto;        /* allows horizontal scroll on mobile */
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
}
.comparison-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

/* Column widths */
.comparison-table .ct-feature-col {
  width: 38%;
  text-align: left;
}
.comparison-table .ct-val-col {
  width: 20.67%;
  text-align: center;
}

/* All cells */
.comparison-table th,
.comparison-table td {
  padding: .875rem 1.25rem;
  font-size: .875rem;
  border-bottom: 1px solid #f0f0f2;
}

/* Header row */
.comparison-table thead th {
  background: #f4f4f5;
  color: #71717a;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid #e4e4e7;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.comparison-table thead .ct-feature-col {
  color: #a1a1aa;
}

/* Featured header cell */
.comparison-table thead .comparison-table__featured {
  background: #eef2ff;
  color: #3730a3;
  position: relative;
}
.ct-featured-label {
  display: block;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #1e1b4b;
  text-transform: none;
  margin-bottom: .25rem;
}
.ct-featured-badge {
  display: inline-block;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .15rem .55rem;
  border-radius: 9999px;
}

/* Body rows */
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.comparison-table tbody tr:nth-child(odd) td {
  background: #fff;
}
.comparison-table tbody tr:nth-child(even) td {
  background: #fafafa;
}
.comparison-table tbody tr:hover td {
  background: #f4f4f5;
}
.comparison-table tbody tr:hover .comparison-table__featured {
  background: rgba(99,102,241,.08);
}

/* Feature label column */
.comparison-table tbody .ct-feature-col {
  font-weight: 500;
  color: #18181b;
}

/* Featured body column */
.comparison-table tbody .comparison-table__featured {
  background: rgba(99,102,241,.04);
  border-left: 1px solid rgba(99,102,241,.12);
  border-right: 1px solid rgba(99,102,241,.12);
}
.comparison-table tbody tr:nth-child(even) .comparison-table__featured {
  background: rgba(99,102,241,.07);
}

/* SVG icon colours */
.ct-icon { display: inline-block; vertical-align: middle; }
.ct-icon--yes { color: #16a34a; }
.ct-icon--no  { color: #d1d5db; }

/* Text values */
.ct-text {
  font-size: .825rem;
  color: #3f3f46;
  font-weight: 500;
}
.comparison-table__featured .ct-icon--yes { color: #6366f1; }
.comparison-table__featured .ct-text      { color: #1e1b4b; font-weight: 600; }

/* ── Integrations Strip ─────────────────────────────────────────────────────── */
.integrations-strip {
  padding-block: 2.25rem;
  border-top: 1px solid #f0f0f2;
  border-bottom: 1px solid #f0f0f2;
  background: #fafafa;
}
.integrations-strip__label {
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #a1a1aa;
  margin-bottom: 1.25rem;
}
.integrations-strip__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 1.25rem;
}
.int-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  opacity: .75;
  transition: opacity .2s ease, transform .2s ease;
  width: 90px;
}
.int-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.int-logo__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.int-logo__icon--text {
  line-height: 1;
}
.int-logo__name {
  font-size: .72rem;
  font-weight: 600;
  color: #71717a;
  white-space: nowrap;
}

/* ── Recent Posts Section ───────────────────────────────────────────────────── */
.recent-posts__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.recent-posts__header .section-title { margin-bottom: 0; }
.recent-posts__all-link { flex-shrink: 0; }
.recent-posts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .recent-posts__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .recent-posts__grid { grid-template-columns: repeat(3, 1fr); }
}
.rp-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.rp-card:hover {
  border-color: #a1a1aa;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  transform: translateY(-3px);
}
.rp-card__img-wrap {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.rp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.rp-card:hover .rp-card__img { transform: scale(1.04); }
.rp-card__body {
  padding: 1.25rem 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.rp-card__cat {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6366f1;
}
.rp-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: #09090b;
  margin: 0;
}
.rp-card__title a {
  color: inherit;
  text-decoration: none;
}
.rp-card__title a:hover { color: #6366f1; }
.rp-card__excerpt {
  font-size: .875rem;
  color: #52525b;
  line-height: 1.6;
  flex: 1;
}
.rp-card__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .25rem;
}
.rp-card__date,
.rp-card__read-time {
  font-size: .75rem;
  color: #a1a1aa;
}
.rp-card__date::after {
  content: '·';
  margin-left: .75rem;
}

/* ── Trustpilot Reviews Section ─────────────────────────────────────────────── */
.reviews-section__header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.reviews-section__header .section-subtitle {
  margin-inline: auto;
  text-align: center;
}
.reviews-section__header .section-title {
  text-align: center;
}
.reviews-tp-brand {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1rem;
}
.reviews-tp-wordmark {
  font-size: 1.1rem;
  font-weight: 800;
  color: #191919;
  letter-spacing: -.01em;
}
.reviews-overall {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
.reviews-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.reviews-overall__score {
  font-size: 1.25rem;
  font-weight: 800;
  color: #191919;
}
.reviews-overall__label {
  font-size: .875rem;
  color: #71717a;
}
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 860px;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
}
.review-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.review-card:hover {
  border-color: #a1a1aa;
  box-shadow: 0 6px 24px rgba(0,0,0,.07);
}
.review-card__top {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #09090b;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-card__name {
  font-size: .9375rem;
  font-weight: 700;
  color: #09090b;
  line-height: 1.2;
}
.review-card__meta {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .15rem;
}
.review-card__country {
  font-size: .8rem;
}
.review-card__verified {
  font-size: .72rem;
  font-weight: 600;
  color: #00B67A;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 4px;
  padding: .05rem .35rem;
}
.review-card__tp-icon {
  margin-left: auto;
  opacity: .7;
}
.review-card__stars {
  display: flex;
  gap: 2px;
}
.review-card__text {
  font-size: .9375rem;
  line-height: 1.7;
  color: #3f3f46;
  flex: 1;
}
.review-card__date {
  font-size: .8rem;
  color: #a1a1aa;
}
.reviews-section__footer {
  text-align: center;
  margin-top: 2rem;
}
.reviews-tp-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  font-weight: 600;
  color: #3f3f46;
  text-decoration: none;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  padding: .5rem 1.25rem;
  transition: border-color .2s ease, color .2s ease;
}
.reviews-tp-link:hover {
  border-color: #00B67A;
  color: #00B67A;
}

/* ── Trust items — bordered cards ───────────────────────────────────────────── */
.trust-item {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.trust-item:hover {
  border-color: #a1a1aa;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.trust-item__icon {
  width: 44px;
  height: 44px;
  background: #f4f4f5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  margin: 0 0 1rem;
}

/* ── Features page hero — 2-col layout ─────────────────────────────────────── */
.fh-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding-block: 3rem 2.5rem;
}
@media (min-width: 640px) {
  .fh-hero__inner {
    gap: 2.5rem;
    padding-block: 4rem 3rem;
  }
}
@media (min-width: 1024px) {
  .fh-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding-block: 6rem 5rem;
  }
}

/* Left column */
.fh-hero__content {
  max-width: 540px;
}
.fh-hero__content .page-hero__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.fh-hero__content .page-hero__subtitle {
  font-size: 1.05rem;
  color: #52525b;
  margin-bottom: 2rem;
}

/* Right column — visual wrapper */
.fh-hero__visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.fh-hero__visual .hero__app-preview {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
  border: 1px solid #e4e4e7;
  animation: mn-float 5s ease-in-out infinite;
}

/* Override page-hero default centering — fh-hero__content is always left-aligned */
.fh-hero__content {
  text-align: left;
}
/* On mobile single-column layout, remove the max-width cap so text fills container */
@media (max-width: 1023px) {
  .fh-hero__content {
    max-width: none;
  }
}
.fh-hero__content .page-hero__actions {
  justify-content: flex-start;
}
.fh-hero__content .page-hero__footnote {
  text-align: left;
}

/* Metrics row inside features hero panel */
.as-metrics {
  display: flex;
  gap: 1rem;
  margin-bottom: .75rem;
}
.as-metric {
  flex: 1;
  background: #f4f4f5;
  border-radius: 6px;
  padding: .5rem .625rem;
}
.as-metric__val {
  font-size: .95rem;
  font-weight: 700;
  color: #09090b;
  line-height: 1.2;
}
.as-metric__label {
  font-size: .65rem;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1px;
}
.as-metric__up {
  font-size: .65rem;
  font-weight: 600;
  color: #16a34a;
  margin-top: 2px;
}

/* Score circles */
.as-scores {
  display: flex;
  gap: .5rem;
  margin: .625rem 0;
}
.as-score {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.1;
  border: 2px solid currentColor;
}
.as-score span {
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.as-score--good  { color: #16a34a; }
.as-score--mid   { color: #d97706; }
.as-score--amber { color: #d97706; }

/* Bar chart */
.as-chart,
.as-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  margin-top: .625rem;
}
.as-bar {
  flex: 1;
  background: #e4e4e7;
  border-radius: 2px 2px 0 0;
  min-height: 6px;
}

/* Status chips row */
.as-chip-row,
.as-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .625rem;
}
.as-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6rem;
  font-weight: 500;
  padding: .2rem .45rem;
  border-radius: 4px;
  background: #f4f4f5;
  color: #3f3f46;
  border: 1px solid #e4e4e7;
}
.as-chip--green {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.as-chip--green .as-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: mn-pulse 1.6s ease-in-out infinite;
}

/* as-label utility */
.as-label {
  font-size: .65rem;
  color: #71717a;
  margin: 0 0 4px;
}

/* On mobile the panel stacks below the text — make it full-width and centered */
@media (max-width: 1023px) {
  .fh-hero__visual {
    width: 100%;
    justify-content: center;
  }
  .fh-hero__visual .hero__app-preview {
    max-width: 100%;
    animation: none; /* disable float on mobile to save perf */
  }
}

/* =============================================================================
   ABOUT PAGE
   ============================================================================= */

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.about-hero {
  padding-block: 5rem 4rem;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.about-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .about-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
  }
}

/* ── Image / placeholder ────────────────────────────────────────────────────── */
.about-hero__visual {
  order: 1; /* below text on mobile */
}
@media (min-width: 900px) {
  .about-hero__visual {
    order: -1; /* image on left on desktop */
  }
}
.about-hero__img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  box-shadow: 0 16px 48px rgba(0,0,0,.1);
  display: block;
}

/* CSS placeholder when no featured image is set */
.about-hero__placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, #f8f8ff 0%, #f0f0f8 100%);
  border-radius: 20px;
  border: 1px solid #e4e4e7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Centre card */
.ahp-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  text-align: center;
  min-width: 200px;
  z-index: 2;
}
.ahp-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .875rem;
}
.ahp-card__wordmark {
  font-weight: 800;
  font-size: 1.1rem;
  color: #09090b;
  letter-spacing: -.02em;
}
.ahp-card__tagline {
  font-size: .8rem;
  color: #71717a;
  line-height: 1.5;
  margin-bottom: .875rem;
}
.ahp-card__pills {
  display: flex;
  justify-content: center;
  gap: .375rem;
  margin-bottom: .75rem;
}
.ahp-card__pills span {
  font-size: .7rem;
  font-weight: 700;
  background: #f4f4f5;
  color: #3f3f46;
  padding: .2rem .55rem;
  border-radius: 9999px;
  letter-spacing: .04em;
}
.ahp-card__channels {
  display: flex;
  justify-content: center;
  gap: .5rem;
}
.ahp-card__channels span {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: #09090b;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Floating stat chips */
.ahp-float {
  position: absolute;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  padding: .6rem .875rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: #18181b;
  box-shadow: 0 4px 16px rgba(0,0,0,.07);
  white-space: nowrap;
  z-index: 3;
}
.ahp-float__num { font-size: 1rem; font-weight: 800; color: #09090b; line-height: 1; }
.ahp-float__lbl { font-size: .68rem; color: #71717a; font-weight: 500; }
.ahp-float__icon { font-size: 1.1rem; }
.ahp-float--tools   { top: 14%; left: 6%; }
.ahp-float--country { bottom: 16%; left: 4%; font-size: .8rem; gap: .4rem; }
.ahp-float--publish { top: 14%; right: 5%; }

/* Hide floating chips on very small screens — they overlap at <480px */
@media (max-width: 479px) {
  .ahp-float { display: none; }
}

/* .about-hero__content — text column, no max-width cap needed in 2-col layout */
.about-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 1rem 0 1.25rem;
}
.about-hero__subtitle {
  font-size: 1.15rem;
  color: #52525b;
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 2rem;
}
.about-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}
.about-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  font-weight: 600;
  padding: .3rem .75rem;
  border-radius: 9999px;
  background: #f4f4f5;
  color: #3f3f46;
  border: 1px solid #e4e4e7;
  letter-spacing: .01em;
}

/* ── Origin story — 2-col ───────────────────────────────────────────────────── */
.about-origin__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .about-origin__grid {
    grid-template-columns: 5fr 7fr;
    gap: 5rem;
  }
}
.about-origin__quote {
  position: static;
}
@media (min-width: 900px) {
  .about-origin__quote {
    position: sticky;
    top: calc(var(--mn-header-h) + 2rem);
  }
}
.about-origin__quote blockquote {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  color: #09090b;
  line-height: 1.4;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
  padding: 0;
  border: none;
}
.about-origin__quote blockquote::before {
  content: '\201C';
  display: block;
  font-size: 4rem;
  line-height: .8;
  color: #e4e4e7;
  font-family: Georgia, serif;
  margin-bottom: .5rem;
}
.about-origin__quote cite {
  font-size: .875rem;
  font-style: normal;
  color: #71717a;
  font-weight: 500;
}
.about-origin__story .section-eyebrow {
  margin-bottom: .5rem;
}
.about-origin__story h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.02em;
  margin: .25rem 0 1.5rem;
}
.about-origin__story p {
  color: #52525b;
  line-height: 1.8;
  margin-bottom: 1.25rem;
  font-size: 1rem;
}
.about-origin__story p:last-child { margin-bottom: 0; }
.about-origin__story strong { color: #09090b; font-weight: 600; }

/* ── Stats strip ────────────────────────────────────────────────────────────── */
.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #e4e4e7;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .about-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.about-stat {
  background: #fff;
  padding: 2rem 1.5rem;
  text-align: center;
}
.about-stat__num {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 900;
  color: #09090b;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .5rem;
}
.about-stat__label {
  font-size: .8125rem;
  color: #71717a;
  line-height: 1.4;
  font-weight: 500;
}

/* ── Values ─────────────────────────────────────────────────────────────────── */
.about-values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px)  { .about-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .about-values__grid { grid-template-columns: repeat(4, 1fr); } }

.about-value-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  padding: 1.75rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.about-value-card:hover {
  border-color: #a1a1aa;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  transform: translateY(-2px);
}
.about-value-card__icon {
  width: 46px;
  height: 46px;
  background: #f4f4f5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  line-height: 1;
  margin-bottom: 1rem;
}
.about-value-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #09090b;
  margin: 0 0 .625rem;
  line-height: 1.35;
}
.about-value-card p {
  font-size: .875rem;
  color: #52525b;
  line-height: 1.7;
  margin: 0;
}

/* ── Made in India ──────────────────────────────────────────────────────────── */
.about-india__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.about-india__flag {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 1.25rem;
}
.about-india__inner h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0 0 1.25rem;
}
.about-india__inner p {
  font-size: 1.05rem;
  color: #52525b;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.about-india__detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}
.about-india__detail span {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 500;
  color: #3f3f46;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  padding: .3rem .875rem;
}
.about-india__detail span::before {
  content: '✓';
  font-weight: 700;
  color: #16a34a;
}

/* =============================================================================
   CONTACT PAGE
   ============================================================================= */

/* ── Page intro ─────────────────────────────────────────────────────────────── */
.contact-intro {
  padding-block: 4.5rem 2rem;
  background: #fff;
}
.contact-intro__inner {
  max-width: 600px;
}
.contact-intro__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: .75rem 0 1rem;
}
.contact-intro__subtitle {
  font-size: 1.1rem;
  color: #52525b;
  line-height: 1.6;
}

/* ── Main 2-col layout ──────────────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 860px) {
  .contact-layout {
    grid-template-columns: 340px 1fr;
    gap: 4rem;
  }
}

/* ── Left sidebar — info & channels ─────────────────────────────────────────── */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-channel {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-channel:hover {
  border-color: #a1a1aa;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.contact-channel__icon {
  width: 40px;
  height: 40px;
  background: #f4f4f5;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #09090b;
}
.contact-channel h3 {
  font-size: .875rem;
  font-weight: 700;
  color: #09090b;
  margin: 0 0 .25rem;
}
.contact-channel a {
  font-size: .9rem;
  color: #09090b;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid #e4e4e7;
  transition: border-color .15s ease;
}
.contact-channel a:hover { border-bottom-color: #09090b; }
.contact-channel p {
  font-size: .875rem;
  color: #52525b;
  margin: 0;
  line-height: 1.5;
}
.contact-channel p span {
  font-size: .75rem;
  color: #a1a1aa;
}
.contact-channel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.contact-channel ul li {
  font-size: .875rem;
  color: #52525b;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.contact-channel ul li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a1a1aa;
  flex-shrink: 0;
}

/* Social links */
.contact-social {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
}
.contact-social p {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #a1a1aa;
  margin: 0 0 .75rem;
}
.contact-social__links {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}
.contact-social__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #3f3f46;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  padding: .5rem .875rem;
  min-height: 44px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.contact-social__link:hover {
  background: #09090b;
  border-color: #09090b;
  color: #fff;
}

/* ── Right side — form card ──────────────────────────────────────────────────── */
.contact-form-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  padding: 2.25rem;
}
.contact-form-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.015em;
  margin: 0 0 .375rem;
}
.contact-form-card__sub {
  font-size: .9rem;
  color: #71717a;
  margin: 0 0 1.75rem;
}

/* 2-col row for name + email */
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 560px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

/* Select input */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Form submission notices */
.contact-notice {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .875rem 1rem;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.contact-notice svg { flex-shrink: 0; margin-top: 2px; }
.contact-notice--success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.contact-notice--error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.contact-notice--error a { color: inherit; font-weight: 600; }

/* Privacy note under submit */
.contact-form__note {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: #a1a1aa;
  margin: .875rem 0 0;
}
.contact-form__note svg { flex-shrink: 0; color: #a1a1aa; }

/* =============================================================================
   FEATURE PAGE — INTRO SECTION & BENEFIT CARDS ENHANCEMENT
   ============================================================================= */

/* ── Intro title — larger, bolder ───────────────────────────────────────────── */
.feature-intro__title {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: .5rem 0 1.5rem;
}

/* ── Lead paragraph — larger, more prominent ────────────────────────────────── */
.feature-intro__lead {
  font-size: 1.075rem;
  color: #3f3f46;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  font-weight: 450;
}

/* ── Body paragraphs — normal ───────────────────────────────────────────────── */
.feature-intro__body {
  font-size: .9375rem;
  color: #52525b;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.feature-intro__body:last-child { margin-bottom: 0; }

/* ── Bullets wrapper ────────────────────────────────────────────────────────── */
.feature-intro__bullets-wrap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.feature-intro__bullets-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #a1a1aa;
  margin: 0;
}

/* ── Bullet list — 2-col grid of mini-cards ─────────────────────────────────── */
.feature-intro__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 480px) {
  .feature-intro__list { grid-template-columns: 1fr 1fr; }
}

/* ── Each bullet — card row ─────────────────────────────────────────────────── */
.fi-bullet {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem .875rem;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.fi-bullet:hover {
  border-color: #a1a1aa;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* ── Bullet icon box — green-tinted ─────────────────────────────────────────── */
.fi-bullet__icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  background: #f0fdf4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  margin-top: 1px;
}

/* ── Bullet text — bold title + muted description ───────────────────────────── */
.fi-bullet__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fi-bullet__text strong {
  font-size: .8125rem;
  font-weight: 700;
  color: #09090b;
  line-height: 1.35;
}
.fi-bullet__text span {
  font-size: .72rem;
  color: #71717a;
  line-height: 1.45;
}

/* ── Benefit card icon — styled box, not raw emoji ──────────────────────────── */
.benefit-card__icon-wrap {
  width: 48px;
  height: 48px;
  background: #f4f4f5;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .875rem;
  flex-shrink: 0;
}
.benefit-card__icon {
  font-size: 1.375rem;
  line-height: 1;
  margin-bottom: 0; /* override old margin */
}

/* ── Benefit card title — tighter ───────────────────────────────────────────── */
.benefit-card__title {
  font-size: .9375rem;
  font-weight: 700;
  color: #09090b;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin-bottom: .5rem;
}

/* ── Benefit card border — slightly more visible at rest ─────────────────────── */
.benefit-card {
  border-color: #e4e4e7;
}

/* =============================================================================
   BLOG HOME PAGE
   ============================================================================= */

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.blog-hero {
  background: #fafafa;
  border-bottom: 1px solid #ebebeb;
  padding-block: 4rem 0;
}

/* Centered text + search block */
.blog-hero__center {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  padding-bottom: 2.75rem;
}

/* Eyebrow — simple pill */
.blog-hero__eyebrow {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #71717a;
  background: #fff;
  border: 1px solid #e4e4e7;
  padding: .25rem .875rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.blog-hero__title {
  font-size: clamp(2rem, 4.5vw, 3.125rem);
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.035em;
  line-height: 1.12;
  margin: 0 0 1rem;
}
.blog-hero__br { display: none; }
@media (min-width: 560px) { .blog-hero__br { display: block; } }

.blog-hero__sub {
  font-size: 1rem;
  color: #52525b;
  line-height: 1.72;
  max-width: 560px;
  margin: 0 auto 1.75rem;
}

/* Search bar — centered, wide */
.blog-hero__search {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
.blog-hero__search .search-form__inner {
  border-radius: 12px;
  border: 1.5px solid #e4e4e7;
  overflow: hidden;
  display: flex;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.blog-hero__search .search-form__inner:focus-within {
  border-color: #09090b;
  box-shadow: 0 0 0 3px rgba(9,9,11,.08);
}
.blog-hero__search .search-form__input {
  flex: 1;
  border: none;
  border-radius: 0;
  padding: .875rem 1rem;
  font-size: .9375rem;
  color: #09090b;
  background: transparent;
}
.blog-hero__search .search-form__input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.blog-hero__search .search-form__btn {
  border-radius: 0;
  background: #09090b;
  color: #fff;
  padding: .875rem 1.125rem;
  display: flex;
  align-items: center;
  border: none;
  cursor: pointer;
  transition: background .15s ease;
}
.blog-hero__search .search-form__btn:hover { background: #27272a; }

/* Category pills row inside hero */
.blog-hero__cats {
  border-top: 1px solid #ebebeb;
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  margin-top: 0;
  justify-content: center;
  gap: .5rem;
}
.blog-hero__cats .category-pill {
  background: #fff;
  border-color: #e4e4e7;
  font-size: .75rem;
  font-weight: 600;
}
.blog-hero__cats .category-pill:hover,
.blog-hero__cats .category-pill--active {
  background: #09090b;
  color: #fff;
  border-color: #09090b;
}

/* ── Body wrapper ───────────────────────────────────────────────────────────── */
.blog-body {
  padding-block: 3rem 4rem;
}

/* ── Section labels (Featured / Latest articles) ────────────────────────────── */
.blog-section-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.blog-section-head--spaced {
  margin-top: 3rem;
}
.blog-section-head__label {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #09090b;
  white-space: nowrap;
}
.blog-section-head__line {
  flex: 1;
  height: 1px;
  background: #e4e4e7;
}

/* ── Featured post card ─────────────────────────────────────────────────────── */
.blog-featured-card {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
@media (min-width: 768px) {
  .blog-featured-card {
    grid-template-columns: 1.1fr 1fr;
  }
}
.blog-featured-card:hover {
  border-color: #a1a1aa;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.blog-featured-card__img-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/9;
}
@media (min-width: 768px) {
  .blog-featured-card__img-wrap {
    aspect-ratio: auto;
    min-height: 320px;
  }
}
.blog-featured-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.blog-featured-card:hover .blog-featured-card__img {
  transform: scale(1.04);
}
.blog-featured-card__body {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .875rem;
}
.blog-featured-card__meta-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.blog-featured-card__read-time {
  font-size: .75rem;
  color: #a1a1aa;
  font-weight: 500;
}
.blog-featured-card__title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.025em;
  line-height: 1.25;
  margin: 0;
}
.blog-featured-card__title a {
  color: inherit;
  text-decoration: none;
}
.blog-featured-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-featured-card__excerpt {
  font-size: .9375rem;
  color: #52525b;
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-featured-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: .75rem;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}
.blog-featured-card__author {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.blog-featured-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.blog-featured-card__author-name {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: #09090b;
  line-height: 1.3;
}
.blog-featured-card__date {
  display: block;
  font-size: .75rem;
  color: #a1a1aa;
}
.blog-featured-card__cta {
  font-size: .8125rem;
}

/* Badge variant — outline */
.badge--outline {
  background: transparent;
  border: 1px solid #e4e4e7;
  color: #3f3f46;
  font-size: .6875rem;
  font-weight: 700;
  padding: .2rem .625rem;
  border-radius: 9999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: border-color .15s ease, color .15s ease;
}
.badge--outline:hover {
  border-color: #09090b;
  color: #09090b;
}

/* ── Post grid ──────────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 600px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Post card ──────────────────────────────────────────────────────────────── */
.blog-post-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.blog-post-card:hover {
  border-color: #a1a1aa;
  box-shadow: 0 8px 28px rgba(0,0,0,.07);
  transform: translateY(-2px);
}
.blog-post-card__img-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.blog-post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-post-card:hover .blog-post-card__img {
  transform: scale(1.04);
}
.blog-post-card__body {
  padding: 1.25rem 1.375rem 1.375rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
}
.blog-post-card__meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-post-card__cat {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #09090b;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.blog-post-card__cat:hover { border-bottom-color: #09090b; }
.blog-post-card__read-time {
  font-size: .7rem;
  color: #a1a1aa;
  font-weight: 500;
}
.blog-post-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #09090b;
  letter-spacing: -.015em;
  line-height: 1.35;
  margin: 0;
}
.blog-post-card__title a {
  color: inherit;
  text-decoration: none;
}
.blog-post-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-post-card__excerpt {
  font-size: .8125rem;
  color: #71717a;
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.blog-post-card__footer {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  color: #a1a1aa;
  padding-top: .75rem;
  border-top: 1px solid #f4f4f5;
  margin-top: auto;
  flex-wrap: wrap;
}
.blog-post-card__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.blog-post-card__author {
  font-weight: 600;
  color: #52525b;
}
.blog-post-card__sep { color: #d4d4d8; }

/* ── CTA strip ──────────────────────────────────────────────────────────────── */
.blog-cta-strip {
  background: #09090b;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  margin-block: 2.5rem;
}
.blog-cta-strip__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  max-width: 960px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .blog-cta-strip__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.blog-cta-strip__eyebrow {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  margin: 0 0 .5rem;
}
.blog-cta-strip__title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0 0 .625rem;
}
.blog-cta-strip__desc {
  font-size: .9rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  margin: 0;
  max-width: 480px;
}
.blog-cta-strip__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .625rem;
}
@media (min-width: 768px) {
  .blog-cta-strip__actions { align-items: center; }
}
.blog-cta-strip__note {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  margin: 0;
  text-align: center;
}

/* ── Pagination ─────────────────────────────────────────────────────────────── */
.blog-pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.blog-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-pagination ul a,
.blog-pagination ul span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: .25rem .75rem;
  border-radius: 9px;
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid #e4e4e7;
  color: #3f3f46;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.blog-pagination ul a:hover {
  background: #f4f4f5;
  border-color: #a1a1aa;
  color: #09090b;
}
.blog-pagination ul .current span {
  background: #09090b;
  color: #fff;
  border-color: #09090b;
}

/* =============================================================================
   LEGAL PAGES  (template-legal.php)
   ============================================================================= */

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.legal-hero {
  background: linear-gradient(165deg, var(--mn-primary-light, #f4f4f5) 0%, var(--mn-ink-0, #fff) 60%);
  border-bottom: 1px solid #e4e4e7;
  padding-block: 2rem 2.25rem;
}
.legal-hero .breadcrumbs { margin-bottom: 1.5rem; }

.legal-hero__inner {
  max-width: 740px;       /* match .legal-wrap width exactly */
  margin-inline: auto;   /* center block same as content */
  text-align: left;      /* left-align text, matching prose below */
}

.legal-hero__eyebrow {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #71717a;
  margin-bottom: .875rem;
}
.legal-hero__title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.035em;
  line-height: 1.12;
  margin: 0 0 1.25rem;
}
.legal-hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
}
.legal-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .75rem;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 999px;
  font-size: .75rem;
  color: #52525b;
  white-space: nowrap;
}
.legal-chip svg { flex-shrink: 0; color: #a1a1aa; }
.legal-chip--link {
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.legal-chip--link:hover {
  border-color: #09090b;
  color: #09090b;
}

/* ── Outer wrapper ───────────────────────────────────────────────────────────── */
.legal-wrap {
  max-width: 740px;
  margin-inline: auto;
  padding-block: 2.5rem 4rem;
}

/* ── Article ─────────────────────────────────────────────────────────────────── */
.legal-doc {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin-top: 0;
}

/* ── Body prose ──────────────────────────────────────────────────────────────── */
.legal-doc__body {
  font-size: .9375rem;
  line-height: 1.72;
  color: #3f3f46;
}

/* H2 — section divider */
.legal-doc__body h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #09090b;
  letter-spacing: -.02em;
  margin: 1.75rem 0 .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #f0f0f0;
  scroll-margin-top: calc(var(--mn-header-h, 68px) + 1rem);
}
.legal-doc__body h2:first-of-type {
  margin-top: 0;
}

/* H3 */
.legal-doc__body h3 {
  font-size: .9375rem;
  font-weight: 700;
  color: #09090b;
  margin: 1.125rem 0 .375rem;
  scroll-margin-top: calc(var(--mn-header-h, 68px) + 1rem);
}

/* H4 */
.legal-doc__body h4 {
  font-size: .875rem;
  font-weight: 600;
  color: #27272a;
  margin: .875rem 0 .25rem;
}

/* Paragraphs */
.legal-doc__body p {
  margin: 0 0 .625rem;
}
.legal-doc__body p:last-child { margin-bottom: 0; }

/* Links */
.legal-doc__body a {
  color: #09090b;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #d4d4d8;
  transition: text-decoration-color .15s ease;
}
.legal-doc__body a:hover { text-decoration-color: #09090b; }

/* Lists — cleaner custom markers */
.legal-doc__body ul,
.legal-doc__body ol {
  padding-left: 1.25rem;
  margin: .375rem 0 .625rem;
}
.legal-doc__body ul { list-style: none; padding-left: 0; }
.legal-doc__body ul li {
  padding-left: 1.25rem;
  position: relative;
}
.legal-doc__body ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: #a1a1aa;
  font-weight: 700;
}
.legal-doc__body ol { list-style: decimal; }
.legal-doc__body li {
  margin-bottom: .375rem;
  line-height: 1.75;
}
.legal-doc__body li:last-child { margin-bottom: 0; }
.legal-doc__body li > ul,
.legal-doc__body li > ol { margin-top: .25rem; margin-bottom: 0; }

/* Strong / em */
.legal-doc__body strong { font-weight: 700; color: #09090b; }
.legal-doc__body em { font-style: italic; }

/* Blockquote — callout style */
.legal-doc__body blockquote {
  border-left: 3px solid #09090b;
  margin: 1.25rem 0;
  padding: .875rem 1.25rem;
  background: #fafafa;
  border-radius: 0 10px 10px 0;
  color: #52525b;
  font-size: .9rem;
}

/* HR */
.legal-doc__body hr {
  border: none;
  border-top: 1px solid #f0f0f0;
  margin: 2rem 0;
}

/* Tables */
.legal-doc__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  margin: 1.25rem 0;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  overflow: hidden;
}
.legal-doc__body th {
  text-align: left;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #71717a;
  padding: .625rem 1rem;
  background: #fafafa;
  border-bottom: 1px solid #e4e4e7;
}
.legal-doc__body td {
  padding: .625rem 1rem;
  border-bottom: 1px solid #f4f4f5;
  color: #3f3f46;
  vertical-align: top;
}
.legal-doc__body tr:last-child td { border-bottom: none; }

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.legal-doc__footer {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f0f0f0;
  font-size: .8125rem;
  color: #a1a1aa;
}
.legal-doc__footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  color: #a1a1aa;
}
.legal-doc__footer-nav a {
  color: #52525b;
  text-decoration: none;
  transition: color .15s ease;
}
.legal-doc__footer-nav a:hover { color: #09090b; }

/* ── Empty state ────────────────────────────────────────────────────────────── */
.blog-empty {
  text-align: center;
  padding: 5rem 1rem;
}
.blog-empty__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.blog-empty__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #09090b;
  margin-bottom: .75rem;
}

/* =============================================================================
   SINGLE POST PAGE — cascade resets (undo old minified styles that conflict)
   ============================================================================= */

/* ── Reset old gradient post-cta-box ───────────────────────────────────────── */
.post-cta-box {
  background-image: none !important;
  text-align: left !important;
  color: inherit !important;
}
.post-cta-box h3,
.post-cta-box .post-cta-box__title {
  font-size: inherit !important;
  margin-bottom: 0 !important;
}
.post-cta-box > p,
.post-cta-box .post-cta-box__desc {
  margin-bottom: 0 !important;
}

/* ── Reset old toc-mobile horizontal-pills overflow ─────────────────────────── */
.toc-mobile {
  overflow-x: visible !important;
  overflow: visible !important;
  white-space: normal !important;
  -webkit-overflow-scrolling: auto !important;
}

/* ── Reset old share-buttons margin/border (we use .share-bottom wrapper now) ── */
/* The old .share-buttons rule adds margin-top + border-top which doubles up */
.share-bottom .share-buttons,
.share-buttons--top,
.share-buttons--bottom {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* ── Article layout — constrain width when no sidebar ───────────────────────── */
/* When $toc is empty the sidebar isn't rendered; article column takes full container
   (~1200px). Max-width keeps lines readable. */
.single-post__inner {
  max-width: 740px;
}
/* When sidebar IS present the grid handles width — undo the max-width */
@media (min-width: 1100px) {
  .single-layout:has(.single-sidebar) .single-post__inner {
    max-width: none;
  }
}

/* ── Post body — override blue-tinted ink variable with neutral grey ─────────── */
.single-post__body {
  color: #3f3f46 !important;
  font-size: .9875rem;
  line-height: 1.8;
}
.single-post__body p { margin-bottom: 1.125rem; }
.single-post__body h2,
.single-post__body h3,
.single-post__body h4 { color: #09090b; }
.single-post__body ul,
.single-post__body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.single-post__body li { margin-bottom: .375rem; line-height: 1.75; }
.single-post__body a {
  color: var(--mn-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.single-post__body a:hover {
  color: #4338ca;
  text-decoration-color: currentColor;
}
.single-post__body img { max-width: 100%; border-radius: 10px; height: auto; }
.single-post__body blockquote {
  border-left: 3px solid #e4e4e7;
  margin: 1.5rem 0;
  padding: .75rem 1.25rem;
  background: #fafafa;
  border-radius: 0 10px 10px 0;
  color: #52525b;
  font-style: italic;
}

/* ── Author box — content wrapper needs flex:1 ──────────────────────────────── */
.author-box__content {
  flex: 1;
  min-width: 0;
}
/* Ensure avatar selector matches single.php class */
.author-box .author-box__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Post CTA box — header wrapper ─────────────────────────────────────────── */
.post-cta-box__header {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* ── Post nav — prev mirrors next ───────────────────────────────────────────── */
.post-nav__item--prev {
  text-align: left;
}

/* ── Top reading progress bar ────────────────────────────────────────────────── */
.top-reading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
}
.top-reading-bar__fill {
  height: 100%;
  width: 0%;
  background: #4f46e5;
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
}

/* ── Share buttons — inline header (icon only) ───────────────────────────────── */
.share-buttons {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #e4e4e7;
  background: #fff;
  color: #52525b;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.share-btn svg { width: 18px; height: 18px; }
.share-btn:hover {
  border-color: #a1a1aa;
  background: #f4f4f5;
  color: #09090b;
  transform: translateY(-1px);
}
.share-btn--full {
  width: auto;
  padding: 0 1.125rem;
  height: 44px;
}
.share-btn--full svg { width: 17px; height: 17px; }
.share-btn--x:hover,
.share-btn--linkedin:hover { background: #18181b; border-color: #18181b; color: #fff; transform: translateY(-1px); }

/* ── Share section — bottom ──────────────────────────────────────────────────── */
.share-bottom {
  padding: 1.75rem 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin: 2rem 0;
}
.share-bottom__label {
  font-size: .8125rem;
  font-weight: 600;
  color: #52525b;
  margin: 0 0 .875rem;
}
.share-buttons--bottom {
  flex-wrap: wrap;
  gap: .625rem;
}

/* ── Post CTA box — editorial light callout ──────────────────────────────────── */
.post-cta-box {
  background: #f8f9fa !important;
  border: 1px solid #e4e4e7 !important;
  border-left: 3px solid #09090b !important;
  border-radius: 12px !important;
  padding: 1.75rem 2rem;
  margin: 2.75rem 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 1.5rem;
  text-align: left !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
}
@media (min-width: 640px) {
  .post-cta-box {
    flex-direction: row !important;
    align-items: center !important;
    gap: 2rem;
  }
}

/* Left column */
.post-cta-box__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.post-cta-box__eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #71717a !important;
  margin: 0;
}
.post-cta-box__title {
  font-size: clamp(1rem, 2vw, 1.1875rem) !important;
  font-weight: 800 !important;
  color: #09090b !important;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 0 !important;
}
.post-cta-box__desc {
  font-size: .875rem;
  color: #52525b !important;
  line-height: 1.6;
  margin: 0 !important;
}
/* Benefit bullets */
.post-cta-box__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding-top: .625rem;
  border-top: 1px solid #e4e4e7;
}
.post-cta-box__benefits li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: #3f3f46;
  line-height: 1.4;
}
.post-cta-box__benefits li svg {
  flex-shrink: 0;
  color: #16a34a;
}

/* Right column */
.post-cta-box__right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}
.post-cta-box__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: #09090b;
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  padding: .75rem 1.625rem;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.post-cta-box__btn:hover {
  background: #27272a;
  transform: translateY(-1px);
}
.post-cta-box__note {
  font-size: .6875rem;
  color: #a1a1aa;
  white-space: nowrap;
}

/* ── Category archive page ───────────────────────────────────────────────────── */
.cat-hero {
  background: linear-gradient(165deg, var(--mn-primary-light, #f4f4f5) 0%, #fff 60%);
  border-bottom: 1px solid #e4e4e7;
  padding-block: 2rem 2.25rem;
}
.cat-hero .breadcrumbs { margin-bottom: 1.5rem; }
.cat-hero__inner {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cat-hero__eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #71717a;
  margin: 0;
}
.cat-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: 0;
}
.cat-hero__desc {
  font-size: .9375rem;
  color: #52525b;
  line-height: 1.6;
  margin: .25rem 0 0;
  max-width: 600px;
}
.cat-hero__count {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  color: #3f3f46;
  background: #f4f4f5;
  padding: .25rem .625rem;
  border-radius: 20px;
  border: 1px solid #e4e4e7;
  margin-top: .25rem;
  align-self: flex-start;
}
.cat-filter-strip {
  padding-block: 1.25rem;
  border-bottom: 1px solid #f0f0f0;
}
.cat-body {
  padding-block: 2.5rem 4rem;
}

/* ── Author archive page ─────────────────────────────────────────────────────── */
.author-hero {
  background: linear-gradient(165deg, var(--mn-primary-light, #f4f4f5) 0%, #fff 60%);
  border-bottom: 1px solid #e4e4e7;
  padding-block: 2rem 2.25rem;
}
.author-hero .breadcrumbs { margin-bottom: 1.5rem; }
.author-hero__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.author-hero__avatar {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.author-hero__info {
  flex: 1;
  min-width: 0;
}
.author-hero__eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #71717a;
  margin: 0 0 .25rem;
}
.author-hero__name {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #09090b;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: 0 0 .25rem;
}
.author-hero__job-title {
  font-size: .875rem;
  font-weight: 600;
  color: #6366f1;
  margin: 0 0 .625rem;
}
.author-hero__bio {
  font-size: .9rem;
  color: #52525b;
  line-height: 1.6;
  margin: 0 0 .875rem;
  max-width: 560px;
}
.author-hero__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .875rem;
}
.author-hero__count {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #3f3f46;
  background: #f4f4f5;
  padding: .25rem .625rem;
  border-radius: 20px;
  border: 1px solid #e4e4e7;
}
/* Social links — shared component */
.author-social-links,
.author-hero__socials,
.author-box__socials {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.author-social-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 600;
  color: #52525b;
  text-decoration: none;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  padding: .3rem .75rem;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.author-social-link:hover { background: #09090b; border-color: #09090b; color: #fff; }
.author-social-link--linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.author-social-link--twitter:hover  { background: #000;    border-color: #000; }
.author-social-link--website:hover  { background: #6366f1; border-color: #6366f1; }
.author-body {
  padding-block: 2.5rem 4rem;
}

/* ── Key takeaways — content list styling ────────────────────────────────────── */
.key-takeaways__content ul,
.key-takeaways__content ol {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.key-takeaways__content li {
  font-size: .875rem;
  color: #3f3f46;
  line-height: 1.65;
  padding-left: .25rem;
}
.key-takeaways__content li::marker {
  color: #09090b;
  font-weight: 700;
}
.key-takeaways__content p {
  font-size: .875rem;
  color: #3f3f46;
  line-height: 1.65;
  margin: 0 0 .5rem;
}
.key-takeaways__content p:last-child { margin-bottom: 0; }

/* ── Sidebar sticky — explicit override to guarantee position:sticky works ───── */
/*
 * position:sticky inside CSS Grid REQUIRES the grid item (sidebar) to be
 * TALLER than the sticky child. So:
 *   - .single-layout  → align-items:start  (article shrinks to content height)
 *   - .single-sidebar → align-self:stretch (sidebar fills the full row height)
 * That height difference is what lets the sticky element travel on scroll.
 */
.single-layout {
  align-items: start !important;
}
.single-sidebar {
  align-self: stretch !important; /* must stretch — not start — for sticky to work */
}
.single-sidebar__sticky {
  position: sticky !important;
  top: calc(var(--mn-header-h, 68px) + 1.375rem) !important;
  max-height: calc(100vh - var(--mn-header-h, 68px) - 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* "On this page" label above TOC */
.sidebar-toc-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #a1a1aa;
  margin: 0 0 .75rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid #f0f0f0;
}

/* ── Comments section ────────────────────────────────────────────────────────── */
/* Selectors must match comments.php: #comments.comments-section > .comments-title
   > ol.comment-list > li.comment-item > article.comment-body > header.comment-header
   > div.comment-avatar > div.comment-meta > div.comment-content > footer.comment-footer */

#comments.comments-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #f0f0f0;
}
.comments-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #09090b;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
/* Comment list */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Each comment card */
.comment-body {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
}
/* Header row: avatar + meta */
.comment-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.comment-avatar { flex-shrink: 0; }
.comment-avatar__img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
}
/* Author name + date */
.comment-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.comment-author {
  font-size: .875rem;
  font-weight: 600;
  color: #09090b;
}
.comment-date {
  font-size: .75rem;
  color: #a1a1aa;
}
/* Moderation notice */
.comment-awaiting-moderation {
  font-size: .8125rem;
  color: #d97706;
  margin-bottom: .5rem;
}
/* Comment text */
.comment-content {
  font-size: .9rem;
  color: #52525b;
  line-height: 1.7;
}
.comment-content p { margin: 0 0 .5rem; }
.comment-content p:last-child { margin-bottom: 0; }
/* Reply link */
.comment-footer { margin-top: .625rem; }
.comment-reply a,
.comment-reply-link {
  font-size: .75rem;
  font-weight: 600;
  color: #71717a;
  text-decoration: none;
  transition: color .15s ease;
}
.comment-reply a:hover,
.comment-reply-link:hover { color: #09090b; }

/* No comments message */
.no-comments {
  font-size: .9rem;
  color: #71717a;
  padding: 1rem 0;
}

/* Comment form */
.comment-respond {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #f0f0f0;
}
.comment-reply-title {
  font-size: 1rem;
  font-weight: 700;
  color: #09090b;
  margin-bottom: .25rem;
}
.comment-notes,
.required-field-message {
  font-size: .8125rem;
  color: #71717a;
  margin-bottom: 1.25rem;
}
.comment-form p { margin-bottom: .875rem; }
.comment-form label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: #3f3f46;
  margin-bottom: .375rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: .625rem .875rem;
  border: 1px solid #e4e4e7;
  border-radius: 9px;
  font-size: .875rem;
  color: #09090b;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
  font-family: inherit;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: #09090b;
  box-shadow: 0 0 0 3px rgba(9,9,11,.08);
}
.comment-form .form-submit { margin-bottom: 0; }
/* Submit uses btn btn--primary class from comment_form() config */
.comment-form .btn.btn--primary {
  display: inline-flex;
  align-items: center;
  padding: .625rem 1.5rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  background: #09090b;
  color: #fff;
  border: none;
  border-radius: 9px;
  transition: background .15s ease;
}
.comment-form .btn.btn--primary:hover { background: #27272a; }

/* =============================================================================
   MOBILE RESPONSIVE FIXES — comprehensive pass
   Covers all pages at 320px–767px
   ============================================================================= */

/* ── 1. Homepage hero: show animation panel on all screens ──────────────────────
   Below 1024px the hero is single-column, so the panel stacks below the text.
   We make it full-width and disable the bob animation on mobile for performance.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero__visual {
    width: 100%;
    align-items: flex-start;
  }
  /* Full-width panel, no floating bob on mobile */
  .hero__visual .hero__app-preview {
    max-width: 100%;
    animation: none;
  }
}

/* ── 2. Homepage hero: shrink panel sidebar on small screens ─────────────────── */
@media (max-width: 480px) {
  .as-panel__sidebar {
    width: 72px;
  }
  .as-nav {
    font-size: 8px;
    padding: 6px 5px;
    min-height: 32px;
    display: flex;
    align-items: center;
  }
}

/* ── 2b. Hero section: reduce bottom padding on mobile (panel makes it tall) ── */
@media (max-width: 767px) {
  .hero {
    padding-block: 2.5rem 2rem;
  }
}

/* ── 3. Hero content: remove max-width cap on single-column layout ───────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__content {
    max-width: none;
  }
}

/* ── 4. Hero actions: stack buttons vertically on very small screens ─────────── */
@media (max-width: 479px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── 5. Hero footnote: allow wrapping, avoid &nbsp; overflow ────────────────── */
.hero__footnote {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 6. Section eyebrow: prevent overflow on narrow screens ─────────────────── */
.section-eyebrow {
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

/* ── 7. CTA banner: stretch buttons full-width on mobile ─────────────────────── */
@media (max-width: 767px) {
  .cta-banner__inner {
    align-items: stretch;
  }
  .cta-banner__actions {
    display: flex;
    flex-direction: column;
    gap: var(--mn-space-3);
  }
  .cta-banner__actions .btn,
  .cta-banner__inner > a.btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── 8. Author box: stack avatar + text vertically on very small screens ─────── */
@media (max-width: 479px) {
  .author-box {
    flex-direction: column;
  }
  .author-box__avatar,
  .author-box-avatar {
    width: 56px;
    height: 56px;
  }
}

/* ── 9. Post CTA box button: ensure 44px touch target ───────────────────────── */
.post-cta-box__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .75rem 1.25rem;
}

/* ── 10. (sticky post bar removed) ──────────────────────────────────────────── */

/* ── 11. Footer: center bottom row on mobile ─────────────────────────────────── */
@media (max-width: 639px) {
  .site-footer__bottom {
    text-align: center;
    align-items: center;
  }
}

/* ── 12. Footer brand: full-width at tablet ──────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* ── 13. Comparison table: visual scroll hint on mobile ─────────────────────── */
@media (max-width: 767px) {
  .comparison-table-wrap {
    position: relative;
  }
  .comparison-table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.85));
    border-radius: 0 16px 16px 0;
    pointer-events: none;
  }
}

/* ── 14. Pricing card: cap width on mobile so full-width cards don't feel too wide */
@media (max-width: 640px) {
  .pricing-card {
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }
}

/* ── 15. Blog hero title: responsive font size ───────────────────────────────── */
.blog-hero__title {
  font-size: clamp(1.625rem, 5vw + .5rem, 2.5rem);
}

/* ── 16. Blog hero search input: 16px to prevent iOS viewport zoom ──────────── */
.blog-hero__search .search-form__input,
.search-form__input {
  font-size: 1rem; /* min 16px prevents iOS auto-zoom on focus */
}

/* ── 17. Blog CTA strip: reduce padding on mobile ────────────────────────────── */
@media (max-width: 479px) {
  .blog-cta-strip {
    padding: 1.5rem 1rem;
  }
}

/* ── 18. About hero: reduce placeholder on mobile ────────────────────────────── */
@media (max-width: 479px) {
  .about-hero__placeholder,
  .ahp-card {
    padding: 1rem;
  }
}

/* ── 19. Contact form card: reduce padding on mobile ─────────────────────────── */
@media (max-width: 479px) {
  .contact-form-card {
    padding: 1.25rem;
    border-radius: 12px;
  }
}

/* ── 20. Legal hero chips: wrap on mobile ────────────────────────────────────── */
.legal-hero__chips {
  flex-wrap: wrap;
  gap: .5rem;
}

/* ── 21. Not-found: scale down padding on mobile ─────────────────────────────── */
@media (max-width: 479px) {
  .not-found {
    padding: var(--mn-space-16) var(--mn-space-4);
  }
  .not-found__title {
    font-size: var(--mn-text-2xl);
  }
}

/* ── 22. Page hero actions and footnote — base definitions ───────────────────── */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-3);
  margin-top: var(--mn-space-6);
}
.page-hero__footnote {
  font-size: var(--mn-text-sm);
  color: var(--mn-ink-500);
  margin-top: var(--mn-space-4);
}
@media (max-width: 479px) {
  .page-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-hero__actions .btn,
  .page-hero__actions .mn-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── 23. Pricing hero trust strip — class-based approach ─────────────────────── */
.pricing-hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
@media (max-width: 479px) {
  .pricing-hero__trust {
    flex-direction: column;
    gap: .625rem;
    align-items: flex-start;
  }
}

/* ── 23b. Pricing hero trust item ────────────────────────────────────────────── */
.pricing-hero__trust-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  color: #52525b;
}

/* ── 24. Workflow vertical connector on mobile ───────────────────────────────── */
@media (max-width: 767px) {
  .workflow-step {
    position: relative;
    padding-left: 2.75rem;
  }
  .workflow-step::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 52px;
    bottom: -1.5rem;
    width: 2px;
    background: #e4e4e7;
  }
  .workflow-step:last-child::after {
    display: none;
  }
}

/* ── 25. About page blockquote pseudo-element scaling ────────────────────────── */
@media (max-width: 479px) {
  .about-origin__quote blockquote::before {
    font-size: var(--mn-text-xl);
  }
}

/* ── 26. Pricing cards: reduce padding on small phones ───────────────────────── */
@media (max-width: 479px) {
  .pricing-card {
    padding: 1.25rem !important;
  }
  .pricing-grid {
    padding-top: .75rem !important;
  }
}

/* ── 27. Pricing section: comparison heading — centre via CSS not inline style  */
.comparison .section-eyebrow,
.comparison .section-title {
  text-align: center;
  display: block;
}
.comparison .section-title {
  margin-bottom: 2rem;
}

/* ── 28. Pricing section: trust grid stacks to 2-col on tablet ──────────────── */
@media (min-width: 480px) and (max-width: 767px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 29. CTA banner: full-width button for any direct btn child on mobile ────── */
@media (max-width: 767px) {
  .cta-banner__inner > a.btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .cta-banner__inner {
    gap: var(--mn-space-5);
  }
}

/* ── 30. Pricing: FAQ section inner layout fix ───────────────────────────────── */
.faq-section__inner {
  max-width: 720px;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .faq-section__inner {
    max-width: 100%;
  }
  .faq-item__trigger {
    padding: .875rem 1rem;
    font-size: var(--mn-text-sm);
  }
  .faq-item__answer p {
    font-size: var(--mn-text-sm);
  }
}