/* Self-hosted Google Fonts (OFL): Plus Jakarta Sans + JetBrains Mono, variable 400–700. Generated from fonts.googleapis.com css2. */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jetbrains-mono-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jakarta-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jakarta-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jakarta-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Maytapi design system — derived from "Maytapi Home v4"
   Prefix: mp-  (avoids collisions with Bootstrap utilities such as .mt-*)
   ========================================================================== */

:root {
	--mp-ink: #16232a;
	--mp-ink-2: #3d4a50;
	--mp-muted: #566066;
	--mp-faint: #66737a;
	--mp-line: #e2e8eb;
	--mp-line-2: #c8d2d6;
	--mp-bg: #ffffff;
	--mp-soft: #f7f9fa;
	--mp-mist: #edf1f4;

	--mp-blue: #3b4fe4;
	--mp-blue-hover: #2e3fcb;
	--mp-blue-t: #e7eafc;
	--mp-blue-t2: #eff2fe;
	--mp-wa: #0f766e;
	--mp-wa-t: #e1f2ef;
	--mp-wa-bright: #25d366;
	--mp-teal: #0f6b6b;
	--mp-teal-t: #e9f4f4;
	--mp-green: #0e7a4a;
	--mp-green-t: #e4f5eb;
	--mp-amber: #9a5b08;
	--mp-amber-t: #fbefdc;
	--mp-red: #9a2121;
	--mp-red-t: #fbeaea;

	--mp-dark: #14212a;
	--mp-dark-2: #1c2b33;
	--mp-dark-line: #31464f;
	--mp-code: #dce6e4;
	--mp-code-key: #8fb8c9;
	--mp-code-dim: #7a8d95;
	--mp-code-gutter: #7f949c;
	--mp-dark-muted: #b4c4c9;
	--mp-orange: #e8a33d;

	--mp-r-sm: 10px;
	--mp-r: 16px;
	--mp-r-lg: 24px;
	--mp-shadow-sm: 0 1px 2px rgba(22, 42, 48, 0.05), 0 10px 30px rgba(22, 42, 48, 0.06);
	--mp-shadow-lg: 0 20px 48px rgba(22, 42, 48, 0.18);

	--mp-sans: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
	--mp-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--mp-ease: cubic-bezier(0.22, 0.7, 0.3, 1);
}

/* Tones: set --tone / --tone-bg on any component */
.tone-blue { --tone: var(--mp-blue); --tone-bg: var(--mp-blue-t); }
.tone-teal { --tone: var(--mp-teal); --tone-bg: var(--mp-teal-t); }
.tone-green { --tone: var(--mp-green); --tone-bg: var(--mp-green-t); }
.tone-amber { --tone: var(--mp-amber); --tone-bg: var(--mp-amber-t); }
.tone-red { --tone: var(--mp-red); --tone-bg: var(--mp-red-t); }
.tone-wa { --tone: var(--mp-wa); --tone-bg: var(--mp-wa-t); }

/* --------------------------------------------------------------------------
   Base — neutralise legacy globals (app.scss sets zoom + overflow on body,
   which breaks position:sticky)
   -------------------------------------------------------------------------- */
html,
body.mp {
	zoom: 1 !important;
	height: auto;
	overflow-x: visible;
}
body.mp {
	margin: 0;
	background: var(--mp-bg);
	color: var(--mp-ink);
	font-family: var(--mp-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	min-height: 100vh;
}
body.mp ::selection { background: #d3e4dc; color: var(--mp-ink); }
body.mp :where(h1, h2, h3, h4, h5, h6):where(:not(.swagger-ui *)) {
	font-family: var(--mp-sans);
	color: var(--mp-ink);
	font-weight: 700;
	letter-spacing: -0.02em;
}
body.mp a:where(:not(.btn, .swagger-ui *)) { color: var(--mp-blue); text-decoration: none; }
body.mp a:where(:not(.btn)):hover:where(:not(.swagger-ui *)) { color: var(--mp-blue-hover); text-decoration: none; }
body.mp code, body.mp pre, body.mp kbd { font-family: var(--mp-mono); }

/* Reset inside new components only, so legacy pages keep Bootstrap spacing.
   .mp-x (0,1,0) must outrank Bootstrap's bare p, h1-h6, ul rules (0,0,1); component
   classes declared later in this file still win at equal specificity. */
.mp-x :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, pre, table, form, blockquote) { margin: 0; }
.mp-x :where(ul, ol) { padding: 0; list-style: none; }
:where(.mp-x) table { border-collapse: collapse; width: 100%; }
:where(.mp-x) *, :where(.mp-x) *::before, :where(.mp-x) *::after { box-sizing: border-box; }
:where(.mp-x) button { font: inherit; }
.mp-x a:focus-visible, .mp-x button:focus-visible, .mp-x input:focus-visible, .mp-x summary:focus-visible {
	outline: 2px solid var(--mp-blue);
	outline-offset: 2px;
}

.mp-mono { font-family: var(--mp-mono); }
.mp-x img { max-width: 100%; height: auto; }
/* values the legacy Bootstrap/app CSS used to give; set here so pages without those files (home) look identical */
.mp-x :where(h1, h2, h3, h4, h5, h6) { line-height: 1.2; }
.mp-input { line-height: 1.5; }
@media (max-width: 1000px) { .mp-header .mp-login { margin-block: 5px; } }
.mp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.mp-wrap { max-width: 1320px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.mp-sec { padding-top: 84px; padding-bottom: 84px; }
.mp-sec--flush-top { padding-top: 8px; }
.mp-sec--cta { padding-top: 64px; }
.mp-bg-soft { background: var(--mp-soft); }
.mp-bg-mist { background: var(--mp-mist); }
.mp-bg-dark { background: var(--mp-dark); color: #fff; }
.mp-bd-y { border-top: 1px solid var(--mp-line); border-bottom: 1px solid var(--mp-line); }
.mp-bd-b { border-bottom: 1px solid var(--mp-line); }

.mp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.mp-split--top { align-items: start; }
.mp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mp-min0 { min-width: 0; }

.mp-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.mp-sec-head--center { display: block; text-align: center; }
/* the lead sits under the heading instead of floating at the far right */
.mp-sec-head:has(> .mp-lead) > :first-child { flex: 0 0 100%; }
.mp-sec-head:has(> .mp-lead) .mp-eyebrow { max-width: 460px; }
.mp-sec-head > .mp-lead { margin-top: -14px !important; }
.mp-sec-head__link { font-size: 15px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.mp-h1 { font-size: 54px; line-height: 1.08; max-width: 18ch; }
.mp-h1--sm { font-size: 48px; max-width: 16ch; }
.mp-h2 { font-size: 34px; line-height: 1.2; margin-top: 14px; max-width: 22ch; }
.mp-h2--lg { font-size: 38px; line-height: 1.16; }
.mp-center { text-align: center; margin-left: auto; margin-right: auto; }
.mp-lead { font-size: 16px; line-height: 1.7; color: var(--mp-muted); margin-top: 18px; max-width: 52ch; }
.mp-lead--wide { max-width: 60ch; }
.mp-body { font-size: 15px; line-height: 1.65; color: var(--mp-muted); }
.mp-dark-lead { color: var(--mp-dark-muted); }

/* Section label: "01 / FEATURES" + gradient rule */
.mp-eyebrow { display: flex; align-items: center; gap: 14px; }
.mp-eyebrow--center { max-width: 460px; margin: 0 auto 4px; }
.mp-eyebrow__tag {
	flex: none;
	font-family: var(--mp-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tone, var(--mp-blue));
	background: var(--tone-bg, var(--mp-blue-t));
	padding: 5px 10px;
	border-radius: 6px;
}
/* Native language names of other languages (Română, Русский…) use the system font, so an English page
   doesn't download the latin-ext / cyrillic web fonts for one word (it sat on the mobile LCP path). */
.mp-native { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.mp-updated { margin-top: 14px; font-family: var(--mp-mono); font-size: 12px; color: var(--mp-muted); }
.mp-bg-dark .mp-updated { color: #a7b8bf; }
.mp-step__num[data-n]::before { content: "[ " attr(data-n) " ]"; }
.mp-eyebrow__tag[data-n]::before { content: attr(data-n) " / "; }
.mp-eyebrow__rule {
	flex: 1;
	min-width: 24px;
	height: 1px;
	display: block;
	background: linear-gradient(90deg, var(--tone, var(--mp-blue)), var(--mp-line));
	transform-origin: left;
	transition: transform 0.7s 0.12s var(--mp-ease);
}
.mp-bg-dark .mp-eyebrow__tag { color: var(--mp-green); background: #e4f7ea; }
.mp-bg-dark .mp-eyebrow__rule { background: linear-gradient(90deg, var(--mp-wa-bright), var(--mp-line)); }

/* --------------------------------------------------------------------------
   Buttons, pills, chips
   -------------------------------------------------------------------------- */
.mp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 48px;
	padding: 0 22px;
	border-radius: var(--mp-r-sm);
	border: 1px solid transparent;
	font-family: var(--mp-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.mp .mp-btn--primary, body.mp .mp-btn--primary:visited { background: var(--mp-blue); color: #fff; }
body.mp .mp-btn--primary:hover { background: var(--mp-blue-hover); color: #fff; }
body.mp .mp-btn--ghost, body.mp .mp-btn--ghost:visited { background: #fff; border-color: var(--mp-line); color: var(--mp-ink); }
body.mp .mp-btn--ghost:hover { border-color: var(--mp-ink); color: var(--mp-ink); }
.mp-btn--lg { height: 52px; padding: 0 26px; font-size: 16px; }
.mp-btn--md { height: 46px; }
.mp-btn--sm { height: 42px; padding: 0 20px; }
.mp-btn--block { display: flex; width: 100%; }
.mp-btn__code { font-family: var(--mp-mono); font-size: 13px; opacity: 0.7; }

.mp-pill {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--tone-bg, var(--mp-green-t));
	color: var(--tone, var(--mp-green));
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.mp-pill--sm { min-height: 24px; padding: 3px 10px; font-size: 12px; }
.mp-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.mp-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r-sm);
	font-family: var(--mp-mono);
	font-size: 12px;
	color: var(--mp-muted);
}
.mp-chip--ink { color: var(--mp-ink); }
.mp-chip__sep { color: var(--mp-line-2); }

.mp-tile {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: var(--mp-r-sm);
	background: var(--tone-bg, var(--mp-blue-t));
	color: var(--tone, var(--mp-blue));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mp-mono);
	font-size: 13px;
}

.mp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mp-wa); flex: none; animation: mp-dot 2s ease-in-out infinite; }
.mp-dot--sm { width: 6px; height: 6px; }
.mp-dot--bright { background: var(--mp-wa-bright); }

/* Check list */
.mp-checks { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.mp-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--mp-ink); }
.mp-checks--sm li { font-size: 15px; }
.mp-checks__icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: #e3f3ea;
	color: var(--mp-green);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Cards */
.mp-card {
	display: block;
	background: #fff;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r);
	padding: 26px;
	color: var(--mp-ink);
}
.mp-card--soft { background: var(--mp-soft); }
.mp-card--shadow { box-shadow: var(--mp-shadow-sm); }
.mp-lift { transition: transform 0.18s ease, border-color 0.18s ease; }
.mp-lift:hover { transform: translateY(-3px); border-color: var(--tone, var(--mp-blue)); }
body.mp a.mp-card, body.mp a.mp-card:hover { color: var(--mp-ink); }
.mp-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mp-card__meta { font-family: var(--mp-mono); font-size: 12px; color: var(--mp-faint); }
.mp-card__title { display: block; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--mp-ink); margin-top: 18px; }
.mp-card__text { display: block; font-size: 15px; line-height: 1.65; color: var(--mp-muted); margin-top: 10px; }
.mp-card__code { font-family: var(--mp-mono); font-size: 12px; color: var(--tone, var(--mp-blue)); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
/* in-page links (#pricing, #faq…) land below the sticky header */
html { scroll-padding-top: 76px; }
.mp-header { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--mp-line); }
.mp-header__bar { height: 72px; display: flex; align-items: center; gap: 36px; }
.mp-logo { display: flex; align-items: center; gap: 10px; flex: none; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
body.mp .mp-logo, body.mp .mp-logo:hover { color: var(--mp-ink); }
.mp-logo__img { display: block; width: 30px; height: 30px; flex: none; }
.mp-nav { display: flex; align-items: center; gap: 26px; flex: 1; min-width: 0; }
body.mp .mp-nav__link { color: var(--mp-muted); font-size: 15px; font-weight: 500; white-space: nowrap; }
body.mp .mp-nav__link:hover, body.mp .mp-nav__link.is-active { color: var(--mp-ink); }
.mp-nav__item { position: relative; display: flex; align-items: center; height: 72px; }
.mp-nav__btn {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	color: var(--mp-ink-2);
}
.mp-nav__btn:hover, .mp-nav__item.is-open .mp-nav__btn { color: var(--mp-ink); }
.mp-caret { font-family: var(--mp-mono); font-size: 11px; transition: transform 0.15s ease; }
.mp-nav__item.is-open .mp-caret { transform: rotate(180deg); }

.mp-mega {
	display: none;
	position: absolute;
	top: 72px;
	left: -24px;
	width: min(980px, calc(100vw - 280px));
	background: #fff;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r);
	box-shadow: var(--mp-shadow-lg);
	padding: 28px;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	animation: mp-pop 0.18s ease-out both;
}
.mp-nav__item.is-open .mp-mega { display: grid; }
/* Products: the API cards only; Solutions / Developers: short columns centred under their button */
.mp-mega--products { grid-template-columns: minmax(0, 1fr); width: min(860px, calc(100vw - 280px)); }
.mp-mega--products .mp-mega__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-mega--solutions, .mp-mega--dev { --w: min(520px, calc(100vw - 280px)); width: var(--w); left: 50%; margin-left: calc(var(--w) / -2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-nav__btn.is-active { color: var(--mp-ink); }
.mp-mega__label { font-family: var(--mp-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--mp-faint); text-transform: uppercase; }
.mp-mega__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin-top: 14px; }  /* every card as tall as the tallest */
.mp-mega__card { display: block; height: 100%; border: 1px solid var(--mp-line); border-radius: var(--mp-r); padding: 14px 16px; background: #fff; transition: border-color 0.15s ease; }
.mp-mega__card:hover { border-color: var(--mp-blue); }
.mp-mega__code { display: block; font-family: var(--mp-mono); font-size: 12px; color: var(--tone, var(--mp-blue)); }
.mp-mega__title { display: block; font-size: 15px; font-weight: 600; color: var(--mp-ink); margin-top: 6px; }
.mp-mega__desc { display: block; font-size: 13px; line-height: 1.5; color: var(--mp-muted); margin-top: 3px; }
.mp-mega__list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
body.mp .mp-mega__list a { font-size: 15px; color: var(--mp-muted); }
body.mp .mp-mega__list a:hover { color: var(--mp-ink); }
.mp-mega__langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
body.mp .mp-mega__lang {
	height: 28px;
	display: inline-flex;
	align-items: center;
	padding: 0 11px;
	border: 1px solid var(--mp-line);
	border-radius: 999px;
	font-family: var(--mp-mono);
	font-size: 12px;
	color: var(--mp-muted);
}
body.mp .mp-mega__lang:hover { border-color: var(--mp-blue); color: var(--mp-blue); }

.mp-header__right { display: flex; align-items: center; gap: 20px; flex: none; }
body.mp .mp-status { display: flex; align-items: center; gap: 8px; font-family: var(--mp-mono); font-size: 13px; color: var(--mp-muted); }
body.mp .mp-status:hover { color: var(--mp-ink); }
body.mp .mp-login { font-size: 15px; font-weight: 500; color: var(--mp-ink); }
body.mp .mp-login:hover { color: var(--mp-muted); }

/* Language switcher */
.mp-lang { position: relative; }
.mp-lang__btn {
	appearance: none;
	height: 34px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r-sm);
	background: #fff;
	font-family: var(--mp-mono);
	font-size: 12px;
	color: var(--mp-muted);
	cursor: pointer;
}
.mp-lang__btn:hover, .mp-lang.is-open .mp-lang__btn { border-color: var(--mp-ink); color: var(--mp-ink); }
.mp-lang__menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 180px;
	background: #fff;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r);
	box-shadow: var(--mp-shadow-lg);
	padding: 8px;
	animation: mp-pop 0.18s ease-out both;
}
.mp-lang.is-open .mp-lang__menu { display: block; }
body.mp .mp-lang__menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--mp-ink);
}
body.mp .mp-lang__menu a:hover { background: var(--mp-soft); }
body.mp .mp-lang__menu a.is-active { background: var(--mp-blue-t2); color: var(--mp-blue); }
.mp-lang__code { font-family: var(--mp-mono); font-size: 12px; color: var(--mp-blue); width: 18px; }

/* Announcement bar (above the sticky header) */
.mp-announce { background: var(--mp-dark); color: #fff; font-size: 14px; }
.mp-announce[hidden] { display: none; }
.mp-announce__bar { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; padding-top: 8px; padding-bottom: 8px; }
body.mp .mp-announce__body { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 10px; color: #fff; text-align: center; padding: 0 28px; }
.mp-announce__badge { font-family: var(--mp-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: var(--mp-blue); border-radius: 999px; padding: 2px 9px; }
.mp-announce__badge:empty { display: none; }
.mp-announce__text { color: #dfe7ea; }
.mp-announce__cta { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.mp .mp-announce__body:hover .mp-announce__cta { color: var(--mp-code-key); }
.mp-announce__close { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); appearance: none; border: 0; background: none; color: #9fb0b7; font-size: 20px; line-height: 1; width: 28px; height: 28px; cursor: pointer; }
.mp-announce__close:hover { color: #fff; }

/* "Your language" suggestion, pinned under the language switcher */
.mp-langtip-wrap { position: relative; height: 0; }
.mp-langtip {
	position: absolute;
	right: 32px;
	top: 10px;
	z-index: 2;
	max-width: 460px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 44px 14px 18px;
	background: #fff;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r);
	box-shadow: var(--mp-shadow-lg);
	animation: mp-pop 0.18s ease-out both;
}
.mp-langtip[hidden] { display: none; }
.mp-langtip__text { font-size: 14px; line-height: 1.5; color: var(--mp-ink); }
.mp-langtip .mp-btn { flex: none; white-space: nowrap; }
.mp-langtip__close { position: absolute; right: 8px; top: 8px; appearance: none; border: 0; background: none; color: var(--mp-faint); font-size: 18px; line-height: 1; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; }
.mp-langtip__close:hover { background: var(--mp-soft); color: var(--mp-ink); }
@media (max-width: 720px) {
	.mp-announce__close { right: 6px; }
	/* phones: badge and text on a single row, cut with an ellipsis; the whole bar is the link, so the arrow replaces "Learn more" */
	.mp-announce { font-size: 13px; line-height: 1.4; }
	.mp-announce__bar { min-height: 0; justify-content: flex-start; padding-top: 8px; padding-bottom: 8px; }
	body.mp .mp-announce__body { flex-wrap: nowrap; justify-content: flex-start; text-align: left; gap: 10px; padding: 0 30px 0 0; }
	.mp-announce__badge { flex: none; font-size: 10px; }
	body.mp .mp-announce__body { min-width: 0; }
	.mp-announce__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.mp-announce__cta { display: none; }
	body.mp .mp-announce__body::after { content: '→'; flex: none; color: #fff; }
	/* phones: a bottom sheet instead of a card over the hero headline */
	.mp-langtip { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1040; max-width: none; gap: 10px; padding: 10px 40px 10px 14px; }
	.mp-langtip__text { font-size: 13px; line-height: 1.4; }
}

.mp-burger {
	display: none;
	margin-left: auto;
	align-items: center;
	height: 42px;
	padding: 0 16px;
	background: none;
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r-sm);
	color: var(--mp-ink);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
.mp-mobile { display: none; border-top: 1px solid var(--mp-line); padding: 8px 20px 24px; max-height: calc(100vh - 72px); overflow-y: auto; }
.mp-header.is-mobile-open .mp-mobile { display: block; }
.mp-mobile__group { border-bottom: 1px solid var(--mp-line); padding: 8px 0; }
.mp-mobile__label { font-family: var(--mp-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mp-faint); text-transform: uppercase; padding: 10px 0 4px; }
body.mp .mp-mobile a.mp-mobile__link { display: block; padding: 10px 0; color: var(--mp-ink); font-size: 17px; font-weight: 500; }
body.mp .mp-mobile a.mp-mobile__sub { display: block; padding: 7px 0; color: var(--mp-muted); font-size: 15px; }
.mp-mobile__langs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.mp-mobile__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.mp-footer { background: var(--mp-soft); border-top: 1px solid var(--mp-line); color: var(--mp-ink); }
.mp-foot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px 32px; padding-top: 84px; }
.mp-foot--2 { padding-top: 56px; }
.mp-foot__col { min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.mp-foot__label { font-family: var(--mp-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--tone, var(--mp-blue)); text-transform: uppercase; }
body.mp .mp-foot__col a { font-size: 15px; line-height: 1.5; color: var(--mp-muted); }
body.mp .mp-foot__col a:hover { color: var(--mp-ink); }
.mp-foot__cta { grid-column: span 1; min-width: 0; background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-r); padding: 24px; }
.mp-foot__cta-title { font-size: 16px; line-height: 1.55; font-weight: 600; margin-top: 10px; }
.mp-foot__cta-text { font-size: 15px; line-height: 1.6; color: var(--mp-muted); margin-top: 8px; }
.mp-foot__ok { display: flex; align-items: center; gap: 8px; font-family: var(--mp-mono); font-size: 12px; color: var(--mp-muted); margin-top: 14px; }
.mp-foot__bottom { padding-top: 56px; padding-bottom: 40px; }
.mp-foot__bar { border-top: 1px solid var(--mp-line); padding-top: 28px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
.mp-foot__copy { font-family: var(--mp-mono); font-size: 12px; color: var(--mp-faint); margin-top: 14px; }
.mp-foot__legal { font-size: 13px; line-height: 1.7; color: var(--mp-muted); max-width: 62ch; margin-top: 8px; }
.mp-foot__social { display: flex; gap: 10px; flex: none; }
body.mp .mp-foot__social a {
	width: 34px;
	height: 34px;
	border-radius: var(--mp-r-sm);
	border: 1px solid var(--mp-line);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mp-mono);
	font-size: 12px;
	color: var(--mp-muted);
}
body.mp .mp-foot__social a:hover { border-color: var(--mp-blue); color: var(--mp-blue); }

/* --------------------------------------------------------------------------
   Home — hero
   -------------------------------------------------------------------------- */
.mp-hero { background: var(--mp-soft); border-bottom: 1px solid var(--mp-line); overflow: hidden; }
.mp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding-top: 84px; padding-bottom: 96px; }
.mp-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	padding: 5px 14px 5px 6px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--mp-line);
	color: var(--mp-muted);
	font-size: 13px;
	font-weight: 500;
}
.mp-hero__badge-tag {
	flex: none;
	min-height: 22px;
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--mp-wa);
	color: #fff;
	font-family: var(--mp-mono);
	font-size: 11px;
	font-weight: 500;
}
.mp-hero .mp-h1 { margin-top: 24px; }
.mp-hero .mp-lead { margin-top: 24px; }
.mp-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.mp-hero__chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.mp-hero__terms { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; font-size: 13px; color: var(--mp-muted); }
.mp-hero__terms b { font-family: var(--mp-mono); font-weight: 400; color: var(--mp-ink); letter-spacing: -0.01em; word-spacing: -0.15em; }
.mp-hero__visual { position: relative; min-width: 0; }

/* Dark code window */
.mp-term { border-radius: var(--mp-r); background: var(--mp-dark); box-shadow: var(--mp-shadow-lg); overflow: hidden; }
.mp-term__tabs { display: flex; align-items: center; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--mp-dark-line); overflow-x: auto; }
.mp-term__tab { flex: none; height: 44px; display: inline-flex; align-items: center; padding: 0 12px; font-family: var(--mp-mono); font-size: 12px; color: var(--mp-code-dim); border-bottom: 2px solid transparent; }
.mp-term__tab.is-active { color: #fff; border-bottom-color: var(--mp-wa-bright); }
.mp-term__body { display: grid; grid-template-columns: 38px minmax(0, 1fr); padding: 20px 0 26px; overflow-x: auto; }
.mp-term__gutter { font-family: var(--mp-mono); font-size: 12px; line-height: 1.85; text-align: right; padding-right: 14px; user-select: none; color: var(--mp-code-gutter); }
.mp-term__gutter span { display: block; }
.mp-term pre { margin: 0; padding: 0 24px 0 0; font-family: var(--mp-mono); font-size: 12px; line-height: 1.85; color: var(--mp-code); background: none; border: 0; white-space: pre; overflow: visible; }
.c-str { color: var(--mp-wa-bright); }
.c-key { color: var(--mp-code-key); }
.c-dim { color: var(--mp-code-dim); }
.mp-flash { border-radius: 3px; transition: opacity 0.25s ease; }
.mp-flash.is-sending { opacity: 0.3; }
.mp-flash.is-flash { animation: mp-flash 1.1s ease-out; }
.mp-term__status { color: #8aa4ac; }
.mp-term__status.is-sending { color: var(--mp-wa-bright); }
.mp-caret-block { display: inline-block; width: 8px; height: 15px; vertical-align: -3px; background: var(--mp-wa-bright); animation: mp-caret 1.1s step-end infinite; }
.mp-term__wire { padding: 14px 24px; border-top: 1px solid var(--mp-dark-line); display: flex; align-items: center; gap: 14px; font-family: var(--mp-mono); font-size: 12px; color: var(--mp-code-dim); }
.mp-term__wire-label { flex: none; color: var(--mp-code); }
.mp-term__line { flex: 1; min-width: 40px; height: 1px; background: var(--mp-dark-line); position: relative; overflow: hidden; }
.mp-term__line span { position: absolute; top: -2px; left: -34px; width: 34px; height: 5px; border-radius: 3px; background: var(--mp-wa-bright); animation: mp-wire 2.6s linear infinite; }
.mp-term__wa { flex: none; display: flex; align-items: center; gap: 7px; color: var(--mp-code); }

/* Floating WhatsApp bubbles */
.mp-bubbles { position: absolute; right: -24px; top: 24px; width: min(300px, 78%); display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.mp-bubble { background: #fff; border-radius: var(--mp-r); box-shadow: var(--mp-shadow-lg); padding: 12px 14px; animation: mp-pop 0.45s ease-out both; }
.mp-bubble[hidden] { display: none; }
.mp-bubble__text { font-size: 13px; line-height: 1.5; color: var(--mp-ink); }
.mp-bubble__meta { font-family: var(--mp-mono); font-size: 12px; color: var(--mp-faint); margin-top: 6px; display: flex; justify-content: flex-end; gap: 6px; }
.mp-bubble__meta--split { justify-content: space-between; margin-top: 8px; }
.mp-bubble__ticks { color: #53bdeb; display: inline-flex; vertical-align: -1px; }
.mp-ticks { display: block; width: 18px; height: 11px; }
.mp-bubble__meta--split > span { display: inline-flex; align-items: center; gap: 5px; }
.mp-bubble__head { display: flex; align-items: center; gap: 10px; }
.mp-bubble__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--mp-mist); display: flex; align-items: center; justify-content: center; font-family: var(--mp-mono); font-size: 11px; color: var(--mp-muted); flex: none; }
.mp-bubble__name { font-size: 13px; font-weight: 600; color: var(--mp-ink); }
.mp-bubble__actions { display: flex; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mp-line); font-size: 12px; font-weight: 600; color: var(--mp-blue); }
.mp-bubble__audio { display: flex; align-items: center; gap: 10px; }
.mp-bubble__play { width: 26px; height: 26px; border-radius: 50%; background: var(--mp-wa); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; flex: none; }
.mp-bubble__track { flex: 1; height: 4px; border-radius: 2px; background: var(--mp-line); position: relative; }
.mp-bubble__track span { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 2px; background: var(--mp-wa); }
.mp-bubble__map { height: 74px; border-radius: var(--mp-r-sm); background: var(--mp-mist); border: 1px solid var(--mp-line); position: relative; overflow: hidden; }
.mp-bubble__map i { position: absolute; background: #d8e0e4; }
.mp-bubble__map i:nth-child(1) { left: 0; right: 0; top: 44%; height: 1px; }
.mp-bubble__map i:nth-child(2) { top: 0; bottom: 0; left: 38%; width: 1px; }
.mp-bubble__pin { position: absolute; left: 34%; top: 30%; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--mp-wa); }

/* Metrics strip */
.mp-metrics { border-top: 1px solid var(--mp-line); }
.mp-benefits { border-top: 1px solid var(--mp-line); background: var(--mp-soft); }
.mp-benefits ul { max-width: 1440px; display: flex; justify-content: space-between; align-items: center; gap: 12px 22px; padding-top: 16px; padding-bottom: 16px; }
.mp-benefits li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--mp-ink); white-space: nowrap; }
/* the five items fit one row only from ~1440px; below that a 3 + 2 grid instead of a lone item on a second row */
@media (max-width: 1439px) {
	/* the ::after is a full-width row break placed after the third item; both rows stay centered */
	.mp-benefits ul { flex-wrap: wrap; justify-content: center; gap: 6px 32px; }
	.mp-benefits ul::after { content: ''; flex-basis: 100%; order: 1; }
	.mp-benefits li:nth-child(n+4) { order: 2; }
}
@media (max-width: 960px) {
	.mp-benefits ul { display: grid; grid-template-columns: repeat(2, max-content); }
	.mp-benefits ul::after { content: none; }
}
.mp-benefits .mp-checks__icon { width: 20px; height: 20px; margin-top: 0; }
.mp-benefits__new { font-family: var(--mp-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: var(--mp-blue); border-radius: 999px; padding: 2px 8px; }
@media (max-width: 720px) {
	.mp-benefits ul { grid-template-columns: minmax(0, 1fr); justify-content: start; gap: 10px; }
	.mp-benefits li { white-space: normal; }
}
body.mp .mp-hero__demo { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--mp-ink); align-self: center; }
body.mp .mp-hero__demo:hover { color: var(--mp-blue); }
.mp-hero__play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--mp-line); background: #fff; position: relative; flex: none; }
.mp-hero__play::after { content: ''; position: absolute; left: 11px; top: 9px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--mp-blue); }
.mp-metrics ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-metrics li { padding: 28px 24px; border-right: 1px solid var(--mp-line); }
.mp-metrics li:first-child { padding-left: 0; }
.mp-metrics li:last-child { border-right: 0; }
.mp-metric__v { font-family: var(--mp-mono); font-size: 25px; letter-spacing: -0.02em; color: var(--mp-ink); }
.mp-metric__l { font-size: 13px; color: var(--mp-muted); margin-top: 6px; }

/* --------------------------------------------------------------------------
   Home — how it works (3 animated steps)
   -------------------------------------------------------------------------- */
.mp-steps { margin-top: 56px; gap: 24px; }
.mp-step { background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-r); padding: 28px; box-shadow: var(--mp-shadow-sm); }
.mp-step__stage { height: 150px; border-radius: var(--mp-r); background: var(--mp-soft); border: 1px solid var(--mp-line); overflow: hidden; }
.mp-step__stage--qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px; }
.mp-step__stage--code { background: var(--mp-dark); border: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 16px 18px; font-family: var(--mp-mono); font-size: 11px; line-height: 1.75; color: var(--mp-code); }
.mp-step__stage--hook { padding: 14px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.mp-step__num { font-family: var(--mp-mono); font-size: 12px; color: var(--tone); margin-top: 22px; }
.mp-step h3 { font-size: 19px; margin-top: 8px; }
.mp-step p.mp-body { margin-top: 10px; }

.mp-qr { position: relative; width: 88px; height: 88px; border-radius: var(--mp-r-sm); background: #fff; border: 1px solid var(--mp-line); padding: 6px; box-shadow: var(--mp-shadow-sm); flex: none; }
.mp-qr svg { display: block; width: 100%; height: 100%; }
.mp-qr__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: var(--mp-r-sm); background: #fff; display: flex; align-items: center; justify-content: center; }
.mp-qr__logo span { width: 26px; height: 26px; border-radius: 50% 50% 50% 4px; background: var(--mp-wa-bright); display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: #fff; letter-spacing: -1px; }
.mp-qr__scan { display: none; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--mp-wa-bright); box-shadow: 0 0 12px rgba(37, 211, 102, 0.8); animation: mp-scan 1.9s ease-in-out infinite; }
.is-scanning .mp-qr__scan { display: block; }
.mp-qr-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--mp-wa-bright); font-family: var(--mp-mono); font-size: 10.5px; color: var(--mp-green); transition: border-color 0.35s ease, color 0.35s ease; }
.mp-qr-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-wa-bright); }
.is-scanning .mp-qr-badge { border-color: var(--mp-line); color: var(--mp-muted); }
.is-scanning .mp-qr-badge i { background: var(--mp-faint); animation: mp-dot 1.4s ease-in-out infinite; }

.mp-req-line { display: block; }
.mp-req-line[hidden] { display: none; }
.mp-req-line.is-new { animation: mp-pop 0.3s ease-out both; }
.mp-req-resp { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--mp-code-gutter); transition: color 0.35s ease; }
.mp-req-resp i { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-dark-line); }
.mp-req-resp.is-ok { color: var(--mp-wa-bright); }
.mp-req-resp.is-ok i { background: var(--mp-wa-bright); }
.mp-req-resp.is-new { animation: mp-pop 0.3s ease-out both; }
.mp-req-resp.is-new i { animation: mp-dot 1.4s ease-in-out infinite; }

.mp-hook { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm); padding: 9px 12px; color: var(--mp-ink); opacity: 0.6; transition: opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.mp-hook[hidden] { display: none; }
.mp-hook i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c); opacity: 0.55; }
.mp-hook span { font-family: var(--mp-mono); font-size: 11px; white-space: nowrap; }
.mp-hook time { margin-left: auto; font-family: var(--mp-mono); font-size: 10.5px; color: var(--mp-faint); }
.mp-hook.is-latest { opacity: 1; border-color: var(--c); box-shadow: var(--mp-shadow-sm); animation: mp-pop 0.34s ease-out both; }
.mp-hook.is-latest i { opacity: 1; animation: mp-dot 1.4s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Home — features / solutions / integrations
   -------------------------------------------------------------------------- */
.mp-endpoint { background: var(--mp-soft); padding: 20px; }
.mp-ico { display: block; flex: none; width: 56px; height: 56px; }
.mp-ico--sm { width: 44px; height: 44px; }
.mp-ico--lg { width: 72px; height: 72px; }
/* Line icons (Lucide, ISC) in a soft tone-tinted tile; colour comes from the tone class */
.mp-ico-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tone-bg, var(--mp-blue-t)); color: var(--tone, var(--mp-blue)); }
.mp-ico-tile.mp-ico { width: 40px; height: 40px; }
.mp-ico-tile.mp-ico--sm { width: 34px; height: 34px; border-radius: 9px; }
.mp-ico-tile.mp-ico--lg { width: 48px; height: 48px; border-radius: 12px; }
.mp-ico-line { display: block; width: 50%; height: 50%; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

.mp-endpoint__icon { width: 30px; height: 30px; border-radius: var(--mp-r-sm); background: #fff; border: 1px solid var(--mp-line); display: flex; align-items: center; justify-content: center; font-family: var(--mp-mono); font-size: 12px; color: var(--mp-muted); flex: none; }
.mp-endpoint__title { display: block; font-size: 17px; font-weight: 600; margin-top: 12px; color: var(--mp-ink); }
.mp-endpoints { gap: 16px; }

.mp-solutions { margin-top: 44px; }
.mp-solutions .mp-card__title { margin-top: 18px; }

.mp-integr { display: flex; flex-direction: column; gap: 12px; }
.mp-integr .mp-card { padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.mp-integr__name { font-size: 16px; font-weight: 600; }
.mp-integr__tag { font-family: var(--mp-mono); font-size: 12px; color: var(--tone); }

/* Home: sections below the hero are laid out and painted only when they near the viewport.
   Cuts first-load style/layout work and keeps their icons from being fetched before first paint. */
.mp-hero ~ section.mp-x { content-visibility: auto; contain-intrinsic-size: auto 760px; }
/* paint containment clips at the section edge: let hover lifts and shadows overflow a little */
.mp-hero ~ section.mp-x { overflow-clip-margin: 12px; }

/* Developers & businesses: WhatsApp phone + the API log that produces it */
.mp-ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; }
.mp-ph-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 30px; }
.mp-ph-side .mp-checks { margin-top: 12px; gap: 10px; }
.mp-ph-side .mp-sec-head__link { display: inline-block; margin-top: 16px; }
.mp-ph-side__who { font-family: var(--mp-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tone); padding-bottom: 10px; border-bottom: 2px solid var(--tone-bg); }
.mp-ph { --wa-bg: #efeae2; --wa-out: #d9fdd3; --wa-in: #ffffff; --wa-ink: #111b21; --wa-meta: #667781; --wa-head: #f0f2f5; --wa-blue: #53bdeb;
	display: flex; align-items: center; gap: 20px; }
.mp-ph__log { width: 250px; flex: none; background: var(--mp-dark); border-radius: var(--mp-r); box-shadow: var(--mp-shadow-lg); padding: 14px 0 10px; font-family: var(--mp-mono); font-size: 11.5px; color: var(--mp-code); }
.mp-ph__log-head { display: flex; align-items: center; gap: 8px; padding: 0 16px 12px; border-bottom: 1px solid var(--mp-dark-line); color: var(--mp-code-dim); }
.mp-ph__log-list { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; min-height: 312px; }
.mp-ph__log-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px; border-left: 2px solid transparent; animation: mp-pop 0.35s ease-out both; }
.mp-ph__log-row code { font: inherit; color: #fff; }
.mp-ph__log-row { opacity: 1; }
.mp-ph__log-row span { color: #a7b8bf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ph__log-row.is-out code::before { content: '→ '; color: var(--mp-wa-bright); }
.mp-ph__log-row.is-in code::before { content: '← '; color: var(--mp-orange); }
.mp-ph__log-row.is-agent code::before { content: '◆ '; color: #8fa0ff; }
.mp-ph__log-row.is-latest { border-left-color: var(--mp-wa-bright); background: rgba(255, 255, 255, 0.04); }
.mp-ph__device { width: 300px; flex: none; padding: 10px; border-radius: 44px; background: #1b2329; box-shadow: var(--mp-shadow-lg), inset 0 0 0 2px #3a464e; }
.mp-ph__screen { border-radius: 34px; overflow: hidden; background: var(--wa-bg) url('/images/whatsapp-chat-bg.webp') 0 0 / 300px auto; display: flex; flex-direction: column; height: 560px; font-family: -apple-system, 'Segoe UI', Roboto, var(--mp-sans); }
.mp-ph__bar { display: flex; align-items: center; gap: 9px; padding: 30px 12px 10px; background: #fff; border-bottom: 1px solid #e9edef; color: var(--wa-ink); flex: none; }
.mp-ph__ic { display: inline-flex; gap: 12px; color: #54656f; flex: none; }
.mp-ph__ic .mp-wa-ic { width: 20px; height: 20px; }
.mp-ph__ic.is-end { margin-left: auto; }
.mp-ph__back { font-size: 24px; line-height: 1; color: var(--wa-meta); }
.mp-ph__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--mp-wa); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.mp-ph__who { display: flex; flex-direction: column; min-width: 0; }
.mp-ph__who b { font-size: 14px; font-weight: 600; }
.mp-ph__who small { font-size: 11px; color: var(--wa-meta); }
.mp-ph__chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 10px 8px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px); mask-image: linear-gradient(to bottom, transparent 0, #000 36px); }
.mp-ph__day { align-self: center; font-size: 11px; color: var(--wa-meta); background: #fff; border-radius: 7px; padding: 3px 9px; margin-bottom: 4px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.mp-ph__msg { max-width: 84%; padding: 6px 8px 5px; border-radius: 8px; font-size: 13px; line-height: 1.38; color: var(--wa-ink); box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); animation: mp-pop 0.35s ease-out both; }
.mp-ph__msg[hidden], .mp-ph__log-row[hidden] { display: none; }
.mp-ph__msg.is-out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 2px; }
.mp-ph__msg.is-in { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 2px; }
.mp-ph__msg p { margin: 0; }
.mp-ph__time { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 10.5px; color: #54656f; margin-top: 2px; }
.mp-ph__ticks { color: var(--wa-blue); display: inline-flex; }
.mp-ph__ticks .mp-ticks { width: 16px; height: 10px; }
.mp-ph__btns { display: grid; grid-template-columns: 1fr 1fr; margin: 6px -8px -5px; border-top: 1px solid rgba(11, 20, 26, 0.1); }
.mp-ph__btns span { text-align: center; padding: 7px 4px; font-size: 13px; font-weight: 500; color: #016a99; }
.mp-ph__btns span + span { border-left: 1px solid rgba(11, 20, 26, 0.1); }
.mp-ph__quote { border-left: 3px solid #06cf9c; background: rgba(11, 20, 26, 0.05); border-radius: 5px; padding: 4px 8px; font-size: 12.5px; }
.mp-ph__map { display: block; position: relative; height: 84px; margin: -2px -4px 6px; border-radius: 6px; background: #dfe7d7; overflow: hidden; }
.mp-ph__map i { position: absolute; background: #fff; }
.mp-ph__map i:nth-child(1) { left: 0; right: 0; top: 52%; height: 5px; }
.mp-ph__map i:nth-child(2) { top: 0; bottom: 0; left: 40%; width: 5px; }
.mp-ph__map i:nth-child(3) { position: absolute; left: 38%; top: 26%; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #e53935; }
.mp-ph__agent { font-size: 12px; font-weight: 600; color: var(--mp-wa); }
.mp-ph__input { display: flex; align-items: center; gap: 8px; padding: 8px 10px 16px; background: transparent; flex: none; }
.mp-ph__input span { flex: 1; display: flex; align-items: center; gap: 7px; background: #fff; border-radius: 20px; padding: 7px 10px; color: #8696a0; }
.mp-ph__input span em { flex: 1; font-style: normal; font-size: 13px; color: var(--wa-meta); }
.mp-ph__input .mp-wa-ic { width: 18px; height: 18px; flex: none; }
.mp-ph__input i { width: 36px; height: 36px; border-radius: 50%; background: #00a884; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.mp-ph__input i .mp-wa-ic { width: 18px; height: 18px; }
@media (max-width: 1180px) { .mp-ph__log { width: 220px; } }
@media (max-width: 1000px) {
	.mp-ph-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.mp-ph { flex-direction: column-reverse; }
	.mp-ph__log { width: min(300px, 100%); }
	.mp-ph__log-list { min-height: 0; }
}
@media (max-width: 640px) { .mp-ph-sides { grid-template-columns: minmax(0, 1fr); } }

/* Landing pages: unofficial API, send messages, competitor comparisons */
.mp-note { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--mp-faint); max-width: 80ch; }
.mp-center + .mp-table-wrap + .mp-note, .mp-sec > .mp-table-wrap + .mp-note { text-align: left; }
.mp-hero__visual--phone { display: flex; justify-content: flex-end; }
.mp-hero__visual--phone .mp-ph__log { display: none; }
.mp-choose { margin-top: 32px; gap: 20px; }
.mp-choose__card { border-top: 3px solid var(--tone); }
.mp-table.mp-table--alt { min-width: 640px; }
.mp-table--alt td { line-height: 1.5; }
.mp-table--alt td.is-win { color: var(--mp-ink); font-weight: 600; }
.mp-table--alt td.is-win::before { content: '✓ '; color: var(--mp-green); }
.mp-table--alt tr.mp-table__group th { background: var(--mp-soft); font-family: var(--mp-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mp-ink); font-weight: 600; padding-top: 14px; padding-bottom: 14px; }
.mp-fair { margin-top: 28px; display: flex; gap: 16px; align-items: baseline; padding: 18px 22px; border: 1px dashed var(--mp-line-2); border-radius: var(--mp-r); background: var(--mp-soft); }
.mp-fair .mp-mono { flex: none; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mp-amber); }
.mp-fair p { font-size: 15px; line-height: 1.65; color: var(--mp-ink); }
.mp-migrate { margin-top: 32px; padding: 0; list-style: none; }
.mp-sec--tight { padding-top: 56px; padding-bottom: 56px; }
.mp-altlinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 0; list-style: none; }
body.mp .mp-altlinks a { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 16px; border: 1px solid var(--mp-line); border-radius: 999px; background: #fff; color: var(--mp-ink); }
body.mp .mp-altlinks a:hover { border-color: var(--mp-blue); color: var(--mp-blue); }
.mp-altlinks .mp-mono { font-size: 11px; color: var(--mp-faint); }
.mp-altlinks b { font-weight: 600; font-size: 14px; }
@media (max-width: 640px) {
	/* phones: each row becomes a small card — the row label, then Maytapi and the competitor stacked */
	.mp-table.mp-table--alt { min-width: 0; font-size: 14px; }
	.mp-table--alt thead { display: none; }
	.mp-table--alt, .mp-table--alt tbody, .mp-table--alt tr, .mp-table--alt th, .mp-table--alt td { display: block; width: auto; }
	.mp-table--alt tbody tr { padding: 14px 16px; }
	.mp-table--alt tbody th[scope="row"] { padding: 0 0 8px; color: var(--mp-ink); font-weight: 600; }
	.mp-table--alt td { padding: 6px 10px; border-radius: 8px; }
	.mp-table--alt td::after { content: none; }
	.mp-table--alt td[data-label]::before { content: attr(data-label); display: block; font-family: var(--mp-mono); font-size: 11px; font-weight: 400; color: var(--mp-faint); }
	.mp-table--alt td.is-win[data-label]::before { content: '✓ ' attr(data-label); color: var(--mp-green); }
	.mp-table--alt tr.mp-table__group th { padding: 12px 16px; }
}
@media (max-width: 1000px) {
	.mp-hero__visual--phone { justify-content: center; }
	.mp-fair { flex-direction: column; gap: 6px; }
}

/* Showcase: real console crop + WhatsApp phone + site-style cards. Everything is in em of a 1%-of-width font size,
   so the whole composition scales with its container; on phones it collapses to phone + cards. */
.mp-sc { margin: 0; container-type: inline-size; }
.mp-sc__stage { position: relative; font-size: 1cqw; aspect-ratio: var(--sc-aspect, 100 / 68); border-radius: 2.8em; overflow: hidden; background-color: var(--mp-mist);
	background-image: radial-gradient(#cfd8dc 0.1em, transparent 0.1em); background-size: 2.2em 2.2em; }
.mp-sc__stage::before { content: ''; position: absolute; right: -12em; top: -16em; width: 52em; height: 52em; border-radius: 50%; background: radial-gradient(closest-side, rgba(59, 79, 228, 0.16), transparent); }
.mp-sc__win { position: absolute; border-radius: 1.4em; background: #fff; border: 1px solid var(--mp-line); overflow: hidden; box-shadow: 0 0.1em 0.2em rgba(22, 42, 48, 0.06), 0 2.4em 6em rgba(22, 42, 48, 0.14); }
.mp-sc__bar { display: flex; align-items: center; gap: 0.6em; height: 3.4em; padding: 0 1.2em; border-bottom: 1px solid var(--mp-line); background: var(--mp-soft); }
.mp-sc__bar i { width: 1em; height: 1em; border-radius: 50%; background: #dfe5e8; }
.mp-sc__bar span { margin-left: 1.4em; flex: 1; height: 2em; line-height: 1.8em; border-radius: 0.6em; background: #fff; border: 1px solid var(--mp-line); font-family: var(--mp-mono); font-size: 1.1em; color: var(--mp-faint); padding: 0 1em; overflow: hidden; white-space: nowrap; }
.mp-sc__win img { display: block; width: 100%; height: auto; }
.mp-sc__code { position: absolute; z-index: 2; background: var(--mp-dark); color: var(--mp-code); border-radius: 1.4em; padding: 1.5em 1.9em; font-family: var(--mp-mono); white-space: nowrap; box-shadow: 0 2.2em 5em rgba(22, 42, 48, 0.3); }
.mp-sc__code > span { display: block; font-size: 1.2em; line-height: 1.75; }
.mp-sc__code s { text-decoration: none; color: var(--mp-code-key); }
.mp-sc__code u { text-decoration: none; color: var(--mp-orange); }
.mp-sc__code b { font-weight: 400; color: var(--mp-wa-bright); }
.mp-sc__code b i { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--mp-wa-bright); margin-right: 0.7em; vertical-align: 0.1em; }
.mp-sc__phone { position: absolute; z-index: 1; right: 7em; top: 4.6em; width: 26.4em; padding: 0.9em; border-radius: 4em; background: #1b2329; box-shadow: 0 3em 7em rgba(22, 42, 48, 0.28), inset 0 0 0 0.2em #3a464e; }
.mp-sc__screen { border-radius: 3.1em; overflow: hidden; background: #efeae2 url('/images/whatsapp-chat-bg.webp') 0 0 / 30em auto; height: 54.8em; display: flex; flex-direction: column; }
.mp-sc__head { display: flex; align-items: center; gap: 0.8em; padding: 2.6em 1.1em 0.9em; background: #fff; border-bottom: 1px solid #e9edef; }
.mp-sc__head b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-sc__head small { overflow: hidden; text-overflow: ellipsis; }
.mp-sc__hic { display: inline-flex; gap: 0.9em; color: #54656f; flex: none; }
.mp-sc__hic .mp-wa-ic { width: 1.7em; height: 1.7em; }
.mp-sc__head > span { width: 3em; height: 3em; border-radius: 50%; background: var(--mp-wa); color: #fff; font-size: 1.1em; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.mp-sc__head b { font-size: 1.3em; font-weight: 600; color: #111b21; line-height: 1.25; }
.mp-sc__head small { display: block; font-size: 0.8em; font-weight: 400; color: #667781; }
.mp-sc__chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6em; padding: 0.8em 0.9em; overflow: hidden; }
.mp-sc__msg { max-width: 86%; padding: 0.6em 0.8em 0.5em; border-radius: 0.8em; color: #111b21; box-shadow: 0 0.1em 0.05em rgba(11, 20, 26, 0.13); }
.mp-sc__msg p { margin: 0; font-size: 1.25em; line-height: 1.38; }
.mp-sc__msg.is-o { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0.2em; }
.mp-sc__msg.is-i { align-self: flex-start; background: #fff; border-top-left-radius: 0.2em; }
.mp-sc__quote { border-left: 0.3em solid #06cf9c; background: rgba(11, 20, 26, 0.05); border-radius: 0.4em; padding: 0.3em 0.7em; }
.mp-sc__agent { font-size: 1.1em !important; font-weight: 600; color: var(--mp-wa); }
.mp-sc__time { display: flex; justify-content: flex-end; align-items: center; gap: 0.3em; font-size: 1em; color: #667781; margin-top: 0.2em; }
.mp-sc__footer { font-size: 0.85em; color: #667781; }
.mp-sc__ticks { color: #53bdeb; display: inline-flex; }
.mp-sc__ticks .mp-ticks { width: 1.5em; height: 0.9em; }
.mp-sc__btns { display: grid; grid-template-columns: 1fr 1fr; margin: 0.6em -0.8em -0.5em; border-top: 1px solid rgba(11, 20, 26, 0.1); }
.mp-sc__btns span { text-align: center; padding: 0.6em 0.2em; font-size: 1.2em; font-weight: 500; color: #027eb5; }
.mp-sc__btns span + span { border-left: 1px solid rgba(11, 20, 26, 0.1); }
.mp-sc__input { display: flex; gap: 0.6em; padding: 0.6em 0.8em 1.4em; }
.mp-sc__input span { flex: 1; display: flex; align-items: center; gap: 0.7em; background: #fff; border-radius: 1.8em; padding: 0.55em 1em; color: #8696a0; }
.mp-sc__input span em { flex: 1; font-style: normal; font-size: 1.2em; color: #667781; }
.mp-sc__input .mp-wa-ic { width: 1.8em; height: 1.8em; flex: none; }
.mp-sc__input i { width: 3.4em; height: 3.4em; border-radius: 50%; background: #00a884; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.mp-sc__input i .mp-wa-ic { width: 1.7em; height: 1.7em; }
.mp-sc__card { position: absolute; z-index: 3; background: #fff; border: 1px solid var(--mp-line); border-radius: 1.4em; padding: 1.2em 1.4em; box-shadow: 0 1.4em 3.4em rgba(22, 42, 48, 0.12); }
.mp-sc__tag { display: inline-block; font-family: var(--mp-mono); font-size: 1.05em; font-weight: 600; letter-spacing: 0.04em; padding: 0.3em 0.8em; border-radius: 0.6em; background: var(--tone-bg); color: var(--tone); }
.mp-sc__card p { margin: 0.45em 0 0; font-size: 1.35em; font-weight: 600; color: var(--mp-ink); }
.mp-sc__card small { display: block; font-family: var(--mp-mono); font-size: 1.1em; color: var(--mp-faint); margin-top: 0.3em; }
.mp-sc__types { position: absolute; z-index: 3; background: #fff; border: 1px solid var(--mp-line); border-radius: 1.6em; padding: 1.8em 2em 1.6em; box-shadow: 0 2.4em 5em rgba(22, 42, 48, 0.16); }
.mp-sc__types p { margin: 0 0 1em; font-size: 1.6em; font-weight: 700; color: var(--mp-ink); }
.mp-sc__types ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75em 1.4em; }
.mp-sc__types li { display: flex; align-items: center; gap: 0.6em; font-size: 1.25em; color: var(--mp-muted); white-space: nowrap; }
.mp-sc__types li i, .mp-sc__chip i { width: 0.8em; height: 0.8em; border-radius: 0.25em; background: var(--c); flex: none; }
.mp-sc__chip { position: absolute; z-index: 4; padding: 1.4em 2.4em; border-radius: 2.2em; background: #fff; border: 1px solid var(--mp-line); box-shadow: 0 2.2em 5em rgba(22, 42, 48, 0.14); }
.mp-sc__chip > span { display: inline-flex; align-items: center; gap: 0.7em; font-size: 1.6em; font-weight: 600; color: var(--mp-ink); }
.mp-sc__chip i { width: 1em; height: 1em; border-radius: 50%; }
.mp-dev-intro { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; margin-top: 8px; }
.mp-devlinks--stack { display: flex; flex-direction: column; gap: 14px; margin-top: 0; }
.mp-dev-intro .mp-devguides { margin-top: 22px; }
@media (max-width: 1000px) { .mp-dev-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.mp-sc__blob { position: absolute; z-index: 0; height: auto; }
.mp-sc__win { z-index: 1; }
.mp-sc__win--2 { z-index: 2; box-shadow: 0 0.1em 0.2em rgba(22, 42, 48, 0.06), 0 3em 7em rgba(22, 42, 48, 0.22); }
.mp-sc__cta { position: absolute; z-index: 4; background: #fff; border: 1px solid var(--mp-line); border-radius: 1.6em; padding: 1.6em 2em; text-align: center; box-shadow: 0 2.4em 5em rgba(22, 42, 48, 0.16); }
.mp-sc__cta p { margin: 0 0 1em; font-size: 1.4em; color: var(--mp-muted); }
.mp-sc__cta p b { color: var(--mp-blue); }
.mp-sc__cta span { display: inline-block; padding: 0.7em 2em; border-radius: 2em; background: var(--mp-blue); color: #fff; font-size: 1.4em; font-weight: 600; }
/* API explorer: endpoints on the left, languages on top (home developers section) */
.mp-ax { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; margin-top: 32px; padding: 20px; background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-r-lg); box-shadow: var(--mp-shadow-sm); align-items: start; }
.mp-ax__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mp-ax__eps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-ax__ep { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px; border: 0; border-radius: var(--mp-r-sm); background: none; text-align: left; cursor: pointer; transition: background 0.15s ease; }
.mp-ax__ep span { font-size: 15px; font-weight: 600; color: var(--mp-ink); }
.mp-ax__ep code { font-family: var(--mp-mono); font-size: 11.5px; color: var(--mp-faint); background: none; padding: 0; }
.mp-ax__ep code.is-post::first-letter, .mp-ax__ep code.is-get::first-letter { color: inherit; }
.mp-ax__ep:hover { background: var(--mp-soft); }
.mp-ax__ep.is-active { background: var(--mp-blue); }
.mp-ax__ep.is-active span { color: #fff; }
.mp-ax__ep.is-active code { color: rgba(255, 255, 255, 0.75); }
body.mp a.mp-ax__doc { align-self: center; margin-top: auto; padding: 9px 22px; border: 1px solid var(--mp-line-2); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--mp-blue); }
body.mp a.mp-ax__doc:hover { border-color: var(--mp-blue); }
.mp-ax__main { min-width: 0; border-radius: var(--mp-r); background: var(--mp-dark); overflow: hidden; display: flex; flex-direction: column; }
.mp-ax__tabs { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--mp-dark-line); overflow-x: auto; }
.mp-ax__tab { flex: none; height: 48px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: var(--mp-mono); font-size: 12.5px; color: var(--mp-code-dim); cursor: pointer; }
.mp-ax__tab.is-active { color: #fff; border-bottom-color: var(--mp-wa-bright); }
.mp-ax__tablist { display: flex; gap: 2px; }
/* horizontal strips scroll by swipe; no visible scrollbar */
.mp-ax__eps, .mp-ax__tabs { scrollbar-width: none; }
.mp-ax__eps::-webkit-scrollbar, .mp-ax__tabs::-webkit-scrollbar { display: none; }
.mp-ax__code { flex: 1; margin: 0; padding: 26px 28px; font-family: var(--mp-mono); font-size: 13px; line-height: 1.75; color: var(--mp-code); background: none; border: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mp-ax__code[hidden] { display: none; }
@media (max-width: 860px) {
	.mp-ax { grid-template-columns: minmax(0, 1fr); padding: 12px; }
	.mp-ax__eps { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
	.mp-ax__ep { width: auto; flex: none; padding: 8px 14px; border: 1px solid var(--mp-line); border-radius: 999px; }
	.mp-ax__ep span { font-size: 14px; white-space: nowrap; }
	.mp-ax__ep.is-active { border-color: var(--mp-blue); }
	.mp-ax__ep code { display: none; }
	.mp-ax__doc { display: none; }
	.mp-ax__code { min-height: 0; padding: 20px; }
}

/* tight variant (dashboard): smaller labels and cards nested over the windows */
.mp-sc__deco { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; }
.mp-sc--tight .mp-sc__chip { padding: 0.9em 1.6em; border-radius: 1.6em; box-shadow: 0 1.4em 3em rgba(22, 42, 48, 0.16); }
.mp-sc--tight .mp-sc__chip > span { font-size: 1.2em; gap: 0.6em; }
.mp-sc--tight .mp-sc__chip i { width: 0.75em; height: 0.75em; }
.mp-sc--tight .mp-sc__types { padding: 1.3em 1.5em 1.2em; border-radius: 1.3em; }
.mp-sc--tight .mp-sc__types p { font-size: 1.25em; margin-bottom: 0.8em; }
.mp-sc--tight .mp-sc__types ul { gap: 0.55em 1em; }
.mp-sc--tight .mp-sc__types li { font-size: 0.95em; gap: 0.5em; }
.mp-sc--tight .mp-sc__types li i { width: 0.7em; height: 0.7em; }
.mp-sc--tight .mp-sc__cta { padding: 1.3em 1.5em; border-radius: 1.3em; }
.mp-sc--tight .mp-sc__cta p { font-size: 1.1em; margin-bottom: 0.8em; }
.mp-sc--tight .mp-sc__cta span { font-size: 1.1em; padding: 0.6em 1.7em; }
/* interactive messages inside the showcase phone: reply rows, carousel, list sheet */
.mp-sc__rows { display: flex; flex-direction: column; margin: 0.6em -0.8em -0.5em; }
.mp-sc__rows > span { display: flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.65em 0.4em; border-top: 1px solid rgba(11, 20, 26, 0.1); font-size: 1.2em; font-weight: 500; color: #027eb5; }
.mp-sc__rows i { font-style: normal; font-size: 0.95em; }
.mp-sc__screen { position: relative; }
.mp-sc__carousel { display: flex; gap: 0.6em; margin: 0.2em -0.9em 0 0; overflow: hidden; }
.mp-sc__ccard { flex: none; width: 72%; display: flex; flex-direction: column; background: #fff; border-radius: 0.9em; padding: 0.4em 0.4em 0; box-shadow: 0 0.1em 0.05em rgba(11, 20, 26, 0.13); }
.mp-sc__cimg { display: block; height: 13em; border-radius: 0.6em; background: #fff center / cover no-repeat; }
.mp-sc__ccard > b { margin: 0.6em 0.5em 0; font-size: 1.25em; font-weight: 600; color: #111b21; }
.mp-sc__ccard > small { margin: 0.1em 0.5em 0.2em; font-size: 1.05em; color: #667781; }
.mp-sc__ccard .mp-sc__rows { margin: 0.4em -0.4em 0; }
.mp-sc__sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: #fff; border-radius: 1.6em 1.6em 0 0; padding: 0.8em 1.4em 1.4em; box-shadow: 0 -1em 3em rgba(11, 20, 26, 0.18); }
.mp-sc__grip { display: block; width: 3.4em; height: 0.35em; margin: 0 auto 0.9em; border-radius: 1em; background: #d1d7db; }
.mp-sc__sheet > b { display: block; text-align: center; font-size: 1.4em; font-weight: 600; color: #111b21; }
.mp-sc__sheet > p { margin: 1em 0 0.3em; font-size: 1.05em; font-weight: 600; color: #008069; }
.mp-sc__srow { display: flex; align-items: center; gap: 1em; padding: 0.75em 0; border-bottom: 1px solid #f0f2f5; }
.mp-sc__srow > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-sc__srow b { font-size: 1.25em; font-weight: 500; color: #111b21; }
.mp-sc__srow small { font-size: 1.05em; color: #667781; }
.mp-sc__srow i { width: 1.6em; height: 1.6em; border-radius: 50%; border: 0.15em solid #8696a0; flex: none; }
.mp-sc__srow i.is-on { border: 0.45em solid #00a884; }
.mp-sc__send { display: block; margin: 1em auto 0; width: fit-content; padding: 0.7em 2.4em; border-radius: 2em; background: #00a884; color: #fff; font-size: 1.2em; font-weight: 600; }

/* rendered showcase images (images/showcase/*.webp) */
.mp-shot { margin: 0; }
.mp-shot img { display: block; width: 100%; height: auto; border-radius: 2.8% / 3.6%; }
.mp-shot--wide img { border-radius: 2.5% / 3.7%; }
/* compact variant for half-width columns: phone + code + cards, no console window */
.mp-sc--compact .mp-sc__stage { font-size: calc(100cqw / 56); aspect-ratio: var(--sc-aspect, 56 / 66); }
.mp-sc--compact .mp-sc__phone { right: 1.6em; top: 3em; }
.mp-sc--compact .mp-sc__code > span { font-size: 1.05em; }
.mp-sc__msg.is-c { align-self: stretch; max-width: none; background: #fff; border-radius: 0.8em; }
.mp-sc__img { display: flex; align-items: flex-end; height: 13em; margin: -0.2em -0.4em 0.6em; border-radius: 0.6em; padding: 1em; background: linear-gradient(135deg, var(--tone-bg), var(--tone)); }
.mp-sc__img b { color: #fff; font-size: 1.5em; font-weight: 700; text-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.25); }
.mp-sc__poll { display: flex; flex-direction: column; gap: 0.9em; margin: 0.8em 0 0.3em; }
.mp-sc__poll > span { display: flex; flex-direction: column; gap: 0.4em; }
.mp-sc__opt { display: flex; align-items: center; gap: 0.7em; }
.mp-sc__opt i { width: 1.6em; height: 1.6em; border-radius: 50%; border: 0.15em solid #8696a0; flex: none; }
.mp-sc__opt b { flex: 1; font-size: 1.15em; font-weight: 400; color: #111b21; }
.mp-sc__opt em { font-style: normal; font-size: 1em; color: #667781; }
.mp-sc__bar { display: block; height: 0.55em; border-radius: 1em; background: #e9edef; margin-left: 2.3em; overflow: hidden; }
.mp-sc__bar s { display: block; height: 100%; border-radius: 1em; background: #25d366; }
.mp-sc__pollnote { display: block; margin-top: 0.4em; font-size: 0.95em; color: #667781; }
.mp-sc__from { font-size: 1.05em !important; font-weight: 600; margin-bottom: 0.15em !important; }
.mp-sc__sys { align-self: center; max-width: 88%; margin: 0.2em 0; padding: 0.35em 0.9em; border-radius: 0.6em; background: #fff; color: #54656f; font-size: 1em; text-align: center; box-shadow: 0 0.1em 0.05em rgba(11, 20, 26, 0.13); }
.mp-sc__story { flex: 1; position: relative; display: flex; flex-direction: column; padding: 2.6em 1.2em 1.4em; color: #fff; background: linear-gradient(160deg, var(--tone), #111b21 120%); }
.mp-sc__bars { display: flex; gap: 0.4em; }
.mp-sc__bars i { flex: 1; height: 0.3em; border-radius: 1em; background: rgba(255, 255, 255, 0.35); }
.mp-sc__bars i.is-done { background: #fff; }
.mp-sc__shead { display: flex; align-items: center; gap: 0.8em; margin-top: 1.2em; }
.mp-sc__shead > span { width: 3.2em; height: 3.2em; border-radius: 50%; background: rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05em; }
.mp-sc__shead b { font-size: 1.25em; font-weight: 600; line-height: 1.2; }
.mp-sc__shead small { display: block; font-size: 0.8em; font-weight: 400; opacity: 0.8; }
.mp-sc__sbody { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.6em; padding: 1em; }
.mp-sc__sbody b { font-size: 2.6em; font-weight: 700; line-height: 1.1; color: #fff; }
.mp-sc__sbody p { margin: 0; font-size: 1.3em; color: #fff; opacity: 0.9; }
.mp-sc__sreply, .mp-sc__sviews { align-self: center; font-size: 1.15em; padding: 0.6em 1.4em; border-radius: 2em; background: rgba(255, 255, 255, 0.18); }
.mp-sc__img.has-photo { background-size: cover; background-position: center; height: 15em; }
.mp-sc__img.has-photo b { display: none; }
.mp-sc__story.has-photo { background-size: cover; background-position: center; }
.mp-sc__story.has-photo .mp-sc__sbody { justify-content: flex-end; padding-bottom: 0.4em; }
.mp-sc__story.has-photo .mp-sc__sbody b { font-size: 1.9em; text-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.45); }
.mp-sc__story.has-photo .mp-sc__sbody p { text-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.5); }
/* three phones side by side (status): smaller, the outer two tilted behind the middle one */
.mp-sc__phone--trio { font-size: 0.72em; }
.mp-sc__phone--trio .mp-sc__screen { height: 54.8em; }
.mp-sc__phone--duo { font-size: 0.82em; }
.mp-sc__eps { position: absolute; z-index: 4; list-style: none; margin: 0; padding: 0.9em 1em; display: flex; flex-direction: column; gap: 0.45em; background: var(--mp-dark); border-radius: 1.2em; box-shadow: 0 1.6em 4em rgba(22, 42, 48, 0.28); }
.mp-sc__eps li { display: flex; align-items: center; gap: 0.7em; font-family: var(--mp-mono); font-size: 1.1em; color: var(--mp-code); white-space: nowrap; }
.mp-sc__eps b { min-width: 3.6em; text-align: center; font-weight: 600; font-size: 0.85em; padding: 0.2em 0.5em; border-radius: 0.4em; }
.mp-sc__eps b.is-post { background: rgba(37, 211, 102, 0.16); color: var(--mp-wa-bright); }
.mp-sc__eps b.is-type { background: rgba(232, 163, 61, 0.16); color: #e8a33d; }
.mp-sc__eps b.is-get { background: rgba(143, 160, 255, 0.18); color: #a9b5ff; }
.mp-sc__item > span.is-ring { box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.4em #25d366; }
.mp-sc__profile { display: flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 1.2em 1em 1.4em; border-bottom: 0.7em solid #f0f2f5; }
.mp-sc__profile > span { width: 5.2em; height: 5.2em; border-radius: 50%; background: var(--mp-wa); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6em; font-weight: 700; margin-bottom: 0.3em; }
.mp-sc__profile b { font-size: 1.6em; font-weight: 500; color: #111b21; }
.mp-sc__profile small { font-size: 1.1em; color: #667781; }
.mp-sc__react { margin-right: auto; font-size: 1.05em; color: #54656f; background: #f0f2f5; border-radius: 1em; padding: 0.1em 0.6em; }
.mp-sc__list { flex: 1; background: #fff; padding: 0.6em 0; overflow: hidden; }
.mp-sc__top { display: flex; align-items: center; justify-content: space-between; padding: 2.6em 1.3em 0.9em; background: #fff; }
.mp-sc__top b { font-size: 2em; font-weight: 500; color: #111b21; }
.mp-sc__list-title em { float: right; font-style: normal; font-size: 0.85em; font-weight: 500; color: #111b21; background: #f0f2f5; border-radius: 2em; padding: 0.35em 0.9em; margin-top: -0.3em; }
.mp-sc__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4em; flex: none; }
.mp-sc__meta time { font-size: 0.95em; color: #667781; white-space: nowrap; }
.mp-sc__meta time.is-new { color: #1daa61; }
.mp-sc__meta u { text-decoration: none; min-width: 1.9em; height: 1.9em; border-radius: 1em; background: #25d366; color: #fff; font-size: 0.95em; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 0.5em; }
.mp-sc__list-title { margin: 0.4em 1.2em 0.6em; font-size: 1.5em; font-weight: 500; color: #111b21; }
.mp-sc__item { display: flex; align-items: center; gap: 1em; padding: 0.9em 1.2em; }
.mp-sc__item > span { width: 3.4em; height: 3.4em; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--tone); color: #fff; font-size: 1.05em; font-weight: 700; }
.mp-sc__item b { flex: 1; min-width: 0; font-size: 1.2em; font-weight: 600; color: #111b21; line-height: 1.25; }
.mp-sc__item small { display: block; font-size: 0.8em; font-weight: 400; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-sc__item b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-sc__item em { font-style: normal; font-size: 1.05em; font-weight: 600; color: #008069; background: #d9fdd3; border-radius: 1.2em; padding: 0.4em 1em; }
.mp-sc__item em.is-on { color: #667781; background: #f0f2f5; }
/* phones: drop the console window and the code card, keep the phone and the cards in a readable size */
@container (max-width: 760px) {
	.mp-sc:not(.mp-sc--compact) .mp-sc__stage { font-size: 2.6cqw; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 1.2em; padding: 3em 2em; }
	.mp-sc:not(.mp-sc--compact) .mp-sc__win, .mp-sc:not(.mp-sc--compact) .mp-sc__code { display: none; }
	.mp-sc:not(.mp-sc--compact) .mp-sc__phone, .mp-sc:not(.mp-sc--compact) .mp-sc__card { position: static; inset: auto; }
	.mp-sc:not(.mp-sc--compact) .mp-sc__phone { transform: none !important; }
	.mp-sc:not(.mp-sc--compact) .mp-sc__phone { width: 26.4em; }
	.mp-sc:not(.mp-sc--compact) .mp-sc__screen { height: 46em; }
	.mp-sc:not(.mp-sc--compact) .mp-sc__card { width: 100% !important; max-width: 30em; }
	.mp-sc.mp-sc--nophone:not(.mp-sc--compact) .mp-sc__win { display: block; position: static; width: 100% !important; }
	.mp-sc:not(.mp-sc--compact) .mp-sc__types, .mp-sc:not(.mp-sc--compact) .mp-sc__eps { position: static; inset: auto; transform: none; width: 100% !important; max-width: 30em; }
	.mp-sc:not(.mp-sc--compact) .mp-sc__chip { display: none; }
	.mp-sc:not(.mp-sc--compact) .mp-sc__blob, .mp-sc:not(.mp-sc--compact) .mp-sc__win--2, .mp-sc:not(.mp-sc--compact) .mp-sc__cta, .mp-sc:not(.mp-sc--compact) .mp-sc__deco { display: none; }
}
@container (max-width: 420px) {
	.mp-sc.mp-sc--compact .mp-sc__stage { font-size: 2.6cqw; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 1.2em; padding: 3em 2em; }
	.mp-sc.mp-sc--compact .mp-sc__win, .mp-sc.mp-sc--compact .mp-sc__code { display: none; }
	.mp-sc.mp-sc--compact .mp-sc__phone, .mp-sc.mp-sc--compact .mp-sc__card { position: static; inset: auto; }
	.mp-sc.mp-sc--compact .mp-sc__phone { width: 26.4em; transform: none !important; }  /* desktop centring (translateX) would push it off the column */
	.mp-sc.mp-sc--compact .mp-sc__screen { height: 46em; }
	.mp-sc.mp-sc--compact .mp-sc__card { width: 100% !important; max-width: 30em; }
	.mp-sc.mp-sc--compact .mp-sc__phone--trio:not(.is-main), .mp-sc.mp-sc--compact .mp-sc__phone--duo:not(.is-main) { display: none; }
	.mp-sc.mp-sc--compact .mp-sc__phone--trio, .mp-sc.mp-sc--compact .mp-sc__phone--duo { font-size: 1em; transform: none !important; }
	.mp-sc.mp-sc--compact .mp-sc__eps { position: static; inset: auto; transform: none !important; width: 100%; max-width: 30em; }
	.mp-sc.mp-sc--compact .mp-sc__card { transform: none !important; }
	.mp-sc.mp-sc--nophone .mp-sc__win { display: block; position: static; width: 100% !important; }
}

/* Ticker */
.mp-ticker { background: var(--mp-dark); overflow: hidden; }
.mp-ticker__track { display: flex; width: max-content; font-family: var(--mp-mono); font-size: 12px; line-height: 52px; height: 52px; }
/* the markup carries one run of items; maytapi.js appends the copy the loop needs, then the animation starts */
.mp-ticker__track.is-looped { animation: mp-ticker 38s linear infinite; }
.mp-ticker__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 26px; border-right: 1px solid var(--mp-dark-line); flex: none; }
.mp-ticker__item code { font: inherit; color: var(--c); }
.mp-ticker__item span { color: #8c9fa6; }

/* Tools grid */
.mp-tools-grid { margin-top: 44px; }
.mp-tools-grid .mp-card { display: flex; flex-direction: column; height: 100%; padding: 24px; }
.mp-tools-grid .mp-card__title { margin-top: 14px; }
.mp-tools-grid .mp-card__text { margin-top: 8px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Home — developers (code tabs)
   -------------------------------------------------------------------------- */
.mp-codebox { border-radius: var(--mp-r); overflow: hidden; background: var(--mp-dark); margin-top: 32px; box-shadow: var(--mp-shadow-lg); }

/* Feature page block with fpChat: code tabs on one side; the text and the same tab as a WhatsApp screen on the other (parts/_featurePage) */
.mp-split--codechat { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.mp-codechat__side { display: flex; justify-content: flex-start; margin-top: 32px; }
.mp-codechat__phone { font-size: 9.5px; }
.mp-codechat__phone[hidden] { display: none; }
.mp-codechat__side .mp-sc__phone { position: relative; right: auto; top: auto; z-index: auto; }
.mp-codechat__side .mp-sc__screen { height: 50em; }
@media (max-width: 960px) {
	.mp-codechat__side { justify-content: center; }
}
.mp-codebox__tabs { display: flex; border-bottom: 1px solid var(--mp-dark-line); overflow-x: auto; }
.mp-codebox__tab {
	appearance: none;
	flex: none;
	display: inline-flex;
	align-items: center;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	height: 48px;
	padding: 0 20px;
	font-family: var(--mp-mono);
	font-size: 13px;
	color: #8c9fa6;
	cursor: pointer;
	white-space: nowrap;
}
.mp-codebox__tab:hover { color: #fff; }
.mp-codebox__tab.is-active { color: #fff; border-bottom-color: var(--mp-blue); }
.mp-codebox pre { margin: 0; padding: 28px; font-family: var(--mp-mono); font-size: 13px; line-height: 1.75; color: var(--mp-code); background: none; border: 0;
	/* long lines (curl URLs) wrap inside the box instead of adding a horizontal scrollbar */
	white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
.mp-codebox pre[hidden] { display: none; }
.mp-devlinks { margin-top: 16px; gap: 16px; }
.mp-devguides { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; font-size: 15px; color: var(--mp-muted); }
.mp-devguides span { margin-right: 4px; }
body.mp .mp-devguides a { color: var(--mp-ink); }
body.mp .mp-devguides a:hover { border-color: var(--mp-blue); color: var(--mp-blue); }
body.mp .mp-devlink { display: block; background: var(--mp-dark); border-radius: var(--mp-r); padding: 22px; transition: transform 0.18s ease; color: var(--mp-code); }
body.mp .mp-devlink:hover { transform: translateY(-3px); color: var(--mp-code); }
.mp-devlink__k { font-family: var(--mp-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--c); }
.mp-devlink__i { font-family: var(--mp-mono); font-size: 13px; color: var(--mp-code-dim); }
.mp-devlink p { font-size: 15px; line-height: 1.6; margin-top: 12px; }

/* --------------------------------------------------------------------------
   Comparison table
   -------------------------------------------------------------------------- */
.mp-table-wrap { overflow-x: auto; margin-top: 40px; background: #fff; border-radius: var(--mp-r); box-shadow: var(--mp-shadow-sm); }
.mp-table { font-size: 15px; min-width: 760px; }
.mp-table thead tr { background: var(--mp-soft); }
.mp-table th, .mp-table td { text-align: left; padding: 16px 24px; vertical-align: middle; }
.mp-table thead th { padding: 18px 24px; font-weight: 600; color: var(--mp-muted); }
.mp-table thead th:first-child { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.mp-table thead th.is-us { background: var(--mp-blue-t2); font-weight: 700; color: var(--mp-blue); }
.mp-table tbody tr { border-top: 1px solid var(--mp-line); }
.mp-table tbody th { font-weight: 500; color: var(--mp-muted); }
.mp-table td { color: var(--mp-muted); padding-top: 14px; padding-bottom: 14px; }
.mp-table td.is-us { background: #f4faf6; }
.mp-table td.is-mono { font-family: var(--mp-mono); font-size: 13px; }
.mp-table td.is-us.is-mono { font-weight: 600; color: var(--mp-ink); }

/* --------------------------------------------------------------------------
   Security (dark)
   -------------------------------------------------------------------------- */
.mp-security .mp-h2 { color: #fff; max-width: 20ch; }
.mp-pill--dk-green { background: #1f3a33; color: #5fe49a; }
.mp-pill--dk-blue { background: #263a42; color: var(--mp-code-key); }
.mp-pill--dk-amber { background: #3a3326; color: var(--mp-orange); }
.mp-specs { min-width: 0; background: var(--mp-dark-2); border-radius: var(--mp-r); padding: 12px 26px 20px; }
.mp-specs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--mp-dark-line); }
.mp-specs li:last-child { border-bottom: 0; }
.mp-specs span:first-child { font-size: 15px; color: var(--mp-dark-muted); }
.mp-specs span:last-child { font-family: var(--mp-mono); font-size: 13px; color: #fff; text-align: right; }
.mp-specs .is-good { color: #5fe49a !important; }
.mp-specs .is-warn { color: var(--mp-orange) !important; }

/* --------------------------------------------------------------------------
   Trusted / testimonials / stats
   -------------------------------------------------------------------------- */
.mp-langchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.mp-langchips li { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--mp-line); border-radius: 999px; background: #fff; }
.mp-langchips b { font-family: var(--mp-mono); font-weight: 400; font-size: 12px; color: var(--mp-blue); }
.mp-langchips span { font-size: 13px; color: var(--mp-muted); }
.mp-quotes { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mp-quote { background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-r); padding: 24px 26px; box-shadow: var(--mp-shadow-sm); }
.mp-quote:nth-child(2) { margin-left: 32px; }
.mp-quote:nth-child(3) { margin-left: 16px; }
.mp-quote__stars { color: #b45309; font-size: 13px; letter-spacing: 1px; }
.mp-quote__text { font-size: 15px; line-height: 1.7; color: var(--mp-ink); margin-top: 6px; text-wrap: pretty; }
.mp-quote__by { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mp-line); }
.mp-quote__by b { font-size: 15px; font-weight: 600; }
.mp-quote__by span { font-family: var(--mp-mono); font-size: 12px; color: var(--mp-muted); }

.mp-stats { margin-top: 56px; gap: 16px; }
.mp-stat { border-radius: var(--mp-r); padding: 24px 26px; display: flex; flex-direction: column; gap: 6px; background: var(--s-bg); border: 1px solid var(--s-bd); }
.mp-stat b { font-family: var(--mp-mono); font-weight: 400; font-size: 25px; letter-spacing: -0.02em; color: var(--tone); }
.mp-stat span { font-size: 13px; color: var(--mp-muted); }
.mp-stat i { display: block; height: 3px; border-radius: 2px; background: var(--tone); margin-top: 14px; transform-origin: left; transition: transform 0.8s 0.18s var(--mp-ease); }
.mp-stat.tone-blue { --s-bg: var(--mp-blue-t2); --s-bd: #d9e0fb; }
.mp-stat.tone-green { --s-bg: #eaf7f0; --s-bd: #cdebda; }
.mp-stat.tone-amber { --s-bg: #fdf4e7; --s-bd: #f2e0c4; }
.mp-stat.tone-teal { --s-bg: var(--mp-teal-t); --s-bd: #cde6e6; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.mp-billing { display: flex; width: max-content; max-width: 100%; margin: 36px auto 0; padding: 4px; gap: 4px; background: #fff; border: 1px solid var(--mp-line); border-radius: 999px; }
.mp-billing__opt { appearance: none; border: 0; background: none; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--mp-muted); cursor: pointer; white-space: nowrap; }
.mp-billing__opt:hover { color: var(--mp-ink); }
.mp-billing__opt.is-active { background: var(--mp-ink); color: #fff; }
.mp-billing + .mp-calc { margin-top: 16px; }
@media (max-width: 420px) {
	/* long labels (ru: "Списание ежегодно") would push the toggle past the screen edge */
	.mp-billing__opt { flex: 1 1 0; white-space: normal; height: auto; min-height: 36px; padding: 6px 12px; font-size: 13px; line-height: 1.25; }
}
.mp-calc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin: 40px auto 0; padding: 18px 22px; border: 1px solid var(--mp-line); border-radius: var(--mp-r); background: var(--mp-soft); max-width: 620px; }
.mp-calc__label { font-size: 15px; font-weight: 600; }
.mp-calc__ctrl { display: flex; align-items: center; gap: 6px; }
.mp-calc__btn { width: 36px; height: 36px; border-radius: var(--mp-r-sm); border: 1px solid var(--mp-line); background: #fff; cursor: pointer; font-family: var(--mp-mono); font-size: 16px; color: var(--mp-ink); display: flex; align-items: center; justify-content: center; }
.mp-calc__btn:hover { border-color: var(--mp-ink); }
.mp-calc__n { min-width: 52px; text-align: center; font-family: var(--mp-mono); font-size: 19px; }
.mp-calc__rule { flex: 1; min-width: 1px; height: 1px; background: var(--mp-line); }
.mp-calc__total { font-family: var(--mp-mono); font-size: 19px; }
.mp-calc__total small, .mp-price small { font-size: 13px; color: var(--mp-muted); font-weight: 400; word-spacing: -0.2em; }
.mp-calc__bulk { text-align: center; font-size: 15px; color: var(--mp-muted); margin-top: 12px; }
.mp-pricing__tax { font-size: 13px; margin-top: 24px; }
.mp-calc__bulk[hidden] { display: none; }

.mp-plans { margin-top: 44px; gap: 24px; align-items: start; }
.mp-plan { position: relative; padding: 32px; }
.mp-plan--featured { border: 2px solid var(--mp-blue); box-shadow: 0 20px 48px rgba(59, 79, 228, 0.16); }
.mp-plan__flag { position: absolute; top: -13px; left: 32px; min-height: 26px; display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; background: var(--mp-blue); color: #fff; font-size: 12px; font-weight: 600; }
.mp-plan__head { display: flex; align-items: center; gap: 12px; }
.mp-plan__name { font-size: 19px; font-weight: 700; }
.mp-plan__sub { font-family: var(--mp-mono); font-size: 12px; color: var(--mp-faint); margin-top: 3px; }
.mp-plan__desc { font-size: 15px; line-height: 1.6; color: var(--mp-muted); margin-top: 16px; }
.mp-price { font-family: var(--mp-mono); font-size: 34px; letter-spacing: -0.03em; margin-top: 20px; }
.mp-plan__calc { font-family: var(--mp-mono); font-size: 13px; color: var(--mp-blue); margin-top: 8px; }
.mp-plan__billnote { font-size: 13px; line-height: 1.5; color: var(--mp-muted); margin-top: 6px; }
.mp-price__old { font-size: 18px; color: var(--mp-faint); margin-right: 10px; }
.mp-price__old[hidden], .mp-plan__save[hidden] { display: none; }
.mp-plan__save { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--mp-green-t); color: var(--mp-green); font-size: 12px; font-weight: 600; }
.mp-plan .mp-btn { margin-top: 22px; }
.mp-plan__calc + .mp-btn { margin-top: 18px; }
.mp-plan__list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--mp-line); font-size: 15px; line-height: 1.55; color: var(--mp-muted); }
.mp-plan__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.mp-plan__list li::before { content: '+'; font-family: var(--mp-mono); font-size: 13px; color: var(--mp-green); }
.mp-plan__list li.is-off { color: #66727a; }
.mp-plan__list li.is-off::before { content: '−'; color: var(--mp-faint); }
.mp-plan__list li.is-off span { text-decoration: line-through; }

/* --------------------------------------------------------------------------
   Guides / FAQ / CTA
   -------------------------------------------------------------------------- */
.mp-guides { margin-top: 44px; }
.mp-guides .mp-card { display: flex; flex-direction: column; height: 100%; padding: 24px; }
.mp-guide__k { font-family: var(--mp-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--tone); text-transform: uppercase; }
.mp-guides .mp-card__title { margin-top: 14px; }
.mp-guide__time { font-family: var(--mp-mono); font-size: 12px; color: var(--mp-faint); margin-top: auto; padding-top: 16px; }

.mp-faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; }
/* the intro + support chat stays beside the long question list instead of leaving an empty column */
.mp-faq-grid > .mp-min0:first-child { position: sticky; top: 96px; align-self: start; }
.mp-chat { background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-r); margin-top: 26px; overflow: hidden; }
.mp-chat__head { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--mp-line); }
.mp-chat__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--mp-wa); display: flex; align-items: center; justify-content: center; font-family: var(--mp-mono); font-size: 12px; color: #fff; flex: none; }
.mp-chat__name { font-size: 15px; font-weight: 600; }
.mp-chat__online { display: flex; align-items: center; gap: 6px; font-family: var(--mp-mono); font-size: 11px; color: var(--mp-faint); margin-top: 2px; }
.mp-chat__sla { margin-left: auto; font-family: var(--mp-mono); font-size: 11px; color: var(--mp-faint); flex: none; }
.mp-chat__body { background: var(--mp-soft); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 186px; justify-content: flex-end; }
.mp-chat__msg { max-width: 88%; padding: 11px 14px; animation: mp-pop 0.4s ease-out both; }
.mp-chat__msg[hidden] { display: none; }
.mp-chat__msg p { font-size: 13px; line-height: 1.5; }
.mp-chat__msg--in { align-self: flex-end; background: #fff; border: 1px solid var(--mp-line); border-radius: 16px 16px 4px 16px; }
.mp-chat__msg--out { align-self: flex-start; max-width: 92%; background: var(--mp-wa); border-radius: 16px 16px 16px 4px; }
.mp-chat__msg--out p { color: #fff; }
.mp-chat__time { font-family: var(--mp-mono); font-size: 11px !important; color: var(--mp-faint); margin-top: 5px; text-align: right; }
.mp-chat__msg--out .mp-chat__time { color: #dcefeb; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.mp-chat__ticks { color: #9fe0ff; display: inline-flex; }
.mp-chat__typing { align-self: flex-start; display: flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--mp-line); border-radius: 16px 16px 16px 4px; padding: 11px 14px; }
.mp-chat__typing[hidden] { display: none; }
.mp-chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-faint); animation: mp-typing 1.2s ease-in-out infinite; }
.mp-chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.mp-chat__typing i:nth-child(3) { animation-delay: 0.3s; }
/* Capability cards under the endpoint grid */
.mp-more__title { font-size: 15px; font-weight: 600; color: var(--mp-muted); margin: 56px 0 18px; font-family: var(--mp-mono); letter-spacing: 0.02em; }
.mp-more { gap: 16px; }
.mp-more__card { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 20px 22px; }
.mp-more__t { display: block; font-size: 16px; font-weight: 600; color: var(--mp-ink); line-height: 1.35; }
.mp-more__d { display: block; font-size: 14px; line-height: 1.6; color: var(--mp-muted); margin-top: 6px; }

/* Integration paths */
.mp-paths { margin-top: 40px; }
.mp-paths__card { display: flex; flex-direction: column; height: 100%; }
.mp-paths__who { font-size: 13px; font-weight: 600; color: var(--tone, var(--mp-blue)); background: var(--tone-bg, var(--mp-blue-t)); padding: 5px 11px; border-radius: 999px; }
.mp-paths__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: auto; padding-top: 20px; font-size: 15px; font-weight: 600; }
.mp-paths__links span { color: var(--mp-faint); }
.mp-paths__foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 36px; text-align: center; }

/* Partner / white label band */
.mp-partner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px; border-radius: var(--mp-r-lg, 24px); background: linear-gradient(135deg, var(--mp-blue-t2), #fff 70%); border: 1px solid var(--mp-blue-t); }
.mp-partner__list { margin-top: 0; }
@media (max-width: 900px) {
	.mp-partner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 24px; }
}

/* Home FAQ accordion: question headings keep the summary style */
body.mp .mp-acc .mp-acc__q { font: inherit; color: inherit; margin: 0; }

.mp-faq-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mp-faq-list .mp-card { padding: 24px 26px; }
.mp-faq-list h3 { font-size: 18px; }
.mp-faq-list p { font-size: 15px; line-height: 1.7; color: var(--mp-muted); margin-top: 10px; }

/* Accordion variant (FAQ page) */
.mp-acc { display: flex; flex-direction: column; gap: 12px; }
.mp-acc details { background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-r); transition: border-color 0.18s ease; }
.mp-acc details[open], .mp-acc details:hover { border-color: var(--mp-blue); }
.mp-acc summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 17px; font-weight: 600; color: var(--mp-ink); }
.mp-acc summary::-webkit-details-marker { display: none; }
.mp-acc summary::after { content: '+'; font-family: var(--mp-mono); font-size: 18px; color: var(--mp-blue); flex: none; transition: transform 0.18s ease; }
.mp-acc details[open] summary::after { transform: rotate(45deg); }
.mp-acc__body { padding: 0 26px 24px; font-size: 15px; line-height: 1.7; color: var(--mp-muted); }
.mp-acc__body p + p { margin-top: 10px; }

.mp-cta { background: var(--mp-mist); border-radius: var(--mp-r-lg); padding: 72px 56px; text-align: center; }
.mp-cta .mp-h2 { margin: 0 auto; }
.mp-cta__form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.mp-input { height: 52px; padding: 0 18px; background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm); color: var(--mp-ink); font-family: var(--mp-mono); font-size: 13px; min-width: 280px; }
.mp-input:focus { border-color: var(--mp-blue); outline: none; }

/* --------------------------------------------------------------------------
   Inner pages: page hero + prose + legacy (Bootstrap) content re-skin
   -------------------------------------------------------------------------- */
.mp-page-hero { background: var(--mp-soft); border-bottom: 1px solid var(--mp-line); }
.mp-page-hero__in { padding-top: 72px; padding-bottom: 64px; }
.mp-page-hero .mp-h1 { font-size: 46px; line-height: 1.1; margin-top: 18px; max-width: 22ch; }
.mp-page-hero .mp-lead { margin-top: 18px; max-width: 64ch; }
.mp-page-hero .mp-hero__ctas { margin-top: 28px; }
.mp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mp-mono); font-size: 12px; color: var(--mp-faint); }
body.mp .mp-crumbs a { color: var(--mp-muted); }
body.mp .mp-crumbs a:hover { color: var(--mp-ink); }

.mp-prose { font-size: 16px; line-height: 1.75; color: var(--mp-ink-2); max-width: 78ch; }
.mp-prose h2 { font-size: 26px; line-height: 1.25; margin: 48px 0 14px; }
.mp-prose h3 { font-size: 19px; line-height: 1.35; margin: 32px 0 10px; }
.mp-prose p, .mp-prose ul, .mp-prose ol { margin: 0 0 16px; }
.mp-prose ul, .mp-prose ol { padding-left: 22px; }
.mp-prose li { margin: 6px 0; }
.mp-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Legacy content shell — everything a page yields lands in main.mp-main */
.mp-main { flex: 1 0 auto; }
.mp-main > .spacer, .mp-main .spacer { height: 64px; }
:where(.mp-legacy) .container:where(:not(.swagger-ui *)) { max-width: 1320px; padding-left: 32px; padding-right: 32px; }
:where(.mp-legacy) h1:where(:not(.swagger-ui *)), :where(.mp-legacy) .h1:where(:not(.swagger-ui *)) { font-size: 40px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: var(--mp-ink); }
:where(.mp-legacy) h2:where(:not(.swagger-ui *)), :where(.mp-legacy) .h2:where(:not(.swagger-ui *)) { font-size: 30px; line-height: 1.2; color: var(--mp-ink); }
:where(.mp-legacy) h3:where(:not(.swagger-ui *)), :where(.mp-legacy) .h3:where(:not(.swagger-ui *)) { font-size: 22px; line-height: 1.3; color: var(--mp-ink); }
:where(.mp-legacy) h4:where(:not(.swagger-ui *)), :where(.mp-legacy) .h4:where(:not(.swagger-ui *)), :where(.mp-legacy) h5:where(:not(.swagger-ui *)), :where(.mp-legacy) h6:where(:not(.swagger-ui *)) { color: var(--mp-ink); }
:where(.mp-legacy) p:where(:not(.swagger-ui *)), :where(.mp-legacy) li:where(:not(.swagger-ui *)) { color: var(--mp-muted); line-height: 1.7; }
:where(.mp-legacy) .text-muted:where(:not(.swagger-ui *)) { color: var(--mp-muted) !important; }
:where(.mp-legacy) .card:where(:not(.swagger-ui *)) { border: 1px solid var(--mp-line); border-radius: var(--mp-r); box-shadow: none; overflow: hidden; }
:where(.mp-legacy) .card-header:where(:not(.swagger-ui *)) { background: var(--mp-soft); border-bottom: 1px solid var(--mp-line); }
:where(.mp-legacy) .btn:where(:not(.swagger-ui *)) { border-radius: var(--mp-r-sm); font-weight: 600; font-family: var(--mp-sans); }
:where(.mp-legacy) .btn-primary:where(:not(.swagger-ui *)), :where(.mp-legacy) .btn-success:where(:not(.swagger-ui *)), :where(.mp-legacy) .btn-info:where(:not(.swagger-ui *)) { background: var(--mp-blue); border-color: var(--mp-blue); color: #fff; }
:where(.mp-legacy) .btn-primary:hover:where(:not(.swagger-ui *)), :where(.mp-legacy) .btn-success:hover:where(:not(.swagger-ui *)), :where(.mp-legacy) .btn-info:hover:where(:not(.swagger-ui *)) { background: var(--mp-blue-hover); border-color: var(--mp-blue-hover); color: #fff; }
:where(.mp-legacy) .btn-outline-primary:where(:not(.swagger-ui *)), :where(.mp-legacy) .btn-outline-success:where(:not(.swagger-ui *)), :where(.mp-legacy) .btn-outline-secondary:where(:not(.swagger-ui *)), :where(.mp-legacy) .btn-light:where(:not(.swagger-ui *)) { background: #fff; border-color: var(--mp-line); color: var(--mp-ink); }
:where(.mp-legacy) .btn-outline-primary:hover:where(:not(.swagger-ui *)), :where(.mp-legacy) .btn-outline-success:hover:where(:not(.swagger-ui *)), :where(.mp-legacy) .btn-outline-secondary:hover:where(:not(.swagger-ui *)), :where(.mp-legacy) .btn-light:hover:where(:not(.swagger-ui *)) { border-color: var(--mp-ink); background: #fff; color: var(--mp-ink); }
:where(.mp-legacy) .form-control:where(:not(.swagger-ui *)) { border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm); min-height: 46px; color: var(--mp-ink); }
:where(.mp-legacy) .form-control:focus:where(:not(.swagger-ui *)) { border-color: var(--mp-blue); box-shadow: 0 0 0 3px var(--mp-blue-t); }
:where(.mp-legacy) textarea.form-control:where(:not(.swagger-ui *)) { min-height: 120px; }
:where(.mp-legacy) label:where(:not(.swagger-ui *)) { font-weight: 600; color: var(--mp-ink); font-size: 14px; }
:where(.mp-legacy) pre:where(:not(.swagger-ui *)), :where(.mp-legacy) .code:where(:not(.swagger-ui *)), :where(.mp-legacy) code[class*='language']:where(:not(.swagger-ui *)) { background: var(--mp-dark); color: var(--mp-code); border-radius: var(--mp-r-sm); }
:where(.mp-legacy) pre:where(:not(.swagger-ui *)) { padding: 20px; font-size: 13px; line-height: 1.7; overflow-x: auto; }
:where(.mp-legacy) :not(pre) > code:where(:not(.swagger-ui *)) { background: var(--mp-mist); color: var(--mp-ink); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }
:where(.mp-legacy) table.table:where(:not(.swagger-ui *)) { border: 1px solid var(--mp-line); border-radius: var(--mp-r); overflow: hidden; border-collapse: separate; border-spacing: 0; }
/* separate borders so the rounded corners close; cells keep only the inner lines (Bootstrap's .table-bordered would double them) */
:where(.mp-legacy) table.table-bordered:where(:not(.swagger-ui *)) :is(th, td) { border: 0; border-top: 1px solid var(--mp-line); border-left: 1px solid var(--mp-line); }
:where(.mp-legacy) table.table-bordered:where(:not(.swagger-ui *)) tr > :first-child { border-left: 0; }
:where(.mp-legacy) table.table:where(:not(.swagger-ui *)) > :first-child > tr:first-child > :is(th, td) { border-top: 0; }
:where(.mp-legacy) table.table:where(:not(.swagger-ui *)) > thead + tbody > tr:first-child > :is(th, td) { border-top: 0; }  /* thead already draws the line */
:where(.mp-legacy) .table thead th:where(:not(.swagger-ui *)) { background: var(--mp-soft); border-bottom: 1px solid var(--mp-line); color: var(--mp-muted); font-size: 13px; letter-spacing: 0.04em; }
:where(.mp-legacy) .table td:where(:not(.swagger-ui *)), :where(.mp-legacy) .table th:where(:not(.swagger-ui *)) { border-top: 1px solid var(--mp-line); }
:where(.mp-legacy) .alert:where(:not(.swagger-ui *)) { border-radius: var(--mp-r); }
:where(.mp-legacy) .badge:where(:not(.swagger-ui *)) { border-radius: 999px; font-weight: 600; }
:where(.mp-legacy) img:where(:not(.swagger-ui *)) { max-width: 100%; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
[data-reveal] { transition: opacity 0.55s var(--mp-ease), transform 0.55s var(--mp-ease); }
[data-reveal].pending { opacity: 0; transform: translateY(20px); }
[data-reveal].pending:nth-child(2) { transition-delay: 0.07s; }
[data-reveal].pending:nth-child(3) { transition-delay: 0.14s; }
[data-reveal].pending:nth-child(4) { transition-delay: 0.21s; }
[data-reveal].pending:nth-child(5) { transition-delay: 0.28s; }
[data-reveal].pending:nth-child(6) { transition-delay: 0.35s; }
[data-reveal].pending .mp-eyebrow__rule, .mp-eyebrow.pending .mp-eyebrow__rule { transform: scaleX(0); }
[data-reveal].pending .mp-stat i, .mp-stat.pending i { transform: scaleX(0); }

@keyframes mp-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes mp-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes mp-flash { 0% { background: rgba(37, 211, 102, 0.3); box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.3); } 100% { background: transparent; box-shadow: none; } }
@keyframes mp-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mp-scan { 0% { top: 6px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
@keyframes mp-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes mp-wire { 0% { left: -34px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes mp-typing { 0%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.mp-x *, .mp-x *::before, .mp-x *::after { animation: none !important; transition: none !important; }
	[data-reveal].pending { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	.mp-nav { gap: 20px; }
	.mp-header__bar { gap: 24px; }
	.mp-status { display: none !important; }
}
@media (max-width: 1000px) {
	.mp-desktop { display: none !important; }
	/* hero: the WhatsApp side stays visible on mobile, one bubble at a time under the terminal */
	.mp-bubbles { position: relative; right: auto; top: auto; width: auto; max-width: 340px; margin: -18px 14px 0 auto; min-height: 152px; }
	.mp-bubble:not(.is-current) { display: none; }
	.mp-burger { display: flex; }
	.mp-split, .mp-hero__grid, .mp-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.mp-faq-grid > .mp-min0:first-child { position: static; }
	.mp-grid-3 { grid-template-columns: minmax(0, 1fr); }
	.mp-grid-4, .mp-metrics ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mp-metrics li { border-right: 0; padding-left: 0; }
	.mp-quote:nth-child(n) { margin-left: 0; }
	.mp-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mp-foot__cta { grid-column: span 2; }
	.mp-integr { order: 2; }
}
@media (max-width: 720px) {
	.mp-wrap:where(:not(.swagger-ui *)), :where(.mp-legacy) .container:where(:not(.swagger-ui *)) { padding-left: 20px; padding-right: 20px; }
	.mp-sec { padding-top: 64px; padding-bottom: 64px; }
	.mp-h1, .mp-page-hero .mp-h1 { font-size: 34px; }
	.mp-h2, .mp-h2--lg { font-size: 27px; }
	:where(.mp-legacy) :where(h1, .h1):where(:not(.swagger-ui *)) { font-size: 30px; }
	:where(.mp-legacy) :where(h2, .h2):where(:not(.swagger-ui *)) { font-size: 24px; }
	.mp-hero__grid { padding-top: 56px; padding-bottom: 64px; }
	.mp-cta { padding: 40px 20px; }
	.mp-input { min-width: 0; width: 100%; }
	.mp-cta__form .mp-btn { width: 100%; }
	.mp-grid-2, .mp-grid-4, .mp-stats { grid-template-columns: minmax(0, 1fr); }
	.mp-foot { grid-template-columns: minmax(0, 1fr); }
	.mp-foot__cta { grid-column: span 1; }
	.mp-calc__rule { display: none; }
}

/* Feature/product hero screenshot */
.mp-hero__shot { border-radius: var(--mp-r); background: #fff; border: 1px solid var(--mp-line); box-shadow: none; padding: 10px; }
.mp-hero__shot img { display: block; width: 100%; height: auto; border-radius: var(--mp-r-sm); }
/* 3D scene illustrations: no card; white background blends into the section colour so only the render's own soft shadows remain */
.mp-scene img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* --------------------------------------------------------------------------
   Legacy page compatibility — feature/tool pages ship their own <style>
   blocks (teal gradients, !important colours), so these rules need real
   specificity (body.mp .mp-legacy …) rather than the :where() layer above.
   -------------------------------------------------------------------------- */
section.mp-x:where(:not(.swagger-ui *)) { padding: 0; width: auto; }
.mp-x a:hover { text-decoration: none; }
.mp-prose a:hover { text-decoration: underline; }

body.mp .mp-legacy section:not(.mp-x):where(:not(.swagger-ui *)) { padding: 72px 0; }
body.mp .mp-legacy .green-section:where(:not(.swagger-ui *)), body.mp .mp-legacy .banner.green:where(:not(.swagger-ui *)), body.mp .mp-legacy .greenBack:where(:not(.swagger-ui *)), body.mp .mp-legacy .getStartedMainContainer:where(:not(.swagger-ui *)) { background: var(--mp-mist) !important; color: var(--mp-ink) !important; }
body.mp .mp-legacy .white-section:where(:not(.swagger-ui *)) { background: #fff; color: var(--mp-muted); }
body.mp .mp-legacy .white-section + .white-section:where(:not(.swagger-ui *)) { border-top: 1px solid var(--mp-line); }

body.mp .mp-legacy .section-title:where(:not(.swagger-ui *)), body.mp .mp-legacy .green-section .section-title:where(:not(.swagger-ui *)), body.mp .mp-legacy .white-section .section-title:where(:not(.swagger-ui *)) {
	color: var(--mp-ink) !important;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em !important;
	padding: 0;
	margin: 0 0 18px;
}
body.mp .mp-legacy .section-description:where(:not(.swagger-ui *)), body.mp .mp-legacy .green-section .section-description:where(:not(.swagger-ui *)), body.mp .mp-legacy .white-section .section-description:where(:not(.swagger-ui *)) {
	color: var(--mp-muted) !important;
	font-size: 16px;
	line-height: 1.7 !important;
	font-weight: 400;
	float: none;
	margin-bottom: 20px;
}
body.mp .mp-legacy .capability-subtitle:where(:not(.swagger-ui *)), body.mp .mp-legacy .green-section .capability-subtitle:where(:not(.swagger-ui *)), body.mp .mp-legacy .feature-subtitle:where(:not(.swagger-ui *)), body.mp .mp-legacy .green-section .feature-subtitle:where(:not(.swagger-ui *)) { color: var(--mp-ink) !important; font-size: 18px; font-weight: 600; margin: 24px 0 8px; }
body.mp .mp-legacy .capability-intro:where(:not(.swagger-ui *)), body.mp .mp-legacy .green-section .capability-intro:where(:not(.swagger-ui *)) { color: var(--mp-muted) !important; font-size: 15px; }
body.mp .mp-legacy .capability-list:where(:not(.swagger-ui *)) { padding-left: 0; list-style: none; }
body.mp .mp-legacy .capability-list li:where(:not(.swagger-ui *)), body.mp .mp-legacy .green-section .capability-list li:where(:not(.swagger-ui *)), body.mp .mp-legacy .white-section .capability-list li:where(:not(.swagger-ui *)) {
	position: relative;
	padding-left: 32px;
	margin: 10px 0;
	color: var(--mp-ink) !important;
	font-size: 15px;
	line-height: 1.6;
}
body.mp .mp-legacy .capability-list li:where(:not(.swagger-ui *))::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e3f3ea;
	color: var(--mp-green);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
body.mp .mp-legacy .section-note:where(:not(.swagger-ui *)), body.mp .mp-legacy .green-section .section-note:where(:not(.swagger-ui *)), body.mp .mp-legacy .white-section .section-note:where(:not(.swagger-ui *)) {
	background: #fff !important;
	color: var(--mp-muted) !important;
	border: 1px solid var(--mp-line);
	border-left: 3px solid var(--mp-blue);
	border-radius: var(--mp-r-sm);
	padding: 14px 18px;
	font-size: 15px;
}
body.mp .mp-legacy .section-image:where(:not(.swagger-ui *)) { border-radius: var(--mp-r); max-width: 100%; height: auto; }
/* Legacy pages: one button language (height, padding, weight) — icon/addon buttons keep their size */
body.mp .mp-legacy .btn:where(:not(.btn-sm, .swagger-ui *, .input-group-append *, .input-group-prepend *, .input-group > *, .dropdown-item)) {
	min-height: 44px; padding: 10px 20px; font-size: 15px; line-height: 1.2; font-weight: 600; border-radius: var(--mp-r-sm);
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
body.mp .mp-legacy .btn-block:where(:not(.swagger-ui *)) { display: flex; width: 100%; }
body.mp .mp-legacy .btn-outline-danger:where(:not(.swagger-ui *)) { background: #fff; border-color: var(--mp-line); color: var(--mp-red, #9a2121); }
body.mp .mp-legacy .btn-outline-danger:hover:where(:not(.swagger-ui *)) { border-color: var(--mp-red, #9a2121); background: #fff; color: var(--mp-red, #9a2121); }
/* Legacy headings: no underlined keyword; card headers white like the rest of the site */
body.mp .mp-legacy :is(h1, h2, h3) span[style*="underline"] { text-decoration: none !important; color: var(--mp-blue); }
body.mp .mp-legacy .card-header:where(:not(.swagger-ui *)) { background: #fff; }

.mp-hl { color: var(--mp-blue); }
/* Partner page */
.mp-tiers { margin-top: 40px; }
.mp-tiers__pct { font-family: var(--mp-sans); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--mp-blue); line-height: 1; }
.mp-tiers__top { border-color: var(--mp-blue); box-shadow: 0 0 0 1px var(--mp-blue) inset; }
.mp-ref__steps { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--mp-muted); }
/* Partner API docs: our own heading replaces Swagger's info block, like the main docs page */
.mp-partner-api .swagger-ui .information-container, .mp-partner-api .swagger-ui .models { display: none; }
.mp-partner-api .swagger-ui .wrapper { padding: 0; max-width: none; }
.mp-partner-api #swagger-ui { margin-top: 28px; }


/* Postman page steps */
.mp-pm-steps { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 16px; }
.mp-pm-steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 18px; padding: 24px 26px; }
.mp-pm-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.mp-pm-shots--one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.mp-pm-shots img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .mp-pm-shots { grid-template-columns: minmax(0, 1fr); } .mp-pm-steps > li { grid-template-columns: minmax(0, 1fr); } }

/* Links inside running text are underlined so they don't rely on colour alone (WCAG 1.4.1) */
body.mp :where(p:not(.mp-paths__links, .mp-devguides)) > a:where(:not(.mp-btn, .btn, .mp-pill, .swagger-ui *)),
body.mp :where(.mp-prose, .mp-acc__body, .mp-changelog__list) li > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

body.mp .mp-legacy code:where(:not(.swagger-ui *, pre code)) { color: #b0275f; }

/* Swagger method badges: darker shades of Swagger's own colours so white labels pass WCAG AA contrast */
.swagger-ui .opblock.opblock-post .opblock-summary-method { background: #1f7a52; }
.swagger-ui .opblock.opblock-get .opblock-summary-method { background: #2a66b8; }
.swagger-ui .opblock.opblock-put .opblock-summary-method { background: #a85a12; }
.swagger-ui .opblock.opblock-delete .opblock-summary-method { background: #b52a2a; }
.swagger-ui .opblock.opblock-patch .opblock-summary-method { background: #2b8a7a; }

/* Legal pages */
.mp-legal { margin: 0 auto; }
.mp-legal h2 { font-size: 22px; margin: 40px 0 12px; }
.mp-legal li { margin-bottom: 6px; }

/* Demo video page */
.mp-demo { max-width: 820px; margin: 0 auto; }
.mp-demo video, .mp-demo img { display: block; width: 100%; height: auto; border-radius: var(--mp-r-sm); background: #fff; }
.mp-demo__cap { text-align: center; font-family: var(--mp-mono); font-size: 12px; color: var(--mp-faint); margin-top: 14px; }
.mp-demo__steps { list-style: none; padding: 0; margin: 36px 0 0; }
.mp-demo__num { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; background: var(--mp-blue-t); color: var(--mp-blue); font-family: var(--mp-mono); font-size: 14px; font-weight: 500; }

/* Changelog timeline */
.mp-changelog { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; }
.mp-changelog__item { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; padding-bottom: 28px; position: relative; }
.mp-changelog__item::before { content: ''; position: absolute; left: 184px; top: 10px; bottom: 0; width: 1px; background: var(--mp-line); }
/* the newest release gets a live dot on the timeline */
.mp-changelog__item.is-latest::after { content: ''; position: absolute; left: 180px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--mp-wa-bright); box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.18); }
/* sticky summary: stays beside a long release instead of leaving the column empty */
.mp-changelog__aside { text-align: right; }
.mp-changelog__aside { position: sticky; top: 96px; align-self: start; padding-top: 18px; }
.mp-changelog__month { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--mp-ink); line-height: 1.25; }
.mp-changelog__date { margin-top: 4px; font-family: var(--mp-mono); font-size: 12.5px; color: var(--mp-muted); }
.mp-changelog__count { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-family: var(--mp-mono); font-size: 11.5px; }
.mp-changelog__count span { padding: 2px 8px; border-radius: 999px; }
.mp-changelog__count .is-new { color: var(--mp-wa); background: #e6f6ee; }
.mp-changelog__count .is-fixed { color: var(--mp-amber); background: var(--mp-amber-t); }
.mp-changelog__card { padding: 22px 26px; }
.mp-changelog__list { margin: 12px 0 18px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--mp-ink); }
.mp-changelog__list:last-child { margin-bottom: 0; }
.mp-changelog__list li { overflow-wrap: anywhere; }  /* long endpoint names would otherwise push the page sideways on phones */
.mp-changelog__list { list-style: none; padding-left: 0; }
.mp-changelog__list li { position: relative; padding-left: 20px; }
.mp-changelog__list li::before { content: ''; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px; border-radius: 2px; background: var(--mp-faint); }
.mp-changelog__list.is-new li::before { background: var(--mp-wa); }
.mp-changelog__list.is-fixed li::before { background: var(--mp-amber, #d97706); }
body.mp .mp-changelog__list code { font-family: var(--mp-mono); font-size: 0.84em; font-weight: 500; color: var(--mp-ink); background: var(--mp-soft); border: 1px solid var(--mp-line); border-radius: 5px; padding: 1px 6px; white-space: normal; }
body.mp .mp-changelog__list a { color: var(--mp-blue); }
@media (max-width: 720px) {
	.mp-changelog__item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.mp-changelog__item::before { display: none; }
	.mp-changelog__aside { position: static; text-align: left; padding-top: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
	.mp-changelog__item.is-latest::after { display: none; }
	.mp-changelog__date { margin-top: 0; }
	.mp-changelog__count { margin-top: 0; flex-direction: row; }
}

/* Docs / Postman action buttons */
.mp-doc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 8px; padding: 0 15px; }
.mp-doc-actions--center { justify-content: center; margin-top: 24px; }
.mp-doc-actions--inline { padding: 0; margin: 24px 0 36px; }
.mp-doc-actions .mp-btn__code { white-space: nowrap; }
@media (max-width: 720px) { .mp-doc-actions .mp-btn { flex: 1 1 100%; justify-content: center; } }

/* Static endpoint index on the documentation page (parts/_apiIndex.ejs, generated) */
.mp-api-index { margin-top: 12px; }
.mp-api-index__base { font-size: 14px; color: var(--mp-muted); }
.mp-api-index__base code, .mp-api-index__table code { font-family: var(--mp-mono); font-size: 13px; color: var(--mp-ink); }
.mp-api-index h3 { font-size: 17px; font-weight: 700; margin: 28px 0 10px; }
.mp-api-index__wrap { overflow-x: auto; border: 1px solid var(--mp-line); border-radius: 8px; }
.mp-api-index__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mp-api-index__table th { text-align: left; font-weight: 600; background: var(--mp-soft); padding: 8px 12px; border-bottom: 1px solid var(--mp-line); }
.mp-api-index__table td { padding: 8px 12px; border-bottom: 1px solid var(--mp-line); vertical-align: top; line-height: 1.5; }
.mp-api-index__table tr:last-child td { border-bottom: 0; }
.mp-api-index__table td:nth-child(2) { white-space: nowrap; }
.mp-api-index__m { display: inline-block; min-width: 56px; font-family: var(--mp-mono); font-size: 12px; font-weight: 700; color: var(--mp-blue); }
.mp-api-index__m--get { color: var(--mp-green); }
.mp-api-index__m--delete { color: var(--mp-red); }
.mp-api-index__m--put, .mp-api-index__m--patch { color: var(--mp-amber); }

/* Illustrations on legacy pages: no box — the white background blends into the section colour, like .mp-scene */
body.mp .mp-legacy :where(.section-image) { mix-blend-mode: multiply; border-radius: 0; box-shadow: none; background: transparent; }

/* Endpoint accordions on feature pages */
body.mp .mp-legacy .accordion .card:where(:not(.swagger-ui *)), body.mp .mp-legacy .endpoint-card:where(:not(.swagger-ui *)) { border-radius: var(--mp-r); border: 1px solid var(--mp-line); margin-bottom: 10px; }

/* Tool pages */
/* old Bootstrap hero headings (number checker, profile photo) follow the page-hero scale used on the other tool pages */
body.mp .mp-legacy h1.display-4:where(:not(.swagger-ui *)) { font-size: 46px; line-height: 1.1; letter-spacing: -0.01em; }
@media (max-width: 640px) { body.mp .mp-legacy h1.display-4:where(:not(.swagger-ui *)) { font-size: 34px; } }
body.mp .mp-legacy [class*='btn-'][class*='copy']:where(:not(.swagger-ui *)), body.mp .mp-legacy .btn-text-formatter:where(:not(.swagger-ui *)), body.mp .mp-legacy .copy-btn:where(:not(.swagger-ui *)) { background: var(--mp-blue) !important; border-color: var(--mp-blue) !important; color: #fff !important; border-radius: var(--mp-r-sm); }
@media (max-width: 720px) {
	body.mp .mp-legacy .section-title:where(:not(.swagger-ui *)), body.mp .mp-legacy .green-section .section-title:where(:not(.swagger-ui *)), body.mp .mp-legacy .white-section .section-title:where(:not(.swagger-ui *)) { font-size: 27px; }
	body.mp .mp-legacy section:not(.mp-x):where(:not(.swagger-ui *)) { padding: 48px 0; }
}

/* --------------------------------------------------------------------------
   Feature page mocks (HTML, not images): WhatsApp chat + webhook event feed
   -------------------------------------------------------------------------- */
.mp-wa { border-radius: var(--mp-r); overflow: hidden; border: 1px solid var(--mp-line); box-shadow: var(--mp-shadow-lg); background: #fff; max-width: 440px; margin: 0 auto; }
.mp-wa__head { display: flex; align-items: center; gap: 11px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--mp-line); }
.mp-wa__body { background: #efeae2; padding: 18px 16px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 360px; }
.mp-wa__msg { align-self: flex-start; max-width: 86%; background: #fff; border-radius: 4px 14px 14px 14px; padding: 8px 10px 6px; box-shadow: 0 1px 1px rgba(22, 35, 42, 0.08); }
.mp-wa__msg--out { align-self: flex-end; background: #d9fdd3; border-radius: 14px 4px 14px 14px; }
.mp-wa__media { height: 120px; border-radius: 8px; background: linear-gradient(135deg, var(--h, #3b4fe4), #25d366); opacity: 0.85; margin-bottom: 8px; }
.mp-wa__title { font-size: 14px; font-weight: 700; color: var(--mp-ink); }
.mp-wa__text { font-size: 14px; line-height: 1.45; color: var(--mp-ink); margin-top: 2px; }
.mp-wa__foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--mp-faint); margin-top: 4px; }
.mp-wa__foot span { font-family: var(--mp-mono); font-size: 11px; margin-left: auto; }
.mp-wa__btns { display: flex; flex-direction: column; margin: 8px -10px -6px; }
.mp-wa__btns span { display: block; text-align: center; padding: 9px 10px; border-top: 1px solid #e9edef; font-size: 14px; font-weight: 600; color: #027eb5; }
.mp-wa__sheet { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 -2px 12px rgba(22, 35, 42, 0.08); }
.mp-wa__sheet-h { font-size: 13px; font-weight: 700; color: var(--mp-wa); margin-bottom: 4px; }
.mp-wa__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #f0f2f5; }
.mp-wa__row b { display: block; font-size: 14px; font-weight: 600; color: var(--mp-ink); }
.mp-wa__row span { display: block; font-size: 12px; color: var(--mp-muted); }
.mp-wa__row i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #8696a0; flex: none; }
.mp-wa__row i.is-on { border: 5px solid var(--mp-wa); }
.mp-wa__cards { display: flex; gap: 10px; overflow-x: auto; margin-top: 8px; padding-bottom: 4px; }
.mp-wa__card { flex: none; width: 200px; background: #fff; border-radius: 12px; padding: 8px 10px 6px; box-shadow: 0 1px 1px rgba(22, 35, 42, 0.08); }
.mp-wa__card .mp-wa__text { font-size: 13px; }

.mp-events { display: flex; flex-direction: column; gap: 10px; background: var(--mp-dark); border-radius: var(--mp-r); padding: 20px; box-shadow: var(--mp-shadow-lg); }
.mp-event { display: flex; align-items: center; gap: 12px; background: var(--mp-dark-2); border: 1px solid var(--mp-dark-line); border-radius: var(--mp-r-sm); padding: 12px 14px; opacity: 0.75; }
.mp-event.is-latest { opacity: 1; border-color: var(--c); }
.mp-event > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.mp-event.is-latest > i { animation: mp-dot 1.4s ease-in-out infinite; }
.mp-event b { display: block; font-family: var(--mp-mono); font-size: 12px; font-weight: 500; color: #fff; }
.mp-event code { display: block; font-size: 11.5px; color: var(--mp-code-key); background: none !important; padding: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-event time { margin-left: auto; font-family: var(--mp-mono); font-size: 11px; color: var(--mp-code-dim); }

/* Legacy code blocks (feature pages' endpoint accordions etc.): the dark
   background above needs light text, whatever the page's own styles say */
body.mp .mp-legacy pre:where(:not(.swagger-ui *)), body.mp .mp-legacy pre code:where(:not(.swagger-ui *)), body.mp .mp-legacy pre code *:where(:not(.swagger-ui *)) { color: var(--mp-code) !important; text-shadow: none !important; }
body.mp .mp-legacy pre:where(:not(.swagger-ui *)) { background: var(--mp-dark) !important; }
body.mp .mp-legacy pre code:where(:not(.swagger-ui *)) { background: transparent !important; padding: 0 !important; font-size: 13px; }

/* --------------------------------------------------------------------------
   Character slots (partner band, CTA, page hero)
   -------------------------------------------------------------------------- */

.mp-cta--char { position: relative; }
.mp-cta__art { position: absolute; right: 48px; bottom: 0; width: 180px; }
.mp-cta__art img { display: block; width: 100%; height: auto; }

.mp-page-hero__in--art { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; align-items: end; padding-bottom: 0; }
.mp-page-hero__in--art > .mp-min0 { padding-bottom: 64px; }
.mp-page-hero__art img { display: block; width: auto; height: 330px; max-width: 100%; margin: 0 auto; }

@media (max-width: 1000px) {
		.mp-cta__art { display: none; }
}
@media (max-width: 1180px) and (min-width: 1001px) {
	.mp-cta__art { width: 140px; right: 20px; }
}

/* --------------------------------------------------------------------------
   Endpoint accordions on feature pages (_*CodeExamples.ejs, built by JS).
   Re-skinned to match the home page code box: dark code panel, mono tabs,
   blue active tab, tone-tinted method badges.
   -------------------------------------------------------------------------- */
body.mp .api-widget { font-family: var(--mp-sans); margin: 32px 0 0; }
body.mp .api-widget .api-endpoint { border: 1px solid var(--mp-line); border-radius: var(--mp-r); margin-bottom: 10px; background: #fff; overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
body.mp .api-widget .api-endpoint:hover { border-color: var(--mp-blue); }
body.mp .api-widget .api-endpoint:has(.api-details) { border-color: var(--mp-dark); box-shadow: var(--mp-shadow-lg); }
body.mp .api-widget .api-header { padding: 14px 18px; gap: 12px; background: #fff; }
body.mp .api-widget .method-badge { width: auto; min-width: 58px; height: 26px; padding: 0 10px; border-radius: 6px; font-family: var(--mp-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
body.mp .api-widget .method-badge.get { background: var(--mp-blue-t); color: var(--mp-blue); }
body.mp .api-widget .method-badge.post { background: var(--mp-green-t); color: var(--mp-green); }
body.mp .api-widget .method-badge.put { background: var(--mp-amber-t); color: var(--mp-amber); }
body.mp .api-widget .method-badge.delete { background: var(--mp-red-t); color: var(--mp-red); }
body.mp .api-widget .endpoint-path { font-family: var(--mp-mono); font-size: 14px; font-weight: 500; color: var(--mp-ink); margin-left: 0; }
body.mp .api-widget .api-description { font-size: 14px; color: var(--mp-muted); margin-right: 36px; }
body.mp .api-widget .expand-icon { font-family: var(--mp-mono); font-size: 11px; color: var(--mp-faint); }

body.mp .api-widget .api-details { border-top: 0; background: var(--mp-dark); }
body.mp .api-widget .language-tabs { background: var(--mp-dark); border-bottom: 1px solid var(--mp-dark-line); flex-wrap: nowrap; overflow-x: auto; }
body.mp .api-widget .language-tabs button { flex: none; height: 44px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; border-top: 0 !important; background: none !important; font-family: var(--mp-mono); font-size: 13px; font-weight: 400; color: #8c9fa6; }
body.mp .api-widget .language-tabs button:hover { color: #fff; }
body.mp .api-widget .language-tabs button.active { color: #fff; border-bottom-color: var(--mp-blue); }
body.mp .api-widget .code-example { background: var(--mp-dark); padding: 16px 20px 22px; }
body.mp .api-widget .code-header { margin-bottom: 8px; }
body.mp .api-widget .code-header span, body.mp .api-widget .code-header > *:first-child { font-family: var(--mp-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mp-code-dim); }
body.mp .api-widget .copy-button { background: transparent; border: 1px solid var(--mp-dark-line); border-radius: 8px; color: var(--mp-code); font-family: var(--mp-mono); font-size: 11px; text-transform: none; letter-spacing: 0; }
body.mp .api-widget .copy-button:hover { border-color: var(--mp-code-dim); background: var(--mp-dark-2); color: #fff; }
body.mp .api-widget .code-example pre,
body.mp .mp-legacy .api-widget pre:where(:not(.swagger-ui *)) { background: transparent !important; padding: 0 !important; border-radius: 0; font-family: var(--mp-mono); font-size: 13px; line-height: 1.75; white-space: pre; overflow-x: auto; }

/* --------------------------------------------------------------------------
   Ban prevention page
   -------------------------------------------------------------------------- */
.mp-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
body.mp .mp-jump a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--mp-line); font-size: 14px; font-weight: 600; color: var(--mp-ink); }
body.mp .mp-jump a:hover { border-color: var(--mp-blue); color: var(--mp-blue); }
.mp-bans { display: flex; flex-direction: column; gap: 16px; margin-top: 36px; }
.mp-ban { padding: 28px; border-left: 4px solid var(--tone); }
.mp-ban__head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.mp-ban__head h3 { font-size: 20px; }
.mp-ban__head .mp-body { margin-top: 4px; }
.mp-ban__head .mp-pill { margin-left: auto; }
.mp-ban__num { flex: none; width: 36px; height: 36px; border-radius: var(--mp-r-sm); background: var(--tone-bg); color: var(--tone); display: flex; align-items: center; justify-content: center; font-family: var(--mp-mono); font-size: 15px; font-weight: 700; }
.mp-ban__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.mp-ban__label { font-family: var(--mp-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mp-faint); }
.mp-ban__list { margin-top: 10px !important; display: flex; flex-direction: column; gap: 8px; }
.mp-ban__list li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.6; color: var(--mp-muted); }
.mp-ban__list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.mp-ban__does { margin-top: 20px; background: var(--mp-soft); border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm); padding: 14px 16px; font-size: 14px; line-height: 1.65; color: var(--mp-ink-2); }
.mp-days { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 8px; }
.mp-days::before { content: ''; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--mp-blue), var(--mp-wa-bright)); opacity: 0.35; }
.mp-days li { position: relative; display: flex; gap: 18px; background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-r); padding: 16px 18px 16px 12px; }
.mp-days__dot { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: #fff; border: 4px solid var(--mp-blue); position: relative; z-index: 1; }
.mp-days li.is-done .mp-days__dot { border-color: var(--mp-wa-bright); }
.mp-days__d { font-family: var(--mp-mono); font-size: 12px; color: var(--mp-blue); }
.mp-days li.is-done .mp-days__d { color: var(--mp-green); }
.mp-days__t { font-size: 16px; font-weight: 600; color: var(--mp-ink); margin-top: 2px; }
@media (max-width: 720px) {
	.mp-ban__grid { grid-template-columns: minmax(0, 1fr); }
	.mp-ban__head .mp-pill { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Mobile fixes (checked at 390px)
   -------------------------------------------------------------------------- */
.mp-split--trusted { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
@media (max-width: 1000px) {
	.mp-split--trusted { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	/* long button labels wrap instead of overflowing */
	.mp-btn { white-space: normal; height: auto; min-height: 48px; padding-top: 12px; padding-bottom: 12px; text-align: center; line-height: 1.3; }
	.mp-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.mp-stat { padding: 18px; }
	/* footer: two link columns instead of one very long list */
	.mp-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding-top: 56px; }
	.mp-foot--2 { padding-top: 28px; }
	.mp-foot__cta { grid-column: 1 / -1; }
	/* legacy tables scroll inside themselves, long links wrap */
	:where(.mp-legacy) table.table:where(:not(.swagger-ui *)) { display: block; overflow-x: auto; }
	:where(.mp-legacy) a:where(:not(.swagger-ui *)) { overflow-wrap: anywhere; }
}
:where(.mp-legacy) .badge-info:where(:not(.swagger-ui *)) { background: var(--mp-blue); color: #fff; }