:root {
	--mp-ink:     var(--wp--preset--color--ink, #05134B);
	--mp-ink-2:   var(--wp--preset--color--ink-2, #2a3470);
	--mp-muted:   var(--wp--preset--color--muted, #6b7088);
	--mp-hair:    var(--wp--preset--color--hair, #e3e5ed);
	--mp-hair-2:  #d4d7e3;
	--mp-accent:  var(--wp--preset--color--accent, #0BC5A1);
	--mp-warn:    var(--wp--preset--color--warn, #E8536B);
	--mp-bg:      var(--wp--preset--color--bg, #f4f5f8);
	--mp-surface: var(--wp--preset--color--surface, #ffffff);

	/* Surfaces / text that diverge between light and dark but have no WP preset.
	   invert = always-dark feature surface (cards/sections carrying white text);
	   invert-ink = dark text for white/teal buttons sitting on those surfaces —
	   constant across themes so they never go white-on-white (token rule
	   `invertInk-stays-dark`). */
	--mp-subtle:     #fafbfd;
	--mp-invert:     #05134B;
	--mp-invert-ink: #05134B;

	/* Status pills (live / soon): tinted bg + saturated fg; both brighten in dark. */
	--mp-pill-live-bg: rgba(11, 197, 161, 0.12);
	--mp-pill-live-fg: #0a8c73;
	--mp-pill-soon-bg: rgba(232, 83, 107, 0.10);
	--mp-pill-soon-fg: #c4435a;

	/* Translucent sticky-bar fill — tracks the invert surface (with alpha). */
	--mp-sticky-bg:  rgba(5, 19, 75, 0.92);

	--mp-radius-sm: 10px;
	--mp-radius-md: 14px;
	--mp-radius-lg: 18px;

	--mp-shadow-card: 0 24px 60px -30px rgba(5, 19, 75, 0.18);
	--mp-shadow-cta:  0 18px 48px -16px rgba(5, 19, 75, 0.45);
	--mp-shadow-pop:  0 18px 40px -16px rgba(5, 19, 75, 0.25);
	--mp-shadow-tip:  0 8px 24px -8px rgba(5, 19, 75, 0.5);

	/* vw factors picked so values hit their max at the 1280 design width:
	   4.5vw·1280 = 57.6 → clamp caps at 56; 7.5vw·1280 = 96. */
	--mp-edge:    clamp(22px, 4.5vw, 56px);
	--mp-section: clamp(48px, 7.5vw, 96px);
	/* Adaptive horizontal padding for landing wrappers: keeps inner content
	   capped at 1168px and centered on viewports wider than ~1280. Computed
	   per-element via `100%` (the wrapper's own width). */
	--mp-edge-x:  max(var(--mp-edge), calc((100% - 1168px) / 2));
}

body {
	background: var(--mp-bg);
	color: var(--mp-ink);
	font-weight: 400;
	letter-spacing: 0;
	/* No font-smoothing override: the design renders at the browser default
	   (subpixel-antialiased on macOS), which gives Manrope its intended visual
	   weight. Forcing `antialiased` makes everything read ~half a step lighter. */
}

a { color: inherit; }

.wp-block-heading {
	text-wrap: balance;
}

/* Landing sections center their content via adaptive horizontal padding
   (--mp-edge-x). On wider-than-1280 viewports the section padding grows so
   the inner content area stays at 1168px max, centered. Children fill that
   area naturally (content-size set to 100% to disable WP's auto-centering
   of constrained children — every direct child of the section then sits at
   the left edge of the centered content area). Section-head items (h2,
   sub) get their own narrower max-widths below. */
.mp-hero,
.mp-section,
.mp-trust-wrap,
.mp-header,
.mp-footer {
	--wp--style--global--content-size: 100%;
}

/* Editor-only escape: in the block editor, the alignfull class isn't applied
   to the live DOM (only to saved markup), so WP's
   `.is-root-container > :where(:not(.alignfull))` rule clamps these sections
   to contentSize (1168px) and adds auto-margins. Combined with
   `.has-global-padding` (root padding ≈ 394px at wide canvas), the inner
   content collapses to ~380px. Lifting max-width restores the section to
   parent width; --mp-edge-x padding still centers content to 1168. Harmless
   on the front-end, where alignfull genuinely escapes via negative margins. */
.mp-hero,
.mp-section,
.mp-trust-wrap,
.mp-closing,
.mp-header,
.mp-footer,
/* The sticky CTA is full-bleed on the front-end via `position: fixed; left/right:0`,
   so it has no `align:full`. In the canvas, fixed is neutralised to `relative` and
   the same `.is-root-container` rule clamps it to 1168px — leaving its dark bar as a
   centered pill instead of a full-width band like the closing CTA above it. Lift the
   clamp so the background spans the canvas; `.mp-sticky-cta__inner` keeps the content
   centered at content-size on its own. No-op on the front-end (no max-width there). */
.mp-sticky-cta {
	max-width: none !important;
}

/* Same missing-alignfull condition, second symptom: these sections and the
   root container both carry `.has-global-padding`, but without `.alignfull`
   to exempt them WP's nested-padding reset
   (`.has-global-padding :where(… > .has-global-padding:not(.alignfull))` —
   same 0,1,0 specificity, but loaded after our rule) zeroes their horizontal
   padding. That drops --mp-edge-x and the content spans the full canvas, so
   re-assert it. Front-end-safe: alignfull is present there, so these already
   resolve to var(--mp-edge-x). The footer (fixed 56px) and header are left
   out on purpose. */
.mp-hero,
.mp-section,
.mp-trust-wrap,
.mp-closing {
	padding-left: var(--mp-edge-x) !important;
	padding-right: var(--mp-edge-x) !important;
}

/* Inline atoms ------------------------------------------------------------- */

p.is-style-mp-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--mp-surface);
	border: 1px solid var(--mp-hair);
	padding: 6px 12px;
	border-radius: 99px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mp-ink-2);
	margin: 0;
	width: max-content;
}
p.is-style-mp-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--mp-accent);
	border-radius: 99px;
	flex: 0 0 6px;
}

.is-style-mp-eyebrow {
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--mp-muted);
	font-weight: 500;
	/* Section-head rhythm: 16px below the eyebrow before the h2. Setting
	   `margin-top: 0` simultaneously cancels the implicit `<p>` 1em above. */
	margin: 0 0 16px;
}

.is-style-mp-fineprint {
	font-size: 13px;
	line-height: normal;
	color: var(--mp-muted);
}

.is-style-mp-mono {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--mp-muted);
}

.wp-block-button.is-style-mp-outline > .wp-block-button__link {
	background: transparent !important;
	color: var(--mp-ink);
	border: 1px solid var(--mp-hair-2);
}

/* Filled-button hover -------------------------------------------------------
   The parent theme's global button :hover references color slugs this child
   palette doesn't define (`contrast` / `base`), so on the default ink fill the
   inherited `color-mix()` resolves to nothing and the background collapses to
   transparent — the button loses its shape on hover. We make that collapse
   deliberate instead: the fill goes transparent and a 1px ring in the button's
   own rest fill-colour appears, with the text recoloured to that same colour
   so it stays legible (a "ghost" hover). The ring is an inset box-shadow, not
   a real border, so it never shifts layout regardless of these buttons'
   content-box sizing (some carry a 1px transparent border for height, others
   are borderless — see the hero/pricing/closing notes). Three contexts, each
   keyed to its rest fill: default ink (light sections), white (dark sections),
   and accent/teal (the sticky bar). Outline buttons already carry a border and
   are left untouched. Specificity (0,4,0 / 0,5,0) clears the parent's (0,2,0)
   hover in both the front end and the editor canvas, where load order flips. */
.wp-block-button:not(.is-style-mp-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-mp-outline) > .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var(--mp-ink);
	box-shadow: inset 0 0 0 1px var(--mp-ink);
}
.is-style-mp-section-dark .wp-block-button:not(.is-style-mp-outline) > .wp-block-button__link:hover,
.is-style-mp-section-dark .wp-block-button:not(.is-style-mp-outline) > .wp-block-button__link:focus-visible,
.is-style-mp-card-dark .wp-block-button:not(.is-style-mp-outline) > .wp-block-button__link:hover,
.is-style-mp-card-dark .wp-block-button:not(.is-style-mp-outline) > .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px #fff;
}
.mp-sticky-cta .wp-block-button:not(.is-style-mp-outline) > .wp-block-button__link:hover,
.mp-sticky-cta .wp-block-button:not(.is-style-mp-outline) > .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var(--mp-accent);
	box-shadow: inset 0 0 0 1px var(--mp-accent);
}

/* Card / surface variants -------------------------------------------------- */

.wp-block-group.is-style-mp-card {
	background: var(--mp-surface);
	border: 1px solid var(--mp-hair);
	border-radius: var(--mp-radius-lg);
	padding: clamp(20px, 3vw, 32px);
	box-shadow: var(--mp-shadow-card);
}

.wp-block-group.is-style-mp-card-dark {
	background: var(--mp-invert);
	color: #fff;
	border-radius: var(--mp-radius-lg);
	padding: clamp(24px, 4vw, 44px);
}
.wp-block-group.is-style-mp-card-dark a { color: #fff; }

.wp-block-group.is-style-mp-section-dark {
	background: var(--mp-invert);
	color: #fff;
	/* Closing CTA caps at 80 vertical (vs 96 for light sections). */
	padding-top: clamp(56px, 6.25vw, 80px);
	padding-bottom: clamp(56px, 6.25vw, 80px);
	margin-top: 0;
	margin-bottom: 0;
}
.wp-block-group.is-style-mp-section-dark a { color: rgba(255, 255, 255, 0.85); }
.wp-block-group.is-style-mp-section-dark .wp-block-button__link {
	background: #fff;
	color: var(--mp-invert-ink);
}

.wp-block-group.is-style-mp-step-card {
	background: var(--mp-surface);
	border: 1px solid var(--mp-hair);
	border-radius: var(--mp-radius-md);
	padding: 24px 26px;
}

/* Header / Footer ---------------------------------------------------------- */

.mp-header {
	padding: 20px var(--mp-edge-x);
}
/* The header's inner row uses the WP flex layout, which inherits
   `--wp--style--block-gap: 1.2em` (≈19.2px). Reference design uses 28px between
   nav links and a tight 10px between the lang pill / sign-in / primary CTA, so
   we override per region rather than rely on the cascade. */
.mp-header .mp-nav {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mp-header .wp-block-group .wp-block-group {
	gap: 10px;
}
/* Compact pill CTA in the header (10/18, 14px/500, fully rounded) — distinct
   from the squarer 12px-radius CTAs used in the hero / closing sections.
   `line-height: normal` is explicit so the body's 1.55 cascade doesn't inflate
   the pill from the design's 39px to 42px. The header generally runs `normal`
   line-height to mirror the prototype's tighter rhythm — see the same override
   on the nav links, sign-in link, and lang switch below. */
.mp-header .wp-block-button__link {
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	border-radius: 99px;
	/* WP core sets `.wp-block-button__link { height: 100% }`, and the
	   `.wp-block-button` wrapper inherits the body's 1.55 line-height, which
	   together inflate the pill from the design's 34/39px to ~52px. Switch
	   the link to inline-flex with explicit centering so padding+font alone
	   determine its size, and the height stays intrinsic. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
}
.mp-header .wp-block-button { line-height: 0; }
/* Nav links sit at ink-2 (the muted-on-light text color) like the design.
   Bumped specificity since theme.json's body color cascades to nav items. */
.mp-header .mp-nav a {
	color: var(--mp-ink-2);
	line-height: normal;
	text-decoration: none;
}
.mp-signin {
	font-size: 14px;
	line-height: normal;
	margin: 0;
}
/* Telegram round-icon link — mobile-only quick path to @myprofit_chat,
   matches the reference's 30px circle with 1px hairline border. Hidden on
   desktop where the full nav and "Войти" link already cover community/auth. */
.mp-header__tg {
	display: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid var(--mp-hair);
	color: var(--mp-ink-2);
	text-decoration: none;
	/* The right-side group is `is-nowrap is-layout-flex` and would otherwise
	   shrink the icon below 30px to fit the row alongside the lang pill and
	   CTA. Pin to intrinsic size. */
	flex: 0 0 auto;
}
.mp-signin a {
	display: inline-block;
	padding: 8px 4px;
	text-decoration: none;
	color: var(--mp-ink-2);
}
/* Lang switch — interactive dropdown (pill trigger + listbox of RU/UZ/EN).
   Server-rendered by the myprofit/lang-switch block from pll_the_languages();
   each option is a real Polylang link, so the trigger reflects the current
   language and the active option carries `is-active`. lang-switch.js only owns
   the open/close affordance — navigation is the links' job. The legacy
   `is-soon`/__badge/__tip rules below are now dead (no "скоро" state) but kept
   harmless. */
.mp-lang-switcher {
	position: relative;
	display: inline-flex;
}
.mp-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid rgba(5, 19, 75, 0.12);
	border-radius: 999px;
	background: transparent;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 600;
	line-height: normal;
	color: var(--mp-ink-2);
	letter-spacing: 0.04em;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 160ms ease;
}
.mp-lang-switch:hover,
.mp-lang-switch[aria-expanded="true"] {
	background: rgba(5, 19, 75, 0.04);
}
/* Chevron rendered via mask so it picks up `currentColor` — same shape as the
   design's inline SVG (path M3 4.5 6 7.5 9 4.5, 1.5 stroke, round joins). The
   inline <svg> in parts/header.html gets stripped by KSES when WP hydrates the
   template-part into the DB, so a CSS-only chevron is the durable approach.
   Flips 180° on open as visual feedback for the toggle. */
.mp-lang-switch::after {
	content: "";
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	background-color: currentColor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	transition: transform 160ms ease;
}
.mp-lang-switch[aria-expanded="true"]::after {
	transform: rotate(180deg);
}
.mp-lang-switch__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	display: flex;
	flex-direction: column;
	min-width: 168px;
	padding: 4px;
	background: var(--mp-surface);
	border: 1px solid var(--mp-hair);
	border-radius: 12px;
	box-shadow: var(--mp-shadow-pop);
	z-index: 60;
}
.mp-lang-switch__menu[hidden] {
	display: none;
}
.mp-lang-switch__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	box-sizing: border-box; /* <a> defaults to content-box (unlike the old <button>); without this width:100% + padding overflows the menu */
	padding: 8px 10px;
	border: 0;
	background: transparent;
	border-radius: 8px;
	color: var(--mp-ink);
	text-decoration: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: normal;
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.mp-lang-switch__option:hover {
	background: rgba(5, 19, 75, 0.04);
}
.mp-lang-switch__option.is-active {
	background: rgba(5, 19, 75, 0.05);
	font-weight: 600;
}
.mp-lang-switch__option-text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.mp-lang-switch__code {
	min-width: 18px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 500;
	color: var(--mp-muted);
	letter-spacing: 0.04em;
}
.mp-lang-switch__badge {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--mp-muted);
}
.mp-lang-switch__check {
	color: var(--mp-accent);
	font-weight: 700;
}
.mp-lang-switch__tip {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	padding: 6px 10px;
	background: var(--mp-invert);
	color: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: normal;
	border-radius: 8px;
	white-space: nowrap;
	box-shadow: var(--mp-shadow-tip);
	z-index: 70;
}
.mp-lang-switch:focus-visible,
.mp-lang-switch__option:focus-visible {
	outline: 2px solid var(--mp-accent);
	outline-offset: 2px;
}
/* Footer — design has it sit flush against the closing CTA (both dark) with
   only a thin 1px white-8% hairline separating them. The two are separate
   template parts in WP, and the wrapping `.wp-block-template-part` carries a
   1.2rem block-gap above it, so we zero that here. We also override
   `.is-style-mp-section-dark`'s 80px vertical padding with the design's
   tighter 32 / 40 footer rhythm. */
.wp-site-blocks > .wp-block-template-part,
.wp-block-template-part {
	margin-top: 0;
	margin-bottom: 0;
}
/* The page's <main> wrapper sits between the header template-part and the
   page content; WP's root layout adds a 1.2em (≈19px) block-gap top margin
   to it, which lifts the hero off the header. The prototype has the hero
   flush against the header, so we zero it. */
.wp-site-blocks > main {
	margin-top: 0;
	margin-bottom: 0;
}
.wp-block-group.mp-footer.is-style-mp-section-dark {
	padding: 32px 56px 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mp-footer__row {
	gap: 0;
}
.mp-footer__left {
	gap: 32px;
}
.mp-footer__right {
	gap: 24px;
}
/* Three primary footer links (Продукт / Тарифы / FAQ), now a classic menu
   rendered as <ul class="mp-footer__menu"> by myprofit/nav — 13px Manrope at
   0.7 alpha. The `.mp-footer__menu a` selector (3 classes) outweighs
   `.wp-block-group.is-style-mp-section-dark a { color: rgba(...,.85) }`, so the
   muted 0.7 sticks. */
.mp-footer .mp-footer__menu {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mp-footer .mp-footer__menu a {
	font-size: 13px;
	font-weight: 400;
	line-height: normal;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}
.mp-footer .mp-footer__menu a:hover {
	color: rgba(255, 255, 255, 0.95);
}
/* Right-side meta — on desktop the prototype wraps the whole right group in
   mono 12, so chat + signin + copy all render in ui-monospace here; the
   mobile @media block flips chat + signin back to the inherited sans, where
   only the copyright stays mono per the mobile prototype. Chat keeps the
   brighter 0.85 alpha; sign-in is 0.7; copyright is 0.55. */
.mp-footer a.mp-footer__chat,
.mp-footer a.mp-footer__signin,
.mp-footer .mp-footer__copy {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	text-decoration: none;
}
.mp-footer a.mp-footer__chat { color: rgba(255, 255, 255, 0.85); }
.mp-footer a.mp-footer__signin { color: rgba(255, 255, 255, 0.7); }
.mp-footer .mp-footer__copy { color: rgba(255, 255, 255, 0.55); }
.mp-footer .mp-lang-switch {
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.85);
	font-size: 11px;
}
.mp-footer .mp-lang-switch:hover,
.mp-footer .mp-lang-switch[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.06);
}
/* Footer sits at the bottom of the document — flip the listbox and tooltip
   above the trigger so they don't extend past the page edge. */
.mp-footer .mp-lang-switch__menu,
.mp-footer .mp-lang-switch__tip {
	top: auto;
	bottom: calc(100% + 6px);
}
.mp-footer .mp-lang-switch__menu {
	background: #0a1a55;
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 -18px 40px -12px rgba(0, 0, 0, 0.5);
}
.mp-footer .mp-lang-switch__option {
	color: #fff;
}
.mp-footer .mp-lang-switch__option:hover,
.mp-footer .mp-lang-switch__option.is-active {
	background: rgba(255, 255, 255, 0.08);
}
.mp-footer .mp-lang-switch__code,
.mp-footer .mp-lang-switch__badge {
	color: rgba(255, 255, 255, 0.55);
}
.mp-logo-on-dark img { filter: brightness(0) invert(1); }
/* Logo sizing — design uses 22px in the header, 20px in the footer (both at
   ~4:1 aspect ratio). Constrain by height so the same uploaded logo file
   serves both contexts without per-block width tuning. */
.mp-header .wp-block-site-logo img {
	height: 22px;
	width: auto;
	max-width: none;
}
.mp-footer .wp-block-site-logo img {
	height: 20px;
	width: auto;
	max-width: none;
}

/* Hero --------------------------------------------------------------------- */

.mp-hero {
	/* Asymmetric: less above (header sits flush), more below (lead-in to trust strip). */
	padding: clamp(40px, 5vw, 64px) var(--mp-edge-x) clamp(48px, 6.25vw, 80px);
}
.mp-hero__h1 {
	font-size: clamp(40px, 6vw, 76px);
	letter-spacing: -0.03em;
	line-height: 0.98;
	font-weight: 600;
	/* Pill above owns the gap to h1 (mb 28); subhead below owns the gap from
	   h1 (mt 24). Setting margin here would compete with those. */
	margin: 0;
}
.mp-hero__sub {
	color: var(--mp-muted);
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.5;
	max-width: 520px;
	margin: 24px 0 32px;
}
.mp-hero__sub strong {
	color: var(--mp-ink);
	font-weight: 600;
}
.mp-hero__visual img {
	width: 100%;
	height: auto;
	border-radius: var(--mp-radius-lg);
	box-shadow: var(--mp-shadow-card);
}
/* Localized hero dashboard placeholder. The hero visual is a flat <img>-loaded
   SVG with baked-in Russian text, so it can't read the page language — swap to
   the per-language sibling via `content`, keyed on the <html lang> Polylang
   emits (ru-RU keeps the base <img src>; the rest swap below). Exact-match
   selectors so uz-UZ (Latin) and uz-UZ-cyrl (Cyrillic) stay distinct — a
   [lang^="uz"] prefix would wrongly catch both. Dark-mode siblings live in
   dark.css, which loads after this file and wins the same-specificity tie. When
   the real screenshot ships, repoint these at localized screenshots (or drop
   them and localize the single <img src>). */
html[lang="uz-UZ"] .mp-hero__visual img      { content: url(../img/hero-placeholder-uz.svg); }
html[lang="en-US"] .mp-hero__visual img      { content: url(../img/hero-placeholder-en.svg); }
html[lang="uz-UZ-cyrl"] .mp-hero__visual img { content: url(../img/hero-placeholder-uzc.svg); }
/* Hero column rhythm — override the WP block-gap (1.2em) cascade with the
   spacing the prototype uses: 28px below the pill, 24/32 around the subhead,
   0 around the buttons row, 16 above the fineprint. */
.mp-hero .is-style-mp-pill { margin-bottom: 28px; }
.mp-hero .wp-block-buttons { margin: 0; gap: 12px; }
.mp-hero .is-style-mp-fineprint { margin: 16px 0 0; }
/* Hero columns: text 47.5% / dashboard 52.5% to match the design's
   `gridTemplateColumns: 0.95fr 1.05fr`. CSS overrides Gutenberg's default
   equal split (since the hero pattern doesn't set explicit column widths).
   The 56px gap matches the prototype's grid `gap: 56px` (WP's column block
   defaults to ~50px via `--wp--style--block-gap`). */
.mp-hero > .wp-block-columns {
	gap: 56px;
}
.mp-hero > .wp-block-columns > .wp-block-column:first-child {
	flex-basis: 47.5% !important;
}
.mp-hero > .wp-block-columns > .wp-block-column:last-child {
	flex-basis: 52.5% !important;
}
/* Hero CTA buttons: 14/22 padding, 15px/500, 12px radius — squarer and
   slightly chunkier than the header's 10/18 pill. The 1px transparent
   border mirrors the prototype's `border: 1px solid transparent` baseline
   (the prototype uses content-box, so that 1px adds 2px to the rendered
   height — without it the WP buttons render 49px instead of the design's
   51px). The global `.is-style-mp-outline` rule overrides border-color on
   the secondary, painting the visible hairline. */
.mp-hero .wp-block-button__link {
	padding: 14px 22px;
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	border: 1px solid transparent;
	border-radius: 12px;
}

/* Closing CTA -------------------------------------------------------------- */

.mp-closing {
	padding-left: var(--mp-edge-x);
	padding-right: var(--mp-edge-x);
}
.mp-closing__h2 {
	font-size: clamp(30px, 4.5vw, 56px);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.0;
	margin: 0;
}
/* Closing CTA columns: 54.5% / 45.5% to match design's `1.2fr 1fr` grid.
   Override the saved 60% / 40% inline flex-basis values. */
.mp-closing > .wp-block-columns {
	gap: 48px;
}
.mp-closing > .wp-block-columns > .wp-block-column:first-child {
	flex-basis: 54.5% !important;
}
.mp-closing > .wp-block-columns > .wp-block-column:last-child {
	flex-basis: 45.5% !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Right column children — kill the default block-gap top-margin so the
   container's `gap: 12` is the only inter-element spacing. */
.mp-closing > .wp-block-columns > .wp-block-column:last-child > * {
	margin-top: 0;
	margin-bottom: 0;
}
/* Lead p — dimmed against the dark background, like the prototype. */
.mp-closing > .wp-block-columns > .wp-block-column:last-child > p:not(.is-style-mp-fineprint) {
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}
/* Primary CTA on the dark closing — 14/22, 15/600, 12px radius. The
   dark-section rule already paints it white with ink text; this locks the
   geometry. The hero/pricing buttons use a 1px transparent border so they
   render at 51px (matching their prototype source); the closing CTA is
   borderless in the prototype, so we render at 49. */
.mp-closing .wp-block-button__link {
	padding: 14px 22px;
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	border-radius: 12px;
}
/* Telegram link below the CTA — the prototype renders it as a regular
   14/500 link, not a fineprint caption. Override the saved fineprint class
   so the size and weight match without changing the markup. The underline
   is a custom 1px border-bottom at 0.4 alpha (the prototype prefers that
   over the browser's default `text-decoration` because the standard
   underline rides too close to the descenders on Manrope at 14px and the
   color stops obeying the alpha channel). */
.mp-closing .is-style-mp-fineprint,
.mp-closing .is-style-mp-fineprint a {
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
}
.mp-closing .is-style-mp-fineprint a {
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
}
.mp-closing .is-style-mp-fineprint a:hover {
	border-bottom-color: rgba(255, 255, 255, 0.7);
}

/* Stat block --------------------------------------------------------------- */

.mp-stat {
	background: var(--mp-surface);
	border: 1px solid var(--mp-hair);
	border-radius: var(--mp-radius-md);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.mp-stat__label {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mp-muted);
	font-weight: 500;
}
.mp-stat__value {
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--mp-ink);
	font-variant-numeric: tabular-nums;
}
.mp-stat__delta {
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.mp-stat.is-polarity-positive .mp-stat__delta { color: var(--mp-accent); }
.mp-stat.is-polarity-negative .mp-stat__delta { color: var(--mp-warn); }
.mp-stat.is-polarity-positive .mp-stat__delta::before { content: "↑ "; }
.mp-stat.is-polarity-negative .mp-stat__delta::before { content: "↓ "; }

.is-style-mp-card-dark .mp-stat,
.is-style-mp-section-dark .mp-stat {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.10);
	color: #fff;
}
.is-style-mp-card-dark .mp-stat__label,
.is-style-mp-section-dark .mp-stat__label {
	color: rgba(255, 255, 255, 0.65);
}
.is-style-mp-card-dark .mp-stat__value,
.is-style-mp-section-dark .mp-stat__value {
	color: #fff;
}
/* Inside dark cards (success story), value reads first; label is a small,
   non-uppercase caption beneath. Matches the design's stat treatment. */
.is-style-mp-card-dark .mp-stat__value {
	order: 1;
}
.is-style-mp-card-dark .mp-stat__label {
	order: 2;
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
	font-weight: 400;
}

/* Section header (eyebrow + h2 + subhead) ---------------------------------- */

.mp-section {
	padding-left: var(--mp-edge-x);
	padding-right: var(--mp-edge-x);
	/* Bottom-only vertical rhythm: each section provides the gap below itself,
	   so consecutive sections sit flush rather than stacking padding. */
	padding-top: 0;
	padding-bottom: var(--mp-section);
	/* Suppress the root-block gap WP's constrained layout adds between siblings,
	   so the only spacing between sections is each section's own padding-bottom. */
	margin-top: 0;
	margin-bottom: 0;
}
.mp-section__h2 {
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.05;
	max-width: 720px;
	/* WP's constrained-layout rule injects `margin-left: auto !important` on
	   direct children — must override to keep section heads left-anchored.
	   The 14px below the h2 is the prototype's section-head rhythm: when a
	   subhead follows, it sits 14 below; when nothing does, the section's
	   own grid provides the larger gap (~40) via its own top margin. */
	margin: 0 auto 14px 0 !important;
}
.mp-section__sub {
	color: var(--mp-muted);
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.55;
	max-width: 560px;
	/* The subhead is the last element in the section head — the gap to the
	   following grid/content is owned by that element's `margin-top`, not by
	   the subhead's `margin-bottom`. */
	margin: 0 auto 0 0 !important;
}

/* Features grid ------------------------------------------------------------ */

.mp-features-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	/* Section-head ends with the subhead; the grid sits 40px below it. The
	   default WP block-gap (1.2em ≈ 19.2px) lands here unless we override. */
	margin-top: 40px;
}
/* Suppress WP's root-block-gap margin on grid items — without this, every
   item except the first carries margin-top: 1.2rem, which shoves the second
   and third items in row 1 below the first. The grid `gap` already handles
   row/column spacing. Same logic applies to `.mp-int-grid`, `.mp-how-grid`,
   and `.mp-trust` (a 5-column stat grid). */
.mp-features-grid > *,
.mp-int-grid > *,
.mp-how-grid > *,
.mp-trust > *,
.mp-story__stats > * {
	margin-top: 0;
	margin-bottom: 0;
}
@media (max-width: 960px) {
	.mp-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mp-features-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* Trust strip -------------------------------------------------------------- */

.mp-trust-wrap {
	padding: 0 var(--mp-edge-x);
	/* Hero's bottom padding owns the gap above; the strip provides the gap below. */
	margin-top: 0;
	margin-bottom: var(--mp-section);
}

.wp-block-group.is-style-mp-card.mp-trust {
	padding: 0;
	box-shadow: none;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}
.mp-trust .mp-stat {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 22px 24px;
	/* Strip the default `.mp-stat` 6px flex-gap so the only spacing between
	   value and label comes from the label's own 4px margin-top (otherwise
	   gap + margin-top compound to 10px, vs the design's 4). */
	gap: 0;
}
.mp-trust .mp-stat:not(:last-child) {
	border-right: 1px solid var(--mp-hair);
}
.mp-trust .mp-stat__label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	color: var(--mp-muted);
	order: 2;
	margin-top: 4px;
}
.mp-trust .mp-stat__value {
	font-size: 26px;
	line-height: normal;
	order: 1;
}

@media (max-width: 700px) {
	.wp-block-group.is-style-mp-card.mp-trust {
		grid-template-columns: 1fr 1fr;
	}
	.mp-trust .mp-stat { padding: 18px 16px; }
	/* Reference DFTrust on mobile: no vertical column dividers (only the
	   row hairlines below the first three cells). The 5-cell layout leaves
	   the bottom-right slot empty rather than spanning the 5th cell across
	   both columns. The selector below matches the base
	   `.mp-trust .mp-stat:not(:last-child) { border-right: 1px ... }` rule's
	   specificity so the override actually wins. */
	.mp-trust .mp-stat:not(:last-child) { border-right: none; }
	.mp-trust .mp-stat:nth-child(-n+3) {
		border-bottom: 1px solid var(--mp-hair);
	}
	/* DFTrust on mobile uses a 22px value (vs 26 desktop). */
	.mp-trust .mp-stat__value { font-size: 22px; }
	/* The 5th stat ("20 000 000+ сум") spans both columns on mobile so the
	   bottom-right slot doesn't sit empty. */
	.mp-trust .mp-stat:nth-child(5):last-child {
		grid-column: 1 / -1;
	}
}

/* Hidden tax --------------------------------------------------------------- */

.mp-hidden-tax__cols {
	/* Design uses a 56px column gap; clamp(...,4vw,56) capped at 51.2 at 1280. */
	gap: 56px;
}
.mp-hidden-tax__card.wp-block-group.is-style-mp-card {
	padding: 28px 32px;
}
.mp-hidden-tax__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}
.mp-hidden-tax__head-label {
	font-size: 12px;
	line-height: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mp-muted);
	font-weight: 500;
}
.mp-hidden-tax__head-total {
	font-size: 12px;
	line-height: normal;
	color: var(--mp-warn);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}
.mp-hidden-tax__foot {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: normal;
	color: var(--mp-ink);
	font-weight: 500;
}

/* Row list (hours-per-week, comparisons) ----------------------------------- */

.mp-rowlist {
	margin-top: 12px;
	border-top: 1px solid var(--mp-hair);
}
/* Each row is a flex Group with two paragraphs (title + hours) — the same
   durable two-cell structure as .mp-hidden-tax__head. The two cells are
   independent blocks, so editing one in Gutenberg never mangles the other.
   `.wp-block-group` lifts specificity above WP's is-layout-flex defaults. */
.mp-rowlist__row.wp-block-group {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-block: 0; /* cancel WP flow-layout block-gap between rows */
	padding: 12px 0;
	border-bottom: 1px solid var(--mp-hair);
}
.mp-rowlist__t {
	margin: 0;
	color: var(--mp-ink-2);
	font-size: 15px;
	line-height: normal;
}
.mp-rowlist__h {
	margin: 0;
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--mp-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Hidden-tax mobile overrides — placed after the base rules so they win on
   identical-specificity selectors (the .mp-hidden-tax__card and __foot rules
   above use the same selectors). DFHiddenTax mobile uses 22px card padding
   (vs desktop 28/32), 14px row labels and foot (vs desktop 15), and a tighter
   24px gap between the stacked columns (vs desktop's 56px column gap). */
@media (max-width: 700px) {
	.mp-hidden-tax__cols { gap: 24px; }
	.mp-hidden-tax__card.wp-block-group.is-style-mp-card { padding: 22px; }
	.mp-hidden-tax .mp-rowlist__t { font-size: 14px; }
	.mp-hidden-tax__foot { font-size: 14px; }
}

/* Integrations grid -------------------------------------------------------- */

.mp-int-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	/* Section-head ends with the subhead; the cards grid sits 40px below. */
	margin-top: 40px;
}
/* Integrations footnote — `ui-monospace`, 13px, muted. The prototype renders
   this caption in the same mono family as the footer copyright/handle (a
   small touch that visually echoes the technical "API / integrations" tone
   of the section). Forced explicitly so pages whose saved markup still
   carries `is-style-mp-mono` (which sets 11px) or `is-style-mp-fineprint`
   (which sets 13px sans) all land at the same rendering. The `.mp-section`
   prefix bumps specificity above WP's
   `.is-layout-constrained > *:last-child { margin-block-end: 0 }` reset, so
   the 13px bottom-margin survives even when the footnote is the section's
   last child. */
.mp-section .mp-integrations__note {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: normal;
	letter-spacing: normal;
	color: var(--mp-muted);
	margin-top: 20px;
	margin-bottom: 13px;
}
@media (max-width: 960px) {
	.mp-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Integration card --------------------------------------------------------- */

.mp-int {
	background: var(--mp-surface);
	border: 1px solid var(--mp-hair);
	border-radius: var(--mp-radius-md);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.mp-int__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.mp-int__name {
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
}
.mp-int__status {
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: normal;
	padding: 3px 8px;
	border-radius: 99px;
	flex: 0 0 auto;
}
.mp-pill--live {
	background: var(--mp-pill-live-bg);
	color: var(--mp-pill-live-fg);
}
.mp-pill--soon {
	background: var(--mp-pill-soon-bg);
	color: var(--mp-pill-soon-fg);
}
.mp-int__note {
	font-size: 13px;
	color: var(--mp-muted);
	line-height: normal;
}

/* Feature card ------------------------------------------------------------- */

.mp-feat {
	background: var(--mp-surface);
	border: 1px solid var(--mp-hair);
	border-radius: var(--mp-radius-md);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Grid `align-items: stretch` already sizes us to the row track. Adding
	   `height: 100%` on top, while box-sizing is the browser default
	   `content-box`, makes the card render at content-height + padding + border
	   (≈+46px taller than the design). Drop it. */
}
.mp-feat__index {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: normal;
	color: var(--mp-muted);
	letter-spacing: 0.04em;
}
.mp-feat__title {
	font-size: clamp(16px, 1.5vw, 18px);
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.01em;
	margin: 0;
}
.mp-feat__body {
	font-size: 14px;
	color: var(--mp-muted);
	line-height: 1.55;
}

/* How it works ------------------------------------------------------------- */

.mp-how-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	/* Section-head ends with the h2; the steps grid sits 40px below it. */
	margin-top: 40px;
}
.mp-step__index {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	color: var(--mp-accent);
	margin: 0 0 12px;
}
.mp-step__title {
	font-size: 20px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}
.mp-step__body {
	font-size: 14.5px;
	color: var(--mp-muted);
	line-height: 1.55;
	margin: 0;
}
@media (max-width: 760px) {
	.mp-how-grid { grid-template-columns: 1fr; }
}

/* Pricing ------------------------------------------------------------------ */

/* Two-card row — 52.4% / 47.6% with an 18px gap (the prototype's grid ratio
   reduced to flex-basis so WP's column block can express it). The pattern's
   inline `flex-basis:55%` / `45%` saved on the page is overridden via
   !important, since inline styles otherwise win the cascade. */
.mp-pricing__cols {
	gap: 18px;
	margin-top: 40px;
}
.mp-pricing__cols > .wp-block-column:first-child { flex-basis: 52.4% !important; }
.mp-pricing__cols > .wp-block-column:last-child { flex-basis: 47.6% !important; }
.mp-pricing__card.wp-block-group.is-style-mp-card {
	padding: 36px;
	box-shadow: var(--mp-shadow-card);
	height: 100%;
}
.mp-pricing__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 12px;
	flex-wrap: wrap;
}
.mp-pricing__amount {
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 600;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	line-height: normal;
}
.mp-pricing__unit {
	color: var(--mp-muted);
	font-size: 16px;
	line-height: normal;
}
/* The price line is a Group of two paragraphs (amount + unit) so the number
   stays editable in the block editor rather than locked in a Custom HTML block.
   The Group uses flow layout, which injects a block-gap top margin on the unit;
   zero it so the amount and unit sit on one baseline row. */
.mp-pricing__card .mp-pricing__price > * { margin-block: 0; }
.mp-pricing__lead {
	color: var(--mp-muted);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 8px;
}
/* The pattern emits `is-style-mp-mono` on the beta footnote, but the
   prototype renders this line as plain 13px sans (the mono treatment is
   wrong for a price footnote). These overrides force the correct rendering
   regardless of the saved class. */
.mp-pricing__beta {
	font-family: inherit;
	font-size: 13px;
	line-height: normal;
	letter-spacing: 0;
	color: var(--mp-muted);
	margin: 0 0 22px;
}
.mp-pricing__list {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.mp-pricing__list li {
	display: flex;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	line-height: normal;
	color: var(--mp-ink-2);
}
.mp-pricing__list li::before {
	content: "✓";
	color: var(--mp-accent);
	font-weight: 700;
}
/* Light card CTA — same compact pill the hero uses (14/22, 15/500, 12px
   radius), with a 1px transparent border so content-box rendering hits 51px
   tall, matching the prototype. */
.mp-pricing__card .wp-block-button__link {
	padding: 14px 22px;
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	border: 1px solid transparent;
	border-radius: 12px;
}
.mp-pricing__multi.wp-block-group.is-style-mp-card-dark {
	padding: 36px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
/* Eyebrow + body sit flush at the top; the button is pushed to the bottom
   by `margin-top: auto`. The previous `justify-content: space-between`
   distributed the 3 flex children with equal gaps, but the prototype groups
   eyebrow+body in a single wrapper and shows just one large gap above the
   button. Auto-margin reproduces that without a markup change. */
.mp-pricing__multi > .wp-block-buttons {
	margin-top: auto;
}
/* The pattern saves the dark card with `layout: constrained`, whose generated
   CSS sets `margin-inline: auto; max-width: var(--content-size)` on every
   direct child — that centers the eyebrow / body / button instead of
   left-aligning them as the prototype does. We zero those properties on the
   children and explicitly stretch them in the column-flex container.
   The `.wp-block-group` qualifier is load-bearing: core's centering rule
   (`.is-layout-constrained > :where(…)`) is also !important and ties this on
   specificity (0,1,0), so on the front end the override wins only by source
   order. Inside the block-editor iframe core's layout CSS is injected AFTER
   the theme's editor styles, flipping that order and re-centering the card.
   The extra class lifts the selector to 0,2,0 so it wins in both contexts. */
.mp-pricing__multi.wp-block-group > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	align-self: stretch;
}
.mp-pricing__multi-eyebrow {
	font-size: 12px;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 14px;
}
.mp-pricing__multi-body {
	/* Pinned at 22px (the prototype value); the previous clamp's 1.6vw
	   capped at 20.48 at 1280, leaving the body slightly under-sized. */
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-wrap: balance;
	margin: 0 0 24px;
}
.mp-pricing__multi .wp-block-button.is-style-mp-outline > .wp-block-button__link {
	background: rgba(255, 255, 255, 0.10) !important;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.18);
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	border-radius: 10px;
}
@media (max-width: 880px) {
	.mp-pricing__card.wp-block-group.is-style-mp-card { padding: 22px; }
	/* Mobile price-line: amount 44 / unit 14 / 8px gap / nowrap so the line
	   fits the 300px content box (163 + 8 + 127 = 298). The desktop values
	   (clamp 40-64 / 16 / 10 / wrap) overflow at 390. */
	.mp-pricing__price { gap: 8px; flex-wrap: nowrap; }
	.mp-pricing__amount { font-size: 44px; }
	.mp-pricing__unit { font-size: 14px; }
	.mp-pricing__list { grid-template-columns: 1fr; }
}

/* FAQ ---------------------------------------------------------------------- */

.mp-faq__cols {
	/* Fixed 56px column gap (clamp's 4vw caps at 51.2 at 1280) and 32px above
	   — this section runs 32 above the grid, where features/integrations
	   use 40. The row above (pricing) is taller, so the rhythm tightens. */
	gap: 56px;
	margin-top: 32px;
}
.mp-faq .wp-block-details {
	border-top: 1px solid var(--mp-hair);
	padding: 14px 0 18px 0;
	/* The border-top on each details element provides the visual separator;
	   suppress WP's 1.2em block-gap that would otherwise stack 19px between
	   siblings. */
	margin-top: 0;
}
.mp-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--mp-hair);
}
.mp-faq .wp-block-details > summary {
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	color: var(--mp-ink);
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: baseline;
}
.mp-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.mp-faq .wp-block-details > summary::after {
	content: "+";
	color: var(--mp-muted);
	font-weight: 300;
	font-size: 20px;
	flex: 0 0 auto;
    position: relative;
    top: 1px;
}
.mp-faq .wp-block-details[open] > summary::after { content: "−"; }
.mp-faq .wp-block-details > :not(summary) {
	margin-top: 10px;
	color: var(--mp-muted);
	font-size: 14px;
	line-height: 1.6;
}
@media (max-width: 781px) {
	/* When wp-block-columns stacks, its 56px gap becomes a vertical row-gap
	   between the two halves of the FAQ list, breaking the single-list
	   continuity. Zero the row-gap, and suppress the seam border so the
	   non-last column's last item doesn't end up with a doubled hairline
	   against the next column's first item. */
	.mp-faq__cols { row-gap: 0; }
	.mp-faq__cols > .wp-block-column:not(:last-child) > .wp-block-details:last-child {
		border-bottom: 0;
	}
	/* Mobile rhythm: tighten the h2-to-list gap (32→20) and switch each
	   accordion item to symmetric 14/14 padding (the WP base uses 14/18,
	   chosen for desktop; reference mobile is 14/14). */
	.mp-faq__cols { margin-top: 20px; }
	.mp-faq .wp-block-details { padding-bottom: 14px; }
}

/* Compare table ------------------------------------------------------------ */

.wp-block-table.is-style-mp-compare {
	background: var(--mp-surface);
	border: 1px solid var(--mp-hair);
	border-radius: var(--mp-radius-lg);
	overflow: hidden;
	/* Section-head ends with the h2; table sits 40px below (matching the
	   prototype's grid-mt rhythm — see also `.mp-features-grid`, `.mp-how-grid`).
	   Margins collapse with the h2's 14px mb, so the larger 40 wins. */
	margin: 40px 0 0;
}
.wp-block-table.is-style-mp-compare table {
	border-collapse: collapse;
	width: 100%;
	/* Even thirds — without `fixed`, the table sizes columns to content,
	   producing the 302/425/439 split visible in the unfixed render. */
	table-layout: fixed;
}
/* Reset every cell border to zero, then add only the dividers we actually want.
   Without this reset, WP's stock table styles paint a 1px muted-blue border
   around each <th>/<td>, which bleeds through the wrapper's rounded corner. */
.wp-block-table.is-style-mp-compare th,
.wp-block-table.is-style-mp-compare td {
	border: 0;
}
.wp-block-table.is-style-mp-compare thead {
	background: var(--mp-subtle);
	border-bottom: 1px solid var(--mp-hair);
}
.wp-block-table.is-style-mp-compare th {
	padding: 14px 24px;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--mp-muted);
	text-align: left;
	border-right: 1px solid var(--mp-hair);
}
.wp-block-table.is-style-mp-compare th:last-child { border-right: none; color: var(--mp-ink); font-weight: 600; }
.wp-block-table.is-style-mp-compare td {
	padding: 18px 24px;
	font-size: 14px;
	line-height: normal;
	border-right: 1px solid var(--mp-hair);
	border-bottom: 1px solid var(--mp-hair);
	vertical-align: top;
}
.wp-block-table.is-style-mp-compare tbody tr:last-child td { border-bottom: none; }
.wp-block-table.is-style-mp-compare td:last-child { border-right: none; }
.wp-block-table.is-style-mp-compare td:first-child { color: var(--mp-ink-2); font-weight: 500; }
.wp-block-table.is-style-mp-compare td:nth-child(2) { color: var(--mp-muted); }
.wp-block-table.is-style-mp-compare td:last-child { color: var(--mp-ink); font-weight: 500; }

@media (max-width: 720px) {
	.wp-block-table.is-style-mp-compare th,
	.wp-block-table.is-style-mp-compare td {
		padding: 12px 14px;
		font-size: 13px;
	}
}

/* Mobile re-flow: keep the 3-col `<table>` markup but render each `<tr>` as a
   CSS grid with the first cell (task name) spanning across the top in muted
   12px caption style, and the Excel / MyProfit values sharing the row below.
   Matches DFMobile's compare layout (`gridTemplateColumns: '1fr 1fr'` plus a
   per-row task caption above) without touching the pattern markup. */
@media (max-width: 700px) {
	.wp-block-table.is-style-mp-compare {
		border-radius: 14px;
	}
	.wp-block-table.is-style-mp-compare table { display: block; }
	.wp-block-table.is-style-mp-compare thead { display: block; }
	.wp-block-table.is-style-mp-compare thead tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	/* Hide the "Задача" th on mobile — the task name moves into each row
	   instead of being a column header. */
	.wp-block-table.is-style-mp-compare thead th:first-child { display: none; }
	.wp-block-table.is-style-mp-compare thead th {
		padding: 10px 14px;
		font-size: 11px;
	}
	.wp-block-table.is-style-mp-compare tbody { display: block; }
	.wp-block-table.is-style-mp-compare tbody tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"task task"
			"excel myprofit";
		border-bottom: 1px solid var(--mp-hair);
	}
	.wp-block-table.is-style-mp-compare tbody tr:last-child { border-bottom: none; }
	.wp-block-table.is-style-mp-compare tbody td {
		border-bottom: none;
		border-right: none;
	}
	.wp-block-table.is-style-mp-compare tbody td:nth-child(1) {
		grid-area: task;
		padding: 12px 14px 4px;
		font-size: 12px;
		color: var(--mp-muted);
		font-weight: 400;
		letter-spacing: 0.3px;
	}
	.wp-block-table.is-style-mp-compare tbody td:nth-child(2) {
		grid-area: excel;
		padding: 4px 14px 14px;
		font-size: 13.5px;
		color: var(--mp-muted);
		border-right: 1px solid var(--mp-hair);
	}
	.wp-block-table.is-style-mp-compare tbody td:nth-child(3) {
		grid-area: myprofit;
		padding: 4px 14px 14px;
		font-size: 13.5px;
		color: var(--mp-ink);
		font-weight: 500;
	}
}

/* Success story ------------------------------------------------------------ */

.mp-story.wp-block-group.is-style-mp-card-dark {
	padding: 40px 44px;
}
.mp-story__cols { gap: 32px; }
.mp-story__eyebrow {
	font-size: 12px;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 16px;
}
.mp-story__quote {
	/* Floor at 22 (the prototype's mobile size) so 390 lands at 22 instead
	   of the previous 20; 2.2vw still caps at 28 for desktop (1280 → 28.16). */
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.25;
	letter-spacing: -0.015em;
	font-weight: 500;
	text-wrap: balance;
	max-width: 540px;
	margin: 0;
	color: #fff;
}
.mp-story__attr {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: normal;
	color: rgba(255, 255, 255, 0.7);
}
.mp-story__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
/* Story stat boxes — tighter spacing than the trust/hero stat defaults: no
   flex-gap (the label's own 4px margin-top owns the gap), value renders at
   the design's fixed 22px (vs the global clamp's 25.6 at 1280), and
   border-radius 12 instead of 14. */
.mp-story__stats .mp-stat {
	gap: 0;
	border-radius: 12px;
}
.mp-story__stats .mp-stat__value {
	font-size: 22px;
	line-height: normal;
}
.mp-story__stats .mp-stat__label {
	line-height: normal;
	margin-top: 4px;
}
@media (max-width: 720px) {
	/* Story stripe tightens its side gutter on mobile (16 vs the global 22)
	   so the dark card gets a touch more horizontal room — per draft. */
	.mp-story-section { padding-left: 16px; padding-right: 16px; }
	.mp-story.wp-block-group.is-style-mp-card-dark { padding: 24px 22px; }
	.mp-story__stats { grid-template-columns: 1fr 1fr; }
}

/* Sticky CTA --------------------------------------------------------------- */

.mp-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--mp-sticky-bg);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	color: #fff;
	padding: 12px var(--mp-edge-x);
	transform: translateY(120%);
	transition: transform 220ms ease;
	box-shadow: 0 -10px 30px -12px rgba(5, 19, 75, 0.45);
}
.mp-sticky-cta.is-visible { transform: translateY(0); }
.mp-sticky-cta__inner {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.mp-sticky-cta__copy {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: #fff;
}
.mp-sticky-cta__buttons.wp-block-buttons { margin: 0; }
.mp-sticky-cta .wp-block-button__link {
	background: var(--mp-accent);
	color: var(--mp-invert-ink);
	font-weight: 600;
}
@media (max-width: 540px) {
	.mp-sticky-cta { padding: 9px 14px; }
	.mp-sticky-cta__inner { gap: 10px; flex-wrap: nowrap; }
	.mp-sticky-cta__copy {
		font-size: 12.5px;
		line-height: 1.25;
		flex: 1 1 auto;
		min-width: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.mp-sticky-cta .wp-block-button__link {
		padding: 9px 14px;
		font-size: 13px;
		white-space: nowrap;
	}
}

/* Mobile collapse ---------------------------------------------------------- */

@media (max-width: 700px) {
	/* DFMobile section bottom padding is 56 (vs the var's clamp lower bound
	   of 48). Bumping the token gives 56 above each hairline, leaving the
	   48 below (from `.mp-features etc. { padding-top: 48 }`) so the
	   asymmetric "more space above, less below" rhythm of the reference is
	   reproduced. Also flows through to `.mp-trust-wrap`'s bottom margin. */
	:root { --mp-section: 56px; }
	/* DFMobile is split into two sections: hero text (`40px 22px 28px`) and
	   the dashboard card (`0 18px 36px`). WP merges both into a single
	   `.mp-hero` via `wp:columns`, so we pick paddings that reproduce the
	   *gaps*, not the per-section values. With the two columns stacking,
	   the column gap (28px below) covers the 28px between fineprint and
	   dashboard, and the hero's 36px padding-bottom covers the dashboard
	   → trust-strip gap. */
	.mp-hero { padding-top: 40px; padding-bottom: 36px; }
	.mp-hero > .wp-block-columns { gap: 28px; }
	/* Reference dashboard sits at x=18 (4px wider than the 22px hero text
	   inset). Pull the visual image out 4px on each side to widen it without
	   touching the hero's horizontal padding (which the text relies on). */
	.mp-hero__visual { margin-left: -4px; margin-right: -4px; }
	/* Reference mobile uses a 24px gap below the pill (DFMobile wraps the pill
	   in a `marginBottom: 24` div). The base 28 is the desktop rhythm. */
	.mp-hero .is-style-mp-pill { margin-bottom: 24px; }
	/* DFMobile h1: lineHeight 1.02, ls -0.025em (vs desktop 0.98 / -0.03em). */
	.mp-hero__h1 {
		line-height: 1.02;
		letter-spacing: -0.025em;
	}
	/* DFMobile sub: 15.5/1.55, maxWidth 340, margin 18/28
	   (vs desktop 18/1.5, maxWidth 520, margin 24/32). */
	.mp-hero__sub {
		font-size: 15.5px;
		line-height: 1.55;
		max-width: 340px;
		margin-top: 18px;
		margin-bottom: 28px;
	}
	/* DFMobile stacks the two CTAs (`display: grid, gap: 10`); desktop renders
	   them in a row with a 12px gap. WP's `wp-block-buttons` is flex-row by
	   default — switch to column-stack with full-width children on mobile. */
	.mp-hero .wp-block-buttons { flex-direction: column; gap: 10px; }
	.mp-hero .wp-block-buttons > .wp-block-button { width: 100%; }
	.mp-hero .wp-block-buttons > .wp-block-button > .wp-block-button__link { width: 100%; }
	/* DFMobile fineprint: 12/14mt (vs desktop 13/16mt). */
	.mp-hero .is-style-mp-fineprint {
		font-size: 12px;
		margin-top: 14px;
	}
	/* DFMobile section h2: 26/1.1/-0.02em (vs desktop 28-44/1.05/-0.025em).
	   The base clamp's lower bound (28) lands on mobile, so we override
	   directly. */
	.mp-section__h2 {
		font-size: 26px;
		line-height: 1.1;
		letter-spacing: -0.02em;
	}
	/* DFMobile closing h2: 30/1.05/-0.025em (vs desktop 56/1.0/-0.03em).
	   Font-size already matches the clamp's lower bound; tweak lh+ls. */
	.mp-closing__h2 {
		line-height: 1.05;
		letter-spacing: -0.025em;
	}
	/* DFMobile draws a hairline above each section starting at Features
	   (`borderTop: 1px solid hair`) plus 48px of top space (8 section + 40
	   inner) before the eyebrow. Desktop omits the hairlines because it has
	   wider 96px section gaps; mobile keeps a clear separator at every
	   transition. Hero / dashboard / trust / hidden-tax / success-story sit
	   above this run and intentionally don't get the line. */
	.mp-features,
	.mp-how,
	.mp-compare,
	.mp-integrations,
	.mp-pricing,
	.mp-faq {
		border-top: 1px solid var(--mp-hair);
		/* Symmetric with --mp-section above (56) so the gap on either side of
		   the hairline reads as equal. Reference draft uses 8 + 40 = 48 here,
		   but the asymmetry was visually distracting. */
		padding-top: 56px;
	}
	/* FAQ explicitly overrides back to the prototype's 48 (8 + inner 40) so
	   the gap above the eyebrow matches the reference exactly. */
	.mp-faq { padding-top: 48px; }
	/* DFMobile step card: padding 18 uniform (vs 24/26 desktop), step-index mb
	   8 (vs 12), title 17/mb 6 (vs 20/8), body 14 (vs 14.5). */
	.wp-block-group.is-style-mp-step-card { padding: 18px; }
	.mp-step__index { margin-bottom: 8px; }
	.mp-step__title { font-size: 17px; margin-bottom: 6px; }
	.mp-step__body { font-size: 14px; }
	/* DFIntCard mobile: padding 14 (vs 18 desktop), name 15 (vs 16), note 12
	   (vs 13). br/gap/status pill carry over from desktop. */
	.mp-int { padding: 14px; }
	.mp-int__name { font-size: 15px; }
	.mp-int__note { font-size: 12px; }
	.mp-header { padding: 18px var(--mp-edge-x); }
	.mp-signin { display: none; }
	/* Reference has no mobile nav — hide the menu on small screens; the
	   desktop chrome already covers it. */
	.mp-header .mp-nav { display: none; }
	/* Mobile reference uses a 20px logo (DFLogo size=20) and a smaller header
	   CTA: 8/14 padding, 13/500 — vs the desktop 22px logo and 10/18, 14/500. */
	.mp-header .wp-block-site-logo img { height: 20px; }
	.mp-header .wp-block-button__link {
		padding: 8px 14px;
		font-size: 13px;
		height: 34px;
	}
	.mp-header__tg { display: inline-flex; }
	/* Mobile footer: a nav band leads, then three brand/meta rows matching the
	   prototype.
	   Row 1: nav links (Продукт / Тарифы / FAQ / Docs / Privacy Policy), wrapping
	   Row 2: logo (18px) ↔ @myprofit_chat
	   Row 3: Войти в кабинет ↔ lang switch
	   Row 4: © (alone, since Tashkent was removed)
	   Pattern markup nests logo inside __left and the rest inside __right;
	   display:contents flattens those wrappers so all five items become grid
	   items of .mp-footer and can be placed via grid-template-areas. The nav was
	   desktop-only in the original prototype, but it now carries the Docs (KB) and
	   Privacy Policy links — the only path to either on mobile — so it spans the
	   full width at the top, wrapping since «Политика конфиденциальности» is long. */
	.mp-footer .mp-footer__menu {
		grid-area: menu;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px 18px;
		padding-bottom: 14px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	/* Top padding trimmed (28→19) so the menu text's distance from the top edge
	   matches its 22px side inset — the link line-box adds ~9px of leading above
	   the glyphs, which the smaller padding compensates for. */
	.wp-block-group.mp-footer.is-style-mp-section-dark { padding: 14px 22px 28px; }
	.mp-footer .wp-block-site-logo img { height: 18px; }
	.mp-footer .mp-footer__row,
	.mp-footer .mp-footer__left,
	.mp-footer .mp-footer__right { display: contents; }
	.wp-block-group.mp-footer.is-style-mp-section-dark {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"menu  menu"
			"logo  chat"
			"signin lang"
			"copy  copy";
		align-items: center;
		row-gap: 14px;
	}
	.mp-footer .wp-block-site-logo { grid-area: logo; }
	.mp-footer .mp-footer__chat { grid-area: chat; justify-self: end; }
	.mp-footer .mp-footer__signin { grid-area: signin; }
	.mp-footer .mp-lang-switcher { grid-area: lang; justify-self: end; }
	.mp-footer .mp-footer__copy { grid-area: copy; }
	.mp-footer a.mp-footer__chat,
	.mp-footer a.mp-footer__signin {
		/* Mobile flips chat + signin out of the desktop mono group back to the
		   inherited sans (Manrope), per the mobile prototype. */
		font-family: inherit;
		font-size: 13px;
	}
	.mp-footer .mp-footer__copy { font-size: 11px; }
	/* Slim the footer lang switch on mobile (24×48 to match the prototype),
	   3px shorter than the desktop pill so row 2 doesn't outgrow the
	   reference's 24px row height. */
	.mp-footer .mp-lang-switch { padding: 5px 9px; font-size: 10.5px; }
}

/* Editor canvas margin parity --------------------------------------------- */

/* WP's flow/constrained block-gap rule
   (`:root :where(.is-layout-*) > * { margin-block-start: var(--wp--style--block-gap) }`,
   ≈19.2px, specificity 0,1,0) ties every margin we set on a layout container's
   child *block* at the same 0,1,0. On the front-end our rules win the tie by
   source order — landing.css is enqueued after the global layout styles — so
   the values below are redundant there (identical to the base rules) and cost
   nothing. Inside the block-editor iframe core injects the layout styles AFTER
   the theme's editor stylesheet (the same order-flip documented at the
   `.has-global-padding` and `.mp-pricing__multi` resets above), so the
   block-gap leaks in: sections drift apart by 19px, and section-head / step /
   pricing / story spacing collapses. Re-asserting the intended margins one
   specificity step higher (`:root` → 0,2,0) makes them win in BOTH contexts.
   Margins ONLY — padding / grid-template-columns / font are deliberately left
   at their base specificity so the mobile overrides in the @media blocks above
   still apply. Keep these in sync with the base rules they mirror; the four
   selectors with mobile margin overrides are re-asserted in the @media tail. */
:root .mp-section { margin-top: 0; margin-bottom: 0; }
:root .mp-trust-wrap { margin-top: 0; margin-bottom: var(--mp-section); }
:root .is-style-mp-eyebrow { margin-top: 0; margin-bottom: 16px; }
:root .mp-features-grid,
:root .mp-int-grid,
:root .mp-how-grid,
:root .mp-pricing__cols { margin-top: 40px; }
:root .mp-faq__cols { margin-top: 32px; }
:root .mp-features-grid > *,
:root .mp-int-grid > *,
:root .mp-how-grid > *,
:root .mp-trust > *,
:root .mp-story__stats > * { margin-top: 0; margin-bottom: 0; }
:root .mp-hero__sub { margin-top: 24px; margin-bottom: 32px; }
:root .mp-step__index { margin-top: 0; margin-bottom: 12px; }
:root .mp-step__title { margin-top: 0; margin-bottom: 8px; }
:root .mp-step__body { margin-top: 0; margin-bottom: 0; }
:root .mp-pricing__price { margin-top: 0; margin-bottom: 12px; }
:root .mp-pricing__lead { margin-top: 0; margin-bottom: 8px; }
:root .mp-pricing__beta { margin-top: 0; margin-bottom: 22px; }
:root .mp-pricing__list { margin-top: 0; margin-bottom: 26px; }
:root .mp-pricing__multi-eyebrow { margin-top: 0; margin-bottom: 14px; }
:root .mp-pricing__multi-body { margin-top: 0; margin-bottom: 24px; }
:root .mp-hidden-tax__head { margin-bottom: 4px; }
:root .mp-rowlist { margin-top: 12px; }
:root .mp-hidden-tax__foot { margin-top: 14px; margin-bottom: 0; }
:root .mp-story__eyebrow { margin-top: 0; margin-bottom: 16px; }
:root .mp-story__quote { margin-top: 0; margin-bottom: 0; }
:root .mp-story__attr { margin-top: 18px; margin-bottom: 0; }
/* Mobile margin overrides that exist in the @media blocks above must also clear
   0,1,0 to keep winning against the block-gap (and against the desktop parity
   rules above) at narrow widths. Same values, lifted to 0,2,0. */
@media (max-width: 781px) {
	:root .mp-faq__cols { margin-top: 20px; }
}
@media (max-width: 700px) {
	:root .mp-hero__sub { margin-top: 18px; margin-bottom: 28px; }
	:root .mp-step__index { margin-bottom: 8px; }
	:root .mp-step__title { margin-bottom: 6px; }
}

/* Dark theme moved to assets/css/dark.css — it is enqueued on the front-end
   only (not via add_editor_style), so the block-editor canvas stays light. */