/* Блок «Как это работает» на главной — 3 шага с анимацией (handoff «вариант 2c», 2026-09-25).
   Эталон: design_handoff_how_it_works/reference/how-it-works.html. Значения и тексты — 1 в 1 с эталоном; тайминги — тоже,
   кроме шага 1 (решение владельца 2026-09-26: печать медленнее и по символу, поля меняют цвет плавно, см. how-it-works.js).
   Все классы с префиксом hiw-, чтобы не пересекаться с theme.css. Скрипт таймлайна — how-it-works.js.
   Отличия от эталона только в обвязке: отступы секции даёт .lp-section сайта, поэтому контейнер-запросы считаются
   по ширине сетки (в эталоне — по ширине секции с отступами 48px): 1280 → 1184, 520 → 480. Manrope лежит локально
   (fonts/manrope-*.woff2), Google Fonts на сайте не подключаем (152-ФЗ). */
.hiw{
  --hiw-page:#000000;
  --hiw-card:#090909;
  --hiw-card-line:#1A1A1A;
  --hiw-panel:#070707;
  --hiw-panel-line:#1D1D1D;
  --hiw-field:#101010;
  --hiw-field-line:#232323;
  --hiw-divider:#151515;
  --hiw-avatar:#141414;
  --hiw-avatar-line:#262626;
  --hiw-lime:#D0FF07;
  --hiw-lime-ink:#0A0B06;
  --hiw-olive:#2B3214;
  --hiw-olive-2:#21280D;
  --hiw-glow:#596B08;
  --hiw-flash:#10140A;
  --hiw-text:#FAFAF8;
  --hiw-text-2:#E4E4E0;
  --hiw-text-3:#AFAFAB;
  --hiw-label:#AAAAA8;
  --hiw-muted:#8A8A86;
  --hiw-muted-2:#7F7F7D;
  --hiw-mono-label:#71716F;
  --hiw-time:#707070;
  --hiw-placeholder:#6F6F6D;
  --hiw-off:#232323;
  --hiw-font:'Manrope',system-ui,sans-serif;
  --hiw-mono:'JetBrains Mono',ui-monospace,monospace;
  container:hiw / inline-size;
  font-family:var(--hiw-font);color:var(--hiw-text);text-wrap:wrap;
  /* body сайта: 17px / 1.55 — эталон собран на 16px / normal */
  font-size:16px;line-height:normal;letter-spacing:normal;
}
/* theme.css задаёт * { box-sizing:border-box }, эталон собран на content-box (аватар 26 + рамка = 28) */
.hiw,.hiw *{box-sizing:content-box}
.hiw.is-instant *{transition:none!important}

/* ===== Сетка ===== */
.hiw__grid{max-width:1344px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto 1fr;column-gap:24px;row-gap:14px}

/* ===== Карточка ===== */
.hiw-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;background:var(--hiw-card);border:1px solid var(--hiw-card-line);border-radius:28px;padding:28px;transition:box-shadow .4s ease}
.hiw-card.is-active{box-shadow:inset 0 0 0 1px var(--hiw-glow)}
/* карточки — кнопки «начать анимацию шага» (класс ставит how-it-works.js; без JS и при reduced-motion — обычные карточки) */
.hiw.is-seekable .hiw-card{cursor:pointer}
.hiw-card:focus{outline:none}
.hiw-card:focus-visible{box-shadow:inset 0 0 0 2px var(--hiw-lime)}
.hiw-card__top{display:flex;align-items:center;gap:14px}
.hiw-card__num{flex:none;width:34px;height:34px;border-radius:10px;background:var(--hiw-lime);color:var(--hiw-lime-ink);display:grid;place-items:center;font-weight:800;font-size:16px}
.hiw-card__kicker{font-family:var(--hiw-mono);font-size:11.5px;letter-spacing:.28em;color:var(--hiw-muted-2);text-transform:uppercase}
.hiw-card__bar{flex:1;height:3px;border-radius:99px;background:var(--hiw-panel-line);overflow:hidden}
.hiw-card__bar-fill{height:100%;width:0;border-radius:99px;background:var(--hiw-lime)}
.hiw-card__title{margin:4px 0 0;font-family:var(--hiw-font);font-weight:800;font-size:25px;line-height:1.15;letter-spacing:-.01em;color:var(--hiw-text)}
.hiw-card__text{margin:0;font-weight:500;font-size:16px;line-height:1.55;color:var(--hiw-text-3);text-wrap:pretty}
.hiw-panel{container:hiw-panel / inline-size;margin-top:10px;display:flex;flex-direction:column;gap:14px;background:var(--hiw-panel);border:1px solid var(--hiw-panel-line);border-radius:20px;padding:20px}
.hiw-panel--form{gap:12px}

/* ===== Общие элементы ===== */
.hiw-mlabel{font-family:var(--hiw-mono);font-size:10.5px;letter-spacing:.22em;color:var(--hiw-mono-label);text-transform:uppercase}
.hiw-mtime{font-family:var(--hiw-mono);font-size:11px;color:var(--hiw-time)}
.hiw-chip{background:var(--hiw-olive-2);color:var(--hiw-lime);font-weight:800;font-size:14px;letter-spacing:.02em;padding:5px 10px;border-radius:8px}
.hiw-author-badge{background:var(--hiw-olive-2);color:var(--hiw-lime);font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px}
.hiw-ava{flex:none;width:26px;height:26px;border-radius:50%;background:var(--hiw-avatar);border:1px solid var(--hiw-avatar-line);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--hiw-lime)}
.hiw-dot{width:6px;height:6px;border-radius:50%;background:var(--hiw-lime)}
.hiw-caret{width:2px;height:18px;background:var(--hiw-lime);opacity:0}
.hiw-caret--inline{display:inline-block;height:15px;margin-left:1px;vertical-align:-2px}
.hiw-caret.is-on{opacity:1}

/* Появление */
.hiw-up{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.hiw-fade{opacity:0;transition:opacity .45s ease}
.hiw-up.is-on,.hiw-fade.is-on{opacity:1;transform:none}

/* ===== Карточка 1: форма ===== */
.hiw-f-title{font-weight:700;font-size:17px}
.hiw-f-group{display:flex;flex-direction:column;gap:6px}
.hiw-f-label{font-size:12px;font-weight:600;color:var(--hiw-label)}
.hiw-f-field{background:var(--hiw-field);border:1px solid var(--hiw-field-line);border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.45;font-weight:500;color:var(--hiw-placeholder);transition:box-shadow .25s ease,color .25s ease}
.hiw-f-field.is-filled{color:var(--hiw-text-2)}
.hiw-f-field.is-focus{box-shadow:0 0 0 1px var(--hiw-lime)}
.hiw-f-field--min{box-sizing:border-box;min-height:41px}
.hiw-f-field--msg{box-sizing:border-box;min-height:82px}
.hiw-f-field--color{transition:color .3s ease}
.hiw-f-field--word{padding:6px;display:flex;align-items:center;gap:2px}
.hiw-f-word{font-weight:800;font-size:14px;letter-spacing:.02em;padding:5px 10px;border-radius:8px;color:var(--hiw-placeholder);background:transparent;transition:color .25s ease,background .25s ease}
.hiw-f-field--word.is-filled .hiw-f-word{color:var(--hiw-lime);background:var(--hiw-olive-2)}
.hiw-f-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.hiw-f-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--hiw-divider);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
/* в эталоне flex-basis 150px при карточке 432; у сайта карточка до 427 (контейнер 1328 против 1344) — 145px, чтобы кнопка, как в макете, стояла в строку */
.hiw-f-toggle{flex:1 1 145px;display:flex;align-items:center;gap:10px;min-width:0}
.hiw-f-toggle__label{font-size:13px;line-height:1.3;font-weight:600;color:var(--hiw-text-2)}
.hiw-switch{flex:none;width:40px;height:22px;border-radius:99px;padding:3px;box-sizing:border-box;display:flex;background:var(--hiw-off);transition:background .3s ease}
.hiw-switch__knob{width:16px;height:16px;border-radius:50%;background:var(--hiw-muted-2);transition:transform .3s ease,background .3s ease}
.hiw-switch.is-on{background:var(--hiw-lime)}
.hiw-switch.is-on .hiw-switch__knob{background:var(--hiw-lime-ink);transform:translateX(18px)}
.hiw-cta{flex:none;font-weight:800;font-size:13px;padding:10px 16px;border-radius:99px;background:var(--hiw-lime);color:var(--hiw-lime-ink);transition:background .3s ease,color .3s ease,transform .15s ease}
.hiw-cta.is-pressed{transform:scale(.93)}
.hiw-cta.is-swapped{background:var(--hiw-olive);color:var(--hiw-lime)}

/* ===== Карточка 2: комментарии ===== */
.hiw-post{display:flex;gap:12px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--hiw-divider)}
.hiw-post__cover{flex:none;position:relative;width:38px;height:52px;border-radius:8px;background:var(--hiw-lime);display:grid;place-items:center;overflow:hidden}
.hiw-post__cover-word{font-weight:800;font-size:10px;letter-spacing:.02em;color:var(--hiw-lime-ink)}
.hiw-post__cover-play{position:absolute;left:6px;bottom:6px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--hiw-lime-ink)}
.hiw-post__meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.hiw-post__line{display:flex;align-items:baseline;gap:8px}
.hiw-post__name{font-weight:700;font-size:13.5px}
.hiw-post__caption{font-size:13px;line-height:1.45;color:var(--hiw-text-3)}
.hiw-cm{display:flex;flex-direction:column;gap:8px}
.hiw-cm--flash{padding:8px;margin:-8px;border-radius:12px;background:transparent;transition:background .8s ease,opacity .45s ease,transform .45s ease}
.hiw-cm--flash.is-flash{background:var(--hiw-flash)}
.hiw-cm__head{display:flex;align-items:center;gap:10px}
.hiw-cm__name{font-weight:700;font-size:14px}
.hiw-cm__word{padding-left:36px;display:flex}
.hiw-rp{margin-left:36px;padding-left:12px;border-left:2px solid var(--hiw-olive);display:flex;flex-direction:column;gap:5px}
.hiw-rp--next{margin-top:-4px}
.hiw-rp--inline{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
.hiw-rp--inline .hiw-rp__text{white-space:nowrap}
.hiw-rp__head{display:flex;align-items:center;gap:8px}
.hiw-rp__author{font-weight:700;font-size:13.5px;color:var(--hiw-lime)}
.hiw-rp__name{font-weight:700;font-size:13.5px}
.hiw-rp__text{font-size:14px;color:var(--hiw-text-2)}
.hiw-rp__status{font-family:var(--hiw-mono);font-size:11px;color:var(--hiw-muted);transition:opacity .45s ease,color .3s ease}
.hiw-rp__status.is-swapped{color:var(--hiw-lime)}
.hiw-rp__note{font-family:var(--hiw-mono);font-size:11px;color:var(--hiw-muted-2)}

/* ===== Карточка 3: директ ===== */
.hiw-dm-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--hiw-divider)}
.hiw-dm-head__ava{flex:none;width:36px;height:36px;border-radius:50%;background:var(--hiw-lime);color:var(--hiw-lime-ink);display:grid;place-items:center;font-weight:800;font-size:14px}
.hiw-dm-head__col{display:flex;flex-direction:column;gap:2px}
.hiw-dm-head__name{font-weight:700;font-size:14.5px}
.hiw-dm-head__status{font-size:12px;color:var(--hiw-muted-2)}
.hiw-dm-out{display:flex;justify-content:flex-end}
.hiw-dm-out__bubble{display:inline-block;background:var(--hiw-lime);color:var(--hiw-lime-ink);font-weight:700;font-size:14px;padding:9px 16px;border-radius:18px 18px 6px 18px;transform-origin:100% 100%;opacity:0;transform:scale(.85);transition:opacity .35s ease,transform .35s ease}
.hiw-dm-out__bubble.is-on{opacity:1;transform:none}
.hiw-dm-check{display:flex;align-items:center;gap:10px;font-family:var(--hiw-mono);font-size:11px;color:var(--hiw-muted);opacity:0;transition:opacity .45s ease,color .3s ease}
.hiw-dm-check.is-on{opacity:1}
.hiw-dm-check.is-ok{color:var(--hiw-lime)}
.hiw-dm-check__line{flex:1;height:1px;background:var(--hiw-panel-line)}
.hiw-dm-stack{display:grid}
.hiw-dm-typing{grid-area:1/1;align-self:start;justify-self:start;display:flex;gap:5px;background:var(--hiw-field);border:1px solid var(--hiw-panel-line);border-radius:18px 18px 18px 6px;padding:13px 14px;opacity:0;transition:opacity .25s ease}
.hiw-dm-typing.is-on{opacity:1}
.hiw-dm-typing__dot{width:6px;height:6px;border-radius:50%;background:var(--hiw-text-3);opacity:.3}
.hiw-dm-in{grid-area:1/1;max-width:88%;background:var(--hiw-field);border:1px solid var(--hiw-panel-line);border-radius:18px 18px 18px 6px;padding:14px;display:flex;flex-direction:column;gap:12px}
.hiw-dm-in__text{font-size:14px;line-height:1.5;color:var(--hiw-text-2)}
.hiw-dm-in__btn{background:var(--hiw-olive);color:var(--hiw-lime);font-weight:700;font-size:13.5px;text-align:center;padding:10px;border-radius:12px}
.hiw-dm-delivered{display:flex;align-items:center;gap:8px;font-family:var(--hiw-mono);font-size:11px;color:var(--hiw-lime)}
.hiw-db{position:relative;margin-top:auto;padding-top:14px;border-top:1px solid var(--hiw-divider);display:flex;flex-direction:column;gap:10px}
.hiw-db__row{display:flex;align-items:center;gap:10px}
.hiw-db__col{display:flex;flex-direction:column;gap:2px;min-width:0}
.hiw-db__name{font-weight:700;font-size:13.5px}
.hiw-db__meta{font-family:var(--hiw-mono);font-size:11px;color:var(--hiw-muted)}
.hiw-db__plus{position:absolute;right:0;top:10px;background:var(--hiw-lime);color:var(--hiw-lime-ink);font-size:11px;font-weight:800;padding:4px 9px;border-radius:99px;opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform 1.1s ease}
.hiw-db__plus.is-on{opacity:1}
.hiw-db__plus.is-up{transform:translateY(-10px)}

/* ===== Адаптив (из эталона; пороги — по ширине сетки, см. шапку файла) ===== */
@container hiw-panel (max-width: 299px){
  .hiw-f-two{grid-template-columns:minmax(0,1fr)}
}
@container hiw (max-width: 1183px){
  .hiw__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;max-width:560px;row-gap:16px}
  .hiw-card{grid-row:auto;display:flex;flex-direction:column;gap:14px}
}
@container hiw (max-width: 480px){
  .hiw-card{padding:20px;border-radius:24px}
  .hiw-card__title{font-size:22px}
  .hiw-panel{padding:16px;border-radius:18px}
}