/* Блок «Возможности» (#features) на главной — handoff «вариант 2a», 2026-09-26.
   Эталон: design_handoff_features/reference/features.html (сверка — FeaturesDemo.seek(ms) в консоли), тайминги — reference/timeline.md.
   Значения, тексты и тайминги — 1 в 1 с эталоном. Повторяющиеся элементы — классами ftr-*, уникальные детали иллюстраций и
   начальные состояния анимации — инлайном в index.html (движок features.js всё равно пишет состояния инлайном).
   Отступы секции даёт .lp-section сайта; шапка — классы сайта .eyebrow / .h2-section / .body-text.
   Шрифты локальные (fonts/fonts.css): Manrope, JetBrains Mono, Geologica, Golos Text. Google Fonts не подключаем (152-ФЗ). */

/* корень: body сайта 17px / 1.55 — эталон собран на 16px / normal */
/* font-weight 500: эталон подключает Manrope только 500–800, поэтому текст без явного начертания у него рисуется 500 */
.ftr{font-family:'Manrope',system-ui,sans-serif;font-weight:500;font-size:16px;line-height:normal;letter-spacing:normal;color:var(--lt-fg-fafaf8,#FAFAF8)}
.ftr.is-instant *{transition:none!important}
.ftr-head{display:flex;flex-direction:column;gap:14px}
.ftr-lead{margin-top:2px;max-width:680px;font-family:var(--f-body);font-size:17px}
.ftr-head .h2-section{margin:0}

/* пункты списка — кнопки: фокус с клавиатуры (перебивает инлайновую тень от движка) */
[data-seek]{outline:none}
[data-seek]:focus-visible{box-shadow:inset 0 0 0 2px var(--lt-sh-d0ff07,#D0FF07)!important}

/* компоненты (значения — из эталона) */
.ftr-grid{margin-top:22px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:stretch}   /* отступ от подзаголовка: 22px (по макету 44, вдвое меньше — решение владельца 2026-09-27) */
.ftr-list{background:var(--lt-bg-090909,#090909);border:1px solid var(--lt-ln-1a1a1a,#1A1A1A);border-radius:28px;padding:10px;display:flex;flex-direction:column;gap:4px}
.ftr-item{cursor:pointer;border-radius:20px;padding:16px 22px;display:flex;flex-direction:column;transition:background .4s ease,box-shadow .4s ease}
.ftr-item__row{display:flex;align-items:baseline;gap:14px}
.ftr-item__num{flex:none;width:22px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--lt-fg-d0ff07,#D0FF07)}
.ftr-item__title{flex:1;font-weight:800;font-size:21px;line-height:1.2;letter-spacing:-.01em;transition:color .3s ease}
.ftr-tag{flex:none;align-self:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lt-fg-d0ff07,#D0FF07);border:1px solid var(--lt-ln-596b08,#596B08);border-radius:99px;padding:4px 9px;white-space:nowrap}
.ftr-item__body{padding:12px 0 4px 36px;display:flex;flex-direction:column;gap:14px}
.ftr-item__text{font-weight:500;font-size:15.5px;line-height:1.55;color:var(--lt-fg-afafab,#AFAFAB)}
.ftr-item__facts{padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px;line-height:1.45;font-weight:500;color:var(--lt-fg-e4e4e0,#E4E4E0)}
.ftr-fact{display:flex;gap:10px}
.ftr-lime{color:var(--lt-fg-d0ff07,#D0FF07)}
.ftr-track{height:3px;border-radius:99px;background:var(--lt-bg-1d1d1d,#1D1D1D);overflow:hidden}
.ftr-fill{height:100%;border-radius:99px;background:var(--lt-bg-d0ff07,#D0FF07)}
.ftr-clip{overflow:hidden;min-height:0}
.ftr-stage{background:var(--lt-bg-090909,#090909);border:1px solid var(--lt-ln-1a1a1a,#1A1A1A);border-radius:28px;padding:20px 24px 22px;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr;gap:12px 28px}
.ftr-label{grid-area:1/1;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;color:var(--lt-fg-71716f,#71716F);text-transform:uppercase}
.ftr-phone{width:300px;height:550px;border-radius:40px;background:var(--lt-bg-050505,#050505);border:1px solid var(--lt-ln-262626,#262626);padding:11px}
.ftr-screen{position:relative;height:100%;border-radius:30px;background:var(--lt-bg-0b0b0b,#0B0B0B);overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.ftr-log{display:grid;align-content:start;min-width:0}
.ftr-layer.ftr-layer--dm{grid-area:1/1;display:flex;flex-direction:column;gap:12px;padding:16px 14px}
.ftr-layer.ftr-layer--story{grid-area:1/1;display:flex;flex-direction:column;padding:14px;background:var(--lt-bg-151515,#151515)}
.ftr-dm-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--lt-ln-151515,#151515)}
.ftr-ava.ftr-ava--dm{flex:none;width:32px;height:32px;border-radius:50%;background:var(--lt-bg-d0ff07,#D0FF07);color:var(--lt-fg-0a0b06,#0A0B06);display:grid;place-items:center;font-weight:800;font-size:13px}
.ftr-ava{flex:none;width:26px;height:26px;border-radius:50%;background:var(--lt-bg-d0ff07,#D0FF07);color:var(--lt-fg-0a0b06,#0A0B06);display:grid;place-items:center;font-size:11px;font-weight:800}
.ftr-col2{display:flex;flex-direction:column;gap:2px}
.ftr-name{font-weight:700;font-size:14px}
.ftr-name.ftr-name--sm{font-weight:700;font-size:13px}
.ftr-online{font-size:12px;color:var(--lt-fg-7f7f7d,#7F7F7D)}
.ftr-sys{text-align:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--lt-fg-707070,#707070)}
.ftr-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--lt-fg-707070,#707070)}
.ftr-bubble{background:var(--lt-bg-101010,#101010);border:1px solid var(--lt-ln-1d1d1d,#1D1D1D);border-radius:18px 18px 18px 6px;padding:14px;display:flex;flex-direction:column;gap:10px}
.ftr-bubble__text{font-size:14px;line-height:1.5;color:var(--lt-fg-e4e4e0,#E4E4E0)}
.ftr-btn{background:var(--lt-bg-2b3214,#2B3214);color:var(--lt-fg-d0ff07,#D0FF07);font-weight:700;font-size:13px;text-align:center;padding:9px;border-radius:11px}
.ftr-typing{grid-area:1/1;justify-self:start;align-self:start;background:var(--lt-bg-101010,#101010);border:1px solid var(--lt-ln-1d1d1d,#1D1D1D);border-radius:18px 18px 18px 6px;padding:13px 14px}
.ftr-typing__dots{display:flex;gap:5px}
.ftr-typing__dot{width:6px;height:6px;border-radius:50%;background:var(--lt-bg-afafab,#AFAFAB)}
.ftr-check{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11px;white-space:nowrap}
.ftr-rule{flex:1;height:1px;background:var(--lt-bg-1d1d1d,#1D1D1D)}
.ftr-story__bars{display:flex;gap:3px}
.ftr-story__bar{flex:1;height:2px;border-radius:2px;background:var(--lt-bg-333333,#333);overflow:hidden}
.ftr-story__fill{display:block;height:100%;background:var(--lt-bg-e4e4e0,#E4E4E0)}
.ftr-story__author{margin-top:10px;display:flex;align-items:center;gap:8px}
.ftr-story__title{margin-top:auto;font-weight:800;font-size:26px;line-height:1.12;letter-spacing:-.02em}
.ftr-log__layer{grid-area:1/1;display:flex;flex-direction:column;gap:18px}
.ftr-log__item{display:flex;gap:12px}
.ftr-dot{flex:none;margin-top:5px;width:7px;height:7px;border-radius:50%;background:var(--lt-bg-d0ff07,#D0FF07)}
.ftr-dot.ftr-dot--muted{flex:none;margin-top:5px;width:7px;height:7px;border-radius:50%;background:var(--lt-bg-7f7f7d,#7F7F7D)}
.ftr-dot.ftr-dot--warn{flex:none;margin-top:5px;width:7px;height:7px;border-radius:50%;background:var(--lt-bg-ff8a6b,#FF8A6B)}
.ftr-log__col{display:flex;flex-direction:column;gap:3px;min-width:0}
.ftr-log__time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--lt-fg-707070,#707070)}
.ftr-log__text{font-size:14px;line-height:1.45;color:var(--lt-fg-e4e4e0,#E4E4E0)}
.ftr-pill{background:var(--lt-bg-d0ff07,#D0FF07);color:var(--lt-fg-0a0b06,#0A0B06);font-size:12px;font-weight:800;padding:5px 11px;border-radius:99px}
.ftr-seg{padding:4px 7px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap;color:var(--lt-fg-8a8a86,#8A8A86)}
.ftr-tile{background:var(--lt-bg-101010,#101010);border:1px solid var(--lt-ln-1d1d1d,#1D1D1D);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;color:var(--lt-fg-fafaf8,#FAFAF8)}
.ftr-tile.ftr-tile--accent{background:var(--lt-bg-d0ff07,#D0FF07);border:1px solid var(--lt-ln-d0ff07,#D0FF07);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;color:var(--lt-fg-0a0b06,#0A0B06)}
.ftr-tile__label{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;color:var(--lt-fg-8a8a86,#8A8A86)}
.ftr-tile__num{font-weight:800;font-size:19px;letter-spacing:-.02em}
.ftr-legend__item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;line-height:1.2;color:var(--lt-fg-dcdcd4,#DCDCD4)}
.ftr-funnel__row{display:flex;flex-direction:column;gap:5px}
.ftr-funnel__head{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:600}
.ftr-funnel__val{color:var(--lt-fg-afafab,#AFAFAB);white-space:nowrap}
.ftr-funnel__track{height:6px;border-radius:99px;background:var(--lt-bg-1d1d1d,#1D1D1D);overflow:hidden}
.ftr-hbar{flex:1;border-radius:3px 3px 1px 1px;background:var(--lt-bg-2b3214,#2B3214);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.ftr-hbar.ftr-hbar--peak{flex:1;border-radius:3px 3px 1px 1px;background:var(--lt-bg-d0ff07,#D0FF07);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.ftr-h3{font-weight:700;font-size:15px}
.ftr-stack{display:flex;flex-direction:column;gap:10px}
.ftr-table__th{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lt-fg-707070,#707070)}
.ftr-table__camp{display:flex;align-items:center;gap:8px;min-width:0}
.ftr-chip{flex:none;background:var(--lt-bg-21280d,#21280D);color:var(--lt-fg-d0ff07,#D0FF07);font-weight:800;font-size:11px;letter-spacing:.02em;padding:3px 7px;border-radius:6px}
.ftr-table__src{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--lt-fg-8a8a86,#8A8A86);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftr-table__num{font-weight:700;text-align:right}
.ftr-table__rate{font-weight:800;color:var(--lt-fg-d0ff07,#D0FF07);text-align:right}
.ftr-expand{display:grid}
.ftr-cap{display:grid}

/* ===== Адаптив (пороги — как в эталоне, по ширине окна) ===== */
@media (max-width:1331px){
  .ftr-grid{grid-template-columns:minmax(0,1fr) 658px}
}
@media (max-width:1199px){
  .ftr-grid{grid-template-columns:minmax(0,1fr);max-width:760px}
  .ftr-stage{order:-1}
}
@media (max-width:700px){
  .ftr-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .ftr-cap--user{order:1}
  .ftr-phone{order:2;justify-self:center}
  .ftr-cap--bot{order:3;margin-top:10px}
  .ftr-log{order:4}
}
@media (max-width:620px){
  .ftr-stage{padding:16px;border-radius:24px}
  .ftr-list{border-radius:24px;padding:6px}
  .ftr-item{padding:14px}
  .ftr-item__body{padding-left:0}
  .ftr-phone{width:100%;max-width:300px}
}