/* Aroken — /web, «Кому подойдёт курс» — три экрана, на каждом один смысл (владелец 22.09: «1 блок = 1 смысл», текста меньше).
   1) #fit — четыре ситуации со старого сайта на бумажных карточках: цель заголовком, боль короткой репликой (≤ 3 строк), ниже у каждой
      своя живая сцена во всю ширину карточки до нижнего края (.fitw-art, одна высота и одни поля у всех четырёх). js/web-fit.js ставит .is-on,
      когда карточка на экране, — сцена играет один раз и остаётся на финальном кадре. Статичные стили = финальный кадр, анимации идут
      с fill-mode both, поэтому при prefers-reduced-motion достаточно выключить движение.
      · «Сменить профессию» — табло смен: «смены по 8–12 ч» (цифры из цитаты) зачёркивается, плашки дней перещёлкиваются на 2–3 ч,
        суббота и воскресенье пустеют (владелец 22.09: 2–3 часа в день, два выходных → 3 месяца);
      · «Убрать потолок в доходе» — месяц за месяцем столбики упираются в пунктир «потолок», лаймовый давит, линия отламывается и улетает,
        столбик уходит вверх за край сцены;
      · «Зарабатывать из дома» — утро по цитате: солнце поднимается, небо из рассветного становится дневным, по полосе дня по очереди
        появляются тарелка с яичницей, чашка с паром, маршрут прогулки и последним — ноутбук с курсором;
      · «Работать на себя» — пульт: доход крупно и рычаг заказов (настоящий range: мышь, палец, стрелки). При появлении проезжает сам
        от 100к до 150к (цифры из цитаты), потом слушается только человека.
   2) #fit-need «Что нужно, чтобы начать» — крупно две строки: «Не нужно» (опыт в IT, английский, математика — коралловой чертой
      зачёркиваются по очереди) и «Нужно» (ноутбук, интернет, 2–3 часа в день — лаймовые галочки рисуются штрихом); пояснения — одной
      строкой под ними; ниже заявка — «Это про меня» (вторичная: Primary на экране — у дока) и строка гарантии (экраном — #guarantee у цены);
      справа старый ноутбук на CSS (толстая рамка, заклеенная камера, наклейка, печатается первая строка кода).
   Общий ритм секций (отступы, высота экрана) — в css/main.css, здесь только содержимое. */

/* ---------- 1. Сетка и карточки ---------- */
.fitw { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fitw-card { --pad: 26px; --art-h: 196px; position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--pad) var(--pad) 0; border-radius: 24px; overflow: hidden; isolation: isolate; color: var(--ink); background: linear-gradient(112deg, var(--paper-1) 2%, var(--paper-2) 55%, var(--paper-3) 96%); box-shadow: var(--shadow-tile); }
.fitw-card__title { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.018em; text-wrap: balance; }
.fitw-card__pain { margin: 10px 0 24px; font-size: 15px; line-height: 22px; color: rgba(23, 24, 28, .66); text-wrap: pretty; }
/* сцена: во всю ширину карточки и до нижнего края; высота и поля одни на все четыре */
.fitw-art { position: relative; flex: none; height: var(--art-h); margin: auto calc(-1 * var(--pad)) 0; padding: 0 var(--pad); overflow: hidden; container-type: inline-size; }

/* до появления сцены — без переходов: начальный кадр встаёт мгновенно (иначе обратный переход с задержкой не успевает до .is-on) */
.fitw-js .fitw-card:not(.is-on) *, .fitw-js .fitw-card:not(.is-on) *::before, .fitw-js .fitw-card:not(.is-on) *::after,
.fitw-js .fitw-need:not(.is-on) *, .fitw-js .fitw-need:not(.is-on) *::before, .fitw-js .fitw-need:not(.is-on) *::after { transition: none !important; }

/* ---------- 1. Табло смен ---------- */
.fitw-art--flap { display: flex; flex-direction: column; justify-content: center; gap: 16px; background: var(--graphite); color: #fff; }
.fitw-flap__head { display: grid; justify-items: start; gap: 2px; font-size: 15px; line-height: 21px; font-weight: 600; letter-spacing: -.01em; }
.fitw-flap__was { position: relative; text-decoration: none; color: rgba(255, 255, 255, .88); transition: color .4s var(--ease) 1.55s; }
.fitw-flap__was::after { content: ""; position: absolute; left: -3px; right: -5px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--coral); transform: rotate(-1.6deg); transform-origin: left center; transition: clip-path .45s var(--ease) .35s; }
.fitw-flap__now { color: var(--lime); transition: opacity .4s var(--ease) 1.6s, transform .55s var(--spring) 1.6s; }
.fitw-flap__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.fitw-flap__week li { display: grid; gap: 7px; text-align: center; }
.fitw-flap__week i { font: 500 11px/14px var(--font); font-style: normal; color: rgba(255, 255, 255, .42); transition: color .3s var(--ease); transition-delay: calc(1.05s + var(--i) * .09s); }
.fitw-flap__week .is-off i { color: var(--lime); }
/* плашка табло: две грани в одной клетке; старая уходит поворотом вверх, новая падает на её место, посередине — шов */
.fitw-flap__week b { position: relative; display: block; height: 40px; perspective: 180px; }
.fitw-flap__week b span:first-child::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .4); }
.fitw-flap__week b span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 7px; font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; backface-visibility: hidden; }
.fitw-flap__week b span:first-child { background: linear-gradient(180deg, #2C2E35 50%, #25272D 50%); color: rgba(255, 255, 255, .86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transform: rotateX(-90deg); transition: transform .2s ease-in; transition-delay: calc(.85s + var(--i) * .09s); }
.fitw-flap__week b span:last-child { background: var(--lime); color: var(--graphite); transition: transform .32s var(--spring); transition-delay: calc(1.05s + var(--i) * .09s); }
.fitw-flap__week .is-off b span:last-child { background: none; border: 1.5px dashed rgba(199, 255, 46, .5); }
/* до появления: строка не зачёркнута, новой нет, на плашках — смены */
.fitw-js .fitw-card:not(.is-on) .fitw-flap__was { transition-delay: 0s; }
.fitw-js .fitw-card:not(.is-on) .fitw-flap__was::after { clip-path: inset(0 100% 0 0); }
.fitw-js .fitw-card:not(.is-on) .fitw-flap__now { opacity: 0; transform: translateY(8px); }
.fitw-js .fitw-card:not(.is-on) .fitw-flap__week i { color: rgba(255, 255, 255, .42); }
.fitw-js .fitw-card:not(.is-on) .fitw-flap__week b span:first-child { transform: none; }
.fitw-js .fitw-card:not(.is-on) .fitw-flap__week b span:last-child { transform: rotateX(90deg); }
.is-on .fitw-flap__was { color: rgba(255, 255, 255, .5); }
.fitw-flap__was::after { clip-path: inset(0 0 0 0); }

/* ---------- 2. Потолок ---------- */
/* пять столбиков по сетке; --ceil — высота потолка от низа сцены (px: сцена фиксированной высоты) */
.fitw-cap { --ceil: 84px; position: absolute; inset: 22px var(--pad) 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: 10px; align-items: end; }
.fitw-cap__bar { grid-row: 1; height: var(--ceil); border-radius: 9px 9px 0 0; background: linear-gradient(180deg, rgba(23, 24, 28, .24), rgba(23, 24, 28, .13)); transform-origin: bottom; }
/* пятая дорожка на всю высоту сцены с маской сверху: лаймовый столбик растворяется у верхнего края — «дальше, за край» */
.fitw-cap__lane { grid-row: 1; grid-column: 5; align-self: stretch; position: relative; margin-top: -22px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 46px); mask-image: linear-gradient(180deg, transparent, #000 46px); }
.fitw-cap__up { position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% + 30px); background: linear-gradient(180deg, var(--lime-3), var(--lime) 40%, #B7EA1E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); clip-path: inset(0 0 0 0 round 9px 9px 0 0); }
.fitw-cap__line { position: absolute; bottom: var(--ceil); z-index: 2; height: 0; margin-bottom: -1px; border-top: 2px dashed var(--coral); }
.fitw-cap__line--l { left: calc(-1 * var(--pad)); right: calc(20% - 3px); transform-origin: right center; }
.fitw-cap__line--r { left: calc(80% + 3px); right: calc(-1 * var(--pad)); transform-origin: left center; opacity: 0; transform: translate(34px, -86px) rotate(-48deg); }
.fitw-cap__label { position: absolute; left: 0; bottom: calc(var(--ceil) + 7px); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .01em; color: var(--coral); }
.fitw-js .fitw-card:not(.is-on) .fitw-cap__bar { transform: scaleY(0); }
.fitw-js .fitw-card:not(.is-on) .fitw-cap__up { clip-path: inset(100% 0 0 0 round 9px 9px 0 0); }
.fitw-js .fitw-card:not(.is-on) .fitw-cap__line--r { opacity: 1; transform: none; }
/* серые месяцы поднимаются и бьются в потолок; лаймовый поднимается, давит (правый кусок линии приподнимается), линия лопается */
.is-on .fitw-cap__bar { animation: fitw-hit .75s var(--ease) calc(.25s + var(--i) * .14s) both; }
.is-on .fitw-cap__up { animation: fitw-up 1.9s var(--ease) 1.05s both; }
.is-on .fitw-cap__line--r { animation: fitw-snap 1.15s cubic-bezier(.4, 0, .7, .5) 1.62s both; }
.is-on .fitw-cap__line--l { animation: fitw-jolt .45s ease 2.02s; }
@keyframes fitw-hit { 0% { transform: scaleY(0); } 62% { transform: scaleY(1.05); } 80% { transform: scaleY(.97); } 100% { transform: scaleY(1); } }
/* столбик растёт снизу: верхняя граница клипа — на потолке, чуть выше (давит), потом до верха */
@keyframes fitw-up { 0% { clip-path: inset(100% 0 0 0 round 9px 9px 0 0); } 30% { clip-path: inset(calc(100% - var(--ceil)) 0 0 0 round 9px 9px 0 0); } 44% { clip-path: inset(calc(100% - var(--ceil) - 7px) 0 0 0 round 9px 9px 0 0); } 52% { clip-path: inset(calc(100% - var(--ceil) - 8px) 0 0 0 round 9px 9px 0 0); } 100% { clip-path: inset(0 0 0 0 round 9px 9px 0 0); } }
@keyframes fitw-snap { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: rotate(-5deg); } 36% { opacity: 1; transform: rotate(-6deg); } 100% { opacity: 0; transform: translate(34px, -86px) rotate(-48deg); } }
@keyframes fitw-jolt { 0%, 100% { transform: none; } 30% { transform: rotate(-1.2deg); } 65% { transform: rotate(.5deg); } }

/* ---------- 3. Утро ---------- */
.fitw-art--day { background: linear-gradient(180deg, #FFD6C2 0%, #FDE7DB 52%, #F7EFE6 100%); }
.fitw-day__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #BDE8FF 0%, #E2F4FF 52%, #F4F1EA 100%); transition: opacity 3s linear .2s; }
/* солнце: по X едет равномерно, по Y — быстро вверх и плавно выходит на высоту, вместе — дуга */
.fitw-day__sun { position: absolute; top: 12px; left: 0; width: 30px; height: 30px; transform: translateX(calc(74cqw + var(--pad) - 15px)); transition: transform 3.2s linear .1s; }
.fitw-day__sun i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FFFDF2, #FFEFB8 58%, #FFDC8A); box-shadow: 0 0 0 8px rgba(255, 226, 150, .28), 0 0 42px rgba(255, 214, 120, .7); transition: transform 3.2s cubic-bezier(.1, .6, .3, 1) .1s, opacity .6s ease .1s; }
.fitw-js .fitw-card:not(.is-on) .fitw-day__sky { opacity: 0; transition-delay: 0s; }
.fitw-js .fitw-card:not(.is-on) .fitw-day__sun { transform: translateX(calc(6cqw + var(--pad) - 15px)); }
.fitw-js .fitw-card:not(.is-on) .fitw-day__sun i { opacity: 0; transform: translateY(58px) scale(.85); }
/* полоса дня: четыре остановки; лаймовая заливка ползёт слева направо, у каждой остановки появляется её предмет */
.fitw-day__stops { --t: .45s; --step: .85s; position: absolute; left: 10px; right: 10px; bottom: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.fitw-day__stops::before, .fitw-day__stops::after { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 59px; height: 3px; border-radius: 2px; }
.fitw-day__stops::before { background: rgba(23, 24, 28, .12); }
.fitw-day__stops::after { background: var(--lime); box-shadow: 0 0 10px rgba(199, 255, 46, .55); transform-origin: left center; transition: transform calc(var(--step) * 3) linear var(--t); }
.fitw-day__stops li { position: relative; display: grid; grid-template-rows: 50px 12px auto; justify-items: center; align-items: end; row-gap: 4px; }
/* кружок остановки на линии */
.fitw-day__stops li::before { content: ""; grid-row: 2; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--paper-1); box-shadow: inset 0 0 0 2px rgba(23, 24, 28, .3); transition: background-color .2s, box-shadow .2s; transition-delay: calc(var(--t) + var(--i) * var(--step)); }
.is-on .fitw-day__stops li::before { background: var(--lime); box-shadow: inset 0 0 0 2px var(--graphite); }
.fitw-day__cap { grid-row: 3; margin-top: 2px; font-size: 12px; line-height: 16px; font-weight: 500; color: rgba(23, 24, 28, .6); white-space: nowrap; transition: color .25s; transition-delay: calc(var(--t) + var(--i) * var(--step)); }
.is-on .fitw-day__cap { color: var(--ink); }
.fitw-day__stops li:last-child .fitw-day__cap { font-weight: 700; }
.fitw-day__obj { position: relative; grid-row: 1; align-self: end; transition: opacity .3s var(--ease), transform .5s var(--spring); transition-delay: calc(var(--t) + var(--i) * var(--step)); }
.fitw-js .fitw-card:not(.is-on) .fitw-day__stops::after { transform: scaleX(0); }
.fitw-js .fitw-card:not(.is-on) .fitw-day__obj { opacity: 0; transform: translateY(10px) scale(.7); }
.fitw-js .fitw-card:not(.is-on) .fitw-day__stops li::before, .fitw-js .fitw-card:not(.is-on) .fitw-day__cap, .fitw-js .fitw-card:not(.is-on) .fitw-day__obj { transition-delay: 0s; }
/* тарелка с яичницей (вид сверху-сбоку) */
.fitw-day__plate { width: 58px; height: 21px; margin-bottom: 1px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #EFE9DE, 0 3px 0 rgba(23, 24, 28, .1); }
.fitw-day__plate i { position: absolute; left: 50%; top: 4px; width: 32px; height: 13px; margin-left: -17px; border-radius: 48% 55% 50% 46%; background: #fff; box-shadow: 0 1px 1px rgba(23, 24, 28, .12); }
.fitw-day__plate i::after { content: ""; position: absolute; left: 11px; top: 2px; width: 11px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE59A, #FFB524 70%); }
/* кружка с паром */
.fitw-day__cup { width: 28px; height: 25px; margin-right: 8px; border-radius: 4px 4px 11px 11px; background: linear-gradient(90deg, #2E3038, var(--graphite)); }
.fitw-day__cup::after { content: ""; position: absolute; right: -10px; top: 5px; width: 12px; height: 12px; border: 3.5px solid var(--graphite); border-left: 0; border-radius: 0 8px 8px 0; }
.fitw-day__cup::before { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 3px; border-radius: 2px; background: #7A4B2A; }
.fitw-day__cup i { position: absolute; bottom: 29px; width: 3px; height: 14px; border-radius: 3px; background: rgba(23, 24, 28, .22); animation: fitw-steam 2.4s ease-in-out infinite; }
.fitw-day__cup i:first-child { left: 7px; }
.fitw-day__cup i + i { left: 17px; animation-delay: -1.2s; }
@keyframes fitw-steam { 0% { opacity: 0; transform: translateY(4px) scaleY(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px) translateX(2px) scaleY(1.1) skewX(-12deg); } }
/* маршрут прогулки: пунктир проявляется слева направо */
.fitw-day__walk { width: 60px; height: 38px; margin-bottom: 2px; }
.fitw-day__walk svg { width: 60px; height: 38px; overflow: visible; }
.fitw-day__walk path { fill: none; stroke: rgba(23, 24, 28, .55); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: .001 .09; }
.fitw-day__walk circle { fill: var(--graphite); }
.fitw-day__walk circle + circle { fill: var(--coral); }
.fitw-day__walk svg { clip-path: inset(-4px -4px -4px -4px); transition: clip-path .8s var(--ease); transition-delay: calc(var(--t) + 2 * var(--step) + .1s); }
.fitw-js .fitw-card:not(.is-on) .fitw-day__walk svg { clip-path: inset(-4px 100% -4px -4px); transition-delay: 0s; }
/* ноутбук сбоку: крышка открывается, на экране лаймовый курсор */
.fitw-day__lap { width: 56px; height: 38px; }
.fitw-day__lap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 1px 1px 3px 3px; background: var(--graphite); }
.fitw-day__lap i { position: absolute; left: 7px; right: 7px; bottom: 5px; height: 32px; border-radius: 4px 4px 1px 1px; background: var(--graphite); box-shadow: 0 0 16px rgba(199, 255, 46, .35); transform-origin: 50% 100%; transition: transform .55s var(--spring); transition-delay: calc(var(--t) + 3 * var(--step) + .15s); }
.fitw-day__lap i::before { content: ""; position: absolute; left: 7px; top: 9px; width: 16px; height: 2px; border-radius: 1px; background: rgba(199, 255, 46, .7); box-shadow: 0 5px 0 rgba(255, 255, 255, .28); }
.fitw-day__lap i::after { content: ""; position: absolute; left: 26px; top: 7px; width: 2px; height: 9px; background: var(--lime); animation: fitw-caret 1s steps(2, start) infinite; }
.fitw-js .fitw-card:not(.is-on) .fitw-day__lap i { transform: perspective(60px) rotateX(-80deg); transition-delay: 0s; }
@keyframes fitw-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- 4. Пульт заказов ---------- */
.fitw-art--lever { display: flex; flex-direction: column; justify-content: center; background: var(--graphite); color: #fff; }
.fitw-lever__sum { display: flex; align-items: baseline; gap: 12px; }
.fitw-lever__sum b { display: inline-block; font-size: 46px; line-height: 50px; font-weight: 700; letter-spacing: -.04em; color: var(--lime); font-variant-numeric: tabular-nums; transform-origin: 0 80%; }
.fitw-lever__sum b.is-tick { animation: fitw-tick .3s var(--spring); }
.fitw-lever__sum b { letter-spacing: .02em; } /* шесть знаков ₽: горят по числу заказов на рычаге, остальные тусклые — без сумм (CRO-аудит 22.09, п. 10) */
.fitw-lever__sum b span { font-size: inherit; line-height: inherit; color: inherit; }
.fitw-lever__sum b .is-off { color: rgba(255, 255, 255, .14); }
.fitw-lever__sum span { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .5); }
@keyframes fitw-tick { 40% { transform: scale(1.045); } }
/* рельс 44 px под палец; поверх — прозрачный range с ползунком ровно под ручку (40 px), чтобы клик попадал туда же */
.fitw-lever__rail { --p: 0; position: relative; height: 44px; margin-top: 12px; container-type: inline-size; }
.fitw-lever__track { position: absolute; left: 0; right: 0; top: 16px; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55); }
.fitw-lever__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * (100% - 40px) + 20px); background: linear-gradient(90deg, rgba(199, 255, 46, .45), var(--lime)); box-shadow: 0 0 14px rgba(199, 255, 46, .5); transition: width .28s var(--ease); }
.fitw-lever__ticks { position: absolute; left: 19px; right: 19px; bottom: -2px; display: flex; justify-content: space-between; }
.fitw-lever__ticks i { width: 2px; height: 6px; border-radius: 1px; background: rgba(255, 255, 255, .2); transition: background-color .2s; }
.fitw-lever__ticks i.is-lit { background: var(--lime); }
.fitw-lever__knob { position: absolute; top: 5px; left: 0; transform: translateX(calc(var(--p) * (100cqw - 40px))); width: 40px; height: 34px; border-radius: 10px; background: linear-gradient(180deg, var(--paper-1), #DDD6C9); box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .8), inset 0 -2px 0 rgba(23, 24, 28, .12); transition: transform .28s var(--spring), box-shadow .2s; pointer-events: none; }
.fitw-lever__knob::before { content: ""; position: absolute; left: 13px; top: 10px; width: 14px; height: 13px; background: repeating-linear-gradient(90deg, rgba(23, 24, 28, .4) 0 2px, transparent 2px 6px); }
.fitw-lever__knob.is-hint { animation: fitw-hint 1.3s ease-out 2; }
@keyframes fitw-hint { 0% { box-shadow: 0 0 0 0 rgba(199, 255, 46, .7), 0 8px 16px -6px rgba(0, 0, 0, .8); } 100% { box-shadow: 0 0 0 14px rgba(199, 255, 46, 0), 0 8px 16px -6px rgba(0, 0, 0, .8); } }
.fitw-lever__range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; -webkit-appearance: none; appearance: none; background: none; touch-action: pan-y; }
.fitw-lever__range:active { cursor: grabbing; }
.fitw-lever__range::-webkit-slider-runnable-track { height: 44px; background: none; }
.fitw-lever__range::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 44px; border: 0; background: none; }
.fitw-lever__range::-moz-range-track { height: 44px; background: none; }
.fitw-lever__range::-moz-range-thumb { width: 40px; height: 44px; border: 0; border-radius: 0; background: none; }
.fitw-lever__rail:hover .fitw-lever__knob { box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .85), inset 0 -2px 0 rgba(23, 24, 28, .12); }
.fitw-lever__rail:has(:focus-visible) .fitw-lever__knob { box-shadow: 0 0 0 3px var(--graphite), 0 0 0 5px var(--lime); }
.fitw-lever__ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .45); }

/* ---------- 2. Что нужно, чтобы начать ---------- */
/* слева заголовок и две строки крупно, справа ноутбук; «не нужно» — коралловая черта по слову, «нужно» — лаймовая галочка штрихом */
.fitw-need { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 64px; }
.fitw-need__copy { min-width: 0; }
.fitw-need__row { margin-top: 40px; }
.fitw-need__row + .fitw-need__row { margin-top: 32px; }
.fitw-need__title { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.fitw-need--no .fitw-need__title { color: var(--coral); }
.fitw-need--yes .fitw-need__title { color: var(--lime); }
.fitw-need__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 40px; margin: 10px 0 0; padding: 0; list-style: none; }
.fitw-need__list li { display: inline-flex; align-items: center; gap: 12px; }
.fitw-need__list b { position: relative; font-size: 44px; line-height: 54px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; color: #fff; }
/* зачёркивание: черта рисуется слева направо, слово гаснет следом — по очереди */
.fitw-need--no b { color: rgba(255, 255, 255, .42); transition: color .4s var(--ease) calc(.55s + var(--i) * .28s); }
.fitw-need--no b::after { content: ""; position: absolute; left: -4px; right: -6px; top: 53%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--coral); transform: rotate(-2.5deg); clip-path: inset(-2px 0 -2px 0); transition: clip-path .45s var(--ease) calc(.3s + var(--i) * .28s); }
.fitw-js .fitw-need:not(.is-on) .fitw-need--no b { color: #fff; }
.fitw-js .fitw-need:not(.is-on) .fitw-need--no b::after { clip-path: inset(-2px 100% -2px 0); }
/* галочки — штрихом, после зачёркиваний */
.fitw-mark { flex: none; width: 36px; height: 36px; fill: none; stroke: var(--lime); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fitw-mark path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .4s var(--ease); transition-delay: calc(.4s + var(--i) * .24s); }
.fitw-js .fitw-need:not(.is-on) .fitw-mark path { stroke-dashoffset: 1; transition-delay: 0s; }
.fitw-need__note { max-width: 36em; margin: 32px 0 0; font-size: 18px; line-height: 28px; color: var(--muted-2); text-wrap: pretty; }
/* заявка: вторичная кнопка (Primary на экране — у дока внизу) и рядом строка гарантии с лаймовой галочкой */
.fitw-need__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.fitw-need__deal { position: relative; max-width: 22em; margin: 0; padding-left: 40px; font-size: 16px; line-height: 23px; color: rgba(255, 255, 255, .72); text-wrap: balance; }
.fitw-need__deal b { font-weight: 600; color: #fff; }
.fitw-need__deal::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: rgb(var(--accent-rgb)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3 8.6 13.3 14.5 7' fill='none' stroke='%23131417' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); }

/* Ноутбук анфас — аккуратный CSS-предмет, весь в своей колонке (раньше корпус в 3D-наклоне был шире своей коробки: на 1920 вылезал
   за правый край контейнера, клавиатура косила, экран с «1 |» пустовал). Размер — одна переменная --lap-w, всё внутри в em
   (1em = --lap-w / 26), поэтому предмет масштабируется целиком. На экране печатается первая строка кода, под ней появляется то,
   что она рисует, — заголовок страницы. За ноутбуком — лаймовое свечение, чтобы графит не терялся на тёмном фоне */
.fitw-lap { --lap-w: 400px; position: relative; justify-self: end; width: var(--lap-w); max-width: 100%; }
.fitw-lap::before { content: ""; position: absolute; inset: -14% 0 -8% -18%; /* вправо — не дальше края контейнера: иначе горизонтальная прокрутка */ z-index: -1; background: radial-gradient(50% 50% at 50% 52%, rgba(199, 255, 46, .12), rgba(199, 255, 46, 0) 72%); pointer-events: none; }
.fitw-pc { position: relative; font-size: calc(var(--lap-w) / 26); }
.fitw-pc::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -.9em; height: 1.4em; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 70%); z-index: -1; }
.fitw-pc__lid { position: relative; margin: 0 1.15em; aspect-ratio: 16 / 10.4; border-radius: .85em .85em .2em .2em; background: linear-gradient(180deg, #34363F, #1F2127); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.fitw-pc__cam { position: absolute; top: .36em; left: 50%; width: .3em; height: .3em; margin-left: -.15em; border-radius: 50%; background: #0B0C10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.fitw-pc__tape { position: absolute; z-index: 1; top: .16em; left: 50%; width: 1.25em; height: .62em; margin-left: -.62em; border-radius: .06em; background: rgba(249, 246, 239, .84); box-shadow: 0 1px 1px rgba(0, 0, 0, .35); transform: rotate(-7deg); }
.fitw-pc__screen { position: absolute; inset: 1.05em .75em .95em; display: flex; flex-direction: column; border-radius: .28em; background: #0B0C10; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.fitw-pc__bar { flex: none; display: flex; align-items: center; gap: .3em; height: 1.35em; padding: 0 .6em; background: rgba(255, 255, 255, .05); }
.fitw-pc__bar i { width: .34em; height: .34em; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.fitw-pc__file { margin-left: .5em; font: 500 .6em/1 var(--mono); color: rgba(236, 238, 242, .5); }
.fitw-pc__batt { position: relative; margin-left: auto; width: .9em; height: .46em; border: 1px solid rgba(255, 255, 255, .38); border-radius: .12em; }
.fitw-pc__batt::before { content: ""; position: absolute; left: 1px; top: 1px; bottom: 1px; width: 22%; background: var(--coral); }
.fitw-pc__batt::after { content: ""; position: absolute; right: -.2em; top: 25%; width: .12em; height: 50%; background: rgba(255, 255, 255, .38); }
.fitw-pc__code { flex: none; display: flex; gap: .6em; margin: 0; padding: .75em .8em 0; font: 500 max(.78em, 10px)/1.6 var(--mono); color: rgba(236, 238, 242, .95); }
.fitw-pc__code .t { color: rgba(115, 214, 255, .85); }
.fitw-pc__gut { color: rgba(140, 143, 150, .8); font-weight: 400; }
.fitw-pc__ln { display: inline-block; width: 24ch; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: top; border-right: 2px solid var(--lime); animation: fitw-type-caret 1s steps(2, start) infinite; }
.fitw-js .fitw-need:not(.is-on) .fitw-pc__ln { width: 0; }
.is-on .fitw-pc__ln { animation: fitw-type 1.7s steps(24, end) 1.9s both, fitw-type-caret 1s steps(2, start) infinite; }
@keyframes fitw-type { from { width: 0; } to { width: 24ch; } }
@keyframes fitw-type-caret { 0%, 100% { border-color: var(--lime); } 50% { border-color: transparent; } }
/* что нарисовала строка: страница без единой строчки CSS — белый лист и заголовок шрифтом браузера по умолчанию (Times, жирный),
   как у каждого в первый день. Появляется, когда строка допечатана */
.fitw-pc__view { flex: 1 1 auto; margin: .7em .8em .8em; padding: .45em .55em; border-radius: .22em; background: #fff; color: #000; }
.fitw-pc__h1 { display: block; font: 700 max(1.6em, 17px)/1.15 "Times New Roman", Times, serif; letter-spacing: 0; }
.fitw-js .fitw-need:not(.is-on) .fitw-pc__view { opacity: 0; }
.is-on .fitw-pc__view { animation: fitw-view .5s var(--ease) 3.7s both; }
@keyframes fitw-view { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
/* корпус: край подставки чуть шире крышки, выемка под палец, наклейка с логотипом (уголок потёрт) */
.fitw-pc__base { position: relative; height: 1.45em; margin-top: -1px; border-radius: .12em .12em .9em .9em / .12em .12em .75em .75em; background: linear-gradient(180deg, #454852 0, #2C2E36 18%, #1E2026 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 -.8em 2em -.6em rgba(199, 255, 46, .1); }
.fitw-pc__pad { position: absolute; top: 0; left: 50%; width: 17%; height: .38em; margin-left: -8.5%; border-radius: 0 0 .4em .4em; background: rgba(0, 0, 0, .38); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); }
.fitw-pc__sticker { position: absolute; right: 9%; top: 50%; width: 1.1em; height: 1.1em; margin-top: -.55em; border-radius: .3em; background: var(--lime); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); transform: rotate(-12deg); clip-path: polygon(0 0, 100% 0, 100% 74%, 80% 100%, 0 100%); }
.fitw-pc__sticker::after { content: ""; position: absolute; inset: .2em; background: var(--graphite); -webkit-mask: url("../assets/img/logo.svg") center / contain no-repeat; mask: url("../assets/img/logo.svg") center / contain no-repeat; }

/* ---------- Широкий экран (владелец смотрит 1920×1080): блок заполняет кадр — заголовки, сцены и списки крупнее ---------- */
@media (min-width: 1800px) {
  #fit .h2--lg, #fit-need .h2--lg { font-size: 44px; line-height: 50px; letter-spacing: -.03em; }
  #fit .section__lead { margin-top: 16px; font-size: 20px; line-height: 30px; }
  .fitw { margin-top: 56px; gap: 24px; }
  .fitw-card { --pad: 30px; --art-h: 284px; }
  .fitw-card__title { font-size: 25px; line-height: 31px; }
  .fitw-card__pain { margin: 12px 0 26px; font-size: 17px; line-height: 25px; }
  .fitw-flap__head { font-size: 16px; line-height: 22px; }
  .fitw-flap__week { gap: 6px; }
  .fitw-flap__week b { height: 46px; }
  .fitw-flap__week b span { font-size: 13px; }
  .fitw-cap { --ceil: 100px; }
  .fitw-day__cap { font-size: 13px; }
  .fitw-lever__sum b { font-size: 56px; line-height: 60px; }
  .fitw-need { column-gap: 96px; }
  .fitw-need__row { margin-top: 48px; }
  .fitw-need__row + .fitw-need__row { margin-top: 36px; }
  .fitw-need__title { font-size: 19px; line-height: 26px; }
  .fitw-need__list { gap: 8px 40px; margin-top: 12px; }
  .fitw-need__list b { font-size: 54px; line-height: 64px; }
  .fitw-need--no b::after { height: 5px; margin-top: -2.5px; }
  .fitw-mark { width: 42px; height: 42px; }
  .fitw-need__note { margin-top: 40px; font-size: 20px; line-height: 30px; }
  .fitw-need__cta { margin-top: 40px; }
  .fitw-need__cta .who-btn { height: 56px; gap: 12px; padding: 0 12px 0 24px; font-size: 17px; }
  .fitw-need__cta .who-btn__ico { width: 34px; height: 34px; }
  .fitw-need__deal { font-size: 17px; line-height: 25px; }
  .fitw-lap { --lap-w: 450px; }
}
@media (min-width: 1440px) and (max-width: 1799px) {
  .fitw-card { --art-h: 212px; }
  .fitw-card__title { font-size: 23px; line-height: 29px; }
  .fitw-card__pain { font-size: 16px; line-height: 23px; }
}

/* ---------- Узкие четыре колонки (1280–1439: карточки 280–340 px) ---------- */
@media (min-width: 1280px) and (max-width: 1439px) {
  .fitw-card { --pad: 22px; }
  .fitw-card__pain { font-size: 14px; line-height: 21px; }
  .fitw-flap__week { gap: 4px; }
  .fitw-flap__week b span { font-size: 11px; letter-spacing: -.04em; }
  .fitw-flap__head { font-size: 14px; line-height: 20px; }
  .fitw-day__stops { left: 4px; right: 4px; }
  .fitw-day__cap { font-size: 11px; }
  .fitw-lever__sum b { font-size: 40px; line-height: 44px; }
}
@media (max-width: 1439px) {
  .fitw-need { column-gap: 48px; }
  .fitw-need__list b { font-size: 38px; line-height: 48px; }
  .fitw-mark { width: 32px; height: 32px; }
  .fitw-lap { --lap-w: 350px; }
}

/* ---------- Планшет и узкий ноутбук (≤1279): ситуации в две колонки ---------- */
@media (max-width: 1279px) {
  .fitw { margin-top: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .fitw-card { --art-h: 172px; }
  .fitw-card__pain { margin-bottom: 18px; }
  .fitw-need__list { gap: 4px 30px; }
  .fitw-need__list b { font-size: 34px; line-height: 44px; }
  .fitw-lap { --lap-w: 300px; }
}
/* до 1023 — одна колонка: текст, под ним ноутбук у правого края */
@media (max-width: 1023px) {
  .fitw-need { grid-template-columns: minmax(0, 1fr); }
  .fitw-lap { --lap-w: 340px; margin-top: 36px; }
}

/* ---------- Телефон: всё столбиком, крупно ---------- */
@media (max-width: 767px) {
  .fitw { margin-top: 28px; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .fitw-card { --pad: 20px; --art-h: 176px; border-radius: 20px; }
  .fitw-card__title { font-size: 21px; line-height: 27px; }
  .fitw-card__pain { margin: 8px 0 20px; font-size: 15px; line-height: 22px; }
  .fitw-flap__week b span { font-size: 11px; letter-spacing: -.04em; }
  .fitw-cap { --ceil: 78px; }
  .fitw-day__stops { left: 4px; right: 4px; }
  .fitw-lever__sum b { font-size: 42px; line-height: 46px; }
  .fitw-need__row { margin-top: 28px; }
  .fitw-need__row + .fitw-need__row { margin-top: 24px; }
  .fitw-need__title { font-size: 15px; line-height: 22px; }
  .fitw-need__list { gap: 2px 22px; margin-top: 6px; }
  .fitw-need__list li { gap: 8px; }
  .fitw-need__list b { font-size: 28px; line-height: 38px; }
  .fitw-need--no b::after { height: 3px; margin-top: -1.5px; }
  .fitw-mark { width: 26px; height: 26px; stroke-width: 2.8; }
  .fitw-need__note { margin-top: 24px; font-size: 15px; line-height: 23px; }
  .fitw-need__cta { margin-top: 26px; gap: 16px; }
  .fitw-need__cta .who-btn { width: 100%; justify-content: space-between; }
  .fitw-need__deal { font-size: 14.5px; line-height: 21px; padding-left: 38px; }
  .fitw-lap { --lap-w: 300px; justify-self: center; margin-top: 28px; }
}

/* ---------- Без движения: сразу финальные кадры (статичные стили) ---------- */
@media (prefers-reduced-motion: reduce) {
  .fitw *, .fitw *::before, .fitw *::after, .fitw-need *, .fitw-need *::before, .fitw-need *::after { transition: none !important; animation: none !important; }
  .fitw-day__cup i { opacity: .5; }
}