/* Aroken — /web, четыре экрана после hero, перед #market (владелец 22.09: «один экран — один смысл»): #intro «Кто такой веб-разработчик»,
   #freelance «Что такое фриланс», #paid «За что платят», #ceiling «Нет зарплаты, но и нет потолка». Композиции разные (владелец 22.09, раунд 2: «одинаковые блоки»):
   титр по центру + стол из трёх окон; постер «Что такое | телефон | фриланс»; стена заказов-бенто; лестница во всю ширину с текстом в углу.
   На ≤1023 — всё столбиком. Высота экрана — общий ритм секций (css/main.css: --screen-h, --nav-h, --section-pad), размеры — clamp() от кадра.
   Факты: docs/content/aroken-old-site-copy.md (100 000 ₽+), docs/content/sales-script-inbound.md (вилки по месяцам работы),
   docs/content/telegram-proofs.md (чеки t.me/aroken_result), слова владельца 22.09 (2 000 ₽ за кнопку — t.me/aroken_result/588). */


/* ---------- #intro «Кто такой веб‑разработчик»: титр по центру, под ним «рабочий стол» во всю ширину контейнера — три окна лесенкой:
   макет в Figma (слои слева, вайрфрейм Shop.co по раскладке настоящей страницы) → редактор с кодом → браузер с настоящим сайтом ученика.
   Код печатается (js/web-intro.js, data-intro-dev): строка печатается — в Figma выделен её блок и слой; допечаталась — в браузере проявляется
   этот кусок скрина (clip-path по области блока). Потом окна съезжаются в одно (сайт спереди, код и макет выглядывают из-под него) и расходятся.
   Скрин 700×393 — окно браузера не шире 700 px (не растягиваем). Ширина окна браузера считается и от высоты экрана: весь экран — один кадр.
   Без JS и в reduced-motion — три окна рядом, всё готово. Уже 1024 px — окна лесенкой сверху вниз ---------- */
.idev { --avail: calc(min(calc(var(--screen-h, 100vh) - var(--nav-h, 84px)), 1440px) - 2 * var(--section-pad, 80px));
  --head-h: 150px; --idev-gap: 44px; --bar-h: 38px;
  display: flex; flex-direction: column; align-items: center; gap: var(--idev-gap); }
.idev__head { max-width: 1180px; text-align: center; }
@media (min-width: 1800px) { .idev__head { max-width: none; } }
.idev__title { margin: 0; font-size: clamp(40px, calc(4.3vw / var(--z, 1)), 112px); line-height: 1.02; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; }
.idev__lead { max-width: 820px; margin: 18px auto 0; font-size: clamp(17px, calc(1.2vw / var(--z, 1)), 26px); line-height: 1.45; color: var(--muted-2); text-wrap: balance; }
.desk { container: desk / inline-size; position: relative; width: 100%; min-width: 0; margin: 0; }
/* окно браузера: не шире скрина (700), не шире 46 % стола и не выше остатка экрана под титром */
.desk__stage, .desk__cap { --web-w: min(700px, 46cqi, calc((var(--avail) - var(--head-h) - var(--idev-gap) - var(--bar-h)) * 700 / 393)); }
.desk__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) var(--web-w); align-items: start; }
.desk__win { position: relative; min-width: 0; border-radius: 14px; overflow: hidden; background: #111216;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 44px 80px -34px rgba(0, 0, 0, .95);
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--ms, 1)); transform-origin: 0 0; transition: transform 1s var(--ease); }
.desk__win--fig { grid-column: 1; z-index: 1; margin-top: calc(var(--web-w) * .1); }
.desk__win--code { grid-column: 2; z-index: 2; margin: calc(var(--web-w) * .2) -56px 0 -40px; }
.desk__win--web { grid-column: 3; z-index: 3; }
.desk__bar { display: flex; align-items: center; gap: 14px; height: var(--bar-h); margin: 0; padding: 0 14px; background: #18191D; border-bottom: 1px solid rgba(255, 255, 255, .07); font: 500 12.5px/16px var(--font); color: rgba(255, 255, 255, .45); white-space: nowrap; overflow: hidden; }
.desk__dots { flex: none; display: flex; gap: 6px; }
.desk__dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.desk__name b { font-weight: 600; color: rgba(255, 255, 255, .9); }
.desk__url { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 62%; margin: 0 auto; padding: 4px 12px; border-radius: 8px; background: rgba(199, 255, 46, .1); font: 500 12.5px/16px var(--mono); color: var(--lime); }
.desk__url svg { flex: none; width: 11px; height: 11px; }
/* Figma: панель слоёв + холст с фреймом */
.desk__fig { display: grid; grid-template-columns: minmax(0, 24%) minmax(0, 1fr); background: #1E1F24; }
.desk__layers { margin: 0; padding: 10px 0; list-style: none; background: #16171B; border-right: 1px solid rgba(255, 255, 255, .06); font: 500 12px/16px var(--font); color: rgba(255, 255, 255, .5); }
.desk__layers li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; white-space: nowrap; transition: background-color .25s, color .25s; }
.desk__layers li i { flex: none; width: 9px; height: 9px; border: 1.4px solid currentColor; border-radius: 2px; opacity: .7; }
.desk__canvas { position: relative; padding: 32px 8% 28px; }
.desk__frame-label { position: absolute; left: 8%; top: 12px; font: 500 11px/14px var(--font); color: rgba(255, 255, 255, .5); white-space: nowrap; }
.desk__frame { position: relative; aspect-ratio: 700 / 393; background: #F4EFF1; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
/* вайрфрейм: координаты — доли страницы 700×393, по скрину */
.desk__w { position: absolute; display: block; outline: 1.5px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.desk__w i { position: absolute; display: block; }
.desk__w--promo { left: 0; top: 0; width: 100%; height: 4.8%; background: #0B0B0C; }
.desk__w--promo::after { content: ""; position: absolute; left: 30%; right: 30%; top: 38%; height: 26%; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.desk__w--head { left: 0; top: 4.8%; width: 100%; height: 11.6%; background: #fff; }
.desk__logo { left: 6.9%; top: 30%; width: 11.1%; height: 32%; border-radius: 2px; background: #141414; }
.desk__nav { top: 40%; height: 14%; border-radius: 2px; background: #CBC6C8; }
.desk__nav:nth-child(2) { left: 20.9%; width: 6%; }
.desk__nav:nth-child(3) { left: 28.6%; width: 4.4%; }
.desk__nav:nth-child(4) { left: 34.3%; width: 10.6%; }
.desk__nav:nth-child(5) { left: 46.9%; width: 4.4%; }
.desk__search { left: 53.9%; top: 22%; width: 32%; height: 56%; border-radius: 999px; background: #EFEFEF; }
.desk__ico { top: 36%; width: 1.9%; height: 30%; border-radius: 50%; background: #141414; }
.desk__ico:nth-child(7) { left: 88.7%; }
.desk__ico:nth-child(8) { left: 91.9%; }
.desk__w--h1 { left: 7%; top: 27.7%; width: 40%; height: 22.8%; }
.desk__w--h1 i { left: 0; height: 24%; border-radius: 3px; background: #1B1B1D; }
.desk__w--h1 i:nth-child(1) { top: 6%; width: 87.5%; }
.desk__w--h1 i:nth-child(2) { top: 42%; width: 98.5%; }
.desk__w--h1 i:nth-child(3) { top: 77%; width: 65%; }
.desk__w--p { left: 7%; top: 54.6%; width: 41%; height: 4.6%; }
.desk__w--p i { left: 0; height: 36%; border-radius: 2px; background: #CFC9CC; }
.desk__w--p i:nth-child(1) { top: 0; width: 100%; }
.desk__w--p i:nth-child(2) { top: 64%; width: 58%; }
.desk__w--btn { left: 6.9%; top: 62.3%; width: 14.6%; height: 6.8%; border-radius: 999px; background: #0B0B0C; }
.desk__w--btn::after { content: ""; position: absolute; left: 22%; right: 22%; top: 42%; height: 16%; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.desk__w--stats { left: 7%; top: 75.8%; width: 45%; height: 9.9%; }
.desk__w--stats i { border-radius: 2px; }
.desk__w--stats i:nth-child(-n+3) { top: 0; height: 44%; background: #1B1B1D; }
.desk__w--stats i:nth-child(n+4) { top: 72%; height: 22%; background: #CFC9CC; }
.desk__w--stats i:nth-child(1) { left: 0; width: 16%; }
.desk__w--stats i:nth-child(2) { left: 34.9%; width: 22%; }
.desk__w--stats i:nth-child(3) { left: 72.7%; width: 26%; }
.desk__w--stats i:nth-child(4) { left: 0; width: 24.8%; }
.desk__w--stats i:nth-child(5) { left: 34.9%; width: 28%; }
.desk__w--stats i:nth-child(6) { left: 72.7%; width: 27%; }
/* картинка в макете — серая плашка с крестом, как заглушка изображения в Figma */
.desk__w--img { left: 52%; top: 18.5%; width: 43.5%; height: 79.4%;
  background: linear-gradient(to top right, transparent calc(50% - .6px), #CDC7CA calc(50% - .6px), #CDC7CA calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(to bottom right, transparent calc(50% - .6px), #CDC7CA calc(50% - .6px), #CDC7CA calc(50% + .6px), transparent calc(50% + .6px)), #E6E1E3; }
.desk__w--foot { left: 0; bottom: 0; width: 100%; height: 2.1%; background: #0B0B0C; }
/* редактор: номера строк, печать обрезкой (clip-path по числу символов --n) — раскладка не меняется */
.desk__code { padding: 1.1em 0 1.3em; background: #0C0D10; font: 400 clamp(10.5px, .86cqi, 17px)/2 var(--mono); color: rgba(235, 237, 242, .86); counter-reset: desk; }
.desk__ln { position: relative; display: block; padding: 0 12px 0 3.4em; white-space: pre; transition: background-color .25s; }
.desk__ln::before { counter-increment: desk; content: counter(desk); position: absolute; left: 0; width: 2.3em; text-align: right; color: rgba(255, 255, 255, .22); }
.desk__tx { display: inline-block; vertical-align: top; clip-path: inset(0 max(0px, calc(100% - var(--n, 999) * 1ch)) 0 0); transition: opacity .5s; }
.desk__ln::after { content: ""; position: absolute; left: 3.4em; top: .45em; width: 2px; height: 1.1em; background: var(--lime); opacity: 0; transform: translateX(calc(var(--n, 0) * 1ch)); }
.desk__ln.is-cur { background: rgba(255, 255, 255, .045); }
.desk__ln.is-cur::after { opacity: 1; }
.desk__code .c-k { color: #B8A3FF; }
.desk__code .s { color: rgba(115, 214, 255, .9); }
/* браузер: страница, куски настоящего скрина по областям блоков, в конце — скрин целиком */
.desk__page { position: relative; aspect-ratio: 700 / 393; overflow: hidden; background: #F2F0F1; }
.desk__px { position: absolute; inset: 0; display: block; background: url("../assets/img/proj-shop-co.webp") 0 0 / 100% 100% no-repeat; clip-path: var(--c); opacity: 0; transition: opacity .45s var(--ease); }
.desk__shot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: opacity .5s var(--ease); }
.desk__cap { position: absolute; right: 0; top: calc(100% + 14px); width: var(--web-w); font-size: 14px; line-height: 20px; color: var(--muted-2); }
/* съезд: окна под сайтом притушены (подложка поверх окна, не filter) */
.desk__win--fig::after, .desk__win--code::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: #0B0B0C; opacity: 0; pointer-events: none; transition: opacity .8s var(--ease); }
.desk.is-merge .desk__win--fig::after { opacity: .6; }
.desk.is-merge .desk__win--code::after { opacity: .35; }
/* js взводит сцену (.is-armed): выделение блока и слоя, куски скрина по классам; без взвода — всё готово */
.desk.is-armed .desk__w.is-sel { outline-color: #0D99FF; }
.desk.is-armed .desk__layers li.is-sel { background: rgba(13, 153, 255, .24); color: #fff; }
.desk.is-armed .desk__px.is-on { opacity: 1; }
.desk.is-armed .desk__shot { opacity: 0; }
.desk.is-armed .desk__shot.is-on { opacity: 1; }
.desk.is-out .desk__tx, .desk.is-out .desk__px, .desk.is-out .desk__shot { opacity: 0; }
/* узкий стол (нет места под панель слоёв) — только холст */
@container desk (max-width: 1099px) {
  .desk__fig { grid-template-columns: minmax(0, 1fr); }
  .desk__layers { display: none; }
}
/* лесенка ниже — окно кода не должно опускаться ниже браузера (иначе кадр выше экрана) */
@media (max-width: 1439px) {
  .desk__win--fig { margin-top: calc(var(--web-w) * .06); }
  .desk__win--code { margin-top: calc(var(--web-w) * .12); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .idev { --head-h: 130px; --idev-gap: 32px; --bar-h: 34px; }
  .desk__bar { gap: 10px; padding: 0 12px; font-size: 12px; }
  .desk__win--code { margin-right: -40px; margin-left: -28px; }
}
@media (min-width: 1800px) {
  .idev { --head-h: 176px; --idev-gap: 56px; --bar-h: 42px; }
  .desk__bar { font-size: 13.5px; }
  .desk__url { font-size: 13.5px; }
  .desk__layers { padding: 14px 0; font-size: 13.5px; line-height: 18px; }
  .desk__layers li { padding: 8px 16px; }
  .desk__frame-label { font-size: 12.5px; }
  .desk__cap { font-size: 16px; line-height: 22px; }
}
/* планшет и телефон: окна лесенкой сверху вниз — макет слева, код правее, сайт; без «съезда» */
@media (max-width: 1023px) {
  .idev { align-items: stretch; gap: 32px; }
  .idev__head { text-align: left; }
  .idev__lead { margin-left: 0; text-wrap: pretty; }
  .desk { max-width: 760px; }
  .desk__stage { display: flex; flex-direction: column; }
  .desk__win { --bar-h: 34px; }
  .desk__win--fig { width: 80%; margin: 0; }
  .desk__win--code { width: 82%; margin: -18px 6% 0 auto; }
  .desk__win--web { width: 86%; margin: -18px 0 0 auto; }
  .desk__code { font-size: clamp(10px, 2.7cqi, 14px); }
  .desk__cap { position: static; width: auto; margin-top: 12px; }
}
@media (max-width: 767px) {
  .idev { gap: 24px; }
  .idev__title { font-size: 34px; line-height: 38px; letter-spacing: -.03em; }
  .idev__lead { margin-top: 12px; font-size: 16px; line-height: 23px; }
  .desk__win { border-radius: 12px; }
  .desk__bar { gap: 10px; padding: 0 10px; font-size: 11.5px; }
  .desk__win--fig { width: 86%; }
  .desk__win--code { width: 90%; margin-right: 0; margin-left: auto; }
  .desk__win--web { width: 92%; margin-left: 0; margin-right: auto; }
  .desk__code { font-size: clamp(9.5px, 2.75cqi, 12px); }
  .desk__cap { font-size: 13px; line-height: 18px; }
}

/* ---------- #freelance «Что такое фриланс»: постер — заголовок разрезан телефоном: «Что такое | [чат] | фриланс»; под левой половиной —
   как работаешь (из дома, время — сам), под правой — сколько платят (2 000 ₽ за кнопку, ссылка на скрин оплаты). Факты — крупной типографикой,
   без карточек. Телефон — во всю высоту кадра (ритм css/main.css: --screen-h, --nav-h, --section-pad), в нём переписка как в Telegram
   (js/web-intro.js, data-intro-day): лента прижата к низу, сообщения приходят по очереди и уезжают вверх сдвигом transform.
   Размеры ленты — в em от --fs: скрипт подбирает --fs, чтобы на десктопе весь диалог влез в экран телефона (с первой репликой и «окак»).
   Стикеры владельца (assets/img/stickers) — без пузыря. Без JS и в reduced-motion — вся переписка сразу. Уже 1024 px — всё столбиком ---------- */
.frl { --frl-h: clamp(440px, calc(min(calc(var(--screen-h, 100vh) - var(--nav-h, 84px)), 1440px) - 2 * var(--section-pad, 80px)), 1000px);
  --ph-w: clamp(340px, calc(var(--frl-h) * .5), 440px);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--ph-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(36px, calc(4.4vw / var(--z, 1)), 104px); height: var(--frl-h); }
.frl__title { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: start; margin: 0;
  font-size: clamp(48px, calc(5vw / var(--z, 1)), 124px); line-height: .98; font-weight: 700; letter-spacing: -.045em; }
.frl__title span:first-child { grid-column: 1; text-align: right; }
.frl__title span:last-child { grid-column: 3; }
.frl__facts { grid-row: 2; align-self: end; min-width: 0; margin: 0; padding: 0 0 2%; list-style: none; }
.frl__facts--how { grid-column: 1; display: flex; flex-direction: column; gap: clamp(20px, calc(2.6vh / var(--z, 1)), 40px); text-align: right; }
.frl__facts--pay { grid-column: 3; display: flex; flex-direction: column; align-items: flex-start; }
.frl__facts li { display: flex; flex-direction: column; align-items: flex-end; }
.frl__facts b { font-size: clamp(30px, calc(2.7vw / var(--z, 1)), 64px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.frl__facts span { max-width: 380px; margin-top: 10px; font-size: clamp(15px, calc(1vw / var(--z, 1)), 21px); line-height: 1.4; color: var(--muted-2); text-wrap: pretty; }
.frl__facts--pay .frl__sum { font-size: clamp(56px, calc(5.4vw / var(--z, 1)), 136px); line-height: .95; letter-spacing: -.045em; color: var(--lime); white-space: nowrap; font-variant-numeric: tabular-nums; }
.frl__facts--pay span { margin-top: 14px; }
.frl__facts--pay a { display: inline-block; margin-top: 14px; padding: 6px 0; font-size: clamp(15px, calc(1vw / var(--z, 1)), 20px); line-height: 1.3; font-weight: 600; color: var(--lime); text-decoration: none; }
.frl__facts--pay a:hover { text-decoration: underline; text-underline-offset: 3px; }
.frl__facts--pay a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
/* телефон во всю высоту кадра: рамка, «островок», внутри — чат */
.fday { grid-column: 2; grid-row: 1 / -1; min-width: 0; min-height: 0; margin: 0; }
.fphone { position: relative; height: 100%; padding: 10px; border-radius: 48px; background: linear-gradient(160deg, #2A2C33, #121317 40%, #1B1C21);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .6), 0 60px 110px -40px rgba(0, 0, 0, .95), 0 0 120px -30px rgba(184, 163, 255, .35); }
.fphone__island { position: absolute; left: 50%; top: 18px; z-index: 3; width: 92px; height: 24px; margin-left: -46px; border-radius: 999px; background: #000; }
.fphone .fchat { height: 100%; display: flex; flex-direction: column; border-radius: 38px; }
.fphone .fchat__head { padding: 44px 18px 10px; }
.fphone .fchat__ava { width: 36px; height: 36px; font-size: 15px; }
/* экран ленты: лента прижата к низу (absolute внутри), всё, что выше, обрезается и растворяется маской */
.fchat__screen { position: relative; height: 500px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px); mask-image: linear-gradient(180deg, transparent 0, #000 20px); }
.fphone .fchat__screen { flex: 1 1 auto; height: auto; min-height: 0; }
.fchat { border-radius: 20px; overflow: hidden; background: radial-gradient(120% 60% at 100% 0%, rgba(115, 214, 255, .1), rgba(115, 214, 255, 0) 60%), #0F1013; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -36px rgba(0, 0, 0, .9); }
.fchat__head { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 20px; background: rgba(255, 255, 255, .03); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.fchat__ava { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(140deg, #8FE1FF, #4E8DF5); font-size: 16px; font-weight: 700; color: #0B1222; }
.fchat__who { display: flex; flex-direction: column; min-width: 0; }
.fchat__who b { font-size: 15px; line-height: 20px; font-weight: 600; }
.fchat__who small { font-size: 12.5px; line-height: 16px; color: rgba(255, 255, 255, .45); }
.fchat__feed { --fs: 15.5px; position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.5em 1.25em 1em; list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: .42em; font-size: var(--fs); transition: transform .6s var(--ease); }
.fchat__msg { position: relative; max-width: 80%; padding: .5em .86em; border-radius: 1.15em 1.15em 1.15em .4em; background: #1F2127; font-size: 1em; line-height: 1.36; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.fchat__msg--me { align-self: flex-end; border-radius: 1.15em 1.15em .4em 1.15em; background: rgba(184, 163, 255, .18); box-shadow: inset 0 0 0 1px rgba(184, 163, 255, .3); }
/* метка времени — в конце пузыря, как в мессенджере */
.fchat__time { display: inline-block; margin-left: .65em; font-size: .7em; line-height: 1.3; color: rgba(255, 255, 255, .42); font-variant-numeric: tabular-nums; vertical-align: -.05em; }
/* стикер: без пузыря, время — плашкой сбоку у нижнего края (в углу она закрывала подпись «окак») */
.fchat__msg--sticker { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.fchat__sticker { display: block; height: auto; }
.fchat__sticker--okak { width: 5.4em; border-radius: 1.1em; }
.fchat__sticker--money { width: 6.8em; filter: drop-shadow(0 .7em 1.1em rgba(0, 0, 0, .45)); }
.fchat__msg--sticker .fchat__time { position: absolute; left: calc(100% + .45em); bottom: .15em; margin: 0; padding: .15em .5em; border-radius: 999px; background: rgba(0, 0, 0, .55); color: rgba(255, 255, 255, .85); }
.fchat__msg--me.fchat__msg--sticker .fchat__time { left: auto; right: calc(100% + .45em); }
/* превью ссылки в «Готово, вот ссылка»: страница заказчика на бумаге, в углу — та самая кнопка мессенджера */
.fchat__peek { position: relative; display: block; min-width: 13.5em; height: 3.8em; margin: -.2em -.5em .45em; border-radius: .75em; overflow: hidden; background: linear-gradient(160deg, #FEFDF9, #F1ECE2); }
.fchat__peek i { position: absolute; left: .8em; height: .38em; border-radius: .2em; background: rgba(23, 24, 28, .14); }
.fchat__peek i:nth-child(1) { top: .7em; width: 48%; height: .5em; background: #17181C; }
.fchat__peek i:nth-child(2) { top: 1.65em; width: 64%; }
.fchat__peek i:nth-child(3) { top: 2.45em; width: 40%; }
.fchat__peek b { position: absolute; right: .6em; bottom: .55em; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #fff; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .45), 0 0 0 1px rgba(23, 24, 28, .06); }
.fchat__peek b svg { width: 1.15em; height: 1.15em; }
/* «печатает…»: три точки на месте будущего сообщения заказчика — место занято заранее, высота ленты не прыгает */
.fchat__dots { position: absolute; left: 0; top: 0; display: none; align-items: center; gap: .26em; height: 2.36em; padding: 0 .9em; border-radius: 1.15em 1.15em 1.15em .4em; background: #1F2127; }
.fchat__dots i { width: .38em; height: .38em; border-radius: 50%; background: rgba(255, 255, 255, .55); animation: fchat-dot 1.1s var(--ease) infinite; }
.fchat__dots i:nth-child(2) { animation-delay: .16s; }
.fchat__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes fchat-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes fchat-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* js взводит переписку (.is-armed): сообщения появляются по классу .is-in, стикеры — пружиной из угла */
.fday.is-armed .fchat__msg { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .4s, transform .45s var(--spring); }
.fday.is-armed .fchat__msg--sticker { transform: scale(.55); transform-origin: 0 100%; }
.fday.is-armed .fchat__msg--me.fchat__msg--sticker { transform-origin: 100% 100%; }
.fday.is-armed .fchat__msg.is-in { opacity: 1; transform: none; }
.fday.is-armed .fchat__msg.is-dots { background: none; box-shadow: none; }
.fday.is-armed .fchat__msg.is-dots .fchat__dots { display: flex; }
.fday.is-armed .fchat__msg.is-dots .fchat__text, .fday.is-armed .fchat__msg.is-dots .fchat__time { visibility: hidden; }
.fday.is-armed .fchat__msg--link.is-in .fchat__peek b { animation: fchat-pop .7s var(--spring) .35s both; }
/* планшет и телефон: столбиком — заголовок, как работаешь, телефон, сколько платят */
@media (max-width: 1023px) {
  .frl { display: flex; flex-direction: column; height: auto; gap: 28px; }
  .frl__title { display: block; font-size: 44px; line-height: 48px; letter-spacing: -.035em; }
  .frl__title span:first-child { text-align: left; }
  .frl__facts { padding: 0; }
  .frl__facts--how { flex-direction: row; flex-wrap: wrap; gap: 16px 40px; text-align: left; }
  .frl__facts li { align-items: flex-start; }
  .frl__facts b { font-size: 30px; }
  .frl__facts span { margin-top: 6px; font-size: 16px; }
  .fday { align-self: center; width: min(100%, 400px); height: 640px; }
  .frl__facts--pay .frl__sum { font-size: 56px; }
}
@media (max-width: 767px) {
  .frl { gap: 24px; }
  .frl__title { font-size: 36px; line-height: 40px; }
  .frl__facts--how { flex-direction: column; gap: 14px; }
  .frl__facts b { font-size: 26px; }
  .frl__facts span { font-size: 15px; line-height: 21px; }
  .fday { height: 600px; }
  .fphone { padding: 8px; border-radius: 40px; }
  .fphone .fchat { border-radius: 32px; }
  .fphone__island { top: 16px; width: 84px; height: 24px; margin-left: -42px; }
  .fphone .fchat__head { padding: 46px 16px 10px; }
  .fchat__feed { --fs: 14.5px; padding: 1.3em 1em 1.1em; gap: .5em; }
  .fchat__msg { max-width: 86%; }
  .frl__facts--pay .frl__sum { font-size: 48px; }
}

/* ---------- #paid «За что платят»: стена из восьми реальных заказов (владелец 22.09: «мало инфы на такое расстояние»). Бенто 4×3 во весь кадр:
   заголовок — плитка слева сверху (без подложки), самый крупный заказ — высокая плитка, второй — широкая, остальные — по клетке.
   Плитка — ссылка на пост: скрин оплаты, подпись автора дословно, сумма, «пост ↗». В клетке скрин обрезан по сумме (object-position снизу);
   низкая клетка (1280×720 и ниже по высоте) — без скрина, только подпись и сумма (container query по высоте плитки).
   Высота стены — от высоты экрана (ритм css/main.css). Уже 1024 px — две колонки, телефон — строками ---------- */
.pw { --pw-h: clamp(440px, calc(min(calc(var(--screen-h, 100vh) - var(--nav-h, 84px)), 1440px) - 2 * var(--section-pad, 80px)), 1080px);
  --gap: clamp(12px, calc(1vw / var(--z, 1)), 20px);
  display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas: "head head big t1" "t2 t3 big t4" "wide wide t5 t6"; gap: var(--gap); height: var(--pw-h); }
.pw__head { grid-area: head; align-self: center; min-width: 0; padding-right: 4%; }
.pw__title { margin: 0; font-size: clamp(44px, calc(4.4vw / var(--z, 1)), 112px); line-height: .98; font-weight: 700; letter-spacing: -.045em; }
.pw__lead { max-width: 640px; margin: clamp(12px, calc(1.4vh / var(--z, 1)), 22px) 0 0; font-size: clamp(16px, calc(1.1vw / var(--z, 1)), 24px); line-height: 1.42; color: var(--muted-2); text-wrap: pretty; }
.pw__lead b { font-weight: 700; color: var(--lime); white-space: nowrap; }
.pw__link { display: inline-block; margin-top: clamp(8px, calc(1.2vh / var(--z, 1)), 18px); padding: 6px 0; font-size: clamp(14px, calc(.95vw / var(--z, 1)), 19px); line-height: 1.3; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.pw__link:hover { text-decoration-color: #fff; }
.pw__link:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.pw__wall { display: contents; }
.pw__tile { container: pwt / size; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 18px; overflow: hidden;
  background: #15161A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: #fff; text-decoration: none; transition: transform .35s var(--spring), box-shadow .35s; }
.pw__tile:nth-child(1) { grid-area: big; }
.pw__tile:nth-child(2) { grid-area: wide; }
.pw__tile:nth-child(3) { grid-area: t1; }
.pw__tile:nth-child(4) { grid-area: t2; }
.pw__tile:nth-child(5) { grid-area: t3; }
.pw__tile:nth-child(6) { grid-area: t4; }
.pw__tile:nth-child(7) { grid-area: t5; }
.pw__tile:nth-child(8) { grid-area: t6; }
.pw__shot { flex: 1 1 44%; min-height: 0; display: block; background: #1A1B1F; }
.pw__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 96%; }
/* в клетке виден низ скрина — сумма; обрезанный верх (логотип, «Переводы») растворяется */
.pw__tile:not(.pw__tile--big, .pw__tile--wide) .pw__shot img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%); mask-image: linear-gradient(180deg, transparent 0, #000 55%); }
/* сумма уже крупно на скрине — текстом её пишем только там, где скрина нет (низкая клетка) и в крупных плитках */
.pw__tile:not(.pw__tile--big, .pw__tile--wide) .pw__sum { display: none; }
.pw__body { flex: 1 1 58%; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: clamp(10px, calc(1.1vw / var(--z, 1)), 18px) clamp(12px, calc(1.2vw / var(--z, 1)), 20px); border-top: 1px solid rgba(255, 255, 255, .06); }
.pw__job { quotes: "«" "»"; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: clamp(13px, calc(.92vw / var(--z, 1)), 22px); line-height: 1.38; color: rgba(255, 255, 255, .84); text-wrap: pretty; }
.pw__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pw__sum { font-size: clamp(18px, calc(1.35vw / var(--z, 1)), 30px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw__go { font-size: clamp(12px, calc(.8vw / var(--z, 1)), 18px); line-height: 1.3; color: rgba(255, 255, 255, .5); white-space: nowrap; transition: color .2s; }
.pw__tile:is(:hover, .is-lift) { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.pw__tile:is(:hover, .is-lift) .pw__go { color: #fff; }
.pw__tile:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
/* самый крупный заказ: высокая плитка, скрин целиком, подпись длиннее, сумма лаймом */
.pw__tile--big { background: radial-gradient(90% 50% at 50% 100%, rgba(199, 255, 46, .08), rgba(199, 255, 46, 0) 70%), #15161A; box-shadow: inset 0 0 0 1px rgba(199, 255, 46, .22); }
.pw__tile--big .pw__shot { flex: 0 1 46%; }
.pw__tile--big .pw__shot img { object-position: 50% 86%; }
.pw__tile--big .pw__job { -webkit-line-clamp: 7; font-size: clamp(14px, calc(.98vw / var(--z, 1)), 19px); }
.pw__tile--big .pw__sum { font-size: clamp(28px, calc(2.3vw / var(--z, 1)), 52px); color: var(--lime); }
/* второй по сумме: широкая плитка, скрин слева */
.pw__tile--wide { flex-direction: row; }
.pw__tile--wide .pw__shot { flex: 0 0 auto; height: 100%; aspect-ratio: 464 / 352; }
.pw__tile--wide .pw__shot img { object-position: 50% 50%; }
.pw__tile--wide .pw__body { flex: 1 1 auto; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .06); padding: clamp(14px, calc(1.4vw / var(--z, 1)), 26px); }
.pw__tile--wide .pw__job { font-size: clamp(15px, calc(1.1vw / var(--z, 1)), 22px); -webkit-line-clamp: 4; }
.pw__tile--wide .pw__sum { font-size: clamp(24px, calc(1.9vw / var(--z, 1)), 42px); }
/* низкая клетка — скрин не помещается: только подпись и сумма */
@container pwt (max-height: 170px) {
  .pw__tile:not(.pw__tile--wide, .pw__tile--big) .pw__shot { display: none; }
  .pw__tile:not(.pw__tile--wide, .pw__tile--big) .pw__sum { display: inline; color: var(--lime); }
  .pw__body { border-top: 0; }
}
/* планшет: две колонки, заголовок сверху, высота по содержимому */
@media (max-width: 1023px) {
  .pw { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto;
    grid-template-areas: "head head" "big t1" "big t2" "wide wide" "t3 t4" "t5 t6"; gap: 12px; }
  .pw__head { margin-bottom: 16px; padding: 0; }
  .pw__title { font-size: 44px; }
  .pw__tile { container-type: normal; }
  .pw__tile:not(.pw__tile--big) .pw__shot { flex: 0 0 auto; height: 110px; }
  .pw__tile.pw__tile--wide .pw__shot { flex: 0 0 auto; height: 170px; aspect-ratio: 464 / 352; }
  .pw__tile--big .pw__job { -webkit-line-clamp: 9; }
}
/* телефон: строками — скрин слева, подпись и сумма справа; крупный заказ — сверху целиком */
@media (max-width: 767px) {
  .pw { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 10px; }
  .pw__head, .pw__tile { grid-area: auto !important; }
  .pw__title { font-size: 36px; line-height: 40px; }
  .pw__lead { font-size: 16px; line-height: 23px; }
  .pw__tile, .pw__tile--wide { flex-direction: row; border-radius: 14px; }
  .pw__tile:not(.pw__tile--big) .pw__shot, .pw__tile--wide .pw__shot { flex: 0 0 116px; height: auto; min-height: 96px; aspect-ratio: auto; }
  .pw__tile .pw__body, .pw__tile--wide .pw__body { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .06); padding: 10px 12px; }
  .pw__job, .pw__tile--wide .pw__job { font-size: 14px; line-height: 19px; -webkit-line-clamp: 3; }
  .pw__sum, .pw__tile--wide .pw__sum { font-size: 18px; }
  .pw__tile:not(.pw__tile--big, .pw__tile--wide) .pw__sum { display: inline; color: var(--lime); } /* скрин-миниатюра мелкая — сумму пишем текстом */
  .pw__tile:not(.pw__tile--big) .pw__shot img { -webkit-mask-image: none; mask-image: none; object-position: 50% 50%; }
  .pw__tile--big { flex-direction: column; }
  .pw__tile--big .pw__shot { flex: none; height: 190px; }
  .pw__tile--big .pw__body { flex: none; gap: 14px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); padding: 14px 16px 16px; }
  .pw__tile--big .pw__job { font-size: 15px; line-height: 21px; -webkit-line-clamp: 8; }
  .pw__tile--big .pw__sum { font-size: 30px; }
}

/* ---------- #ceiling «Нет зарплаты, но и нет потолка»: лестница дохода во всю ширину кадра. Четыре узкие ступени (учёба, 1-й, 2-й, 3-й месяц)
   растут слева направо, контраст нарастает; пятая — широкий лаймовый столб «после курса» с «100 000 ₽+» тёмным по лайму: он поднимается
   от общей линии до верха кадра и дальше, в поле секции, растворяясь (потолка нет). Заголовок и две строки — в пустом углу над низкими ступенями
   (абсолютом слева сверху, шириной в три узкие колонки). Высота — кадр экрана (ритм css/main.css). Высоты ступеней — доли высоты графика (--h).
   При появлении (js/web-intro.js, data-intro-inc) ступени растут по очереди (transform), суммы проявляются, «100 000» досчитывается.
   Уже 1024 px — столбиком: текст, ступени строками с полосами, лаймовая карточка ---------- */
.ceil { --ceil-h: clamp(440px, calc(min(calc(var(--screen-h, 100vh) - var(--nav-h, 84px)), 1440px) - 2 * var(--section-pad, 80px)), 1080px);
  --cols: repeat(4, minmax(0, 1fr)) minmax(0, 2.3fr); --cg: clamp(10px, calc(1vw / var(--z, 1)), 20px);
  container: ceil / inline-size; position: relative; height: var(--ceil-h); }
.ceil__copy { position: absolute; left: 0; top: 0; z-index: 2; width: calc((100% - 4 * var(--cg)) / 6.3 * 3 + 2 * var(--cg)); }
.ceil__title { margin: 0; font-size: clamp(36px, calc(3.6vw / var(--z, 1)), 92px); line-height: 1.02; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; }
.ceil__lead { max-width: 640px; margin: clamp(12px, calc(1.6vh / var(--z, 1)), 24px) 0 0; font-size: clamp(16px, calc(1.1vw / var(--z, 1)), 24px); line-height: 1.42; color: var(--muted-2); text-wrap: pretty; }
.ceil__next { margin: clamp(10px, calc(1.4vh / var(--z, 1)), 22px) 0 0; font-size: clamp(14px, calc(.95vw / var(--z, 1)), 19px); line-height: 1.4; color: var(--muted-2); }
.ceil__next a { display: inline-block; padding: 4px 0; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.ceil__next a:hover { text-decoration-color: #fff; }
.ceil__next a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.inc { position: relative; height: 100%; margin: 0; }
.inc__row { display: grid; grid-template-columns: var(--cols); grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--cg); height: 100%; margin: 0; padding: 0; list-style: none; }
.inc__step { --i: 0; position: relative; min-width: 0; display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; }
.inc__step:nth-child(2) { --i: 1; }
.inc__step:nth-child(3) { --i: 2; }
.inc__step:nth-child(4) { --i: 3; }
.inc__step:nth-child(5) { --i: 4; }
/* колонка ступени: высота — доля графика; столбик заливает её, сумма стоит над ней */
.inc__col { position: relative; grid-row: 1; align-self: end; height: calc(var(--h, 1) * 100%); }
.inc__bar { position: absolute; inset: 0; display: block; border-radius: 12px 12px 4px 4px; transform-origin: 50% 100%; }
.inc__val { position: absolute; left: 0; bottom: calc(100% + 10px); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inc__cap { grid-row: 2; padding-top: 14px; font-size: clamp(13px, calc(.9vw / var(--z, 1)), 18px); line-height: 1.3; font-weight: 600; text-wrap: balance; }
.inc__cap small { display: block; margin-top: 3px; font-size: .86em; font-weight: 400; color: rgba(255, 255, 255, .42); text-wrap: pretty; }
/* лестница контраста */
.inc__step--study .inc__val { font-size: clamp(13px, calc(.85vw / var(--z, 1)), 17px); font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .45); }
.inc__step--study .inc__bar { border: 1.5px dashed rgba(255, 255, 255, .22); }
.inc__step--study .inc__cap { color: rgba(255, 255, 255, .5); }
.inc__step--m1 .inc__val { font-size: clamp(15px, calc(1.05vw / var(--z, 1)), 22px); color: rgba(255, 255, 255, .58); }
.inc__step--m1 .inc__bar { background: rgba(255, 255, 255, .09); }
.inc__step--m1 .inc__cap { color: rgba(255, 255, 255, .62); }
.inc__step--m2 .inc__val { font-size: clamp(17px, calc(1.3vw / var(--z, 1)), 28px); color: rgba(255, 255, 255, .82); }
.inc__step--m2 .inc__bar { background: linear-gradient(180deg, rgba(184, 163, 255, .42), rgba(184, 163, 255, .14)); }
.inc__step--m2 .inc__cap { color: rgba(255, 255, 255, .78); }
.inc__step--m3 .inc__val { font-size: clamp(19px, calc(1.6vw / var(--z, 1)), 36px); color: #fff; }
.inc__step--m3 .inc__bar { background: linear-gradient(180deg, #B8A3FF, rgba(184, 163, 255, .4)); box-shadow: 0 0 40px -10px rgba(184, 163, 255, .5); }
.inc__step--m3 .inc__cap { color: #fff; }
/* после курса: лаймовый столб от общей линии до верха кадра и дальше — в поле секции, растворяясь; сумма тёмным по лайму наверху кадра */
.inc__step--top .inc__col { height: calc(100% + var(--section-pad, 80px)); }
.inc__step--top .inc__bar { border-radius: 0 0 6px 6px; background: linear-gradient(0deg, #C7FF2E 0, #C7FF2E calc(100% - var(--section-pad, 80px)), rgba(199, 255, 46, 0) 100%); box-shadow: 0 0 80px -20px rgba(199, 255, 46, .45); }
.inc__top { position: absolute; left: 0; right: 0; top: var(--section-pad, 80px); z-index: 1; display: flex; flex-direction: column; margin: 0; padding: clamp(18px, calc(1.8vw / var(--z, 1)), 36px); color: var(--ink); }
.inc__big { font-size: min(clamp(48px, calc(5.4vw / var(--z, 1)), 140px), 5.5cqi); line-height: .92; font-weight: 700; letter-spacing: -.05em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inc__big-cap { margin-top: clamp(10px, calc(1.2vh / var(--z, 1)), 18px); font-size: clamp(17px, calc(1.3vw / var(--z, 1)), 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.inc__note { margin-top: 4px; font-size: clamp(13px, calc(.9vw / var(--z, 1)), 18px); line-height: 1.35; color: rgba(19, 20, 23, .62); }
.inc__step--top .inc__cap { color: var(--lime); }
.inc__step--top .inc__cap small { color: rgba(199, 255, 46, .6); }
/* js взводит фигуру (.is-armed): столбики в ноль, суммы прозрачные; .is-go — растут по очереди, лаймовый последним, суммы проявляются вслед */
.inc.is-armed:not(.is-go) .inc__bar { transform: scaleY(0); }
.inc.is-armed:not(.is-go) .inc__val, .inc.is-armed:not(.is-go) .inc__top { opacity: 0; }
.inc.is-go .inc__bar { transition: transform .9s var(--ease) calc(var(--i) * .14s); }
.inc.is-go .inc__val { transition: opacity .4s calc(var(--i) * .14s + .55s); }
.inc.is-go .inc__step--top .inc__bar { transition: transform 1.4s cubic-bezier(.5, 0, .2, 1) .6s; }
.inc.is-go .inc__top { transition: opacity .5s 1.3s; }
/* низкий кадр (ноутбуки 1280×720, 1366×768): текст мельче, чтобы не наезжать на сумму второй ступени */
@media (min-width: 1024px) and (max-height: 780px) {
  .ceil__title { font-size: min(calc(3.6vw / var(--z, 1)), 40px); }
  .ceil__lead { margin-top: 10px; font-size: 15px; }
  .ceil__next { margin-top: 8px; font-size: 14px; }
}
/* планшет и телефон: текст сверху, ступени строками — подпись слева, сумма справа, под ними полоса; «после курса» — лаймовая карточка */
@media (max-width: 1023px) {
  .ceil { height: auto; }
  .ceil__copy { position: static; width: auto; max-width: 640px; }
  .ceil__title { font-size: 40px; line-height: 44px; letter-spacing: -.035em; }
  .inc { height: auto; margin-top: 28px; }
  .inc__row { display: flex; flex-direction: column; gap: 16px; height: auto; }
  .inc__step { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; grid-template-areas: "cap val" "bar bar"; align-items: end; column-gap: 12px; row-gap: 6px; }
  .inc__col { display: contents; }
  .inc__val { position: static; grid-area: val; text-align: right; }
  .inc__cap { grid-area: cap; padding: 0; font-size: 15px; }
  .inc__cap small { display: inline; margin-left: 4px; }
  .inc__bar { position: static; grid-area: bar; width: calc(var(--h) * 100% / .62 * .8); height: 10px; border-radius: 5px; transform-origin: 0 50%; }
  .inc__step--study .inc__bar { border-width: 1px; }
  .inc.is-armed:not(.is-go) .inc__bar { transform: scaleX(0); }
  .inc__step--top { display: flex; flex-direction: column; align-items: stretch; margin-top: 8px; border-radius: 22px; background: var(--lime); box-shadow: 0 30px 60px -30px rgba(199, 255, 46, .5); }
  .inc__step--top .inc__bar { display: none; }
  .inc__top { position: static; padding: 22px 22px 6px; }
  .inc__big { font-size: clamp(44px, calc(12vw / var(--z, 1)), 72px); }
  .inc__big-cap { font-size: 18px; }
  .inc__step--top .inc__cap { padding: 0 22px 20px; color: var(--ink); }
  .inc__step--top .inc__cap small { color: rgba(19, 20, 23, .55); }
}
@media (max-width: 767px) {
  .ceil__title { font-size: 32px; line-height: 36px; }
  .ceil__lead { font-size: 16px; line-height: 23px; }
}

/* ---------- Без движения: сцена «Кто такой» — готовый сайт, переписка целиком, столбики в полный рост (js не взводит сцены) ---------- */
@media (prefers-reduced-motion: reduce) {
  .fchat__feed, .desk__win { transition: none; }
  /* общее правило main.css даёт всем transition-duration .01ms при property all: кегль ленты «переезжал» бы, и подбор --fs мерил старый размер */
  .fchat__feed *, .desk__win * { transition-property: none; }
}

/* ---------- Широкие экраны (≥1800): шапка чата крупнее (остальные размеры экранов тянутся clamp() от ширины и высоты кадра) ---------- */
@media (min-width: 1800px) {
  .fphone .fchat__head { padding: 50px 22px 12px; }
  .fphone .fchat__ava { width: 42px; height: 42px; font-size: 17px; }
  .fchat__who b { font-size: 17px; line-height: 22px; }
  .fchat__who small { font-size: 13.5px; }
  .fchat__feed { --fs: 17.5px; }
}
@media (max-width: 380px) {
  .pw__lead { font-size: 15px; line-height: 22px; }
}