/* Landing /max-kanal/, part 3 — sections 11–20 and the phone sticky button: ready prompts,
   comparison table (cards on phones), audience, connection, control, pricing, limits, FAQ and the
   final lime panel. Loaded without blocking the first paint. Figma A 885:25187, phone B3 921:55117. */

/* 11 · Prompts */
.mx-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.mx-filter { padding: 9px 18px; border: 1px solid var(--v2-line); border-radius: var(--radius-pill); background: var(--v2-card); color: var(--v2-ink-secondary); font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.mx-filter:hover { color: var(--v2-ink); }
.mx-filter.is-active { border-color: var(--v2-ink); background: var(--v2-ink); color: var(--v2-cream); }
.mx-prompts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.mx-prompt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 250px; padding: 20px; border: 1px solid var(--v2-line); border-radius: 22px; background: var(--v2-card); }
.mx-prompt[hidden] { display: none; }
.mx-prompt > p { flex: 1 1 auto; font-size: 15px; font-weight: 500; line-height: 1.45; }
.mx-prompt .btn { margin: 0; }
.mx-prompt .btn .mx-ico, .mx-client__field .btn .mx-ico { font-size: 16px; }
.btn.is-copied { color: var(--v2-green); }

/* 12 · Comparison */
.mx-compare { margin-top: 40px; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 28px; background: var(--v2-card); }
.mx-compare table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mx-compare thead td, .mx-compare thead th { padding: 18px 16px; background: var(--v2-sand); color: var(--v2-ink-secondary); font-size: 13px; font-weight: 700; line-height: 1.4; text-align: left; }
.mx-compare thead td { width: 260px; }
.mx-compare thead .is-lidfly { background: var(--v2-lime); color: var(--v2-forest); font-weight: 600; }
.mx-compare tbody th, .mx-compare tbody td { padding: 14px 16px; border-top: 1px solid var(--v2-line); font-size: 13px; line-height: 18px; text-align: left; vertical-align: top; }
.mx-compare tbody th { color: var(--v2-ink); font-weight: 600; }
.mx-compare tbody td { color: var(--v2-ink-secondary); }
.mx-compare tbody .is-lidfly { background: var(--v2-lime-soft); color: var(--v2-forest); font-weight: 600; }

/* 13 · Audience */
.mx-auds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.mx-aud { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 28px; background: var(--v2-card); }
.mx-aud__photo { position: relative; height: 240px; overflow: hidden; }
.mx-bg-butter { background: var(--v2-butter); }
.mx-bg-lilac { background: var(--v2-lilac); }
.mx-bg-sky { background: var(--v2-sky); }
.mx-aud__img { width: 100%; height: 100%; object-fit: cover; }
.mx-aud__channel { position: absolute; left: 12px; right: 12px; top: 168px; overflow: hidden; border-radius: 14px; box-shadow: var(--mx-shadow-tile); }
.mx-aud__channel .mx-chathdr { border-bottom: 0; }
.mx-aud__tiles, .mx-aud__avas { position: absolute; left: 50%; top: 88px; display: flex; transform: translateX(-50%); }
.mx-aud__tiles > span { display: grid; place-items: center; width: 64px; height: 64px; margin-right: -14px; border: 1px solid var(--v2-line); border-radius: 18px; background: var(--v2-card); box-shadow: var(--v2-shadow-card); }
.mx-aud__tiles > span:last-child, .mx-aud__avas > span:last-child { margin-right: 0; }
.mx-aud__tiles img { width: 32px; height: 32px; }
.mx-aud__avas > span { margin-right: -14px; }
.mx-aud__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 24px 26px; }
.mx-aud__title { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.mx-aud__body > p { color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.55; }

/* 15 · Connection */
.mx-connect { display: flex; flex-direction: column; gap: 32px; padding: 48px; border-radius: 36px; background: var(--v2-sand); }
.mx-connect__top { display: flex; align-items: flex-end; gap: 40px; }
.mx-connect__top .mx-head { flex: 1 1 0; min-width: 0; }
.mx-connect__top .mx-sticker { flex: none; }
.mx-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mx-steps3 li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border-radius: 24px; background: var(--v2-card); }
.mx-steps3 h3 { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.mx-steps3 p { color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.55; }
.mx-client { display: flex; flex-direction: column; gap: 20px; padding: 24px 28px; border-radius: 24px; background: var(--v2-card); }
.mx-client__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-client__body { display: flex; gap: 32px; }
.mx-client__panels { flex: 1 1 0; min-width: 0; }
.mx-client__steps { display: flex; flex-direction: column; gap: 10px; counter-reset: step; }
.mx-client__steps[hidden] { display: none; }
.mx-client__steps li { counter-increment: step; font-size: 15px; font-weight: 500; line-height: 1.4; }
.mx-client__steps li::before { content: counter(step) ". "; }
.mx-client__steps a { color: var(--v2-green); text-underline-offset: 3px; }
.mx-client__addr { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 0; }
.mx-client__label { color: var(--v2-ink-muted); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.mx-client__field { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--v2-sand); }
.mx-client__field code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.55; }
.mx-client__field .btn { flex: none; margin: 0; }
.mx-connect__foot { display: flex; align-items: center; gap: 24px; }
.mx-connect__foot > p { flex: 1 1 auto; color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.55; }
.mx-connect__foot > p a { color: inherit; text-decoration: none; }
.mx-connect__foot > p a:hover { color: var(--v2-green); text-decoration: underline; }
.mx-connect__foot .btn { flex: none; margin: 0; }

/* 16 · Control */
.mx-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.mx-controls li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border: 1px solid var(--v2-line); border-radius: 24px; background: var(--v2-card); }
.mx-icon-tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tone); color: var(--tone-ink); }
.mx-icon-tile .mx-ico { font-size: 24px; stroke-width: 1.75; }
.mx-controls h3 { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.mx-controls p { color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.55; }

/* 17 · Pricing */
.mx-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.mx-price { display: flex; flex-direction: column; gap: 8px; padding: 28px 24px; border: 1px solid var(--v2-line); border-radius: 28px; background: var(--v2-card); color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.55; }
.mx-price__title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.mx-price__value { color: var(--v2-ink); font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.mx-price--hl { border-color: var(--v2-lime); background: var(--v2-lime); color: var(--v2-forest); }
.mx-price--hl .mx-price__value { color: var(--v2-forest); }
.mx-pricing__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; margin-top: 40px; }
.mx-pricing__foot .btn { margin: 0; }
.mx-pricing__foot > p { color: var(--v2-ink-muted); font-size: 14px; line-height: 1.55; }
.mx-pricing__foot a { color: inherit; text-underline-offset: 3px; }

/* 18 · Limits */
.mx-limits { display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: 32px; background: var(--v2-sand); }
.mx-head--s .mx-h2 { font-size: 36px; }
.mx-page .mx-limits .mx-h2 em { color: var(--v2-peach-ink); }
.mx-limits ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.mx-limits li { display: flex; align-items: center; gap: 10px; color: var(--v2-ink-secondary); font-size: 15px; font-weight: 500; line-height: 1.35; }
.mx-limits .mx-ico { font-size: 20px; color: var(--v2-peach-ink); }

/* 19 · FAQ (native details; the FAQPage JSON-LD is rebuilt from #faq details at build time) */
.mx-faq { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: 64px; }
.mx-faq .mx-lead a { color: var(--v2-green); }
.mx-faq__list { display: flex; flex-direction: column; gap: 10px; }
.mx-qa { border: 1px solid var(--v2-line); border-radius: 20px; background: var(--v2-card); }
.mx-qa[open] { border-color: transparent; background: var(--v2-lime-soft); }
.mx-qa summary { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 20px; color: var(--v2-ink); font-size: 17px; font-weight: 600; line-height: 1.3; list-style: none; cursor: pointer; }
.mx-qa summary::-webkit-details-marker { display: none; }
.mx-qa summary > span { flex: 1 1 auto; min-width: 0; }
.mx-qa__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--v2-sand); }
.mx-qa[open] .mx-qa__icon { background: var(--v2-card); }
.mx-qa__icon .mx-ico { font-size: 16px; }
.mx-qa__minus, .mx-qa[open] .mx-qa__plus { display: none; }
.mx-qa[open] .mx-qa__minus { display: block; }
.mx-qa__a { margin-top: -10px; padding: 0 24px 20px; }
.mx-qa__a p { color: var(--v2-ink-secondary); font-size: 15px; line-height: 1.55; }
.mx-qa__a a { color: var(--v2-green); text-underline-offset: 3px; }

/* 20 · Final lime panel */
.mx-final { position: relative; display: flex; justify-content: center; min-height: 520px; overflow: hidden; padding: 72px 40px; border-radius: 40px; background: var(--v2-lime); }
.mx-final__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(760px, 100%); text-align: center; }
.mx-final__title { color: var(--v2-forest); font-size: 56px; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.mx-page .mx-final__title em { font-size: 1.107em; letter-spacing: -0.03em; color: var(--v2-forest); }
.mx-final__lead { color: var(--v2-forest); font-size: 19px; line-height: 1.5; }
.mx-composer { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 8px 8px 20px; border: 1px solid var(--v2-line); border-radius: var(--radius-pill); background: var(--v2-card); box-shadow: var(--mx-shadow-tile); text-align: left; }
.mx-composer > p { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.55; }
.mx-composer__btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--v2-forest); color: var(--v2-cream); cursor: pointer; }
.mx-composer__btn .mx-ico { font-size: 18px; }
.mx-composer__btn.is-copied { background: var(--v2-green); }
.mx-final .mx-actions { justify-content: center; }
.mx-final__plaque { display: none; }
.mx-final .mx-sticker { position: absolute; font-size: 14px; }
.mx-final__s1 { left: 34px; top: 96px; transform: rotate(6deg); }
.mx-final__s2 { left: 44px; top: 328px; transform: rotate(-4deg); }
.mx-final__s3 { right: 40px; top: 110px; transform: rotate(-5deg); }
.mx-final__s4 { right: 96px; top: 392px; transform: rotate(4deg); }
.mx-final__links { display: flex; gap: 56px; margin-top: 32px; }
.mx-final__links > div { display: flex; flex: 1 1 0; flex-direction: column; gap: 10px; min-width: 0; }
.mx-final__label { color: var(--v2-ink-muted); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.mx-final__links ul { display: flex; flex-direction: column; gap: 10px; }
.mx-final__links a { color: var(--v2-green); font-size: 17px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.mx-final__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mx-final__legal { margin-top: 32px; color: var(--v2-ink-muted); font-size: 12px; line-height: 1.4; }

/* Phone sticky button (B2): hidden on wider screens */
.mx-sticky { display: none; }

/* --- Tablet --- */
@media (max-width: 1239px) {
  .mx-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-auds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-limits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-final .mx-sticker { display: none; }
}
@media (max-width: 1023px) {
  .mx-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-connect__top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .mx-client__body { flex-direction: column; gap: 20px; }
  .mx-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mx-compare thead td { width: 200px; }
}

/* --- Phone --- */
@media (max-width: 767px) {
  .mx-filters { flex-wrap: nowrap; justify-content: flex-start; margin: 20px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .mx-filter { flex: none; padding: 8px 14px; font-size: 13px; }
  .mx-prompt > p { font-size: 14px; }
  .mx-connect { gap: 20px; padding: 24px 16px; border-radius: 28px; }
  .mx-connect__top .mx-sticker { white-space: normal; font-size: 13px; }
  .mx-client { padding: 18px 16px; border-radius: 20px; }
  .mx-client__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mx-client__tabs .mx-chip { flex: none; }
  .mx-client__field code { font-size: 14px; }
  .mx-connect__foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .mx-connect__foot .btn { width: 100%; }
  .mx-price { padding: 20px; border-radius: 22px; }
  .mx-price__value { font-size: 32px; }
  .mx-pricing__foot { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 24px; text-align: center; }
  .mx-pricing__foot .btn { width: 100%; }
  .mx-limits { padding: 24px 16px; border-radius: 24px; }
  .mx-head--s .mx-h2 { font-size: 28px; }
  .mx-limits ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mx-limits li { align-items: flex-start; font-size: 14px; }
  .mx-qa { border-radius: 18px; }
  .mx-qa summary { gap: 10px; padding: 16px; border-radius: 18px; font-size: 15px; line-height: 1.35; }
  .mx-qa__icon { width: 28px; height: 28px; }
  .mx-qa__a { margin-top: -8px; padding: 0 16px 16px; }
  .mx-qa__a p { font-size: 14px; }
  .mx-final { min-height: 0; padding: 40px 14px; border-radius: 28px; }
  .mx-final .mx-actions .btn { --btn-pad-x: 14px; white-space: nowrap; }
  /* Hero M (38/42) on phones, no break inside a word */
  .mx-final__title { font-size: 38px; line-height: 1.105; hyphens: manual; overflow-wrap: normal; }
  .mx-final__plaque { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--v2-card); box-shadow: var(--mx-shadow-tile); color: var(--v2-rose-ink); font-size: 12px; font-weight: 600; line-height: 1.4; }
  .mx-final__plaque span + span { color: var(--v2-green); }
  .mx-final__lead { font-size: 16px; }
  .mx-composer { align-items: flex-end; padding: 10px 8px 8px 14px; border-radius: 22px; }
  .mx-composer > p { font-size: 13px; }
  .mx-final__links { flex-direction: column; gap: 28px; }
  .mx-final__links a { font-size: 16px; }
  /* Sticky button: appears after the first screen, hides at the final block (ТЗ 5.1) */
  .mx-page { padding-bottom: 84px; }
  .mx-sticky { display: block; position: fixed; inset: auto 0 0; z-index: 25; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--v2-grid); background: var(--v2-cream); transform: translateY(110%); transition: transform var(--motion-duration-medium, 240ms) var(--motion-ease-out, ease-out); }
  .mx-sticky.is-visible { transform: none; }
  .mx-sticky .btn { width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-sticky { transition: none; }
}