/*
Theme Name: MarKomX V2
Theme URI: https://markomx.com
Author: Ai-Fi Web Team
Author URI: https://ai-fi.ch
Description: Open Floor — bold broadsheet design for MarKomX. Custom multilingual EN/FR/IT/DE.
Version: 2.0.2
License: GPL v2 or later
Text Domain: markomx-v2
*/

/* ─── CSS VARIABLES ─── */
:root {
  --mkx-paper: #F5F2EA;
  --mkx-ink: #0E0E14;
  --mkx-card: #FFFFFF;
  --mkx-navy: #16162B;
  --mkx-slate: #4A4A55;
  --mkx-purple: #7B6EF6;
  --mkx-purple-dark: #6B5AE0;
  --mkx-amber: #F59E0B;
  --mkx-teal: #1BB583;
  --mkx-hairline: #D8D3C7;
  --mkx-dark-rule: #2A2A35;

  --mkx-radius: 4px;
  --mkx-max-width: 1200px;
  --mkx-gutter: 24px;
  --mkx-rule: 1px solid var(--mkx-hairline);
  --mkx-rule-dark: 1px solid var(--mkx-dark-rule);

  --mkx-headline: 'Fraunces', Georgia, serif;
  --mkx-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mkx-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

/* ─── ILLUMINATING JOURNEY — PROBLEM SECTION ─── */
.mkx-problem-block { max-width: 800px; margin: 0 auto; text-align: left; }
.mkx-problem-body p { font-size: 1.15rem; line-height: 1.7; color: rgba(245,242,234,0.85); margin-bottom: 1.2em; }
.mkx-problem-list { font-family: var(--mkx-mono); font-size: 0.9rem; color: rgba(245,242,234,0.6); letter-spacing: 0.02em; margin: 1.5em 0; }
.mkx-problem-transition { font-family: var(--mkx-headline); font-size: 1.3rem; font-style: italic; color: var(--mkx-amber); margin-top: 2em; max-width: 600px; }

/* ─── ILLUMINATING JOURNEY — PROBLEM-SOLUTION PAIRS ─── */
.mkx-pair { padding: 48px 0; border-bottom: var(--mkx-rule); }
.mkx-pair:last-child { border-bottom: none; }
.mkx-pair-alt { background: rgba(14,14,20,0.02); }
.mkx-pair-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.mkx-pair-label { font-family: var(--mkx-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mkx-purple); margin-bottom: 16px; }
.mkx-pair-wall { font-family: var(--mkx-headline); font-size: 1.5rem; font-weight: 500; color: var(--mkx-navy); line-height: 1.3; font-style: italic; }
.mkx-pair-reframe { font-size: 1.1rem; line-height: 1.7; color: var(--mkx-slate); margin-bottom: 24px; }
.mkx-pair-answer { background: var(--mkx-card); border-left: 3px solid var(--mkx-teal); padding: 20px 24px; border-radius: 0 var(--mkx-radius) var(--mkx-radius) 0; }
.mkx-pair-answer-label { font-family: var(--mkx-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mkx-teal); margin-bottom: 8px; }
.mkx-pair-answer p { font-size: 0.95rem; line-height: 1.6; color: var(--mkx-navy); margin: 0; }

@media (max-width: 768px) {
  .mkx-pair-grid { grid-template-columns: 1fr; gap: 24px; }
  .mkx-pair { padding: 32px 0; }
  .mkx-pair-wall { font-size: 1.25rem; }
  .mkx-pair-reframe { font-size: 1rem; }
  .mkx-problem-body p { font-size: 1rem; }
  .mkx-problem-transition { font-size: 1.1rem; }
}

/* ─── ILLUMINATING JOURNEY — REVEAL SECTION ─── */
.mkx-reveal { text-align: center; }

/* ─── RESET / BASE ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mkx-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mkx-slate);
  background: var(--mkx-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 9999;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--mkx-headline); color: var(--mkx-navy); margin: 0 0 0.5em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; }
h3 { font-size: 1.35rem; font-weight: 500; }
p { margin: 0 0 1em; }
a { color: var(--mkx-purple); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--mkx-purple-dark); }
img { max-width: 100%; height: auto; display: block; }

/* ─── LAYOUT ─── */
.mkx-container { width: 100%; max-width: var(--mkx-max-width); margin: 0 auto; padding: 0 var(--mkx-gutter); }
.mkx-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--mkx-gutter);
}
.mkx-section { padding: 96px 0; border-bottom: var(--mkx-rule); }
.mkx-section:last-child { border-bottom: none; }
.mkx-ink-panel { background: var(--mkx-ink); color: var(--mkx-paper); }
.mkx-ink-panel h2, .mkx-ink-panel h3, .mkx-ink-panel p { color: var(--mkx-paper); }
.mkx-purple-panel { background: var(--mkx-purple); color: var(--mkx-paper); }
.mkx-purple-panel h2, .mkx-purple-panel h3, .mkx-purple-panel p { color: var(--mkx-paper); }

/* ─── UTILITY ─── */
.mkx-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; }

/* ─── TYPOGRAPHY ─── */
.mkx-eyebrow {
  font-family: var(--mkx-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mkx-purple);
  margin-bottom: 16px;
}
.mkx-eyebrow .mkx-star { color: var(--mkx-amber); }
.mkx-headline { font-family: var(--mkx-headline); }
.mkx-mono { font-family: var(--mkx-mono); }
.mkx-subhead { font-size: 1.125rem; color: var(--mkx-slate); max-width: 600px; }

/* ─── WORDMARK ─── */
.mkx-wordmark { font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.mkx-wordmark .mkx-m { color: var(--mkx-navy); }
.mkx-wordmark .mkx-k { color: var(--mkx-teal); }
.mkx-wordmark .mkx-o { color: var(--mkx-navy); }
.mkx-wordmark .mkx-x { color: var(--mkx-purple); }
.mkx-star { color: var(--mkx-amber); }

/* ─── BUTTONS ─── */
.mkx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mkx-body);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--mkx-radius);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.15s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.mkx-btn:hover { text-decoration: none; }
.mkx-btn-primary { background: var(--mkx-purple); color: var(--mkx-paper); }
.mkx-btn-primary:hover { background: var(--mkx-purple-dark); color: var(--mkx-paper); }
.mkx-btn-dark { background: var(--mkx-ink); color: var(--mkx-paper); }
.mkx-btn-dark:hover { background: var(--mkx-navy); color: var(--mkx-paper); }
.mkx-btn-ghost { background: transparent; color: var(--mkx-purple); border: 1px solid var(--mkx-purple); }
.mkx-btn-ghost:hover { background: var(--mkx-purple); color: var(--mkx-paper); }
.mkx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mkx-purple);
  border-bottom: 1px solid var(--mkx-hairline);
  padding-bottom: 1px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mkx-link:hover { border-bottom-color: var(--mkx-purple); }

/* ─── CARDS ─── */
.mkx-card {
  background: var(--mkx-card);
  border: var(--mkx-rule);
  border-radius: var(--mkx-radius);
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mkx-card:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(14,14,20,0.05); }
.mkx-card .mkx-card-title { font-family: var(--mkx-headline); font-size: 1.25rem; font-weight: 500; color: var(--mkx-navy); margin-bottom: 8px; }
.mkx-card .mkx-card-role { font-family: var(--mkx-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mkx-purple); margin-bottom: 8px; }
.mkx-card .mkx-card-body { font-size: 0.9375rem; color: var(--mkx-slate); }
.mkx-card-highlight { border: 2px solid var(--mkx-purple); }

/* ─── CUSTOMER JOURNEY GRID ─── */
.mkx-journey-grid { grid-template-columns: repeat(3, 1fr); }
.mkx-journey-card { display: flex; flex-direction: column; padding: 20px; }
.mkx-journey-img { width: 100%; height: auto; border-radius: var(--mkx-radius); margin-bottom: 16px; border: 1px solid var(--mkx-hairline); }
.mkx-journey-card .mkx-card-title { font-size: 1.15rem; margin-bottom: 8px; }
.mkx-journey-card .mkx-card-body { font-size: 0.9rem; color: var(--mkx-slate); }

/* ─── HEADER / NAV ─── */
.mkx-header {
  position: sticky;
  top: 0;
  --mkx-header-height: 84px;
  background: rgba(245, 242, 234, 0.96);
  border-bottom: var(--mkx-rule);
  z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mkx-header .mkx-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mkx-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mkx-header-row--main { min-height: 54px; padding: 6px 0; }
.mkx-header-row--lang {
  justify-content: flex-end;
  padding: 4px 0 8px;
  border-top: 1px solid rgba(216, 211, 199, 0.5);
}
.mkx-header-row--lang .mkx-lang-switcher { gap: 10px; }
.mkx-logo img { display: block; height: 36px; width: auto; }
.mkx-nav-wrap { display: flex; align-items: center; gap: 24px; }
.mkx-nav { display: contents; }
.mkx-nav__list {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mkx-nav__list > li { position: relative; }
.mkx-nav__list > li > a {
  display: inline-block;
  min-height: 44px;
  padding: 12px 0;
  font-family: var(--mkx-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--mkx-slate);
  white-space: nowrap;
}
.mkx-nav__list > li > a.mkx-nav-link { display: inline-block; }
.mkx-nav__list > li > a:hover { color: var(--mkx-purple); }
.mkx-nav__list .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--mkx-paper);
  border: var(--mkx-rule);
  border-radius: var(--mkx-radius);
  padding: 8px 0;
  list-style: none;
  box-shadow: 0 4px 12px rgba(14,14,20,0.08);
}
.mkx-nav__list li:hover > .sub-menu { display: block; }
.mkx-nav__list .sub-menu a { display: block; padding: 8px 16px; font-size: 0.875rem; }
.mkx-lang-switcher { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; font-family: var(--mkx-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.mkx-lang-switcher a { color: var(--mkx-slate); }
.mkx-lang-switcher li.active a { color: var(--mkx-purple); font-weight: 500; }
.mkx-lang-switcher a:hover { color: var(--mkx-purple); }
.mkx-header-cta .mkx-btn { padding: 12px 20px; font-size: 0.875rem; }
.mkx-header-login { padding: 12px 20px; font-size: 0.875rem; }
.mkx-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
}
.mkx-burger span { display: block; width: 24px; height: 2px; background: var(--mkx-ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.mkx-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.mkx-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ─── MOBILE MENU ─── */
.mkx-mobile-menu {
  display: none;
  position: fixed;
  top: var(--mkx-header-height, 84px);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(245, 242, 234, 0.98);
  padding: 32px var(--mkx-gutter);
  flex-direction: column;
  gap: 20px;
  z-index: 99;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.mkx-mobile-menu.open { display: flex; }
.mkx-mobile-menu a { font-family: var(--mkx-headline); font-size: 1.5rem; font-weight: 500; color: var(--mkx-navy); }
.mkx-mobile-menu .mkx-lang-switcher { font-size: 0.875rem; gap: 14px; margin-top: 8px; }
.mkx-mobile-menu .mkx-btn { margin-top: auto; }

/* ─── HERO ─── */
.mkx-hero { padding: 96px 0 64px; border-bottom: var(--mkx-rule); }
.mkx-hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.mkx-hero h1 { margin-bottom: 24px; }
.mkx-hero .mkx-subhead { font-size: 1.25rem; margin-bottom: 32px; }
.mkx-hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.mkx-hero-right { display: flex; flex-direction: column; gap: 24px; }
.mkx-hero-video-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--mkx-radius);
  border: 1px solid var(--mkx-hairline);
  overflow: hidden;
  line-height: 0;
}
.mkx-hero-video { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }
.mkx-hero-video-16x9 { display: block; aspect-ratio: 16/9; }
.mkx-hero-video-9x16 { display: none; aspect-ratio: 9/16; }
.mkx-hero-video-ep2 a { display: block; position: relative; line-height: 0; }
.mkx-hero-video-ep2 .mkx-hero-video { transition: transform 0.35s ease; }
.mkx-hero-video-ep2 a:hover .mkx-hero-video { transform: scale(1.015); }
.mkx-hero-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(22, 22, 43, 0.55);
  color: var(--mkx-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 2;
}
.mkx-hero-video-ep2 a:hover .mkx-hero-video-play {
  background: rgba(22, 22, 43, 0.75);
  transform: translate(-50%, -50%) scale(1.06);
}
.mkx-hero-video-play svg { width: 26px; height: 26px; margin-left: 2px; }
.mkx-hero-video-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mkx-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mkx-paper);
  background: rgba(22, 22, 43, 0.65);
  padding: 6px 10px;
  border-radius: var(--mkx-radius);
  pointer-events: none;
  z-index: 2;
}
.mkx-hero-logo {
  position: absolute;
  right: 3%;
  bottom: 3%;
  width: clamp(90px, 16%, 200px);
  height: auto;
  opacity: 0.92;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(14,14,20,0.25));
}
.mkx-hero-frame { border: 1px solid var(--mkx-amber); padding: 8px; border-radius: var(--mkx-radius); }
.mkx-hero-frame img { border-radius: var(--mkx-radius); }
.mkx-hero-caption { font-family: var(--mkx-mono); font-size: 0.75rem; color: var(--mkx-slate); }
.mkx-stat-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--mkx-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mkx-navy);
  border-top: var(--mkx-rule);
}
.mkx-stat-strip .dot { color: var(--mkx-amber); }

/* ─── SECTION HEADER ─── */
.mkx-section-header { margin-bottom: 48px; }
.mkx-rule-draw {
  height: 1px;
  background: var(--mkx-hairline);
  width: 0;
  margin-top: 24px;
  animation: mkx-rule-draw 0.4s ease-out forwards;
}
@keyframes mkx-rule-draw { to { width: 100%; } }

/* ─── PRICING ─── */
.mkx-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mkx-price { font-family: var(--mkx-headline); font-size: 2.5rem; font-weight: 700; color: var(--mkx-navy); }
.mkx-price span { font-family: var(--mkx-body); font-size: 0.875rem; font-weight: 400; color: var(--mkx-slate); }
.mkx-feature-list { list-style: none; margin: 0; padding: 0; }
.mkx-feature-list li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 0.9375rem; }
.mkx-feature-list li::before { content: '✦'; position: absolute; left: 0; color: var(--mkx-purple); }
.mkx-comparison-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; background: var(--mkx-card); border: var(--mkx-rule); }
.mkx-comparison-table th, .mkx-comparison-table td { padding: 14px 16px; text-align: left; border-bottom: var(--mkx-rule); }
.mkx-comparison-table th { background: var(--mkx-ink); color: var(--mkx-paper); font-weight: 600; }
.mkx-comparison-table tr:last-child td { border-bottom: none; }

/* ─── TEAM GRID ─── */
.mkx-agent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.mkx-agent-card { border-right: var(--mkx-rule); border-bottom: var(--mkx-rule); padding: 24px; position: relative; }
.mkx-agent-card:nth-child(4n) { border-right: none; }
.mkx-agent-card .mkx-star { position: absolute; top: 16px; right: 16px; }

/* ─── FAQ ─── */
.mkx-faq { max-width: 720px; margin: 0 auto; }
.mkx-faq details { border-top: var(--mkx-rule); padding: 20px 0; }
.mkx-faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--mkx-headline);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--mkx-navy);
}
.mkx-faq summary::-webkit-details-marker { display: none; }
.mkx-faq summary::after { content: '›'; font-family: var(--mkx-mono); color: var(--mkx-purple); font-size: 1.5rem; transition: transform 0.25s ease; }
.mkx-faq details[open] summary::after { transform: rotate(90deg); }
.mkx-faq .answer { padding-top: 16px; color: var(--mkx-slate); }

/* ─── FORMS ─── */
.mkx-form { display: flex; flex-direction: column; gap: 16px; }
.mkx-form label { font-family: var(--mkx-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mkx-slate); }
.mkx-form input, .mkx-form textarea, .mkx-form select {
  width: 100%;
  padding: 12px 14px;
  border: var(--mkx-rule);
  border-radius: var(--mkx-radius);
  background: var(--mkx-card);
  font-family: var(--mkx-body);
  font-size: 1rem;
  color: var(--mkx-navy);
}
.mkx-form input:focus, .mkx-form textarea:focus, .mkx-form select:focus { outline: 2px solid var(--mkx-purple); outline-offset: 1px; }

/* ─── TESTIMONIAL ─── */
.mkx-testimonial { padding: 96px 0; }
.mkx-testimonial blockquote {
  font-family: var(--mkx-headline);
  font-style: italic;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--mkx-paper);
  max-width: 800px;
  margin: 0 0 24px;
}
.mkx-testimonial .attribution {
  font-family: var(--mkx-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mkx-amber);
}
.mkx-testimonial .amber-rule { width: 60px; height: 1px; background: var(--mkx-amber); margin: 24px 0; }

/* ─── FOOTER ─── */
.mkx-footer { background: var(--mkx-ink); color: var(--mkx-paper); padding: 64px 0 24px; }
.mkx-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.mkx-footer h4 { font-family: var(--mkx-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mkx-paper); margin-bottom: 16px; }
.mkx-footer ul { list-style: none; margin: 0; padding: 0; }
.mkx-footer li { margin-bottom: 10px; }
.mkx-footer a { color: rgba(245,242,234,0.8); font-size: 0.875rem; }
.mkx-footer a:hover { color: var(--mkx-paper); }
.mkx-footer-bottom {
  border-top: var(--mkx-rule-dark);
  padding-top: 24px;
  font-family: var(--mkx-mono);
  font-size: 0.75rem;
  color: rgba(245,242,234,0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ─── BLOG ─── */
.mkx-blog-section { padding: 80px 0; }
.mkx-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mkx-post-card { display: flex; flex-direction: column; }
.mkx-post-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--mkx-radius);
  margin-bottom: 16px;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
  background: var(--mkx-card);
}
.mkx-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--mkx-radius);
}
.mkx-post-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mkx-paper);
  border: var(--mkx-rule);
}
.mkx-post-thumb-placeholder span {
  font-family: var(--mkx-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mkx-slate);
}
.mkx-post-card:hover .mkx-post-thumb { border-color: var(--mkx-amber); }
.mkx-post-meta {
  font-family: var(--mkx-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mkx-purple);
  margin-bottom: 10px;
}
.mkx-post-category { color: var(--mkx-purple); }
.mkx-post-sep { color: var(--mkx-hairline); margin: 0 6px; }
.mkx-post-card .mkx-card-title { font-size: 1.35rem; margin-bottom: 10px; }
.mkx-post-card .mkx-card-title a { color: var(--mkx-navy); }
.mkx-post-card .mkx-card-title a:hover { color: var(--mkx-purple); }
.mkx-post-card .mkx-card-body { font-size: 0.9375rem; }

/* Article */
.mkx-article-section { padding: 80px 0 96px; }
.mkx-article-header { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.mkx-article-eyebrow {
  font-family: var(--mkx-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mkx-purple);
  margin-bottom: 20px;
}
.mkx-article-sep { color: var(--mkx-hairline); margin: 0 8px; }
.mkx-article-title { margin-bottom: 0; }
.mkx-article-hero-frame {
  max-width: 900px;
  margin: 0 auto 56px;
  border: 1px solid var(--mkx-amber);
  padding: 8px;
  border-radius: var(--mkx-radius);
  background: var(--mkx-card);
}
.mkx-article-hero-frame img {
  width: 100%;
  height: auto;
  border-radius: var(--mkx-radius);
}
.mkx-article-hero-frame figcaption {
  font-family: var(--mkx-mono);
  font-size: 0.7rem;
  color: var(--mkx-slate);
  margin-top: 8px;
  text-align: right;
}
.mkx-entry-content {
  max-width: 680px;
  margin: 0 auto 64px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mkx-slate);
}
.mkx-entry-content h2,
.mkx-entry-content h3,
.mkx-entry-content h4 { margin-top: 1.6em; margin-bottom: 0.6em; color: var(--mkx-navy); }
.mkx-entry-content p { margin-bottom: 1.2em; }
.mkx-entry-content ul,
.mkx-entry-content ol { margin-bottom: 1.2em; padding-left: 1.5em; }
.mkx-entry-content li { margin-bottom: 0.4em; }
.mkx-entry-content blockquote {
  border-left: 2px solid var(--mkx-purple);
  padding-left: 20px;
  margin: 1.6em 0;
  font-family: var(--mkx-headline);
  font-size: 1.25rem;
  color: var(--mkx-navy);
}
.mkx-entry-content a { border-bottom: 1px solid var(--mkx-hairline); }
.mkx-entry-content a:hover { border-bottom-color: var(--mkx-purple); }

/* Author byline */
.mkx-article-footer { max-width: 680px; margin: 0 auto; }
.mkx-author-byline {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-top: var(--mkx-rule);
}
.mkx-author-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--mkx-radius);
  border: var(--mkx-rule);
  flex-shrink: 0;
}
.mkx-author-info { flex: 1; }
.mkx-author-name {
  font-family: var(--mkx-headline);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--mkx-navy);
  margin-bottom: 4px;
}
.mkx-author-role {
  font-family: var(--mkx-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mkx-purple);
  margin-left: 8px;
}
.mkx-author-bio {
  font-size: 0.9375rem;
  color: var(--mkx-slate);
  margin-bottom: 10px;
}
.mkx-author-link { font-size: 0.875rem; }

/* Related articles */
.mkx-related-articles { max-width: 900px; margin: 80px auto 0; }
.mkx-rule-spacer {
  border: none;
  border-top: var(--mkx-rule);
  margin-bottom: 48px;
}

/* Pagination */
.mkx-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: var(--mkx-rule);
  font-family: var(--mkx-mono);
  font-size: 0.875rem;
}
.mkx-pagination a,
.mkx-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--mkx-radius);
  border: var(--mkx-rule);
  color: var(--mkx-slate);
  background: var(--mkx-card);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mkx-pagination a:hover { border-color: var(--mkx-purple); color: var(--mkx-purple); }
.mkx-pagination .current { border-color: var(--mkx-purple); color: var(--mkx-purple); font-weight: 500; }
.mkx-pagination .prev,
.mkx-pagination .next { padding: 0 16px; }

.mkx-no-results { text-align: center; font-size: 1.125rem; color: var(--mkx-slate); padding: 64px 0; }

/* ─── BREADCRUMBS ─── */
.mkx-breadcrumbs { margin-bottom: 32px; }
.mkx-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: var(--mkx-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mkx-slate);
}
.mkx-breadcrumbs li { display: flex; align-items: center; }
.mkx-breadcrumbs a { color: var(--mkx-slate); }
.mkx-breadcrumbs a:hover { color: var(--mkx-purple); }
.mkx-breadcrumbs .mkx-breadcrumb-sep { color: var(--mkx-hairline); }
.mkx-breadcrumbs [aria-current="page"] { color: var(--mkx-purple); font-weight: 500; }

/* ─── LEAD PARAGRAPH (GEO) ─── */
.lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--mkx-slate);
  font-weight: 400;
}

/* ─── LAST UPDATED (GEO) ─── */
.mkx-last-updated {
  margin-top: 48px;
  padding-top: 24px;
  border-top: var(--mkx-rule);
}
.mkx-last-updated .mkx-eyebrow {
  margin-bottom: 0;
  color: var(--mkx-slate);
}
.mkx-last-updated time { color: var(--mkx-navy); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .mkx-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .mkx-agent-grid { grid-template-columns: repeat(3, 1fr); }
  .mkx-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Global overflow guard ── */
html, body { overflow-x: hidden; }
img, video, figure { max-width: 100%; height: auto; }

/* ── Tablet / small laptop ── */
@media (max-width: 768px) {
  /* Gutters & container */
  :root { --mkx-gutter: 16px; }
  .mkx-container { padding: 0 16px; }

  /* Section padding */
  .mkx-section { padding: 48px 0; }
  .mkx-hero { padding: 48px 0 32px; }
  .mkx-testimonial { padding: 48px 0; }
  .mkx-blog-section { padding: 48px 0; }
  .mkx-article-section { padding: 48px 0 48px; }

  /* Hero */
  .mkx-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .mkx-hero .mkx-subhead { font-size: 1.0625rem; }
  .mkx-subhead { font-size: 1.0625rem; }
  .mkx-hero-right { display: flex; }
  .mkx-hero-video-16x9 { display: none; }
  .mkx-hero-video-9x16 { display: block; }
  .mkx-hero-video-wrap { max-width: 360px; margin: 0 auto; }

  /* Stat strip */
  .mkx-stat-strip {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0;
    font-size: 0.75rem;
    line-height: 1.4;
  }

  /* Nav — show burger, hide desktop nav + top language bar */
  .mkx-header { --mkx-header-height: 66px; }
  .mkx-nav-wrap { display: none; }
  .mkx-header-row--lang { display: none; }
  .mkx-burger { display: flex; }

  /* Mobile menu tap targets */
  .mkx-mobile-menu { padding: 32px 16px; gap: 16px; }
  .mkx-mobile-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 1.25rem;
  }
  .mkx-mobile-menu .mkx-btn { min-height: 44px; }

  /* Theme grids → single column */
  .mkx-grid,
  .mkx-pricing-grid,
  .mkx-agent-grid,
  .mkx-blog-grid,
  .mkx-footer-grid,
  .mkx-journey-grid { grid-template-columns: 1fr; }

  /* Override inline grid spans so cards become full-width */
  [style*="grid-column:span"],
  [style*="grid-column: span"] { grid-column: 1 / -1 !important; }

  /* Override inline multi-column grids that fight the breakpoint */
  [style*="grid-template-columns:repeat"],
  [style*="grid-template-columns: repeat"] { grid-template-columns: 1fr !important; }

  /* Cards — reduce padding */
  .mkx-card { padding: 16px; }
  .mkx-agent-card { border-right: none; padding: 16px; }

  /* Pricing */
  .mkx-price { font-size: 2rem; }

  /* Testimonial */
  .mkx-testimonial blockquote { font-size: 1.25rem; }

  /* Footer */
  .mkx-footer { padding: 48px 0 24px; }
  .mkx-footer-grid { gap: 32px; margin-bottom: 32px; }
  .mkx-footer-brand img { width: 140px; height: auto; }
  .mkx-footer li { min-height: 44px; display: flex; align-items: center; }
  .mkx-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* Comparison table */
  .mkx-comparison-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Forms */
  .mkx-form input, .mkx-form textarea, .mkx-form select { min-height: 44px; }

  /* Article */
  .mkx-entry-content { font-size: 1rem; margin-bottom: 32px; }
  .mkx-article-hero-frame { margin-bottom: 32px; }
  .mkx-author-byline { flex-direction: column; gap: 12px; }
  .mkx-author-avatar { width: 56px; height: 56px; }
  .mkx-related-articles { margin-top: 48px; }

  /* Section header */
  .mkx-section-header { margin-bottom: 32px; }

  /* Pagination */
  .mkx-pagination { flex-wrap: wrap; gap: 6px; }
  .mkx-pagination a, .mkx-pagination span { min-width: 32px; height: 32px; }

  /* FAQ */
  .mkx-faq summary { font-size: 1.0625rem; }
}

/* ── Small phones ── */
@media (max-width: 480px) {
  /* Even tighter gutters */
  :root { --mkx-gutter: 12px; }
  .mkx-container { padding: 0 12px; }

  /* Section padding */
  .mkx-section { padding: 32px 0; }
  .mkx-hero { padding: 32px 0 24px; }
  .mkx-testimonial { padding: 32px 0; }
  .mkx-blog-section { padding: 32px 0; }
  .mkx-article-section { padding: 32px 0; }

  /* Headlines */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.15rem; }

  /* Hero */
  .mkx-hero h1 { margin-bottom: 16px; }
  .mkx-hero .mkx-subhead { font-size: 1rem; margin-bottom: 24px; }
  .mkx-hero-actions { gap: 12px; }
  .mkx-hero-actions .mkx-btn { width: 100%; justify-content: center; }

  /* Stat strip — stack vertically on very narrow screens */
  .mkx-stat-strip { flex-direction: column; gap: 8px; padding: 12px 0; }
  .mkx-stat-strip .dot { display: none; }

  /* Cards */
  .mkx-card { padding: 14px; }
  .mkx-agent-card { padding: 14px; }
  .mkx-card .mkx-card-title { font-size: 1.1rem; }

  /* Pricing */
  .mkx-price { font-size: 1.75rem; }

  /* Testimonial */
  .mkx-testimonial blockquote { font-size: 1.0625rem; }

  /* Footer */
  .mkx-footer { padding: 32px 0 20px; }
  .mkx-footer-grid { gap: 24px; margin-bottom: 24px; }
  .mkx-footer-brand img { width: 120px; }
  .mkx-footer-bottom { padding-top: 16px; font-size: 0.7rem; }

  /* Buttons — full width on small screens */
  .mkx-btn { width: 100%; justify-content: center; }
  .mkx-header-cta { display: none; } /* CTA is in mobile menu */

  /* Tighten inline fixed-width boxes */
  [style*="max-width:"] { max-width: 100% !important; }
  [style*="grid-column:span"],
  [style*="grid-column: span"] { grid-column: 1 / -1 !important; }
  [style*="grid-template-columns:repeat"],
  [style*="grid-template-columns: repeat"] { grid-template-columns: 1fr !important; }

  /* Article */
  .mkx-entry-content { font-size: 0.9375rem; }
  .mkx-entry-content blockquote { font-size: 1.0625rem; }
  .mkx-article-header { margin-bottom: 24px; }
  .mkx-article-hero-frame { margin-bottom: 24px; padding: 6px; }

  /* FAQ */
  .mkx-faq summary { font-size: 1rem; }
  .mkx-faq .answer { font-size: 0.9375rem; }

  /* Forms */
  .mkx-form input, .mkx-form textarea, .mkx-form select { font-size: 16px; } /* prevent iOS zoom */

  /* Pagination */
  .mkx-pagination a, .mkx-pagination span { min-width: 28px; height: 28px; font-size: 0.8rem; }
}