/* Landing /max-kanal/, phone layout (Figma B3 921:55117, up to 767 px) for blocks 4–20:
   carousels with dots for features, «Ведение», prompts and the comparison (LidFly first), and
   compact rows with a 96 px preview for the audience, control and connection steps. Loaded with
   media="(max-width: 767px)" after the block files, so it only refines their phone rules. */

/* Dots under phone carousels (built by max-kanal-landing.js from [data-mx-scroller]) */
.mx-dots-nav { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.mx-dots-nav i { width: 6px; height: 6px; border-radius: 3px; background: var(--v2-line); transition: width 160ms ease, background-color 160ms ease; }
.mx-dots-nav i.is-active { width: 18px; background: var(--v2-ink); }

/* 4 · Features: shorter cards, dots instead of arrows */
.mx-fcard { flex-basis: 270px; }
.mx-fcard__illus { height: 210px; }
.mx-fcard__body { padding: 18px 18px 20px; }
.mx-fcard__title { font-size: 19px; }
.mx-fcard__text { font-size: 14px; }
.mx-carousel__nav { display: none; }

/* 6, 8, 10 · Split sections: heading, then the example panel, then the points */
.mx-split, .mx-split--rev { display: flex; flex-direction: column; gap: 24px; }
.mx-split__text { display: contents; }
.mx-split .mx-head { order: 1; }
.mx-split__panel { order: 2; width: 100%; }
.mx-split .mx-ticks { order: 3; }

/* 7 · Ведение: one example per swipe */
.mx-formats { display: flex; gap: 12px; margin: 24px -16px 0; padding-inline: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.mx-format { flex: 0 0 272px; gap: 14px; scroll-snap-align: start; }
.mx-format__panel { height: 430px; padding: 16px; border-radius: 24px; }
.mx-format__panel .mx-post--w300 { width: 240px; }
.mx-format__title { font-size: 19px; white-space: normal; }

/* 11 · Prompts: swipe cards */
.mx-prompts { display: flex; gap: 12px; margin: 20px -16px 0; padding-inline: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.mx-prompt { flex: 0 0 236px; min-height: 230px; padding: 18px; border-radius: 20px; scroll-snap-align: start; }

/* 12 · Comparison: the same table, re-flowed into one card per column, LidFly first (ТЗ 10) */
.mx-compare { margin: 24px -16px 0; padding-inline: 16px; overflow-x: auto; border: 0; border-radius: 0; background: none; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.mx-compare table { display: grid; grid-template-columns: repeat(3, 236px); column-gap: 12px; width: max-content; table-layout: auto; }
.mx-compare thead, .mx-compare tbody, .mx-compare tr { display: contents; }
.mx-compare thead td, .mx-compare tbody th { display: none; }
.mx-compare thead th, .mx-compare tbody td { display: block; padding: 8px 16px; border: solid var(--v2-line); border-width: 0 1px; background: var(--v2-card); color: var(--v2-ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
.mx-compare tr > :nth-child(2) { grid-column: 2; }
.mx-compare tr > :nth-child(3) { grid-column: 3; }
.mx-compare tr > .is-lidfly { grid-column: 1; border-color: var(--v2-lime-soft); background: var(--v2-lime-soft); color: var(--v2-forest); }
.mx-compare thead th { grid-row: 1; margin-bottom: 4px; padding: 14px 16px; border-width: 1px 1px 0; border-radius: 20px 20px 0 0; background: var(--v2-sand); color: var(--v2-ink); font-size: 15px; scroll-snap-align: start; }
.mx-compare thead th.is-lidfly { border-color: var(--v2-lime); background: var(--v2-lime); color: var(--v2-forest); }
.mx-compare tbody tr:nth-child(1) > td { grid-row: 2; }
.mx-compare tbody tr:nth-child(2) > td { grid-row: 3; }
.mx-compare tbody tr:nth-child(3) > td { grid-row: 4; }
.mx-compare tbody tr:nth-child(4) > td { grid-row: 5; }
.mx-compare tbody tr:nth-child(5) > td { grid-row: 6; }
.mx-compare tbody tr:nth-child(6) > td { grid-row: 7; }
.mx-compare tbody tr:nth-child(7) > td { grid-row: 8; padding-bottom: 16px; border-bottom-width: 1px; border-radius: 0 0 20px 20px; }
.mx-compare tbody td::before { content: attr(data-row); display: block; margin-bottom: 2px; color: var(--v2-ink-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mx-compare tbody .is-lidfly::before { color: var(--v2-green); }

/* 13 · Audience: horizontal cards with a 96 px preview (ТЗ 4, блок 13) */
.mx-auds { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.mx-aud { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 14px; padding: 10px; border-radius: 22px; }
.mx-aud__photo { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 14px; }
.mx-aud__channel { display: none; }
.mx-aud__tiles, .mx-aud__avas { position: static; transform: none; }
.mx-aud__tiles > span { width: 26px; height: 26px; margin-right: -4px; border-radius: 8px; box-shadow: var(--mx-shadow-tile); }
.mx-aud__tiles img { width: 15px; height: 15px; }
.mx-aud__avas > span { width: 28px; height: 28px; margin-right: -6px; border-width: 2px; font-size: 12px; }
.mx-aud__body { gap: 6px; padding: 4px 4px 6px 0; }
.mx-aud__title { font-size: 16px; line-height: 1.3; letter-spacing: 0; }
.mx-aud__body > p { font-size: 13px; line-height: 1.5; }

/* 15 · Connection steps and 16 · Control: icon rows */
.mx-steps3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mx-steps3 li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 16px; border-radius: 20px; }
.mx-steps3 li > .mx-ava { grid-row: span 2; }
.mx-steps3 h3 { font-size: 16px; }
.mx-steps3 p { font-size: 13px; line-height: 1.5; }
.mx-controls { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; }
.mx-controls li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; border-radius: 20px; }
.mx-controls li > .mx-icon-tile { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; }
.mx-icon-tile .mx-ico { font-size: 20px; }
.mx-controls h3 { font-size: 16px; }
.mx-controls p { font-size: 13px; line-height: 1.5; }

/* 17 · Pricing: access card full width, two small cards, «Ваш ИИ» full width */
.mx-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.mx-price:first-child, .mx-price:last-child { grid-column: 1 / -1; }
.mx-price { padding: 18px 16px; }
.mx-price__value { font-size: 34px; }
.mx-price:not(:first-child):not(:last-child) .mx-price__value { font-size: 30px; }
.mx-price__value [data-price] { white-space: normal; }
/* 6б · the preview phone grows with its messages; 8 · long status pill wraps */
.mx-phone--thread { height: auto; }
.mx-botpanel .mx-pill { white-space: normal; text-align: center; }