/* Landing /telegram-kanal/, phone layout (Figma B3 642:15195, up to 767 px) for blocks 4–18:
   carousels with dots for features, formats, prompts and the comparison (LidFly first), and
   compact icon rows 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 telegram-kanal-landing.js from [data-tg-scroller]) */
.tg-dots-nav { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.tg-dots-nav i { width: 6px; height: 6px; border-radius: 3px; background: var(--v2-line); transition: width 160ms ease, background-color 160ms ease; }
.tg-dots-nav i.is-active { width: 18px; background: var(--v2-ink); }

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

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

/* 4а · Formats: one column per swipe */
.tg-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; }
.tg-format { flex: 0 0 272px; gap: 14px; scroll-snap-align: start; }
.tg-format__panel { height: 430px; padding: 16px; border-radius: 24px; }
.tg-format__panel .tg-post--w300 { width: 240px; }
.tg-format__title { font-size: 19px; white-space: normal; }

/* 10 · Prompts: swipe cards */
.tg-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; }
.tg-prompt { flex: 0 0 236px; min-height: 230px; padding: 18px; border-radius: 20px; scroll-snap-align: start; }

/* 11 · Comparison: the same table, re-flowed into one card per column, LidFly first (ТЗ 10) */
.tg-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; }
.tg-compare table { display: grid; grid-template-columns: repeat(3, 236px); column-gap: 12px; width: max-content; table-layout: auto; }
.tg-compare thead, .tg-compare tbody, .tg-compare tr { display: contents; }
.tg-compare thead td, .tg-compare tbody th { display: none; }
.tg-compare thead th, .tg-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; }
.tg-compare tr > :nth-child(2) { grid-column: 2; }
.tg-compare tr > :nth-child(3) { grid-column: 3; }
.tg-compare tr > .is-lidfly { grid-column: 1; border-color: var(--v2-lime-soft); background: var(--v2-lime-soft); color: var(--v2-forest); }
.tg-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; }
.tg-compare thead th.is-lidfly { border-color: var(--v2-lime); background: var(--v2-lime); color: var(--v2-forest); }
.tg-compare tbody tr:nth-child(1) > td { grid-row: 2; }
.tg-compare tbody tr:nth-child(2) > td { grid-row: 3; }
.tg-compare tbody tr:nth-child(3) > td { grid-row: 4; }
.tg-compare tbody tr:nth-child(4) > td { grid-row: 5; }
.tg-compare tbody tr:nth-child(5) > td { grid-row: 6; }
.tg-compare tbody tr:nth-child(6) > td { grid-row: 7; }
.tg-compare tbody tr:nth-child(7) > td { grid-row: 8; padding-bottom: 16px; border-bottom-width: 1px; border-radius: 0 0 20px 20px; }
.tg-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; }
.tg-compare tbody .is-lidfly::before { color: var(--v2-green); }

/* 12 · Audience: photo or icon tile on the left */
.tg-auds { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.tg-aud { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 14px; padding: 10px; border-radius: 22px; }
.tg-aud__photo { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 14px; }
.tg-aud__channel, .tg-aud__tiles, .tg-aud__avas { display: none; }
.tg-aud__mobicon { font-size: 30px; color: var(--v2-sky-ink); stroke-width: 1.75; }
.tg-aud__body { gap: 6px; padding: 4px 4px 6px 0; }
.tg-aud__title { font-size: 16px; line-height: 1.3; letter-spacing: 0; }
.tg-aud__body > p { font-size: 13px; line-height: 1.5; }

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

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