/* index3.html — третья главная: подача первой (рисунки и заголовки пером, рисуются на глазах — строгим пером, ровные
   линии) + лёгкость и продажи второй (белый фон, разделы чередуются с очень светлыми тонами, Onest, CSS-кнопки, мягкие тени).
   tush.css здесь НЕ подключён (в нём виньетка, бумага с зерном, рукописный шрифт во всём тексте); нужное из него и из
   v3.css — выборочно ниже. Свои переменные — с приставкой --i3-: tush.js по выбору в пульте переписывает --ink/--red/--paper/
   --soft/--line прямо на <html>, а вид этой страницы от пульта зависеть не должен. */
@font-face { font-family: 'Pangolin'; src: url(../fonts/pangolin.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Pangolin'; src: url(../fonts/quotes.woff2) format('woff2'); unicode-range: U+00AB, U+00BB, U+201C, U+201E; font-display: swap; }

:root {
  --i3-navy: #1B2440; --i3-text: #4F5A72; --i3-muted: #6B7489;
  --i3-acc: #3B7BF6; --i3-acc-d: #2C64D8; --i3-pen: #5797FF;
  --i3-green: #16A34A; --i3-green-d: #15803D; --i3-green-bg: #EAF8EF;
  --i3-sun: #FFC24B; --i3-sun-d: #A16207; --i3-sun-bg: #FFF6E0;
  --i3-coral: #FF7A5C; --i3-coral-d: #C2410C; --i3-coral-bg: #FFF0EB;
  --i3-lilac: #8B7CF6; --i3-lilac-d: #6D5BD0; --i3-lilac-bg: #F3F0FF;
  --i3-blue-bg: #EAF1FF;
  --i3-sec-blue: #F4F8FF; --i3-sec-mint: #F1FAF5; --i3-sec-cream: #FFFAF1;
  --i3-border: #E3E8F2; --i3-r: 20px;
  --i3-shadow: 0 10px 30px rgba(27, 36, 64, .07), 0 2px 6px rgba(27, 36, 64, .05);
  --i3-f: 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* ШРИФТЫ ЗАГОЛОВКОВ — менять здесь (круг 2, п.6: шрифт подбирается отдельно):
     --f-head — обычные заголовки (карточки, шаги, тарифы, витрина, подвал); --hand — заголовки пером (h1/h2, логотип):
     по нему браузер раскладывает буквы, а штрихи пера берутся из файла <html data-pen-font> (tush.js) — меняются парой. */
  --f-head: var(--i3-f);
  /* перо заголовков — Didact Gothic потолще (Юра 04.10 ~15:55, «В+»): <html data-pen-font="art/pero_didact.json"> + этот шрифт
     (Google Fonts, подключён в index3.html); Pangolin остаётся запасным и для подписей в сцене (js/shema.js, iso.js) */
  --hand: 'Didact Gothic', 'Pangolin', 'Segoe Print', sans-serif;
  --gut: clamp(16px, 4vw, 32px);
  /* общий блок сцен (css/shema.css) берёт эти: */
  --ink: #4F5A72; --red: #3B7BF6; --paper: #FFFFFF; --soft: #6B7489;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body.i3 { margin: 0; font: 400 18px/1.55 var(--i3-f); color: var(--i3-text); background: #FFFFFF; overflow-x: clip; }
.i3 h1, .i3 h2, .i3 h3, .i3 h4 { color: var(--i3-navy); margin: 0; font-weight: 400; letter-spacing: 0; }
.i3 a { color: inherit; }
.i3 img, .i3 canvas { display: block; }
.i3 p { margin: 0; }
/* Юра 04.10: «жирный текст слишком — не надо» — Onest не жирнее 600 (основной 400, подписи/цифры/названия — 500–600) */
.i3 b, .i3 strong { font-weight: 600; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i3-hidden { display: none !important; }
.nw { white-space: nowrap; }
.i3-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }
.pult { display: none !important; }                 /* пульт цветов (common.js) — только на первом варианте */
section[id], div[id="how"] { scroll-margin-top: 84px; }

/* ---------- подложки пером (js/i3.js, data-panel): холст за содержимым, выступает на 8 px за края (место под перехлёст пера).
   Правило стоит раньше остальных: если у блока своё position (absolute у метки) — оно перебивает это. ---------- */
[data-panel] { position: relative; isolation: isolate; }
/* селектор сильнее, чем «.i3-chip canvas», «.i3-ic canvas» и т. п. у значков внутри блока */
[data-panel] > canvas.i3-panel-cv { position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); max-width: none;
  margin: 0; aspect-ratio: auto; z-index: -1; pointer-events: none; }
html:not(.js) [data-panel] { background: #F4F8FF; border-radius: 20px; }      /* без скриптов — просто светлая подложка */

/* ---------- заголовки пером: HTML-текст прозрачный, поверх — холст, на котором он пишется (tush.js) ---------- */
.pen { position: relative; --pen: #1B2440; font-family: var(--hand); font-weight: 400; }
.pen .r { --pen: #3B7BF6; color: #3B7BF6; }
.pen .r.g { --pen: #16A34A; color: #16A34A; }
html.js .pen.pen-on, html.js .pen.pen-on .r { color: transparent; }
.pen ::selection, .pen::selection { color: var(--i3-navy); background: rgba(59, 123, 246, .18); }
.pen-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
h1.pen, h2.pen { text-wrap: balance; }

/* ---------- кнопки (как index2): заливка, скругление ---------- */
.i3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 14px;
  background: var(--i3-acc); color: #fff !important; font: 600 18px/1.15 var(--i3-f); text-decoration: none; border: 0; cursor: pointer; text-align: center;
  transition: transform .15s, background .15s; }                     /* без синей тени: Юра «тени под синим/зелёным — убери» */
.i3-btn:hover { background: var(--i3-acc-d); transform: translateY(-1px); }
.i3-btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.i3-btn-o { background: #fff; color: var(--i3-navy) !important; box-shadow: inset 0 0 0 1.5px var(--i3-border); }
.i3-btn-o:hover { background: var(--i3-sec-blue); box-shadow: inset 0 0 0 1.5px #C9D3E6; }
.i3-btn-s { min-height: 44px; padding: 0 18px; font-size: 16px; border-radius: 12px; box-shadow: none; white-space: nowrap; }
.i3-btn:focus-visible, .i3 summary:focus-visible, .i3-tabs button:focus-visible, .reels-filter button:focus-visible { outline: 3px solid rgba(59, 123, 246, .45); outline-offset: 3px; }

/* ---------- шапка: белая, ровная ---------- */
.i3-top { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--i3-border); }
.i3-top .i3-wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.i3-logo { font-size: 34px; line-height: 1; text-decoration: none; white-space: nowrap; padding-bottom: 4px; --pen: #1B2440; }
.i3-nav { display: flex; gap: 24px; margin-left: 12px; }
.i3-nav a { font-size: 16px; text-decoration: none; color: var(--i3-text); }
.i3-nav a:hover { color: var(--i3-navy); }
.i3-login { margin-left: auto; font-size: 16px; text-decoration: none; font-weight: 500; color: var(--i3-navy) !important; }

/* ---------- общие заголовки секций ---------- */
.i3-head { max-width: 780px; margin-bottom: 30px; }
.i3-eyebrow { margin: 0 0 12px !important; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--i3-acc-d); }
.i3-head h2, .i3-final h2 { font-size: clamp(34px, 3.9vw, 54px); line-height: 1.08; }
.i3-sub { margin-top: 14px !important; font-size: 19px; }

/* ---------- 1. герой ---------- */
.i3-hero { padding: 56px 0 36px; position: relative; }
.i3-hero > .i3-wrap { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 36px; align-items: center; }
.i3-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px !important; padding: 8px 16px 8px 14px;
  color: #136C33; font-size: 15px; font-weight: 600; }                                  /* подложка — пером (data-panel) */
.i3-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--i3-green); box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.i3-hero h1 { font-size: clamp(46px, 5.4vw, 80px); line-height: 1.04; margin-bottom: 24px; }   /* Юра 04.10: без второй строки, «сделай больше» */
.i3-hero h1 .r { display: block; }
.i3-lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; margin: 0 0 28px !important; max-width: 540px; }
.i3-who { display: inline-block; padding: 0 9px; margin: 2px 1px; line-height: 1.45; color: var(--i3-navy); font-weight: 600; }   /* метки пером (data-panel) */
.i3-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.i3-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; font-size: 16px; color: var(--i3-navy); }
.i3-trust li { display: flex; align-items: center; gap: 6px; }
.i3-trust canvas { width: 24px; height: 24px; flex: none; }
/* рисунок героя: два холста (рисунок и живой слой поверх), под ними мягкие цветные пятна */
.i3-hero-art { position: relative; container-type: inline-size; }
.i3-hero-stage { position: relative; width: 100%; aspect-ratio: 800 / 600; }
@container (max-width: 559px) { .i3-hero-stage { aspect-ratio: 360 / 500; } }
.i3-hero-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.i3-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.i3-blob.b1 { width: 44%; aspect-ratio: 1; left: 34%; top: 2%; background: #EEF4FF; }
.i3-blob.b2 { width: 38%; aspect-ratio: 1.1; right: -3%; top: 36%; background: #EAF8EF; border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; }
.i3-blob.b3 { width: 34%; aspect-ratio: 1; left: -2%; top: 46%; background: #FFF4DF; border-radius: 52% 48% 46% 54% / 48% 52% 48% 52%; }
@container (max-width: 559px) { .i3-blob.b1 { left: 4%; width: 52%; } .i3-blob.b3 { display: none; } }

/* ---------- 2. цифры ---------- */
.i3-stats { padding: 14px 0 64px; }
.i3-stats .i3-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.i3-stat { padding: 24px 22px 22px; }                                                    /* подложка — пером (data-panel) */
.i3-stat b { display: block; font-size: clamp(36px, 3.4vw, 48px); line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.i3-stat canvas.i3-under { width: 100%; max-width: 150px; height: 14px; margin: 6px 0 10px; }
.i3-stat span { display: block; font-size: 16px; line-height: 1.4; color: var(--i3-text); }
.i3-stat.c-green b { color: var(--i3-green); }
.i3-stat.c-blue b { color: var(--i3-acc); }
.i3-stat.c-sun b { color: #B7791F; }
.i3-stat.c-coral b { color: #E5533A; }

/* ---------- 3. сцены — общий блок, переоформлен под эту страницу ---------- */
.i3-how { padding: 72px 0 70px !important; background: var(--i3-sec-blue); }
/* переключатели пером (js/i3.js, penSwitch) — вкладки сценариев, фильтр роликов, вид витрины (круг 2, п.3; правки критика):
   без овалов, рамок и заливок — значок пером в цвете + подпись; у выбранного — светлый круг под значком, цвет подписи и
   ровный маркер пером под словом; значок живёт своей движущейся частью (у выбранного — тихая петля, наведение — оживает).
   Селекторы с button.i3-sw сильнее «.shema-tabs button canvas» / «.vit-switch button canvas» общих стилей. */
button.i3-sw { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--i3-navy) !important; background: none !important;
  border: 0 !important; border-radius: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.i3-sw > canvas { display: none !important; }           /* холст общего скрипта (овал, рамка) — на этой странице не нужен */
.i3-sw-ic { position: relative; flex: none; width: 56px; height: 56px; transition: transform .25s ease-out; }
button.i3-sw .i3-sw-ring, button.i3-sw .i3-sw-icv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: auto; pointer-events: none; }
.i3-sw-t { position: relative; padding: 2px 0 8px; }
button.i3-sw .i3-sw-mk { position: absolute; inset: auto; left: -2px; bottom: -2px; width: calc(100% + 4px); height: 10px; z-index: auto; pointer-events: none; }
button.i3-sw:hover .i3-sw-ic { transform: translateY(-2px); }
button.i3-sw:hover .i3-sw-t, button.i3-sw[aria-selected="true"], button.i3-sw[aria-pressed="true"] { color: var(--tab, var(--i3-acc-d)) !important; }
.i3-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 26px -6px !important; }
.i3-tabs button { font: 600 18px/1.2 var(--i3-f) !important; padding: 4px 10px 4px 4px !important; }
/* сцена, «Что работает», итоги — прямо на фоне раздела, без карточки и рамки (круг 2, п.3) */
.i3-scene-card { padding: 0; }
.i3-how .shema-h { color: var(--i3-acc-d); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.i3-how .fn { font-family: var(--i3-f); font-size: 17px; color: var(--i3-navy); }
.i3-how .fn canvas { width: 26px; height: 26px; }
.i3-how .shema-fns li.on .fn { color: var(--i3-acc-d); font-weight: 600; }
.i3-how .fn-line { font-size: 15px; margin-left: 42px; color: var(--i3-text); }
.i3-how .oc { font-family: var(--i3-f); }
.i3-how .oc b { font-size: 16px; color: var(--i3-navy); font-weight: 600; }
.i3-how .oc small { font-size: 14px; color: var(--i3-muted); }
.i3-how .shema-ocs li.on b, .i3-how .shema-ocs li.on small { color: var(--i3-acc-d); }
.i3-how .shema-cap { font-size: 17px; color: var(--i3-navy); }
.i3-how .shema-cap b { color: var(--i3-acc-d); font-weight: 600; }
/* широкий экран: «Что вы получаете» — в правой колонке под «Что работает» (а не под сценой: справа оставался пустой
   прямоугольник ~330 × 330), сцена — на обе строки (правка критика круга 2). Блок прижат к низу колонки: у текущей
   функции раскрывается строка «что это даёт», и если бы он стоял сразу под списком — прыгал бы на каждом шаге */
@media (min-width: 1101px) {
  .i3-how .shema-body { grid-template-areas: "scene side" "scene get"; grid-template-rows: auto 1fr; }
  .i3-how .shema-get { align-self: end; padding-top: 18px; }
  .i3-how .shema-ocs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .i3-how .oc small { min-height: 0; }
}
/* витрина «С компьютера | С телефона» — тоже прямо на фоне раздела; текст — по верху рисунка, а не по центру */
.i3-vit-card { margin-top: 44px !important; padding: 0; }
.i3-vit-card .vit-text { align-self: start; padding-top: 12px; }
.i3-vit-card .vit-text h3 { font: 600 26px/1.2 var(--f-head); color: var(--i3-navy); }
.i3-vit-card .vit-text > p.soft { font-size: 16px; color: var(--i3-text); }
.i3-vit-card .vit-switch { gap: 4px 22px; margin-left: 0; }
.i3-vit-card .vit-switch button { font: 600 16px/1.2 var(--i3-f); padding: 6px 2px; }      /* без рамки — цвет и маркер (penSwitch) */
.i3-vit-card .vit-note { font-size: 14px !important; color: var(--i3-muted); }
.i3-vit-card .vit-open { color: var(--i3-acc-d); font-weight: 600; font-size: 17px; }

/* ---------- 5. калькулятор ---------- */
.i3-money { padding: 72px 0; background: var(--i3-sec-cream); }
.i3-calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.i3-calc-in { padding: 28px; }                     /* подложка и плитки итогов — пером (data-panel, строгие рамки) */
.i3-calc-in label { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 8px; margin-bottom: 22px; font-size: 17px; color: var(--i3-navy); font-weight: 500; }
.i3-calc-in output { font-size: 30px; line-height: 1.1; font-weight: 600; color: var(--i3-acc-d); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* ползунки (круг 2, п.5): толстая дорожка, заполненная часть — цветом акцента (--k ставит js/i3.js), крупный круглый бегунок
   с обводкой и тенью; мышь, палец и клавиши — штатные у input range; фокус с клавиатуры — кольцо вокруг бегунка */
.i3-range { -webkit-appearance: none; appearance: none; grid-column: 1 / -1; width: 100%; height: 36px; margin: 0; padding: 0; background: transparent; cursor: pointer; --k: .1;
  --fill: calc(14px + (100% - 28px) * var(--k)); }
.i3-range:focus { outline: none; }
.i3-range::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(to right, var(--i3-acc) 0 var(--fill), #E3E8F2 var(--fill) 100%); }
.i3-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%; background: #fff;
  border: 3px solid var(--i3-acc); box-shadow: 0 3px 10px rgba(27, 36, 64, .22); transition: transform .15s ease, box-shadow .15s ease; }
.i3-range:hover::-webkit-slider-thumb, .i3-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.i3-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(59, 123, 246, .28), 0 3px 10px rgba(27, 36, 64, .22); }
.i3-range::-moz-range-track { height: 10px; border-radius: 99px; background: #E3E8F2; }
.i3-range::-moz-range-progress { height: 10px; border-radius: 99px; background: var(--i3-acc); }
.i3-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--i3-acc); box-shadow: 0 3px 10px rgba(27, 36, 64, .22); transition: transform .15s ease; }
.i3-range:hover::-moz-range-thumb, .i3-range:active::-moz-range-thumb { transform: scale(1.12); }
.i3-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(59, 123, 246, .28), 0 3px 10px rgba(27, 36, 64, .22); }
.i3-note { margin: 0; font-size: 14px; color: var(--i3-text); line-height: 1.45; }
.i3-calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.i3-res { padding: 20px 22px; }
.i3-res span { display: block; font-size: 15px; color: var(--i3-text); margin-bottom: 6px; }
.i3-res b { font-size: clamp(22px, 2.2vw, 30px); color: var(--i3-navy); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.i3-res.hl b { color: var(--i3-green); font-size: clamp(30px, 3vw, 40px); }
.i3-res.hl2 b { color: var(--i3-acc-d); }
.i3-res.wide { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.i3-res.wide span { margin: 0; color: #5B4A1E; } .i3-res.wide b { color: var(--i3-sun-d); }
.i3-zero { position: relative; display: inline-block; padding: 0 6px; }
.i3-ring { position: absolute; left: -14px; top: -10px; width: calc(100% + 28px); height: calc(100% + 20px); pointer-events: none; }

/* ---------- 6. возможности ---------- */
.i3-features { padding: 84px 0 64px; }
.i3-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.i3-card { padding: 24px; transition: transform .2s; }                                    /* рамка и подложка значка — пером */
.i3-card:hover { transform: translateY(-2px); }
.i3-ic { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 16px; }
.i3-ic canvas { width: 40px; height: 40px; }
.i3-card h3 { font: 600 19px/1.25 var(--f-head); margin-bottom: 8px; }
.i3-card p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.i3-channels { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.i3-ch-title { margin: 0 8px 0 0 !important; font-weight: 600; color: var(--i3-navy); }
.i3-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; font-size: 15px; line-height: 1.35; }
.i3-chip canvas { width: 26px; height: 26px; flex: none; }
.i3-chip b { color: var(--i3-navy); }

/* ---------- 7. путь покупателя и команды ---------- */
.i3-journey { padding: 76px 0 70px; background: var(--i3-sec-mint); }
.i3-journey-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.i3-jcol { padding: 26px 24px 22px; }
.i3-jcol h3 { font: 600 20px/1.3 var(--f-head); margin-bottom: 18px; }
.i3-jsteps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.i3-jsteps li { text-align: center; font-size: 15.5px; line-height: 1.3; color: var(--i3-navy); }
.i3-jsteps canvas { width: 100%; aspect-ratio: 1; margin-bottom: 6px; }

/* ---------- 8. ролики (reels.js): рамка кадра — общая система подложек (js/i3.js: строгая тонкая линия со скруглением,
   светлая заливка цвета формы), акцент ролика — цвет формы, как вкладки (reels.js читает --reel-acc и --reel-frame) ---------- */
.i3-reels { padding: 76px 0 80px; position: relative; }
.reels-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 26px; }
.reels-head .i3-head { margin-bottom: 0; }
.reels-head .i3-btn { flex: none; }
.reels-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 22px; }
/* фильтр «Все / Самозанятые / ИП / ООО» — как вкладки сценариев (penSwitch), значки поменьше; стрелки — светлый круг в тон */
.reels-filter { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.reels-filter button { font: 600 16px/1.2 var(--i3-f); padding: 2px 6px 2px 0; }
.reels-filter .i3-sw-ic { width: 40px; height: 40px; }
.reels-filter .i3-sw-t { padding-bottom: 7px; }
.reels-arrows { display: flex; gap: 8px; }
.reels-arrows button { width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer; }
.reels-arrows button:disabled { opacity: .35; cursor: default; }
.reels-arrows button canvas { width: 52px; height: 52px; }
.reels-arrows button > canvas:not(.i3-arr) { display: none; }       /* серый круг reels.js — вместо него свой (js/i3.js) */
.reels-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 6px; }
.reels-grid::-webkit-scrollbar { display: none; }
/* лента прокручивается и обрезает всё, что за её краем: линия рамки плеера лежит ровно по краю — 2 px запаса слева и
   справа, иначе у первого ролика левая линия вдвое тоньше (на ≤ 860 px у ленты свои поля — там правило не нужно) */
@media (min-width: 861px) { .i3-reels .reels-grid { margin-left: -2px; margin-right: -2px; padding-left: 2px; padding-right: 2px; scroll-padding: 0 2px; } }
.reel { position: relative; scroll-snap-align: start; --reel-frame: none; --reel-acc: #2C64D8; --reel-ink: #2A4E9C; --reel-blob: #D6E4FF; }
.reel[data-form="smz"] { --reel-acc: #15803D; --reel-ink: #1F5E3B; --reel-blob: #CFEEDB; } .reel[data-form="ooo"] { --reel-acc: #6D5BD0; --reel-ink: #4F3FA8; --reel-blob: #E2DCFF; }
.reel[hidden] { display: none; }
.reel-form { color: var(--reel-acc); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px !important; }
.reel-who { font-size: 26px; line-height: 1.2; margin: 0 0 4px !important; }
.reel-sub { color: var(--i3-text); font-size: 15px; margin-bottom: 12px !important; }
.player { position: relative; aspect-ratio: 9 / 16; width: 100%; cursor: pointer; border-radius: 18px; }   /* рамка и заливка — подложка пером */
.player canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.player button.play { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; cursor: pointer; }

/* ---------- 9. три шага ---------- */
.i3-start { padding: 70px 0; background: var(--i3-sec-blue); }
.i3-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.i3-steps li { position: relative; padding: 28px 26px; }
.i3-num { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 600 21px/1 var(--i3-f); margin-bottom: 18px; color: #fff; }
.i3-steps .c-blue .i3-num { background: var(--i3-acc); }
.i3-steps .c-sun .i3-num { background: var(--i3-sun); color: #5B3B00; }
.i3-steps .c-green .i3-num { background: var(--i3-green); }
.i3-steps h3 { font: 600 21px/1.25 var(--f-head); margin-bottom: 8px; }
.i3-steps p { margin: 0; font-size: 16px; }
.i3-step-arrow { position: absolute; right: -42px; top: 50%; width: 40px; height: 30px; margin-top: -15px; pointer-events: none; }

/* ---------- 10. цены ---------- */
.i3-price { padding: 84px 0 64px; }
.i3-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding-top: 14px; }
/* рамки тарифов — живым пером (data-panel="live": лёгкая неровность, второй проход), заливки светлые; у соседей линия в их
   пастельном тоне, «Бизнес» — насыщенной синей и толще (data-w 1.4) — акцент держится цветом, а не только сдвигом */
.i3-plan { position: relative; display: flex; flex-direction: column; padding: 34px 28px 30px; }
.i3-plan.hot { transform: translateY(-8px); }
.i3-stamp { position: absolute; top: -26px; right: 14px; width: 210px; height: 62px; pointer-events: none; }
.i3-plan h3 { font: 600 26px/1.2 var(--f-head); }
.i3-for { margin: 4px 0 16px !important; color: var(--i3-text); font-size: 15px; }
.i3-cost { margin: 0 0 18px !important; font-size: 38px; font-weight: 600; color: var(--i3-navy); letter-spacing: -.03em; white-space: nowrap; }
.i3-cost small { font-size: 16px; font-weight: 500; color: var(--i3-muted); letter-spacing: 0; }
.i3-plan ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; font-size: 16px; }
.i3-plan li { position: relative; padding-left: 32px; }
.i3-plan li canvas { position: absolute; left: 0; top: -1px; width: 24px; height: 24px; }
.i3-plan .i3-btn { margin-top: auto; }

/* ---------- 11. сомнения ---------- */
.i3-faq { padding: 64px 0 80px; background: var(--i3-sec-cream); }
.i3-faq-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; align-items: start; }
.i3-more { display: inline-block; margin-top: 16px; color: var(--i3-acc-d) !important; font-weight: 600; text-decoration: none; }
.i3-faq-list { padding: 6px 26px; }
.i3-faq-list details + details { border-top: 1px solid #F3E6CC; }
.i3-faq-list summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-size: 18px; font-weight: 600; color: var(--i3-navy); }
.i3-faq-list summary::-webkit-details-marker { display: none; }
.i3-faq-list summary canvas.pm { position: absolute; right: 0; top: 18px; width: 28px; height: 28px; }
.i3-faq-list p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.6; }

/* ---------- 12. финал + форма: светлая карточка, девушка у формы пером ---------- */
.i3-final { padding: 70px 0 80px; }
.i3-final-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px; }   /* рамка — живым пером */
.i3-final-text h2 { margin-bottom: 12px; }
.i3-final-text p { margin: 0 0 24px; font-size: 19px; }
.i3-woman { width: 100%; max-width: 300px; aspect-ratio: 1; margin: 22px 0 -48px;
  background: radial-gradient(circle at 50% 46%, #FFF1D6 0 36%, transparent 36.5%); }   /* тёплый круг за девушкой — ровный, не градиент */
.i3-form { min-width: 0; color: var(--i3-text); padding: 26px; display: grid; gap: 14px; }
.i3-form-t { margin: 0; font-weight: 600; color: var(--i3-navy); font-size: 17px; }
.i3-form label { display: grid; gap: 6px; font-size: 14px; color: var(--i3-text); }
/* поля — CSS (доступность), но без тяжёлой рамки: светлая заливка в тон и тонкая граница */
.i3-form input[type=tel], .i3-form input[name=name] { width: 100%; min-width: 0; font: 500 17px var(--i3-f); color: var(--i3-navy); padding: 13px 14px; border-radius: 12px;
  border: 1px solid #CFDBF3; background: #F7FAFF; outline: none; }
.i3-form input:focus { border-color: var(--i3-acc); box-shadow: 0 0 0 4px rgba(59, 123, 246, .15); }
.i3-form input[aria-invalid="true"] { border-color: var(--i3-coral-d); }
.i3-consent { grid-template-columns: 20px 1fr !important; align-items: start; font-size: 13px !important; }
.i3-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--i3-acc); }
.i3-consent a { color: var(--i3-acc-d); }
.i3-status { margin: 0; font-size: 13px; color: var(--i3-text); }

/* ---------- 13. подвал из первого: девиз, улица пером, колонки ---------- */
.i3-foot { padding: 56px 0 40px; background: #F7F9FD; border-top: 1px solid var(--i3-border); font-size: 16px; }
.i3-foot-hero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; margin-bottom: 30px; }
.i3-foot-logo { font-size: clamp(70px, 8.4vw, 120px); line-height: .95; margin-bottom: 22px !important; white-space: nowrap; }
.i3-foot-hero h2 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; margin-bottom: 14px; }
.i3-foot-hero p { color: var(--i3-text); max-width: 420px; }
.i3-street { width: 100%; aspect-ratio: 1536 / 640; }
.i3-foot-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 30px; padding: 30px 0; border-top: 1px solid var(--i3-border); border-bottom: 1px solid var(--i3-border); }
.i3-foot-cols h4 { font: 600 13px/1.3 var(--f-head); color: var(--i3-acc-d); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.i3-foot-cols a { display: block; text-decoration: none; padding: 4px 0; font-size: 16px; }
.i3-foot-cols a:hover { color: var(--i3-acc-d); }
.i3-foot-big { font: 600 20px/1.3 var(--f-head); color: var(--i3-navy); margin-bottom: 4px !important; }
.i3-muted { color: var(--i3-muted); font-size: 15px; }
.i3-soc { display: flex; gap: 10px; margin-top: 16px; }
.i3-soc a { padding: 8px 16px !important; font-weight: 600; font-size: 15px !important; color: var(--i3-navy); }   /* рамка — подложка пером (data-panel), не CSS-овал */
.i3-foot-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; padding: 18px 0 10px; }
.i3-foot-legal a { color: var(--i3-text); text-decoration: none; }
.i3-foot-legal a:hover { color: var(--i3-acc-d); }
.i3-foot-copy { display: flex; justify-content: space-between; gap: 20px; font-size: 14px; color: var(--i3-text); padding-top: 8px; }
.i3-acc { color: var(--i3-acc-d); font-weight: 600; }

/* ---------- липкая кнопка на телефоне (js/v3.js: после героя, прячется у финального блока) ---------- */
.v3-sticky { display: none !important; }
@media (max-width: 760px) {
  .v3-sticky { display: flex !important; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; transform: translateY(160%); transition: transform .25s ease; }
  .v3-sticky.on { transform: none; }
  .i3-foot-on .v3-sticky.on { transform: translateY(160%); }      /* в подвале кнопка не закрывает ссылки (js/i3.js) */
}

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .i3-nav { display: none; }
  .i3-hero > .i3-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .i3-hero-art { max-width: 780px; width: 100%; margin: 0 auto; }
  .i3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i3-calc, .i3-final-card, .i3-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .i3-stats .i3-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i3-journey-cols { grid-template-columns: minmax(0, 1fr); }
  .reels-grid { grid-auto-columns: calc((100% - 24px) / 2); }
  .i3-woman { margin-bottom: 0; max-width: 240px; }
}
@media (max-width: 860px) {
  .reels-head { flex-direction: column; align-items: start; }
  .reels-grid { grid-auto-columns: min(78%, 340px); margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; scroll-padding: 0 var(--gut); gap: 18px; }
  .reels-arrows { display: none; }
  .i3-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .i3-step-arrow { right: auto; left: 50%; top: auto; bottom: -40px; width: 30px; height: 38px; margin: 0 0 0 -15px; }
  .i3-plans { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .i3-plan.hot { transform: none; }
  .i3-foot-hero { grid-template-columns: minmax(0, 1fr); }
  .i3-foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body.i3 { font-size: 17px; }
  .i3-login { display: none; }
  .i3-top .i3-btn-s { margin-left: auto; }
  .i3-hero { padding-top: 30px; }
  .i3-ctas .i3-btn { flex: 1 1 100%; }
  .i3-final-card { padding: 30px 18px; }
  .i3-form { padding: 22px 18px; }
  .i3-calc-out { grid-template-columns: minmax(0, 1fr); }
  .i3-res.wide { display: block; } .i3-res.wide span { margin-bottom: 6px; }
  .i3-faq-list { padding: 4px 18px; }
  .i3-foot-copy { flex-direction: column; }
}
@media (max-width: 520px) {
  .i3-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin-left: -4px !important; }
  .i3-tabs button { font-size: 17px !important; gap: 8px; }
  .i3-tabs .i3-sw-ic { width: 48px; height: 48px; }
  .i3-grid, .i3-stats .i3-wrap { grid-template-columns: minmax(0, 1fr); }
  .i3-jsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .i3-foot-cols { grid-template-columns: minmax(0, 1fr); }
  .i3-plan { padding: 40px 20px 24px; }
  .i3-stamp { right: 8px; width: 190px; }
}
@media (max-width: 400px) {
  .i3-top .i3-wrap { gap: 12px; }
  .i3-logo { font-size: 30px; }
  .i3-top .i3-btn-s { padding: 0 12px; font-size: 14px; min-height: 40px; }
  .i3-head h2, .i3-final h2 { font-size: 32px; }
  .i3-hero h1 { font-size: 46px; }
  .i3-calc-in { padding: 22px 18px; }
  .i3-calc-in output { font-size: 26px; }
  .i3-btn:not(.i3-btn-s) { padding: 0 18px; font-size: 16px; }
  .i3-btn { gap: 8px; }
}
@media (max-width: 360px) {
  .i3-xs-hide { display: none; }
  /* вкладки на самом узком: значок над подписью — «Самозанятые» в строку со значком не помещается в полколонки */
  .i3-tabs button { flex-direction: column; gap: 2px; padding: 4px 2px !important; font-size: 16px !important; }
  .i3-tabs .i3-sw-ic { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .i3-btn, .i3-card { transition: none; } .i3-card:hover { transform: none; }
  .i3-range::-webkit-slider-thumb { transition: none; }      /* по отдельности: чужой псевдоэлемент роняет всё правило */
  .i3-range::-moz-range-thumb { transition: none; }
  .i3-sw-ic { transition: none; } button.i3-sw:hover .i3-sw-ic { transform: none; } }

/* ---------- калькулятор и финал — без коробок (Юра 04.10: «эту подложку переиграть, а то бельмом»; «и тут подложку») ---------- */
.i3-calc-in { padding: 4px 0 0; }
.i3-calc-in .i3-cl { display: inline-flex; align-items: center; gap: 12px; }
.i3-calc-in .i3-ic.sm { width: 40px; height: 40px; margin: 0; flex: none; }
.i3-calc-in .i3-ic.sm > canvas[data-i3icon] { width: 26px; height: 26px; }
.i3-calc-in label + label { padding-top: 22px; border-top: 1.5px dashed #F1DFB8; }
/* финал: весь раздел — мягкая голубая полоса во всю ширину, форма без рамки, поля белые */
.i3-final { background: var(--i3-sec-blue); padding: 76px 0 0; overflow: hidden; }
.i3-final-card { padding: 0; align-items: end; }
.i3-final-text { padding-bottom: 0; }
.i3-final .i3-form { padding: 0 0 76px; align-self: center; }
.i3-final .i3-form input[type=tel], .i3-final .i3-form input[name=name] { background: #FFFFFF; border-color: #D6E2F8; }
@media (max-width: 1100px) { .i3-final .i3-form { padding: 10px 0 60px; } }
@media (max-width: 760px) { .i3-final { padding-top: 56px; } .i3-final-card { padding: 0; } .i3-final .i3-form { padding: 6px 0 50px; } }

/* ---------- плашка согласия на cookie (js/i3-site.js; текст — как на прежнем лендинге) ---------- */
.i3-ck { position: fixed; left: 24px; bottom: 24px; z-index: 60; max-width: min(720px, calc(100vw - 130px)); display: flex; align-items: center; gap: 18px;
  padding: 16px 18px 16px 22px; background: #fff; border: 1.5px solid #D6E2F8; border-radius: 18px; box-shadow: 0 12px 34px rgba(27, 36, 64, .12);
  font: 400 14.5px/1.5 var(--i3-f); color: var(--i3-text); opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s, bottom .25s ease; }
.i3-ck.on { opacity: 1; transform: none; }
.i3-ck p { margin: 0; flex: 1 1 auto; min-width: 0; }
.i3-ck a { color: var(--i3-acc-d); }
.i3-ck-b { display: flex; gap: 8px; flex: none; }
.i3-ck .i3-btn-s { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
@media (max-width: 760px) {
  .i3-ck { left: 12px; right: 12px; bottom: calc(12px + var(--i3-dock, 0px)); max-width: none; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .i3-ck-b .i3-btn { flex: 1 1 0; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .i3-ck { transition: none; } }

/* ---------- чат-бот (виджет с прода /js/chat-widget.js — свой вид под страницу: шрифт, цвета, без жирного) ---------- */
.tgc-root .tgc-btn { background: var(--i3-acc); box-shadow: 0 8px 22px rgba(27, 36, 64, .16); transition: transform .15s, bottom .25s ease; }
.tgc-root .tgc-panel, .tgc-root .tgc-in, .tgc-root .tgc-form input, .tgc-root .tgc-lead-btn, .tgc-root .tgc-form-ok { font-family: var(--i3-f); }
.tgc-root .tgc-panel { box-shadow: 0 24px 60px rgba(27, 36, 64, .2); }
.tgc-root .tgc-head { background: var(--i3-navy); }
.tgc-root .tgc-ava { background: var(--i3-acc); font-weight: 600; }
.tgc-root .tgc-hname, .tgc-root .tgc-form-t, .tgc-root .tgc-form-ok, .tgc-root .tgc-lead-btn { font-weight: 600; }
.tgc-root .tgc-hsub b { color: #7FB0FF; }
.tgc-root .tgc-body { background: #fff; }
.tgc-root .tgc-bot { background: var(--i3-blue-bg); color: var(--i3-navy); border-color: transparent; }
.tgc-root .tgc-user, .tgc-root .tgc-send, .tgc-root .tgc-form-ok { background: var(--i3-acc); }
.tgc-root .tgc-in, .tgc-root .tgc-form input { color: var(--i3-navy); }
.tgc-root .tgc-in:focus, .tgc-root .tgc-form input:focus { border-color: var(--i3-acc); }
.tgc-root .tgc-lead-btn { color: var(--i3-acc-d); border-color: rgba(59, 123, 246, .4); }
.tgc-root .tgc-form { border-color: rgba(59, 123, 246, .35); }
@media (max-width: 760px) {
  /* над липкой кнопкой и плашкой согласия, не поверх них */
  .tgc-root .tgc-btn { right: 14px; bottom: calc(14px + var(--i3-dock, 0px) + var(--i3-ck, 0px)); width: 54px; height: 54px; }
}