/* ═══════════════════════════════════════════════════════════════════════
   Мобильная вёрстка. Отдельный файл поверх настольных источников: здесь
   можно всё, в настольных файлах мобильного нет. Порог один: 760.

   Грамматика — как у Instagram: тонкий хром по краям, контент в центре
   как фокус, одно целевое действие в середине нижнего бара.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

  /* ── нижний таб-бар: How · Get · [Let's talk] · Do · Notes ─────────── */
  .talk{padding:8px 0;
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px))}
  /* Два этажа: сверху пять табов, снизу капсула во всю ширину. */
  .talkw{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
         gap:8px 6px;min-height:0;padding:0 10px;max-width:none}
  .lgs.l,.lgs.r{display:contents}

  /* Пилюли-табы: короткая подпись из data-m, полный текст остаётся
     скринридеру. Документы и кружки в баре не живут — хром тонкий. */
  .talk .lg{flex:1 1 0;text-align:center;padding:13px 4px;
            font-size:0;letter-spacing:0;border-color:transparent}
  .talk .lg::before{content:attr(data-m);font-size:10.5px;letter-spacing:.08em}
  .talk .lg:not([data-m]){display:none}
  /* Перелом строки: выше него — табы, ниже — капсула с кружками. */
  .talkw::before{content:"";flex-basis:100%;order:5;height:0}
  .talk .li,.talk .sl{display:grid;position:static;left:auto;margin:0;
    transform:none;width:48px;height:48px;flex:0 0 auto}
  .talk .li{order:7}
  .talk .sl{order:8}

  .talk .home{order:0}
  .talk .lg[href="/how-it-runs"]{order:1}
  .talk .lg[href="/what-you-get"]{order:2}
  .talk .go{order:6;flex:1 1 auto;text-align:center;
            font-size:12px;letter-spacing:.1em;padding:16px 8px;
            border-radius:24px}
  .talk .lg[href="/what-you-do"]{order:3}
  .talk .lg[href="/blog"]{order:4}

  .talk .lg[aria-current="page"]{background:transparent;color:var(--ink);
    font-weight:700;border-color:transparent}

  body{padding-bottom:158px}
  .talk .lg{padding:16px 4px}

  /* ── хром: лишнее с телефона ────────────────────────────────────────── */
  .guides{display:none}
  .theme{width:44px;height:44px;top:14px}

  /* ── витрина ────────────────────────────────────────────────────────── */
  /* Вопрос переносится: nowrap ужимал кегль до нечитаемого. */
  /* Вопрос рвётся ровно перед «do you need?» — по слову владельца. */
  h1.ask{white-space:normal}
  h1.ask .mbr{display:inline}
  h1.ask{font-size:clamp(24px,7.4vw,30px)}
  /* $500 — первая цифра и во всю ширину: ядро оффера выше сгиба.
     Остальные три — сеткой 2×2 под ней. */
  /* Цены столбиком: $500 первой, остальные под ней, плотно. */
  .pair{display:grid;grid-template-columns:1fr;gap:10px}
  .fig{padding:6px 0}
  .fig .u{min-height:0;margin-top:5px}
  .pair .dot{display:none}
  .fig.box{order:-1}
  .det > summary span{padding:15px 30px}

  /* Самоквалификация под ценами и деэскалация после Details: по строке
     мелкой капителью, приглушённо. Существуют только на телефоне. */
  .squal,.deesc{display:block;text-align:center;margin:18px 0 0;
    font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--mute)}
  .deesc{margin:26px 0 8px}

  /* Развёртка: поля листа уже, строки плотнее. */
  .sheet{padding:0 14px 46px}
  .sheet .row{gap:12px}
  /* Строка с длинным пояснением: подпись сверху, текст под ней во всю
     ширину — в две колонки 375 её не делит без каши. */
  .sheet .row:has(#x-seqnote){display:block}
  .sheet #x-seqnote{max-width:none;text-align:left;margin-top:6px}
  .sheet .row:has(dd.seq){display:block}
  .sheet dd.seq{margin-top:10px;text-align:left;display:flex;
    align-items:center;gap:12px}
  /* Тач-зона мелких «Details» в строках расчёта: вид тот же, зона больше. */
  .why summary span{display:inline-block;padding:10px 8px;margin:-10px -8px}

  /* Sticky-панель в три этажа: наверху счётчик с ползунком, ниже все
     четыре цифры парами — при скролле виден весь расклад. */
  .sticky{display:grid;grid-template-columns:1fr 1fr;
          gap:10px 14px;align-items:center;
          padding:12px calc(50vw - 50% + 60px) 12px calc(50vw - 50% + 16px)}
  .sticky .c{display:flex;align-items:baseline;gap:7px;min-width:0}
  .sticky .c:first-child{grid-column:1/-1;display:flex;align-items:center}
  .sticky .c .u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:9px;letter-spacing:.06em}
  .sticky input[type=range]{flex:1 1 auto;width:auto;min-width:90px;height:32px}
  .sticky input[type=range]::-webkit-slider-thumb{width:22px;height:22px}
  .sticky input[type=range]::-moz-range-thumb{width:22px;height:22px}
  .sticky .theme{width:36px;height:36px;top:12px;right:10px;transform:none}

  /* Слайдер секвенции: бегунок в тач-размер. */
  .seq input{width:132px;height:32px}
  .seq input::-webkit-slider-thumb{width:22px;height:22px}
  .seq input::-moz-range-thumb{width:22px;height:22px}

  /* ── верхняя полоса внутренних: в поток, названию перенос ──────────── */
  .top{position:static;background:var(--paper);
       border-bottom:1px solid var(--line);padding:16px 0 14px}
  .topw{align-items:flex-start;gap:12px}
  .topw h1{white-space:normal;font-size:30px;line-height:1.06;top:0}
  /* Тап по названию страницы возвращает на оффер. */
  .topw h1 a{color:inherit;text-decoration:none}
  .top .topr{--h:44px}
  .topr .back{display:none}
  body:has(.top){padding-top:0}
  h2{scroll-margin-top:12px}
  .post h2,.posts{scroll-margin-top:12px}

  /* ── /book ──────────────────────────────────────────────────────────── */
  .grid{gap:26px}
  .t{min-height:44px;min-width:64px;padding:12px 14px;font-size:14px}
  .side{padding:18px 16px 20px}
  .side input,.side textarea{font-size:16px;padding:12px;margin:0 0 14px}
  .side form .go{min-height:52px}

  /* ── /slack ─────────────────────────────────────────────────────────── */
  .sform button{width:100%;padding:17px 20px}

  /* ── правовые ───────────────────────────────────────────────────────── */
  .tw{margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter));
      padding:0 var(--gutter)}
  table{font-size:14px}
  .toc ol{columns:1}
  .toc li{padding:6px 0;font-size:15px}
  .dl a{display:block;text-align:center;padding:16px 18px}

  /* ── заметки: у кольца остаётся только «вперёд» ─────────────────────── */
  .w>.k{font-size:10.5px}
  .more{flex-direction:column;align-items:stretch}
  .more a{white-space:normal;line-height:1.45;display:flex;align-items:center;
    gap:10px;min-height:44px;padding:12px 14px}
  .more a:first-child:not(:only-child){display:none}

  /* ── мобильный подвал ───────────────────────────────────────────────── */
  .mfoot{display:flex;flex-direction:column;align-items:center;gap:8px;
    max-width:var(--frame);margin:46px auto 6px;
    padding:18px var(--gutter) 0;border-top:1px solid var(--line)}
  .mfoot .docs{display:flex;align-items:center;gap:2px 12px;flex-wrap:wrap;
    justify-content:center}
  .mfoot .socs{display:flex;align-items:center;gap:14px}
  .mfoot a{display:inline-flex;align-items:center;min-height:44px;
    text-decoration:none;font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--mute)}
  .mfoot a:hover,.mfoot a:active{color:var(--accent-text)}
  .mfoot i{font-style:normal;color:var(--line)}
  .mfoot .ic{width:44px;height:44px;border:1px solid var(--line);
    border-radius:50%;display:grid;place-items:center;color:var(--ink)}
  .mfoot .ic svg{width:17px;height:17px;fill:currentColor}
}

/* Подвал существует только на телефоне; правило вне медиа, потому что
   разметка едет всем, а прятать её в настольных файлах нельзя. */
@media (min-width: 761px){ .mfoot,.talk .home{display:none} }

/* Тема №12 на мобиле: активный таб на тёмно-синем баре — белым, не чернилами. */
@media (max-width: 760px){
  .talk .lg[aria-current="page"]{color:#fff}
}