/* Aroken — /web, #outcomes «Что ты будешь уметь после курса»: один экран — четыре умения и живое демо выбранного (js/web-outcomes.js).
   Владелец 22.09: «один экран — один смысл, текста меньше» — вместо бенто из четырёх демо сразу.
   ≥1024 с JS (.wo.is-tabs): слева четыре умения списком — заголовок каждого кнопка, у выбранного (лаймовая черта) раскрываются 1–3 строки
   и технологии; справа панель с демо только выбранного умения крупно (остальные панели display: none — их автодемо стоят).
   Карточки .wo-skill в этом режиме — display: contents: заголовки встают в левую колонку, панели — в одну ячейку справа.
   До 1023 и без JS — четыре карточки подряд: текст сверху, демо под ним до краёв карточки.
   1. Fit Studio свёрстан на CSS (фото — вырезки из assets/img/proj-fit-studio.webp): страница едет внутри окна, по кнопке «Телефон»
      окно сужается и макет перестраивается контейнерным запросом — настоящий адаптив, а не картинка.
   2. Редактор как в песочнице: слева form.js, строки подсвечиваются по очереди; справа страница с формой и настоящей кнопкой.
   3. Поле WordPress — настоящий input: что вводишь, то появляется в заголовке сайта рядом.
   4. Чек — как скрины в @aroken_result (дата, плательщик, сумма) с подписью поста; печатается из нижнего края панели.
   Окно браузера .ob-win__bar, подсветка кода .c-*, 3D .ob-3d — css/course-blocks.css. Primary в блоке нет, кнопки демо — графит на бумаге.
   Reduced-motion — статичные финалы. Общий ритм секций — в css/main.css, здесь только содержимое. */

/* ================================================================
   Раскладка: карточки подряд (телефон, планшет, без JS)
   ================================================================ */
.wo { --wo-pad: 24px; margin-top: 40px; display: grid; gap: 16px; }
.wo-skill { position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; padding: var(--wo-pad); border-radius: 24px; overflow: hidden; color: #fff; border: 1px solid rgba(255, 255, 255, .08); background: radial-gradient(90% 80% at 100% 100%, rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), 0) 62%), radial-gradient(60% 50% at 0% 0%, rgba(var(--accent-2-rgb), .05), rgba(var(--accent-2-rgb), 0) 70%), linear-gradient(165deg, #18191D 0%, #121316 100%); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05); }
.wo-skill__copy { position: relative; z-index: 2; }
.wo-skill__title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.wo-skill__text { max-width: 40em; margin: 10px 0 0; font-size: 15px; line-height: 22px; color: var(--muted-2); text-wrap: pretty; }
.wo-skill__tech { margin: 10px 0 0; font: 500 13px/18px var(--font); color: rgba(255, 255, 255, .5); } /* строка технологий и площадок — подпись шрифтом сайта (моно — только код и данные) */
/* панель демо: до краёв карточки снизу и по бокам */
.wo-skill__demo { position: relative; min-width: 0; margin: 20px calc(-1 * var(--wo-pad)) calc(-1 * var(--wo-pad)); }
.wo-skill--site .wo-skill__demo { display: flex; flex-direction: column; height: 380px; padding: 0 0 0 var(--wo-pad); }
.wo-skill--js .wo-skill__demo { padding-left: var(--wo-pad); }
.wo-skill--wp .wo-skill__demo { container-type: inline-size; padding: 0 0 0 var(--wo-pad); }
.wo-skill--orders .wo-skill__demo { container-type: inline-size; display: flex; align-items: flex-end; height: 300px; padding-left: var(--wo-pad); overflow: hidden; }
.wo-skill--orders { border-color: rgba(var(--accent-rgb), .3); }

/* кнопка-заголовок в режиме переключателя (js оборачивает заголовок; без js и до 1023 её нет) */
.wo-skill__tab { position: static; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-align: left; text-wrap: balance; color: rgba(255, 255, 255, .5); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .25s var(--ease); }
.wo-skill__tab::after { content: ""; position: absolute; inset: 0; } /* кликабельна вся строка умения */
.wo-skill__tab:hover { color: rgba(255, 255, 255, .88); }
.is-active > .wo-skill__copy .wo-skill__tab { color: #fff; cursor: default; }
.wo-skill__tab:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }

/* ================================================================
   Раскладка: переключатель (≥1024 с JS)
   ================================================================ */
@media (min-width: 1024px) {
  .wo.is-tabs { --wo-h: 440px; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-rows: 1fr repeat(4, auto) 1fr; column-gap: 48px; row-gap: 0; margin-top: 44px; }
  .wo.is-tabs .wo-skill { display: contents; }
  .wo.is-tabs .wo-skill__copy { grid-column: 1; padding: 14px 0 14px 22px; border-left: 2px solid rgba(255, 255, 255, .1); transition: border-color .3s var(--ease); }
  .wo.is-tabs .wo-skill:nth-child(1) .wo-skill__copy { grid-row: 2; }
  .wo.is-tabs .wo-skill:nth-child(2) .wo-skill__copy { grid-row: 3; }
  .wo.is-tabs .wo-skill:nth-child(3) .wo-skill__copy { grid-row: 4; }
  .wo.is-tabs .wo-skill:nth-child(4) .wo-skill__copy { grid-row: 5; }
  .wo.is-tabs .wo-skill.is-active .wo-skill__copy { border-left-color: var(--lime); }
  .wo.is-tabs .wo-skill__title { font-size: 20px; line-height: 26px; }
  .wo.is-tabs .wo-skill__more { padding-top: 2px; animation: wo-more .35s var(--ease); }
  .wo.is-tabs .wo-skill__text { font-size: 15px; line-height: 23px; }
  /* панель выбранного демо: одна ячейка справа на всю высоту колонки умений */
  .wo.is-tabs .wo-skill__demo { grid-column: 2; grid-row: 1 / -1; height: var(--wo-h); margin: 0; padding: 0; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .08); background: radial-gradient(80% 80% at 100% 100%, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), 0) 62%), radial-gradient(60% 50% at 0% 0%, rgba(var(--accent-2-rgb), .06), rgba(var(--accent-2-rgb), 0) 70%), linear-gradient(165deg, #18191D 0%, #121316 100%); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05); animation: wo-in .45s var(--ease); }
  .wo.is-tabs .wo-skill--orders .wo-skill__demo { border-color: rgba(var(--accent-rgb), .3); background: radial-gradient(70% 90% at 100% 100%, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), 0) 62%), linear-gradient(165deg, #18191D 0%, #121316 100%); }
  .wo.is-tabs .wo-skill:not(.is-active) .wo-skill__more, .wo.is-tabs .wo-skill:not(.is-active) .wo-skill__demo { display: none; }
}
@keyframes wo-more { from { opacity: 0; } }
@keyframes wo-in { from { opacity: 0; transform: translateY(8px); } }

/* ================================================================
   1. Вёрстка: Fit Studio в окне браузера, «Компьютер / Телефон»
   ================================================================ */
/* сверху подпись и переключатель, под ними окно — стоит на нижнем крае и уходит в правый край панели */
.wo-site__top { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 0 var(--wo-pad) 16px 0; }
.wo-site__cap { max-width: 34em; margin: 0; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .5); text-wrap: pretty; }
.wo-site { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* переключатель устройства: пилюля из двух кнопок, выбранная — бумага, лайм остаётся Primary */
.wo-dev { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); }
.wo-dev__btn { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .68); font: 600 13px/34px var(--font); letter-spacing: -.006em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .25s, color .25s; }
.wo-dev__btn:hover { color: #fff; }
.wo-dev__btn[aria-pressed="true"] { background: var(--paper-1); color: var(--ink); cursor: default; }
.wo-dev__btn:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 2px; }

.wo-win { --wo-phone: 250px; position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-self: flex-end; width: 100%; margin-right: 0; overflow: hidden; border-radius: 12px 0 0 0; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .4); transition: width .8s var(--ease), margin-right .8s var(--ease), border-radius .8s var(--ease); }
.wo-win .ob-win__bar { flex: none; }
/* окно-телефон: по центру панели (с учётом её левого поля), скругление как у экрана */
.wo-site.is-phone .wo-win { width: var(--wo-phone); margin-right: calc(50% + var(--wo-pad) / 2 - var(--wo-phone) / 2); border-radius: 22px 22px 0 0; }
.wo-site.is-phone .wo-win .ob-win__bar { padding-top: 4px; height: 34px; }
/* вид: контейнер размеров — сайт внутри считает себя от ширины и высоты окна */
.wo-win__view { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; container-type: size; }

/* страница едет внутри окна вниз и обратно, пока демо в кадре (класс is-on на панели — js/web-outcomes.js) */
.fs { --fs-blue: #2D8FE8; --fs-ink: #1B1B1F; position: relative; background: #fff; color: var(--fs-ink); font-family: var(--font); animation: wo-scroll var(--wo-dur, 10s) ease-in-out infinite alternate paused; }
.is-on .fs { animation-play-state: running; }
.wo-site.is-phone .fs { --wo-dur: 14s; }
@keyframes wo-scroll { 0%, 14% { transform: translateY(0); } 86%, 100% { transform: translateY(min(0px, calc(100cqh - 100%))); } }

/* Fit Studio на компьютере: всё в долях ширины окна (cqw) — выглядит как настоящий сайт в уменьшенном окне на любой ширине */
.fs__head { display: flex; align-items: center; justify-content: space-between; margin: 0 8%; padding: 2.6cqw 0 2.2cqw; border-bottom: 1px solid rgba(27, 27, 31, .08); }
.fs__logo { font-size: 1.75cqw; line-height: .95; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.fs__contact { display: flex; flex-direction: column; align-items: flex-end; gap: .6cqw; }
.fs__contact small { font-size: .95cqw; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: rgba(27, 27, 31, .45); }
.fs__contact b { font-size: 1.35cqw; line-height: 1; font-weight: 700; }
.fs__hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 3.5cqw; padding: 4.5cqw 8% 0; }
.fs__h1 { margin: 0; font-size: 3.9cqw; line-height: 1.04; font-weight: 800; letter-spacing: -.015em; text-transform: uppercase; }
.fs__h1 em { font-style: normal; color: var(--fs-blue); }
.fs__p { margin: 2.4cqw 0 0; font-size: 1.15cqw; line-height: 1.5; color: rgba(27, 27, 31, .7); }
.fs__btn { display: inline-block; margin-top: 4.2cqw; padding: 1.5cqw 2.4cqw; background: var(--fs-blue); color: #fff; font-size: 1cqw; line-height: 1; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
/* два фото — одна вырезка со скрина (249 × 183 px), табличка «Выбери своего тренера» — поверх такой же на снимке */
.fs__photos { position: relative; display: grid; grid-template-columns: 123fr 126fr; aspect-ratio: 249 / 183; }
.fs__ph { display: block; background: url("../assets/img/proj-fit-studio.webp") 55.26% 26.12% / 556.1% 233.9% no-repeat; }
.fs__ph--b { background-position: 77.6% 26.12%; background-size: 542.9% 233.9%; }
.fs__tag { position: absolute; left: 37%; top: 6%; width: 26%; height: 19%; display: grid; place-items: center; padding: 0 .6cqw; background: #fff; box-shadow: 0 .4cqw 1.2cqw rgba(0, 0, 0, .16); font-size: 1.05cqw; line-height: 1.3; font-weight: 600; text-align: center; }
.fs__h2 { margin: 6.5cqw 8% 0; font-size: 2.7cqw; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.fs__news { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2cqw; padding: 2.6cqw 8% 0; }
.fs__card { display: flex; flex-direction: column; }
.fs__thumb { display: block; aspect-ratio: 101 / 73; background: url("../assets/img/proj-fit-studio.webp") 21.27% 92.96% / 677.2% 586.3% no-repeat; }
.fs__thumb--2 { background-position: 40.48% 92.96%; }
.fs__thumb--3 { background-position: 59.52% 92.96%; }
.fs__thumb--4 { background-position: 78.56% 92.96%; }
.fs__card small { margin-top: 1.2cqw; font-size: .95cqw; line-height: 1; color: rgba(27, 27, 31, .4); }
.fs__card span { margin-top: .8cqw; font-size: 1.15cqw; line-height: 1.35; font-weight: 500; }
.fs__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6cqw; padding: 3cqw 8%; background: var(--fs-ink); color: #fff; }
.fs__foot b { font-size: 1.35cqw; line-height: 1; }
/* Fit Studio на телефоне: одна колонка, фото под текстом, кнопка во всю ширину, новости в две колонки — перестраивается сам */
@container (max-width: 300px) {
  .fs__head { margin: 0 16px; padding: 12px 0 10px; }
  .fs__logo { font-size: 10px; }
  .fs__contact small { display: none; }
  .fs__contact b { font-size: 9px; }
  .fs__hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 16px 0; }
  .fs__h1 { font-size: 21px; }
  .fs__p { margin-top: 10px; font-size: 9px; }
  .fs__btn { display: block; margin-top: 14px; padding: 10px 0; font-size: 8px; text-align: center; }
  .fs__tag { padding: 0 4px; font-size: 7px; }
  .fs__h2 { margin: 26px 16px 0; font-size: 14px; }
  .fs__news { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; padding: 12px 16px 0; }
  .fs__card small { margin-top: 6px; font-size: 7px; }
  .fs__card span { margin-top: 4px; font-size: 8.5px; }
  .fs__foot { margin-top: 26px; padding: 14px 16px 18px; }
  .fs__foot b { font-size: 9px; }
}

/* ================================================================
   2. JavaScript: редактор до правого и нижнего края; form.js и страница с формой
   ================================================================ */
/* карточка (до 1023): сверху код, под ним страница; панель (≥1024): код слева, страница справа */
.wo-js { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px 0 0 0; background: #0C0D10; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; border-bottom: 0; box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .9); }
.wo-js > .ob-win__bar { flex: none; }
.wo-code { padding: 12px 0 14px; }
.wo-code__note { margin: 0; padding: 0 20px; font: 500 12.5px/21px var(--mono); color: rgba(186, 191, 201, .5); text-wrap: pretty; }
/* строки — блоки (flex-колонка: переносы между span не рисуются); живая строка — лаймовая кромка, подсветка и каретка */
.wo-code__pre { display: flex; flex-direction: column; overflow: hidden; }
.wo-code__pre .ln { display: block; padding: 0 20px 0 18px; border-left: 2px solid transparent; white-space: pre; transition: background .25s, border-color .25s; }
.wo-code__pre .ln.is-live { border-left-color: rgb(var(--accent-rgb)); background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), 0) 90%); }
.wo-code__pre .ln.is-live::after { content: ""; display: inline-block; width: 2px; height: 14px; margin-left: 2px; vertical-align: -2px; background: rgb(var(--accent-rgb)); animation: wo-caret 1s steps(2) infinite; }
@keyframes wo-caret { 50% { opacity: 0; } }

/* страница с формой: бумага под кодом, своя адресная строка; форма слева по центру высоты, справа место кубу */
.wo-page { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 168px; background: linear-gradient(160deg, #FEFDF9, #F1ECE2); color: var(--ink); }
.wo-page > .ob-win__bar { flex: none; height: 26px; gap: 8px; background: #EDE8DE; border-bottom-color: rgba(23, 24, 28, .08); }
.wo-page .ob-win__url { height: 16px; font-size: 10px; line-height: 16px; }
/* шапка того же Fit Studio — только в высокой карточке, где есть место */
.wo-page__head { display: none; align-items: center; justify-content: space-between; margin: 0 20px; padding: 12px 0 10px; border-bottom: 1px solid rgba(23, 24, 28, .08); font-size: 10px; line-height: 1; font-weight: 700; }
.wo-page__logo { font-weight: 800; line-height: .95; letter-spacing: .03em; text-transform: uppercase; color: #2D8FE8; }
.wo-form { display: grid; gap: 8px; width: min(100%, 372px); margin: auto 0; padding: 16px 20px 20px; }
.wo-form__title { font-size: 13.5px; line-height: 18px; font-weight: 700; letter-spacing: -.01em; }
.wo-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* поля — настоящие: в них можно печатать (с телефона тоже — владелец 22.09: «нельзя вводить в демо»). Подпись «Имя/Телефон» — текст
   из CMS поверх поля, пропадает, как только в поле что-то есть; ничего никуда не отправляется — форма только открывает окно */
.wo-field { position: relative; display: block; height: 32px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .14); font-size: 12px; line-height: 32px; color: rgba(23, 24, 28, .4); cursor: text; transition: box-shadow .2s; }
.wo-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.wo-field__in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 10px; border: 0; border-radius: inherit; background: none; font: inherit; line-height: normal; letter-spacing: -.005em; color: var(--ink); caret-color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.wo-field__ph { position: absolute; left: 10px; right: 8px; top: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.wo-field__in:not(:placeholder-shown) + .wo-field__ph { visibility: hidden; }
.wo-form__btn { min-height: 36px; border: 0; border-radius: 9px; background: var(--ink); color: #FAF8F1; font: 600 13px/36px var(--font); letter-spacing: -.005em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--spring), background .2s; }
.wo-form__btn:hover { background: #2A2C33; }
.wo-form__btn:active, .wo-form__btn.is-press { transform: scale(.96); }
.wo-form__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* окно «Заявка отправлена»: затемнение страницы, карточка выезжает пружиной; закрывается «Хорошо», крестиком и Escape */
.wo-page::after { content: ""; position: absolute; inset: 26px 0 0; z-index: 2; background: rgba(23, 24, 28, .4); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.wo-page.is-open::after { opacity: 1; visibility: visible; transition-delay: 0s; }
.wo-page:has(.wo-modal[inert])::after { pointer-events: none; } /* окно из автодемо: тап сразу попадает в поле под ним (и гасит автодемо), а не в затемнение */
.wo-modal { position: absolute; left: 20px; top: calc(50% + 13px); z-index: 3; width: min(100% - 40px, 292px); display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 14px 44px 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 26px 40px -16px rgba(0, 0, 0, .6), 0 0 0 1px rgba(23, 24, 28, .06); opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 16px)) scale(.94); transition: opacity .25s, transform .45s var(--spring), visibility 0s .45s; }
.wo-page.is-open .wo-modal { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); transition-delay: 0s; }
.wo-modal__check { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--lime-3), var(--lime-2)); box-shadow: 0 6px 12px -5px rgba(199, 255, 46, .6); }
.wo-modal__title { margin: 0; font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: -.012em; color: var(--ink); }
.wo-modal__text { grid-column: 2; margin: 2px 0 0; font-size: 12px; line-height: 16px; color: rgba(23, 24, 28, .6); }
.wo-modal__btn { grid-column: 2; justify-self: start; margin-top: 10px; min-height: 32px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--ink); color: #FAF8F1; font: 600 12.5px/32px var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s; }
.wo-modal__btn:hover { background: #2A2C33; }
.wo-modal__x { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: rgba(23, 24, 28, .45); cursor: pointer; transition: background .2s, color .2s; }
.wo-modal__x:hover { background: rgba(23, 24, 28, .06); color: var(--ink); }
.wo-modal__x:focus-visible, .wo-modal__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ob-3d--js { z-index: 2; right: -26px; bottom: -34px; width: 156px; transform: rotate(8deg); }
.wo-skill--js .wo-skill__demo:hover .ob-3d--js { transform: rotate(3deg) translateY(-6px); }

/* ================================================================
   3. WordPress: куб в правом верхнем углу; поле, которое правит заказчик, и его сайт рядом
   ================================================================ */
/* раскладка демо зависит от ширины самой панели (контейнер): поле и сайт рядом, в узкой — сайт под полем */
.ob-3d--wp { right: -30px; top: -30px; width: 158px; transform: rotate(10deg); }
.wo-skill--wp .wo-skill__demo:hover .ob-3d--wp { transform: rotate(4deg) translateY(4px); }
.wo-wp { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 12px; align-items: end; }
/* поле — как в админке WordPress: серая панель, белый input с синей рамкой в фокусе */
.wo-acf { display: block; margin-bottom: 4px; padding: 12px 14px 14px; border-radius: 14px; background: #F0F0F1; color: #1D2327; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .7); cursor: text; }
.wo-acf__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 12px; line-height: 16px; font-weight: 600; }
.wo-acf__label code { font: 400 11px/16px var(--mono); color: #50575E; }
.wo-acf__input { display: block; box-sizing: border-box; width: 100%; height: 36px; margin-top: 6px; padding: 0 9px; border-radius: 4px; border: 1px solid #8C8F94; background: #fff; font: 400 13.5px/34px var(--font); color: #1D2327; caret-color: #2271B1; transition: border-color .2s, box-shadow .2s; }
.wo-acf__input:focus, .wo-acf.is-wo-typing .wo-acf__input { outline: none; border-color: #2271B1; box-shadow: 0 0 0 1px #2271B1; }
.wo-acf__input::selection { background: rgba(34, 113, 177, .25); }
/* сайт заказчика: стоит на нижнем крае карточки, заголовок — то, что в поле */
.wo-prev { margin-bottom: -28px; border-radius: 12px 12px 0 0; overflow: hidden; background: linear-gradient(160deg, #FEFDF9, #F1ECE2); color: var(--ink); box-shadow: 0 20px 34px -22px rgba(0, 0, 0, .8), 0 0 0 1px rgba(23, 24, 28, .06); }
.wo-prev .ob-win__bar { height: 24px; gap: 8px; padding: 0 10px; background: #EDE8DE; border-bottom-color: rgba(23, 24, 28, .08); }
.wo-prev .ob-win__url { height: 15px; font-size: 9.5px; line-height: 15px; }
.wo-prev__page { padding: 14px 14px 18px; }
.wo-prev__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 34px; font-size: 14px; line-height: 17px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.wo-prev__caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 2px; vertical-align: -1px; background: var(--ink); opacity: 0; }
.wo-wp.is-wo-typing .wo-prev__caret { opacity: 1; animation: wo-caret 1s steps(2) infinite; }
.wo-prev__line { display: block; width: 88%; height: 5px; margin-top: 9px; border-radius: 3px; background: rgba(23, 24, 28, .16); }
.wo-prev__line--s { width: 62%; margin-top: 5px; }
.wo-prev__btn { display: inline-block; margin-top: 11px; padding: 0 10px; border-radius: 6px; background: var(--ink); color: #FAF8F1; font-size: 9px; line-height: 22px; font-weight: 600; }
/* в панели: поле — с отступом от нижнего края, сайт заказчика стоит на нижнем крае и уходит в правый */
.wo-acf { margin-bottom: var(--wo-pad); }
.wo-prev { margin-bottom: 0; border-radius: 12px 0 0 0; }
@container (max-width: 379px) {
  .wo-wp { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wo-acf { margin: 0 var(--wo-pad) 0 0; }
  .wo-prev { margin: 0 0 0 var(--wo-pad); }
  .wo-prev__title { min-height: 0; font-size: 15px; line-height: 19px; }
}

/* ================================================================
   4. Заказы: чек печатается из нижнего края панели, площадки справа
   ================================================================ */
.ob-orders3d { position: absolute; z-index: 1; right: -8px; bottom: -6px; width: 236px; height: 150px; pointer-events: none; transform-origin: 100% 100%; transform: scale(.84); }
.ob-orders3d__t { position: absolute; height: auto; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5)); transition: transform .6s var(--spring); }
.ob-orders3d__t--tg { left: -12px; bottom: 4px; width: 118px; transform: rotate(-11deg); z-index: 2; }
.ob-orders3d__t--profi { right: -16px; bottom: -4px; width: 118px; transform: rotate(10deg); z-index: 1; }
.ob-orders3d__t--kwork { left: 46px; bottom: 24px; width: 144px; transform: rotate(-3deg); z-index: 3; }
.wo-skill--orders .wo-skill__demo:hover .ob-orders3d__t--tg { transform: rotate(-15deg) translate(-6px, -4px); }
.wo-skill--orders .wo-skill__demo:hover .ob-orders3d__t--profi { transform: rotate(14deg) translate(6px, -4px); }
.wo-skill--orders .wo-skill__demo:hover .ob-orders3d__t--kwork { transform: rotate(-1deg) translateY(-10px); }
/* чек — экран перевода, как скрины в канале: дата · время, плательщик, сумма; ниже — подпись поста. Ссылка ведёт на сам пост.
   Стоит на нижнем крае панели (край — «щель принтера»), запас снизу прячет подъём при наведении; --wo-z — масштаб на широких экранах */
.wo-check { --wo-z: 1; position: relative; z-index: 2; flex: none; width: 214px; margin: 0 0 -44px; padding-top: 22px; zoom: var(--wo-z); color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.wo-check__paper { position: relative; display: flex; flex-direction: column; align-items: center; padding: 14px 16px 38px; border-radius: 18px 18px 0 0; background: #1E1F23; border: 1px solid rgba(255, 255, 255, .12); border-bottom: 0; box-shadow: 0 -14px 36px -16px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); text-align: center; transition: transform 1.1s cubic-bezier(.22, .72, .25, 1); }
.wo-check:hover .wo-check__paper { transform: translateY(-6px); transition-duration: .4s; }
.wo-check:focus-visible { outline: none; }
.wo-check:focus-visible .wo-check__paper { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 3px; }
.wo-check__when { font-size: 11px; line-height: 14px; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.wo-check__ava { width: 40px; height: 40px; margin-top: 12px; display: grid; place-items: center; border-radius: 50%; background: var(--wo-ava, #C7FF2E); color: var(--ink); font-size: 17px; line-height: 1; font-weight: 700; }
.wo-check__name { margin-top: 8px; font-size: 13px; line-height: 17px; font-weight: 500; white-space: nowrap; }
.wo-check__sum { margin-top: 6px; font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: -.02em; color: rgb(var(--accent-rgb)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wo-check__cap { align-self: stretch; min-height: 43px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .16); font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .7); text-wrap: balance; } /* место под две строки (1 + 10 + 2 × 16): подписи в ротации в одну и в две строки — чек и секция не дышат */
/* уголок-ссылка на месте крестика со скрина */
.wo-check__go { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); transition: background .2s, color .2s; }
.wo-check:hover .wo-check__go { background: rgba(var(--accent-rgb), .2); color: rgb(var(--accent-rgb)); }
/* печать: бумага уходит в «принтер» (за нижний край), выезжая — проявляет строки по очереди */
.wo-check__paper > * { transition: opacity .35s, transform .45s var(--ease); }
.wo-check__when { transition-delay: .3s; }
.wo-check__ava { transition-delay: .45s; }
.wo-check__name { transition-delay: .55s; }
.wo-check__sum { transition-delay: .65s; }
.wo-check__cap { transition-delay: .9s; }
.wo-check.is-out .wo-check__paper { transform: translateY(calc(100% + 24px)); transition: transform .5s cubic-bezier(.5, 0, .75, 0); }
.wo-check.is-out .wo-check__paper > * { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.wo-check.is-out .wo-check__ava { transform: scale(.4); }
/* узкая панель: площадки мельче и прячутся за правый край чека */
@container (max-width: 379px) {
  .ob-orders3d { transform: scale(.7); }
  .wo-check { width: 196px; }
}

/* ================================================================
   Демо в панели переключателя (≥1024 с JS)
   ================================================================ */
@media (min-width: 1024px) {
  /* 1. сайт: подпись и переключатель сверху, окно на всю панель до правого и нижнего края */
  .wo.is-tabs .wo-skill--site .wo-skill__demo { --wo-pad: 32px; display: flex; flex-direction: column; padding: 20px 0 0 var(--wo-pad); }
  .wo.is-tabs .wo-win { --wo-phone: 300px; border-radius: 14px 0 0 0; }
  /* 2. форма: редактор до правого и нижнего края; на 1024–1279 код над страницей, с 1280 — рядом */
  .wo.is-tabs .wo-js { position: absolute; inset: 28px 0 0 32px; }
  .wo.is-tabs .wo-page__head { display: flex; }
  .wo.is-tabs .wo-form { padding: 20px 20px 24px; gap: 10px; }
  .wo.is-tabs .wo-form__title { font-size: 16px; line-height: 20px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
  .wo.is-tabs .wo-field { height: 38px; line-height: 38px; }
  .wo.is-tabs .wo-form__btn { min-height: 42px; line-height: 42px; }
  /* 3. WordPress: поле админки слева по центру, сайт заказчика справа на нижнем крае, заголовок крупно */
  .wo.is-tabs .wo-skill--wp .wo-skill__demo { --wo-pad: 36px; }
  .wo.is-tabs .wo-wp { position: absolute; inset: 0; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; padding-left: var(--wo-pad); }
  .wo.is-tabs .wo-acf { align-self: center; margin: 0; padding: 16px 18px 18px; border-radius: 16px; }
  .wo.is-tabs .wo-acf__label { font-size: 13.5px; line-height: 20px; }
  .wo.is-tabs .wo-acf__label code { font-size: 12.5px; }
  .wo.is-tabs .wo-acf__input { height: 46px; margin-top: 8px; padding: 0 12px; font-size: 16px; line-height: 44px; }
  .wo.is-tabs .wo-prev { height: 76%; border-radius: 16px 0 0 0; }
  .wo.is-tabs .wo-prev .ob-win__bar { height: 32px; padding: 0 14px; }
  .wo.is-tabs .wo-prev .ob-win__url { height: 20px; font-size: 11px; line-height: 20px; }
  .wo.is-tabs .wo-prev__page { padding: 28px 28px 32px; }
  .wo.is-tabs .wo-prev__title { min-height: 0; font-size: 30px; line-height: 34px; }
  .wo.is-tabs .wo-prev__caret { width: 2.5px; height: 28px; vertical-align: -3px; }
  .wo.is-tabs .wo-prev__line { height: 8px; margin-top: 18px; border-radius: 4px; }
  .wo.is-tabs .wo-prev__line--s { margin-top: 8px; }
  .wo.is-tabs .wo-prev__btn { margin-top: 22px; padding: 0 16px; border-radius: 9px; font-size: 13px; line-height: 36px; }
  .wo.is-tabs .ob-3d--wp { width: 180px; right: -26px; top: -26px; }
  /* 4. заказы: чек крупнее, слева от центра; площадки справа внизу */
  .wo.is-tabs .wo-skill--orders .wo-skill__demo { display: flex; align-items: flex-end; padding-left: 14%; }
  .wo.is-tabs .wo-check { --wo-z: 1.15; }
  .wo.is-tabs .ob-orders3d { right: 6%; bottom: -4px; transform: scale(1.4); }
}
@media (min-width: 1280px) {
  .wo.is-tabs { --wo-h: 440px; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); column-gap: 56px; }
  .wo.is-tabs .wo-js { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .wo.is-tabs .wo-js > .ob-win__bar { grid-column: 1; grid-row: 1; }
  .wo.is-tabs .wo-code { grid-column: 1; grid-row: 2; padding: 16px 0; }
  .wo.is-tabs .wo-code__note, .wo.is-tabs .wo-code__pre { font-size: 13px; line-height: 24px; }
  .wo.is-tabs .wo-page { grid-column: 2; grid-row: 1 / 3; min-height: 0; border-left: 1px solid rgba(255, 255, 255, .08); }
  .wo.is-tabs .wo-page > .ob-win__bar { height: 30px; }
  .wo.is-tabs .wo-page::after { inset: 30px 0 0; }
  .wo.is-tabs .wo-modal { top: calc(50% + 15px); }
  .wo.is-tabs .wo-prev__title { font-size: 36px; line-height: 40px; }
  .wo.is-tabs .wo-check { --wo-z: 1.25; }
  .wo.is-tabs .ob-orders3d { transform: scale(1.6); }
}
@media (min-width: 1440px) {
  .wo.is-tabs { --wo-h: 470px; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: 64px; }
  .wo.is-tabs .wo-skill__title { font-size: 21px; line-height: 27px; }
  .wo.is-tabs .wo-skill__text { font-size: 16px; line-height: 24px; }
  .wo.is-tabs .wo-code__note, .wo.is-tabs .wo-code__pre { font-size: 14px; line-height: 25px; }
  .wo.is-tabs .wo-form { width: min(100%, 400px); padding: 24px 24px 28px; }
  .wo.is-tabs .wo-check { --wo-z: 1.3; }
  .wo.is-tabs .ob-orders3d { transform: scale(1.75); }
}
@media (min-width: 1800px) {
  /* 1920×1080 — экран владельца: заголовок крупнее, панель демо — почти весь кадр */
  #outcomes .h2--lg { font-size: 44px; line-height: 50px; letter-spacing: -.03em; }
  #outcomes .section__lead { margin-top: 16px; font-size: 20px; line-height: 30px; }
  .wo.is-tabs { --wo-h: 540px; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: 72px; margin-top: 52px; }
  .wo.is-tabs .wo-skill__copy { padding: 16px 0 16px 26px; }
  .wo.is-tabs .wo-skill__title { font-size: 23px; line-height: 29px; }
  .wo.is-tabs .wo-skill__text { font-size: 17px; line-height: 25px; }
  .wo.is-tabs .wo-skill__tech { font-size: 14px; line-height: 20px; }
  .wo.is-tabs .wo-skill--site .wo-skill__demo { --wo-pad: 40px; padding-top: 24px; }
  .wo.is-tabs .wo-win { --wo-phone: 300px; }
  .wo.is-tabs .wo-js { inset: 36px 0 0 40px; }
  .wo.is-tabs .wo-code { padding: 22px 0; }
  .wo.is-tabs .wo-code__note, .wo.is-tabs .wo-code__pre { font-size: 15.5px; line-height: 28px; }
  .wo.is-tabs .wo-code__pre .ln.is-live::after { height: 17px; vertical-align: -3px; }
  .wo.is-tabs .wo-page__head { margin: 0 28px; padding: 16px 0 14px; font-size: 12px; }
  .wo.is-tabs .wo-form { width: min(100%, 440px); padding: 28px 28px 32px; gap: 12px; }
  .wo.is-tabs .wo-form__title { font-size: 20px; line-height: 24px; }
  .wo.is-tabs .wo-field { height: 44px; line-height: 44px; font-size: 13.5px; }
  .wo.is-tabs .wo-form__btn { min-height: 48px; line-height: 48px; font-size: 14px; }
  .wo.is-tabs .wo-modal { width: min(100% - 56px, 340px); left: 28px; padding: 18px 48px 18px 20px; }
  .wo.is-tabs .wo-modal__title { font-size: 16px; line-height: 20px; }
  .wo.is-tabs .wo-modal__text { font-size: 13.5px; line-height: 18px; }
  .wo.is-tabs .ob-3d--js { width: 190px; right: -28px; bottom: -40px; }
  .wo.is-tabs .wo-skill--wp .wo-skill__demo { --wo-pad: 48px; }
  .wo.is-tabs .wo-wp { gap: 44px; }
  .wo.is-tabs .wo-acf { padding: 20px 22px 22px; }
  .wo.is-tabs .wo-acf__label { font-size: 15px; line-height: 22px; }
  .wo.is-tabs .wo-acf__input { height: 52px; font-size: 18px; line-height: 50px; }
  .wo.is-tabs .wo-prev__page { padding: 40px 40px 44px; }
  .wo.is-tabs .wo-prev__title { font-size: 46px; line-height: 50px; }
  .wo.is-tabs .wo-prev__caret { height: 40px; width: 3px; }
  .wo.is-tabs .wo-prev__line { height: 10px; margin-top: 24px; }
  .wo.is-tabs .wo-prev__btn { margin-top: 28px; padding: 0 20px; font-size: 15px; line-height: 44px; }
  .wo.is-tabs .ob-3d--wp { width: 210px; }
  .wo.is-tabs .wo-check { --wo-z: 1.5; }
  .wo.is-tabs .ob-orders3d { right: 7%; transform: scale(2.1); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .wo.is-tabs { --wo-h: 420px; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); column-gap: 36px; margin-top: 36px; }
  .wo.is-tabs .wo-skill__copy { padding: 12px 0 12px 18px; }
  .wo.is-tabs .wo-skill__title { font-size: 18px; line-height: 24px; }
  .wo.is-tabs .wo-skill__text { font-size: 14.5px; line-height: 21px; }
  .wo.is-tabs .wo-code { padding: 10px 0 12px; }
  .wo.is-tabs .wo-page { min-height: 0; }
  .wo.is-tabs .wo-page__head { display: none; }
}
/* невысокие окна (1280×720, 1366×768): панель ниже, чтобы экран не вылезал за кадр */
@media (min-width: 1024px) and (max-height: 780px) {
  .wo.is-tabs { --wo-h: 400px; margin-top: 32px; }
}

/* ================================================================
   Карточки (до 1023)
   ================================================================ */
@media (max-width: 1023px) {
  /* планшет — пальцем: тап-зоны 44 px */
  .wo-dev__btn { min-height: 44px; line-height: 44px; }
  .wo-form__btn { min-height: 44px; line-height: 44px; }
  .wo-modal__btn { min-height: 44px; line-height: 44px; }
  .wo-modal__x { width: 44px; height: 44px; right: 0; top: 0; }
  .wo-acf__input { height: 44px; line-height: 42px; }
  .wo-field { height: 44px; line-height: 44px; font-size: 16px; } /* 16 px — iOS не приближает страницу при фокусе; 44 px — под палец */
  .wo-skill__text { font-size: 16px; line-height: 24px; }
  /* куб WordPress — над правым верхним углом демо, текст карточки его не задевает */
  .wo-skill--wp .wo-skill__copy { padding-right: 76px; }
  .ob-3d--wp { z-index: 3; top: -56px; right: -22px; width: 128px; }
}
@media (max-width: 767px) {
  .wo { --wo-pad: 20px; margin-top: 28px; gap: 12px; }
  .wo-skill { border-radius: 20px; }
  .wo-skill__title { font-size: 21px; line-height: 27px; }
  .wo-skill__text { font-size: 15px; line-height: 22px; }
  .wo-skill__demo { margin-top: 18px; }
  .wo-skill--site .wo-skill__demo { height: 330px; }
  .wo-site__top { gap: 10px; }
  .wo-site__cap { font-size: 12.5px; line-height: 17px; }
  .wo-win { --wo-phone: 228px; }

  .wo-code { padding: 10px 0 12px; }
  .wo-code__note { display: none; }
  .wo-code__pre { font-size: 11px; line-height: 18px; }
  .wo-code__pre .ln { padding: 0 14px 0 12px; }
  .wo-form { padding: 14px 16px 18px; width: min(100%, 300px); }
  .wo-modal { left: 12px; width: min(100% - 24px, 280px); padding-right: 48px; }
  .ob-3d--js { width: 108px; right: -30px; bottom: -40px; }

  .wo-skill--wp .wo-skill__copy { padding-right: 52px; }
  .ob-3d--wp { width: 100px; right: -24px; top: -40px; }
  .wo-acf__input { font-size: 16px; } /* iOS не приближает страницу при фокусе */
  .wo-prev__page { padding: 12px 14px 16px; }

  .wo-skill--orders .wo-skill__demo { height: 250px; }
  .ob-orders3d { right: -14px; bottom: -8px; transform: scale(.74); }
  .wo-check { margin-bottom: -38px; }
  .wo-check__paper { padding-left: 14px; padding-right: 14px; }
}

/* ================================================================
   Reduced-motion: всё стоит в финальном состоянии, кнопки работают мгновенно
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .fs { animation: none; }
  .wo.is-tabs .wo-skill__more, .wo.is-tabs .wo-skill__demo { animation: none; }
  .wo-skill__tab, .wo.is-tabs .wo-skill__copy, .wo-win, .wo-dev__btn, .wo-form__btn, .wo-page::after, .wo-modal, .wo-check__paper, .wo-check__paper > *, .wo-code__pre .ln, .ob-3d, .ob-orders3d__t { transition: none; }
  .wo-code__pre .ln.is-live::after, .wo-wp.is-wo-typing .wo-prev__caret { animation: none; }
  .wo-check:hover .wo-check__paper { transform: none; }
  .wo-skill--js .wo-skill__demo:hover .ob-3d--js { transform: rotate(8deg); }
  .wo-skill--wp .wo-skill__demo:hover .ob-3d--wp { transform: rotate(10deg); }
  .wo-skill--orders .wo-skill__demo:hover .ob-orders3d__t--tg { transform: rotate(-11deg); }
  .wo-skill--orders .wo-skill__demo:hover .ob-orders3d__t--profi { transform: rotate(10deg); }
  .wo-skill--orders .wo-skill__demo:hover .ob-orders3d__t--kwork { transform: rotate(-3deg); }
}