/*
 * Mustafa WP — components: buttons, header, search modal, cards, hero, footer.
 */

/* ---------- Buttons ---------- */
.mwp-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 12px 22px; border-radius: var(--radius-pill);
  font-weight: 700; border: 1px solid transparent;
  transition: transform .15s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  min-height: 44px;
}
.mwp-btn:active { transform: translateY(1px); }
.mwp-btn--primary { background: var(--primary); color: var(--on-primary); }
.mwp-btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.mwp-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.mwp-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.mwp-btn--sm { padding: 8px 16px; min-height: 38px; font-size: var(--fs-sm); }

/* ---------- Header ---------- */
.mwp-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-block-end: 1px solid var(--border);
}
.mwp-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-6);
}
.mwp-brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 900; font-size: 1.25rem; color: var(--text-primary); }
.mwp-brand__mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--accent)); display: grid; place-items: center; color: #fff; }

/* ---------- Native site logo ---------- */
.mwp-brand--custom {
  width: 210px; max-width: 55vw; height: 48px; gap: 0;
}
.mwp-brand__image { width: 100%; height: 100%; object-fit: contain; object-position: center right; }
.mwp-footer .mwp-brand--custom { height: 44px; width: 200px; }
@media (max-width: 560px) { .mwp-brand--custom { width: 165px; height: 40px; } }

.mwp-nav { display: none; }
@media (min-width: 1180px) { .mwp-nav { display: block; margin-inline-end: auto; } }
.mwp-nav ul { list-style: none; display: flex; gap: var(--sp-2); margin: 0; padding: 0; }
.mwp-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-weight: 600;
}
.mwp-nav a:hover, .mwp-nav .current-menu-item > a { color: var(--text-primary); background: var(--surface-sunken); }
.mwp-nav .sr-nav-dropdown-arrow, .mwp-nav svg { opacity: .7; }
/* Dropdown submenus (keyboard + hover accessible) */
.mwp-nav li { position: relative; }
.mwp-nav .sub-menu {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0;
  min-width: 230px; margin: 0; padding: var(--sp-2); list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.mwp-nav li:hover > .sub-menu,
.mwp-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mwp-nav .sub-menu a { display: block; width: 100%; }

/* ---------- Pagination ---------- */
.pagination .nav-links, .navigation .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); font-weight: 600;
}
.page-numbers.current { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.page-numbers:hover:not(.current) { border-color: var(--primary); color: var(--primary); }
.page-numbers.dots { border-color: transparent; background: transparent; }

.mwp-header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
@media (min-width: 1180px) { .mwp-header__actions { margin-inline-start: 0; } }
.mwp-iconbtn {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--border); color: var(--text-primary);
}
.mwp-iconbtn:hover { border-color: var(--primary); color: var(--primary); }
/* Mobile-only search icon: redundant next to the desktop search pill. */
@media (min-width: 768px) { .mwp-iconbtn--mobile-search { display: none; } }
/* Hamburger only until the desktop nav has enough width for the full menu. */
@media (min-width: 1180px) { .mwp-iconbtn--menu { display: none; } }

/* Keep the small-screen header to three essential actions: search, cart, menu. */
@media (max-width: 640px) {
  .mwp-header__inner { gap: 12px; }
  .mwp-header__actions { gap: 6px; }
  .mwp-header__actions > .js-mwp-theme,
  .mwp-header__actions > .mwp-iconbtn--account { display: none; }
}
@media (max-width: 380px) {
  .mwp-brand--custom { width: 140px; height: 38px; }
  .mwp-iconbtn { width: 44px; height: 44px; }
}

.mwp-searchtrigger {
  display: none; flex: 1; min-width: 0; max-width: 340px; align-items: center; gap: var(--sp-2);
  padding: 9px 14px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: var(--fs-sm);
}
@media (min-width: 768px) { .mwp-searchtrigger { display: flex; } }
.mwp-searchtrigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwp-searchtrigger kbd {
  margin-inline-start: auto; font-family: var(--font-mono); font-size: .7rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px;
}

/* ---------- Search modal ---------- */
.mwp-search-modal[hidden] { display: none; }
.mwp-search-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: start center;
  padding-block-start: 12vh;
  background: rgba(7, 11, 20, .55);
  backdrop-filter: blur(4px);
}
.mwp-search-modal__panel {
  width: min(640px, 92vw);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mwp-search-modal__field { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-block-end: 1px solid var(--border); }
.mwp-search-modal__field input {
  flex: 1; border: 0; background: transparent; color: var(--text-primary);
  font-size: 1.05rem; font-family: inherit;
}
.mwp-search-modal__field input:focus { outline: none; }
.mwp-search-results { max-height: 52vh; overflow-y: auto; padding: var(--sp-2); }
.mwp-search-results a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-primary);
}
.mwp-search-results a:hover, .mwp-search-results a.is-active { background: var(--surface-sunken); }
.mwp-search-results .mwp-result__type {
  margin-inline-start: auto; font-size: .72rem; font-weight: 700;
  color: var(--primary); background: var(--primary-soft); padding: 2px 8px; border-radius: var(--radius-pill);
}
.mwp-search-empty { padding: var(--sp-8); text-align: center; color: var(--text-secondary); }

/* ---------- Cards ---------- */
.mwp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.mwp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.mwp-card__media { display: block; aspect-ratio: 16 / 10; background: var(--surface-sunken); }
.mwp-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mwp-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.mwp-card__kicker { font-size: .74rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; }
.mwp-card__title { font-size: 1.1rem; font-weight: 800; }
.mwp-card__title a { color: var(--text-primary); }
.mwp-card__title a:hover { color: var(--primary); }
.mwp-card__excerpt { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.7; }
.mwp-card__meta { margin-block-start: auto; display: flex; gap: var(--sp-2); align-items: center; color: var(--text-secondary); font-size: .78rem; }

/* ---------- Decorative art ---------- */
.mwp-art { display: block; max-width: 100%; height: auto; }
:root[data-theme="dark"] .mwp-art { opacity: .92; }

/* ---------- Hero ---------- */
.mwp-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 8vw, 112px); text-align: center; }
.mwp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.mwp-hero > .mwp-container { position: relative; z-index: 1; }
:root[data-theme="dark"] .mwp-hero__bg { opacity: .5; }

/* Archive hero: text + illustration side by side */
.mwp-hero-archive { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.mwp-hero-archive__text { flex: 1; min-width: 0; }
.mwp-hero-archive__art { width: min(360px, 38%); flex: none; }
@media (max-width: 860px) { .mwp-hero-archive__art { display: none; } }

/* Service hero fallback art */
.mwp-svc-hero__fallback { width: 100%; }
.mwp-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--primary); background: var(--primary-soft);
  padding: 6px 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-sm);
  margin-block-end: var(--sp-6);
}
.mwp-hero h1 { max-width: 16ch; margin-inline: auto; }
.mwp-hero__lead { max-width: 60ch; margin: var(--sp-6) auto 0; color: var(--text-secondary); font-size: 1.15rem; }
.mwp-hero__search { margin: var(--sp-8) auto 0; max-width: 640px; }
.mwp-hero__search button {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: 16px 22px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text-secondary); box-shadow: var(--shadow-sm); font-size: 1.05rem;
}
.mwp-hero__search button:hover { border-color: var(--primary); }

/* ---------- Topic navigator ---------- */
.mwp-topic {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-primary);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.mwp-topic:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--text-primary); }
.mwp-topic__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.mwp-topic__title { font-weight: 800; font-size: 1.05rem; }
.mwp-topic__desc { color: var(--text-secondary); font-size: var(--fs-sm); }

/* ---------- Breadcrumb ---------- */
.mwp-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.mwp-breadcrumb li { display: flex; gap: 8px; align-items: center; }
.mwp-breadcrumb li + li::before { content: "/"; color: var(--border-strong); }
.mwp-breadcrumb a { color: var(--text-secondary); }
.mwp-breadcrumb a:hover { color: var(--primary); }

/* ---------- Footer ---------- */
/* Always a dark band, independent of the site's own light/dark toggle —
 * a common, deliberate footer pattern that anchors the page visually. */
.mwp-footer {
  background: linear-gradient(180deg, var(--mwp-ink) 0%, #0A1120 100%);
  border-block-start: none;
  margin-block-start: var(--sp-24);
  color: rgba(255, 255, 255, .68);
}
.mwp-footer .mwp-brand { color: #fff; }
.mwp-footer .mwp-brand__mark { box-shadow: 0 6px 18px rgba(37, 99, 235, .35); }
/* Safety net: the logo image may bake in dark text/shapes meant for a light
 * header background — a soft light chip keeps it legible on the dark footer
 * regardless of the logo's own colors. */
.mwp-footer .mwp-brand--custom {
  background: rgba(255, 255, 255, .94); border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.mwp-footer__grid { display: grid; gap: var(--sp-8); grid-template-columns: 1.4fr repeat(3, 1fr); padding-block: var(--sp-16); }
@media (max-width: 900px) { .mwp-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mwp-footer__grid { grid-template-columns: 1fr; } }
.mwp-footer h4 {
  position: relative; font-size: .95rem; font-weight: 800; color: #fff;
  margin: 0 0 var(--sp-5); padding-inline-start: var(--sp-3);
}
.mwp-footer h4::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px; background: linear-gradient(var(--primary), var(--accent));
}
.mwp-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.mwp-footer a { color: rgba(255, 255, 255, .62); font-size: var(--fs-sm); transition: color .18s var(--ease), padding-inline-start .18s var(--ease); }
.mwp-footer ul a { display: inline-block; }
.mwp-footer ul a:hover { color: #fff; padding-inline-start: 4px; }
.mwp-footer__summary { max-width: 40ch; margin-block-start: var(--sp-4); color: rgba(255, 255, 255, .55); font-size: var(--fs-sm); line-height: 1.8; }
.mwp-footer__quick { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-block-start: var(--sp-4); }
.mwp-footer__quick li { display: inline-flex; }
.mwp-footer .mwp-footer__quick a {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, .75); font-size: var(--fs-sm); font-weight: 600;
}
.mwp-footer .mwp-footer__quick a:hover { color: var(--accent); }
.mwp-footer__quick svg { color: var(--accent); flex: none; }
.mwp-footer__contact {
  display: inline-flex; align-items: center; gap: 6px; margin-block-start: var(--sp-5);
  color: #fff !important; font-weight: 800;
  background: var(--primary); padding: 10px 18px; border-radius: var(--radius-pill);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.mwp-footer__contact:hover { background: var(--primary-hover) !important; transform: translateY(-2px); }
.mwp-footer__bottom {
  border-block-start: 1px solid rgba(255, 255, 255, .1);
  padding-block: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  color: rgba(255, 255, 255, .45); font-size: var(--fs-sm);
}

/* ---------- Mobile drawer ---------- */
.mwp-drawer[hidden] { display: none; }
.mwp-drawer { position: fixed; inset: 0; z-index: 200; }
.mwp-drawer__scrim { position: absolute; inset: 0; background: rgba(7,11,20,.5); }
.mwp-drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(360px, 90vw); background: var(--surface); border-inline-start: 1px solid var(--border);
  padding: var(--sp-6); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-lg);
}
.mwp-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.mwp-drawer__panel > ul { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: 4px; }
.mwp-drawer__panel .sub-menu { list-style: none; margin: 2px 0 var(--sp-2); padding-inline-start: var(--sp-4); display: grid; gap: 2px; }
.mwp-drawer__panel a { display: block; padding: 11px 14px; border-radius: var(--radius-sm); color: var(--text-primary); font-weight: 600; }
.mwp-drawer__panel a:hover { background: var(--surface-sunken); }
.mwp-drawer__utilities {
  display: grid; gap: 6px; margin-block-start: var(--sp-6); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--border);
}
.mwp-drawer__utility {
  width: 100%; min-height: 46px; display: flex !important; align-items: center; gap: var(--sp-3);
  padding: 10px 14px !important; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary); font: inherit; font-weight: 700; text-align: start; cursor: pointer;
}
.mwp-drawer__utility:hover, .mwp-drawer__utility:focus-visible { background: var(--surface-sunken); border-color: var(--border); }
.mwp-drawer__utility svg { flex: none; color: var(--primary); }

/* ---------- Notices / empty ---------- */
.mwp-notice { padding: var(--sp-4) var(--sp-6); border-radius: var(--radius-md); background: var(--primary-soft); border: 1px solid var(--border); }
.mwp-empty { text-align: center; padding: var(--sp-16) var(--sp-6); color: var(--text-secondary); }
.mwp-empty h2 { color: var(--text-primary); margin-block-end: var(--sp-3); }
.mwp-empty__art { width: min(320px, 80%); margin: 0 auto var(--sp-6); }

/* ---------- Newsletter band ---------- */
.mwp-newsletter {
  display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: var(--sp-8);
  padding: var(--sp-12); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-soft), var(--surface));
  border: 1px solid var(--border);
}
.mwp-newsletter h2 { font-size: 1.7rem; margin-block: var(--sp-2) var(--sp-3); }
.mwp-newsletter__body > p { color: var(--text-secondary); }
.mwp-newsletter__form { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-6); flex-wrap: wrap; }
.mwp-newsletter__form input {
  flex: 1; min-width: 220px; padding: 13px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); font: inherit;
}
.mwp-newsletter__fine { color: var(--text-secondary); font-size: var(--fs-sm); margin-block-start: var(--sp-3); }
.mwp-newsletter__art { text-align: center; }
.mwp-newsletter__art img { width: 100%; max-width: 280px; margin-inline: auto; }
@media (max-width: 780px) {
  .mwp-newsletter { grid-template-columns: 1fr; padding: var(--sp-8); }
  .mwp-newsletter__art { display: none; }
}

/* ---------- Buttons (large) ---------- */
.mwp-btn--lg { padding: 15px 30px; font-size: 1.05rem; min-height: 52px; }

/* ---------- Chips ---------- */
.mwp-chip {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--border);
  color: var(--text-primary); font-weight: 600; font-size: var(--fs-sm);
}

/* ---------- Service card (commercial) ---------- */
.mwp-svc-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.mwp-svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.mwp-svc-card__icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
}
.mwp-svc-card__title { font-size: 1.2rem; font-weight: 800; }
.mwp-svc-card__title a { color: var(--text-primary); }
.mwp-svc-card__title a:hover { color: var(--primary); }
.mwp-svc-card__desc { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.75; flex: 1; }
.mwp-svc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--border); }
.mwp-svc-card__price { color: var(--text-secondary); font-size: var(--fs-sm); }
.mwp-svc-card__price strong { color: var(--text-primary); }
.mwp-svc-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary); }

/* ---------- Service single ---------- */
.mwp-svc-hero { padding-block: var(--sp-12) var(--sp-8); background: linear-gradient(180deg, var(--primary-soft), transparent); }
.mwp-svc-hero--archive { padding-block: var(--sp-16) var(--sp-8); }
.mwp-svc-hero__grid { display: grid; gap: var(--sp-12); align-items: center; margin-block-start: var(--sp-6); }
@media (min-width: 900px) { .mwp-svc-hero__grid { grid-template-columns: 1.1fr .9fr; } }
.mwp-svc-hero__content h1 { margin-block: var(--sp-3); }
.mwp-svc-hero__sub { color: var(--text-secondary); font-size: 1.2rem; max-width: 52ch; }
.mwp-svc-hero__cta { margin-block-start: var(--sp-6); }
.mwp-svc-hero__price { color: var(--text-secondary); }
.mwp-svc-hero__price strong { color: var(--text-primary); font-size: 1.15rem; }
.mwp-svc-hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }

.mwp-svc-block { padding: var(--sp-8); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); }
.mwp-svc-block h2 { font-size: 1.4rem; margin-block-end: var(--sp-3); }
.mwp-svc-block--problem { border-inline-start: 4px solid var(--accent); }
.mwp-svc-block--solution { border-inline-start: 4px solid var(--primary); }
.mwp-svc-block p { color: var(--text-secondary); }

.mwp-svc-deliverables { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .mwp-svc-deliverables { grid-template-columns: 1fr; } }
.mwp-svc-deliverables li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mwp-svc-deliverables li svg { color: var(--primary); flex: none; margin-block-start: 2px; }

.mwp-svc-process-wrap { background: var(--surface-sunken); }
.mwp-svc-process { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-6); }
@media (min-width: 720px) { .mwp-svc-process { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.mwp-svc-step { display: flex; gap: var(--sp-4); align-items: flex-start; }
.mwp-svc-step__num { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--primary); color: var(--on-primary); }
.mwp-svc-step h3 { font-size: 1.1rem; margin-block-end: 4px; }
.mwp-svc-step p { color: var(--text-secondary); font-size: var(--fs-sm); }

.mwp-svc-cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; justify-content: space-between;
  padding: var(--sp-12); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--mwp-ink), #16233d); color: #fff;
}
.mwp-svc-cta h2 { color: #fff; font-size: 1.6rem; }
.mwp-svc-cta p { color: rgba(255,255,255,.82); margin-block-start: var(--sp-2); max-width: 52ch; }
.mwp-svc-cta strong { color: #fff; }
.mwp-svc-cta__note { display: block; font-size: var(--fs-sm); color: rgba(255,255,255,.65); margin-block-start: 4px; }

/* ---------- Accordion (FAQ) ---------- */
.mwp-accordion { display: grid; gap: var(--sp-3); }
.mwp-accordion__item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.mwp-accordion__head { margin: 0; }
.mwp-accordion__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6); background: transparent; text-align: start; font-weight: 700; font-size: 1.05rem; color: var(--text-primary);
}
.mwp-accordion__btn svg { transition: transform .2s var(--ease); flex: none; }
.mwp-accordion__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mwp-accordion__panel { padding: 0 var(--sp-6) var(--sp-6); color: var(--text-secondary); }

/* ---------- Shared bits ---------- */
.mwp-btn--block { width: 100%; justify-content: center; }
.mwp-chip--sm { padding: 4px 12px; font-size: .78rem; }
.mwp-tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.mwp-tick-list li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.mwp-tick-list li svg { color: var(--primary); flex: none; margin-block-start: 4px; }
.mwp-side-card { padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.mwp-side-card h3 { font-size: 1.05rem; margin-block-end: var(--sp-3); }

.mwp-filterbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mwp-filterbar__chip {
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary); font-weight: 600; font-size: var(--fs-sm);
}
.mwp-filterbar__chip:hover { border-color: var(--primary); color: var(--primary); }
.mwp-filterbar__chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.mwp-proscons { display: grid; gap: var(--sp-6); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .mwp-proscons { grid-template-columns: 1fr; } }
.mwp-proscons__col { padding: var(--sp-6); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); }
.mwp-proscons__col h3 { font-size: 1.1rem; margin-block-end: var(--sp-3); }
.mwp-proscons__col ul { margin: 0; }
.mwp-proscons__col--pro { border-inline-start: 4px solid #16a34a; }
.mwp-proscons__col--con { border-inline-start: 4px solid #dc2626; }

/* ---------- AI directory ---------- */
.mwp-ai-hero { padding-block: var(--sp-12) var(--sp-6); background: linear-gradient(180deg, var(--primary-soft), transparent); }
.mwp-ai-hero--archive { padding-block: var(--sp-16) var(--sp-8); }
.mwp-ai-hero__card { display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; margin-block-start: var(--sp-6); }
.mwp-ai-hero__logo { width: 72px; height: 72px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--primary); }
.mwp-ai-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.mwp-ai-hero__meta { flex: 1; min-width: 220px; }
.mwp-ai-hero__meta h1 { margin-block: 4px; }
.mwp-ai-hero__facts { color: var(--text-secondary); font-size: var(--fs-sm); }
.mwp-ai-hero__facts span { display: inline-flex; align-items: center; gap: 6px; }
.mwp-ai-hero__aside { display: flex; align-items: center; gap: var(--sp-4); }
.mwp-ai-hero__score { text-align: center; line-height: 1; }
.mwp-ai-hero__score strong { font-size: 2rem; color: var(--primary); }
.mwp-ai-hero__score span { display: block; color: var(--text-secondary); font-size: .8rem; }

.mwp-ai-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.mwp-ai-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.mwp-ai-card__head { display: flex; gap: var(--sp-3); align-items: center; }
.mwp-ai-card__logo { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-sunken); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--primary); }
.mwp-ai-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.mwp-ai-card__title { font-size: 1.1rem; font-weight: 800; }
.mwp-ai-card__title a { color: var(--text-primary); }
.mwp-ai-card__dev { color: var(--text-secondary); font-size: .8rem; }
.mwp-ai-card__score { margin-inline-start: auto; font-weight: 800; color: var(--primary); background: var(--primary-soft); border-radius: var(--radius-pill); padding: 4px 12px; }
.mwp-ai-card__desc { color: var(--text-secondary); font-size: var(--fs-sm); flex: 1; }
.mwp-ai-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--border); }

/* ---------- Comparison ---------- */
.mwp-cmp-hero { padding-block: var(--sp-12) var(--sp-8); }
.mwp-cmp-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); align-items: center; margin-block-start: var(--sp-8); }
.mwp-cmp-versus__side { text-align: center; padding: var(--sp-8) var(--sp-6); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); position: relative; }
.mwp-cmp-versus__side.is-winner { border-color: var(--primary); box-shadow: var(--shadow-md); }
.mwp-cmp-versus__side h2 { font-size: 1.5rem; }
.mwp-cmp-versus__price { color: var(--text-secondary); }
.mwp-cmp-versus__x { font-weight: 800; color: var(--text-secondary); background: var(--surface-sunken); border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; }
.mwp-cmp-badge { display: inline-block; margin-block-start: var(--sp-3); font-size: .74rem; font-weight: 700; color: var(--on-primary); background: var(--primary); padding: 3px 12px; border-radius: var(--radius-pill); }
@media (max-width: 560px) {
  .mwp-cmp-versus { grid-template-columns: 1fr; }
  .mwp-cmp-versus__x { margin-inline: auto; }
}

.mwp-cmp-verdict { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); border-radius: var(--radius-md); background: var(--primary-soft); border: 1px solid var(--border); }
.mwp-cmp-verdict strong { color: var(--primary); }

.mwp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.mwp-cmp-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.mwp-cmp-table th, .mwp-cmp-table td { padding: var(--sp-3) var(--sp-4); text-align: start; border-block-end: 1px solid var(--border); }
.mwp-cmp-table thead th { background: var(--surface-sunken); font-weight: 800; }
.mwp-cmp-table tbody th { font-weight: 700; color: var(--text-secondary); background: var(--surface); }
.mwp-cmp-table tbody tr:last-child th, .mwp-cmp-table tbody tr:last-child td { border-block-end: 0; }

.mwp-cmp-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.mwp-cmp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.mwp-cmp-card__vs { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); font-weight: 800; color: var(--text-primary); }
.mwp-cmp-card__x { font-size: .74rem; color: var(--text-secondary); background: var(--surface-sunken); border-radius: var(--radius-pill); padding: 2px 10px; }
.mwp-cmp-card__title { font-size: 1.05rem; font-weight: 800; text-align: center; }
.mwp-cmp-card__title a { color: var(--text-primary); }
.mwp-cmp-card__title a:hover { color: var(--primary); }

/* ---------- Row head (homepage sections) ---------- */
.mwp-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.mwp-row-head__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary); white-space: nowrap; }

/* ---------- Tools Lab ---------- */
.mwp-chip--soon { background: #fef3c7; color: #92400e; border-color: #fde68a; }
:root[data-theme="dark"] .mwp-chip--soon { background: #3a2e12; color: #fcd34d; border-color: #5a4718; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mwp-chip--soon { background: #3a2e12; color: #fcd34d; border-color: #5a4718; }
}

.mwp-tool-card { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.mwp-tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.mwp-tool-card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; }
.mwp-tool-card__body { flex: 1; min-width: 0; }
.mwp-tool-card__title { font-size: 1.1rem; font-weight: 800; }
.mwp-tool-card__title a { color: var(--text-primary); }
.mwp-tool-card__title a:hover { color: var(--primary); }
.mwp-tool-card__desc { color: var(--text-secondary); font-size: var(--fs-sm); }
.mwp-tool-card__go { color: var(--primary); flex: none; }

.mwp-tool-hero { padding-block: var(--sp-12) var(--sp-6); background: linear-gradient(180deg, var(--primary-soft), transparent); }
.mwp-tool-hero__head { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin-block-start: var(--sp-6); }
.mwp-tool-hero__icon { width: 64px; height: 64px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--primary); display: grid; place-items: center; flex: none; }
.mwp-tool-hero__head > div { flex: 1; min-width: 220px; }
.mwp-tool-hero__sub { color: var(--text-secondary); font-size: 1.1rem; }
.mwp-tool-app { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--sp-8); box-shadow: var(--shadow-sm); }
.mwp-tool-app.is-disabled { opacity: .6; pointer-events: none; }
.mwp-numbered { margin: 0; padding-inline-start: 1.2em; display: grid; gap: var(--sp-2); color: var(--text-secondary); }

/* ---------- Case study metrics ---------- */
.mwp-cs-hero { padding-block: var(--sp-12) var(--sp-6); }
.mwp-cs-hero__facts { margin-block-start: var(--sp-4); }
.mwp-metric { padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); text-align: center; }
.mwp-metric__label { display: block; color: var(--text-secondary); font-size: var(--fs-sm); margin-block-end: var(--sp-3); }
.mwp-metric__values { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.mwp-metric__before { color: var(--text-secondary); text-decoration: line-through; }
.mwp-metric__after { color: var(--primary); font-size: 1.5rem; font-weight: 800; }
.mwp-metric__values svg { color: var(--text-secondary); }

/* ---------- Table of contents ---------- */
.mwp-toc { position: sticky; top: calc(var(--header-h) + var(--sp-4)); padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.mwp-toc__title { font-size: 1rem; margin-block-end: var(--sp-3); }
.mwp-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mwp-toc__item a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-sm); border-inline-start: 2px solid transparent; }
.mwp-toc__item--h3 a { padding-inline-start: 22px; font-size: .82rem; }
.mwp-toc__item a:hover { color: var(--text-primary); background: var(--surface-sunken); }
.mwp-toc__item a.is-active { color: var(--primary); border-inline-start-color: var(--primary); background: var(--primary-soft); font-weight: 600; }

/* ---------- Author box ---------- */
.mwp-author-box { display: flex; gap: var(--sp-4); align-items: flex-start; margin-block-start: var(--sp-12); padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); }
.mwp-author-box__avatar img { width: 72px; height: 72px; border-radius: 50%; }
.mwp-author-box__eyebrow { color: var(--primary); font-weight: 700; font-size: .74rem; }
.mwp-author-box__name { font-size: 1.15rem; margin-block: 2px var(--sp-2); }
.mwp-author-box__body p { color: var(--text-secondary); font-size: var(--fs-sm); margin-block-end: var(--sp-2); }
.mwp-author-box__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }

/* ---------- Editorial components (block patterns) ---------- */
.mwp-answer {
  padding: var(--sp-6); border-radius: var(--radius-md);
  background: var(--primary-soft); border: 1px solid var(--border);
  border-inline-start: 4px solid var(--primary);
}
.mwp-answer > *:first-child { margin-block-start: 0; }
.mwp-answer .mwp-answer__label { font-weight: 800; color: var(--primary); font-size: var(--fs-sm); }

.mwp-takeaways {
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border);
}
.mwp-takeaways h3 { font-size: 1.05rem; margin-block-end: var(--sp-3); }

.mwp-callout {
  padding: var(--sp-4) var(--sp-6); border-radius: var(--radius-md);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-inline-start: 4px solid var(--text-secondary);
}
.mwp-callout > *:first-child { margin-block-start: 0; }
.mwp-callout > *:last-child { margin-block-end: 0; }
.mwp-callout--tip { background: #ecfdf5; border-inline-start-color: #16a34a; }
.mwp-callout--warning { background: #fef2f2; border-inline-start-color: #dc2626; }
.mwp-callout--info { background: var(--primary-soft); border-inline-start-color: var(--primary); }
:root[data-theme="dark"] .mwp-callout--tip { background: #0e2519; }
:root[data-theme="dark"] .mwp-callout--warning { background: #2a1414; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mwp-callout--tip { background: #0e2519; }
  :root:not([data-theme="light"]) .mwp-callout--warning { background: #2a1414; }
}

/* Block styles */
.wp-block-quote.is-style-mwp-callout {
  padding: var(--sp-4) var(--sp-6); border-radius: var(--radius-md);
  background: var(--primary-soft); border: 1px solid var(--border);
  border-inline-start: 4px solid var(--primary); font-style: normal;
}
.wp-block-table.is-style-mwp-compare table { border-collapse: collapse; width: 100%; }
.wp-block-table.is-style-mwp-compare th,
.wp-block-table.is-style-mwp-compare td { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); text-align: start; }
.wp-block-table.is-style-mwp-compare thead th { background: var(--surface-sunken); font-weight: 800; }

/* ---------- Article body ---------- */
.mwp-prose { font-size: var(--fs-body); }
.mwp-prose > * + * { margin-block-start: var(--sp-6); }
.mwp-prose h2 { margin-block-start: var(--sp-12); }
.mwp-prose h3 { margin-block-start: var(--sp-8); }
.mwp-prose img { border-radius: var(--radius-md); }
.mwp-prose blockquote {
  border-inline-start: 4px solid var(--primary);
  padding-inline-start: var(--sp-4); color: var(--text-secondary); font-style: italic;
}

/* ============================================================
 * Root-cause fix for a real horizontal-overflow bug: some article
 * bodies contain table markup pasted from an external AI-chat export
 * (classes like "_tableWrapper_xxxxx", "w-fit", "min-w-(--thread-
 * content-width)") that ignores this theme entirely and forces the
 * whole page wider than the viewport on mobile. Rather than hiding the
 * symptom with a page-level overflow-x:hidden (removed from base.css),
 * contain the actual offending element: force any such wrapper (and any
 * plain table) inside article content to scroll horizontally within
 * its own box instead of expanding the page.
 * ============================================================ */
.entry-content table,
.mwp-prose table {
  display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-collapse: collapse; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.entry-content th,
.entry-content td,
.mwp-prose th,
.mwp-prose td {
  padding: 12px 16px; border: 1px solid var(--border); text-align: start; vertical-align: top;
}
.entry-content thead th,
.mwp-prose thead th {
  background: var(--surface-sunken); color: var(--text-primary); font-weight: 800;
}
.entry-content tbody tr:nth-child(even),
.mwp-prose tbody tr:nth-child(even) {
  background: var(--surface-sunken);
}
.entry-content [class*="_tableWrapper_"],
.entry-content [class*="_tableContainer_"],
.mwp-prose [class*="_tableWrapper_"],
.mwp-prose [class*="_tableContainer_"] {
  width: 100% !important; max-width: 100% !important;
  overflow-x: auto !important; -webkit-overflow-scrolling: touch;
}
.entry-content [class*="_tableWrapper_"] table,
.mwp-prose [class*="_tableWrapper_"] table {
  width: max-content; min-width: 100%;
}
/* Scoped (not page-level) containment: a few px of foreign pasted markup
 * can still leak past its own scroll box due to table intrinsic-sizing
 * quirks. This clips only the article content column itself — unlike a
 * global html/body overflow-x:hidden, it cannot mask a real bug anywhere
 * else on the site. */
.entry-content, .mwp-prose { overflow-x: clip; max-width: 100%; }